Commit Graph

3 Commits

Author SHA1 Message Date
skyai_dev
2bbbf1b9f1 Add comprehensive UI component expansion
- Add new components: enhanced-table, fab-menu, icon-button, snackbar, select, tag-input, bottom-navigation, stepper, command-palette, floating-toolbar, transfer-list
- Refactor table-actions and select components
- Update component styles and exports
- Add corresponding demo components

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-03 21:50:45 +10:00
skyai_dev
bf67b7f955 Add comprehensive component library expansion with new UI components
This commit includes multiple new components and improvements to the UI essentials library:

## New Components Added:
- **Accordion**: Expandable/collapsible content panels with full accessibility
- **Alert**: Notification and messaging component with variants and dismiss functionality
- **Popover**: Floating content containers with positioning and trigger options
- **Timeline**: Chronological event display with customizable styling
- **Tree View**: Hierarchical data display with expand/collapse functionality
- **Toast**: Notification component (previously committed, includes style refinements)

## Component Features:
- Full TypeScript implementation with Angular 19+ patterns
- Comprehensive SCSS styling using semantic design tokens exclusively
- Multiple size variants (sm, md, lg) and color variants (primary, success, warning, danger, info)
- Accessibility support with ARIA attributes and keyboard navigation
- Responsive design with mobile-first approach
- Interactive demos showcasing all component features
- Integration with existing design system and routing

## Demo Applications:
- Created comprehensive demo components for each new component
- Interactive examples with live code demonstrations
- Integrated into main demo application routing and navigation

## Documentation:
- Added COMPONENT_CREATION_TEMPLATE.md with detailed guidelines
- Comprehensive component creation patterns and best practices
- Design token usage guidelines and validation rules

## Code Quality:
- Follows established Angular and SCSS conventions
- Uses only verified semantic design tokens
- Maintains consistency with existing component architecture
- Comprehensive error handling and edge case management

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-03 12:02:38 +10:00
skyai_dev
6b8352a8a0 Add comprehensive toast notification component to feedback category
- Create new toast component with full TypeScript implementation
- Add SCSS styling using semantic design tokens exclusively
- Implement size variants (sm, md, lg) and color variants (primary, success, warning, danger, info)
- Include interactive features: auto-dismiss, manual dismiss, progress bar, hover pause/resume
- Add comprehensive accessibility support with ARIA attributes and keyboard navigation
- Create engaging demo component with interactive examples and live statistics
- Integrate toast into feedback category menu and routing system
- Follow established component patterns and design system conventions

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-03 12:01:35 +10:00