@threadlabs/looma 0.33.1 → 0.34.0

package/vanilla/UiCurveEditor.js

@@ -0,0 +1,134 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, buildTemplate, toAttribute, toText, writeAttribute, dispatchDeclared, detailCheck, formatOf, keywordFormat, acceptProps, manageProps, generatedInputs, checkBoolean, checkFormat, checkObject, checkString, defineComponent, activateModule } from "@nextwebwg/html-next/generated-runtime";
+import * as controller from "../components/ui-curve-editor/ui-curve-editor.js";
+import "../styles/ui-curve-editor.css";
+
+const T0 = ["",[],"\n    ",["span",["class","plot-frame","role","group"],["span",["class","plot"],"\n        ",["svg",["viewBox","0 0 100 100","preserveAspectRatio","none","aria-hidden","true"],["path",["class","guide","d","M0 66.667 H100 M0 33.333 H100"]],["path",["class","guide","d","M0 66.667 L25 63.333"]],["path",["class","guide","d","M100 33.333 L25 33.333"]],["path",["d","M0 66.667 C25 63.333 25 33.333 100 33.333"]]],"\n        ",["button",["class","handle","type","button","aria-label","First curve handle. Arrow keys adjust; Shift moves faster."],"\n        "],"\n        ",["button",["class","handle second","type","button","aria-label","Second curve handle. Arrow keys adjust; Shift moves faster."],"\n        "],"\n      "]],"\n    ",["span",["class","coordinates"],"\n      ",["span",["class","coordinate"],["span",[],"X1"],["ui-number-input",["data-curve-coordinate","0","min","0","max","1","step","0.01","label","First handle X"]]],"\n      ",["span",["class","coordinate"],["span",[],"Y1"],["ui-number-input",["data-curve-coordinate","1","min","-1","max","2","step","0.01","label","First handle Y"]]],"\n      ",["span",["class","coordinate"],["span",[],"X2"],["ui-number-input",["data-curve-coordinate","2","min","0","max","1","step","0.01","label","Second handle X"]]],"\n      ",["span",["class","coordinate"],["span",[],"Y2"],["ui-number-input",["data-curve-coordinate","3","min","-1","max","2","step","0.01","label","Second handle Y"]]],"\n    "],"\n    ",["output",[],0],"\n  "];
+let P0;
+const S = { n: ["point0","point1","point2","point3"], t: ["s","s","s","s"], f: import.meta.url, g: "ui-curve-editor", d: { "input": [detailCheck(checkObject([["value", checkString, false]], false)), true, true, false], "change": [detailCheck(checkObject([["value", checkString, false]], false)), true, true, false] }, x: dispatchDeclared, a: (host, I) => C(host, I), b: generatedInputs, i: ["0.25", "0.1", "0.25", "1"] };
+const D = { g: "ui-curve-editor", props: { "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "label": { "required":false,"default":"Value", c: checkString, t: "string", j: 0, m: "s" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "value": { "required":false,"default":"cubic-bezier(0.25, 0.1, 0.25, 1)", c: checkString, t: "string", j: 0, m: "s" } } };
+const C = (host) => activateModule(controller, host);
+
+export function createUiCurveEditor(options = {}, html) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const element = document.createElement("span");
+  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-curve-editor");
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = ["0.25", "0.1", "0.25", "1", null, null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  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);
+    }
+    if (c & 16) {
+      const x1 = v[4];
+      const s1 = toAttribute(x1, "disabled");
+      if (s1 !== r.v1) writeAttribute(r.a5, "disabled", r.v1 = s1);
+      const s2 = toAttribute(x1, "disabled");
+      if (s2 !== r.v2) writeAttribute(r.a6, "disabled", r.v2 = s2);
+    }
+    if (c & 1) {
+      const x2 = v[0];
+      const s3 = toAttribute(x2, "value");
+      if (s3 !== r.v3) writeAttribute(r.a7, "value", r.v3 = s3);
+    }
+    if (c & 1073741888) {
+      const x3 = v[6];
+      const s4 = toAttribute(x3, "size");
+      if (s4 !== r.v4) writeAttribute(r.a7, "size", r.v4 = s4);
+    }
+    if (c & 16) {
+      const x4 = v[4];
+      const s5 = toAttribute(x4, "disabled");
+      if (s5 !== r.v5) writeAttribute(r.a7, "disabled", r.v5 = s5);
+    }
+    if (c & 2) {
+      const x5 = v[1];
+      const s6 = toAttribute(x5, "value");
+      if (s6 !== r.v6) writeAttribute(r.a8, "value", r.v6 = s6);
+    }
+    if (c & 1073741888) {
+      const x6 = v[6];
+      const s7 = toAttribute(x6, "size");
+      if (s7 !== r.v7) writeAttribute(r.a8, "size", r.v7 = s7);
+    }
+    if (c & 16) {
+      const x7 = v[4];
+      const s8 = toAttribute(x7, "disabled");
+      if (s8 !== r.v8) writeAttribute(r.a8, "disabled", r.v8 = s8);
+    }
+    if (c & 4) {
+      const x8 = v[2];
+      const s9 = toAttribute(x8, "value");
+      if (s9 !== r.v9) writeAttribute(r.a9, "value", r.v9 = s9);
+    }
+    if (c & 1073741888) {
+      const x9 = v[6];
+      const s10 = toAttribute(x9, "size");
+      if (s10 !== r.v10) writeAttribute(r.a9, "size", r.v10 = s10);
+    }
+    if (c & 16) {
+      const x10 = v[4];
+      const s11 = toAttribute(x10, "disabled");
+      if (s11 !== r.v11) writeAttribute(r.a9, "disabled", r.v11 = s11);
+    }
+    if (c & 8) {
+      const x11 = v[3];
+      const s12 = toAttribute(x11, "value");
+      if (s12 !== r.v12) writeAttribute(r.a10, "value", r.v12 = s12);
+    }
+    if (c & 1073741888) {
+      const x12 = v[6];
+      const s13 = toAttribute(x12, "size");
+      if (s13 !== r.v13) writeAttribute(r.a10, "size", r.v13 = s13);
+    }
+    if (c & 16) {
+      const x13 = v[4];
+      const s14 = toAttribute(x13, "disabled");
+      if (s14 !== r.v14) writeAttribute(r.a10, "disabled", r.v14 = s14);
+    }
+    if (c & 128) {
+      const x14 = v[7];
+      const s15 = toText(x14);
+      if (s15 !== r.v15) r.a12.data = r.v15 = s15;
+    }
+  };
+  const t0 = element.firstChild.nextSibling;
+  const t1 = t0.firstChild;
+  const t2 = t1.firstChild.nextSibling;
+  const t3 = t2.firstChild.nextSibling;
+  const t4 = t3.nextSibling;
+  const t5 = t4.nextSibling;
+  const t6 = t2.nextSibling.nextSibling;
+  const t7 = t6.nextSibling.nextSibling;
+  const t8 = t0.nextSibling.nextSibling;
+  const t9 = t8.firstChild.nextSibling;
+  const t10 = t9.firstChild.nextSibling;
+  const t11 = t9.nextSibling.nextSibling;
+  const t12 = t11.firstChild.nextSibling;
+  const t13 = t11.nextSibling.nextSibling;
+  const t14 = t13.firstChild.nextSibling;
+  const t15 = t13.nextSibling.nextSibling.firstChild.nextSibling;
+  const t16 = t8.nextSibling.nextSibling;
+  const t17 = t16.firstChild;
+  const R = { a0: t0, a5: t6, a6: t7, a7: t10, a8: t12, a9: t14, a10: t15, a12: t17, v0: null, v1: null, v2: null, v3: null, v4: null, v5: null, v6: null, v7: null, v8: null, v9: null, v10: null, v11: null, v12: null, v13: null, v14: null, v15: "" };
+  const I = { B };
+  I.R = new Set();
+  attachGeneratedController(element, S, v, (c, d) => { ((c, d) => p0(R, c, d))(c, d); for (const f of I.R) f(c, d); }, undefined, undefined, I);
+  manageProps(I);
+  I.r["plot"] = t1;
+  I.r["firstLine"] = t3;
+  I.r["secondLine"] = t4;
+  I.r["curve"] = t5;
+  I.r["first"] = t6;
+  I.r["second"] = t7;
+  I.r["result"] = t16;
+  return element;
+}
+defineComponent("ui-curve-editor", createUiCurveEditor, ["disabled","label","size","value"]);

package/vanilla/UiIconButton.d.ts

@@ -17,10 +17,11 @@ export interface UiIconButtonProps {
   loading?: boolean | null;
   matchButton?: boolean | null;
   pending?: boolean | null;
+  preset?: "none" | "primary" | "standard" | "quiet" | "destructive" | null;
   revealed?: boolean | null;
   round?: boolean | null;
   size?: "sm" | "md" | "lg" | null;
-  tone?: "accent" | "neutral" | null;
+  tone?: "auto" | "accent" | "neutral" | "danger" | "success" | "warning" | "info" | null;
   variant?: "ghost" | "outline" | "solid" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiIconButton.js

@@ -1,5 +1,5 @@
 // Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
-import { attachGeneratedController, buildTemplate, clearRegion, NONCONFORMING, readIndex, textCall, toAttribute, truthy, writeAttribute, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, generatedInputs, project, fillSlot, checkBoolean, checkFormat, checkString, defineComponent, activateModule } from "@nextwebwg/html-next/generated-runtime";
+import { attachGeneratedController, buildTemplate, clearRegion, NONCONFORMING, readIndex, textCall, toAttribute, truthy, writeAttribute, computedCycle, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, generatedInputs, awaitInput, evaluateInput, inputRead, READY_INPUT, UNRESOLVED_INPUT, notifyPropertySet, project, fillSlot, readonlyView, checkBoolean, checkFormat, checkString, defineComponent, activateModule } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-icon-button/ui-icon-button.js";
 import "../styles/ui-icon-button.css";
 
@@ -7,8 +7,8 @@ const T0 = ["",[],"\n    ",1,"\n    ",["span",["class","content"],4],"\n  "];
 const T1 = ["ui-spinner",["size","sm"]];
 const T2 = ["",[]];
 let P0, P1, P2;
-const S = { n: [], t: [], f: import.meta.url, g: "ui-icon-button", a: (host, I) => C(host, I), b: generatedInputs };
-const D = { g: "ui-icon-button", props: { "anticipatory": { "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" }, "guide": { "required":false,"values":["dot","bar"],"default":"dot", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "label": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "matchButton": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "revealed": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "round": { "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)] }, "tone": { "required":false,"values":["accent","neutral"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "variant": { "required":false,"values":["ghost","outline","solid"],"default":"ghost", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
+const S = { n: ["appearance","colorTone"], t: ["?","?"], f: import.meta.url, g: "ui-icon-button", k: 0, r: readonlyView, a: (host, I) => C(host, I), b: generatedInputs };
+const D = { g: "ui-icon-button", props: { "anticipatory": { "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" }, "guide": { "required":false,"values":["dot","bar"],"default":"dot", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "label": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "matchButton": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "preset": { "required":false,"values":["none","primary","standard","quiet","destructive"],"default":"none", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "revealed": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "round": { "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)] }, "tone": { "required":false,"values":["auto","accent","neutral","danger","success","warning","info"],"default":"auto", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "variant": { "required":false,"values":["ghost","outline","solid"],"default":"ghost", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
 const C = (host) => activateModule(controller, host);
 
 export function createUiIconButton(options = {}, html) {
@@ -21,8 +21,25 @@ export function createUiIconButton(options = {}, html) {
   if (!element.hasAttribute("type")) element.setAttribute("type", "button");
   element.setAttribute("data-component", "ui-icon-button");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = [null, null, null, null, null, null, null, null, null, null, null, null];
+  const v = [undefined, undefined, null, null, null, null, null, null, null, null, null, null, null, null, null];
   const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const CS = [];
+  const inputStatus = (j) => { if (j >= 0 && j < 2) { g(j); return CS[j] ?? UNRESOLVED_INPUT; } if (j === 2) return awaitInput(B, "anticipatory", true); if (j === 3) return awaitInput(B, "disabled", true); if (j === 4) return awaitInput(B, "guide", true); if (j === 5) return awaitInput(B, "label", true); if (j === 6) return awaitInput(B, "loading", true); if (j === 7) return awaitInput(B, "matchButton", true); if (j === 8) return awaitInput(B, "pending", true); if (j === 9) return awaitInput(B, "preset", true); if (j === 10) return awaitInput(B, "revealed", true); if (j === 11) return awaitInput(B, "round", true); if (j === 12) return awaitInput(B, "size", true); if (j === 13) return awaitInput(B, "tone", true); if (j === 14) return awaitInput(B, "variant", true); return v[j] === undefined ? UNRESOLVED_INPUT : READY_INPUT; };
+  const X = { e: 0, g: (j) => g(j), w: new Set(), a: CS, i: inputStatus };
+  const ke = [];
+  const K = [() => readIndex({ "none": inputRead(v[14], inputStatus(14)), "primary": "solid", "standard": "solid", "quiet": "ghost", "destructive": "solid" }, inputRead(v[9], inputStatus(9))), () => readIndex({ "none": inputRead(v[13], inputStatus(13)), "primary": "accent", "standard": "neutral", "quiet": "neutral", "destructive": "danger" }, inputRead(v[9], inputStatus(9)))];
+  const g = (j) => {
+    const i = j - 0;
+    if (ke[i] === X.e) return v[j];
+    if (ke[i] === -1) computedCycle();
+    ke[i] = -1;
+    let next;
+    try { const result = evaluateInput(K[i], CS[j], NONCONFORMING), previousStatus = CS[j]; CS[j] = result.status; notifyPropertySet(CS, j, previousStatus, result.status, undefined); next = !result.status.ready ? null : result.value === NONCONFORMING ? v[j] : result.value; } catch (error) { ke[i] = undefined; throw error; }
+    ke[i] = X.e;
+    const previous = v[j];
+    if (!Object.is(previous, next)) { v[j] = next; X.n?.(j, previous, next); }
+    return next;
+  };
   const m1 = (d) => {
     const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
     const r = { n };
@@ -40,39 +57,49 @@ export function createUiIconButton(options = {}, html) {
   const p2 = (r, c, d) => {
   };
   const p0 = (r, c, d) => {
-    if (c & 2) {
-      const x0 = v[1];
-      const s0 = toAttribute(x0, "disabled");
-      if (s0 !== r.v0) writeAttribute(r.n, "disabled", r.v0 = s0);
+    if (c & 1073758720) {
+      const x0 = g(0);
+      const s0 = toAttribute(x0, "data-appearance");
+      if (s0 !== r.v0) writeAttribute(r.n, "data-appearance", r.v0 = s0);
+    }
+    if (c & 1073750528) {
+      const x1 = g(1);
+      const s1 = toAttribute(x1, "data-tone");
+      if (s1 !== r.v1) writeAttribute(r.n, "data-tone", r.v1 = s1);
     }
     if (c & 8) {
-      const x1 = v[3];
-      const s1 = toAttribute(x1, "aria-label");
-      if (s1 !== r.v1) writeAttribute(r.n, "aria-label", r.v1 = s1);
+      const x2 = v[3];
+      const s2 = toAttribute(x2, "disabled");
+      if (s2 !== r.v2) writeAttribute(r.n, "disabled", r.v2 = s2);
     }
     if (c & 32) {
-      const x2 = v[5];
-      const s2 = toAttribute(x2, "data-match-button");
-      if (s2 !== r.v2) writeAttribute(r.n, "data-match-button", r.v2 = s2);
+      const x3 = v[5];
+      const s3 = toAttribute(x3, "aria-label");
+      if (s3 !== r.v3) writeAttribute(r.n, "aria-label", r.v3 = s3);
+    }
+    if (c & 128) {
+      const x4 = v[7];
+      const s4 = toAttribute(x4, "data-match-button");
+      if (s4 !== r.v4) writeAttribute(r.n, "data-match-button", r.v4 = s4);
     }
-    if (c & 1073741904) {
-      const x3 = readIndex({ "true": "true", "false": null }, textCall("concat", [(truthy(v[4]) || truthy(v[6]))]));
-      if (x3 !== NONCONFORMING) {
-        const s3 = toAttribute(x3, "aria-disabled");
-        if (s3 !== r.v3) writeAttribute(r.n, "aria-disabled", r.v3 = s3);
+    if (c & 1073742144) {
+      const x5 = readIndex({ "true": "true", "false": null }, textCall("concat", [(truthy(v[6]) || truthy(v[8]))]));
+      if (x5 !== NONCONFORMING) {
+        const s5 = toAttribute(x5, "aria-disabled");
+        if (s5 !== r.v5) writeAttribute(r.n, "aria-disabled", r.v5 = s5);
       }
     }
-    if (c & 80) {
-      const x4 = (truthy(v[4]) || truthy(v[6]));
-      const s4 = toAttribute(x4, "aria-busy");
-      if (s4 !== r.v4) writeAttribute(r.n, "aria-busy", r.v4 = s4);
+    if (c & 320) {
+      const x6 = (truthy(v[6]) || truthy(v[8]));
+      const s6 = toAttribute(x6, "aria-busy");
+      if (s6 !== r.v6) writeAttribute(r.n, "aria-busy", r.v6 = s6);
     }
-    if (c & 4085) {
-      const x5 = hostState(["tone","anticipatory","guide","revealed","variant","loading","pending","size","matchButton","round"], [v[10], v[0], v[2], v[7], v[11], v[4], v[6], v[9], v[5], v[8]]);
-      const s5 = x5;
-      if (s5 !== r.v5) writeAttribute(r.n, "data-ui-icon-button-state", (r.v5 = s5) === "" ? null : s5);
+    if (c & 7636) {
+      const x7 = hostState(["anticipatory","guide","revealed","loading","pending","size","matchButton","round"], [v[2], v[4], v[10], v[6], v[8], v[12], v[7], v[11]]);
+      const s7 = x7;
+      if (s7 !== r.v7) writeAttribute(r.n, "data-ui-icon-button-state", (r.v7 = s7) === "" ? null : s7);
     }
-    if (c & 80 && !((truthy(v[4]) || truthy(v[6]))) !== !r.b0) {
+    if (c & 320 && !((truthy(v[6]) || truthy(v[8]))) !== !r.b0) {
       if (r.b0) { r.b0 = undefined; clearRegion(r.a1, r.e0); }
       else { r.b0 = m1(d); r.e0.before(r.b0.n); }
     } else if (r.b0 !== undefined) p1(r.b0, c, d);
@@ -82,11 +109,11 @@ export function createUiIconButton(options = {}, html) {
   };
   const t0 = element.firstChild.nextSibling;
   const t1 = t0.nextSibling.nextSibling.nextSibling.firstChild;
-  const R = { n: element, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, a1: t0, e0: t0.nextSibling, b0: undefined, a2: t1, e1: t1.nextSibling, b1: undefined, f1: undefined };
+  const R = { n: element, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: undefined, v7: undefined, a1: t0, e0: t0.nextSibling, b0: undefined, a2: t1, e1: t1.nextSibling, b1: undefined, f1: undefined };
   const I = { B };
   const J = project(I, children, slots);
-  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, undefined, I);
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, X, I);
   manageProps(I);
   return element;
 }
-defineComponent("ui-icon-button", createUiIconButton, ["anticipatory","disabled","guide","label","loading","matchButton","pending","revealed","round","size","tone","variant"]);
+defineComponent("ui-icon-button", createUiIconButton, ["anticipatory","disabled","guide","label","loading","matchButton","pending","preset","revealed","round","size","tone","variant"]);

package/vanilla/UiNumberInput.d.ts

@@ -0,0 +1,33 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+export interface UiNumberInputEventMap {
+  input: CustomEvent<{ readonly value: string }>;
+  change: CustomEvent<{ readonly value: string }>;
+}
+export interface UiNumberInputElement extends HTMLSpanElement {
+  addEventListener<K extends keyof UiNumberInputEventMap>(type: K, listener: (this: UiNumberInputElement, event: UiNumberInputEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiNumberInputElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiNumberInputEventMap>(type: K, listener: (this: UiNumberInputElement, event: UiNumberInputEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiNumberInputElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface UiNumberInputProps {
+  disabled?: boolean | null;
+  label?: string | null;
+  max?: number | null;
+  min?: number | null;
+  name?: string | null;
+  size?: "sm" | "md" | "lg" | null;
+  step?: number | null;
+  unit?: string | null;
+  value?: string | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiNumberInput(props?: UiNumberInputProps): UiNumberInputElement;
+declare global {
+  interface ComponentTagMap {
+    "ui-number-input": { element: UiNumberInputElement; props: Omit<UiNumberInputProps, "attributes" | "children" | "slots"> };
+  }
+}

package/vanilla/UiNumberInput.js

@@ -0,0 +1,79 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, buildTemplate, NONCONFORMING, textCall, toAttribute, writeAttribute, dispatchDeclared, detailCheck, formatOf, keywordFormat, acceptProps, manageProps, generatedInputs, checkBoolean, checkFormat, checkNumber, checkObject, checkString, defineComponent, activateModule } from "@nextwebwg/html-next/generated-runtime";
+import * as controller from "../components/ui-number-input/ui-number-input.js";
+import "../styles/ui-number-input.css";
+
+const T0 = ["",[],"\n    ",["ui-icon-button",["data-number-step","decrease","match-button","","type","button"],["ui-icon",["name","minus"]]],"\n    ",["ui-input",["data-ui-field-control","","inputmode","decimal","spellcheck","false","aria-description","Enter calculates arithmetic. Arrow keys step; Shift changes ten steps."]],"\n    ",["ui-icon-button",["data-number-step","increase","match-button","","type","button"],["ui-icon",["name","plus"]]],"\n  "];
+let P0;
+const S = { n: [], t: [], f: import.meta.url, g: "ui-number-input", d: { "input": [detailCheck(checkObject([["value", checkString, false]], false)), true, true, false], "change": [detailCheck(checkObject([["value", checkString, false]], false)), true, true, false] }, x: dispatchDeclared, a: (host, I) => C(host, I), b: generatedInputs };
+const D = { g: "ui-number-input", props: { "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "label": { "required":false,"default":"Value", c: checkString, t: "string", j: 0, m: "s" }, "max": { "required":false,"default":1000000, c: checkNumber, t: "number", j: 0, m: "n" }, "min": { "required":false,"default":-1000000, c: checkNumber, t: "number", j: 0, m: "n" }, "name": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "step": { "required":false,"default":1, c: checkNumber, t: "number", j: 0, m: "n" }, "unit": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "value": { "required":false,"default":"0", c: checkString, t: "string", j: 0, m: "s" } } };
+const C = (host) => activateModule(controller, host);
+
+export function createUiNumberInput(options = {}, html) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const element = document.createElement("span");
+  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-number-input");
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  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 & 1073741856) {
+      const x0 = v[5];
+      const s0 = toAttribute(x0, "size");
+      if (s0 !== r.v0) writeAttribute(r.a0, "size", r.v0 = s0);
+      const s3 = toAttribute(x0, "size");
+      if (s3 !== r.v3) writeAttribute(r.a1, "size", r.v3 = s3);
+      const s8 = toAttribute(x0, "size");
+      if (s8 !== r.v8) writeAttribute(r.a2, "size", r.v8 = s8);
+    }
+    if (c & 1) {
+      const x1 = v[0];
+      const s1 = toAttribute(x1, "disabled");
+      if (s1 !== r.v1) writeAttribute(r.a0, "disabled", r.v1 = s1);
+      const s4 = toAttribute(x1, "disabled");
+      if (s4 !== r.v4) writeAttribute(r.a1, "disabled", r.v4 = s4);
+      const s9 = toAttribute(x1, "disabled");
+      if (s9 !== r.v9) writeAttribute(r.a2, "disabled", r.v9 = s9);
+    }
+    if (c & 2) {
+      const x2 = textCall("concat", ["Decrease ", v[1]]);
+      if (x2 !== NONCONFORMING) {
+        const s2 = toAttribute(x2, "label");
+        if (s2 !== r.v2) writeAttribute(r.a0, "label", r.v2 = s2);
+      }
+    }
+    if (c & 256) {
+      const x3 = v[8];
+      const s5 = toAttribute(x3, "value");
+      if (s5 !== r.v5) writeAttribute(r.a1, "value", r.v5 = s5);
+    }
+    if (c & 2) {
+      const x4 = v[1];
+      const s6 = toAttribute(x4, "aria-label");
+      if (s6 !== r.v6) writeAttribute(r.a1, "aria-label", r.v6 = s6);
+      const x5 = textCall("concat", ["Increase ", v[1]]);
+      if (x5 !== NONCONFORMING) {
+        const s10 = toAttribute(x5, "label");
+        if (s10 !== r.v10) writeAttribute(r.a2, "label", r.v10 = s10);
+      }
+    }
+    if (c & 16) {
+      const x6 = v[4];
+      const s7 = toAttribute(x6, "name");
+      if (s7 !== r.v7) writeAttribute(r.a1, "name", r.v7 = s7);
+    }
+  };
+  const t0 = element.firstChild.nextSibling;
+  const t1 = t0.nextSibling.nextSibling;
+  const t2 = t1.nextSibling.nextSibling;
+  const R = { a0: t0, a1: t1, a2: t2, v0: null, v1: null, v2: null, v3: null, v4: null, v5: null, v6: null, v7: null, v8: null, v9: null, v10: null };
+  const I = { B };
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, undefined, I);
+  manageProps(I);
+  return element;
+}
+defineComponent("ui-number-input", createUiNumberInput, ["disabled","label","max","min","name","size","step","unit","value"]);

package/vanilla/UiSlider.d.ts

@@ -0,0 +1,33 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+export interface UiSliderEventMap {
+  input: CustomEvent<{ readonly value: number }>;
+  change: CustomEvent<{ readonly value: number }>;
+}
+export interface UiSliderElement extends HTMLSpanElement {
+  addEventListener<K extends keyof UiSliderEventMap>(type: K, listener: (this: UiSliderElement, event: UiSliderEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiSliderElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiSliderEventMap>(type: K, listener: (this: UiSliderElement, event: UiSliderEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiSliderElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface UiSliderProps {
+  disabled?: boolean | null;
+  label?: string | null;
+  max?: number | null;
+  min?: number | null;
+  name?: string | null;
+  size?: "sm" | "md" | "lg" | null;
+  step?: number | null;
+  unit?: string | null;
+  value?: number | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiSlider(props?: UiSliderProps): UiSliderElement;
+declare global {
+  interface ComponentTagMap {
+    "ui-slider": { element: UiSliderElement; props: Omit<UiSliderProps, "attributes" | "children" | "slots"> };
+  }
+}

package/vanilla/UiSlider.js

@@ -0,0 +1,125 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, stateInitializers, buildTemplate, checkReference, NONCONFORMING, textCall, toAttribute, writeAttribute, dispatchDeclared, detailCheck, formatOf, keywordFormat, hostState, acceptProps, manageProps, generatedInputs, awaitInput, inputRead, READY_INPUT, UNRESOLVED_INPUT, checkBoolean, checkFormat, checkNumber, checkObject, checkString, defineComponent, activateModule } from "@nextwebwg/html-next/generated-runtime";
+import * as controller from "../components/ui-slider/ui-slider.js";
+import "../styles/ui-slider.css";
+
+const T0 = ["",[],"\n    ",["input",["type","range","data-ui-field-control",""]],"\n    ",["ui-number-input",["data-slider-exact",""]],"\n  "];
+let P0;
+const S = { n: ["current"], t: ["n"], f: import.meta.url, g: "ui-slider", d: { "input": [detailCheck(checkObject([["value", checkNumber, false]], false)), true, true, false], "change": [detailCheck(checkObject([["value", checkNumber, false]], false)), true, true, false] }, x: dispatchDeclared, a: (host, I) => C(host, I), b: generatedInputs };
+const D = { g: "ui-slider", props: { "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "label": { "required":false,"default":"Value", c: checkString, t: "string", j: 0, m: "s" }, "max": { "required":false,"default":100, c: checkNumber, t: "number", j: 0, m: "n" }, "min": { "required":false,"default":0, c: checkNumber, t: "number", j: 0, m: "n" }, "name": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "step": { "required":false,"default":1, c: checkNumber, t: "number", j: 0, m: "n" }, "unit": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "value": { "required":false,"default":0, c: checkNumber, t: "number", j: 0, m: "n" } } };
+const C = (host) => activateModule(controller, host);
+
+export function createUiSlider(options = {}, html) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const element = document.createElement("span");
+  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-slider");
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [null, null, null, null, null, null, null, null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const CS = [];
+  const inputStatus = (j) => { if (j === 0) return E.status(j); if (j === 1) return awaitInput(B, "disabled", true); if (j === 2) return awaitInput(B, "label", true); if (j === 3) return awaitInput(B, "max", true); if (j === 4) return awaitInput(B, "min", true); if (j === 5) return awaitInput(B, "name", true); if (j === 6) return awaitInput(B, "size", true); if (j === 7) return awaitInput(B, "step", true); if (j === 8) return awaitInput(B, "unit", true); if (j === 9) return awaitInput(B, "value", true); return v[j] === undefined ? UNRESOLVED_INPUT : READY_INPUT; };
+  const X = { e: 0, g: (j) => v[j], w: new Set(), a: CS, i: inputStatus };
+  const E = stateInitializers(S, v, X, { 0: () => inputRead(v[9], inputStatus(9)) });
+  const p0 = (r, c, d) => {
+    if (c & 4) {
+      const x0 = v[2];
+      const s0 = toAttribute(x0, "aria-label");
+      if (s0 !== r.v0) writeAttribute(r.a0, "aria-label", r.v0 = s0);
+    }
+    if (c & 257) {
+      const x1 = (checkReference(S, v[0], "n", "expression:concat($current, $unit):current", "Reference `current` must satisfy number.") ? textCall("concat", [E.read(0), v[8]]) : NONCONFORMING);
+      if (x1 !== NONCONFORMING) {
+        const s1 = toAttribute(x1, "aria-valuetext");
+        if (s1 !== r.v1) writeAttribute(r.a0, "aria-valuetext", r.v1 = s1);
+      }
+      if (x1 !== NONCONFORMING) {
+        const s8 = toAttribute(x1, "value");
+        if (s8 !== r.v8) writeAttribute(r.a1, "value", r.v8 = s8);
+      }
+    }
+    if (c & 512) {
+      const x2 = v[9];
+      const s2 = toAttribute(x2, "value");
+      if (s2 !== r.v2) writeAttribute(r.a0, "value", r.v2 = s2);
+    }
+    if (c & 16) {
+      const x3 = v[4];
+      const s3 = toAttribute(x3, "min");
+      if (s3 !== r.v3) writeAttribute(r.a0, "min", r.v3 = s3);
+    }
+    if (c & 8) {
+      const x4 = v[3];
+      const s4 = toAttribute(x4, "max");
+      if (s4 !== r.v4) writeAttribute(r.a0, "max", r.v4 = s4);
+    }
+    if (c & 128) {
+      const x5 = v[7];
+      const s5 = toAttribute(x5, "step");
+      if (s5 !== r.v5) writeAttribute(r.a0, "step", r.v5 = s5);
+    }
+    if (c & 2) {
+      const x6 = v[1];
+      const s6 = toAttribute(x6, "disabled");
+      if (s6 !== r.v6) writeAttribute(r.a0, "disabled", r.v6 = s6);
+    }
+    if (c & 32) {
+      const x7 = v[5];
+      const s7 = toAttribute(x7, "name");
+      if (s7 !== r.v7) writeAttribute(r.a0, "name", r.v7 = s7);
+    }
+    if (c & 256) {
+      const x8 = v[8];
+      const s9 = toAttribute(x8, "unit");
+      if (s9 !== r.v9) writeAttribute(r.a1, "unit", r.v9 = s9);
+    }
+    if (c & 16) {
+      const x9 = v[4];
+      const s10 = toAttribute(x9, "min");
+      if (s10 !== r.v10) writeAttribute(r.a1, "min", r.v10 = s10);
+    }
+    if (c & 8) {
+      const x10 = v[3];
+      const s11 = toAttribute(x10, "max");
+      if (s11 !== r.v11) writeAttribute(r.a1, "max", r.v11 = s11);
+    }
+    if (c & 128) {
+      const x11 = v[7];
+      const s12 = toAttribute(x11, "step");
+      if (s12 !== r.v12) writeAttribute(r.a1, "step", r.v12 = s12);
+    }
+    if (c & 1073741888) {
+      const x12 = v[6];
+      const s13 = toAttribute(x12, "size");
+      if (s13 !== r.v13) writeAttribute(r.a1, "size", r.v13 = s13);
+    }
+    if (c & 2) {
+      const x13 = v[1];
+      const s14 = toAttribute(x13, "disabled");
+      if (s14 !== r.v14) writeAttribute(r.a1, "disabled", r.v14 = s14);
+    }
+    if (c & 4) {
+      const x14 = v[2];
+      const s15 = toAttribute(x14, "label");
+      if (s15 !== r.v15) writeAttribute(r.a1, "label", r.v15 = s15);
+    }
+    if (c & 64) {
+      const x15 = hostState(["size"], [v[6]]);
+      const s16 = x15;
+      if (s16 !== r.v16) writeAttribute(r.n, "data-ui-slider-state", (r.v16 = s16) === "" ? null : s16);
+    }
+  };
+  const t0 = element.firstChild.nextSibling;
+  const t1 = t0.nextSibling.nextSibling;
+  const R = { n: element, a0: t0, a1: t1, v0: null, v1: null, v2: null, v3: null, v4: null, v5: null, v6: null, v7: null, v8: null, v9: null, v10: null, v11: null, v12: null, v13: null, v14: null, v15: null, v16: undefined };
+  const I = { B, U: E };
+  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); }, undefined, X, I);
+  manageProps(I);
+  I.r["range"] = t0;
+  return element;
+}
+defineComponent("ui-slider", createUiSlider, ["disabled","label","max","min","name","size","step","unit","value"]);

package/vanilla/UiText.d.ts

@@ -11,14 +11,14 @@ export interface UiTextElement extends HTMLElement {
 }
 export interface UiTextProps {
   align?: "start" | "center" | null;
-  as?: "p" | "span" | "div" | "small" | "strong" | "label" | "h2" | "h3" | "h4" | "h5" | "h6" | null;
+  as?: "p" | "span" | "div" | "small" | "strong" | "label" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | null;
   font?: "inherit" | "sans" | null;
   grow?: boolean | null;
   size?: "inherit" | "xs" | "sm" | "md" | "lg" | null;
   tone?: "default" | "secondary" | "muted" | "accent" | "danger" | "success" | "info" | "warning" | null;
   trim?: boolean | null;
   truncate?: boolean | null;
-  variant?: "body" | "eyebrow" | "code" | null;
+  variant?: "body" | "display" | "heading" | "label" | "caption" | "eyebrow" | "code" | null;
   weight?: "inherit" | "normal" | "medium" | "semibold" | null;
   wrap?: "normal" | "anywhere" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;