nuxt-ui-tools 1.24.0 → 1.25.0

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

@@ -0,0 +1,142 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+import { useDisplayAppUi } from "../../composables/use-display-config";
+import { useDisplayIcons } from "../../composables/use-display-icons";
+import { useDisplayLocale } from "../../composables/use-display-locale";
+import { resolveDisplayClasses } from "../../utils/classes";
+import { isDisplayContentEmpty } from "../../utils/content";
+import DisplayChip from "../parts/display-chip.vue";
+import DisplayRender from "../parts/display-render";
+import DisplaySkeleton from "../parts/display-skeleton.vue";
+const {
+  variant = "inline",
+  title = void 0,
+  columns = void 0,
+  items,
+  showUnchanged = false,
+  loading = false,
+  ui = void 0
+} = defineProps({
+  variant: { type: String, required: false },
+  title: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  columns: { type: Array, required: false },
+  items: { type: Array, required: true },
+  showUnchanged: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const { t } = useDisplayLocale();
+const icons = useDisplayIcons();
+const appUi = useDisplayAppUi("diff");
+const inlineItems = computed(
+  () => showUnchanged ? items : items.filter((item) => item.changed !== false)
+);
+const headings = computed(
+  () => columns ?? [t("display.field"), t("display.before"), t("display.after")]
+);
+const classes = computed(
+  () => resolveDisplayClasses(
+    {
+      after: "rounded-[4px] bg-[var(--nut-display-success-soft)] px-1.5 py-px font-semibold text-[var(--nut-display-success-ink)]",
+      arrow: "size-3.5 shrink-0 text-dimmed",
+      before: "rounded-[4px] bg-[var(--nut-display-error-soft)] px-1.5 py-px text-[var(--nut-display-error-ink)] line-through decoration-[color-mix(in_oklab,currentColor_45%,transparent)]",
+      cell: "border-t border-muted px-3 py-2 align-middle",
+      headCell: "bg-elevated px-3 py-2 text-start text-[11px] font-bold tracking-[0.07em] text-muted uppercase",
+      item: "",
+      label: "mb-1 flex items-center gap-2 text-xs text-muted",
+      note: "",
+      root: "flex min-w-0 flex-col gap-2.5",
+      table: "w-full border-collapse text-sm",
+      title: "text-sm font-semibold text-toned",
+      unchanged: "text-muted",
+      values: "flex flex-wrap items-center gap-1.5 text-sm"
+    },
+    appUi.value,
+    ui
+  )
+);
+</script>
+
+<template>
+  <DisplaySkeleton
+    v-if="loading"
+    :layout="variant === 'columns' ? 'rows' : 'lines'"
+    :count="Math.max(items.length, 2)"
+  />
+  <div v-else :class="classes.root" data-display="diff" :data-variant="variant">
+    <div v-if="!isDisplayContentEmpty(title)" :class="classes.title">
+      <DisplayRender :content="title" />
+    </div>
+    <template v-if="variant === 'inline'">
+      <div v-for="(item, index) in inlineItems" :key="index" :class="classes.item">
+        <div :class="classes.label">
+          <DisplayRender :content="item.label" />
+          <DisplayChip v-if="item.note" :chip="item.note" :class="classes.note" />
+        </div>
+        <div
+          v-if="item.changed === false"
+          :class="[classes.values, classes.unchanged]"
+          data-unchanged
+        >
+          <DisplayRender :content="isDisplayContentEmpty(item.after) ? item.before : item.after" />
+        </div>
+        <div v-else :class="classes.values">
+          <span v-if="!isDisplayContentEmpty(item.before)" :class="classes.before"
+            ><DisplayRender :content="item.before"
+          /></span>
+          <UIcon
+            v-if="!isDisplayContentEmpty(item.before) && !isDisplayContentEmpty(item.after)"
+            :name="icons.arrowRight"
+            :class="classes.arrow"
+          />
+          <span v-if="!isDisplayContentEmpty(item.after)" :class="classes.after"
+            ><DisplayRender :content="item.after"
+          /></span>
+        </div>
+      </div>
+    </template>
+    <div v-else class="overflow-hidden rounded-[var(--nut-display-radius)] border border-default">
+      <table :class="classes.table">
+        <thead>
+          <tr>
+            <th
+              v-for="(heading, index) in headings"
+              :key="index"
+              scope="col"
+              :class="classes.headCell"
+            >
+              <DisplayRender :content="heading" />
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(item, index) in items"
+            :key="index"
+            :class="item.changed === false ? 'text-dimmed' : ''"
+            :data-changed="item.changed !== false"
+          >
+            <td :class="[classes.cell, item.changed === false ? '' : 'text-toned']">
+              <span class="inline-flex flex-wrap items-center gap-1.5">
+                <DisplayRender :content="item.label" />
+                <DisplayChip v-if="item.note" :chip="item.note" :class="classes.note" />
+              </span>
+            </td>
+            <td :class="[classes.cell, item.changed === false ? '' : 'text-muted']">
+              <DisplayRender :content="item.before" />
+            </td>
+            <td
+              :class="[
+  classes.cell,
+  item.changed === false ? '' : 'font-semibold text-highlighted'
+]"
+            >
+              <DisplayRender :content="item.after" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>

package/dist/runtime/display/components/blocks/display-diff.vue.d.ts

@@ -0,0 +1,4 @@
+import type { DisplayDiffProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayDiffProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayDiffProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/blocks/display-empty.d.vue.ts

@@ -0,0 +1,4 @@
+import type { DisplayEmptyProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayEmptyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayEmptyProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,74 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+import { useDisplayAppUi } from "../../composables/use-display-config";
+import { useDisplayIcons } from "../../composables/use-display-icons";
+import { useDisplayLocale } from "../../composables/use-display-locale";
+import { resolveDisplayClasses } from "../../utils/classes";
+import { isDisplayContentEmpty } from "../../utils/content";
+import { displayToneClass } from "../../utils/tone";
+import DisplayActions from "../parts/display-actions.vue";
+import DisplayRender from "../parts/display-render";
+import DisplaySkeleton from "../parts/display-skeleton.vue";
+const {
+  variant = "dashed",
+  icon = void 0,
+  title = void 0,
+  description = void 0,
+  actions = void 0,
+  tone = "neutral",
+  loading = false,
+  ui = void 0
+} = defineProps({
+  variant: { type: String, required: false },
+  icon: { type: String, required: false },
+  title: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  description: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  actions: { type: Array, required: false },
+  tone: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const { t } = useDisplayLocale();
+const icons = useDisplayIcons();
+const appUi = useDisplayAppUi("empty");
+const classes = computed(
+  () => resolveDisplayClasses(
+    variant === "plain" ? {
+      actions: "ms-auto flex gap-1.5",
+      description: "text-dimmed",
+      icon: "size-4 shrink-0",
+      root: "flex items-center gap-2 py-1.5 text-sm text-dimmed",
+      title: ""
+    } : {
+      actions: "mt-3 flex flex-wrap justify-center gap-2",
+      description: "max-w-sm text-sm text-muted",
+      icon: "mb-2 grid size-10 place-items-center rounded-[var(--nut-display-radius)] bg-[var(--nut-tone-soft)] text-[var(--nut-tone-ink)]",
+      root: "flex flex-col items-center gap-1 rounded-[var(--nut-display-radius)] border-[1.5px] border-dashed border-accented px-5 py-6 text-center",
+      title: "text-sm font-semibold text-highlighted"
+    },
+    appUi.value,
+    ui
+  )
+);
+</script>
+
+<template>
+  <DisplaySkeleton v-if="loading" layout="block" />
+  <div
+    v-else
+    :class="[classes.root, displayToneClass(tone)]"
+    data-display="empty"
+    :data-variant="variant"
+  >
+    <UIcon v-if="variant === 'plain'" :name="icon ?? icons.empty" :class="classes.icon" />
+    <span v-else :class="classes.icon"><UIcon :name="icon ?? icons.empty" class="size-5" /></span>
+    <div :class="classes.title">
+      <DisplayRender :content="title ?? (variant === 'plain' ? void 0 : t('display.empty'))" />
+    </div>
+    <div v-if="!isDisplayContentEmpty(description)" :class="classes.description">
+      <DisplayRender :content="description" />
+    </div>
+    <DisplayActions v-if="actions?.length" :actions="actions" :class="classes.actions" />
+  </div>
+</template>

package/dist/runtime/display/components/blocks/display-empty.vue.d.ts

@@ -0,0 +1,4 @@
+import type { DisplayEmptyProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayEmptyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayEmptyProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/blocks/display-facts.d.vue.ts

@@ -0,0 +1,4 @@
+import type { DisplayFactsProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayFactsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayFactsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,180 @@
+<script setup>
+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 { resolveDisplayClasses } from "../../utils/classes";
+import { isDisplayContentEmpty } from "../../utils/content";
+import {
+  DISPLAY_SURFACE_CLASSES,
+  DISPLAY_SURFACE_PADDING,
+  displayToneClass
+} from "../../utils/tone";
+import DisplayActions from "../parts/display-actions.vue";
+import DisplayEmptyLine from "../parts/display-empty-line.vue";
+import DisplayFactValue from "../parts/display-fact-value.vue";
+import DisplayRender from "../parts/display-render";
+import DisplaySkeleton from "../parts/display-skeleton.vue";
+const {
+  layout = "ledger",
+  surface = void 0,
+  items = void 0,
+  groups = void 0,
+  columns = void 0,
+  labelWidth = "8rem",
+  empty = void 0,
+  actions = void 0,
+  loading = false,
+  ui = void 0
+} = defineProps({
+  layout: { type: String, required: false },
+  surface: { type: String, required: false },
+  items: { type: Array, required: false },
+  groups: { type: Array, required: false },
+  columns: { type: Number, required: false },
+  labelWidth: { type: String, required: false },
+  empty: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  actions: { type: Array, required: false },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const CAPTION = "text-[11px] font-bold tracking-[0.07em] text-muted uppercase";
+const LABEL_CLASSES = {
+  columns: "flex min-w-0 items-center gap-1.5 text-muted",
+  grid: `flex min-w-0 items-center gap-1.5 ${CAPTION}`,
+  inline: "inline-flex items-center gap-1.5 text-muted",
+  ledger: "flex min-w-0 items-center gap-1.5 text-muted",
+  tiles: `flex min-w-0 items-center gap-1.5 ${CAPTION}`
+};
+const VALUE_CLASSES = {
+  columns: "flex min-w-0 flex-wrap items-center gap-1.5 font-medium text-default [overflow-wrap:anywhere]",
+  grid: "flex min-h-5 min-w-0 flex-wrap items-center gap-1.5 font-semibold text-highlighted [overflow-wrap:anywhere]",
+  inline: "inline-flex items-center gap-1 font-bold text-highlighted tabular-nums",
+  ledger: "ms-auto flex min-w-0 flex-wrap items-center justify-end gap-1.5 text-end font-semibold text-highlighted tabular-nums [overflow-wrap:anywhere]",
+  tiles: "flex min-w-0 flex-wrap items-center gap-1.5 text-lg font-extrabold text-highlighted tabular-nums"
+};
+const ITEM_CLASSES = {
+  columns: "contents",
+  grid: "flex min-w-0 flex-col gap-1",
+  inline: "inline-flex min-w-0 items-baseline gap-1.5",
+  ledger: "flex flex-wrap items-center justify-between gap-x-4 gap-y-1 border-t border-muted py-2.5 first:border-t-0",
+  tiles: "flex min-w-0 flex-col gap-1 rounded-[var(--nut-display-radius)] bg-elevated px-3 py-2.5"
+};
+const GROUP_CLASSES = {
+  columns: "grid min-w-0 gap-x-4 gap-y-2.5 text-sm",
+  grid: "grid min-w-0 gap-x-5 gap-y-4 text-sm",
+  inline: "flex min-w-0 flex-wrap gap-x-4.5 gap-y-1.5 text-sm",
+  ledger: "",
+  tiles: "grid min-w-0 gap-2 text-sm"
+};
+const appUi = useDisplayAppUi("facts");
+const resolvedSurface = computed(() => surface ?? (layout === "ledger" ? "bordered" : "plain"));
+const resolvedGroups = computed(() => groups ?? [{ items: items ?? [] }]);
+const count = computed(
+  () => resolvedGroups.value.reduce((total, group) => total + group.items.length, 0)
+);
+const boxed = computed(() => resolvedSurface.value !== "plain");
+const groupStyle = computed(() => {
+  if (layout === "columns") return { gridTemplateColumns: `${labelWidth} minmax(0, 1fr)` };
+  if (layout !== "grid" && layout !== "tiles") return void 0;
+  return {
+    gridTemplateColumns: columns ? `repeat(${columns}, minmax(0, 1fr))` : `repeat(auto-fill, minmax(${layout === "grid" ? "9rem" : "8rem"}, 1fr))`
+  };
+});
+const classes = computed(
+  () => resolveDisplayClasses(
+    {
+      actions: "mt-2.5 flex flex-wrap gap-2",
+      empty: "",
+      group: GROUP_CLASSES[layout],
+      groupAside: "text-xs font-medium text-toned normal-case tracking-normal",
+      groupHeader: layout === "ledger" ? `flex items-baseline justify-between gap-3 border-t border-default py-1.5 first:border-t-0 ${boxed.value ? "bg-elevated" : ""} ${CAPTION}` : `mb-2 flex items-baseline justify-between gap-3 ${CAPTION}`,
+      groupTitle: "",
+      hint: layout === "ledger" ? "text-xs text-dimmed" : "text-xs text-muted",
+      item: ITEM_CLASSES[layout],
+      label: LABEL_CLASSES[layout],
+      root: layout === "ledger" ? `flex min-w-0 flex-col overflow-hidden text-sm ${DISPLAY_SURFACE_CLASSES[resolvedSurface.value]} ${boxed.value ? "[&>*]:px-4" : ""}` : `flex min-w-0 flex-col gap-4 ${DISPLAY_SURFACE_CLASSES[resolvedSurface.value]} ${DISPLAY_SURFACE_PADDING[resolvedSurface.value]}`,
+      value: VALUE_CLASSES[layout]
+    },
+    appUi.value,
+    ui
+  )
+);
+function valueClass(fact) {
+  return twMerge(
+    classes.value.value,
+    fact.tone ? `${displayToneClass(fact.tone)} text-[var(--nut-tone-ink)]` : "",
+    fact.emphasis ? "text-lg font-extrabold" : "",
+    fact.mono ? "font-mono text-[13px] font-medium" : ""
+  );
+}
+</script>
+
+<template>
+  <DisplaySkeleton
+    v-if="loading"
+    :layout="layout === 'ledger' ? 'rows' : layout === 'tiles' ? 'tiles' : 'lines'"
+    :count="Math.min(Math.max(count, 2), 5)"
+  />
+  <DisplayEmptyLine v-else-if="!count" :content="empty" :class="classes.empty" />
+  <div
+    v-else-if="layout === 'ledger'"
+    :class="classes.root"
+    data-display="facts"
+    data-layout="ledger"
+  >
+    <template v-for="(group, groupIndex) in resolvedGroups" :key="groupIndex">
+      <div v-if="!isDisplayContentEmpty(group.title)" :class="classes.groupHeader">
+        <span :class="classes.groupTitle"><DisplayRender :content="group.title" /></span>
+        <span v-if="!isDisplayContentEmpty(group.aside)" :class="classes.groupAside">
+          <DisplayRender :content="group.aside" />
+        </span>
+      </div>
+      <div v-for="(fact, index) in group.items" :key="index" :class="classes.item">
+        <div class="flex min-w-0 flex-col gap-px">
+          <span :class="classes.label">
+            <UIcon v-if="fact.icon" :name="fact.icon" class="size-3.5 shrink-0" />
+            <DisplayRender :content="fact.label" />
+          </span>
+          <span v-if="!isDisplayContentEmpty(fact.hint)" :class="classes.hint">
+            <DisplayRender :content="fact.hint" />
+          </span>
+        </div>
+        <div :class="valueClass(fact)" data-display-value><DisplayFactValue :fact="fact" /></div>
+      </div>
+    </template>
+  </div>
+  <div v-else :class="classes.root" data-display="facts" :data-layout="layout">
+    <div v-for="(group, groupIndex) in resolvedGroups" :key="groupIndex">
+      <div v-if="!isDisplayContentEmpty(group.title)" :class="classes.groupHeader">
+        <span :class="classes.groupTitle"><DisplayRender :content="group.title" /></span>
+        <span v-if="!isDisplayContentEmpty(group.aside)" :class="classes.groupAside">
+          <DisplayRender :content="group.aside" />
+        </span>
+      </div>
+      <dl :class="['m-0', classes.group]" :style="groupStyle">
+        <div v-for="(fact, index) in group.items" :key="index" :class="classes.item">
+          <dt :class="classes.label">
+            <UIcon v-if="fact.icon" :name="fact.icon" class="size-3.5 shrink-0" />
+            <DisplayRender :content="fact.label" />
+          </dt>
+          <dd :class="['m-0', valueClass(fact)]" data-display-value>
+            <DisplayFactValue :fact="fact" />
+          </dd>
+          <dd
+            v-if="layout !== 'inline' && !isDisplayContentEmpty(fact.hint)"
+            :class="['m-0', classes.hint, layout === 'columns' ? 'col-start-2 -mt-2' : '']"
+          >
+            <DisplayRender :content="fact.hint" />
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+  <DisplayActions
+    v-if="!loading && actions?.length"
+    :actions="actions"
+    :class="classes.actions"
+    data-display-actions
+  />
+</template>

package/dist/runtime/display/components/blocks/display-facts.vue.d.ts

@@ -0,0 +1,4 @@
+import type { DisplayFactsProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayFactsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayFactsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/blocks/display-heading.d.vue.ts

@@ -0,0 +1,4 @@
+import type { DisplayHeadingProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayHeadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayHeadingProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,96 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+import { useDisplayAppUi } from "../../composables/use-display-config";
+import { resolveDisplayClasses } from "../../utils/classes";
+import { isDisplayContentEmpty, resolveDisplayText } from "../../utils/content";
+import { displayToneClass } from "../../utils/tone";
+import DisplayRender from "../parts/display-render";
+import DisplaySkeleton from "../parts/display-skeleton.vue";
+const {
+  title,
+  description = void 0,
+  variant = "title",
+  size = "md",
+  icon = void 0,
+  tone = "primary",
+  count = void 0,
+  action = void 0,
+  level = 3,
+  loading = false,
+  ui = void 0
+} = defineProps({
+  title: { type: [String, Number, Function, Object, Boolean, null, Array], required: true, skipCheck: true },
+  description: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  variant: { type: String, required: false },
+  size: { type: String, required: false },
+  icon: { type: String, required: false },
+  tone: { type: String, required: false },
+  count: { type: [String, Number, Function], required: false },
+  action: { type: Object, required: false },
+  level: { type: Number, required: false },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const TITLE_CLASSES = {
+  lg: "text-base font-semibold text-highlighted",
+  md: "text-[15px] font-semibold text-highlighted",
+  sm: "text-sm font-semibold text-highlighted"
+};
+const appUi = useDisplayAppUi("heading");
+const tile = computed(() => size === "lg" && Boolean(icon));
+const classes = computed(
+  () => resolveDisplayClasses(
+    {
+      action: "ms-auto shrink-0",
+      count: "rounded-full bg-elevated px-2 py-px text-xs font-semibold text-toned tabular-nums",
+      description: "mt-0.5 text-sm text-muted",
+      icon: tile.value ? "grid size-10 shrink-0 place-items-center rounded-[var(--nut-display-radius)] bg-[var(--nut-tone-soft)] text-[var(--nut-tone-ink)]" : "size-4.5 shrink-0 text-muted",
+      root: variant === "eyebrow" ? "flex items-center gap-3" : tile.value || !isDisplayContentEmpty(description) ? "flex items-start gap-3" : "flex items-center gap-2",
+      rule: "h-px flex-1 bg-[var(--ui-border)]",
+      text: "flex min-w-0 flex-1 flex-col",
+      title: variant === "eyebrow" ? "m-0 text-[11px] font-bold tracking-[0.08em] text-muted uppercase" : `m-0 flex flex-wrap items-center gap-2 ${TITLE_CLASSES[size]}`
+    },
+    appUi.value,
+    ui
+  )
+);
+const actionButton = computed(() => {
+  if (!action) return void 0;
+  const { label, ...rest } = action;
+  return {
+    color: "primary",
+    size: "sm",
+    variant: "link",
+    ...rest,
+    label: resolveDisplayText(label)
+  };
+});
+</script>
+
+<template>
+  <DisplaySkeleton v-if="loading" :count="isDisplayContentEmpty(description) ? 1 : 2" />
+  <div v-else-if="variant === 'eyebrow'" :class="classes.root" data-display="heading">
+    <component :is="`h${level}`" :class="classes.title">
+      <DisplayRender :content="title" />
+    </component>
+    <span :class="classes.rule" aria-hidden="true" />
+  </div>
+  <div v-else :class="[classes.root, displayToneClass(tone)]" data-display="heading">
+    <span v-if="tile" :class="classes.icon"><UIcon :name="icon ?? ''" class="size-5" /></span>
+    <UIcon v-else-if="icon" :name="icon" :class="classes.icon" />
+    <div :class="classes.text">
+      <component :is="`h${level}`" :class="classes.title">
+        <DisplayRender :content="title" />
+        <span v-if="count !== void 0" :class="classes.count">{{
+          resolveDisplayText(count)
+        }}</span>
+      </component>
+      <div v-if="!isDisplayContentEmpty(description)" :class="classes.description">
+        <DisplayRender :content="description" />
+      </div>
+    </div>
+    <UButton v-if="actionButton" v-bind="actionButton" :class="classes.action" />
+  </div>
+</template>

package/dist/runtime/display/components/blocks/display-heading.vue.d.ts

@@ -0,0 +1,4 @@
+import type { DisplayHeadingProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayHeadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayHeadingProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/blocks/display-list.d.vue.ts

@@ -0,0 +1,4 @@
+import type { DisplayListProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayListProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;