@threadlabs/looma 0.25.7 → 0.26.1

package/vanilla/UiDisclosure.js

@@ -1,89 +1,130 @@
-// 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, toAttribute, toText, writeAttribute, dispatchDeclared, detailCheck, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkBoolean, checkConstrained, checkFormat, checkInteger, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-disclosure/ui-disclosure.js";
 import "../styles/ui-disclosure.css";
 
-const definition = {...{"contract":{"tag":"ui-disclosure","props":{"density":{"type":{"kind":"terminal","name":"keyword"},"values":["comfortable","compact"],"required":false,"target":{"attribute":"density"},"default":"comfortable"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"fill":{"type":"boolean","required":false,"target":{"attribute":"fill"},"default":false},"headingLevel":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"headinglevel"},"default":0},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"requiredOpen":{"type":"boolean","required":false,"target":{"attribute":"requiredopen"},"default":false},"summary":{"type":"string","required":false,"target":{"attribute":"summary"},"default":"Details"},"variant":{"type":{"kind":"terminal","name":"keyword"},"values":["plain","navigation"],"required":false,"target":{"attribute":"variant"},"default":"plain"}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"heading"},{"kind":"attribute","name":"role","expression":"headingRole","expressionPlan":{"source":"headingRole","ast":{"kind":"id","name":"headingRole"},"dependencies":["headingRole"]}},{"kind":"attribute","name":"aria-level","expression":"headingAriaLevel","expressionPlan":{"source":"headingAriaLevel","ast":{"kind":"id","name":"headingAriaLevel"},"dependencies":["headingAriaLevel"]}}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"trigger"},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"aria-controls","expression":"contentId","expressionPlan":{"source":"contentId","ast":{"kind":"id","name":"contentId"},"dependencies":["contentId"]}},{"kind":"attribute","name":"aria-expanded","expression":"internalOpen","expressionPlan":{"source":"internalOpen","ast":{"kind":"id","name":"internalOpen"},"dependencies":["internalOpen"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"summary"}],"children":[{"kind":"slot","fallback":[{"kind":"text","value":"$summary","expressionPlan":{"source":"$summary","ast":{"kind":"id","name":"summary"},"dependencies":["summary"]}}],"name":"summary"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"chevron"}],"children":[]}],"name":"indicator"}]}],"ref":"trigger"}],"ref":"heading"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel"},{"kind":"attribute","name":"id","expression":"contentId","expressionPlan":{"source":"contentId","ast":{"kind":"id","name":"contentId"},"dependencies":["contentId"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"panel-inner"}],"children":[{"kind":"slot"}]}],"ref":"panel"}]},"declarations":[{"kind":"state","name":"internalOpen","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"contentId","type":"string","value":"","expression":{"source":"\"\"","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"headingRole","type":"keyword"},{"kind":"state","name":"headingAriaLevel","type":"integer"},{"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","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},{"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","heading"],["button",["class","trigger","type","button"],["span",["class","leading"],4],["span",["class","summary"],4],["span",["class","indicator","aria-hidden","true"],4]]],["div",["class","panel"],["div",["class","panel-inner"],4]]];
+const T1 = ["",[]];
+const T2 = ["",[],0];
+const T3 = ["",[],["span",["class","chevron"]]];
+const T4 = ["",[]];
+let P0, P1, P2, P3, P4;
+const S = { n: ["internalOpen","contentId","headingRole","headingAriaLevel"], t: ["b","s",["p",formatOf(keywordFormat),false],"i"], f: import.meta.url, g: "ui-disclosure", d: { "open": [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], "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] }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "fill": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "headingLevel": { "required":false,"default":0, c: checkInteger, t: "integer", j: 0, m: "i" }, "name": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "open": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "requiredOpen": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "summary": { "required":false,"default":"Details", c: checkString, t: "string", j: 0, m: "s" }, "variant": { "required":false,"values":["plain","navigation"],"default":"plain", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const C = (host) => controller.default(host);
 
-export function createUiDisclosure(options = {}) {
+export function createUiDisclosure(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-disclosure");
-  const element0 = document.createElement("div");
-  element0.setAttribute("class", "heading");
-  const element1 = document.createElement("button");
-  element1.setAttribute("class", "trigger");
-  element1.setAttribute("type", "button");
-  const value0 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
-  if (value0 === true) element1.setAttribute("disabled", "");
-  else element1.removeAttribute("disabled");
-  const element2 = document.createElement("span");
-  element2.setAttribute("class", "leading");
-  if (slots["leading"] ?? [].length > 0) {
-    for (const child of slots["leading"] ?? []) {
-      const node = typeof child === "string" ? document.createTextNode(child) : child;
-      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
-      projected.push([node, "leading"]);
-      element2.append(node);
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [false, "", null, null, null, 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 & 2048) {
+      const x0 = v[11];
+      const s0 = toText(x0);
+      if (s0 !== r.v0) r.a0.data = r.v0 = s0;
     }
-  } else {
-  }
-  element1.append(element2);
-  const element3 = document.createElement("span");
-  element3.setAttribute("class", "summary");
-  if (slots["summary"] ?? [].length > 0) {
-    for (const child of slots["summary"] ?? []) {
-      const node = typeof child === "string" ? document.createTextNode(child) : child;
-      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
-      projected.push([node, "summary"]);
-      element3.append(node);
+  };
+  const m3 = (d) => {
+    const n = (P3 ??= buildTemplate(T3)).cloneNode(true);
+    const r = { n };
+    p3(r, -1, d);
+    return r;
+  };
+  const p3 = (r, c, d) => {
+  };
+  const m4 = (d) => {
+    const n = (P4 ??= buildTemplate(T4)).cloneNode(true);
+    const r = { n };
+    p4(r, -1, d);
+    return r;
+  };
+  const p4 = (r, c, d) => {
+  };
+  const p0 = (r, c, d) => {
+    if (c & 1073741828) {
+      const x0 = v[2];
+      const s0 = toAttribute(x0, "role");
+      if (s0 !== r.v0) writeAttribute(r.a0, "role", r.v0 = s0);
     }
-  } else {
-  const text4 = document.createTextNode("");
-  element3.append(text4);
-  }
-  element1.append(element3);
-  const element5 = document.createElement("span");
-  element5.setAttribute("class", "indicator");
-  element5.setAttribute("aria-hidden", "true");
-  if (slots["indicator"] ?? [].length > 0) {
-    for (const child of slots["indicator"] ?? []) {
-      const node = typeof child === "string" ? document.createTextNode(child) : child;
-      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
-      projected.push([node, "indicator"]);
-      element5.append(node);
+    if (c & 8) {
+      const x1 = v[3];
+      const s1 = toAttribute(x1, "aria-level");
+      if (s1 !== r.v1) writeAttribute(r.a0, "aria-level", r.v1 = s1);
     }
-  } else {
-  const element6 = document.createElement("span");
-  element6.setAttribute("class", "chevron");
-  element5.append(element6);
-  }
-  element1.append(element5);
-  element0.append(element1);
-  element.append(element0);
-  const element7 = document.createElement("div");
-  element7.setAttribute("class", "panel");
-  const element8 = document.createElement("div");
-  element8.setAttribute("class", "panel-inner");
-  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, ""]);
-      element8.append(node);
+    if (c & 2) {
+      const x2 = v[1];
+      const s2 = toAttribute(x2, "aria-controls");
+      if (s2 !== r.v2) writeAttribute(r.a1, "aria-controls", r.v2 = s2);
+      const s5 = toAttribute(x2, "id");
+      if (s5 !== r.v5) writeAttribute(r.a5, "id", r.v5 = s5);
     }
-  } else {
-  }
-  element7.append(element8);
-  element.append(element7);
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-    controller,
-  });
+    if (c & 1) {
+      const x3 = v[0];
+      const s3 = toAttribute(x3, "aria-expanded");
+      if (s3 !== r.v3) writeAttribute(r.a1, "aria-expanded", r.v3 = s3);
+    }
+    if (c & 32) {
+      const x4 = v[5];
+      const s4 = toAttribute(x4, "disabled");
+      if (s4 !== r.v4) writeAttribute(r.a1, "disabled", r.v4 = s4);
+    }
+    if (c & 4177) {
+      const x5 = hostState(["density","internalOpen","fill","variant"], [v[4], v[0], v[6], v[12]]);
+      const s6 = x5;
+      if (s6 !== r.v6) writeAttribute(r.n, "data-ui-disclosure-state", (r.v6 = s6) === "" ? null : s6);
+    }
+    if (r.f0 === undefined) { r.f0 = 1; const at = fillSlot(r.a2, r.e0, "leading", 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.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a3, r.e1, "summary", J, true, 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);
+    if (r.f2 === undefined) { r.f2 = 1; const at = fillSlot(r.a4, r.e2, "indicator", J, true, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b2 = m3(d); at.before(r.b2.n); } }
+    else if (r.b2 !== undefined) p3(r.b2, c, d);
+    if (r.f3 === undefined) { r.f3 = 1; const at = fillSlot(r.a6, r.e3, "", 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 = m4(d); at.before(r.b3.n); } }
+    else if (r.b3 !== undefined) p4(r.b3, c, d);
+  };
+  const t0 = element.firstChild;
+  const t1 = t0.firstChild;
+  const t2 = t1.firstChild;
+  const t3 = t2.firstChild;
+  const t4 = t2.nextSibling;
+  const t5 = t4.firstChild;
+  const t6 = t4.nextSibling.firstChild;
+  const t7 = t0.nextSibling;
+  const t8 = t7.firstChild.firstChild;
+  const R = { n: element, a0: t0, a1: t1, a5: t7, v0: null, v1: null, v2: null, v3: null, v4: null, v5: null, v6: undefined, a2: t3, e0: t3.nextSibling, b0: undefined, f0: undefined, a3: t5, e1: t5.nextSibling, b1: undefined, f1: undefined, a4: t6, e2: t6.nextSibling, b2: undefined, f2: undefined, a6: t8, e3: t8.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["heading"] = t0;
+  I.r["trigger"] = t1;
+  I.r["panel"] = t7;
   return element;
 }
-

package/vanilla/UiEditable.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 UiEditableEventMap {
   input: CustomEvent<{ readonly value: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   change: CustomEvent<{ readonly value: string; readonly previousValue: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;

package/vanilla/UiEditable.js

@@ -1,71 +1,138 @@
-// 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, readsChanged, rec, toAttribute, toText, truthy, writeAttribute, dispatchDeclared, detailCheck, keywordFormat, hostState, acceptProps, manageProps, checkBoolean, checkConstrained, checkFormat, checkNumber, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-editable/ui-editable.js";
 import "../styles/ui-editable.css";
 
-const definition = {...{"contract":{"tag":"ui-editable","props":{"actions":{"type":"boolean","required":false,"target":{"attribute":"actions"},"default":false},"cancelLabel":{"type":"string","required":false,"target":{"attribute":"cancellabel"},"default":"Cancel"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"edit":{"type":"boolean","required":false,"target":{"attribute":"edit"},"default":false},"hint":{"type":"string","required":false,"target":{"attribute":"hint"},"default":""},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"Edit value"},"maxLength":{"type":"number","required":false,"target":{"attribute":"maxlength"},"default":0},"placeholder":{"type":"string","required":false,"target":{"attribute":"placeholder"},"default":""},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"saveLabel":{"type":"string","required":false,"target":{"attribute":"savelabel"},"default":"Save"},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":""}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"field"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"preview"},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"text"}],"children":[{"kind":"text","value":"$internalValue","expressionPlan":{"source":"$internalValue","ast":{"kind":"id","name":"internalValue"},"dependencies":["internalValue"]}}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"hint"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"text","value":"$hint","expressionPlan":{"source":"$hint","ast":{"kind":"id","name":"hint"},"dependencies":["hint"]}}],"flow":{"kind":"if","test":"hint","testPlan":{"source":"hint","ast":{"kind":"id","name":"hint"},"dependencies":["hint"]}}}],"ref":"preview"},{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"class","value":"input"},{"kind":"literal","name":"type","value":"text"},{"kind":"property","key":"value","name":"value","expression":"draft","expressionPlan":{"source":"draft","ast":{"kind":"id","name":"draft"},"dependencies":["draft"]}},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"placeholder","expression":"placeholder","expressionPlan":{"source":"placeholder","ast":{"kind":"id","name":"placeholder"},"dependencies":["placeholder"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"disabled","expression":"disabled or not internalEdit","expressionPlan":{"source":"disabled or not internalEdit","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"disabled"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"internalEdit"}}},"dependencies":["disabled","internalEdit"]}}],"children":[],"ref":"input"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"actions"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"save"},{"kind":"literal","name":"type","value":"button"}],"children":[{"kind":"text","value":"$saveLabel","expressionPlan":{"source":"$saveLabel","ast":{"kind":"id","name":"saveLabel"},"dependencies":["saveLabel"]}}]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"cancel"},{"kind":"literal","name":"type","value":"button"}],"children":[{"kind":"text","value":"$cancelLabel","expressionPlan":{"source":"$cancelLabel","ast":{"kind":"id","name":"cancelLabel"},"dependencies":["cancelLabel"]}}]}],"flow":{"kind":"if","test":"actions","testPlan":{"source":"actions","ast":{"kind":"id","name":"actions"},"dependencies":["actions"]}}}]},"declarations":[{"kind":"state","name":"internalEdit","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"internalValue","type":"string","value":"","expression":{"source":"\"\"","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"draft","type":"string","value":"","expression":{"source":"\"\"","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"event","name":"input","type":"object","shape":{"kind":"object","fields":[{"name":"value","type":{"kind":"terminal","name":"string"},"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":"change","type":"object","shape":{"kind":"object","fields":[{"name":"value","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"previousValue","type":{"kind":"terminal","name":"string"},"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":"edit-change","type":"object","shape":{"kind":"object","fields":[{"name":"edit","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["activate","commit","cancel","light-dismiss","escape","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}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const T0 = ["",[],["div",["class","field"],["button",["class","preview","type","button"],["span",["class","text"],0],1],["input",["class","input","type","text"]]],1];
+const T1 = ["span",["class","hint","aria-hidden","true"],0];
+const T2 = ["div",["class","actions"],["button",["class","save","type","button"],0],["button",["class","cancel","type","button"],0]];
+let P0, P1, P2;
+const S = { n: ["internalEdit","internalValue","draft"], t: ["b","s","s"], f: import.meta.url, g: "ui-editable", d: { "input": [detailCheck(checkObject([["value", checkString, false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "change": [detailCheck(checkObject([["value", checkString, false], ["previousValue", checkString, false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "edit-change": [detailCheck(checkObject([["edit", checkBoolean, false], ["reason", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["activate","commit","cancel","light-dismiss","escape","programmatic"]}), false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false] }, x: dispatchDeclared };
+const D = { props: { "actions": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "cancelLabel": { "required":false,"default":"Cancel", c: checkString, t: "string", j: 0, m: "s" }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "edit": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "hint": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "label": { "required":false,"default":"Edit value", c: checkString, t: "string", j: 0, m: "s" }, "maxLength": { "required":false,"default":0, c: checkNumber, t: "number", j: 0, m: "n" }, "placeholder": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "required": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "saveLabel": { "required":false,"default":"Save", c: checkString, t: "string", j: 0, m: "s" }, "value": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" } } };
+const C = (host) => controller.default(host);
 
-export function createUiEditable(options = {}) {
+export function createUiEditable(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-editable");
-  const element0 = document.createElement("div");
-  element0.setAttribute("class", "field");
-  const element1 = document.createElement("button");
-  element1.setAttribute("class", "preview");
-  element1.setAttribute("type", "button");
-  const value0 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
-  if (value0 === true) element1.setAttribute("disabled", "");
-  else element1.removeAttribute("disabled");
-  const element2 = document.createElement("span");
-  element2.setAttribute("class", "text");
-  const text3 = document.createTextNode("");
-  element2.append(text3);
-  element1.append(element2);
-  const element4 = document.createElement("span");
-  element4.setAttribute("class", "hint");
-  element4.setAttribute("aria-hidden", "true");
-  const text5 = document.createTextNode("");
-  element4.append(text5);
-  element1.append(element4);
-  element0.append(element1);
-  const element6 = document.createElement("input");
-  element6.setAttribute("class", "input");
-  element6.setAttribute("type", "text");
-  const value1 = componentProps["label"] === undefined ? "Edit value" : componentProps["label"];
-  if (value1 === null || value1 === undefined) element6.removeAttribute("aria-label");
-  else element6.setAttribute("aria-label", String(value1));
-  const value2 = componentProps["placeholder"] === undefined ? "" : componentProps["placeholder"];
-  if (value2 === null || value2 === undefined) element6.removeAttribute("placeholder");
-  else element6.setAttribute("placeholder", String(value2));
-  const value3 = componentProps["required"] === undefined ? false : componentProps["required"];
-  if (value3 === true) element6.setAttribute("required", "");
-  else element6.removeAttribute("required");
-  element0.append(element6);
-  element.append(element0);
-  const element7 = document.createElement("div");
-  element7.setAttribute("class", "actions");
-  const element8 = document.createElement("button");
-  element8.setAttribute("class", "save");
-  element8.setAttribute("type", "button");
-  const text9 = document.createTextNode("");
-  element8.append(text9);
-  element7.append(element8);
-  const element10 = document.createElement("button");
-  element10.setAttribute("class", "cancel");
-  element10.setAttribute("type", "button");
-  const text11 = document.createTextNode("");
-  element10.append(text11);
-  element7.append(element10);
-  element.append(element7);
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-    controller,
-  });
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [false, "", "", null, null, null, 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 t0 = n.firstChild;
+    const r = { n, a0: t0, v0: "" };
+    p1(r, -1, d);
+    return r;
+  };
+  const p1 = (r, c, d) => {
+    if (c & 128) {
+      const x0 = v[7];
+      const s0 = toText(x0);
+      if (s0 !== r.v0) r.a0.data = r.v0 = s0;
+    }
+  };
+  const m2 = (d) => {
+    const n = (P2 ??= buildTemplate(T2)).cloneNode(true);
+    const t0 = n.firstChild;
+    const t1 = t0.firstChild;
+    const t2 = t0.nextSibling.firstChild;
+    const r = { n, a0: t1, a1: t2, v0: "", v1: "" };
+    p2(r, -1, d);
+    return r;
+  };
+  const p2 = (r, c, d) => {
+    if (c & 4096) {
+      const x0 = v[12];
+      const s0 = toText(x0);
+      if (s0 !== r.v0) r.a0.data = r.v0 = s0;
+    }
+    if (c & 16) {
+      const x1 = v[4];
+      const s1 = toText(x1);
+      if (s1 !== r.v1) r.a1.data = r.v1 = s1;
+    }
+  };
+  const p0 = (r, c, d) => {
+    if (c & 32) {
+      const x0 = v[5];
+      const s0 = toAttribute(x0, "disabled");
+      if (s0 !== r.v0) writeAttribute(r.a0, "disabled", r.v0 = s0);
+    }
+    if (c & 2) {
+      const x1 = v[1];
+      const s1 = toText(x1);
+      if (s1 !== r.v1) r.a1.data = r.v1 = s1;
+    }
+    if (c & 4) {
+      const f0 = [];
+      const x2 = rec(f0, v[2]);
+      if (c === -1 || c & 4 || readsChanged(r.v2, f0)) {
+        r.v2 = f0;
+        r.a3["value"] = x2;
+      }
+    }
+    if (c & 256) {
+      const x3 = v[8];
+      const s3 = toAttribute(x3, "aria-label");
+      if (s3 !== r.v3) writeAttribute(r.a3, "aria-label", r.v3 = s3);
+    }
+    if (c & 1024) {
+      const x4 = v[10];
+      const s4 = toAttribute(x4, "placeholder");
+      if (s4 !== r.v4) writeAttribute(r.a3, "placeholder", r.v4 = s4);
+    }
+    if (c & 2048) {
+      const x5 = v[11];
+      const s5 = toAttribute(x5, "required");
+      if (s5 !== r.v5) writeAttribute(r.a3, "required", r.v5 = s5);
+    }
+    if (c & 33) {
+      const x6 = (truthy(v[5]) || !v[0]);
+      const s6 = toAttribute(x6, "disabled");
+      if (s6 !== r.v6) writeAttribute(r.a3, "disabled", r.v6 = s6);
+      const x7 = hostState(["internalEdit","disabled"], [v[0], v[5]]);
+      const s7 = x7;
+      if (s7 !== r.v7) writeAttribute(r.n, "data-ui-editable-state", (r.v7 = s7) === "" ? null : s7);
+    }
+    if (c & 128) {
+      const t0 = truthy(v[7]);
+      if (true) {
+        {
+          r.b0 = undefined;
+          clearRegion(r.a2, 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 (c & 8) {
+      const t1 = truthy(v[3]);
+      if (true) {
+        {
+          r.b1 = undefined;
+          clearRegion(r.a4, 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);
+  };
+  const t0 = element.firstChild;
+  const t1 = t0.firstChild;
+  const t2 = t1.firstChild;
+  const t3 = t2.firstChild;
+  const t4 = t2.nextSibling;
+  const t5 = t1.nextSibling;
+  const t6 = t0.nextSibling;
+  const R = { n: element, a0: t1, a1: t3, a3: t5, v0: null, v1: "", v2: undefined, v3: null, v4: null, v5: null, v6: null, v7: undefined, a2: t4, e0: t4.nextSibling, b0: undefined, a4: t6, e1: t6.nextSibling, b1: undefined };
+  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["preview"] = t1;
+  I.r["input"] = t5;
   return element;
 }
-

package/vanilla/UiEditorInsertTableGrid.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 UiEditorInsertTableGridEventMap {
   insert: CustomEvent<{ readonly rows: number; readonly cols: number; readonly withHeaderRow: boolean }>;
 }