A11ySolutions Registry

Design tokens, focus indicators, typography scale, layout utilities, and animations. Includes WCAG 2.4.7 universal focus-visible rules and prefers-reduced-motion support.

Tailwind class merge utility (cn) combining clsx and tailwind-merge for conflict-free className composition.

A11ySolutions brand logo using CSS mask for monochrome rendering in primary color. Variants: full (logo + company name) and mark (logo icon only). Renders as link when href is provided.

Pill-shaped button with baked-in brand variants: default (green bg, white text, shadow, primary focus ring), secondary (white bg, green text), nav (bordered, for carousel/navigation controls), outline, ghost, destructive, and link. WCAG 2.4.7 compliant focus indicators per variant.

Embla-powered carousel with ARIA live region for screen reader slide announcements, keyboard arrow-key navigation, role=region with aria-roledescription, and customizable announceSlide callback. Uses nav-variant buttons for accessible previous/next controls.

Radix UI dropdown menu with keyboard navigation, checkbox/radio items, sub-menus, and label/separator support. Focus-visible items highlight with primary color. Extracted from SiteHeader navigation pattern.

Radix UI accordion with WAI-ARIA accordion pattern, focus-visible ring on triggers, expand/collapse arrow icons that toggle based on aria-expanded state, and animated content transitions.

Text input with variant border radius (pill default, lg for standard rounded). Accessible focus ring, aria-invalid error styling, and disabled state. WCAG 2.4.7 compliant focus indicator.

Radix UI select with keyboard navigation, scroll buttons, check indicator, and popper/item-aligned positioning. Supports accessible focus ring, aria-invalid error styling, and size variants. WCAG 2.4.7 compliant focus indicator.

Auto-sizing textarea with accessible focus ring, aria-invalid error styling, and field-sizing-content for dynamic height. WCAG 2.4.7 compliant focus indicator.

Radix UI dialog with focus trap, backdrop blur, sr-only close button label, and optional close button. Animated enter/exit transitions with accessible overlay.

Radix UI sheet (slide-over panel) with focus trap, sr-only close button label, four-side positioning, backdrop blur, and animated slide/fade transitions.

Pill-shaped badge with default (primary), secondary, destructive, outline, ghost, and link variants. Supports asChild pattern via Radix Slot for polymorphic rendering.

Inline anchor link with primary color, underline on hover, and accessible focus ring. Variants: default (text only) and withChevron (appends a right chevron icon). WCAG 2.4.7 compliant focus indicator.

Lightweight status badges with contrast-safe background/text pairs. Variants: error (red-50/red-700), success (primary-light/primary), warning (amber-50/amber-800), info (blue-50/blue-700). All meet WCAG AA 4.5:1 contrast.

Card container with header, footer, title, description, action, and content slots. Supports default and sm sizes with responsive padding via data-size attribute.

Windsurf AI skills for WCAG 2.1 AA accessibility — includes core skill definition, ARIA patterns reference, and per-component WCAG checklist. Framework-agnostic, installs to .windsurf/skills/accessibility/.