@zap-wunschlachen/wl-shared-components 1.0.66 → 1.0.68

package/App.vue

@@ -19,12 +19,21 @@
         >
           Accordion
         </button>
+        <button
+          class="nav-btn"
+          :class="{ active: currentPage === 'select' }"
+          type="button"
+          @click="currentPage = 'select'"
+        >
+          Select
+        </button>
       </nav>
     </header>
 
     <main class="app-main">
       <AllPage v-if="currentPage === 'all'" />
-      <AccordionGroupPage v-else />
+      <AccordionGroupPage v-else-if="currentPage === 'accordion'" />
+      <SelectPage v-else-if="currentPage === 'select'" />
     </main>
   </div>
 </template>
@@ -33,8 +42,9 @@
 import { ref } from 'vue';
 import AllPage from '@/pages/AllPage.vue';
 import AccordionGroupPage from '@/pages/AccordionGroupPage.vue';
+import SelectPage from '@/pages/SelectPage.vue';
 
-const currentPage = ref<'all' | 'accordion'>('all');
+const currentPage = ref<'all' | 'accordion' | 'select'>('all');
 </script>
 
 <style scoped>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zap-wunschlachen/wl-shared-components",
-  "version": "1.0.66",
+  "version": "1.0.68",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/scripts/check-translations.ts

@@ -234,42 +234,42 @@ Examples:
       .filter((key) => !translationKeys.has(key))
       .sort();
 
-    if (missingInTranslations.length > 0) {
-      hasMissingKeys = true;
-      console.warn(
-        `\n[i18n] ⚠️  ${language}: ${missingInTranslations.length} key(s) used in code but missing in ${source}:`,
-      );
-      missingInTranslations.forEach((key) => console.warn(`  - ${key}`));
-      if (diffDir) {
-        missingInTranslations.forEach((key) => {
-          const localeIndex =
-            diffIndexByLocale.get(language) ?? new Set<string>();
-          if (!diffIndexByLocale.has(language)) {
-            diffIndexByLocale.set(language, localeIndex);
-          }
-          if (localeIndex.has(key)) {
-            return;
-          }
-          localeIndex.add(key);
-
-          const localeEntries =
-            diffEntriesByLocale.get(language) ??
-            ([] as Array<{ language: string; key: string; value: string }>);
-          if (!diffEntriesByLocale.has(language)) {
-            diffEntriesByLocale.set(language, localeEntries);
-          }
-          localeEntries.push({
-            language,
-            key,
-            value: "",
-          });
-        });
-      }
-    } else {
-      console.log(
-        `[i18n] ✅ ${language}: All keys used in code exist in ${source}`,
-      );
-    }
+    if (missingInTranslations.length > 0) {
+      hasMissingKeys = true;
+      console.warn(
+        `\n[i18n] ⚠️  ${language}: ${missingInTranslations.length} key(s) used in code but missing in ${source}:`,
+      );
+      missingInTranslations.forEach((key) => console.warn(`  - ${key}`));
+      if (diffDir) {
+        missingInTranslations.forEach((key) => {
+          const localeIndex =
+            diffIndexByLocale.get(language) ?? new Set<string>();
+          if (!diffIndexByLocale.has(language)) {
+            diffIndexByLocale.set(language, localeIndex);
+          }
+          if (localeIndex.has(key)) {
+            return;
+          }
+          localeIndex.add(key);
+
+          const localeEntries =
+            diffEntriesByLocale.get(language) ??
+            ([] as Array<{ language: string; key: string; value: string }>);
+          if (!diffEntriesByLocale.has(language)) {
+            diffEntriesByLocale.set(language, localeEntries);
+          }
+          localeEntries.push({
+            language,
+            key,
+            value: "",
+          });
+        });
+      }
+    } else {
+      console.log(
+        `[i18n] ✅ ${language}: All keys used in code exist in ${source}`,
+      );
+    }
   }
 
   // Check cross-locale consistency (pairwise, both directions)

package/src/components/Select/Select.vue

@@ -58,6 +58,14 @@
     <template v-if="$slots['append-inner']" #append-inner>
       <slot name="append-inner"></slot>
     </template>
+
+    <template v-if="$slots['item']" #item="slotProps">
+      <slot name="item" v-bind="slotProps"></slot>
+    </template>
+
+    <template v-if="$slots['selection']" #selection="slotProps">
+      <slot name="selection" v-bind="slotProps"></slot>
+    </template>
   </v-combobox>
 </template>
 

package/src/pages/SelectPage.vue

@@ -0,0 +1,1006 @@
+<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"
+            >
+              <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>
+    </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 { 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' },
+];
+
+// 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([]);
+
+// 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;
+}
+</style>

package/src/utils/index.ts

@@ -210,6 +210,80 @@ const getColorsForDomain = (domainValue: string) => {
       appointment_card_delimiter: "var(--Night-Nude--2)",
       /* End Appointment card colors */
 
+      /* Progress bar colors */
+      progress_bar_bg: "var(--Night-Nude--3)",
+      progress_bar_fill: "var(--Dark-Nude-0)",
+      /* End Progress bar colors */
+
+      /* Navigation colors */
+      nav_bg: "var(--Warm-Air--4)",
+      nav_item_active_bg: "var(--Dark-Nude--2)",
+      nav_item_text: "var(--Dark-Nude-2)",
+      nav_item_icon: "var(--Dark-Nude-2)",
+      /* End Navigation colors */
+
+      /* Toggle colors */
+      toggle_inactive_bg: "var(--Night-Nude--2)",
+      toggle_active_bg: "var(--Dark-Nude-2)",
+      toggle_text: "var(--Dark-Nude-2)",
+      /* End Toggle colors */
+
+      /* Loader colors */
+      loader_fill: "var(--Dark-Nude-2)",
+      loader_text: "var(--Dark-Nude-2)",
+      /* End Loader colors */
+
+      /* Focus colors */
+      focus_ring_color: "var(--Dark-Nude-2)",
+      /* End Focus colors */
+
+      /* Card/List item colors */
+      card_bg: "var(--White-0)",
+      card_hover_bg: "var(--Dark-Nude--3)",
+      card_border: "var(--Night-Nude--2)",
+      card_divider: "var(--Night-Nude--2)",
+      /* End Card/List item colors */
+
+      /* Status badge colors */
+      badge_available_border: "var(--Success-Green-0)",
+      badge_available_text: "var(--Success-Green-0)",
+      badge_available_subtext: "var(--Success-Green-1)",
+      badge_unavailable_border: "var(--Error-Red-1)",
+      badge_unavailable_text: "var(--Error-Red-0)",
+      badge_unavailable_subtext: "var(--Error-Red-1)",
+      /* End Status badge colors */
+
+      /* Page state colors */
+      state_success_title: "var(--Success-Green-0)",
+      state_error_title: "var(--Error-Red-0)",
+      state_info_icon: "var(--Dark-Nude-2)",
+      state_info_text: "var(--Dark-Nude-2)",
+      /* End Page state colors */
+
+      /* Destructive action colors */
+      action_destructive_icon: "var(--Power-Red-0)",
+      action_destructive_text: "var(--Power-Red-0)",
+      /* End Destructive action colors */
+
+      /* Background colors */
+      page_bg: "var(--Warm-Air--4)",
+      section_bg: "var(--White-0)",
+      /* End Background colors */
+
+      /* Primary text and icon colors */
+      icon_primary: "var(--Dark-Nude-2)",
+      text_primary: "var(--Dark-Nude-2)",
+      text_secondary: "var(--Dark-Nude-3)",
+      divider_primary: "var(--Night-Nude--2)",
+      border_primary: "var(--Dark-Nude-0)",
+      /* End Primary text and icon colors */
+
+      /* Slot grid colors */
+      slot_header_bg: "var(--Night-Nude--3)",
+      slot_button_bg: "var(--Warm-Air--4)",
+      slot_button_hover_bg: "var(--Night-Nude--2)",
+      /* End Slot grid colors */
+
       /* To be checked the validity of these colors */
       font_color: "!text-[var(--Dark-Nude-3)]",
       font_color_title: "!text-[var(--Dark-Nude-2)]",
@@ -348,6 +422,80 @@ const getColorsForDomain = (domainValue: string) => {
       appointment_card_delimiter: "var(--Soft-Concrete-1)",
       /* End Appointment card colors */
 
+      /* Progress bar colors */
+      progress_bar_bg: "var(--Soft-Concrete-0)",
+      progress_bar_fill: "var(--Dental-Light-Blue-0)",
+      /* End Progress bar colors */
+
+      /* Navigation colors */
+      nav_bg: "var(--Dental-Light-Blue--3)",
+      nav_item_active_bg: "var(--Dental-Light-Blue-1)",
+      nav_item_text: "var(--Dental-Blue-0)",
+      nav_item_icon: "var(--Dental-Blue-0)",
+      /* End Navigation colors */
+
+      /* Toggle colors */
+      toggle_inactive_bg: "var(--Dental-Blue--5)",
+      toggle_active_bg: "var(--Dental-Blue-0)",
+      toggle_text: "var(--Dental-Blue-0)",
+      /* End Toggle colors */
+
+      /* Loader colors */
+      loader_fill: "var(--Dental-Blue-0)",
+      loader_text: "var(--Dental-Blue-0)",
+      /* End Loader colors */
+
+      /* Focus colors */
+      focus_ring_color: "var(--Dental-Blue-0)",
+      /* End Focus colors */
+
+      /* Card/List item colors */
+      card_bg: "var(--White-0)",
+      card_hover_bg: "var(--Dental-Blue--6)",
+      card_border: "var(--Soft-Concrete-1)",
+      card_divider: "var(--Dental-Blue--4)",
+      /* End Card/List item colors */
+
+      /* Status badge colors */
+      badge_available_border: "var(--Success-Green-0)",
+      badge_available_text: "var(--Success-Green-0)",
+      badge_available_subtext: "var(--Success-Green-1)",
+      badge_unavailable_border: "var(--Error-Red-1)",
+      badge_unavailable_text: "var(--Error-Red-0)",
+      badge_unavailable_subtext: "var(--Error-Red-1)",
+      /* End Status badge colors */
+
+      /* Page state colors */
+      state_success_title: "var(--Success-Green-0)",
+      state_error_title: "var(--Error-Red-0)",
+      state_info_icon: "var(--Dental-Blue-0)",
+      state_info_text: "var(--Dental-Blue-0)",
+      /* End Page state colors */
+
+      /* Destructive action colors */
+      action_destructive_icon: "var(--Power-Red-0)",
+      action_destructive_text: "var(--Power-Red-0)",
+      /* End Destructive action colors */
+
+      /* Background colors */
+      page_bg: "var(--Dental-Light-Blue--3)",
+      section_bg: "var(--White-0)",
+      /* End Background colors */
+
+      /* Primary text and icon colors */
+      icon_primary: "var(--Dental-Blue-0)",
+      text_primary: "var(--Dental-Blue-0)",
+      text_secondary: "var(--Dental-Blue--2)",
+      divider_primary: "var(--Dental-Blue--4)",
+      border_primary: "var(--Dental-Blue-0)",
+      /* End Primary text and icon colors */
+
+      /* Slot grid colors */
+      slot_header_bg: "var(--Dental-Light-Blue--2)",
+      slot_button_bg: "var(--Dental-Light-Blue--1)",
+      slot_button_hover_bg: "var(--Dental-Light-Blue-0)",
+      /* End Slot grid colors */
+
       /* To be checked the validity of these colors */
       "border-color": "var(--Dental-Blue-0)",
       font_color: "!text-[var(--Dental-Blue-1)]",
@@ -442,6 +590,68 @@ if (typeof document !== 'undefined') {
   root.style.setProperty('--appointment_card_title', siteColors['appointment_card_title']);
   root.style.setProperty('--appointment_card_text', siteColors['appointment_card_text']);
   root.style.setProperty('--appointment_card_delimiter', siteColors['appointment_card_delimiter']);
+
+  // Progress bar colors
+  root.style.setProperty('--progress-bar-bg', siteColors['progress_bar_bg']);
+  root.style.setProperty('--progress-bar-fill', siteColors['progress_bar_fill']);
+
+  // Navigation colors
+  root.style.setProperty('--nav-bg', siteColors['nav_bg']);
+  root.style.setProperty('--nav-item-active-bg', siteColors['nav_item_active_bg']);
+  root.style.setProperty('--nav-item-text', siteColors['nav_item_text']);
+  root.style.setProperty('--nav-item-icon', siteColors['nav_item_icon']);
+
+  // Toggle colors
+  root.style.setProperty('--toggle-inactive-bg', siteColors['toggle_inactive_bg']);
+  root.style.setProperty('--toggle-active-bg', siteColors['toggle_active_bg']);
+  root.style.setProperty('--toggle-text', siteColors['toggle_text']);
+
+  // Loader colors
+  root.style.setProperty('--loader-fill', siteColors['loader_fill']);
+  root.style.setProperty('--loader-text', siteColors['loader_text']);
+
+  // Focus colors
+  root.style.setProperty('--focus-ring-color', siteColors['focus_ring_color']);
+
+  // Card/List item colors
+  root.style.setProperty('--card-bg', siteColors['card_bg']);
+  root.style.setProperty('--card-hover-bg', siteColors['card_hover_bg']);
+  root.style.setProperty('--card-border', siteColors['card_border']);
+  root.style.setProperty('--card-divider', siteColors['card_divider']);
+
+  // Status badge colors
+  root.style.setProperty('--badge-available-border', siteColors['badge_available_border']);
+  root.style.setProperty('--badge-available-text', siteColors['badge_available_text']);
+  root.style.setProperty('--badge-available-subtext', siteColors['badge_available_subtext']);
+  root.style.setProperty('--badge-unavailable-border', siteColors['badge_unavailable_border']);
+  root.style.setProperty('--badge-unavailable-text', siteColors['badge_unavailable_text']);
+  root.style.setProperty('--badge-unavailable-subtext', siteColors['badge_unavailable_subtext']);
+
+  // Page state colors
+  root.style.setProperty('--state-success-title', siteColors['state_success_title']);
+  root.style.setProperty('--state-error-title', siteColors['state_error_title']);
+  root.style.setProperty('--state-info-icon', siteColors['state_info_icon']);
+  root.style.setProperty('--state-info-text', siteColors['state_info_text']);
+
+  // Destructive action colors
+  root.style.setProperty('--action-destructive-icon', siteColors['action_destructive_icon']);
+  root.style.setProperty('--action-destructive-text', siteColors['action_destructive_text']);
+
+  // Background colors
+  root.style.setProperty('--page-bg', siteColors['page_bg']);
+  root.style.setProperty('--section-bg', siteColors['section_bg']);
+
+  // Primary text and icon colors
+  root.style.setProperty('--icon-primary', siteColors['icon_primary']);
+  root.style.setProperty('--text-primary', siteColors['text_primary']);
+  root.style.setProperty('--text-secondary', siteColors['text_secondary']);
+  root.style.setProperty('--divider-primary', siteColors['divider_primary']);
+  root.style.setProperty('--border-primary', siteColors['border_primary']);
+
+  // Slot grid colors
+  root.style.setProperty('--slot-header-bg', siteColors['slot_header_bg']);
+  root.style.setProperty('--slot-button-bg', siteColors['slot_button_bg']);
+  root.style.setProperty('--slot-button-hover-bg', siteColors['slot_button_hover_bg']);
 }
 
 // Function to set domain for testing purposes