@antelopejs/dms 0.7.9 → 0.7.10

package/frontend-vue/layers/dms-ui/app/components/activity-feed/ActivityFeed.vue

@@ -19,13 +19,19 @@ import {
 import { useComposedText } from "../../../../dms-core/app/composables/translation/useComposedText";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
 import type { BlockText } from "../../../../dms-core/app/types/composed-text";
-import type { BlockEmptyText } from "../../build/components/blocks/BlockStatus.vue";
+import DmsBlockStatus, {
+  type BlockEmptyText,
+} from "../../build/components/blocks/BlockStatus.vue";
 
 // The renderer's props are optional: DmsActivityFeed is both the backend
 // `ActivityFeed` block (`dms-activity-feed-block`) and a template component.
 interface ActivityFeedProps extends Partial<DefaultComponentProps> {
   /** Eyebrow title of the card head ("Activity"). */
   title?: string;
+  /** Count chip beside the title; a `count` the source answers wins. */
+  count?: number;
+  /** Soft badge in the card head, before the actions ("Last 24 h"). */
+  badge?: BlockText;
   /** Entries shown when no data source is set. */
   items?: ActivityFeedItem[];
   /** Endpoint answering `{ items }`, newest first. */
@@ -65,6 +71,8 @@ interface ActivityFeedProps extends Partial<DefaultComponentProps> {
 
 const props = withDefaults(defineProps<ActivityFeedProps>(), {
   title: undefined,
+  count: undefined,
+  badge: undefined,
   items: undefined,
   fetchUrl: undefined,
   fetchUrlMethod: undefined,
@@ -91,8 +99,10 @@ const { processText } = useComposedText();
 
 const {
   items: list,
+  count: fetchedCount,
   isPending,
   hasError,
+  notFound,
   refresh,
 } = useBlockItems<ActivityFeedItem>({
   items: () => props.items,
@@ -129,6 +139,17 @@ const trailingOf = (item: ActivityFeedItem): string | undefined => {
 const textOf = (item: ActivityFeedItem, text: BlockText): string =>
   processText(activityText(text, item.params));
 
+const detailOf = (item: ActivityFeedItem): string | undefined =>
+  item.detail ? textOf(item, item.detail) : undefined;
+
+const headCount = computed(() => fetchedCount.value ?? props.count);
+const badgeText = computed(() =>
+  props.badge ? processText(props.badge) : undefined,
+);
+const hasHeadActions = computed(
+  () => props.actions.length > 0 || !!badgeText.value,
+);
+
 const metaOf = (item: ActivityFeedItem): string | undefined =>
   item.meta?.length
     ? item.meta.map((entry) => textOf(item, entry)).join(" · ")
@@ -186,6 +207,7 @@ const wrapperProps = computed(() =>
     ? {
         padded: false,
         title: props.title ? processI18n(props.title) : undefined,
+        count: headCount.value,
         class: "min-w-0 overflow-hidden",
       }
     : { class: "min-w-0" },
@@ -194,8 +216,16 @@ const wrapperProps = computed(() =>
 
 <template>
   <component :is="Wrapper" v-bind="wrapperProps">
-    <template v-if="props.card && props.actions.length" #actions>
+    <template v-if="props.card && hasHeadActions" #actions>
+      <UBadge
+        v-if="badgeText"
+        :label="badgeText"
+        color="primary"
+        variant="soft"
+        size="sm"
+      />
       <DmsBlockActions
+        v-if="props.actions.length"
         :actions="props.actions"
         size="xs"
         lead-variant="ghost"
@@ -251,6 +281,13 @@ const wrapperProps = computed(() =>
         ]"
       />
 
+      <DmsBlockStatus
+        v-else-if="notFound"
+        state="not-found"
+        :card="false"
+        :not-found="notFound"
+      />
+
       <DmsEmptyState
         v-else-if="!entries.length"
         icon="i-ph-tray"
@@ -287,6 +324,7 @@ const wrapperProps = computed(() =>
             :icon-color="item.tone ?? 'neutral'"
             :title="textOf(item, item.title)"
             :subtitle="metaOf(item)"
+            :detail="detailOf(item)"
             :trailing="trailingOf(item)"
             :unread="item.unread"
             :mono="props.mono"

package/frontend-vue/layers/dms-ui/app/components/blocks/CodeBlock.vue

@@ -3,6 +3,7 @@ import { computed } from "vue";
 import DmsCodeSnippet from "../code-snippet/CodeSnippet.vue";
 import DmsBlockStatus from "../../build/components/blocks/BlockStatus.vue";
 import { useChartFetch } from "../../composables/chart/useChartFetch";
+import { readFetchNotFound } from "../../build/utils/fetchNotFound";
 import { useWatch } from "../../../../dms-core/app/composables/watch/useWatch";
 import { useComposedText } from "../../../../dms-core/app/composables/translation/useComposedText";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
@@ -62,10 +63,14 @@ const title = computed(() =>
   props.title ? processText(props.title) : undefined,
 );
 const showSkeleton = computed(() => isLoading.value && !data.value);
+const notFound = computed(() =>
+  isLoading.value ? null : readFetchNotFound(error.value),
+);
 // A failed first load shows a retry in place of the code; a failed refetch
 // keeps the code on screen.
 const hasError = computed(
-  () => !isLoading.value && !data.value && Boolean(error.value),
+  () =>
+    !isLoading.value && !data.value && Boolean(error.value) && !notFound.value,
 );
 
 const { t } = useI18n();
@@ -73,6 +78,11 @@ const { t } = useI18n();
 
 <template>
   <DmsBlockStatus v-if="hasError" state="error" @retry="refresh()" />
+  <DmsBlockStatus
+    v-else-if="notFound"
+    state="not-found"
+    :not-found="notFound"
+  />
   <div
     v-else-if="showSkeleton"
     class="border-default grid gap-2 rounded-[10px] border px-3.5 py-3"

package/frontend-vue/layers/dms-ui/app/components/blocks/KeyValueListBlock.vue

@@ -69,7 +69,7 @@ const TRANSLATED_TYPES = new Set([undefined, "text", "status", "link"]);
 
 const { processText } = useComposedText();
 
-const { items, isPending, hasError, refresh } =
+const { items, isPending, hasError, notFound, refresh } =
   useBlockItems<KeyValueListBlockItem>({
     items: () => props.items,
     fetchUrl: props.fetchUrl,
@@ -104,7 +104,11 @@ const title = computed(() =>
   props.title ? processText(props.title) : undefined,
 );
 const isEmpty = computed(
-  () => !isPending.value && !hasError.value && resolvedItems.value.length === 0,
+  () =>
+    !isPending.value &&
+    !hasError.value &&
+    !notFound.value &&
+    resolvedItems.value.length === 0,
 );
 // A card with a head gets its body padding from the list itself, so the rows'
 // hairlines run to the same inset as the head's.
@@ -122,6 +126,12 @@ const listClass = computed(() => (props.card ? "px-[18px] py-2" : undefined));
       :card="false"
       @retry="refresh()"
     />
+    <DmsBlockStatus
+      v-else-if="notFound"
+      state="not-found"
+      :card="false"
+      :not-found="notFound"
+    />
     <DmsBlockStatus
       v-else-if="isEmpty"
       state="empty"

package/frontend-vue/layers/dms-ui/app/components/blocks/LiveToggleBlock.vue

@@ -4,17 +4,29 @@ import DmsSegmented from "../segmented/Segmented.vue";
 import { usePageLive } from "../../composables/live/usePageLive";
 import { formatElapsed } from "../../build/composables/live/formatElapsed";
 import { useLiveToggleShortcut } from "../../build/composables/live/useLiveToggleShortcut";
+import { HIDDEN_TAB_NOTE } from "../../build/composables/live/pageLiveController";
+import {
+  resolveConfirmText,
+  type ConfirmTranslate,
+} from "../../build/composables/confirm/confirmDialogTexts";
+import type { PageLiveNote, PageLiveNoteTone } from "../../types/live";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
 
 interface LiveToggleBlockProps extends DefaultComponentProps {
   align?: "left" | "center" | "right";
   /** Shows "updated N s ago". */
   showUpdatedAt?: boolean;
+  /** `segmented` (Live / Pause segments) or `pill` (a pulsing Live pill). */
+  variant?: "segmented" | "pill";
+  /** What the paused toggle calls the missed events, given `{count}`. */
+  missedLabel?: string;
 }
 
 const props = withDefaults(defineProps<LiveToggleBlockProps>(), {
   align: "right",
   showUpdatedAt: true,
+  variant: "segmented",
+  missedLabel: undefined,
 });
 
 const DIRECT = "direct";
@@ -28,8 +40,17 @@ const ALIGN_CLASSES: Record<
   center: "justify-center",
   right: "justify-end",
 };
+const TONE_CLASSES: Record<PageLiveNoteTone, string> = {
+  neutral: "",
+  warning: "text-warning",
+  error: "text-error",
+};
+const PILL_BUTTON_CLASS =
+  "focus-visible:outline-primary flex items-center gap-1.5 rounded-[5px] px-2 py-1 text-[12px] font-medium transition-colors focus-visible:outline-2";
+const PILL_IDLE_CLASS = "text-muted hover:text-default hover:bg-elevated";
 
 const { t } = useI18n();
+const translate = t as ConfirmTranslate;
 const live = usePageLive();
 
 // The state lives in the browser (its storage, its clock): the server and the
@@ -63,30 +84,134 @@ const updatedLabel = computed(() => {
   const at = live.lastUpdatedAt.value;
   if (at === null) return "";
   const { unit, count } = formatElapsed(now.value - at);
-  return t(`dms.live.updated_${unit}`, { count }, count);
+  const updated = t(`dms.live.updated_${unit}`, { count }, count);
+  return live.isPolling.value
+    ? `${updated} · ${t("dms.live.polling")}`
+    : updated;
+});
+
+const noteText = (note: PageLiveNote) =>
+  resolveConfirmText(note.text, note.params ?? {}, translate);
+
+const missedText = computed(() => {
+  const count = live.missedCount.value;
+  if (count === 0) return "";
+  return props.missedLabel
+    ? resolveConfirmText(props.missedLabel, { count }, translate)
+    : t("dms.live.new_rows", { count }, count);
+});
+
+// "Paused · typing in the Tester · 40 new requests", the detail apart: it
+// takes its own tone.
+const pausedText = computed(() => {
+  const reason = live.pauseReason.value;
+  return [
+    t("dms.live.paused"),
+    reason ? noteText(reason) : "",
+    missedText.value,
+  ]
+    .filter((part) => part !== "")
+    .join(" · ");
+});
+
+const detail = computed(() => {
+  const note = live.missedDetail.value;
+  if (!note || live.missedCount.value === 0) return null;
+  return {
+    text: noteText(note),
+    toneClass: TONE_CLASSES[note.tone ?? "neutral"],
+  };
 });
 
+// A hidden tab resumes by itself when it shows again: no button for it.
+const canResume = computed(
+  () =>
+    live.isPaused.value &&
+    live.pauseReason.value?.text !== HIDDEN_TAB_NOTE.text,
+);
+
 useLiveToggleShortcut(() => live.toggle());
 </script>
 
 <template>
   <div
     v-if="isMounted && live.isEnabled.value"
-    class="dms-live-toggle flex flex-wrap items-center gap-2.5"
-    :class="ALIGN_CLASSES[align]"
+    class="dms-live-toggle flex flex-wrap items-center gap-x-2.5 gap-y-1"
+    :class="[ALIGN_CLASSES[align], `dms-live-toggle--${variant}`]"
   >
     <span
-      v-if="showUpdatedAt"
+      v-if="live.isPaused.value"
+      class="dms-live-toggle__status text-muted min-w-0 text-[12.5px] tabular-nums"
+      aria-live="polite"
+    >
+      {{ pausedText }}
+      <span v-if="detail" :class="detail.toneClass">· {{ detail.text }}</span>
+    </span>
+    <span
+      v-else-if="showUpdatedAt"
       class="text-muted text-[12.5px] tabular-nums"
       aria-live="off"
     >
       {{ updatedLabel }}
     </span>
+    <div
+      v-if="variant === 'pill'"
+      role="group"
+      :aria-label="t('dms.live.aria_label')"
+      class="border-default bg-default inline-flex shrink-0 items-center gap-0.5 rounded-md border p-0.5"
+    >
+      <button
+        type="button"
+        data-value="direct"
+        :aria-pressed="live.isLive.value"
+        :class="[
+          PILL_BUTTON_CLASS,
+          live.isLive.value ? 'bg-success/10 text-success' : PILL_IDLE_CLASS,
+        ]"
+        @click="live.resume()"
+      >
+        <span
+          class="dms-live-toggle__dot size-2 rounded-full"
+          :class="
+            live.isLive.value
+              ? 'bg-success motion-safe:animate-pulse'
+              : 'bg-(--ui-border-accented)'
+          "
+        />
+        {{ t("dms.live.direct") }}
+      </button>
+      <button
+        type="button"
+        data-value="pause"
+        :aria-pressed="live.isPaused.value"
+        :class="[
+          PILL_BUTTON_CLASS,
+          live.isPaused.value
+            ? 'bg-elevated text-highlighted'
+            : PILL_IDLE_CLASS,
+        ]"
+        @click="live.pause()"
+      >
+        <UIcon name="i-ph-pause-fill" class="size-3" />
+        {{ t("dms.live.pause") }}
+      </button>
+    </div>
     <DmsSegmented
+      v-else
       v-model="mode"
       :items="items"
       :aria-label="t('dms.live.aria_label')"
       size="sm"
     />
+    <UButton
+      v-if="variant === 'pill' && canResume"
+      data-action="resume"
+      size="xs"
+      color="neutral"
+      variant="soft"
+      icon="i-ph-play-fill"
+      :label="t('dms.live.resume')"
+      @click="live.resume()"
+    />
   </div>
 </template>

package/frontend-vue/layers/dms-ui/app/components/blocks/NavCardGridBlock.vue

@@ -94,6 +94,7 @@ const {
   items: blockItems,
   isPending,
   hasError,
+  notFound,
   refresh,
 } = useBlockItems<NavCardGridItem>({
   items: () => props.items,
@@ -161,6 +162,11 @@ const { t } = useI18n();
       "
     />
     <DmsBlockStatus v-if="hasError" state="error" @retry="refresh()" />
+    <DmsBlockStatus
+      v-else-if="notFound"
+      state="not-found"
+      :not-found="notFound"
+    />
     <DmsBlockStatus
       v-else-if="!isPending && cards.length === 0"
       state="empty"

package/frontend-vue/layers/dms-ui/app/components/blocks/StatGroupBlock.vue

@@ -61,7 +61,7 @@ const DEFAULT_SKELETON_COUNT = 4;
 
 const { processText } = useComposedText();
 
-const { items, isPending, hasError, refresh } =
+const { items, isPending, hasError, notFound, refresh } =
   useBlockItems<StatGroupBlockItem>({
     items: () => props.items,
     fetchUrl: props.fetchUrl,
@@ -85,6 +85,11 @@ const resolvedItems = computed<StatGroupItem[]>(() =>
 
 <template>
   <DmsBlockStatus v-if="hasError" state="error" @retry="refresh()" />
+  <DmsBlockStatus
+    v-else-if="notFound"
+    state="not-found"
+    :not-found="notFound"
+  />
   <DmsBlockStatus
     v-else-if="!isPending && resolvedItems.length === 0"
     state="empty"

package/frontend-vue/layers/dms-ui/app/components/confirm/ConfirmModal.vue

@@ -12,6 +12,7 @@ import {
   type ConfirmImpact,
   type ConfirmNotice,
   type ConfirmPartialOutcome,
+  type ConfirmSecondaryAction,
   ConfirmTextError,
   type ConfirmValues,
 } from "../../composables/confirm/types";
@@ -52,6 +53,11 @@ interface ConfirmModalProps {
   fields?: ConfirmDialogField[];
   /** A component drawn in the body, bound to the fields' values. */
   component?: ComponentInfo;
+  /**
+   * A button next to cancel and confirm that leaves the modal open: its
+   * `run` is awaited, the button loading; a rejection shows in the alert.
+   */
+  secondaryAction?: ConfirmSecondaryAction;
   /** Checks the body fields first; `false` keeps the modal open. */
   validate?: () => boolean | Promise<boolean>;
   /**
@@ -88,6 +94,7 @@ const props = withDefaults(defineProps<ConfirmModalProps>(), {
   confirmText: undefined,
   fields: () => [],
   component: undefined,
+  secondaryAction: undefined,
   validate: undefined,
   onConfirm: undefined,
 });
@@ -153,6 +160,7 @@ const bodyComponent = computed(() => resolveComponentRef(props.component));
 const isOpen = ref(true);
 const typedText = ref("");
 const isPending = ref(false);
+const isSecondaryPending = ref(false);
 // The failure (or partial outcome) of the last confirm, above the buttons.
 const notice = ref<ConfirmNotice & { tone: "error" | "warning" }>();
 // The action went part of the way: nothing left to confirm, closing it
@@ -315,6 +323,20 @@ async function handleConfirm() {
   close(true);
 }
 
+async function handleSecondary() {
+  const action = props.secondaryAction;
+  if (!action || isPending.value || isSecondaryPending.value) return;
+  isSecondaryPending.value = true;
+  notice.value = undefined;
+  try {
+    await action.run();
+  } catch (error) {
+    notice.value = { ...errorNotice(error), tone: "error" };
+  } finally {
+    isSecondaryPending.value = false;
+  }
+}
+
 function handleCancel() {
   if (isPending.value) return;
   close(isSettled.value);
@@ -463,6 +485,17 @@ function handleCancel() {
 
     <template #footer>
       <div class="flex w-full items-center justify-end gap-2">
+        <UButton
+          v-if="props.secondaryAction"
+          :label="props.secondaryAction.label"
+          :icon="props.secondaryAction.icon"
+          variant="ghost"
+          color="neutral"
+          :loading="isSecondaryPending"
+          :disabled="isPending"
+          data-confirm-action="secondary"
+          @click="handleSecondary"
+        />
         <DmsModalEscHint
           class="max-sm:hidden"
           :label="

package/frontend-vue/layers/dms-ui/app/components/form/components/ChoiceCards.vue

@@ -17,17 +17,35 @@ interface ChoiceCardsProps {
   /** Several cards picked: the value is the list of theirs. */
   multiple?: boolean;
   disabled?: boolean;
+  /**
+   * Cards per row once the field is 480px wide; one column below it.
+   * Defaults to 2: three options then wrap 2 + 1, `3` keeps them on one row.
+   */
+  columns?: number;
 }
 
-const props = defineProps<ChoiceCardsProps>();
+const DEFAULT_COLUMNS = 2;
+
+const props = withDefaults(defineProps<ChoiceCardsProps>(), {
+  id: undefined,
+  multiple: false,
+  disabled: false,
+  columns: DEFAULT_COLUMNS,
+});
 const model = defineModel<ChoiceValue | ChoiceValue[] | null | undefined>();
 
 // Nuxt UI's choice cards, as the v2 theme draws them: the options side by
-// side, wrapping, each with its description.
+// side, wrapping, each with its description. The column count is a custom
+// property, so any `columns` needs no class of its own.
 const CARDS_UI = {
-  fieldset: "grid gap-2.5 @min-[480px]:grid-cols-2",
+  fieldset:
+    "grid gap-2.5 @min-[480px]:grid-cols-[repeat(var(--dms-choice-columns),minmax(0,1fr))]",
 };
 
+const columnsStyle = computed(() => ({
+  "--dms-choice-columns": String(Math.max(1, Math.round(props.columns))),
+}));
+
 const items = computed(() => props.items as unknown as RadioGroupItem[]);
 const pickedMany = computed<ChoiceValue[]>({
   get: () => (Array.isArray(model.value) ? model.value : []),
@@ -41,7 +59,7 @@ const pickedOne = computed<ChoiceValue | undefined>({
 </script>
 
 <template>
-  <div class="@container">
+  <div class="@container" :style="columnsStyle">
     <UCheckboxGroup
       v-if="props.multiple"
       :id="props.id"

package/frontend-vue/layers/dms-ui/app/components/guard/Guard.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
+import DmsEmptyStateBlock from "../blocks/EmptyStateBlock.vue";
+import {
+  type GuardCondition,
+  type GuardFallback,
+  type GuardState,
+  useGuard,
+} from "../../build/composables/blocks/useGuard";
+import { notFoundTexts } from "../../build/utils/fetchNotFound";
+
+// `Guard` block (interface-dms `base/guard`): renders its children unchanged
+// unless a route says there is nothing for them, then one EmptyState (the
+// `fallback`, with the answer's `emptyState` laid over it) in their place.
+// `display: contents`, so the children lay out as if the guard were not there.
+interface GuardProps extends DefaultComponentProps {
+  fetchUrl?: string;
+  fetchUrlMethod?: string;
+  periodScope?: string;
+  realtimeTopic?: string | string[];
+  when?: GuardCondition;
+  /** Dot path of the value `empty` checks. */
+  field?: string;
+  fallback?: GuardFallback;
+}
+
+const props = withDefaults(defineProps<GuardProps>(), {
+  fetchUrl: undefined,
+  fetchUrlMethod: undefined,
+  periodScope: undefined,
+  realtimeTopic: undefined,
+  when: "empty",
+  field: undefined,
+  fallback: undefined,
+});
+
+const { t } = useI18n();
+
+const state = useGuard(
+  () => props,
+  () => props.routeParams,
+);
+
+// `notFound` draws what a block whose source answers 404 draws: the same
+// title, the 404's message (or the same hint) and the same icon.
+const DEFAULT_FALLBACKS: Record<
+  GuardCondition,
+  (state: GuardState) => GuardFallback
+> = {
+  empty: () => ({ title: t("dms.blocks.empty") }),
+  notFound: ({ notFound }) => ({
+    ...notFoundTexts(notFound, t),
+    variant: "no-result",
+  }),
+};
+
+const fallback = computed<GuardFallback | null>(() => {
+  const current = state.value;
+  if (!current) return null;
+  return {
+    ...DEFAULT_FALLBACKS[current.condition](current),
+    ...props.fallback,
+    ...current.override,
+  };
+});
+</script>
+
+<template>
+  <div class="contents" data-dms-guard>
+    <DmsEmptyStateBlock v-if="fallback" v-bind="fallback" />
+    <slot v-else />
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/components/kpi/KpiCard.vue

@@ -8,6 +8,8 @@ import DmsEyebrow from "../section-header/Eyebrow.vue";
 import DmsTrendBadge from "../chart/internal/TrendBadge.vue";
 import DmsSparkline from "../chart/internal/Sparkline.vue";
 import { useChartFetch } from "../../composables/chart/useChartFetch";
+import { readFetchNotFound } from "../../build/utils/fetchNotFound";
+import DmsBlockInlineStatus from "../../build/components/blocks/BlockInlineStatus.vue";
 import {
   ABSENT_VALUE_PARTS,
   formatValueParts,
@@ -107,6 +109,10 @@ const isFirstLoad = computed(() => isLoading.value && data.value === null);
 const hasError = computed(
   () => !isLoading.value && data.value === null && Boolean(error.value),
 );
+// A 404 is a status too, but nothing to retry: the value does not exist.
+const notFound = computed(() =>
+  hasError.value ? readFetchNotFound(error.value) : null,
+);
 // A refetch keeps the stale value on screen, faded, instead of a skeleton.
 const isRefreshing = computed(() => isLoading.value && data.value !== null);
 const showTrend = computed(() => props.showDelta && delta.value !== null);
@@ -201,24 +207,13 @@ const isStat = computed(() => props.variant === "stat");
       v-if="isFirstLoad"
       class="mt-1 h-[33px] w-32"
     />
-    <div
+    <DmsBlockInlineStatus
       v-else-if="hasError"
-      class="mt-auto flex items-center justify-between gap-2"
-      role="alert"
-    >
-      <p class="text-error flex min-w-0 items-center gap-1.5 text-[12.5px]">
-        <UIcon name="i-ph-warning-circle" class="size-4 shrink-0" />
-        <span class="truncate">{{ t("dms.table.load_error_title") }}</span>
-      </p>
-      <UButton
-        :label="t('dms.table.load_error_retry')"
-        icon="i-ph-arrows-clockwise"
-        color="neutral"
-        variant="outline"
-        size="xs"
-        @click="refresh()"
-      />
-    </div>
+      class="mt-auto"
+      :state="notFound ? 'not-found' : 'error'"
+      :not-found="notFound"
+      @retry="refresh()"
+    />
     <p
       v-else
       class="text-highlighted mt-1 text-[30px] leading-[1.1] font-[650] tracking-[-0.035em] tabular-nums transition-opacity"