@rhi-zone/rainbow-ui 0.2.0-alpha.4 → 0.2.0-alpha.6

package/dist/{html-C8SnQjvU.js → html-Bl4HvyCp.js}

@@ -40,50 +40,50 @@ const u = (t, ...s) => e("html")(t, ...s), m = (t, ...s) => e("head")(t, ...s),
 }, v = (t, s) => {
   const n = document.createElement("title");
   return c(n, t), n.textContent = s, { _tag: "title", node: n };
-}, _ = (t, ...s) => e("div")(t, ...s), y = (t, ...s) => e("section")(t, ...s), x = (t, ...s) => e("article")(t, ...s), E = (t, ...s) => e("aside")(t, ...s), k = (t, ...s) => e("header")(t, ...s), S = (t, ...s) => e("footer")(t, ...s), C = (t, ...s) => e("main")(t, ...s), N = (t, ...s) => e("nav")(t, ...s), j = (t, ...s) => e("h1")(t, ...s), w = (t, ...s) => e("h2")(t, ...s), G = (t, ...s) => e("h3")(t, ...s), O = (t, ...s) => e("h4")(t, ...s), q = (t, ...s) => e("h5")(t, ...s), T = (t, ...s) => e("h6")(t, ...s), P = (t, ...s) => e("p")(t, ...s), A = (t, ...s) => e("a")(t, ...s), V = (t, ...s) => e("span")(t, ...s), z = (t, ...s) => e("em")(t, ...s), I = (t, ...s) => e("strong")(t, ...s), M = (t, ...s) => e("code")(t, ...s), B = (t, ...s) => e("pre")(t, ...s), D = (t, ...s) => e("blockquote")(t, ...s), F = (t, ...s) => e("i")(t, ...s), H = (t, ...s) => e("b")(t, ...s), J = (t, ...s) => e("small")(t, ...s), K = (t, ...s) => e("abbr")(t, ...s), L = () => ({ _tag: "br", node: document.createElement("br") }), Q = (t = {}) => l("hr")(t), R = (t) => l("img")(t), U = (t, ...s) => e("ul")(t, ...s), W = (t, ...s) => e("ol")(t, ...s), X = (t, ...s) => e("li")(t, ...s), Y = (t, ...s) => e("dl")(t, ...s), Z = (t, ...s) => e("dt")(t, ...s), $ = (t, ...s) => e("dd")(t, ...s), tt = (t, ...s) => e("table")(t, ...s), st = (t, ...s) => e("thead")(t, ...s), et = (t, ...s) => e("tbody")(t, ...s), nt = (t, ...s) => e("tfoot")(t, ...s), at = (t, ...s) => e("tr")(t, ...s), ot = (t, ...s) => e("th")(t, ...s), ct = (t, ...s) => e("td")(t, ...s), rt = (t, ...s) => e("form")(t, ...s), lt = (t) => l("input")(t), it = (t, ...s) => e("label")(t, ...s), dt = (t, ...s) => e("fieldset")(t, ...s), ut = (t, ...s) => e("select")(t, ...s), mt = (t, s) => {
+}, _ = (t, ...s) => e("div")(t, ...s), y = (t, ...s) => e("section")(t, ...s), x = (t, ...s) => e("article")(t, ...s), E = (t, ...s) => e("aside")(t, ...s), k = (t, ...s) => e("header")(t, ...s), S = (t, ...s) => e("footer")(t, ...s), C = (t, ...s) => e("main")(t, ...s), N = (t, ...s) => e("nav")(t, ...s), j = (t, ...s) => e("h1")(t, ...s), w = (t, ...s) => e("h2")(t, ...s), G = (t, ...s) => e("h3")(t, ...s), O = (t, ...s) => e("h4")(t, ...s), q = (t, ...s) => e("h5")(t, ...s), T = (t, ...s) => e("h6")(t, ...s), P = (t, ...s) => e("p")(t, ...s), A = (t, ...s) => e("a")(t, ...s), V = (t, ...s) => e("span")(t, ...s), z = (t, ...s) => e("em")(t, ...s), I = (t, ...s) => e("strong")(t, ...s), M = (t, ...s) => e("code")(t, ...s), B = (t, ...s) => e("pre")(t, ...s), D = (t, ...s) => e("blockquote")(t, ...s), F = (t, ...s) => e("i")(t, ...s), H = (t, ...s) => e("b")(t, ...s), J = (t, ...s) => e("small")(t, ...s), K = (t, ...s) => e("abbr")(t, ...s), L = () => ({ _tag: "br", node: document.createElement("br") }), Q = (t = {}) => l("hr")(t), R = (t) => l("img")(t), U = (t, ...s) => e("ul")(t, ...s), W = (t, ...s) => e("ol")(t, ...s), X = (t, ...s) => e("li")(t, ...s), Y = (t, ...s) => e("dl")(t, ...s), Z = (t, ...s) => e("dt")(t, ...s), $ = (t, ...s) => e("dd")(t, ...s), tt = (t, ...s) => e("table")(t, ...s), st = (t, ...s) => e("thead")(t, ...s), et = (t, ...s) => e("tbody")(t, ...s), nt = (t, ...s) => e("tfoot")(t, ...s), at = (t, ...s) => e("tr")(t, ...s), ot = (t, ...s) => e("th")(t, ...s), ct = (t, ...s) => e("td")(t, ...s), rt = (t, ...s) => e("form")(t, ...s), lt = (t) => l("input")(t), it = (t, ...s) => e("label")(t, ...s), dt = (t, ...s) => e("fieldset")(t, ...s), ut = (t, ...s) => e("legend")(t, ...s), mt = (t, ...s) => e("select")(t, ...s), pt = (t, s) => {
   const n = document.createElement("option");
   return c(n, t), s !== void 0 && (n.textContent = s), { _tag: "option", node: n };
-}, pt = (t, s) => {
+}, gt = (t, s) => {
   const n = document.createElement("textarea");
   return c(n, t), s !== void 0 && (n.textContent = s), { _tag: "textarea", node: n };
-}, gt = (t, ...s) => e("button")(t, ...s), ft = (t) => l("iframe")(t), ht = (t, ...s) => e("video")(t, ...s), bt = (t, ...s) => e("audio")(t, ...s), vt = (t) => l("source")(t), _t = (t) => l("canvas")(t), yt = (t, ...s) => {
+}, ft = (t, ...s) => e("button")(t, ...s), ht = (t) => l("iframe")(t), bt = (t, ...s) => e("video")(t, ...s), vt = (t, ...s) => e("audio")(t, ...s), _t = (t) => l("source")(t), yt = (t) => l("canvas")(t), xt = (t, ...s) => {
   const n = document.createElementNS(i, "svg");
   return c(n, t), d(n, s), { _tag: "svg", node: n };
-}, xt = (t) => r("circle")(t), Et = (t) => r("ellipse")(t), kt = (t) => r("rect")(t), St = (t) => r("line")(t), Ct = (t) => r("polyline")(t), Nt = (t) => r("polygon")(t), jt = (t) => r("path")(t), wt = (t, ...s) => o("text")(t, ...s), Gt = (t, ...s) => o("tspan")(t, ...s), Ot = (t, ...s) => o("g")(t, ...s), qt = (t, ...s) => o("defs")(t, ...s), Tt = (t, ...s) => o("symbol")(t, ...s), Pt = (t) => r("use")(t), At = (t, ...s) => o("clipPath")(t, ...s), Vt = (t, ...s) => o("mask")(t, ...s), zt = (t, ...s) => o("linearGradient")(t, ...s), It = (t, ...s) => o("radialGradient")(t, ...s), Mt = (t) => r("stop")(t), Bt = (t, ...s) => o("pattern")(t, ...s), Dt = (t) => r("image")(t), Ft = (t, ...s) => o("foreignObject")(t, ...s);
-function Ht(t) {
+}, Et = (t) => r("circle")(t), kt = (t) => r("ellipse")(t), St = (t) => r("rect")(t), Ct = (t) => r("line")(t), Nt = (t) => r("polyline")(t), jt = (t) => r("polygon")(t), wt = (t) => r("path")(t), Gt = (t, ...s) => o("text")(t, ...s), Ot = (t, ...s) => o("tspan")(t, ...s), qt = (t, ...s) => o("g")(t, ...s), Tt = (t, ...s) => o("defs")(t, ...s), Pt = (t, ...s) => o("symbol")(t, ...s), At = (t) => r("use")(t), Vt = (t, ...s) => o("clipPath")(t, ...s), zt = (t, ...s) => o("mask")(t, ...s), It = (t, ...s) => o("linearGradient")(t, ...s), Mt = (t, ...s) => o("radialGradient")(t, ...s), Bt = (t) => r("stop")(t), Dt = (t, ...s) => o("pattern")(t, ...s), Ft = (t) => r("image")(t), Ht = (t, ...s) => o("foreignObject")(t, ...s);
+function Jt(t) {
   return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
 }
-function Jt(t) {
+function Kt(t) {
   return document.createTextNode(t);
 }
-const Kt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Lt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   a: A,
   abbr: K,
   article: x,
   aside: E,
-  audio: bt,
+  audio: vt,
   b: H,
   blockquote: D,
   body: p,
   br: L,
-  button: gt,
-  canvas: _t,
-  circle: xt,
-  clipPath: At,
+  button: ft,
+  canvas: yt,
+  circle: Et,
+  clipPath: Vt,
   code: M,
   dd: $,
-  defs: qt,
+  defs: Tt,
   div: _,
   dl: Y,
   dt: Z,
-  ellipse: Et,
+  ellipse: kt,
   em: z,
   fieldset: dt,
   footer: S,
-  foreignObject: Ft,
+  foreignObject: Ht,
   form: rt,
-  g: Ot,
+  g: qt,
   h1: j,
   h2: w,
   h3: G,
@@ -95,64 +95,65 @@ const Kt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   hr: Q,
   htmlEl: u,
   i: F,
-  iframe: ft,
+  iframe: ht,
   img: R,
   input: lt,
   label: it,
+  legend: ut,
   li: X,
-  line: St,
-  linearGradient: zt,
+  line: Ct,
+  linearGradient: It,
   link: f,
   main: C,
-  mask: Vt,
+  mask: zt,
   meta: g,
   nav: N,
   ol: W,
-  option: mt,
+  option: pt,
   p: P,
-  path: jt,
-  pattern: Bt,
-  polygon: Nt,
-  polyline: Ct,
+  path: wt,
+  pattern: Dt,
+  polygon: jt,
+  polyline: Nt,
   pre: B,
-  radialGradient: It,
-  rect: kt,
+  radialGradient: Mt,
+  rect: St,
   script: h,
   section: y,
-  select: ut,
+  select: mt,
   small: J,
-  source: vt,
+  source: _t,
   span: V,
-  stop: Mt,
+  stop: Bt,
   strong: I,
   style: b,
-  svg: yt,
-  svgImage: Dt,
-  svgText: wt,
-  symbol: Tt,
+  svg: xt,
+  svgImage: Ft,
+  svgText: Gt,
+  symbol: Pt,
   table: tt,
   tbody: et,
   td: ct,
-  text: Ht,
-  textNode: Jt,
-  textarea: pt,
+  text: Jt,
+  textNode: Kt,
+  textarea: gt,
   tfoot: nt,
   th: ot,
   thead: st,
   title_: v,
   tr: at,
-  tspan: Gt,
+  tspan: Ot,
   ul: U,
-  use: Pt,
-  video: ht
+  use: At,
+  video: bt
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  W as $,
+  N as $,
   dt as A,
   S as B,
-  Ft as C,
+  Ht as C,
   rt as D,
-  Ot as E,
+  qt as E,
   j as F,
   w as G,
   G as H,
@@ -164,75 +165,76 @@ export {
   Q as N,
   u as O,
   F as P,
-  ft as Q,
+  ht as Q,
   R,
   it as S,
-  X as T,
-  St as U,
-  zt as V,
-  f as W,
-  C as X,
-  Vt as Y,
-  g as Z,
-  N as _,
+  ut as T,
+  X as U,
+  Ct as V,
+  It as W,
+  f as X,
+  C as Y,
+  zt as Z,
+  g as _,
   A as a,
-  P as a0,
-  jt as a1,
-  Bt as a2,
-  Nt as a3,
-  Ct as a4,
-  B as a5,
-  It as a6,
-  kt as a7,
-  h as a8,
-  y as a9,
-  J as aa,
-  vt as ab,
-  V as ac,
-  Mt as ad,
-  I as ae,
-  b as af,
-  yt as ag,
-  Dt as ah,
-  wt as ai,
-  Tt as aj,
-  tt as ak,
-  et as al,
-  ct as am,
-  Ht as an,
+  W as a0,
+  P as a1,
+  wt as a2,
+  Dt as a3,
+  jt as a4,
+  Nt as a5,
+  B as a6,
+  Mt as a7,
+  St as a8,
+  h as a9,
+  y as aa,
+  J as ab,
+  _t as ac,
+  V as ad,
+  Bt as ae,
+  I as af,
+  b as ag,
+  xt as ah,
+  Ft as ai,
+  Gt as aj,
+  Pt as ak,
+  tt as al,
+  et as am,
+  ct as an,
   Jt as ao,
-  nt as ap,
-  ot as aq,
-  st as ar,
-  v as as,
-  at,
-  Gt as au,
-  U as av,
-  Pt as aw,
-  ht as ax,
+  Kt as ap,
+  nt as aq,
+  ot as ar,
+  st as as,
+  v as at,
+  at as au,
+  Ot as av,
+  U as aw,
+  At as ax,
+  bt as ay,
   K as b,
   x as c,
   E as d,
-  bt as e,
+  vt as e,
   H as f,
   D as g,
-  Kt as h,
+  Lt as h,
   lt as i,
   p as j,
   L as k,
-  gt as l,
-  _t as m,
-  xt as n,
-  mt as o,
-  At as p,
+  ft as l,
+  yt as m,
+  Et as n,
+  pt as o,
+  Vt as p,
   M as q,
   $ as r,
-  ut as s,
-  pt as t,
-  qt as u,
+  mt as s,
+  gt as t,
+  Tt as u,
   _ as v,
   Y as w,
   Z as x,
-  Et as y,
+  kt as y,
   z
 };

package/dist/html.d.ts

@@ -66,6 +66,7 @@ export type FormEl = El<"form", HTMLFormElement>;
 export type InputEl = El<"input", HTMLInputElement>;
 export type LabelEl = El<"label", HTMLLabelElement>;
 export type FieldsetEl = El<"fieldset", HTMLFieldSetElement>;
+export type LegendEl = El<"legend", HTMLLegendElement>;
 export type SelectEl = El<"select", HTMLSelectElement>;
 export type OptionEl = El<"option", HTMLOptionElement>;
 export type TextareaEl = El<"textarea", HTMLTextAreaElement>;
@@ -113,10 +114,53 @@ export type RowContent = TrEl;
 export type CellContent = TdEl | ThEl;
 export type ListItemContent = LiEl;
 export type SelectContent = OptionEl;
+export type LegendContent = LegendEl;
 export type DefinitionListContent = DtEl | DdEl;
 export type SvgContent = CircleEl | EllipseEl | RectEl | LineEl | PolylineEl | PolygonEl | PathEl | TextEl | TspanEl | GEl | DefsEl | SymbolEl | UseEl | ClipPathEl | MaskEl | LinearGradientEl | RadialGradientEl | StopEl | PatternEl | SvgImageEl | ForeignObjectEl;
-export type AnyEl = FlowContent | HeadContent | RowContent | CellContent | ListItemContent | SelectContent | SourceEl | TableSectionContent | DefinitionListContent | HtmlEl | HeadEl | BodyEl | SvgContent;
-export type GlobalAttrs = {
+export type AnyEl = FlowContent | HeadContent | RowContent | CellContent | ListItemContent | SelectContent | LegendContent | SourceEl | TableSectionContent | DefinitionListContent | HtmlEl | HeadEl | BodyEl | SvgContent;
+export type AriaAttrs = {
+    role?: 'button' | 'dialog' | 'navigation' | 'main' | 'list' | 'listitem' | 'alert' | 'status' | 'region' | 'banner' | 'contentinfo' | 'search' | 'form' | 'img' | 'presentation' | 'none' | 'grid' | 'row' | 'cell' | 'columnheader' | 'rowheader' | 'table' | 'tab' | 'tablist' | 'tabpanel' | 'checkbox' | 'radio' | 'combobox' | 'listbox' | 'option' | 'menuitem' | 'menu' | 'menubar' | 'separator' | 'slider' | 'spinbutton' | 'textbox' | 'progressbar' | 'tooltip' | 'tree' | 'treeitem' | 'treegrid' | string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-hidden'?: 'true' | 'false';
+    'aria-live'?: 'off' | 'polite' | 'assertive';
+    'aria-busy'?: 'true' | 'false';
+    'aria-expanded'?: 'true' | 'false';
+    'aria-selected'?: 'true' | 'false';
+    'aria-checked'?: 'true' | 'false' | 'mixed';
+    'aria-pressed'?: 'true' | 'false' | 'mixed';
+    'aria-disabled'?: 'true' | 'false';
+    'aria-required'?: 'true' | 'false';
+    'aria-invalid'?: 'true' | 'false' | 'grammar' | 'spelling';
+    'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
+    'aria-haspopup'?: 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    'aria-controls'?: string;
+    'aria-owns'?: string;
+    'aria-activedescendant'?: string;
+    'aria-level'?: number;
+    'aria-posinset'?: number;
+    'aria-setsize'?: number;
+    'aria-colcount'?: number;
+    'aria-colindex'?: number;
+    'aria-rowcount'?: number;
+    'aria-rowindex'?: number;
+    'aria-valuemax'?: number;
+    'aria-valuemin'?: number;
+    'aria-valuenow'?: number;
+    'aria-valuetext'?: string;
+    'aria-sort'?: 'ascending' | 'descending' | 'none' | 'other';
+    'aria-orientation'?: 'horizontal' | 'vertical';
+    'aria-autocomplete'?: 'inline' | 'list' | 'both' | 'none';
+    'aria-multiselectable'?: 'true' | 'false';
+    'aria-readonly'?: 'true' | 'false';
+    'aria-modal'?: 'true' | 'false';
+    'aria-placeholder'?: string;
+    'aria-errormessage'?: string;
+    'aria-roledescription'?: string;
+    'aria-keyshortcuts'?: string;
+};
+export type GlobalAttrs = AriaAttrs & {
     id?: string;
     class?: string;
     style?: string;
@@ -458,6 +502,7 @@ export declare const form: (attrs: FormAttrs, ...children: (FlowContent | string
 export declare const input: (attrs: InputAttrs) => InputEl;
 export declare const label: (attrs: LabelAttrs, ...children: (PhrasingContent | string)[]) => LabelEl;
 export declare const fieldset: (attrs: GlobalAttrs, ...children: (FlowContent | string)[]) => FieldsetEl;
+export declare const legend: (attrs: GlobalAttrs, ...children: (PhrasingContent | string)[]) => LegendEl;
 export declare const select: (attrs: SelectAttrs, ...children: SelectContent[]) => SelectEl;
 export declare const option: (attrs: OptionAttrs, content?: string) => OptionEl;
 export declare const textarea: (attrs: TextareaAttrs, content?: string) => TextareaEl;

package/dist/html.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, c as l, d as o, e as i, f as r, g as d, j as n, k as p, l as c, m as h, n as b, p as m, q as g, r as f, u, v, w as x, x as y, y as k, z as j, A as q, B as G, C as w, D as E, E as I, F as N, G as O, H as P, I as T, J as _, K as z, L as A, M as B, N as C, O as D, P as F, Q as H, R as J, i as K, S as L, T as M, U as Q, V as R, W as S, X as U, Y as V, Z as W, _ as X, $ as Y, o as Z, a0 as $, a1 as aa, a2 as sa, a3 as ea, a4 as ta, a5 as la, a6 as oa, a7 as ia, a8 as ra, a9 as da, s as na, aa as pa, ab as ca, ac as ha, ad as ba, ae as ma, af as ga, ag as fa, ah as ua, ai as va, aj as xa, ak as ya, al as ka, am as ja, an as qa, ao as Ga, t as wa, ap as Ea, aq as Ia, ar as Na, as as Oa, at as Pa, au as Ta, av as _a, aw as za, ax as Aa } from "./html-C8SnQjvU.js";
+import { a as e, b as t, c as l, d as o, e as i, f as r, g as d, j as n, k as p, l as c, m as h, n as b, p as m, q as g, r as f, u, v, w as y, x, y as k, z as j, A as q, B as G, C as w, D as E, E as I, F as N, G as O, H as P, I as T, J as _, K as z, L as A, M as B, N as C, O as D, P as F, Q as H, R as J, i as K, S as L, T as M, U as Q, V as R, W as S, X as U, Y as V, Z as W, _ as X, $ as Y, a0 as Z, o as $, a1 as aa, a2 as sa, a3 as ea, a4 as ta, a5 as la, a6 as oa, a7 as ia, a8 as ra, a9 as da, aa as na, s as pa, ab as ca, ac as ha, ad as ba, ae as ma, af as ga, ag as fa, ah as ua, ai as va, aj as ya, ak as xa, al as ka, am as ja, an as qa, ao as Ga, ap as wa, t as Ea, aq as Ia, ar as Na, as as Oa, at as Pa, au as Ta, av as _a, aw as za, ax as Aa, ay as Ba } from "./html-Bl4HvyCp.js";
 export {
   e as a,
   t as abbr,
@@ -17,8 +17,8 @@ export {
   f as dd,
   u as defs,
   v as div,
-  x as dl,
-  y as dt,
+  y as dl,
+  x as dt,
   k as ellipse,
   j as em,
   q as fieldset,
@@ -41,50 +41,51 @@ export {
   J as img,
   K as input,
   L as label,
-  M as li,
-  Q as line,
-  R as linearGradient,
-  S as link,
-  U as main,
-  V as mask,
-  W as meta,
-  X as nav,
-  Y as ol,
-  Z as option,
-  $ as p,
-  aa as path,
-  sa as pattern,
-  ea as polygon,
-  ta as polyline,
-  la as pre,
-  oa as radialGradient,
-  ia as rect,
-  ra as script,
-  da as section,
-  na as select,
-  pa as small,
-  ca as source,
-  ha as span,
-  ba as stop,
-  ma as strong,
-  ga as style,
-  fa as svg,
-  ua as svgImage,
-  va as svgText,
+  M as legend,
+  Q as li,
+  R as line,
+  S as linearGradient,
+  U as link,
+  V as main,
+  W as mask,
+  X as meta,
+  Y as nav,
+  Z as ol,
+  $ as option,
+  aa as p,
+  sa as path,
+  ea as pattern,
+  ta as polygon,
+  la as polyline,
+  oa as pre,
+  ia as radialGradient,
+  ra as rect,
+  da as script,
+  na as section,
+  pa as select,
+  ca as small,
+  ha as source,
+  ba as span,
+  ma as stop,
+  ga as strong,
+  fa as style,
+  ua as svg,
+  va as svgImage,
+  ya as svgText,
   xa as symbol,
-  ya as table,
-  ka as tbody,
-  ja as td,
-  qa as text,
-  Ga as textNode,
-  wa as textarea,
-  Ea as tfoot,
-  Ia as th,
-  Na as thead,
-  Oa as title_,
-  Pa as tr,
-  Ta as tspan,
-  _a as ul,
-  za as use,
-  Aa as video
+  ka as table,
+  ja as tbody,
+  qa as td,
+  Ga as text,
+  wa as textNode,
+  Ea as textarea,
+  Ia as tfoot,
+  Na as th,
+  Oa as thead,
+  Pa as title_,
+  Ta as tr,
+  _a as tspan,
+  za as ul,
+  Aa as use,
+  Ba as video
 };

package/dist/index.js

@@ -1,8 +1,8 @@
-import { h as u } from "./html-C8SnQjvU.js";
-import { above as l, beside as p, bindAttr as f, bindCheckbox as x, bindClass as S, bindInput as w, bindSelect as W, bindShow as v, bindText as y, checkboxWidget as k, concat as C, dynamic as E, each as F, eachKeyed as A, focus as I, foldWidget as K, h as L, inputWidget as N, map as B, match as D, mount as J, narrow as T, numberInputWidget as V, on as j, prop as q, register as z, selectWidget as G, show as H, slot as M, stack as O, subscribe as P, subscribeNow as Q, template as R, textareaWidget as U, watchAll as X, withScope as Y } from "./widget.js";
-import { createForm as _, createFormState as $, isDirty as ee, isFormValid as te, shouldShowError as ne } from "./form-state.js";
+import { h as l } from "./html-Bl4HvyCp.js";
+import { above as g, beside as p, bindAttr as f, bindCheckbox as x, bindClass as S, bindInput as w, bindSelect as W, bindShow as v, bindText as y, checkboxWidget as k, concat as C, dynamic as E, each as F, eachKeyed as A, focus as I, foldWidget as K, h as L, inputWidget as N, lift as B, map as D, match as J, mount as T, narrow as V, numberInputWidget as j, on as q, prop as z, register as G, selectWidget as H, show as M, slot as O, stack as P, subscribe as Q, subscribeNow as R, template as U, textareaWidget as X, watchAll as Y, withScope as Z } from "./widget.js";
+import { createForm as $, createFormState as ee, isDirty as te, isFormValid as ne, shouldShowError as oe } from "./form-state.js";
 import { signal as a } from "@rhi-zone/rainbow";
-import { attrBoolean as ie, attrJson as re, attrNumber as se, attrString as ae, attrsFrom as ce, defineElement as de } from "./elements.js";
+import { attrBoolean as re, attrJson as se, attrNumber as ae, attrString as ce, attrsFrom as de, defineElement as be } from "./elements.js";
 function d(e, n, t, r, o) {
   const i = e(
     n,
@@ -23,12 +23,12 @@ function b(e) {
   return e.addEventListener("change", t), [n, () => e.removeEventListener("change", t)];
 }
 export {
-  l as above,
-  ie as attrBoolean,
-  re as attrJson,
-  se as attrNumber,
-  ae as attrString,
-  ce as attrsFrom,
+  g as above,
+  re as attrBoolean,
+  se as attrJson,
+  ae as attrNumber,
+  ce as attrString,
+  de as attrsFrom,
   p as beside,
   f as bindAttr,
   x as bindCheckbox,
@@ -40,37 +40,38 @@ export {
   b as bindingsStoreSignal,
   k as checkboxWidget,
   C as concat,
-  _ as createForm,
-  $ as createFormState,
-  de as defineElement,
+  $ as createForm,
+  ee as createFormState,
+  be as defineElement,
   E as dynamic,
   F as each,
   A as eachKeyed,
   I as focus,
   K as foldWidget,
   L as h,
-  u as html,
+  l as html,
   N as inputWidget,
-  ee as isDirty,
-  te as isFormValid,
+  te as isDirty,
+  ne as isFormValid,
   d as keybindsContext,
-  B as map,
-  D as match,
-  J as mount,
-  T as narrow,
-  V as numberInputWidget,
-  j as on,
-  q as prop,
-  z as register,
-  G as selectWidget,
-  ne as shouldShowError,
-  H as show,
-  M as slot,
-  O as stack,
-  P as subscribe,
-  Q as subscribeNow,
-  R as template,
-  U as textareaWidget,
-  X as watchAll,
-  Y as withScope
+  B as lift,
+  D as map,
+  J as match,
+  T as mount,
+  V as narrow,
+  j as numberInputWidget,
+  q as on,
+  z as prop,
+  G as register,
+  H as selectWidget,
+  oe as shouldShowError,
+  M as show,
+  O as slot,
+  P as stack,
+  Q as subscribe,
+  R as subscribeNow,
+  U as template,
+  X as textareaWidget,
+  Y as watchAll,
+  Z as withScope
 };

package/dist/widget.d.ts

@@ -458,19 +458,35 @@ export declare function selectWidget(options: {
     label: string;
 }[], attrs?: SelectAttrs): Widget<string, SelectEl>;
 /**
- * A reactive child: either a static element, a string, or a widget that
- * accepts the same signal type `T` and returns any element.
+ * A reactive child: either a plain string or a widget that accepts the same
+ * signal type `T` and returns any element.
+ *
+ * `AnyEl` is intentionally excluded. Passing a pre-built element directly would
+ * require `cloneNode(true)` on each widget invocation, silently dropping event
+ * listeners. Use `lift(el)` to wrap a freshly-built element instead.
+ */
+export type RChild<T> = string | Widget<T, AnyEl>;
+/**
+ * Lift a static element into the widget context. Use this to pass a
+ * pre-built `AnyEl` as a child to an `h.*` reactive factory:
+ *
+ *   h.div({}, lift(iconEl), reactiveChild)
+ *
+ * The element is inserted as-is — no cloning — so event listeners are
+ * preserved. Only use `lift` when the element is freshly built at widget
+ * call time (i.e. inside the widget function body). Do NOT lift a module-
+ * level static element — it can only have one parent at a time.
  */
-export type RChild<T> = AnyEl | string | Widget<T, AnyEl>;
+export declare function lift<T, E extends AnyEl>(el: E): Widget<T, E>;
 /**
  * Reactive hyperscript factories — the same element tags as `html.ts` but
  * returning `Widget<T, El>` instead of `El`. Import as:
  *
  *   import { h } from '@rhi-zone/rainbow-ui/widget'
  *
- * Widget children receive the same signal as their parent. Static children
- * (`AnyEl`) are deep-cloned on each widget invocation so that the same static
- * node can be safely reused across multiple widget instances.
+ * Widget children receive the same signal as their parent. String children
+ * create fresh text nodes. To pass a pre-built element, wrap it with `lift(el)`
+ * so it is inserted directly without cloning — preserving event listeners.
  */
 export declare const h: {
     readonly div: <T>(attrs: GlobalAttrs, ...children: RChild<T>[]) => (s: Signal<T>) => El<"div", HTMLDivElement>;

package/dist/widget.js

@@ -1,350 +1,353 @@
 import { index as E, stateful as L, field as W, lens as B, tagged as $, signal as j } from "@rhi-zone/rainbow";
-import { i as _, s as F, o as I, t as O } from "./html-C8SnQjvU.js";
-let y = null;
+import { i as _, s as F, o as I, t as O } from "./html-Bl4HvyCp.js";
+let k = null;
 function l(e) {
-  y == null || y.push(e);
+  k == null || k.push(e);
 }
-function g(e) {
-  const n = y, o = [];
-  y = o;
-  const t = e();
-  return y = n, [t, () => {
+function m(e) {
+  const t = k, o = [];
+  k = o;
+  const n = e();
+  return k = t, [n, () => {
     for (const c of o) c();
   }];
 }
 function V(e) {
-  return g(e);
+  return m(e);
 }
-function w(e, n) {
-  l(e.subscribe(n));
+function w(e, t) {
+  l(e.subscribe(t));
 }
 function H(e) {
   l(e);
 }
-function R(e, n, o) {
-  const [t, c] = g(() => e(n));
-  return o.appendChild(t.node), () => {
-    t.node.remove(), c();
+function R(e, t, o) {
+  const [n, c] = m(() => e(t));
+  return o.appendChild(n.node), () => {
+    n.node.remove(), c();
   };
 }
-function P(e, n) {
-  return (o) => e(o.focus(n));
+function P(e, t) {
+  return (o) => e(o.focus(t));
 }
-function U(e, n) {
-  return P(e, W(n));
+function U(e, t) {
+  return P(e, W(t));
 }
-function z(e, n) {
+function z(e, t) {
   return (o) => {
-    const t = document.createElement("div");
-    t.dataset.narrow = "";
+    const n = document.createElement("div");
+    n.dataset.narrow = "";
     let c = null, r = null;
-    const d = o, u = () => {
-      r = d.narrow(n);
-      const [a, f] = g(() => e(r));
-      c = f, t.appendChild(a.node);
+    const u = o, d = () => {
+      r = u.narrow(t);
+      const [a, f] = m(() => e(r));
+      c = f, n.appendChild(a.node);
     };
     return w(o, (a) => {
-      const f = n.view(a);
-      f !== void 0 && c === null ? u() : f === void 0 && c !== null && (c(), c = null, r = null, t.replaceChildren());
-    }), n.view(o.get()) !== void 0 && u(), l(() => c == null ? void 0 : c()), { _tag: "div", node: t };
+      const f = t.view(a);
+      f !== void 0 && c === null ? d() : f === void 0 && c !== null && (c(), c = null, r = null, n.replaceChildren());
+    }), t.view(o.get()) !== void 0 && d(), l(() => c == null ? void 0 : c()), { _tag: "div", node: n };
   };
 }
 function D(e) {
-  return (n) => {
-    const o = n, t = document.createElement("div");
-    t.dataset.each = "";
+  return (t) => {
+    const o = t, n = document.createElement("div");
+    n.dataset.each = "";
     let c = [];
-    const r = (u) => {
+    const r = (d) => {
       for (const s of c) s();
-      c = [], t.replaceChildren();
-      for (let s = 0; s < u.length; s++) {
+      c = [], n.replaceChildren();
+      for (let s = 0; s < d.length; s++) {
         const a = s, f = B(
           (p) => p[a],
           (p, h) => {
-            const b = [...h];
-            return b[a] = p, b;
+            const g = [...h];
+            return g[a] = p, g;
           }
-        ), m = o.focus(f), [v, C] = g(() => e(m));
-        c.push(C), t.appendChild(v.node);
+        ), b = o.focus(f), [v, C] = m(() => e(b));
+        c.push(C), n.appendChild(v.node);
       }
     };
-    r(n.get());
-    const d = n.map((u) => u.length);
-    return w(d, () => r(n.get())), l(() => {
-      for (const u of c) u();
-    }), { _tag: "div", node: t };
+    r(t.get());
+    const u = t.map((d) => d.length);
+    return w(u, () => r(t.get())), l(() => {
+      for (const d of c) d();
+    }), { _tag: "div", node: n };
   };
 }
-function G(e, n) {
+function G(e, t) {
   return (o) => {
-    const t = o, c = document.createElement("div");
+    const n = o, c = document.createElement("div");
     c.dataset.beside = "";
-    const r = t.focus(E(0)), d = t.focus(E(1)), [u, s] = g(() => e(r)), [a, f] = g(() => n(d));
-    return c.appendChild(u.node), c.appendChild(a.node), l(s), l(f), { _tag: "div", node: c };
+    const r = n.focus(E(0)), u = n.focus(E(1)), [d, s] = m(() => e(r)), [a, f] = m(() => t(u));
+    return c.appendChild(d.node), c.appendChild(a.node), l(s), l(f), { _tag: "div", node: c };
   };
 }
-function J(e, n) {
+function J(e, t) {
   return (o) => {
-    const t = o, c = document.createElement("div");
+    const n = o, c = document.createElement("div");
     c.dataset.above = "";
-    const r = t.focus(E(0)), d = t.focus(E(1)), [u, s] = g(() => e(r)), [a, f] = g(() => n(d));
-    return c.appendChild(u.node), c.appendChild(a.node), l(s), l(f), { _tag: "div", node: c };
+    const r = n.focus(E(0)), u = n.focus(E(1)), [d, s] = m(() => e(r)), [a, f] = m(() => t(u));
+    return c.appendChild(d.node), c.appendChild(a.node), l(s), l(f), { _tag: "div", node: c };
   };
 }
-function Q(e, n) {
+function Q(e, t) {
   return (o) => {
-    const t = L(e, o);
-    return n(t);
+    const n = L(e, o);
+    return t(n);
   };
 }
-function X(e, n) {
+function X(e, t) {
   return (o) => {
-    const t = o.narrow(n);
-    return e(t);
+    const n = o.narrow(t);
+    return e(n);
   };
 }
-function Y(e, n) {
+function Y(e, t) {
   return (o) => {
-    const t = document.createElement("div");
-    t.dataset.show = "";
-    const [c, r] = g(() => e(o));
-    t.appendChild(c.node), l(r);
-    const d = (u) => {
-      t.style.display = n(u) ? "" : "none";
+    const n = document.createElement("div");
+    n.dataset.show = "";
+    const [c, r] = m(() => e(o));
+    n.appendChild(c.node), l(r);
+    const u = (d) => {
+      n.style.display = t(d) ? "" : "none";
     };
-    return d(o.get()), w(o, d), { _tag: "div", node: t };
+    return u(o.get()), w(o, u), { _tag: "div", node: n };
   };
 }
-function Z(e, n) {
+function Z(e, t) {
   return (o) => {
-    const t = document.createElement("div");
-    t.dataset.concat = "";
-    const [c, r] = g(() => e(o)), [d, u] = g(() => n(o));
-    return t.appendChild(c.node), t.appendChild(d.node), l(r), l(u), { _tag: "div", node: t };
+    const n = document.createElement("div");
+    n.dataset.concat = "";
+    const [c, r] = m(() => e(o)), [u, d] = m(() => t(o));
+    return n.appendChild(c.node), n.appendChild(u.node), l(r), l(d), { _tag: "div", node: n };
   };
 }
 function ee(...e) {
-  return (n) => {
+  return (t) => {
     const o = document.createElement("div");
     o.dataset.stack = "";
-    for (const t of e) {
-      const [c, r] = g(() => t(n));
+    for (const n of e) {
+      const [c, r] = m(() => n(t));
       o.appendChild(c.node), l(r);
     }
     return { _tag: "div", node: o };
   };
 }
-function te(e, n, o) {
-  const t = document.createElement("template");
-  return t.innerHTML = e, (c) => {
+function te(e, t, o) {
+  const n = document.createElement("template");
+  return n.innerHTML = e, (c) => {
     const r = document.createElement("div");
-    r.dataset.templ = "", r.appendChild(t.content.cloneNode(!0));
-    const d = {};
-    for (const u of Object.keys(n)) {
-      const s = n[u], a = r.querySelector(`${s}[data-ref="${u}"]`);
+    r.dataset.templ = "", r.appendChild(n.content.cloneNode(!0));
+    const u = {};
+    for (const d of Object.keys(t)) {
+      const s = t[d], a = r.querySelector(`${s}[data-ref="${d}"]`);
       if (a === null)
         throw new Error(
-          `templ: ref "${u}" not found — expected <${s} data-ref="${u}"> in template`
+          `templ: ref "${d}" not found — expected <${s} data-ref="${d}"> in template`
         );
-      d[u] = { _tag: s, node: a };
+      u[d] = { _tag: s, node: a };
     }
-    return o(c, d), { _tag: "div", node: r };
+    return o(c, u), { _tag: "div", node: r };
   };
 }
-function ne(e, n, o, t) {
-  const c = (t == null ? void 0 : t.container) ?? "div", r = document.createElement(c);
+function ne(e, t, o, n) {
+  const c = (n == null ? void 0 : n.container) ?? "div", r = document.createElement(c);
   r.dataset.eachKeyed = "";
-  const d = /* @__PURE__ */ new Map(), u = (a, f) => {
-    const m = j(f);
+  const u = /* @__PURE__ */ new Map(), d = (a, f) => {
+    const b = j(f);
     let v = !1, C = () => {
     };
-    "set" in e && (C = m.subscribe((b) => {
+    "set" in e && (C = b.subscribe((g) => {
       if (v) return;
-      const x = e.get(), N = x.findIndex((k) => n(k) === a);
-      if (N !== -1 && !Object.is(x[N], b)) {
-        const k = [...x];
-        k[N] = b, e.set(k);
+      const x = e.get(), N = x.findIndex((y) => t(y) === a);
+      if (N !== -1 && !Object.is(x[N], g)) {
+        const y = [...x];
+        y[N] = g, e.set(y);
       }
     }));
-    const [p, h] = g(() => o(m));
+    const [p, h] = m(() => o(b));
     return {
-      itemSignal: m,
+      itemSignal: b,
       childNode: p.node,
       cleanup: () => {
         h(), C();
       },
-      setFromParent: (b) => {
-        v = !0, m.set(b), v = !1;
+      setFromParent: (g) => {
+        v = !0, b.set(g), v = !1;
       }
     };
   }, s = (a) => {
     var C;
-    const f = a.map(n), m = new Set(f);
-    for (const [p, h] of d)
-      m.has(p) || (h.cleanup(), (C = h.childNode.parentNode) == null || C.removeChild(h.childNode), d.delete(p));
+    const f = a.map(t), b = new Set(f);
+    for (const [p, h] of u)
+      b.has(p) || (h.cleanup(), (C = h.childNode.parentNode) == null || C.removeChild(h.childNode), u.delete(p));
     for (let p = 0; p < a.length; p++) {
-      const h = f[p], b = a[p];
-      d.has(h) ? d.get(h).setFromParent(b) : d.set(h, u(h, b));
+      const h = f[p], g = a[p];
+      u.has(h) ? u.get(h).setFromParent(g) : u.set(h, d(h, g));
     }
     let v = null;
     for (let p = a.length - 1; p >= 0; p--) {
-      const h = d.get(f[p]);
+      const h = u.get(f[p]);
       (h.childNode.parentNode !== r || h.childNode.nextSibling !== v) && r.insertBefore(h.childNode, v), v = h.childNode;
     }
   };
   return s(e.get()), w(e, s), l(() => {
-    for (const a of d.values()) a.cleanup();
+    for (const a of u.values()) a.cleanup();
   }), { _tag: c, node: r };
 }
-function A(e, n, o) {
-  const t = o;
-  e.addEventListener(n, t), l(() => e.removeEventListener(n, t));
+function A(e, t, o) {
+  const n = o;
+  e.addEventListener(t, n), l(() => e.removeEventListener(t, n));
 }
-function S(e, n) {
-  e.value = n.get();
-  const o = () => n.set(e.value);
+function S(e, t) {
+  e.value = t.get();
+  const o = () => t.set(e.value);
   e.addEventListener("input", o);
-  const t = n.subscribe((r) => {
+  const n = t.subscribe((r) => {
     e.value !== r && (e.value = r);
   }), c = () => {
-    e.removeEventListener("input", o), t();
+    e.removeEventListener("input", o), n();
   };
   return l(c), c;
 }
-function T(e, n) {
-  A(e, "change", () => n.set(e.value)), w(n, (o) => {
+function T(e, t) {
+  A(e, "change", () => t.set(e.value)), w(t, (o) => {
     e.value !== o && (e.value = o);
   });
 }
-function q(e, n) {
-  A(e, "change", () => n.set(e.checked)), w(n, (o) => {
+function q(e, t) {
+  A(e, "change", () => t.set(e.checked)), w(t, (o) => {
     e.checked !== o && (e.checked = o);
   });
 }
-function oe(e, n) {
-  n(e.get()), l(e.subscribe(n));
+function oe(e, t) {
+  t(e.get()), l(e.subscribe(t));
 }
-function ce(e, n) {
-  e.textContent = n.get(), l(n.subscribe((o) => {
+function ce(e, t) {
+  e.textContent = t.get(), l(t.subscribe((o) => {
     e.textContent = o;
   }));
 }
-function re(e, n, o) {
-  e.setAttribute(n, o.get()), l(o.subscribe((t) => {
-    e.setAttribute(n, t);
+function re(e, t, o) {
+  e.setAttribute(t, o.get()), l(o.subscribe((n) => {
+    e.setAttribute(t, n);
   }));
 }
-function de(e, n, o) {
-  e.classList.toggle(n, o.get()), l(o.subscribe((t) => {
-    e.classList.toggle(n, t);
+function ue(e, t, o) {
+  e.classList.toggle(t, o.get()), l(o.subscribe((n) => {
+    e.classList.toggle(t, n);
   }));
 }
-function ue(e, n) {
-  n();
-  const o = e.map((t) => t.subscribe(n));
+function de(e, t) {
+  t();
+  const o = e.map((n) => n.subscribe(t));
   return () => {
-    for (const t of o) t();
+    for (const n of o) n();
   };
 }
-function ie(e, n) {
-  return e.style.display = n.get() ? "" : "none", n.subscribe((o) => {
+function ie(e, t) {
+  return e.style.display = t.get() ? "" : "none", t.subscribe((o) => {
     e.style.display = o ? "" : "none";
   });
 }
-function ae(e, n) {
+function ae(e, t) {
   return (o) => {
-    const t = document.createElement("div");
-    t.dataset.match = "";
+    const n = document.createElement("div");
+    n.dataset.match = "";
     let c = null, r = null;
-    const d = (u) => {
-      const s = u[e];
+    const u = (d) => {
+      const s = d[e];
       if (s === r) return;
-      c == null || c(), c = null, t.replaceChildren(), r = s;
-      const a = n[s];
+      c == null || c(), c = null, n.replaceChildren(), r = s;
+      const a = t[s];
       if (a == null) return;
       const f = o.narrow($(e, s));
-      let m;
-      [m, c] = g(
+      let b;
+      [b, c] = m(
         () => a(f)
-      ), t.appendChild(m.node);
+      ), n.appendChild(b.node);
     };
-    return w(o, d), d(o.get()), l(() => c == null ? void 0 : c()), { _tag: "div", node: t };
+    return w(o, u), u(o.get()), l(() => c == null ? void 0 : c()), { _tag: "div", node: n };
   };
 }
-function se(e, n) {
+function se(e, t) {
   const o = document.createElement("div");
   o.dataset.foldWidget = "";
-  let t = null;
+  let n = null;
   const c = (r) => {
-    t !== null && (t(), t = null), o.replaceChildren();
-    let d = null;
+    n !== null && (n(), n = null), o.replaceChildren();
+    let u = null;
     switch (r.status) {
       case "notAsked":
-        d = n.notAsked ?? null;
+        u = t.notAsked ?? null;
         break;
       case "loading":
-        d = n.loading ?? null;
+        u = t.loading ?? null;
         break;
       case "failure":
-        d = n.failure ? () => n.failure(r.error) : null;
+        u = t.failure ? () => t.failure(r.error) : null;
         break;
       case "success":
-        d = n.success ? () => n.success(r.value) : null;
+        u = t.success ? () => t.success(r.value) : null;
         break;
     }
-    if (d !== null) {
-      let u;
-      [u, t] = g(d), o.appendChild(u.node);
+    if (u !== null) {
+      let d;
+      [d, n] = m(u), o.appendChild(d.node);
     }
   };
-  return c(e.get()), l(e.subscribe(c)), l(() => t == null ? void 0 : t()), { _tag: "div", node: o };
+  return c(e.get()), l(e.subscribe(c)), l(() => n == null ? void 0 : n()), { _tag: "div", node: o };
 }
 function le(e) {
-  return (n) => {
-    const o = n, t = _(e ?? {});
-    return t.node.value = o.get(), S(t.node, o), t;
+  return (t) => {
+    const o = t, n = _(e ?? {});
+    return n.node.value = o.get(), S(n.node, o), n;
   };
 }
 function fe(e) {
-  return (n) => {
-    const o = n, t = O(e ?? {});
-    return t.node.value = o.get(), S(t.node, o), t;
+  return (t) => {
+    const o = t, n = O(e ?? {});
+    return n.node.value = o.get(), S(n.node, o), n;
   };
 }
 function pe(e) {
-  return (n) => {
-    const o = n, t = _({ ...e, type: "checkbox" });
-    return t.node.checked = o.get(), q(t.node, o), t;
+  return (t) => {
+    const o = t, n = _({ ...e, type: "checkbox" });
+    return n.node.checked = o.get(), q(n.node, o), n;
   };
 }
 function he(e) {
-  return (n) => {
-    const o = n, t = _({ ...e, type: "number" });
-    return t.node.value = String(o.get()), A(t.node, "input", () => {
-      const c = t.node.valueAsNumber;
+  return (t) => {
+    const o = t, n = _({ ...e, type: "number" });
+    return n.node.value = String(o.get()), A(n.node, "input", () => {
+      const c = n.node.valueAsNumber;
       isNaN(c) || o.set(c);
-    }), w(n, (c) => {
-      t.node.valueAsNumber !== c && (t.node.value = String(c));
-    }), t;
+    }), w(t, (c) => {
+      n.node.valueAsNumber !== c && (n.node.value = String(c));
+    }), n;
   };
 }
-function ge(e, n) {
+function me(e, t) {
   return (o) => {
-    const t = o, c = F(n ?? {}, ...e.map((r) => I({ value: r.value }, r.label)));
-    return c.node.value = t.get(), T(c.node, t), c;
+    const n = o, c = F(t ?? {}, ...e.map((r) => I({ value: r.value }, r.label)));
+    return c.node.value = n.get(), T(c.node, n), c;
   };
 }
+function be(e) {
+  return (t) => e;
+}
 function i(e) {
-  return (n, ...o) => (t) => {
+  return (t, ...o) => (n) => {
     const c = document.createElement(e);
-    for (const [r, d] of Object.entries(n))
-      d == null || d === !1 || c.setAttribute(r, d === !0 ? "" : String(d));
+    for (const [r, u] of Object.entries(t))
+      u == null || u === !1 || c.setAttribute(r, u === !0 ? "" : String(u));
     for (const r of o)
-      typeof r == "function" ? c.appendChild(r(t).node) : typeof r == "string" ? c.appendChild(document.createTextNode(r)) : c.appendChild(r.node.cloneNode(!0));
+      typeof r == "function" ? c.appendChild(r(n).node) : c.appendChild(document.createTextNode(r));
     return { _tag: e, node: c };
   };
 }
-const me = {
+const ge = {
   // Sectioning / flow
   div: i("div"),
   section: i("section"),
@@ -378,13 +381,13 @@ const me = {
   form: i("form"),
   fieldset: i("fieldset")
 };
-function be(e, n, o, t) {
-  const c = o(n.get());
+function ve(e, t, o, n) {
+  const c = o(t.get());
   if (c === void 0) {
     e.remove();
     return;
   }
-  const r = c(t ?? n);
+  const r = c(n ?? t);
   e.replaceWith(r.node);
 }
 export {
@@ -392,7 +395,7 @@ export {
   G as beside,
   re as bindAttr,
   q as bindCheckbox,
-  de as bindClass,
+  ue as bindClass,
   S as bindInput,
   T as bindSelect,
   ie as bindShow,
@@ -404,8 +407,9 @@ export {
   ne as eachKeyed,
   P as focus,
   se as foldWidget,
-  me as h,
+  ge as h,
   le as inputWidget,
+  be as lift,
   X as map,
   ae as match,
   R as mount,
@@ -414,14 +418,14 @@ export {
   A as on,
   U as prop,
   H as register,
-  ge as selectWidget,
+  me as selectWidget,
   Y as show,
-  be as slot,
+  ve as slot,
   ee as stack,
   w as subscribe,
   oe as subscribeNow,
   te as template,
   fe as textareaWidget,
-  ue as watchAll,
+  de as watchAll,
   V as withScope
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhi-zone/rainbow-ui",
-  "version": "0.2.0-alpha.4",
+  "version": "0.2.0-alpha.6",
   "description": "Type-safe DOM factories and algebraic widget combinators for rainbow",
   "type": "module",
   "types": "./dist/index.d.ts",