feat: Implement unified input component architecture with standardized margins and layout modes

readme.plan.md

@@ -1,202 +1,174 @@
-# dees-appui-appbar Improvement Plan
+# Input Component Unification Plan
 
-## Phase 1: Core Menu System
+Command to reread guidelines: `cat /home/philkunz/.claude/CLAUDE.md`
 
-### Menu Data Structure
-- [x] Extend existing `plugins.tsclass.website.IMenuItem` to create `IAppBarMenuItem` with additional properties: id, shortcut, submenu, divider, disabled
-- [x] Create `IMenuBar` interface with menuItems array and onMenuSelect callback
-- [x] Add `@property() menuItems` to accept menu configuration
-- [x] Add `@property() onMenuSelect` event handler
-- [ ] Consider reusing existing `interfaces.ITab` for simpler menu scenarios
+## Problem Summary
 
-### Basic Menu Rendering
-- [x] Replace hardcoded menu items with dynamic rendering from menuItems property
-- [x] Add support for menu item icons
-- [x] Implement menu item disabled state styling
-- [x] Add menu separator/divider support
+The dees-input components have inconsistent margin behavior causing vertical alignment issues in horizontal flexbox layouts:
 
-### Dropdown Implementation
-- [x] Create dropdown container component (consider reusing logic from dees-contextmenu)
-- [x] Implement click to open/close dropdown
-- [x] Add dropdown positioning logic (below menu item)
-- [x] Implement click outside to close
-- [x] Add dropdown arrow/caret indicator
-- [x] Style dropdown with shadows and borders
-- [ ] Ensure visual consistency with existing dees-contextmenu component
+- **dees-input-text**: 8px top, 24px bottom margin
+- **dees-input-dropdown**: 0px top, 24px bottom margin  
+- **dees-input-checkbox/radio**: 20px top, 20px bottom margin
+- Different components use different label implementations (some use dees-label, others have built-in labels)
 
-### Keyboard Navigation
-- [x] Add tabindex to menu items
-- [x] Implement Tab navigation between top-level items
-- [x] Add Enter key to open dropdown
-- [x] Implement arrow keys for dropdown navigation
-- [x] Add Escape key to close dropdown
-- [x] Implement Home/End keys for first/last item
+## Proposed Solution
 
-### Submenu Support
-- [ ] Detect submenu items and add arrow indicator
-- [ ] Implement submenu positioning (to the right)
-- [ ] Add hover delay before opening submenu
-- [ ] Handle nested keyboard navigation
-- [ ] Prevent submenus from going off-screen
+### 1. Standardize Margin System
 
-## Phase 2: Breadcrumb Navigation & Theming
+Create a unified margin approach for all input components:
 
-### Breadcrumb System
-- [ ] Define `IBreadcrumb` interface with label, path, icon
-- [x] Add `@property() breadcrumbs` array
-- [x] Add `@property() breadcrumbSeparator` (default '>')
-- [x] Implement breadcrumb rendering with separators
-- [x] Add click handlers for navigation
-- [x] Emit 'breadcrumb-navigate' custom event
-- [ ] Add breadcrumb truncation for long paths
-- [ ] Implement breadcrumb overflow with horizontal scroll
+```css
+/* Default vertical stacking mode (for forms) */
+:host {
+  margin: 0;
+  margin-bottom: 16px; /* Reduced from 24px for better density */
+}
 
-### Theme Support
-- [x] Add CSS variables for all colors and sizes
-- [x] Create `--appbar-height` variable (default 40px)
-- [x] Add `--appbar-bg`, `--appbar-text`, `--appbar-border` variables
-- [x] Implement `--appbar-hover` and `--appbar-active` states
-- [x] Add `@property() theme` with 'light' | 'dark' options
-- [x] Create light theme CSS variables
-- [x] Add theme toggle to demo
+/* Last child in container should have no bottom margin */
+:host(:last-child) {
+  margin-bottom: 0;
+}
 
-### Visual Improvements
-- [x] Add smooth transitions for hover states
-- [ ] Implement ripple effect on click
-- [x] Add focus ring styles for accessibility
-- [x] Improve menu item padding and spacing
-- [ ] Add subtle gradient or texture to appbar
+/* Horizontal layout mode - activated by parent context or attribute */
+:host([horizontal-layout]) {
+  margin: 0;
+  margin-right: 16px;
+  margin-bottom: 0;
+}
 
-## Phase 3: Search & User Account
+:host([horizontal-layout]:last-child) {
+  margin-right: 0;
+}
+```
 
-### Search Integration
-- [x] Add search icon in center section
-- [ ] Create expandable search input
-- [x] Add `@property() showSearch` boolean
-- [ ] Implement Cmd/Ctrl+K keyboard shortcut
-- [ ] Add search input with placeholder
-- [x] Emit 'search-submit' event
-- [ ] Add search suggestions dropdown
-- [ ] Implement recent searches storage
+### 2. Unified Label Architecture
 
-### User Account Section
-- [ ] Define `IUserAccount` interface
-- [x] Add `@property() user` for user data
-- [x] Render user avatar (with fallback to initials)
-- [x] Display user name
-- [x] Add status indicator (online/offline/busy/away)
-- [ ] Create user dropdown menu
-- [ ] Add logout/settings options
-- [x] Emit 'user-menu-open' event
+All input components should use the `dees-label` component for consistency:
 
-## Phase 4: Platform & Accessibility
+- Move label rendering from built-in implementations to `dees-label` usage
+- Add a `labelPosition` property to all inputs: `'top' | 'left' | 'right' | 'none'`
+- Default to 'top' for text/dropdown, 'right' for checkbox/radio
 
-### Platform-Specific Features
-- [ ] Add `@property() platform` detection
-- [x] Conditionally show window controls
-- [ ] Implement platform-specific styling (macOS/Windows/Linux)
-- [ ] Add platform-specific keyboard shortcuts
-- [ ] Handle window dragging per platform
-- [ ] Add fullscreen toggle button
+### 3. Layout Mode Support
 
-### Window Controls Integration
-- [ ] Make window controls position configurable
-- [x] Add `@property() showWindowControls`
-- [ ] Handle window controls on different platforms
-- [ ] Add minimize/maximize/close functionality
-- [ ] Style window controls to match theme
+Add a `layoutMode` property to all input components:
 
-### Accessibility (A11Y)
-- [x] Add proper ARIA roles (menubar, menuitem)
-- [x] Implement aria-haspopup for dropdowns
-- [x] Add aria-expanded state
-- [ ] Include aria-label for navigation
-- [ ] Support screen reader announcements
-- [ ] Add high contrast mode support
-- [ ] Implement focus trap in dropdowns
-- [ ] Add skip navigation link
+```typescript
+@property({ type: String })
+public layoutMode: 'vertical' | 'horizontal' | 'auto' = 'auto';
+```
 
-### Responsive Design
-- [ ] Add breakpoint detection
-- [ ] Implement hamburger menu for mobile
-- [ ] Create slide-out menu drawer
-- [ ] Make breadcrumbs responsive
-- [ ] Hide non-essential items on small screens
-- [ ] Add touch gesture support
+- `vertical`: Traditional form layout (label on top)
+- `horizontal`: Inline layout (label position configurable)
+- `auto`: Detect from parent context
 
-## Phase 5: Advanced Features
+### 4. Implementation Steps
 
-### Notification System
-- [ ] Add notification icon with badge
-- [ ] Create `@property() notifications` array
-- [ ] Implement notification dropdown
-- [ ] Add notification actions (mark read, dismiss)
-- [ ] Emit notification events
-- [ ] Add notification sound option
-- [ ] Implement notification grouping
+1. **Create base input class** (`DeesInputBase`):
+   - Common margin styles
+   - Layout mode detection
+   - Label position handling
+   - Shared properties (key, required, disabled, value)
 
-### Plugin System
-- [ ] Define `IAppBarPlugin` interface
-- [ ] Add plugin registration method
-- [ ] Implement plugin rendering slots
-- [ ] Add plugin positioning (left/center/right)
-- [ ] Support plugin weight for ordering
-- [ ] Create plugin lifecycle hooks
+2. **Update dees-input-text**:
+   - Extend from DeesInputBase
+   - Remove hardcoded margins
+   - Keep using dees-label component
 
-### Custom Slots
-- [ ] Add named slots for sections
-- [ ] Implement slot change detection
-- [ ] Style slotted content appropriately
-- [ ] Document slot usage
+3. **Update dees-input-dropdown**:
+   - Extend from DeesInputBase
+   - Remove hardcoded margins
+   - Switch from built-in label to dees-label
 
-### Context Menus
-- [ ] Add right-click context menu support
-- [ ] Implement context menu positioning
-- [ ] Add context-specific menu items
-- [ ] Support custom context menus
+4. **Update dees-input-checkbox**:
+   - Extend from DeesInputBase
+   - Remove hardcoded margins
+   - Add support for label position (keep default as 'right')
+   - Switch to dees-label component
 
-## Phase 6: Performance & Polish
+5. **Update dees-input-radio**:
+   - Same as checkbox
 
-### Performance Optimizations
-- [ ] Implement virtual scrolling for long menus
-- [ ] Add lazy loading for submenu content
-- [ ] Debounce search input
-- [ ] Memoize menu rendering
-- [ ] Optimize re-renders with lit's `guard` directive
-- [ ] Add loading states for async operations
+6. **Update dees-form**:
+   - Add property to control child input layout mode
+   - Ensure proper spacing context
 
-### Testing
-- [x] Create comprehensive demo page
-- [ ] Add unit tests for menu logic
-- [ ] Test keyboard navigation
-- [ ] Test platform-specific behavior
-- [ ] Add visual regression tests
-- [ ] Test accessibility with screen readers
-- [ ] Performance benchmark tests
+### 5. CSS Variable System
 
-### Documentation
-- [ ] Document all properties and methods
-- [x] Create usage examples
-- [ ] Add migration guide from current version
-- [ ] Document keyboard shortcuts
-- [ ] Create accessibility guide
-- [ ] Add troubleshooting section
+Introduce CSS variables for consistent spacing:
 
-### Polish
-- [ ] Add loading skeletons
-- [ ] Implement error states
-- [ ] Add empty states
-- [ ] Create onboarding tooltips
-- [ ] Add animation preferences (reduced motion)
-- [ ] Implement print styles
+```css
+:host {
+  --dees-input-spacing-unit: 8px;
+  --dees-input-vertical-gap: calc(var(--dees-input-spacing-unit) * 2); /* 16px */
+  --dees-input-horizontal-gap: calc(var(--dees-input-spacing-unit) * 2); /* 16px */
+  --dees-input-label-gap: var(--dees-input-spacing-unit); /* 8px */
+}
+```
 
-## Completion Tracking
+### 6. Backward Compatibility
 
-- Phase 1: 20/22 tasks
-- Phase 2: 10/15 tasks
-- Phase 3: 6/16 tasks
-- Phase 4: 6/24 tasks
-- Phase 5: 0/18 tasks
-- Phase 6: 2/20 tasks
+- Keep existing properties and methods
+- Add deprecation notices for properties that will be removed
+- Provide migration guide in documentation
 
-**Total: 44/115 tasks completed**
+### 7. Testing Requirements
+
+- Test all inputs in vertical form layouts
+- Test all inputs in horizontal flexbox containers
+- Test mixed input types in same container
+- Test with and without labels
+- Test theme switching (light/dark)
+- Test responsive behavior
+
+## Expected Outcome
+
+- All input components will align properly in horizontal layouts
+- Consistent spacing in vertical forms
+- Unified label handling across all inputs
+- Better developer experience with predictable behavior
+- Maintained backward compatibility
+
+## Timeline
+
+1. Phase 1: Create DeesInputBase class and update dees-input-text ✅
+2. Phase 2: Update remaining input components ✅
+3. Phase 3: Update documentation and examples
+4. Phase 4: Testing and refinement ✅
+
+## Implementation Status
+
+### Completed:
+
+1. **Created DeesInputBase class** (`dees-input-base.ts`):
+   - Generic base class with unified margin system
+   - Layout mode support (vertical/horizontal/auto)
+   - Label position control
+   - Common properties and methods
+   - CSS variables for consistent spacing
+
+2. **Updated all input components**:
+   - `dees-input-text`: Now extends DeesInputBase, margins removed
+   - `dees-input-dropdown`: Now extends DeesInputBase, uses dees-label
+   - `dees-input-checkbox`: Now extends DeesInputBase, uses dees-label (default label position: right)
+   - `dees-input-radio`: Now extends DeesInputBase, uses dees-label (default label position: right)
+
+3. **Updated dees-form**:
+   - Added `horizontal-layout` property
+   - Auto-detection of layout mode for child inputs
+   - Added dropdown to form input types
+
+4. **Fixed TypeScript errors**:
+   - Added value property to dropdown for form compatibility
+   - Fixed changeSubject typing
+   - Updated form value type to include dropdown options
+
+### Result:
+
+All input components now have:
+- Unified 16px bottom margin in vertical layouts
+- 16px right margin in horizontal layouts
+- No margin on last child
+- Consistent label handling via dees-label
+- Flexible layout modes
+- Better alignment in flexbox containers