Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 51 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,57 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [2.1.1] - 2026-03-07

### Fixed
- **Memory Leak**: Fixed carousel autoplay infinite interval leak by properly clearing intervals on destroy
- **Modal Scroll Lock**: Improved scroll locking with scrollbar width compensation
- **Dropdown Detection**: Enhanced outside click detection for more reliable dropdown closing
- **Modal Backdrop**: Fixed backdrop click detection to prevent accidental modal closing
- **Tooltip Management**: Improved tooltip visibility toggling with centralized hide function

### Added
- **Carousel Enhancements**:
- Functional carousel indicators/pagination system
- Touch/swipe gesture support for mobile devices
- Auto-pause carousel on hover, resume on mouse leave
- `carousel:change` custom event on slide transitions
- Indicator clicking to jump to specific slides

- **Dropdown Improvements**:
- Keyboard navigation with Arrow Up/Down keys
- Enter/Space key support for item selection
- Auto-focus first item when dropdown opens
- Better active dropdown state tracking

- **Tab Enhancements**:
- Keyboard navigation with Arrow keys
- Smooth scroll into view for tab content
- `tabs:change` custom event on tab switching

- **Modal Improvements**:
- Scroll position restoration on modal close
- `modal:open` and `modal:close` custom events
- Better focus management within modals

- **Toast Notifications**:
- Proper ARIA attributes for accessibility
- `toast:open` and `toast:close` custom events

- **API Methods**:
- `closeAllDropdowns()`: Programmatically close all dropdowns
- `hideAllTooltips()`: Programmatically hide all tooltips
- `destroy()`: Cleanup method for memory management
- Global `window.zyroxCSS` instance access

### Enhanced
- **Accessibility**: Improved ARIA attributes and focus management across all components
- **UI Animations**: Enhanced transitions with better cubic-bezier timing (200ms for dropdowns, 500ms for carousel)
- **Carousel Controls**: Improved button states and indicator styling with animation on active
- **Focus States**: Better visual feedback with outline styling for keyboard navigation
- **Dropdown Transitions**: Smoother animations and better state management
- **Modal Animations**: Enhanced backdrop blur effect and improved timing

## [2.1.0] - 2026-03-06

### Added
Expand Down
153 changes: 153 additions & 0 deletions changelogs/v2.1.1.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
# ZyroxCSS v2.1.1 - Bug Fixes & Enhancement Release

**Release Date**: March 7, 2026
**Status**: Stable & Production Ready
**Type**: Patch Release

---

## 🐛 Bug Fixes

### JavaScript Components
- **Memory Leak Fix**: Fixed carousel infinite loop memory leak by properly managing and clearing autoplay intervals
- **Modal Scroll Lock**: Improved body scroll locking with proper padding compensation for scrollbar width
- **Dropdown Detection**: Enhanced outside click detection for more reliable dropdown closing
- **Modal Backdrop**: Fixed backdrop click detection to prevent closing when clicking on modal content
- **Tooltip Management**: Improved tooltip visibility toggling with centralized hide function

### Accessibility Improvements
- Added proper ARIA attributes to interactive elements
- Improved focus management for keyboard navigation
- Better focus visibility on carousel indicators and controls
- Enhanced screen reader announcements for toast notifications

---

## ✨ New Features

### JavaScript Enhancements

#### Carousel Improvements
- **Carousel Indicators**: Fully functional carousel indicators/pagination system
- **Touch/Swipe Support**: Added swipe gesture support for mobile devices
- **Indicator Linking**: Click carousel indicators to jump to specific slides
- **Autoplay Control**: Carousel pauses on hover and resumes on mouse leave
- **Custom Events**: Carousel emits `carousel:change` event on slide transitions

#### Dropdown Enhancements
- **Keyboard Navigation**: Arrow keys (Up/Down) to navigate dropdown items
- **Enter/Space Support**: Press Enter or Space to select dropdown items
- **Focus Management**: Auto-focus first item when dropdown opens
- **State Management**: Better active dropdown tracking

#### Tab Improvements
- **Keyboard Navigation**: Use Arrow keys (Up/Down/Left/Right) to switch between tabs
- **Smooth Scrolling**: Tab content smoothly scrolls into view when activated
- **Custom Events**: Tabs emit `tabs:change` event on tab switching

#### Modal Enhancements
- **Scroll Position Restoration**: Remembers and restores scroll position when modal closes
- **Custom Events**: Modal emits `modal:open` and `modal:close` events
- **Focus Trapping**: Better focus management within modals

#### Toast Improvements
- **ARIA Attributes**: Proper accessibility attributes for toast notifications
- **Custom Events**: Emit `toast:open` and `toast:close` events
- **Faster Animations**: Improved animation timing for better UX

#### Alert Enhancements
- **Smooth Dismissal**: Enhanced alert close animation with slide-out effect
- **Custom Events**: Emit `alert:close` event on dismissal

### API Improvements
```javascript
// Instance is now available globally
window.zyroxCSS // Access the initialized ZyroxCSS instance

// New destroy method for cleanup
zyroxCSS.destroy()

// Close all dropdowns programmatically
zyroxCSS.closeAllDropdowns()

// Hide all tooltips programmatically
zyroxCSS.hideAllTooltips()
```

---

## 🎨 UI/Visual Improvements

### Modal Styling
- Enhanced backdrop blur effect (2px blur filter)
- Improved animation timing with cubic-bezier curves
- Better shadow system for depth perception

### Dropdown Styling
- Smoother transition animations (200ms)
- Improved focus visible states with outline styling
- Enhanced hover effects with smoother padding transitions

### Carousel Controls
- Better button states and transitions
- Improved indicator styling with active state transformation
- Enhanced indicator width change on active states (8px → 28px with border-radius)

### General Improvements
- Consistent transition timing across all components
- Better visual feedback for all interactive elements
- Enhanced focus states for keyboard navigation

---

## 🔧 Technical Improvements

### State Management
- Introduced proper component state tracking
- Better memory management with interval cleanup
- Added instance variables for managing active elements

### Event System
- Custom events emitted for component interactions
- Better event delegation and handling
- Improved event listener cleanup

### Performance
- Reduced redraws and reflows in carousel operations
- Optimized dropdown state management
- Better use of CSS transitions instead of JS animations

---

## 📝 Documentation Updates

- Updated API documentation with new keyboard navigation features
- Added custom events reference
- Enhanced component examples with keyboard interactions

---

## 🔄 Migration Guide

**No breaking changes from v2.1.0**. All improvements are backward compatible.

### Recommended Updates
1. Test keyboard navigation in your applications (now supported in dropdowns and tabs)
2. Consider using new custom events for better integration
3. Test touch/swipe functionality on mobile devices with carousels

---

## 📊 Changes Summary

- **Files Changed**: 4 (zyroxcss.js, _modal.scss, _dropdown.scss, _carousel.scss)
- **Bug Fixes**: 7
- **New Features**: 12+
- **Performance**: 3 improvements
- **Accessibility**: 6 enhancements

---

## 🙏 Notes

This patch release focuses on improving robustness, accessibility, and user experience. All components now have better keyboard support, improved state management, and enhanced animations.
1 change: 0 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading