@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

package/src/pages/SelectPage.vue

@@ -1,1302 +1,1302 @@
-<template>
-  <div class="page">
-    <div class="element-container">
-      <div class="controls">
-        <h2>Testing Domain: {{ currentDomain }}</h2>
-        <div class="button-group">
-          <button
-            @click="switchToDental"
-            class="control-btn"
-          >
-            Switch to Wunschlachen (Dental)
-          </button>
-          <button
-            @click="switchToCocoon"
-            class="control-btn"
-          >
-            Switch to White Cocoon
-          </button>
-          <button
-            @click="resetDomain"
-            class="control-btn reset"
-          >
-            Reset to Auto-Detect
-          </button>
-        </div>
-      </div>
-
-      <!-- Basic Select Examples -->
-      <div class="section">
-        <h3 class="section-title">Basic Select</h3>
-        <div class="examples-grid">
-          <div class="example-item">
-            <h4>Default (Outlined)</h4>
-            <Select
-              v-model="basicValue"
-              label="Select an option"
-              :items="fruitItems"
-            />
-            <p class="value-display">Selected: {{ basicValue?.title || 'None' }}</p>
-          </div>
-
-          <div class="example-item">
-            <h4>With Placeholder</h4>
-            <Select
-              v-model="placeholderValue"
-              label="Favorite Fruit"
-              placeholder="Choose a fruit..."
-              :persistent-placeholder="true"
-              :items="fruitItems"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Clearable</h4>
-            <Select
-              v-model="clearableValue"
-              label="Clearable Select"
-              :items="fruitItems"
-              :clearable="true"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Border on Hover</h4>
-            <Select
-              v-model="borderHoverValue"
-              label="Hover to see border"
-              :items="fruitItems"
-              :border-on-hover="true"
-              variant="plain"
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- States Section -->
-      <div class="section">
-        <h3 class="section-title">States</h3>
-        <div class="examples-grid">
-          <div class="example-item">
-            <h4>Normal</h4>
-            <Select
-              v-model="normalState"
-              label="Normal State"
-              :items="fruitItems"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Disabled</h4>
-            <Select
-              v-model="disabledValue"
-              label="Disabled Select"
-              :items="fruitItems"
-              :disabled="true"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Error</h4>
-            <Select
-              v-model="errorValue"
-              label="Error State"
-              :items="fruitItems"
-              :error="true"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Pre-selected Value</h4>
-            <Select
-              v-model="preselectedValue"
-              label="Pre-selected"
-              :items="fruitItems"
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- Multiple Selection -->
-      <div class="section">
-        <h3 class="section-title">Multiple Selection</h3>
-        <div class="examples-grid">
-          <div class="example-item wide">
-            <h4>Multiple Select</h4>
-            <Select
-              v-model="multipleValue"
-              label="Select multiple options"
-              :items="fruitItems"
-              :multiple="true"
-            />
-            <p class="value-display">Selected: {{ multipleValue?.map(v => v.title).join(', ') || 'None' }}</p>
-          </div>
-
-          <div class="example-item wide">
-            <h4>Multiple with Chips</h4>
-            <Select
-              v-model="chipsValue"
-              label="Select with chips"
-              :items="fruitItems"
-              :multiple="true"
-              :chips="true"
-            />
-          </div>
-
-          <div class="example-item wide">
-            <h4>Multiple with Closable Chips</h4>
-            <Select
-              v-model="closableChipsValue"
-              label="Closable chips"
-              :items="fruitItems"
-              :multiple="true"
-              :chips="true"
-              :closable-chips="true"
-              :clearable="true"
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- Variants Section -->
-      <div class="section">
-        <h3 class="section-title">Variants</h3>
-        <div class="examples-grid">
-          <div class="example-item">
-            <h4>Outlined (Default)</h4>
-            <Select
-              v-model="variantOutlined"
-              label="Outlined"
-              :items="fruitItems"
-              variant="outlined"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Underlined</h4>
-            <Select
-              v-model="variantUnderlined"
-              label="Underlined"
-              :items="fruitItems"
-              variant="underlined"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Filled</h4>
-            <Select
-              v-model="variantFilled"
-              label="Filled"
-              :items="fruitItems"
-              variant="filled"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Solo</h4>
-            <Select
-              v-model="variantSolo"
-              label="Solo"
-              :items="fruitItems"
-              variant="solo"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Solo Filled</h4>
-            <Select
-              v-model="variantSoloFilled"
-              label="Solo Filled"
-              :items="fruitItems"
-              variant="solo-filled"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Plain</h4>
-            <Select
-              v-model="variantPlain"
-              label="Plain"
-              :items="fruitItems"
-              variant="plain"
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- Density Section -->
-      <div class="section">
-        <h3 class="section-title">Density</h3>
-        <div class="examples-grid">
-          <div class="example-item">
-            <h4>Default (Compact)</h4>
-            <Select
-              v-model="densityDefault"
-              label="Compact"
-              :items="fruitItems"
-              density="compact"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Comfortable</h4>
-            <Select
-              v-model="densityComfortable"
-              label="Comfortable"
-              :items="fruitItems"
-              density="comfortable"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Default Density</h4>
-            <Select
-              v-model="densityDefaultSize"
-              label="Default"
-              :items="fruitItems"
-              density="default"
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- Practical Examples -->
-      <div class="section">
-        <h3 class="section-title">Practical Examples</h3>
-        <div class="examples-grid">
-          <div class="example-item">
-            <h4>Country Selection</h4>
-            <Select
-              v-model="countryValue"
-              label="Country"
-              placeholder="Select your country"
-              :items="countryItems"
-              :clearable="true"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Treatment Type</h4>
-            <Select
-              v-model="treatmentValue"
-              label="Behandlungsart"
-              :items="treatmentItems"
-            />
-          </div>
-
-          <div class="example-item wide">
-            <h4>Multi-select Tags</h4>
-            <Select
-              v-model="tagsValue"
-              label="Tags"
-              :items="tagItems"
-              :multiple="true"
-              :chips="true"
-              :closable-chips="true"
-              :clearable="true"
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- Custom Item Slot Examples -->
-      <div class="section">
-        <h3 class="section-title">Custom Item Slot</h3>
-        <div class="examples-grid">
-          <div class="example-item">
-            <h4>Items with Icons</h4>
-            <Select
-              v-model="customItemValue"
-              label="Select a fruit"
-              :items="fruitItemsWithIcons"
-            >
-              <template #item="{ item, props: itemProps }">
-                <v-list-item v-bind="itemProps">
-                  <template #prepend>
-                    <span class="item-icon">{{ item.raw.icon }}</span>
-                  </template>
-                  <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
-                </v-list-item>
-              </template>
-            </Select>
-          </div>
-
-          <div class="example-item">
-            <h4>Items with Description</h4>
-            <Select
-              v-model="customItemDescValue"
-              label="Select a treatment"
-              :items="treatmentItemsWithDesc"
-            >
-              <template #item="{ item, props: itemProps }">
-                <v-list-item v-bind="itemProps">
-                  <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
-                  <v-list-item-subtitle>{{ item.raw.description }}</v-list-item-subtitle>
-                </v-list-item>
-              </template>
-            </Select>
-          </div>
-
-          <div class="example-item">
-            <h4>Items with Status Badge</h4>
-            <Select
-              v-model="customItemStatusValue"
-              label="Select a patient"
-              :items="patientItems"
-            >
-              <template #item="{ item, props: itemProps }">
-                <v-list-item v-bind="itemProps">
-                  <template #prepend>
-                    <span
-                      class="status-dot"
-                      :class="item.raw.status"
-                    ></span>
-                  </template>
-                  <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
-                  <template #append>
-                    <span class="status-badge" :class="item.raw.status">
-                      {{ item.raw.statusLabel }}
-                    </span>
-                  </template>
-                </v-list-item>
-              </template>
-            </Select>
-          </div>
-
-          <div class="example-item">
-            <h4>Items with Custom Layout</h4>
-            <Select
-              v-model="customLayoutValue"
-              label="Select a user"
-              :items="userItems"
-            >
-              <template #item="{ item, props: itemProps }">
-                <v-list-item v-bind="itemProps" class="custom-user-item">
-                  <div class="user-item-content">
-                    <div class="user-avatar">{{ item.raw.initials }}</div>
-                    <div class="user-info">
-                      <span class="user-name">{{ item.raw.title }}</span>
-                      <span class="user-email">{{ item.raw.email }}</span>
-                    </div>
-                  </div>
-                </v-list-item>
-              </template>
-            </Select>
-          </div>
-        </div>
-      </div>
-
-      <!-- Custom Selection Slot Examples -->
-      <div class="section">
-        <h3 class="section-title">Custom Selection Slot</h3>
-        <p class="section-description">Customize how selected items appear in the input field</p>
-        <div class="examples-grid">
-          <div class="example-item">
-            <h4>Selection with Icon</h4>
-            <Select
-              v-model="selectionIconValue"
-              label="Select a fruit"
-              :items="fruitItemsWithIcons"
-              :auto-select-first="true"
-            >
-              <template #selection="{ item }">
-                <span class="selection-with-icon">
-                  <span class="selection-icon">{{ item.raw.icon }}</span>
-                  <span>{{ item.raw.title }}</span>
-                </span>
-              </template>
-              <template #item="{ item, props: itemProps }">
-                <v-list-item v-bind="itemProps">
-                  <template #prepend>
-                    <span class="item-icon">{{ item.raw.icon }}</span>
-                  </template>
-                  <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
-                </v-list-item>
-              </template>
-            </Select>
-          </div>
-
-          <div class="example-item">
-            <h4>Selection with Status</h4>
-            <Select
-              v-model="selectionStatusValue"
-              label="Select a patient"
-              :items="patientItems"
-            >
-              <template #selection="{ item }">
-                <span class="selection-with-status">
-                  <span class="status-dot" :class="item.raw.status"></span>
-                  <span>{{ item.raw.title }}</span>
-                </span>
-              </template>
-              <template #item="{ item, props: itemProps }">
-                <v-list-item v-bind="itemProps">
-                  <template #prepend>
-                    <span class="status-dot" :class="item.raw.status"></span>
-                  </template>
-                  <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
-                  <template #append>
-                    <span class="status-badge" :class="item.raw.status">
-                      {{ item.raw.statusLabel }}
-                    </span>
-                  </template>
-                </v-list-item>
-              </template>
-            </Select>
-          </div>
-
-          <div class="example-item">
-            <h4>Selection with Avatar</h4>
-            <Select
-              v-model="selectionAvatarValue"
-              label=""
-              :items="userItems"
-              :density="'comfortable'"
-              menu-icon="heroicons:chevron-down"
-            >
-              <template #selection="{ item }">
-                <span class="selection-with-avatar">
-                  <span class="selection-avatar">{{ item.raw.initials }}</span>
-                  <span>{{ item.raw.title }}</span>
-                </span>
-              </template>
-              <template #item="{ item, props: itemProps }">
-                <v-list-item v-bind="itemProps">
-                  <div class="user-item-content">
-                    <div class="user-avatar">{{ item.raw.initials }}</div>
-                    <div class="user-info">
-                      <span class="user-name">{{ item.raw.title }}</span>
-                      <span class="user-email">{{ item.raw.email }}</span>
-                    </div>
-                  </div>
-                </v-list-item>
-              </template>
-            </Select>
-          </div>
-
-          <div class="example-item">
-            <h4>Selection with Country Flag</h4>
-            <Select
-              v-model="selectionFlagValue"
-              label="Select a country"
-              :items="countryItemsWithFlags"
-            >
-              <template #selection="{ item }">
-                <span class="selection-with-flag">
-                  <span class="country-flag">{{ item.raw.flag }}</span>
-                  <span>{{ item.raw.title }}</span>
-                </span>
-              </template>
-              <template #item="{ item, props: itemProps }">
-                <v-list-item v-bind="itemProps">
-                  <template #prepend>
-                    <span class="country-flag">{{ item.raw.flag }}</span>
-                  </template>
-                  <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
-                </v-list-item>
-              </template>
-            </Select>
-          </div>
-
-          <div class="example-item wide">
-            <h4>Multiple Selection with Custom Chips</h4>
-            <Select
-              v-model="selectionMultipleValue"
-              label="Select fruits"
-              :items="fruitItemsWithIcons"
-              :multiple="true"
-            >
-              <template #selection="{ item, index }">
-                <v-chip
-                  v-if="index < 3"
-                  size="small"
-                  class="custom-chip"
-                  closable
-                  @click:close="removeSelection(index)"
-                >
-                  <span class="chip-icon">{{ item.raw.icon }}</span>
-                  {{ item.raw.title }}
-                </v-chip>
-                <span v-if="index === 3" class="more-indicator">
-                  (+{{ selectionMultipleValue.length - 3 }} more)
-                </span>
-              </template>
-              <template #item="{ item, props: itemProps }">
-                <v-list-item v-bind="itemProps">
-                  <template #prepend>
-                    <span class="item-icon">{{ item.raw.icon }}</span>
-                  </template>
-                  <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
-                </v-list-item>
-              </template>
-            </Select>
-          </div>
-
-          <div class="example-item wide">
-            <h4>Multiple Selection with Color Tags</h4>
-            <Select
-              v-model="selectionColorTagsValue"
-              label="Select tags"
-              :items="colorTagItems"
-              :multiple="true"
-            >
-              <template #selection="{ item }">
-                <span
-                  class="color-tag"
-                  :style="{ backgroundColor: item.raw.color, color: item.raw.textColor }"
-                >
-                  {{ item.raw.title }}
-                </span>
-              </template>
-              <template #item="{ item, props: itemProps }">
-                <v-list-item v-bind="itemProps">
-                  <template #prepend>
-                    <span
-                      class="color-dot"
-                      :style="{ backgroundColor: item.raw.color }"
-                    ></span>
-                  </template>
-                  <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
-                </v-list-item>
-              </template>
-            </Select>
-          </div>
-        </div>
-      </div>
-      <!-- Patient Search (Figma Design) -->
-      <div class="section">
-        <h3 class="section-title">Patient Search (Figma Design)</h3>
-        <p class="section-description">Autocomplete with custom item rendering, bold matching text, and empty state</p>
-        <div class="examples-grid">
-          <div class="example-item">
-            <h4>Patient Search</h4>
-            <SelectAutocomplete
-              v-model="patientSearchValue"
-              label=""
-              placeholder="Gebe den Patienten Namen ein"
-              :persistent-placeholder="true"
-              :items="patientSearchItems"
-              :clearable="true"
-              clear-icon="mdi-close"
-              :return-object="true"
-              item-title="name"
-              item-value="id"
-              :auto-select-first="true"
-              :custom-filter="patientFilter"
-              @update:search="onPatientSearch"
-            >
-              <template #append-inner>
-                <svg v-if="!patientSearchQuery" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
-              </template>
-              <template #item="{ item, props: itemProps }">
-                <v-list-item v-bind="itemProps" :title="undefined" class="patient-search-item">
-                  <template #default>
-                    <div class="patient-row">
-                      <div class="patient-left">
-                        <span class="patient-name" v-html="highlightMatch(item.raw.name, patientSearchQuery)"></span>
-                        <span class="patient-id">#{{ item.raw.patientId }}</span>
-                      </div>
-                      <span class="patient-dob">{{ item.raw.dob }}</span>
-                    </div>
-                  </template>
-                </v-list-item>
-              </template>
-              <template #no-data>
-                <div class="patient-no-data">
-                  <p class="patient-no-data-title">Kein Patient gefunden</p>
-                  <p class="patient-no-data-desc">Bitte überprüfen Sie die Eingabe oder versuchen Sie es mit einem anderen Namen.</p>
-                  <button class="patient-add-btn" @click="onAddPatient">Neuen Patienten hinzufügen</button>
-                </div>
-              </template>
-            </SelectAutocomplete>
-            <div v-if="patientSearchValue" class="patient-selected-display">
-              <div class="patient-selected-info">
-                <span class="patient-selected-name">{{ patientSearchValue.name }}</span>
-                <span class="patient-selected-meta">#{{ patientSearchValue.patientId }}, {{ patientSearchValue.dob }}</span>
-              </div>
-              <button class="patient-edit-btn" @click="patientSearchValue = null">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- SelectAutocomplete Section -->
-      <div class="section">
-        <h3 class="section-title">SelectAutocomplete</h3>
-        <p class="section-description">Searchable select with autocomplete filtering</p>
-        <div class="examples-grid">
-          <div class="example-item">
-            <h4>Default</h4>
-            <SelectAutocomplete
-              v-model="autocompleteBasicValue"
-              label="Search a fruit"
-              :items="fruitItems"
-            />
-            <p class="value-display">Selected: {{ autocompleteBasicValue?.title || 'None' }}</p>
-          </div>
-
-          <div class="example-item">
-            <h4>With Placeholder</h4>
-            <SelectAutocomplete
-              v-model="autocompletePlaceholderValue"
-              label="Treatment"
-              placeholder="Type to search..."
-              :persistent-placeholder="true"
-              :items="treatmentItems"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Clearable</h4>
-            <SelectAutocomplete
-              v-model="autocompleteClearableValue"
-              label="Clearable Autocomplete"
-              :items="fruitItems"
-              :clearable="true"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Disabled</h4>
-            <SelectAutocomplete
-              v-model="autocompleteDisabledValue"
-              label="Disabled Autocomplete"
-              :items="fruitItems"
-              :disabled="true"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Error State</h4>
-            <SelectAutocomplete
-              v-model="autocompleteErrorValue"
-              label="Error Autocomplete"
-              :items="fruitItems"
-              :error="true"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Country Search</h4>
-            <SelectAutocomplete
-              v-model="autocompleteCountryValue"
-              label="Country"
-              placeholder="Search country..."
-              :items="countryItems"
-              :clearable="true"
-            />
-          </div>
-
-          <div class="example-item wide">
-            <h4>Multiple with Chips</h4>
-            <SelectAutocomplete
-              v-model="autocompleteMultipleValue"
-              label="Select multiple"
-              :items="tagItems"
-              :multiple="true"
-              :chips="true"
-              :closable-chips="true"
-              :clearable="true"
-            />
-            <p class="value-display">Selected: {{ autocompleteMultipleValue?.map(v => v.title).join(', ') || 'None' }}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import {
-  domain,
-  setTestingDomain,
-  clearTestingDomain,
-} from "@/utils/index";
-
-import Select from "@/components/Select/Select.vue";
-import SelectAutocomplete from "@/components/SelectAutocomplete/SelectAutocomplete.vue";
-import ListItem from "@/components/ListItem/ListItem.vue";
-import { avatarPlaceholder } from "..";
-
-const currentDomain = computed(() => domain.value);
-
-const switchToDental = () => {
-  setTestingDomain("domain-dental");
-};
-
-const switchToCocoon = () => {
-  setTestingDomain("domain-cocoon");
-};
-
-const resetDomain = () => {
-  clearTestingDomain();
-};
-
-// Sample items
-const fruitItems = [
-  { title: 'Apple', value: 'apple' },
-  { title: 'Banana', value: 'banana' },
-  { title: 'Cherry', value: 'cherry' },
-  { title: 'Orange', value: 'orange' },
-  { title: 'Strawberry', value: 'strawberry' },
-];
-
-const countryItems = [
-  { title: 'Deutschland', value: 'de' },
-  { title: 'Österreich', value: 'at' },
-  { title: 'Schweiz', value: 'ch' },
-  { title: 'Frankreich', value: 'fr' },
-  { title: 'Italien', value: 'it' },
-];
-
-const treatmentItems = [
-  { title: 'Zahnreinigung', value: 'cleaning' },
-  { title: 'Kontrolluntersuchung', value: 'checkup' },
-  { title: 'Implantologie', value: 'implant' },
-  { title: 'Kieferorthopädie', value: 'ortho' },
-  { title: 'Wurzelbehandlung', value: 'root' },
-];
-
-const tagItems = [
-  { title: 'Urgent', value: 'urgent' },
-  { title: 'Follow-up', value: 'followup' },
-  { title: 'New Patient', value: 'new' },
-  { title: 'VIP', value: 'vip' },
-  { title: 'Insurance Pending', value: 'insurance' },
-];
-
-// Patient search items (Figma design)
-const patientSearchItems = [
-  { name: 'Weber, Wolfgang', patientId: '06432', dob: '12.09.2001', id: '1' },
-  { name: 'Krause, Wolfram', patientId: '26152', dob: '12.04.1954', id: '2' },
-  { name: 'Wolff, Wolfhard', patientId: '82692', dob: '15.05.1953', id: '3' },
-  { name: 'Adler, Wolfbert', patientId: '83827', dob: '12.09.2000', id: '4' },
-  { name: 'Schulz, Wolfgang', patientId: '72376', dob: '05.12.1987', id: '5' },
-];
-
-// Custom item slot examples
-const fruitItemsWithIcons = [
-  { title: 'Apple', value: 'apple', icon: '🍎' },
-  { title: 'Banana', value: 'banana', icon: '🍌' },
-  { title: 'Cherry', value: 'cherry', icon: '🍒' },
-  { title: 'Orange', value: 'orange', icon: '🍊' },
-  { title: 'Strawberry', value: 'strawberry', icon: '🍓' },
-];
-
-const treatmentItemsWithDesc = [
-  { title: 'Zahnreinigung', value: 'cleaning', description: 'Professionelle Reinigung und Politur' },
-  { title: 'Kontrolluntersuchung', value: 'checkup', description: 'Regelmäßige Kontrolle der Zahngesundheit' },
-  { title: 'Implantologie', value: 'implant', description: 'Ersatz fehlender Zähne durch Implantate' },
-  { title: 'Wurzelbehandlung', value: 'root', description: 'Behandlung des Zahnmarks' },
-];
-
-const patientItems = [
-  { title: 'Max Mustermann', value: 'max', status: 'active', statusLabel: 'Aktiv' },
-  { title: 'Anna Schmidt', value: 'anna', status: 'waiting', statusLabel: 'Wartend' },
-  { title: 'Peter Weber', value: 'peter', status: 'inactive', statusLabel: 'Inaktiv' },
-  { title: 'Lisa Müller', value: 'lisa', status: 'active', statusLabel: 'Aktiv' },
-];
-
-const userItems = [
-  { title: 'Dr. Maria Schmidt', value: 'maria', initials: 'MS', email: 'maria@praxis.de' },
-  { title: 'Dr. Thomas Bauer', value: 'thomas', initials: 'TB', email: 'thomas@praxis.de' },
-  { title: 'Julia Fischer', value: 'julia', initials: 'JF', email: 'julia@praxis.de' },
-];
-
-// Custom selection slot examples
-const countryItemsWithFlags = [
-  { title: 'Deutschland', value: 'de', flag: '🇩🇪' },
-  { title: 'Österreich', value: 'at', flag: '🇦🇹' },
-  { title: 'Schweiz', value: 'ch', flag: '🇨🇭' },
-  { title: 'Frankreich', value: 'fr', flag: '🇫🇷' },
-  { title: 'Italien', value: 'it', flag: '🇮🇹' },
-];
-
-const colorTagItems = [
-  { title: 'High Priority', value: 'high', color: '#ef4444', textColor: '#ffffff' },
-  { title: 'Medium Priority', value: 'medium', color: '#f59e0b', textColor: '#ffffff' },
-  { title: 'Low Priority', value: 'low', color: '#22c55e', textColor: '#ffffff' },
-  { title: 'On Hold', value: 'hold', color: '#6b7280', textColor: '#ffffff' },
-  { title: 'In Progress', value: 'progress', color: '#3b82f6', textColor: '#ffffff' },
-];
-
-// Basic examples
-const basicValue = ref(null);
-const placeholderValue = ref(null);
-const clearableValue = ref(null);
-const borderHoverValue = ref(null);
-
-// States
-const normalState = ref(null);
-const disabledValue = ref({ title: 'Apple', value: 'apple' });
-const errorValue = ref(null);
-const preselectedValue = ref({ title: 'Cherry', value: 'cherry' });
-
-// Multiple selection
-const multipleValue = ref([]);
-const chipsValue = ref([]);
-const closableChipsValue = ref([
-  { title: 'Apple', value: 'apple' },
-  { title: 'Cherry', value: 'cherry' },
-]);
-
-// Variants
-const variantOutlined = ref(null);
-const variantUnderlined = ref(null);
-const variantFilled = ref(null);
-const variantSolo = ref(null);
-const variantSoloFilled = ref(null);
-const variantPlain = ref(null);
-
-// Density
-const densityDefault = ref(null);
-const densityComfortable = ref(null);
-const densityDefaultSize = ref(null);
-
-// Practical examples
-const countryValue = ref(null);
-const treatmentValue = ref(null);
-const tagsValue = ref([]);
-
-// Patient search (Figma design)
-const patientSearchValue = ref(null);
-const patientSearchQuery = ref('');
-
-const patientFilter = (_value: string, query: string, item: any) => {
-  if (!query) return true;
-  const q = query.toLowerCase();
-  const raw = item.raw;
-  return (
-    raw.name?.toLowerCase().includes(q) ||
-    raw.patientId?.toLowerCase().includes(q) ||
-    raw.dob?.toLowerCase().includes(q)
-  );
-};
-
-const onPatientSearch = (val: string) => {
-  patientSearchQuery.value = val || '';
-};
-
-const highlightMatch = (text: string, query: string): string => {
-  if (!query) return text;
-  const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-  const regex = new RegExp(`(${escaped})`, 'gi');
-  return text.replace(regex, '<strong>$1</strong>');
-};
-
-const onAddPatient = () => {
-  alert('Neuen Patienten hinzufügen');
-};
-
-// Custom item slot examples
-const customItemValue = ref(null);
-const customItemDescValue = ref(null);
-const customItemStatusValue = ref(null);
-const customLayoutValue = ref(null);
-
-// Custom selection slot examples
-const selectionIconValue = ref(null);
-const selectionStatusValue = ref(null);
-const selectionAvatarValue = ref(null);
-const selectionFlagValue = ref(null);
-const selectionMultipleValue = ref([]);
-const selectionColorTagsValue = ref([]);
-
-const removeSelection = (index: number) => {
-  selectionMultipleValue.value.splice(index, 1);
-};
-</script>
-
-<style scoped>
-.page {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  width: 100vw;
-  min-height: 100vh;
-  background-color: #f5f5f5;
-  padding: 2rem 0;
-  overflow-y: auto;
-}
-
-.element-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  width: 95%;
-  max-width: 1400px;
-  gap: 2rem;
-}
-
-.controls {
-  width: 100%;
-  background: white;
-  padding: 1.5rem;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  text-align: center;
-}
-
-.controls h2 {
-  margin: 0 0 1rem 0;
-  color: #333;
-  font-size: 1.5rem;
-}
-
-.button-group {
-  display: flex;
-  gap: 1rem;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.control-btn {
-  padding: 0.75rem 1.5rem;
-  font-size: 1rem;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  background-color: #4caf50;
-  color: white;
-  transition: background-color 0.3s ease;
-  font-weight: 500;
-}
-
-.control-btn:hover {
-  background-color: #45a049;
-}
-
-.control-btn.reset {
-  background-color: #f44336;
-}
-
-.control-btn.reset:hover {
-  background-color: #da190b;
-}
-
-.section {
-  width: 100%;
-  background: white;
-  padding: 1.5rem;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.section-title {
-  margin: 0 0 1.5rem 0;
-  color: #333;
-  font-size: 1.25rem;
-  font-weight: 600;
-  border-bottom: 2px solid #e0e0e0;
-  padding-bottom: 0.5rem;
-}
-
-.examples-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 1.5rem;
-}
-
-.example-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.example-item.wide {
-  grid-column: span 2;
-}
-
-.example-item h4 {
-  margin: 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: #555;
-}
-
-.value-display {
-  margin: 0.5rem 0 0 0;
-  font-size: 0.8125rem;
-  color: #666;
-  font-style: italic;
-}
-
-@media (max-width: 768px) {
-  .examples-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .example-item.wide {
-    grid-column: span 1;
-  }
-}
-
-/* Custom item slot styles */
-.item-icon {
-  font-size: 1.25rem;
-  margin-right: 0.5rem;
-}
-
-.status-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  margin-right: 0.5rem;
-}
-
-.status-dot.active {
-  background-color: #4caf50;
-}
-
-.status-dot.waiting {
-  background-color: #ff9800;
-}
-
-.status-dot.inactive {
-  background-color: #9e9e9e;
-}
-
-.status-badge {
-  font-size: 0.75rem;
-  padding: 0.125rem 0.5rem;
-  border-radius: 999px;
-  font-weight: 500;
-}
-
-.status-badge.active {
-  background-color: #e8f5e9;
-  color: #2e7d32;
-}
-
-.status-badge.waiting {
-  background-color: #fff3e0;
-  color: #ef6c00;
-}
-
-.status-badge.inactive {
-  background-color: #f5f5f5;
-  color: #757575;
-}
-
-.user-item-content {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.25rem 0;
-}
-
-.user-avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background-color: #172774;
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.user-info {
-  display: flex;
-  flex-direction: column;
-}
-
-.user-name {
-  font-weight: 500;
-  color: #333;
-}
-
-.user-email {
-  font-size: 0.75rem;
-  color: #666;
-}
-
-/* Section description */
-.section-description {
-  margin: -1rem 0 1.5rem 0;
-  font-size: 0.875rem;
-  color: #666;
-}
-
-/* Custom selection slot styles */
-.selection-with-icon,
-.selection-with-status,
-.selection-with-avatar,
-.selection-with-flag {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.selection-icon {
-  font-size: 1.125rem;
-}
-
-.selection-avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: #172774;
-  color: white;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.625rem;
-  font-weight: 600;
-}
-
-.country-flag {
-  font-size: 1.25rem;
-  margin-right: 0.25rem;
-}
-
-.custom-chip {
-  margin: 2px;
-}
-
-.chip-icon {
-  margin-right: 0.25rem;
-}
-
-.more-indicator {
-  font-size: 0.75rem;
-  color: #666;
-  margin-left: 0.25rem;
-}
-
-.color-tag {
-  display: inline-block;
-  padding: 0.125rem 0.5rem;
-  border-radius: 4px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  margin: 2px;
-}
-
-.color-dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  margin-right: 0.5rem;
-}
-
-/* Patient Search (Figma Design) styles */
-.patient-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  width: 100%;
-  padding: 0.375rem 0;
-}
-
-.patient-left {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.patient-name {
-  font-size: 0.9375rem;
-  font-weight: 400;
-  color: var(--Dental-Blue-0, #172774);
-}
-
-.patient-id {
-  font-size: 0.75rem;
-  color: var(--Soft-Concrete-2, #9e9e9e);
-}
-
-.patient-dob {
-  font-size: 0.875rem;
-  color: var(--Dental-Blue-0, #172774);
-  white-space: nowrap;
-  margin-left: 1rem;
-}
-
-.patient-no-data {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 1.5rem 1rem;
-  text-align: center;
-}
-
-.patient-no-data-title {
-  font-size: 0.9375rem;
-  font-weight: 600;
-  color: var(--Dental-Blue-0, #172774);
-  margin: 0 0 0.5rem 0;
-}
-
-.patient-no-data-desc {
-  font-size: 0.8125rem;
-  color: var(--Soft-Concrete-2, #9e9e9e);
-  margin: 0 0 1rem 0;
-  max-width: 260px;
-  line-height: 1.4;
-}
-
-.patient-add-btn {
-  background: none;
-  border: 1.5px solid var(--Dental-Blue-0, #172774);
-  color: var(--Dental-Blue-0, #172774);
-  border-radius: 999px;
-  padding: 0.5rem 1.25rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.patient-add-btn:hover {
-  background-color: rgba(23, 39, 116, 0.05);
-}
-
-.patient-selected-display {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 0.75rem;
-  padding: 0 0.25rem;
-}
-
-.patient-selected-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.patient-selected-name {
-  font-size: 0.9375rem;
-  font-weight: 500;
-  color: var(--Dental-Blue-0, #172774);
-}
-
-.patient-selected-meta {
-  font-size: 0.75rem;
-  color: var(--Soft-Concrete-2, #9e9e9e);
-}
-
-.patient-edit-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--Dental-Blue-0, #172774);
-  padding: 0.25rem;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.patient-edit-btn:hover {
-  background-color: rgba(23, 39, 116, 0.05);
-}
-</style>
+<template>
+  <div class="page">
+    <div class="element-container">
+      <div class="controls">
+        <h2>Testing Domain: {{ currentDomain }}</h2>
+        <div class="button-group">
+          <button
+            @click="switchToDental"
+            class="control-btn"
+          >
+            Switch to Wunschlachen (Dental)
+          </button>
+          <button
+            @click="switchToCocoon"
+            class="control-btn"
+          >
+            Switch to White Cocoon
+          </button>
+          <button
+            @click="resetDomain"
+            class="control-btn reset"
+          >
+            Reset to Auto-Detect
+          </button>
+        </div>
+      </div>
+
+      <!-- Basic Select Examples -->
+      <div class="section">
+        <h3 class="section-title">Basic Select</h3>
+        <div class="examples-grid">
+          <div class="example-item">
+            <h4>Default (Outlined)</h4>
+            <Select
+              v-model="basicValue"
+              label="Select an option"
+              :items="fruitItems"
+            />
+            <p class="value-display">Selected: {{ basicValue?.title || 'None' }}</p>
+          </div>
+
+          <div class="example-item">
+            <h4>With Placeholder</h4>
+            <Select
+              v-model="placeholderValue"
+              label="Favorite Fruit"
+              placeholder="Choose a fruit..."
+              :persistent-placeholder="true"
+              :items="fruitItems"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Clearable</h4>
+            <Select
+              v-model="clearableValue"
+              label="Clearable Select"
+              :items="fruitItems"
+              :clearable="true"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Border on Hover</h4>
+            <Select
+              v-model="borderHoverValue"
+              label="Hover to see border"
+              :items="fruitItems"
+              :border-on-hover="true"
+              variant="plain"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- States Section -->
+      <div class="section">
+        <h3 class="section-title">States</h3>
+        <div class="examples-grid">
+          <div class="example-item">
+            <h4>Normal</h4>
+            <Select
+              v-model="normalState"
+              label="Normal State"
+              :items="fruitItems"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Disabled</h4>
+            <Select
+              v-model="disabledValue"
+              label="Disabled Select"
+              :items="fruitItems"
+              :disabled="true"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Error</h4>
+            <Select
+              v-model="errorValue"
+              label="Error State"
+              :items="fruitItems"
+              :error="true"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Pre-selected Value</h4>
+            <Select
+              v-model="preselectedValue"
+              label="Pre-selected"
+              :items="fruitItems"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Multiple Selection -->
+      <div class="section">
+        <h3 class="section-title">Multiple Selection</h3>
+        <div class="examples-grid">
+          <div class="example-item wide">
+            <h4>Multiple Select</h4>
+            <Select
+              v-model="multipleValue"
+              label="Select multiple options"
+              :items="fruitItems"
+              :multiple="true"
+            />
+            <p class="value-display">Selected: {{ multipleValue?.map(v => v.title).join(', ') || 'None' }}</p>
+          </div>
+
+          <div class="example-item wide">
+            <h4>Multiple with Chips</h4>
+            <Select
+              v-model="chipsValue"
+              label="Select with chips"
+              :items="fruitItems"
+              :multiple="true"
+              :chips="true"
+            />
+          </div>
+
+          <div class="example-item wide">
+            <h4>Multiple with Closable Chips</h4>
+            <Select
+              v-model="closableChipsValue"
+              label="Closable chips"
+              :items="fruitItems"
+              :multiple="true"
+              :chips="true"
+              :closable-chips="true"
+              :clearable="true"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Variants Section -->
+      <div class="section">
+        <h3 class="section-title">Variants</h3>
+        <div class="examples-grid">
+          <div class="example-item">
+            <h4>Outlined (Default)</h4>
+            <Select
+              v-model="variantOutlined"
+              label="Outlined"
+              :items="fruitItems"
+              variant="outlined"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Underlined</h4>
+            <Select
+              v-model="variantUnderlined"
+              label="Underlined"
+              :items="fruitItems"
+              variant="underlined"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Filled</h4>
+            <Select
+              v-model="variantFilled"
+              label="Filled"
+              :items="fruitItems"
+              variant="filled"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Solo</h4>
+            <Select
+              v-model="variantSolo"
+              label="Solo"
+              :items="fruitItems"
+              variant="solo"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Solo Filled</h4>
+            <Select
+              v-model="variantSoloFilled"
+              label="Solo Filled"
+              :items="fruitItems"
+              variant="solo-filled"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Plain</h4>
+            <Select
+              v-model="variantPlain"
+              label="Plain"
+              :items="fruitItems"
+              variant="plain"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Density Section -->
+      <div class="section">
+        <h3 class="section-title">Density</h3>
+        <div class="examples-grid">
+          <div class="example-item">
+            <h4>Default (Compact)</h4>
+            <Select
+              v-model="densityDefault"
+              label="Compact"
+              :items="fruitItems"
+              density="compact"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Comfortable</h4>
+            <Select
+              v-model="densityComfortable"
+              label="Comfortable"
+              :items="fruitItems"
+              density="comfortable"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Default Density</h4>
+            <Select
+              v-model="densityDefaultSize"
+              label="Default"
+              :items="fruitItems"
+              density="default"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Practical Examples -->
+      <div class="section">
+        <h3 class="section-title">Practical Examples</h3>
+        <div class="examples-grid">
+          <div class="example-item">
+            <h4>Country Selection</h4>
+            <Select
+              v-model="countryValue"
+              label="Country"
+              placeholder="Select your country"
+              :items="countryItems"
+              :clearable="true"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Treatment Type</h4>
+            <Select
+              v-model="treatmentValue"
+              label="Behandlungsart"
+              :items="treatmentItems"
+            />
+          </div>
+
+          <div class="example-item wide">
+            <h4>Multi-select Tags</h4>
+            <Select
+              v-model="tagsValue"
+              label="Tags"
+              :items="tagItems"
+              :multiple="true"
+              :chips="true"
+              :closable-chips="true"
+              :clearable="true"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Custom Item Slot Examples -->
+      <div class="section">
+        <h3 class="section-title">Custom Item Slot</h3>
+        <div class="examples-grid">
+          <div class="example-item">
+            <h4>Items with Icons</h4>
+            <Select
+              v-model="customItemValue"
+              label="Select a fruit"
+              :items="fruitItemsWithIcons"
+            >
+              <template #item="{ item, props: itemProps }">
+                <v-list-item v-bind="itemProps">
+                  <template #prepend>
+                    <span class="item-icon">{{ item.raw.icon }}</span>
+                  </template>
+                  <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                </v-list-item>
+              </template>
+            </Select>
+          </div>
+
+          <div class="example-item">
+            <h4>Items with Description</h4>
+            <Select
+              v-model="customItemDescValue"
+              label="Select a treatment"
+              :items="treatmentItemsWithDesc"
+            >
+              <template #item="{ item, props: itemProps }">
+                <v-list-item v-bind="itemProps">
+                  <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                  <v-list-item-subtitle>{{ item.raw.description }}</v-list-item-subtitle>
+                </v-list-item>
+              </template>
+            </Select>
+          </div>
+
+          <div class="example-item">
+            <h4>Items with Status Badge</h4>
+            <Select
+              v-model="customItemStatusValue"
+              label="Select a patient"
+              :items="patientItems"
+            >
+              <template #item="{ item, props: itemProps }">
+                <v-list-item v-bind="itemProps">
+                  <template #prepend>
+                    <span
+                      class="status-dot"
+                      :class="item.raw.status"
+                    ></span>
+                  </template>
+                  <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                  <template #append>
+                    <span class="status-badge" :class="item.raw.status">
+                      {{ item.raw.statusLabel }}
+                    </span>
+                  </template>
+                </v-list-item>
+              </template>
+            </Select>
+          </div>
+
+          <div class="example-item">
+            <h4>Items with Custom Layout</h4>
+            <Select
+              v-model="customLayoutValue"
+              label="Select a user"
+              :items="userItems"
+            >
+              <template #item="{ item, props: itemProps }">
+                <v-list-item v-bind="itemProps" class="custom-user-item">
+                  <div class="user-item-content">
+                    <div class="user-avatar">{{ item.raw.initials }}</div>
+                    <div class="user-info">
+                      <span class="user-name">{{ item.raw.title }}</span>
+                      <span class="user-email">{{ item.raw.email }}</span>
+                    </div>
+                  </div>
+                </v-list-item>
+              </template>
+            </Select>
+          </div>
+        </div>
+      </div>
+
+      <!-- Custom Selection Slot Examples -->
+      <div class="section">
+        <h3 class="section-title">Custom Selection Slot</h3>
+        <p class="section-description">Customize how selected items appear in the input field</p>
+        <div class="examples-grid">
+          <div class="example-item">
+            <h4>Selection with Icon</h4>
+            <Select
+              v-model="selectionIconValue"
+              label="Select a fruit"
+              :items="fruitItemsWithIcons"
+              :auto-select-first="true"
+            >
+              <template #selection="{ item }">
+                <span class="selection-with-icon">
+                  <span class="selection-icon">{{ item.raw.icon }}</span>
+                  <span>{{ item.raw.title }}</span>
+                </span>
+              </template>
+              <template #item="{ item, props: itemProps }">
+                <v-list-item v-bind="itemProps">
+                  <template #prepend>
+                    <span class="item-icon">{{ item.raw.icon }}</span>
+                  </template>
+                  <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                </v-list-item>
+              </template>
+            </Select>
+          </div>
+
+          <div class="example-item">
+            <h4>Selection with Status</h4>
+            <Select
+              v-model="selectionStatusValue"
+              label="Select a patient"
+              :items="patientItems"
+            >
+              <template #selection="{ item }">
+                <span class="selection-with-status">
+                  <span class="status-dot" :class="item.raw.status"></span>
+                  <span>{{ item.raw.title }}</span>
+                </span>
+              </template>
+              <template #item="{ item, props: itemProps }">
+                <v-list-item v-bind="itemProps">
+                  <template #prepend>
+                    <span class="status-dot" :class="item.raw.status"></span>
+                  </template>
+                  <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                  <template #append>
+                    <span class="status-badge" :class="item.raw.status">
+                      {{ item.raw.statusLabel }}
+                    </span>
+                  </template>
+                </v-list-item>
+              </template>
+            </Select>
+          </div>
+
+          <div class="example-item">
+            <h4>Selection with Avatar</h4>
+            <Select
+              v-model="selectionAvatarValue"
+              label=""
+              :items="userItems"
+              :density="'comfortable'"
+              menu-icon="heroicons:chevron-down"
+            >
+              <template #selection="{ item }">
+                <span class="selection-with-avatar">
+                  <span class="selection-avatar">{{ item.raw.initials }}</span>
+                  <span>{{ item.raw.title }}</span>
+                </span>
+              </template>
+              <template #item="{ item, props: itemProps }">
+                <v-list-item v-bind="itemProps">
+                  <div class="user-item-content">
+                    <div class="user-avatar">{{ item.raw.initials }}</div>
+                    <div class="user-info">
+                      <span class="user-name">{{ item.raw.title }}</span>
+                      <span class="user-email">{{ item.raw.email }}</span>
+                    </div>
+                  </div>
+                </v-list-item>
+              </template>
+            </Select>
+          </div>
+
+          <div class="example-item">
+            <h4>Selection with Country Flag</h4>
+            <Select
+              v-model="selectionFlagValue"
+              label="Select a country"
+              :items="countryItemsWithFlags"
+            >
+              <template #selection="{ item }">
+                <span class="selection-with-flag">
+                  <span class="country-flag">{{ item.raw.flag }}</span>
+                  <span>{{ item.raw.title }}</span>
+                </span>
+              </template>
+              <template #item="{ item, props: itemProps }">
+                <v-list-item v-bind="itemProps">
+                  <template #prepend>
+                    <span class="country-flag">{{ item.raw.flag }}</span>
+                  </template>
+                  <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                </v-list-item>
+              </template>
+            </Select>
+          </div>
+
+          <div class="example-item wide">
+            <h4>Multiple Selection with Custom Chips</h4>
+            <Select
+              v-model="selectionMultipleValue"
+              label="Select fruits"
+              :items="fruitItemsWithIcons"
+              :multiple="true"
+            >
+              <template #selection="{ item, index }">
+                <v-chip
+                  v-if="index < 3"
+                  size="small"
+                  class="custom-chip"
+                  closable
+                  @click:close="removeSelection(index)"
+                >
+                  <span class="chip-icon">{{ item.raw.icon }}</span>
+                  {{ item.raw.title }}
+                </v-chip>
+                <span v-if="index === 3" class="more-indicator">
+                  (+{{ selectionMultipleValue.length - 3 }} more)
+                </span>
+              </template>
+              <template #item="{ item, props: itemProps }">
+                <v-list-item v-bind="itemProps">
+                  <template #prepend>
+                    <span class="item-icon">{{ item.raw.icon }}</span>
+                  </template>
+                  <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                </v-list-item>
+              </template>
+            </Select>
+          </div>
+
+          <div class="example-item wide">
+            <h4>Multiple Selection with Color Tags</h4>
+            <Select
+              v-model="selectionColorTagsValue"
+              label="Select tags"
+              :items="colorTagItems"
+              :multiple="true"
+            >
+              <template #selection="{ item }">
+                <span
+                  class="color-tag"
+                  :style="{ backgroundColor: item.raw.color, color: item.raw.textColor }"
+                >
+                  {{ item.raw.title }}
+                </span>
+              </template>
+              <template #item="{ item, props: itemProps }">
+                <v-list-item v-bind="itemProps">
+                  <template #prepend>
+                    <span
+                      class="color-dot"
+                      :style="{ backgroundColor: item.raw.color }"
+                    ></span>
+                  </template>
+                  <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                </v-list-item>
+              </template>
+            </Select>
+          </div>
+        </div>
+      </div>
+      <!-- Patient Search (Figma Design) -->
+      <div class="section">
+        <h3 class="section-title">Patient Search (Figma Design)</h3>
+        <p class="section-description">Autocomplete with custom item rendering, bold matching text, and empty state</p>
+        <div class="examples-grid">
+          <div class="example-item">
+            <h4>Patient Search</h4>
+            <SelectAutocomplete
+              v-model="patientSearchValue"
+              label=""
+              placeholder="Gebe den Patienten Namen ein"
+              :persistent-placeholder="true"
+              :items="patientSearchItems"
+              :clearable="true"
+              clear-icon="mdi-close"
+              :return-object="true"
+              item-title="name"
+              item-value="id"
+              :auto-select-first="true"
+              :custom-filter="patientFilter"
+              @update:search="onPatientSearch"
+            >
+              <template #append-inner>
+                <svg v-if="!patientSearchQuery" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+              </template>
+              <template #item="{ item, props: itemProps }">
+                <v-list-item v-bind="itemProps" :title="undefined" class="patient-search-item">
+                  <template #default>
+                    <div class="patient-row">
+                      <div class="patient-left">
+                        <span class="patient-name" v-html="highlightMatch(item.raw.name, patientSearchQuery)"></span>
+                        <span class="patient-id">#{{ item.raw.patientId }}</span>
+                      </div>
+                      <span class="patient-dob">{{ item.raw.dob }}</span>
+                    </div>
+                  </template>
+                </v-list-item>
+              </template>
+              <template #no-data>
+                <div class="patient-no-data">
+                  <p class="patient-no-data-title">Kein Patient gefunden</p>
+                  <p class="patient-no-data-desc">Bitte überprüfen Sie die Eingabe oder versuchen Sie es mit einem anderen Namen.</p>
+                  <button class="patient-add-btn" @click="onAddPatient">Neuen Patienten hinzufügen</button>
+                </div>
+              </template>
+            </SelectAutocomplete>
+            <div v-if="patientSearchValue" class="patient-selected-display">
+              <div class="patient-selected-info">
+                <span class="patient-selected-name">{{ patientSearchValue.name }}</span>
+                <span class="patient-selected-meta">#{{ patientSearchValue.patientId }}, {{ patientSearchValue.dob }}</span>
+              </div>
+              <button class="patient-edit-btn" @click="patientSearchValue = null">
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- SelectAutocomplete Section -->
+      <div class="section">
+        <h3 class="section-title">SelectAutocomplete</h3>
+        <p class="section-description">Searchable select with autocomplete filtering</p>
+        <div class="examples-grid">
+          <div class="example-item">
+            <h4>Default</h4>
+            <SelectAutocomplete
+              v-model="autocompleteBasicValue"
+              label="Search a fruit"
+              :items="fruitItems"
+            />
+            <p class="value-display">Selected: {{ autocompleteBasicValue?.title || 'None' }}</p>
+          </div>
+
+          <div class="example-item">
+            <h4>With Placeholder</h4>
+            <SelectAutocomplete
+              v-model="autocompletePlaceholderValue"
+              label="Treatment"
+              placeholder="Type to search..."
+              :persistent-placeholder="true"
+              :items="treatmentItems"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Clearable</h4>
+            <SelectAutocomplete
+              v-model="autocompleteClearableValue"
+              label="Clearable Autocomplete"
+              :items="fruitItems"
+              :clearable="true"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Disabled</h4>
+            <SelectAutocomplete
+              v-model="autocompleteDisabledValue"
+              label="Disabled Autocomplete"
+              :items="fruitItems"
+              :disabled="true"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Error State</h4>
+            <SelectAutocomplete
+              v-model="autocompleteErrorValue"
+              label="Error Autocomplete"
+              :items="fruitItems"
+              :error="true"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Country Search</h4>
+            <SelectAutocomplete
+              v-model="autocompleteCountryValue"
+              label="Country"
+              placeholder="Search country..."
+              :items="countryItems"
+              :clearable="true"
+            />
+          </div>
+
+          <div class="example-item wide">
+            <h4>Multiple with Chips</h4>
+            <SelectAutocomplete
+              v-model="autocompleteMultipleValue"
+              label="Select multiple"
+              :items="tagItems"
+              :multiple="true"
+              :chips="true"
+              :closable-chips="true"
+              :clearable="true"
+            />
+            <p class="value-display">Selected: {{ autocompleteMultipleValue?.map(v => v.title).join(', ') || 'None' }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import {
+  domain,
+  setTestingDomain,
+  clearTestingDomain,
+} from "@/utils/index";
+
+import Select from "@/components/Select/Select.vue";
+import SelectAutocomplete from "@/components/SelectAutocomplete/SelectAutocomplete.vue";
+import ListItem from "@/components/ListItem/ListItem.vue";
+import { avatarPlaceholder } from "..";
+
+const currentDomain = computed(() => domain.value);
+
+const switchToDental = () => {
+  setTestingDomain("domain-dental");
+};
+
+const switchToCocoon = () => {
+  setTestingDomain("domain-cocoon");
+};
+
+const resetDomain = () => {
+  clearTestingDomain();
+};
+
+// Sample items
+const fruitItems = [
+  { title: 'Apple', value: 'apple' },
+  { title: 'Banana', value: 'banana' },
+  { title: 'Cherry', value: 'cherry' },
+  { title: 'Orange', value: 'orange' },
+  { title: 'Strawberry', value: 'strawberry' },
+];
+
+const countryItems = [
+  { title: 'Deutschland', value: 'de' },
+  { title: 'Österreich', value: 'at' },
+  { title: 'Schweiz', value: 'ch' },
+  { title: 'Frankreich', value: 'fr' },
+  { title: 'Italien', value: 'it' },
+];
+
+const treatmentItems = [
+  { title: 'Zahnreinigung', value: 'cleaning' },
+  { title: 'Kontrolluntersuchung', value: 'checkup' },
+  { title: 'Implantologie', value: 'implant' },
+  { title: 'Kieferorthopädie', value: 'ortho' },
+  { title: 'Wurzelbehandlung', value: 'root' },
+];
+
+const tagItems = [
+  { title: 'Urgent', value: 'urgent' },
+  { title: 'Follow-up', value: 'followup' },
+  { title: 'New Patient', value: 'new' },
+  { title: 'VIP', value: 'vip' },
+  { title: 'Insurance Pending', value: 'insurance' },
+];
+
+// Patient search items (Figma design)
+const patientSearchItems = [
+  { name: 'Weber, Wolfgang', patientId: '06432', dob: '12.09.2001', id: '1' },
+  { name: 'Krause, Wolfram', patientId: '26152', dob: '12.04.1954', id: '2' },
+  { name: 'Wolff, Wolfhard', patientId: '82692', dob: '15.05.1953', id: '3' },
+  { name: 'Adler, Wolfbert', patientId: '83827', dob: '12.09.2000', id: '4' },
+  { name: 'Schulz, Wolfgang', patientId: '72376', dob: '05.12.1987', id: '5' },
+];
+
+// Custom item slot examples
+const fruitItemsWithIcons = [
+  { title: 'Apple', value: 'apple', icon: '🍎' },
+  { title: 'Banana', value: 'banana', icon: '🍌' },
+  { title: 'Cherry', value: 'cherry', icon: '🍒' },
+  { title: 'Orange', value: 'orange', icon: '🍊' },
+  { title: 'Strawberry', value: 'strawberry', icon: '🍓' },
+];
+
+const treatmentItemsWithDesc = [
+  { title: 'Zahnreinigung', value: 'cleaning', description: 'Professionelle Reinigung und Politur' },
+  { title: 'Kontrolluntersuchung', value: 'checkup', description: 'Regelmäßige Kontrolle der Zahngesundheit' },
+  { title: 'Implantologie', value: 'implant', description: 'Ersatz fehlender Zähne durch Implantate' },
+  { title: 'Wurzelbehandlung', value: 'root', description: 'Behandlung des Zahnmarks' },
+];
+
+const patientItems = [
+  { title: 'Max Mustermann', value: 'max', status: 'active', statusLabel: 'Aktiv' },
+  { title: 'Anna Schmidt', value: 'anna', status: 'waiting', statusLabel: 'Wartend' },
+  { title: 'Peter Weber', value: 'peter', status: 'inactive', statusLabel: 'Inaktiv' },
+  { title: 'Lisa Müller', value: 'lisa', status: 'active', statusLabel: 'Aktiv' },
+];
+
+const userItems = [
+  { title: 'Dr. Maria Schmidt', value: 'maria', initials: 'MS', email: 'maria@praxis.de' },
+  { title: 'Dr. Thomas Bauer', value: 'thomas', initials: 'TB', email: 'thomas@praxis.de' },
+  { title: 'Julia Fischer', value: 'julia', initials: 'JF', email: 'julia@praxis.de' },
+];
+
+// Custom selection slot examples
+const countryItemsWithFlags = [
+  { title: 'Deutschland', value: 'de', flag: '🇩🇪' },
+  { title: 'Österreich', value: 'at', flag: '🇦🇹' },
+  { title: 'Schweiz', value: 'ch', flag: '🇨🇭' },
+  { title: 'Frankreich', value: 'fr', flag: '🇫🇷' },
+  { title: 'Italien', value: 'it', flag: '🇮🇹' },
+];
+
+const colorTagItems = [
+  { title: 'High Priority', value: 'high', color: '#ef4444', textColor: '#ffffff' },
+  { title: 'Medium Priority', value: 'medium', color: '#f59e0b', textColor: '#ffffff' },
+  { title: 'Low Priority', value: 'low', color: '#22c55e', textColor: '#ffffff' },
+  { title: 'On Hold', value: 'hold', color: '#6b7280', textColor: '#ffffff' },
+  { title: 'In Progress', value: 'progress', color: '#3b82f6', textColor: '#ffffff' },
+];
+
+// Basic examples
+const basicValue = ref(null);
+const placeholderValue = ref(null);
+const clearableValue = ref(null);
+const borderHoverValue = ref(null);
+
+// States
+const normalState = ref(null);
+const disabledValue = ref({ title: 'Apple', value: 'apple' });
+const errorValue = ref(null);
+const preselectedValue = ref({ title: 'Cherry', value: 'cherry' });
+
+// Multiple selection
+const multipleValue = ref([]);
+const chipsValue = ref([]);
+const closableChipsValue = ref([
+  { title: 'Apple', value: 'apple' },
+  { title: 'Cherry', value: 'cherry' },
+]);
+
+// Variants
+const variantOutlined = ref(null);
+const variantUnderlined = ref(null);
+const variantFilled = ref(null);
+const variantSolo = ref(null);
+const variantSoloFilled = ref(null);
+const variantPlain = ref(null);
+
+// Density
+const densityDefault = ref(null);
+const densityComfortable = ref(null);
+const densityDefaultSize = ref(null);
+
+// Practical examples
+const countryValue = ref(null);
+const treatmentValue = ref(null);
+const tagsValue = ref([]);
+
+// Patient search (Figma design)
+const patientSearchValue = ref(null);
+const patientSearchQuery = ref('');
+
+const patientFilter = (_value: string, query: string, item: any) => {
+  if (!query) return true;
+  const q = query.toLowerCase();
+  const raw = item.raw;
+  return (
+    raw.name?.toLowerCase().includes(q) ||
+    raw.patientId?.toLowerCase().includes(q) ||
+    raw.dob?.toLowerCase().includes(q)
+  );
+};
+
+const onPatientSearch = (val: string) => {
+  patientSearchQuery.value = val || '';
+};
+
+const highlightMatch = (text: string, query: string): string => {
+  if (!query) return text;
+  const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const regex = new RegExp(`(${escaped})`, 'gi');
+  return text.replace(regex, '<strong>$1</strong>');
+};
+
+const onAddPatient = () => {
+  alert('Neuen Patienten hinzufügen');
+};
+
+// Custom item slot examples
+const customItemValue = ref(null);
+const customItemDescValue = ref(null);
+const customItemStatusValue = ref(null);
+const customLayoutValue = ref(null);
+
+// Custom selection slot examples
+const selectionIconValue = ref(null);
+const selectionStatusValue = ref(null);
+const selectionAvatarValue = ref(null);
+const selectionFlagValue = ref(null);
+const selectionMultipleValue = ref([]);
+const selectionColorTagsValue = ref([]);
+
+const removeSelection = (index: number) => {
+  selectionMultipleValue.value.splice(index, 1);
+};
+</script>
+
+<style scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100vw;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding: 2rem 0;
+  overflow-y: auto;
+}
+
+.element-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  width: 95%;
+  max-width: 1400px;
+  gap: 2rem;
+}
+
+.controls {
+  width: 100%;
+  background: white;
+  padding: 1.5rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.controls h2 {
+  margin: 0 0 1rem 0;
+  color: #333;
+  font-size: 1.5rem;
+}
+
+.button-group {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.control-btn {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  background-color: #4caf50;
+  color: white;
+  transition: background-color 0.3s ease;
+  font-weight: 500;
+}
+
+.control-btn:hover {
+  background-color: #45a049;
+}
+
+.control-btn.reset {
+  background-color: #f44336;
+}
+
+.control-btn.reset:hover {
+  background-color: #da190b;
+}
+
+.section {
+  width: 100%;
+  background: white;
+  padding: 1.5rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.section-title {
+  margin: 0 0 1.5rem 0;
+  color: #333;
+  font-size: 1.25rem;
+  font-weight: 600;
+  border-bottom: 2px solid #e0e0e0;
+  padding-bottom: 0.5rem;
+}
+
+.examples-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+}
+
+.example-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.example-item.wide {
+  grid-column: span 2;
+}
+
+.example-item h4 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #555;
+}
+
+.value-display {
+  margin: 0.5rem 0 0 0;
+  font-size: 0.8125rem;
+  color: #666;
+  font-style: italic;
+}
+
+@media (max-width: 768px) {
+  .examples-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .example-item.wide {
+    grid-column: span 1;
+  }
+}
+
+/* Custom item slot styles */
+.item-icon {
+  font-size: 1.25rem;
+  margin-right: 0.5rem;
+}
+
+.status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-right: 0.5rem;
+}
+
+.status-dot.active {
+  background-color: #4caf50;
+}
+
+.status-dot.waiting {
+  background-color: #ff9800;
+}
+
+.status-dot.inactive {
+  background-color: #9e9e9e;
+}
+
+.status-badge {
+  font-size: 0.75rem;
+  padding: 0.125rem 0.5rem;
+  border-radius: 999px;
+  font-weight: 500;
+}
+
+.status-badge.active {
+  background-color: #e8f5e9;
+  color: #2e7d32;
+}
+
+.status-badge.waiting {
+  background-color: #fff3e0;
+  color: #ef6c00;
+}
+
+.status-badge.inactive {
+  background-color: #f5f5f5;
+  color: #757575;
+}
+
+.user-item-content {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.25rem 0;
+}
+
+.user-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background-color: #172774;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.user-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.user-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.user-email {
+  font-size: 0.75rem;
+  color: #666;
+}
+
+/* Section description */
+.section-description {
+  margin: -1rem 0 1.5rem 0;
+  font-size: 0.875rem;
+  color: #666;
+}
+
+/* Custom selection slot styles */
+.selection-with-icon,
+.selection-with-status,
+.selection-with-avatar,
+.selection-with-flag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.selection-icon {
+  font-size: 1.125rem;
+}
+
+.selection-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #172774;
+  color: white;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.625rem;
+  font-weight: 600;
+}
+
+.country-flag {
+  font-size: 1.25rem;
+  margin-right: 0.25rem;
+}
+
+.custom-chip {
+  margin: 2px;
+}
+
+.chip-icon {
+  margin-right: 0.25rem;
+}
+
+.more-indicator {
+  font-size: 0.75rem;
+  color: #666;
+  margin-left: 0.25rem;
+}
+
+.color-tag {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin: 2px;
+}
+
+.color-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 0.5rem;
+}
+
+/* Patient Search (Figma Design) styles */
+.patient-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+  padding: 0.375rem 0;
+}
+
+.patient-left {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.patient-name {
+  font-size: 0.9375rem;
+  font-weight: 400;
+  color: var(--Dental-Blue-0, #172774);
+}
+
+.patient-id {
+  font-size: 0.75rem;
+  color: var(--Soft-Concrete-2, #9e9e9e);
+}
+
+.patient-dob {
+  font-size: 0.875rem;
+  color: var(--Dental-Blue-0, #172774);
+  white-space: nowrap;
+  margin-left: 1rem;
+}
+
+.patient-no-data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1.5rem 1rem;
+  text-align: center;
+}
+
+.patient-no-data-title {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--Dental-Blue-0, #172774);
+  margin: 0 0 0.5rem 0;
+}
+
+.patient-no-data-desc {
+  font-size: 0.8125rem;
+  color: var(--Soft-Concrete-2, #9e9e9e);
+  margin: 0 0 1rem 0;
+  max-width: 260px;
+  line-height: 1.4;
+}
+
+.patient-add-btn {
+  background: none;
+  border: 1.5px solid var(--Dental-Blue-0, #172774);
+  color: var(--Dental-Blue-0, #172774);
+  border-radius: 999px;
+  padding: 0.5rem 1.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.patient-add-btn:hover {
+  background-color: rgba(23, 39, 116, 0.05);
+}
+
+.patient-selected-display {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 0.75rem;
+  padding: 0 0.25rem;
+}
+
+.patient-selected-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.patient-selected-name {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: var(--Dental-Blue-0, #172774);
+}
+
+.patient-selected-meta {
+  font-size: 0.75rem;
+  color: var(--Soft-Concrete-2, #9e9e9e);
+}
+
+.patient-edit-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--Dental-Blue-0, #172774);
+  padding: 0.25rem;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.patient-edit-btn:hover {
+  background-color: rgba(23, 39, 116, 0.05);
+}
+</style>