@nuxtseo/design-system 0.1.0 → 0.1.2

package/app/components/data/UiTable.vue

@@ -8,12 +8,12 @@ import type {
   RowSelectionState,
   SortingState,
 } from '@tanstack/vue-table'
-import type { UiTableColumn, UiTableFeatures, UiTableRowId, UiTableSize } from '../../shared/table'
+import type { UiTableColumn, UiTableFeatures, UiTableProps, UiTableSlots } from '../../shared/table'
 import { FlexRender, functionalUpdate, useTable } from '@tanstack/vue-table'
 import { useIntersectionObserver } from '@vueuse/core'
-import { computed, ref, toRef, useId, useSlots, useTemplateRef, watch } from 'vue'
+import { computed, ref, toRef, useId, useTemplateRef, watch } from 'vue'
 import { UiButton, UiSkeleton, UiTableExport, UiTableFrame, UiTableHeaderCell, UPagination } from '#components'
-import { resolveUiTableRowId, uiTableCellSizeClass, uiTableFeatures, uiTableSkeletonSizeClass, uiTableVisibleFromClass } from '../../shared/table'
+import { resolveUiTableRowId, uiTableCellSizeClass, uiTableCellSlotName, uiTableFeatures, uiTableSkeletonSizeClass, uiTableVisibleFromClass } from '../../shared/table'
 import { uiTableExport } from '../../shared/table-export'
 
 const {
@@ -51,6 +51,8 @@ const emit = defineEmits<{
   'sortColumn': [column: string]
 }>()
 
+const slots = defineSlots<UiTableSlots<T>>()
+
 const selectedModel = defineModel<RowSelectionState>('selected')
 const pageModel = defineModel<number>('page', { default: 1 })
 const sortingModel = defineModel<SortingState>('sorting', { default: () => [] })
@@ -170,8 +172,6 @@ function onRowKeydown(e: KeyboardEvent, row: T, tanstackRow: Row<UiTableFeatures
   }
 }
 
-const slots = useSlots()
-
 // Optional trailing actions column (row buttons/menus). Rendered outside the
 // TanStack column model so callers express rich actions as a slot, not a cell
 // render fn. `colSpan` accounts for it in the empty/skeleton rows.
@@ -283,49 +283,6 @@ if (import.meta.dev) {
 }
 </script>
 
-<script lang="ts">
-export interface UiTableProps<T extends object> {
-  data: T[]
-  columns: UiTableColumn<T>[]
-  selected?: RowSelectionState
-  controlledSelection?: boolean
-  rowHover?: boolean
-  rowClickable?: boolean
-  enableSorting?: boolean
-  /** Caller owns sort state; UiTable emits @sortColumn and bypasses client-side sorting. */
-  manualSorting?: boolean
-  pageSize?: number
-  ignoreHeader?: boolean
-  size?: UiTableSize
-  loading?: boolean
-  loadingRows?: number
-  rowId?: UiTableRowId<T>
-  manualPagination?: boolean
-  disablePagination?: boolean
-  total?: number
-  /** Accessible name for the table. Rendered as a visually-hidden <caption>. */
-  label: string
-  /** Draw the canonical rounded table surface. */
-  bordered?: boolean
-  /** Pagination density. Compact renders previous, page position, and next only. */
-  paginationPreset?: 'default' | 'compact'
-  /** Fill the caller's available height and keep pagination pinned to the bottom. */
-  fill?: boolean
-  /** Extra classes applied per data row — e.g. a selection highlight. */
-  rowClass?: (row: T) => string
-  /** Row id presented as the active item in a click-through table. */
-  activeRowId?: string
-  /** Row id to open when the table first receives deep-linked evidence. */
-  initialExpandedRowId?: string
-  /**
-   * Show Export CSV and Export JSON, saving to this file name without the
-   * extension. The export holds every filtered and sorted row, not one page.
-   * Ignored with `manualPagination`: mount `UiTableExport` with every row.
-   */
-  exportFilename?: string
-}
-</script>
-
 <template>
   <div class="w-full" :class="fill && 'flex h-full min-h-0 flex-col'">
     <UiTableExport
@@ -353,7 +310,7 @@ export interface UiTableProps<T extends object> {
             <th
               v-for="header in headerGroup.headers"
               :key="header.id"
-              class="text-label text-left whitespace-nowrap border-b border-default bg-default"
+              class="text-label ui-table-head text-left whitespace-nowrap border-b border-default bg-default"
               :class="[
                 uiColumnDef(header.column).noPadding ? '' : header.column.getCanSort() ? 'px-2' : 'px-3',
                 getTextAlignClass(uiColumnDef(header.column).align, uiColumnDef(header.column).numeric),
@@ -397,7 +354,7 @@ export interface UiTableProps<T extends object> {
                   v-for="cell in row.getVisibleCells()"
                   :key="cell.id"
                   :scope="uiColumnDef(cell.column).rowHeader ? 'row' : undefined"
-                  class="text-xs font-normal text-default relative"
+                  class="ui-table-cell font-normal text-default relative"
                   :class="[
                     uiTableCellSizeClass[size],
                     uiColumnDef(cell.column).noPadding ? '' : cell.column.getCanSort() ? 'px-2' : 'px-3',
@@ -422,6 +379,13 @@ export interface UiTableProps<T extends object> {
                     :base="60"
                     :range="50"
                   />
+                  <slot
+                    v-else-if="slots[uiTableCellSlotName(cell.column.id)]"
+                    :name="uiTableCellSlotName(cell.column.id)"
+                    :row="row"
+                    :cell="cell"
+                    :value="cell.getValue()"
+                  />
                   <FlexRender v-else :cell="cell" />
                 </component>
                 <td v-if="hasActions" class="text-right whitespace-nowrap px-3" :class="uiTableCellSizeClass[size]" @click.stop>
@@ -444,7 +408,7 @@ export interface UiTableProps<T extends object> {
               <td
                 v-for="(col, j) in columns"
                 :key="j"
-                class="text-xs px-3"
+                class="ui-table-cell px-3"
                 :class="[
                   uiTableCellSizeClass[size],
                   getTextAlignClass(col.align, col.numeric),
@@ -458,7 +422,7 @@ export interface UiTableProps<T extends object> {
 
           <tr v-else>
             <td :colspan="colSpan" class="h-24 text-center" role="status">
-              <slot name="empty-component">
+              <slot name="empty">
                 <span class="text-xs font-mono text-dimmed">0 rows · adjust filters</span>
               </slot>
             </td>

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

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { OnboardingAnswersDraft } from './onboarding-answers'
+import type { OnboardingAnswersCopy, OnboardingAnswersDraft } from './onboarding-answers'
 import type { OnboardingIntent } from './onboarding-intents'
-import { useId } from 'vue'
+import { computed, useId } from 'vue'
 import { UiIcon, UTextarea } from '#components'
 import {
+  ONBOARDING_ANSWERS_COPY,
   ONBOARDING_OTHER_MAX_LENGTH,
-  ONBOARDING_QUESTIONS,
   ONBOARDING_ROLES,
   ONBOARDING_SEO_EXPERIENCE,
   ONBOARDING_SITE_COUNTS,
@@ -18,27 +18,47 @@ import { ONBOARDING_INTENTS } from './onboarding-intents'
 // the live teams/create wizard and the brand-kit showcase both v-model the
 // draft and decide when to save it.
 //
-// The goals list and its question name the product, so a site that extends this
-// layer passes its own. The other questions and their ids are shared.
+// 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,
-  intentsQuestion = ONBOARDING_QUESTIONS.intents,
+  copy: copyOverrides = {},
 } = defineProps<{
   intents?: readonly OnboardingIntent[]
-  intentsQuestion?: string
+  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 })
 
 const id = useId()
 const otherId = `${id}-other`
 
-const singleQuestions = [
-  { key: 'role', question: ONBOARDING_QUESTIONS.role, options: ONBOARDING_ROLES },
-  { key: 'siteCount', question: ONBOARDING_QUESTIONS.siteCount, options: ONBOARDING_SITE_COUNTS },
-  { key: 'seoExperience', question: ONBOARDING_QUESTIONS.seoExperience, options: ONBOARDING_SEO_EXPERIENCE },
-] as const
+const singleQuestions = computed(() => [
+  { key: 'role', question: copy.value.roleQuestion, options: ONBOARDING_ROLES },
+  { key: 'siteCount', question: copy.value.siteCountQuestion, options: ONBOARDING_SITE_COUNTS },
+  { key: 'seoExperience', question: copy.value.seoExperienceQuestion, options: ONBOARDING_SEO_EXPERIENCE },
+] as const)
 
-type SingleKey = (typeof singleQuestions)[number]['key']
+type SingleKey = 'role' | 'siteCount' | 'seoExperience'
 
 function pick(key: SingleKey, value: string) {
   answers.value = { ...answers.value, [key]: answers.value[key] === value ? undefined : value }
@@ -67,59 +87,76 @@ 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>
 
     <fieldset class="space-y-2.5">
       <legend class="text-sm font-medium text-highlighted">
-        {{ intentsQuestion }}
+        {{ copy.intentsQuestion }}
       </legend>
-      <p class="text-xs text-muted">
-        Pick any that fit.
+      <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">
-          Anything else? Optional.
-        </label>
-        <UTextarea
-          :id="otherId"
-          :model-value="answers.other"
-          :maxlength="ONBOARDING_OTHER_MAX_LENGTH"
-          :rows="2"
-          autoresize
-          placeholder="Tell us what you're after"
-          class="w-full"
-          @update:model-value="setOther(String($event ?? ''))"
-        />
-      </div>
+        </div>
+      </slot>
     </fieldset>
   </div>
 </template>

package/app/components/element/UiSelect.vue

@@ -18,7 +18,7 @@ import { USelect } from '#components'
 defineOptions({ inheritAttrs: false })
 
 const props = defineProps<Props>()
-const emit = defineEmits<SelectEmits<T, VK, M>>()
+const emit = defineEmits<Omit<SelectEmits<T, VK, M>, 'update:modelValue'> & { 'update:modelValue': [value: ModelValue] }>()
 /**
  * `open`, `defaultOpen` and `portal` are omitted deliberately, and dropping any
  * of them from this list breaks every select in the app.
@@ -37,13 +37,26 @@ const emit = defineEmits<SelectEmits<T, VK, M>>()
  * No caller passes any of the three, so omitting them costs nothing.
  */
 type Props = Omit<SelectProps<T, VK, M>, 'defaultValue' | 'modelModifiers' | 'open' | 'defaultOpen' | 'portal'>
+/**
+ * The value USelect emits is always a picked item, so the model never emits
+ * `undefined` and a caller may v-model a ref that never holds it. The type is
+ * read from SelectProps, not rebuilt from Nuxt UI's private ExcludeItem
+ * generic. Inside this generic component TypeScript 7.1 cannot prove that
+ * USelect's own emitted type matches it, so `updateModel` takes the value
+ * untyped and the caller-facing emit carries the type.
+ */
+type ModelValue = NonNullable<SelectProps<T, VK, M>['modelValue']>
+
+function updateModel(value: unknown) {
+  emit('update:modelValue', value as ModelValue)
+}
 </script>
 
 <template>
   <!-- @vue-generic {T, VK, M} -->
   <USelect
     v-bind="{ ...props, ...$attrs }"
-    @update:model-value="emit('update:modelValue', $event)"
+    @update:model-value="updateModel"
     @blur="emit('blur', $event)"
     @change="emit('change', $event)"
     @focus="emit('focus', $event)"