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

package/src/components/CheckBox/CheckBox.css

@@ -1,185 +1,214 @@
-/* Normal State */
-
-/* Label */
-.label {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  font-size: 0.875rem;
-  line-height: 15.6px;
-  letter-spacing: -0.13px;
-  color: var(--Dental-Blue-0);
-  cursor: pointer;
-}
-
-/* Checkbox Container */
-.checkbox-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Checkbox (Normal) */
-.input-checkbox {
-  appearance: none;
-  background-color: white;
-  margin: 0;
-  padding: 0;
-  /* Width and height will be set by density classes */
-  border: 1px solid;
-  border-radius: 4px;
-  display: grid;
-  place-content: center;
-  transform: translateY(-0.075em);
-  border-color: var(--Soft-Concrete-2);
-  cursor: pointer;
-}
-
-.input-checkbox:hover {
-  border-width: 2px;
-  background-color: var(--Dental-Light-Blue--2);
-  border-color: var(--Dental-Blue-0);
-}
-
-.input-checkbox::before {
-  content: '';
-  /* Width and height will be set by density classes */
-  transform: scale(0);
-  transition: 120ms transform ease-in-out;
-  box-shadow: inset 1em 1em var(--Dental-Blue-0);
-  background-color: var(--Dental-Blue-0);
-  border-radius: 2px;
-}
-
-.input-checkbox:checked::before {
-  transform: scale(1);
-  background-color: var(--Dental-Blue-0);
-}
-
-.input-checkbox:checked {
-  border-width: 2px;
-  border-color: var(--Dental-Blue-0);
-}
-
-.input-checkbox:hover::before {
-  border-color: var(--Dental-Blue-0);
-}
-
-/* Density Levels */
-
-/* Comfortable */
-.density-comfortable.input-checkbox {
-  width: 32px;
-  height: 32px;
-}
-
-.density-comfortable.input-checkbox::before {
-  width: 20px;
-  height: 20px;
-}
-
-/* Default */
-.density-default.input-checkbox {
-  width: 28px;
-  height: 28px;
-}
-
-.density-default.input-checkbox::before {
-  width: 16px;
-  height: 16px;
-}
-
-/* Compact */
-.density-compact.input-checkbox {
-  width: 24px;
-  height: 24px;
-}
-
-.density-compact.input-checkbox::before {
-  width: 12px;
-  height: 12px;
-}
-
-/* Success State */
-
-/* Success Label */
-.label-success {
-  color: var(--Success-Green-1);
-}
-
-/* Success Checkbox */
-.input-success {
-  border-color: var(--Success-Green-0);
-  color: var(--Success-Green-0);
-}
-
-.input-success:hover {
-  border-color: var(--Success-Green-0);
-  background-color: var(--Success-Green--1);
-}
-
-.input-success.input-checkbox:checked {
-  border-color: var(--Success-Green-0);
-}
-
-.input-success.input-checkbox::before {
-  box-shadow: inset 1em 1em var(--Success-Green-0);
-  background-color: var(--Success-Green-0);
-}
-
-/* Error State */
-
-/* Error Label */
-.label-error {
-  color: var(--Error-Red-0);
-}
-
-/* Error Checkbox */
-.input-error {
-  border-color: var(--Error-Red-0);
-  color: var(--Error-Red-0);
-}
-
-.input-error:hover {
-  border-color: var(--Error-Red-0);
-  background-color: var(--Light-Gum--3);
-}
-
-.input-error.input-checkbox:checked {
-  border-color: var(--Error-Red-0);
-}
-
-.input-error.input-checkbox::before {
-  box-shadow: inset 1em 1em var(--Error-Red-0);
-  background-color: var(--Error-Red-0);
-}
-
-/* Disabled State */
-
-/* Disabled Label */
-.label-disabled {
-  color: var(--Soft-Concrete-2);
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Disabled Checkbox */
-.input-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.input-checkbox:disabled::before {
-  border-color: var(--Dental-Blue-0);
-}
-
-.input-disabled.input-checkbox:hover {
-  border-width: 0.5px;
-  background-color: white;
-  border-color: var(--Soft-Concrete-2);
-}
-
-/* Label Text */
-.label-text {
-  font-weight: 300;
-}
+/* Normal State */
+
+/* Label */
+.label {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 0.875rem;
+  line-height: 15.6px;
+  letter-spacing: -0.13px;
+  color: var(--Dental-Blue-0);
+  cursor: pointer;
+}
+
+/* Checkbox Container */
+.checkbox-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Checkbox (Normal) */
+.input-checkbox {
+  appearance: none;
+  background-color: white;
+  margin: 0;
+  padding: 0;
+  /* Width and height will be set by density classes */
+  border: 1px solid;
+  border-radius: 4px;
+  display: grid;
+  place-content: center;
+  transform: translateY(-0.075em);
+  border-color: var(--Soft-Concrete-2);
+  cursor: pointer;
+}
+
+.input-checkbox:hover {
+  border-width: 2px;
+  background-color: var(--Dental-Light-Blue--2);
+  border-color: var(--Dental-Blue-0);
+}
+
+.input-checkbox::before {
+  content: '';
+  /* Width and height will be set by density classes */
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em var(--Dental-Blue-0);
+  background-color: var(--Dental-Blue-0);
+  border-radius: 2px;
+}
+
+.input-checkbox:checked::before {
+  transform: scale(1);
+  background-color: var(--Dental-Blue-0);
+}
+
+.input-checkbox:checked {
+  border-width: 2px;
+  border-color: var(--Dental-Blue-0);
+}
+
+.input-checkbox:hover::before {
+  border-color: var(--Dental-Blue-0);
+}
+
+/* Density Levels */
+
+/* Comfortable */
+.density-comfortable.input-checkbox {
+  width: 32px;
+  height: 32px;
+}
+
+.density-comfortable.input-checkbox::before {
+  width: 20px;
+  height: 20px;
+}
+
+/* Default */
+.density-default.input-checkbox {
+  width: 28px;
+  height: 28px;
+}
+
+.density-default.input-checkbox::before {
+  width: 16px;
+  height: 16px;
+}
+
+/* Compact */
+.density-compact.input-checkbox {
+  width: 24px;
+  height: 24px;
+}
+
+.density-compact.input-checkbox::before {
+  width: 12px;
+  height: 12px;
+}
+
+/* Success State */
+
+/* Success Label */
+.label-success {
+  color: var(--Success-Green-1);
+}
+
+/* Success Checkbox */
+.input-success {
+  border-color: var(--Success-Green-0);
+  color: var(--Success-Green-0);
+}
+
+.input-success:hover {
+  border-color: var(--Success-Green-0);
+  background-color: var(--Success-Green--1);
+}
+
+.input-success.input-checkbox:checked {
+  border-color: var(--Success-Green-0);
+}
+
+.input-success.input-checkbox::before {
+  box-shadow: inset 1em 1em var(--Success-Green-0);
+  background-color: var(--Success-Green-0);
+}
+
+/* Error State */
+
+/* Error Label */
+.label-error {
+  color: var(--Error-Red-0);
+}
+
+/* Error Checkbox */
+.input-error {
+  border-color: var(--Error-Red-0);
+  color: var(--Error-Red-0);
+}
+
+.input-error:hover {
+  border-color: var(--Error-Red-0);
+  background-color: var(--Light-Gum--3);
+}
+
+.input-error.input-checkbox:checked {
+  border-color: var(--Error-Red-0);
+}
+
+.input-error.input-checkbox::before {
+  box-shadow: inset 1em 1em var(--Error-Red-0);
+  background-color: var(--Error-Red-0);
+}
+
+/* Disabled State */
+
+/* Disabled Label */
+.label-disabled {
+  color: var(--Soft-Concrete-2);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Disabled Checkbox */
+.input-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.input-checkbox:disabled::before {
+  border-color: var(--Dental-Blue-0);
+}
+
+.input-disabled.input-checkbox:hover {
+  border-width: 0.5px;
+  background-color: white;
+  border-color: var(--Soft-Concrete-2);
+}
+
+/* Label Text */
+.label-text {
+  font-weight: 300;
+}
+
+/* =====================================================
+   ACCESSIBILITY: Focus Indicators
+   WCAG 2.4.7: Focus Visible (Level AA)
+   ===================================================== */
+
+.input-checkbox:focus-visible {
+  outline: 2px solid var(--Dental-Blue-0);
+  outline-offset: 2px;
+}
+
+.input-success:focus-visible {
+  outline-color: var(--Success-Green-0);
+}
+
+.input-error:focus-visible {
+  outline-color: var(--Error-Red-0);
+}
+
+/* High contrast mode support */
+@media (forced-colors: active) {
+  .input-checkbox {
+    border: 2px solid currentColor;
+  }
+
+  .input-checkbox:checked::before {
+    background-color: currentColor;
+  }
+}

package/src/components/CheckBox/Checkbox.vue

@@ -1,130 +1,138 @@
-<template>
-  <label :class="labelClasses" data-testid="root">
-    <span class="checkbox-container">
-      <input
-        type="checkbox"
-        :name="value"
-        :checked="isChecked"
-        @change="updateValue"
-        :class="inputClasses"
-        :disabled="disabled"
-      />
-    </span>
-    {{ label }}
-  </label>
-</template>
-
-<script setup>
-import { defineProps, defineEmits, computed } from 'vue';
-import './CheckBox.css';
-
-// Define props for the checkbox component with default values and validation
-const props = defineProps({
-  /**
-   * The label text associated with the checkbox.
-   */
-  label: {
-    type: String,
-  },
-  /**
-   * Boolean indicating if the checkbox is in a success state.
-   * When true, the success style will be applied.
-   */
-  success: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * Boolean indicating if the checkbox is in an error state.
-   * When true, the error style will be applied.
-   */
-  error: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * Boolean indicating if the checkbox is disabled.
-   * When true, the checkbox will be non-interactive.
-   */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * The value associated with the checkbox input.
-   * Should be unique for each checkbox to track selections correctly.
-   */
-  value: {
-    type: String,
-    default: 'checkbox',
-  },
-  /**
-   * The model value of the checkbox.
-   * Can be an array for multiple selections or a boolean for single selection.
-   * Default is an empty array for multiple selections.
-   */
-  modelValue: {
-    type: [Array, Boolean],
-    default: () => [], // Default empty array for multiple selections
-  },
-  /**
-   * The density of the checkbox.
-   * Controls the size and spacing of the checkbox, accepting 'comfortable', 'default', or 'compact'.
-   * Default is 'default'.
-   */
-  density: {
-    type: String,
-    default: 'default',
-    validator: (value) => ['comfortable', 'default', 'compact'].includes(value), // Validate acceptable values
-  },
-});
-
-// Define events that can be emitted from the component
-const emit = defineEmits(['update:modelValue', 'input-error']);
-
-// Computed property to check if the checkbox is selected
-const isChecked = computed(() => {
-  if (Array.isArray(props.modelValue)) {
-    return props.modelValue.includes(props.value); // For multiple selections, check if value is in the array
-  }
-  return props.modelValue; // For single selection (boolean), return the model value
-});
-
-// Function to update the modelValue based on the checkbox state
-const updateValue = (event) => {
-  const checked = event.target.checked;
-  let newValue;
-
-  // Handle array (multiple selection) and boolean (single selection) cases
-  if (Array.isArray(props.modelValue)) {
-    if (checked) {
-      newValue = [...props.modelValue, props.value]; // Add value if checked
-    } else {
-      newValue = props.modelValue.filter((item) => item !== props.value); // Remove value if unchecked
-    }
-  } else {
-    newValue = checked; // For boolean, just set to checked state
-  }
-
-  // Emit the updated value and a potential input error event
-  emit('update:modelValue', newValue);
-  emit('input-error', { id: props.value, isError: !checked });
-};
-
-// Computed classes for the label, dynamically applying success, error, or disabled styles
-const labelClasses = computed(() => ({
-  label: true,
-  'label-success': props.success, // Success state class
-  'label-error': props.error, // Error state class
-  'label-disabled': props.disabled, // Disabled state class
-}));
-
-// Computed classes for the checkbox input, dynamically applying success, error, or disabled styles
-const inputClasses = computed(() => ({
-  'input-checkbox': true,
-  'input-success': props.success, // Success state class
-  'input-error': props.error, // Error state class
-  'input-disabled': props.disabled, // Disabled state class
-  [`density-${props.density}`]: true, // Density class (comfortable, default, or compact)
-}));
-</script>
+<template>
+  <label :class="labelClasses" data-testid="root" :for="checkboxId">
+    <span class="checkbox-container">
+      <input
+        type="checkbox"
+        :id="checkboxId"
+        :name="value"
+        :checked="isChecked"
+        @change="updateValue"
+        :class="inputClasses"
+        :disabled="disabled"
+        :aria-checked="isChecked"
+        :aria-disabled="disabled"
+        :aria-invalid="error"
+        :aria-describedby="error ? `${checkboxId}-error` : undefined"
+      />
+    </span>
+    <span class="label-text">{{ label }}</span>
+  </label>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import './CheckBox.css';
+
+// Define props for the checkbox component with default values and validation
+const props = defineProps({
+  /**
+   * The label text associated with the checkbox.
+   */
+  label: {
+    type: String,
+  },
+  /**
+   * Boolean indicating if the checkbox is in a success state.
+   * When true, the success style will be applied.
+   */
+  success: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Boolean indicating if the checkbox is in an error state.
+   * When true, the error style will be applied.
+   */
+  error: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Boolean indicating if the checkbox is disabled.
+   * When true, the checkbox will be non-interactive.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * The value associated with the checkbox input.
+   * Should be unique for each checkbox to track selections correctly.
+   */
+  value: {
+    type: String,
+    default: 'checkbox',
+  },
+  /**
+   * The model value of the checkbox.
+   * Can be an array for multiple selections or a boolean for single selection.
+   * Default is an empty array for multiple selections.
+   */
+  modelValue: {
+    type: [Array, Boolean],
+    default: () => [], // Default empty array for multiple selections
+  },
+  /**
+   * The density of the checkbox.
+   * Controls the size and spacing of the checkbox, accepting 'comfortable', 'default', or 'compact'.
+   * Default is 'default'.
+   */
+  density: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['comfortable', 'default', 'compact'].includes(value), // Validate acceptable values
+  },
+});
+
+// Define events that can be emitted from the component
+const emit = defineEmits(['update:modelValue', 'input-error']);
+
+// Generate stable unique ID for accessibility
+const checkboxId = `checkbox-${props.value}-${Math.random().toString(36).substr(2, 9)}`;
+
+// Computed property to check if the checkbox is selected
+const isChecked = computed(() => {
+  if (Array.isArray(props.modelValue)) {
+    return props.modelValue.includes(props.value); // For multiple selections, check if value is in the array
+  }
+  return props.modelValue; // For single selection (boolean), return the model value
+});
+
+// Function to update the modelValue based on the checkbox state
+const updateValue = (event) => {
+  const checked = event.target.checked;
+  let newValue;
+
+  // Handle array (multiple selection) and boolean (single selection) cases
+  if (Array.isArray(props.modelValue)) {
+    if (checked) {
+      newValue = [...props.modelValue, props.value]; // Add value if checked
+    } else {
+      newValue = props.modelValue.filter((item) => item !== props.value); // Remove value if unchecked
+    }
+  } else {
+    newValue = checked; // For boolean, just set to checked state
+  }
+
+  // Emit the updated value and a potential input error event
+  emit('update:modelValue', newValue);
+  emit('input-error', { id: props.value, isError: !checked });
+};
+
+// Computed classes for the label, dynamically applying success, error, or disabled styles
+const labelClasses = computed(() => ({
+  label: true,
+  'label-success': props.success, // Success state class
+  'label-error': props.error, // Error state class
+  'label-disabled': props.disabled, // Disabled state class
+}));
+
+// Computed classes for the checkbox input, dynamically applying success, error, or disabled styles
+const inputClasses = computed(() => ({
+  'input-checkbox': true,
+  'input-success': props.success, // Success state class
+  'input-error': props.error, // Error state class
+  'input-disabled': props.disabled, // Disabled state class
+  [`density-${props.density}`]: true, // Density class (comfortable, default, or compact)
+}));
+</script>

package/src/components/DateInput/DateInput.css

@@ -1,3 +1,3 @@
-.wl-date-input.edit-layout .v-input__append {
-    margin-inline-start: 0px;
+.wl-date-input.edit-layout .v-input__append {
+    margin-inline-start: 0px;
 }