nuxt-ui-tools 1.25.0 → 1.26.0

package/dist/runtime/display/components/blocks/display-meter.vue

@@ -4,6 +4,7 @@ import { computed } from "vue";
 import { isPlainObject } from "../../../shared/utils/predicate";
 import { useDisplayAppUi } from "../../composables/use-display-config";
 import { useDisplayNumber } from "../../composables/use-display-number";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
 import { resolveDisplayClasses } from "../../utils/classes";
 import { displayContentText, isDisplayContentEmpty, resolveDisplayText } from "../../utils/content";
 import { meterShare, meterTone } from "../../utils/meter";
@@ -171,16 +172,16 @@ function partTone(partToneName) {
         </text>
       </svg>
       <div :class="classes.parts">
-        <div v-if="!isDisplayContentEmpty(label)" :class="classes.label">
+        <div v-if="!isDisplayContentEmpty(label)" v-reveal-truncated :class="classes.label">
           <DisplayRender :content="label" />
         </div>
         <div v-for="(part, index) in resolvedParts" :key="index" :class="partTone(part.tone)">
           <div :class="classes.header">
-            <span :class="classes.label">
+            <span v-reveal-truncated :class="classes.label">
               <UIcon v-if="part.icon" :name="part.icon" class="size-3.5" />
               <DisplayRender :content="part.label" />
             </span>
-            <span :class="classes.value"
+            <span v-reveal-truncated :class="classes.value"
               ><DisplayRender :content="part.valueLabel ?? format(part.value)"
             /></span>
           </div>
@@ -191,15 +192,15 @@ function partTone(partToneName) {
             />
           </div>
         </div>
-        <div v-if="!isDisplayContentEmpty(caption)" :class="classes.caption">
+        <div v-if="!isDisplayContentEmpty(caption)" v-reveal-truncated :class="classes.caption">
           <DisplayRender :content="caption" />
         </div>
       </div>
     </div>
     <template v-else-if="variant === 'scale'">
       <div :class="classes.header">
-        <span :class="classes.label"><DisplayRender :content="label" /></span>
-        <span v-if="!isDisplayContentEmpty(valueLabel)" :class="classes.value"
+        <span v-reveal-truncated :class="classes.label"><DisplayRender :content="label" /></span>
+        <span v-if="!isDisplayContentEmpty(valueLabel)" v-reveal-truncated :class="classes.value"
           ><DisplayRender :content="valueLabel"
         /></span>
       </div>
@@ -227,7 +228,7 @@ function partTone(partToneName) {
           {{ resolveDisplayText(level.caption) }}
         </span>
       </div>
-      <div v-if="!isDisplayContentEmpty(caption)" :class="classes.caption">
+      <div v-if="!isDisplayContentEmpty(caption)" v-reveal-truncated :class="classes.caption">
         <DisplayRender :content="caption" />
       </div>
     </template>
@@ -252,14 +253,14 @@ function partTone(partToneName) {
           :style="{ width: `${part.width}%` }"
         />
       </div>
-      <div v-if="!isDisplayContentEmpty(caption)" :class="classes.caption">
+      <div v-if="!isDisplayContentEmpty(caption)" v-reveal-truncated :class="classes.caption">
         <DisplayRender :content="caption" />
       </div>
     </template>
     <template v-else>
       <div v-if="!isDisplayContentEmpty(label) || variant === 'bar'" :class="classes.header">
-        <span :class="classes.label"><DisplayRender :content="label" /></span>
-        <span :class="classes.value"
+        <span v-reveal-truncated :class="classes.label"><DisplayRender :content="label" /></span>
+        <span v-reveal-truncated :class="classes.value"
           ><DisplayRender :content="variant === 'bar' ? headerValue : valueLabel"
         /></span>
       </div>
@@ -293,7 +294,7 @@ function partTone(partToneName) {
           /></b>
         </span>
       </div>
-      <div v-if="!isDisplayContentEmpty(caption)" :class="classes.caption">
+      <div v-if="!isDisplayContentEmpty(caption)" v-reveal-truncated :class="classes.caption">
         <DisplayRender :content="caption" />
       </div>
     </template>

package/dist/runtime/display/components/blocks/display-person.vue

@@ -4,8 +4,10 @@ import UIcon from "@nuxt/ui/components/Icon.vue";
 import ULink from "@nuxt/ui/components/Link.vue";
 import { computed } from "vue";
 import { useDisplayAppUi } from "../../composables/use-display-config";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
 import { resolveDisplayClasses } from "../../utils/classes";
 import { isDisplayContentEmpty, resolveDisplayText } from "../../utils/content";
+import { displayLinkAttrs } from "../../utils/links";
 import {
   DISPLAY_SURFACE_CLASSES,
   displayToneClass,
@@ -110,7 +112,7 @@ function avatarOf(entry) {
         :ui="{ fallback: 'font-semibold text-toned', root: 'bg-elevated' }"
       />
     </div>
-    <span v-if="!isDisplayContentEmpty(label)" :class="classes.label"
+    <span v-if="!isDisplayContentEmpty(label)" v-reveal-truncated :class="classes.label"
       ><DisplayRender :content="label"
     /></span>
   </div>
@@ -121,8 +123,12 @@ function avatarOf(entry) {
         :size="AVATAR_SIZES[variant === 'contact' ? 'contact' : 'user'][size]"
       />
       <div :class="classes.body">
-        <div :class="classes.name">{{ resolveDisplayText(self.name) }}</div>
-        <div v-if="!isDisplayContentEmpty(self.description)" :class="classes.description">
+        <div v-reveal-truncated :class="classes.name">{{ resolveDisplayText(self.name) }}</div>
+        <div
+          v-if="!isDisplayContentEmpty(self.description)"
+          v-reveal-truncated
+          :class="classes.description"
+        >
           <DisplayRender :content="self.description" />
         </div>
       </div>
@@ -133,12 +139,13 @@ function avatarOf(entry) {
         <UIcon v-if="contact.icon" :name="contact.icon" :class="classes.contactIcon" />
         <ULink
           v-if="contact.href"
-          :to="contact.href"
+          v-bind="displayLinkAttrs(contact.href, contact.target)"
+          v-reveal-truncated
           :class="[classes.contactValue, 'hover:text-highlighted']"
         >
           {{ contact.value }}
         </ULink>
-        <span v-else :class="classes.contactValue">{{ contact.value }}</span>
+        <span v-else v-reveal-truncated :class="classes.contactValue">{{ contact.value }}</span>
         <DisplayCopy v-if="contact.copy !== false" :value="contact.value" class="-my-1" />
       </div>
     </div>

package/dist/runtime/display/components/blocks/display-record.vue

@@ -4,8 +4,10 @@ import ULink from "@nuxt/ui/components/Link.vue";
 import { computed } from "vue";
 import { useDisplayAppUi } from "../../composables/use-display-config";
 import { useDisplayReveal } from "../../composables/use-display-reveal";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
 import { resolveDisplayClasses } from "../../utils/classes";
 import { isDisplayContentEmpty } from "../../utils/content";
+import { displayLinkAttrs } from "../../utils/links";
 import { DISPLAY_SURFACE_CLASSES } from "../../utils/tone";
 import DisplayChip from "../parts/display-chip.vue";
 import DisplayEmptyLine from "../parts/display-empty-line.vue";
@@ -47,6 +49,7 @@ const {
   trailingCaption: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
   chip: { type: Object, required: false },
   to: { type: String, required: false },
+  target: { type: [String, Object, null], required: false },
   onClick: { type: Function, required: false },
   max: { type: Number, required: false },
   step: { type: Number, required: false },
@@ -65,6 +68,7 @@ const classes = computed(
       header: "flex items-center gap-2 border-b border-default bg-elevated px-3 py-2 text-sm font-semibold text-toned",
       icon: "size-4 shrink-0 text-dimmed",
       item: "flex items-center gap-2.5 border-t border-muted px-3 py-2.5 first:border-t-0",
+      avatar: "",
       list: "",
       media: "",
       meta: "mt-0.5 flex min-w-0 items-center gap-1 text-xs text-muted",
@@ -81,7 +85,7 @@ const classes = computed(
   )
 );
 function linkProps(item) {
-  if (item.to) return { is: ULink, to: item.to };
+  if (item.to) return { is: ULink, ...displayLinkAttrs(item.to, item.target) };
   if (item.onClick) return { is: "button", type: "button", onClick: item.onClick };
   return { is: "div" };
 }
@@ -116,17 +120,54 @@ function linkProps(item) {
   item.to || item.onClick ? 'w-full text-start hover:bg-elevated' : ''
 ]"
       >
-        <DisplayRecordMedia :item="item" size="sm" />
+        <DisplayRecordMedia
+          :item="item"
+          size="sm"
+          :class="classes.media"
+          :avatar-class="classes.avatar"
+        />
         <div :class="classes.body">
-          <div :class="[classes.title, 'text-sm']"><DisplayRender :content="item.title" /></div>
-          <div v-if="!isDisplayContentEmpty(item.meta)" :class="classes.meta">
+          <div
+            v-if="!isDisplayContentEmpty(item.reference)"
+            v-reveal-truncated
+            :class="classes.reference"
+          >
+            <DisplayRender :content="item.reference" />
+          </div>
+          <div v-reveal-truncated :class="[classes.title, 'text-sm']">
+            <DisplayRender :content="item.title" />
+          </div>
+          <div v-if="!isDisplayContentEmpty(item.meta)" v-reveal-truncated :class="classes.meta">
             <UIcon v-if="item.metaIcon" :name="item.metaIcon" class="size-3 shrink-0" />
-            <span class="truncate"><DisplayRender :content="item.meta" /></span>
+            <span v-reveal-truncated class="truncate"><DisplayRender :content="item.meta" /></span>
+          </div>
+          <div
+            v-if="!isDisplayContentEmpty(item.description)"
+            v-reveal-truncated
+            :class="classes.description"
+          >
+            <DisplayRender :content="item.description" />
+          </div>
+          <div v-if="item.badges?.length" :class="classes.badges">
+            <DisplayChip
+              v-for="(badge, badgeIndex) in item.badges"
+              :key="badgeIndex"
+              :chip="badge"
+            />
           </div>
         </div>
         <DisplayChip v-if="item.chip" :chip="item.chip" />
-        <div v-else-if="!isDisplayContentEmpty(item.trailing)" :class="classes.trailing">
-          <div :class="classes.trailingValue"><DisplayRender :content="item.trailing" /></div>
+        <div v-if="!isDisplayContentEmpty(item.trailing)" :class="classes.trailing">
+          <div v-reveal-truncated :class="classes.trailingValue">
+            <DisplayRender :content="item.trailing" />
+          </div>
+          <div
+            v-if="!isDisplayContentEmpty(item.trailingCaption)"
+            v-reveal-truncated
+            :class="classes.trailingCaption"
+          >
+            <DisplayRender :content="item.trailingCaption" />
+          </div>
         </div>
       </component>
       <DisplayMore
@@ -147,18 +188,26 @@ function linkProps(item) {
   >
     <DisplayRecordMedia :item="single" banner :class="classes.media" />
     <div class="p-3.5">
-      <div v-if="!isDisplayContentEmpty(single.reference)" :class="classes.reference">
+      <div
+        v-if="!isDisplayContentEmpty(single.reference)"
+        v-reveal-truncated
+        :class="classes.reference"
+      >
         <DisplayRender :content="single.reference" />
       </div>
-      <div :class="classes.title"><DisplayRender :content="single.title" /></div>
-      <div v-if="!isDisplayContentEmpty(single.meta)" :class="classes.meta">
+      <div v-reveal-truncated :class="classes.title"><DisplayRender :content="single.title" /></div>
+      <div v-if="!isDisplayContentEmpty(single.meta)" v-reveal-truncated :class="classes.meta">
         <UIcon v-if="single.metaIcon" :name="single.metaIcon" class="size-3 shrink-0" />
-        <span class="truncate"><DisplayRender :content="single.meta" /></span>
+        <span v-reveal-truncated class="truncate"><DisplayRender :content="single.meta" /></span>
       </div>
       <div v-if="single.badges?.length" :class="classes.badges">
         <DisplayChip v-for="(badge, index) in single.badges" :key="index" :chip="badge" />
       </div>
-      <div v-if="!isDisplayContentEmpty(single.description)" :class="classes.description">
+      <div
+        v-if="!isDisplayContentEmpty(single.description)"
+        v-reveal-truncated
+        :class="classes.description"
+      >
         <DisplayRender :content="single.description" />
       </div>
     </div>
@@ -177,16 +226,21 @@ function linkProps(item) {
     <DisplayRecordMedia
       :item="single"
       :size="variant === 'compact' ? 'sm' : 'lg'"
+      :avatar-class="classes.avatar"
       :class="classes.media"
     />
     <div :class="classes.body">
-      <div v-if="!isDisplayContentEmpty(single.reference)" :class="classes.reference">
+      <div
+        v-if="!isDisplayContentEmpty(single.reference)"
+        v-reveal-truncated
+        :class="classes.reference"
+      >
         <DisplayRender :content="single.reference" />
       </div>
-      <div :class="classes.title"><DisplayRender :content="single.title" /></div>
-      <div v-if="!isDisplayContentEmpty(single.meta)" :class="classes.meta">
+      <div v-reveal-truncated :class="classes.title"><DisplayRender :content="single.title" /></div>
+      <div v-if="!isDisplayContentEmpty(single.meta)" v-reveal-truncated :class="classes.meta">
         <UIcon v-if="single.metaIcon" :name="single.metaIcon" class="size-3 shrink-0" />
-        <span class="truncate"><DisplayRender :content="single.meta" /></span>
+        <span v-reveal-truncated class="truncate"><DisplayRender :content="single.meta" /></span>
       </div>
       <div v-if="single.badges?.length && variant === 'row'" :class="classes.badges">
         <DisplayChip v-for="(badge, index) in single.badges" :key="index" :chip="badge" />
@@ -194,8 +248,14 @@ function linkProps(item) {
     </div>
     <DisplayChip v-if="single.chip" :chip="single.chip" />
     <div v-if="!isDisplayContentEmpty(single.trailing)" :class="classes.trailing">
-      <div :class="classes.trailingValue"><DisplayRender :content="single.trailing" /></div>
-      <div v-if="!isDisplayContentEmpty(single.trailingCaption)" :class="classes.trailingCaption">
+      <div v-reveal-truncated :class="classes.trailingValue">
+        <DisplayRender :content="single.trailing" />
+      </div>
+      <div
+        v-if="!isDisplayContentEmpty(single.trailingCaption)"
+        v-reveal-truncated
+        :class="classes.trailingCaption"
+      >
         <DisplayRender :content="single.trailingCaption" />
       </div>
     </div>

package/dist/runtime/display/components/blocks/display-stat.vue

@@ -3,6 +3,7 @@ import UIcon from "@nuxt/ui/components/Icon.vue";
 import { twMerge } from "tailwind-merge";
 import { computed } from "vue";
 import { useDisplayAppUi } from "../../composables/use-display-config";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
 import { resolveDisplayClasses } from "../../utils/classes";
 import { isDisplayContentEmpty, resolveDisplayText } from "../../utils/content";
 import {
@@ -117,11 +118,17 @@ const classes = computed(
         :key="index"
         :class="[classes.item, item.tone ? displayToneClass(item.tone) : '']"
       >
-        <div :class="classes.itemLabel"><DisplayRender :content="item.label" /></div>
+        <div v-reveal-truncated :class="classes.itemLabel">
+          <DisplayRender :content="item.label" />
+        </div>
         <div :class="twMerge(classes.itemValue, item.tone ? 'text-[var(--nut-tone-ink)]' : '')">
           <DisplayRender :content="item.value" />
         </div>
-        <div v-if="!isDisplayContentEmpty(item.caption)" :class="classes.itemCaption">
+        <div
+          v-if="!isDisplayContentEmpty(item.caption)"
+          v-reveal-truncated
+          :class="classes.itemCaption"
+        >
           <DisplayRender :content="item.caption" />
         </div>
       </div>
@@ -134,11 +141,11 @@ const classes = computed(
     :data-variant="variant"
   >
     <div :class="variant === 'trend' ? 'min-w-0' : 'contents'">
-      <div v-if="!isDisplayContentEmpty(label)" :class="classes.label">
+      <div v-if="!isDisplayContentEmpty(label)" v-reveal-truncated :class="classes.label">
         <DisplayRender :content="label" />
       </div>
       <div :class="variant === 'trend' ? 'flex items-center gap-2' : 'contents'">
-        <div :class="classes.value">
+        <div v-reveal-truncated :class="classes.value">
           <DisplayRender :content="value" />
           <span v-if="!isDisplayContentEmpty(unit)" :class="classes.unit"
             ><DisplayRender :content="unit"
@@ -152,7 +159,11 @@ const classes = computed(
         <UIcon v-if="status.icon" :name="status.icon" class="size-4 shrink-0" />
         <DisplayRender :content="status.text" />
       </div>
-      <div v-if="!isDisplayContentEmpty(caption) || chip" :class="classes.caption">
+      <div
+        v-if="!isDisplayContentEmpty(caption) || chip"
+        v-reveal-truncated
+        :class="classes.caption"
+      >
         <DisplayChip v-if="chip" :chip="chip" />
         <DisplayRender :content="caption" />
       </div>

package/dist/runtime/display/components/blocks/display-table.vue

@@ -3,6 +3,7 @@ import { computed } from "vue";
 import { isNumber } from "../../../shared/utils/predicate";
 import { useDisplayAppUi } from "../../composables/use-display-config";
 import { useDisplayReveal } from "../../composables/use-display-reveal";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
 import { resolveDisplayClasses } from "../../utils/classes";
 import { isDisplayContentEmpty } from "../../utils/content";
 import { DISPLAY_SURFACE_CLASSES } from "../../utils/tone";
@@ -84,6 +85,7 @@ function alignClass(column) {
               v-for="column in columns"
               :key="column.key"
               scope="col"
+              v-reveal-truncated
               :class="[classes.headCell, ...alignClass(column)]"
               :style="column.width ? { width: column.width } : void 0"
             >
@@ -96,6 +98,7 @@ function alignClass(column) {
             <td
               v-for="column in columns"
               :key="column.key"
+              v-reveal-truncated
               :class="[classes.cell, ...alignClass(column)]"
             >
               <DisplayRender :content="row[column.key]" />
@@ -123,6 +126,7 @@ function alignClass(column) {
     />
     <div
       v-if="!isDisplayContentEmpty(caption) || !isDisplayContentEmpty(note)"
+      v-reveal-truncated
       :class="classes.meta"
     >
       <span><DisplayRender :content="caption" /></span>

package/dist/runtime/display/components/blocks/display-text.vue

@@ -4,6 +4,7 @@ import { useResizeObserver } from "@vueuse/core";
 import { computed, ref, useTemplateRef } from "vue";
 import { useDisplayAppUi } from "../../composables/use-display-config";
 import { useDisplayLocale } from "../../composables/use-display-locale";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
 import { resolveDisplayClasses } from "../../utils/classes";
 import { isDisplayContentEmpty } from "../../utils/content";
 import { displayToneClass } from "../../utils/tone";
@@ -104,11 +105,16 @@ useResizeObserver(body, () => {
       :class="classes.header"
     >
       <UIcon v-if="icon" :name="icon" :class="classes.icon" />
-      <span :class="classes.title"><DisplayRender :content="title" /></span>
+      <span v-reveal-truncated :class="classes.title"><DisplayRender :content="title" /></span>
     </div>
     <UIcon v-if="appearance === 'caption' && icon" :name="icon" :class="classes.icon" />
     <div ref="body" :style="clampStyle">
-      <div v-for="(content, index) in blocks" :key="index" :class="classes.paragraph">
+      <div
+        v-for="(content, index) in blocks"
+        :key="index"
+        v-reveal-truncated
+        :class="classes.paragraph"
+      >
         <DisplayRender :content="content" />
       </div>
     </div>

package/dist/runtime/display/components/blocks/display-timeline.vue

@@ -6,6 +6,7 @@ import { useDisplayAppUi } from "../../composables/use-display-config";
 import { useDisplayIcons } from "../../composables/use-display-icons";
 import { useDisplayLocale } from "../../composables/use-display-locale";
 import { useDisplayReveal } from "../../composables/use-display-reveal";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
 import { resolveDisplayClasses } from "../../utils/classes";
 import { isDisplayContentEmpty, resolveDisplayText } from "../../utils/content";
 import { formatDisplayDate, toDisplayDate } from "../../utils/dates";
@@ -171,6 +172,7 @@ function actorAvatar(name) {
         <template v-else>{{ index + 1 }}</template>
       </span>
       <span
+        v-reveal-truncated
         :class="[classes.title, entry.resolvedState === 'upcoming' ? 'font-medium text-muted' : '']"
       >
         <DisplayRender :content="entry.title" />
@@ -198,12 +200,16 @@ function actorAvatar(name) {
           />
           <span :class="[classes.marker, dotClass(entry.resolvedState)]" aria-hidden="true" />
           <div :class="classes.body">
-            <div :class="[classes.title, entry.resolvedState === 'upcoming' ? 'text-muted' : '']">
+            <div
+              v-reveal-truncated
+              :class="[classes.title, entry.resolvedState === 'upcoming' ? 'text-muted' : '']"
+            >
               <span class="min-w-0"><DisplayRender :content="entry.title" /></span>
               <time v-if="entry.timeLabel" :class="classes.time">{{ entry.timeLabel }}</time>
             </div>
             <div
               v-if="entry.actor || !isDisplayContentEmpty(entry.description)"
+              v-reveal-truncated
               :class="classes.description"
             >
               <span v-if="entry.actor" :class="classes.actor">

package/dist/runtime/display/components/parts/display-actions.vue

@@ -2,6 +2,7 @@
 import UButton from "@nuxt/ui/components/Button.vue";
 import { computed } from "vue";
 import { resolveDisplayText } from "../../utils/content";
+import { isExternalLink } from "../../utils/links";
 const { actions, size = "sm" } = defineProps({
   actions: { type: Array, required: true },
   size: { type: null, required: false }
@@ -12,7 +13,9 @@ const buttons = computed(
     size,
     variant: "outline",
     ...action,
-    label: resolveDisplayText(label)
+    label: resolveDisplayText(label),
+    // A link out of the app opens in a new tab unless the action sets its own target.
+    target: action.target === void 0 && isExternalLink(action.to) ? "_blank" : action.target
   }))
 );
 </script>

package/dist/runtime/display/components/parts/display-chip.vue

@@ -1,6 +1,10 @@
 <script setup>
 import UBadge from "@nuxt/ui/components/Badge.vue";
+import { twMerge } from "tailwind-merge";
 import { computed } from "vue";
+import { isString } from "../../../shared/utils/predicate";
+import { useDisplayConfig } from "../../composables/use-display-config";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
 import { resolveDisplayText } from "../../utils/content";
 import { displayToneClass, isBuiltinTone } from "../../utils/tone";
 import DisplayRender from "./display-render";
@@ -20,6 +24,15 @@ const VARIANT_CLASSES = [
     "bg-[var(--nut-tone-soft)] text-[var(--nut-tone-ink)] ring ring-inset ring-[var(--nut-tone-line)]"
   ]
 ];
+const CHIP_SLOTS = [
+  "base",
+  "label",
+  "leadingIcon",
+  "leadingAvatar",
+  "leadingAvatarSize",
+  "trailingIcon"
+];
+const config = useDisplayConfig();
 const badge = computed(() => {
   const { label, tone, ...rest } = chip;
   const variant = rest.variant ?? "soft";
@@ -30,16 +43,29 @@ const badge = computed(() => {
     color: custom ? "neutral" : rest.color ?? tone ?? "neutral",
     label: content === void 0 ? resolveDisplayText(label) : void 0,
     size: rest.size ?? "sm",
+    ui: chipUi(rest.ui),
     variant
   };
 });
+function chipUi(own) {
+  const app = config.value.ui?.chip;
+  if (!app) return own;
+  const merged = { ...own };
+  for (const slot of CHIP_SLOTS) {
+    const appClass = app[slot];
+    const ownClass = own?.[slot];
+    if (appClass !== void 0 && (ownClass === void 0 || isString(ownClass)))
+      merged[slot] = twMerge(appClass, ownClass);
+  }
+  return merged;
+}
 function variantClass(variant) {
   return VARIANT_CLASSES.find(([name]) => name === variant)?.[1] ?? SOFT;
 }
 </script>
 
 <template>
-  <UBadge v-bind="badge" :data-tone="chip.tone">
+  <UBadge v-reveal-truncated v-bind="badge" :data-tone="chip.tone">
     <DisplayRender v-if="content !== void 0" :content="content" />
   </UBadge>
 </template>

package/dist/runtime/display/components/parts/display-fact-value.vue

@@ -3,6 +3,7 @@ import ULink from "@nuxt/ui/components/Link.vue";
 import { computed } from "vue";
 import { isString } from "../../../shared/utils/predicate";
 import { displayContentText, isDisplayContentEmpty } from "../../utils/content";
+import { displayLinkAttrs } from "../../utils/links";
 import DisplayChip from "./display-chip.vue";
 import DisplayCopy from "./display-copy.vue";
 import DisplayRender from "./display-render";
@@ -25,7 +26,7 @@ const copyValue = computed(
   <span v-else-if="isDisplayContentEmpty(fact.value)" class="font-medium text-dimmed">—</span>
   <ULink
     v-else-if="fact.to"
-    :to="fact.to"
+    v-bind="displayLinkAttrs(fact.to, fact.target)"
     class="underline decoration-[var(--ui-border-accented)] underline-offset-2 hover:decoration-current"
   >
     <DisplayRender :content="fact.value" />

package/dist/runtime/display/components/parts/display-record-media.d.vue.ts

@@ -3,6 +3,8 @@ type __VLS_Props = {
     item: DisplayRecordItem;
     size?: 'sm' | 'md' | 'lg';
     banner?: boolean;
+    /** Classes of the avatar, from the record's `ui.avatar`. */
+    avatarClass?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/display/components/parts/display-record-media.vue

@@ -6,11 +6,13 @@ import { displayToneClass } from "../../utils/tone";
 const {
   item,
   size = "md",
-  banner = false
+  banner = false,
+  avatarClass = void 0
 } = defineProps({
   item: { type: Object, required: true },
   size: { type: String, required: false },
-  banner: { type: Boolean, required: false }
+  banner: { type: Boolean, required: false },
+  avatarClass: { type: String, required: false }
 });
 const BOX = { lg: "size-13", md: "size-10", sm: "size-8" };
 const ICON = { lg: "size-6", md: "size-5", sm: "size-4" };
@@ -40,7 +42,7 @@ watch(
     v-else-if="item.avatar && !banner"
     v-bind="item.avatar"
     :size="item.avatar.size ?? AVATAR[size]"
-    class="shrink-0"
+    :class="['shrink-0', avatarClass]"
   />
   <span
     v-else-if="item.icon || item.image || banner"

package/dist/runtime/display/components/parts/display-record-media.vue.d.ts

@@ -3,6 +3,8 @@ type __VLS_Props = {
     item: DisplayRecordItem;
     size?: 'sm' | 'md' | 'lg';
     banner?: boolean;
+    /** Classes of the avatar, from the record's `ui.avatar`. */
+    avatarClass?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/display/directives/reveal-truncated.d.ts

@@ -0,0 +1,10 @@
+import type { Directive } from 'vue';
+/**
+ * Shows the full text of a clipped element on hover and focus. When the element or one of its
+ * descendants cuts its text (`truncate`, `line-clamp`, or any `ui` class that clips), the element
+ * gets a `title` with the whole text; the title goes away once nothing is cut. An authored `title`
+ * is kept.
+ */
+export declare const vRevealTruncated: Directive<HTMLElement>;
+/** Sets or clears the element's `title` from whether its text is cut right now. */
+export declare function revealTruncated(element: HTMLElement): void;

package/dist/runtime/display/directives/reveal-truncated.js

@@ -0,0 +1,31 @@
+const OWNED = "data-display-title";
+export const vRevealTruncated = {
+  beforeUnmount(element) {
+    element.removeEventListener("pointerenter", onReveal);
+    element.removeEventListener("focusin", onReveal);
+  },
+  mounted(element) {
+    element.addEventListener("pointerenter", onReveal);
+    element.addEventListener("focusin", onReveal);
+  }
+};
+function onReveal(event) {
+  if (event.currentTarget instanceof HTMLElement) revealTruncated(event.currentTarget);
+}
+export function revealTruncated(element) {
+  if (element.hasAttribute("title") && !element.hasAttribute(OWNED)) return;
+  const text = element.textContent?.replaceAll(/\s+/gu, " ").trim() ?? "";
+  if (text && [element, ...element.querySelectorAll("*")].some(isClipped)) {
+    element.setAttribute("title", text);
+    element.setAttribute(OWNED, "");
+    return;
+  }
+  if (!element.hasAttribute(OWNED)) return;
+  element.removeAttribute("title");
+  element.removeAttribute(OWNED);
+}
+function isClipped(element) {
+  const style = getComputedStyle(element);
+  const cuts = style.textOverflow === "ellipsis" || style.webkitLineClamp !== "" && style.webkitLineClamp !== "none" || style.overflowX === "hidden" || style.overflowY === "hidden";
+  return cuts && (element.scrollWidth > element.clientWidth + 1 || element.scrollHeight > element.clientHeight + 1);
+}

package/dist/runtime/display/types/blocks/diff.d.ts

@@ -1,5 +1,5 @@
 import type { DisplayBlockBase, DisplayChip, DisplayContent } from '../shared.js';
-export type DisplayDiffSlot = 'root' | 'title' | 'item' | 'label' | 'values' | 'before' | 'after' | 'arrow' | 'note' | 'unchanged' | 'table' | 'headCell' | 'cell';
+export type DisplayDiffSlot = 'root' | 'title' | 'item' | 'label' | 'values' | 'before' | 'after' | 'arrow' | 'note' | 'unchanged' | 'frame' | 'table' | 'headCell' | 'cell';
 export interface DisplayDiffItem {
     label: DisplayContent;
     before?: DisplayContent;