feat(select): add trigger sizes + error state, align with COSS

src/components/selects/Select52.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import Label from '../ui/Label.vue'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/Select'
+</script>
+
+<template>
+  <div class="space-y-2">
+    <Label for="select-52">Small select</Label>
+    <Select default-value="s1">
+      <SelectTrigger id="select-52" size="sm">
+        <SelectValue placeholder="Select a framework" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="s1">Vue</SelectItem>
+        <SelectItem value="s2">React</SelectItem>
+        <SelectItem value="s3">Svelte</SelectItem>
+        <SelectItem value="s4">Angular</SelectItem>
+      </SelectContent>
+    </Select>
+  </div>
+</template>

src/components/selects/Select53.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import Label from '../ui/Label.vue'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/Select'
+</script>
+
+<template>
+  <div class="space-y-2">
+    <Label for="select-53">Large select</Label>
+    <Select default-value="s1">
+      <SelectTrigger id="select-53" size="lg">
+        <SelectValue placeholder="Select a framework" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="s1">Vue</SelectItem>
+        <SelectItem value="s2">React</SelectItem>
+        <SelectItem value="s3">Svelte</SelectItem>
+        <SelectItem value="s4">Angular</SelectItem>
+      </SelectContent>
+    </Select>
+  </div>
+</template>

src/components/selects/Select54.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import Label from '../ui/Label.vue'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/Select'
+</script>
+
+<template>
+  <div class="space-y-2">
+    <Label for="select-54">Select with error</Label>
+    <Select>
+      <SelectTrigger id="select-54" aria-invalid="true">
+        <SelectValue placeholder="Select a framework" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="s1">Vue</SelectItem>
+        <SelectItem value="s2">React</SelectItem>
+        <SelectItem value="s3">Svelte</SelectItem>
+        <SelectItem value="s4">Angular</SelectItem>
+      </SelectContent>
+    </Select>
+    <p class="mt-1 text-xs text-destructive" role="alert">Please select a framework.</p>
+  </div>
+</template>

src/components/ui/Select/SelectTrigger.vue

@@ -1,25 +1,36 @@
 <script setup lang="ts">
 import { SelectTrigger, SelectIcon } from 'reka-ui'
-import { ChevronDown } from 'lucide-vue-next'
+import { ChevronsUpDown } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+const selectTriggerVariants = cva(
+  "relative flex w-full items-center justify-between gap-2 rounded-lg border border-input bg-background px-3 text-start text-sm text-foreground shadow-xs shadow-black/5 ring-offset-background transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-disabled:not-focus:before:shadow-[0_1px_rgba(0,0,0,0.04)] dark:not-disabled:not-focus:before:shadow-[0_-1px_rgba(255,255,255,0.06)] focus:border-ring focus:outline-hidden focus:ring-2 focus:ring-ring/30 focus:ring-offset-2 aria-invalid:border-destructive/40 focus:aria-invalid:border-destructive focus:aria-invalid:ring-destructive/20 disabled:cursor-not-allowed disabled:opacity-64 data-placeholder:text-muted-foreground/70 [&>span]:min-w-0 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    defaultVariants: {
+      size: 'default'
+    },
+    variants: {
+      size: {
+        default: 'min-h-9 py-2 sm:min-h-8',
+        sm: 'min-h-8 gap-1.5 px-2.5 py-1.5 sm:min-h-7',
+        lg: 'min-h-10 py-2.5 sm:min-h-9'
+      }
+    }
+  }
+)
 
 const props = defineProps<{
   class?: string
+  size?: VariantProps<typeof selectTriggerVariants>['size']
 }>()
 </script>
 
 <template>
-  <SelectTrigger
-    :class="
-      cn(
-        'flex h-9 w-full items-center justify-between gap-2 rounded-lg border border-input bg-background px-3 py-2 text-start text-sm text-foreground shadow-xs shadow-black/5 ring-offset-background focus:border-ring focus:outline-hidden focus:ring-2 focus:ring-ring/30 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-64 data-placeholder:text-muted-foreground/70 [&>span]:min-w-0',
-        props.class
-      )
-    "
-  >
+  <SelectTrigger :class="cn(selectTriggerVariants({ size: props.size }), props.class)">
     <slot />
     <SelectIcon>
-      <ChevronDown class="h-4 w-4 shrink-0 text-muted-foreground/80" />
+      <ChevronsUpDown class="-me-1 h-4 w-4 shrink-0 text-muted-foreground/80" />
     </SelectIcon>
   </SelectTrigger>
 </template>

src/views/Selects.vue

@@ -94,7 +94,10 @@ const selectFiles = ref([
   'Select48',
   'Select49',
   'Select50',
-  'Select51'
+  'Select51',
+  'Select52',
+  'Select53',
+  'Select54'
 ])
 const directory = 'selects'