@zap-wunschlachen/wl-shared-components 1.0.37 → 1.0.38

package/src/components/TickBox/TickBox.vue

@@ -1,126 +1,126 @@
-<template>
-  <v-checkbox
-    class="tick-box"
-    :class="checkboxClass"
-    true-icon="heroicons:outline-checked"
-    false-icon="heroicons:outline"
-    :disabled="disabled"
-    :value="value"
-    :density="density"
-    v-model="internalValue"
-    :color="hoverColor"
-    :base-color="hoverColor"
-    data-testid="root"
-  >
-    <!-- Custom label slot with dynamic style -->
-    <template #label>
-      <span :style="labelStyles">{{ label }}</span>
-    </template>
-  </v-checkbox>
-</template>
-
-<script setup>
-import { computed } from 'vue';
-import './TickBox.css';
-
-// Define props for the TickBox component
-const props = defineProps({
-  /**
-   * The label text displayed next to the tick box.
-   * This prop is required.
-   */
-  label: {
-    type: String,
-    required: true,
-  },
-
-  /**
-   * Indicates if the tick box is in a success state.
-   * When true, the success styling will be applied.
-   */
-  success: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Indicates if the tick box is in an error state.
-   * When true, the error styling will be applied.
-   */
-  error: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * Disables the tick box when true, making it non-interactive.
-   */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-
-  /**
-   * The value that the tick box represents when checked.
-   * Can be a string, number, or boolean. Default is `true`.
-   */
-  value: {
-    type: [String, Number, Boolean],
-    default: true,
-  },
-
-  /**
-   * The current value bound to the tick box for v-model.
-   * Can be an array for multiple selection or boolean for single selection.
-   * This prop is required.
-   */
-  modelValue: {
-    type: [Array, Boolean],
-    required: true,
-  },
-
-  /**
-   * Controls the density of the tick box, such as padding and size.
-   * Default is 'comfortable'.
-   */
-  density: {
-    type: String,
-    required: false,
-    default: 'comfortable',
-  },
-});
-
-// Emit event for v-model binding
-const emit = defineEmits(['update:modelValue']);
-
-// Computed property for v-model binding (two-way binding)
-const internalValue = computed({
-  get() {
-    return props.modelValue; // Get the current modelValue from the parent
-  },
-  set(newValue) {
-    emit('update:modelValue', newValue); // Emit the updated value to the parent
-  },
-});
-
-// Computed property for dynamic class based on error or success state
-const checkboxClass = computed(() => {
-  if (props.error) return 'error-state'; // Return error class if in error state
-  if (props.success) return 'success-state'; // Return success class if in success state
-  return 'default-state'; // Default class when no error or success
-});
-
-// Computed property for dynamic label styles based on state
-const labelStyles = computed(() => {
-  if (props.error) return { color: 'var(--Error-Red-0)' }; // Error styling for label
-  if (props.success) return { color: 'var(--Success-Green-1)' }; // Success styling for label
-  return { color: 'var(--Dental-Blue-0)' }; // Default label styling
-});
-
-// Computed property for dynamic color based on error or success state
-const hoverColor = computed(() => {
-  if (props.error) return 'var(--Error-Red-0)';
-  if (props.success) return 'var(--Success-Green-1)';
-  return 'var(--Dental-Blue-0)';
-});
-</script>
+<template>
+  <v-checkbox
+    class="tick-box"
+    :class="checkboxClass"
+    true-icon="heroicons:outline-checked"
+    false-icon="heroicons:outline"
+    :disabled="disabled"
+    :value="value"
+    :density="density"
+    v-model="internalValue"
+    :color="hoverColor"
+    :base-color="hoverColor"
+    data-testid="root"
+  >
+    <!-- Custom label slot with dynamic style -->
+    <template #label>
+      <span :style="labelStyles">{{ label }}</span>
+    </template>
+  </v-checkbox>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import './TickBox.css';
+
+// Define props for the TickBox component
+const props = defineProps({
+  /**
+   * The label text displayed next to the tick box.
+   * This prop is required.
+   */
+  label: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * Indicates if the tick box is in a success state.
+   * When true, the success styling will be applied.
+   */
+  success: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Indicates if the tick box is in an error state.
+   * When true, the error styling will be applied.
+   */
+  error: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Disables the tick box when true, making it non-interactive.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * The value that the tick box represents when checked.
+   * Can be a string, number, or boolean. Default is `true`.
+   */
+  value: {
+    type: [String, Number, Boolean],
+    default: true,
+  },
+
+  /**
+   * The current value bound to the tick box for v-model.
+   * Can be an array for multiple selection or boolean for single selection.
+   * This prop is required.
+   */
+  modelValue: {
+    type: [Array, Boolean],
+    required: true,
+  },
+
+  /**
+   * Controls the density of the tick box, such as padding and size.
+   * Default is 'comfortable'.
+   */
+  density: {
+    type: String,
+    required: false,
+    default: 'comfortable',
+  },
+});
+
+// Emit event for v-model binding
+const emit = defineEmits(['update:modelValue']);
+
+// Computed property for v-model binding (two-way binding)
+const internalValue = computed({
+  get() {
+    return props.modelValue; // Get the current modelValue from the parent
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue); // Emit the updated value to the parent
+  },
+});
+
+// Computed property for dynamic class based on error or success state
+const checkboxClass = computed(() => {
+  if (props.error) return 'error-state'; // Return error class if in error state
+  if (props.success) return 'success-state'; // Return success class if in success state
+  return 'default-state'; // Default class when no error or success
+});
+
+// Computed property for dynamic label styles based on state
+const labelStyles = computed(() => {
+  if (props.error) return { color: 'var(--Error-Red-0)' }; // Error styling for label
+  if (props.success) return { color: 'var(--Success-Green-1)' }; // Success styling for label
+  return { color: 'var(--Dental-Blue-0)' }; // Default label styling
+});
+
+// Computed property for dynamic color based on error or success state
+const hoverColor = computed(() => {
+  if (props.error) return 'var(--Error-Red-0)';
+  if (props.success) return 'var(--Success-Green-1)';
+  return 'var(--Dental-Blue-0)';
+});
+</script>

package/src/components/accessibility.css

@@ -1,218 +1,218 @@
-/**
- * Global Accessibility Styles
- *
- * These styles ensure WCAG 2.1 AA compliance for all components.
- * Required for German accessibility requirements (BITV 2.0).
- */
-
-/* =====================================================
-   FOCUS INDICATORS
-   WCAG 2.4.7: Focus Visible (Level AA)
-   ===================================================== */
-
-/* Universal focus-visible style for all interactive elements */
-.wl-button:focus-visible,
-button:focus-visible,
-a:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex="0"]:focus-visible {
-  outline: 2px solid var(--Dental-Blue-0, #172774);
-  outline-offset: 2px;
-}
-
-/* High contrast focus for dark backgrounds */
-.wl-button.v-btn--variant-flat:focus-visible {
-  outline-color: white;
-  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
-}
-
-/* Checkbox focus indicator */
-.input-checkbox:focus-visible {
-  outline: 2px solid var(--Dental-Blue-0, #172774);
-  outline-offset: 2px;
-}
-
-/* Button focus styles */
-.wl-button:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}
-
-.wl-button.v-btn--variant-outlined:focus-visible {
-  outline: 2px solid var(--Dental-Blue-0, #172774);
-  outline-offset: 2px;
-}
-
-/* Input focus styles */
-.v-text-field input:focus-visible,
-.v-textarea textarea:focus-visible {
-  outline: none; /* Vuetify handles this via border */
-}
-
-.v-text-field:focus-within {
-  border-color: var(--Dental-Blue-0, #172774) !important;
-}
-
-/* Select/Combobox focus */
-.wl-select .v-field:focus-within {
-  border-color: var(--Dental-Blue-0, #172774) !important;
-}
-
-/* =====================================================
-   REDUCED MOTION
-   WCAG 2.3.3: Animation from Interactions (Level AAA)
-   ===================================================== */
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
-
-/* =====================================================
-   HIGH CONTRAST MODE
-   Windows High Contrast Mode Support
-   ===================================================== */
-
-@media (forced-colors: active) {
-  .wl-button {
-    border: 2px solid currentColor;
-  }
-
-  .input-checkbox {
-    border: 2px solid currentColor;
-  }
-
-  .input-checkbox:checked::before {
-    background-color: currentColor;
-  }
-}
-
-/* =====================================================
-   DISABLED STATES
-   Ensure disabled elements maintain contrast
-   WCAG 1.4.3: Contrast (Minimum) - Note: Disabled elements are exempt
-   but we still aim for visibility
-   ===================================================== */
-
-.wl-button:disabled,
-.wl-button[aria-disabled="true"] {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.input-checkbox:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-/* =====================================================
-   SKIP LINKS
-   WCAG 2.4.1: Bypass Blocks (Level A)
-   ===================================================== */
-
-.skip-link {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  background: var(--Dental-Blue-0, #172774);
-  color: white;
-  padding: 8px 16px;
-  z-index: 10000;
-  text-decoration: none;
-  font-weight: 600;
-}
-
-.skip-link:focus {
-  top: 0;
-}
-
-/* =====================================================
-   SCREEN READER ONLY
-   Visually hidden but accessible to screen readers
-   ===================================================== */
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* =====================================================
-   ICON BUTTONS
-   Ensure icon-only buttons are accessible
-   ===================================================== */
-
-.icon-button {
-  position: relative;
-}
-
-/* Show in development environments */
-body.dev-mode .icon-button:not([aria-label]):not([aria-labelledby])::after {
-  content: "Warning: Missing accessible name";
-  position: absolute;
-  background: red;
-  color: white;
-  font-size: 10px;
-  padding: 2px;
-  display: block;
-}
-
-/* =====================================================
-   LOADING STATES
-   WCAG 4.1.3: Status Messages (Level AA)
-   ===================================================== */
-
-.loading-indicator {
-  /* Announce loading state to screen readers */
-}
-
-[aria-busy="true"] {
-  cursor: wait;
-}
-
-/* =====================================================
-   ERROR STATES
-   Ensure error messages are visible and announced
-   ===================================================== */
-
-.error-message {
-  color: var(--Error-Red-0, #d32f2f);
-  font-weight: 500;
-}
-
-[aria-invalid="true"] {
-  border-color: var(--Error-Red-0, #d32f2f) !important;
-}
-
-/* =====================================================
-   MINIMUM TOUCH TARGET SIZE
-   WCAG 2.5.5: Target Size (Level AAA) - 44x44px minimum
-   ===================================================== */
-
-.touch-target-min {
-  min-width: 44px;
-  min-height: 44px;
-}
-
-/* =====================================================
-   TEXT SPACING
-   WCAG 1.4.12: Text Spacing (Level AA)
-   Content should support user adjustments
-   ===================================================== */
-
-/* These rules ensure content adapts when users adjust text spacing */
-
+/**
+ * Global Accessibility Styles
+ *
+ * These styles ensure WCAG 2.1 AA compliance for all components.
+ * Required for German accessibility requirements (BITV 2.0).
+ */
+
+/* =====================================================
+   FOCUS INDICATORS
+   WCAG 2.4.7: Focus Visible (Level AA)
+   ===================================================== */
+
+/* Universal focus-visible style for all interactive elements */
+.wl-button:focus-visible,
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+[tabindex="0"]:focus-visible {
+  outline: 2px solid var(--Dental-Blue-0, #172774);
+  outline-offset: 2px;
+}
+
+/* High contrast focus for dark backgrounds */
+.wl-button.v-btn--variant-flat:focus-visible {
+  outline-color: white;
+  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
+}
+
+/* Checkbox focus indicator */
+.input-checkbox:focus-visible {
+  outline: 2px solid var(--Dental-Blue-0, #172774);
+  outline-offset: 2px;
+}
+
+/* Button focus styles */
+.wl-button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.wl-button.v-btn--variant-outlined:focus-visible {
+  outline: 2px solid var(--Dental-Blue-0, #172774);
+  outline-offset: 2px;
+}
+
+/* Input focus styles */
+.v-text-field input:focus-visible,
+.v-textarea textarea:focus-visible {
+  outline: none; /* Vuetify handles this via border */
+}
+
+.v-text-field:focus-within {
+  border-color: var(--Dental-Blue-0, #172774) !important;
+}
+
+/* Select/Combobox focus */
+.wl-select .v-field:focus-within {
+  border-color: var(--Dental-Blue-0, #172774) !important;
+}
+
+/* =====================================================
+   REDUCED MOTION
+   WCAG 2.3.3: Animation from Interactions (Level AAA)
+   ===================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* =====================================================
+   HIGH CONTRAST MODE
+   Windows High Contrast Mode Support
+   ===================================================== */
+
+@media (forced-colors: active) {
+  .wl-button {
+    border: 2px solid currentColor;
+  }
+
+  .input-checkbox {
+    border: 2px solid currentColor;
+  }
+
+  .input-checkbox:checked::before {
+    background-color: currentColor;
+  }
+}
+
+/* =====================================================
+   DISABLED STATES
+   Ensure disabled elements maintain contrast
+   WCAG 1.4.3: Contrast (Minimum) - Note: Disabled elements are exempt
+   but we still aim for visibility
+   ===================================================== */
+
+.wl-button:disabled,
+.wl-button[aria-disabled="true"] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.input-checkbox:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* =====================================================
+   SKIP LINKS
+   WCAG 2.4.1: Bypass Blocks (Level A)
+   ===================================================== */
+
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: var(--Dental-Blue-0, #172774);
+  color: white;
+  padding: 8px 16px;
+  z-index: 10000;
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.skip-link:focus {
+  top: 0;
+}
+
+/* =====================================================
+   SCREEN READER ONLY
+   Visually hidden but accessible to screen readers
+   ===================================================== */
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* =====================================================
+   ICON BUTTONS
+   Ensure icon-only buttons are accessible
+   ===================================================== */
+
+.icon-button {
+  position: relative;
+}
+
+/* Show in development environments */
+body.dev-mode .icon-button:not([aria-label]):not([aria-labelledby])::after {
+  content: "Warning: Missing accessible name";
+  position: absolute;
+  background: red;
+  color: white;
+  font-size: 10px;
+  padding: 2px;
+  display: block;
+}
+
+/* =====================================================
+   LOADING STATES
+   WCAG 4.1.3: Status Messages (Level AA)
+   ===================================================== */
+
+.loading-indicator {
+  /* Announce loading state to screen readers */
+}
+
+[aria-busy="true"] {
+  cursor: wait;
+}
+
+/* =====================================================
+   ERROR STATES
+   Ensure error messages are visible and announced
+   ===================================================== */
+
+.error-message {
+  color: var(--Error-Red-0, #d32f2f);
+  font-weight: 500;
+}
+
+[aria-invalid="true"] {
+  border-color: var(--Error-Red-0, #d32f2f) !important;
+}
+
+/* =====================================================
+   MINIMUM TOUCH TARGET SIZE
+   WCAG 2.5.5: Target Size (Level AAA) - 44x44px minimum
+   ===================================================== */
+
+.touch-target-min {
+  min-width: 44px;
+  min-height: 44px;
+}
+
+/* =====================================================
+   TEXT SPACING
+   WCAG 1.4.12: Text Spacing (Level AA)
+   Content should support user adjustments
+   ===================================================== */
+
+/* These rules ensure content adapts when users adjust text spacing */
+