From fb0caf522033c0c1de0c4885dc71bdca13c19865 Mon Sep 17 00:00:00 2001
From: Jeton Korenica <jetonkorenica@gmail.com>
Date: Tue, 14 Jul 2026 11:01:33 +0200
Subject: [PATCH] feat(select): add trigger sizes + error state, align with
 COSS

Match the COSS UI select docs (coss.com/ui/docs/components/select):

SelectTrigger:
- Add size prop ('sm' | 'default' | 'lg') via cva, with responsive
  min-heights matching our button sizing (min-h-9 sm:min-h-8, etc.)
- Switch trigger affordance to the ChevronsUpDown icon (COSS's select
  affordance) and add the COSS before-highlight inset shadow
- Add aria-invalid/error styling (destructive border + ring)

Demos (the COSS docs examples our set lacked):
- Select52: small size
- Select53: large size
- Select54: error / aria-invalid state

The existing 51 demos already cover the other documented patterns
(icons, groups, labels, multiple, object values, combobox, etc.).

type-check, lint and build pass; verified in-browser (all three sizes
distinct, error border, dropdown opens on the sized trigger).
---
 src/components/selects/Select52.vue        | 21 +++++++++++++++
 src/components/selects/Select53.vue        | 21 +++++++++++++++
 src/components/selects/Select54.vue        | 22 +++++++++++++++
 src/components/ui/Select/SelectTrigger.vue | 31 +++++++++++++++-------
 src/views/Selects.vue                      |  5 +++-
 5 files changed, 89 insertions(+), 11 deletions(-)
 create mode 100644 src/components/selects/Select52.vue
 create mode 100644 src/components/selects/Select53.vue
 create mode 100644 src/components/selects/Select54.vue

diff --git a/src/components/selects/Select52.vue b/src/components/selects/Select52.vue
new file mode 100644
index 0000000..6151539
--- /dev/null
+++ b/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>
diff --git a/src/components/selects/Select53.vue b/src/components/selects/Select53.vue
new file mode 100644
index 0000000..96f2f3a
--- /dev/null
+++ b/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>
diff --git a/src/components/selects/Select54.vue b/src/components/selects/Select54.vue
new file mode 100644
index 0000000..925b06d
--- /dev/null
+++ b/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>
diff --git a/src/components/ui/Select/SelectTrigger.vue b/src/components/ui/Select/SelectTrigger.vue
index e53f26f..404a8b7 100644
--- a/src/components/ui/Select/SelectTrigger.vue
+++ b/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>
diff --git a/src/views/Selects.vue b/src/views/Selects.vue
index 4e9db78..d456e8d 100644
--- a/src/views/Selects.vue
+++ b/src/views/Selects.vue
@@ -94,7 +94,10 @@ const selectFiles = ref([
   'Select48',
   'Select49',
   'Select50',
-  'Select51'
+  'Select51',
+  'Select52',
+  'Select53',
+  'Select54'
 ])
 const directory = 'selects'