Expandable Card
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { ExpandableCard } from "@corew500/ui/expandable-card"
<ExpandableCard>Content</ExpandableCard>Variants
expandableCardVariants
| Axis | Values | Default |
|---|---|---|
| variant | defaultoutline | default |
| size | smdefaultlg | default |
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| expanded | enum | — | Controlled expanded state |
| onExpandedChange | (expanded: boolean) => void | — | Callback when expanded state changes |
| defaultExpanded | enum | false | Default expanded state for uncontrolled usage |
| variant | enum | default | — |
| size | enum | default | — |
Accessibility
Keyboard Navigation
- - `ExpandableCardTrigger` contains an internal `<button>` with `aria-expanded` for keyboard and screen reader access.
- The wrapper div is not interactive itself; the overlay button (`absolute inset-0`) handles click/keyboard.
- Escape key closes the expanded view.
Focus Management
- Focus is trapped within expanded content.
- Focus returns to trigger on close.
Screen Readers
- Expanded content has `role="dialog"` and `aria-modal="true"` with `aria-labelledby` pointing to the title.
Localization
Translatable Content
- - All card content (title, description, body) should be translated.
- Close button has `aria-label="Close"` which should be localized.