@nuxtseo/design-system 0.1.1 → 0.1.3

package/app/components/data/UiTableTd.vue

@@ -10,10 +10,16 @@ const {
   numeric = false,
   rowHeader = false,
   visibleFrom,
+  colspan,
+  title,
 } = defineProps<UiTableCellProps & {
   size?: UiTableSize
   noPadding?: boolean
   rowHeader?: boolean
+  /** Columns this cell spans, e.g. a full-width note row. */
+  colspan?: number | string
+  /** Native tooltip, e.g. the full value behind a truncated cell. */
+  title?: string
 }>()
 
 const resolvedAlign = computed(() => numeric ? 'right' : align)
@@ -25,7 +31,9 @@ const padClass = computed(() => noPadding ? '' : 'px-3')
   <component
     :is="rowHeader ? 'th' : 'td'"
     :scope="rowHeader ? 'row' : undefined"
-    class="text-xs font-normal text-default relative"
+    :colspan="colspan"
+    :title="title"
+    class="ui-table-cell font-normal text-default relative"
     :class="[
       uiTableCellSizeClass[size],
       padClass,

package/app/components/data/UiTableTh.vue

@@ -12,11 +12,17 @@ const {
   sortDirection = false,
   ariaLabel,
   visibleFrom,
+  colspan,
+  title,
 } = defineProps<UiTableCellProps & {
   sortable?: boolean
   noPadding?: boolean
   sortDirection?: 'asc' | 'desc' | false
   ariaLabel?: string
+  /** Columns this header spans, e.g. a group header over two metric columns. */
+  colspan?: number | string
+  /** Native tooltip, e.g. what a terse column label measures. */
+  title?: string
 }>()
 
 const emit = defineEmits<{ sort: [event: MouseEvent] }>()
@@ -39,14 +45,16 @@ const sortIconClass = computed(() => sortDirection === 'desc' ? 'rotate-180' : '
 <template>
   <th
     scope="col"
-    class="text-label text-left whitespace-nowrap border-b border-default bg-default"
+    :colspan="colspan"
+    :title="title"
+    class="text-label ui-table-head text-left whitespace-nowrap border-b border-default bg-default"
     :class="[padClass, numeric ? 'text-right tabular-nums' : '', visibleFrom ? uiTableVisibleFromClass[visibleFrom] : '']"
     :aria-sort="sortable ? sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none' : undefined"
   >
     <button
       v-if="sortable"
       type="button"
-      class="flex min-h-11 w-full items-center gap-1 rounded px-3 py-2.5 text-label text-muted transition-colors hover:text-default focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sm:min-h-0"
+      class="flex min-h-11 w-full items-center gap-1 rounded px-3 py-2.5 text-label ui-table-head text-muted transition-colors hover:text-default focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sm:min-h-0"
       :class="justify"
       :aria-label="ariaLabel"
       @click="emit('sort', $event)"

package/app/components/data/cells/UiTableHeaderCell.vue

@@ -37,7 +37,7 @@ const sortIcon = computed(() => {
 // Chevron rotates 180° between asc/desc — a single icon animates rather than swapping.
 const sortIconRotate = computed(() => sortDirection === 'desc' ? 'rotate-180' : '')
 
-const buttonClass = 'flex min-h-11 items-center gap-1 w-full text-label cursor-pointer select-none transition-colors rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sm:min-h-0'
+const buttonClass = 'flex min-h-11 items-center gap-1 w-full text-label ui-table-head cursor-pointer select-none transition-colors rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sm:min-h-0'
 </script>
 
 <template>

package/app/components/element/UiAtmosphere.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { readDesignSystemConfig } from '../../composables/design-system-config'
 // The greydient application primitive. Turns intent into a correctly-rendered
-// atmospheric layer — palette × geometry × intensity, plus grain — with the
+// atmospheric layer — palette × geometry × intensity, plus opt-in grain — with the
 // mask/opacity/mode-handling all centralized in global.css (`.ui-atmosphere`).
 // Consumers place it as the first child of a `relative` container (content then
 // sits above it); for `sky` it spans the top of the nearest positioned ancestor.
@@ -18,7 +19,8 @@ const {
   palette: paletteProp,
   geometry: geometryProp,
   intensity: intensityProp,
-  grain = true,
+  grain = undefined,
+  bloomMask = undefined,
   preset,
 } = defineProps<{
   /** Which greydient — the day-cycle of visibility states. */
@@ -27,8 +29,17 @@ const {
   geometry?: Geometry
   /** How present, per mode. subtle behind text; vivid is reserved for tiny identity surfaces. */
   intensity?: Intensity
-  /** Fine grain for tooth. Default on. */
+  /**
+   * Fine grain for tooth. Unset, it follows `designSystem.atmosphere.grain` in
+   * app.config, which is off unless a site turns it on.
+   */
   grain?: boolean
+  /**
+   * Fade the `bloom` geometry to a centred glow. Unset, it follows
+   * `designSystem.atmosphere.bloomMask` in app.config, which is off unless a
+   * site turns it on. Other geometries keep their own masks.
+   */
+  bloomMask?: boolean
   /** Semantic shortcut — resolves palette+geometry+intensity from one intent. Explicit props win. */
   preset?: Preset
 }>()
@@ -50,6 +61,12 @@ const base = computed(() => (preset ? PRESETS[preset] : { palette: 'ash' as Pale
 const palette = computed(() => paletteProp ?? base.value.palette)
 const geometry = computed(() => geometryProp ?? base.value.geometry)
 const intensity = computed(() => intensityProp ?? base.value.intensity)
+
+// Grain and the bloom mask are brand choices, so a site opts in once. Nuxt
+// SEO's `layers/brand` app.config turns both on.
+const siteAtmosphere = readDesignSystemConfig().atmosphere
+const hasGrain = computed(() => grain ?? siteAtmosphere?.grain ?? false)
+const hasBloomMask = computed(() => bloomMask ?? siteAtmosphere?.bloomMask ?? false)
 </script>
 
 <template>
@@ -58,7 +75,8 @@ const intensity = computed(() => intensityProp ?? base.value.intensity)
     class="ui-atmosphere"
     :data-geometry="geometry"
     :data-intensity="intensity"
-    :data-grain="grain ? '' : undefined"
+    :data-grain="hasGrain ? '' : undefined"
+    :data-bloom-mask="geometry === 'bloom' && hasBloomMask ? '' : undefined"
     :style="{ '--_atmo-greydient': `var(--greydient-${palette})` }"
   />
 </template>

package/app/components/element/UiConfirmDialog.vue

@@ -1,13 +1,20 @@
 <script setup lang="ts">
-import type { ConfirmTone } from '../../composables/useConfirm'
+import type { VNodeChild } from 'vue'
+import type { ConfirmResult, ConfirmTone } from '../../composables/useConfirm'
+import { ref } from 'vue'
 import { UiButton, UiIcon, UModal } from '#components'
 
 /**
  * UiConfirmDialog: the one "are you sure" for an action that is hard to undo.
  *
  * Open it through `useConfirm()`, which resolves `true` for the confirm button
- * and `false` for Cancel, Escape, or a click outside. The dialog never runs the
- * action itself, so the caller keeps its own pending state and error handling.
+ * and `false` for Cancel, Escape, or a click outside. With an `action`, the
+ * confirm button runs it and shows its loading state until it settles, and
+ * the dialog cannot be dismissed meanwhile. Then the dialog closes; a failed
+ * action rejects the `useConfirm()` promise with its error.
+ *
+ * The `#body` slot, or the `body` render function from `useConfirm()`, holds
+ * rich content under the description, such as a bold Site name.
  *
  * Focus lands on Cancel for a `danger` tone, so Enter on a stray keypress
  * cancels. A `default` tone focuses the confirm button.
@@ -18,6 +25,8 @@ const {
   confirmLabel,
   cancelLabel = 'Cancel',
   tone = 'danger',
+  body,
+  action,
 } = defineProps<{
   /** A question that names the action and its object: "Disconnect Google?" */
   title: string
@@ -27,13 +36,43 @@ const {
   confirmLabel: string
   cancelLabel?: string
   tone?: ConfirmTone
+  /** Rich content under the description. The `#body` slot wins over it. */
+  body?: () => VNodeChild
+  /** Runs on confirm while the confirm button shows its loading state. */
+  action?: () => Promise<unknown>
 }>()
 
 const emit = defineEmits<{
-  /** `true` confirms. Nuxt UI's overlay resolves the open promise with it. */
-  close: [confirmed: boolean]
+  /** Nuxt UI's overlay resolves the open promise with this result. */
+  close: [result: ConfirmResult]
+}>()
+
+defineSlots<{
+  body?: () => unknown
 }>()
 
+const pending = ref(false)
+
+async function confirm(): Promise<void> {
+  if (!action) {
+    emit('close', { _tag: 'Confirmed' })
+    return
+  }
+  pending.value = true
+  // Promise.resolve().then() turns a synchronous throw into a rejection, so
+  // the dialog always leaves its loading state.
+  const result = await Promise.resolve().then(action).then(
+    (): ConfirmResult => ({ _tag: 'Confirmed' }),
+    (error: unknown): ConfirmResult => ({ _tag: 'ActionFailed', error }),
+  )
+  pending.value = false
+  emit('close', result)
+}
+
+function Body() {
+  return body?.()
+}
+
 // Reka focuses the first focusable element unless this handler moves focus.
 // Pick the button by tone instead of trusting the DOM order.
 function onOpenAutoFocus(event: Event): void {
@@ -51,6 +90,7 @@ function onOpenAutoFocus(event: Event): void {
     :title="title"
     :description="description"
     :close="false"
+    :dismissible="!pending"
     :content="{ onOpenAutoFocus }"
     :ui="{ content: 'sm:max-w-md', description: 'text-pretty' }"
   >
@@ -62,6 +102,11 @@ function onOpenAutoFocus(event: Event): void {
         {{ title }}
       </span>
     </template>
+    <template v-if="$slots.body || body" #body>
+      <slot name="body">
+        <Body />
+      </slot>
+    </template>
     <template #footer>
       <div class="flex w-full flex-col-reverse gap-2 sm:flex-row sm:justify-end">
         <UiButton
@@ -69,14 +114,16 @@ function onOpenAutoFocus(event: Event): void {
           class="min-h-11 sm:min-h-0"
           data-confirm-focus="cancel"
           :label="cancelLabel"
-          @click="emit('close', false)"
+          :disabled="pending"
+          @click="emit('close', { _tag: 'Cancelled' })"
         />
         <UiButton
           :purpose="tone === 'danger' ? 'danger' : 'cta'"
           class="min-h-11 sm:min-h-0"
           data-confirm-focus="confirm"
           :label="confirmLabel"
-          @click="emit('close', true)"
+          :loading="pending"
+          @click="confirm"
         />
       </div>
     </template>

package/app/components/element/UiOnboardingAnswers.vue

@@ -21,6 +21,11 @@ import { ONBOARDING_INTENTS } from './onboarding-intents'
 // The goals list and the copy name the product, so a site that extends this
 // layer passes its own `intents` and any `copy` keys it rewords. The option
 // ids are shared and stored, so they never change.
+//
+// A site with its own look draws the controls through two scoped slots and
+// keeps this component's answer logic: `#option` draws one single-choice
+// option and `#intents` draws the goals and the free-text box. Saving stays
+// with the site: this layer never fetches.
 const {
   intents = ONBOARDING_INTENTS,
   copy: copyOverrides = {},
@@ -28,6 +33,19 @@ const {
   intents?: readonly OnboardingIntent[]
   copy?: Partial<OnboardingAnswersCopy>
 }>()
+defineSlots<{
+  /** One single-choice option. `pick` selects it, or clears it when it is already picked. */
+  option?: (props: { question: SingleKey, option: { id: string, label: string }, selected: boolean, pick: () => void }) => unknown
+  /** The goals and the free-text box, under the goals question. */
+  intents?: (props: {
+    intents: readonly OnboardingIntent[]
+    selected: readonly string[]
+    toggle: (intent: string) => void
+    other: string
+    setOther: (other: string) => void
+  }) => unknown
+}>()
+
 const copy = computed<OnboardingAnswersCopy>(() => ({ ...ONBOARDING_ANSWERS_COPY, ...copyOverrides }))
 const answers = defineModel<OnboardingAnswersDraft>({ required: true })
 
@@ -69,16 +87,24 @@ const restClass = 'border-accented bg-default/80 text-default hover:border-prima
         {{ item.question }}
       </legend>
       <div class="flex flex-wrap gap-2">
-        <button
-          v-for="option in item.options"
-          :key="option.id"
-          type="button"
-          :aria-pressed="answers[item.key] === option.id"
-          :class="[chipClass, answers[item.key] === option.id ? selectedClass : restClass]"
-          @click="pick(item.key, option.id)"
-        >
-          {{ option.label }}
-        </button>
+        <template v-for="option in item.options" :key="option.id">
+          <slot
+            name="option"
+            :question="item.key"
+            :option="option"
+            :selected="answers[item.key] === option.id"
+            :pick="() => pick(item.key, option.id)"
+          >
+            <button
+              type="button"
+              :aria-pressed="answers[item.key] === option.id"
+              :class="[chipClass, answers[item.key] === option.id ? selectedClass : restClass]"
+              @click="pick(item.key, option.id)"
+            >
+              {{ option.label }}
+            </button>
+          </slot>
+        </template>
       </div>
     </fieldset>
 
@@ -86,42 +112,51 @@ const restClass = 'border-accented bg-default/80 text-default hover:border-prima
       <legend class="text-sm font-medium text-highlighted">
         {{ copy.intentsQuestion }}
       </legend>
-      <p class="text-xs text-muted">
+      <p v-if="copy.intentsHint" class="text-xs text-muted">
         {{ copy.intentsHint }}
       </p>
-      <div class="flex flex-wrap gap-2">
-        <button
-          v-for="intent in intents"
-          :key="intent.id"
-          type="button"
-          :aria-pressed="answers.intents.includes(intent.id)"
-          :class="[chipClass, answers.intents.includes(intent.id) ? selectedClass : restClass]"
-          @click="toggleIntent(intent.id)"
-        >
-          <UiIcon
-            :name="answers.intents.includes(intent.id) ? 'check' : intent.icon"
-            class="size-4 shrink-0"
-            :class="answers.intents.includes(intent.id) ? 'text-primary' : 'text-muted'"
-            aria-hidden="true"
+      <slot
+        name="intents"
+        :intents="intents"
+        :selected="answers.intents"
+        :toggle="toggleIntent"
+        :other="answers.other ?? ''"
+        :set-other="setOther"
+      >
+        <div class="flex flex-wrap gap-2">
+          <button
+            v-for="intent in intents"
+            :key="intent.id"
+            type="button"
+            :aria-pressed="answers.intents.includes(intent.id)"
+            :class="[chipClass, answers.intents.includes(intent.id) ? selectedClass : restClass]"
+            @click="toggleIntent(intent.id)"
+          >
+            <UiIcon
+              :name="answers.intents.includes(intent.id) ? 'check' : intent.icon"
+              class="size-4 shrink-0"
+              :class="answers.intents.includes(intent.id) ? 'text-primary' : 'text-muted'"
+              aria-hidden="true"
+            />
+            {{ intent.label }}
+          </button>
+        </div>
+        <div class="space-y-1.5 pt-1">
+          <label :for="otherId" class="text-xs text-muted">
+            {{ copy.otherLabel }}
+          </label>
+          <UTextarea
+            :id="otherId"
+            :model-value="answers.other"
+            :maxlength="ONBOARDING_OTHER_MAX_LENGTH"
+            :rows="2"
+            autoresize
+            :placeholder="copy.otherPlaceholder"
+            class="w-full"
+            @update:model-value="setOther(String($event ?? ''))"
           />
-          {{ intent.label }}
-        </button>
-      </div>
-      <div class="space-y-1.5 pt-1">
-        <label :for="otherId" class="text-xs text-muted">
-          {{ copy.otherLabel }}
-        </label>
-        <UTextarea
-          :id="otherId"
-          :model-value="answers.other"
-          :maxlength="ONBOARDING_OTHER_MAX_LENGTH"
-          :rows="2"
-          autoresize
-          :placeholder="copy.otherPlaceholder"
-          class="w-full"
-          @update:model-value="setOther(String($event ?? ''))"
-        />
-      </div>
+        </div>
+      </slot>
     </fieldset>
   </div>
 </template>

package/app/components/element/UiSkeleton.vue

@@ -10,6 +10,7 @@ defineOptions({ inheritAttrs: false })
 const {
   type = 'text',
   lines = 1,
+  count = 1,
   index = 0,
   base = 160,
   range = 80,
@@ -20,10 +21,16 @@ const {
    * decide the box — use it whenever the placeholder must match a known layout
    * (a `w-full` row, a fixed-width label). The self-sizing types write an inline
    * `width`/`height`, which silently beats any `w-*`/`h-*` class passed in.
+   *
+   * The presets draw a whole page-level loading shape: `table-row` (a name
+   * column and three value columns), `stat` (stat blocks in a grid), `chart`
+   * (16 bars), and `card` (two-column cards). `count` sets how many.
    */
-  type?: 'text' | 'bar' | 'circle' | 'block'
+  type?: 'text' | 'bar' | 'circle' | 'block' | 'table-row' | 'stat' | 'chart' | 'card'
   /** Number of skeleton lines (text type only) */
   lines?: number
+  /** Number of rows, stat blocks, or cards (presets only). The chart always draws 16 bars. */
+  count?: number
   /** Seed index for deterministic width/height variation */
   index?: number
   /** Base size in px — text: width, bar: height percent, circle: diameter */
@@ -94,6 +101,48 @@ function barHeight(i: number): string {
     class="ui-skeleton rounded-full"
     :style="{ width: `${base}px`, height: `${base}px` }"
   />
+
+  <!-- Preset: table rows, a name column then three value columns -->
+  <div v-else-if="type === 'table-row'" aria-hidden="true" v-bind="attrs" class="space-y-2">
+    <div
+      v-for="i in count"
+      :key="i"
+      class="grid grid-cols-[minmax(120px,2fr)_repeat(3,minmax(56px,1fr))] items-center gap-3"
+    >
+      <div class="ui-skeleton rounded h-3 max-w-full" :style="{ width: textWidth(i) }" />
+      <div class="ui-skeleton rounded h-3 w-full" />
+      <div class="ui-skeleton rounded h-3 w-2/3 justify-self-end" />
+      <div class="ui-skeleton rounded h-3 w-1/2 justify-self-end" />
+    </div>
+  </div>
+
+  <!-- Preset: stat blocks -->
+  <div v-else-if="type === 'stat'" aria-hidden="true" v-bind="attrs" class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+    <div v-for="i in count" :key="i" class="space-y-2 rounded-lg border border-default bg-muted p-3">
+      <div class="ui-skeleton rounded h-3 w-20" />
+      <div class="ui-skeleton rounded h-6 max-w-full" :style="{ width: textWidth(i + 10) }" />
+      <div class="ui-skeleton rounded h-3 w-24" />
+    </div>
+  </div>
+
+  <!-- Preset: a bar chart -->
+  <div v-else-if="type === 'chart'" aria-hidden="true" v-bind="attrs" class="flex h-56 items-end gap-2">
+    <div
+      v-for="i in 16"
+      :key="i"
+      class="ui-skeleton rounded flex-1"
+      :style="{ height: barHeight(i) }"
+    />
+  </div>
+
+  <!-- Preset: cards -->
+  <div v-else-if="type === 'card'" aria-hidden="true" v-bind="attrs" class="grid gap-3 sm:grid-cols-2">
+    <div v-for="i in count" :key="i" class="space-y-3 rounded-lg border border-default bg-muted p-4">
+      <div class="ui-skeleton rounded h-4 max-w-full" :style="{ width: textWidth(i) }" />
+      <div class="ui-skeleton rounded h-3 w-full" />
+      <div class="ui-skeleton rounded h-3 w-2/3" />
+    </div>
+  </div>
 </template>
 
 <!--

package/app/components/element/UiTooltip.vue

@@ -87,6 +87,12 @@ function captureChildTrigger(event: Event): void {
     childTriggerElement.value = event.currentTarget
 }
 
+// One object, not two `@` listeners: gscdump.com's TypeScript 7.1 native
+// typecheck rejected `@pointermove` and `@focus` on reka's `TooltipTrigger`.
+// Listeners bound through `v-bind` fall through to the rendered root the same
+// way.
+const childTriggerListeners = { onPointermove: captureChildTrigger, onFocus: captureChildTrigger }
+
 // Span trigger. Reka listens for `focus` on the trigger itself, and focus does
 // not bubble, so a focusable child (a button, a link, a tabindex cell) never
 // opened the tooltip and the description landed on the span. Listen for
@@ -231,8 +237,7 @@ export const sizes = {
         v-if="$slots.default && triggerAs === 'child'"
         :reference="childTriggerElement"
         as-child
-        @pointermove="captureChildTrigger"
-        @focus="captureChildTrigger"
+        v-bind="childTriggerListeners"
       >
         <slot />
       </TooltipTrigger>

package/app/components/element/UiTrend.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { UiIcon } from '#components'
+import { readDesignSystemConfig } from '../../composables/design-system-config'
 import { clamp } from '../../utils/number'
 
 const {
@@ -10,7 +11,7 @@ const {
   format = 'number',
   showSign = false,
   inverted = false,
-  colored = false,
+  colored = undefined,
   isNew = false,
   isLost = false,
   autoLost = true,
@@ -29,7 +30,8 @@ const {
   /**
    * Trend color budget (DESIGN.md Composition): colored success/error trends
    * belong to the hero zone only. Default renders neutral (sign + value);
-   * hero components (UiMetricsRow, UiMetricStat, hero cards) opt in.
+   * hero components (UiMetricsRow, UiMetricStat, hero cards) opt in. A site
+   * that colours every trend sets `designSystem.trend.colored` in app.config.
    */
   colored?: boolean
   /** Show a "NEW" badge instead of trend value */
@@ -51,15 +53,21 @@ const {
   precision?: number | 'auto'
 }>()
 
+// `2xs` and `xs` read the type seam (`--ui-trend-2xs-size`, `--ui-trend-xs-size`).
 const sizes = {
-  '2xs': 'text-mini',
-  'xs': 'text-xs',
+  '2xs': 'ui-trend-2xs',
+  'xs': 'ui-trend-xs',
   'sm': 'text-sm',
   'md': 'text-base',
   'lg': 'text-lg',
   'xl': 'text-xl',
 } as const
 
+// An unset prop takes the site's default. Nuxt SEO's app.config sets none, so
+// its trends stay neutral (DESIGN.md, trend colour budget).
+const siteColored = readDesignSystemConfig().trend?.colored ?? false
+const isColored = computed(() => colored ?? siteColored)
+
 const numericValue = computed(() => typeof value === 'string' ? Number.parseFloat(value) : value)
 
 // Auto-detect "lost" state: percent format and value <= -100 means went to zero
@@ -78,7 +86,7 @@ const clampsValue = computed(() => shouldClamp && format === 'percent')
 
 const trendColor = computed(() => {
   const t = trend.value
-  if (t === 0 || !colored)
+  if (t === 0 || !isColored.value)
     return 'text-muted'
   const positive = inverted ? t === -1 : t === 1
   return positive ? 'text-success' : 'text-error'
@@ -144,11 +152,11 @@ const classes = computed(() => {
 
 <template>
   <!-- NEW badge mode -->
-  <span v-if="isNew" data-ui="UiTrend" class="inline-flex items-center font-medium uppercase px-1.5 py-0.5 rounded bg-success/10 text-success" :class="sizes[size as keyof typeof sizes]">
+  <span v-if="isNew" data-ui="UiTrend" class="inline-flex items-center font-medium [text-transform:var(--ui-trend-badge-case,uppercase)] px-1.5 py-0.5 rounded bg-success/10 text-success" :class="sizes[size as keyof typeof sizes]">
     New
   </span>
   <!-- LOST badge mode (explicit or auto-detected from -100% change) -->
-  <span v-else-if="isLost || detectedLost" data-ui="UiTrend" class="inline-flex items-center font-medium uppercase px-1.5 py-0.5 rounded bg-error/10 text-error" :class="sizes[size as keyof typeof sizes]">
+  <span v-else-if="isLost || detectedLost" data-ui="UiTrend" class="inline-flex items-center font-medium [text-transform:var(--ui-trend-badge-case,uppercase)] px-1.5 py-0.5 rounded bg-error/10 text-error" :class="sizes[size as keyof typeof sizes]">
     Lost
   </span>
   <!-- Zero trend — show dash -->
@@ -158,7 +166,7 @@ const classes = computed(() => {
     v-else-if="isClamped"
     data-ui="UiTrend"
     class="inline-flex items-center whitespace-nowrap leading-none font-semibold tracking-tight px-1.5 py-0.5 ml-1 rounded cursor-default"
-    :class="[classes, colored ? (trend === 1 ? 'bg-success/10' : 'bg-error/10') : 'bg-muted']"
+    :class="[classes, isColored ? (trend === 1 ? 'bg-success/10' : 'bg-error/10') : 'bg-muted']"
     :title="fullValue"
   >
     {{ trend === 1 ? '10x+' : 'oof' }}

package/app/composables/design-system-config.ts

@@ -0,0 +1,29 @@
+import type { FailureCopy, FailureCopyOverrides } from '../shared/failure-copy'
+import { tryUseNuxtApp, useAppConfig } from 'nuxt/app'
+import { resolveFailureCopy } from '../shared/failure-copy'
+
+/**
+ * The runtime brand seams a site sets under `designSystem` in app.config.
+ * README (Brand seams) documents each key. Unset keys keep Nuxt SEO's
+ * behaviour, so the layer's own app.config sets none of them.
+ */
+export interface DesignSystemAppConfig {
+  /** `UiTrend`'s `colored` when a caller passes none. Default false. */
+  readonly trend?: { readonly colored?: boolean }
+  /** `UiAtmosphere`'s grain and `bloom` mask when a caller passes none. Default off. */
+  readonly atmosphere?: { readonly grain?: boolean, readonly bloomMask?: boolean }
+  /** Rewords the failure copy (`FailureCopyOverrides`). */
+  readonly failureCopy?: FailureCopyOverrides
+}
+
+/** The site's `designSystem` app.config, or none outside a Nuxt app. Call it in setup. */
+export function readDesignSystemConfig(): DesignSystemAppConfig {
+  if (!tryUseNuxtApp())
+    return {}
+  return (useAppConfig().designSystem ?? {}) as DesignSystemAppConfig
+}
+
+/** The failure copy with the site's overrides applied. Call it in setup. */
+export function readFailureCopy(): FailureCopy {
+  return resolveFailureCopy(readDesignSystemConfig().failureCopy)
+}