# Input / Select / DateTime First Pass

This note records the first baseline capture for `Input`, `Select`, and `DateTime`.

## Figma Baseline Nodes

- `InputBoxLine`
  - node: `1818:8063`
  - source: `/Users/nancy/Documents/AICoding/VS_Code/tvu-design-system/figma-data/raw/components/input_box_line__1818_8063.json`
- `InputBoxFilled`
  - node: `1436:32815`
  - source: `/Users/nancy/Documents/AICoding/VS_Code/tvu-design-system/figma-data/raw/components/input_box_filled__1436_32815.json`
- `SelectBoxLine`
  - node: `1804:26921`
  - source: `/Users/nancy/Documents/AICoding/VS_Code/tvu-design-system/figma-data/raw/components/select_box_line__1804_26921.json`
- `SelectBoxFilled`
  - node: `1436:32816`
  - source: `/Users/nancy/Documents/AICoding/VS_Code/tvu-design-system/figma-data/raw/components/select_box_filled__1436_32816.json`

## Documentation Structure Status

Already aligned with the agreed documentation rules:

- `Input` is merged into one page
- `Select` is merged into one page
- `DateTime` is separated from `Select`
- line / filled are compared side by side in the same state
- unsupported state sections for `DateTime` are hidden

Page files:

- `/Users/nancy/Documents/AICoding/VS_Code/tvu-design-system/playground/docs/pages/InputPage.vue`
- `/Users/nancy/Documents/AICoding/VS_Code/tvu-design-system/playground/docs/pages/SelectPage.vue`
- `/Users/nancy/Documents/AICoding/VS_Code/tvu-design-system/playground/docs/pages/DateTimePage.vue`

## Input: First-Round Observations

### High-confidence good state

- The page structure is now correct.
- `Basic Input` and `Feature Input` are separated correctly.
- `InputBoxLine` and `InputBoxFilled` are compared in the same state row.

### Remaining likely review points

1. feature icon left padding needs pixel check against Figma
2. clear icon size and placement need pixel check against Figma
3. text baseline and vertical centering should be checked in:
   - `normal`
   - `hover`
   - `click`
4. `click` state caret and clear icon spacing are likely still browser-approximate

## Select: First-Round Observations

### High-confidence good state

- Base `Select` is separated from `DateTime`.
- `Single Select` and `Multi Select` are separated correctly.
- dropdown is overlay-based instead of stretching card height
- selecting an item writes back to the trigger value

### Remaining likely review points

1. disabled rendering still uses browser-style simplifications in some paths
2. multi-select chip sizing and close-icon placement need Figma check
3. arrow / clear / feature-icon swaps in `click` state still need pixel review
4. `filled` variant background and border relationship need verification in:
   - default
   - error
   - hover
   - click

## DateTime: First-Round Observations

### High-confidence good state

- `Time Picker` and `Date Picker` are isolated on their own page
- empty unsupported sections are no longer rendered
- line / filled are compared side by side

### Remaining likely review points

1. date-range value layout and truncation need pixel check
2. calendar / clock icon placement needs pixel check
3. `click` state clear icon behavior needs pixel check
4. placeholder/value spacing in line vs filled still needs calibration

## Suggested Review Order

1. `Input`
2. `Select`
3. `DateTime`

Reason:

- `Input` has the smallest remaining uncertainty
- `Select` adds overlay, chips, and writable state
- `DateTime` inherits select behavior plus feature-specific content