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

package/src/assets/css/variables.css

@@ -1,176 +1,176 @@
-:root {
-  /* The following color set is aligned with Figma colors
-    and provided here in the same order as it is done in Figma */
-
-  /* Wunschlachen Colors */
-  /* Primary Dental Blue */
-  --Dental-Blue-0: #172774;
-  --Dental-Blue-1: #111C54;
-  --Dental-Blue--1: #4F5B95;
-  --Dental-Blue--2: #7079A8;
-  --Dental-Blue--3: #9198BC;
-  --Dental-Blue--4: #CACDDE;
-  --Dental-Blue--5: #E5E6EE;
-  --Dental-Blue--6: #F6F6F8;
-  /* Primary Dental Light Blue */
-  --Dental-Light-Blue-0: #C5E1FC;
-  --Dental-Light-Blue-1: #ADCBE9;
-  --Dental-Light-Blue-2: #93B1CF;
-  --Dental-Light-Blue-3: #69849E;
-  --Dental-Light-Blue-4: #293E52;
-  --Dental-Light-Blue--1: #DCECFC;
-  --Dental-Light-Blue--2: #EDF5FC;
-  --Dental-Light-Blue--3: #F8FAFD;
-  /* Primary Dental Air */
-  --Dental-Air-0: #E4F2FB;
-  --Dental-Air-1: #DBE8F1;
-  --Dental-Air-2: #C5D1D9;
-  --Dental-Air-3: #99A2A9;
-  --Dental-Air-4: #70767B;
-  --Dental-Air-5: #2E3133;
-  --Dental-Air--1: #F4F9FD;
-  --Dental-Air--2: #F9FBFD;
-  /* Power Red */
-  --Power-Red-0: #F4297E;
-  --Power-Red-1: #891747;
-  --Power-Red-2: #4A0D26;
-  --Power-Red-3: #1E050F;
-  --Power-Red--1: #F769A5;
-  --Power-Red--2: #FA9FC5;
-  --Power-Red--3: #FCC9DF;
-  --Power-Red--4: #FEEAF2;
-  /* Light Gum */
-  --Light-Gum-0: #FCE2DF;
-  --Light-Gum-1: #EDD4D2;
-  --Light-Gum-2: #B6A3A2;
-  --Light-Gum-3: #4C4444;
-  --Light-Gum-4: #1F1C1B;
-  --Light-Gum--1: #FDEDEC;
-  --Light-Gum--2: #FEF3F2;
-  --Light-Gum--3: #FEF9F9;
-  /* Soft Concrete */
-  --Soft-Concrete-0: #F5F5F7;
-  --Soft-Concrete-1: #DDDDDF;
-  --Soft-Concrete-2: #C1C1C2;
-  --Soft-Concrete-3: #676769;
-  --Soft-Concrete-4: #4A4A4B;
-  --Soft-Concrete-5: #1E1E1E;
-  --Soft-Concrete--1: #F9F9FB;
-  --Soft-Concrete--2: #FBFBFC;
-  /* Warm Light */
-  --Warm-Light-0: #FFF6E4;
-  --Warm-Light-1: #F0E8D6;
-  --Warm-Light-2: #CEC7B8;
-  --Warm-Light-3: #5C5952;
-  --Warm-Light-4: #34322E;
-  --Warm-Light-5: #10100E;
-  --Warm-Light--1: #FFF8EB;
-  --Warm-Light--2: #FFFBF4;
-  /* Treatment */
-  --Yellow: #FEFDBD;
-  --Rose: #FBE6D7;
-  --Peach: #F8D3BB;
-  --Orange: #F7C47F;
-  --Pink: #F39FBC;
-  --Lilac: #E4E2FD;
-  --Flower: #F8D8F4;
-  --Berry: #DCB3F6;
-  --Lavender: #C5BDF2;
-  --Purple: #9B9BF5;
-  --Plum: #ACA5C4;
-  --Sky-Blue: #CCE8FD;
-  --Lime-Green: #E6F2B3;
-  --Moss: #D2DCC5;
-  --FirTree: #99AD99;
-  --Milkchocolate: #C1B3A9;
-
-  /* White Cocoon Colors */
-  /* Dark Nude */
-  --Dark-Nude-0: #C4AEA1;
-  --Dark-Nude-1: #A18F85;
-  --Dark-Nude-2: #7F7168;
-  --Dark-Nude-3: #453D39;
-  --Dark-Nude--1: #CEBCB2;
-  --Dark-Nude--2: #D9CBC2;
-  --Dark-Nude--3: #F1ECE9;
-  --Dark-Nude--4: #F8F5F4;
-  /* Light Nude */
-  --Light-Nude-0: #FFF7EC;
-  --Light-Nude-1: #F0E9DF;
-  --Light-Nude-2: #BBA798;
-  --Light-Nude-3: #6E6058;
-  --Light-Nude--1: #F5E8E1;
-  --Light-Nude--2: #FAF1EC;
-  --Light-Nude--3: #FCF7F4;
-  --Light-Nude--4: #FFFBF9;
-  /* Warm Air */
-  --Warm-Air-0: #FFF3E1;
-  --Warm-Air-1: #F0E9DF;
-  --Warm-Air-2: #D2CDC6;
-  --Warm-Air-3: #A5A3A0;
-  --Warm-Air--1: #FFF9F2;
-  --Warm-Air--2: #FFFAF4;
-  --Warm-Air--3: #FFFCF8;
-  --Warm-Air--4: #FFFDFB;
-  /* Soft Nude */
-  --Soft-Nude-0: #E3D9D4;
-  --Soft-Nude-1: #D6CCC8;
-  --Soft-Nude-2: #A09996;
-  --Soft-Nude-3: #504D4B;
-  --Soft-Nude--1: #EBE4E1;
-  --Soft-Nude--2: #F3EFED;
-  --Soft-Nude--3: #F7F4F2;
-  --Soft-Nude--4: #FCFBFA;
-  /* Blue Blush */
-  --Blue-Blush-0: #DCE7F7;
-  --Blue-Blush-1: #C2CCDA;
-  --Blue-Blush-2: #9BA3AE;
-  --Blue-Blush-3: #4E5257;
-  --Blue-Blush--1: #E6EEF9;
-  --Blue-Blush--2: #EAF1FA;
-  --Blue-Blush--3: #F3F7FC;
-  --Blue-Blush--4: #FBFCFE;
-  /* Light Blue Blush */
-  --Light-Blue-Blush-0: #F5F9FE;
-  --Light-Blue-Blush-1: #E7EAEF;
-  --Light-Blue-Blush-2: #ADB0B3;
-  --Light-Blue-Blush-3: #56585A;
-  --Light-Blue-Blush--1: #F6FAFE;
-  --Light-Blue-Blush--2: #F9FBFE;
-  --Light-Blue-Blush--3: #FBFDFF;
-  --Light-Blue-Blush--4: #FDFEFF;
-  /* Night Nude */
-  --Night-Nude-0: #A1978F;
-  --Night-Nude-1: #8E857E;
-  --Night-Nude-2: #68625D;
-  --Night-Nude-3: #393532;
-  --Night-Nude--1: #BDB6B0;
-  --Night-Nude--2: #CDC8C4;
-  --Night-Nude--3: #E3E0DE;
-  --Night-Nude--4: #F4F3F2;
-
-  /* General colors */
-  /* Check Green */
-  --Check-Green-1: #037A2C;
-  --Check-Green-0: #01D449;
-  --Check-Green--1: #D8FDE4;
-  /* Success Green */
-  --Success-Green-1: #037A72;
-  --Success-Green-0: #03DAC6;
-  --Success-Green--1: #F3FDFC;
-  /* Warning Yellow */
-  --Warning-Yellow-1: #4F4700;
-  --Warning-Yellow-0: #FFE600;
-  --Warning-Yellow--1: #FFF8DB;
-  /* Error Red */
-  --Error-Red-1: #630112;
-  --Error-Red-0: #B00020;
-  --Error-Red--1: #E3A6B1;
-
-  --White-0: #FFFFFF;
-  --Black-0: #000000;
-
-
-  /* Primary color - set dynamically via JS based on domain */
-  --primary-color: var(--Dental-Blue-0);
-}
+:root {
+  /* The following color set is aligned with Figma colors
+    and provided here in the same order as it is done in Figma */
+
+  /* Wunschlachen Colors */
+  /* Primary Dental Blue */
+  --Dental-Blue-0: #172774;
+  --Dental-Blue-1: #111C54;
+  --Dental-Blue--1: #4F5B95;
+  --Dental-Blue--2: #7079A8;
+  --Dental-Blue--3: #9198BC;
+  --Dental-Blue--4: #CACDDE;
+  --Dental-Blue--5: #E5E6EE;
+  --Dental-Blue--6: #F6F6F8;
+  /* Primary Dental Light Blue */
+  --Dental-Light-Blue-0: #C5E1FC;
+  --Dental-Light-Blue-1: #ADCBE9;
+  --Dental-Light-Blue-2: #93B1CF;
+  --Dental-Light-Blue-3: #69849E;
+  --Dental-Light-Blue-4: #293E52;
+  --Dental-Light-Blue--1: #DCECFC;
+  --Dental-Light-Blue--2: #EDF5FC;
+  --Dental-Light-Blue--3: #F8FAFD;
+  /* Primary Dental Air */
+  --Dental-Air-0: #E4F2FB;
+  --Dental-Air-1: #DBE8F1;
+  --Dental-Air-2: #C5D1D9;
+  --Dental-Air-3: #99A2A9;
+  --Dental-Air-4: #70767B;
+  --Dental-Air-5: #2E3133;
+  --Dental-Air--1: #F4F9FD;
+  --Dental-Air--2: #F9FBFD;
+  /* Power Red */
+  --Power-Red-0: #F4297E;
+  --Power-Red-1: #891747;
+  --Power-Red-2: #4A0D26;
+  --Power-Red-3: #1E050F;
+  --Power-Red--1: #F769A5;
+  --Power-Red--2: #FA9FC5;
+  --Power-Red--3: #FCC9DF;
+  --Power-Red--4: #FEEAF2;
+  /* Light Gum */
+  --Light-Gum-0: #FCE2DF;
+  --Light-Gum-1: #EDD4D2;
+  --Light-Gum-2: #B6A3A2;
+  --Light-Gum-3: #4C4444;
+  --Light-Gum-4: #1F1C1B;
+  --Light-Gum--1: #FDEDEC;
+  --Light-Gum--2: #FEF3F2;
+  --Light-Gum--3: #FEF9F9;
+  /* Soft Concrete */
+  --Soft-Concrete-0: #F5F5F7;
+  --Soft-Concrete-1: #DDDDDF;
+  --Soft-Concrete-2: #C1C1C2;
+  --Soft-Concrete-3: #676769;
+  --Soft-Concrete-4: #4A4A4B;
+  --Soft-Concrete-5: #1E1E1E;
+  --Soft-Concrete--1: #F9F9FB;
+  --Soft-Concrete--2: #FBFBFC;
+  /* Warm Light */
+  --Warm-Light-0: #FFF6E4;
+  --Warm-Light-1: #F0E8D6;
+  --Warm-Light-2: #CEC7B8;
+  --Warm-Light-3: #5C5952;
+  --Warm-Light-4: #34322E;
+  --Warm-Light-5: #10100E;
+  --Warm-Light--1: #FFF8EB;
+  --Warm-Light--2: #FFFBF4;
+  /* Treatment */
+  --Yellow: #FEFDBD;
+  --Rose: #FBE6D7;
+  --Peach: #F8D3BB;
+  --Orange: #F7C47F;
+  --Pink: #F39FBC;
+  --Lilac: #E4E2FD;
+  --Flower: #F8D8F4;
+  --Berry: #DCB3F6;
+  --Lavender: #C5BDF2;
+  --Purple: #9B9BF5;
+  --Plum: #ACA5C4;
+  --Sky-Blue: #CCE8FD;
+  --Lime-Green: #E6F2B3;
+  --Moss: #D2DCC5;
+  --FirTree: #99AD99;
+  --Milkchocolate: #C1B3A9;
+
+  /* White Cocoon Colors */
+  /* Dark Nude */
+  --Dark-Nude-0: #C4AEA1;
+  --Dark-Nude-1: #A18F85;
+  --Dark-Nude-2: #7F7168;
+  --Dark-Nude-3: #453D39;
+  --Dark-Nude--1: #CEBCB2;
+  --Dark-Nude--2: #D9CBC2;
+  --Dark-Nude--3: #F1ECE9;
+  --Dark-Nude--4: #F8F5F4;
+  /* Light Nude */
+  --Light-Nude-0: #FFF7EC;
+  --Light-Nude-1: #F0E9DF;
+  --Light-Nude-2: #BBA798;
+  --Light-Nude-3: #6E6058;
+  --Light-Nude--1: #F5E8E1;
+  --Light-Nude--2: #FAF1EC;
+  --Light-Nude--3: #FCF7F4;
+  --Light-Nude--4: #FFFBF9;
+  /* Warm Air */
+  --Warm-Air-0: #FFF3E1;
+  --Warm-Air-1: #F0E9DF;
+  --Warm-Air-2: #D2CDC6;
+  --Warm-Air-3: #A5A3A0;
+  --Warm-Air--1: #FFF9F2;
+  --Warm-Air--2: #FFFAF4;
+  --Warm-Air--3: #FFFCF8;
+  --Warm-Air--4: #FFFDFB;
+  /* Soft Nude */
+  --Soft-Nude-0: #E3D9D4;
+  --Soft-Nude-1: #D6CCC8;
+  --Soft-Nude-2: #A09996;
+  --Soft-Nude-3: #504D4B;
+  --Soft-Nude--1: #EBE4E1;
+  --Soft-Nude--2: #F3EFED;
+  --Soft-Nude--3: #F7F4F2;
+  --Soft-Nude--4: #FCFBFA;
+  /* Blue Blush */
+  --Blue-Blush-0: #DCE7F7;
+  --Blue-Blush-1: #C2CCDA;
+  --Blue-Blush-2: #9BA3AE;
+  --Blue-Blush-3: #4E5257;
+  --Blue-Blush--1: #E6EEF9;
+  --Blue-Blush--2: #EAF1FA;
+  --Blue-Blush--3: #F3F7FC;
+  --Blue-Blush--4: #FBFCFE;
+  /* Light Blue Blush */
+  --Light-Blue-Blush-0: #F5F9FE;
+  --Light-Blue-Blush-1: #E7EAEF;
+  --Light-Blue-Blush-2: #ADB0B3;
+  --Light-Blue-Blush-3: #56585A;
+  --Light-Blue-Blush--1: #F6FAFE;
+  --Light-Blue-Blush--2: #F9FBFE;
+  --Light-Blue-Blush--3: #FBFDFF;
+  --Light-Blue-Blush--4: #FDFEFF;
+  /* Night Nude */
+  --Night-Nude-0: #A1978F;
+  --Night-Nude-1: #8E857E;
+  --Night-Nude-2: #68625D;
+  --Night-Nude-3: #393532;
+  --Night-Nude--1: #BDB6B0;
+  --Night-Nude--2: #CDC8C4;
+  --Night-Nude--3: #E3E0DE;
+  --Night-Nude--4: #F4F3F2;
+
+  /* General colors */
+  /* Check Green */
+  --Check-Green-1: #037A2C;
+  --Check-Green-0: #01D449;
+  --Check-Green--1: #D8FDE4;
+  /* Success Green */
+  --Success-Green-1: #037A72;
+  --Success-Green-0: #03DAC6;
+  --Success-Green--1: #F3FDFC;
+  /* Warning Yellow */
+  --Warning-Yellow-1: #4F4700;
+  --Warning-Yellow-0: #FFE600;
+  --Warning-Yellow--1: #FFF8DB;
+  /* Error Red */
+  --Error-Red-1: #630112;
+  --Error-Red-0: #B00020;
+  --Error-Red--1: #E3A6B1;
+
+  --White-0: #FFFFFF;
+  --Black-0: #000000;
+
+
+  /* Primary color - set dynamically via JS based on domain */
+  --primary-color: var(--Dental-Blue-0);
+}

package/src/components/Accordion/Accordion.css

@@ -1,65 +1,65 @@
-/* Accordion Container Styles */
-.accordion-container {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  align-items: flex-start;
-  width: 100%;
-}
-
-.accordion-container__headline {
-  font-family: 'Outfit', sans-serif;
-  font-weight: 700;
-  font-size: 25px;
-  line-height: 1.2;
-  letter-spacing: -0.5px;
-  color: var(--accordion-headline-color, var(--primary-color));
-  text-align: center;
-  width: 100%;
-  margin: 0;
-}
-
-/* Title Styles */
-.accordion-item__title {
-  font-family: 'Outfit', sans-serif;
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 1.2;
-  color: var(--accordion-title-color, var(--primary-color));
-  text-align: left;
-  flex: 1 0 0;
-}
-
-/* Content Styles */
-.accordion-item__content {
-  font-family: 'Outfit', sans-serif;
-  font-weight: 300;
-  font-size: 16px;
-  line-height: 1.2;
-  color: var(--accordion-content-color, var(--primary-color));
-  width: 100%;
-  margin: 0;
-}
-
-/* Icon Styles */
-.wl-accordion .v-icon {
-  width: 16px;
-  height: 16px;
-}
-
-/* Fix for Tailwind CSS reset overriding divider color */
-.v-divider {
-  border-color: currentColor !important;
-}
-
-/* Base Accordion Item Styles */
-.wl-accordion-item {
-  --v-hover-opacity: 0.1;
-  --accordion-item-shadow: none;
-  box-shadow: var(--accordion-item-shadow);
-}
-
-.wl-accordion-item .v-expansion-panel-title__icon {
-  color: var(--accordion-icon-color) !important;
-  fill: var(--accordion-icon-color) !important;
-}
+/* Accordion Container Styles */
+.accordion-container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.accordion-container__headline {
+  font-family: 'Outfit', sans-serif;
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 1.2;
+  letter-spacing: -0.5px;
+  color: var(--accordion-headline-color, var(--primary-color));
+  text-align: center;
+  width: 100%;
+  margin: 0;
+}
+
+/* Title Styles */
+.accordion-item__title {
+  font-family: 'Outfit', sans-serif;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 1.2;
+  color: var(--accordion-title-color, var(--primary-color));
+  text-align: left;
+  flex: 1 0 0;
+}
+
+/* Content Styles */
+.accordion-item__content {
+  font-family: 'Outfit', sans-serif;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 1.2;
+  color: var(--accordion-content-color, var(--primary-color));
+  width: 100%;
+  margin: 0;
+}
+
+/* Icon Styles */
+.wl-accordion .v-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* Fix for Tailwind CSS reset overriding divider color */
+.v-divider {
+  border-color: currentColor !important;
+}
+
+/* Base Accordion Item Styles */
+.wl-accordion-item {
+  --v-hover-opacity: 0.1;
+  --accordion-item-shadow: none;
+  box-shadow: var(--accordion-item-shadow);
+}
+
+.wl-accordion-item .v-expansion-panel-title__icon {
+  color: var(--accordion-icon-color) !important;
+  fill: var(--accordion-icon-color) !important;
+}

package/src/components/Accordion/AccordionGroup.vue

@@ -1,88 +1,88 @@
-<template>
-  <div
-    class="accordion-container"
-    :style="containerStyle"
-    data-testid="root"
-  >
-    <!-- Headline -->
-    <h2 v-if="headline" class="accordion-container__headline">
-      {{ headline }}
-    </h2>
-
-    <v-expansion-panels
-      v-model="internalValue"
-      :multiple="multiple"
-      class="wl-accordion"
-      :variant="variantGroup"
-      :ripple="false"
-      :flat="true"
-    >
-      <slot />
-    </v-expansion-panels>
-  </div>
-</template>
-
-<script setup>
-import './Accordion.css';
-import { defineProps, defineEmits, computed } from 'vue';
-
-const props = defineProps({
-  /**
-   * The modelValue for v-model binding.
-   */
-  modelValue: {
-    type: [String, Number, Array],
-    default: null,
-  },
-  /**
-   * Allows multiple panels to be open simultaneously.
-   */
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * Variant for the expansion panels group.
-   */
-  variantGroup: {
-    type: String,
-    default: 'accordion',
-  },
-  /**
-   * Optional headline displayed above the accordion group.
-   */
-  headline: {
-    type: String,
-    default: '',
-  },
-  /**
-   * Color for the headline text.
-   */
-  headlineColor: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const internalValue = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(value) {
-    emit('update:modelValue', value);
-  },
-});
-
-const containerStyle = computed(() => {
-  const style = {};
-  if (props.headlineColor) {
-    style['--accordion-headline-color'] = props.headlineColor;
-  }
-  return style;
-});
-</script>
-
-<style lang="css" scoped>
-</style>
+<template>
+  <div
+    class="accordion-container"
+    :style="containerStyle"
+    data-testid="root"
+  >
+    <!-- Headline -->
+    <h2 v-if="headline" class="accordion-container__headline">
+      {{ headline }}
+    </h2>
+
+    <v-expansion-panels
+      v-model="internalValue"
+      :multiple="multiple"
+      class="wl-accordion"
+      :variant="variantGroup"
+      :ripple="false"
+      :flat="true"
+    >
+      <slot />
+    </v-expansion-panels>
+  </div>
+</template>
+
+<script setup>
+import './Accordion.css';
+import { defineProps, defineEmits, computed } from 'vue';
+
+const props = defineProps({
+  /**
+   * The modelValue for v-model binding.
+   */
+  modelValue: {
+    type: [String, Number, Array],
+    default: null,
+  },
+  /**
+   * Allows multiple panels to be open simultaneously.
+   */
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Variant for the expansion panels group.
+   */
+  variantGroup: {
+    type: String,
+    default: 'accordion',
+  },
+  /**
+   * Optional headline displayed above the accordion group.
+   */
+  headline: {
+    type: String,
+    default: '',
+  },
+  /**
+   * Color for the headline text.
+   */
+  headlineColor: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const internalValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit('update:modelValue', value);
+  },
+});
+
+const containerStyle = computed(() => {
+  const style = {};
+  if (props.headlineColor) {
+    style['--accordion-headline-color'] = props.headlineColor;
+  }
+  return style;
+});
+</script>
+
+<style lang="css" scoped>
+</style>