Docs · Reference
Changelog
All notable changes to astro-ui, following Keep a Changelog. The source of truth is astro-ui/CHANGELOG.md.
Added
- Foundation: semantic design tokens (
tokens.css), base styles (base.css),data-themelight/dark/system theming,cn()anduid()utilities, and root + per-component ESM subpath exports with no runtime dependencies. - 63 catalog components across 7 categories (80
.astrofiles including sub-components): 43 render pure server-side HTML and 20 add a small scoped script. - General (7): Button, ButtonGroup, Command, Carousel, Clipboard, Kbd, Link.
- Data display (10): Badge, Avatar, Attachment, Table, Progress, Bubble, Chart, Empty, Tag, Timeline.
- Layout (7): Card, AspectRatio, ScrollArea, Separator, Accordion, Collapsible, StickySurface.
- Feedback (6): Alert, Spinner, Skeleton, Toast, Banner, NotificationCenter.
- Forms (18): Autocomplete, Combobox, Label, Field, Input, InputGroup, Textarea, Select, Checkbox, Radio, Switch, Toggle, ToggleGroup, RadioGroup, Rating, Slider, DatePicker, TimePicker.
- Navigation (7): Tabs, Breadcrumb, Pagination, Stepper, Tree, Navbar, Sidebar.
- Overlay (8): Dialog, AlertDialog, Sheet, Tooltip, Popover, HoverCard, Lightbox, Menu.
- Native-first interactive behavior: Dialog, AlertDialog, and Sheet on
<dialog>; Accordion and Collapsible on<details>; Tabs, Menu, Tree, and Combobox with WAI-ARIA roles and scoped keyboard scripts. - Shared
--ui-control-*scale (height, inline padding, radius) used by Button, Input, Select, Textarea, and InputGroup so controls align on a row. - Missing semantic tokens:
--ui-card,--ui-backdrop,--ui-backdrop-strong,--ui-progress-stripe,--ui-shadow-color,--ui-rating-1…5,--ui-text-3xl,--ui-space-0-5,--ui-space-7, and--ui-transition-delay. - Docs site (
web/): component catalog, per-component pages (props, slots, accessibility, theming, JS cost), live demos, 25 composed blocks, token playground, and guides for theming, styling, RTL, events, and Tailwind. - Tests: Vitest unit and static component contracts, drift checks for tokens and prop vocabulary, Playwright interaction specs, and Chromium light/dark visual baselines.
- Release tooling:
gen-docs(registry → content markdown) andaudit-demo-ids(registry ↔ demo wiring check). - Repo files: README, CONTRIBUTING, SECURITY, LICENSE (MIT).
Changed
- The canonical brand color is Astro violet:
#881abdlight /#b845eddark, with hover#b845ed/#d06cf5;--ui-ringfollows the brand primary in both themes. - The semantic red prop value is
destructiveeverywhere; the--ui-error*token names are unchanged. - Button
shapeacceptsrounded | square | circle | pill(defaultrounded). - Component-private CSS variables use the
--aui-*prefix so they never collide with public--ui-*tokens. - Keyboard focus uses a
:focus-visibleoutline driven by the focus-ring tokens instead of abox-shadowring. - Every component declares
since: 0.1.0, the first public release.
Fixed
- Dialog, Lightbox, Sheet, and AlertDialog backdrops, Progress stripes, Carousel shadows, and Chart SVG shadows resolve through tokens instead of hard-coded colors.
- ScrollArea exposes a labelled
region; LightboxItem acceptscaptionsandcaptionsLangfor video tracks. - The docs build no longer warns about Astro
:global()selectors in the plain stylesheet.