@antelopejs/dms 0.9.8 → 0.11.0

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

@@ -12,9 +12,11 @@ import { readFetchNotFound } from "../../build/utils/fetchNotFound";
 import DmsBlockInlineStatus from "../../build/components/blocks/BlockInlineStatus.vue";
 import {
   ABSENT_VALUE_PARTS,
+  formatValue,
   formatValueParts,
 } from "../../composables/chart/formatValue";
 import { resolveSparklineAccent } from "../../composables/chart/resolveSparklineAccent";
+import { usePeriodComparisonDisplay } from "../../build/composables/period/periodComparison";
 import type {
   KpiCardResponse,
   ValueFormat,
@@ -34,16 +36,21 @@ interface Props extends DefaultComponentProps {
   fetchUrl?: string;
   fetchUrlMethod?: string;
   periodScope?: string;
+  /** Topics whose events make the card read `fetchUrl` again. */
+  realtimeTopic?: string | string[];
   valueFormat?: ValueFormat;
   currencyCode?: string;
   valuePrecision?: ValuePrecision;
   showDelta?: boolean;
+  /** "vs 1 234" next to the change, when the data carries `previousValue`. */
+  showPreviousValue?: boolean;
   showSparkline?: boolean;
   sparklineAccent?: string;
   invert?: boolean;
   compareLabel?: string;
   staticValue?: number;
   staticDelta?: number;
+  staticPreviousValue?: number;
   staticSparkline?: number[];
 }
 
@@ -54,6 +61,7 @@ const POSITIVE_SPARKLINE_ACCENT = "primary";
 const props = withDefaults(defineProps<Props>(), {
   variant: "default",
   showDelta: true,
+  showPreviousValue: true,
   showSparkline: false,
   valueFormat: "compact",
   sparklineAccent: "auto",
@@ -74,6 +82,7 @@ const staticData = computed<KpiCardResponse | null>(() => {
   return {
     value: props.staticValue,
     delta: props.staticDelta,
+    previousValue: props.staticPreviousValue,
     sparkline: props.staticSparkline,
   };
 });
@@ -83,12 +92,21 @@ const { data, isLoading, error, refresh } = useChartFetch<KpiCardResponse>({
   fetchUrlMethod: props.fetchUrlMethod,
   routeParams: () => props.routeParams,
   periodScope: props.periodScope,
+  realtimeTopic: props.realtimeTopic,
   staticData: () => staticData.value,
   watchSource: () => watchKey.value,
 });
 
+// With no comparison selected on the scope, a change the data still carries
+// (a static one, a route ignoring `comparison`) is not shown either.
+const comparison = usePeriodComparisonDisplay(props.periodScope);
 const value = computed(() => data.value?.value);
-const delta = computed(() => data.value?.delta ?? null);
+const delta = computed(() =>
+  comparison.isOff.value ? null : (data.value?.delta ?? null),
+);
+const previousValue = computed(() =>
+  comparison.isOff.value ? undefined : data.value?.previousValue,
+);
 const sparkline = computed(() => data.value?.sparkline ?? []);
 
 const formattedParts = computed(() =>
@@ -103,6 +121,19 @@ const formattedParts = computed(() =>
       ),
 );
 
+// Formatted as the value is, unit and currency included: "vs €42,900".
+const previousText = computed(() => {
+  if (!props.showPreviousValue || previousValue.value === undefined) return "";
+  const formatted = formatValue(
+    previousValue.value,
+    props.valueFormat,
+    locale.value,
+    props.currencyCode,
+    props.valuePrecision,
+  );
+  return t("dms.chart.versus_value", { value: formatted });
+});
+
 const isFirstLoad = computed(() => isLoading.value && data.value === null);
 // v2 error state: a failed first load shows a message and a retry button in
 // place of the value; a failed refetch keeps the last value.
@@ -116,13 +147,37 @@ const notFound = computed(() =>
 // 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);
+// The trend's line is held while the change is still to come, so toggling a
+// comparison never moves the footnote, and dropped with no comparison at all.
+const showTrendLine = computed(
+  () => props.showDelta && !comparison.isOff.value,
+);
 const hasSparkline = computed(
   () => props.showSparkline && sparkline.value.length > 0,
 );
+// The comparison label names the period the change is measured against, so
+// it shows with the change only: an explicit `compareLabel` wins, then the
+// description, then the label of the comparison the scope selects. With no
+// change (no comparison selected, or none in the data) only the description.
 const footnote = computed(() => {
-  const text = props.compareLabel || props.description;
-  return text ? processI18n(text) : "";
+  const isComparing = delta.value !== null;
+  const text = (isComparing && props.compareLabel) || props.description;
+  if (text) return processI18n(text);
+  return isComparing ? (comparison.label.value ?? "") : "";
 });
+// Known before any data: the skeleton draws it, and the loaded card holds it
+// empty while the change is still to come, so toggling a comparison moves
+// nothing. With no comparison selected, the trend's line goes and only a
+// description keeps this one.
+const hasFootnoteLine = computed(
+  () =>
+    !!props.description ||
+    (!comparison.isOff.value &&
+      !!(props.compareLabel || comparison.label.value)),
+);
+const holdsFootnoteLine = computed(
+  () => !footnote.value && hasFootnoteLine.value,
+);
 
 const resolvedSparklineAccent = computed(() =>
   resolveSparklineAccent(
@@ -160,23 +215,42 @@ const isStat = computed(() => props.variant === "stat");
         {{ formattedParts.unit }}
       </span>
     </template>
-    <!-- With no change to show (no comparison period), the trend's line
-         keeps its place: toggling a comparison never resizes the card. -->
-    <template v-if="showDelta || hasSparkline" #aside>
+    <!-- While the change is still to come, the trend's line keeps its
+         place: toggling a comparison never resizes the card. With no
+         comparison selected it goes. So does the sparkline's box keep its
+         place, from the first load on: the aside is taller than the value
+         column with it, and the card would grow. -->
+    <template v-if="showTrendLine || previousText || showSparkline" #aside>
       <div class="ml-auto grid shrink-0 justify-items-end gap-1">
-        <DmsTrendBadge
-          v-if="showTrend"
-          :delta="delta"
-          :invert="invert"
-          variant="text"
-        />
-        <span v-else-if="showDelta" class="h-4" aria-hidden="true" />
-        <div v-if="hasSparkline" class="h-6 w-16">
+        <div
+          v-if="showTrendLine || previousText"
+          class="flex h-4 items-center gap-1.5"
+        >
+          <DmsTrendBadge
+            v-if="showTrend"
+            :delta="delta"
+            :invert="invert"
+            variant="text"
+          />
+          <span
+            v-if="previousText"
+            class="text-dimmed text-xs whitespace-nowrap tabular-nums"
+          >
+            {{ previousText }}
+          </span>
+        </div>
+        <div v-if="showSparkline" class="h-6 w-16">
           <DmsSparkline
+            v-if="hasSparkline"
             :values="sparkline"
             :accent="resolvedSparklineAccent"
             :aria-label="processI18n(title)"
           />
+          <USkeleton
+            v-else-if="isFirstLoad"
+            :aria-label="t('dms.a11y.loading')"
+            class="size-full"
+          />
         </div>
       </div>
     </template>
@@ -236,14 +310,14 @@ const isStat = computed(() => props.variant === "stat");
     <!-- The trend (a 24px line) and the footnote (16px) as the loaded card
          lays them out; the footnote is a prop, so it is known up front. -->
     <div
-      v-if="isFirstLoad && (showDelta || footnote || showSparkline)"
+      v-if="isFirstLoad && (showTrendLine || hasFootnoteLine || showSparkline)"
       class="mt-auto flex items-end gap-2"
     >
       <div class="grid">
-        <div v-if="showDelta" class="flex h-6 items-center">
+        <div v-if="showTrendLine" class="flex h-6 items-center">
           <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-[58px]" />
         </div>
-        <div v-if="footnote" class="flex h-4 items-center">
+        <div v-if="hasFootnoteLine" class="flex h-4 items-center">
           <USkeleton :aria-label="t('dms.a11y.loading')" class="h-2.5 w-28" />
         </div>
       </div>
@@ -254,20 +328,37 @@ const isStat = computed(() => props.variant === "stat");
       />
     </div>
     <!-- The trend's line holds its place, as in the skeleton, while there is
-         no change to show (no comparison period): no "0%" stand-in, and
-         toggling a comparison never moves the footnote. -->
+         no change to show yet: no "0%" stand-in, and toggling a comparison
+         never moves the footnote. With no comparison selected on the scope,
+         the line goes, and the comparison label with it. -->
     <div
-      v-else-if="!hasError && (showDelta || footnote || hasSparkline)"
+      v-else-if="
+        !hasError &&
+        (showTrendLine ||
+          previousText ||
+          footnote ||
+          holdsFootnoteLine ||
+          hasSparkline)
+      "
       class="mt-auto flex items-end gap-2"
     >
       <div class="min-w-0">
-        <div v-if="showDelta" class="flex h-6 items-center">
+        <div
+          v-if="showTrendLine || previousText"
+          class="flex h-6 min-w-0 items-center gap-2"
+        >
           <DmsTrendBadge
             v-if="showTrend"
             :delta="delta"
             :invert="invert"
             variant="text"
           />
+          <span
+            v-if="previousText"
+            class="text-dimmed truncate text-xs tabular-nums"
+          >
+            {{ previousText }}
+          </span>
         </div>
         <p
           v-if="footnote"
@@ -275,6 +366,11 @@ const isStat = computed(() => props.variant === "stat");
         >
           {{ footnote }}
         </p>
+        <span
+          v-else-if="holdsFootnoteLine"
+          class="block h-4"
+          aria-hidden="true"
+        />
       </div>
       <div
         v-if="hasSparkline"

package/frontend-vue/layers/dms-ui/app/components/meter/Meter.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { readableNumberFormat } from "#dms-core/app/utils/formatter";
 import { computed } from "vue";
 import { tv } from "tailwind-variants";
 
@@ -176,7 +177,7 @@ const legendEntries = computed(() =>
 );
 
 const formatNumber = (amount: number): string =>
-  new Intl.NumberFormat(locale.value).format(amount);
+  readableNumberFormat(locale.value).format(amount);
 
 const valueText = computed(() => {
   if (props.valueLabel) return props.valueLabel;

package/frontend-vue/layers/dms-ui/app/components/period/PeriodSelector.vue

@@ -25,6 +25,7 @@ import {
   type CalendarRange,
   type CalendarRangeAnchor,
   calendarToRange,
+  formatPeriodDays,
   formatPeriodRange,
   formatRelativeInstant,
   limitCalendarRange,
@@ -35,6 +36,9 @@ import PeriodRangeCalendar from "../../build/components/period/PeriodRangeCalend
 import { useUserRegionalPreferences } from "#dms-core/app/composables/user/useUserRegionalPreferences";
 import { usePageLive } from "../../composables/live/usePageLive";
 import { useLivePeriodSpan } from "../../build/composables/live/useLivePeriodSpan";
+import { usePageToolbar } from "../../build/composables/page-toolbar/pageToolbarContext";
+import { toolbarControlHeightClass } from "../../build/composables/page-toolbar/toolbarControlHeight";
+import { PRESET_SHORT_LABELS } from "../../build/composables/period/periodShortLabels";
 
 interface Props extends DefaultComponentProps {
   id: string;
@@ -64,9 +68,12 @@ const RELATIVE_RANGE_LABEL: NonNullable<Props["rangeLabel"]> = "relative";
 // Two months side by side from this width; one below (design @container 760px).
 const TWO_MONTHS_QUERY = "(min-width: 768px)";
 
+type PeriodSelectorSize = NonNullable<Props["size"]>;
+const DEFAULT_SIZE: PeriodSelectorSize = "sm";
+
 const props = withDefaults(defineProps<Props>(), {
   align: "right",
-  size: "sm",
+  size: undefined,
   showRangeLabel: true,
   rangeLabel: "absolute",
   variant: "default",
@@ -78,16 +85,14 @@ const ALIGN_CLASSES: Record<NonNullable<Props["align"]>, string> = {
   right: "justify-end",
 };
 
-/** Short mono codes, as trails in the preset list and segmented labels. */
-const PRESET_SHORT_LABELS: Partial<Record<PeriodPreset, string>> = {
-  "last-hour": "1H",
-  "last-24h": "24H",
-  today: "1D",
-  "last-7-days": "7D",
-  "last-30-days": "30D",
-  "last-90-days": "90D",
-  "this-quarter": "QTD",
-  ytd: "YTD",
+// The window beside the controls, at each size of a toolbar holding the
+// selector; outside one it keeps its size whatever the controls'.
+const RANGE_LABEL_SIZE_CLASSES: Record<PeriodSelectorSize, string> = {
+  xs: "text-[11px]",
+  sm: "text-[11.5px]",
+  md: "text-[12.5px]",
+  lg: "text-[13px]",
+  xl: "text-sm",
 };
 
 /** Rolling windows first, then calendar periods (design preset groups). */
@@ -113,6 +118,19 @@ useWatch(props.watchActions || [], props.componentId);
 
 const { t, locale } = useI18n();
 
+// In a toolbar, the selector takes its size, and its window scales with it.
+const toolbar = usePageToolbar();
+const size = computed<PeriodSelectorSize>(
+  () => props.size ?? toolbar?.size.value ?? DEFAULT_SIZE,
+);
+const rangeLabelSizeClass = computed(
+  () => RANGE_LABEL_SIZE_CLASSES[toolbar ? size.value : DEFAULT_SIZE],
+);
+// In a toolbar, its buttons stand as tall as the segments and the live pill.
+const controlHeightClass = computed(() =>
+  toolbar ? toolbarControlHeightClass(size.value) : "",
+);
+
 // A paused live page keeps its period where it was: a relative preset
 // sliding every minute would refetch every block reading it.
 const { isPaused: isPagePaused } = usePageLive();
@@ -171,6 +189,12 @@ function presetLabel(preset: PeriodPreset): string {
   );
 }
 
+/** The preset's short code in the user's language; custom has none. */
+function presetShortLabel(preset: PeriodPreset): string | undefined {
+  const fallback = PRESET_SHORT_LABELS[preset];
+  return fallback && t(`dms.period.short_presets.${preset}`, fallback);
+}
+
 function comparisonLabel(comparison: PeriodComparison): string {
   return (
     props.comparisonLabels?.[comparison] ??
@@ -201,7 +225,7 @@ interface PresetEntry {
 
 function presetEntry(preset: PeriodPreset): PresetEntry {
   const label = presetLabel(preset);
-  const short = PRESET_SHORT_LABELS[preset];
+  const short = presetShortLabel(preset);
   return { preset, label, short: short === label ? undefined : short };
 }
 
@@ -414,11 +438,15 @@ function comparisonKeyClass(active: boolean): string {
   return active ? COMPARISON_KEY_ACTIVE : COMPARISON_KEY_NONE;
 }
 
-function compareRangeText(compare: PeriodRange, main: PeriodRange): string {
-  // In the reader's calendar, on the server as in the browser.
+// The year of a comparison range is noise when it is the main one's, in the
+// reader's calendar, on the server as in the browser.
+function isSameYear(compare: PeriodRange, main: PeriodRange): boolean {
   const clock = readerClock();
-  const sameYear = clock.wall(compare.to).year === clock.wall(main.to).year;
-  return formatPeriodRange(compare, locale.value, !sameYear);
+  return clock.wall(compare.to).year === clock.wall(main.to).year;
+}
+
+function compareRangeText(compare: PeriodRange, main: PeriodRange): string {
+  return formatPeriodRange(compare, locale.value, !isSameYear(compare, main));
 }
 
 const compareRangeLabel = computed(() => {
@@ -426,40 +454,82 @@ const compareRangeLabel = computed(() => {
   return compareRange && range ? compareRangeText(compareRange, range) : null;
 });
 
+// A menu names the compared window itself ("vs 16 – 17 Oct"), so the range
+// label beside it keeps the current window only: said twice, the comparison
+// wrapped the toolbar. The option's name moves to its tooltip and its menu.
+const rangeLabelCompare = computed(() =>
+  isComparisonMenu.value ? null : compareRangeLabel.value,
+);
+
+const menuCompareDays = computed(() => {
+  const { compareRange, range } = period.state.value;
+  if (!compareRange || !range) return null;
+  return formatPeriodDays(
+    compareRange,
+    locale.value,
+    !isSameYear(compareRange, range),
+  );
+});
+
+const comparisonMenuLabel = computed(() => {
+  const days = menuCompareDays.value;
+  if (!hasComparison.value || !days) {
+    return comparisonLabel(period.comparison.value);
+  }
+  return `${t("dms.period.popover.vs", "vs")} ${days}`;
+});
+
+const comparisonMenuAria = computed(() => {
+  const name = `${t("dms.period.comparison_aria", "Comparison")}: ${comparisonLabel(period.comparison.value)}`;
+  const days = hasComparison.value ? menuCompareDays.value : null;
+  return days ? `${name}, ${days}` : name;
+});
+
 // ── Segmented variant ──────────────────────────────────────────────────
 function segmentLabel(preset: PeriodPreset): string {
   return (
     props.presetLabels?.[preset] ??
-    PRESET_SHORT_LABELS[preset] ??
+    presetShortLabel(preset) ??
     presetLabel(preset)
   );
 }
 
 interface SegmentItem {
   label: string;
+  ariaLabel: string;
   value: string;
   icon?: string;
 }
 
-function customSegmentLabel(): string {
+function customRangeText(): string | null {
   const { range } = period.state.value;
   return isCustomActive.value && range
     ? formatPeriodRange(range, locale.value, false)
-    : presetLabel(CUSTOM_PRESET);
+    : null;
+}
+
+// In a toolbar the custom segment is its calendar icon alone, like the short
+// codes beside it: the window beside them writes the range once chosen.
+// Named in full either way.
+function customSegment(): SegmentItem {
+  const range = customRangeText();
+  const name = presetLabel(CUSTOM_PRESET);
+  const visible = toolbar ? "" : (range ?? name);
+  return {
+    label: visible,
+    ariaLabel: range ? `${name}: ${range}` : name,
+    value: CUSTOM_PRESET,
+    icon: CALENDAR_ICON,
+  };
 }
 
 const segmentedItems = computed<SegmentItem[]>(() => {
   const items: SegmentItem[] = listedPresets.value.map((preset) => ({
     label: segmentLabel(preset),
+    ariaLabel: presetLabel(preset),
     value: preset,
   }));
-  if (isCustomEnabled.value) {
-    items.push({
-      label: customSegmentLabel(),
-      value: CUSTOM_PRESET,
-      icon: CALENDAR_ICON,
-    });
-  }
+  if (isCustomEnabled.value) items.push(customSegment());
   return items;
 });
 
@@ -509,7 +579,11 @@ function onSegmentedClick(event: MouseEvent) {
           :icon="CALENDAR_ICON"
           :trailing-icon="isOpen ? CARET_UP_ICON : CARET_DOWN_ICON"
           :aria-label="$t('dms.period.preset_aria', 'Preset')"
-          :class="[triggerOrder, isOpen && OPEN_TRIGGER_CLASS]"
+          :class="[
+            triggerOrder,
+            controlHeightClass,
+            isOpen && OPEN_TRIGGER_CLASS,
+          ]"
           :ui="{ trailingIcon: 'text-dimmed -me-0.5' }"
         >
           <span
@@ -729,7 +803,10 @@ function onSegmentedClick(event: MouseEvent) {
       :aria-pressed="hasComparison"
       :disabled="isComparisonDisabled"
       class="order-2"
-      :class="hasComparison ? 'text-toned' : 'text-dimmed'"
+      :class="[
+        controlHeightClass,
+        hasComparison ? 'text-toned' : 'text-dimmed',
+      ]"
       @click="toggleComparison"
     >
       <template #leading>
@@ -754,8 +831,10 @@ function onSegmentedClick(event: MouseEvent) {
         :size="size"
         :disabled="isComparisonDisabled"
         :trailing-icon="CARET_DOWN_ICON"
-        :aria-label="$t('dms.period.comparison_aria', 'Comparison')"
+        :aria-label="comparisonMenuAria"
+        :title="comparisonLabel(period.comparison.value)"
         class="text-muted order-2"
+        :class="controlHeightClass"
         :ui="{ trailingIcon: 'text-dimmed' }"
       >
         <template #leading>
@@ -765,7 +844,7 @@ function onSegmentedClick(event: MouseEvent) {
             aria-hidden="true"
           />
         </template>
-        {{ comparisonLabel(period.comparison.value) }}
+        {{ comparisonMenuLabel }}
       </UButton>
     </UDropdownMenu>
 
@@ -775,16 +854,16 @@ function onSegmentedClick(event: MouseEvent) {
     <span
       v-if="showRangeLabel && rangeLabelText"
       data-allow-mismatch="text"
-      class="text-dimmed hidden font-mono text-[11.5px] font-medium whitespace-nowrap tabular-nums sm:inline"
-      :class="rangeLabelOrder"
+      class="dms-period-selector__range text-dimmed hidden font-mono font-medium whitespace-nowrap tabular-nums sm:inline"
+      :class="[rangeLabelOrder, rangeLabelSizeClass]"
     >
       <b class="text-toned font-[550]">{{ rangeLabelText }}</b>
-      <template v-if="compareRangeLabel">
+      <template v-if="rangeLabelCompare">
         ·
         <span class="text-(--dms-chart-2)">
           {{ $t("dms.period.popover.vs", "vs") }}
         </span>
-        {{ compareRangeLabel }}
+        {{ rangeLabelCompare }}
       </template>
     </span>
   </div>

package/frontend-vue/layers/dms-ui/app/components/save-bar/SaveBar.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, useTemplateRef } from "vue";
 import { tv } from "tailwind-variants";
 import {
   type FormKind,
   saveBarState,
 } from "../../build/composables/form/formFooter";
 import { trackFloatingSaveBar } from "../../build/composables/form/floatingSaveBars";
+import { trackToasterClearance } from "../../build/composables/form/toasterClearance";
 import DmsUnsavedStatus from "../../build/components/form/UnsavedStatus.vue";
 
 /**
@@ -64,6 +65,7 @@ const emit = defineEmits<{
 
 const SECONDARY_LABELS: Record<FormKind, string> = {
   record: "dms.save_bar.discard",
+  create: "dms.save_bar.discard",
   action: "dms.button.reset",
 };
 
@@ -136,6 +138,15 @@ const buttons = computed(() => BUTTONS[props.variant]);
 trackFloatingSaveBar(
   () => props.variant === "floating" && !state.value.isHidden,
 );
+// Toasts stack in the bottom corner the floating bar and a drawer's footer
+// band reach: they rise above the bar rather than cover its buttons. The
+// band's surface is its root, the floating card its inner bar.
+const rootElement = useTemplateRef<HTMLElement>("root");
+const barElement = useTemplateRef<HTMLElement>("bar");
+trackToasterClearance(
+  () => (props.variant === "floating" ? barElement.value : rootElement.value),
+  () => !state.value.isHidden,
+);
 
 // Empty while there is nothing to save: the hidden bar keeps its one line.
 const statusText = computed(() => {
@@ -154,11 +165,12 @@ const saveText = computed(() => {
 
 <template>
   <div
+    ref="root"
     :class="ui.root()"
     :inert="state.isHidden || undefined"
     :aria-hidden="state.isHidden || undefined"
   >
-    <div :class="ui.bar()">
+    <div ref="bar" :class="ui.bar()">
       <DmsUnsavedStatus
         v-if="state.showsStatus"
         :text="statusText"

package/frontend-vue/layers/dms-ui/app/components/section-header/Eyebrow.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { tv } from "tailwind-variants";
+import { keepHyphenatedWords } from "../../build/utils/eyebrow";
 
 export type EyebrowTone = "dimmed" | "muted" | "primary" | "error";
 export type EyebrowSize = "xs" | "sm";
@@ -56,6 +57,10 @@ const theme = tv({
   },
 });
 
+const text = computed(() =>
+  props.label === undefined ? undefined : keepHyphenatedWords(props.label),
+);
+
 const classes = computed(() =>
   theme({ tone: props.tone, size: props.size, truncate: props.truncate }),
 );
@@ -63,6 +68,6 @@ const classes = computed(() =>
 
 <template>
   <component :is="props.as" :class="classes">
-    <slot>{{ props.label }}</slot>
+    <slot>{{ text }}</slot>
   </component>
 </template>

package/frontend-vue/layers/dms-ui/app/components/segmented/Segmented.vue

@@ -7,7 +7,13 @@ import { computed, ref } from "vue";
 // Single-select, v-model'd. Implements the radiogroup keyboard pattern
 // (roving tabindex + arrow/Home/End, skipping disabled segments).
 interface SegItem {
+  /** The visible text; empty for an icon-only segment. */
   label: string;
+  /**
+   * The segment's accessible name when the visible label does not say it
+   * all: a short code ("24H" for "Last 24 hours") or an icon alone.
+   */
+  ariaLabel?: string;
   value: string | number;
   icon?: string;
   /** Small mono counter after the label. */
@@ -149,6 +155,12 @@ function onKeydown(event: KeyboardEvent, index: number) {
 }
 
 // A track wider than its container (a phone, a narrow column) scrolls
+// Every segment is named: its `ariaLabel`, else its label, else its value
+// (an icon-only segment given neither still reads as something).
+function itemAriaLabel(item: SegItem): string {
+  return item.ariaLabel || item.label || String(item.value);
+}
+
 // sideways inside its pill, or wraps with `overflow="wrap"`; the focus ring
 // sits inside the segment so the scroll box never clips it. (No root-level
 // template comment: it would break the class fallthrough.)
@@ -184,6 +196,7 @@ function itemClass(item: SegItem, index: number): (string | false)[] {
       type="button"
       role="radio"
       :aria-checked="model === item.value"
+      :aria-label="itemAriaLabel(item)"
       :disabled="isDisabled(index)"
       :tabindex="index === focusIndex ? 0 : -1"
       class="focus-visible:outline-primary inline-flex shrink-0 items-center gap-1.5 rounded-[6px] whitespace-nowrap transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2"