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

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 */
+

package/src/components/index.ts

@@ -1,109 +1,110 @@
-// Components index file
-
-// Accordion
-export { default as AccordionItem } from './Accordion/AccordionItem.vue';
-export { default as AccordionGroup } from './Accordion/AccordionGroup.vue';
-
-// Banner
-export { default as Banner } from './Banner/Banner.vue';
-
-// Appointment
-export { default as AppointmentCard } from './Appointment/Card/Card.vue';
-export { default as AppointmentCardActions } from './Appointment/Card/Actions.vue';
-export { default as AppointmentCardDetails } from './Appointment/Card/Details.vue';
-export { default as AnamneseNotification } from './Appointment/Card/AnamneseNotification.vue';
-
-// Audio
-export { default as Audio } from './Audio/Audio.vue';
-export { default as Waveform } from './Audio/Waveform.vue';
-
-// Background
-export { default as Background } from './Background/Background.vue';
-export { default as WhiteCocoonBackground } from './Background/WhiteCocoonBackground.vue';
-export { default as WunschlachenBackground } from './Background/WunschlachenBackground.vue';
-
-// Core Components
-export { default as Button } from './Button/Button.vue';
-export { default as Checkbox } from './CheckBox/Checkbox.vue';
-export { default as DateInput } from './DateInput/DateInput.vue';
-export { default as Dialog } from './Dialog/Dialog.vue';
-export { default as AnamneseAnswerDialog } from './AnamneseAnswerDialog/AnamneseAnswerDialog.vue';
-export { default as EditField } from './EditField/EditField.vue';
-export { default as Input } from './Input/Input.vue';
-export { default as Modal } from './Modal/Modal.vue';
-export { default as NotificationBubble } from './NotificationBubble/NotificationBubble.vue';
-export { default as OtpInput } from './OtpInput/OtpInput.vue';
-export { default as PhoneInput } from './PhoneInput/PhoneInput.vue';
-export { default as Select } from './Select/Select.vue';
-export { default as SelectAutocomplete } from './SelectAutocomplete/SelectAutocomplete.vue';
-export { default as TextArea } from './TextArea/TextArea.vue';
-export { default as TickBox } from './TickBox/TickBox.vue';
-
-// ErrorPage
-export { default as ErrorPage } from './ErrorPage/ErrorPage.vue';
-export { default as ErrorPageLogo } from './ErrorPage/ErrorPageLogo.vue';
-
-// IconBullet
-export { default as IconBullet } from './IconBullet/IconBullet.vue';
-export { default as IconBulletList } from './IconBullet/IconBulletList.vue';
-
-// Icons
-export { default as AdvanceAppointmentIcons } from './Icons/AdvanceAppointments.vue';
-export { default as AudioCloudFailedIcon } from './Icons/Audio/CloudFailed.vue';
-export { default as AudioCloudSavedIcon } from './Icons/Audio/CloudSaved.vue';
-export { default as AudioDeleteIcon } from './Icons/Audio/Delete.vue';
-export { default as AudioPauseIcon } from './Icons/Audio/Pause.vue';
-export { default as AudioPlayIcon } from './Icons/Audio/Play.vue';
-export { default as CalendarIcon } from './Icons/Calendar.vue';
-export { default as CalendarNotificationIcon } from './Icons/CalendarNotification.vue';
-export { default as ChairIcon } from './Icons/Chair.vue';
-export { default as ChairNotificationIcon } from './Icons/ChairNotification.vue';
-export { default as CheckboxIcon } from './Icons/checkbox.vue';
-export { default as CircleIcon } from './Icons/Circle.vue';
-export { default as FavIcon } from './Icons/FavIcon.vue';
-export { default as FilledCircleIcon } from './Icons/FilledCircle.vue';
-export { default as Group3Icon } from './Icons/Group3.vue';
-export { default as Logo } from './Icons/Logo.vue';
-export { default as MiniLogo } from './Icons/MiniLogo.vue';
-export { default as OutlineCheckedIcon } from './Icons/outlineChecked.vue';
-export { default as PlayIcon } from './Icons/Play.vue';
-export { default as RingNotificationIcon } from './Icons/RingNotification.vue';
-export { default as SolidArrowRightIcon } from './Icons/SolidArrowRight.vue';
-
-// Laboratory
-export { default as LabAppointmentCard } from './Laboratory/AppointmentCard/AppointmentCard.vue';
-export { default as ChatBoxImage } from './Laboratory/ChatBoxImage/ChatBoxImage.vue';
-export { default as ChatMessage } from './Laboratory/ChatMessage/ChatMessage.vue';
-export { default as ChatMessageBadge } from './Laboratory/ChatMessage/ChatMessageBadge.vue';
-export { default as ChatNotification } from './Laboratory/ChatNotification/ChatNotification.vue';
-export { default as DocumentCard } from './Laboratory/DocumentCard/DocumentCard.vue';
-export { default as DocumentCardItem } from './Laboratory/DocumentCard/DocumentCardItem.vue';
-export { default as InfoCard } from './Laboratory/InfoCard/InfoCard.vue';
-export { default as MainColumnsBar } from './Laboratory/MainColumnsBar/MainColumnsBar.vue';
-export { default as ProgressCircle } from './Laboratory/ProgressCircle/ProgressCircle.vue';
-export { default as ProgressLinear } from './Laboratory/ProgressLinear/ProgressLinear.vue';
-export { default as SelectionColumnBar } from './Laboratory/SelectionColumnBar/SelectionColumnBar.vue';
-export { default as StatusNotification } from './Laboratory/StatusNotification/StatusNotification.vue';
-export { default as TagLabel } from './Laboratory/TagLabel/TagLabel.vue';
-export { default as TagLabelGroup } from './Laboratory/TagLabelGroup/TagLabelGroup.vue';
-export { default as TicketCard } from './Laboratory/TicketCard/TicketCard.vue';
-export { default as Timeline } from './Laboratory/TimeLine/Timeline.vue';
-export { default as TimelineEvent } from './Laboratory/TimeLine/TimeLineEvent.vue';
-
-// List
-export { default as List } from './List/List.vue';
-export { default as ListItem } from './ListItem/ListItem.vue';
-
-// Loader
-export { default as Loader } from './Loader/Loader.vue';
-
-// Banners
-export { default as MaintenanceBanner } from './MaintenanceBanner/MaintenanceBanner.vue';
-export { default as MaintenanceIllustration } from './MaintenanceBanner/MaintenanceIllustration.vue';
-export { default as StagingBanner } from './StagingBanner/StagingBanner.vue';
-
-// ThemeProvider
-export { default as ThemeProvider } from './ThemeProvider/ThemeProvider.vue';
-
-// Tile
-export { default as Tile } from './Tile/Tile.vue';
+// Components index file
+
+// Accordion
+export { default as AccordionItem } from './Accordion/AccordionItem.vue';
+export { default as AccordionGroup } from './Accordion/AccordionGroup.vue';
+
+// Banner
+export { default as Banner } from './Banner/Banner.vue';
+
+// Appointment
+export { default as AppointmentCard } from './Appointment/Card/Card.vue';
+export { default as AppointmentCardActions } from './Appointment/Card/Actions.vue';
+export { default as AppointmentCardDetails } from './Appointment/Card/Details.vue';
+export { default as AnamneseNotification } from './Appointment/Card/AnamneseNotification.vue';
+
+// Audio
+export { default as Audio } from './Audio/Audio.vue';
+export { default as Waveform } from './Audio/Waveform.vue';
+
+// Background
+export { default as Background } from './Background/Background.vue';
+export { default as WhiteCocoonBackground } from './Background/WhiteCocoonBackground.vue';
+export { default as WunschlachenBackground } from './Background/WunschlachenBackground.vue';
+
+// Core Components
+export { default as Button } from './Button/Button.vue';
+export { default as Checkbox } from './CheckBox/Checkbox.vue';
+export { default as DateInput } from './DateInput/DateInput.vue';
+export { default as Dialog } from './Dialog/Dialog.vue';
+export { default as AnamneseAnswerDialog } from './AnamneseAnswerDialog/AnamneseAnswerDialog.vue';
+export { default as EditField } from './EditField/EditField.vue';
+export { default as Input } from './Input/Input.vue';
+export { default as Modal } from './Modal/Modal.vue';
+export { default as NotificationBubble } from './NotificationBubble/NotificationBubble.vue';
+export { default as OtpInput } from './OtpInput/OtpInput.vue';
+export { default as PhoneInput } from './PhoneInput/PhoneInput.vue';
+export { default as RadioGroup } from './RadioGroup/RadioGroup.vue';
+export { default as Select } from './Select/Select.vue';
+export { default as SelectAutocomplete } from './SelectAutocomplete/SelectAutocomplete.vue';
+export { default as TextArea } from './TextArea/TextArea.vue';
+export { default as TickBox } from './TickBox/TickBox.vue';
+
+// ErrorPage
+export { default as ErrorPage } from './ErrorPage/ErrorPage.vue';
+export { default as ErrorPageLogo } from './ErrorPage/ErrorPageLogo.vue';
+
+// IconBullet
+export { default as IconBullet } from './IconBullet/IconBullet.vue';
+export { default as IconBulletList } from './IconBullet/IconBulletList.vue';
+
+// Icons
+export { default as AdvanceAppointmentIcons } from './Icons/AdvanceAppointments.vue';
+export { default as AudioCloudFailedIcon } from './Icons/Audio/CloudFailed.vue';
+export { default as AudioCloudSavedIcon } from './Icons/Audio/CloudSaved.vue';
+export { default as AudioDeleteIcon } from './Icons/Audio/Delete.vue';
+export { default as AudioPauseIcon } from './Icons/Audio/Pause.vue';
+export { default as AudioPlayIcon } from './Icons/Audio/Play.vue';
+export { default as CalendarIcon } from './Icons/Calendar.vue';
+export { default as CalendarNotificationIcon } from './Icons/CalendarNotification.vue';
+export { default as ChairIcon } from './Icons/Chair.vue';
+export { default as ChairNotificationIcon } from './Icons/ChairNotification.vue';
+export { default as CheckboxIcon } from './Icons/checkbox.vue';
+export { default as CircleIcon } from './Icons/Circle.vue';
+export { default as FavIcon } from './Icons/FavIcon.vue';
+export { default as FilledCircleIcon } from './Icons/FilledCircle.vue';
+export { default as Group3Icon } from './Icons/Group3.vue';
+export { default as Logo } from './Icons/Logo.vue';
+export { default as MiniLogo } from './Icons/MiniLogo.vue';
+export { default as OutlineCheckedIcon } from './Icons/outlineChecked.vue';
+export { default as PlayIcon } from './Icons/Play.vue';
+export { default as RingNotificationIcon } from './Icons/RingNotification.vue';
+export { default as SolidArrowRightIcon } from './Icons/SolidArrowRight.vue';
+
+// Laboratory
+export { default as LabAppointmentCard } from './Laboratory/AppointmentCard/AppointmentCard.vue';
+export { default as ChatBoxImage } from './Laboratory/ChatBoxImage/ChatBoxImage.vue';
+export { default as ChatMessage } from './Laboratory/ChatMessage/ChatMessage.vue';
+export { default as ChatMessageBadge } from './Laboratory/ChatMessage/ChatMessageBadge.vue';
+export { default as ChatNotification } from './Laboratory/ChatNotification/ChatNotification.vue';
+export { default as DocumentCard } from './Laboratory/DocumentCard/DocumentCard.vue';
+export { default as DocumentCardItem } from './Laboratory/DocumentCard/DocumentCardItem.vue';
+export { default as InfoCard } from './Laboratory/InfoCard/InfoCard.vue';
+export { default as MainColumnsBar } from './Laboratory/MainColumnsBar/MainColumnsBar.vue';
+export { default as ProgressCircle } from './Laboratory/ProgressCircle/ProgressCircle.vue';
+export { default as ProgressLinear } from './Laboratory/ProgressLinear/ProgressLinear.vue';
+export { default as SelectionColumnBar } from './Laboratory/SelectionColumnBar/SelectionColumnBar.vue';
+export { default as StatusNotification } from './Laboratory/StatusNotification/StatusNotification.vue';
+export { default as TagLabel } from './Laboratory/TagLabel/TagLabel.vue';
+export { default as TagLabelGroup } from './Laboratory/TagLabelGroup/TagLabelGroup.vue';
+export { default as TicketCard } from './Laboratory/TicketCard/TicketCard.vue';
+export { default as Timeline } from './Laboratory/TimeLine/Timeline.vue';
+export { default as TimelineEvent } from './Laboratory/TimeLine/TimeLineEvent.vue';
+
+// List
+export { default as List } from './List/List.vue';
+export { default as ListItem } from './ListItem/ListItem.vue';
+
+// Loader
+export { default as Loader } from './Loader/Loader.vue';
+
+// Banners
+export { default as MaintenanceBanner } from './MaintenanceBanner/MaintenanceBanner.vue';
+export { default as MaintenanceIllustration } from './MaintenanceBanner/MaintenanceIllustration.vue';
+export { default as StagingBanner } from './StagingBanner/StagingBanner.vue';
+
+// ThemeProvider
+export { default as ThemeProvider } from './ThemeProvider/ThemeProvider.vue';
+
+// Tile
+export { default as Tile } from './Tile/Tile.vue';