@threadlabs/looma 0.26.17 → 0.26.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.26.17",
+  "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/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/vue/UiMenu.d.ts

@@ -12,6 +12,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<string | null>;
         default: string;
     };
+    icons: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     inline: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -54,6 +58,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<string | null>;
         default: string;
     };
+    icons: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     inline: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -94,6 +102,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     placement: string | null;
     inline: boolean | null;
     density: "comfortable" | "compact" | null;
+    icons: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiMenu.vue

@@ -25,6 +25,14 @@ const propValidityContract = {
       description: 'ID of the control that toggles and anchors the menu.',
       default: '',
     },
+    icons: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'icons' },
+      description:
+        'Reserves a fixed icon column in every item, including items without an icon. Supply item icons through their icon slot.',
+      default: false,
+    },
     inline: {
       type: { kind: 'terminal', name: 'boolean' },
       required: false,
@@ -64,6 +72,7 @@ const props = defineProps({
     default: 'comfortable',
   },
   for: { type: null as unknown as PropType<string | null>, default: '' },
+  icons: { type: null as unknown as PropType<boolean | null>, default: false },
   inline: { type: null as unknown as PropType<boolean | null>, default: false },
   open: { type: null as unknown as PropType<boolean | null>, default: false },
   placement: { type: null as unknown as PropType<string | null>, default: 'bottom-start' },
@@ -72,6 +81,7 @@ const props = defineProps({
 const acceptedProps: Record<string, unknown> = {
   density: 'comfortable',
   for: '',
+  icons: false,
   inline: false,
   open: false,
   placement: 'bottom-start',
@@ -92,6 +102,13 @@ const checkedProps = computed(() => ({
     'for',
     acceptedProps,
   ) as string,
+  icons: checkedProp<boolean>(
+    props['icons'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'icons',
+    acceptedProps,
+  ) as boolean,
   inline: checkedProp<boolean>(
     props['inline'],
     { kind: 'terminal', name: 'boolean' },
@@ -214,6 +231,7 @@ const hostState = computed(() =>
     && `density=${encodeURIComponent(checkedProps.value.density)}`,
     checkedProps.value.size && 'size',
     checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
+    checkedProps.value.icons && 'icons',
     internalOpen.value && 'internalOpen',
     checkedProps.value.inline && 'inline',
   ].filter(Boolean).join(' ')
@@ -281,7 +299,7 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['density', 'for', 'inline', 'open', 'placement', 'size'],
+  propNames: ['density', 'for', 'icons', 'inline', 'open', 'placement', 'size'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   state: { internalOpen },
@@ -297,6 +315,7 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
     :data-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
+    :data-icons="reflectedProp('icons', 'icons', checkedProps.icons, undefined, false)"
     :data-inline="reflectedProp('inline', 'inline', checkedProps.inline, undefined, false)"
     :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
     :data-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
@@ -355,6 +374,10 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
   gap: 0;
 }
 
+[data-component~="ui-menu"][data-ui-menu-state~="icons"] {
+  --_ui-default-menu-icon-display: inline-flex;
+}
+
 [data-component~="ui-menu"] {
   --_ui-menu-surface: var(--ui-menu-surface);
   --_ui-menu-border: var(--ui-menu-border);
@@ -367,6 +390,7 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
   --_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/vue/UiMenuItem.d.ts

@@ -14,6 +14,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
         type: PropType<string | null>;
         default: string;
     };
+    tone: {
+        type: PropType<"neutral" | "danger" | null>;
+        default: string;
+    };
     type: {
         type: PropType<"action" | "checkbox" | "radio" | null>;
         default: string;
@@ -45,6 +49,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
         type: PropType<string | null>;
         default: string;
     };
+    tone: {
+        type: PropType<"neutral" | "danger" | null>;
+        default: string;
+    };
     type: {
         type: PropType<"action" | "checkbox" | "radio" | null>;
         default: string;
@@ -66,13 +74,18 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
 }>, {
     type: "checkbox" | "radio" | "action" | null;
     value: string | null;
+    tone: "neutral" | "danger" | null;
     disabled: boolean | null;
     href: string | null;
     checked: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    icon?: (props: {}) => any;
+} & {
     default?: (props: {}) => any;
 } & {
     shortcut?: (props: {}) => any;
+} & {
+    icon?: (props: {}) => any;
 } & {
     default?: (props: {}) => any;
 } & {

package/vue/UiMenuItem.vue

@@ -45,6 +45,14 @@ const propValidityContract = {
         'A destination makes an action item a real link, with native navigation and link context actions.',
       default: '',
     },
+    tone: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'tone' },
+      description: 'Danger identifies a destructive action without changing its behavior.',
+      values: ['neutral', 'danger'],
+      default: 'neutral',
+    },
     type: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -68,6 +76,7 @@ const props = defineProps({
   checked: { type: null as unknown as PropType<boolean | null>, default: false },
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   href: { type: null as unknown as PropType<string | null>, default: '' },
+  tone: { type: null as unknown as PropType<'neutral' | 'danger' | null>, default: 'neutral' },
   type: {
     type: null as unknown as PropType<'action' | 'checkbox' | 'radio' | null>,
     default: 'action',
@@ -78,6 +87,7 @@ const acceptedProps: Record<string, unknown> = {
   checked: false,
   disabled: false,
   href: '',
+  tone: 'neutral',
   type: 'action',
   value: '',
 }
@@ -103,6 +113,13 @@ const checkedProps = computed(() => ({
     'href',
     acceptedProps,
   ) as string,
+  tone: checkedProp<'neutral' | 'danger'>(
+    props['tone'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'tone',
+    acceptedProps,
+  ) as 'neutral' | 'danger',
   type: checkedProp<'action' | 'checkbox' | 'radio'>(
     props['type'],
     { kind: 'terminal', name: 'keyword' },
@@ -250,6 +267,8 @@ if (
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    checkedProps.value.tone && 'tone',
+    checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
     checkedProps.value.type && 'type',
     checkedProps.value.type != null && `type=${encodeURIComponent(checkedProps.value.type)}`,
   ].filter(Boolean).join(' ')
@@ -296,7 +315,7 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['checked', 'disabled', 'href', 'type', 'value'],
+  propNames: ['checked', 'disabled', 'href', 'tone', 'type', 'value'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   state: { internalChecked },
@@ -347,11 +366,13 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     :data-checked="reflectedProp('checked', 'checked', checkedProps.checked, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
+    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
     :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, true)"
     :data-ui-menu-item-state="hostState || undefined"
     ref="@html-next/root"
-  ><span class="label"><slot /></span>
+  ><span class="icon" aria-hidden="true"><slot name="icon" /></span>
+    <span class="label"><slot /></span>
     <span class="shortcut" aria-hidden="true"><slot name="shortcut" /></span></a>
   <div
     v-else
@@ -370,6 +391,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     :data-checked="reflectedProp('checked', 'checked', checkedProps.checked, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
+    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
     :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, true)"
     :data-ui-menu-item-state="hostState || undefined"
@@ -379,6 +401,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
         v-if="(checkedProps.type === 'checkbox' || checkedProps.type === 'radio') && internalChecked"
         name="check"
       /></span>
+    <span class="icon" aria-hidden="true"><slot name="icon" /></span>
     <span class="label"><slot /></span>
     <span class="shortcut" aria-hidden="true"><slot name="shortcut" /></span>
   </div>
@@ -444,6 +467,29 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     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;
+}
+
+.icon :slotted(svg) {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+[data-component~="ui-menu-item"][data-ui-menu-item-state~="tone=danger"] {
+  color: var(--ui-danger);
+}
+
 .label {
   display: flex;
   align-items: center;