dees-catalog/readme.plan.md

# Input Component Unification Plan

Command to reread guidelines: `cat /home/philkunz/.claude/CLAUDE.md`

## Problem Summary

The dees-input components have inconsistent margin behavior causing vertical alignment issues in horizontal flexbox layouts:

- **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)

## Proposed Solution

### 1. Standardize Margin System

Create a unified margin approach for all input components:

```css
/* Default vertical stacking mode (for forms) */
:host {
  margin: 0;
  margin-bottom: 16px; /* Reduced from 24px for better density */
}

/* Last child in container should have no bottom margin */
:host(:last-child) {
  margin-bottom: 0;
}

/* Horizontal layout mode - activated by parent context or attribute */
:host([horizontal-layout]) {
  margin: 0;
  margin-right: 16px;
  margin-bottom: 0;
}

:host([horizontal-layout]:last-child) {
  margin-right: 0;
}
```

### 2. Unified Label Architecture

All input components should use the `dees-label` component for consistency:

- 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

### 3. Layout Mode Support

Add a `layoutMode` property to all input components:

```typescript
@property({ type: String })
public layoutMode: 'vertical' | 'horizontal' | 'auto' = 'auto';
```

- `vertical`: Traditional form layout (label on top)
- `horizontal`: Inline layout (label position configurable)
- `auto`: Detect from parent context

### 4. Implementation Steps

1. **Create base input class** (`DeesInputBase`):
   - Common margin styles
   - Layout mode detection
   - Label position handling
   - Shared properties (key, required, disabled, value)

2. **Update dees-input-text**:
   - Extend from DeesInputBase
   - Remove hardcoded margins
   - Keep using dees-label component

3. **Update dees-input-dropdown**:
   - Extend from DeesInputBase
   - Remove hardcoded margins
   - Switch from built-in label to dees-label

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

5. **Update dees-input-radio**:
   - Same as checkbox

6. **Update dees-form**:
   - Add property to control child input layout mode
   - Ensure proper spacing context

### 5. CSS Variable System

Introduce CSS variables for consistent spacing:

```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 */
}
```

### 6. Backward Compatibility

- Keep existing properties and methods
- Add deprecation notices for properties that will be removed
- Provide migration guide in documentation

### 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