@threadlabs/looma 0.26.16 → 0.26.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.26.16",
+  "version": "0.26.18",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-menu-item.css

@@ -45,6 +45,24 @@
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    /* A named icon has a fixed column; an icon-enabled menu reserves it on every row. */
+    .icon {
+      display: var(--_ui-default-menu-icon-display, none);
+      align-items: center;
+      justify-content: center;
+      flex: none;
+      inline-size: var(--ui-icon-size-sm);
+      block-size: var(--ui-icon-size-sm);
+    }
+
+    .icon:not(:empty) {
+      display: inline-flex;
+    }
+
+    :scope[data-ui-menu-item-state~="tone=danger"] {
+      color: var(--ui-danger);
+    }
+
     .label {
       display: flex;
       align-items: center;
@@ -144,6 +162,13 @@
 @scope ([data-component~="ui-menu-item"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
+    /* A named icon has a fixed column; an icon-enabled menu reserves it on every row. */
+
+    .icon :where([data-slotted], [data-slotted] *):is(svg) {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+
     /* A menu marks its chosen item with a check, as menus conventionally do; a radio circle reads
        as a form control. The empty slot keeps unchosen labels aligned with the chosen one. */
 

package/styles/ui-menu.css

@@ -46,6 +46,10 @@
       gap: 0;
     }
 
+    :scope[data-ui-menu-state~="icons"] {
+      --_ui-default-menu-icon-display: inline-flex;
+    }
+
     :scope {
       --_ui-menu-surface: var(--ui-menu-surface);
       --_ui-menu-border: var(--ui-menu-border);
@@ -58,6 +62,7 @@
       --_ui-default-menu-item-radius: initial;
       --_ui-default-menu-item-min-block-size: initial;
       --_ui-default-menu-indicator-size: initial;
+      --_ui-default-menu-icon-display: none;
       display: flex;
       flex-direction: column;
       box-sizing: border-box;

package/styles/ui-meter.css

@@ -122,6 +122,34 @@
       --_meter-gap: var(--ui-space-0-5);
     }
 
+    /* A categorical distribution uses flex ratios, avoiding rounded percentages and retaining
+       identical geometry before hydration. It has no progress mask or growing-value animation. */
+    :scope[data-ui-meter-state~="variant=distribution"] {
+      display: flex;
+      inline-size: 100%;
+      block-size: var(--ui-space-4);
+      gap: var(--ui-space-0-5);
+    }
+
+    :scope[data-ui-meter-state~="variant=distribution"][size="sm"] {
+      block-size: var(--ui-space-2);
+    }
+
+    .part {
+      flex-basis: 0;
+      min-inline-size: 0;
+      block-size: 100%;
+    }
+
+    @media (forced-colors: active) {
+      .part {
+        forced-color-adjust: none;
+        background: CanvasText !important;
+        outline: var(--ui-border-width) solid Canvas;
+        outline-offset: calc(-1 * var(--ui-border-width));
+      }
+    }
+
     /* Forced colours drop backgrounds: draw the fill in the text colour inside the outlined track. */
     @media (forced-colors: active) {
       .fill {
@@ -163,6 +191,12 @@
        attribute to every meter), so a continuous meter renders exactly as before, and the rules below
        turn it into a number. That caps it at 12, until attr() with a type reads any count in every engine. */
 
+    /* A categorical distribution uses flex ratios, avoiding rounded percentages and retaining
+       identical geometry before hydration. It has no progress mask or growing-value animation. */
+
+    @media (forced-colors: active) {
+    }
+
     /* Forced colours drop backgrounds: draw the fill in the text colour inside the outlined track. */
     @media (forced-colors: active) {
 

package/vanilla/UiMenu.d.ts

@@ -11,6 +11,7 @@ export interface UiMenuElement extends HTMLDivElement {
 export interface UiMenuProps {
   density?: "comfortable" | "compact" | null;
   for?: string | null;
+  icons?: boolean | null;
   inline?: boolean | null;
   open?: boolean | null;
   placement?: string | null;

package/vanilla/UiMenu.js

@@ -7,7 +7,7 @@ const T0 = ["",[],["div",["class","surface"],4]];
 const T1 = ["",[]];
 let P0, P1;
 const S = { n: ["internalOpen"], t: ["b"], f: import.meta.url, g: "ui-menu", d: { "select": [detailCheck(checkObject([["value", checkString, false], ["checked", checkBoolean, true], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "open": [detailCheck(checkObject([["open", checkBoolean, false], ["reason", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["action","programmatic"]}), false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "close": [detailCheck(checkObject([["open", checkBoolean, false], ["reason", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["action","programmatic","light-dismiss","escape"]}), false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false] }, x: dispatchDeclared };
-const D = { props: { "density": { "required":false,"values":["comfortable","compact"],"default":"comfortable", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "for": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "inline": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "open": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "placement": { "required":false,"default":"bottom-start", c: checkString, t: "string", j: 0, m: "s" }, "size": { "required":false,"values":["sm","md"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const D = { props: { "density": { "required":false,"values":["comfortable","compact"],"default":"comfortable", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "for": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "icons": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "inline": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "open": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "placement": { "required":false,"default":"bottom-start", c: checkString, t: "string", j: 0, m: "s" }, "size": { "required":false,"values":["sm","md"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 const C = (host) => controller.default(host);
 
 export function createUiMenu(options = {}, html) {
@@ -21,7 +21,7 @@ export function createUiMenu(options = {}, html) {
   if (!element.hasAttribute("aria-orientation")) element.setAttribute("aria-orientation", "vertical");
   element.setAttribute("data-component", "ui-menu");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = [false, null, null, null, null, null, null];
+  const v = [false, null, null, 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);
@@ -32,8 +32,8 @@ export function createUiMenu(options = {}, html) {
   const p1 = (r, c, d) => {
   };
   const p0 = (r, c, d) => {
-    if (c & 75) {
-      const x0 = hostState(["density","size","internalOpen","inline"], [v[1], v[6], v[0], v[3]]);
+    if (c & 155) {
+      const x0 = hostState(["density","size","icons","internalOpen","inline"], [v[1], v[7], v[3], v[0], v[4]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-menu-state", (r.v0 = s0) === "" ? null : s0);
     }

package/vanilla/UiMenuItem.d.ts

@@ -10,6 +10,7 @@ export interface UiMenuItemProps {
   checked?: boolean | null;
   disabled?: boolean | null;
   href?: string | null;
+  tone?: "neutral" | "danger" | null;
   type?: "action" | "checkbox" | "radio" | null;
   value?: string | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;

package/vanilla/UiMenuItem.js

@@ -3,25 +3,27 @@ import { attachGeneratedController, buildTemplate, clearRegion, NONCONFORMING, r
 import * as controller from "../components/ui-menu-item/ui-menu-item.js";
 import "../styles/ui-menu-item.css";
 
-const T0 = ["",[],["span",["class","label"],4],["span",["class","shortcut","aria-hidden","true"],4]];
+const T0 = ["",[],["span",["class","icon","aria-hidden","true"],4],["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 T3 = ["",[]];
+const T4 = ["",[],["span",["class","indicator","aria-hidden","true"],1],["span",["class","icon","aria-hidden","true"],4],["span",["class","label"],4],["span",["class","shortcut","aria-hidden","true"],4]];
+const T5 = ["ui-icon",["name","check"]];
 const T6 = ["",[]];
-let P0, P1, P2, P3, P4, P5, P6;
+const T7 = ["",[]];
+const T8 = ["",[]];
+let P0, P1, P2, P3, P4, P5, P6, P7, P8;
 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 A = [["a",{"role":"menuitem","tabindex":"-1"},[],"",[],["data-ui-menu-item-state","data-checked","data-disabled","data-href","data-tone","data-type","data-value","aria-disabled","data-value","href"]],["div",{"tabindex":"-1"},[],"",[],["data-ui-menu-item-state","data-checked","data-disabled","data-href","data-tone","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 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" }, "tone": { "required":false,"values":["neutral","danger"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "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 = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
-  const v = [false, null, null, null, null, null];
+  const v = [false, null, null, null, null, null, null];
   acceptProps(undefined, D, S.n, v, componentProps, [], html);
-  let a = ((truthy(v[3]) && (v[4] === "action")) ? 0 : 1);
+  let a = ((truthy(v[3]) && (v[5] === "action")) ? 0 : 1);
   let element;
   if (a === 0) {
     element = document.createElement("a");
@@ -58,13 +60,13 @@ export function createUiMenuItem(options = {}, html) {
   };
   const p2 = (r, c, d) => {
   };
-  const m4 = (d) => {
-    const n = (P4 ??= buildTemplate(T4)).cloneNode(true);
+  const m3 = (d) => {
+    const n = (P3 ??= buildTemplate(T3)).cloneNode(true);
     const r = { n };
-    p4(r, -1, d);
+    p3(r, -1, d);
     return r;
   };
-  const p4 = (r, c, d) => {
+  const p3 = (r, c, d) => {
   };
   const m5 = (d) => {
     const n = (P5 ??= buildTemplate(T5)).cloneNode(true);
@@ -82,12 +84,30 @@ export function createUiMenuItem(options = {}, html) {
   };
   const p6 = (r, c, d) => {
   };
+  const m7 = (d) => {
+    const n = (P7 ??= buildTemplate(T7)).cloneNode(true);
+    const r = { n };
+    p7(r, -1, d);
+    return r;
+  };
+  const p7 = (r, c, d) => {
+  };
+  const m8 = (d) => {
+    const n = (P8 ??= buildTemplate(T8)).cloneNode(true);
+    const r = { n };
+    p8(r, -1, d);
+    return r;
+  };
+  const p8 = (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 };
+    const t2 = t0.nextSibling;
+    const t3 = t2.firstChild;
+    const t4 = t2.nextSibling.firstChild;
+    const r = { n, v0: undefined, v1: undefined, v2: undefined, v3: undefined, a1: t1, e0: t1.nextSibling, b0: undefined, f0: undefined, a2: t3, e1: t3.nextSibling, b1: undefined, f1: undefined, a3: t4, e2: t4.nextSibling, b2: undefined, f2: undefined };
     p0(r, -1, d);
     return r;
   };
@@ -97,8 +117,8 @@ export function createUiMenuItem(options = {}, html) {
       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];
+    if (c & 64) {
+      const x1 = v[6];
       const s1 = toAttribute(x1, "data-value");
       if (s1 !== r.v1) writeAttribute(r.n, "data-value", r.v1 = s1);
     }
@@ -109,37 +129,42 @@ export function createUiMenuItem(options = {}, html) {
         if (s2 !== r.v2) writeUrlAttribute(r.n, "href", r.v2 = s2);
       }
     }
-    if (c & 16) {
-      const x3 = hostState(["type"], [v[4]]);
+    if (c & 48) {
+      const x3 = hostState(["tone","type"], [v[4], v[5]]);
       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 (r.f0 === undefined) { r.f0 = 1; const at = fillSlot(r.a1, r.e0, "icon", 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 (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 = m2(d); at.before(r.b1.n); } }
     else if (r.b1 !== undefined) p2(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 = m3(d); at.before(r.b2.n); } }
+    else if (r.b2 !== undefined) p3(r.b2, c, d);
   };
-  const m3 = (n, d) => {
-    n.append((P3 ??= buildTemplate(T3)).cloneNode(true));
+  const m4 = (n, d) => {
+    n.append((P4 ??= buildTemplate(T4)).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);
+    const t4 = t2.nextSibling;
+    const t5 = t4.firstChild;
+    const t6 = t4.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: t5, e2: t5.nextSibling, b2: undefined, f2: undefined, a4: t6, e3: t6.nextSibling, b3: undefined, f3: undefined };
+    p4(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 p4 = (r, c, d) => {
+    if (c & 1073741856) {
+      const x0 = readIndex({ "action": "menuitem", "checkbox": "menuitemcheckbox", "radio": "menuitemradio" }, v[5]);
       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]);
+    if (c & 1073741857) {
+      const x1 = readIndex({ "action": null, "checkbox": v[0], "radio": v[0] }, v[5]);
       const s1 = toAttribute(x1, "aria-checked");
       if (s1 !== r.v1) writeAttribute(r.n, "aria-checked", r.v1 = s1);
     }
@@ -148,40 +173,43 @@ export function createUiMenuItem(options = {}, html) {
       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];
+    if (c & 64) {
+      const x3 = v[6];
       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]]);
+    if (c & 48) {
+      const x4 = hostState(["tone","type"], [v[4], v[5]]);
       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 (c & 33) {
+      const t0 = (((v[5] === "checkbox") || (v[5] === "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); }
+          if (t0) { r.b0 = m5(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);
+      } else if (r.b0 !== undefined) p5(r.b0, c, d);
+    } else if (r.b0 !== undefined) p5(r.b0, c, d);
+    if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a2, r.e1, "icon", 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 = m6(d); at.before(r.b1.n); } }
+    else if (r.b1 !== undefined) p6(r.b1, c, d);
+    if (r.f2 === undefined) { r.f2 = 1; const at = fillSlot(r.a3, r.e2, "", 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 = m7(d); at.before(r.b2.n); } }
+    else if (r.b2 !== undefined) p7(r.b2, c, d);
+    if (r.f3 === undefined) { r.f3 = 1; const at = fillSlot(r.a4, r.e3, "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.b3 = m8(d); at.before(r.b3.n); } }
+    else if (r.b3 !== undefined) p8(r.b3, c, d);
   };
-  const M = [m0, m3], N = [p0, p3];
+  const M = [m0, m4], N = [p0, p4];
   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 (c & 40) {
+      const t = ((truthy(v[3]) && (v[5] === "action")) ? 0 : 1);
       if (t !== a) {
         dispose(R);
         for (const key in I.r) delete I.r[key];

package/vanilla/UiMeter.d.ts

@@ -8,11 +8,13 @@ export interface UiMeterElement extends HTMLSpanElement {
 export interface UiMeterProps {
   label?: string | null;
   max?: number | null;
+  parts?: readonly ({ readonly value: number; readonly color: string })[] | null;
   segments?: number | null;
   size?: "sm" | "md" | null;
   tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
   value?: number | null;
   valueText?: string | null;
+  variant?: "progress" | "distribution" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiMeter.js

@@ -1,11 +1,16 @@
 // 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 { attachGeneratedController, binaryValue, buildTemplate, clearRegion, formatCall, mathCall, NONCONFORMING, readIndex, readMember, readsChanged, rec, recordValue, textCall, toAttribute, toText, trackContainer, truthy, writeAttribute, computedCycle, formatOf, keywordFormat, hostState, acceptProps, manageProps, RangedIndexedList, readonlyView, checkFormat, checkList, checkNumber, checkObject, checkString } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-meter.css";
 
-const T0 = ["",[],["span",["class","fill"]]];
-let P0;
+const T0 = ["",[],1,1];
+const T1 = ["span",["class","fill"]];
+const T2 = ["",[],2];
+const T3 = ["",[],1];
+const T4 = ["span",["class","part","aria-hidden","true"]];
+let P0, P1, P2, P3, P4;
+const E = new Map();
 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" } } };
+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" }, "parts": { "required":false,"default":[], c: checkList(checkObject([["value", checkNumber, false], ["color", checkString, false]], false)), j: 1, m: ["l",["o",["value","n","color","s"]]] }, "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" }, "variant": { "required":false,"values":["progress","distribution"],"default":"progress", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 
 export function createUiMeter(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -14,15 +19,13 @@ export function createUiMeter(options = {}, html) {
     if (value === null || value === undefined || value === false) continue;
     element.setAttribute(name, value === true ? "" : String(value));
   }
-  if (!element.hasAttribute("role")) element.setAttribute("role", "meter");
-  if (!element.hasAttribute("aria-valuemin")) element.setAttribute("aria-valuemin", "0");
   element.setAttribute("data-component", "ui-meter");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = [undefined, undefined, null, null, null, null, null, null, null];
+  const v = [undefined, undefined, null, null, 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 K = [() => mathCall("clamp", [0, v[8], 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];
@@ -35,55 +38,150 @@ export function createUiMeter(options = {}, html) {
     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);
+  const m1 = (d) => {
+    const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
+    const r = { n, v0: undefined };
+    p1(r, -1, d);
+    return r;
+  };
+  const p1 = (r, c, d) => {
+    if (c & 1073742088) {
+      const x0 = textCall("concat", [g(1), "%"]);
+      if (x0 !== NONCONFORMING) {
+        const s0 = toText(x0);
+        if (s0 !== r.v0) r.n.style.setProperty("inline-size", r.v0 = s0);
+      }
     }
-    if (c & 136) {
-      const x1 = g(0);
+  };
+  const m2 = (d) => {
+    const n = (P2 ??= buildTemplate(T2)).cloneNode(true);
+    const t0 = n.firstChild;
+    const r = { n, L0: new RangedIndexedList(t0, t0.nextSibling, m3, p3, undefined, "part") };
+    p2(r, -1, d);
+    return r;
+  };
+  const p2 = (r, c, d) => {
+    if (c & 1073741840) r.L0.update(v[4], d, c);
+  };
+  const m3 = (o, j, l) => {
+    const n = (P3 ??= buildTemplate(T3)).cloneNode(true);
+    const t0 = n.firstChild;
+    const s = document.createComment("html-next:item-start"), t = document.createComment("html-next:item-end");
+    n.prepend(s);
+    n.append(t);
+    const r = { k: undefined, i: o, n: s, t, x: 0, y: 0, a0: t0, e0: t0.nextSibling, b0: undefined, q0: undefined };
+    p3(r, -1, E);
+    return r;
+  };
+  const p3 = (r, c, d) => {
+    const o = r.i;
+    if (c & 1073741824) {
+      const f0 = [];
+      const t0 = (truthy(binaryValue(">", rec(f0, readMember(rec(f0, o), "value")), 0)) && (binaryValue("-", rec(f0, readMember(rec(f0, o), "value")), rec(f0, readMember(rec(f0, o), "value"))) === 0));
+      if (c === -1 || readsChanged(r.q0, f0)) {
+        r.q0 = f0;
+        {
+          r.b0 = undefined;
+          clearRegion(r.a0, r.e0);
+          if (t0) { r.b0 = m4(d, undefined, r); 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);
+  };
+  const m4 = (d, o, u) => {
+    const n = (P4 ??= buildTemplate(T4)).cloneNode(true);
+    const r = { n, u, w: 0, v0: undefined, v1: undefined };
+    p4(r, -1, d);
+    return r;
+  };
+  const p4 = (r, c, d) => {
+    if (c & 1073741824) {
+      r.w = 0;
+      const x0 = trackContainer(r, readMember(r.u.i, "value"));
+      const s0 = toText(x0);
+      if (s0 !== r.v0) r.n.style.setProperty("flex-grow", r.v0 = s0);
+      const x1 = trackContainer(r, readMember(r.u.i, "color"));
+      const s1 = toText(x1);
+      if (s1 !== r.v1) r.n.style.setProperty("background-color", r.v1 = s1);
+    }
+  };
+  const p0 = (r, c, d) => {
+    if (c & 1073742848) {
+      const x0 = readIndex({ "true": "img", "false": "meter" }, textCall("concat", [(v[10] === "distribution")]));
+      if (x0 !== NONCONFORMING) {
+        const s0 = toAttribute(x0, "role");
+        if (s0 !== r.v0) writeAttribute(r.n, "role", r.v0 = s0);
+      }
+      const x1 = readIndex({ "true": null, "false": 0 }, textCall("concat", [(v[10] === "distribution")]));
       if (x1 !== NONCONFORMING) {
-        const s1 = toAttribute(x1, "aria-valuenow");
-        if (s1 !== r.v1) writeAttribute(r.n, "aria-valuenow", r.v1 = s1);
+        const s1 = toAttribute(x1, "aria-valuemin");
+        if (s1 !== r.v1) writeAttribute(r.n, "aria-valuemin", 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 (c & 1073742856) {
+      const x2 = readIndex({ "true": null, "false": v[3] }, textCall("concat", [(v[10] === "distribution")]));
       if (x2 !== NONCONFORMING) {
-        const s2 = toAttribute(x2, "aria-valuetext");
-        if (s2 !== r.v2) writeAttribute(r.n, "aria-valuetext", r.v2 = s2);
+        const s2 = toAttribute(x2, "aria-valuemax");
+        if (s2 !== r.v2) writeAttribute(r.n, "aria-valuemax", r.v2 = s2);
       }
     }
-    if (c & 1073741828) {
-      const x3 = readIndex({ "true": v[2], "false": null }, textCall("concat", [(v[2] !== "")]));
+    if (c & 1073743112) {
+      const x3 = readIndex(recordValue(["true","false"], [null, g(0)]), textCall("concat", [(v[10] === "distribution")]));
       if (x3 !== NONCONFORMING) {
-        const s3 = toAttribute(x3, "aria-label");
-        if (s3 !== r.v3) writeAttribute(r.n, "aria-label", r.v3 = s3);
+        const s3 = toAttribute(x3, "aria-valuenow");
+        if (s3 !== r.v3) writeAttribute(r.n, "aria-valuenow", r.v3 = s3);
       }
     }
-    if (c & 1073741840) {
-      const x4 = readIndex({ "true": v[4], "false": null }, textCall("concat", [binaryValue(">", v[4], 1)]));
+    if (c & 1073743624) {
+      const x4 = readIndex(recordValue(["true","false"], [null, readIndex(recordValue(["true","false"], [v[9], formatCall("format", [binaryValue("/", g(1), 100), "percent", { "maximumFractionDigits": 0 }], "number")]), textCall("concat", [(v[9] !== "")]))]), textCall("concat", [(v[10] === "distribution")]));
       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);
+        const s4 = toAttribute(x4, "aria-valuetext");
+        if (s4 !== r.v4) writeAttribute(r.n, "aria-valuetext", r.v4 = s4);
       }
     }
-    if (c & 1073741960) {
-      const x5 = textCall("concat", [g(1), "%"]);
+    if (c & 1073743364) {
+      const x5 = readIndex(recordValue(["true","false"], [readIndex(recordValue(["true","false"], [textCall("concat", [v[2], ": ", v[9]]), v[2]]), textCall("concat", [((v[10] === "distribution") && (v[9] !== ""))])), null]), textCall("concat", [(v[2] !== "")]));
       if (x5 !== NONCONFORMING) {
-        const s5 = toText(x5);
-        if (s5 !== r.v5) r.a1.style.setProperty("inline-size", r.v5 = s5);
+        const s5 = toAttribute(x5, "aria-label");
+        if (s5 !== r.v5) writeAttribute(r.n, "aria-label", r.v5 = s5);
+      }
+    }
+    if (c & 1073742880) {
+      const x6 = readIndex({ "true": v[5], "false": null }, textCall("concat", [((v[10] === "progress") && truthy(binaryValue(">", v[5], 1)))]));
+      if (x6 !== NONCONFORMING) {
+        const s6 = toAttribute(x6, "data-ui-meter-segments");
+        if (s6 !== r.v6) writeAttribute(r.n, "data-ui-meter-segments", r.v6 = s6);
       }
     }
-    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);
+    if (c & 1216) {
+      const x7 = hostState(["size","tone","variant"], [v[6], v[7], v[10]]);
+      const s7 = x7;
+      if (s7 !== r.v7) writeAttribute(r.n, "data-ui-meter-state", (r.v7 = s7) === "" ? null : s7);
     }
+    if (c & 1024) {
+      const t0 = (v[10] === "progress");
+      if (true) {
+        {
+          r.b0 = undefined;
+          clearRegion(r.a1, r.e0);
+          if (t0) { r.b0 = m1(d); r.e0.before(r.b0.n); }
+        }
+      } else if (r.b0 !== undefined) p1(r.b0, c, d);
+    } else if (r.b0 !== undefined) p1(r.b0, c, d);
+    if (c & 1024) {
+      const t1 = (v[10] === "distribution");
+      if (true) {
+        {
+          r.b1 = undefined;
+          clearRegion(r.a2, r.e1);
+          if (t1) { r.b1 = m2(d); r.e1.before(r.b1.n); }
+        }
+      } else if (r.b1 !== undefined) p2(r.b1, c, d);
+    } else if (r.b1 !== undefined) p2(r.b1, c, d);
   };
   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 t1 = t0.nextSibling.nextSibling;
+  const R = { n: element, v0: undefined, v1: undefined, v2: undefined, v3: undefined, v4: undefined, v5: undefined, v6: undefined, v7: undefined, a1: t0, e0: t0.nextSibling, b0: undefined, a2: t1, e1: t1.nextSibling, b1: undefined };
   const I = { B };
   attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, X, I);
   manageProps(I);