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.
2025-11-06 10:25:35 +01:00
parent 58fd2fd64a
commit 68395951dc
8 changed files with 211 additions and 31 deletions
--- a/app/components/Checkout/AddressForm.vue
+++ b/app/components/Checkout/AddressForm.vue
@@ -113,10 +113,7 @@ const parseDateFromDisplay = (displayDate: string) => {
      >
        <SelectTrigger
          id="salutation"
-          :class="cn(
-            'bg-purple-dark border-white/20 text-white',
-            getError('salutation') && 'border-red'
-          )"
+          :variant="getError('salutation') ? 'error' : 'default'"
        >
          <SelectValue placeholder="Bitte wählen" />
        </SelectTrigger>
@@ -284,10 +281,7 @@ const parseDateFromDisplay = (displayDate: string) => {
      >
        <SelectTrigger
          id="countryCode"
-          :class="cn(
-            'bg-purple-dark border-white/20 text-white',
-            getError('countryCode') && 'border-red'
-          )"
+          :variant="getError('countryCode') ? 'error' : 'default'"
        >
          <SelectValue placeholder="Bitte wählen" />
        </SelectTrigger>
--- a/app/components/Checkout/CheckoutForm.vue
+++ b/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>
--- a/app/components/navigation/AreaTabs.vue
+++ b/app/components/navigation/AreaTabs.vue
@@ -67,7 +67,7 @@ const areas: ProductArea[] = [
  },
  {
    id: 'labs',
-    label: 'Labore',
+    label: 'Kurse',
    icon: FlaskConical,
    enabled: false,
    visible: true,
--- a/app/components/ui/select/SelectContent.vue
+++ b/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 />
--- a/app/components/ui/select/SelectItem.vue
+++ b/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>
--- a/app/components/ui/select/SelectTrigger.vue
+++ b/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
      )
    "
--- a/app/components/ui/select/index.ts
+++ b/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>
--- a/app/pages/internal/styleguide.vue
+++ b/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>