diff --git a/CHANGELOG.md b/CHANGELOG.md
index 668563faec..202c6a088a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   `@lumx/vue`:
     -   Create the `SelectButton` component
+-   `@lumx/react`:
+    -   Create the `TimePickerField` component
 
 ### Fixed
 
@@ -18,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
     -   Include `tsx` components when generating ts declarations
 -   `@lumx/react`, `@lumx/vue`:
     -   `Dialog`, `Popover`: fix focus trap not working when rendered inside a shadow DOM
+    -   `Combobox`: let `Enter` key propagate to submit a surrounding form when the popup is open with no active option
 
 ## [4.13.0][] - 2026-05-11
 
diff --git a/packages/lumx-core/src/js/components/Combobox/Tests.tsx b/packages/lumx-core/src/js/components/Combobox/Tests.tsx
index 7c966c6cf1..eea9159b8d 100644
--- a/packages/lumx-core/src/js/components/Combobox/Tests.tsx
+++ b/packages/lumx-core/src/js/components/Combobox/Tests.tsx
@@ -909,7 +909,7 @@ export default function comboboxTests({ components: { Combobox, IconButton }, re
             expect(notPrevented).toBe(true);
         });
 
-        it('should close listbox on Enter when open with no active descendant (and prevent default)', async () => {
+        it('should close listbox on Enter when open with no active descendant (without preventing default)', async () => {
             renderWithState(t.inputTemplate);
             const input = getInput();
             await userEvent.click(input);
@@ -925,8 +925,8 @@ export default function comboboxTests({ components: { Combobox, IconButton }, re
             await waitFor(() => {
                 expect(input).toHaveAttribute('aria-expanded', 'false');
             });
-            // The combobox consumed Enter to close the popup → default IS prevented
-            expect(notPrevented).toBe(false);
+            // Default must NOT be prevented — required for the surrounding form to submit on Enter.
+            expect(notPrevented).toBe(true);
         });
 
         it('should close listbox on Escape then clear on second Escape', async () => {
diff --git a/packages/lumx-core/src/js/components/Combobox/setupCombobox.ts b/packages/lumx-core/src/js/components/Combobox/setupCombobox.ts
index 0a2d06a221..46506f8aea 100644
--- a/packages/lumx-core/src/js/components/Combobox/setupCombobox.ts
+++ b/packages/lumx-core/src/js/components/Combobox/setupCombobox.ts
@@ -205,9 +205,9 @@ export function setupCombobox(
                         }
                         flag = true;
                     } else if (handle.isOpen && !handle.isMultiSelect) {
-                        // Open with no active item (single select) => close the popup.
+                        // Open with no active item (single select) => close the popup,
+                        // but let Enter propagate so it can submit a surrounding form.
                         handle.setIsOpen(false);
-                        flag = true;
                     }
                     // Otherwise (closed popup, or multi-select with no active item),
                     // let Enter pass through so it can submit a surrounding form
diff --git a/packages/lumx-core/src/js/components/TimePickerField/Stories.tsx b/packages/lumx-core/src/js/components/TimePickerField/Stories.tsx
new file mode 100644
index 0000000000..50fedd64ab
--- /dev/null
+++ b/packages/lumx-core/src/js/components/TimePickerField/Stories.tsx
@@ -0,0 +1,88 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+
+import { getDateAtTime } from '../../utils/time';
+
+const TRANSLATIONS = {
+    clearLabel: 'Clear',
+    showSuggestionsLabel: 'Show suggestions',
+};
+
+/**
+ * Setup TimePickerField stories for a specific framework (React or Vue).
+ *
+ * The framework wrapper (`TimePickerField`) is fully self-contained — it builds
+ * its option list from `step`/`minTime`/`maxTime`/`locale` internally — so each
+ * story is just an args object with optional render override.
+ */
+export function setup({
+    component: TimePickerField,
+    decorators: { withValueOnChange, withCombinations },
+}: SetupStoriesOptions<{
+    decorators: 'withValueOnChange' | 'withCombinations';
+}>) {
+    const meta = {
+        component: TimePickerField,
+        args: {
+            label: 'Time',
+            locale: 'en-US',
+            translations: TRANSLATIONS,
+        },
+        decorators: [withValueOnChange()],
+    };
+
+    /** Empty field with the default 30-minute step. */
+    const Default = {};
+
+    /** Field with a default value already selected. */
+    const WithValue = {
+        args: {
+            value: getDateAtTime({ hour: 12, minute: 30 }),
+        },
+    };
+
+    /** 15-minute interval — produces 96 entries. */
+    const Step15 = {
+        args: {
+            step: 15,
+        },
+    };
+
+    /** Disables (but keeps visible) options before 12:00. */
+    const WithMinTime = {
+        args: {
+            minTime: getDateAtTime({ hour: 2, minute: 0 }),
+        },
+    };
+
+    /** Disables (but keeps visible) options after 18:00. */
+    const WithMaxTime = {
+        args: {
+            maxTime: getDateAtTime({ hour: 18, minute: 0 }),
+        },
+    };
+
+    /** French locale → 24-hour formatting. */
+    const French = {
+        args: {
+            locale: 'fr-FR',
+            value: getDateAtTime({ hour: 14, minute: 30 }),
+        },
+    };
+
+    /** Disabled states (matrix). */
+    const Disabled = {
+        args: WithValue.args,
+        decorators: [
+            withCombinations({
+                combinations: {
+                    rows: {
+                        isDisabled: { isDisabled: true },
+                        'aria-disabled': { 'aria-disabled': true },
+                    },
+                },
+            }),
+        ],
+    };
+
+    return { meta, Default, WithValue, Step15, WithMinTime, WithMaxTime, French, Disabled };
+}
diff --git a/packages/lumx-core/src/js/components/TimePickerField/Tests.tsx b/packages/lumx-core/src/js/components/TimePickerField/Tests.tsx
new file mode 100644
index 0000000000..6dbfa3b6e8
--- /dev/null
+++ b/packages/lumx-core/src/js/components/TimePickerField/Tests.tsx
@@ -0,0 +1,188 @@
+import userEvent from '@testing-library/user-event';
+import { screen } from '@testing-library/dom';
+import { vi } from 'vitest';
+
+import { getDateAtTime } from '../../utils/time';
+
+export const TRANSLATIONS = {
+    clearLabel: 'Clear',
+    showSuggestionsLabel: 'Show suggestions',
+};
+
+type RenderResult = { unmount: () => void; container: HTMLElement };
+
+/**
+ * Options to set up the TimePickerField test suite.
+ * Injected by the framework-specific test file (React or Vue).
+ */
+export interface TimePickerFieldTestSetup {
+    components: {
+        TimePickerField: any;
+    };
+    /**
+     * Render a TimePickerField template with controlled state management.
+     *
+     * @param template    JSX render function receiving `{ value, onChange, ... }`.
+     * @param initialArgs Initial props (value, spies, etc.).
+     */
+    renderWithState: (template: (props: any) => any, initialArgs?: Record<string, any>) => RenderResult;
+}
+
+/** Asymmetric matcher for a Date with the given hour and minute (time-of-day). */
+const expectTimeOfDay = (hours: number, minutes: number) =>
+    expect.toSatisfy((d: unknown) => d instanceof Date && d.getHours() === hours && d.getMinutes() === minutes);
+
+export function createTemplates(TimePickerField: any) {
+    /** Default single time-picker template */
+    const defaultTemplate = (props: any) => (
+        <TimePickerField label="Start time" locale="en-US" translations={TRANSLATIONS} {...props} />
+    );
+
+    return { defaultTemplate };
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// Main test suite
+// ═══════════════════════════════════════════════════════════════════
+
+export default function timePickerFieldTests({ components, renderWithState }: TimePickerFieldTestSetup) {
+    const { TimePickerField } = components;
+    const { defaultTemplate } = createTemplates(TimePickerField);
+
+    describe('Static rendering', () => {
+        it('renders the field with the provided label', () => {
+            renderWithState(defaultTemplate, { label: 'Start' });
+            expect(screen.getByRole('combobox', { name: 'Start' })).toBeInTheDocument();
+        });
+
+        it('displays the formatted current value', () => {
+            renderWithState(defaultTemplate, { value: getDateAtTime({ hour: 14, minute: 30 }) });
+            // en-US short time. Node ICU may use a narrow no-break space (U+202F) between time and AM/PM.
+            const inputValue = (screen.getByRole('combobox') as HTMLInputElement).value;
+            expect(inputValue).toMatch(/^2:30/);
+            expect(inputValue.toUpperCase()).toContain('PM');
+        });
+    });
+
+    describe('option list', () => {
+        it('builds 48 entries for the default 30-minute step', async () => {
+            renderWithState(defaultTemplate);
+            await userEvent.click(screen.getByRole('combobox'));
+            expect(screen.queryAllByRole('option')).toHaveLength(48);
+        });
+
+        it('honours `step=15`', async () => {
+            renderWithState(defaultTemplate, { step: 15 });
+            await userEvent.click(screen.getByRole('combobox'));
+            expect(screen.queryAllByRole('option')).toHaveLength(96);
+        });
+
+        it('keeps options before `minTime` visible but disables them', async () => {
+            renderWithState(defaultTemplate, { minTime: getDateAtTime({ hour: 10, minute: 0 }) });
+            await userEvent.click(screen.getByRole('combobox'));
+            const options = screen.queryAllByRole('option');
+            // Full 48-entry list is still rendered.
+            expect(options).toHaveLength(48);
+            // Find option for 9:30 → must be disabled. 10:00 → enabled.
+            const optBefore = options.find((o) => /9:30/.test(o.textContent ?? ''));
+            const optAfter = options.find((o) => /10:00/.test(o.textContent ?? ''));
+            expect(optBefore).toHaveAttribute('aria-disabled', 'true');
+            expect(optAfter).not.toHaveAttribute('aria-disabled', 'true');
+        });
+
+        it('keeps options after `maxTime` visible but disables them', async () => {
+            renderWithState(defaultTemplate, { maxTime: getDateAtTime({ hour: 1, minute: 0 }) });
+            await userEvent.click(screen.getByRole('combobox'));
+            const options = screen.queryAllByRole('option');
+            expect(options).toHaveLength(48);
+            // 1:00 enabled, 1:30 disabled.
+            const optAt = options.find((o) => /1:00/.test(o.textContent ?? ''));
+            const optAfter = options.find((o) => /1:30/.test(o.textContent ?? ''));
+            expect(optAt).not.toHaveAttribute('aria-disabled', 'true');
+            expect(optAfter).toHaveAttribute('aria-disabled', 'true');
+        });
+    });
+
+    describe('typed input parsing', () => {
+        it('parses a typed time on blur and emits the new Date', async () => {
+            const onChange = vi.fn();
+            renderWithState(defaultTemplate, { value: getDateAtTime({ hour: 8, minute: 0 }), onChange });
+            const input = screen.getByRole('combobox');
+            await userEvent.click(input);
+            await userEvent.clear(input);
+            await userEvent.type(input, '10:30');
+            // Blur the input.
+            await userEvent.tab();
+            expect(onChange).toHaveBeenLastCalledWith(expectTimeOfDay(10, 30), undefined, undefined);
+        });
+
+        it('parses a typed time on blur even when it is not in the option list', async () => {
+            const onChange = vi.fn();
+            renderWithState(defaultTemplate, { value: getDateAtTime({ hour: 8, minute: 0 }), onChange });
+            const input = screen.getByRole('combobox') as HTMLInputElement;
+            await userEvent.click(input);
+            await userEvent.clear(input);
+            await userEvent.type(input, '10:33');
+            await userEvent.tab();
+            expect(onChange).toHaveBeenLastCalledWith(expectTimeOfDay(10, 33), undefined, undefined);
+            expect(input.value).toEqual('10:33 AM');
+        });
+
+        it('parses a typed time on blur when starting from an empty field (no initial value)', async () => {
+            const onChange = vi.fn();
+            renderWithState(defaultTemplate, { onChange });
+            const input = screen.getByRole('combobox') as HTMLInputElement;
+            await userEvent.click(input);
+            await userEvent.type(input, '1:01');
+            await userEvent.tab();
+            expect(onChange).toHaveBeenLastCalledWith(expectTimeOfDay(1, 1), undefined, undefined);
+            expect(input.value).toEqual('1:01 AM');
+
+            onChange.mockClear();
+            // Focus and blur again to check if the value keeps the same
+            await userEvent.click(input);
+            await userEvent.tab();
+            expect(onChange).not.toHaveBeenCalled();
+            expect(input.value).toEqual('1:01 AM');
+        });
+
+        it('snaps to `minTime` when the typed input is below it', async () => {
+            const onChange = vi.fn();
+            renderWithState(defaultTemplate, {
+                value: getDateAtTime({ hour: 13, minute: 0 }),
+                minTime: getDateAtTime({ hour: 12, minute: 0 }),
+                onChange,
+            });
+            const input = screen.getByRole('combobox');
+            await userEvent.click(input);
+            await userEvent.clear(input);
+            await userEvent.type(input, '9');
+            await userEvent.tab();
+            expect(onChange).toHaveBeenLastCalledWith(expectTimeOfDay(12, 0), undefined, undefined);
+        });
+
+        it('does not call onChange for an unparseable typed value', async () => {
+            const onChange = vi.fn();
+            renderWithState(defaultTemplate, { value: getDateAtTime({ hour: 8, minute: 0 }), onChange });
+            const input = screen.getByRole('combobox');
+            await userEvent.click(input);
+            await userEvent.clear(input);
+            await userEvent.type(input, 'xyz');
+            await userEvent.tab();
+            // The implicit `clear` may emit `onChange(undefined, ...)`, but no Date should ever be emitted.
+            expect(onChange).not.toHaveBeenCalledWith(expect.any(Date), undefined, undefined);
+        });
+    });
+
+    describe('selection via click', () => {
+        it('emits a Date matching the picked option time-of-day', async () => {
+            const onChange = vi.fn();
+            renderWithState(defaultTemplate, { value: getDateAtTime({ hour: 8, minute: 0 }), onChange });
+            await userEvent.click(screen.getByRole('combobox'));
+            // Match "8:00 PM" (any whitespace between time and AM/PM — ICU may use U+202F).
+            const option = await screen.findByRole('option', { name: /^8:00\sPM$/i });
+            await userEvent.click(option);
+            expect(onChange).toHaveBeenLastCalledWith(expectTimeOfDay(20, 0), undefined, undefined);
+        });
+    });
+}
diff --git a/packages/lumx-core/src/js/components/TimePickerField/index.tsx b/packages/lumx-core/src/js/components/TimePickerField/index.tsx
new file mode 100644
index 0000000000..dd11d18f3a
--- /dev/null
+++ b/packages/lumx-core/src/js/components/TimePickerField/index.tsx
@@ -0,0 +1,97 @@
+import { classNames } from '../../utils';
+import type { GenericProps, HasClassName, HasTheme, LumxClassName } from '../../types';
+import type { TimeOfDay } from '../../utils/time';
+import type { SelectTextFieldTranslations } from '../../utils/select/types';
+
+/**
+ * Component display name.
+ */
+export const COMPONENT_NAME = 'TimePickerField';
+
+/**
+ * Component default class name (BEM root).
+ */
+export const CLASSNAME: LumxClassName<typeof COMPONENT_NAME> = 'lumx-time-picker-field';
+const { block } = classNames.bem(CLASSNAME);
+
+/**
+ * Translations consumed by `TimePickerField` (forwarded as-is to the underlying
+ * `SelectTextField`).
+ */
+export type TimePickerFieldTranslations = Pick<SelectTextFieldTranslations, 'clearLabel' | 'showSuggestionsLabel'>;
+
+/**
+ * Core props for the `TimePickerField` template.
+ */
+export interface TimePickerFieldProps extends HasTheme, HasClassName, GenericProps {
+    /**
+     * Currently selected option. Resolve from the consumer's `Date` value via
+     * `value && timeList.find((e) => e.hour === value.getHours() && e.minute === value.getMinutes())`.
+     */
+    value?: TimeOfDay;
+
+    /** Time options (one entry per `step`-minute slot). */
+    options: TimeOfDay[];
+
+    /** Translation labels (clear button, show-suggestions toggle). */
+    translations: TimePickerFieldTranslations;
+
+    /** Called when the user picks (or clears) an option. */
+    handleChange(next: TimeOfDay | undefined): void;
+
+    /** Called as the user types — wrappers track this to resolve on blur. */
+    handleSearch(typed: string): void;
+
+    /** Called when the input loses focus — wrappers commit the typed value. */
+    handleBlur(): void;
+}
+
+/**
+ * Injected framework-specific components for TimePickerField rendering.
+ */
+export interface TimePickerFieldComponents {
+    /** Framework-specific `SelectTextField` wrapper. */
+    SelectTextField: any;
+    /** Framework-specific `SelectTextField.Option` sub-component (used to render disabled out-of-range entries). */
+    Option: any;
+}
+
+/**
+ * `TimePickerField` core template.
+ *
+ * Renders a `SelectTextField<TimeOfDay>` with an option list built from
+ * `buildTimeList`. Out-of-range options (strictly before `minTime` / after
+ * `maxTime`) remain visible in the dropdown but are rendered as disabled.
+ *
+ * Framework-specific components are passed as a second argument by the
+ * React/Vue wrappers.
+ *
+ * @param props      Component props.
+ * @param components Injected framework-specific components.
+ * @return JSX element.
+ */
+export const TimePickerField = (
+    props: TimePickerFieldProps,
+    { SelectTextField, Option }: TimePickerFieldComponents,
+) => {
+    const { options, translations, className, handleChange, handleSearch, handleBlur, ...fowardedProps } = props;
+
+    return (
+        <SelectTextField
+            {...fowardedProps}
+            className={block([className])}
+            selectionType="single"
+            options={options}
+            getOptionId="name"
+            renderOption={(entry: TimeOfDay) => <Option isDisabled={entry.outOfRange} />}
+            onChange={handleChange}
+            onSearch={handleSearch}
+            onBlur={handleBlur}
+            filter="auto"
+            translations={translations}
+        />
+    );
+};
+
+TimePickerField.displayName = COMPONENT_NAME;
+TimePickerField.className = CLASSNAME;
diff --git a/packages/lumx-react/src/utils/locale/getCurrentLocale.test.ts b/packages/lumx-core/src/js/utils/locale/getCurrentLocale.test.ts
similarity index 99%
rename from packages/lumx-react/src/utils/locale/getCurrentLocale.test.ts
rename to packages/lumx-core/src/js/utils/locale/getCurrentLocale.test.ts
index 69ed837cf1..461408ec8d 100644
--- a/packages/lumx-react/src/utils/locale/getCurrentLocale.test.ts
+++ b/packages/lumx-core/src/js/utils/locale/getCurrentLocale.test.ts
@@ -1,4 +1,5 @@
 import { vi } from 'vitest';
+
 import { getCurrentLocale } from './getCurrentLocale';
 
 describe('getCurrentLocale', () => {
diff --git a/packages/lumx-core/src/js/utils/locale/getCurrentLocale.ts b/packages/lumx-core/src/js/utils/locale/getCurrentLocale.ts
new file mode 100644
index 0000000000..cfcb840638
--- /dev/null
+++ b/packages/lumx-core/src/js/utils/locale/getCurrentLocale.ts
@@ -0,0 +1,7 @@
+/**
+ * Get current browser locale (BCP-47 string).
+ *
+ * Reads `navigator.languages[0]` (the user's preferred language) with a
+ * fallback to `navigator.language`.
+ */
+export const getCurrentLocale = (): string => navigator.languages?.[0] || navigator.language;
diff --git a/packages/lumx-core/src/js/utils/locale/index.ts b/packages/lumx-core/src/js/utils/locale/index.ts
new file mode 100644
index 0000000000..bcd01d6ab1
--- /dev/null
+++ b/packages/lumx-core/src/js/utils/locale/index.ts
@@ -0,0 +1 @@
+export { getCurrentLocale } from './getCurrentLocale';
diff --git a/packages/lumx-core/src/js/utils/time/buildTimeList.test.ts b/packages/lumx-core/src/js/utils/time/buildTimeList.test.ts
new file mode 100644
index 0000000000..202e6a8951
--- /dev/null
+++ b/packages/lumx-core/src/js/utils/time/buildTimeList.test.ts
@@ -0,0 +1,112 @@
+import { buildTimeList } from './buildTimeList';
+import { getDateAtTime } from './getDateAtTime';
+
+describe(buildTimeList, () => {
+    it('returns 48 entries for the default 30-minute step', () => {
+        const list = buildTimeList();
+        expect(list).toHaveLength(48);
+        expect(list[0]).toMatchObject({ hour: 0, minute: 0, outOfRange: undefined });
+        expect(list[1]).toMatchObject({ hour: 0, minute: 30, outOfRange: undefined });
+        expect(list[47]).toMatchObject({ hour: 23, minute: 30, outOfRange: undefined });
+    });
+
+    it('returns 96 entries for a 15-minute step', () => {
+        const list = buildTimeList({ step: 15 });
+        expect(list).toHaveLength(96);
+        expect(list[2]).toMatchObject({ hour: 0, minute: 30, outOfRange: undefined });
+    });
+
+    it('returns 24 entries for a 60-minute step', () => {
+        const list = buildTimeList({ step: 60 });
+        expect(list).toHaveLength(24);
+        expect(list[5]).toMatchObject({ hour: 5, minute: 0, outOfRange: undefined });
+    });
+
+    it('returns the single 00:00 entry for a step larger than a day', () => {
+        const list = buildTimeList({ step: 2000 });
+        expect(list).toHaveLength(1);
+        expect(list[0]).toMatchObject({ hour: 0, minute: 0, outOfRange: undefined });
+    });
+
+    it('returns an empty list for an invalid step', () => {
+        expect(buildTimeList({ step: 0 })).toEqual([]);
+        expect(buildTimeList({ step: -10 })).toEqual([]);
+        expect(buildTimeList({ step: NaN })).toEqual([]);
+        expect(buildTimeList({ step: Infinity })).toEqual([]);
+        // Non-integer steps are rejected (would otherwise drift the iteration).
+        expect(buildTimeList({ step: 1.5 })).toEqual([]);
+    });
+
+    it('marks entries before `minTime` as outOfRange but keeps them in the list', () => {
+        const list = buildTimeList({ minTime: getDateAtTime({ hour: 22, minute: 30 }) });
+        // Still 48 entries — none are filtered out.
+        expect(list).toHaveLength(48);
+        expect(list[0]).toMatchObject({ hour: 0, minute: 0, outOfRange: true });
+        expect(list[44]).toMatchObject({ hour: 22, minute: 0, outOfRange: true });
+        expect(list[45]).toMatchObject({ hour: 22, minute: 30, outOfRange: undefined });
+        expect(list[47]).toMatchObject({ hour: 23, minute: 30, outOfRange: undefined });
+    });
+
+    it('marks entries after `maxTime` as outOfRange but keeps them in the list', () => {
+        const list = buildTimeList({ maxTime: getDateAtTime({ hour: 1, minute: 0 }) });
+        expect(list).toHaveLength(48);
+        expect(list[0]).toMatchObject({ hour: 0, minute: 0, outOfRange: undefined });
+        expect(list[2]).toMatchObject({ hour: 1, minute: 0, outOfRange: undefined });
+        expect(list[3]).toMatchObject({ hour: 1, minute: 30, outOfRange: true });
+        expect(list[47]).toMatchObject({ hour: 23, minute: 30, outOfRange: true });
+    });
+
+    it('marks entries outside both `minTime` and `maxTime` as outOfRange', () => {
+        // 09:00 → 10:00 in range, everything else out-of-range.
+        const list = buildTimeList({
+            minTime: getDateAtTime({ hour: 9, minute: 0 }),
+            maxTime: getDateAtTime({ hour: 10, minute: 0 }),
+        });
+        expect(list).toHaveLength(48);
+        const inRange = list.filter((e) => !e.outOfRange);
+        expect(inRange).toMatchObject([
+            { hour: 9, minute: 0, outOfRange: undefined },
+            { hour: 9, minute: 30, outOfRange: undefined },
+            { hour: 10, minute: 0, outOfRange: undefined },
+        ]);
+    });
+
+    it('marks every entry as outOfRange when `minTime` is after `maxTime`', () => {
+        const list = buildTimeList({
+            minTime: getDateAtTime({ hour: 12, minute: 0 }),
+            maxTime: getDateAtTime({ hour: 9, minute: 0 }),
+        });
+        expect(list).toHaveLength(48);
+        expect(list.every((e) => e.outOfRange === true)).toBe(true);
+    });
+
+    it('marks a single entry as in range when `minTime` exactly matches a step boundary equal to `maxTime`', () => {
+        const list = buildTimeList({
+            minTime: getDateAtTime({ hour: 9, minute: 0 }),
+            maxTime: getDateAtTime({ hour: 9, minute: 0 }),
+        });
+        const inRange = list.filter((e) => !e.outOfRange);
+        expect(inRange).toMatchObject([{ hour: 9, minute: 0, outOfRange: undefined }]);
+    });
+
+    describe('name', () => {
+        it('omits `name` when no locale is provided', () => {
+            const list = buildTimeList();
+            expect(list.every((e) => e.name === undefined)).toBe(true);
+        });
+
+        it('populates `name` with a locale-aware short time when `locale` is provided', () => {
+            const list = buildTimeList({ step: 60, locale: 'en-US' });
+            // 14:00 → "2:00 PM" (Node ICU may use a narrow no-break space U+202F before AM/PM).
+            const fourteen = list.find((e) => e.hour === 14)!;
+            expect(fourteen.name).toMatch(/^2:00/);
+            expect(fourteen.name?.toUpperCase()).toContain('PM');
+        });
+
+        it('uses 24-hour formatting for fr-FR', () => {
+            const list = buildTimeList({ step: 60, locale: 'fr-FR' });
+            const fourteen = list.find((e) => e.hour === 14)!;
+            expect(fourteen.name).toMatch(/^14[:hH]00$/);
+        });
+    });
+});
diff --git a/packages/lumx-core/src/js/utils/time/buildTimeList.ts b/packages/lumx-core/src/js/utils/time/buildTimeList.ts
new file mode 100644
index 0000000000..ab26df970c
--- /dev/null
+++ b/packages/lumx-core/src/js/utils/time/buildTimeList.ts
@@ -0,0 +1,65 @@
+import { formatTime } from './formatTime';
+import { getDateAtTime } from './getDateAtTime';
+import { timeOfDayMinutes } from './timeOfDayMinutes';
+
+/**
+ * A time-of-day (24h), independent of any date or time zone. Canonical
+ * exchange shape for the time utilities and `TimePickerField`.
+ */
+export interface TimeOfDay {
+    /** 0–23 */
+    hour: number;
+    /** 0–59 */
+    minute: number;
+    /** Locale-aware short display string. Populated by `buildTimeList` when `locale` is set. */
+    name?: string;
+    /**
+     * `true` when strictly outside `[minTime, maxTime]`. Set by `buildTimeList`;
+     * consumers typically forward this as `isDisabled` on the rendered option.
+     */
+    outOfRange?: boolean;
+}
+
+/** Options for `buildTimeList`. */
+export interface BuildTimeListOptions {
+    /** Positive integer minute interval between entries. @default 30 */
+    step?: number;
+    /** Lower bound (date part ignored). Entries before are kept but marked `outOfRange`. */
+    minTime?: Date;
+    /** Upper bound (date part ignored). Entries after are kept but marked `outOfRange`. */
+    maxTime?: Date;
+    /** BCP-47 locale used to populate `name` on each entry. */
+    locale?: string;
+}
+
+const MINUTES_IN_HOUR = 60;
+const MINUTES_IN_DAY = 24 * MINUTES_IN_HOUR;
+
+/**
+ * Build a full-day list of `TimeOfDay` entries spaced `step` minutes apart.
+ * Out-of-bounds entries are kept (with `outOfRange: true`) so consumers can
+ * render them as visible-but-unselectable. Returns `[]` for invalid `step`.
+ */
+export function buildTimeList(options: BuildTimeListOptions = {}): TimeOfDay[] {
+    const { step = 30, minTime, maxTime, locale } = options;
+    if (!Number.isInteger(step) || step <= 0) {
+        return [];
+    }
+
+    const minMinutes = minTime ? timeOfDayMinutes(minTime) : undefined;
+    const maxMinutes = maxTime ? timeOfDayMinutes(maxTime) : undefined;
+
+    const list: TimeOfDay[] = [];
+    for (let minutes = 0; minutes < MINUTES_IN_DAY; minutes += step) {
+        const hour = Math.floor(minutes / MINUTES_IN_HOUR);
+        const minute = minutes % MINUTES_IN_HOUR;
+        const outOfRange =
+            (minMinutes !== undefined && minutes < minMinutes) ||
+            (maxMinutes !== undefined && minutes > maxMinutes) ||
+            undefined;
+        const name = locale ? formatTime(getDateAtTime({ hour, minute }), locale) : undefined;
+
+        list.push({ hour, minute, name, outOfRange });
+    }
+    return list;
+}
diff --git a/packages/lumx-core/src/js/utils/time/formatTime.test.ts b/packages/lumx-core/src/js/utils/time/formatTime.test.ts
new file mode 100644
index 0000000000..4322006d05
--- /dev/null
+++ b/packages/lumx-core/src/js/utils/time/formatTime.test.ts
@@ -0,0 +1,22 @@
+import { formatTime } from './formatTime';
+
+describe(formatTime, () => {
+    it('formats a time in 12-hour locale (en-US)', () => {
+        // 14:30 → "2:30 PM" (en-US uses 12h with AM/PM by default).
+        // ICU may use a narrow no-break space (U+202F) before AM/PM.
+        expect(formatTime(new Date(2024, 0, 15, 14, 30), 'en-US')).toMatch(/^2:30\s?(?:PM|pm)/i);
+    });
+
+    it('formats a time in 24-hour locale (fr-FR)', () => {
+        expect(formatTime(new Date(2024, 0, 15, 14, 30), 'fr-FR')).toMatch(/14[:h]30/);
+    });
+
+    it('zero-pads minutes', () => {
+        expect(formatTime(new Date(2024, 0, 15, 9, 5), 'en-US')).toMatch(/9:05/);
+    });
+
+    it('handles midnight', () => {
+        // Locale-dependent: hour: 'numeric' may produce '0:00' or '00:00'.
+        expect(formatTime(new Date(2024, 0, 15, 0, 0), 'fr-FR')).toMatch(/^00?[:h]00/);
+    });
+});
diff --git a/packages/lumx-core/src/js/utils/time/formatTime.ts b/packages/lumx-core/src/js/utils/time/formatTime.ts
new file mode 100644
index 0000000000..24e055e514
--- /dev/null
+++ b/packages/lumx-core/src/js/utils/time/formatTime.ts
@@ -0,0 +1,8 @@
+/**
+ * Format a time-of-day as a locale-aware short time (e.g. `'10:30 AM'`,
+ * `'10:30'`). Hour is `numeric` (not `'2-digit'`); some locales insert a
+ * narrow no-break space (U+202F) before AM/PM.
+ */
+export function formatTime(date: Date, locale: string): string {
+    return date.toLocaleTimeString(locale, { hour: 'numeric', minute: '2-digit' });
+}
diff --git a/packages/lumx-core/src/js/utils/time/getDateAtTime.test.ts b/packages/lumx-core/src/js/utils/time/getDateAtTime.test.ts
new file mode 100644
index 0000000000..33ae44792c
--- /dev/null
+++ b/packages/lumx-core/src/js/utils/time/getDateAtTime.test.ts
@@ -0,0 +1,42 @@
+import { getDateAtTime } from './getDateAtTime';
+
+describe(getDateAtTime, () => {
+    it('preserves the date part of the reference', () => {
+        const reference = new Date(2024, 5, 15, 8, 30, 45, 123);
+        const result = getDateAtTime({ hour: 14, minute: 30 }, reference);
+        expect(result.getFullYear()).toBe(2024);
+        expect(result.getMonth()).toBe(5);
+        expect(result.getDate()).toBe(15);
+    });
+
+    it('sets the requested hour and minute', () => {
+        const reference = new Date(2024, 5, 15);
+        const result = getDateAtTime({ hour: 14, minute: 30 }, reference);
+        expect(result.getHours()).toBe(14);
+        expect(result.getMinutes()).toBe(30);
+    });
+
+    it('zeroes seconds and milliseconds', () => {
+        const reference = new Date(2024, 5, 15, 8, 30, 45, 123);
+        const result = getDateAtTime({ hour: 14, minute: 30 }, reference);
+        expect(result.getSeconds()).toBe(0);
+        expect(result.getMilliseconds()).toBe(0);
+    });
+
+    it('does not mutate the reference', () => {
+        const reference = new Date(2024, 5, 15, 8, 30);
+        getDateAtTime({ hour: 14, minute: 30 }, reference);
+        expect(reference.getHours()).toBe(8);
+        expect(reference.getMinutes()).toBe(30);
+    });
+
+    it('falls back to today when no reference is provided', () => {
+        const today = new Date();
+        const result = getDateAtTime({ hour: 14, minute: 30 });
+        expect(result.getFullYear()).toBe(today.getFullYear());
+        expect(result.getMonth()).toBe(today.getMonth());
+        expect(result.getDate()).toBe(today.getDate());
+        expect(result.getHours()).toBe(14);
+        expect(result.getMinutes()).toBe(30);
+    });
+});
diff --git a/packages/lumx-core/src/js/utils/time/getDateAtTime.ts b/packages/lumx-core/src/js/utils/time/getDateAtTime.ts
new file mode 100644
index 0000000000..b2fc12c529
--- /dev/null
+++ b/packages/lumx-core/src/js/utils/time/getDateAtTime.ts
@@ -0,0 +1,9 @@
+/**
+ * Build a new `Date` with the given time-of-day, inheriting the date part of
+ * `reference` (or today). Seconds/ms zeroed; `reference` is not mutated.
+ */
+export function getDateAtTime({ hour, minute }: { hour: number; minute: number }, reference?: Date): Date {
+    const next = reference ? new Date(reference) : new Date();
+    next.setHours(hour, minute, 0, 0);
+    return next;
+}
diff --git a/packages/lumx-core/src/js/utils/time/index.ts b/packages/lumx-core/src/js/utils/time/index.ts
new file mode 100644
index 0000000000..c1d0c5131b
--- /dev/null
+++ b/packages/lumx-core/src/js/utils/time/index.ts
@@ -0,0 +1,9 @@
+/** Time of day utilities */
+
+export { buildTimeList, type BuildTimeListOptions, type TimeOfDay } from './buildTimeList';
+export { formatTime } from './formatTime';
+export { parseTimeInput } from './parseTimeInput';
+export { getDateAtTime } from './getDateAtTime';
+export { timeOfDayMinutes } from './timeOfDayMinutes';
+export { snapTimeToBounds } from './snapTimeToBounds';
+export { isDateOnTime } from './isDateOnTime';
diff --git a/packages/lumx-core/src/js/utils/time/isDateOnTime.test.ts b/packages/lumx-core/src/js/utils/time/isDateOnTime.test.ts
new file mode 100644
index 0000000000..88cbacfaf8
--- /dev/null
+++ b/packages/lumx-core/src/js/utils/time/isDateOnTime.test.ts
@@ -0,0 +1,19 @@
+import { isDateOnTime } from './isDateOnTime';
+
+describe(isDateOnTime, () => {
+    it('returns true when hour and minute match', () => {
+        expect(isDateOnTime(new Date(2024, 0, 1, 14, 30, 45, 123), { hour: 14, minute: 30 })).toBe(true);
+    });
+
+    it('returns false when hour differs', () => {
+        expect(isDateOnTime(new Date(2024, 0, 1, 13, 30), { hour: 14, minute: 30 })).toBe(false);
+    });
+
+    it('returns false when minute differs', () => {
+        expect(isDateOnTime(new Date(2024, 0, 1, 14, 0), { hour: 14, minute: 30 })).toBe(false);
+    });
+
+    it('ignores seconds and milliseconds', () => {
+        expect(isDateOnTime(new Date(2024, 0, 1, 14, 30, 59, 999), { hour: 14, minute: 30 })).toBe(true);
+    });
+});
diff --git a/packages/lumx-core/src/js/utils/time/isDateOnTime.ts b/packages/lumx-core/src/js/utils/time/isDateOnTime.ts
new file mode 100644
index 0000000000..f42875ba9f
--- /dev/null
+++ b/packages/lumx-core/src/js/utils/time/isDateOnTime.ts
@@ -0,0 +1,7 @@
+/**
+ * Returns `true` when the time-of-day of `date` matches `time` (hour and
+ * minute). Seconds and milliseconds are ignored.
+ */
+export function isDateOnTime(date: Date, time: { hour: number; minute: number }): boolean {
+    return date.getHours() === time.hour && date.getMinutes() === time.minute;
+}
diff --git a/packages/lumx-core/src/js/utils/time/parseTimeInput.test.ts b/packages/lumx-core/src/js/utils/time/parseTimeInput.test.ts
new file mode 100644
index 0000000000..dbcba033ff
--- /dev/null
+++ b/packages/lumx-core/src/js/utils/time/parseTimeInput.test.ts
@@ -0,0 +1,204 @@
+import { parseTimeInput } from './parseTimeInput';
+
+describe(parseTimeInput, () => {
+    describe('bare hour (24h)', () => {
+        it('parses single-digit hour', () => {
+            expect(parseTimeInput('9')).toEqual({ hour: 9, minute: 0 });
+        });
+
+        it('parses two-digit hour', () => {
+            expect(parseTimeInput('14')).toEqual({ hour: 14, minute: 0 });
+        });
+
+        it('parses 0 as midnight', () => {
+            expect(parseTimeInput('0')).toEqual({ hour: 0, minute: 0 });
+        });
+
+        it('parses 23 as last hour', () => {
+            expect(parseTimeInput('23')).toEqual({ hour: 23, minute: 0 });
+        });
+    });
+
+    describe('hour with am/pm (12h)', () => {
+        it('parses "10am"', () => {
+            expect(parseTimeInput('10am')).toEqual({ hour: 10, minute: 0 });
+        });
+
+        it('parses "2pm"', () => {
+            expect(parseTimeInput('2pm')).toEqual({ hour: 14, minute: 0 });
+        });
+
+        it('parses "12am" as midnight', () => {
+            expect(parseTimeInput('12am')).toEqual({ hour: 0, minute: 0 });
+        });
+
+        it('parses "12pm" as noon', () => {
+            expect(parseTimeInput('12pm')).toEqual({ hour: 12, minute: 0 });
+        });
+
+        it('accepts "p" as a pm shortcut', () => {
+            expect(parseTimeInput('5p')).toEqual({ hour: 17, minute: 0 });
+        });
+
+        it('accepts "a" as an am shortcut', () => {
+            expect(parseTimeInput('5a')).toEqual({ hour: 5, minute: 0 });
+        });
+
+        it('accepts whitespace before am/pm', () => {
+            expect(parseTimeInput('5 pm')).toEqual({ hour: 17, minute: 0 });
+        });
+    });
+
+    describe('hour and minutes (24h)', () => {
+        it('parses "10:30"', () => {
+            expect(parseTimeInput('10:30')).toEqual({ hour: 10, minute: 30 });
+        });
+
+        it('parses "1030" (no colon)', () => {
+            expect(parseTimeInput('1030')).toEqual({ hour: 10, minute: 30 });
+        });
+
+        it('parses "23:59"', () => {
+            expect(parseTimeInput('23:59')).toEqual({ hour: 23, minute: 59 });
+        });
+
+        it('parses "0:00"', () => {
+            expect(parseTimeInput('0:00')).toEqual({ hour: 0, minute: 0 });
+        });
+
+        it('parses "12:30" (24h, hour 12)', () => {
+            expect(parseTimeInput('12:30')).toEqual({ hour: 12, minute: 30 });
+        });
+    });
+
+    describe('hour and minutes with am/pm (12h)', () => {
+        it('parses "10:30 AM"', () => {
+            expect(parseTimeInput('10:30 AM')).toEqual({ hour: 10, minute: 30 });
+        });
+
+        it('parses "2:30pm"', () => {
+            expect(parseTimeInput('2:30pm')).toEqual({ hour: 14, minute: 30 });
+        });
+
+        it('parses "1230pm" (no colon)', () => {
+            expect(parseTimeInput('1230pm')).toEqual({ hour: 12, minute: 30 });
+        });
+
+        it('parses "12:00am" as midnight', () => {
+            expect(parseTimeInput('12:00am')).toEqual({ hour: 0, minute: 0 });
+        });
+
+        it('accepts mixed case am/pm suffix', () => {
+            expect(parseTimeInput('10:30Am')).toEqual({ hour: 10, minute: 30 });
+            expect(parseTimeInput('2:30Pm')).toEqual({ hour: 14, minute: 30 });
+        });
+    });
+
+    describe('alternate 12h formats', () => {
+        it('parses "3:45 PM"', () => {
+            expect(parseTimeInput('3:45 PM')).toEqual({ hour: 15, minute: 45 });
+        });
+
+        it('parses "3:45 pm"', () => {
+            expect(parseTimeInput('3:45 pm')).toEqual({ hour: 15, minute: 45 });
+        });
+
+        it('parses "3:45 p.m." (dotted)', () => {
+            expect(parseTimeInput('3:45 p.m.')).toEqual({ hour: 15, minute: 45 });
+        });
+
+        it('parses "3:45 a.m." (dotted)', () => {
+            expect(parseTimeInput('3:45 a.m.')).toEqual({ hour: 3, minute: 45 });
+        });
+
+        it('parses "3.45 PM" (UK dot separator)', () => {
+            expect(parseTimeInput('3.45 PM')).toEqual({ hour: 15, minute: 45 });
+        });
+
+        it('parses "3:45PM" (no space)', () => {
+            expect(parseTimeInput('3:45PM')).toEqual({ hour: 15, minute: 45 });
+        });
+    });
+
+    describe('alternate 24h formats', () => {
+        it('parses "15:45" (colon)', () => {
+            expect(parseTimeInput('15:45')).toEqual({ hour: 15, minute: 45 });
+        });
+
+        it('parses "15.45" (dot, DE/FR/IT)', () => {
+            expect(parseTimeInput('15.45')).toEqual({ hour: 15, minute: 45 });
+        });
+
+        it('parses "15h45" (French style)', () => {
+            expect(parseTimeInput('15h45')).toEqual({ hour: 15, minute: 45 });
+        });
+
+        it('parses "1545" (military, no separator)', () => {
+            expect(parseTimeInput('1545')).toEqual({ hour: 15, minute: 45 });
+        });
+
+        it('parses "15:45:00" (seconds ignored)', () => {
+            expect(parseTimeInput('15:45:00')).toEqual({ hour: 15, minute: 45 });
+        });
+
+        it('parses "15:45:30" (non-zero seconds ignored)', () => {
+            expect(parseTimeInput('15:45:30')).toEqual({ hour: 15, minute: 45 });
+        });
+    });
+
+    describe('ISO 8601', () => {
+        it('parses "T15:45"', () => {
+            expect(parseTimeInput('T15:45')).toEqual({ hour: 15, minute: 45 });
+        });
+
+        it('parses "15:45Z" (UTC marker)', () => {
+            expect(parseTimeInput('15:45Z')).toEqual({ hour: 15, minute: 45 });
+        });
+
+        it('parses "T15:45Z"', () => {
+            expect(parseTimeInput('T15:45Z')).toEqual({ hour: 15, minute: 45 });
+        });
+    });
+
+    describe('invalid input', () => {
+        it('returns undefined for empty string', () => {
+            expect(parseTimeInput('')).toBeUndefined();
+        });
+
+        it('returns undefined for non-numeric input', () => {
+            expect(parseTimeInput('abc')).toBeUndefined();
+        });
+
+        it('returns undefined for hour out of range (24h)', () => {
+            expect(parseTimeInput('24')).toBeUndefined();
+            expect(parseTimeInput('25')).toBeUndefined();
+        });
+
+        it('returns undefined for negative input', () => {
+            expect(parseTimeInput('-1')).toBeUndefined();
+        });
+
+        it('returns undefined for single-digit minutes', () => {
+            // '1:5' would be ambiguous; require zero-padding.
+            expect(parseTimeInput('1:5')).toBeUndefined();
+        });
+
+        it('returns undefined for minute out of range', () => {
+            expect(parseTimeInput('10:65')).toBeUndefined();
+        });
+
+        it('returns undefined for non-string input', () => {
+            // @ts-expect-error — runtime guard is being tested.
+            expect(parseTimeInput(undefined)).toBeUndefined();
+            // @ts-expect-error — runtime guard is being tested.
+            expect(parseTimeInput(null)).toBeUndefined();
+            // @ts-expect-error — runtime guard is being tested.
+            expect(parseTimeInput(123)).toBeUndefined();
+        });
+
+        it('trims surrounding whitespace before matching', () => {
+            expect(parseTimeInput('  10:30  ')).toEqual({ hour: 10, minute: 30 });
+            expect(parseTimeInput('\t10:30\n')).toEqual({ hour: 10, minute: 30 });
+        });
+    });
+});
diff --git a/packages/lumx-core/src/js/utils/time/parseTimeInput.ts b/packages/lumx-core/src/js/utils/time/parseTimeInput.ts
new file mode 100644
index 0000000000..2a0194cc08
--- /dev/null
+++ b/packages/lumx-core/src/js/utils/time/parseTimeInput.ts
@@ -0,0 +1,50 @@
+import type { TimeOfDay } from './buildTimeList';
+
+/**
+ * Match a free-form time. Supports:
+ * - 12h with am/pm suffix (`a`, `am`, `p`, `pm`, `a.m.`, `p.m.`), optional whitespace
+ * - 24h with colon (`15:45`), dot (`15.45`), `h` (`15h45`) or no separator (`1545`)
+ * - Optional seconds segment (ignored): `15:45:00`, `15.45.00`
+ * - Optional ISO `T` prefix and trailing `Z` (UTC marker)
+ *
+ * Capture groups:
+ *   1: hour, 2: minutes (optional), 3: am/pm marker (optional)
+ */
+const RE_TIME = /^T?(\d{1,2})(?:[:.h]?([0-5]\d)(?:[:.]?[0-5]\d)?)?\s*(a\.?m?\.?|p\.?m?\.?)?Z?$/i;
+
+/**
+ * Parse a free-form user time input into a 24h `TimeOfDay`. Accepts a wide
+ * range of formats:
+ *
+ * - 12h AM/PM: `'2pm'`, `'2 PM'`, `'2:30pm'`, `'3.45 PM'`, `'3:45 p.m.'`
+ * - 24h colon: `'10:30'`, `'15:45'`
+ * - 24h dot (DE/FR/IT): `'15.45'`
+ * - 24h French: `'15h45'`
+ * - Military / no separator: `'1545'`, `'1030pm'`
+ * - With seconds (ignored): `'15:45:00'`
+ * - ISO 8601: `'T15:45'`, `'15:45Z'`
+ *
+ * Whitespace is trimmed. Returns `undefined` if no format matches.
+ */
+export function parseTimeInput(raw: string): TimeOfDay | undefined {
+    if (typeof raw !== 'string') return undefined;
+    const match = raw.trim().match(RE_TIME);
+    if (!match) return undefined;
+
+    const [, rawHour, rawMinute, ampm] = match;
+    let hour = Number(rawHour);
+    const minute = rawMinute ? Number(rawMinute) : 0;
+
+    if (ampm) {
+        // 12h: hour must be 1..12; convert to 24h (12am→0, 12pm→12).
+        if (hour < 1 || hour > 12) return undefined;
+        const isPm = ampm[0].toLowerCase() === 'p';
+        if (hour === 12) hour = isPm ? 12 : 0;
+        else if (isPm) hour += 12;
+    } else if (hour > 23) {
+        // 24h: hour must be 0..23.
+        return undefined;
+    }
+
+    return { hour, minute };
+}
diff --git a/packages/lumx-core/src/js/utils/time/snapTimeToBounds.test.ts b/packages/lumx-core/src/js/utils/time/snapTimeToBounds.test.ts
new file mode 100644
index 0000000000..d200dbc9d9
--- /dev/null
+++ b/packages/lumx-core/src/js/utils/time/snapTimeToBounds.test.ts
@@ -0,0 +1,43 @@
+import { snapTimeToBounds } from './snapTimeToBounds';
+import { getDateAtTime } from './getDateAtTime';
+
+describe(snapTimeToBounds, () => {
+    it('returns the input unchanged when no bounds are provided', () => {
+        const time = { hour: 14, minute: 30 };
+        expect(snapTimeToBounds(time)).toBe(time);
+    });
+
+    it('returns the input unchanged when within bounds', () => {
+        const time = { hour: 14, minute: 30 };
+        expect(
+            snapTimeToBounds(time, getDateAtTime({ hour: 8, minute: 0 }), getDateAtTime({ hour: 18, minute: 0 })),
+        ).toBe(time);
+    });
+
+    it('snaps up to `minTime` when input is below it', () => {
+        const time = { hour: 6, minute: 0 };
+        expect(snapTimeToBounds(time, getDateAtTime({ hour: 8, minute: 30 }))).toEqual({ hour: 8, minute: 30 });
+    });
+
+    it('snaps down to `maxTime` when input is above it', () => {
+        const time = { hour: 22, minute: 0 };
+        expect(snapTimeToBounds(time, undefined, getDateAtTime({ hour: 18, minute: 15 }))).toEqual({
+            hour: 18,
+            minute: 15,
+        });
+    });
+
+    it('keeps the input when it equals a bound', () => {
+        const time = { hour: 8, minute: 0 };
+        expect(
+            snapTimeToBounds(time, getDateAtTime({ hour: 8, minute: 0 }), getDateAtTime({ hour: 18, minute: 0 })),
+        ).toBe(time);
+    });
+
+    it('ignores the date part of the bounds', () => {
+        const time = { hour: 6, minute: 0 };
+        // minTime "20 days ago" at 09:00 — only the time-of-day matters.
+        const oldDate = new Date(2000, 0, 1, 9, 0, 0, 0);
+        expect(snapTimeToBounds(time, oldDate)).toEqual({ hour: 9, minute: 0 });
+    });
+});
diff --git a/packages/lumx-core/src/js/utils/time/snapTimeToBounds.ts b/packages/lumx-core/src/js/utils/time/snapTimeToBounds.ts
new file mode 100644
index 0000000000..9147873469
--- /dev/null
+++ b/packages/lumx-core/src/js/utils/time/snapTimeToBounds.ts
@@ -0,0 +1,19 @@
+import type { TimeOfDay } from './buildTimeList';
+import { timeOfDayMinutes } from './timeOfDayMinutes';
+
+/**
+ * Clamp `time` to `[minTime, maxTime]`. Inputs strictly before `minTime` snap
+ * up; inputs strictly after `maxTime` snap down; otherwise returned unchanged.
+ * Only the time-of-day of `minTime`/`maxTime` is used.
+ */
+export function snapTimeToBounds(time: TimeOfDay, minTime?: Date, maxTime?: Date): TimeOfDay {
+    const totalMinutes = time.hour * 60 + time.minute;
+
+    if (minTime && totalMinutes < timeOfDayMinutes(minTime)) {
+        return { hour: minTime.getHours(), minute: minTime.getMinutes() };
+    }
+    if (maxTime && totalMinutes > timeOfDayMinutes(maxTime)) {
+        return { hour: maxTime.getHours(), minute: maxTime.getMinutes() };
+    }
+    return time;
+}
diff --git a/packages/lumx-core/src/js/utils/time/timeOfDayMinutes.test.ts b/packages/lumx-core/src/js/utils/time/timeOfDayMinutes.test.ts
new file mode 100644
index 0000000000..168728a14b
--- /dev/null
+++ b/packages/lumx-core/src/js/utils/time/timeOfDayMinutes.test.ts
@@ -0,0 +1,15 @@
+import { timeOfDayMinutes } from './timeOfDayMinutes';
+
+describe(timeOfDayMinutes, () => {
+    it('returns 0 for midnight', () => {
+        expect(timeOfDayMinutes(new Date(2024, 0, 15, 0, 0))).toBe(0);
+    });
+
+    it('returns 870 for 14:30', () => {
+        expect(timeOfDayMinutes(new Date(2024, 0, 15, 14, 30))).toBe(14 * 60 + 30);
+    });
+
+    it('returns 1439 for 23:59', () => {
+        expect(timeOfDayMinutes(new Date(2024, 0, 15, 23, 59))).toBe(1439);
+    });
+});
diff --git a/packages/lumx-core/src/js/utils/time/timeOfDayMinutes.ts b/packages/lumx-core/src/js/utils/time/timeOfDayMinutes.ts
new file mode 100644
index 0000000000..29f530930c
--- /dev/null
+++ b/packages/lumx-core/src/js/utils/time/timeOfDayMinutes.ts
@@ -0,0 +1,6 @@
+/**
+ * Return the time-of-day of `date` in minutes since 00:00 (date part ignored).
+ */
+export function timeOfDayMinutes(date: Date): number {
+    return date.getHours() * 60 + date.getMinutes();
+}
diff --git a/packages/lumx-react/src/components/date-picker/DatePickerControlled.tsx b/packages/lumx-react/src/components/date-picker/DatePickerControlled.tsx
index 7cc3d6d7d7..5fedd8a67e 100644
--- a/packages/lumx-react/src/components/date-picker/DatePickerControlled.tsx
+++ b/packages/lumx-react/src/components/date-picker/DatePickerControlled.tsx
@@ -14,7 +14,7 @@ import {
 import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';
 import { getMonthCalendar } from '@lumx/react/utils/date/getMonthCalendar';
 import { isSameDay } from '@lumx/react/utils/date/isSameDay';
-import { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';
+import { getCurrentLocale } from '@lumx/core/js/utils/locale/getCurrentLocale';
 import { parseLocale } from '@lumx/react/utils/locale/parseLocale';
 import { Locale } from '@lumx/react/utils/locale/types';
 import { usePreviousValue } from '@lumx/react/hooks/usePreviousValue';
diff --git a/packages/lumx-react/src/components/date-picker/DatePickerField.tsx b/packages/lumx-react/src/components/date-picker/DatePickerField.tsx
index 135284da92..0cab16d1e7 100644
--- a/packages/lumx-react/src/components/date-picker/DatePickerField.tsx
+++ b/packages/lumx-react/src/components/date-picker/DatePickerField.tsx
@@ -2,7 +2,7 @@ import React, { SyntheticEvent, useCallback, useRef } from 'react';
 
 import { DatePicker, IconButtonProps, Placement, PopoverDialog, TextField, TextFieldProps } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';
+import { getCurrentLocale } from '@lumx/core/js/utils/locale/getCurrentLocale';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
diff --git a/packages/lumx-react/src/components/select-text-field/SelectTextField.tsx b/packages/lumx-react/src/components/select-text-field/SelectTextField.tsx
index 79a20eb93b..0e8bda3e8d 100644
--- a/packages/lumx-react/src/components/select-text-field/SelectTextField.tsx
+++ b/packages/lumx-react/src/components/select-text-field/SelectTextField.tsx
@@ -231,15 +231,21 @@ export const SelectTextField = <O,>(props: SelectTextFieldProps<O>) => {
         [onChange, onSearch, externalOnClear],
     );
 
-    // Handle blur: reset input to selected value name, then call consumer's onBlur.
+    // Handle blur: notify consumer, then reset search state.
     const handleBlur = useCallback(
         (event?: React.FocusEvent) => {
-            setIsSearching(false);
-            setSearchText('');
             onSearch?.('');
             externalOnBlur?.(event as React.FocusEvent);
+
+            if (externalSearchValue) {
+                setSearchText(externalSearchValue);
+                setIsSearching(true);
+            } else {
+                setSearchText('');
+                setIsSearching(false);
+            }
         },
-        [externalOnBlur, onSearch],
+        [externalOnBlur, externalSearchValue, onSearch],
     );
 
     const showClear = !isMultiple && !isAnyDisabled && hasClearButton && value !== undefined && value !== null;
diff --git a/packages/lumx-react/src/components/time-picker-field/TimePickerField.stories.tsx b/packages/lumx-react/src/components/time-picker-field/TimePickerField.stories.tsx
new file mode 100644
index 0000000000..ac35a4be23
--- /dev/null
+++ b/packages/lumx-react/src/components/time-picker-field/TimePickerField.stories.tsx
@@ -0,0 +1,22 @@
+import { TimePickerField } from '@lumx/react';
+import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { setup } from '@lumx/core/js/components/TimePickerField/Stories';
+
+const { meta, ...stories } = setup({
+    component: TimePickerField,
+    decorators: { withValueOnChange, withCombinations },
+});
+
+export default {
+    title: 'LumX components/time-picker-field/TimePickerField',
+    ...meta,
+};
+
+export const Default = { ...stories.Default };
+export const WithValue = { ...stories.WithValue };
+export const Step15 = { ...stories.Step15 };
+export const WithMinTime = { ...stories.WithMinTime };
+export const WithMaxTime = { ...stories.WithMaxTime };
+export const French = { ...stories.French };
+export const Disabled = { ...stories.Disabled };
diff --git a/packages/lumx-react/src/components/time-picker-field/TimePickerField.test.tsx b/packages/lumx-react/src/components/time-picker-field/TimePickerField.test.tsx
new file mode 100644
index 0000000000..715b06af50
--- /dev/null
+++ b/packages/lumx-react/src/components/time-picker-field/TimePickerField.test.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import timePickerFieldTests, { TRANSLATIONS } from '@lumx/core/js/components/TimePickerField/Tests';
+import { commonTestsSuiteRTL, type SetupRenderOptions } from '@lumx/react/testing/utils';
+import { getByClassName, getByTagName } from '@lumx/react/testing/utils/queries';
+import { TextField } from '@lumx/react';
+
+import { TimePickerField, type TimePickerFieldProps } from './TimePickerField';
+
+/**
+ * Render a TimePickerField template with controlled state management.
+ * Manages a `value` state and wires it through the `onChange` prop.
+ */
+function renderWithState(template: (props: any) => React.JSX.Element, initialArgs: Record<string, any> = {}) {
+    const Wrapper = () => {
+        const [value, setValue] = React.useState<Date | undefined>(initialArgs.value ?? undefined);
+        const props = {
+            ...initialArgs,
+            value,
+            onChange: (v: Date | undefined, name?: string, event?: React.SyntheticEvent) => {
+                setValue(v);
+                initialArgs.onChange?.(v, name, event);
+            },
+        };
+        return template(props);
+    };
+    return render(<Wrapper />);
+}
+
+interface SetupOverrides extends Partial<TimePickerFieldProps> {}
+
+function setup(propsOverride: SetupOverrides = {}, { wrapper }: SetupRenderOptions = {}) {
+    const props: TimePickerFieldProps = {
+        label: 'Start time',
+        locale: 'en-US',
+        translations: TRANSLATIONS,
+        onChange: () => undefined,
+        value: undefined,
+        ...propsOverride,
+    };
+    const result = render(<TimePickerField {...props} />, { wrapper });
+
+    const textField = getByClassName(document.body, TextField.className as string);
+    const inputNative = getByTagName(textField, 'input');
+
+    return { props, textField, inputNative, ...result };
+}
+
+describe(`<${TimePickerField.displayName}>`, () => {
+    // Run the core test suite — same interaction tests, framework-injected.
+    timePickerFieldTests({
+        components: { TimePickerField },
+        renderWithState,
+    });
+
+    commonTestsSuiteRTL(setup, {
+        baseClassName: TextField.className as string,
+        forwardClassName: 'textField',
+        applyTheme: {
+            affects: [{ element: 'textField' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
+});
diff --git a/packages/lumx-react/src/components/time-picker-field/TimePickerField.tsx b/packages/lumx-react/src/components/time-picker-field/TimePickerField.tsx
new file mode 100644
index 0000000000..1886862c2a
--- /dev/null
+++ b/packages/lumx-react/src/components/time-picker-field/TimePickerField.tsx
@@ -0,0 +1,173 @@
+import React, { type SyntheticEvent, useCallback, useMemo, useState } from 'react';
+
+import type { HasClassName, HasTheme } from '@lumx/core/js/types';
+import {
+    TimePickerField as UI,
+    type TimePickerFieldProps as UIProps,
+    type TimePickerFieldTranslations,
+    CLASSNAME,
+    COMPONENT_NAME,
+} from '@lumx/core/js/components/TimePickerField';
+import { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';
+import {
+    buildTimeList,
+    formatTime,
+    getDateAtTime,
+    isDateOnTime,
+    parseTimeInput,
+    snapTimeToBounds,
+    type TimeOfDay,
+} from '@lumx/core/js/utils/time';
+
+import { SelectTextField, SingleSelectTextFieldProps } from '../select-text-field';
+
+export { CLASSNAME, COMPONENT_NAME };
+
+/**
+ * Inherited SelectTextField props (less the parts owned by TimePickerField).
+ */
+type InheritedSelectTextFieldProps = Omit<
+    SingleSelectTextFieldProps<TimeOfDay>,
+    | 'value'
+    | 'onChange'
+    | 'listStatus'
+    | 'translations'
+    | 'options'
+    | 'getOptionId'
+    | 'getOptionName'
+    | 'renderOption'
+    | 'filter'
+    | 'onBlur'
+    | 'onSearch'
+    | 'selectionType'
+>;
+
+/**
+ * `TimePickerField` props.
+ */
+export interface TimePickerFieldProps extends HasClassName, HasTheme, InheritedSelectTextFieldProps {
+    /**
+     * Currently selected time. Only the time-of-day component is consumed; the
+     * date part is preserved when emitting `onChange`.
+     */
+    value?: Date;
+
+    /**
+     * Change handler. Called with a new `Date` whose date part is inherited from
+     * the previous `value` (or today, if none) and whose time-of-day matches the
+     * user selection. May also be called with `undefined` when the field is
+     * cleared.
+     */
+    onChange(value: Date | undefined, name?: string, event?: SyntheticEvent): void;
+
+    /**
+     * BCP-47 locale string (e.g. `'en-US'`, `'fr-FR'`).
+     */
+    locale?: string;
+
+    /**
+     * Minute interval between option entries.
+     */
+    step?: number;
+
+    /**
+     * Lower bound. Options strictly before this time remain **visible** in the
+     * dropdown but are rendered as disabled (cannot be picked). Typed input
+     * below this bound is snapped up to it on blur.
+     */
+    minTime?: Date;
+
+    /**
+     * Upper bound. Options strictly after this time remain **visible** in the
+     * dropdown but are rendered as disabled (cannot be picked). Typed input
+     * above this bound is snapped down to it on blur.
+     */
+    maxTime?: Date;
+
+    /**
+     * Translations label for clear and show suggestions buttons
+     */
+    translations: TimePickerFieldTranslations;
+}
+
+/**
+ * A select-style picker for choosing a time of day. Wraps `SelectTextField`
+ * with a generated list of times built from `step`, `minTime`, and `maxTime`.
+ *
+ * Out-of-range options (strictly before `minTime` or after `maxTime`) remain
+ * visible in the dropdown but are rendered as disabled.
+ *
+ * Free-form typed input (e.g. `"10:30 PM"`, `"14"`, `"930"`) is parsed on blur.
+ *
+ * @param props Component props.
+ * @return React element.
+ */
+export const TimePickerField: React.FC<TimePickerFieldProps> = (props) => {
+    const {
+        value,
+        onChange,
+        locale = getCurrentLocale(),
+        step = 30,
+        minTime,
+        maxTime,
+        className,
+        theme,
+        translations,
+        ...forwardedProps
+    } = props;
+
+    // Build the option list — re-computed only when bounds/step/locale change.
+    const timeList = useMemo(() => buildTimeList({ step, minTime, maxTime, locale }), [step, minTime, maxTime, locale]);
+
+    // Track the user's typed input separately from the SelectTextField's internal search state,
+    // so blur can convert it to a Date.
+    const [searchValue, handleSearch] = useState<string>('');
+
+    // Resolve the option that matches the current value (by time-of-day).
+    const selectedOption = useMemo(() => {
+        if (!value) return undefined;
+        return { hour: value.getHours(), minute: value.getMinutes(), name: formatTime(value, locale) };
+    }, [value, locale]);
+
+    const handleChange: UIProps['handleChange'] = useCallback(
+        (next) => {
+            const date = next ? getDateAtTime(next, value) : undefined;
+            onChange(date, forwardedProps.name);
+        },
+        [forwardedProps.name, onChange, value],
+    );
+
+    const handleBlur: UIProps['handleBlur'] = useCallback(() => {
+        if (!searchValue) return;
+        const parsed = parseTimeInput(searchValue);
+        // Reset our local typed-value tracking; SelectTextField clears its own internal copy.
+        handleSearch('');
+        if (!parsed) return;
+
+        // Snap to bounds if needed, then dedup against the current value.
+        const time = snapTimeToBounds(parsed, minTime, maxTime);
+        if (value && isDateOnTime(value, time)) return;
+
+        onChange(getDateAtTime(time, value), forwardedProps.name);
+    }, [maxTime, minTime, forwardedProps.name, onChange, searchValue, value]);
+
+    const searchInputValue = value ? formatTime(value, locale) : undefined;
+
+    return UI(
+        {
+            ...forwardedProps,
+            value: selectedOption,
+            options: timeList,
+            translations,
+            className,
+            theme,
+            handleChange,
+            handleSearch,
+            handleBlur,
+            searchInputValue,
+        },
+        { SelectTextField, Option: SelectTextField.Option },
+    );
+};
+
+TimePickerField.displayName = COMPONENT_NAME;
diff --git a/packages/lumx-react/src/components/time-picker-field/index.ts b/packages/lumx-react/src/components/time-picker-field/index.ts
new file mode 100644
index 0000000000..28e75ff07c
--- /dev/null
+++ b/packages/lumx-react/src/components/time-picker-field/index.ts
@@ -0,0 +1,5 @@
+export { TimePickerField, type TimePickerFieldProps } from './TimePickerField';
+export {
+    COMPONENT_NAME as TIME_PICKER_FIELD_COMPONENT_NAME,
+    CLASSNAME as TIME_PICKER_FIELD_CLASSNAME,
+} from '@lumx/core/js/components/TimePickerField';
diff --git a/packages/lumx-react/src/index.ts b/packages/lumx-react/src/index.ts
index 72fa34578a..2abc4acbad 100644
--- a/packages/lumx-react/src/index.ts
+++ b/packages/lumx-react/src/index.ts
@@ -59,6 +59,7 @@ export * from './components/tabs';
 export * from './components/text';
 export * from './components/text-field';
 export * from './components/thumbnail';
+export * from './components/time-picker-field';
 export * from './components/toolbar';
 export * from './components/tooltip';
 export * from './components/uploader';
diff --git a/packages/lumx-react/src/utils/locale/getCurrentLocale.ts b/packages/lumx-react/src/utils/locale/getCurrentLocale.ts
index 5fb129ec89..5efddb7c15 100644
--- a/packages/lumx-react/src/utils/locale/getCurrentLocale.ts
+++ b/packages/lumx-react/src/utils/locale/getCurrentLocale.ts
@@ -1,4 +1 @@
-/**
- * Get current browser locale.
- */
-export const getCurrentLocale = (): string => navigator.languages?.[0] || navigator.language;
+export { getCurrentLocale } from '@lumx/core/js/utils/locale/getCurrentLocale';