@threadlabs/looma 0.25.7 → 0.26.0

package/vanilla/UiListbox.js

@@ -1,95 +1,218 @@
-// Generated by HTML Next 1.0.0-alpha.29 for Vanilla DOM. Do not edit.
-import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, buildTemplate, checkReference, clearRegion, KeyedList, negate, NONCONFORMING, readIndex, readMember, textCall, toAttribute, toText, trackContainer, truthy, visitSelected, writeAttribute, dispatchDeclared, detailCheck, dispose, IndexedList, keywordFormat, acceptProps, manageProps, project, fillSlot, checkBoolean, checkConstrained, checkFormat, checkList, checkNull, checkNumber, checkObject, checkString, checkUnion } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-listbox/ui-listbox.js";
 import "../styles/ui-listbox.css";
 
-const definition = {...{"contract":{"tag":"ui-listbox","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"aria-disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"invalid"},"default":false},"multiple":{"type":"boolean","required":false,"target":{"attribute":"aria-multiselectable"},"default":false},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"required":{"type":"boolean","required":false,"target":{"attribute":"aria-required"},"default":false},"rows":{"type":"number","required":false,"target":{"attribute":"size"},"default":5},"value":{"type":"string","required":false,"target":{"attribute":"value"}},"values":{"type":{"kind":"list","item":{"kind":"terminal","name":"string"}},"required":false,"target":{"attribute":"values"}}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"listbox"},{"kind":"attribute","name":"tabindex","expression":"{ true: '-1', false: '0' }[concat(disabled)]","expressionPlan":{"source":"{ true: '-1', false: '0' }[concat(disabled)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"-1"}},{"key":"false","value":{"kind":"literal","value":"0"}}]},"index":{"kind":"call","fn":"concat","args":[{"kind":"id","name":"disabled"}]}},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-multiselectable","expression":"multiple","expressionPlan":{"source":"multiple","ast":{"kind":"id","name":"multiple"},"dependencies":["multiple"]}},{"kind":"attribute","name":"aria-disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid or validationError","expressionPlan":{"source":"invalid or validationError","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"invalid"},"right":{"kind":"id","name":"validationError"}},"dependencies":["invalid","validationError"]}},{"kind":"attribute","name":"--_rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]},"target":"style"}],"children":[{"kind":"element","name":"ui-scroll-area","attributes":[{"kind":"literal","name":"class","value":"choices"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"option"},{"kind":"attribute","name":"active","expression":"choice.index = active","expressionPlan":{"source":"choice.index = active","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"choice"},"key":"index"},"right":{"kind":"id","name":"active"}},"dependencies":["active","choice.index"]},"target":"class"},{"kind":"literal","name":"role","value":"option"},{"kind":"literal","name":"data-ui-choice-option","value":""},{"kind":"attribute","name":"data-multiple","expression":"multiple","expressionPlan":{"source":"multiple","ast":{"kind":"id","name":"multiple"},"dependencies":["multiple"]}},{"kind":"attribute","name":"id","expression":"concat(uid, '-option-', choice.index)","expressionPlan":{"source":"concat(uid, '-option-', choice.index)","ast":{"kind":"call","fn":"concat","args":[{"kind":"id","name":"uid"},{"kind":"literal","value":"-option-"},{"kind":"member","object":{"kind":"id","name":"choice"},"key":"index"}]},"dependencies":["choice.index","uid"]}},{"kind":"attribute","name":"data-index","expression":"choice.index","expressionPlan":{"source":"choice.index","ast":{"kind":"member","object":{"kind":"id","name":"choice"},"key":"index"},"dependencies":["choice.index"]}},{"kind":"attribute","name":"aria-selected","expression":"choice.selected","expressionPlan":{"source":"choice.selected","ast":{"kind":"member","object":{"kind":"id","name":"choice"},"key":"selected"},"dependencies":["choice.selected"]}},{"kind":"attribute","name":"aria-disabled","expression":"choice.disabled","expressionPlan":{"source":"choice.disabled","ast":{"kind":"member","object":{"kind":"id","name":"choice"},"key":"disabled"},"dependencies":["choice.disabled"]}}],"children":[{"kind":"element","name":"span","attributes":[],"children":[{"kind":"text","value":"$choice.label","expressionPlan":{"source":"$choice.label","ast":{"kind":"member","object":{"kind":"id","name":"choice"},"key":"label"},"dependencies":["choice.label"]}}]}],"flow":{"kind":"each","item":"choice","list":"choices","listPlan":{"source":"choices","ast":{"kind":"id","name":"choices"},"dependencies":["choices"]},"key":"choice.index","keyPlan":{"source":"choice.index","ast":{"kind":"member","object":{"kind":"id","name":"choice"},"key":"index"},"dependencies":["choice.index"]}}}],"ref":"choices"},{"kind":"element","name":"select","attributes":[{"kind":"literal","name":"class","value":"fallback"},{"kind":"attribute","name":"size","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]}},{"kind":"attribute","name":"multiple","expression":"multiple","expressionPlan":{"source":"multiple","ast":{"kind":"id","name":"multiple"},"dependencies":["multiple"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"literal","name":"aria-label","value":"Choices"}],"children":[{"kind":"slot"}],"ref":"options"},{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"hidden"},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"attribute","name":"value","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}}],"children":[],"flow":{"kind":"each","item":"selected","list":"selection","listPlan":{"source":"selection","ast":{"kind":"id","name":"selection"},"dependencies":["selection"]}}}],"flow":{"kind":"if","test":"name and not disabled","testPlan":{"source":"name and not disabled","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"name"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"disabled"}}},"dependencies":["disabled","name"]}}},{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"class","value":"validity"},{"kind":"literal","name":"type","value":"checkbox"},{"kind":"attribute","name":"required","expression":"required and not hasSelection and not disabled","expressionPlan":{"source":"required and not hasSelection and not disabled","ast":{"kind":"binary","op":"and","left":{"kind":"binary","op":"and","left":{"kind":"id","name":"required"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"hasSelection"}}},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"disabled"}}},"dependencies":["disabled","hasSelection","required"]}},{"kind":"attribute","name":"checked","expression":"hasSelection","expressionPlan":{"source":"hasSelection","ast":{"kind":"id","name":"hasSelection"},"dependencies":["hasSelection"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"literal","name":"tabindex","value":"-1"}],"children":[],"ref":"validity"}]},"declarations":[{"kind":"state","name":"choices","type":"list(object({ value: string, label: string, disabled: boolean, selected: boolean, index: integer }))","value":"[]","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"selection","type":"list(string)","value":"[]","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"hasSelection","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"active","type":"integer","value":"-1","expression":{"source":"-1","ast":{"kind":"unary","op":"-","operand":{"kind":"literal","value":1}},"dependencies":[]}},{"kind":"state","name":"uid","type":"string","value":"","expression":{"source":"\"\"","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"validationError","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object","shape":{"kind":"object","fields":[{"name":"value","type":{"kind":"union","members":[{"kind":"terminal","name":"string"},{"kind":"terminal","name":"null"}]},"optional":false},{"name":"values","type":{"kind":"list","item":{"kind":"terminal","name":"string"}},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const T0 = ["",[],["ui-scroll-area",["class","choices"],2],["select",["class","fallback","aria-label","Choices"],4],1,["input",["class","validity","type","checkbox","aria-hidden","true","tabindex","-1"]]];
+const T1 = ["div",["class","option","role","option","data-ui-choice-option",""],["span",[],0]];
+const T2 = ["",[]];
+const T3 = ["",[],2];
+const T4 = ["input",["type","hidden"]];
+let P0, P1, P2, P3, P4;
+const E = new Map();
+const S = { n: ["choices","selection","hasSelection","active","uid","validationError"], t: [["l",["o",["value","s","label","s","disabled","b","selected","b","index","i"]]],["l","s"],"b","i","s","b"], f: import.meta.url, g: "ui-listbox", d: { "change": [detailCheck(checkObject([["value", checkUnion([checkString, checkNull], "string | null"), false], ["values", checkList(checkString), false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer"]}), false]], false)), true, true, false] }, x: dispatchDeclared };
+const D = { props: { "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "invalid": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "multiple": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "name": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "required": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "rows": { "required":false,"default":5, c: checkNumber, t: "number", j: 0, m: "n" }, "value": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "values": { "required":false, c: checkList(checkString), j: 1, m: ["l","s"] } } };
+const C = (host) => controller.default(host);
 
-export function createUiListbox(options = {}) {
+export function createUiListbox(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
-  const projected = [];
   const element = document.createElement("div");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
     element.setAttribute(name, value === true ? "" : String(value));
   }
   if (!element.hasAttribute("role")) element.setAttribute("role", "listbox");
-  const value0 = componentProps["multiple"] === undefined ? false : componentProps["multiple"];
-  if (typeof value0 === "boolean") element.setAttribute("aria-multiselectable", String(value0));
-  else element.removeAttribute("aria-multiselectable");
-  const value1 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
-  if (typeof value1 === "boolean") element.setAttribute("aria-disabled", String(value1));
-  else element.removeAttribute("aria-disabled");
-  const value2 = componentProps["required"] === undefined ? false : componentProps["required"];
-  if (typeof value2 === "boolean") element.setAttribute("aria-required", String(value2));
-  else element.removeAttribute("aria-required");
-  const value3 = componentProps["rows"] === undefined ? 5 : componentProps["rows"];
-  if (value3 === null || value3 === undefined) element.removeAttribute("--_rows");
-  else element.setAttribute("--_rows", String(value3));
   element.setAttribute("data-component", "ui-listbox");
-  const element0 = document.createElement("ui-scroll-area");
-  element0.setAttribute("class", "choices");
-  const element1 = document.createElement("div");
-  element1.setAttribute("class", "option");
-  element1.setAttribute("role", "option");
-  element1.setAttribute("data-ui-choice-option", "");
-  const value4 = componentProps["multiple"] === undefined ? false : componentProps["multiple"];
-  if (value4 === true) element1.setAttribute("data-multiple", "");
-  else element1.removeAttribute("data-multiple");
-  const element2 = document.createElement("span");
-  const text3 = document.createTextNode("");
-  element2.append(text3);
-  element1.append(element2);
-  element0.append(element1);
-  element.append(element0);
-  const element4 = document.createElement("select");
-  element4.setAttribute("class", "fallback");
-  const value5 = componentProps["rows"] === undefined ? 5 : componentProps["rows"];
-  if (value5 === null || value5 === undefined) element4.removeAttribute("size");
-  else element4.setAttribute("size", String(value5));
-  const value6 = componentProps["multiple"] === undefined ? false : componentProps["multiple"];
-  if (value6 === true) element4.setAttribute("multiple", "");
-  else element4.removeAttribute("multiple");
-  const value7 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
-  if (value7 === true) element4.setAttribute("disabled", "");
-  else element4.removeAttribute("disabled");
-  const value8 = componentProps["required"] === undefined ? false : componentProps["required"];
-  if (value8 === true) element4.setAttribute("required", "");
-  else element4.removeAttribute("required");
-  const value9 = componentProps["name"] === undefined ? "" : componentProps["name"];
-  if (value9 === null || value9 === undefined) element4.removeAttribute("name");
-  else element4.setAttribute("name", String(value9));
-  element4.setAttribute("aria-label", "Choices");
-  if (children.length > 0) {
-    for (const child of children) {
-      const node = typeof child === "string" ? document.createTextNode(child) : child;
-      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
-      projected.push([node, ""]);
-      element4.append(node);
-    }
-  } else {
-  }
-  element.append(element4);
-  const element5 = document.createElement("template");
-  const element6 = document.createElement("input");
-  element6.setAttribute("type", "hidden");
-  const value10 = componentProps["name"] === undefined ? "" : componentProps["name"];
-  if (value10 === null || value10 === undefined) element6.removeAttribute("name");
-  else element6.setAttribute("name", String(value10));
-  element5.append(element6);
-  element.append(element5);
-  const element7 = document.createElement("input");
-  element7.setAttribute("class", "validity");
-  element7.setAttribute("type", "checkbox");
-  const value11 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
-  if (value11 === true) element7.setAttribute("disabled", "");
-  else element7.removeAttribute("disabled");
-  element7.setAttribute("aria-hidden", "true");
-  element7.setAttribute("tabindex", "-1");
-  element.append(element7);
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-    controller,
-  });
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [[], [], false, null, "", false, null, null, null, null, null, null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  v[3] = negate(1, undefined);
+  let s3 = v[3];
+  const m1 = (o, j, l) => {
+    const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
+    const t0 = n.firstChild.firstChild;
+    const r = { k: undefined, i: o, n, x: 0, y: 0, a1: t0, w: 0, v0: false, v1: null, v2: null, v3: null, v4: null, v5: null, v6: "" };
+    p1(r, -1, E);
+    return r;
+  };
+  const p1 = (r, c, d) => {
+    const o = r.i;
+    if (c & 1073741824) r.w = 0;
+    if (c & 1073741832) {
+      const x0 = (checkReference(S, v[3], "i", "expression:$choice.index = $active:active", "Reference `active` must satisfy integer.") ? (readMember(o, "index") === v[3]) : NONCONFORMING);
+      if (x0 !== NONCONFORMING) {
+        const s0 = x0;
+        if (s0 !== r.v0) r.n.classList.toggle("active", r.v0 = s0);
+      }
+    }
+    if (c & 256) {
+      const x1 = v[8];
+      const s1 = toAttribute(x1, "data-multiple");
+      if (s1 !== r.v1) writeAttribute(r.n, "data-multiple", r.v1 = s1);
+    }
+    if (c & 1073741840) {
+      const x2 = textCall("concat", [v[4], "-option-", trackContainer(r, readMember(o, "index"))]);
+      if (x2 !== NONCONFORMING) {
+        const s2 = toAttribute(x2, "id");
+        if (s2 !== r.v2) writeAttribute(r.n, "id", r.v2 = s2);
+      }
+    }
+    if (c & 1073741824) {
+      const x3 = trackContainer(r, readMember(o, "index"));
+      const s3 = toAttribute(x3, "data-index");
+      if (s3 !== r.v3) writeAttribute(r.n, "data-index", r.v3 = s3);
+      const x4 = trackContainer(r, readMember(o, "selected"));
+      const s4 = toAttribute(x4, "aria-selected");
+      if (s4 !== r.v4) writeAttribute(r.n, "aria-selected", r.v4 = s4);
+      const x5 = trackContainer(r, readMember(o, "disabled"));
+      const s5 = toAttribute(x5, "aria-disabled");
+      if (s5 !== r.v5) writeAttribute(r.n, "aria-disabled", r.v5 = s5);
+      const x6 = trackContainer(r, readMember(o, "label"));
+      const s6 = toText(x6);
+      if (s6 !== r.v6) r.a1.data = r.v6 = s6;
+    }
+  };
+  const m2 = (d) => {
+    const n = (P2 ??= buildTemplate(T2)).cloneNode(true);
+    const r = { n };
+    p2(r, -1, d);
+    return r;
+  };
+  const p2 = (r, c, d) => {
+  };
+  const m3 = (d) => {
+    const n = (P3 ??= buildTemplate(T3)).cloneNode(true);
+    const t0 = n.firstChild;
+    const r = { n, L0: new IndexedList(t0, t0.nextSibling, m4, p4, undefined, "selected") };
+    p3(r, -1, d);
+    return r;
+  };
+  const p3 = (r, c, d) => {
+    if (c & 1073741826) r.L0.update(v[1], d, c);
+    if (c !== -1 && c & 512) r.L0.each(c, d);
+  };
+  const m4 = (o, j, l) => {
+    const n = (P4 ??= buildTemplate(T4)).cloneNode(true);
+    const r = { k: undefined, i: o, n, x: 0, y: 0, w: 0, v0: null, v1: null };
+    p4(r, -1, E);
+    return r;
+  };
+  const p4 = (r, c, d) => {
+    const o = r.i;
+    if (c & 1073741824) r.w = 0;
+    if (c & 512) {
+      const x0 = v[9];
+      const s0 = toAttribute(x0, "name");
+      if (s0 !== r.v0) writeAttribute(r.n, "name", r.v0 = s0);
+    }
+    if (c & 1073741824) {
+      const x1 = trackContainer(r, o);
+      const s1 = toAttribute(x1, "value");
+      if (s1 !== r.v1) writeAttribute(r.n, "value", r.v1 = s1);
+    }
+  };
+  const p0 = (r, c, d) => {
+    if (c & 1073741888) {
+      const x0 = readIndex({ "true": "-1", "false": "0" }, textCall("concat", [v[6]]));
+      if (x0 !== NONCONFORMING) {
+        const s0 = toAttribute(x0, "tabindex");
+        if (s0 !== r.v0) writeAttribute(r.n, "tabindex", r.v0 = s0);
+      }
+    }
+    if (c & 256) {
+      const x1 = v[8];
+      const s1 = toAttribute(x1, "aria-multiselectable");
+      if (s1 !== r.v1) writeAttribute(r.n, "aria-multiselectable", r.v1 = s1);
+    }
+    if (c & 64) {
+      const x2 = v[6];
+      const s2 = toAttribute(x2, "aria-disabled");
+      if (s2 !== r.v2) writeAttribute(r.n, "aria-disabled", r.v2 = s2);
+    }
+    if (c & 1024) {
+      const x3 = v[10];
+      const s3 = toAttribute(x3, "aria-required");
+      if (s3 !== r.v3) writeAttribute(r.n, "aria-required", r.v3 = s3);
+    }
+    if (c & 160) {
+      const x4 = (truthy(v[7]) || v[5]);
+      const s4 = toAttribute(x4, "aria-invalid");
+      if (s4 !== r.v4) writeAttribute(r.n, "aria-invalid", r.v4 = s4);
+    }
+    if (c & 2048) {
+      const x5 = v[11];
+      const s5 = toText(x5);
+      if (s5 !== r.v5) r.n.style.setProperty("--_rows", r.v5 = s5);
+      const s6 = toAttribute(x5, "size");
+      if (s6 !== r.v6) writeAttribute(r.a3, "size", r.v6 = s6);
+    }
+    if (c & 256) {
+      const x6 = v[8];
+      const s7 = toAttribute(x6, "multiple");
+      if (s7 !== r.v7) writeAttribute(r.a3, "multiple", r.v7 = s7);
+    }
+    if (c & 64) {
+      const x7 = v[6];
+      const s8 = toAttribute(x7, "disabled");
+      if (s8 !== r.v8) writeAttribute(r.a3, "disabled", r.v8 = s8);
+    }
+    if (c & 1024) {
+      const x8 = v[10];
+      const s9 = toAttribute(x8, "required");
+      if (s9 !== r.v9) writeAttribute(r.a3, "required", r.v9 = s9);
+    }
+    if (c & 512) {
+      const x9 = v[9];
+      const s10 = toAttribute(x9, "name");
+      if (s10 !== r.v10) writeAttribute(r.a3, "name", r.v10 = s10);
+    }
+    if (c & 1092) {
+      const x10 = ((truthy(v[10]) && !v[2]) && !truthy(v[6]));
+      const s11 = toAttribute(x10, "required");
+      if (s11 !== r.v11) writeAttribute(r.a6, "required", r.v11 = s11);
+    }
+    if (c & 4) {
+      const x11 = v[2];
+      const s12 = toAttribute(x11, "checked");
+      if (s12 !== r.v12) writeAttribute(r.a6, "checked", r.v12 = s12);
+    }
+    if (c & 64) {
+      const x12 = v[6];
+      const s13 = toAttribute(x12, "disabled");
+      if (s13 !== r.v13) writeAttribute(r.a6, "disabled", r.v13 = s13);
+    }
+    if (c & 1073741825) r.L0.update(v[0], d, c);
+    if (c !== -1 && c & 272) r.L0.each(c, d);
+    if (c !== -1 && c & 8 && !(c & 272)) visitSelected(r.L0.m, s3, v[3], p1, c);
+    if (c & 576) {
+      const t2 = (truthy(v[9]) && !truthy(v[6]));
+      if (true) {
+        {
+          r.b2 = undefined;
+          clearRegion(r.a5, r.e2);
+          if (t2) { r.b2 = m3(d); r.e2.before(r.b2.n); }
+        }
+      } else if (r.b2 !== undefined) p3(r.b2, c, d);
+    } else if (r.b2 !== undefined) p3(r.b2, c, d);
+    if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a4, r.e1, "", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b1 = m2(d); at.before(r.b1.n); } }
+    else if (r.b1 !== undefined) p2(r.b1, c, d);
+    s3 = v[3];
+  };
+  const t0 = element.firstChild;
+  const t1 = t0.firstChild;
+  const t2 = t0.nextSibling;
+  const t3 = t2.firstChild;
+  const t4 = t2.nextSibling;
+  const t5 = t4.nextSibling.nextSibling;
+  const R = { n: element, a3: t2, a6: t5, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: null, v7: null, v8: null, v9: null, v10: null, v11: null, v12: null, v13: null, L0: new KeyedList(t1, t1.nextSibling, m1, p1, (o) => readMember(o, "index"), "choice"), a4: t3, e1: t3.nextSibling, b1: undefined, f1: undefined, a5: t4, e2: t4.nextSibling, b2: undefined };
+  const I = { B };
+  const J = project(I, children, slots);
+  I.R = new Set();
+  attachGeneratedController(element, S, v, (c, d) => { ((c, d) => p0(R, c, d))(c, d); for (const f of I.R) f(c, d); }, C, undefined, I);
+  manageProps(I);
+  I.r["choices"] = t0;
+  I.r["options"] = t2;
+  I.r["validity"] = t5;
   return element;
 }
-

package/vanilla/UiMenu.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.29 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
 export interface UiMenuEventMap {
   select: CustomEvent<{ readonly value: string; readonly checked?: boolean; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   open: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;

package/vanilla/UiMenu.js

@@ -1,13 +1,17 @@
-// Generated by HTML Next 1.0.0-alpha.29 for Vanilla DOM. Do not edit.
-import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, buildTemplate, writeAttribute, dispatchDeclared, detailCheck, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkBoolean, checkConstrained, checkFormat, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-menu/ui-menu.js";
 import "../styles/ui-menu.css";
 
-const definition = {...{"contract":{"tag":"ui-menu","props":{"density":{"type":{"kind":"terminal","name":"keyword"},"values":["comfortable","compact"],"required":false,"target":{"attribute":"density"},"default":"comfortable"},"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"inline":{"type":"boolean","required":false,"target":{"attribute":"inline"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":"string","required":false,"target":{"attribute":"placement"},"default":"bottom-start"},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md"],"required":false,"target":{"attribute":"size"},"default":"md"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"menu"},{"kind":"literal","name":"aria-orientation","value":"vertical"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"surface"}],"children":[{"kind":"slot"}]}]},"declarations":[{"kind":"state","name":"internalOpen","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"select","type":"object","shape":{"kind":"object","fields":[{"name":"value","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"checked","type":{"kind":"terminal","name":"boolean"},"optional":true},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"open","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","programmatic","light-dismiss","escape"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const T0 = ["",[],["div",["class","surface"],4]];
+const T1 = ["",[]];
+let P0, P1;
+const S = { n: ["internalOpen"], t: ["b"], f: import.meta.url, g: "ui-menu", d: { "select": [detailCheck(checkObject([["value", checkString, false], ["checked", checkBoolean, true], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "open": [detailCheck(checkObject([["open", checkBoolean, false], ["reason", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["action","programmatic"]}), false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "close": [detailCheck(checkObject([["open", checkBoolean, false], ["reason", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["action","programmatic","light-dismiss","escape"]}), false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false] }, x: dispatchDeclared };
+const D = { props: { "density": { "required":false,"values":["comfortable","compact"],"default":"comfortable", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "for": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "inline": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "open": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "placement": { "required":false,"default":"bottom-start", c: checkString, t: "string", j: 0, m: "s" }, "size": { "required":false,"values":["sm","md"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const C = (host) => controller.default(host);
 
-export function createUiMenu(options = {}) {
+export function createUiMenu(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
-  const projected = [];
   const element = document.createElement("div");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
@@ -16,21 +20,33 @@ export function createUiMenu(options = {}) {
   if (!element.hasAttribute("role")) element.setAttribute("role", "menu");
   if (!element.hasAttribute("aria-orientation")) element.setAttribute("aria-orientation", "vertical");
   element.setAttribute("data-component", "ui-menu");
-  const element0 = document.createElement("div");
-  element0.setAttribute("class", "surface");
-  if (children.length > 0) {
-    for (const child of children) {
-      const node = typeof child === "string" ? document.createTextNode(child) : child;
-      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
-      projected.push([node, ""]);
-      element0.append(node);
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [false, null, null, null, null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const m1 = (d) => {
+    const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
+    const r = { n };
+    p1(r, -1, d);
+    return r;
+  };
+  const p1 = (r, c, d) => {
+  };
+  const p0 = (r, c, d) => {
+    if (c & 75) {
+      const x0 = hostState(["density","size","internalOpen","inline"], [v[1], v[6], v[0], v[3]]);
+      const s0 = x0;
+      if (s0 !== r.v0) writeAttribute(r.n, "data-ui-menu-state", (r.v0 = s0) === "" ? null : s0);
     }
-  } else {
-  }
-  element.append(element0);
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-    controller,
-  });
+    if (r.f0 === undefined) { r.f0 = 1; const at = fillSlot(r.a0, r.e0, "", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b0 = m1(d); at.before(r.b0.n); } }
+    else if (r.b0 !== undefined) p1(r.b0, c, d);
+  };
+  const t0 = element.firstChild.firstChild;
+  const R = { n: element, v0: undefined, a0: t0, e0: t0.nextSibling, b0: undefined, f0: undefined };
+  const I = { B };
+  const J = project(I, children, slots);
+  I.R = new Set();
+  attachGeneratedController(element, S, v, (c, d) => { ((c, d) => p0(R, c, d))(c, d); for (const f of I.R) f(c, d); }, C, undefined, I);
+  manageProps(I);
   return element;
 }
-

package/vanilla/UiMenuGroup.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.29 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
 export interface UiMenuGroupEventMap {
 }
 export interface UiMenuGroupElement extends HTMLDivElement {

package/vanilla/UiMenuGroup.js

@@ -1,38 +1,74 @@
-// Generated by HTML Next 1.0.0-alpha.29 for Vanilla DOM. Do not edit.
-import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, buildTemplate, clearRegion, toAttribute, toText, truthy, writeAttribute, dispose, acceptProps, manageProps, project, fillSlot, checkString } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-menu-group.css";
 
-const definition = {...{"contract":{"tag":"ui-menu-group","props":{"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":""}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"group"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"heading"}],"children":[{"kind":"text","value":"$label","expressionPlan":{"source":"$label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"flow":{"kind":"if","test":"label","testPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}},{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const T0 = ["",[],1,4];
+const T1 = ["div",["class","heading"],0];
+const T2 = ["",[]];
+let P0, P1, P2;
+const S = { n: [], t: [], f: import.meta.url, g: "ui-menu-group" };
+const D = { props: { "label": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" } } };
 
-export function createUiMenuGroup(options = {}) {
+export function createUiMenuGroup(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
-  const projected = [];
   const element = document.createElement("div");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
     element.setAttribute(name, value === true ? "" : String(value));
   }
   if (!element.hasAttribute("role")) element.setAttribute("role", "group");
-  const value0 = componentProps["label"] === undefined ? "" : componentProps["label"];
-  if (value0 === null || value0 === undefined) element.removeAttribute("aria-label");
-  else element.setAttribute("aria-label", String(value0));
   element.setAttribute("data-component", "ui-menu-group");
-  const element0 = document.createElement("div");
-  element0.setAttribute("class", "heading");
-  const text1 = document.createTextNode("");
-  element0.append(text1);
-  element.append(element0);
-  if (children.length > 0) {
-    for (const child of children) {
-      const node = typeof child === "string" ? document.createTextNode(child) : child;
-      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
-      projected.push([node, ""]);
-      element.append(node);
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const m1 = (d) => {
+    const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
+    const t0 = n.firstChild;
+    const r = { n, a0: t0, v0: "" };
+    p1(r, -1, d);
+    return r;
+  };
+  const p1 = (r, c, d) => {
+    if (c & 1) {
+      const x0 = v[0];
+      const s0 = toText(x0);
+      if (s0 !== r.v0) r.a0.data = r.v0 = s0;
     }
-  } else {
-  }
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-  });
+  };
+  const m2 = (d) => {
+    const n = (P2 ??= buildTemplate(T2)).cloneNode(true);
+    const r = { n };
+    p2(r, -1, d);
+    return r;
+  };
+  const p2 = (r, c, d) => {
+  };
+  const p0 = (r, c, d) => {
+    if (c & 1) {
+      const x0 = v[0];
+      const s0 = toAttribute(x0, "aria-label");
+      if (s0 !== r.v0) writeAttribute(r.n, "aria-label", r.v0 = s0);
+    }
+    if (c & 1) {
+      const t0 = truthy(v[0]);
+      if (true) {
+        {
+          r.b0 = undefined;
+          clearRegion(r.a1, r.e0);
+          if (t0) { r.b0 = m1(d); r.e0.before(r.b0.n); }
+        }
+      } else if (r.b0 !== undefined) p1(r.b0, c, d);
+    } else if (r.b0 !== undefined) p1(r.b0, c, d);
+    if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a2, r.e1, "", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b1 = m2(d); at.before(r.b1.n); } }
+    else if (r.b1 !== undefined) p2(r.b1, c, d);
+  };
+  const t0 = element.firstChild;
+  const t1 = t0.nextSibling.nextSibling;
+  const R = { n: element, v0: undefined, a1: t0, e0: t0.nextSibling, b0: undefined, a2: t1, e1: t1.nextSibling, b1: undefined, f1: undefined };
+  const I = { B };
+  const J = project(I, children, slots);
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, undefined, I);
+  manageProps(I);
   return element;
 }
-

package/vanilla/UiMenuItem.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.29 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
 export interface UiMenuItemEventMap {
   change: CustomEvent<{ readonly checked: boolean; readonly value: string; readonly type: "checkbox" | "radio"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
 }