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

package/src/pages/TilePage.vue

@@ -1,902 +1,902 @@
-<template>
-  <div class="page">
-    <div class="element-container">
-      <div class="controls">
-        <h2>Testing Domain: {{ currentDomain }}</h2>
-        <div class="button-group">
-          <Button label="Switch to Wunschlachen (Dental)" @click="switchToDental" variant="flat" color="#4caf50" text-color="#ffffff" />
-          <Button label="Switch to White Cocoon" @click="switchToCocoon" variant="flat" color="#4caf50" text-color="#ffffff" />
-          <Button label="Reset to Auto-Detect" @click="resetDomain" variant="flat" color="#f44336" text-color="#ffffff" />
-        </div>
-      </div>
-
-      <!-- Banner Standalone -->
-      <div class="section">
-        <h3 class="section-title">Banner Component</h3>
-        <p class="section-description">Standalone ribbon-style label with color variants</p>
-        <div class="banner-row">
-          <div class="example-item">
-            <h4>Blue (Default)</h4>
-            <Banner text="Empholen" color="blue" />
-          </div>
-          <div class="example-item">
-            <h4>Orange</h4>
-            <Banner text="Warnung" color="orange" />
-          </div>
-          <div class="example-item">
-            <h4>Pink</h4>
-            <Banner text="Dringend" color="pink" />
-          </div>
-          <div class="example-item">
-            <h4>Green</h4>
-            <Banner text="Bestätigt" color="green" />
-          </div>
-          <div class="example-item">
-            <h4>Custom Colors</h4>
-            <Banner text="Custom" bg-color="#E4E2FD" fold-color="#C5BDF2" />
-          </div>
-          <div class="example-item">
-            <h4>Long Text</h4>
-            <Banner text="Dringend empfohlen für Kinder" color="blue" />
-          </div>
-          <div class="example-item">
-            <h4>Custom Content</h4>
-            <Banner color="orange">
-              <template #content>
-                <div class="banner-custom-content">
-                  <v-icon size="14" icon="heroicons:sparkles" />
-                  <span>Neu &amp; Beliebt</span>
-                </div>
-              </template>
-            </Banner>
-          </div>
-        </div>
-      </div>
-
-      <!-- Basic Tile -->
-      <div class="section">
-        <h3 class="section-title">Basic Tile</h3>
-        <div class="examples-grid">
-          <div class="example-item">
-            <h4>With Title, Description &amp; Label</h4>
-            <Tile
-              title="Kontrolle & Kinderprophylaxe"
-              description="Umfassende Vorsorgeuntersuchung und sanfte Zahnreinigung für gesunde Kinderzähne von Anfang an"
-              label="Empholen"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Title &amp; Description Only</h4>
-            <Tile
-              title="Zahnreinigung"
-              description="Professionelle Reinigung und Politur aller Zähne"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Title Only</h4>
-            <Tile title="Kontrolluntersuchung" />
-          </div>
-
-          <div class="example-item">
-            <h4>Title Without Icon</h4>
-            <Tile title="Kontrolluntersuchung" :show-icon="false" />
-          </div>
-
-          <div class="example-item">
-            <h4>Title Only, Centered</h4>
-            <Tile :show-icon="false" class="tile-centered">
-              <template #title>
-                <h3 class="tile-centered-title">Kontrolluntersuchung</h3>
-              </template>
-            </Tile>
-          </div>
-
-          <div class="example-item">
-            <h4>Long Title &amp; Description</h4>
-            <Tile
-              title="Kontrolle & Kinderprophylaxe mit umfassender Vorsorgeuntersuchung und professioneller Zahnreinigung"
-              description="Umfassende Vorsorgeuntersuchung und sanfte Zahnreinigung für gesunde Kinderzähne von Anfang an. Inklusive Fluoridierung, Versiegelung der Backenzähne und individuelle Beratung zur optimalen Mundhygiene für Kinder und Jugendliche."
-              label="Empholen"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Long Title Only</h4>
-            <Tile title="Kontrolle & Kinderprophylaxe mit umfassender Vorsorgeuntersuchung und professioneller Zahnreinigung" />
-          </div>
-        </div>
-      </div>
-
-      <!-- Banner via showBanner prop -->
-      <div class="section">
-        <h3 class="section-title">Banner Label (showBanner prop)</h3>
-        <p class="section-description">Set showBanner to render the label as a ribbon Banner</p>
-        <div class="examples-grid">
-          <div class="example-item">
-            <h4>Blue Banner</h4>
-            <Tile
-              title="Kontrolle & Kinderprophylaxe"
-              description="Umfassende Vorsorgeuntersuchung"
-              label="Empholen"
-              :use-w-l-banner="true"
-              banner-color="blue"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Orange Banner</h4>
-            <Tile
-              title="Kontrolluntersuchung"
-              description="Termin muss noch bestätigt werden"
-              label="Ausstehend"
-              :use-w-l-banner="true"
-              banner-color="orange"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Pink Banner</h4>
-            <Tile
-              title="Wurzelbehandlung"
-              description="Dringend erforderliche Behandlung"
-              label="Dringend"
-              :use-w-l-banner="true"
-              banner-color="pink"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Green Banner</h4>
-            <Tile
-              title="Zahnreinigung"
-              description="Termin wurde erfolgreich bestätigt"
-              label="Bestätigt"
-              :use-w-l-banner="true"
-              banner-color="green"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Long Title with Banner</h4>
-            <Tile
-              title="Kontrolle & Kinderprophylaxe mit umfassender Vorsorgeuntersuchung und professioneller Zahnreinigung"
-              description="Umfassende Vorsorgeuntersuchung und sanfte Zahnreinigung für gesunde Kinderzähne von Anfang an. Inklusive Fluoridierung, Versiegelung der Backenzähne und individuelle Beratung zur optimalen Mundhygiene für Kinder und Jugendliche."
-              label="Empholen"
-              :use-w-l-banner="true"
-              banner-color="blue"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Long Title &amp; Long Banner Text</h4>
-            <Tile
-              title="Kontrolle & Kinderprophylaxe mit umfassender Vorsorgeuntersuchung und professioneller Zahnreinigung"
-              description="Umfassende Vorsorgeuntersuchung und sanfte Zahnreinigung für gesunde Kinderzähne von Anfang an."
-              label="Dringend empfohlen für Kinder"
-              :use-w-l-banner="true"
-              banner-color="orange"
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- Different Icons -->
-      <div class="section">
-        <h3 class="section-title">Custom Icons</h3>
-        <div class="examples-grid">
-          <div class="example-item">
-            <h4>Default (Check Circle)</h4>
-            <Tile
-              title="Kontrolle & Kinderprophylaxe"
-              description="Umfassende Vorsorgeuntersuchung"
-              label="Empholen"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Star Icon</h4>
-            <Tile
-              title="Premium Behandlung"
-              description="Exklusive Behandlung mit modernster Technologie"
-              label="Premium"
-              icon="heroicons:star"
-              icon-color="#FF9800"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Medical Icon</h4>
-            <Tile
-              title="Wurzelbehandlung"
-              description="Behandlung des Zahnmarks zur Zahnerhaltung"
-              icon="heroicons:heart"
-              icon-color="#4CAF50"
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- Visibility Props -->
-      <div class="section">
-        <h3 class="section-title">Visibility Props</h3>
-        <p class="section-description">Control visibility of icon, title, and label independently via showIcon, showTitle, showLabel</p>
-        <div class="examples-grid">
-          <div class="example-item">
-            <h4>All Visible (Default)</h4>
-            <Tile
-              title="Zahnreinigung"
-              description="Professionelle Reinigung und Politur"
-              label="Verfügbar"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Hide Icon (showIcon=false)</h4>
-            <Tile
-              title="Zahnreinigung"
-              description="Professionelle Reinigung und Politur"
-              label="Verfügbar"
-              :show-icon="false"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Hide Title (showTitle=false)</h4>
-            <Tile
-              title="Zahnreinigung"
-              description="Professionelle Reinigung und Politur"
-              label="Verfügbar"
-              :show-title="false"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Hide Label (showLabel=false)</h4>
-            <Tile
-              title="Zahnreinigung"
-              description="Professionelle Reinigung und Politur"
-              label="Verfügbar"
-              :show-label="false"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Description Only</h4>
-            <Tile
-              title="Zahnreinigung"
-              description="Professionelle Reinigung und Politur aller Zähne für ein strahlendes Lächeln"
-              :show-icon="false"
-              :show-title="false"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Icon &amp; Description Only</h4>
-            <Tile
-              title="Zahnreinigung"
-              description="Professionelle Reinigung und Politur aller Zähne"
-              icon="heroicons:heart"
-              :show-title="false"
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- States -->
-      <div class="section">
-        <h3 class="section-title">States</h3>
-        <div class="examples-grid">
-          <div class="example-item">
-            <h4>Normal</h4>
-            <Tile
-              title="Zahnreinigung"
-              description="Professionelle Reinigung und Politur"
-              label="Verfügbar"
-            />
-          </div>
-
-          <div class="example-item">
-            <h4>Disabled</h4>
-            <Tile
-              title="Implantologie"
-              description="Derzeit nicht verfügbar"
-              label="Nicht verfügbar"
-              :disabled="true"
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- Custom Slot: Prepend -->
-      <div class="section">
-        <h3 class="section-title">Custom Prepend Slot</h3>
-        <p class="section-description">Replace the default icon with custom content</p>
-        <div class="examples-grid">
-          <div class="example-item">
-            <h4>Avatar Prepend</h4>
-            <Tile
-              title="Dr. Maria Schmidt"
-              description="Zahnärztin — Spezialisiert auf Kinderzahnheilkunde"
-              label="Online"
-            >
-              <template #prepend>
-                <div class="custom-avatar">MS</div>
-              </template>
-            </Tile>
-          </div>
-
-          <div class="example-item">
-            <h4>Image Prepend</h4>
-            <Tile
-              title="Implantologie"
-              description="Ersatz fehlender Zähne durch hochwertige Implantate"
-            >
-              <template #prepend>
-                <div class="custom-image-icon">
-                  <v-icon size="28" color="#172774" icon="heroicons:heart" />
-                </div>
-              </template>
-            </Tile>
-          </div>
-        </div>
-      </div>
-
-      <!-- Custom Slot: Title & Description -->
-      <div class="section">
-        <h3 class="section-title">Custom Title &amp; Description Slots</h3>
-        <p class="section-description">Replace title or description individually with custom content</p>
-        <div class="examples-grid">
-          <div class="example-item">
-            <h4>Custom Description</h4>
-            <Tile title="Kieferorthopädie" label="Neu">
-              <template #description>
-                <div class="custom-content">
-                  <div class="custom-content__tags">
-                    <span class="tag tag--blue">Beratung</span>
-                    <span class="tag tag--green">30 Min.</span>
-                  </div>
-                  <div class="custom-content__desc">Korrektur von Zahnfehlstellungen bei Kindern und Erwachsenen</div>
-                </div>
-              </template>
-            </Tile>
-          </div>
-
-          <div class="example-item">
-            <h4>Custom Title &amp; Description</h4>
-            <Tile icon="heroicons:chart-bar" icon-color="#2196F3" :show-label="false">
-              <template #title>
-                <div class="custom-content__title">Behandlungen diese Woche</div>
-              </template>
-              <template #description>
-                <div class="custom-content">
-                  <div class="custom-content__stat">42</div>
-                  <div class="custom-content__desc">+12% gegenüber letzter Woche</div>
-                </div>
-              </template>
-            </Tile>
-          </div>
-        </div>
-      </div>
-
-      <!-- Custom Slot: Label -->
-      <div class="section">
-        <h3 class="section-title">Custom Label Slot</h3>
-        <p class="section-description">Replace the default pill label with custom markup</p>
-        <div class="examples-grid">
-          <div class="example-item">
-            <h4>Status Badge</h4>
-            <Tile
-              title="Kontrolle & Kinderprophylaxe"
-              description="Umfassende Vorsorgeuntersuchung"
-            >
-              <template #label>
-                <span class="status-badge status-badge--active">Aktiv</span>
-              </template>
-            </Tile>
-          </div>
-
-          <div class="example-item">
-            <h4>Price Label</h4>
-            <Tile
-              title="Zahnreinigung"
-              description="Professionelle Reinigung und Politur aller Zähne"
-            >
-              <template #label>
-                <div class="price-label">
-                  <span class="price-label__amount">85 &euro;</span>
-                  <span class="price-label__note">pro Sitzung</span>
-                </div>
-              </template>
-            </Tile>
-          </div>
-
-          <div class="example-item">
-            <h4>Action Button</h4>
-            <Tile
-              title="Wurzelbehandlung"
-              description="Behandlung des Zahnmarks zur Zahnerhaltung"
-            >
-              <template #label>
-                <Button label="Buchen" size="small" variant="flat" />
-              </template>
-            </Tile>
-          </div>
-        </div>
-      </div>
-
-      <!-- Multiple Tiles List -->
-      <div class="section">
-        <h3 class="section-title">Tile List</h3>
-        <p class="section-description">Multiple tiles stacked as a treatment selection</p>
-        <div class="tile-list">
-          <Tile
-            v-for="treatment in treatments"
-            :key="treatment.id"
-            :title="treatment.title"
-            :description="treatment.description"
-            :label="treatment.label"
-            :icon="treatment.icon"
-          />
-        </div>
-      </div>
-
-      <!-- Fully Custom Example -->
-      <div class="section">
-        <h3 class="section-title">Fully Customized</h3>
-        <p class="section-description">Individual named slots (#prepend, #title, #description, #label) replaced with custom content</p>
-        <div class="examples-grid">
-          <div class="example-item">
-            <h4>Named Slots</h4>
-            <Tile>
-              <template #prepend>
-                <div class="custom-avatar custom-avatar--large">TB</div>
-              </template>
-              <template #title>
-                <div class="custom-content">
-                  <div class="custom-content__title">Dr. Thomas Bauer</div>
-                  <div class="custom-content__subtitle">Kieferorthopäde</div>
-                </div>
-              </template>
-              <template #description>
-                <div class="custom-content__tags">
-                  <span class="tag tag--blue">Implantologie</span>
-                  <span class="tag tag--green">Kieferorthopädie</span>
-                </div>
-              </template>
-              <template #label>
-                <div class="availability">
-                  <span class="availability__dot"></span>
-                  <span class="availability__text">Verfügbar</span>
-                </div>
-              </template>
-            </Tile>
-          </div>
-
-          <div class="example-item">
-            <h4>Full Override (default slot)</h4>
-            <Tile>
-              <div class="custom-content">
-                <div class="custom-content__title">Kieferorthopädie</div>
-                <div class="custom-content__tags">
-                  <span class="tag tag--blue">Beratung</span>
-                  <span class="tag tag--green">30 Min.</span>
-                </div>
-                <div class="custom-content__desc">Korrektur von Zahnfehlstellungen bei Kindern und Erwachsenen</div>
-              </div>
-            </Tile>
-          </div>
-        </div>
-      </div>
-
-      <!-- Selection Tiles (Figma Design: "Für wen ist der Termin?") -->
-      <div class="section">
-        <h3 class="section-title">Selection Tiles (Figma Design)</h3>
-        <p class="section-description">Centered icon + title tiles used as selection cards — e.g. "Für wen ist der Termin?"</p>
-
-        <div class="selection-tiles-row">
-          <Tile aria-label="Kind (bis 17 J.)">
-            <div class="selection-tile-content">
-              <v-icon size="60" color="#172774" icon="heroicons:face-smile" />
-              <span class="selection-tile-title">Kind (bis 17 J.)</span>
-            </div>
-          </Tile>
-          <Tile aria-label="Erwachsener">
-            <div class="selection-tile-content">
-              <v-icon size="60" color="#172774" icon="heroicons:user" />
-              <span class="selection-tile-title">Erwachsener</span>
-            </div>
-          </Tile>
-        </div>
-
-        <h4 style="margin-top: 1.5rem;">Three Options Variant</h4>
-        <div class="selection-tiles-row">
-          <Tile aria-label="Kind (bis 17 J.)">
-            <div class="selection-tile-content">
-              <v-icon size="60" color="#172774" icon="heroicons:face-smile" />
-              <span class="selection-tile-title">Kind (bis 17 J.)</span>
-            </div>
-          </Tile>
-          <Tile aria-label="Erwachsener">
-            <div class="selection-tile-content">
-              <v-icon size="60" color="#172774" icon="heroicons:user" />
-              <span class="selection-tile-title">Erwachsener</span>
-            </div>
-          </Tile>
-          <Tile aria-label="Senior">
-            <div class="selection-tile-content">
-              <v-icon size="60" color="#172774" icon="heroicons:heart" />
-              <span class="selection-tile-title">Senior (65+)</span>
-            </div>
-          </Tile>
-        </div>
-
-        <h4 style="margin-top: 1.5rem;">With Disabled State</h4>
-        <div class="selection-tiles-row">
-          <Tile aria-label="Kind (bis 17 J.)">
-            <div class="selection-tile-content">
-              <v-icon size="60" color="#172774" icon="heroicons:face-smile" />
-              <span class="selection-tile-title">Kind (bis 17 J.)</span>
-            </div>
-          </Tile>
-          <Tile aria-label="Erwachsener" :disabled="true">
-            <div class="selection-tile-content">
-              <v-icon size="60" color="#172774" icon="heroicons:user" />
-              <span class="selection-tile-title">Erwachsener</span>
-            </div>
-          </Tile>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import {
-  domain,
-  setTestingDomain,
-  clearTestingDomain,
-} from "@/utils/index";
-
-import Banner from "@/components/Banner/Banner.vue";
-import Button from "@/components/Button/Button.vue";
-import Tile from "@/components/Tile/Tile.vue";
-
-const currentDomain = computed(() => domain.value);
-const switchToDental = () => setTestingDomain("domain-dental");
-const switchToCocoon = () => setTestingDomain("domain-cocoon");
-const resetDomain = () => clearTestingDomain();
-
-const treatments = [
-  {
-    id: '1',
-    title: 'Kontrolle & Kinderprophylaxe',
-    description: 'Umfassende Vorsorgeuntersuchung und sanfte Zahnreinigung für gesunde Kinderzähne von Anfang an',
-    label: 'Empholen',
-    icon: 'heroicons:check-circle',
-  },
-  {
-    id: '2',
-    title: 'Zahnreinigung',
-    description: 'Professionelle Reinigung und Politur aller Zähne für ein strahlendes Lächeln',
-    label: 'Beliebt',
-    icon: 'heroicons:star',
-  },
-  {
-    id: '3',
-    title: 'Kieferorthopädie',
-    description: 'Korrektur von Zahnfehlstellungen bei Kindern und Erwachsenen',
-    label: undefined,
-    icon: 'heroicons:heart',
-  },
-  {
-    id: '4',
-    title: 'Implantologie',
-    description: 'Ersatz fehlender Zähne durch hochwertige Implantate',
-    label: 'Neu',
-    icon: 'heroicons:plus-circle',
-  },
-];
-</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;
-}
-
-.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;
-}
-
-.section-description {
-  margin: -1rem 0 1.5rem 0;
-  font-size: 0.875rem;
-  color: #666;
-}
-
-.examples-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
-  gap: 1.5rem;
-}
-
-.example-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.example-item h4 {
-  margin: 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: #555;
-}
-
-/* Centered tile */
-.tile-centered :deep(.wl-tile__header) {
-  justify-content: center;
-}
-
-.tile-centered-title {
-  margin: 0;
-  font-family: 'Outfit', sans-serif;
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 1.2;
-  color: #172774;
-  text-align: center;
-}
-
-/* Banner custom content */
-.banner-custom-content {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-/* Banner row */
-.banner-row {
-  display: flex;
-  gap: 2rem;
-  flex-wrap: wrap;
-  align-items: flex-start;
-}
-
-/* Tile list */
-.tile-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  max-width: 500px;
-}
-
-/* Custom avatar */
-.custom-avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background-color: #172774;
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-  font-weight: 600;
-}
-
-.custom-avatar--large {
-  width: 44px;
-  height: 44px;
-  font-size: 0.875rem;
-}
-
-/* Custom image icon */
-.custom-image-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 12px;
-  background-color: #E4F2FB;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Custom content */
-.custom-content {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.custom-content__title {
-  font-weight: 600;
-  font-size: 14px;
-  color: #172774;
-}
-
-.custom-content__subtitle {
-  font-size: 13px;
-  color: #4F5B95;
-}
-
-.custom-content__desc {
-  font-size: 13px;
-  color: #4F5B95;
-}
-
-.custom-content__stat {
-  font-size: 28px;
-  font-weight: 700;
-  color: #172774;
-  line-height: 1;
-}
-
-.custom-content__tags {
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.tag {
-  font-size: 11px;
-  font-weight: 500;
-  padding: 2px 8px;
-  border-radius: 100px;
-}
-
-.tag--blue {
-  background-color: #EDF5FC;
-  color: #172774;
-}
-
-.tag--green {
-  background-color: #D8FDE4;
-  color: #037A2C;
-}
-
-/* Status badge */
-.status-badge {
-  font-size: 12px;
-  font-weight: 500;
-  padding: 4px 12px;
-  border-radius: 100px;
-}
-
-.status-badge--active {
-  background-color: #D8FDE4;
-  color: #037A2C;
-}
-
-/* Price label */
-.price-label {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-.price-label__amount {
-  font-size: 16px;
-  font-weight: 700;
-  color: #172774;
-}
-
-.price-label__note {
-  font-size: 11px;
-  color: #9198BC;
-}
-
-/* Availability */
-.availability {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  justify-self: end;
-}
-
-.availability__dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: #01D449;
-}
-
-.availability__text {
-  font-size: 12px;
-  font-weight: 500;
-  color: #037A2C;
-}
-
-/* Selection tiles (Figma design) */
-.selection-tiles-row {
-  display: flex;
-  gap: 8px;
-  max-width: 390px;
-}
-
-.selection-tiles-row :deep(.wl-tile) {
-  flex: 1;
-  height: 126px;
-  align-items: center;
-  justify-content: center;
-  border-color: #DDDDDF;
-}
-
-.selection-tile-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-
-.selection-tile-title {
-  font-family: 'Outfit', sans-serif;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 1.2;
-  color: #172774;
-  text-align: center;
-}
-
-@media (max-width: 768px) {
-  .examples-grid {
-    grid-template-columns: 1fr;
-  }
-}
-</style>
+<template>
+  <div class="page">
+    <div class="element-container">
+      <div class="controls">
+        <h2>Testing Domain: {{ currentDomain }}</h2>
+        <div class="button-group">
+          <Button label="Switch to Wunschlachen (Dental)" @click="switchToDental" variant="flat" color="#4caf50" text-color="#ffffff" />
+          <Button label="Switch to White Cocoon" @click="switchToCocoon" variant="flat" color="#4caf50" text-color="#ffffff" />
+          <Button label="Reset to Auto-Detect" @click="resetDomain" variant="flat" color="#f44336" text-color="#ffffff" />
+        </div>
+      </div>
+
+      <!-- Banner Standalone -->
+      <div class="section">
+        <h3 class="section-title">Banner Component</h3>
+        <p class="section-description">Standalone ribbon-style label with color variants</p>
+        <div class="banner-row">
+          <div class="example-item">
+            <h4>Blue (Default)</h4>
+            <Banner text="Empholen" color="blue" />
+          </div>
+          <div class="example-item">
+            <h4>Orange</h4>
+            <Banner text="Warnung" color="orange" />
+          </div>
+          <div class="example-item">
+            <h4>Pink</h4>
+            <Banner text="Dringend" color="pink" />
+          </div>
+          <div class="example-item">
+            <h4>Green</h4>
+            <Banner text="Bestätigt" color="green" />
+          </div>
+          <div class="example-item">
+            <h4>Custom Colors</h4>
+            <Banner text="Custom" bg-color="#E4E2FD" fold-color="#C5BDF2" />
+          </div>
+          <div class="example-item">
+            <h4>Long Text</h4>
+            <Banner text="Dringend empfohlen für Kinder" color="blue" />
+          </div>
+          <div class="example-item">
+            <h4>Custom Content</h4>
+            <Banner color="orange">
+              <template #content>
+                <div class="banner-custom-content">
+                  <v-icon size="14" icon="heroicons:sparkles" />
+                  <span>Neu &amp; Beliebt</span>
+                </div>
+              </template>
+            </Banner>
+          </div>
+        </div>
+      </div>
+
+      <!-- Basic Tile -->
+      <div class="section">
+        <h3 class="section-title">Basic Tile</h3>
+        <div class="examples-grid">
+          <div class="example-item">
+            <h4>With Title, Description &amp; Label</h4>
+            <Tile
+              title="Kontrolle & Kinderprophylaxe"
+              description="Umfassende Vorsorgeuntersuchung und sanfte Zahnreinigung für gesunde Kinderzähne von Anfang an"
+              label="Empholen"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Title &amp; Description Only</h4>
+            <Tile
+              title="Zahnreinigung"
+              description="Professionelle Reinigung und Politur aller Zähne"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Title Only</h4>
+            <Tile title="Kontrolluntersuchung" />
+          </div>
+
+          <div class="example-item">
+            <h4>Title Without Icon</h4>
+            <Tile title="Kontrolluntersuchung" :show-icon="false" />
+          </div>
+
+          <div class="example-item">
+            <h4>Title Only, Centered</h4>
+            <Tile :show-icon="false" class="tile-centered">
+              <template #title>
+                <h3 class="tile-centered-title">Kontrolluntersuchung</h3>
+              </template>
+            </Tile>
+          </div>
+
+          <div class="example-item">
+            <h4>Long Title &amp; Description</h4>
+            <Tile
+              title="Kontrolle & Kinderprophylaxe mit umfassender Vorsorgeuntersuchung und professioneller Zahnreinigung"
+              description="Umfassende Vorsorgeuntersuchung und sanfte Zahnreinigung für gesunde Kinderzähne von Anfang an. Inklusive Fluoridierung, Versiegelung der Backenzähne und individuelle Beratung zur optimalen Mundhygiene für Kinder und Jugendliche."
+              label="Empholen"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Long Title Only</h4>
+            <Tile title="Kontrolle & Kinderprophylaxe mit umfassender Vorsorgeuntersuchung und professioneller Zahnreinigung" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Banner via showBanner prop -->
+      <div class="section">
+        <h3 class="section-title">Banner Label (showBanner prop)</h3>
+        <p class="section-description">Set showBanner to render the label as a ribbon Banner</p>
+        <div class="examples-grid">
+          <div class="example-item">
+            <h4>Blue Banner</h4>
+            <Tile
+              title="Kontrolle & Kinderprophylaxe"
+              description="Umfassende Vorsorgeuntersuchung"
+              label="Empholen"
+              :use-w-l-banner="true"
+              banner-color="blue"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Orange Banner</h4>
+            <Tile
+              title="Kontrolluntersuchung"
+              description="Termin muss noch bestätigt werden"
+              label="Ausstehend"
+              :use-w-l-banner="true"
+              banner-color="orange"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Pink Banner</h4>
+            <Tile
+              title="Wurzelbehandlung"
+              description="Dringend erforderliche Behandlung"
+              label="Dringend"
+              :use-w-l-banner="true"
+              banner-color="pink"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Green Banner</h4>
+            <Tile
+              title="Zahnreinigung"
+              description="Termin wurde erfolgreich bestätigt"
+              label="Bestätigt"
+              :use-w-l-banner="true"
+              banner-color="green"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Long Title with Banner</h4>
+            <Tile
+              title="Kontrolle & Kinderprophylaxe mit umfassender Vorsorgeuntersuchung und professioneller Zahnreinigung"
+              description="Umfassende Vorsorgeuntersuchung und sanfte Zahnreinigung für gesunde Kinderzähne von Anfang an. Inklusive Fluoridierung, Versiegelung der Backenzähne und individuelle Beratung zur optimalen Mundhygiene für Kinder und Jugendliche."
+              label="Empholen"
+              :use-w-l-banner="true"
+              banner-color="blue"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Long Title &amp; Long Banner Text</h4>
+            <Tile
+              title="Kontrolle & Kinderprophylaxe mit umfassender Vorsorgeuntersuchung und professioneller Zahnreinigung"
+              description="Umfassende Vorsorgeuntersuchung und sanfte Zahnreinigung für gesunde Kinderzähne von Anfang an."
+              label="Dringend empfohlen für Kinder"
+              :use-w-l-banner="true"
+              banner-color="orange"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Different Icons -->
+      <div class="section">
+        <h3 class="section-title">Custom Icons</h3>
+        <div class="examples-grid">
+          <div class="example-item">
+            <h4>Default (Check Circle)</h4>
+            <Tile
+              title="Kontrolle & Kinderprophylaxe"
+              description="Umfassende Vorsorgeuntersuchung"
+              label="Empholen"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Star Icon</h4>
+            <Tile
+              title="Premium Behandlung"
+              description="Exklusive Behandlung mit modernster Technologie"
+              label="Premium"
+              icon="heroicons:star"
+              icon-color="#FF9800"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Medical Icon</h4>
+            <Tile
+              title="Wurzelbehandlung"
+              description="Behandlung des Zahnmarks zur Zahnerhaltung"
+              icon="heroicons:heart"
+              icon-color="#4CAF50"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Visibility Props -->
+      <div class="section">
+        <h3 class="section-title">Visibility Props</h3>
+        <p class="section-description">Control visibility of icon, title, and label independently via showIcon, showTitle, showLabel</p>
+        <div class="examples-grid">
+          <div class="example-item">
+            <h4>All Visible (Default)</h4>
+            <Tile
+              title="Zahnreinigung"
+              description="Professionelle Reinigung und Politur"
+              label="Verfügbar"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Hide Icon (showIcon=false)</h4>
+            <Tile
+              title="Zahnreinigung"
+              description="Professionelle Reinigung und Politur"
+              label="Verfügbar"
+              :show-icon="false"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Hide Title (showTitle=false)</h4>
+            <Tile
+              title="Zahnreinigung"
+              description="Professionelle Reinigung und Politur"
+              label="Verfügbar"
+              :show-title="false"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Hide Label (showLabel=false)</h4>
+            <Tile
+              title="Zahnreinigung"
+              description="Professionelle Reinigung und Politur"
+              label="Verfügbar"
+              :show-label="false"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Description Only</h4>
+            <Tile
+              title="Zahnreinigung"
+              description="Professionelle Reinigung und Politur aller Zähne für ein strahlendes Lächeln"
+              :show-icon="false"
+              :show-title="false"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Icon &amp; Description Only</h4>
+            <Tile
+              title="Zahnreinigung"
+              description="Professionelle Reinigung und Politur aller Zähne"
+              icon="heroicons:heart"
+              :show-title="false"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- States -->
+      <div class="section">
+        <h3 class="section-title">States</h3>
+        <div class="examples-grid">
+          <div class="example-item">
+            <h4>Normal</h4>
+            <Tile
+              title="Zahnreinigung"
+              description="Professionelle Reinigung und Politur"
+              label="Verfügbar"
+            />
+          </div>
+
+          <div class="example-item">
+            <h4>Disabled</h4>
+            <Tile
+              title="Implantologie"
+              description="Derzeit nicht verfügbar"
+              label="Nicht verfügbar"
+              :disabled="true"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Custom Slot: Prepend -->
+      <div class="section">
+        <h3 class="section-title">Custom Prepend Slot</h3>
+        <p class="section-description">Replace the default icon with custom content</p>
+        <div class="examples-grid">
+          <div class="example-item">
+            <h4>Avatar Prepend</h4>
+            <Tile
+              title="Dr. Maria Schmidt"
+              description="Zahnärztin — Spezialisiert auf Kinderzahnheilkunde"
+              label="Online"
+            >
+              <template #prepend>
+                <div class="custom-avatar">MS</div>
+              </template>
+            </Tile>
+          </div>
+
+          <div class="example-item">
+            <h4>Image Prepend</h4>
+            <Tile
+              title="Implantologie"
+              description="Ersatz fehlender Zähne durch hochwertige Implantate"
+            >
+              <template #prepend>
+                <div class="custom-image-icon">
+                  <v-icon size="28" color="#172774" icon="heroicons:heart" />
+                </div>
+              </template>
+            </Tile>
+          </div>
+        </div>
+      </div>
+
+      <!-- Custom Slot: Title & Description -->
+      <div class="section">
+        <h3 class="section-title">Custom Title &amp; Description Slots</h3>
+        <p class="section-description">Replace title or description individually with custom content</p>
+        <div class="examples-grid">
+          <div class="example-item">
+            <h4>Custom Description</h4>
+            <Tile title="Kieferorthopädie" label="Neu">
+              <template #description>
+                <div class="custom-content">
+                  <div class="custom-content__tags">
+                    <span class="tag tag--blue">Beratung</span>
+                    <span class="tag tag--green">30 Min.</span>
+                  </div>
+                  <div class="custom-content__desc">Korrektur von Zahnfehlstellungen bei Kindern und Erwachsenen</div>
+                </div>
+              </template>
+            </Tile>
+          </div>
+
+          <div class="example-item">
+            <h4>Custom Title &amp; Description</h4>
+            <Tile icon="heroicons:chart-bar" icon-color="#2196F3" :show-label="false">
+              <template #title>
+                <div class="custom-content__title">Behandlungen diese Woche</div>
+              </template>
+              <template #description>
+                <div class="custom-content">
+                  <div class="custom-content__stat">42</div>
+                  <div class="custom-content__desc">+12% gegenüber letzter Woche</div>
+                </div>
+              </template>
+            </Tile>
+          </div>
+        </div>
+      </div>
+
+      <!-- Custom Slot: Label -->
+      <div class="section">
+        <h3 class="section-title">Custom Label Slot</h3>
+        <p class="section-description">Replace the default pill label with custom markup</p>
+        <div class="examples-grid">
+          <div class="example-item">
+            <h4>Status Badge</h4>
+            <Tile
+              title="Kontrolle & Kinderprophylaxe"
+              description="Umfassende Vorsorgeuntersuchung"
+            >
+              <template #label>
+                <span class="status-badge status-badge--active">Aktiv</span>
+              </template>
+            </Tile>
+          </div>
+
+          <div class="example-item">
+            <h4>Price Label</h4>
+            <Tile
+              title="Zahnreinigung"
+              description="Professionelle Reinigung und Politur aller Zähne"
+            >
+              <template #label>
+                <div class="price-label">
+                  <span class="price-label__amount">85 &euro;</span>
+                  <span class="price-label__note">pro Sitzung</span>
+                </div>
+              </template>
+            </Tile>
+          </div>
+
+          <div class="example-item">
+            <h4>Action Button</h4>
+            <Tile
+              title="Wurzelbehandlung"
+              description="Behandlung des Zahnmarks zur Zahnerhaltung"
+            >
+              <template #label>
+                <Button label="Buchen" size="small" variant="flat" />
+              </template>
+            </Tile>
+          </div>
+        </div>
+      </div>
+
+      <!-- Multiple Tiles List -->
+      <div class="section">
+        <h3 class="section-title">Tile List</h3>
+        <p class="section-description">Multiple tiles stacked as a treatment selection</p>
+        <div class="tile-list">
+          <Tile
+            v-for="treatment in treatments"
+            :key="treatment.id"
+            :title="treatment.title"
+            :description="treatment.description"
+            :label="treatment.label"
+            :icon="treatment.icon"
+          />
+        </div>
+      </div>
+
+      <!-- Fully Custom Example -->
+      <div class="section">
+        <h3 class="section-title">Fully Customized</h3>
+        <p class="section-description">Individual named slots (#prepend, #title, #description, #label) replaced with custom content</p>
+        <div class="examples-grid">
+          <div class="example-item">
+            <h4>Named Slots</h4>
+            <Tile>
+              <template #prepend>
+                <div class="custom-avatar custom-avatar--large">TB</div>
+              </template>
+              <template #title>
+                <div class="custom-content">
+                  <div class="custom-content__title">Dr. Thomas Bauer</div>
+                  <div class="custom-content__subtitle">Kieferorthopäde</div>
+                </div>
+              </template>
+              <template #description>
+                <div class="custom-content__tags">
+                  <span class="tag tag--blue">Implantologie</span>
+                  <span class="tag tag--green">Kieferorthopädie</span>
+                </div>
+              </template>
+              <template #label>
+                <div class="availability">
+                  <span class="availability__dot"></span>
+                  <span class="availability__text">Verfügbar</span>
+                </div>
+              </template>
+            </Tile>
+          </div>
+
+          <div class="example-item">
+            <h4>Full Override (default slot)</h4>
+            <Tile>
+              <div class="custom-content">
+                <div class="custom-content__title">Kieferorthopädie</div>
+                <div class="custom-content__tags">
+                  <span class="tag tag--blue">Beratung</span>
+                  <span class="tag tag--green">30 Min.</span>
+                </div>
+                <div class="custom-content__desc">Korrektur von Zahnfehlstellungen bei Kindern und Erwachsenen</div>
+              </div>
+            </Tile>
+          </div>
+        </div>
+      </div>
+
+      <!-- Selection Tiles (Figma Design: "Für wen ist der Termin?") -->
+      <div class="section">
+        <h3 class="section-title">Selection Tiles (Figma Design)</h3>
+        <p class="section-description">Centered icon + title tiles used as selection cards — e.g. "Für wen ist der Termin?"</p>
+
+        <div class="selection-tiles-row">
+          <Tile aria-label="Kind (bis 17 J.)">
+            <div class="selection-tile-content">
+              <v-icon size="60" color="#172774" icon="heroicons:face-smile" />
+              <span class="selection-tile-title">Kind (bis 17 J.)</span>
+            </div>
+          </Tile>
+          <Tile aria-label="Erwachsener">
+            <div class="selection-tile-content">
+              <v-icon size="60" color="#172774" icon="heroicons:user" />
+              <span class="selection-tile-title">Erwachsener</span>
+            </div>
+          </Tile>
+        </div>
+
+        <h4 style="margin-top: 1.5rem;">Three Options Variant</h4>
+        <div class="selection-tiles-row">
+          <Tile aria-label="Kind (bis 17 J.)">
+            <div class="selection-tile-content">
+              <v-icon size="60" color="#172774" icon="heroicons:face-smile" />
+              <span class="selection-tile-title">Kind (bis 17 J.)</span>
+            </div>
+          </Tile>
+          <Tile aria-label="Erwachsener">
+            <div class="selection-tile-content">
+              <v-icon size="60" color="#172774" icon="heroicons:user" />
+              <span class="selection-tile-title">Erwachsener</span>
+            </div>
+          </Tile>
+          <Tile aria-label="Senior">
+            <div class="selection-tile-content">
+              <v-icon size="60" color="#172774" icon="heroicons:heart" />
+              <span class="selection-tile-title">Senior (65+)</span>
+            </div>
+          </Tile>
+        </div>
+
+        <h4 style="margin-top: 1.5rem;">With Disabled State</h4>
+        <div class="selection-tiles-row">
+          <Tile aria-label="Kind (bis 17 J.)">
+            <div class="selection-tile-content">
+              <v-icon size="60" color="#172774" icon="heroicons:face-smile" />
+              <span class="selection-tile-title">Kind (bis 17 J.)</span>
+            </div>
+          </Tile>
+          <Tile aria-label="Erwachsener" :disabled="true">
+            <div class="selection-tile-content">
+              <v-icon size="60" color="#172774" icon="heroicons:user" />
+              <span class="selection-tile-title">Erwachsener</span>
+            </div>
+          </Tile>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+  domain,
+  setTestingDomain,
+  clearTestingDomain,
+} from "@/utils/index";
+
+import Banner from "@/components/Banner/Banner.vue";
+import Button from "@/components/Button/Button.vue";
+import Tile from "@/components/Tile/Tile.vue";
+
+const currentDomain = computed(() => domain.value);
+const switchToDental = () => setTestingDomain("domain-dental");
+const switchToCocoon = () => setTestingDomain("domain-cocoon");
+const resetDomain = () => clearTestingDomain();
+
+const treatments = [
+  {
+    id: '1',
+    title: 'Kontrolle & Kinderprophylaxe',
+    description: 'Umfassende Vorsorgeuntersuchung und sanfte Zahnreinigung für gesunde Kinderzähne von Anfang an',
+    label: 'Empholen',
+    icon: 'heroicons:check-circle',
+  },
+  {
+    id: '2',
+    title: 'Zahnreinigung',
+    description: 'Professionelle Reinigung und Politur aller Zähne für ein strahlendes Lächeln',
+    label: 'Beliebt',
+    icon: 'heroicons:star',
+  },
+  {
+    id: '3',
+    title: 'Kieferorthopädie',
+    description: 'Korrektur von Zahnfehlstellungen bei Kindern und Erwachsenen',
+    label: undefined,
+    icon: 'heroicons:heart',
+  },
+  {
+    id: '4',
+    title: 'Implantologie',
+    description: 'Ersatz fehlender Zähne durch hochwertige Implantate',
+    label: 'Neu',
+    icon: 'heroicons:plus-circle',
+  },
+];
+</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;
+}
+
+.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;
+}
+
+.section-description {
+  margin: -1rem 0 1.5rem 0;
+  font-size: 0.875rem;
+  color: #666;
+}
+
+.examples-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+  gap: 1.5rem;
+}
+
+.example-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.example-item h4 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #555;
+}
+
+/* Centered tile */
+.tile-centered :deep(.wl-tile__header) {
+  justify-content: center;
+}
+
+.tile-centered-title {
+  margin: 0;
+  font-family: 'Outfit', sans-serif;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1.2;
+  color: #172774;
+  text-align: center;
+}
+
+/* Banner custom content */
+.banner-custom-content {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Banner row */
+.banner-row {
+  display: flex;
+  gap: 2rem;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+/* Tile list */
+.tile-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  max-width: 500px;
+}
+
+/* Custom avatar */
+.custom-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background-color: #172774;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.custom-avatar--large {
+  width: 44px;
+  height: 44px;
+  font-size: 0.875rem;
+}
+
+/* Custom image icon */
+.custom-image-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background-color: #E4F2FB;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Custom content */
+.custom-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.custom-content__title {
+  font-weight: 600;
+  font-size: 14px;
+  color: #172774;
+}
+
+.custom-content__subtitle {
+  font-size: 13px;
+  color: #4F5B95;
+}
+
+.custom-content__desc {
+  font-size: 13px;
+  color: #4F5B95;
+}
+
+.custom-content__stat {
+  font-size: 28px;
+  font-weight: 700;
+  color: #172774;
+  line-height: 1;
+}
+
+.custom-content__tags {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.tag {
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 8px;
+  border-radius: 100px;
+}
+
+.tag--blue {
+  background-color: #EDF5FC;
+  color: #172774;
+}
+
+.tag--green {
+  background-color: #D8FDE4;
+  color: #037A2C;
+}
+
+/* Status badge */
+.status-badge {
+  font-size: 12px;
+  font-weight: 500;
+  padding: 4px 12px;
+  border-radius: 100px;
+}
+
+.status-badge--active {
+  background-color: #D8FDE4;
+  color: #037A2C;
+}
+
+/* Price label */
+.price-label {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.price-label__amount {
+  font-size: 16px;
+  font-weight: 700;
+  color: #172774;
+}
+
+.price-label__note {
+  font-size: 11px;
+  color: #9198BC;
+}
+
+/* Availability */
+.availability {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  justify-self: end;
+}
+
+.availability__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #01D449;
+}
+
+.availability__text {
+  font-size: 12px;
+  font-weight: 500;
+  color: #037A2C;
+}
+
+/* Selection tiles (Figma design) */
+.selection-tiles-row {
+  display: flex;
+  gap: 8px;
+  max-width: 390px;
+}
+
+.selection-tiles-row :deep(.wl-tile) {
+  flex: 1;
+  height: 126px;
+  align-items: center;
+  justify-content: center;
+  border-color: #DDDDDF;
+}
+
+.selection-tile-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.selection-tile-title {
+  font-family: 'Outfit', sans-serif;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 1.2;
+  color: #172774;
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .examples-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>