@a11ypros/a11y-ui-components 1.0.0

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import './Modal.css';
+export interface ModalProps {
+    /**
+     * Whether the modal is open
+     */
+    isOpen: boolean;
+    /**
+     * Callback when modal should close
+     */
+    onClose: () => void;
+    /**
+     * Title of the modal (required for accessibility)
+     */
+    title: string;
+    /**
+     * Content of the modal
+     */
+    children: React.ReactNode;
+    /**
+     * Whether to close on backdrop click
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Whether to close on ESC key press
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Size of the modal
+     */
+    size?: 'sm' | 'md' | 'lg' | 'full';
+    /**
+     * Element to return focus to when modal closes
+     */
+    returnFocusTo?: HTMLElement | null;
+}
+/**
+ * Accessible Modal component using HTML5 dialog element
+ *
+ * Uses the native `<dialog>` element which provides:
+ * - Built-in focus management and focus trapping
+ * - Automatic body scroll prevention
+ * - Native backdrop overlay
+ * - ESC key handling (configurable)
+ *
+ * WCAG Compliance:
+ * - 2.1.1 Keyboard: ESC key support, built-in focus trap
+ * - 2.1.2 No Keyboard Trap: Focus returns to trigger
+ * - 2.4.3 Focus Order: Focus trapped within modal (native behavior)
+ * - 4.1.2 Name, Role, Value: ARIA modal pattern
+ *
+ * @example
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Confirm Action"
+ * >
+ *   <p>Are you sure?</p>
+ * </Modal>
+ * ```
+ */
+export declare const Modal: React.FC<ModalProps>;
+//# sourceMappingURL=Modal.d.ts.map

package/dist/components/Modal/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAGhD,OAAO,aAAa,CAAA;AAEpB,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAA;IAEf;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;IAEnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAE9B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;IAElC;;OAEG;IACH,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CACnC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA2HtC,CAAA"}

package/dist/components/Modal/Modal.js

@@ -0,0 +1,108 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef } from 'react';
+import { useFocusReturn } from '../../hooks/useFocusReturn';
+import { Button } from '../Button/Button';
+import './Modal.css';
+/**
+ * Accessible Modal component using HTML5 dialog element
+ *
+ * Uses the native `<dialog>` element which provides:
+ * - Built-in focus management and focus trapping
+ * - Automatic body scroll prevention
+ * - Native backdrop overlay
+ * - ESC key handling (configurable)
+ *
+ * WCAG Compliance:
+ * - 2.1.1 Keyboard: ESC key support, built-in focus trap
+ * - 2.1.2 No Keyboard Trap: Focus returns to trigger
+ * - 2.4.3 Focus Order: Focus trapped within modal (native behavior)
+ * - 4.1.2 Name, Role, Value: ARIA modal pattern
+ *
+ * @example
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Confirm Action"
+ * >
+ *   <p>Are you sure?</p>
+ * </Modal>
+ * ```
+ */
+export const Modal = ({ isOpen, onClose, title, children, closeOnBackdropClick = true, closeOnEscape = true, size = 'md', returnFocusTo, }) => {
+    const dialogRef = useRef(null);
+    const contentRef = useRef(null);
+    const titleId = React.useId();
+    const descriptionId = React.useId();
+    // Return focus on close
+    useFocusReturn(isOpen, returnFocusTo);
+    // Handle dialog open/close
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        if (isOpen) {
+            // Show modal dialog
+            dialog.showModal();
+        }
+        else {
+            // Close dialog
+            dialog.close();
+        }
+        return () => {
+            // Cleanup: ensure dialog is closed when component unmounts
+            if (dialog.open) {
+                dialog.close();
+            }
+        };
+    }, [isOpen]);
+    // Handle backdrop clicks
+    // The ::backdrop pseudo-element doesn't bubble events to the dialog element,
+    // so we need to listen for clicks on the document and check if they're outside
+    // the dialog content area.
+    useEffect(() => {
+        if (!isOpen || !closeOnBackdropClick)
+            return;
+        const handleDocumentClick = (event) => {
+            const dialog = dialogRef.current;
+            const content = contentRef.current;
+            if (!dialog || !content)
+                return;
+            // Check if click target is outside the dialog content area
+            const target = event.target;
+            // If the click is not inside the content wrapper, it's a backdrop click
+            if (!content.contains(target)) {
+                // Verify click coordinates are outside content bounds for extra safety
+                const rect = content.getBoundingClientRect();
+                const clickX = event.clientX;
+                const clickY = event.clientY;
+                const isOutsideContent = clickX < rect.left ||
+                    clickX > rect.right ||
+                    clickY < rect.top ||
+                    clickY > rect.bottom;
+                if (isOutsideContent) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onClose();
+                }
+            }
+        };
+        // Use capture phase to catch events before they bubble
+        document.addEventListener('mousedown', handleDocumentClick, true);
+        return () => {
+            document.removeEventListener('mousedown', handleDocumentClick, true);
+        };
+    }, [isOpen, closeOnBackdropClick, onClose]);
+    // Handle cancel event (fires when ESC key is pressed)
+    const handleCancel = (event) => {
+        // Prevent default close behavior
+        event.preventDefault();
+        // Only close if closeOnEscape is enabled
+        if (closeOnEscape) {
+            onClose();
+        }
+    };
+    return (_jsx("dialog", { ref: dialogRef, className: `modal modal--${size} ${isOpen ? 'modal--open' : ''}`, "aria-labelledby": titleId, "aria-describedby": descriptionId, onCancel: handleCancel, children: _jsxs("div", { ref: contentRef, className: "modal-content-wrapper", children: [_jsxs("div", { className: "modal-header", children: [_jsx("h2", { id: titleId, className: "modal-title", children: title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close modal", className: "modal-close", children: "\u00D7" })] }), _jsx("div", { id: descriptionId, className: "modal-content", children: children })] }) }));
+};
+Modal.displayName = 'Modal';

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,3 @@
+export { Modal } from './Modal';
+export type { ModalProps } from './Modal';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/Modal/index.js

@@ -0,0 +1 @@
+export { Modal } from './Modal';

package/dist/components/Tabs/Tabs.css

@@ -0,0 +1,132 @@
+.tabs {
+  width: 100%;
+}
+
+.tabs--vertical {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-6, 1.5rem);
+}
+
+.tabs-list {
+  display: flex;
+  border-bottom: 1px solid var(--color-border-default, #bbbbbb);
+  gap: var(--spacing-1, 0.25rem);
+}
+
+.tabs--vertical .tabs-list {
+  flex-direction: column;
+  flex-shrink: 0;
+  min-width: 200px;
+  border-bottom: none;
+  border-right: none;
+  align-items: stretch;
+  gap: 0;
+}
+
+.tabs-tab {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+  font-size: var(--font-size-base, 1rem);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text-secondary, #525252);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: color var(--motion-duration-normal, 200ms) var(--motion-easing-ease-out, cubic-bezier(0, 0, 0.2, 1)),
+              border-color var(--motion-duration-normal, 200ms) var(--motion-easing-ease-out, cubic-bezier(0, 0, 0.2, 1)),
+              background-color var(--motion-duration-normal, 200ms) var(--motion-easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
+  white-space: nowrap;
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .tabs-tab {
+    transition: none;
+  }
+}
+
+.tabs--vertical .tabs-tab {
+  border-bottom: none;
+  border-right: none;
+  border-left: 3px solid transparent;
+  text-align: left;
+  justify-content: flex-start;
+  padding-left: var(--spacing-4, 1rem);
+  padding-right: var(--spacing-4, 1rem);
+  border-radius: 0;
+}
+
+.tabs-tab:hover:not(:disabled) {
+  color: var(--color-text-primary, #171717);
+}
+
+.tabs-tab--selected {
+  color: var(--color-primary-700, #0369a1);
+  border-bottom-color: var(--color-primary-700, #0369a1);
+}
+
+.tabs--vertical .tabs-tab--selected {
+  border-bottom-color: transparent;
+  border-left-color: var(--color-primary-700, #0369a1);
+  background-color: var(--color-neutral-50, #fafafa);
+  color: var(--color-primary-700, #0369a1);
+  font-weight: var(--font-weight-semibold, 600);
+}
+
+.tabs-tab:focus-visible {
+  outline: 2px solid var(--color-border-focus, #0ea5e9);
+  outline-offset: -2px;
+  border-radius: 0.25rem 0.25rem 0 0;
+}
+
+.tabs--vertical .tabs-tab:focus-visible {
+  border-radius: 0;
+  outline-offset: -2px;
+}
+
+.tabs--vertical .tabs-tab:hover:not(:disabled):not(.tabs-tab--selected) {
+  background-color: var(--color-neutral-50, #fafafa);
+  color: var(--color-text-primary, #171717);
+}
+
+.tabs-tab--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tabs-panel {
+  padding: var(--spacing-6, 1.5rem);
+  flex: 1;
+}
+
+.tabs--vertical .tabs-panel {
+  padding: 0;
+  flex: 1;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .tabs-list {
+    border-bottom-width: 2px;
+  }
+  
+  .tabs--vertical .tabs-list {
+    border-right-width: 2px;
+  }
+  
+  .tabs-tab--selected {
+    border-bottom-width: 3px;
+  }
+  
+  .tabs--vertical .tabs-tab--selected {
+    border-left-width: 4px;
+  }
+  
+  .tabs-tab:focus-visible {
+    outline-width: 3px;
+  }
+}
+

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import './Tabs.css';
+export interface TabItem {
+    id: string;
+    label: string;
+    content: React.ReactNode;
+    disabled?: boolean;
+}
+export interface TabsProps {
+    /**
+     * Tab items
+     */
+    items: TabItem[];
+    /**
+     * Default selected tab ID
+     */
+    defaultSelectedId?: string;
+    /**
+     * Controlled selected tab ID
+     */
+    selectedId?: string;
+    /**
+     * Callback when tab selection changes
+     */
+    onSelectionChange?: (id: string) => void;
+    /**
+     * Orientation of tabs
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Activation mode for tabs
+     * - 'automatic': Arrow keys both move focus and activate tabs immediately
+     * - 'manual': Arrow keys move focus only, Enter/Space activates the focused tab
+     * @default 'automatic'
+     */
+    activationMode?: 'automatic' | 'manual';
+    /**
+     * Label for the tab list (required for accessibility)
+     */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+/**
+ * Accessible Tabs component
+ *
+ * WCAG Compliance:
+ * - 2.1.1 Keyboard: Arrow key navigation, Home/End support
+ * - 4.1.2 Name, Role, Value: ARIA tabs pattern
+ * - 2.4.3 Focus Order: Proper focus management
+ *
+ * @example
+ * ```tsx
+ * <Tabs
+ *   items={[
+ *     { id: 'tab1', label: 'Tab 1', content: <div>Content 1</div> },
+ *     { id: 'tab2', label: 'Tab 2', content: <div>Content 2</div> },
+ *   ]}
+ *   aria-label="Settings tabs"
+ * />
+ * ```
+ */
+export declare const Tabs: React.FC<TabsProps>;
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/components/Tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAA;AAG5D,OAAO,YAAY,CAAA;AAEnB,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,KAAK,EAAE,OAAO,EAAE,CAAA;IAEhB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAE1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAExC;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAEvC;;;;;OAKG;IACH,cAAc,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAA;IAEvC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA0KpC,CAAA"}

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,134 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useRef } from 'react';
+import { isNavigationKey, isArrowKey } from '../../utils/keyboard';
+import { getCurrentAttributes } from '../../utils/aria';
+import './Tabs.css';
+/**
+ * Accessible Tabs component
+ *
+ * WCAG Compliance:
+ * - 2.1.1 Keyboard: Arrow key navigation, Home/End support
+ * - 4.1.2 Name, Role, Value: ARIA tabs pattern
+ * - 2.4.3 Focus Order: Proper focus management
+ *
+ * @example
+ * ```tsx
+ * <Tabs
+ *   items={[
+ *     { id: 'tab1', label: 'Tab 1', content: <div>Content 1</div> },
+ *     { id: 'tab2', label: 'Tab 2', content: <div>Content 2</div> },
+ *   ]}
+ *   aria-label="Settings tabs"
+ * />
+ * ```
+ */
+export const Tabs = ({ items, defaultSelectedId, selectedId: controlledSelectedId, onSelectionChange, orientation = 'horizontal', activationMode = 'automatic', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }) => {
+    const initialSelectedId = defaultSelectedId || items[0]?.id;
+    const [internalSelectedId, setInternalSelectedId] = useState(initialSelectedId);
+    const [focusedId, setFocusedId] = useState(initialSelectedId);
+    const tabRefs = useRef(new Map());
+    const selectedId = controlledSelectedId ?? internalSelectedId;
+    const selectedIndex = items.findIndex((item) => item.id === selectedId);
+    // In automatic mode, focused tab is always the selected tab
+    // In manual mode, focused tab can be different from selected tab
+    const effectiveFocusedId = activationMode === 'automatic' ? selectedId : (focusedId || selectedId);
+    const handleSelect = useCallback((id) => {
+        if (onSelectionChange) {
+            onSelectionChange(id);
+        }
+        else {
+            setInternalSelectedId(id);
+        }
+        // In manual mode, update focused tab when selecting
+        if (activationMode === 'manual') {
+            setFocusedId(id);
+        }
+    }, [onSelectionChange, activationMode]);
+    const handleKeyDown = useCallback((event, currentIndex) => {
+        const isHorizontal = orientation === 'horizontal';
+        let newIndex = currentIndex;
+        // Handle Enter/Space for manual activation
+        if (activationMode === 'manual' && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            const currentTab = items[currentIndex];
+            if (currentTab && !currentTab.disabled) {
+                handleSelect(currentTab.id);
+            }
+            return;
+        }
+        // Handle arrow keys and Home/End
+        if (isNavigationKey(event.key) || isArrowKey(event.key)) {
+            event.preventDefault();
+            switch (event.key) {
+                case 'Home':
+                    newIndex = 0;
+                    break;
+                case 'End':
+                    newIndex = items.length - 1;
+                    break;
+                case 'ArrowRight':
+                    if (isHorizontal) {
+                        newIndex = (currentIndex + 1) % items.length;
+                    }
+                    break;
+                case 'ArrowLeft':
+                    if (isHorizontal) {
+                        newIndex = (currentIndex - 1 + items.length) % items.length;
+                    }
+                    break;
+                case 'ArrowDown':
+                    if (!isHorizontal) {
+                        newIndex = (currentIndex + 1) % items.length;
+                    }
+                    break;
+                case 'ArrowUp':
+                    if (!isHorizontal) {
+                        newIndex = (currentIndex - 1 + items.length) % items.length;
+                    }
+                    break;
+            }
+            // Skip disabled tabs
+            while (items[newIndex]?.disabled && newIndex !== currentIndex) {
+                if (event.key === 'Home' || event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+                    newIndex = (newIndex + 1) % items.length;
+                }
+                else {
+                    newIndex = (newIndex - 1 + items.length) % items.length;
+                }
+            }
+            const newTab = items[newIndex];
+            if (newTab && !newTab.disabled) {
+                if (activationMode === 'automatic') {
+                    // Automatic: move focus and activate
+                    handleSelect(newTab.id);
+                    tabRefs.current.get(newTab.id)?.focus();
+                }
+                else {
+                    // Manual: move focus only
+                    setFocusedId(newTab.id);
+                    tabRefs.current.get(newTab.id)?.focus();
+                }
+            }
+        }
+    }, [items, orientation, activationMode, handleSelect]);
+    const selectedTab = items.find((item) => item.id === selectedId);
+    return (_jsxs("div", { className: `tabs tabs--${orientation}`, children: [_jsx("div", { className: "tabs-list", role: "tablist", "aria-orientation": orientation, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: items.map((item, index) => {
+                    const isSelected = item.id === selectedId;
+                    const isFocused = item.id === effectiveFocusedId;
+                    // In manual mode, focused tab should be focusable even if not selected
+                    // In automatic mode, only selected tab is focusable
+                    const tabIndex = activationMode === 'manual'
+                        ? (isFocused ? 0 : -1)
+                        : (isSelected ? 0 : -1);
+                    return (_jsx("button", { ref: (el) => {
+                            if (el) {
+                                tabRefs.current.set(item.id, el);
+                            }
+                            else {
+                                tabRefs.current.delete(item.id);
+                            }
+                        }, id: `tab-${item.id}`, role: "tab", "aria-controls": `tabpanel-${item.id}`, "aria-selected": isSelected, tabIndex: tabIndex, disabled: item.disabled, className: `tabs-tab ${isSelected ? 'tabs-tab--selected' : ''} ${item.disabled ? 'tabs-tab--disabled' : ''}`, onClick: () => !item.disabled && handleSelect(item.id), onKeyDown: (e) => handleKeyDown(e, index), onFocus: () => setFocusedId(item.id), ...getCurrentAttributes(isSelected ? 'page' : undefined), children: item.label }, item.id));
+                }) }), selectedTab && (_jsx("div", { id: `tabpanel-${selectedTab.id}`, role: "tabpanel", "aria-labelledby": `tab-${selectedTab.id}`, className: "tabs-panel", children: selectedTab.content }))] }));
+};
+Tabs.displayName = 'Tabs';

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,3 @@
+export { Tabs } from './Tabs';
+export type { TabsProps, TabItem } from './Tabs';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA"}

package/dist/components/Tabs/index.js

@@ -0,0 +1 @@
+export { Tabs } from './Tabs';

package/dist/components/Toast/Toast.css

@@ -0,0 +1,100 @@
+.toast {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-3, 0.75rem);
+  padding: var(--spacing-4, 1rem);
+  min-width: 20rem;
+  max-width: 32rem;
+  background-color: var(--color-background-default, #ffffff);
+  border: 1px solid var(--color-border-default, #bbbbbb);
+  border-radius: 0.375rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  animation: toast-slide-in var(--motion-duration-normal, 200ms) var(--motion-easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .toast {
+    animation: none;
+  }
+}
+
+@keyframes toast-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.toast-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.toast-message {
+  font-size: var(--font-size-base, 1rem);
+  /* WCAG 2.2 1.4.12 Text Spacing: Line height at least 1.5 times font size */
+  line-height: var(--line-height-normal, 1.5);
+  /* WCAG 2.2 1.4.12 Text Spacing: Letter spacing at least 0.12 times font size */
+  letter-spacing: calc(var(--font-size-base, 1rem) * 0.12);
+  /* WCAG 2.2 1.4.12 Text Spacing: Word spacing at least 0.16 times font size */
+  word-spacing: calc(var(--font-size-base, 1rem) * 0.16);
+  color: var(--color-text-primary, #171717);
+}
+
+/* WCAG 2.2 1.4.12 Text Spacing: Spacing following paragraphs at least 2 times font size */
+.toast-message p {
+  margin-top: 0;
+  margin-bottom: calc(var(--font-size-base, 1rem) * 2);
+}
+
+.toast-message p:last-child {
+  margin-bottom: 0;
+}
+
+.toast-dismiss {
+  flex-shrink: 0;
+  margin-left: auto;
+  font-size: var(--font-size-xl, 1.25rem);
+  line-height: 1;
+  padding: var(--spacing-1, 0.25rem);
+  min-width: auto;
+  width: 2rem;
+  height: 2rem;
+}
+
+/* Toast types */
+.toast--info {
+  border-left: 4px solid var(--color-primary-500, #0ea5e9);
+}
+
+.toast--success {
+  border-left: 4px solid var(--color-success-500, #22c55e);
+}
+
+.toast--warning {
+  border-left: 4px solid var(--color-warning-500, #f59e0b);
+}
+
+.toast--error {
+  border-left: 4px solid var(--color-error-500, #ef4444);
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .toast {
+    border-width: 2px;
+  }
+  
+  .toast--info,
+  .toast--success,
+  .toast--warning,
+  .toast--error {
+    border-left-width: 6px;
+  }
+}
+