@threadlabs/looma 0.25.7 → 0.26.0

package/vanilla/UiSelect.js

@@ -1,40 +1,64 @@
-// 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, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkBoolean, checkFormat, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-select/ui-select.js";
 import "../styles/ui-select.css";
 
-const definition = {...{"contract":{"tag":"ui-select","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"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"}}}},"template":{"kind":"element","name":"select","attributes":[{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}}],"children":[{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"select","choices":["select"]}},source:{file:import.meta.url},css:""};
+const T0 = ["",[],4];
+const T1 = ["",[]];
+let P0, P1;
+const S = { n: [], t: [], f: import.meta.url, g: "ui-select" };
+const D = { props: { "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "invalid": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "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, c: checkString, t: "string", j: 0, m: "s" } } };
+const C = (host) => controller.default(host);
 
-export function createUiSelect(options = {}) {
+export function createUiSelect(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
-  const projected = [];
   const element = document.createElement("select");
   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["disabled"] === undefined ? false : componentProps["disabled"];
-  if (value0 === true) element.setAttribute("disabled", "");
-  else element.removeAttribute("disabled");
-  const value1 = componentProps["required"] === undefined ? false : componentProps["required"];
-  if (value1 === true) element.setAttribute("required", "");
-  else element.removeAttribute("required");
-  const value2 = componentProps["invalid"] === undefined ? false : componentProps["invalid"];
-  if (typeof value2 === "boolean") element.setAttribute("aria-invalid", String(value2));
-  else element.removeAttribute("aria-invalid");
   element.setAttribute("data-component", "ui-select");
-  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];
+  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 & 1) {
+      const x0 = v[0];
+      const s0 = toAttribute(x0, "disabled");
+      if (s0 !== r.v0) writeAttribute(r.n, "disabled", r.v0 = s0);
     }
-  } else {
-  }
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-    controller,
-  });
+    if (c & 4) {
+      const x1 = v[2];
+      const s1 = toAttribute(x1, "required");
+      if (s1 !== r.v1) writeAttribute(r.n, "required", r.v1 = s1);
+    }
+    if (c & 2) {
+      const x2 = v[1];
+      const s2 = toAttribute(x2, "aria-invalid");
+      if (s2 !== r.v2) writeAttribute(r.n, "aria-invalid", r.v2 = s2);
+    }
+    if (c & 8) {
+      const x3 = hostState(["size"], [v[3]]);
+      const s3 = x3;
+      if (s3 !== r.v3) writeAttribute(r.n, "data-ui-select-state", (r.v3 = s3) === "" ? null : s3);
+    }
+    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 R = { n: element, v0: undefined, v1: undefined, v2: undefined, v3: undefined, a1: 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)), C, undefined, I);
+  manageProps(I);
   return element;
 }
-

package/vanilla/UiSeparator.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 UiSeparatorEventMap {
 }
 export interface UiSeparatorElement extends HTMLHRElement {

package/vanilla/UiSeparator.js

@@ -1,34 +1,35 @@
-// 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, toAttribute, writeAttribute, formatOf, keywordFormat, hostState, acceptProps, manageProps, checkBoolean, checkFormat } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-separator.css";
 
-export function createUiSeparator(options = {}) {
+const S = { n: [], t: [], f: import.meta.url, g: "ui-separator" };
+const D = { props: { "emphasis": { "required":false,"values":["normal","strong"],"default":"normal", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "orientation": { "required":false,"values":["horizontal","vertical"],"default":"horizontal", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "selectable": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "selected": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" } } };
+
+export function createUiSeparator(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
-  const projected = [];
-  const prop0 = componentProps["emphasis"] === undefined ? "normal" : componentProps["emphasis"];
-  const prop1 = componentProps["orientation"] === undefined ? "horizontal" : componentProps["orientation"];
-  const prop2 = componentProps["selectable"] === undefined ? false : componentProps["selectable"];
-  const prop3 = componentProps["selected"] === undefined ? false : componentProps["selected"];
   const element = document.createElement("hr");
   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 = prop1;
-  if (value0 === null || value0 === undefined) element.removeAttribute("aria-orientation");
-  else element.setAttribute("aria-orientation", String(value0));
   element.setAttribute("data-component", "ui-separator");
-  manageGeneratedProps(element, [
-    { name: "emphasis", attribute: "data-emphasis", value: componentProps["emphasis"], default: "normal", type: ["normal","strong"], required: false },
-    { name: "orientation", attribute: "data-orientation", value: componentProps["orientation"], default: "horizontal", type: ["horizontal","vertical"], required: false },
-    { name: "selectable", attribute: "data-selectable", value: componentProps["selectable"], default: false, type: "boolean", required: false },
-    { name: "selected", attribute: "data-selected", value: componentProps["selected"], default: false, type: "boolean", required: false },
-  ], (name, value) => {
-    if (name === "orientation") {
-      if (value === null || value === undefined) element.removeAttribute("aria-orientation");
-      else element.setAttribute("aria-orientation", String(value));
+  const v = [null, null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const p0 = (r, c, d) => {
+    if (c & 1073741826) {
+      const x0 = v[1];
+      const s0 = toAttribute(x0, "aria-orientation");
+      if (s0 !== r.v0) writeAttribute(r.n, "aria-orientation", r.v0 = s0);
+    }
+    if (c & 13) {
+      const x1 = hostState(["emphasis","selectable","selected"], [v[0], v[2], v[3]]);
+      const s1 = x1;
+      if (s1 !== r.v1) writeAttribute(r.n, "data-ui-separator-state", (r.v1 = s1) === "" ? null : s1);
     }
-  });
+  };
+  const R = { n: element, v0: undefined, v1: undefined };
+  const I = { B };
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, undefined, I);
+  manageProps(I);
   return element;
 }
-

package/vanilla/UiSidebar.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 UiSidebarEventMap {
   resize: CustomEvent<{ readonly width: number; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
   toggle: CustomEvent<{ readonly open: boolean; readonly mode: "docked" | "drawer"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;

package/vanilla/UiSidebar.js

@@ -1,51 +1,63 @@
-// 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, truthy, 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-sidebar/ui-sidebar.js";
 import "../styles/ui-sidebar.css";
 
-const definition = {...{"contract":{"tag":"ui-sidebar","props":{"breakpoint":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md","lg"],"required":false,"target":{"attribute":"breakpoint"},"default":"md"},"collapsed":{"type":"boolean","required":false,"target":{"attribute":"collapsed"},"default":false},"maxWidth":{"type":"number","required":false,"target":{"attribute":"maxwidth"},"default":480},"minWidth":{"type":"number","required":false,"target":{"attribute":"minwidth"},"default":200},"resizable":{"type":"boolean","required":false,"target":{"attribute":"resizable"},"default":false},"resizeLabel":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":"Resize sidebar"},"resizeStep":{"type":"number","required":false,"target":{"attribute":"resizestep"},"default":16},"side":{"type":{"kind":"terminal","name":"keyword"},"values":["start","end"],"required":false,"target":{"attribute":"side"},"default":"start"},"width":{"type":"number","required":false,"target":{"attribute":"width"},"default":0}}},"template":{"kind":"element","name":"aside","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"viewport"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"slot"}]}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"resizer"},{"kind":"literal","name":"role","value":"separator"},{"kind":"literal","name":"aria-orientation","value":"vertical"},{"kind":"literal","name":"tabindex","value":"0"},{"kind":"literal","name":"data-ui-affordance","value":"resize"},{"kind":"attribute","name":"aria-label","expression":"resizeLabel","expressionPlan":{"source":"resizeLabel","ast":{"kind":"id","name":"resizeLabel"},"dependencies":["resizeLabel"]}},{"kind":"attribute","name":"hidden","expression":"not resizable or drawer or internalCollapsed","expressionPlan":{"source":"not resizable or drawer or internalCollapsed","ast":{"kind":"binary","op":"or","left":{"kind":"binary","op":"or","left":{"kind":"unary","op":"not","operand":{"kind":"id","name":"resizable"}},"right":{"kind":"id","name":"drawer"}},"right":{"kind":"id","name":"internalCollapsed"}},"dependencies":["drawer","internalCollapsed","resizable"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"guide"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"resizer"}]},"declarations":[{"kind":"state","name":"internalCollapsed","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"drawer","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"resizing","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"resize","type":"object","shape":{"kind":"object","fields":[{"name":"width","type":{"kind":"terminal","name":"number"},"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":"toggle","type":"object","shape":{"kind":"object","fields":[{"name":"open","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"mode","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["docked","drawer"]},"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":"aside","choices":["aside"]}},source:{file:import.meta.url},css:""};
+const T0 = ["",[],["div",["class","viewport"],["div",["class","content"],4]],["div",["class","resizer","role","separator","aria-orientation","vertical","tabindex","0","data-ui-affordance","resize"],["span",["class","guide","aria-hidden","true"]]]];
+const T1 = ["",[]];
+let P0, P1;
+const S = { n: ["internalCollapsed","drawer","resizing"], t: ["b","b","b"], f: import.meta.url, g: "ui-sidebar", d: { "resize": [detailCheck(checkObject([["width", checkNumber, false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "toggle": [detailCheck(checkObject([["open", checkBoolean, false], ["mode", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["docked","drawer"]}), false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false] }, x: dispatchDeclared };
+const D = { props: { "breakpoint": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "collapsed": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "maxWidth": { "required":false,"default":480, c: checkNumber, t: "number", j: 0, m: "n" }, "minWidth": { "required":false,"default":200, c: checkNumber, t: "number", j: 0, m: "n" }, "resizable": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "resizeLabel": { "required":false,"default":"Resize sidebar", c: checkString, t: "string", j: 0, m: "s" }, "resizeStep": { "required":false,"default":16, c: checkNumber, t: "number", j: 0, m: "n" }, "side": { "required":false,"values":["start","end"],"default":"start", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "width": { "required":false,"default":0, c: checkNumber, t: "number", j: 0, m: "n" } } };
+const C = (host) => controller.default(host);
 
-export function createUiSidebar(options = {}) {
+export function createUiSidebar(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
-  const projected = [];
   const element = document.createElement("aside");
   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-sidebar");
-  const element0 = document.createElement("div");
-  element0.setAttribute("class", "viewport");
-  const element1 = document.createElement("div");
-  element1.setAttribute("class", "content");
-  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, ""]);
-      element1.append(node);
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [false, false, 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 p0 = (r, c, d) => {
+    if (c & 256) {
+      const x0 = v[8];
+      const s0 = toAttribute(x0, "aria-label");
+      if (s0 !== r.v0) writeAttribute(r.a1, "aria-label", r.v0 = s0);
     }
-  } else {
-  }
-  element0.append(element1);
-  element.append(element0);
-  const element2 = document.createElement("div");
-  element2.setAttribute("class", "resizer");
-  element2.setAttribute("role", "separator");
-  element2.setAttribute("aria-orientation", "vertical");
-  element2.setAttribute("tabindex", "0");
-  element2.setAttribute("data-ui-affordance", "resize");
-  const value0 = componentProps["resizeLabel"] === undefined ? "Resize sidebar" : componentProps["resizeLabel"];
-  if (value0 === null || value0 === undefined) element2.removeAttribute("aria-label");
-  else element2.setAttribute("aria-label", String(value0));
-  const element3 = document.createElement("span");
-  element3.setAttribute("class", "guide");
-  element3.setAttribute("aria-hidden", "true");
-  element2.append(element3);
-  element.append(element2);
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-    controller,
-  });
+    if (c & 131) {
+      const x1 = ((!truthy(v[7]) || v[1]) || v[0]);
+      const s1 = toAttribute(x1, "hidden");
+      if (s1 !== r.v1) writeAttribute(r.a1, "hidden", r.v1 = s1);
+    }
+    if (c & 1029) {
+      const x2 = hostState(["side","internalCollapsed","resizing"], [v[10], v[0], v[2]]);
+      const s2 = x2;
+      if (s2 !== r.v2) writeAttribute(r.n, "data-ui-sidebar-state", (r.v2 = s2) === "" ? null : s2);
+    }
+    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.firstChild.firstChild;
+  const t2 = t0.nextSibling;
+  const R = { n: element, a1: t2, v0: null, v1: null, v2: undefined, a0: t1, e0: t1.nextSibling, b0: undefined, f0: undefined };
+  const I = { B };
+  const J = project(I, children, slots);
+  I.R = new Set();
+  attachGeneratedController(element, S, v, (c, d) => { ((c, d) => p0(R, c, d))(c, d); for (const f of I.R) f(c, d); }, C, undefined, I);
+  manageProps(I);
+  I.r["resizer"] = t2;
   return element;
 }
-

package/vanilla/UiSpinner.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 UiSpinnerEventMap {
 }
 export interface UiSpinnerElement extends HTMLSpanElement {

package/vanilla/UiSpinner.js

@@ -1,12 +1,14 @@
-// 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, NONCONFORMING, readIndex, textCall, toAttribute, writeAttribute, formatOf, keywordFormat, hostState, acceptProps, manageProps, checkFormat, checkString } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-spinner.css";
 
-const definition = {...{"contract":{"tag":"ui-spinner","props":{"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":""},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md"],"required":false,"target":{"attribute":"size"},"default":"md"}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"ring"},{"kind":"attribute","name":"role","expression":"{ true: 'status', false: null }[concat(label != '')]","expressionPlan":{"source":"{ true: 'status', false: null }[concat(label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"status"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"concat","args":[{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}},{"kind":"attribute","name":"aria-label","expression":"{ true: label, false: null }[concat(label != '')]","expressionPlan":{"source":"{ true: label, false: null }[concat(label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"id","name":"label"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"concat","args":[{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}},{"kind":"attribute","name":"aria-live","expression":"{ true: 'polite', false: null }[concat(label != '')]","expressionPlan":{"source":"{ true: 'polite', false: null }[concat(label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"polite"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"concat","args":[{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}},{"kind":"attribute","name":"aria-hidden","expression":"{ true: null, false: 'true' }[concat(label != '')]","expressionPlan":{"source":"{ true: null, false: 'true' }[concat(label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":null}},{"key":"false","value":{"kind":"literal","value":"true"}}]},"index":{"kind":"call","fn":"concat","args":[{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"viewBox","value":"0 0 50 50"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"literal","name":"focusable","value":"false"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"class","value":"track"},{"kind":"literal","name":"cx","value":"25"},{"kind":"literal","name":"cy","value":"25"},{"kind":"literal","name":"r","value":"20"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"class","value":"arc"},{"kind":"literal","name":"cx","value":"25"},{"kind":"literal","name":"cy","value":"25"},{"kind":"literal","name":"r","value":"20"}],"children":[]}]}]},"declarations":[],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+const T0 = ["",[],["svg",["viewBox","0 0 50 50","fill","none","aria-hidden","true","focusable","false"],["circle",["class","track","cx","25","cy","25","r","20"]],["circle",["class","arc","cx","25","cy","25","r","20"]]]];
+let P0;
+const S = { n: [], t: [], f: import.meta.url, g: "ui-spinner" };
+const D = { props: { "label": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "size": { "required":false,"values":["sm","md"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 
-export function createUiSpinner(options = {}) {
+export function createUiSpinner(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;
@@ -14,26 +16,41 @@ export function createUiSpinner(options = {}) {
   }
   element.setAttribute("class", ["ring", element.getAttribute("class")].filter(Boolean).join(" "));
   element.setAttribute("data-component", "ui-spinner");
-  const element0 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  element0.setAttribute("viewBox", "0 0 50 50");
-  element0.setAttribute("fill", "none");
-  element0.setAttribute("aria-hidden", "true");
-  element0.setAttribute("focusable", "false");
-  const element1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-  element1.setAttribute("class", "track");
-  element1.setAttribute("cx", "25");
-  element1.setAttribute("cy", "25");
-  element1.setAttribute("r", "20");
-  element0.append(element1);
-  const element2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-  element2.setAttribute("class", "arc");
-  element2.setAttribute("cx", "25");
-  element2.setAttribute("cy", "25");
-  element2.setAttribute("r", "20");
-  element0.append(element2);
-  element.append(element0);
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-  });
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const p0 = (r, c, d) => {
+    if (c & 1073741825) {
+      const x0 = readIndex({ "true": "status", "false": null }, textCall("concat", [(v[0] !== "")]));
+      if (x0 !== NONCONFORMING) {
+        const s0 = toAttribute(x0, "role");
+        if (s0 !== r.v0) writeAttribute(r.n, "role", r.v0 = s0);
+      }
+      const x1 = readIndex({ "true": v[0], "false": null }, textCall("concat", [(v[0] !== "")]));
+      if (x1 !== NONCONFORMING) {
+        const s1 = toAttribute(x1, "aria-label");
+        if (s1 !== r.v1) writeAttribute(r.n, "aria-label", r.v1 = s1);
+      }
+      const x2 = readIndex({ "true": "polite", "false": null }, textCall("concat", [(v[0] !== "")]));
+      if (x2 !== NONCONFORMING) {
+        const s2 = toAttribute(x2, "aria-live");
+        if (s2 !== r.v2) writeAttribute(r.n, "aria-live", r.v2 = s2);
+      }
+      const x3 = readIndex({ "true": null, "false": "true" }, textCall("concat", [(v[0] !== "")]));
+      if (x3 !== NONCONFORMING) {
+        const s3 = toAttribute(x3, "aria-hidden");
+        if (s3 !== r.v3) writeAttribute(r.n, "aria-hidden", r.v3 = s3);
+      }
+    }
+    if (c & 2) {
+      const x4 = hostState(["size"], [v[1]]);
+      const s4 = x4;
+      if (s4 !== r.v4) writeAttribute(r.n, "data-ui-spinner-state", (r.v4 = s4) === "" ? null : s4);
+    }
+  };
+  const R = { n: element, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined };
+  const I = { B };
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, undefined, I);
+  manageProps(I);
   return element;
 }
-

package/vanilla/UiStack.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 UiStackEventMap {
 }
 export interface UiStackElement extends HTMLDivElement {

package/vanilla/UiStack.js

@@ -1,32 +1,52 @@
-// 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, toText, writeAttribute, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkBoolean, checkFormat, checkNumber } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-stack.css";
 
-const definition = {...{"contract":{"tag":"ui-stack","props":{"align":{"type":{"kind":"terminal","name":"keyword"},"values":["start","center","end","stretch"],"required":false,"target":{"attribute":"align"}},"fill":{"type":"boolean","required":false,"target":{"attribute":"fill"},"default":false},"gap":{"type":{"kind":"terminal","name":"keyword"},"values":["none","xs","s","m","l","xl"],"required":false,"target":{"attribute":"gap"}},"height":{"type":"number","required":false,"target":{"attribute":"height"}},"justify":{"type":{"kind":"terminal","name":"keyword"},"values":["start","center","end","between"],"required":false,"target":{"attribute":"justify"}}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"attribute","name":"--ui-stack-height","expression":"height","expressionPlan":{"source":"height","ast":{"kind":"id","name":"height"},"dependencies":["height"]},"target":"style"}],"children":[{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const T0 = ["",[],4];
+const T1 = ["",[]];
+let P0, P1;
+const S = { n: [], t: [], f: import.meta.url, g: "ui-stack" };
+const D = { props: { "align": { "required":false,"values":["start","center","end","stretch"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "fill": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "gap": { "required":false,"values":["none","xs","s","m","l","xl"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "height": { "required":false, c: checkNumber, t: "number", j: 0, m: "n" }, "justify": { "required":false,"values":["start","center","end","between"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 
-export function createUiStack(options = {}) {
+export function createUiStack(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));
   }
-  const value0 = componentProps["height"] === undefined ? null : componentProps["height"];
-  if (value0 === null || value0 === undefined) element.removeAttribute("--ui-stack-height");
-  else element.setAttribute("--ui-stack-height", String(value0));
   element.setAttribute("data-component", "ui-stack");
-  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];
+  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 & 8) {
+      const x0 = v[3];
+      const s0 = toText(x0);
+      if (s0 !== r.v0) r.n.style.setProperty("--ui-stack-height", r.v0 = s0);
     }
-  } else {
-  }
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-  });
+    if (c & 31) {
+      const x1 = hostState(["fill","height","gap","align","justify"], [v[1], v[3], v[2], v[0], v[4]]);
+      const s1 = x1;
+      if (s1 !== r.v1) writeAttribute(r.n, "data-ui-stack-state", (r.v1 = s1) === "" ? null : s1);
+    }
+    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 R = { n: element, v0: undefined, v1: undefined, a1: 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/UiStatusMessage.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 UiStatusMessageEventMap {
 }
 export interface UiStatusMessageElement extends HTMLDivElement {