@threadlabs/looma 0.25.7 → 0.26.0

package/vanilla/UiTextarea.js

@@ -1,46 +1,69 @@
-// 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, toAttribute, toText, writeAttribute, formatOf, keywordFormat, hostState, acceptProps, manageProps, checkBoolean, checkFormat, checkInteger, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-textarea/ui-textarea.js";
 import "../styles/ui-textarea.css";
 
-const definition = {...{"contract":{"tag":"ui-textarea","props":{"autosize":{"type":"boolean","required":false,"target":{"attribute":"autosize"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"maxRows":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"maxrows"}},"readonly":{"type":"boolean","required":false,"target":{"attribute":"readonly"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"rows":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"rows"},"default":4},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"md"},"value":{"type":"string","required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"textarea","attributes":[{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"readonly","expression":"readonly","expressionPlan":{"source":"readonly","ast":{"kind":"id","name":"readonly"},"dependencies":["readonly"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}},{"kind":"attribute","name":"rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]}},{"kind":"attribute","name":"--_rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]},"target":"style"},{"kind":"attribute","name":"--_max-rows","expression":"maxRows","expressionPlan":{"source":"maxRows","ast":{"kind":"id","name":"maxRows"},"dependencies":["maxRows"]},"target":"style"}],"children":[]},"declarations":[],"root":{"kind":"native","element":"textarea","choices":["textarea"]}},source:{file:import.meta.url},css:""};
+const S = { n: [], t: [], f: import.meta.url, g: "ui-textarea" };
+const D = { props: { "autosize": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "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" }, "maxRows": { "required":false, c: checkInteger, t: "integer", j: 0, m: "i" }, "readonly": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "required": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "rows": { "required":false,"default":4, c: checkInteger, t: "integer", j: 0, m: "i" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "value": { "required":false, c: checkString, t: "string", j: 0, m: "s" } } };
+const C = (host) => controller.default(host);
 
-export function createUiTextarea(options = {}) {
+export function createUiTextarea(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
-  const projected = [];
   const element = document.createElement("textarea");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
     element.setAttribute(name, value === true ? "" : String(value));
   }
-  const value0 = componentProps["value"] === undefined ? null : componentProps["value"];
-  if (value0 === null || value0 === undefined) element.removeAttribute("value");
-  else element.setAttribute("value", String(value0));
-  const value1 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
-  if (value1 === true) element.setAttribute("disabled", "");
-  else element.removeAttribute("disabled");
-  const value2 = componentProps["readonly"] === undefined ? false : componentProps["readonly"];
-  if (value2 === true) element.setAttribute("readonly", "");
-  else element.removeAttribute("readonly");
-  const value3 = componentProps["required"] === undefined ? false : componentProps["required"];
-  if (value3 === true) element.setAttribute("required", "");
-  else element.removeAttribute("required");
-  const value4 = componentProps["invalid"] === undefined ? false : componentProps["invalid"];
-  if (typeof value4 === "boolean") element.setAttribute("aria-invalid", String(value4));
-  else element.removeAttribute("aria-invalid");
-  const value5 = componentProps["rows"] === undefined ? 4 : componentProps["rows"];
-  if (value5 === null || value5 === undefined) element.removeAttribute("rows");
-  else element.setAttribute("rows", String(value5));
-  const value6 = componentProps["rows"] === undefined ? 4 : componentProps["rows"];
-  if (value6 === null || value6 === undefined) element.removeAttribute("--_rows");
-  else element.setAttribute("--_rows", String(value6));
-  const value7 = componentProps["maxRows"] === undefined ? null : componentProps["maxRows"];
-  if (value7 === null || value7 === undefined) element.removeAttribute("--_max-rows");
-  else element.setAttribute("--_max-rows", String(value7));
   element.setAttribute("data-component", "ui-textarea");
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-    controller,
-  });
+  const v = [null, null, null, null, null, null, null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const p0 = (r, c, d) => {
+    if (c & 256) {
+      const x0 = v[8];
+      const s0 = toAttribute(x0, "value");
+      if (s0 !== r.v0) writeAttribute(r.n, "value", r.v0 = s0);
+    }
+    if (c & 2) {
+      const x1 = v[1];
+      const s1 = toAttribute(x1, "disabled");
+      if (s1 !== r.v1) writeAttribute(r.n, "disabled", r.v1 = s1);
+    }
+    if (c & 16) {
+      const x2 = v[4];
+      const s2 = toAttribute(x2, "readonly");
+      if (s2 !== r.v2) writeAttribute(r.n, "readonly", r.v2 = s2);
+    }
+    if (c & 32) {
+      const x3 = v[5];
+      const s3 = toAttribute(x3, "required");
+      if (s3 !== r.v3) writeAttribute(r.n, "required", r.v3 = s3);
+    }
+    if (c & 4) {
+      const x4 = v[2];
+      const s4 = toAttribute(x4, "aria-invalid");
+      if (s4 !== r.v4) writeAttribute(r.n, "aria-invalid", r.v4 = s4);
+    }
+    if (c & 64) {
+      const x5 = v[6];
+      const s5 = toAttribute(x5, "rows");
+      if (s5 !== r.v5) writeAttribute(r.n, "rows", r.v5 = s5);
+      const s6 = toText(x5);
+      if (s6 !== r.v6) r.n.style.setProperty("--_rows", r.v6 = s6);
+    }
+    if (c & 8) {
+      const x6 = v[3];
+      const s7 = toText(x6);
+      if (s7 !== r.v7) r.n.style.setProperty("--_max-rows", r.v7 = s7);
+    }
+    if (c & 137) {
+      const x7 = hostState(["size","maxRows","autosize"], [v[7], v[3], v[0]]);
+      const s8 = x7;
+      if (s8 !== r.v8) writeAttribute(r.n, "data-ui-textarea-state", (r.v8 = s8) === "" ? null : s8);
+    }
+  };
+  const R = { n: element, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: undefined, v7: undefined, v8: undefined };
+  const I = { B };
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), C, undefined, I);
+  manageProps(I);
   return element;
 }
-

package/vanilla/UiToast.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 UiToastEventMap {
   dismiss: CustomEvent<{ readonly id: string; readonly reason: "action" | "timeout"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
 }

package/vanilla/UiToast.js

@@ -1,55 +1,76 @@
-// 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, readIndex, toAttribute, writeAttribute, dispatchDeclared, detailCheck, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkConstrained, checkFormat, checkNumber, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-toast/ui-toast.js";
 import "../styles/ui-toast.css";
 
-const definition = {...{"contract":{"tag":"ui-toast","props":{"duration":{"type":"number","required":false,"target":{"attribute":"duration"},"default":0},"tone":{"type":{"kind":"terminal","name":"keyword"},"values":["neutral","info","success","warning","danger"],"required":false,"target":{"attribute":"tone"},"default":"neutral"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"attribute","name":"role","expression":"{ neutral: 'status', info: 'status', success: 'status', warning: 'status', danger: 'alert' }[tone]","expressionPlan":{"source":"{ neutral: 'status', info: 'status', success: 'status', warning: 'status', danger: 'alert' }[tone]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"neutral","value":{"kind":"literal","value":"status"}},{"key":"info","value":{"kind":"literal","value":"status"}},{"key":"success","value":{"kind":"literal","value":"status"}},{"key":"warning","value":{"kind":"literal","value":"status"}},{"key":"danger","value":{"kind":"literal","value":"alert"}}]},"index":{"kind":"id","name":"tone"}},"dependencies":["tone"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"message"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"action"}],"children":[{"kind":"slot","fallback":[],"name":"action"}],"ref":"action"},{"kind":"element","name":"ui-icon-button","attributes":[{"kind":"literal","name":"class","value":"dismiss"},{"kind":"literal","name":"size","value":"sm"},{"kind":"literal","name":"variant","value":"ghost"},{"kind":"attribute","name":"round","expression":"true","expressionPlan":{"source":"true","ast":{"kind":"literal","value":true},"dependencies":[]}},{"kind":"literal","name":"label","value":"Dismiss notification"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"x"}],"children":[]}]}]},"declarations":[{"kind":"event","name":"dismiss","type":"object","shape":{"kind":"object","fields":[{"name":"id","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","timeout"]},"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","message"],4],["div",["class","action"],4],["ui-icon-button",["class","dismiss","size","sm","variant","ghost","label","Dismiss notification"],["ui-icon",["name","x"]]]];
+const T1 = ["",[]];
+const T2 = ["",[]];
+let P0, P1, P2;
+const S = { n: [], t: [], f: import.meta.url, g: "ui-toast", d: { "dismiss": [detailCheck(checkObject([["id", checkString, false], ["reason", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["action","timeout"]}), false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false] }, x: dispatchDeclared };
+const D = { props: { "duration": { "required":false,"default":0, c: checkNumber, t: "number", j: 0, m: "n" }, "tone": { "required":false,"values":["neutral","info","success","warning","danger"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const C = (host) => controller.default(host);
 
-export function createUiToast(options = {}) {
+export function createUiToast(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-toast");
-  const element0 = document.createElement("div");
-  element0.setAttribute("class", "message");
-  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 = [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 r = { n };
+    p2(r, -1, d);
+    return r;
+  };
+  const p2 = (r, c, d) => {
+  };
+  const p0 = (r, c, d) => {
+    if (c & 1073741826) {
+      const x0 = readIndex({ "neutral": "status", "info": "status", "success": "status", "warning": "status", "danger": "alert" }, v[1]);
+      const s0 = toAttribute(x0, "role");
+      if (s0 !== r.v0) writeAttribute(r.n, "role", r.v0 = s0);
     }
-  } else {
-  }
-  element.append(element0);
-  const element1 = document.createElement("div");
-  element1.setAttribute("class", "action");
-  if (slots["action"] ?? [].length > 0) {
-    for (const child of slots["action"] ?? []) {
-      const node = typeof child === "string" ? document.createTextNode(child) : child;
-      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
-      projected.push([node, "action"]);
-      element1.append(node);
+    if (c === -1) {
+      const x1 = true;
+      const s1 = toAttribute(x1, "round");
+      if (s1 !== r.v1) writeAttribute(r.a4, "round", r.v1 = s1);
     }
-  } else {
-  }
-  element.append(element1);
-  const element2 = document.createElement("ui-icon-button");
-  element2.setAttribute("class", "dismiss");
-  element2.setAttribute("size", "sm");
-  element2.setAttribute("variant", "ghost");
-  element2.setAttribute("label", "Dismiss notification");
-  const element3 = document.createElement("ui-icon");
-  element3.setAttribute("name", "x");
-  element2.append(element3);
-  element.append(element2);
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-    controller,
-  });
+    if (c & 2) {
+      const x2 = hostState(["tone"], [v[1]]);
+      const s2 = x2;
+      if (s2 !== r.v2) writeAttribute(r.n, "data-ui-toast-state", (r.v2 = s2) === "" ? null : s2);
+    }
+    if (r.f0 === undefined) { r.f0 = 1; const at = fillSlot(r.a1, 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);
+    if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a3, r.e1, "action", 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.firstChild;
+  const t2 = t0.nextSibling;
+  const t3 = t2.firstChild;
+  const t4 = t2.nextSibling;
+  const R = { n: element, a4: t4, v0: undefined, v1: null, v2: undefined, a1: t1, e0: t1.nextSibling, b0: undefined, f0: undefined, a3: t3, e1: t3.nextSibling, b1: undefined, f1: undefined };
+  const I = { B };
+  const J = project(I, children, slots);
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), C, undefined, I);
+  manageProps(I);
+  I.r["action"] = t2;
   return element;
 }
-

package/vanilla/UiToastRegion.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 UiToastRegionEventMap {
   dismiss: CustomEvent<{ readonly id: string; readonly reason: "action" | "timeout"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   "show-toast": CustomEvent<{ readonly message: string; readonly id?: string; readonly tone?: "neutral" | "info" | "success" | "warning" | "danger"; readonly duration?: number }>;

package/vanilla/UiToastRegion.js

@@ -1,13 +1,19 @@
-// 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, NONCONFORMING, readMember, textCall, toAttribute, toText, trackContainer, truthy, writeAttribute, dispatchDeclared, detailCheck, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkConstrained, checkFormat, checkNumber, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-toast-region/ui-toast-region.js";
 import "../styles/ui-toast-region.css";
 
-const definition = {...{"contract":{"tag":"ui-toast-region","props":{"duration":{"type":"number","required":false,"target":{"attribute":"duration"},"default":0},"placement":{"type":{"kind":"terminal","name":"keyword"},"values":["top","top-start","top-end","bottom","bottom-start","bottom-end"],"required":false,"target":{"attribute":"placement"},"default":"top"}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"region"},{"kind":"literal","name":"aria-label","value":"Notifications"},{"kind":"literal","name":"aria-live","value":"polite"},{"kind":"literal","name":"popover","value":"manual"}],"children":[{"kind":"slot"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"toast"},{"kind":"attribute","name":"closing","expression":"toast.closing","expressionPlan":{"source":"toast.closing","ast":{"kind":"member","object":{"kind":"id","name":"toast"},"key":"closing"},"dependencies":["toast.closing"]},"target":"class"},{"kind":"attribute","name":"id","expression":"toast.id","expressionPlan":{"source":"toast.id","ast":{"kind":"member","object":{"kind":"id","name":"toast"},"key":"id"},"dependencies":["toast.id"]}},{"kind":"attribute","name":"role","expression":"toast.role","expressionPlan":{"source":"toast.role","ast":{"kind":"member","object":{"kind":"id","name":"toast"},"key":"role"},"dependencies":["toast.role"]}},{"kind":"attribute","name":"data-tone","expression":"toast.tone","expressionPlan":{"source":"toast.tone","ast":{"kind":"member","object":{"kind":"id","name":"toast"},"key":"tone"},"dependencies":["toast.tone"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"message"}],"children":[{"kind":"text","value":"$toast.message","expressionPlan":{"source":"$toast.message","ast":{"kind":"member","object":{"kind":"id","name":"toast"},"key":"message"},"dependencies":["toast.message"]}}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"dismiss"},{"kind":"attribute","name":"data-toast","expression":"toast.id","expressionPlan":{"source":"toast.id","ast":{"kind":"member","object":{"kind":"id","name":"toast"},"key":"id"},"dependencies":["toast.id"]}}],"children":[{"kind":"element","name":"ui-icon-button","attributes":[{"kind":"literal","name":"size","value":"sm"},{"kind":"literal","name":"variant","value":"ghost"},{"kind":"attribute","name":"round","expression":"true","expressionPlan":{"source":"true","ast":{"kind":"literal","value":true},"dependencies":[]}},{"kind":"attribute","name":"label","expression":"concat('Dismiss ', toast.message)","expressionPlan":{"source":"concat('Dismiss ', toast.message)","ast":{"kind":"call","fn":"concat","args":[{"kind":"literal","value":"Dismiss "},{"kind":"member","object":{"kind":"id","name":"toast"},"key":"message"}]},"dependencies":["toast.message"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"x"}],"children":[]}]}]}],"flow":{"kind":"each","item":"toast","list":"toasts","listPlan":{"source":"toasts","ast":{"kind":"id","name":"toasts"},"dependencies":["toasts"]},"key":"toast.id","keyPlan":{"source":"toast.id","ast":{"kind":"member","object":{"kind":"id","name":"toast"},"key":"id"},"dependencies":["toast.id"]}}}]},"declarations":[{"kind":"state","name":"toasts","shape":{"kind":"list","item":{"kind":"object","fields":[{"name":"id","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"message","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"tone","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["neutral","info","success","warning","danger"]},"optional":false},{"name":"role","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["alert","status"]},"optional":false},{"name":"closing","type":{"kind":"terminal","name":"boolean"},"optional":false}],"open":false}},"type":"list","value":"[]","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"event","name":"dismiss","type":"object","shape":{"kind":"object","fields":[{"name":"id","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"reason","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["action","timeout"]},"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":"show-toast","type":"object","shape":{"kind":"object","fields":[{"name":"message","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"id","type":{"kind":"terminal","name":"string"},"optional":true},{"name":"tone","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["neutral","info","success","warning","danger"]},"optional":true},{"name":"duration","type":{"kind":"terminal","name":"number"},"optional":true}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const T0 = ["",[],4,2];
+const T1 = ["",[]];
+const T2 = ["div",["class","toast"],["span",["class","message"],0],["span",["class","dismiss"],["ui-icon-button",["size","sm","variant","ghost"],["ui-icon",["name","x"]]]]];
+let P0, P1, P2;
+const E = new Map();
+const S = { n: ["toasts"], t: [["l",["o",["id","s","message","s","tone",["p",formatOf(keywordFormat),false],"role",["p",formatOf(keywordFormat),false],"closing","b"]]]], f: import.meta.url, g: "ui-toast-region", d: { "dismiss": [detailCheck(checkObject([["id", checkString, false], ["reason", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["action","timeout"]}), false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "show-toast": [detailCheck(checkObject([["message", checkString, false], ["id", checkString, true], ["tone", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["neutral","info","success","warning","danger"]}), true], ["duration", checkNumber, true]], false)), true, true, false] }, x: dispatchDeclared };
+const D = { props: { "duration": { "required":false,"default":0, c: checkNumber, t: "number", j: 0, m: "n" }, "placement": { "required":false,"values":["top","top-start","top-end","bottom","bottom-start","bottom-end"],"default":"top", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const C = (host) => controller.default(host);
 
-export function createUiToastRegion(options = {}) {
+export function createUiToastRegion(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;
@@ -18,36 +24,80 @@ export function createUiToastRegion(options = {}) {
   if (!element.hasAttribute("aria-live")) element.setAttribute("aria-live", "polite");
   if (!element.hasAttribute("popover")) element.setAttribute("popover", "manual");
   element.setAttribute("data-component", "ui-toast-region");
-  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, 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 = (o, j, l) => {
+    const n = (P2 ??= buildTemplate(T2)).cloneNode(true);
+    const t0 = n.firstChild;
+    const t1 = t0.firstChild;
+    const t2 = t0.nextSibling;
+    const t3 = t2.firstChild;
+    const r = { k: undefined, i: o, n, x: 0, y: 0, a1: t1, a2: t2, a3: t3, w: 0, v0: false, v1: null, v2: null, v3: null, v4: "", v5: null, v6: null, v7: null };
+    p2(r, -1, E);
+    return r;
+  };
+  const p2 = (r, c, d) => {
+    const o = r.i;
+    if (c & 1073741824) {
+      r.w = 0;
+      const x0 = trackContainer(r, readMember(o, "closing"));
+      const s0 = truthy(x0);
+      if (s0 !== r.v0) r.n.classList.toggle("closing", r.v0 = s0);
+      const x1 = trackContainer(r, readMember(o, "id"));
+      const s1 = toAttribute(x1, "id");
+      if (s1 !== r.v1) writeAttribute(r.n, "id", r.v1 = s1);
+      const x2 = trackContainer(r, readMember(o, "role"));
+      const s2 = toAttribute(x2, "role");
+      if (s2 !== r.v2) writeAttribute(r.n, "role", r.v2 = s2);
+      const x3 = trackContainer(r, readMember(o, "tone"));
+      const s3 = toAttribute(x3, "data-tone");
+      if (s3 !== r.v3) writeAttribute(r.n, "data-tone", r.v3 = s3);
+      const x4 = trackContainer(r, readMember(o, "message"));
+      const s4 = toText(x4);
+      if (s4 !== r.v4) r.a1.data = r.v4 = s4;
+      const s5 = toAttribute(x1, "data-toast");
+      if (s5 !== r.v5) writeAttribute(r.a2, "data-toast", r.v5 = s5);
     }
-  } else {
-  }
-  const element0 = document.createElement("div");
-  element0.setAttribute("class", "toast");
-  const element1 = document.createElement("span");
-  element1.setAttribute("class", "message");
-  const text2 = document.createTextNode("");
-  element1.append(text2);
-  element0.append(element1);
-  const element3 = document.createElement("span");
-  element3.setAttribute("class", "dismiss");
-  const element4 = document.createElement("ui-icon-button");
-  element4.setAttribute("size", "sm");
-  element4.setAttribute("variant", "ghost");
-  const element5 = document.createElement("ui-icon");
-  element5.setAttribute("name", "x");
-  element4.append(element5);
-  element3.append(element4);
-  element0.append(element3);
-  element.append(element0);
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-    controller,
-  });
+    if (c === -1) {
+      const x5 = true;
+      const s6 = toAttribute(x5, "round");
+      if (s6 !== r.v6) writeAttribute(r.a3, "round", r.v6 = s6);
+    }
+    if (c & 1073741824) {
+      const x6 = textCall("concat", ["Dismiss ", trackContainer(r, readMember(o, "message"))]);
+      if (x6 !== NONCONFORMING) {
+        const s7 = toAttribute(x6, "label");
+        if (s7 !== r.v7) writeAttribute(r.a3, "label", r.v7 = s7);
+      }
+    }
+  };
+  const p0 = (r, c, d) => {
+    if (c & 4) {
+      const x0 = hostState(["placement"], [v[2]]);
+      const s0 = x0;
+      if (s0 !== r.v0) writeAttribute(r.n, "data-ui-toast-region-state", (r.v0 = s0) === "" ? null : s0);
+    }
+    if (c & 1073741825) r.L1.update(v[0], d, c);
+    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;
+  const t1 = t0.nextSibling.nextSibling;
+  const R = { n: element, v0: undefined, a0: t0, e0: t0.nextSibling, b0: undefined, f0: undefined, L1: new KeyedList(t1, t1.nextSibling, m2, p2, (o) => readMember(o, "id"), "toast") };
+  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/UiTooltip.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 UiTooltipEventMap {
   open: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   close: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;

package/vanilla/UiTooltip.js

@@ -1,13 +1,18 @@
-// 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, writeAttribute, dispatchDeclared, detailCheck, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkBoolean, checkConstrained, checkFormat, checkNumber, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-tooltip/ui-tooltip.js";
 import "../styles/ui-tooltip.css";
 
-const definition = {...{"contract":{"tag":"ui-tooltip","props":{"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"hideDelay":{"type":"number","required":false,"target":{"attribute":"hidedelay"},"default":100},"inverse":{"type":"boolean","required":false,"target":{"attribute":"inverse"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"placement":{"type":{"kind":"terminal","name":"keyword"},"values":["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"],"required":false,"target":{"attribute":"placement"},"default":"top"},"showDelay":{"type":"number","required":false,"target":{"attribute":"showdelay"},"default":500},"trigger":{"type":{"kind":"terminal","name":"keyword"},"values":["hover","click","focus"],"required":false,"target":{"attribute":"trigger"},"default":"hover"}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"role","value":"tooltip"},{"kind":"attribute","name":"hidden","expression":"not internalOpen","expressionPlan":{"source":"not internalOpen","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"internalOpen"}},"dependencies":["internalOpen"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"surface"}],"children":[{"kind":"slot"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"shortcut"}],"children":[{"kind":"slot","fallback":[],"name":"shortcut"}]}]}]},"declarations":[{"kind":"state","name":"internalOpen","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"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":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+const T0 = ["",[],["div",["class","surface"],4,["span",["class","shortcut"],4]]];
+const T1 = ["",[]];
+const T2 = ["",[]];
+let P0, P1, P2;
+const S = { n: ["internalOpen"], t: ["b"], f: import.meta.url, g: "ui-tooltip", 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: { "for": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "hideDelay": { "required":false,"default":100, c: checkNumber, t: "number", j: 0, m: "n" }, "inverse": { "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,"values":["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"],"default":"top", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "showDelay": { "required":false,"default":500, c: checkNumber, t: "number", j: 0, m: "n" }, "trigger": { "required":false,"values":["hover","click","focus"],"default":"hover", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const C = (host) => controller.default(host);
 
-export function createUiTooltip(options = {}) {
+export function createUiTooltip(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
-  const projected = [];
   const element = document.createElement("span");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
@@ -15,33 +20,51 @@ export function createUiTooltip(options = {}) {
   }
   if (!element.hasAttribute("role")) element.setAttribute("role", "tooltip");
   element.setAttribute("data-component", "ui-tooltip");
-  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, 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 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, "hidden");
+      if (s0 !== r.v0) writeAttribute(r.n, "hidden", r.v0 = s0);
     }
-  } else {
-  }
-  const element1 = document.createElement("span");
-  element1.setAttribute("class", "shortcut");
-  if (slots["shortcut"] ?? [].length > 0) {
-    for (const child of slots["shortcut"] ?? []) {
-      const node = typeof child === "string" ? document.createTextNode(child) : child;
-      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
-      projected.push([node, "shortcut"]);
-      element1.append(node);
+    if (c & 8) {
+      const x1 = hostState(["inverse"], [v[3]]);
+      const s1 = x1;
+      if (s1 !== r.v1) writeAttribute(r.n, "data-ui-tooltip-state", (r.v1 = s1) === "" ? null : s1);
     }
-  } else {
-  }
-  element0.append(element1);
-  element.append(element0);
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-    controller,
-  });
+    if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a2, r.e1, "shortcut", 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);
+    if (r.f0 === undefined) { r.f0 = 1; const at = fillSlot(r.a1, 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;
+  const t1 = t0.firstChild;
+  const t2 = t1.nextSibling.nextSibling.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, f1: 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/UiTopBar.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 UiTopBarEventMap {
 }
 export interface UiTopBarElement extends HTMLElement {