v1.0.1 - First Stable 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.1 → 1.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