@threadlabs/looma 0.33.1 → 0.35.0

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>>;

package/vanilla/UiText.js

@@ -24,17 +24,19 @@ const T18 = ["",[],4];
 const T19 = ["",[]];
 const T20 = ["",[],4];
 const T21 = ["",[]];
-let P0, P1, P2, P3, P4, P5, P6, P7, P8, P9, P10, P11, P12, P13, P14, P15, P16, P17, P18, P19, P20, P21;
+const T22 = ["",[],4];
+const T23 = ["",[]];
+let P0, P1, P2, P3, P4, P5, P6, P7, P8, P9, P10, P11, P12, P13, P14, P15, P16, P17, P18, P19, P20, P21, P22, P23;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-text", b: generatedInputs };
-const A = [["span",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["div",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["small",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["strong",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["label",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["h2",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["h3",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["h4",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["h5",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["h6",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["p",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]]];
-const Q = [[],[],[],[],[],[],[],[],[],[],[]];
-const D = { g: "ui-text", props: { "align": { "required":false,"values":["start","center"],"default":"start", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "as": { "required":false,"values":["p","span","div","small","strong","label","h2","h3","h4","h5","h6"],"default":"p", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "font": { "required":false,"values":["inherit","sans"],"default":"inherit", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "grow": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "size": { "required":false,"values":["inherit","xs","sm","md","lg"],"default":"inherit", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "tone": { "required":false,"values":["default","secondary","muted","accent","danger","success","info","warning"],"default":"default", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "trim": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "truncate": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "variant": { "required":false,"values":["body","eyebrow","code"],"default":"body", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "weight": { "required":false,"values":["inherit","normal","medium","semibold"],"default":"inherit", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "wrap": { "required":false,"values":["normal","anywhere"],"default":"normal", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
+const A = [["span",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["div",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["small",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["strong",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["label",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["h1",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["h2",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["h3",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["h4",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["h5",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["h6",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]],["p",{},[],"",[],["data-ui-text-state","data-ui-text-prop-align","data-ui-text-prop-as","data-ui-text-prop-font","data-ui-text-prop-grow","data-ui-text-prop-size","data-ui-text-prop-tone","data-ui-text-prop-trim","data-ui-text-prop-truncate","data-ui-text-prop-variant","data-ui-text-prop-weight","data-ui-text-prop-wrap"]]];
+const Q = [[],[],[],[],[],[],[],[],[],[],[],[]];
+const D = { g: "ui-text", props: { "align": { "required":false,"values":["start","center"],"default":"start", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "as": { "required":false,"values":["p","span","div","small","strong","label","h1","h2","h3","h4","h5","h6"],"default":"p", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "font": { "required":false,"values":["inherit","sans"],"default":"inherit", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "grow": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "size": { "required":false,"values":["inherit","xs","sm","md","lg"],"default":"inherit", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "tone": { "required":false,"values":["default","secondary","muted","accent","danger","success","info","warning"],"default":"default", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "trim": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "truncate": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "variant": { "required":false,"values":["body","display","heading","label","caption","eyebrow","code"],"default":"body", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "weight": { "required":false,"values":["inherit","normal","medium","semibold"],"default":"inherit", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "wrap": { "required":false,"values":["normal","anywhere"],"default":"normal", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
 
 export function createUiText(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
   const v = [null, null, null, null, null, null, null, null, null, null, null];
   let B = acceptProps(undefined, D, S.n, v, componentProps, [], html);
-  let a = ((v[1] === "span") ? 0 : (v[1] === "div") ? 1 : (v[1] === "small") ? 2 : (v[1] === "strong") ? 3 : (v[1] === "label") ? 4 : (v[1] === "h2") ? 5 : (v[1] === "h3") ? 6 : (v[1] === "h4") ? 7 : (v[1] === "h5") ? 8 : (v[1] === "h6") ? 9 : 10);
+  let a = ((v[1] === "span") ? 0 : (v[1] === "div") ? 1 : (v[1] === "small") ? 2 : (v[1] === "strong") ? 3 : (v[1] === "label") ? 4 : (v[1] === "h1") ? 5 : (v[1] === "h2") ? 6 : (v[1] === "h3") ? 7 : (v[1] === "h4") ? 8 : (v[1] === "h5") ? 9 : (v[1] === "h6") ? 10 : 11);
   let element;
   if (a === 0) {
     element = document.createElement("span");
@@ -72,34 +74,41 @@ export function createUiText(options = {}, html) {
     }
     element.setAttribute("data-component", "ui-text");
   } else if (a === 5) {
-    element = document.createElement("h2");
+    element = document.createElement("h1");
     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-text");
   } else if (a === 6) {
-    element = document.createElement("h3");
+    element = document.createElement("h2");
     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-text");
   } else if (a === 7) {
-    element = document.createElement("h4");
+    element = document.createElement("h3");
     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-text");
   } else if (a === 8) {
-    element = document.createElement("h5");
+    element = document.createElement("h4");
     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-text");
   } else if (a === 9) {
+    element = document.createElement("h5");
+    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-text");
+  } else if (a === 10) {
     element = document.createElement("h6");
     for (const [name, value] of Object.entries(attributes)) {
       if (value === null || value === undefined || value === false) continue;
@@ -203,6 +212,14 @@ export function createUiText(options = {}, html) {
   };
   const p21 = (r, c, d) => {
   };
+  const m23 = (d) => {
+    const n = (P23 ??= buildTemplate(T23)).cloneNode(true);
+    const r = { n };
+    p23(r, -1, d);
+    return r;
+  };
+  const p23 = (r, c, d) => {
+  };
   const m0 = (n, d) => {
     n.append((P0 ??= buildTemplate(T0)).cloneNode(true));
     const t0 = n.firstChild;
@@ -390,13 +407,30 @@ export function createUiText(options = {}, html) {
       if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b0 = m21(d); at.before(r.b0.n); } }
     else if (r.b0 !== undefined) p21(r.b0, c, d);
   };
-  const M = [m0, m2, m4, m6, m8, m10, m12, m14, m16, m18, m20], N = [p0, p2, p4, p6, p8, p10, p12, p14, p16, p18, p20];
+  const m22 = (n, d) => {
+    n.append((P22 ??= buildTemplate(T22)).cloneNode(true));
+    const t0 = n.firstChild;
+    const r = { n, v0: undefined, a0: t0, e0: t0.nextSibling, b0: undefined, f0: undefined };
+    p22(r, -1, d);
+    return r;
+  };
+  const p22 = (r, c, d) => {
+    if (c & 2045) {
+      const x0 = hostState(["grow","size","trim","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[6], v[5], v[9], v[8], v[7], v[0], v[2], v[10]]);
+      const s0 = x0;
+      if (s0 !== r.v0) writeAttribute(r.n, "data-ui-text-state", (r.v0 = s0) === "" ? null : s0);
+    }
+    if (r.f0 === undefined) { r.f0 = 1; const at = fillSlot(r.a0, r.e0, "", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b0 = m23(d); at.before(r.b0.n); } }
+    else if (r.b0 !== undefined) p23(r.b0, c, d);
+  };
+  const M = [m0, m2, m4, m6, m8, m10, m12, m14, m16, m18, m20, m22], N = [p0, p2, p4, p6, p8, p10, p12, p14, p16, p18, p20, p22];
   let R;
   const p = (c, d) => {
     if (R === null) return;
     if (R === undefined) { R = M[a](element, d); return; }
     if (c & 2) {
-      const t = ((v[1] === "span") ? 0 : (v[1] === "div") ? 1 : (v[1] === "small") ? 2 : (v[1] === "strong") ? 3 : (v[1] === "label") ? 4 : (v[1] === "h2") ? 5 : (v[1] === "h3") ? 6 : (v[1] === "h4") ? 7 : (v[1] === "h5") ? 8 : (v[1] === "h6") ? 9 : 10);
+      const t = ((v[1] === "span") ? 0 : (v[1] === "div") ? 1 : (v[1] === "small") ? 2 : (v[1] === "strong") ? 3 : (v[1] === "label") ? 4 : (v[1] === "h1") ? 5 : (v[1] === "h2") ? 6 : (v[1] === "h3") ? 7 : (v[1] === "h4") ? 8 : (v[1] === "h5") ? 9 : (v[1] === "h6") ? 10 : 11);
       if (t !== a) {
         dispose(R);
         for (const key in I.r) delete I.r[key];

package/vanilla/index.js

@@ -15,6 +15,7 @@ export * from "./UiCombobox.js";
 export * from "./UiContainer.js";
 export * from "./UiContextMenu.js";
 export * from "./UiCover.js";
+export * from "./UiCurveEditor.js";
 export * from "./UiDescriptionItem.js";
 export * from "./UiDescriptionList.js";
 export * from "./UiDialog.js";
@@ -46,6 +47,7 @@ export * from "./UiIconButton.js";
 export * from "./UiImage.js";
 export * from "./UiInput.js";
 export * from "./UiInputGroup.js";
+export * from "./UiLightEditor.js";
 export * from "./UiList.js";
 export * from "./UiListbox.js";
 export * from "./UiListItem.js";
@@ -54,6 +56,7 @@ export * from "./UiMenuGroup.js";
 export * from "./UiMenuItem.js";
 export * from "./UiMeter.js";
 export * from "./UiNavItem.js";
+export * from "./UiNumberInput.js";
 export * from "./UiPageHeader.js";
 export * from "./UiPopover.js";
 export * from "./UiRadio.js";
@@ -66,6 +69,7 @@ export * from "./UiSection.js";
 export * from "./UiSelect.js";
 export * from "./UiSeparator.js";
 export * from "./UiSidebar.js";
+export * from "./UiSlider.js";
 export * from "./UiSpinner.js";
 export * from "./UiStack.js";
 export * from "./UiStatusMessage.js";

package/vue/UiBadge.vue

@@ -257,9 +257,6 @@ const hostState = computed(() =>
 /* A count can keep its containing control's contrasting ink instead of reversing it.
    The faint fill preserves text contrast; a quiet boundary separates the count from its control. */
 
-/* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original
-   surface ink: moving it toward dark-theme primary text would reduce overlay contrast. */
-
 /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
 
 /* A visible glyph needs fixed geometry, unlike a content-sized pill or a hidden-label dot. */
@@ -557,8 +554,36 @@ const hostState = computed(() =>
     border-color: var(--ui-badge-border, color-mix(in srgb, currentColor 20%, transparent));
     box-shadow: none;
   }
+
   :global(:scope[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"]:where([data-hn-ui-badge])) {
-    color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-surface)));
+    --_badge-outline-surface: var(
+      --ui-badge-surface,
+      var(--_badge-color-surface, color-mix(in srgb, var(--ui-surface-raised) 88%, transparent))
+    );
+    color: var(--ui-badge-text, var(--_badge-color-text, var(--ui-text-primary)));
+  }
+  :global(:scope[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"]:not([data-ui-badge-state~="shape=circle"]):where([data-hn-ui-badge])) {
+    border-color: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-outline-surface)));
+  }
+  :global(:scope[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"][data-ui-badge-state~="shape=circle"]:where([data-hn-ui-badge])) {
+    --_badge-outline-surface: var(
+      --ui-badge-surface,
+      var(
+        --_badge-color-surface,
+        light-dark(
+          color-mix(
+            in srgb,
+            var(--ui-surface-raised) var(--ui-badge-circle-opacity, 66%),
+            transparent
+          ),
+          color-mix(
+            in srgb,
+            var(--ui-surface-raised) var(--ui-badge-circle-opacity, 56%),
+            transparent
+          )
+        )
+      )
+    );
   }
 
   :global(:scope[data-ui-badge-state~="variant=outline"]:where([data-hn-ui-badge])) {

package/vue/UiButton.d.ts

@@ -41,6 +41,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     pending: {
         type: PropType<boolean | null>;
     };
+    preset: {
+        type: PropType<"none" | "primary" | "standard" | "quiet" | "destructive" | null>;
+    };
     rel: {
         type: PropType<string | null>;
     };
@@ -87,6 +90,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     pending: {
         type: PropType<boolean | null>;
     };
+    preset: {
+        type: PropType<"none" | "primary" | "standard" | "quiet" | "destructive" | null>;
+    };
     rel: {
         type: PropType<string | null>;
     };