@threadlabs/looma 0.33.0 → 0.34.0

package/vanilla/UiButton.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, writeUrlAttribute, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, generatedInputs, project, fillSlot, armElement, replaceRoot, checkBoolean, checkFormat, checkString, defineComponent, activateModule } from "@nextwebwg/html-next/generated-runtime";
+import { attachGeneratedController, buildTemplate, clearRegion, NONCONFORMING, readIndex, recordValue, textCall, toAttribute, truthy, writeAttribute, writeUrlAttribute, computedCycle, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, generatedInputs, awaitInput, evaluateInput, inputRead, READY_INPUT, UNRESOLVED_INPUT, notifyPropertySet, project, fillSlot, armElement, replaceRoot, readonlyView, checkBoolean, checkFormat, checkString, defineComponent, activateModule } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-button/ui-button.js";
 import "../styles/ui-button.css";
 
@@ -24,17 +24,34 @@ const T17 = ["span",["class","spinner-wrap"],["ui-spinner",["size","sm"]]];
 const T18 = ["",[]];
 const T19 = ["",[]];
 let P0, P1, P2, P3, P4, P5, P6, P7, P8, P9, P10, P11, P12, P13, P14, P15, P16, P17, P18, P19;
-const S = { n: [], t: [], f: import.meta.url, g: "ui-button", a: (host, I) => C(host, I), b: generatedInputs };
-const A = [["a",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","href","target","rel","aria-disabled","aria-busy","tabindex"]],["button",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","type","disabled","aria-disabled","aria-busy"]],["a",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","href","target","rel","aria-disabled","aria-busy","tabindex"]],["button",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","type","disabled","aria-disabled","aria-busy"]]];
+const S = { n: ["appearance","colorTone"], t: ["?","?"], f: import.meta.url, g: "ui-button", k: 0, r: readonlyView, a: (host, I) => C(host, I), b: generatedInputs };
+const A = [["a",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","href","target","rel","aria-disabled","aria-busy","tabindex"]],["button",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","type","disabled","aria-disabled","aria-busy"]],["a",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","href","target","rel","aria-disabled","aria-busy","tabindex"]],["button",{},[],"",[],["data-ui-button-state","data-ui-button-prop-align","data-ui-button-prop-as","data-ui-button-prop-disabled","data-ui-button-prop-href","data-ui-button-prop-loading","data-ui-button-prop-pending","data-ui-button-prop-preset","data-ui-button-prop-rel","data-ui-button-prop-shape","data-ui-button-prop-size","data-ui-button-prop-stretch","data-ui-button-prop-target","data-ui-button-prop-tone","data-ui-button-prop-type","data-ui-button-prop-variant","data-appearance","data-tone","type","disabled","aria-disabled","aria-busy"]]];
 const Q = [[],[],[],[]];
-const D = { g: "ui-button", props: { "align": { "required":false,"values":["center","start"],"default":"center", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "as": { "required":false,"values":["button","a"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "href": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "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" }, "rel": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "shape": { "required":false,"values":["rounded","pill"],"default":"rounded", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "size": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "stretch": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "target": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "tone": { "required":false,"values":["accent","neutral","danger","success","warning","info"],"default":"accent", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "type": { "required":false,"values":["button","submit","reset"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "variant": { "required":false,"values":["outline","solid","danger","ghost","link","card","field"],"default":"outline", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
+const D = { g: "ui-button", props: { "align": { "required":false,"values":["center","start"],"default":"center", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "as": { "required":false,"values":["button","a"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "href": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "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)] }, "rel": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "shape": { "required":false,"values":["rounded","pill"],"default":"rounded", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "size": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "stretch": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "target": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "tone": { "required":false,"values":["accent","neutral","danger","success","warning","info"],"default":"accent", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "type": { "required":false,"values":["button","submit","reset"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "variant": { "required":false,"values":["outline","solid","danger","ghost","link","card","field"],"default":"outline", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
 const C = (host) => activateModule(controller, host);
 
 export function createUiButton(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
-  const v = [null, null, 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, null, null];
   let B = acceptProps(undefined, D, S.n, v, componentProps, [], html);
-  let a = (((v[13] === "card") && (v[1] === "a")) ? 0 : (v[13] === "card") ? 1 : (v[1] === "a") ? 2 : 3);
+  const CS = [];
+  const inputStatus = (j) => { if (j >= 0 && j < 2) { g(j); return CS[j] ?? UNRESOLVED_INPUT; } if (j === 2) return awaitInput(B, "align", true); if (j === 3) return awaitInput(B, "as", true); if (j === 4) return awaitInput(B, "disabled", true); if (j === 5) return awaitInput(B, "href", true); if (j === 6) return awaitInput(B, "loading", true); if (j === 7) return awaitInput(B, "pending", true); if (j === 8) return awaitInput(B, "preset", true); if (j === 9) return awaitInput(B, "rel", true); if (j === 10) return awaitInput(B, "shape", true); if (j === 11) return awaitInput(B, "size", true); if (j === 12) return awaitInput(B, "stretch", true); if (j === 13) return awaitInput(B, "target", true); if (j === 14) return awaitInput(B, "tone", true); if (j === 15) return awaitInput(B, "type", true); if (j === 16) 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[16], inputStatus(16)), "primary": "solid", "standard": "solid", "quiet": "ghost", "destructive": "solid" }, inputRead(v[8], inputStatus(8))), () => readIndex(recordValue(["none","primary","standard","quiet","destructive"], [readIndex({ "true": "danger", "false": inputRead(v[14], inputStatus(14)) }, textCall("concat", [(inputRead(v[16], inputStatus(16)) === "danger")])), "accent", "neutral", "neutral", "danger"]), inputRead(v[8], inputStatus(8)))];
+  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;
+  };
+  let a = (((g(0) === "card") && (v[3] === "a")) ? 0 : (g(0) === "card") ? 1 : (v[3] === "a") ? 2 : 3);
   let element;
   if (a === 0) {
     element = document.createElement("a");
@@ -210,58 +227,70 @@ export function createUiButton(options = {}, html) {
     const t3 = t0.nextSibling.nextSibling;
     const t4 = t3.firstChild;
     const t5 = t3.nextSibling.nextSibling.firstChild;
-    const r = { n, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: undefined, a1: t1, e0: t1.nextSibling, b0: undefined, a2: t2, e1: t2.nextSibling, b1: undefined, a3: t4, e2: t4.nextSibling, b2: undefined, f2: undefined, a4: t5, e3: t5.nextSibling, b3: undefined, f3: undefined };
+    const r = { n, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: undefined, v7: undefined, v8: undefined, a1: t1, e0: t1.nextSibling, b0: undefined, a2: t2, e1: t2.nextSibling, b1: undefined, a3: t4, e2: t4.nextSibling, b2: undefined, f2: undefined, a4: t5, e3: t5.nextSibling, b3: undefined, f3: undefined };
     r.z = [() => dispose(r.b1)];
     p0(r, -1, d);
     return r;
   };
   const p0 = (r, c, d) => {
-    if (c & 1073741884) {
-      const x0 = readIndex({ "true": null, "false": v[3] }, textCall("concat", [((truthy(v[2]) || truthy(v[4])) || truthy(v[5]))]));
-      if (x0 !== NONCONFORMING) {
-        const s0 = toAttribute(x0, "href");
-        if (s0 !== r.v0) writeUrlAttribute(r.n, "href", r.v0 = s0);
+    if (c & 1073807616) {
+      const x0 = g(0);
+      const s0 = toAttribute(x0, "data-appearance");
+      if (s0 !== r.v0) writeAttribute(r.n, "data-appearance", r.v0 = s0);
+    }
+    if (c & 1073824000) {
+      const x1 = g(1);
+      if (x1 !== NONCONFORMING) {
+        const s1 = toAttribute(x1, "data-tone");
+        if (s1 !== r.v1) writeAttribute(r.n, "data-tone", r.v1 = s1);
       }
     }
-    if (c & 1024) {
-      const x1 = v[10];
-      const s1 = toAttribute(x1, "target");
-      if (s1 !== r.v1) writeAttribute(r.n, "target", r.v1 = s1);
-    }
-    if (c & 64) {
-      const x2 = v[6];
-      const s2 = toAttribute(x2, "rel");
-      if (s2 !== r.v2) writeAttribute(r.n, "rel", r.v2 = s2);
-    }
-    if (c & 1073741876) {
-      const x3 = readIndex({ "true": "true", "false": null }, textCall("concat", [((truthy(v[2]) || truthy(v[4])) || truthy(v[5]))]));
-      if (x3 !== NONCONFORMING) {
-        const s3 = toAttribute(x3, "aria-disabled");
-        if (s3 !== r.v3) writeAttribute(r.n, "aria-disabled", r.v3 = s3);
+    if (c & 1073742064) {
+      const x2 = readIndex({ "true": null, "false": v[5] }, textCall("concat", [((truthy(v[4]) || truthy(v[6])) || truthy(v[7]))]));
+      if (x2 !== NONCONFORMING) {
+        const s2 = toAttribute(x2, "href");
+        if (s2 !== r.v2) writeUrlAttribute(r.n, "href", r.v2 = s2);
       }
     }
-    if (c & 48) {
-      const x4 = (truthy(v[4]) || truthy(v[5]));
-      const s4 = toAttribute(x4, "aria-busy");
-      if (s4 !== r.v4) writeAttribute(r.n, "aria-busy", r.v4 = s4);
+    if (c & 8192) {
+      const x3 = v[13];
+      const s3 = toAttribute(x3, "target");
+      if (s3 !== r.v3) writeAttribute(r.n, "target", r.v3 = s3);
     }
-    if (c & 1073741876) {
-      const x5 = readIndex({ "true": "0", "false": null }, textCall("concat", [((truthy(v[4]) || truthy(v[5])) && !truthy(v[2]))]));
+    if (c & 512) {
+      const x4 = v[9];
+      const s4 = toAttribute(x4, "rel");
+      if (s4 !== r.v4) writeAttribute(r.n, "rel", r.v4 = s4);
+    }
+    if (c & 1073742032) {
+      const x5 = readIndex({ "true": "true", "false": null }, textCall("concat", [((truthy(v[4]) || truthy(v[6])) || truthy(v[7]))]));
       if (x5 !== NONCONFORMING) {
-        const s5 = toAttribute(x5, "tabindex");
-        if (s5 !== r.v5) writeAttribute(r.n, "tabindex", r.v5 = s5);
+        const s5 = toAttribute(x5, "aria-disabled");
+        if (s5 !== r.v5) writeAttribute(r.n, "aria-disabled", r.v5 = s5);
       }
     }
-    if (c & 11185) {
-      const x6 = hostState(["align","stretch","size","shape","variant","tone","loading","pending"], [v[0], v[9], v[8], v[7], v[13], v[11], v[4], v[5]]);
-      const s6 = x6;
-      if (s6 !== r.v6) writeAttribute(r.n, "data-ui-button-state", (r.v6 = s6) === "" ? null : s6);
+    if (c & 192) {
+      const x6 = (truthy(v[6]) || truthy(v[7]));
+      const s6 = toAttribute(x6, "aria-busy");
+      if (s6 !== r.v6) writeAttribute(r.n, "aria-busy", r.v6 = s6);
+    }
+    if (c & 1073742032) {
+      const x7 = readIndex({ "true": "0", "false": null }, textCall("concat", [((truthy(v[6]) || truthy(v[7])) && !truthy(v[4]))]));
+      if (x7 !== NONCONFORMING) {
+        const s7 = toAttribute(x7, "tabindex");
+        if (s7 !== r.v7) writeAttribute(r.n, "tabindex", r.v7 = s7);
+      }
+    }
+    if (c & 7364) {
+      const x8 = hostState(["align","stretch","size","shape","loading","pending"], [v[2], v[12], v[11], v[10], v[6], v[7]]);
+      const s8 = x8;
+      if (s8 !== r.v8) writeAttribute(r.n, "data-ui-button-state", (r.v8 = s8) === "" ? null : s8);
     }
-    if (c & 48 && !((truthy(v[4]) || truthy(v[5]))) !== !r.b0) {
+    if (c & 192 && !((truthy(v[6]) || truthy(v[7]))) !== !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);
-    if (c & 48 && !(!(truthy(v[4]) || truthy(v[5]))) !== !r.b1) {
+    if (c & 192 && !(!(truthy(v[6]) || truthy(v[7]))) !== !r.b1) {
       if (r.b1) { dispose(r.b1); r.b1 = undefined; clearRegion(r.a2, r.e1); }
       else { r.b1 = m2(d); r.e1.before(r.b1.n); }
     } else if (r.b1 !== undefined) p2(r.b1, c, d);
@@ -280,44 +309,56 @@ export function createUiButton(options = {}, html) {
     const t3 = t0.nextSibling.nextSibling;
     const t4 = t3.firstChild;
     const t5 = t3.nextSibling.nextSibling.firstChild;
-    const r = { n, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, a1: t1, e0: t1.nextSibling, b0: undefined, a2: t2, e1: t2.nextSibling, b1: undefined, a3: t4, e2: t4.nextSibling, b2: undefined, f2: undefined, a4: t5, e3: t5.nextSibling, b3: undefined, f3: undefined };
+    const r = { n, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: undefined, a1: t1, e0: t1.nextSibling, b0: undefined, a2: t2, e1: t2.nextSibling, b1: undefined, a3: t4, e2: t4.nextSibling, b2: undefined, f2: undefined, a4: t5, e3: t5.nextSibling, b3: undefined, f3: undefined };
     r.z = [() => dispose(r.b1)];
     p6(r, -1, d);
     return r;
   };
   const p6 = (r, c, d) => {
-    if (c & 1073745920) {
-      const x0 = v[12];
-      const s0 = toAttribute(x0, "type");
-      if (s0 !== r.v0) writeAttribute(r.n, "type", r.v0 = s0);
-    }
-    if (c & 4) {
-      const x1 = v[2];
-      const s1 = toAttribute(x1, "disabled");
-      if (s1 !== r.v1) writeAttribute(r.n, "disabled", r.v1 = s1);
-    }
-    if (c & 1073741872) {
-      const x2 = readIndex({ "true": "true", "false": null }, textCall("concat", [(truthy(v[4]) || truthy(v[5]))]));
-      if (x2 !== NONCONFORMING) {
-        const s2 = toAttribute(x2, "aria-disabled");
-        if (s2 !== r.v2) writeAttribute(r.n, "aria-disabled", r.v2 = s2);
+    if (c & 1073807616) {
+      const x0 = g(0);
+      const s0 = toAttribute(x0, "data-appearance");
+      if (s0 !== r.v0) writeAttribute(r.n, "data-appearance", r.v0 = s0);
+    }
+    if (c & 1073824000) {
+      const x1 = g(1);
+      if (x1 !== NONCONFORMING) {
+        const s1 = toAttribute(x1, "data-tone");
+        if (s1 !== r.v1) writeAttribute(r.n, "data-tone", r.v1 = s1);
       }
     }
-    if (c & 48) {
-      const x3 = (truthy(v[4]) || truthy(v[5]));
-      const s3 = toAttribute(x3, "aria-busy");
-      if (s3 !== r.v3) writeAttribute(r.n, "aria-busy", r.v3 = s3);
+    if (c & 1073774592) {
+      const x2 = v[15];
+      const s2 = toAttribute(x2, "type");
+      if (s2 !== r.v2) writeAttribute(r.n, "type", r.v2 = s2);
     }
-    if (c & 11185) {
-      const x4 = hostState(["align","stretch","size","shape","variant","tone","loading","pending"], [v[0], v[9], v[8], v[7], v[13], v[11], v[4], v[5]]);
-      const s4 = x4;
-      if (s4 !== r.v4) writeAttribute(r.n, "data-ui-button-state", (r.v4 = s4) === "" ? null : s4);
+    if (c & 16) {
+      const x3 = v[4];
+      const s3 = toAttribute(x3, "disabled");
+      if (s3 !== r.v3) writeAttribute(r.n, "disabled", r.v3 = s3);
+    }
+    if (c & 1073742016) {
+      const x4 = readIndex({ "true": "true", "false": null }, textCall("concat", [(truthy(v[6]) || truthy(v[7]))]));
+      if (x4 !== NONCONFORMING) {
+        const s4 = toAttribute(x4, "aria-disabled");
+        if (s4 !== r.v4) writeAttribute(r.n, "aria-disabled", r.v4 = s4);
+      }
+    }
+    if (c & 192) {
+      const x5 = (truthy(v[6]) || truthy(v[7]));
+      const s5 = toAttribute(x5, "aria-busy");
+      if (s5 !== r.v5) writeAttribute(r.n, "aria-busy", r.v5 = s5);
+    }
+    if (c & 7364) {
+      const x6 = hostState(["align","stretch","size","shape","loading","pending"], [v[2], v[12], v[11], v[10], v[6], v[7]]);
+      const s6 = x6;
+      if (s6 !== r.v6) writeAttribute(r.n, "data-ui-button-state", (r.v6 = s6) === "" ? null : s6);
     }
-    if (c & 48 && !((truthy(v[4]) || truthy(v[5]))) !== !r.b0) {
+    if (c & 192 && !((truthy(v[6]) || truthy(v[7]))) !== !r.b0) {
       if (r.b0) { r.b0 = undefined; clearRegion(r.a1, r.e0); }
       else { r.b0 = m7(d); r.e0.before(r.b0.n); }
     } else if (r.b0 !== undefined) p7(r.b0, c, d);
-    if (c & 48 && !(!(truthy(v[4]) || truthy(v[5]))) !== !r.b1) {
+    if (c & 192 && !(!(truthy(v[6]) || truthy(v[7]))) !== !r.b1) {
       if (r.b1) { dispose(r.b1); r.b1 = undefined; clearRegion(r.a2, r.e1); }
       else { r.b1 = m8(d); r.e1.before(r.b1.n); }
     } else if (r.b1 !== undefined) p8(r.b1, c, d);
@@ -333,53 +374,65 @@ export function createUiButton(options = {}, html) {
     const t0 = n.firstChild.nextSibling;
     const t1 = t0.nextSibling.nextSibling.nextSibling;
     const t2 = t1.nextSibling.nextSibling.nextSibling.firstChild;
-    const r = { n, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: undefined, a1: t0, e0: t0.nextSibling, b0: undefined, a2: t1, e1: t1.nextSibling, b1: undefined, f1: undefined, a3: t2, e2: t2.nextSibling, b2: undefined, f2: undefined };
+    const r = { n, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: undefined, v7: undefined, v8: undefined, a1: t0, e0: t0.nextSibling, b0: undefined, a2: t1, e1: t1.nextSibling, b1: undefined, f1: undefined, a3: t2, e2: t2.nextSibling, b2: undefined, f2: undefined };
     p12(r, -1, d);
     return r;
   };
   const p12 = (r, c, d) => {
-    if (c & 1073741884) {
-      const x0 = readIndex({ "true": null, "false": v[3] }, textCall("concat", [((truthy(v[2]) || truthy(v[4])) || truthy(v[5]))]));
-      if (x0 !== NONCONFORMING) {
-        const s0 = toAttribute(x0, "href");
-        if (s0 !== r.v0) writeUrlAttribute(r.n, "href", r.v0 = s0);
+    if (c & 1073807616) {
+      const x0 = g(0);
+      const s0 = toAttribute(x0, "data-appearance");
+      if (s0 !== r.v0) writeAttribute(r.n, "data-appearance", r.v0 = s0);
+    }
+    if (c & 1073824000) {
+      const x1 = g(1);
+      if (x1 !== NONCONFORMING) {
+        const s1 = toAttribute(x1, "data-tone");
+        if (s1 !== r.v1) writeAttribute(r.n, "data-tone", r.v1 = s1);
       }
     }
-    if (c & 1024) {
-      const x1 = v[10];
-      const s1 = toAttribute(x1, "target");
-      if (s1 !== r.v1) writeAttribute(r.n, "target", r.v1 = s1);
-    }
-    if (c & 64) {
-      const x2 = v[6];
-      const s2 = toAttribute(x2, "rel");
-      if (s2 !== r.v2) writeAttribute(r.n, "rel", r.v2 = s2);
-    }
-    if (c & 1073741876) {
-      const x3 = readIndex({ "true": "true", "false": null }, textCall("concat", [((truthy(v[2]) || truthy(v[4])) || truthy(v[5]))]));
-      if (x3 !== NONCONFORMING) {
-        const s3 = toAttribute(x3, "aria-disabled");
-        if (s3 !== r.v3) writeAttribute(r.n, "aria-disabled", r.v3 = s3);
+    if (c & 1073742064) {
+      const x2 = readIndex({ "true": null, "false": v[5] }, textCall("concat", [((truthy(v[4]) || truthy(v[6])) || truthy(v[7]))]));
+      if (x2 !== NONCONFORMING) {
+        const s2 = toAttribute(x2, "href");
+        if (s2 !== r.v2) writeUrlAttribute(r.n, "href", r.v2 = s2);
       }
     }
-    if (c & 48) {
-      const x4 = (truthy(v[4]) || truthy(v[5]));
-      const s4 = toAttribute(x4, "aria-busy");
-      if (s4 !== r.v4) writeAttribute(r.n, "aria-busy", r.v4 = s4);
+    if (c & 8192) {
+      const x3 = v[13];
+      const s3 = toAttribute(x3, "target");
+      if (s3 !== r.v3) writeAttribute(r.n, "target", r.v3 = s3);
     }
-    if (c & 1073741876) {
-      const x5 = readIndex({ "true": "0", "false": null }, textCall("concat", [((truthy(v[4]) || truthy(v[5])) && !truthy(v[2]))]));
+    if (c & 512) {
+      const x4 = v[9];
+      const s4 = toAttribute(x4, "rel");
+      if (s4 !== r.v4) writeAttribute(r.n, "rel", r.v4 = s4);
+    }
+    if (c & 1073742032) {
+      const x5 = readIndex({ "true": "true", "false": null }, textCall("concat", [((truthy(v[4]) || truthy(v[6])) || truthy(v[7]))]));
       if (x5 !== NONCONFORMING) {
-        const s5 = toAttribute(x5, "tabindex");
-        if (s5 !== r.v5) writeAttribute(r.n, "tabindex", r.v5 = s5);
+        const s5 = toAttribute(x5, "aria-disabled");
+        if (s5 !== r.v5) writeAttribute(r.n, "aria-disabled", r.v5 = s5);
       }
     }
-    if (c & 11185) {
-      const x6 = hostState(["align","stretch","size","shape","variant","tone","loading","pending"], [v[0], v[9], v[8], v[7], v[13], v[11], v[4], v[5]]);
-      const s6 = x6;
-      if (s6 !== r.v6) writeAttribute(r.n, "data-ui-button-state", (r.v6 = s6) === "" ? null : s6);
+    if (c & 192) {
+      const x6 = (truthy(v[6]) || truthy(v[7]));
+      const s6 = toAttribute(x6, "aria-busy");
+      if (s6 !== r.v6) writeAttribute(r.n, "aria-busy", r.v6 = s6);
+    }
+    if (c & 1073742032) {
+      const x7 = readIndex({ "true": "0", "false": null }, textCall("concat", [((truthy(v[6]) || truthy(v[7])) && !truthy(v[4]))]));
+      if (x7 !== NONCONFORMING) {
+        const s7 = toAttribute(x7, "tabindex");
+        if (s7 !== r.v7) writeAttribute(r.n, "tabindex", r.v7 = s7);
+      }
+    }
+    if (c & 7364) {
+      const x8 = hostState(["align","stretch","size","shape","loading","pending"], [v[2], v[12], v[11], v[10], v[6], v[7]]);
+      const s8 = x8;
+      if (s8 !== r.v8) writeAttribute(r.n, "data-ui-button-state", (r.v8 = s8) === "" ? null : s8);
     }
-    if (c & 48 && !((truthy(v[4]) || truthy(v[5]))) !== !r.b0) {
+    if (c & 192 && !((truthy(v[6]) || truthy(v[7]))) !== !r.b0) {
       if (r.b0) { r.b0 = undefined; clearRegion(r.a1, r.e0); }
       else { r.b0 = m13(d); r.e0.before(r.b0.n); }
     } else if (r.b0 !== undefined) p13(r.b0, c, d);
@@ -395,39 +448,51 @@ export function createUiButton(options = {}, html) {
     const t0 = n.firstChild.nextSibling;
     const t1 = t0.nextSibling.nextSibling.nextSibling;
     const t2 = t1.nextSibling.nextSibling.nextSibling.firstChild;
-    const r = { n, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, a1: t0, e0: t0.nextSibling, b0: undefined, a2: t1, e1: t1.nextSibling, b1: undefined, f1: undefined, a3: t2, e2: t2.nextSibling, b2: undefined, f2: undefined };
+    const r = { n, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: undefined, a1: t0, e0: t0.nextSibling, b0: undefined, a2: t1, e1: t1.nextSibling, b1: undefined, f1: undefined, a3: t2, e2: t2.nextSibling, b2: undefined, f2: undefined };
     p16(r, -1, d);
     return r;
   };
   const p16 = (r, c, d) => {
-    if (c & 1073745920) {
-      const x0 = v[12];
-      const s0 = toAttribute(x0, "type");
-      if (s0 !== r.v0) writeAttribute(r.n, "type", r.v0 = s0);
-    }
-    if (c & 4) {
-      const x1 = v[2];
-      const s1 = toAttribute(x1, "disabled");
-      if (s1 !== r.v1) writeAttribute(r.n, "disabled", r.v1 = s1);
-    }
-    if (c & 1073741872) {
-      const x2 = readIndex({ "true": "true", "false": null }, textCall("concat", [(truthy(v[4]) || truthy(v[5]))]));
-      if (x2 !== NONCONFORMING) {
-        const s2 = toAttribute(x2, "aria-disabled");
-        if (s2 !== r.v2) writeAttribute(r.n, "aria-disabled", r.v2 = s2);
+    if (c & 1073807616) {
+      const x0 = g(0);
+      const s0 = toAttribute(x0, "data-appearance");
+      if (s0 !== r.v0) writeAttribute(r.n, "data-appearance", r.v0 = s0);
+    }
+    if (c & 1073824000) {
+      const x1 = g(1);
+      if (x1 !== NONCONFORMING) {
+        const s1 = toAttribute(x1, "data-tone");
+        if (s1 !== r.v1) writeAttribute(r.n, "data-tone", r.v1 = s1);
       }
     }
-    if (c & 48) {
-      const x3 = (truthy(v[4]) || truthy(v[5]));
-      const s3 = toAttribute(x3, "aria-busy");
-      if (s3 !== r.v3) writeAttribute(r.n, "aria-busy", r.v3 = s3);
+    if (c & 1073774592) {
+      const x2 = v[15];
+      const s2 = toAttribute(x2, "type");
+      if (s2 !== r.v2) writeAttribute(r.n, "type", r.v2 = s2);
     }
-    if (c & 11185) {
-      const x4 = hostState(["align","stretch","size","shape","variant","tone","loading","pending"], [v[0], v[9], v[8], v[7], v[13], v[11], v[4], v[5]]);
-      const s4 = x4;
-      if (s4 !== r.v4) writeAttribute(r.n, "data-ui-button-state", (r.v4 = s4) === "" ? null : s4);
+    if (c & 16) {
+      const x3 = v[4];
+      const s3 = toAttribute(x3, "disabled");
+      if (s3 !== r.v3) writeAttribute(r.n, "disabled", r.v3 = s3);
+    }
+    if (c & 1073742016) {
+      const x4 = readIndex({ "true": "true", "false": null }, textCall("concat", [(truthy(v[6]) || truthy(v[7]))]));
+      if (x4 !== NONCONFORMING) {
+        const s4 = toAttribute(x4, "aria-disabled");
+        if (s4 !== r.v4) writeAttribute(r.n, "aria-disabled", r.v4 = s4);
+      }
+    }
+    if (c & 192) {
+      const x5 = (truthy(v[6]) || truthy(v[7]));
+      const s5 = toAttribute(x5, "aria-busy");
+      if (s5 !== r.v5) writeAttribute(r.n, "aria-busy", r.v5 = s5);
+    }
+    if (c & 7364) {
+      const x6 = hostState(["align","stretch","size","shape","loading","pending"], [v[2], v[12], v[11], v[10], v[6], v[7]]);
+      const s6 = x6;
+      if (s6 !== r.v6) writeAttribute(r.n, "data-ui-button-state", (r.v6 = s6) === "" ? null : s6);
     }
-    if (c & 48 && !((truthy(v[4]) || truthy(v[5]))) !== !r.b0) {
+    if (c & 192 && !((truthy(v[6]) || truthy(v[7]))) !== !r.b0) {
       if (r.b0) { r.b0 = undefined; clearRegion(r.a1, r.e0); }
       else { r.b0 = m17(d); r.e0.before(r.b0.n); }
     } else if (r.b0 !== undefined) p17(r.b0, c, d);
@@ -443,8 +508,8 @@ export function createUiButton(options = {}, html) {
   const p = (c, d) => {
     if (R === null) return;
     if (R === undefined) { R = M[a](element, d); return; }
-    if (c & 8194) {
-      const t = (((v[13] === "card") && (v[1] === "a")) ? 0 : (v[13] === "card") ? 1 : (v[1] === "a") ? 2 : 3);
+    if (c & 1073807624) {
+      const t = (((g(0) === "card") && (v[3] === "a")) ? 0 : (g(0) === "card") ? 1 : (v[3] === "a") ? 2 : 3);
       if (t !== a) {
         dispose(R);
         for (const key in I.r) delete I.r[key];
@@ -461,8 +526,8 @@ export function createUiButton(options = {}, html) {
   };
   const I = { B };
   const J = project(I, children, slots);
-  attachGeneratedController(element, S, v, p, undefined, undefined, I);
+  attachGeneratedController(element, S, v, p, undefined, X, I);
   manageProps(I);
   return element;
 }
-defineComponent("ui-button", createUiButton, ["align","as","disabled","href","loading","pending","rel","shape","size","stretch","target","tone","type","variant"]);
+defineComponent("ui-button", createUiButton, ["align","as","disabled","href","loading","pending","preset","rel","shape","size","stretch","target","tone","type","variant"]);

package/vanilla/UiCard.d.ts

@@ -14,7 +14,7 @@ export interface UiCardProps {
   padding?: "xs" | "sm" | "md" | "lg" | null;
   size?: "content" | "sm" | "md" | "lg" | null;
   tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
-  variant?: "outlined" | "subtle" | "elevated" | null;
+  variant?: "outlined" | "subtle" | "elevated" | "glass" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiCard.js

@@ -14,7 +14,7 @@ let P0, P1, P2, P3, P4, P5, P6, P7;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-card", b: generatedInputs };
 const A = [["section",{},[],"",[],["data-ui-card-state","data-ui-card-prop-as","data-ui-card-prop-padding","data-ui-card-prop-size","data-ui-card-prop-tone","data-ui-card-prop-variant"]],["article",{},[],"",[],["data-ui-card-state","data-ui-card-prop-as","data-ui-card-prop-padding","data-ui-card-prop-size","data-ui-card-prop-tone","data-ui-card-prop-variant"]],["aside",{},[],"",[],["data-ui-card-state","data-ui-card-prop-as","data-ui-card-prop-padding","data-ui-card-prop-size","data-ui-card-prop-tone","data-ui-card-prop-variant"]],["div",{},[],"",[],["data-ui-card-state","data-ui-card-prop-as","data-ui-card-prop-padding","data-ui-card-prop-size","data-ui-card-prop-tone","data-ui-card-prop-variant"]]];
 const Q = [[],[],[],[]];
-const D = { g: "ui-card", props: { "as": { "required":false,"values":["div","section","article","aside"],"default":"div", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "padding": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "size": { "required":false,"values":["content","sm","md","lg"],"default":"content", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "tone": { "required":false,"values":["neutral","accent","info","success","warning","danger"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "variant": { "required":false,"values":["outlined","subtle","elevated"],"default":"outlined", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
+const D = { g: "ui-card", props: { "as": { "required":false,"values":["div","section","article","aside"],"default":"div", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "padding": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "size": { "required":false,"values":["content","sm","md","lg"],"default":"content", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "tone": { "required":false,"values":["neutral","accent","info","success","warning","danger"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "variant": { "required":false,"values":["outlined","subtle","elevated","glass"],"default":"outlined", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
 
 export function createUiCard(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiCurveEditor.d.ts

@@ -0,0 +1,28 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+export interface UiCurveEditorEventMap {
+  input: CustomEvent<{ readonly value: string }>;
+  change: CustomEvent<{ readonly value: string }>;
+}
+export interface UiCurveEditorElement extends HTMLSpanElement {
+  addEventListener<K extends keyof UiCurveEditorEventMap>(type: K, listener: (this: UiCurveEditorElement, event: UiCurveEditorEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiCurveEditorElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiCurveEditorEventMap>(type: K, listener: (this: UiCurveEditorElement, event: UiCurveEditorEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiCurveEditorElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface UiCurveEditorProps {
+  disabled?: boolean | null;
+  label?: string | null;
+  size?: "sm" | "md" | "lg" | 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 createUiCurveEditor(props?: UiCurveEditorProps): UiCurveEditorElement;
+declare global {
+  interface ComponentTagMap {
+    "ui-curve-editor": { element: UiCurveEditorElement; props: Omit<UiCurveEditorProps, "attributes" | "children" | "slots"> };
+  }
+}