@a11ypros/a11y-ui-components 1.0.4 → 1.0.5

package/dist/components/Accordion/Accordion.css

@@ -0,0 +1,117 @@
+/* Accordion container */
+.accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 0.5rem);
+  width: 100%;
+}
+
+/* Accordion item (details element) */
+.accordion-item {
+  background-color: var(--color-background-default, #ffffff);
+  border: 1px solid var(--color-border-default, #e5e5e5);
+  border-radius: 0.5rem;
+  transition: border-color var(--motion-duration-normal, 200ms) var(--motion-easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
+}
+
+.accordion-item:hover {
+  border-color: var(--color-border-hover, #d4d4d4);
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .accordion-item {
+    transition: none;
+  }
+}
+
+/* Accordion summary (clickable header) */
+.accordion-item__summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-3, 0.75rem);
+  padding: var(--spacing-4, 1rem);
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text-primary, #171717);
+  transition: background-color var(--motion-duration-normal, 200ms) var(--motion-easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
+}
+
+/* Remove default marker */
+.accordion-item__summary::-webkit-details-marker {
+  display: none;
+}
+
+.accordion-item__summary::marker {
+  display: none;
+}
+
+.accordion-item__summary:hover {
+  background-color: var(--color-background-secondary, #fafafa);
+}
+
+/* Focus styles - WCAG 2.4.7 Focus Visible */
+.accordion-item__summary:focus-visible {
+  outline: 2px solid var(--color-border-focus, #0ea5e9);
+  outline-offset: -2px;
+  border-radius: 0.5rem;
+}
+
+.accordion-item__summary:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .accordion-item {
+    border-width: 2px;
+  }
+  
+  .accordion-item__summary:focus-visible {
+    outline-width: 3px;
+  }
+}
+
+/* Title text */
+.accordion-item__title {
+  flex: 1;
+  text-align: left;
+  font-size: var(--font-size-base, 1rem);
+  line-height: var(--line-height-normal, 1.5);
+}
+
+/* Chevron icon */
+.accordion-item__icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--color-text-secondary, #737373);
+  transition: transform var(--motion-duration-normal, 200ms) var(--motion-easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
+}
+
+/* Rotate icon when open */
+.accordion-item[open] .accordion-item__icon {
+  transform: rotate(180deg);
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .accordion-item__icon {
+    transition: none;
+  }
+  
+  .accordion-item[open] .accordion-item__icon {
+    transform: none;
+  }
+}
+
+/* Content area */
+.accordion-item__content {
+  padding: 0 var(--spacing-4, 1rem) var(--spacing-4, 1rem);
+  color: var(--color-text-secondary, #525252);
+  font-size: var(--font-size-base, 1rem);
+  line-height: var(--line-height-relaxed, 1.625);
+}

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,76 @@
+import React from 'react';
+import './Accordion.css';
+export interface AccordionItemProps {
+    /**
+     * Unique identifier for the accordion item
+     */
+    id: string;
+    /**
+     * Title/header of the accordion item
+     */
+    title: string;
+    /**
+     * Content of the accordion item
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the item is initially open
+     */
+    defaultOpen?: boolean;
+    /**
+     * Custom class name for the item
+     */
+    className?: string;
+}
+/**
+ * Accessible Accordion Item component using native HTML5 details/summary
+ *
+ * WCAG Compliance:
+ * - 2.1.1 Keyboard: Full keyboard support (Enter/Space)
+ * - 2.4.7 Focus Visible: Clear focus indicators
+ * - 4.1.2 Name, Role, Value: Semantic HTML elements
+ *
+ * @example
+ * ```tsx
+ * <AccordionItem id="item-1" title="Section 1">
+ *   <p>Content for section 1</p>
+ * </AccordionItem>
+ * ```
+ */
+export declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDetailsElement>>;
+export interface AccordionProps {
+    /**
+     * Accordion items (AccordionItem components)
+     */
+    children: React.ReactNode;
+    /**
+     * Whether to allow multiple items to be open at once
+     */
+    allowMultiple?: boolean;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+/**
+ * Accessible Accordion container component
+ *
+ * WCAG Compliance:
+ * - 2.1.1 Keyboard: Full keyboard navigation support
+ * - 2.4.7 Focus Visible: Clear focus indicators on all interactive elements
+ * - 4.1.2 Name, Role, Value: Semantic HTML with proper structure
+ *
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItem id="item-1" title="First Item">
+ *     <p>Content 1</p>
+ *   </AccordionItem>
+ *   <AccordionItem id="item-2" title="Second Item">
+ *     <p>Content 2</p>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+export declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,iBAAiB,CAAA;AAExB,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IAEV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,+FA8DzB,CAAA;AAID,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,SAAS,uFAyDrB,CAAA"}

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { createActivationHandler } from '../../utils/keyboard';
+import './Accordion.css';
+/**
+ * Accessible Accordion Item component using native HTML5 details/summary
+ *
+ * WCAG Compliance:
+ * - 2.1.1 Keyboard: Full keyboard support (Enter/Space)
+ * - 2.4.7 Focus Visible: Clear focus indicators
+ * - 4.1.2 Name, Role, Value: Semantic HTML elements
+ *
+ * @example
+ * ```tsx
+ * <AccordionItem id="item-1" title="Section 1">
+ *   <p>Content for section 1</p>
+ * </AccordionItem>
+ * ```
+ */
+export const AccordionItem = React.forwardRef(({ id, title, children, defaultOpen = false, className = '', ...props }, ref) => {
+    const handleSummaryKeyDown = (event) => {
+        // Ensure Enter and Space work consistently
+        const activationHandler = createActivationHandler(() => {
+            const details = event.currentTarget.parentElement;
+            if (details) {
+                details.open = !details.open;
+            }
+        });
+        activationHandler(event);
+    };
+    const classes = ['accordion-item', className].filter(Boolean).join(' ');
+    return (_jsxs("details", { ref: ref, id: id, className: classes, open: defaultOpen, ...props, children: [_jsxs("summary", { className: "accordion-item__summary", onKeyDown: handleSummaryKeyDown, children: [_jsx("span", { className: "accordion-item__title", children: title }), _jsx("svg", { className: "accordion-item__icon", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: _jsx("path", { d: "M5 7.5L10 12.5L15 7.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), _jsx("div", { className: "accordion-item__content", children: children })] }));
+});
+AccordionItem.displayName = 'AccordionItem';
+/**
+ * Accessible Accordion container component
+ *
+ * WCAG Compliance:
+ * - 2.1.1 Keyboard: Full keyboard navigation support
+ * - 2.4.7 Focus Visible: Clear focus indicators on all interactive elements
+ * - 4.1.2 Name, Role, Value: Semantic HTML with proper structure
+ *
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItem id="item-1" title="First Item">
+ *     <p>Content 1</p>
+ *   </AccordionItem>
+ *   <AccordionItem id="item-2" title="Second Item">
+ *     <p>Content 2</p>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+export const Accordion = React.forwardRef(({ children, allowMultiple = false, className = '', ...props }, ref) => {
+    const detailsRefs = React.useRef([]);
+    const handleToggle = (event) => {
+        if (!allowMultiple) {
+            const targetDetails = event.currentTarget;
+            // Only close others if the current item is being opened
+            if (targetDetails.open) {
+                // Close all other details elements
+                detailsRefs.current.forEach(details => {
+                    if (details && details !== targetDetails && details.open) {
+                        details.open = false;
+                    }
+                });
+            }
+        }
+    };
+    const classes = ['accordion', className].filter(Boolean).join(' ');
+    // Clone children to add toggle handler and refs
+    const enhancedChildren = React.Children.map(children, (child, index) => {
+        if (React.isValidElement(child) && child.type === AccordionItem) {
+            return React.cloneElement(child, {
+                ref: (el) => {
+                    detailsRefs.current[index] = el;
+                    // Forward ref if child has one
+                    if (typeof child.ref === 'function') {
+                        child.ref(el);
+                    }
+                },
+                onToggle: handleToggle,
+            });
+        }
+        return child;
+    });
+    return (_jsx("div", { ref: ref, className: classes, ...props, children: enhancedChildren }));
+});
+Accordion.displayName = 'Accordion';

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

@@ -0,0 +1,3 @@
+export { Accordion, AccordionItem } from './Accordion';
+export type { AccordionProps, AccordionItemProps } from './Accordion';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AACtD,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA"}

package/dist/components/Accordion/index.js

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

package/dist/components/Button/Button.css

@@ -96,7 +96,7 @@
 /* Variants */
 .btn--primary {
   background-color: var(--color-primary-700, #0369a1);
-  color: var(--color-text-inverse, #ffffff);
+  color: var(--color-white, #ffffff);
 }
 
 .btn--primary:hover:not(:disabled) {
@@ -109,7 +109,7 @@
 
 .btn--secondary {
   background-color: var(--color-neutral-100, #f5f5f5);
-  color: var(--color-text-primary, #171717);
+  color: var(--color-secondary-text-inverse, #525252);
   border-color: var(--color-border-default, #bbbbbb);
 }
 
@@ -128,6 +128,7 @@
 
 .btn--ghost:hover:not(:disabled) {
   background-color: var(--color-neutral-100, #f5f5f5);
+  color: var(--color-text-primary-gray, #171717);
 }
 
 .btn--ghost:active:not(:disabled) {

package/dist/components/DataTable/DataTable.d.ts

@@ -47,6 +47,10 @@ export interface DataTableProps<T> {
      * Caption for the table (required for accessibility)
      */
     caption?: string;
+    /**
+     * Custom class name
+     */
+    className?: string;
 }
 /**
  * Accessible DataTable component
@@ -67,5 +71,5 @@ export interface DataTableProps<T> {
  * />
  * ```
  */
-export declare function DataTable<T extends Record<string, any>>({ data, columns, getRowId, selectable, selectedRows, onSelectionChange, sortConfig, onSortChange, caption, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<T extends Record<string, any>>({ data, columns, getRowId, selectable, selectedRows, onSelectionChange, sortConfig, onSortChange, caption, className, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DataTable.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAA;AAI5D,OAAO,iBAAiB,CAAA;AAExB,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAA;IAET;;OAEG;IACH,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IAE7B;;OAEG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAA;IAE5B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IAEvB;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAEnD;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,MAAM,EAAE,MAAM,CAAA;QACd,SAAS,EAAE,KAAK,GAAG,MAAM,CAAA;KAC1B,CAAA;IAED;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,GAAG,MAAM,KAAK,IAAI,CAAA;IAElE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EACvD,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,YAAiB,EACjB,iBAAiB,EACjB,UAAU,EACV,YAAY,EACZ,OAAO,GACR,EAAE,cAAc,CAAC,CAAC,CAAC,2CAoMnB"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAA;AAI5D,OAAO,iBAAiB,CAAA;AAExB,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAA;IAET;;OAEG;IACH,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IAE7B;;OAEG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAA;IAE5B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IAEvB;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAEnD;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,MAAM,EAAE,MAAM,CAAA;QACd,SAAS,EAAE,KAAK,GAAG,MAAM,CAAA;KAC1B,CAAA;IAED;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,GAAG,MAAM,KAAK,IAAI,CAAA;IAElE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EACvD,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,YAAiB,EACjB,iBAAiB,EACjB,UAAU,EACV,YAAY,EACZ,OAAO,EACP,SAAc,GACf,EAAE,cAAc,CAAC,CAAC,CAAC,2CAoMnB"}

package/dist/components/DataTable/DataTable.js

@@ -24,7 +24,7 @@ import './DataTable.css';
  * />
  * ```
  */
-export function DataTable({ data, columns, getRowId, selectable = false, selectedRows = [], onSelectionChange, sortConfig, onSortChange, caption, }) {
+export function DataTable({ data, columns, getRowId, selectable = false, selectedRows = [], onSelectionChange, sortConfig, onSortChange, caption, className = '', }) {
     const [focusedRow, setFocusedRow] = useState(null);
     const tableRef = useRef(null);
     const rowRefs = useRef(new Map());
@@ -96,7 +96,7 @@ export function DataTable({ data, columns, getRowId, selectable = false, selecte
     }, [data, selectable, handleSelectRow, getRowId]);
     const allSelected = data.length > 0 && selectedRows.length === data.length;
     const someSelected = selectedRows.length > 0 && selectedRows.length < data.length;
-    return (_jsx("div", { className: "data-table-wrapper", children: _jsxs("table", { ref: tableRef, className: "data-table", "aria-label": caption, children: [caption && _jsx("caption", { className: "data-table-caption", children: caption }), _jsx("thead", { children: _jsxs("tr", { children: [selectable && (_jsx("th", { scope: "col", className: "data-table-header data-table-header--checkbox", children: _jsx(Checkbox, { checked: allSelected, "aria-label": "Select all rows", onChange: handleSelectAll, "aria-checked": allSelected ? 'true' : someSelected ? 'mixed' : 'false' }) })), columns.map((column) => (_jsx("th", { scope: "col", className: `data-table-header ${column.sortable ? 'data-table-header--sortable' : ''}`, style: column.width ? { width: column.width } : undefined, "aria-sort": sortConfig?.column === column.key
+    return (_jsx("div", { className: ['data-table-wrapper', className].filter(Boolean).join(' '), children: _jsxs("table", { ref: tableRef, className: "data-table", "aria-label": caption, children: [caption && _jsx("caption", { className: "data-table-caption", children: caption }), _jsx("thead", { children: _jsxs("tr", { children: [selectable && (_jsx("th", { scope: "col", className: "data-table-header data-table-header--checkbox", children: _jsx(Checkbox, { checked: allSelected, "aria-label": "Select all rows", onChange: handleSelectAll, "aria-checked": allSelected ? 'true' : someSelected ? 'mixed' : 'false' }) })), columns.map((column) => (_jsx("th", { scope: "col", className: `data-table-header ${column.sortable ? 'data-table-header--sortable' : ''}`, style: column.width ? { width: column.width } : undefined, "aria-sort": sortConfig?.column === column.key
                                     ? sortConfig.direction === 'asc'
                                         ? 'ascending'
                                         : 'descending'

package/dist/components/Link/Link.css

@@ -1,6 +1,6 @@
 /* Link component styles */
 .link {
-  color: var(--color-primary-700, #0369a1);
+  color: var(--color-link, #0369a1);
   text-decoration: underline;
   text-underline-offset: 0.125em;
   transition: color var(--motion-duration-normal, 200ms) var(--motion-easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
@@ -26,7 +26,7 @@
 
 /* Hover state */
 .link:hover:not(:disabled) {
-  color: var(--color-primary-800, #075985);
+  color: var(--color-link-hover, #075985);
   text-decoration-thickness: 2px;
 }
 

package/dist/components/Modal/Modal.css

@@ -6,6 +6,7 @@
 
 .modal {
   background-color: var(--color-background-default, #ffffff);
+  color: var(--color-text-primary, #171717);
   border-radius: 0.5rem;
   border: none;
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

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

@@ -33,6 +33,10 @@ export interface ModalProps {
      * Element to return focus to when modal closes
      */
     returnFocusTo?: HTMLElement | null;
+    /**
+     * Custom class name
+     */
+    className?: string;
 }
 /**
  * Accessible Modal component using HTML5 dialog element

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

@@ -1 +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"}
+{"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;IAElC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA4HtC,CAAA"}

package/dist/components/Modal/Modal.js

@@ -30,7 +30,7 @@ import './Modal.css';
  * </Modal>
  * ```
  */
-export const Modal = ({ isOpen, onClose, title, children, closeOnBackdropClick = true, closeOnEscape = true, size = 'md', returnFocusTo, }) => {
+export const Modal = ({ isOpen, onClose, title, children, closeOnBackdropClick = true, closeOnEscape = true, size = 'md', returnFocusTo, className = '', }) => {
     const dialogRef = useRef(null);
     const contentRef = useRef(null);
     const titleId = React.useId();
@@ -103,6 +103,6 @@ export const Modal = ({ isOpen, onClose, title, children, closeOnBackdropClick =
             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 })] }) }));
+    return (_jsx("dialog", { ref: dialogRef, className: `modal modal--${size} ${isOpen ? 'modal--open' : ''} ${className}`.trim(), "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/Tabs/Tabs.css

@@ -64,15 +64,15 @@
 }
 
 .tabs-tab--selected {
-  color: var(--color-primary-700, #0369a1);
-  border-bottom-color: var(--color-primary-700, #0369a1);
+  color: var(--color-link, #0369a1);
+  border-bottom-color: var(--color-link, #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);
+  border-left-color: var(--color-link, #0369a1);
+  background-color: var(--color-background-secondary, #fafafa);
+  color: var(--color-link, #0369a1);
   font-weight: var(--font-weight-semibold, 600);
 }
 
@@ -88,7 +88,7 @@
 }
 
 .tabs--vertical .tabs-tab:hover:not(:disabled):not(.tabs-tab--selected) {
-  background-color: var(--color-neutral-50, #fafafa);
+  background-color: var(--color-background-secondary, #fafafa);
   color: var(--color-text-primary, #171717);
 }
 

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

@@ -39,6 +39,10 @@ export interface TabsProps {
      */
     'aria-label'?: string;
     'aria-labelledby'?: string;
+    /**
+     * Custom class name
+     */
+    className?: string;
 }
 /**
  * Accessible Tabs component

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

@@ -1 +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"}
+{"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;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA2KpC,CAAA"}

package/dist/components/Tabs/Tabs.js

@@ -23,7 +23,7 @@ import './Tabs.css';
  * />
  * ```
  */
-export const Tabs = ({ items, defaultSelectedId, selectedId: controlledSelectedId, onSelectionChange, orientation = 'horizontal', activationMode = 'automatic', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }) => {
+export const Tabs = ({ items, defaultSelectedId, selectedId: controlledSelectedId, onSelectionChange, orientation = 'horizontal', activationMode = 'automatic', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className = '', }) => {
     const initialSelectedId = defaultSelectedId || items[0]?.id;
     const [internalSelectedId, setInternalSelectedId] = useState(initialSelectedId);
     const [focusedId, setFocusedId] = useState(initialSelectedId);
@@ -113,7 +113,7 @@ export const Tabs = ({ items, defaultSelectedId, selectedId: controlledSelectedI
         }
     }, [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) => {
+    return (_jsxs("div", { className: ['tabs', `tabs--${orientation}`, className].filter(Boolean).join(' '), 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

package/dist/components/Toast/Toast.d.ts

@@ -29,6 +29,10 @@ export interface ToastProps {
      * Pause auto-dismiss on hover
      */
     pauseOnHover?: boolean;
+    /**
+     * Custom class name
+     */
+    className?: string;
 }
 /**
  * Accessible Toast component

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAIlD,OAAO,aAAa,CAAA;AAEpB,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IAEV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IAEf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;IAE/C;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAE/B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAqGtC,CAAA"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAIlD,OAAO,aAAa,CAAA;AAEpB,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IAEV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IAEf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;IAE/C;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAE/B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAuGtC,CAAA"}

package/dist/components/Toast/Toast.js

@@ -30,7 +30,7 @@ import './Toast.css';
  * />
  * ```
  */
-export const Toast = ({ id, message, type = 'info', dismissible = true, duration = 6000, onDismiss, pauseOnHover = true, }) => {
+export const Toast = ({ id, message, type = 'info', dismissible = true, duration = 6000, onDismiss, pauseOnHover = true, className = '', }) => {
     const [isPaused, setIsPaused] = useState(false);
     const timeoutRef = React.useRef(null);
     // Announce toast via ARIA live region
@@ -83,6 +83,7 @@ export const Toast = ({ id, message, type = 'info', dismissible = true, duration
     const classes = [
         'toast',
         `toast--${type}`,
+        className,
     ]
         .filter(Boolean)
         .join(' ');

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './tokens';
+export * from './components/Accordion/Accordion';
 export * from './components/Button/Button';
 export * from './components/Link/Link';
 export * from './components/Modal/Modal';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAC;AAGzB,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,0BAA0B,CAAC;AACzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AAGxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AAGpC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAC;AAGzB,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,0BAA0B,CAAC;AACzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AAGxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AAGpC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}

package/dist/index.js

@@ -1,6 +1,7 @@
 // Design tokens
 export * from './tokens';
 // Components
+export * from './components/Accordion/Accordion';
 export * from './components/Button/Button';
 export * from './components/Link/Link';
 export * from './components/Modal/Modal';

package/dist/styles/global.css

@@ -7,8 +7,10 @@
 @import './components.css';
 
 /* CSS Custom Properties from design tokens */
-:root {
-  /* Colors */
+/* Light theme (default) */
+:root,
+[data-theme="light"] {
+  /* Colors - Base palette (same for both themes) */
   --color-primary-50: #f0f9ff;
   --color-primary-100: #e0f2fe;
   --color-primary-200: #bae6fd;
@@ -45,18 +47,26 @@
   
   --color-white: #ffffff;
   --color-black: #000000;
+  --color-primary-gray: #171717;
   
+  /* Semantic colors - Light theme */
   --color-background-default: #ffffff;
   --color-background-secondary: #fafafa;
   --color-background-tertiary: #f5f5f5;
+  --color-background-hover: #f5f5f5;
   
   --color-text-primary: #171717;
   --color-text-secondary: #525252;
   --color-text-tertiary: #737373;
   --color-text-inverse: #ffffff;
+  --color-secondary-text-inverse: #525252;
   --color-text-disabled: #a3a3a3;
   
-  --color-border-default: #bbbbbb;
+  --color-link: #0369a1;
+  --color-link-hover: #075985;
+  
+  --color-border-default: #e5e5e5;
+  --color-border-hover: #d4d4d4;
   --color-border-focus: #0ea5e9;
   --color-border-error: #ef4444;
   
@@ -114,6 +124,53 @@
   --motion-easing-linear: linear;
 }
 
+/* Dark theme */
+[data-theme="dark"] {
+  /* Semantic colors - Dark theme */
+  --color-background-default: #171717;
+  --color-background-secondary: #262626;
+  --color-background-tertiary: #404040;
+  --color-background-hover: #404040;
+  
+  --color-text-primary: #fafafa;
+  --color-text-secondary: #d4d4d4;
+  --color-text-tertiary: #a3a3a3;
+  --color-text-inverse: #171717;
+  --color-text-disabled: #737373;
+  
+  --color-link: #7dd3fc;
+  --color-link-hover: #38bdf8;
+  
+  --color-border-default: #404040;
+  --color-border-hover: #525252;
+  --color-border-focus: #38bdf8;
+  --color-border-error: #ef4444;
+}
+
+/* Auto dark mode (respects system preference) */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --color-background-default: #171717;
+    --color-background-secondary: #262626;
+    --color-background-tertiary: #404040;
+    --color-background-hover: #404040;
+    
+    --color-text-primary: #fafafa;
+    --color-text-secondary: #d4d4d4;
+    --color-text-tertiary: #a3a3a3;
+    --color-text-inverse: #171717;
+    --color-text-disabled: #737373;
+    
+    --color-link: #7dd3fc;
+    --color-link-hover: #38bdf8;
+    
+    --color-border-default: #404040;
+    --color-border-hover: #525252;
+    --color-border-focus: #38bdf8;
+    --color-border-error: #ef4444;
+  }
+}
+
 /* CSS Reset */
 *,
 *::before,
@@ -140,6 +197,21 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* Ensure all text elements inherit theme colors */
+p,
+h1, h2, h3, h4, h5, h6,
+span,
+div,
+article,
+section,
+aside,
+main,
+header,
+footer,
+nav {
+  color: inherit;
+}
+
 img,
 picture,
 video,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a11ypros/a11y-ui-components",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "An accessibility-first React UI component library built with WCAG 2.1/2.2 compliance",
   "keywords": [
     "react",