@threadlabs/looma 0.29.16 → 0.29.18

package/package.json

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

package/styles/ui-icon-button.css

@@ -162,13 +162,13 @@
     }
 
     @media (hover: hover) and (pointer: fine) {
-      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:not(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:not(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="revealed"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
         border-color: transparent;
         background-color: transparent;
         box-shadow: none;
       }
 
-      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:not(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:not(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="revealed"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
         .content {
         opacity: 0;
         transform: scale(0.65);
@@ -176,7 +176,7 @@
       }
     }
 
-    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:is(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:is(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="revealed"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
       opacity: 0;
     }
 

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/vanilla/UiIconButton.d.ts

@@ -13,6 +13,7 @@ export interface UiIconButtonProps {
   loading?: boolean | null;
   matchButton?: boolean | null;
   pending?: boolean | null;
+  revealed?: boolean | null;
   round?: boolean | null;
   size?: "sm" | "md" | "lg" | null;
   tone?: "accent" | "neutral" | null;

package/vanilla/UiIconButton.js

@@ -8,7 +8,7 @@ const T1 = ["ui-spinner",["size","sm"]];
 const T2 = ["",[]];
 let P0, P1, P2;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-icon-button" };
-const D = { g: "ui-icon-button", props: { "anticipatory": { "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" }, "guide": { "required":false,"values":["dot","bar"],"default":"dot", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "label": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "matchButton": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "round": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "tone": { "required":false,"values":["accent","neutral"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["ghost","outline","solid"],"default":"ghost", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const D = { g: "ui-icon-button", props: { "anticipatory": { "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" }, "guide": { "required":false,"values":["dot","bar"],"default":"dot", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "label": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "matchButton": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "revealed": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "round": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "tone": { "required":false,"values":["accent","neutral"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["ghost","outline","solid"],"default":"ghost", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 const C = (host) => controller.default(host);
 
 export function createUiIconButton(options = {}, html) {
@@ -21,7 +21,7 @@ export function createUiIconButton(options = {}, html) {
   if (!element.hasAttribute("type")) element.setAttribute("type", "button");
   element.setAttribute("data-component", "ui-icon-button");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = [null, null, null, null, null, null, null, null, null, null, null];
+  const v = [null, null, null, null, null, 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);
@@ -67,8 +67,8 @@ export function createUiIconButton(options = {}, html) {
       const s4 = toAttribute(x4, "aria-busy");
       if (s4 !== r.v4) writeAttribute(r.n, "aria-busy", r.v4 = s4);
     }
-    if (c & 2037) {
-      const x5 = hostState(["tone","anticipatory","guide","variant","loading","pending","size","matchButton","round"], [v[9], v[0], v[2], v[10], v[4], v[6], v[8], v[5], v[7]]);
+    if (c & 4085) {
+      const x5 = hostState(["tone","anticipatory","guide","revealed","variant","loading","pending","size","matchButton","round"], [v[10], v[0], v[2], v[7], v[11], v[4], v[6], v[9], v[5], v[8]]);
       const s5 = x5;
       if (s5 !== r.v5) writeAttribute(r.n, "data-ui-icon-button-state", (r.v5 = s5) === "" ? null : s5);
     }

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/UiIconButton.d.ts

@@ -32,6 +32,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    revealed: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     round: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -77,6 +81,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    revealed: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     round: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -104,6 +112,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     loading: boolean | null;
     pending: boolean | null;
     anticipatory: boolean | null;
+    revealed: boolean | null;
     matchButton: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiIconButton.vue

@@ -72,6 +72,14 @@ const propValidityContract = {
       description: 'Deprecated alias for loading.',
       default: false,
     },
+    revealed: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'revealed' },
+      description:
+        'Keeps an anticipatory button visible while its context is active, such as a selected block or an open popup. It does not imply a pressed or expanded state.',
+      default: false,
+    },
     round: {
       type: { kind: 'terminal', name: 'boolean' },
       required: false,
@@ -115,6 +123,7 @@ const props = defineProps({
   loading: { type: null as unknown as PropType<boolean | null>, default: false },
   matchButton: { type: null as unknown as PropType<boolean | null>, default: false },
   pending: { type: null as unknown as PropType<boolean | null>, default: false },
+  revealed: { type: null as unknown as PropType<boolean | null>, default: false },
   round: { type: null as unknown as PropType<boolean | null>, default: false },
   size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null>, default: 'md' },
   tone: { type: null as unknown as PropType<'accent' | 'neutral' | null>, default: null },
@@ -131,6 +140,7 @@ const acceptedProps: Record<string, unknown> = {
   loading: false,
   matchButton: false,
   pending: false,
+  revealed: false,
   round: false,
   size: 'md',
   tone: null,
@@ -186,6 +196,13 @@ const checkedProps = computed(() => ({
     'pending',
     acceptedProps,
   ) as boolean,
+  revealed: checkedProp<boolean>(
+    props['revealed'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'revealed',
+    acceptedProps,
+  ) as boolean,
   round: checkedProp<boolean>(
     props['round'],
     { kind: 'terminal', name: 'boolean' },
@@ -271,6 +288,7 @@ const hostState = computed(() =>
     checkedProps.value.anticipatory && 'anticipatory',
     checkedProps.value.guide && 'guide',
     checkedProps.value.guide != null && `guide=${encodeURIComponent(checkedProps.value.guide)}`,
+    checkedProps.value.revealed && 'revealed',
     checkedProps.value.variant && 'variant',
     checkedProps.value.variant != null
     && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
@@ -308,6 +326,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     'loading',
     'matchButton',
     'pending',
+    'revealed',
     'round',
     'size',
     'tone',
@@ -338,6 +357,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     :data-ui-icon-button-prop-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
     :data-ui-icon-button-prop-match-button="reflectedProp('matchButton', 'match-button', checkedProps.matchButton, undefined, false)"
     :data-ui-icon-button-prop-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
+    :data-ui-icon-button-prop-revealed="reflectedProp('revealed', 'revealed', checkedProps.revealed, undefined, false)"
     :data-ui-icon-button-prop-round="reflectedProp('round', 'round', checkedProps.round, undefined, false)"
     :data-ui-icon-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-icon-button-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
@@ -534,13 +554,13 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   }
 
   @media (hover: hover) and (pointer: fine) {
-    :global(:scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible):where([data-hn-ui-icon-button])) {
+    :global(:scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="revealed"], :scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible):where([data-hn-ui-icon-button])) {
       border-color: transparent;
       background-color: transparent;
       box-shadow: none;
     }
 
-    :global(:scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
+    :global(:scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="revealed"], :scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
       .content:where([data-hn-ui-icon-button])) {
       opacity: 0;
       transform: scale(0.65);
@@ -548,7 +568,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     }
   }
 
-  :global(:scope[data-ui-icon-button-state~="anticipatory"]:is(:scope[data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible):where([data-hn-ui-icon-button])::before) {
+  :global(:scope[data-ui-icon-button-state~="anticipatory"]:is(:scope[data-ui-icon-button-state~="revealed"], :scope[data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible):where([data-hn-ui-icon-button])::before) {
     opacity: 0;
   }
 

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"])
 					]),