[Time field] Development

[arecuenco-dsgn]

Provide a general summary of the feature here

1. Structure & elements

• Render container with focus ring wrapping input + action-icon slot
• Support placeholder, time-icon, and clear-icon slots/props
• Show time icon when field is empty; reserve right-padding for clear icon

2. Clear-button logic

• Clear icon appears on hover / focus only when a value is present
• Click / Enter / Space on clear icon empties the field and returns focus to input
• Mirrors Date Field implementation for consistency

3. Opening the dropdown

• Mouse: click anywhere in field (or icon) → open picker
• Keyboard: with input focused, Enter / Space opens picker; Esc closes and restores focus

4. Keyboard navigation inside picker

• Arrow keys move between options (or columns)
• Tab cycles columns (hours → minutes) in split mode
• Esc and clicking outside closes picker and returns focus to input

5. Dropdown modes

• Split mode: three independent columns (hours / minutes) for wide ranges
• Expose prop to switch modes and set interval

6. Time formats & masking

• Display in 24-hour (00:00) or 12-hour (12:00 am/pm) — decided by CFA consumer prop
• Numeric input masking guides entry (e.g., :)
• Arrow ↑ / ↓ inside input increment / decrement time according to format granularity