- Move layout components from layouts/ directory to components/layout/
- Reorganize divider component from data-display to layout category
- Add comprehensive layout component collection including aspect-ratio, bento-grid, box, breakpoint-container, center, column, dashboard-shell, feed-layout, flex, grid-container, hstack, list-detail-layout, scroll-container, section, sidebar-layout, stack, supporting-pane-layout, tabs-container, and vstack
- Update all demo components to match new layout structure
- Refactor routing and index exports to reflect reorganized component architecture
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- More descriptive name for design system library
- Update all imports and configurations
- No functional changes
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
