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

package/src/components/RadioGroup/RadioGroup.css

@@ -0,0 +1,65 @@
+/* -------- Layout -------- */
+.wl-radio-group {
+  width: 100%;
+}
+
+.wl-radio-group__options {
+  display: flex;
+  width: 100%;
+  gap: 16px;
+}
+
+/* Inline: horizontal row, centered */
+.wl-radio-group__options--inline {
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Vertical: stacked column */
+.wl-radio-group__options--vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+/* -------- Vuetify Overrides -------- */
+.wl-radio-group .v-selection-control-group {
+  gap: 0;
+}
+
+.wl-radio-group .v-selection-control {
+  min-height: auto;
+}
+
+/* Radio button icon colors */
+.wl-radio-group .v-selection-control__input > .v-icon {
+  opacity: 1;
+}
+
+/* -------- Error State -------- */
+.wl-radio-group.is-error .v-selection-control__input > .v-icon {
+  color: var(--radio-error-border) !important;
+}
+
+/* -------- Disabled State -------- */
+.wl-radio-group.is-disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/* =====================================================
+   ACCESSIBILITY: Focus Indicators
+   WCAG 2.4.7: Focus Visible (Level AA)
+   ===================================================== */
+.wl-radio-group .v-selection-control__input:focus-visible {
+  outline: 2px solid var(--radio-checked-border);
+  outline-offset: 2px;
+  border-radius: 50%;
+}
+
+/* High contrast mode support */
+@media (forced-colors: active) {
+  .wl-radio-group .v-selection-control__input > .v-icon {
+    forced-color-adjust: none;
+  }
+}

package/src/components/RadioGroup/RadioGroup.vue

@@ -0,0 +1,134 @@
+<template>
+  <div
+    class="wl-radio-group"
+    :class="groupClasses"
+    :style="radioGroupCssVars"
+    data-testid="root"
+  >
+    <v-radio-group
+      :model-value="modelValue"
+      @update:model-value="onUpdate"
+      :inline="inline"
+      :ripple="false"
+      :hide-details="true"
+      :disabled="disabled"
+      :aria-label="ariaLabel"
+    >
+      <div class="wl-radio-group__options" :class="optionsLayoutClass">
+        <v-radio
+          v-for="item in items"
+          :key="item.value"
+          :ripple="false"
+          :value="item.value"
+          :disabled="item.disabled || disabled"
+          :color="colors['font_color_title_code']"
+          :base-color="colors['font_color_code']"
+        >
+          <template #label>
+            <span
+              :class="[
+                colors['font_color'],
+                { [colors['font_color_title']]: modelValue === item.value },
+              ]"
+            >
+              {{ item.label }}
+            </span>
+          </template>
+        </v-radio>
+      </div>
+    </v-radio-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, type PropType } from 'vue';
+import './RadioGroup.css';
+import { siteColors } from '../../utils/index';
+
+// Inject theme colors from ThemeProvider, fallback to global siteColors
+const injectedThemeColors = inject('themeColors', null);
+const colors = computed(() => {
+  if (injectedThemeColors) {
+    return (injectedThemeColors as any).value;
+  }
+  return siteColors;
+});
+
+export interface RadioItem {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+const props = defineProps({
+  /**
+   * The selected radio value. Synced with v-model.
+   */
+  modelValue: {
+    type: String,
+    default: undefined,
+  },
+
+  /**
+   * The available radio options.
+   * Each item must have a `value` and `label`. Optionally `disabled`.
+   */
+  items: {
+    type: Array as PropType<RadioItem[]>,
+    required: true,
+  },
+
+  /**
+   * Display radio buttons in a horizontal row when true.
+   */
+  inline: {
+    type: Boolean,
+    default: true,
+  },
+
+  /**
+   * Disables all radio buttons when true.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Indicates if the radio group is in an error state.
+   */
+  error: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Accessible label for screen readers (WCAG 4.1.2).
+   */
+  ariaLabel: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const groupClasses = computed(() => ({
+  'is-error': props.error,
+  'is-disabled': props.disabled,
+}));
+
+const optionsLayoutClass = computed(() => ({
+  'wl-radio-group__options--inline': props.inline,
+  'wl-radio-group__options--vertical': !props.inline,
+}));
+
+const radioGroupCssVars = computed(() => ({
+  '--radio-checked-border': colors.value['checkbox_checked_border'],
+  '--radio-error-border': colors.value['checkbox_error_border'],
+}));
+
+function onUpdate(value: string) {
+  emit('update:modelValue', value);
+}
+</script>

package/src/components/Select/Select.css

@@ -1,172 +1,172 @@
-.wl-select .v-field__outline {
-  opacity: 1 !important; /* Set the opacity to 1 */
-  --v-field-border-opacity: 1 !important; /* Ensure full opacity for the border */
-  color: var(--Soft-Concrete-2) !important; /*  border color */
-}
-
-/* Active state border color */
-.wl-select .v-field--active .v-field__outline {
-  color: var(--Soft-Concrete-2) !important; /* Active border color */
-  opacity: 1 !important;
-  --v-field-border-opacity: 1 !important;
-}
-
-.wl-select .v-label.v-field-label {
-  color: var(--Dental-Blue--3) !important;
-  opacity: 1 !important;
-}
-
-/* Default input text color */
-.wl-select .v-field__input {
-  color: var(--primary-color);
-  opacity: 1;
-}
-
-.wl-select .v-field--focused .v-field__input {
-  color: var(--primary-color);
-  opacity: 1;
-}
-
-/* Select item - default state (uses CSS variables from menuProps) */
-.wl-select-menu .v-list-item {
-  color: var(--select-item-text, var(--primary-color));
-  background: var(--select-item-default-bg, var(--bg_0));
-}
-
-/* Select item - hover and active state */
-.wl-select-menu .v-list-item:hover,
-.wl-select-menu .v-list-item.v-list-item--active {
-  color: var(--select-item-text, var(--primary-color));
-  border-left: 4px solid var(--select-item-selected-left-border, var(--primary-color));
-  padding-left: 12px; /* Adjust padding to make space for the border */
-  background: var(--select-item-hovered-bg, var(--bg_0)) !important;
-}
-
-/* Select item - selected state */
-.wl-select-menu .v-list-item--active {
-  background: var(--select-item-selected-bg, var(--bg_0)) !important;
-}
-
-.wl-select-menu .v-list-item__overlay {
-  background: var(--select-item-default-bg, var(--bg_0)) !important;
-}
-
-.wl-select-menu .v-list-item:hover .v-list-item__overlay {
-  background: var(--select-item-hovered-bg, var(--bg_0)) !important;
-}
-
-.wl-select-menu .v-list-item__content {
-  color: var(--select-item-text, var(--primary-color));
-}
-
-/* Focused state border color */
-.v-field[aria-expanded='true'] .v-field__outline {
-  color: var(--Soft-Concrete-2) !important;
-  opacity: 1 !important;
-
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.wl-select-menu .v-combobox__content {
-  border: 2px solid var(--Soft-Concrete-2);
-  border-bottom-left-radius: 8px !important;
-  border-bottom-right-radius: 8px !important;
-  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0 !important;
-  box-shadow: none;
-}
-
-.v-combobox__selection .v-chip {
-  background: var(--bg_0);
-  color: var(--primary-color);
-  border-radius: 8px;
-}
-
-.wl-select .v-icon {
-  color: var(--primary-color);
-}
-
-/* Disabled state styles */
-.wl-select .v-field--disabled,
-.wl-select .v-field--disabled .v-label.v-field-label,
-.wl-select .v-field--disabled .v-field__input,
-.wl-select .v-field--disabled .v-icon {
-  color: #bdbdbd !important;           /* Grey text and icon */
-  background-color: #f5f5f5 !important; /* Light grey background */
-  opacity: 1 !important;               /* Ensure full opacity */
-  cursor: not-allowed !important;
-}
-
-.wl-select .v-field--disabled .v-field__outline {
-  border-color: #e0e0e0 !important;    /* Lighter grey border */
-}
-
-.wl-select .v-field--disabled .v-combobox__selection .v-chip {
-  background: #e0e0e0 !important;
-  color: #bdbdbd !important;
-  border: 1px solid #bdbdbd !important;
-}
-
-/* Optionally, dim the dropdown if open while disabled */
-.wl-select .v-field--disabled .v-combobox__content {
-  background: #f5f5f5 !important;
-  color: #bdbdbd !important;
-  pointer-events: none;
-}
-
-/* Error state styles */
-.wl-select .v-field--error,
-.wl-select .v-field--error .v-label.v-field-label,
-.wl-select .v-field--error .v-field__input,
-.wl-select .v-field--error .v-icon {
-  background-color: #fdeaea !important; /* Light red background */
-  color: #b71c1c !important;            /* Dark red text and icon */
-  border-color: #b71c1c !important;     /* Dark red border */
-}
-
-.wl-select .v-field--error .v-field__outline {
-  --v-field-border-opacity: 1 !important;
-}
-
-.wl-select .v-field--error .v-combobox__selection .v-chip {
-  background: #fdeaea !important; /* Light red background */
-  color: #b71c1c !important;      /* Dark red text */
-  border: 1px solid #b71c1c !important;
-}
-
-.wl-select .v-field--error .v-combobox__content {
-  background: #fdeaea !important;
-  color: #b71c1c !important;
-  border-color: #b71c1c !important;
-}
-
-.wl-select .v-field--error .v-field__input {
-  color: #b71c1c !important;
-  background: #fdeaea !important;
-}
-
-.wl-select .v-field--disabled .v-field__input {
-  color: #bdbdbd !important;
-  background: #f5f5f5 !important;
-}
-
-.wl-select.border-on-hover .v-field__outline {
-  opacity: 0 !important;
-  --v-field-border-opacity: 0 !important;
-}
-
-.wl-select.border-on-hover:hover .v-field__outline {
-  opacity: 1 !important;
-  --v-field-border-opacity: 1 !important;
-}
-
-.wl-select.border-on-hover .v-field--focused .v-field__outline {
-  opacity: 1 !important;
-  --v-field-border-opacity: 1 !important;
-}
-
-/* WCAG 2.4.7 Focus Visible — distinct border color on focus */
-.wl-select .v-field--focused .v-field__outline {
-  color: var(--primary-color, #1976d2) !important;
-}
+.wl-select .v-field__outline {
+  opacity: 1 !important; /* Set the opacity to 1 */
+  --v-field-border-opacity: 1 !important; /* Ensure full opacity for the border */
+  color: var(--Soft-Concrete-2) !important; /*  border color */
+}
+
+/* Active state border color */
+.wl-select .v-field--active .v-field__outline {
+  color: var(--Soft-Concrete-2) !important; /* Active border color */
+  opacity: 1 !important;
+  --v-field-border-opacity: 1 !important;
+}
+
+.wl-select .v-label.v-field-label {
+  color: var(--Dental-Blue--3) !important;
+  opacity: 1 !important;
+}
+
+/* Default input text color */
+.wl-select .v-field__input {
+  color: var(--primary-color);
+  opacity: 1;
+}
+
+.wl-select .v-field--focused .v-field__input {
+  color: var(--primary-color);
+  opacity: 1;
+}
+
+/* Select item - default state (uses CSS variables from menuProps) */
+.wl-select-menu .v-list-item {
+  color: var(--select-item-text, var(--primary-color));
+  background: var(--select-item-default-bg, var(--bg_0));
+}
+
+/* Select item - hover and active state */
+.wl-select-menu .v-list-item:hover,
+.wl-select-menu .v-list-item.v-list-item--active {
+  color: var(--select-item-text, var(--primary-color));
+  border-left: 4px solid var(--select-item-selected-left-border, var(--primary-color));
+  padding-left: 12px; /* Adjust padding to make space for the border */
+  background: var(--select-item-hovered-bg, var(--bg_0)) !important;
+}
+
+/* Select item - selected state */
+.wl-select-menu .v-list-item--active {
+  background: var(--select-item-selected-bg, var(--bg_0)) !important;
+}
+
+.wl-select-menu .v-list-item__overlay {
+  background: var(--select-item-default-bg, var(--bg_0)) !important;
+}
+
+.wl-select-menu .v-list-item:hover .v-list-item__overlay {
+  background: var(--select-item-hovered-bg, var(--bg_0)) !important;
+}
+
+.wl-select-menu .v-list-item__content {
+  color: var(--select-item-text, var(--primary-color));
+}
+
+/* Focused state border color */
+.v-field[aria-expanded='true'] .v-field__outline {
+  color: var(--Soft-Concrete-2) !important;
+  opacity: 1 !important;
+
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.wl-select-menu .v-combobox__content {
+  border: 2px solid var(--Soft-Concrete-2);
+  border-bottom-left-radius: 8px !important;
+  border-bottom-right-radius: 8px !important;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+  box-shadow: none;
+}
+
+.v-combobox__selection .v-chip {
+  background: var(--bg_0);
+  color: var(--primary-color);
+  border-radius: 8px;
+}
+
+.wl-select .v-icon {
+  color: var(--primary-color);
+}
+
+/* Disabled state styles */
+.wl-select .v-field--disabled,
+.wl-select .v-field--disabled .v-label.v-field-label,
+.wl-select .v-field--disabled .v-field__input,
+.wl-select .v-field--disabled .v-icon {
+  color: #bdbdbd !important;           /* Grey text and icon */
+  background-color: #f5f5f5 !important; /* Light grey background */
+  opacity: 1 !important;               /* Ensure full opacity */
+  cursor: not-allowed !important;
+}
+
+.wl-select .v-field--disabled .v-field__outline {
+  border-color: #e0e0e0 !important;    /* Lighter grey border */
+}
+
+.wl-select .v-field--disabled .v-combobox__selection .v-chip {
+  background: #e0e0e0 !important;
+  color: #bdbdbd !important;
+  border: 1px solid #bdbdbd !important;
+}
+
+/* Optionally, dim the dropdown if open while disabled */
+.wl-select .v-field--disabled .v-combobox__content {
+  background: #f5f5f5 !important;
+  color: #bdbdbd !important;
+  pointer-events: none;
+}
+
+/* Error state styles */
+.wl-select .v-field--error,
+.wl-select .v-field--error .v-label.v-field-label,
+.wl-select .v-field--error .v-field__input,
+.wl-select .v-field--error .v-icon {
+  background-color: #fdeaea !important; /* Light red background */
+  color: #b71c1c !important;            /* Dark red text and icon */
+  border-color: #b71c1c !important;     /* Dark red border */
+}
+
+.wl-select .v-field--error .v-field__outline {
+  --v-field-border-opacity: 1 !important;
+}
+
+.wl-select .v-field--error .v-combobox__selection .v-chip {
+  background: #fdeaea !important; /* Light red background */
+  color: #b71c1c !important;      /* Dark red text */
+  border: 1px solid #b71c1c !important;
+}
+
+.wl-select .v-field--error .v-combobox__content {
+  background: #fdeaea !important;
+  color: #b71c1c !important;
+  border-color: #b71c1c !important;
+}
+
+.wl-select .v-field--error .v-field__input {
+  color: #b71c1c !important;
+  background: #fdeaea !important;
+}
+
+.wl-select .v-field--disabled .v-field__input {
+  color: #bdbdbd !important;
+  background: #f5f5f5 !important;
+}
+
+.wl-select.border-on-hover .v-field__outline {
+  opacity: 0 !important;
+  --v-field-border-opacity: 0 !important;
+}
+
+.wl-select.border-on-hover:hover .v-field__outline {
+  opacity: 1 !important;
+  --v-field-border-opacity: 1 !important;
+}
+
+.wl-select.border-on-hover .v-field--focused .v-field__outline {
+  opacity: 1 !important;
+  --v-field-border-opacity: 1 !important;
+}
+
+/* WCAG 2.4.7 Focus Visible — distinct border color on focus */
+.wl-select .v-field--focused .v-field__outline {
+  color: var(--primary-color, #1976d2) !important;
+}