Refactor Select Component Variants and Styles for Improved Consistency

- Updated SelectTrigger and SelectItem components to use variant props for error handling, enhancing visual feedback.
- Refactored styles in SelectContent and SelectItem for better alignment and responsiveness.
- Added new variant handling in the SelectTrigger component to streamline class management.
- Updated styleguide.vue to include examples of the Select component with error and disabled states for better documentation.

app/components/Checkout/AddressForm.vue

@@ -113,10 +113,7 @@ const parseDateFromDisplay = (displayDate: string) => {
       >
         <SelectTrigger
           id="salutation"
-          :class="cn(
+          :variant="getError('salutation') ? 'error' : 'default'"
-            'bg-purple-dark border-white/20 text-white',
-            getError('salutation') && 'border-red'
-          )"
         >
           <SelectValue placeholder="Bitte wählen" />
         </SelectTrigger>
@@ -284,10 +281,7 @@ const parseDateFromDisplay = (displayDate: string) => {
       >
         <SelectTrigger
           id="countryCode"
-          :class="cn(
+          :variant="getError('countryCode') ? 'error' : 'default'"
-            'bg-purple-dark border-white/20 text-white',
-            getError('countryCode') && 'border-red'
-          )"
         >
           <SelectValue placeholder="Bitte wählen" />
         </SelectTrigger>

app/components/Checkout/CheckoutForm.vue

@@ -147,7 +147,7 @@ function getError(field: string): string {
     <div class="space-y-2">
       <label class="text-sm font-medium text-white">Anrede *</label>
       <Select v-model="form.salutation" :disabled="loading">
-        <SelectTrigger :class="{ 'border-warning/50': hasError('salutation') }">
+        <SelectTrigger :variant="hasError('salutation') ? 'error' : 'default'">
           <SelectValue placeholder="Bitte wählen" />
         </SelectTrigger>
         <SelectContent>
@@ -272,7 +272,7 @@ function getError(field: string): string {
     <div class="space-y-2">
       <label for="countryCode" class="text-sm font-medium text-white">Land *</label>
       <Select v-model="form.countryCode" :disabled="loading">
-        <SelectTrigger :class="{ 'border-warning/50': hasError('countryCode') }">
+        <SelectTrigger :variant="hasError('countryCode') ? 'error' : 'default'">
           <SelectValue placeholder="Bitte wählen" />
         </SelectTrigger>
         <SelectContent>

app/components/navigation/AreaTabs.vue

@@ -67,7 +67,7 @@ const areas: ProductArea[] = [
   },
   {
     id: 'labs',
-    label: 'Labore',
+    label: 'Kurse',
     icon: FlaskConical,
     enabled: false,
     visible: true,

app/components/ui/select/SelectContent.vue

@@ -24,7 +24,7 @@ const delegatedProps = computed(() => {
       v-bind="delegatedProps"
       :class="
         cn(
-          'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'relative z-50 min-w-[8rem] overflow-hidden rounded-2xl border border-white/10 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-xl text-zinc-800 dark:text-zinc-100 shadow-glass data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
           props.position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           props.class
@@ -33,7 +33,7 @@ const delegatedProps = computed(() => {
     >
       <SelectViewport
         :class="
-          cn('p-1', props.position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)]')
+          cn('p-2', props.position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)]')
         "
       >
         <slot />

app/components/ui/select/SelectItem.vue

@@ -23,12 +23,12 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex w-full cursor-default select-none items-center rounded-xl gap-2 py-2.5 pl-8 pr-3 text-sm outline-none focus:outline-none focus-visible:outline-none transition-all duration-200 hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         props.class
       )
     "
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute left-2 flex h-4 w-4 items-center justify-center">
       <SelectItemIndicator>
         <Check class="h-4 w-4" />
       </SelectItemIndicator>

app/components/ui/select/SelectTrigger.vue

@@ -3,16 +3,22 @@ import { type HTMLAttributes, computed } from 'vue'
 import { SelectTrigger as SelectTriggerPrimitive } from 'reka-ui'
 import { ChevronDown } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { selectTriggerVariants, type SelectTriggerVariants } from '.'
 
 interface SelectTriggerProps {
   disabled?: boolean
+  variant?: SelectTriggerVariants['variant']
+  size?: SelectTriggerVariants['size']
   class?: HTMLAttributes['class']
 }
 
-const props = defineProps<SelectTriggerProps>()
+const props = withDefaults(defineProps<SelectTriggerProps>(), {
+  variant: 'default',
+  size: 'default',
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, variant: __, size: ___, ...delegated } = props
   return delegated
 })
 </script>
@@ -22,7 +28,7 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        selectTriggerVariants({ variant: props.variant, size: props.size }),
         props.class
       )
     "

app/components/ui/select/index.ts

@@ -1,5 +1,31 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
 export { default as Select } from './Select.vue'
 export { default as SelectTrigger } from './SelectTrigger.vue'
 export { default as SelectValue } from './SelectValue.vue'
 export { default as SelectContent } from './SelectContent.vue'
 export { default as SelectItem } from './SelectItem.vue'
+
+export const selectTriggerVariants = cva(
+  'flex w-full items-center justify-between rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-base text-white ring-offset-transparent placeholder:text-white/50 transition-all duration-300 hover:bg-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+  {
+    variants: {
+      variant: {
+        default: '',
+        error: 'border-warning/50 focus-visible:ring-warning/50',
+      },
+      size: {
+        default: 'h-12',
+        sm: 'h-10 text-sm px-3 py-2',
+        lg: 'h-14 text-lg px-5 py-4',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+export type SelectTriggerVariants = VariantProps<typeof selectTriggerVariants>

app/pages/internal/styleguide.vue

@@ -5,8 +5,10 @@
  * Protected by Basic Auth via server/middleware/internal-auth.ts
  */
 
+import { ref } from 'vue'
 import { AlertCircle, CheckCircle } from 'lucide-vue-next'
 import RoleSwitcher from '@/components/navigation/RoleSwitcher.vue'
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select'
 
 definePageMeta({
   layout: 'styleguide',
@@ -26,6 +28,12 @@ const copyCode = async (code: string) => {
     console.error('Failed to copy:', err)
   }
 }
+
+// Select component examples state
+const selectBasic = ref('')
+const selectError = ref('')
+const selectDisabled = ref('disabled-option')
+const selectCountry = ref('DE')
 </script>
 
 <template>
@@ -33,7 +41,7 @@ const copyCode = async (code: string) => {
     <div class="max-w-7xl mx-auto">
       <!-- Header -->
       <header class="mb-12">
-        <h1 class="text-5xl font-bold mb-4 text-experimenta-primary">my.experimenta Design System</h1>
+        <h1 class="text-5xl font-bold mb-4 text-experimenta-primary">my.experience Design System</h1>
         <p class="text-xl text-white/90 mb-6">
           Component library and design tokens for my.experimenta.science
         </p>
@@ -477,6 +485,106 @@ const copyCode = async (code: string) => {
               </div>
             </div>
 
+            <!-- Select / Dropdown -->
+            <div>
+              <h4 class="text-xl font-semibold text-white mb-4">Select / Dropdown</h4>
+
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <!-- Basic Select -->
+                <div>
+                  <label class="form-label">Basic Select</label>
+                  <Select v-model="selectBasic">
+                    <SelectTrigger>
+                      <SelectValue placeholder="Bitte wählen" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="option1">Option 1</SelectItem>
+                      <SelectItem value="option2">Option 2</SelectItem>
+                      <SelectItem value="option3">Option 3</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <!-- Select with Error -->
+                <div>
+                  <label class="form-label">Select mit Fehler *</label>
+                  <Select v-model="selectError">
+                    <SelectTrigger variant="error">
+                      <SelectValue placeholder="Bitte wählen" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="option1">Option 1</SelectItem>
+                      <SelectItem value="option2">Option 2</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <p class="form-error">
+                    <AlertCircle class="w-4 h-4" />
+                    Bitte wähle eine Option
+                  </p>
+                </div>
+
+                <!-- Disabled Select -->
+                <div>
+                  <label class="form-label">Disabled Select</label>
+                  <Select v-model="selectDisabled" disabled>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Nicht verfügbar" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="disabled-option">Option</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <!-- Real-World Example (Country) -->
+                <div>
+                  <label class="form-label">Land *</label>
+                  <Select v-model="selectCountry">
+                    <SelectTrigger>
+                      <SelectValue placeholder="Land auswählen" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="DE">Deutschland</SelectItem>
+                      <SelectItem value="AT">Österreich</SelectItem>
+                      <SelectItem value="CH">Schweiz</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+
+              <details class="bg-white/5 p-4 rounded-lg mt-6">
+                <summary class="cursor-pointer text-white/90 font-semibold">Show Select Code</summary>
+                <pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;!-- Import --&gt;
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select'
+
+&lt;!-- Basic Select --&gt;
+&lt;Select v-model="selectedValue"&gt;
+  &lt;SelectTrigger&gt;
+    &lt;SelectValue placeholder="Bitte wählen" /&gt;
+  &lt;/SelectTrigger&gt;
+  &lt;SelectContent&gt;
+    &lt;SelectItem value="option1"&gt;Option 1&lt;/SelectItem&gt;
+    &lt;SelectItem value="option2"&gt;Option 2&lt;/SelectItem&gt;
+  &lt;/SelectContent&gt;
+&lt;/Select&gt;
+
+&lt;!-- Error State --&gt;
+&lt;SelectTrigger variant="error"&gt;
+  &lt;SelectValue placeholder="Bitte wählen" /&gt;
+&lt;/SelectTrigger&gt;
+
+&lt;!-- Disabled --&gt;
+&lt;Select v-model="value" disabled&gt;
+  ...
+&lt;/Select&gt;
+
+&lt;!-- Size Variants --&gt;
+&lt;SelectTrigger size="sm"&gt;...&lt;/SelectTrigger&gt;
+&lt;SelectTrigger size="default"&gt;...&lt;/SelectTrigger&gt;
+&lt;SelectTrigger size="lg"&gt;...&lt;/SelectTrigger&gt;</code></pre>
+              </details>
+            </div>
+
             <!-- Error Messages -->
             <div>
               <label class="form-label">Form mit Fehlermeldung</label>
@@ -491,15 +599,33 @@ const copyCode = async (code: string) => {
                 Orange Border (WCAG AA konform) mit Icon für bessere Barrierefreiheit. Icon optional.
               </p>
               <p class="form-error">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-warning flex-shrink-0"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                  class="text-warning flex-shrink-0">
+                  <circle cx="12" cy="12" r="10" />
+                  <line x1="12" y1="8" x2="12" y2="12" />
+                  <line x1="12" y1="16" x2="12.01" y2="16" />
+                </svg>
                 Dies ist eine Fehlermeldung mit gutem Kontrast
               </p>
               <p class="form-error">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-warning flex-shrink-0"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                  class="text-warning flex-shrink-0">
+                  <circle cx="12" cy="12" r="10" />
+                  <line x1="12" y1="8" x2="12" y2="12" />
+                  <line x1="12" y1="16" x2="12.01" y2="16" />
+                </svg>
                 Dieses Feld ist erforderlich
               </p>
               <p class="form-error">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-warning flex-shrink-0"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                  class="text-warning flex-shrink-0">
+                  <circle cx="12" cy="12" r="10" />
+                  <line x1="12" y1="8" x2="12" y2="12" />
+                  <line x1="12" y1="16" x2="12.01" y2="16" />
+                </svg>
                 Das Passwort muss mindestens 8 Zeichen lang sein
               </p>
             </div>
@@ -553,27 +679,51 @@ const copyCode = async (code: string) => {
         <div class="card-glass">
           <h3 class="text-2xl font-semibold mb-6 text-white">Status Indicators</h3>
           <p class="text-sm text-white/70 mb-6">
-            Einheitlicher Stil mit orange/grünem Border für bessere Barrierefreiheit. Alle verwenden den gleichen Hintergrund mit farbigem Icon.
+            Einheitlicher Stil mit orange/grünem Border für bessere Barrierefreiheit. Alle verwenden den gleichen
+            Hintergrund mit farbigem Icon.
           </p>
 
           <div class="space-y-4">
             <div class="status-message status-success">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="status-icon"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                class="status-icon">
+                <circle cx="12" cy="12" r="10" />
+                <path d="m9 12 2 2 4-4" />
+              </svg>
               <span>Erfolgsmeldung - Aktion wurde ausgeführt</span>
             </div>
 
             <div class="status-message status-warning">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="status-icon"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                class="status-icon">
+                <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+                <path d="M12 9v4" />
+                <path d="M12 17h.01" />
+              </svg>
               <span>Warnung - Bitte beachten</span>
             </div>
 
             <div class="status-message status-error">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="status-icon"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                class="status-icon">
+                <circle cx="12" cy="12" r="10" />
+                <line x1="12" y1="8" x2="12" y2="12" />
+                <line x1="12" y1="16" x2="12.01" y2="16" />
+              </svg>
               <span>Fehlermeldung - Etwas ist schiefgelaufen</span>
             </div>
 
             <div class="status-message status-info">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="status-icon"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                class="status-icon">
+                <circle cx="12" cy="12" r="10" />
+                <path d="M12 16v-4" />
+                <path d="M12 8h.01" />
+              </svg>
               <span>Information - Nützlicher Hinweis</span>
             </div>
           </div>
@@ -595,7 +745,8 @@ const copyCode = async (code: string) => {
         <div class="card-glass">
           <h3 class="text-2xl font-semibold mb-6 text-white">shadcn-nuxt Alert Variants</h3>
           <p class="text-sm text-white/70 mb-6">
-            Alert-Komponenten für Benachrichtigungen und Fehlermeldungen. Die "error" Variante verwendet Orange für bessere Barrierefreiheit (WCAG AA konform).
+            Alert-Komponenten für Benachrichtigungen und Fehlermeldungen. Die "error" Variante verwendet Orange für
+            bessere Barrierefreiheit (WCAG AA konform).
           </p>
 
           <div class="space-y-4">
@@ -746,7 +897,8 @@ const copyCode = async (code: string) => {
           <h3 class="text-2xl font-semibold mb-4 text-white">Role Switcher Dropdown</h3>
           <p class="text-white/90 mb-6">
             Rollen-Auswahl-Dropdown für Benutzer. Ermöglicht das Wechseln zwischen verschiedenen Benutzerrollen
-            (Privatperson, Pädagoge, Firma). Der Button zeigt die aktuelle Rolle und öffnet ein Dropdown-Menü mit allen verfügbaren Optionen.
+            (Privatperson, Pädagoge, Firma). Der Button zeigt die aktuelle Rolle und öffnet ein Dropdown-Menü mit allen
+            verfügbaren Optionen.
           </p>
 
           <!-- Live Example -->
@@ -763,7 +915,8 @@ const copyCode = async (code: string) => {
             <ul class="space-y-2 text-white/90 text-sm">
               <li class="flex items-start gap-2">
                 <span class="mt-1 text-experimenta-accent">✓</span>
-                <span><strong>Button-Style:</strong> Transparenter Hintergrund mit weißem Border, Glassmorphism-Effekt</span>
+                <span><strong>Button-Style:</strong> Transparenter Hintergrund mit weißem Border,
+                  Glassmorphism-Effekt</span>
               </li>
               <li class="flex items-start gap-2">
                 <span class="mt-1 text-experimenta-accent">✓</span>
@@ -771,7 +924,8 @@ const copyCode = async (code: string) => {
               </li>
               <li class="flex items-start gap-2">
                 <span class="mt-1 text-experimenta-accent">✓</span>
-                <span><strong>Rolle mit Icon:</strong> Zeigt aktuelle Rolle mit passendem Icon (User, GraduationCap, Building2)</span>
+                <span><strong>Rolle mit Icon:</strong> Zeigt aktuelle Rolle mit passendem Icon (User, GraduationCap,
+                  Building2)</span>
               </li>
               <li class="flex items-start gap-2">
                 <span class="mt-1 text-experimenta-accent">✓</span>