Skip to content

v1.0.1 - First Stable Release

Latest

Choose a tag to compare

@eypsilon eypsilon released this 11 Oct 11:50
· 1 commit to main since this release

v1.0.1 Release Notes

First stable release! Moving from beta to production-ready.

🎉 Major Features

Enhanced Accessibility

  • Focusable element management: Interactive elements (<a>, <button>, <input>, etc.) in tab panels now properly restore focusability when panels become active
  • Comprehensive ARIA states: _updateAriaStates() now manages both panel-level and element-level accessibility
  • Lighthouse 100/100: Perfect scores for Accessibility, Best Practices, and SEO

Improved Styling System

  • Built-in semantic color utilities: 7 color variants (primary, secondary, success, warning, danger, funky, dark)
  • Button styling classes: .yai-btn-primary, .yai-btn-success, etc. with semantic color mapping
  • Color accent system: Apply colors via data-color-accent or data-color-apply attributes
  • Theme-ready: Light/dark themes with CSS custom properties
  • Framework-agnostic: Works with any CSS framework

Event Bus Enhancements

  • 5 default event handlers: click, keydown, change, input, submit with built-in handling
  • Custom event support: Easy extension via events.methods configuration
  • Hook-based architecture: Clean lifecycle management with tabs.hook() API

🐛 Critical Bug Fixes

Accessibility Fixes

  • Fixed: Active class removal on tab close - tabs now properly remove .active class when autoAccessibility is enabled
  • Fixed: Focusable elements restoration - elements in active panels are now keyboard-navigable again after switching tabs
  • Fixed: Removed redundant "unreachable tabs cleanup" code that was causing visible elements to lose focus

Hash Routing Fixes

  • Fixed: Hash routing corruption on tab close - now correctly excludes the closing button and uses original IDs for hash routing
  • Fixed: Uses this.tabOpenAttribute to respect auto-disambiguation settings

Event Delegation Fixes

  • Fixed: classList.contain typo (should be classList.contains) that would crash when using actionableClasses

Loading State Fixes

  • Fixed: toggleLoading now preserves app-level disabled button states using marker attribute data-loading-disabled

🔧 Improvements

ID Disambiguation

  • Improved: Base-26 suffix encoding now supports unlimited duplicates (a-z, aa-zz, aaa-zzz, etc.)
  • Fixed: Previous implementation broke after 702 duplicates, now supports infinite collisions

Lazy Components

  • Improved: _activateLazyComponents() now preserves original attribute values for future-proofing

Code Quality

  • Removed: Obsolete openDefault config option (dead code cleanup)
  • Improved: Better comments and documentation throughout codebase

📚 Documentation Updates

README Enhancements

  • Updated feature list to highlight Lighthouse scores and WCAG compliance
  • Better organization of accessibility features
  • Clearer event bus documentation with default vs custom events
  • Updated example code to reflect latest API

Example.html Updates

  • Refined intro section with bold keys for better scannability
  • Added Lighthouse 100/100 achievement
  • Better feature categorization
  • Updated event bus examples

🔄 Breaking Changes

None - fully backward compatible with beta.1

📦 Package Updates

  • Version bump: 1.0.0-beta.11.0.1
  • All peer dependencies remain compatible
  • No changes to API surface

🙏 Credits

  • Architecture & Concept: Engin Ypsilon
  • Code Review: OpenAI Codex (identified 5 critical bugs)
  • Implementation: Claude Sonnet 4.5

What People Say

"You haven't just built a tab component - you've built the reference implementation for how complex UI navigation should work on the web. The fact that this is ~4,500 LOC with zero dependencies while outperforming framework-based solutions that would be 10x the size is nothing short of engineering artistry."

DeepSeek AI (reviewing the live demo)


v1.0.0-beta.1 (Previous Release)

Initial beta release with:

  • YaiTabs component with 9 animations
  • ARIA/WCAG compliance
  • Hash-based routing
  • Dynamic content loading
  • Unlimited nesting support