feat(time-field): new TEDI-ready component #25

skills/tedi-react/SKILL.md

@@ -154,7 +154,7 @@ const [email, setEmail] = useState('');
 <Checkbox id="agree" label="I agree" value="agree" onChange={(val, checked) => setAgreed(checked)} />
 ```
 
-Form controls: `TextField`, `Select`, `TextArea`, `NumberField`, `Checkbox`, `Radio`, `ChoiceGroup`, `Search`, `DateField`, `FileUpload`, `FileDropzone`.
+Form controls: `TextField`, `Select`, `TextArea`, `NumberField`, `Checkbox`, `Radio`, `ChoiceGroup`, `Search`, `DateField`, `TimeField`, `FileUpload`, `FileDropzone`.
 
 ## Theming
 

skills/tedi-react/references/components.md

@@ -338,6 +338,64 @@ The ref shape mirrors TextField (`{ input, wrapper }`). In `'multiple'` mode the
 <DateField id="dob" label="Date of birth" useNativePicker md={{ useNativePicker: false }} />
 ```
 
+### TimeField
+**Props:** `TimeFieldProps` | bp, form
+- `id: string` (required), `label: string` (required)
+- `value?: string`, `defaultValue?: string` — `"HH:mm"` 24-hour format
+- `onChange?: (time: string) => void`
+- `placeholder?: string`
+- `required?: boolean`, `readOnly?: boolean`
+- `stepMinutes?: number = 1` — minute increment for the picker wheel / grid
+- `availableTimes?: string[]` — limit selectable times to a fixed list (`["09:00", "09:30", …]`); switches the popover to grid mode
+- `inputProps?: Omit<TextFieldProps, 'id' | 'label' | 'value' | 'onChange'>` — pass-through to the underlying input
+- `className?: string`
+- **Breakpoint-aware:** `useNativePicker?: boolean = false` (swap to `<input type="time">`; ignores `availableTimes`), `showPicker?: boolean = true`, `timePickerTrigger?: 'input' | 'button' = 'button'`, `availableTimesVariant?: 'grid-buttons' | 'grid-radio' | 'dropdown'` — which variant the picker renders when `availableTimes` is set
+
+```tsx
+<TimeField id="meeting" label="Meeting time" value={time} onChange={setTime} stepMinutes={15} />
+
+// Constrain to specific slots, render as a radio-button grid
+<TimeField
+  id="slot"
+  label="Available slot"
+  availableTimes={['09:00', '09:30', '10:00', '14:00', '15:30']}
+  availableTimesVariant="grid-radio"
+  value={slot}
+  onChange={setSlot}
+/>
+
+// Native picker on mobile, custom wheel on desktop
+<TimeField id="alarm" label="Alarm" useNativePicker md={{ useNativePicker: false }} />
+```
+
+### TimePicker
+> **For plain time inputs use `TimeField`.** TimePicker is the lower-level picker primitive — reach for it only when you need a standalone, always-visible time selector (scheduling UI, custom popover, side-by-side with a calendar in a DateTime composite).
+
+**Props:** `TimePickerProps` | form
+- `value?: string`, `defaultValue?: string` — `"HH:mm"`
+- `onChange?: (time: string) => void`
+- `stepMinutes?: number = 1` — minute increment for the wheel
+- `availableTimes?: string[]` — switches from scroll-wheel mode to a predefined-slots grid
+- `gridVariant?: 'button' | 'radio' = 'button'` — only used with `availableTimes`
+- `bordered?: boolean = true` — set `false` when embedding inside a parent that already provides its own surface (e.g. alongside a Calendar)
+- `className?: string`
+
+The wheel column supports full keyboard navigation: `ArrowUp` / `ArrowDown` and `PageUp` / `PageDown` cycle through the column (wrap at both ends), `Home` / `End` jump to the bounds, `Enter` / `Space` commit the highlighted value.
+
+```tsx
+import { TimePicker } from '@tedi-design-system/react/tedi';
+
+<TimePicker value={time} onChange={setTime} stepMinutes={5} />
+
+// Predefined slots
+<TimePicker
+  availableTimes={['09:00', '10:00', '11:00', '14:00']}
+  gridVariant="radio"
+  value={slot}
+  onChange={setSlot}
+/>
+```
+
 ### FileUpload
 **Props:** `FileUploadProps` | form
 - `id: string` (required), `name: string` (required)

skills/tedi-react/references/forms.md

@@ -15,6 +15,7 @@ TEDI form controls support both **controlled** and **uncontrolled** modes, follo
 | ChoiceGroup | `ChoiceGroupValue` | Radio/checkbox groups, segmented variant |
 | Search | `string` | Search button, onSearch callback |
 | DateField | `Date \| Date[] \| DateRange` | Single/multiple/range, manual input, min/max, native picker, breakpoint-aware |
+| TimeField | `string` (`"HH:mm"`) | Wheel / grid picker, native fallback, stepMinutes, availableTimes |
 | FileUpload | `FileUploadFile[]` | Multi-file, validation, loading states |
 | FileDropzone | `FileUploadFile[]` | Drag-and-drop |
 
@@ -177,6 +178,50 @@ const [date, setDate] = useState<Date>();
 />
 ```
 
+## TimeField
+
+The value is always a `"HH:mm"` 24-hour string. The popover defaults to a wheel picker; set `availableTimes` to switch to a fixed-slot grid, or `useNativePicker` to drop the custom UI entirely.
+
+```tsx
+import { TimeField } from '@tedi-design-system/react/tedi';
+
+// Wheel picker, 15-minute step
+<TimeField
+  id="meeting"
+  label="Meeting time"
+  value={time}
+  onChange={setTime}
+  stepMinutes={15}
+  required
+/>
+
+// Constrain to predefined slots, render as a radio-button grid
+<TimeField
+  id="slot"
+  label="Available slot"
+  availableTimes={['09:00', '09:30', '10:00', '14:00', '15:30']}
+  availableTimesVariant="grid-radio"
+  value={slot}
+  onChange={setSlot}
+/>
+
+// Native picker on mobile, custom wheel on desktop
+<TimeField
+  id="alarm"
+  label="Alarm"
+  useNativePicker
+  md={{ useNativePicker: false }}
+/>
+```
+
+For an always-visible time selector (e.g. side-by-side with a calendar, or inside a custom popover) use the lower-level `TimePicker` directly:
+
+```tsx
+import { TimePicker } from '@tedi-design-system/react/tedi';
+
+<TimePicker value={time} onChange={setTime} stepMinutes={5} bordered={false} />
+```
+
 ## Checkbox & Radio
 
 ```tsx
@@ -283,6 +328,7 @@ import { FileUpload, FileDropzone } from '@tedi-design-system/react/tedi';
 - **Select:** `onChange?: (value: ISelectOption | ISelectOption[] | null) => void`
 - **NumberField:** `onChange?: (value: number) => void`
 - **DateField:** `onSelect?: OnSelectHandler<Date | Date[] | DateRange | undefined>` — value shape depends on `mode` (`'single'` → `Date`, `'multiple'` → `Date[]`, `'range'` → `DateRange`)
+- **TimeField / TimePicker:** `onChange?: (time: string) => void` — value is always `"HH:mm"` 24-hour format (empty string when cleared)
 
 ## Disabled State
 

src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.module.scss

@@ -47,7 +47,11 @@
       }
     }
 
-    &:focus-visible {
+    // The outline fires when the card itself is focused (checkbox variant) or
+    // when the inner radio input is focused (radio variant — the wrapper has
+    // tabIndex=-1, so only the input receives focus).
+    &:focus-visible,
+    &:has(input:focus-visible) {
       z-index: 5;
       outline: 2px solid var(--form-checkbox-radio-default-border-selected);
       outline-offset: 2px;

src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.spec.tsx

@@ -125,4 +125,19 @@ describe('ChoiceGroupItem', () => {
     fireEvent.click(input);
     expect(mockInputClick).not.toHaveBeenCalled();
   });
+
+  it('makes the outer wrapper non-tabbable for radio type (arrow-navigated group)', () => {
+    const { container } = renderWithContext({ type: 'radio', variant: 'card' });
+    const card = container.querySelector('.tedi-choice-group-item') as HTMLElement;
+    expect(card).toHaveAttribute('tabIndex', '-1');
+    expect(card).not.toHaveAttribute('role');
+    expect(card).not.toHaveAttribute('aria-checked');
+  });
+
+  it('keeps the outer wrapper tabbable with role=checkbox for checkbox type', () => {
+    const { container } = renderWithContext({ type: 'checkbox', variant: 'card' });
+    const card = container.querySelector('.tedi-choice-group-item') as HTMLElement;
+    expect(card).toHaveAttribute('tabIndex', '0');
+    expect(card).toHaveAttribute('role', 'checkbox');
+  });
 });

src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.tsx

@@ -91,14 +91,16 @@ export const ChoiceGroupItem = (props: ExtendedChoiceGroupItemProps): React.Reac
 
     document.getElementById(id)?.click();
   };
+
+  const isRadio = type === 'radio';
   return (
     <Col {...colProps} className={ColumnBEM}>
       <div
         className={ChoiceGroupItemBEM}
-        tabIndex={disabled ? -1 : 0}
+        tabIndex={isRadio || disabled ? -1 : 0}
         onClick={handleClick}
-        role={type}
-        aria-checked={isChecked}
+        role={isRadio ? undefined : type}
+        aria-checked={isRadio ? undefined : isChecked}
       >
         {variant === 'default' || showIndicator ? (
           <InputComponent

src/tedi/components/form/date-field/date-field.module.scss

@@ -30,6 +30,10 @@
 
   &[aria-expanded='true'] button:not([data-name='closing-button']):last-child {
     background-color: var(--form-datepicker-date-hover);
+
+    > span {
+      color: var(--button-main-neutral-text-active);
+    }
   }
 
   &--disabled {

src/tedi/components/form/date-field/date-field.stories.tsx

@@ -85,6 +85,58 @@ export const Size: StoryObj<TemplateMultipleProps> = {
   },
 };
 
+const stateArray = ['Default', 'Hover', 'Focus', 'Active', 'Disabled'] as const;
+
+export const States: Story = {
+  render: () => (
+    <div className="state-example">
+      {stateArray.map((state) => (
+        <Row key={state} className="padding-14-16">
+          <Col width={2} className="display-flex align-items-center">
+            <Text modifiers="bold">{state}</Text>
+          </Col>
+          <Col md={4} xs={12} className="display-flex align-items-center">
+            <DateField id={state} mode="single" label="Date" inputProps={{ disabled: state === 'Disabled' }} />
+          </Col>
+        </Row>
+      ))}
+      <Row className="padding-14-16">
+        <Col width={2} className="display-flex align-items-center">
+          <Text modifiers="bold">Success</Text>
+        </Col>
+        <Col md={4} xs={12} className="display-flex align-items-center">
+          <DateField
+            id="success-datefield"
+            mode="single"
+            label="Date"
+            inputProps={{ helper: { text: 'Feedback text', type: 'valid' } }}
+          />
+        </Col>
+      </Row>
+      <Row className="padding-14-16">
+        <Col width={2} className="display-flex align-items-center">
+          <Text modifiers="bold">Error</Text>
+        </Col>
+        <Col md={4} xs={12} className="display-flex align-items-center">
+          <DateField
+            id="error-datefield"
+            mode="single"
+            label="Date"
+            inputProps={{ helper: { text: 'Feedback text', type: 'error' } }}
+          />
+        </Col>
+      </Row>
+    </div>
+  ),
+  parameters: {
+    pseudo: {
+      hover: '#Hover',
+      focus: '#Focus',
+      active: '#Active',
+    },
+  },
+};
+
 export const FieldOptions: StoryFn = () => {
   const [shortcutValue, setShortcutValue] = useState<Date | undefined>(undefined);
 

src/tedi/components/form/textfield/textfield.module.scss

@@ -175,6 +175,10 @@ $input-padding-right-map: (
     color: var(--form-input-text-filled);
   }
 
+  &:not(div, :disabled):active {
+    color: var(--button-main-neutral-text-active);
+  }
+
   &:disabled {
     cursor: initial;
   }
@@ -198,6 +202,7 @@ div.tedi-textfield__icon-wrapper {
 
 .tedi-textfield__feedback-wrapper {
   display: flex;
+  margin-top: var(--form-field-outer-spacing);
 }
 
 .tedi-textfield__separator {

src/tedi/components/form/textfield/textfield.tsx

@@ -344,8 +344,10 @@ export const TextField = forwardRef<TextFieldForwardRef, TextFieldProps>((props,
   const renderIcon = useCallback(() => {
     if (!icon) return null;
 
+    const isInteractiveIcon = Boolean(onIconClick);
+    const smallIconSize = isInteractiveIcon ? 18 : 16;
     const defaultIconProps: Partial<IconWithoutBackgroundProps> = {
-      size: size === 'large' ? 24 : size === 'small' ? 16 : 18,
+      size: size === 'large' ? 24 : size === 'small' ? smallIconSize : 18,
       className: styles['tedi-textfield__icon'],
     };