Components & ani.js

All 42 components follow the same conventions - BEM blocks under your prefix, state via .is-* classes:

Block:    .my-card
Element:  .my-card__body
Modifier: .my-card--flat
State:    .is-active / .is-open / .is-disabled

The exact copy-paste markup for every component you selected is in the ds-check.html that ships in your ZIP - rendered live with your tokens.

The library

Basics: Buttons, Links, Badge, Chip / tag (Pro), Keyboard key, Avatar (Pro), Divider, Spacer

Forms: Inputs & fields, Joined inputs (Pro)

Content & data: Card, Prose / article (Pro), Hero (Pro), Table, Stats (Pro), List group (Pro), Accordion (Pro), Timeline (Pro), Chat bubbles (Pro), Rating (Pro), Carousel (Pro), Empty state

Navigation: Tabs, Breadcrumb (Pro), Menu (Pro), Dropdown (Pro), Pagination (Pro), Steps (Pro)

Overlays: Modal (Pro), Drawer (Pro), Tooltip (Pro), Popover (Pro), Toast (Pro)

Feedback & status: Alerts, Announcement banner (Pro), Status dot, Indicator (Pro), Progress (Pro), Radial progress (Pro), Spinner (Pro), Loading dots, Skeleton (Pro)

ani.js - the optional 2 KB helper

• data-my-toggle="#target" toggles .is-open and keeps aria-expanded in sync; data-my-close closes the nearest open component. Esc, overlay-click and outside-click closing are handled.
• Modals and drawers get focus trapping, focus restore and body scroll-lock automatically.
• Tabs switch on click and Arrow keys (.is-active + aria-selected).
• Toasts with data-my-autodismiss close themselves (default 4s).
• Accordion, carousel, tooltip, rating and dropdown-on-focus work with zero JavaScript. Prefer React/Vue/htmx? Delete ani.js - the CSS only cares about the classes.

See them all live in the examples gallery, or build your own.