@threadlabs/looma 0.34.0 → 0.35.0

package/tokens.css

@@ -85,6 +85,10 @@
      never has to: these exist so components share one vocabulary, not to be configured. */
   :root,
   :where([data-theme], [data-contrast]) {
+    /* Neutral is a quiet filled surface, never the text colour inverted. */
+    --ui-neutral-surface: color-mix(in srgb, var(--ui-text) 6%, var(--ui-surface-raised));
+    --ui-neutral-hover: color-mix(in srgb, var(--ui-text) 10%, var(--ui-surface-raised));
+    --ui-neutral-active: color-mix(in srgb, var(--ui-text) 14%, var(--ui-surface-raised));
     --ui-accent-line-width: var(--ui-border-width);
 
     /* Type scale, from the base size. */

package/vanilla/UiCard.d.ts

@@ -14,7 +14,8 @@ 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" | "glass" | null;
+  treatment?: "standard" | "expressive" | null;
+  variant?: "outlined" | "subtle" | "elevated" | 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

@@ -12,13 +12,13 @@ const T6 = ["",[],4];
 const T7 = ["",[]];
 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 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-treatment","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-treatment","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-treatment","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-treatment","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","glass"],"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)] }, "treatment": { "required":false,"values":["standard","expressive"],"default":"standard", 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)] } } };
 
 export function createUiCard(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
-  const v = [null, null, null, null, null];
+  const v = [null, null, null, null, null, null];
   let B = acceptProps(undefined, D, S.n, v, componentProps, [], html);
   let a = ((v[0] === "section") ? 0 : (v[0] === "article") ? 1 : (v[0] === "aside") ? 2 : 3);
   let element;
@@ -92,8 +92,8 @@ export function createUiCard(options = {}, html) {
     return r;
   };
   const p0 = (r, c, d) => {
-    if (c & 30) {
-      const x0 = hostState(["padding","variant","tone","size"], [v[1], v[4], v[3], v[2]]);
+    if (c & 62) {
+      const x0 = hostState(["padding","variant","treatment","tone","size"], [v[1], v[5], v[4], v[3], v[2]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-card-state", (r.v0 = s0) === "" ? null : s0);
     }
@@ -109,8 +109,8 @@ export function createUiCard(options = {}, html) {
     return r;
   };
   const p2 = (r, c, d) => {
-    if (c & 30) {
-      const x0 = hostState(["padding","variant","tone","size"], [v[1], v[4], v[3], v[2]]);
+    if (c & 62) {
+      const x0 = hostState(["padding","variant","treatment","tone","size"], [v[1], v[5], v[4], v[3], v[2]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-card-state", (r.v0 = s0) === "" ? null : s0);
     }
@@ -126,8 +126,8 @@ export function createUiCard(options = {}, html) {
     return r;
   };
   const p4 = (r, c, d) => {
-    if (c & 30) {
-      const x0 = hostState(["padding","variant","tone","size"], [v[1], v[4], v[3], v[2]]);
+    if (c & 62) {
+      const x0 = hostState(["padding","variant","treatment","tone","size"], [v[1], v[5], v[4], v[3], v[2]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-card-state", (r.v0 = s0) === "" ? null : s0);
     }
@@ -143,8 +143,8 @@ export function createUiCard(options = {}, html) {
     return r;
   };
   const p6 = (r, c, d) => {
-    if (c & 30) {
-      const x0 = hostState(["padding","variant","tone","size"], [v[1], v[4], v[3], v[2]]);
+    if (c & 62) {
+      const x0 = hostState(["padding","variant","treatment","tone","size"], [v[1], v[5], v[4], v[3], v[2]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-card-state", (r.v0 = s0) === "" ? null : s0);
     }
@@ -179,4 +179,4 @@ export function createUiCard(options = {}, html) {
   manageProps(I);
   return element;
 }
-defineComponent("ui-card", createUiCard, ["as","padding","size","tone","variant"]);
+defineComponent("ui-card", createUiCard, ["as","padding","size","tone","treatment","variant"]);

package/vanilla/UiLightEditor.d.ts

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

package/vanilla/UiLightEditor.js

@@ -0,0 +1,102 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, buildTemplate, NONCONFORMING, textCall, toAttribute, writeAttribute, dispatchDeclared, detailCheck, dispose, formatOf, keywordFormat, acceptProps, manageProps, generatedInputs, project, fillSlot, checkBoolean, checkFormat, checkNumber, checkObject, checkString, defineComponent, activateModule } from "@nextwebwg/html-next/generated-runtime";
+import * as controller from "../components/ui-light-editor/ui-light-editor.js";
+import "../styles/ui-light-editor.css";
+
+const T0 = ["",[],"\n    ",["span",["class","stage","role","group"],"\n      ",["span",["class","plane"],"\n        ",["svg",["viewBox","0 0 100 60","preserveAspectRatio","none","aria-hidden","true"],["path",["d","M0 30 H100 M50 0 V60"]]],"\n        ",["span",["class","specimen"],4],"\n        ",["button",["type","button","class","source"]],"\n      "],"\n    "],"\n    ",["span",["class","coordinates"],"\n      ",["ui-number-input",["data-coordinate","x","min","0","max","100","step","1","unit","%","label","Light horizontal position"]],"\n      ",["ui-number-input",["data-coordinate","y","min","0","max","100","step","1","unit","%","label","Light vertical position"]],"\n    "],"\n    ",["span",["class","hint"],"Drag the light, use arrow keys, or enter its position. Top centre is 50%, 0%."],"\n  "];
+const T1 = ["",[]];
+let P0, P1;
+const S = { n: ["horizontal","vertical"], t: ["s","s"], f: import.meta.url, g: "ui-light-editor", d: { "input": [detailCheck(checkObject([["x", checkNumber, false], ["y", checkNumber, false]], false)), true, true, false], "change": [detailCheck(checkObject([["x", checkNumber, false], ["y", checkNumber, false]], false)), true, true, false] }, x: dispatchDeclared, a: (host, I) => C(host, I), b: generatedInputs, i: ["50", "0"] };
+const D = { g: "ui-light-editor", props: { "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "label": { "required":false,"default":"Light position", 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)] }, "x": { "required":false,"default":0.5, c: checkNumber, t: "number", j: 0, m: "n" }, "y": { "required":false,"default":0, c: checkNumber, t: "number", j: 0, m: "n" } } };
+const C = (host) => activateModule(controller, host);
+
+export function createUiLightEditor(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-light-editor");
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = ["50", "0", null, null, null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const m1 = (d) => {
+    const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
+    const r = { n };
+    p1(r, -1, d);
+    return r;
+  };
+  const p1 = (r, c, d) => {
+  };
+  const p0 = (r, c, d) => {
+    if (c & 8) {
+      const x0 = v[3];
+      const s0 = toAttribute(x0, "aria-label");
+      if (s0 !== r.v0) writeAttribute(r.a0, "aria-label", r.v0 = s0);
+    }
+    if (c & 4) {
+      const x1 = v[2];
+      const s1 = toAttribute(x1, "disabled");
+      if (s1 !== r.v1) writeAttribute(r.a3, "disabled", r.v1 = s1);
+    }
+    if (c & 8) {
+      const x2 = textCall("concat", [v[3], ". Arrow keys move the source; Shift moves faster."]);
+      if (x2 !== NONCONFORMING) {
+        const s2 = toAttribute(x2, "aria-label");
+        if (s2 !== r.v2) writeAttribute(r.a3, "aria-label", r.v2 = s2);
+      }
+    }
+    if (c & 1) {
+      const x3 = v[0];
+      const s3 = toAttribute(x3, "value");
+      if (s3 !== r.v3) writeAttribute(r.a4, "value", r.v3 = s3);
+    }
+    if (c & 1073741840) {
+      const x4 = v[4];
+      const s4 = toAttribute(x4, "size");
+      if (s4 !== r.v4) writeAttribute(r.a4, "size", r.v4 = s4);
+    }
+    if (c & 4) {
+      const x5 = v[2];
+      const s5 = toAttribute(x5, "disabled");
+      if (s5 !== r.v5) writeAttribute(r.a4, "disabled", r.v5 = s5);
+    }
+    if (c & 2) {
+      const x6 = v[1];
+      const s6 = toAttribute(x6, "value");
+      if (s6 !== r.v6) writeAttribute(r.a5, "value", r.v6 = s6);
+    }
+    if (c & 1073741840) {
+      const x7 = v[4];
+      const s7 = toAttribute(x7, "size");
+      if (s7 !== r.v7) writeAttribute(r.a5, "size", r.v7 = s7);
+    }
+    if (c & 4) {
+      const x8 = v[2];
+      const s8 = toAttribute(x8, "disabled");
+      if (s8 !== r.v8) writeAttribute(r.a5, "disabled", r.v8 = s8);
+    }
+    if (r.f0 === undefined) { r.f0 = 1; const at = fillSlot(r.a2, r.e0, "", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b0 = m1(d); at.before(r.b0.n); } }
+    else if (r.b0 !== undefined) p1(r.b0, c, d);
+  };
+  const t0 = element.firstChild.nextSibling;
+  const t1 = t0.firstChild.nextSibling;
+  const t2 = t1.firstChild.nextSibling.nextSibling.nextSibling;
+  const t3 = t2.firstChild;
+  const t4 = t2.nextSibling.nextSibling;
+  const t5 = t0.nextSibling.nextSibling;
+  const t6 = t5.firstChild.nextSibling;
+  const t7 = t6.nextSibling.nextSibling;
+  const R = { a0: t0, a3: t4, a4: t6, a5: t7, v0: null, v1: null, v2: null, v3: null, v4: null, v5: null, v6: null, v7: null, v8: null, a2: t3, e0: t3.nextSibling, b0: undefined, f0: undefined };
+  const I = { B };
+  const J = project(I, children, slots);
+  I.R = new Set();
+  attachGeneratedController(element, S, v, (c, d) => { ((c, d) => p0(R, c, d))(c, d); for (const f of I.R) f(c, d); }, undefined, undefined, I);
+  manageProps(I);
+  I.r["plane"] = t1;
+  I.r["source"] = t4;
+  return element;
+}
+defineComponent("ui-light-editor", createUiLightEditor, ["disabled","label","size","x","y"]);

package/vanilla/UiNumberInput.js

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

package/vanilla/index.js

@@ -47,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";

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.vue

@@ -1051,7 +1051,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   :global(:scope:where([data-hn-ui-button])) {
     /* Optional inherited action-group values keep text and icon actions under the same light.
        One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
-       A single ambient lift avoids stacking a face gradient or another inset bevel. */
+       The shared theme supplies reflections and glow independently of the resting lift. */
     --_ui-action-start: 1px;
     --_ui-action-edge: var(
       --ui-action-edge,
@@ -1067,6 +1067,8 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     --_ui-action-shadow:
       var(--_ui-action-edge),
       0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
+    --_tone-highlight: var(--ui-accent-highlight, none);
+    --_tone-glow: var(--ui-accent-glow, 0 0 transparent);
     --_hue: var(--ui-accent);
     --_hue-hover: var(--ui-accent-hover);
     --_hue-active: var(--ui-accent-active);
@@ -1118,8 +1120,10 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     line-height: var(--ui-line-height-tight);
     padding: var(--ui-control-inset-block-md, var(--ui-space-2))
       var(--ui-action-inset-md, var(--ui-space-3)) !important;
-    background-image: none;
-    box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
+    background-image: var(--ui-surface-highlight, none);
+    box-shadow:
+      var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+      var(--_tone-glow);
     cursor: pointer;
     transition:
       scale var(--ui-motion-press, var(--ui-motion-fast)) var(--ui-motion-ease),
@@ -1239,7 +1243,10 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     border-color: var(--_tone);
     background-color: var(--_tone);
     color: var(--_on-tone);
-    box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
+    background-image: var(--_tone-highlight);
+    box-shadow:
+      var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+      var(--_tone-glow);
   }
 
   :global(:is(:scope[data-appearance="solid"], :scope[data-appearance="danger"]):hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
@@ -1254,6 +1261,8 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     box-shadow: var(--ui-pressed);
   }
   :global(:scope[data-tone="neutral"]:where([data-hn-ui-button])) {
+    --_tone-highlight: var(--ui-neutral-highlight, none);
+    --_tone-glow: var(--ui-neutral-glow, 0 0 transparent);
     --_hue: var(--ui-text);
     --_hue-hover: var(--ui-text);
     --_hue-active: var(--ui-text);
@@ -1261,8 +1270,22 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     --_on-hue: var(--ui-surface);
   }
 
+  :global(:scope[data-tone="neutral"][data-appearance="solid"]:where([data-hn-ui-button])) {
+    border-color: var(--ui-button-border, var(--ui-control-border));
+    background-color: var(--ui-button-surface, var(--ui-neutral-surface));
+    color: var(--ui-button-text, var(--ui-text));
+  }
+  :global(:scope[data-tone="neutral"][data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
+    background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
+  }
+  :global(:scope[data-tone="neutral"][data-appearance="solid"]:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
+    background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
+  }
+
   :global(:scope[data-tone="danger"]:where([data-hn-ui-button])),
   :global(:scope[data-appearance="danger"]:where([data-hn-ui-button])) {
+    --_tone-highlight: var(--ui-danger-highlight, none);
+    --_tone-glow: var(--ui-danger-glow, 0 0 transparent);
     --_hue: var(--ui-danger);
     --_hue-hover: var(--ui-danger-hover);
     --_hue-active: var(--ui-danger-active, var(--ui-danger-hover));
@@ -1271,6 +1294,8 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   }
 
   :global(:scope[data-tone="success"]:where([data-hn-ui-button])) {
+    --_tone-highlight: var(--ui-success-highlight, none);
+    --_tone-glow: var(--ui-success-glow, 0 0 transparent);
     --_hue: var(--ui-success);
     --_hue-hover: var(--ui-success-hover);
     --_hue-active: var(--ui-success-active);
@@ -1279,6 +1304,8 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   }
 
   :global(:scope[data-tone="warning"]:where([data-hn-ui-button])) {
+    --_tone-highlight: var(--ui-warning-highlight, none);
+    --_tone-glow: var(--ui-warning-glow, 0 0 transparent);
     --_hue: var(--ui-warning);
     --_hue-hover: var(--ui-warning-hover);
     --_hue-active: var(--ui-warning-active);
@@ -1287,6 +1314,8 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   }
 
   :global(:scope[data-tone="info"]:where([data-hn-ui-button])) {
+    --_tone-highlight: var(--ui-info-highlight, none);
+    --_tone-glow: var(--ui-info-glow, 0 0 transparent);
     --_hue: var(--ui-info);
     --_hue-hover: var(--ui-info-hover);
     --_hue-active: var(--ui-info-active);

package/vue/UiCard.d.ts

@@ -23,8 +23,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     tone: {
         type: PropType<"neutral" | "accent" | "info" | "success" | "warning" | "danger" | null>;
     };
+    treatment: {
+        type: PropType<"standard" | "expressive" | null>;
+    };
     variant: {
-        type: PropType<"outlined" | "subtle" | "elevated" | "glass" | null>;
+        type: PropType<"outlined" | "subtle" | "elevated" | null>;
     };
     "\0htmlNextInputStatus": {
         type: PropType<InputBindings>;
@@ -42,8 +45,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     tone: {
         type: PropType<"neutral" | "accent" | "info" | "success" | "warning" | "danger" | null>;
     };
+    treatment: {
+        type: PropType<"standard" | "expressive" | null>;
+    };
     variant: {
-        type: PropType<"outlined" | "subtle" | "elevated" | "glass" | null>;
+        type: PropType<"outlined" | "subtle" | "elevated" | null>;
     };
     "\0htmlNextInputStatus": {
         type: PropType<InputBindings>;