@threadlabs/looma 0.25.7 → 0.26.0

package/vanilla/UiMenuItem.js

@@ -1,16 +1,29 @@
-// Generated by HTML Next 1.0.0-alpha.29 for Vanilla DOM. Do not edit.
-import { componentRootIndex, manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+// Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, buildTemplate, clearRegion, NONCONFORMING, readIndex, textCall, toAttribute, truthy, writeAttribute, writeUrlAttribute, dispatchDeclared, detailCheck, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, armElement, replaceRoot, checkBoolean, checkConstrained, checkFormat, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-menu-item/ui-menu-item.js";
 import "../styles/ui-menu-item.css";
 
-const definition = {...{"contract":{"tag":"ui-menu-item","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"aria-disabled"},"default":false},"href":{"type":"string","required":false,"target":{"attribute":"href"},"default":""},"type":{"type":{"kind":"terminal","name":"keyword"},"values":["action","checkbox","radio"],"required":false,"target":{"attribute":"type"},"default":"action"},"value":{"type":"string","required":false,"target":{"attribute":"data-value"},"default":""}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"a","attributes":[{"kind":"literal","name":"role","value":"menuitem"},{"kind":"literal","name":"tabindex","value":"-1"},{"kind":"attribute","name":"aria-disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"data-value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}},{"kind":"attribute","name":"href","expression":"{ true: null, false: href }[concat(disabled)]","expressionPlan":{"source":"{ true: null, false: href }[concat(disabled)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":null}},{"key":"false","value":{"kind":"id","name":"href"}}]},"index":{"kind":"call","fn":"concat","args":[{"kind":"id","name":"disabled"}]}},"dependencies":["disabled","href"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"shortcut"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[],"name":"shortcut"}]}],"flow":{"kind":"when","test":"href and type = 'action'","testPlan":{"source":"href and type = 'action'","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"href"},"right":{"kind":"binary","op":"=","left":{"kind":"id","name":"type"},"right":{"kind":"literal","value":"action"}}},"dependencies":["href","type"]}}},{"kind":"element","name":"div","attributes":[{"kind":"attribute","name":"role","expression":"{ action: 'menuitem', checkbox: 'menuitemcheckbox', radio: 'menuitemradio' }[type]","expressionPlan":{"source":"{ action: 'menuitem', checkbox: 'menuitemcheckbox', radio: 'menuitemradio' }[type]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"action","value":{"kind":"literal","value":"menuitem"}},{"key":"checkbox","value":{"kind":"literal","value":"menuitemcheckbox"}},{"key":"radio","value":{"kind":"literal","value":"menuitemradio"}}]},"index":{"kind":"id","name":"type"}},"dependencies":["type"]}},{"kind":"attribute","name":"aria-checked","expression":"{ action: null, checkbox: internalChecked, radio: internalChecked }[type]","expressionPlan":{"source":"{ action: null, checkbox: internalChecked, radio: internalChecked }[type]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"action","value":{"kind":"literal","value":null}},{"key":"checkbox","value":{"kind":"id","name":"internalChecked"}},{"key":"radio","value":{"kind":"id","name":"internalChecked"}}]},"index":{"kind":"id","name":"type"}},"dependencies":["internalChecked","type"]}},{"kind":"literal","name":"tabindex","value":"-1"},{"kind":"attribute","name":"aria-disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"data-value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"check"}],"children":[],"flow":{"kind":"if","test":"(type = 'checkbox' or type = 'radio') and internalChecked","testPlan":{"source":"(type = 'checkbox' or type = 'radio') and internalChecked","ast":{"kind":"binary","op":"and","left":{"kind":"binary","op":"or","left":{"kind":"binary","op":"=","left":{"kind":"id","name":"type"},"right":{"kind":"literal","value":"checkbox"}},"right":{"kind":"binary","op":"=","left":{"kind":"id","name":"type"},"right":{"kind":"literal","value":"radio"}}},"right":{"kind":"id","name":"internalChecked"}},"dependencies":["internalChecked","type"]}}}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"shortcut"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[],"name":"shortcut"}]}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[{"kind":"state","name":"internalChecked","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object","shape":{"kind":"object","fields":[{"name":"checked","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"value","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"type","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["checkbox","radio"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["a","div"]}},source:{file:import.meta.url},css:""};
+const T0 = ["",[],["span",["class","label"],4],["span",["class","shortcut","aria-hidden","true"],4]];
+const T1 = ["",[]];
+const T2 = ["",[]];
+const T3 = ["",[],["span",["class","indicator","aria-hidden","true"],1],["span",["class","label"],4],["span",["class","shortcut","aria-hidden","true"],4]];
+const T4 = ["ui-icon",["name","check"]];
+const T5 = ["",[]];
+const T6 = ["",[]];
+let P0, P1, P2, P3, P4, P5, P6;
+const S = { n: ["internalChecked"], t: ["b"], f: import.meta.url, g: "ui-menu-item", d: { "change": [detailCheck(checkObject([["checked", checkBoolean, false], ["value", checkString, false], ["type", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["checkbox","radio"]}), false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false] }, x: dispatchDeclared };
+const A = [["a",{"role":"menuitem","tabindex":"-1"},[],"",[],["data-ui-menu-item-state","data-checked","data-disabled","data-href","data-type","data-value","aria-disabled","data-value","href"]],["div",{"tabindex":"-1"},[],"",[],["data-ui-menu-item-state","data-checked","data-disabled","data-href","data-type","data-value","role","aria-checked","aria-disabled","data-value"]]];
+const Q = [["value"],["value"]];
+const D = { props: { "checked": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "href": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "type": { "required":false,"values":["action","checkbox","radio"],"default":"action", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "value": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" } } };
+const C = (host) => controller.default(host);
 
-export function createUiMenuItem(options = {}) {
+export function createUiMenuItem(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
-  const projected = [];
-  const root = componentRootIndex(definition, componentProps);
+  const v = [false, null, null, null, null, null];
+  acceptProps(undefined, D, S.n, v, componentProps, [], html);
+  let a = ((truthy(v[3]) && (v[4] === "action")) ? 0 : 1);
   let element;
-  if (root === 0) {
+  if (a === 0) {
     element = document.createElement("a");
     for (const [name, value] of Object.entries(attributes)) {
       if (value === null || value === undefined || value === false) continue;
@@ -18,38 +31,7 @@ export function createUiMenuItem(options = {}) {
     }
     if (!element.hasAttribute("role")) element.setAttribute("role", "menuitem");
     if (!element.hasAttribute("tabindex")) element.setAttribute("tabindex", "-1");
-    const value0 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
-    if (typeof value0 === "boolean") element.setAttribute("aria-disabled", String(value0));
-    else element.removeAttribute("aria-disabled");
-    const value1 = componentProps["value"] === undefined ? "" : componentProps["value"];
-    if (value1 === null || value1 === undefined) element.removeAttribute("data-value");
-    else element.setAttribute("data-value", String(value1));
     element.setAttribute("data-component", "ui-menu-item");
-    const element0 = document.createElement("span");
-    element0.setAttribute("class", "label");
-    if (children.length > 0) {
-      for (const child of children) {
-        const node = typeof child === "string" ? document.createTextNode(child) : child;
-        if (node.nodeType === 1) node.setAttribute("data-slotted", "");
-        projected.push([node, ""]);
-        element0.append(node);
-      }
-    } else {
-    }
-    element.append(element0);
-    const element1 = document.createElement("span");
-    element1.setAttribute("class", "shortcut");
-    element1.setAttribute("aria-hidden", "true");
-    if (slots["shortcut"] ?? [].length > 0) {
-      for (const child of slots["shortcut"] ?? []) {
-        const node = typeof child === "string" ? document.createTextNode(child) : child;
-        if (node.nodeType === 1) node.setAttribute("data-slotted", "");
-        projected.push([node, "shortcut"]);
-        element1.append(node);
-      }
-    } else {
-    }
-    element.append(element1);
   } else {
     element = document.createElement("div");
     for (const [name, value] of Object.entries(attributes)) {
@@ -57,49 +39,167 @@ export function createUiMenuItem(options = {}) {
       element.setAttribute(name, value === true ? "" : String(value));
     }
     if (!element.hasAttribute("tabindex")) element.setAttribute("tabindex", "-1");
-    const value2 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
-    if (typeof value2 === "boolean") element.setAttribute("aria-disabled", String(value2));
-    else element.removeAttribute("aria-disabled");
-    const value3 = componentProps["value"] === undefined ? "" : componentProps["value"];
-    if (value3 === null || value3 === undefined) element.removeAttribute("data-value");
-    else element.setAttribute("data-value", String(value3));
     element.setAttribute("data-component", "ui-menu-item");
-    const element2 = document.createElement("span");
-    element2.setAttribute("class", "indicator");
-    element2.setAttribute("aria-hidden", "true");
-    const element3 = document.createElement("ui-icon");
-    element3.setAttribute("name", "check");
-    element2.append(element3);
-    element.append(element2);
-    const element4 = document.createElement("span");
-    element4.setAttribute("class", "label");
-    if (children.length > 0) {
-      for (const child of children) {
-        const node = typeof child === "string" ? document.createTextNode(child) : child;
-        if (node.nodeType === 1) node.setAttribute("data-slotted", "");
-        projected.push([node, ""]);
-        element4.append(node);
+  }
+  const B = acceptProps(element, D, S.n, v, componentProps, Q[a], html);
+  const m1 = (d) => {
+    const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
+    const r = { n };
+    p1(r, -1, d);
+    return r;
+  };
+  const p1 = (r, c, d) => {
+  };
+  const m2 = (d) => {
+    const n = (P2 ??= buildTemplate(T2)).cloneNode(true);
+    const r = { n };
+    p2(r, -1, d);
+    return r;
+  };
+  const p2 = (r, c, d) => {
+  };
+  const m4 = (d) => {
+    const n = (P4 ??= buildTemplate(T4)).cloneNode(true);
+    const r = { n };
+    p4(r, -1, d);
+    return r;
+  };
+  const p4 = (r, c, d) => {
+  };
+  const m5 = (d) => {
+    const n = (P5 ??= buildTemplate(T5)).cloneNode(true);
+    const r = { n };
+    p5(r, -1, d);
+    return r;
+  };
+  const p5 = (r, c, d) => {
+  };
+  const m6 = (d) => {
+    const n = (P6 ??= buildTemplate(T6)).cloneNode(true);
+    const r = { n };
+    p6(r, -1, d);
+    return r;
+  };
+  const p6 = (r, c, d) => {
+  };
+  const m0 = (n, d) => {
+    n.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+    const t0 = n.firstChild;
+    const t1 = t0.firstChild;
+    const t2 = t0.nextSibling.firstChild;
+    const r = { n, v0: undefined, v1: undefined, v2: undefined, v3: undefined, a1: t1, e0: t1.nextSibling, b0: undefined, f0: undefined, a2: t2, e1: t2.nextSibling, b1: undefined, f1: undefined };
+    p0(r, -1, d);
+    return r;
+  };
+  const p0 = (r, c, d) => {
+    if (c & 4) {
+      const x0 = v[2];
+      const s0 = toAttribute(x0, "aria-disabled");
+      if (s0 !== r.v0) writeAttribute(r.n, "aria-disabled", r.v0 = s0);
+    }
+    if (c & 32) {
+      const x1 = v[5];
+      const s1 = toAttribute(x1, "data-value");
+      if (s1 !== r.v1) writeAttribute(r.n, "data-value", r.v1 = s1);
+    }
+    if (c & 1073741836) {
+      const x2 = readIndex({ "true": null, "false": v[3] }, textCall("concat", [v[2]]));
+      if (x2 !== NONCONFORMING) {
+        const s2 = toAttribute(x2, "href");
+        if (s2 !== r.v2) writeUrlAttribute(r.n, "href", r.v2 = s2);
       }
-    } else {
     }
-    element.append(element4);
-    const element5 = document.createElement("span");
-    element5.setAttribute("class", "shortcut");
-    element5.setAttribute("aria-hidden", "true");
-    if (slots["shortcut"] ?? [].length > 0) {
-      for (const child of slots["shortcut"] ?? []) {
-        const node = typeof child === "string" ? document.createTextNode(child) : child;
-        if (node.nodeType === 1) node.setAttribute("data-slotted", "");
-        projected.push([node, "shortcut"]);
-        element5.append(node);
+    if (c & 16) {
+      const x3 = hostState(["type"], [v[4]]);
+      const s3 = x3;
+      if (s3 !== r.v3) writeAttribute(r.n, "data-ui-menu-item-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);
+    if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a2, r.e1, "shortcut", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b1 = m2(d); at.before(r.b1.n); } }
+    else if (r.b1 !== undefined) p2(r.b1, c, d);
+  };
+  const m3 = (n, d) => {
+    n.append((P3 ??= buildTemplate(T3)).cloneNode(true));
+    const t0 = n.firstChild;
+    const t1 = t0.firstChild;
+    const t2 = t0.nextSibling;
+    const t3 = t2.firstChild;
+    const t4 = t2.nextSibling.firstChild;
+    const r = { n, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, a1: t1, e0: t1.nextSibling, b0: undefined, a2: t3, e1: t3.nextSibling, b1: undefined, f1: undefined, a3: t4, e2: t4.nextSibling, b2: undefined, f2: undefined };
+    p3(r, -1, d);
+    return r;
+  };
+  const p3 = (r, c, d) => {
+    if (c & 1073741840) {
+      const x0 = readIndex({ "action": "menuitem", "checkbox": "menuitemcheckbox", "radio": "menuitemradio" }, v[4]);
+      const s0 = toAttribute(x0, "role");
+      if (s0 !== r.v0) writeAttribute(r.n, "role", r.v0 = s0);
+    }
+    if (c & 1073741841) {
+      const x1 = readIndex({ "action": null, "checkbox": v[0], "radio": v[0] }, v[4]);
+      const s1 = toAttribute(x1, "aria-checked");
+      if (s1 !== r.v1) writeAttribute(r.n, "aria-checked", r.v1 = s1);
+    }
+    if (c & 4) {
+      const x2 = v[2];
+      const s2 = toAttribute(x2, "aria-disabled");
+      if (s2 !== r.v2) writeAttribute(r.n, "aria-disabled", r.v2 = s2);
+    }
+    if (c & 32) {
+      const x3 = v[5];
+      const s3 = toAttribute(x3, "data-value");
+      if (s3 !== r.v3) writeAttribute(r.n, "data-value", r.v3 = s3);
+    }
+    if (c & 16) {
+      const x4 = hostState(["type"], [v[4]]);
+      const s4 = x4;
+      if (s4 !== r.v4) writeAttribute(r.n, "data-ui-menu-item-state", (r.v4 = s4) === "" ? null : s4);
+    }
+    if (c & 17) {
+      const t0 = (((v[4] === "checkbox") || (v[4] === "radio")) && v[0]);
+      if (true) {
+        {
+          r.b0 = undefined;
+          clearRegion(r.a1, r.e0);
+          if (t0) { r.b0 = m4(d); r.e0.before(r.b0.n); }
+        }
+      } else if (r.b0 !== undefined) p4(r.b0, c, d);
+    } else if (r.b0 !== undefined) p4(r.b0, c, d);
+    if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a2, r.e1, "", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b1 = m5(d); at.before(r.b1.n); } }
+    else if (r.b1 !== undefined) p5(r.b1, c, d);
+    if (r.f2 === undefined) { r.f2 = 1; const at = fillSlot(r.a3, r.e2, "shortcut", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b2 = m6(d); at.before(r.b2.n); } }
+    else if (r.b2 !== undefined) p6(r.b2, c, d);
+  };
+  const M = [m0, m3], N = [p0, p3];
+  let R;
+  const p = (c, d) => {
+    if (R === null) return;
+    if (R === undefined) { R = M[a](element, d); return; }
+    if (c & 24) {
+      const t = ((truthy(v[3]) && (v[4] === "action")) ? 0 : 1);
+      if (t !== a) {
+        dispose(R);
+        for (const key in I.r) delete I.r[key];
+        const previous = I.e, next = armElement(previous, A[a], A[t]);
+        I.B.b = Q[t];
+        a = t;
+        R = null;
+        R = M[t](next, d);
+        replaceRoot(I, previous, next);
+        return;
       }
-    } else {
     }
-    element.append(element5);
-  }
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-    controller,
-  });
+    N[a](R, c, d);
+  };
+  const I = { B };
+  const J = project(I, children, slots);
+  I.R = new Set();
+  attachGeneratedController(element, S, v, (c, d) => { p(c, d); for (const f of I.R) f(c, d); }, C, undefined, I);
+  manageProps(I);
   return element;
 }
-

package/vanilla/UiMeter.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 UiMeterEventMap {
 }
 export interface UiMeterElement extends HTMLSpanElement {

package/vanilla/UiMeter.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, binaryValue, buildTemplate, formatCall, mathCall, NONCONFORMING, readIndex, recordValue, textCall, toAttribute, toText, writeAttribute, computedCycle, formatOf, keywordFormat, hostState, acceptProps, manageProps, readonlyView, checkFormat, checkNumber, checkString } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-meter.css";
 
-const definition = {...{"contract":{"tag":"ui-meter","props":{"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":""},"max":{"type":"number","required":false,"target":{"attribute":"aria-valuemax"},"default":1},"segments":{"type":"number","required":false,"target":{"attribute":"segments"},"default":0},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md"],"required":false,"target":{"attribute":"size"},"default":"md"},"tone":{"type":{"kind":"terminal","name":"keyword"},"values":["neutral","accent","info","success","warning","danger"],"required":false,"target":{"attribute":"tone"},"default":"neutral"},"value":{"type":"number","required":false,"target":{"attribute":"value"},"default":0},"valueText":{"type":"string","required":false,"target":{"attribute":"valuetext"},"default":""}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"role","value":"meter"},{"kind":"literal","name":"aria-valuemin","value":"0"},{"kind":"attribute","name":"aria-valuemax","expression":"max","expressionPlan":{"source":"max","ast":{"kind":"id","name":"max"},"dependencies":["max"]}},{"kind":"attribute","name":"aria-valuenow","expression":"amount","expressionPlan":{"source":"amount","ast":{"kind":"id","name":"amount"},"dependencies":["amount"]}},{"kind":"attribute","name":"aria-valuetext","expression":"{ true: valueText, false: format($percent / 100, 'percent', { maximumFractionDigits: 0 }) }[concat(valueText != '')]","expressionPlan":{"source":"{ true: valueText, false: format($percent / 100, 'percent', { maximumFractionDigits: 0 }) }[concat(valueText != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"id","name":"valueText"}},{"key":"false","value":{"kind":"call","fn":"format","args":[{"kind":"binary","op":"/","left":{"kind":"id","name":"percent"},"right":{"kind":"literal","value":100}},{"kind":"literal","value":"percent"},{"kind":"object","pairs":[{"key":"maximumFractionDigits","value":{"kind":"literal","value":0}}]}]}}]},"index":{"kind":"call","fn":"concat","args":[{"kind":"binary","op":"!=","left":{"kind":"id","name":"valueText"},"right":{"kind":"literal","value":""}}]}},"dependencies":["percent","valueText"]}},{"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":"data-ui-meter-segments","expression":"{ true: segments, false: null }[concat(segments > 1)]","expressionPlan":{"source":"{ true: segments, false: null }[concat(segments > 1)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"id","name":"segments"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"concat","args":[{"kind":"binary","op":">","left":{"kind":"id","name":"segments"},"right":{"kind":"literal","value":1}}]}},"dependencies":["segments"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"fill"},{"kind":"attribute","name":"inline-size","expression":"concat(percent, '%')","expressionPlan":{"source":"concat(percent, '%')","ast":{"kind":"call","fn":"concat","args":[{"kind":"id","name":"percent"},{"kind":"literal","value":"%"}]},"dependencies":["percent"]},"target":"style"}],"children":[]}]},"declarations":[{"kind":"computed","name":"amount","expression":{"source":"clamp(0, value, max)","ast":{"kind":"call","fn":"clamp","args":[{"kind":"literal","value":0},{"kind":"id","name":"value"},{"kind":"id","name":"max"}]},"dependencies":["max","value"]}},{"kind":"computed","name":"percent","expression":{"source":"{ true: amount / max * 100, false: 0 }[concat(max > 0)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"binary","op":"*","left":{"kind":"binary","op":"/","left":{"kind":"id","name":"amount"},"right":{"kind":"id","name":"max"}},"right":{"kind":"literal","value":100}}},{"key":"false","value":{"kind":"literal","value":0}}]},"index":{"kind":"call","fn":"concat","args":[{"kind":"binary","op":">","left":{"kind":"id","name":"max"},"right":{"kind":"literal","value":0}}]}},"dependencies":["amount","max"]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+const T0 = ["",[],["span",["class","fill"]]];
+let P0;
+const S = { n: ["amount","percent"], t: ["?","?"], f: import.meta.url, g: "ui-meter", k: 0, r: readonlyView };
+const D = { props: { "label": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "max": { "required":false,"default":1, c: checkNumber, t: "number", j: 0, m: "n" }, "segments": { "required":false,"default":0, c: checkNumber, t: "number", j: 0, m: "n" }, "size": { "required":false,"values":["sm","md"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "tone": { "required":false,"values":["neutral","accent","info","success","warning","danger"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "value": { "required":false,"default":0, c: checkNumber, t: "number", j: 0, m: "n" }, "valueText": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" } } };
 
-export function createUiMeter(options = {}) {
+export function createUiMeter(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,15 +16,76 @@ export function createUiMeter(options = {}) {
   }
   if (!element.hasAttribute("role")) element.setAttribute("role", "meter");
   if (!element.hasAttribute("aria-valuemin")) element.setAttribute("aria-valuemin", "0");
-  const value0 = componentProps["max"] === undefined ? 1 : componentProps["max"];
-  if (value0 === null || value0 === undefined) element.removeAttribute("aria-valuemax");
-  else element.setAttribute("aria-valuemax", String(value0));
   element.setAttribute("data-component", "ui-meter");
-  const element0 = document.createElement("span");
-  element0.setAttribute("class", "fill");
-  element.append(element0);
-  manageComponentLifecycle(element, definition, { props: componentProps, projected,
-  });
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [undefined, undefined, null, null, null, null, null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const X = { e: 0, g: (j) => g(j), w: new Set() };
+  const ke = [];
+  const K = [() => mathCall("clamp", [0, v[7], v[3]], undefined, []), () => readIndex(recordValue(["true","false"], [binaryValue("*", binaryValue("/", g(0), v[3]), 100), 0]), textCall("concat", [binaryValue(">", v[3], 0)]))];
+  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 { next = K[i](); } 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 p0 = (r, c, d) => {
+    if (c & 8) {
+      const x0 = v[3];
+      const s0 = toAttribute(x0, "aria-valuemax");
+      if (s0 !== r.v0) writeAttribute(r.n, "aria-valuemax", r.v0 = s0);
+    }
+    if (c & 136) {
+      const x1 = g(0);
+      if (x1 !== NONCONFORMING) {
+        const s1 = toAttribute(x1, "aria-valuenow");
+        if (s1 !== r.v1) writeAttribute(r.n, "aria-valuenow", r.v1 = s1);
+      }
+    }
+    if (c & 1073742216) {
+      const x2 = readIndex(recordValue(["true","false"], [v[8], formatCall("format", [binaryValue("/", g(1), 100), "percent", { "maximumFractionDigits": 0 }], "number")]), textCall("concat", [(v[8] !== "")]));
+      if (x2 !== NONCONFORMING) {
+        const s2 = toAttribute(x2, "aria-valuetext");
+        if (s2 !== r.v2) writeAttribute(r.n, "aria-valuetext", r.v2 = s2);
+      }
+    }
+    if (c & 1073741828) {
+      const x3 = readIndex({ "true": v[2], "false": null }, textCall("concat", [(v[2] !== "")]));
+      if (x3 !== NONCONFORMING) {
+        const s3 = toAttribute(x3, "aria-label");
+        if (s3 !== r.v3) writeAttribute(r.n, "aria-label", r.v3 = s3);
+      }
+    }
+    if (c & 1073741840) {
+      const x4 = readIndex({ "true": v[4], "false": null }, textCall("concat", [binaryValue(">", v[4], 1)]));
+      if (x4 !== NONCONFORMING) {
+        const s4 = toAttribute(x4, "data-ui-meter-segments");
+        if (s4 !== r.v4) writeAttribute(r.n, "data-ui-meter-segments", r.v4 = s4);
+      }
+    }
+    if (c & 1073741960) {
+      const x5 = textCall("concat", [g(1), "%"]);
+      if (x5 !== NONCONFORMING) {
+        const s5 = toText(x5);
+        if (s5 !== r.v5) r.a1.style.setProperty("inline-size", r.v5 = s5);
+      }
+    }
+    if (c & 96) {
+      const x6 = hostState(["size","tone"], [v[5], v[6]]);
+      const s6 = x6;
+      if (s6 !== r.v6) writeAttribute(r.n, "data-ui-meter-state", (r.v6 = s6) === "" ? null : s6);
+    }
+  };
+  const t0 = element.firstChild;
+  const R = { n: element, a1: t0, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: undefined };
+  const I = { B };
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, X, I);
+  manageProps(I);
   return element;
 }
-

package/vanilla/UiNavItem.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 UiNavItemEventMap {
 }
 export interface UiNavItemElement extends HTMLElement {