Skip to content

v4.0.0
Compare
Choose a tag to compare
@github-actions github-actions released this 12 Feb 18:55
· 21 commits to main since this release
v4.0.0
5cb7dbe
This commit was created on github.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Customizability, Robustness & Modern Web

This major release focuses on making components more robust, customizable, and performant while improving accessibility and internationalization support. We also moved the package to our new Incluud organisation as part of the effort to streamline our development processes and enhance collaboration within the community. This transition allows us to better manage contributions, improve project visibility, and ensure a more cohesive approach to future updates and features.

🎯 Key Highlights

  • Modernized CSS architecture with logical properties and modern selectors
  • Enhanced accessibility and internationalization support
  • Improved performance through better browser APIs
  • Improved TypeScript support

⚠️ Breaking Changes

  • Removed is:global() styles to prevent style creep #90
  • Simplified class names and introduced :where() for lower specificity
  • Switched to logical properties for better RTL support
  • Migrated to HSL colors with light-dark() functions
  • Reduced client-side JavaScript in favor of browser APIs
  • Renamed SkipLinks to SkipLink

🎨 Design System Updates

  • Standardized component styling with consistent tokens
  • Improved dark mode support with light-dark() color system
  • Added prefers-reduced-motion support
  • Enhanced focus states and keyboard navigation

✨ New Features

  • Added Video component with YouTube embed support
  • Universal class prop support for all components
  • Improved i18n support through customizable text props
  • Enhanced slot system for better component composition

🔄 Component Updates

Accessibility & UX

  • Accordion: Added proper heading structure support
  • Breadcrumbs: Added icon-only support with screen reader text
  • Card: Now uses <article> instead of <div>
  • SkipLink: Added translatable text support
  • Notification: Switched to semantic <aside> with ARIA live regions

Enhanced Customization

  • Accordion: Added chevron variant with configurable positioning
  • Accordion: Added open prop for an initial open state for an item
  • Breadcrumbs: Added customizable separators
  • Card: Added meta information slot
  • DarkMode: Added support for custom icons
  • Modal: Improved styling and interaction patterns
  • Notification: Added Starlight-inspired color schemes
  • Pagination: Enhanced styling options

📚 Documentation

  • New documentation site at Accessible Astro Docs #75
  • Added migration guide from v3 to v4
  • Improved component examples and usage guidelines
Assets 2
Loading