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
ordata-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 whenautoAccessibility
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 beclassList.contains
) that would crash when usingactionableClasses
Loading State Fixes
- Fixed:
toggleLoading
now preserves app-level disabled button states using marker attributedata-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