@antelopejs/dms 0.7.5 → 0.7.6

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

@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import type {
-  FormSectionLayout,
-  FormSectionState,
+import { computed, useId } from "vue";
+import {
+  type FormSectionLayout,
+  type FormSectionNavGroup,
+  type FormSectionState,
+  groupSectionsForNav,
 } from "../../composables/form/formSections";
+import DmsEyebrow from "../../../components/section-header/Eyebrow.vue";
 
 type FormSectionNavVariant = "list" | "chips";
 
@@ -21,6 +25,18 @@ const emit = defineEmits<{ select: [sectionId: string] }>();
 const { t } = useI18n();
 const { processI18n } = useTranslation();
 
+// The side list reads its sections in titled runs (`navGroup`); the row of
+// chips has no room for headings and lists them all in one run.
+const GROUPS_CLASSES: Record<FormSectionNavVariant, string> = {
+  list: "flex flex-col gap-4",
+  chips: "",
+};
+
+const GROUP_CLASSES: Record<FormSectionNavVariant, string> = {
+  list: "grid gap-1",
+  chips: "contents",
+};
+
 const VARIANT_CLASSES: Record<FormSectionNavVariant, string> = {
   list: "flex flex-col gap-0.5",
   chips: "flex gap-1.5 overflow-x-auto pb-1",
@@ -37,6 +53,17 @@ const ACTIVE_CLASSES: Record<FormSectionNavVariant, string> = {
   chips: "border-accented bg-elevated text-highlighted",
 };
 
+const groupIdPrefix = useId();
+const groups = computed<FormSectionNavGroup[]>(() =>
+  props.variant === "list"
+    ? groupSectionsForNav(props.sections)
+    : [{ sections: props.sections }],
+);
+
+function groupHeadingId(index: number): string {
+  return `${groupIdPrefix}-group-${index}`;
+}
+
 function stateLabel(state: FormSectionState | undefined): string | undefined {
   if (state?.invalidCount) {
     const count = state.invalidCount;
@@ -52,43 +79,63 @@ function onSelect(event: MouseEvent, sectionId: string): void {
 </script>
 
 <template>
-  <nav :aria-label="t('dms.form.sections.nav')">
-    <ul :class="VARIANT_CLASSES[props.variant]">
-      <li v-for="section in props.sections" :key="section.id">
-        <a
-          :href="`#${props.anchorId(section.id)}`"
-          :class="[
-            ITEM_CLASSES[props.variant],
-            section.id === props.activeId && ACTIVE_CLASSES[props.variant],
-          ]"
-          :aria-current="section.id === props.activeId ? 'location' : undefined"
-          @click="onSelect($event, section.id)"
-        >
-          <UIcon
-            v-if="section.icon && props.variant === 'list'"
-            :name="section.icon"
-            class="size-4 shrink-0"
-          />
-          <span class="truncate">{{ processI18n(section.label) }}</span>
-          <!-- Read by its sr-only label below, not twice. -->
-          <span
-            v-if="props.states[section.id]?.invalidCount"
-            class="text-error ms-auto inline-flex items-center gap-1 font-mono text-[11px]"
-            aria-hidden="true"
+  <nav
+    :aria-label="t('dms.form.sections.nav')"
+    :class="GROUPS_CLASSES[props.variant]"
+  >
+    <div
+      v-for="(group, groupIndex) in groups"
+      :key="group.sections[0]?.id ?? groupIndex"
+      :class="GROUP_CLASSES[props.variant]"
+    >
+      <DmsEyebrow
+        v-if="group.label"
+        :id="groupHeadingId(groupIndex)"
+        :label="processI18n(group.label)"
+        class="px-2.5"
+      />
+      <ul
+        :class="VARIANT_CLASSES[props.variant]"
+        :aria-labelledby="group.label ? groupHeadingId(groupIndex) : undefined"
+      >
+        <li v-for="section in group.sections" :key="section.id">
+          <a
+            :href="`#${props.anchorId(section.id)}`"
+            :class="[
+              ITEM_CLASSES[props.variant],
+              section.id === props.activeId && ACTIVE_CLASSES[props.variant],
+            ]"
+            :aria-current="
+              section.id === props.activeId ? 'location' : undefined
+            "
+            @click="onSelect($event, section.id)"
           >
-            <span class="bg-error size-1.5 rounded-full" aria-hidden="true" />
-            {{ props.states[section.id]?.invalidCount }}
-          </span>
-          <span
-            v-else-if="props.states[section.id]?.dirty"
-            class="bg-warning ms-auto size-1.5 shrink-0 rounded-full"
-            aria-hidden="true"
-          />
-          <span v-if="stateLabel(props.states[section.id])" class="sr-only">
-            {{ stateLabel(props.states[section.id]) }}
-          </span>
-        </a>
-      </li>
-    </ul>
+            <UIcon
+              v-if="section.icon && props.variant === 'list'"
+              :name="section.icon"
+              class="size-4 shrink-0"
+            />
+            <span class="truncate">{{ processI18n(section.label) }}</span>
+            <!-- Read by its sr-only label below, not twice. -->
+            <span
+              v-if="props.states[section.id]?.invalidCount"
+              class="text-error ms-auto inline-flex items-center gap-1 font-mono text-[11px]"
+              aria-hidden="true"
+            >
+              <span class="bg-error size-1.5 rounded-full" aria-hidden="true" />
+              {{ props.states[section.id]?.invalidCount }}
+            </span>
+            <span
+              v-else-if="props.states[section.id]?.dirty"
+              class="bg-warning ms-auto size-1.5 shrink-0 rounded-full"
+              aria-hidden="true"
+            />
+            <span v-if="stateLabel(props.states[section.id])" class="sr-only">
+              {{ stateLabel(props.states[section.id]) }}
+            </span>
+          </a>
+        </li>
+      </ul>
+    </div>
   </nav>
 </template>

package/frontend-vue/layers/dms-ui/app/build/components/skeleton/RowSkeleton.vue

@@ -18,6 +18,8 @@ const props = withDefaults(defineProps<RowSkeletonProps>(), {
   linesClass: "space-y-1.5",
   isCentered: false,
 });
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -26,9 +28,14 @@ const props = withDefaults(defineProps<RowSkeletonProps>(), {
     :class="props.isCentered ? 'items-center' : 'items-start'"
     aria-hidden="true"
   >
-    <USkeleton class="shrink-0" :class="props.well" />
+    <USkeleton
+      :aria-label="t('dms.a11y.loading')"
+      class="shrink-0"
+      :class="props.well"
+    />
     <div class="min-w-0 flex-1" :class="props.linesClass">
       <USkeleton
+        :aria-label="t('dms.a11y.loading')"
         v-for="(line, index) in props.lines"
         :key="index"
         :class="line"

package/frontend-vue/layers/dms-ui/app/build/components/stat/StatCell.vue

@@ -26,7 +26,10 @@ interface StatCellProps {
   /** Icon of the well; the cell has no well without one. */
   icon?: string;
   tone?: IconWellTone;
-  /** One line under the value. */
+  /**
+   * The line under the value; a longer one wraps to a second line before its
+   * ellipsis, the row taking the height of its tallest cell.
+   */
   detail?: string;
   /** Tone of the detail line (`neutral` = muted text). */
   detailTone?: Tone;
@@ -91,6 +94,8 @@ const cellClass = computed(() => {
   ];
 });
 const detailClass = computed(() => DMS_TONE_TEXT[props.detailTone]);
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -101,6 +106,7 @@ const detailClass = computed(() => DMS_TONE_TEXT[props.detailTone]);
   >
     <template v-if="isMd">
       <USkeleton
+        :aria-label="t('dms.a11y.loading')"
         v-if="props.placeholder || (props.loading && props.icon)"
         class="size-10 shrink-0 rounded-[10px]"
       />
@@ -113,9 +119,18 @@ const detailClass = computed(() => DMS_TONE_TEXT[props.detailTone]);
       <!-- A placeholder keeps the loaded lines' boxes (eyebrow 13px, value
            24px, detail 16px), so the card keeps its height when it lands. -->
       <div v-if="props.placeholder" class="grid flex-1 gap-[3px]">
-        <USkeleton class="my-[1.5px] h-2.5 w-20" />
-        <USkeleton class="my-px h-[22px] w-10" />
-        <USkeleton class="my-0.5 h-3 w-24" />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          class="my-[1.5px] h-2.5 w-20"
+        />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          class="my-px h-[22px] w-10"
+        />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          class="my-0.5 h-3 w-24"
+        />
       </div>
       <div v-else class="grid min-w-0 flex-1 gap-[3px]">
         <DmsEyebrow
@@ -124,7 +139,11 @@ const detailClass = computed(() => DMS_TONE_TEXT[props.detailTone]);
           :class="wraps"
           :label="props.eyebrow"
         />
-        <USkeleton v-if="props.loading" class="h-[22px] w-16" />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          v-if="props.loading"
+          class="h-[22px] w-16"
+        />
         <p
           v-else
           class="text-highlighted text-[22px] leading-[1.1] font-[650] tracking-[-0.035em] tabular-nums transition-opacity"
@@ -134,8 +153,8 @@ const detailClass = computed(() => DMS_TONE_TEXT[props.detailTone]);
         </p>
         <p
           v-if="props.detail && !props.loading"
-          class="truncate text-xs"
-          :class="[wraps, detailClass]"
+          class="line-clamp-2 text-xs [overflow-wrap:anywhere]"
+          :class="detailClass"
         >
           {{ props.detail }}
         </p>
@@ -145,6 +164,7 @@ const detailClass = computed(() => DMS_TONE_TEXT[props.detailTone]);
 
     <template v-else>
       <USkeleton
+        :aria-label="t('dms.a11y.loading')"
         v-if="props.placeholder || (props.loading && props.icon)"
         class="size-8 shrink-0 rounded-[9px]"
       />
@@ -157,13 +177,26 @@ const detailClass = computed(() => DMS_TONE_TEXT[props.detailTone]);
       <!-- Each placeholder line keeps the loaded line's box (eyebrow 11px,
            value 19px, detail 16px), so the group keeps its height. -->
       <div v-if="props.placeholder" class="grid flex-1 gap-0.5">
-        <USkeleton class="my-px h-[9px] w-16" />
-        <USkeleton class="my-[2.5px] h-3.5 w-24" />
-        <USkeleton class="my-0.5 h-3 w-20" />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          class="my-px h-[9px] w-16"
+        />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          class="my-[2.5px] h-3.5 w-24"
+        />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          class="my-0.5 h-3 w-20"
+        />
       </div>
       <span v-else class="grid min-w-0 gap-0.5">
         <DmsEyebrow as="span" size="xs" :label="props.eyebrow" />
-        <USkeleton v-if="props.loading" class="my-0.5 h-3.5 w-24" />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          v-if="props.loading"
+          class="my-0.5 h-3.5 w-24"
+        />
         <b
           v-else
           class="text-highlighted text-sm leading-[1.35] font-semibold whitespace-nowrap tabular-nums transition-opacity"
@@ -172,8 +205,16 @@ const detailClass = computed(() => DMS_TONE_TEXT[props.detailTone]);
           <slot name="value">{{ props.value }}</slot>
         </b>
         <template v-if="props.detail">
-          <USkeleton v-if="props.loading" class="h-3 w-20" />
-          <small v-else class="truncate text-xs" :class="detailClass">
+          <USkeleton
+            :aria-label="t('dms.a11y.loading')"
+            v-if="props.loading"
+            class="h-3 w-20"
+          />
+          <small
+            v-else
+            class="line-clamp-2 text-xs [overflow-wrap:anywhere]"
+            :class="detailClass"
+          >
             {{ props.detail }}
           </small>
         </template>

package/frontend-vue/layers/dms-ui/app/build/components/table/Pagination.vue

@@ -130,8 +130,14 @@ const uiTablePagination = computed(() => uiTablePaginationVariant());
     aria-hidden="true"
     :class="[uiTablePagination.root(), uiTablePagination.placeholderRoot()]"
   >
-    <USkeleton :class="uiTablePagination.placeholderCount()" />
-    <USkeleton :class="uiTablePagination.placeholderPager()" />
+    <USkeleton
+      :aria-label="t('dms.a11y.loading')"
+      :class="uiTablePagination.placeholderCount()"
+    />
+    <USkeleton
+      :aria-label="t('dms.a11y.loading')"
+      :class="uiTablePagination.placeholderPager()"
+    />
   </div>
   <nav
     v-else-if="rowCount"
@@ -183,6 +189,7 @@ const uiTablePagination = computed(() => uiTablePaginationVariant());
       </span>
       {{ summary.label }}
       <USkeleton
+        :aria-label="t('dms.a11y.loading')"
         v-if="summary.value === undefined"
         aria-hidden="true"
         :class="uiTablePagination.summaryPlaceholder()"

package/frontend-vue/layers/dms-ui/app/build/components/table/Table.vue

@@ -534,8 +534,12 @@ const theme = tv({
     handle: REORDER_HANDLE_CLASS,
   },
   variants: {
+    // A wrapped cell grows its row past the 44px band: it keeps the band's
+    // breathing room above and below its lines instead of touching the
+    // hairlines (one line still fits the band, so its row keeps its height).
     cellWrap: {
       true: {
+        rowCell: "py-2.5",
         rowSpan: "line-clamp-none whitespace-normal [overflow-wrap:anywhere]",
       },
     },
@@ -1249,6 +1253,7 @@ defineShortcuts({
             {{ caption }}
           </span>
           <USkeleton
+            :aria-label="t('dms.a11y.loading')"
             v-if="isFirstPageLoading"
             aria-hidden="true"
             :class="uiTable.captionCountPlaceholder()"
@@ -1516,6 +1521,8 @@ defineShortcuts({
                             pinned: getPinnedVariant(cell.column),
                             loading,
                             rowClickable: isRowClickable(row.original),
+                            cellWrap: (cell.column.columnDef as TableColumn<T>)
+                              .cellWrap,
                           })
                         "
                         :style="{
@@ -1590,6 +1597,7 @@ defineShortcuts({
                     :class="uiTable.rowCell()"
                   >
                     <USkeleton
+                      :aria-label="t('dms.a11y.loading')"
                       v-if="column.columnDef.meta"
                       :class="uiTable.skeletonCell()"
                       :style="{ width: skeletonWidth(rowIndex, columnIndex) }"

package/frontend-vue/layers/dms-ui/app/build/components/table/Tabs.vue

@@ -196,6 +196,7 @@ const countFormat = computed(() => new Intl.NumberFormat(locale.value));
         {{ tab.label }}
       </span>
       <USkeleton
+        :aria-label="t('dms.a11y.loading')"
         v-if="tab.countPending"
         aria-hidden="true"
         :class="ui.countPlaceholder()"

package/frontend-vue/layers/dms-ui/app/build/components/table/Views.vue

@@ -243,6 +243,7 @@ const openTab = (id: string) => emit("open", id);
         />
         {{ view.label }}
         <USkeleton
+          :aria-label="t('dms.a11y.loading')"
           v-if="view.countPending"
           aria-hidden="true"
           class="h-3 w-4 rounded-[3px]"

package/frontend-vue/layers/dms-ui/app/build/components/table-view/CardGridSkeleton.vue

@@ -21,6 +21,8 @@ const MAX_CARD_COUNT = 12;
 const cardCount = computed(() =>
   Math.max(1, Math.min(props.count, MAX_CARD_COUNT)),
 );
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -34,13 +36,22 @@ const cardCount = computed(() =>
       class="border-default @container rounded-[10px] border bg-(--ui-bg) p-3.5 text-[12.5px]"
     >
       <div class="flex items-center gap-2.5">
-        <USkeleton class="size-7 shrink-0 rounded-[7px]" />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          class="size-7 shrink-0 rounded-[7px]"
+        />
         <div class="min-w-0 flex-1">
           <div class="text-[13px]">
-            <USkeleton class="inline-block h-3 w-3/5 align-middle" />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="inline-block h-3 w-3/5 align-middle"
+            />
           </div>
           <div class="font-mono text-[11px]">
-            <USkeleton class="inline-block h-2 w-2/5 align-middle" />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="inline-block h-2 w-2/5 align-middle"
+            />
           </div>
         </div>
       </div>
@@ -49,10 +60,16 @@ const cardCount = computed(() =>
       >
         <div v-for="field in props.fields" :key="field" class="min-w-0">
           <div :class="['font-mono', props.labelClass]">
-            <USkeleton class="inline-block h-2 w-1/2 align-middle" />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="inline-block h-2 w-1/2 align-middle"
+            />
           </div>
           <div class="mt-0.5">
-            <USkeleton class="inline-block h-2.5 w-4/5 align-middle" />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="inline-block h-2.5 w-4/5 align-middle"
+            />
           </div>
         </div>
       </div>

package/frontend-vue/layers/dms-ui/app/build/components/table-view/ExpandedRowDetail.vue

@@ -96,6 +96,7 @@ const FieldValue = (fieldProps: { item: KeyValueItem }) =>
     aria-busy="true"
   >
     <USkeleton
+      :aria-label="t('dms.a11y.loading')"
       v-for="line in SKELETON_LINE_COUNT"
       :key="line"
       class="h-4 w-full max-w-md"

package/frontend-vue/layers/dms-ui/app/build/composables/data-types/registerDefaults.ts

@@ -386,6 +386,8 @@ interface IdentityBadgeOption {
 interface IdentityOptions {
   avatarField?: string;
   icon?: string;
+  /** Row field holding the tile's icon; `icon` when it is empty. */
+  iconField?: string;
   subtitleField?: string;
   subtitleTone?: string;
   selfField?: string;
@@ -431,7 +433,7 @@ function renderIdentity(value: unknown, options: unknown, row: Row) {
       | { key: string }
       | string
       | null,
-    icon: opts.icon,
+    icon: stringOf(readRowField(row, opts.iconField)) ?? opts.icon,
     selfId: stringOf(readRowField(row, opts.selfField)),
     selfLabel: opts.selfLabel ? processI18n(opts.selfLabel) : undefined,
     badges,

package/frontend-vue/layers/dms-ui/app/build/composables/form/formFooter.ts

@@ -51,8 +51,9 @@ export interface SaveBarState {
   /** The submit shows but waits for a change. */
   isSubmitHeld: boolean;
   /**
-   * Nothing to offer: the bar keeps its place, invisible, so its showing up
-   * never moves the content around it.
+   * Nothing to offer: the bar hides. The floating bar takes no space then
+   * (it overlays the form), a band keeps its place; either way its showing
+   * up never moves the content above it.
    */
   isHidden: boolean;
 }

package/frontend-vue/layers/dms-ui/app/build/composables/form/formSections.ts

@@ -21,6 +21,31 @@ export interface FormSectionsLayout {
   sections: FormSectionLayout[];
 }
 
+/** A run of the side navigation's entries under one heading, or none. */
+export interface FormSectionNavGroup {
+  label?: string;
+  sections: FormSectionLayout[];
+}
+
+/**
+ * The side navigation's entries, in order, cut wherever the heading changes:
+ * consecutive sections naming the same `navGroup` share one heading.
+ */
+export function groupSectionsForNav(
+  sections: readonly FormSectionLayout[],
+): FormSectionNavGroup[] {
+  const groups: FormSectionNavGroup[] = [];
+  for (const section of sections) {
+    const current = groups.at(-1);
+    if (current && current.label === section.navGroup) {
+      current.sections.push(section);
+    } else {
+      groups.push({ label: section.navGroup, sections: [section] });
+    }
+  }
+  return groups;
+}
+
 /** An error of the form, as UForm lists them: the name it went under. */
 export interface FormErrorRef {
   name?: string;

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableViewRowActions.ts

@@ -652,6 +652,25 @@ export const useTableRowActions = <T extends Data>(
     };
   };
 
+  const findShownRow = (id: string | undefined): Data | undefined =>
+    config.rowNavigation
+      ?.rows()
+      .find(
+        (row) =>
+          String(getItemId(row, config.rowIdKey ?? DEFAULT_ROW_ID_KEY)) === id,
+      );
+
+  /**
+   * What a fixed dialog words: the rows' count, and for one row shown in the
+   * table its own fields too (`{name}`). The count wins a clash, it is what
+   * every bulk dialog may name.
+   */
+  const confirmRowFields = (ids: string[]): Data => {
+    const count = { count: ids.length };
+    const row = ids.length === 1 ? findShownRow(ids[0]) : undefined;
+    return row ? { ...row, ...count } : count;
+  };
+
   /** Asks the declared confirmation of a bulk action, running it inside. */
   const askDeclaredBulkConfirm = (
     declared: ActionConfirm,
@@ -664,8 +683,7 @@ export const useTableRowActions = <T extends Data>(
         id: ids[0],
         [config.rowIdKey ?? DEFAULT_ROW_ID_KEY]: ids[0],
       },
-      // A fixed dialog names the rows it reaches.
-      row: { count: ids.length },
+      row: confirmRowFields(ids),
       fallback,
       run,
     });

package/frontend-vue/layers/dms-ui/app/build/utils/characterCount.ts

@@ -0,0 +1,8 @@
+/**
+ * The counter a text field shows under `showCount`: the characters typed,
+ * out of `maxLength` when the field has one ("4 / 60").
+ */
+export function characterCountText(value: unknown, maxLength?: number): string {
+  const count = typeof value === "string" ? [...value].length : 0;
+  return maxLength === undefined ? String(count) : `${count} / ${maxLength}`;
+}

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

@@ -213,7 +213,10 @@ const wrapperProps = computed(() =>
             v-if="props.groupByDay"
             class="flex items-center gap-2.5 px-[18px] pt-3.5 pb-1.5 after:h-px after:flex-1 after:bg-(--ui-border-muted)"
           >
-            <USkeleton class="my-[1.5px] h-2.5 w-24" />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="my-[1.5px] h-2.5 w-24"
+            />
           </div>
           <div class="divide-y divide-(--ui-border-muted)">
             <DmsRowSkeleton

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

@@ -67,6 +67,8 @@ const showSkeleton = computed(() => isLoading.value && !data.value);
 const hasError = computed(
   () => !isLoading.value && !data.value && Boolean(error.value),
 );
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -77,6 +79,7 @@ const hasError = computed(
     aria-busy="true"
   >
     <USkeleton
+      :aria-label="t('dms.a11y.loading')"
       v-for="width in SKELETON_LINE_WIDTHS"
       :key="width"
       class="h-3"

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

@@ -146,6 +146,8 @@ const hasStates = computed(() => cards.value.some((card) => !!card.state));
 const isLeftOut = computed(
   () => !!props.categoryId && !props.empty && cards.value.length === 0,
 );
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -180,14 +182,20 @@ const isLeftOut = computed(
           class="dms-card flex flex-col gap-2.5 p-[18px]"
         >
           <div class="flex items-center gap-3">
-            <USkeleton class="size-9 rounded-[10px]" />
-            <USkeleton class="h-3.5 w-28" />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="size-9 rounded-[10px]"
+            />
+            <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3.5 w-28" />
           </div>
           <div class="grid h-[39px] content-center gap-[7.5px]">
-            <USkeleton class="h-3 w-4/5" />
-            <USkeleton class="h-3 w-3/5" />
+            <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-4/5" />
+            <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-3/5" />
           </div>
-          <USkeleton class="my-[2.5px] h-3 w-28" />
+          <USkeleton
+            :aria-label="t('dms.a11y.loading')"
+            class="my-[2.5px] h-3 w-28"
+          />
         </div>
       </template>
       <template v-else>

package/frontend-vue/layers/dms-ui/app/components/card/NavCard.vue

@@ -61,7 +61,10 @@ const attrs = useAttrs();
 const theme = tv({
   slots: {
     root: "dms-card dms-card--interactive group flex flex-col gap-3 p-[18px] text-start",
-    title: "text-highlighted min-w-0 truncate text-sm font-[650]",
+    // Two lines before the ellipsis: a title cut on its first line no longer
+    // says where the card leads, and the card already grows with its text.
+    title:
+      "text-highlighted line-clamp-2 min-w-0 text-sm font-[650] [overflow-wrap:anywhere]",
     tag: `${MONO_TAG_CLASS} bg-elevated shrink-0 text-dimmed`,
     badge: "shrink-0",
     arrow:
@@ -78,6 +81,8 @@ const passthrough = computed(() => {
   const { class: _class, ...rest } = attrs;
   return rest;
 });
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -110,6 +115,7 @@ const passthrough = computed(() => {
     </div>
 
     <USkeleton
+      :aria-label="t('dms.a11y.loading')"
       v-if="props.statePending && !props.state"
       aria-hidden="true"
       class="mt-auto h-[18px] w-28 self-start"