@threadlabs/looma 0.29.17 → 0.29.18

package/package.json

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

package/styles/ui-icon.css

@@ -28,6 +28,14 @@
       block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
     }
 
+    :scope:where([data-component~="ui-icon"])[data-ui-icon-state~="tone=secondary"] {
+      color: var(--ui-text-secondary);
+    }
+
+    :scope:where([data-component~="ui-icon"])[data-ui-icon-state~="tone=muted"] {
+      color: var(--ui-text-muted);
+    }
+
     svg {
       inline-size: 100%;
       block-size: 100%;

package/vanilla/UiEditorLinkCard.js

@@ -3,9 +3,9 @@ import { attachGeneratedController, buildTemplate, clearRegion, NONCONFORMING, r
 import * as controller from "../components/ui-editor-link-card/ui-editor-link-card.js";
 import "../styles/ui-editor-link-card.css";
 
-const T0 = ["",[],"\n    ",["ui-card",["variant","elevated","padding","xs","size","content"],["ui-cluster",["gap","xs","wrap","nowrap","role","group","aria-label","Link actions"],["ui-icon",[]],"\n        ",["ui-stack",["gap","none"],["ui-text",["as","strong","size","sm","weight","medium","font","sans","wrap","anywhere"],0],"\n          ",1],"\n        ",1,"\n        ",["ui-icon-button",["label","Edit link","variant","ghost","size","sm","data-link-action","edit"],["ui-icon",["name","pencil"]]],"\n        ",["ui-tooltip",[],"Edit link"],"\n        ",["ui-icon-button",["label","Remove link","variant","ghost","size","sm","data-link-action","remove"],["ui-icon",["name","unlink"]]],"\n        ",["ui-tooltip",[],"Remove link"]]],"\n  "];
-const T1 = ["ui-text",["as","small","size","xs","tone","secondary","font","sans"],0];
-const T2 = ["",[],"\n          ",["ui-button",["as","a","variant","ghost","tone","neutral","size","sm","target","_blank","rel","noopener noreferrer","aria-label","Open link"],["ui-cluster",["gap","xs","wrap","nowrap"],["ui-icon",["name","external-link"]],"Open link"]],"\n          ",["ui-tooltip",[],"Open link"],"\n        "];
+const T0 = ["",[],"\n    ",["ui-card",["variant","elevated","padding","xs","size","sm"],["ui-cluster",["gap","xs","wrap","nowrap","role","group","aria-label","Link actions"],["ui-icon",[]],"\n        ",["ui-stack",["gap","none","fill",""],["ui-text",["as","strong","size","sm","weight","medium","font","sans","truncate",""],0],"\n          ",1],"\n        ",1,"\n        ",["ui-icon-button",["label","Edit link","variant","ghost","size","sm","data-link-action","edit"],["ui-icon",["name","pencil"]]],"\n        ",["ui-tooltip",[],"Edit link"],"\n        ",["ui-icon-button",["label","Remove link","variant","ghost","size","sm","data-link-action","remove"],["ui-icon",["name","unlink"]]],"\n        ",["ui-tooltip",[],"Remove link"]]],"\n  "];
+const T1 = ["ui-text",["as","small","size","xs","tone","secondary","font","sans","truncate",""],0];
+const T2 = ["",[],"\n          ",["ui-button",["as","a","variant","ghost","tone","neutral","size","sm","target","_blank","rel","noopener noreferrer","aria-label","Open link"],["ui-icon",["name","external-link"]]],"\n          ",["ui-tooltip",[],"Open link"],"\n        "];
 let P0, P1, P2;
 const S = { n: ["base","resolved","shown"], t: ["s","?","?"], f: import.meta.url, g: "ui-editor-link-card", k: 1, d: { "edit": [detailCheck(checkRecord(checkUnknown)), true, true, false], "remove": [detailCheck(checkRecord(checkUnknown)), true, true, false] }, x: dispatchDeclared, r: readonlyView };
 const D = { g: "ui-editor-link-card", props: { "detail": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "href": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "label": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "openHref": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "targetLabel": { "required":false,"default":"Item", c: checkString, t: "string", j: 0, m: "s" } } };

package/vanilla/UiIcon.d.ts

@@ -7,6 +7,7 @@ export interface UiIconElement extends HTMLSpanElement {
 }
 export interface UiIconProps {
   name?: string | null;
+  tone?: "inherit" | "secondary" | "muted" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiIcon.js

@@ -1,5 +1,5 @@
 // Generated by HTML Next 1.0.0-alpha.57 for Vanilla DOM. Do not edit.
-import { attachGeneratedController, buildTemplate, clearRegion, readIndex, readMember, toAttribute, trackContainer, writeAttribute, computedCycle, IndexedList, acceptProps, manageProps, readonlyView, checkString } from "@nextwebwg/html-next/generated-runtime";
+import { attachGeneratedController, buildTemplate, clearRegion, readIndex, readMember, toAttribute, trackContainer, writeAttribute, computedCycle, IndexedList, formatOf, keywordFormat, hostState, acceptProps, manageProps, readonlyView, checkFormat, checkString } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-icon.css";
 
 const T0 = ["",[],"\n    ",["svg",["viewBox","0 0 24 24","fill","none","stroke","currentColor","stroke-width","2","stroke-linecap","round","stroke-linejoin","round","focusable","false"],2],"\n  "];
@@ -11,7 +11,7 @@ const T5 = ["line",[]];
 let P0, P1, P2, P3, P4, P5;
 const E = new Map();
 const S = { n: ["shapes"], t: ["?"], f: import.meta.url, g: "ui-icon", k: 0, r: readonlyView };
-const D = { g: "ui-icon", props: { "name": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" } } };
+const D = { g: "ui-icon", props: { "name": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "tone": { "required":false,"values":["inherit","secondary","muted"],"default":"inherit", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 
 export function createUiIcon(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -23,7 +23,7 @@ export function createUiIcon(options = {}, html) {
   if (!element.hasAttribute("aria-hidden")) element.setAttribute("aria-hidden", "true");
   element.setAttribute("data-component", "ui-icon");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = [undefined, null];
+  const v = [undefined, 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 = [];
@@ -156,10 +156,15 @@ export function createUiIcon(options = {}, html) {
     }
   };
   const p0 = (r, c, d) => {
+    if (c & 4) {
+      const x0 = hostState(["tone"], [v[2]]);
+      const s0 = x0;
+      if (s0 !== r.v0) writeAttribute(r.n, "data-ui-icon-state", (r.v0 = s0) === "" ? null : s0);
+    }
     if (c & 1073741826) r.L0.update(g(0), d, c);
   };
   const t0 = element.firstChild.nextSibling.firstChild;
-  const R = { L0: new IndexedList(t0, t0.nextSibling, m1, p1, undefined, "shape") };
+  const R = { n: element, v0: undefined, L0: new IndexedList(t0, t0.nextSibling, m1, p1, undefined, "shape") };
   const I = { B };
   attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, X, I);
   manageProps(I);

package/vue/UiBadge.d.ts

@@ -41,8 +41,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     size: "xs" | "sm" | "md" | "lg" | null;
-    shape: "circle" | "dot" | "tag" | "square" | "pill" | null;
     tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
+    shape: "circle" | "dot" | "tag" | "square" | "pill" | null;
     variant: "solid" | "subtle" | "outline" | "inverse" | "overlay" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiButton.d.ts

@@ -138,8 +138,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{}>, {
     type: "button" | "reset" | "submit" | null;
     size: "xs" | "sm" | "md" | "lg" | null;
-    shape: "pill" | "rounded" | null;
     tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
+    shape: "pill" | "rounded" | null;
     variant: "link" | "field" | "danger" | "solid" | "outline" | "ghost" | "card" | null;
     align: "center" | "start" | null;
     as: "a" | "button" | null;

package/vue/UiEditorLinkCard.vue

@@ -267,16 +267,17 @@ useComponentHost(() => import('../components/ui-editor-link-card/ui-editor-link-
     :data-ui-editor-link-card-prop-target-label="reflectedProp('targetLabel', 'target-label', checkedProps.targetLabel, undefined, false)"
     ref="root"
   >
-    <UiCard variant="elevated" padding="xs" size="content"><UiCluster
+    <UiCard variant="elevated" padding="xs" size="sm"><UiCluster
         gap="xs"
         wrap="nowrap"
         role="group"
         aria-label="Link actions"
       ><UiIcon :name="guarded" />{{ ' ' }}<UiStack
           gap="none"
+          :fill="true"
           :title="checkedProps.href"
           :aria-label="guardedBinding"
-        ><UiText as="strong" size="sm" weight="medium" font="sans" wrap="anywhere">{{
+        ><UiText as="strong" size="sm" weight="medium" font="sans" :truncate="true">{{
             text(shown)
           }}</UiText>{{ ' ' }}<UiText
             v-if="checkedProps.detail !== ''"
@@ -284,6 +285,7 @@ useComponentHost(() => import('../components/ui-editor-link-card/ui-editor-link-
             size="xs"
             tone="secondary"
             font="sans"
+            :truncate="true"
           >{{ checkedProps.detail }}</UiText></UiStack>{{ ' ' }}<template
           v-if="checkedProps.openHref !== ''"
         >{{ ' ' }}<UiButton
@@ -296,8 +298,7 @@ useComponentHost(() => import('../components/ui-editor-link-card/ui-editor-link-
             aria-label="Open link"
             :id="guardedBinding2"
             :href="checkedProps.openHref"
-          ><UiCluster gap="xs" wrap="nowrap"><UiIcon name="external-link" />Open
-              link</UiCluster></UiButton>{{ ' ' }}<UiTooltip :for="guardedBinding3"
+          ><UiIcon name="external-link" /></UiButton>{{ ' ' }}<UiTooltip :for="guardedBinding3"
           >Open link</UiTooltip>{{ ' ' }}</template>{{ ' ' }}<UiIconButton
           label="Edit link"
           variant="ghost"

package/vue/UiIcon.d.ts

@@ -4,13 +4,22 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<string | null>;
         default: string;
     };
+    tone: {
+        type: PropType<"inherit" | "secondary" | "muted" | null>;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     name: {
         type: PropType<string | null>;
         default: string;
     };
+    tone: {
+        type: PropType<"inherit" | "secondary" | "muted" | null>;
+        default: string;
+    };
 }>> & Readonly<{}>, {
     name: string | null;
+    tone: "secondary" | "inherit" | "muted" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/vue/UiIcon.vue

@@ -24,12 +24,25 @@ const propValidityContract = {
         'Which icon to draw, by its name in Looma\'s icon set (LOOMA_ICONS), such as "align-left". An unknown or empty name draws nothing. The icon is hidden from\n      assistive technology, so name the control it sits in.',
       default: '',
     },
+    tone: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'tone' },
+      description:
+        'Icon colour. inherit follows its control; secondary and muted keep a supporting icon quiet without a text wrapper.',
+      values: ['inherit', 'secondary', 'muted'],
+      default: 'inherit',
+    },
   },
 } as const
 const props = defineProps({
   name: { type: null as unknown as PropType<string | null>, default: '' },
+  tone: {
+    type: null as unknown as PropType<'inherit' | 'secondary' | 'muted' | null>,
+    default: 'inherit',
+  },
 })
-const acceptedProps: Record<string, unknown> = { name: '' }
+const acceptedProps: Record<string, unknown> = { name: '', tone: 'inherit' }
 const checkedProps = computed(() => ({
   name: checkedProp<string>(
     props['name'],
@@ -38,6 +51,13 @@ const checkedProps = computed(() => ({
     'name',
     acceptedProps,
   ) as string,
+  tone: checkedProp<'inherit' | 'secondary' | 'muted'>(
+    props['tone'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'tone',
+    acceptedProps,
+  ) as 'inherit' | 'secondary' | 'muted',
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -418,6 +438,14 @@ const shapes = cycleCheckedComputed(() =>
   }) as Record<string, any>)[checkedProps.value.name]
 )
 checkHydratedRoot('span', 'ui-icon')
+
+/** The values the styles' :host() prop and state rules test. */
+const hostState = computed(() =>
+  [
+    checkedProps.value.tone && 'tone',
+    checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
+  ].filter(Boolean).join(' ')
+)
 </script>
 
 <template>
@@ -428,6 +456,8 @@ checkHydratedRoot('span', 'ui-icon')
     data-hn
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-ui-icon-prop-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
+    :data-ui-icon-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-icon-state="hostState || undefined"
   ><svg
       viewBox="0 0 24 24"
       fill="none"
@@ -493,6 +523,14 @@ checkHydratedRoot('span', 'ui-icon')
     block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
   }
 
+  :global(:scope[data-ui-icon-state~="tone=secondary"]) {
+    color: var(--ui-text-secondary);
+  }
+
+  :global(:scope[data-ui-icon-state~="tone=muted"]) {
+    color: var(--ui-text-muted);
+  }
+
   :global(svg) {
     inline-size: 100%;
     block-size: 100%;

package/vue/UiText.d.ts

@@ -117,7 +117,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     size: "inherit" | "xs" | "sm" | "md" | "lg" | null;
     trim: boolean | null;
     font: "inherit" | "sans" | null;
-    tone: "default" | "secondary" | "info" | "accent" | "success" | "warning" | "danger" | "muted" | null;
+    tone: "default" | "secondary" | "muted" | "info" | "accent" | "success" | "warning" | "danger" | null;
     variant: "code" | "body" | "eyebrow" | null;
     align: "center" | "start" | null;
     as: "div" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "p" | "small" | "span" | "strong" | null;

package/vue/chunks/UiEditorLinkCard.js

@@ -255,7 +255,7 @@ var UiEditorLinkCard_default = /* @__PURE__ */ defineComponent({
 			}), [createVNode(UiCard_default, {
 				variant: "elevated",
 				padding: "xs",
-				size: "content"
+				size: "sm"
 			}, {
 				default: withCtx(() => [createVNode(UiCluster_default, {
 					gap: "xs",
@@ -265,9 +265,10 @@ var UiEditorLinkCard_default = /* @__PURE__ */ defineComponent({
 				}, {
 					default: withCtx(() => [
 						createVNode(UiIcon_default, { name: guarded.value }, null, 8, ["name"]),
-						_cache[8] || (_cache[8] = createTextVNode(toDisplayString(" "), -1)),
+						_cache[7] || (_cache[7] = createTextVNode(toDisplayString(" "), -1)),
 						createVNode(UiStack_default, {
 							gap: "none",
+							fill: true,
 							title: checkedProps.value.href,
 							"aria-label": guardedBinding.value
 						}, {
@@ -277,7 +278,7 @@ var UiEditorLinkCard_default = /* @__PURE__ */ defineComponent({
 									size: "sm",
 									weight: "medium",
 									font: "sans",
-									wrap: "anywhere"
+									truncate: true
 								}, {
 									default: withCtx(() => [createTextVNode(toDisplayString(unref(text)(unref(shown))), 1)]),
 									_: 1
@@ -288,7 +289,8 @@ var UiEditorLinkCard_default = /* @__PURE__ */ defineComponent({
 									as: "small",
 									size: "xs",
 									tone: "secondary",
-									font: "sans"
+									font: "sans",
+									truncate: true
 								}, {
 									default: withCtx(() => [createTextVNode(toDisplayString(checkedProps.value.detail), 1)]),
 									_: 1
@@ -296,9 +298,9 @@ var UiEditorLinkCard_default = /* @__PURE__ */ defineComponent({
 							]),
 							_: 1
 						}, 8, ["title", "aria-label"]),
-						_cache[9] || (_cache[9] = createTextVNode(toDisplayString(" "), -1)),
+						_cache[8] || (_cache[8] = createTextVNode(toDisplayString(" "), -1)),
 						checkedProps.value.openHref !== "" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-							_cache[3] || (_cache[3] = createTextVNode(toDisplayString(" "), -1)),
+							_cache[2] || (_cache[2] = createTextVNode(toDisplayString(" "), -1)),
 							createVNode(UiButton_default, {
 								as: "a",
 								variant: "ghost",
@@ -310,23 +312,17 @@ var UiEditorLinkCard_default = /* @__PURE__ */ defineComponent({
 								id: guardedBinding2.value,
 								href: checkedProps.value.openHref
 							}, {
-								default: withCtx(() => [createVNode(UiCluster_default, {
-									gap: "xs",
-									wrap: "nowrap"
-								}, {
-									default: withCtx(() => [createVNode(UiIcon_default, { name: "external-link" }), _cache[1] || (_cache[1] = createTextVNode("Open link", -1))]),
-									_: 1
-								})]),
+								default: withCtx(() => [createVNode(UiIcon_default, { name: "external-link" })]),
 								_: 1
 							}, 8, ["id", "href"]),
-							_cache[4] || (_cache[4] = createTextVNode(toDisplayString(" "), -1)),
+							_cache[3] || (_cache[3] = createTextVNode(toDisplayString(" "), -1)),
 							createVNode(UiTooltip_default, { for: guardedBinding3.value }, {
-								default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("Open link", -1)])]),
+								default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("Open link", -1)])]),
 								_: 1
 							}, 8, ["for"]),
-							_cache[5] || (_cache[5] = createTextVNode(toDisplayString(" "), -1))
+							_cache[4] || (_cache[4] = createTextVNode(toDisplayString(" "), -1))
 						], 64)) : createCommentVNode("v-if", true),
-						_cache[10] || (_cache[10] = createTextVNode(toDisplayString(" "), -1)),
+						_cache[9] || (_cache[9] = createTextVNode(toDisplayString(" "), -1)),
 						createVNode(UiIconButton_default, {
 							label: "Edit link",
 							variant: "ghost",
@@ -337,12 +333,12 @@ var UiEditorLinkCard_default = /* @__PURE__ */ defineComponent({
 							default: withCtx(() => [createVNode(UiIcon_default, { name: "pencil" })]),
 							_: 1
 						}, 8, ["id"]),
-						_cache[11] || (_cache[11] = createTextVNode(toDisplayString(" "), -1)),
+						_cache[10] || (_cache[10] = createTextVNode(toDisplayString(" "), -1)),
 						createVNode(UiTooltip_default, { for: guardedBinding5.value }, {
-							default: withCtx(() => [..._cache[6] || (_cache[6] = [createTextVNode("Edit link", -1)])]),
+							default: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode("Edit link", -1)])]),
 							_: 1
 						}, 8, ["for"]),
-						_cache[12] || (_cache[12] = createTextVNode(toDisplayString(" "), -1)),
+						_cache[11] || (_cache[11] = createTextVNode(toDisplayString(" "), -1)),
 						createVNode(UiIconButton_default, {
 							label: "Remove link",
 							variant: "ghost",
@@ -353,9 +349,9 @@ var UiEditorLinkCard_default = /* @__PURE__ */ defineComponent({
 							default: withCtx(() => [createVNode(UiIcon_default, { name: "unlink" })]),
 							_: 1
 						}, 8, ["id"]),
-						_cache[13] || (_cache[13] = createTextVNode(toDisplayString(" "), -1)),
+						_cache[12] || (_cache[12] = createTextVNode(toDisplayString(" "), -1)),
 						createVNode(UiTooltip_default, { for: guardedBinding7.value }, {
-							default: withCtx(() => [..._cache[7] || (_cache[7] = [createTextVNode("Remove link", -1)])]),
+							default: withCtx(() => [..._cache[6] || (_cache[6] = [createTextVNode("Remove link", -1)])]),
 							_: 1
 						}, 8, ["for"])
 					]),

package/vue/chunks/UiIcon.js

@@ -2,7 +2,11 @@ import { d as list, i as checkHydratedRoot, p as nativeAttrs, r as attribute, s
 import { a as vPropValidity, n as checkedProp } from "./props.js";
 import { Fragment, computed, createCommentVNode, createElementBlock, defineComponent, mergeProps, openBlock, renderList, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiIcon.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-icon-prop-name"];
+var _hoisted_1 = [
+	"data-ui-icon-prop-name",
+	"data-ui-icon-prop-tone",
+	"data-ui-icon-state"
+];
 var _hoisted_2 = {
 	viewBox: "0 0 24 24",
 	fill: "none",
@@ -37,27 +41,59 @@ var _hoisted_6 = [
 var UiIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiIcon",
-	props: { name: {
-		type: null,
-		default: ""
-	} },
+	props: {
+		name: {
+			type: null,
+			default: ""
+		},
+		tone: {
+			type: null,
+			default: "inherit"
+		}
+	},
 	setup(__props) {
-		const propValidityContract = { props: { name: {
-			type: {
-				kind: "terminal",
-				name: "string"
+		const propValidityContract = { props: {
+			name: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "name" },
+				description: "Which icon to draw, by its name in Looma's icon set (LOOMA_ICONS), such as \"align-left\". An unknown or empty name draws nothing. The icon is hidden from\n      assistive technology, so name the control it sits in.",
+				default: ""
 			},
-			required: false,
-			target: { attribute: "name" },
-			description: "Which icon to draw, by its name in Looma's icon set (LOOMA_ICONS), such as \"align-left\". An unknown or empty name draws nothing. The icon is hidden from\n      assistive technology, so name the control it sits in.",
-			default: ""
-		} } };
+			tone: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "tone" },
+				description: "Icon colour. inherit follows its control; secondary and muted keep a supporting icon quiet without a text wrapper.",
+				values: [
+					"inherit",
+					"secondary",
+					"muted"
+				],
+				default: "inherit"
+			}
+		} };
 		const props = __props;
-		const acceptedProps = { name: "" };
-		const checkedProps = computed(() => ({ name: checkedProp(props["name"], {
-			kind: "terminal",
-			name: "string"
-		}, false, "name", acceptedProps) }));
+		const acceptedProps = {
+			name: "",
+			tone: "inherit"
+		};
+		const checkedProps = computed(() => ({
+			name: checkedProp(props["name"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "name", acceptedProps),
+			tone: checkedProp(props["tone"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "tone", acceptedProps)
+		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
 			checkedProps.value;
@@ -1157,13 +1193,17 @@ var UiIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]
 		})[checkedProps.value.name]);
 		checkHydratedRoot("span", "ui-icon");
+		/** The values the styles' :host() prop and state rules test. */
+		const hostState = computed(() => [checkedProps.value.tone && "tone", checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("span", mergeProps({
 				class: "ui-icon",
 				"aria-hidden": "true"
 			}, unref(nativeAttrs)(_ctx.$attrs), {
 				"data-hn": "",
-				"data-ui-icon-prop-name": unref(reflectedProp)("name", "name", checkedProps.value.name, void 0, false)
+				"data-ui-icon-prop-name": unref(reflectedProp)("name", "name", checkedProps.value.name, void 0, false),
+				"data-ui-icon-prop-tone": unref(reflectedProp)("tone", "tone", checkedProps.value.tone, void 0, false),
+				"data-ui-icon-state": hostState.value || void 0
 			}), [(openBlock(), createElementBlock("svg", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(list)(unref(shapes)), (shape, index) => {
 				return openBlock(), createElementBlock("g", { key: index }, [
 					shape.tag === "path" ? (openBlock(), createElementBlock("path", {
@@ -1199,6 +1239,6 @@ var UiIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-effc7962"]]);
+}), [["__scopeId", "data-v-39bdd7d1"]]);
 //#endregion
 export { UiIcon_default as t };

package/vue/components.css

@@ -100,6 +100,12 @@
     inline-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
     block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
 }
+:scope[data-ui-icon-state~="tone=secondary"] {
+    color: var(--ui-text-secondary);
+}
+:scope[data-ui-icon-state~="tone=muted"] {
+    color: var(--ui-text-muted);
+}
 svg {
     inline-size: 100%;
     block-size: 100%;
@@ -11829,6 +11835,14 @@ html[data-ui-input-modality="touch"]
       block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
     }
 
+    :scope:where([data-component~="ui-icon"])[data-ui-icon-state~="tone=secondary"] {
+      color: var(--ui-text-secondary);
+    }
+
+    :scope:where([data-component~="ui-icon"])[data-ui-icon-state~="tone=muted"] {
+      color: var(--ui-text-muted);
+    }
+
     svg {
       inline-size: 100%;
       block-size: 100%;

package/vue/editor/index.js

@@ -5242,14 +5242,33 @@ var S$14 = {
 };
 var D$14 = {
 	g: "ui-icon",
-	props: { "name": {
-		"required": false,
-		"default": "",
-		c: checkString,
-		t: "string",
-		j: 0,
-		m: "s"
-	} }
+	props: {
+		"name": {
+			"required": false,
+			"default": "",
+			c: checkString,
+			t: "string",
+			j: 0,
+			m: "s"
+		},
+		"tone": {
+			"required": false,
+			"values": [
+				"inherit",
+				"secondary",
+				"muted"
+			],
+			"default": "inherit",
+			c: checkFormat("keyword", keywordFormat),
+			t: "keyword",
+			j: 0,
+			m: [
+				"p",
+				formatOf(keywordFormat),
+				false
+			]
+		}
+	}
 };
 function createUiIcon(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -5261,7 +5280,11 @@ function createUiIcon(options = {}, html) {
 	if (!element.hasAttribute("aria-hidden")) element.setAttribute("aria-hidden", "true");
 	element.setAttribute("data-component", "ui-icon");
 	element.append((P0$12 ??= buildTemplate(T0$12)).cloneNode(true));
-	const v = [void 0, null];
+	const v = [
+		void 0,
+		null,
+		null
+	];
 	const B = acceptProps(element, D$14, S$14.n, v, componentProps, [], html);
 	const X = {
 		e: 0,
@@ -6562,10 +6585,18 @@ function createUiIcon(options = {}, html) {
 		}
 	};
 	const p0 = (r, c, d) => {
+		if (c & 4) {
+			const s0 = hostState(["tone"], [v[2]]);
+			if (s0 !== r.v0) writeAttribute(r.n, "data-ui-icon-state", (r.v0 = s0) === "" ? null : s0);
+		}
 		if (c & 1073741826) r.L0.update(g(0), d, c);
 	};
 	const t0 = element.firstChild.nextSibling.firstChild;
-	const R = { L0: new IndexedList(t0, t0.nextSibling, m1, p1, void 0, "shape") };
+	const R = {
+		n: element,
+		v0: void 0,
+		L0: new IndexedList(t0, t0.nextSibling, m1, p1, void 0, "shape")
+	};
 	const I = { B };
 	attachGeneratedController(element, S$14, v, ((c, d) => p0(R, c, d)), void 0, X, I);
 	manageProps(I);
@@ -11161,10 +11192,9 @@ var tableOfContentsNodeView = ({ editor, node, getPos }) => {
 		size: "sm",
 		anticipatory: true,
 		attributes: { id },
-		children: [element(createUiText({
-			as: "span",
-			tone: "secondary",
-			children: [element(createUiIcon({ name: "settings" }))]
+		children: [element(createUiIcon({
+			name: "settings",
+			tone: "secondary"
 		}))]
 	}));
 	const revealSettings = () => updateComponentProps(settingsButton, { revealed: selected || hovered || settingsOpen });
@@ -14920,7 +14950,6 @@ var LoomaEditor = defineComponent({
 			element,
 			pluginKey: "looma-link-context-menu",
 			shouldShow: ({ editor: menuEditor, from, to }) => (from === to || Boolean(selectedLinkReference(menuEditor))) && isLinkActive(menuEditor) && linkState.value.surface !== "popover" && !formatting?.dismissed(menuEditor.state.selection) && Boolean(menuEditor.isFocused || linkState.value.surface === "context" || linkPopup?.element.contains(document.activeElement)) && !(props.toolbarMode === "contextual" && floatingFormattingMode() && formattingActive()),
-			maxWidth: () => Math.min(480, window.innerWidth - 24),
 			related: editorRoot,
 			onDismiss: (reason) => reason === "escape" ? dismissFormatting() : linkPopup?.hide()
 		}));