@threadlabs/looma 0.25.6 → 0.26.0

package/vanilla/UiCheckbox.js

@@ -1,73 +1,115 @@
-// 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, readsChanged, rec, toAttribute, writeAttribute, dispatchDeclared, detailCheck, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkBoolean, checkConstrained, checkFormat, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-checkbox/ui-checkbox.js";
 import "../styles/ui-checkbox.css";
 
-const definition = {...{"contract":{"tag":"ui-checkbox","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"indeterminate":{"type":"boolean","required":false,"target":{"property":"indeterminate"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":""},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"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"},"default":"on"}}},"template":{"kind":"element","name":"label","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"kind":"property","key":"indeterminate","name":"indeterminate","expression":"indeterminate","expressionPlan":{"source":"indeterminate","ast":{"kind":"id","name":"indeterminate"},"dependencies":["indeterminate"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[],"ref":"input"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"text"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"description"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[],"name":"description"}],"ref":"description"}]}]},"declarations":[{"kind":"state","name":"internalChecked","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object","shape":{"kind":"object","fields":[{"name":"checked","type":{"kind":"terminal","name":"boolean"},"optional":false},{"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}],"root":{"kind":"native","element":"label","choices":["label"]}},source:{file:import.meta.url},css:""};
+const T0 = ["",[],["input",["type","checkbox"]],["span",["class","text"],["span",["class","label"],4],["span",["class","description","aria-hidden","true"],4]]];
+const T1 = ["",[]];
+const T2 = ["",[]];
+let P0, P1, P2;
+const S = { n: ["internalChecked"], t: ["b"], f: import.meta.url, g: "ui-checkbox", d: { "change": [detailCheck(checkObject([["checked", checkBoolean, false], ["value", checkString, false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false] }, x: dispatchDeclared };
+const D = { props: { "checked": { "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" }, "indeterminate": { "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" }, "label": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "name": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "required": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "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,"default":"on", c: checkString, t: "string", j: 0, m: "s" } } };
+const C = (host) => controller.default(host);
 
-export function createUiCheckbox(options = {}) {
+export function createUiCheckbox(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
-  const projected = [];
   const element = document.createElement("label");
   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-checkbox");
-  const element0 = document.createElement("input");
-  element0.setAttribute("type", "checkbox");
-  const value0 = componentProps["label"] === undefined ? "" : componentProps["label"];
-  if (value0 === null || value0 === undefined) element0.removeAttribute("aria-label");
-  else element0.setAttribute("aria-label", String(value0));
-  const value1 = componentProps["indeterminate"] === undefined ? false : componentProps["indeterminate"];
-  if (value1 !== undefined) element0["indeterminate"] = value1;
-  const value2 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
-  if (value2 === true) element0.setAttribute("disabled", "");
-  else element0.removeAttribute("disabled");
-  const value3 = componentProps["invalid"] === undefined ? false : componentProps["invalid"];
-  if (typeof value3 === "boolean") element0.setAttribute("aria-invalid", String(value3));
-  else element0.removeAttribute("aria-invalid");
-  const value4 = componentProps["required"] === undefined ? false : componentProps["required"];
-  if (value4 === true) element0.setAttribute("required", "");
-  else element0.removeAttribute("required");
-  const value5 = componentProps["name"] === undefined ? "" : componentProps["name"];
-  if (value5 === null || value5 === undefined) element0.removeAttribute("name");
-  else element0.setAttribute("name", String(value5));
-  const value6 = componentProps["value"] === undefined ? "on" : componentProps["value"];
-  if (value6 === null || value6 === undefined) element0.removeAttribute("value");
-  else element0.setAttribute("value", String(value6));
-  element.append(element0);
-  const element1 = document.createElement("span");
-  element1.setAttribute("class", "text");
-  const element2 = document.createElement("span");
-  element2.setAttribute("class", "label");
-  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, ""]);
-      element2.append(node);
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [false, 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 r = { n };
+    p2(r, -1, d);
+    return r;
+  };
+  const p2 = (r, c, d) => {
+  };
+  const p0 = (r, c, d) => {
+    if (c & 32) {
+      const x0 = v[5];
+      const s0 = toAttribute(x0, "aria-label");
+      if (s0 !== r.v0) writeAttribute(r.a0, "aria-label", r.v0 = s0);
     }
-  } else {
-  }
-  element1.append(element2);
-  const element3 = document.createElement("span");
-  element3.setAttribute("class", "description");
-  element3.setAttribute("aria-hidden", "true");
-  if (slots["description"] ?? [].length > 0) {
-    for (const child of slots["description"] ?? []) {
-      const node = typeof child === "string" ? document.createTextNode(child) : child;
-      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
-      projected.push([node, "description"]);
-      element3.append(node);
+    if (c & 1) {
+      const f0 = [];
+      const x1 = rec(f0, v[0]);
+      if (c === -1 || c & 1 || readsChanged(r.v1, f0)) {
+        r.v1 = f0;
+        r.a0["checked"] = x1;
+      }
     }
-  } else {
-  }
-  element1.append(element3);
-  element.append(element1);
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-    controller,
-  });
+    if (c & 8) {
+      const f1 = [];
+      const x2 = rec(f1, v[3]);
+      if (c === -1 || c & 8 || readsChanged(r.v2, f1)) {
+        r.v2 = f1;
+        r.a0["indeterminate"] = x2;
+      }
+    }
+    if (c & 4) {
+      const x3 = v[2];
+      const s3 = toAttribute(x3, "disabled");
+      if (s3 !== r.v3) writeAttribute(r.a0, "disabled", r.v3 = s3);
+    }
+    if (c & 16) {
+      const x4 = v[4];
+      const s4 = toAttribute(x4, "aria-invalid");
+      if (s4 !== r.v4) writeAttribute(r.a0, "aria-invalid", r.v4 = s4);
+    }
+    if (c & 128) {
+      const x5 = v[7];
+      const s5 = toAttribute(x5, "required");
+      if (s5 !== r.v5) writeAttribute(r.a0, "required", r.v5 = s5);
+    }
+    if (c & 64) {
+      const x6 = v[6];
+      const s6 = toAttribute(x6, "name");
+      if (s6 !== r.v6) writeAttribute(r.a0, "name", r.v6 = s6);
+    }
+    if (c & 512) {
+      const x7 = v[9];
+      const s7 = toAttribute(x7, "value");
+      if (s7 !== r.v7) writeAttribute(r.a0, "value", r.v7 = s7);
+    }
+    if (c & 276) {
+      const x8 = hostState(["invalid","disabled","size"], [v[4], v[2], v[8]]);
+      const s8 = x8;
+      if (s8 !== r.v8) writeAttribute(r.n, "data-ui-checkbox-state", (r.v8 = s8) === "" ? null : s8);
+    }
+    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, "description", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b1 = m2(d); at.before(r.b1.n); } }
+    else if (r.b1 !== undefined) p2(r.b1, c, d);
+  };
+  const t0 = element.firstChild;
+  const t1 = t0.nextSibling;
+  const t2 = t1.firstChild;
+  const t3 = t2.firstChild;
+  const t4 = t2.nextSibling;
+  const t5 = t4.firstChild;
+  const R = { n: element, a0: t0, v0: null, v1: undefined, v2: undefined, v3: null, v4: null, v5: null, v6: null, v7: null, v8: undefined, a1: t3, e0: t3.nextSibling, b0: undefined, f0: undefined, a3: t5, e1: t5.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);
+  I.r["input"] = t0;
+  I.r["description"] = t4;
   return element;
 }
-

package/vanilla/UiCluster.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 UiClusterEventMap {
 }
 export interface UiClusterElement extends HTMLDivElement {

package/vanilla/UiCluster.js

@@ -1,41 +1,47 @@
-// Generated by HTML Next 1.0.0-alpha.29 for Vanilla DOM. Do not edit.
-import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
+// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, buildTemplate, writeAttribute, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkBoolean, checkFormat } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-cluster.css";
 
-export function createUiCluster(options = {}) {
+const T0 = ["",[],4];
+const T1 = ["",[]];
+let P0, P1;
+const S = { n: [], t: [], f: import.meta.url, g: "ui-cluster" };
+const D = { props: { "align": { "required":false,"values":["start","center","end","stretch","baseline"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "fixed": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "gap": { "required":false,"values":["xs","s","m","l","xl"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "justify": { "required":false,"values":["start","center","end","between"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "padding": { "required":false,"values":["none","s","m","l"],"default":"none", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "paddingEnd": { "required":false,"values":["none","s","m","l","xl"],"default":"none", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "wrap": { "required":false,"values":["wrap","nowrap"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+
+export function createUiCluster(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
-  const projected = [];
-  const prop0 = componentProps["align"] === undefined ? undefined : componentProps["align"];
-  const prop1 = componentProps["fixed"] === undefined ? false : componentProps["fixed"];
-  const prop2 = componentProps["gap"] === undefined ? undefined : componentProps["gap"];
-  const prop3 = componentProps["justify"] === undefined ? undefined : componentProps["justify"];
-  const prop4 = componentProps["padding"] === undefined ? "none" : componentProps["padding"];
-  const prop5 = componentProps["paddingEnd"] === undefined ? "none" : componentProps["paddingEnd"];
-  const prop6 = componentProps["wrap"] === undefined ? undefined : componentProps["wrap"];
   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-cluster");
-  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, null, null, null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const m1 = (d) => {
+    const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
+    const r = { n };
+    p1(r, -1, d);
+    return r;
+  };
+  const p1 = (r, c, d) => {
+  };
+  const p0 = (r, c, d) => {
+    if (c & 127) {
+      const x0 = hostState(["fixed","padding","paddingEnd","gap","align","justify","wrap"], [v[1], v[4], v[5], v[2], v[0], v[3], v[6]]);
+      const s0 = x0;
+      if (s0 !== r.v0) writeAttribute(r.n, "data-ui-cluster-state", (r.v0 = s0) === "" ? null : s0);
     }
-  } else {
-  }
-  manageGeneratedProps(element, [
-    { name: "align", attribute: "data-align", value: componentProps["align"], type: ["start","center","end","stretch","baseline"], required: false },
-    { name: "fixed", attribute: "data-fixed", value: componentProps["fixed"], default: false, type: "boolean", required: false },
-    { name: "gap", attribute: "data-gap", value: componentProps["gap"], type: ["xs","s","m","l","xl"], required: false },
-    { name: "justify", attribute: "data-justify", value: componentProps["justify"], type: ["start","center","end","between"], required: false },
-    { name: "padding", attribute: "data-padding", value: componentProps["padding"], default: "none", type: ["none","s","m","l"], required: false },
-    { name: "paddingEnd", attribute: "data-padding-end", value: componentProps["paddingEnd"], default: "none", type: ["none","s","m","l","xl"], required: false },
-    { name: "wrap", attribute: "data-wrap", value: componentProps["wrap"], type: ["wrap","nowrap"], required: false },
-  ]);
+    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 R = { n: element, v0: undefined, a0: t0, e0: t0.nextSibling, b0: undefined, f0: undefined };
+  const I = { B };
+  const J = project(I, children, slots);
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, undefined, I);
+  manageProps(I);
   return element;
 }
-

package/vanilla/UiCombobox.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 UiComboboxEventMap {
   "query-change": CustomEvent<{ readonly query: string; readonly display: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   "value-change": CustomEvent<{ readonly value: string | null; readonly query: string; readonly option: { readonly id: string; readonly value: string; readonly label: string; readonly group?: string; readonly disabled?: boolean; readonly description?: string; readonly tag?: { readonly label: string; readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger"; readonly color?: string } } | null; readonly kind: "selection" | "clear" | "free-entry" | "create"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;