feat: add selects to ui library (#1290)

app/components/Input/Base.vue

···
     v-bind="props.noCorrect ? noCorrect : undefined"
     @focus="emit('focus', $event)"
     @blur="emit('blur', $event)"
-    class="bg-bg-subtle border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
+    class="appearance-none bg-bg-subtle border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
     :class="{
       'text-xs leading-[1.2] px-2 py-2 rounded-md': size === 'small',
       'text-sm leading-none px-3 py-2.5 rounded-lg': size === 'medium',
-      'text-base leading-none px-6 py-3.5 h-14 rounded-xl': size === 'large',
+      'text-base leading-[1.4] px-6 py-4 rounded-xl': size === 'large',
     }"
     :disabled="
       /** Catching Vue render-bug of invalid `disabled=false` attribute in the final HTML */

app/components/Org/MembersPanel.vue

···
 // Search/filter
 const searchQuery = shallowRef('')
 const filterRole = shallowRef<MemberRoleFilter>('all')
-const filterTeam = shallowRef<string | null>(null)
+const filterTeam = shallowRef<string>('')
 const sortBy = shallowRef<'name' | 'role'>('name')
 const sortOrder = shallowRef<'asc' | 'desc'>('asc')
 
···
       </div>
       <!-- Team filter -->
       <div v-if="teamNames.length > 0">
-        <label for="team-filter" class="sr-only">{{ $t('org.members.filter_by_team') }}</label>
-        <select
+        <SelectField
+          :label="$t('org.members.filter_by_team')"
+          hidden-label
           id="team-filter"
           v-model="filterTeam"
           name="team-filter"
-          class="px-2 py-1 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
-        >
-          <option :value="null">{{ $t('org.members.all_teams') }}</option>
-          <option v-for="team in teamNames" :key="team" :value="team">
-            {{ team }}
-          </option>
-        </select>
+          block
+          size="sm"
+          :items="[
+            { label: $t('org.members.all_teams'), value: '' },
+            ...teamNames.map(team => ({ label: team, value: team })),
+          ]"
+        />
       </div>
       <div
         class="flex items-center gap-1 text-xs"
···
             <label :for="`role-${member.name}`" class="sr-only">{{
               $t('org.members.change_role_for', { name: member.name })
             }}</label>
-            <select
+            <SelectField
+              :label="$t('org.members.change_role_for', { name: member.name })"
+              hidden-label
               :id="`role-${member.name}`"
+              :model-value="member.role"
+              :name="`role-${member.name}`"
+              block
+              size="sm"
+              :items="[
+                { label: getRoleLabel('developer'), value: 'developer' },
+                { label: getRoleLabel('admin'), value: 'admin' },
+                { label: getRoleLabel('owner'), value: 'owner' },
+              ]"
               :value="member.role"
-              :name="`role-${member.name}`"
-              class="px-1.5 py-0.5 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
-              @change="
-                handleChangeRole(
-                  member.name,
-                  ($event.target as HTMLSelectElement).value as 'developer' | 'admin' | 'owner',
-                )
-              "
-            >
-              <option value="developer">{{ getRoleLabel('developer') }}</option>
-              <option value="admin">{{ getRoleLabel('admin') }}</option>
-              <option value="owner">{{ getRoleLabel('owner') }}</option>
-            </select>
+              @update:modelValue="value => handleChangeRole(member.name, value as MemberRole)"
+            />
             <!-- Remove button -->
             <button
               type="button"
···
             size="small"
           />
           <div class="flex items-center gap-2">
-            <label for="new-member-role" class="sr-only">{{ $t('org.members.role_label') }}</label>
-            <select
+            <SelectField
+              :label="$t('org.members.role_label')"
+              hidden-label
               id="new-member-role"
               v-model="newRole"
               name="new-member-role"
-              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
-            >
-              <option value="developer">{{ $t('org.members.role.developer') }}</option>
-              <option value="admin">{{ $t('org.members.role.admin') }}</option>
-              <option value="owner">{{ $t('org.members.role.owner') }}</option>
-            </select>
+              block
+              class="flex-1"
+              size="sm"
+              :items="[
+                { label: $t('org.members.role.developer'), value: 'developer' },
+                { label: $t('org.members.role.admin'), value: 'admin' },
+                { label: $t('org.members.role.owner'), value: 'owner' },
+              ]"
+            />
             <!-- Team selection -->
-            <label for="new-member-team" class="sr-only">{{ $t('org.members.team_label') }}</label>
-            <select
+            <SelectField
+              :label="$t('org.members.team_label')"
+              hidden-label
               id="new-member-team"
               v-model="newTeam"
               name="new-member-team"
-              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
-            >
-              <option value="">{{ $t('org.members.no_team') }}</option>
-              <option v-for="team in teamNames" :key="team" :value="team">
-                {{ team }}
-              </option>
-            </select>
+              block
+              class="flex-1"
+              size="sm"
+              :items="[
+                { label: $t('org.members.no_team'), value: '' },
+                ...teamNames.map(team => ({ label: team, value: team })),
+              ]"
+            />
             <button
               type="submit"
               :disabled="!newUsername.trim() || isAddingMember"

app/components/Package/AccessControls.vue

···
     <div v-if="showGrantAccess">
       <form class="space-y-2" @submit.prevent="handleGrantAccess">
         <div class="flex items-center gap-2">
-          <label for="grant-team-select" class="sr-only">{{
-            $t('package.access.select_team_label')
-          }}</label>
-          <select
+          <SelectField
+            :label="$t('package.access.select_team_label')"
+            hidden-label
             id="grant-team-select"
             v-model="selectedTeam"
             name="grant-team"
-            class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
+            block
+            size="sm"
             :disabled="isLoadingTeams"
-          >
-            <option value="" disabled>
-              {{
-                isLoadingTeams
+            :items="[
+              {
+                label: isLoadingTeams
                   ? $t('package.access.loading_teams')
-                  : $t('package.access.select_team')
-              }}
-            </option>
-            <option v-for="team in teams" :key="team" :value="team">
-              {{ orgName }}:{{ team }}
-            </option>
-          </select>
-        </div>
-        <div class="flex items-center gap-2">
-          <label for="grant-permission-select" class="sr-only">{{
-            $t('package.access.permission_label')
-          }}</label>
-          <select
+                  : $t('package.access.select_team'),
+                value: '',
+                disabled: true,
+              },
+              ...teams.map(team => ({ label: `${orgName}:${team}`, value: team })),
+            ]"
+          />
+          <SelectField
+            :label="$t('package.access.permission_label')"
+            hidden-label
             id="grant-permission-select"
             v-model="permission"
             name="grant-permission"
-            class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
-          >
-            <option value="read-only">{{ $t('package.access.permission.read_only') }}</option>
-            <option value="read-write">{{ $t('package.access.permission.read_write') }}</option>
-          </select>
+            block
+            size="sm"
+            :items="[
+              { label: $t('package.access.permission.read_only'), value: 'read-only' },
+              { label: $t('package.access.permission.read_write'), value: 'read-write' },
+            ]"
+          />
           <button
             type="submit"
             :disabled="!selectedTeam || isGranting"

app/components/Package/DownloadAnalytics.vue

···
   <div class="w-full relative" id="download-analytics" :aria-busy="pending ? 'true' : 'false'">
     <div class="w-full mb-4 flex flex-col gap-3">
       <div class="flex flex-col sm:flex-row gap-3 sm:gap-2 sm:items-end">
-        <div class="flex flex-col gap-1 sm:shrink-0">
-          <label
-            for="granularity"
-            class="text-3xs font-mono text-fg-subtle tracking-wide uppercase"
-          >
-            {{ $t('package.trends.granularity') }}
-          </label>
-
-          <div
-            class="flex items-center bg-bg-subtle border border-border rounded-md overflow-hidden"
-          >
-            <select
-              id="granularity"
-              v-model="selectedGranularity"
-              :disabled="pending"
-              class="w-full px-4 py-3 leading-none bg-bg-subtle font-mono text-sm text-fg outline-none appearance-none focus-visible:outline-accent/70"
-            >
-              <option value="daily">
-                {{ $t('package.trends.granularity_daily') }}
-              </option>
-              <option value="weekly">
-                {{ $t('package.trends.granularity_weekly') }}
-              </option>
-              <option value="monthly">
-                {{ $t('package.trends.granularity_monthly') }}
-              </option>
-              <option value="yearly">
-                {{ $t('package.trends.granularity_yearly') }}
-              </option>
-            </select>
-          </div>
-        </div>
+        <SelectField
+          :label="$t('package.trends.granularity')"
+          id="granularity"
+          v-model="selectedGranularity"
+          :disabled="pending"
+          :items="[
+            { label: $t('package.trends.granularity_daily'), value: 'daily' },
+            { label: $t('package.trends.granularity_weekly'), value: 'weekly' },
+            { label: $t('package.trends.granularity_monthly'), value: 'monthly' },
+            { label: $t('package.trends.granularity_yearly'), value: 'yearly' },
+          ]"
+        />
 
         <div class="grid grid-cols-2 gap-2 flex-1">
           <div class="flex flex-col gap-1">
             <label
               for="startDate"
-              class="text-3xs font-mono text-fg-subtle tracking-wide uppercase"
+              class="text-2xs font-mono text-fg-subtle tracking-wide uppercase"
             >
               {{ $t('package.trends.start_date') }}
             </label>
···
           </div>
 
           <div class="flex flex-col gap-1">
-            <label for="endDate" class="text-3xs font-mono text-fg-subtle tracking-wide uppercase">
+            <label for="endDate" class="text-2xs font-mono text-fg-subtle tracking-wide uppercase">
               {{ $t('package.trends.end_date') }}
             </label>
             <div class="relative flex items-center">

app/components/Package/ListControls.vue

···
     </div>
 
     <!-- Sort select -->
-    <div class="relative shrink-0 flex">
-      <label for="package-sort" class="sr-only">{{ $t('package.list.sort_label') }}</label>
-      <div class="relative">
-        <select
-          id="package-sort"
-          v-model="sortValue"
-          class="appearance-none bg-bg-subtle border border-border rounded-lg ps-3 pe-8 py-3 leading-none font-mono text-sm text-fg transition-colors duration-200 focus:(border-border-hover outline-none) hover:border-border-hover"
-        >
-          <option v-for="option in sortOptions" :key="option.value" :value="option.value">
-            {{ option.label }}
-          </option>
-        </select>
-        <div
-          class="absolute inset-ie-3 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
-          aria-hidden="true"
-        >
-          <div class="i-carbon:chevron-down w-4 h-4" />
-        </div>
-      </div>
-    </div>
+    <SelectField
+      :label="$t('package.list.sort_label')"
+      hidden-label
+      id="package-sort"
+      class="relative shrink-0"
+      v-model="sortValue"
+      :items="sortOptions.map(option => ({ label: option.label, value: option.value }))"
+    />
   </div>
 
   <!-- Filtered count indicator -->

app/components/Package/ListToolbar.vue

···
 })
 
 // Handle sort key change from dropdown
-function handleSortKeyChange(event: Event) {
-  const target = event.target as HTMLSelectElement
-  const newKey = target.value as SortKey
-  const config = SORT_KEYS.find(k => k.key === newKey)
-  const direction = config?.defaultDirection ?? 'desc'
-  sortOption.value = buildSortOption(newKey, direction)
-}
+const sortKeyModel = computed<SortKey>({
+  get: () => currentSort.value.key,
+  set: newKey => {
+    const config = SORT_KEYS.find(k => k.key === newKey)
+    const direction = config?.defaultDirection ?? 'desc'
+    sortOption.value = buildSortOption(newKey, direction)
+  },
+})
 
 // Toggle sort direction
 function handleToggleDirection() {
···
         <!-- Sort controls -->
         <div class="flex items-center gap-1 shrink-0 order-1 sm:order-1">
           <!-- Sort key dropdown -->
-          <div class="relative">
-            <label for="sort-select" class="sr-only">{{ $t('filters.sort.label') }}</label>
-            <select
-              id="sort-select"
-              :value="currentSort.key"
-              class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1.5 font-mono text-sm text-fg transition-colors duration-200 hover:border-border-hover"
-              @change="handleSortKeyChange"
-            >
-              <option
-                v-for="keyConfig in availableSortKeys"
-                :key="keyConfig.key"
-                :value="keyConfig.key"
-                :disabled="keyConfig.disabled"
-              >
-                {{ getSortKeyLabelKey(keyConfig.key) }}
-              </option>
-            </select>
-            <div
-              class="flex items-center absolute inset-ie-2 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
-              aria-hidden="true"
-            >
-              <span class="i-carbon-chevron-down w-4 h-4" />
-            </div>
-          </div>
+          <SelectField
+            :label="$t('filters.sort.label')"
+            hidden-label
+            id="sort-select"
+            v-model="sortKeyModel"
+            :items="
+              availableSortKeys.map(keyConfig => ({
+                label: getSortKeyLabelKey(keyConfig.key),
+                value: keyConfig.key,
+                disabled: keyConfig.disabled,
+              }))
+            "
+          />
 
           <!-- Sort direction toggle -->
           <button

app/components/PaginationControls.vue

···
 const pageSize = defineModel<PageSize>('pageSize', { required: true })
 const currentPage = defineModel<number>('currentPage', { required: true })
 
+const pageSizeSelectValue = computed(() => String(pageSize.value))
+
 // Whether we should show pagination controls (table view always uses pagination)
 const shouldShowControls = computed(() => props.viewMode === 'table' || mode.value === 'paginated')
 
···
 
       <!-- Page size (shown when paginated or table view) -->
       <div v-if="effectiveMode === 'paginated'" class="relative shrink-0">
-        <label for="page-size" class="sr-only">{{ $t('filters.pagination.items_per_page') }}</label>
-        <select
+        <SelectField
+          :label="$t('filters.pagination.items_per_page')"
+          hidden-label
           id="page-size"
-          :value="pageSize"
-          class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1 font-mono text-sm text-fg transition-colors duration-200 hover:border-border-hover"
+          v-model="pageSizeSelectValue"
           @change="handlePageSizeChange"
-        >
-          <option v-for="size in PAGE_SIZE_OPTIONS" :key="size" :value="size">
-            {{
-              size === 'all'
-                ? $t('filters.pagination.all_yolo')
-                : $t('filters.pagination.per_page', { count: size })
-            }}
-          </option>
-        </select>
+          :items="
+            PAGE_SIZE_OPTIONS.map(size => ({
+              label:
+                size === 'all'
+                  ? $t('filters.pagination.all_yolo')
+                  : $t('filters.pagination.per_page', { count: size }),
+              value: String(size),
+            }))
+          "
+        />
         <div
           class="flex items-center absolute inset-ie-2 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
           aria-hidden="true"

app/components/Select/Base.vue

···
+<script setup lang="ts">
+const model = defineModel<string | undefined>({ default: undefined })
+
+const SELECT_SIZES = {
+  none: '',
+  sm: 'text-xs px-2 py-1.75 rounded-md',
+  md: 'text-sm px-3 py-2.25 rounded-lg',
+  lg: 'text-base px-6 py-4 rounded-xl',
+}
+
+export type SelectBaseProps = {
+  disabled?: boolean
+  size?: keyof typeof SELECT_SIZES
+}
+
+const props = withDefaults(defineProps<SelectBaseProps>(), {
+  size: 'md',
+})
+</script>
+
+<template>
+  <select
+    v-model="model"
+    class="bg-bg border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
+    :class="[SELECT_SIZES[size]]"
+    :disabled="
+      /** Catching Vue render-bug of invalid `disabled=false` attribute in the final HTML */
+      disabled ? true : undefined
+    "
+  >
+    <slot />
+  </select>
+</template>

app/components/Select/Field.vue

···
+<script setup lang="ts">
+import type { SelectBaseProps } from './Base.vue'
+
+const SELECT_FIELD_SIZES = {
+  sm: 'text-xs py-1.75 ps-2 pe-6 rounded-md',
+  md: 'text-sm py-2.25 ps-3 pe-9 rounded-lg',
+  lg: 'text-base py-4 ps-6 pe-15 rounded-xl',
+}
+const SELECT_FIELD_ICON_SIZES = {
+  sm: 'inset-ie-2 size-[0.75rem]',
+  md: 'inset-ie-3 size-[1rem]',
+  lg: 'inset-ie-5 size-[1.5rem]',
+}
+const SELECT_FIELD_LABEL_SIZES = {
+  sm: 'text-2xs',
+  md: 'text-xs',
+  lg: 'text-sm',
+}
+
+const model = defineModel<string | undefined>({ default: undefined })
+
+export interface SelectFieldProps extends SelectBaseProps {
+  items: { label: string; value: string; disabled?: boolean }[]
+  size?: keyof typeof SELECT_FIELD_SIZES
+  selectAttrs?: Omit<SelectBaseProps, 'size' | 'id'> &
+    Record<string, string | number | boolean | undefined>
+  label?: string
+  labelAttrs?: Record<string, string | number | boolean | undefined>
+  /** Visually hide label */
+  hiddenLabel?: boolean
+  id: string
+  /** Render select full width */
+  block?: boolean
+}
+
+const props = withDefaults(defineProps<SelectFieldProps>(), {
+  size: 'md',
+})
+</script>
+
+<template>
+  <div class="group/select">
+    <label
+      v-if="label"
+      :for="id"
+      v-bind="labelAttrs"
+      class="block mb-1 font-mono text-fg-subtle tracking-wide uppercase"
+      :class="[hiddenLabel ? 'sr-only' : '', SELECT_FIELD_LABEL_SIZES[size]]"
+      >{{ label }}</label
+    >
+    <div class="relative" :class="[block ? 'w-full' : 'w-fit']">
+      <SelectBase
+        :disabled="disabled"
+        size="none"
+        class="appearance-none group-hover/select:border-fg-muted"
+        :class="[SELECT_FIELD_SIZES[size], block ? 'w-full' : 'w-fit']"
+        v-model="model"
+        v-bind="selectAttrs"
+        :id="id"
+      >
+        <option
+          v-for="item in items"
+          :key="item.value"
+          :value="item.value"
+          :disabled="item.disabled"
+        >
+          {{ item.label }}
+        </option>
+      </SelectBase>
+      <span
+        aria-hidden="true"
+        class="block i-carbon:chevron-down absolute top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none group-hover/select:text-fg group-focus-within/select:text-fg"
+        :class="[SELECT_FIELD_ICON_SIZES[size]]"
+      />
+    </div>
+  </div>
+</template>

app/pages/settings.vue

···
               <label for="theme-select" class="block text-sm text-fg font-medium">
                 {{ $t('settings.theme') }}
               </label>
-              <select
+              <SelectField
                 id="theme-select"
-                :value="colorMode.preference"
-                class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg duration-200 transition-colors hover:border-fg-subtle"
-                @change="
-                  colorMode.preference = ($event.target as HTMLSelectElement).value as
-                    | 'light'
-                    | 'dark'
-                    | 'system'
-                "
-              >
-                <option value="system">
-                  {{ $t('settings.theme_system') }}
-                </option>
-                <option value="light">{{ $t('settings.theme_light') }}</option>
-                <option value="dark">{{ $t('settings.theme_dark') }}</option>
-              </select>
+                v-model="colorMode.preference"
+                block
+                size="sm"
+                class="max-w-48"
+                :items="[
+                  { label: $t('settings.theme_system'), value: 'system' },
+                  { label: $t('settings.theme_light'), value: 'light' },
+                  { label: $t('settings.theme_dark'), value: 'dark' },
+                ]"
+              />
             </div>
 
             <!-- Accent colors -->
···
               </p>
 
               <ClientOnly>
-                <select
+                <SelectField
                   id="search-provider-select"
-                  :value="settings.searchProvider"
-                  class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
-                  @change="
-                    settings.searchProvider = ($event.target as HTMLSelectElement)
-                      .value as typeof settings.searchProvider
-                  "
-                >
-                  <option value="npm">
-                    {{ $t('settings.data_source.npm') }}
-                  </option>
-                  <option value="algolia">
-                    {{ $t('settings.data_source.algolia') }}
-                  </option>
-                </select>
+                  :items="[
+                    { label: $t('settings.data_source.npm'), value: 'npm' },
+                    { label: $t('settings.data_source.algolia'), value: 'algolia' },
+                  ]"
+                  v-model="settings.searchProvider"
+                  block
+                  size="sm"
+                  class="max-w-48"
+                />
                 <template #fallback>
-                  <select
+                  <SelectField
                     id="search-provider-select"
                     disabled
-                    class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg opacity-50 cursor-wait duration-200 transition-colors hover:border-fg-subtle"
-                  >
-                    <option>{{ $t('common.loading') }}</option>
-                  </select>
+                    :items="[{ label: $t('common.loading'), value: 'loading' }]"
+                    block
+                    size="sm"
+                    class="max-w-48"
+                  />
                 </template>
               </ClientOnly>
 
···
               </label>
 
               <ClientOnly>
-                <select
+                <SelectField
                   id="language-select"
-                  :value="locale"
-                  class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-accent/70 duration-200 transition-colors hover:border-fg-subtle"
-                  @change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
-                >
-                  <option v-for="loc in locales" :key="loc.code" :value="loc.code" :lang="loc.code">
-                    {{ loc.name }}
-                  </option>
-                </select>
+                  :items="locales.map(loc => ({ label: loc.name ?? '', value: loc.code }))"
+                  v-model="locale"
+                  @update:modelValue="setLocale($event as typeof locale)"
+                  block
+                  size="sm"
+                  class="max-w-48"
+                />
                 <template #fallback>
-                  <select
+                  <SelectField
                     id="language-select"
                     disabled
-                    class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg opacity-50 cursor-wait duration-200 transition-colors hover:border-fg-subtle"
-                  >
-                    <option>{{ $t('common.loading') }}</option>
-                  </select>
+                    :items="[{ label: $t('common.loading'), value: 'loading' }]"
+                    block
+                    size="sm"
+                    class="max-w-48"
+                  />
                 </template>
               </ClientOnly>
             </div>

test/nuxt/a11y.spec.ts

···
   ReadmeTocDropdown,
   SearchProviderToggle,
   SearchSuggestionCard,
+  SelectBase,
+  SelectField,
   SettingsAccentColorPicker,
   SettingsBgThemePicker,
   SettingsToggle,
···
       const component = await mountSuspended(InputBase, {
         props: { noCorrect: false },
         attrs: { 'aria-label': 'Input with corrections' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('SelectBase', () => {
+    it('should have no accessibility violations with options and aria-label', async () => {
+      const component = await mountSuspended(SelectBase, {
+        attrs: { 'aria-label': 'Choose option' },
+        slots: {
+          default:
+            '<option value="option1">option 1</option><option value="option2">option 2</option>',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations when disabled', async () => {
+      const component = await mountSuspended(SelectBase, {
+        props: { disabled: true },
+        attrs: { 'aria-label': 'Disabled select' },
+        slots: { default: '<option value="option1">option 1</option>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with size small', async () => {
+      const component = await mountSuspended(SelectBase, {
+        props: { size: 'sm' },
+        attrs: { 'aria-label': 'Small select' },
+        slots: { default: '<option value="option1">option 1</option>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('SelectField', () => {
+    it('should have no accessibility violations with label and items', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: {
+          id: 'a11y-select-1',
+          label: 'Choose one',
+          items: [
+            { label: 'Option 1', value: 'option1' },
+            { label: 'Option 2', value: 'option2' },
+          ],
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with hiddenLabel', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: {
+          id: 'a11y-select-2',
+          label: 'Hidden',
+          hiddenLabel: true,
+          items: [{ label: 'Option 1', value: 'option1' }],
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations when disabled', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: {
+          id: 'a11y-select-3',
+          selectAttrs: { 'aria-label': 'Disabled select' },
+          items: [{ label: 'Option 1', value: 'option1' }],
+          disabled: true,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with size small', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: {
+          id: 'a11y-select-4',
+          selectAttrs: { 'aria-label': 'Disabled select' },
+          items: [{ label: 'Option 1', value: 'option1' }],
+          size: 'sm',
+        },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])

test/nuxt/components/Select/Base.spec.ts

···
+import { describe, expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import SelectBase from '~/components/Select/Base.vue'
+
+describe('SelectBase', () => {
+  describe('rendering', () => {
+    it('renders native select with slot options', async () => {
+      const component = await mountSuspended(SelectBase, {
+        slots: {
+          default:
+            '<option value="option1">option 1</option><option value="option2">option 2</option>',
+        },
+      })
+      const select = component.find('select')
+      expect(select.exists()).toBe(true)
+      expect(component.findAll('option')).toHaveLength(2)
+    })
+
+    it('renders with initial modelValue', async () => {
+      const component = await mountSuspended(SelectBase, {
+        props: { modelValue: 'option2' },
+        slots: {
+          default:
+            '<option value="option1">option 1</option><option value="option2">option 2</option>',
+        },
+      })
+      const select = component.find('select').element
+      expect(select.value).toBe('option2')
+    })
+
+    it('renders without disabled attribute when disabled is false', async () => {
+      const component = await mountSuspended(SelectBase, {
+        props: { disabled: false },
+        slots: { default: '<option value="option1">option 1</option>' },
+      })
+      const select = component.find('select')
+      expect(select.attributes('disabled')).toBeUndefined()
+    })
+
+    it('renders disabled when disabled is true', async () => {
+      const component = await mountSuspended(SelectBase, {
+        props: { disabled: true },
+        slots: { default: '<option value="option1">option 1</option>' },
+      })
+      const select = component.find('select').element
+      expect(select.disabled).toBe(true)
+    })
+  })
+
+  describe('v-model', () => {
+    it('emits update:modelValue when selection changes', async () => {
+      const component = await mountSuspended(SelectBase, {
+        props: { modelValue: 'option1' },
+        slots: {
+          default:
+            '<option value="option1">option 1</option><option value="option2">option 2</option>',
+        },
+      })
+      const select = component.find('select')
+      await select.setValue('option2')
+      expect(component.emitted('update:modelValue')).toBeTruthy()
+      expect(component.emitted('update:modelValue')?.at(-1)).toEqual(['option2'])
+    })
+
+    it('reflects modelValue prop changes', async () => {
+      const component = await mountSuspended(SelectBase, {
+        props: { modelValue: 'option1' },
+        slots: {
+          default:
+            '<option value="option1">option 1</option><option value="option2">option 2</option>',
+        },
+      })
+      await component.setProps({ modelValue: 'option2' })
+      const select = component.find('select').element
+      expect(select.value).toBe('option2')
+    })
+  })
+})

test/nuxt/components/Select/Field.spec.ts

···
+import { describe, expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import SelectField from '~/components/Select/Field.vue'
+
+const defaultItems = [
+  { label: 'Option 1', value: 'option1' },
+  { label: 'Option 2', value: 'option2' },
+]
+
+describe('SelectField', () => {
+  describe('rendering', () => {
+    it('renders options from items prop', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: { id: 'select', items: defaultItems },
+      })
+      const options = component.findAll('option')
+      expect(options).toHaveLength(2)
+      expect(options[0]?.text()).toBe('Option 1')
+      expect(options[1]?.text()).toBe('Option 2')
+      expect(options[0]?.attributes('value')).toBe('option1')
+      expect(options[1]?.attributes('value')).toBe('option2')
+    })
+
+    it('renders label when provided', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: { id: 'select', items: defaultItems, label: 'Choose one' },
+      })
+      const label = component.find('label')
+      expect(label.exists()).toBe(true)
+      expect(label.text()).toBe('Choose one')
+      expect(label.attributes('for')).toBe('select')
+    })
+
+    it('renders disabled option when item.disabled is true', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: {
+          id: 'select',
+          items: [
+            { label: 'Enabled', value: 'on' },
+            { label: 'Disabled', value: 'off', disabled: true },
+          ],
+        },
+      })
+      const options = component.findAll('option')
+      expect(options[1]?.element?.disabled).toBe(true)
+    })
+
+    it('applies block class when block is true', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: { id: 'select', items: defaultItems, block: true },
+      })
+      const wrapper = component.find('.relative')
+      expect(wrapper.classes()).toContain('w-full')
+      const select = component.find('select')
+      expect(select.classes()).toContain('w-full')
+    })
+  })
+
+  describe('v-model', () => {
+    it('emits update:modelValue when option is selected', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: { id: 'select', items: defaultItems, modelValue: 'option1' },
+      })
+      const select = component.find('select')
+      await select.setValue('option2')
+      expect(component.emitted('update:modelValue')).toBeTruthy()
+      expect(component.emitted('update:modelValue')?.at(-1)).toEqual(['option2'])
+    })
+
+    it('reflects modelValue prop changes', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: { id: 'select', items: defaultItems, modelValue: 'option1' },
+      })
+      await component.setProps({ modelValue: 'option2' })
+      const select = component.find('select').element
+      expect(select.value).toBe('option2')
+    })
+  })
+
+  describe('disabled', () => {
+    it('passes disabled to SelectBase', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: { id: 'select', items: defaultItems, disabled: true },
+      })
+      const select = component.find('select').element
+      expect(select.disabled).toBe(true)
+    })
+  })
+
+  describe('accessibility', () => {
+    it('chevron has aria-hidden', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: { id: 'select', items: defaultItems },
+      })
+      const chevron = component.find('span[aria-hidden="true"]')
+      expect(chevron.exists()).toBe(true)
+    })
+
+    it('render sr-only label when hiddenLabel is true', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: {
+          id: 'select',
+          items: defaultItems,
+          label: 'Hidden',
+          hiddenLabel: true,
+        },
+      })
+      const label = component.find('label')
+      expect(label.exists()).toBe(true)
+      expect(label.classes()).toContain('sr-only')
+      expect(label.text()).toBe('Hidden')
+    })
+
+    it('associates select with id', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: { id: 'my-select', items: defaultItems, label: 'My Select' },
+      })
+      const select = component.find('select')
+      expect(select.attributes('id')).toBe('my-select')
+      const label = component.find('label')
+      expect(label.attributes('for')).toBe('my-select')
+    })
+  })
+})