@threadlabs/looma 0.25.6 → 0.26.0

package/vanilla/UiEditorInsertTableGrid.js

@@ -1,43 +1,98 @@
-// 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, KeyedList, readMember, readsChanged, rec, toAttribute, toText, trackContainer, truthy, writeAttribute, dispatchDeclared, detailCheck, acceptProps, manageProps, checkBoolean, checkInteger, checkObject } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.js";
 import "../styles/ui-editor-insert-table-grid.css";
 
-const definition = {...{"contract":{"tag":"ui-editor-insert-table-grid","props":{"headerRow":{"type":"boolean","required":false,"target":{"attribute":"headerrow"},"default":false},"maxCols":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"maxcols"},"default":8},"maxRows":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"maxrows"},"default":8},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"attribute","name":"hidden","expression":"not open","expressionPlan":{"source":"not open","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"open"}},"dependencies":["open"]}}],"children":[{"kind":"element","name":"p","attributes":[{"kind":"literal","name":"class","value":"hint"}],"children":[{"kind":"text","value":"$hint","expressionPlan":{"source":"$hint","ast":{"kind":"id","name":"hint"},"dependencies":["hint"]}}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"grid"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Table dimensions"},{"kind":"attribute","name":"--_rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]},"target":"style"},{"kind":"attribute","name":"--_cols","expression":"cols","expressionPlan":{"source":"cols","ast":{"kind":"id","name":"cols"},"dependencies":["cols"]},"target":"style"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"cell"},{"kind":"attribute","name":"selected","expression":"cell.selected","expressionPlan":{"source":"cell.selected","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"selected"},"dependencies":["cell.selected"]},"target":"class"},{"kind":"attribute","name":"data-row","expression":"cell.row","expressionPlan":{"source":"cell.row","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"row"},"dependencies":["cell.row"]}},{"kind":"attribute","name":"data-col","expression":"cell.col","expressionPlan":{"source":"cell.col","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"col"},"dependencies":["cell.col"]}},{"kind":"attribute","name":"aria-label","expression":"cell.label","expressionPlan":{"source":"cell.label","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"label"},"dependencies":["cell.label"]}},{"kind":"attribute","name":"aria-pressed","expression":"cell.selected","expressionPlan":{"source":"cell.selected","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"selected"},"dependencies":["cell.selected"]}},{"kind":"attribute","name":"tabindex","expression":"cell.tabIndex","expressionPlan":{"source":"cell.tabIndex","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"tabIndex"},"dependencies":["cell.tabIndex"]}}],"children":[],"flow":{"kind":"each","item":"cell","list":"cells","listPlan":{"source":"cells","ast":{"kind":"id","name":"cells"},"dependencies":["cells"]},"key":"cell.key","keyPlan":{"source":"cell.key","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"key"},"dependencies":["cell.key"]}}}],"ref":"grid"},{"kind":"element","name":"label","attributes":[{"kind":"literal","name":"class","value":"header"}],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"property","key":"checked","name":"checked","expression":"withHeaderRow","expressionPlan":{"source":"withHeaderRow","ast":{"kind":"id","name":"withHeaderRow"},"dependencies":["withHeaderRow"]}}],"children":[],"ref":"header"},{"kind":"text","value":" Header row"}]}]},"declarations":[{"kind":"state","name":"cells","type":"list(object({ key: string, row: integer, col: integer, label: string, selected: boolean, tabIndex: integer }))","value":"[]","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"rows","type":"integer","value":"8","expression":{"source":"8","ast":{"kind":"literal","value":8},"dependencies":[]}},{"kind":"state","name":"cols","type":"integer","value":"8","expression":{"source":"8","ast":{"kind":"literal","value":8},"dependencies":[]}},{"kind":"state","name":"hint","type":"string","value":"","expression":{"source":"\"\"","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"withHeaderRow","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"insert","type":"object({ rows: integer, cols: integer, withHeaderRow: boolean })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const T0 = ["",[],["p",["class","hint"],0],["div",["class","grid","role","group","aria-label","Table dimensions"],2],["label",["class","header"],["input",["type","checkbox"]]," Header row"]];
+const T1 = ["button",["type","button","class","cell"]];
+let P0, P1;
+const E = new Map();
+const S = { n: ["cells","rows","cols","hint","withHeaderRow"], t: [["l",["o",["key","s","row","i","col","i","label","s","selected","b","tabIndex","i"]]],"i","i","s","b"], f: import.meta.url, g: "ui-editor-insert-table-grid", d: { "insert": [detailCheck(checkObject([["rows", checkInteger, false], ["cols", checkInteger, false], ["withHeaderRow", checkBoolean, false]], false)), true, true, false] }, x: dispatchDeclared };
+const D = { props: { "headerRow": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "maxCols": { "required":false,"default":8, c: checkInteger, t: "integer", j: 0, m: "i" }, "maxRows": { "required":false,"default":8, c: checkInteger, t: "integer", j: 0, m: "i" }, "open": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" } } };
+const C = (host) => controller.default(host);
 
-export function createUiEditorInsertTableGrid(options = {}) {
+export function createUiEditorInsertTableGrid(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));
   }
   element.setAttribute("data-component", "ui-editor-insert-table-grid");
-  const element0 = document.createElement("p");
-  element0.setAttribute("class", "hint");
-  const text1 = document.createTextNode("");
-  element0.append(text1);
-  element.append(element0);
-  const element2 = document.createElement("div");
-  element2.setAttribute("class", "grid");
-  element2.setAttribute("role", "group");
-  element2.setAttribute("aria-label", "Table dimensions");
-  const element3 = document.createElement("button");
-  element3.setAttribute("type", "button");
-  element3.setAttribute("class", "cell");
-  element2.append(element3);
-  element.append(element2);
-  const element4 = document.createElement("label");
-  element4.setAttribute("class", "header");
-  const element5 = document.createElement("input");
-  element5.setAttribute("type", "checkbox");
-  element4.append(element5);
-  element4.append(" Header row");
-  element.append(element4);
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-    controller,
-  });
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [[], 8, 8, "", false, null, null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const m1 = (o, j, l) => {
+    const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
+    const r = { k: undefined, i: o, n, x: 0, y: 0, w: 0, v0: false, v1: null, v2: null, v3: null, v4: null, v5: null };
+    p1(r, -1, E);
+    return r;
+  };
+  const p1 = (r, c, d) => {
+    const o = r.i;
+    if (c & 1073741824) {
+      r.w = 0;
+      const x0 = trackContainer(r, readMember(o, "selected"));
+      const s0 = truthy(x0);
+      if (s0 !== r.v0) r.n.classList.toggle("selected", r.v0 = s0);
+      const x1 = trackContainer(r, readMember(o, "row"));
+      const s1 = toAttribute(x1, "data-row");
+      if (s1 !== r.v1) writeAttribute(r.n, "data-row", r.v1 = s1);
+      const x2 = trackContainer(r, readMember(o, "col"));
+      const s2 = toAttribute(x2, "data-col");
+      if (s2 !== r.v2) writeAttribute(r.n, "data-col", r.v2 = s2);
+      const x3 = trackContainer(r, readMember(o, "label"));
+      const s3 = toAttribute(x3, "aria-label");
+      if (s3 !== r.v3) writeAttribute(r.n, "aria-label", r.v3 = s3);
+      const s4 = toAttribute(x0, "aria-pressed");
+      if (s4 !== r.v4) writeAttribute(r.n, "aria-pressed", r.v4 = s4);
+      const x4 = trackContainer(r, readMember(o, "tabIndex"));
+      const s5 = toAttribute(x4, "tabindex");
+      if (s5 !== r.v5) writeAttribute(r.n, "tabindex", r.v5 = s5);
+    }
+  };
+  const p0 = (r, c, d) => {
+    if (c & 256) {
+      const x0 = !truthy(v[8]);
+      const s0 = toAttribute(x0, "hidden");
+      if (s0 !== r.v0) writeAttribute(r.n, "hidden", r.v0 = s0);
+    }
+    if (c & 8) {
+      const x1 = v[3];
+      const s1 = toText(x1);
+      if (s1 !== r.v1) r.a1.data = r.v1 = s1;
+    }
+    if (c & 2) {
+      const x2 = v[1];
+      const s2 = toText(x2);
+      if (s2 !== r.v2) r.a2.style.setProperty("--_rows", r.v2 = s2);
+    }
+    if (c & 4) {
+      const x3 = v[2];
+      const s3 = toText(x3);
+      if (s3 !== r.v3) r.a2.style.setProperty("--_cols", r.v3 = s3);
+    }
+    if (c & 16) {
+      const f0 = [];
+      const x4 = rec(f0, v[4]);
+      if (c === -1 || c & 16 || readsChanged(r.v4, f0)) {
+        r.v4 = f0;
+        r.a4["checked"] = x4;
+      }
+    }
+    if (c & 1073741825) r.L0.update(v[0], d, c);
+  };
+  const t0 = element.firstChild;
+  const t1 = t0.firstChild;
+  const t2 = t0.nextSibling;
+  const t3 = t2.firstChild;
+  const t4 = t2.nextSibling.firstChild;
+  const R = { n: element, a1: t1, a2: t2, a4: t4, v0: undefined, v1: "", v2: undefined, v3: undefined, v4: undefined, L0: new KeyedList(t3, t3.nextSibling, m1, p1, (o) => readMember(o, "key"), "cell") };
+  const I = { B };
+  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["grid"] = t2;
+  I.r["header"] = t4;
   return element;
 }
-

package/vanilla/UiEditorMentionMenu.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 UiEditorMentionMenuEventMap {
   highlight: CustomEvent<{ readonly index: number; readonly value: string }>;
   select: CustomEvent<{ readonly index: number; readonly value: string }>;

package/vanilla/UiEditorMentionMenu.js

@@ -1,92 +1,210 @@
-// 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, NONCONFORMING, readMember, readsChanged, rec, recLength, textCall, toAttribute, toText, trackContainer, truthy, writeAttribute, dispatchDeclared, detailCheck, dispose, IndexedList, acceptProps, manageProps, project, fillSlot, checkBoolean, checkInteger, checkList, checkNumber, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-editor-mention-menu/ui-editor-mention-menu.js";
 import "../styles/ui-editor-mention-menu.css";
 
-const definition = {...{"contract":{"tag":"ui-editor-mention-menu","props":{"anchorRect":{"type":{"kind":"object","fields":[{"name":"left","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"top","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"right","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"bottom","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"x","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"y","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"width","type":{"kind":"terminal","name":"number"},"optional":true},{"name":"height","type":{"kind":"terminal","name":"number"},"optional":true}],"open":false},"required":false,"target":{"attribute":"anchorrect"}},"items":{"type":{"kind":"list","item":{"kind":"object","fields":[{"name":"id","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"label","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"detail","type":{"kind":"terminal","name":"string"},"optional":true},{"name":"initials","type":{"kind":"terminal","name":"string"},"optional":true}],"open":false}},"required":false,"target":{"attribute":"items"}},"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":"Mentions"},"loading":{"type":"boolean","required":false,"target":{"attribute":"aria-busy"},"default":false},"loadingLabel":{"type":"string","required":false,"target":{"attribute":"loadinglabel"},"default":"Searching…"},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"query":{"type":"string","required":false,"target":{"attribute":"query"},"default":""},"selectedIndex":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"selectedindex"},"default":0}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"listbox"},{"kind":"attribute","name":"aria-busy","expression":"loading","expressionPlan":{"source":"loading","ast":{"kind":"id","name":"loading"},"dependencies":["loading"]}},{"kind":"attribute","name":"hidden","expression":"not visible","expressionPlan":{"source":"not visible","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"visible"}},"dependencies":["visible"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"header"}],"children":[{"kind":"slot","fallback":[],"name":"header"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"loading"},{"kind":"literal","name":"role","value":"status"}],"children":[{"kind":"text","value":"$loadingLabel","expressionPlan":{"source":"$loadingLabel","ast":{"kind":"id","name":"loadingLabel"},"dependencies":["loadingLabel"]}}],"flow":{"kind":"if","test":"searching","testPlan":{"source":"searching","ast":{"kind":"id","name":"searching"},"dependencies":["searching"]}}},{"kind":"element","name":"ul","attributes":[{"kind":"literal","name":"class","value":"list"},{"kind":"literal","name":"role","value":"presentation"}],"children":[{"kind":"element","name":"li","attributes":[{"kind":"attribute","name":"id","expression":"concat(prefix, '-option-', index)","expressionPlan":{"source":"concat(prefix, '-option-', index)","ast":{"kind":"call","fn":"concat","args":[{"kind":"id","name":"prefix"},{"kind":"literal","value":"-option-"},{"kind":"id","name":"index"}]},"dependencies":["index","prefix"]}},{"kind":"literal","name":"class","value":"item"},{"kind":"attribute","name":"active","expression":"index = active","expressionPlan":{"source":"index = active","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"index"},"right":{"kind":"id","name":"active"}},"dependencies":["active","index"]},"target":"class"},{"kind":"literal","name":"role","value":"option"},{"kind":"attribute","name":"aria-selected","expression":"index = active","expressionPlan":{"source":"index = active","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"index"},"right":{"kind":"id","name":"active"}},"dependencies":["active","index"]}},{"kind":"attribute","name":"data-index","expression":"index","expressionPlan":{"source":"index","ast":{"kind":"id","name":"index"},"dependencies":["index"]}},{"kind":"attribute","name":"data-value","expression":"row.id","expressionPlan":{"source":"row.id","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"id"},"dependencies":["row.id"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"avatar"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"text","value":"$row.initials","expressionPlan":{"source":"$row.initials","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"initials"},"dependencies":["row.initials"]}}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"body"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"text","value":"$row.label","expressionPlan":{"source":"$row.label","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"label"},"dependencies":["row.label"]}}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"detail"}],"children":[{"kind":"text","value":"$row.detail","expressionPlan":{"source":"$row.detail","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"detail"},"dependencies":["row.detail"]}}],"flow":{"kind":"if","test":"row.detail","testPlan":{"source":"row.detail","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"detail"},"dependencies":["row.detail"]}}}]}],"flow":{"kind":"each","item":"row","list":"rows","listPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]},"index":"index"}},{"kind":"slot"}],"flow":{"kind":"if","test":"not searching","testPlan":{"source":"not searching","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"searching"}},"dependencies":["searching"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"empty"}],"children":[{"kind":"slot","fallback":[],"name":"empty"}],"ref":"empty"}]},"declarations":[{"kind":"state","name":"visible","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"rows","type":"list(object({ id: string, label: string, detail?: string, initials: string }))","value":"[]","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"searching","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"active","type":"integer","value":"0","expression":{"source":"0","ast":{"kind":"literal","value":0},"dependencies":[]}},{"kind":"state","name":"prefix","type":"string","value":"ui-editor-mention-menu","expression":{"source":"\"ui-editor-mention-menu\"","ast":{"kind":"literal","value":"ui-editor-mention-menu"},"dependencies":[]}},{"kind":"event","name":"highlight","type":"object({ index: integer, value: string })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"select","type":"object({ index: integer, value: string })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const T0 = ["",[],["div",["class","header"],4],1,1,["div",["class","empty"],4]];
+const T1 = ["",[]];
+const T2 = ["div",["class","loading","role","status"],0];
+const T3 = ["ul",["class","list","role","presentation"],2,4];
+const T4 = ["li",["class","item","role","option"],["span",["class","avatar","aria-hidden","true"],0],["span",["class","body"],["span",["class","label"],0],1]];
+const T5 = ["span",["class","detail"],0];
+const T6 = ["",[]];
+const T7 = ["",[]];
+let P0, P1, P2, P3, P4, P5, P6, P7;
+const E = new Map();
+const S = { n: ["visible","rows","searching","active","prefix"], t: ["b",["l",["o",["id","s","label","s","detail","s","initials","s"]]],"b","i","s"], f: import.meta.url, g: "ui-editor-mention-menu", d: { "highlight": [detailCheck(checkObject([["index", checkInteger, false], ["value", checkString, false]], false)), true, true, false], "select": [detailCheck(checkObject([["index", checkInteger, false], ["value", checkString, false]], false)), true, true, false] }, x: dispatchDeclared };
+const D = { props: { "anchorRect": { "required":false, c: checkObject([["left", checkNumber, true], ["top", checkNumber, true], ["right", checkNumber, true], ["bottom", checkNumber, true], ["x", checkNumber, true], ["y", checkNumber, true], ["width", checkNumber, true], ["height", checkNumber, true]], false), j: 1, m: ["o",["left","n","top","n","right","n","bottom","n","x","n","y","n","width","n","height","n"]] }, "items": { "required":false, c: checkList(checkObject([["id", checkString, false], ["label", checkString, false], ["detail", checkString, true], ["initials", checkString, true]], false)), j: 1, m: ["l",["o",["id","s","label","s","detail","s","initials","s"]]] }, "label": { "required":false,"default":"Mentions", c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "loadingLabel": { "required":false,"default":"Searching…", c: checkString, t: "string", j: 0, m: "s" }, "open": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "query": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "selectedIndex": { "required":false,"default":0, c: checkInteger, t: "integer", j: 0, m: "i" } } };
+const C = (host) => controller.default(host);
 
-export function createUiEditorMentionMenu(options = {}) {
+export function createUiEditorMentionMenu(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["loading"] === undefined ? false : componentProps["loading"];
-  if (typeof value0 === "boolean") element.setAttribute("aria-busy", String(value0));
-  else element.removeAttribute("aria-busy");
   element.setAttribute("data-component", "ui-editor-mention-menu");
-  const element0 = document.createElement("div");
-  element0.setAttribute("class", "header");
-  if (slots["header"] ?? [].length > 0) {
-    for (const child of slots["header"] ?? []) {
-      const node = typeof child === "string" ? document.createTextNode(child) : child;
-      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
-      projected.push([node, "header"]);
-      element0.append(node);
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [false, [], false, 0, "ui-editor-mention-menu", null, null, 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 m2 = (d) => {
+    const n = (P2 ??= buildTemplate(T2)).cloneNode(true);
+    const t0 = n.firstChild;
+    const r = { n, a0: t0, v0: "" };
+    p2(r, -1, d);
+    return r;
+  };
+  const p2 = (r, c, d) => {
+    if (c & 512) {
+      const x0 = v[9];
+      const s0 = toText(x0);
+      if (s0 !== r.v0) r.a0.data = r.v0 = s0;
     }
-  } else {
-  }
-  element.append(element0);
-  const element1 = document.createElement("div");
-  element1.setAttribute("class", "loading");
-  element1.setAttribute("role", "status");
-  const text2 = document.createTextNode("");
-  element1.append(text2);
-  element.append(element1);
-  const element3 = document.createElement("ul");
-  element3.setAttribute("class", "list");
-  element3.setAttribute("role", "presentation");
-  const element4 = document.createElement("li");
-  element4.setAttribute("class", "item");
-  element4.setAttribute("role", "option");
-  const element5 = document.createElement("span");
-  element5.setAttribute("class", "avatar");
-  element5.setAttribute("aria-hidden", "true");
-  const text6 = document.createTextNode("");
-  element5.append(text6);
-  element4.append(element5);
-  const element7 = document.createElement("span");
-  element7.setAttribute("class", "body");
-  const element8 = document.createElement("span");
-  element8.setAttribute("class", "label");
-  const text9 = document.createTextNode("");
-  element8.append(text9);
-  element7.append(element8);
-  const element10 = document.createElement("span");
-  element10.setAttribute("class", "detail");
-  const text11 = document.createTextNode("");
-  element10.append(text11);
-  element7.append(element10);
-  element4.append(element7);
-  element3.append(element4);
-  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, ""]);
-      element3.append(node);
+  };
+  const m3 = (d) => {
+    const n = (P3 ??= buildTemplate(T3)).cloneNode(true);
+    const t0 = n.firstChild;
+    const t1 = t0.nextSibling.nextSibling;
+    const r = { n, L0: new IndexedList(t0, t0.nextSibling, m4, p4, undefined, "row"), a1: t1, e1: t1.nextSibling, b1: undefined, f1: undefined };
+    r.L0.q = true;
+    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 & 24) r.L0.each(c, d);
+    if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a1, 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 = m6(d); at.before(r.b1.n); } }
+    else if (r.b1 !== undefined) p6(r.b1, c, d);
+  };
+  const m4 = (o, j, l) => {
+    const n = (P4 ??= buildTemplate(T4)).cloneNode(true);
+    const t0 = n.firstChild;
+    const t1 = t0.firstChild;
+    const t2 = t0.nextSibling;
+    const t3 = t2.firstChild;
+    const t4 = t3.firstChild;
+    const t5 = t3.nextSibling;
+    const r = { k: undefined, i: o, n, x: 0, y: 0, j, l, a1: t1, a2: t4, w: 0, v0: null, v1: false, v2: null, v3: null, v4: null, v5: "", v6: "", a3: t5, e0: t5.nextSibling, b0: undefined, q0: undefined };
+    p4(r, -1, E);
+    return r;
+  };
+  const p4 = (r, c, d) => {
+    const o = r.i;
+    if (c & 1073741824) r.w = 0;
+    if (c & 1073741840) {
+      const x0 = textCall("concat", [v[4], "-option-", r.j]);
+      if (x0 !== NONCONFORMING) {
+        const s0 = toAttribute(x0, "id");
+        if (s0 !== r.v0) writeAttribute(r.n, "id", r.v0 = s0);
+      }
     }
-  } else {
-  }
-  element.append(element3);
-  const element12 = document.createElement("div");
-  element12.setAttribute("class", "empty");
-  if (slots["empty"] ?? [].length > 0) {
-    for (const child of slots["empty"] ?? []) {
-      const node = typeof child === "string" ? document.createTextNode(child) : child;
-      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
-      projected.push([node, "empty"]);
-      element12.append(node);
+    if (c & 1073741832) {
+      const x1 = (r.j === v[3]);
+      const s1 = x1;
+      if (s1 !== r.v1) r.n.classList.toggle("active", r.v1 = s1);
+      const s2 = toAttribute(x1, "aria-selected");
+      if (s2 !== r.v2) writeAttribute(r.n, "aria-selected", r.v2 = s2);
     }
-  } else {
-  }
-  element.append(element12);
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-    controller,
-  });
+    if (c & 1073741824) {
+      const x2 = r.j;
+      const s3 = toAttribute(x2, "data-index");
+      if (s3 !== r.v3) writeAttribute(r.n, "data-index", r.v3 = s3);
+      const x3 = trackContainer(r, readMember(o, "id"));
+      const s4 = toAttribute(x3, "data-value");
+      if (s4 !== r.v4) writeAttribute(r.n, "data-value", r.v4 = s4);
+      const x4 = trackContainer(r, readMember(o, "initials"));
+      const s5 = toText(x4);
+      if (s5 !== r.v5) r.a1.data = r.v5 = s5;
+      const x5 = trackContainer(r, readMember(o, "label"));
+      const s6 = toText(x5);
+      if (s6 !== r.v6) r.a2.data = r.v6 = s6;
+    }
+    if (c & 1073741824) {
+      const f0 = [];
+      const t0 = truthy(recLength(f0, trackContainer(r, rec(f0, readMember(rec(f0, o), "detail")))));
+      if (c === -1 || readsChanged(r.q0, f0)) {
+        r.q0 = f0;
+        {
+          r.b0 = undefined;
+          clearRegion(r.a3, r.e0);
+          if (t0) { r.b0 = m5(d, undefined, r); r.e0.before(r.b0.n); }
+        }
+      } else if (r.b0 !== undefined) p5(r.b0, c, d);
+    } else if (r.b0 !== undefined) p5(r.b0, c, d);
+  };
+  const m5 = (d, o, u) => {
+    const n = (P5 ??= buildTemplate(T5)).cloneNode(true);
+    const t0 = n.firstChild;
+    const r = { n, u, a0: t0, w: 0, v0: "" };
+    p5(r, -1, d);
+    return r;
+  };
+  const p5 = (r, c, d) => {
+    if (c & 1073741824) {
+      r.w = 0;
+      const x0 = trackContainer(r, readMember(r.u.i, "detail"));
+      const s0 = toText(x0);
+      if (s0 !== r.v0) r.a0.data = r.v0 = s0;
+    }
+  };
+  const m6 = (d) => {
+    const n = (P6 ??= buildTemplate(T6)).cloneNode(true);
+    const r = { n };
+    p6(r, -1, d);
+    return r;
+  };
+  const p6 = (r, c, d) => {
+  };
+  const m7 = (d) => {
+    const n = (P7 ??= buildTemplate(T7)).cloneNode(true);
+    const r = { n };
+    p7(r, -1, d);
+    return r;
+  };
+  const p7 = (r, c, d) => {
+  };
+  const p0 = (r, c, d) => {
+    if (c & 256) {
+      const x0 = v[8];
+      const s0 = toAttribute(x0, "aria-busy");
+      if (s0 !== r.v0) writeAttribute(r.n, "aria-busy", r.v0 = s0);
+    }
+    if (c & 1) {
+      const x1 = !v[0];
+      const s1 = toAttribute(x1, "hidden");
+      if (s1 !== r.v1) writeAttribute(r.n, "hidden", r.v1 = s1);
+    }
+    if (c & 4) {
+      const t1 = v[2];
+      if (true) {
+        {
+          r.b1 = undefined;
+          clearRegion(r.a2, r.e1);
+          if (t1) { r.b1 = m2(d); r.e1.before(r.b1.n); }
+        }
+      } else if (r.b1 !== undefined) p2(r.b1, c, d);
+    } else if (r.b1 !== undefined) p2(r.b1, c, d);
+    if (c & 4) {
+      const t2 = !v[2];
+      if (true) {
+        {
+          dispose(r.b2);
+          r.b2 = undefined;
+          clearRegion(r.a3, 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.f0 === undefined) { r.f0 = 1; const at = fillSlot(r.a1, r.e0, "header", 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);
+    if (r.f3 === undefined) { r.f3 = 1; const at = fillSlot(r.a5, r.e3, "empty", 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.b3 = m7(d); at.before(r.b3.n); } }
+    else if (r.b3 !== undefined) p7(r.b3, c, d);
+  };
+  const t0 = element.firstChild;
+  const t1 = t0.firstChild;
+  const t2 = t0.nextSibling;
+  const t3 = t2.nextSibling.nextSibling;
+  const t4 = t3.nextSibling.nextSibling;
+  const t5 = t4.firstChild;
+  const R = { n: element, v0: undefined, v1: undefined, a1: t1, e0: t1.nextSibling, b0: undefined, f0: undefined, a2: t2, e1: t2.nextSibling, b1: undefined, a3: t3, e2: t3.nextSibling, b2: undefined, a5: t5, e3: t5.nextSibling, b3: undefined, f3: 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["empty"] = t4;
   return element;
 }
-

package/vanilla/UiEditorMentionMenuItem.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 UiEditorMentionMenuItemEventMap {
 }
 export interface UiEditorMentionMenuItemElement extends HTMLLIElement {