@multiplatform.one/forms 7.63.4 → 7.64.0

package/src/fields/ColorPicker/systemColorWell.native.tsx

@@ -0,0 +1,144 @@
+/**
+ * LC-266: on iOS the Color field opens the system colour picker
+ * (UIColorPickerViewController) through @expo/ui's SwiftUI ColorPicker.
+ *
+ * @expo/ui is native code, so an OTA can carry this JS to a binary built
+ * without it. `requireOptionalNativeModule("ExpoUI")` answers null there and
+ * the field keeps the MPO picker. The probe runs before `@expo/ui` is
+ * required: its views call `requireNativeView` at module load, which throws
+ * on a binary that lacks them.
+ */
+import type { ComponentType, ReactNode } from "react";
+import { Platform } from "react-native";
+import type { SystemColorWellProps } from "./systemColorWell";
+
+export type { SystemColorWellProps } from "./systemColorWell";
+
+export const expoUiNativeModule = "ExpoUI";
+
+/**
+ * The SwiftUI well is a 28pt circle and only the well opens the picker, so it
+ * is drawn nearly transparent and scaled past the field's bounds: the whole
+ * field becomes the well's hit area while the MPO swatch and hex stay visible.
+ * Below 0.01 alpha UIKit stops hit-testing a view.
+ */
+export const wellPoints = 28;
+export const wellOpacity = 0.02;
+
+export function wellScale(width: number, height: number): number {
+  return Math.max(1, Math.ceil((Math.max(width, height) * 2) / wellPoints));
+}
+
+type Modifier = unknown;
+
+export interface SwiftUiColorModule {
+  Host: ComponentType<{
+    children?: ReactNode;
+    colorScheme?: "light" | "dark";
+    style?: SystemColorWellProps["style"];
+  }>;
+  ColorPicker: ComponentType<{
+    selection: string | null;
+    label?: string;
+    supportsOpacity?: boolean;
+    onSelectionChange?: (value: string) => void;
+    modifiers?: Modifier[];
+  }>;
+}
+
+export interface SwiftUiModifiers {
+  labelsHidden: () => Modifier;
+  scaleEffect: (scale: number) => Modifier;
+  opacity: (value: number) => Modifier;
+}
+
+export interface SystemColorWellSources {
+  core: () => { requireOptionalNativeModule?: (name: string) => unknown };
+  ui: () => Partial<SwiftUiColorModule>;
+  modifiers: () => Partial<SwiftUiModifiers>;
+}
+
+/**
+ * Each `require` sits in its own `try` so Metro bundles an app without
+ * @expo/ui (an optional peer) instead of failing the build (FZ-7357).
+ */
+const appSources: SystemColorWellSources = {
+  core: () => {
+    try {
+      return require("expo-modules-core");
+    } catch {
+      return {};
+    }
+  },
+  ui: () => {
+    try {
+      return require("@expo/ui/swift-ui");
+    } catch {
+      return {};
+    }
+  },
+  modifiers: () => {
+    try {
+      return require("@expo/ui/swift-ui/modifiers");
+    } catch {
+      return {};
+    }
+  },
+};
+
+export function makeSystemColorWell(
+  ui: SwiftUiColorModule,
+  modifiers: SwiftUiModifiers,
+): ComponentType<SystemColorWellProps> {
+  return function SystemColorWell({
+    selection,
+    supportsOpacity,
+    label,
+    colorScheme,
+    width,
+    height,
+    onSelectionChange,
+    style,
+  }: SystemColorWellProps) {
+    return (
+      <ui.Host colorScheme={colorScheme} style={style}>
+        <ui.ColorPicker
+          label={label}
+          selection={selection || null}
+          supportsOpacity={supportsOpacity}
+          onSelectionChange={onSelectionChange}
+          modifiers={[
+            modifiers.labelsHidden(),
+            modifiers.scaleEffect(wellScale(width, height)),
+            modifiers.opacity(wellOpacity),
+          ]}
+        />
+      </ui.Host>
+    );
+  };
+}
+
+/** The system colour well, or null when this platform or binary cannot draw it. */
+export function resolveSystemColorWell(
+  sources: SystemColorWellSources,
+  os: string,
+): ComponentType<SystemColorWellProps> | null {
+  if (os !== "ios") return null;
+  try {
+    if (sources.core().requireOptionalNativeModule?.(expoUiNativeModule) == null) return null;
+    const ui = sources.ui();
+    const modifiers = sources.modifiers();
+    if (!ui.Host || !ui.ColorPicker) return null;
+    if (!modifiers.labelsHidden || !modifiers.scaleEffect || !modifiers.opacity) return null;
+    return makeSystemColorWell(ui as SwiftUiColorModule, modifiers as SwiftUiModifiers);
+  } catch {
+    return null;
+  }
+}
+
+let cached: ComponentType<SystemColorWellProps> | null | undefined;
+
+export function useSystemColorWell(): ComponentType<SystemColorWellProps> | null {
+  if (cached === undefined) cached = resolveSystemColorWell(appSources, Platform.OS);
+  return cached;
+}

package/src/fields/ColorPicker/systemColorWell.ts

@@ -0,0 +1,21 @@
+import type { ComponentType } from "react";
+import type { StyleProp, ViewStyle } from "react-native";
+
+export interface SystemColorWellProps {
+  /** `#RRGGBB`, or `#RRGGBBAA` with opacity; empty for no colour. */
+  selection: string;
+  supportsOpacity: boolean;
+  /** Spoken name; the visible label stays the field's. */
+  label: string;
+  colorScheme: "light" | "dark";
+  /** The area the well covers, in points. */
+  width: number;
+  height: number;
+  onSelectionChange: (hex: string) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Web: the MPO picker is the platform form (LC-266). */
+export function useSystemColorWell(): ComponentType<SystemColorWellProps> | null {
+  return null;
+}

package/src/fields/DatePicker/DatePicker.stories.tsx

@@ -13,7 +13,8 @@ import { DatetimePicker } from "./DatetimePicker";
 import { MonthPicker } from "./MonthPicker";
 import { MultiDatePicker } from "./MultiDatePicker";
 import { DatePicker } from "./index";
-import { Text } from "@multiplatform.one/theme";
+import { formatCalendarDate, Text } from "@multiplatform.one/theme";
+import { TimePicker } from "../TimePicker";
 
 const meta: Meta<typeof DatePicker> = {
   title: "Forms/DatePicker",
@@ -128,6 +129,31 @@ export const StateContract: Story = {
   },
 };
 
+/**
+ * LC-266 (FZ-8114): on a coarse-pointer browser each field opens the
+ * browser's own picker; a fine pointer keeps the MPO calendar and wheels. The
+ * lines below show the committed value, which is the same on both paths.
+ */
+export const TouchWeb: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | null>(new Date(2026, 2, 5));
+    const [time, setTime] = useState("14:30");
+    const [datetime, setDatetime] = useState<Date | null>(new Date(2026, 2, 5, 14, 30));
+    return (
+      <YStack gap="$4" maxWidth={400}>
+        <DatePicker label="Date" value={date} onChange={setDate} />
+        <TimePicker label="Time" value={time} onChange={setTime} />
+        <DatetimePicker label="Date and time" value={datetime} onChange={setDatetime} />
+        <YStack gap="$1">
+          <Text data-testid="touch-web-date">{`Date value: ${formatCalendarDate(date, "date") || "empty"}`}</Text>
+          <Text data-testid="touch-web-time">{`Time value: ${time || "empty"}`}</Text>
+          <Text data-testid="touch-web-datetime">{`Date and time value: ${formatCalendarDate(datetime, "datetime") || "empty"}`}</Text>
+        </YStack>
+      </YStack>
+    );
+  },
+};
+
 export const Basic: Story = {
   render: (args) => <DatePicker {...args} />,
   args: {

package/src/fields/DatePicker/DatetimePicker.catalog.tsx

@@ -19,6 +19,12 @@ import type { FormFieldProps } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
 import { Skeleton } from "../../Skeleton";
 import type { FieldComponentProps, Validator } from "../../types";
+import {
+  fromNativeDateValue,
+  toDatetimeLocalValue,
+  TouchWebPickerInput,
+  useCoarsePointer,
+} from "../../shared/touchWebPicker";
 
 import {
   CalendarDays,
@@ -49,7 +55,9 @@ export type DatetimePickerProps<
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
 > = Omit<
   FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
-  "children" | "field"
+  // FormFieldProps carries YStack's DOM ChangeEventHandler; the field's own
+  // value callback replaces it, same as DatePicker.
+  "children" | "field" | "onChange"
 > &
   Partial<
     Omit<
@@ -378,6 +386,7 @@ export function DatetimePicker<
 
   const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const touchWeb = useCoarsePointer();
 
   const [open, setOpen] = useState(false);
   const [selectedDatetime, setSelectedDatetime] = useState<Date | null>(() =>
@@ -461,6 +470,40 @@ export function DatetimePicker<
     />
   );
 
+  const renderTouchTrigger = (
+    hasError?: boolean,
+    blurHandler?: (...args: any[]) => void,
+    fieldChange?: (value: any) => void,
+  ) => (
+    <DatePickerInputTrigger
+      value={displayValue}
+      placeholder={placeholder}
+      disabled={disabled}
+      onReset={() => handleClearDatetime(fieldChange)}
+      onButtonPress={() => {}}
+      touchInput={
+        <TouchWebPickerInput
+          kind="datetime-local"
+          id={id}
+          value={toDatetimeLocalValue(selectedDatetime, showSeconds)}
+          min={toDatetimeLocalValue(minDate, showSeconds)}
+          max={toDatetimeLocalValue(maxDate, showSeconds)}
+          showSeconds={showSeconds}
+          disabled={disabled}
+          required={required}
+          invalid={hasError}
+          aria-label={label ? undefined : t("Date and time")}
+          onValue={(next) => {
+            const date = fromNativeDateValue(next);
+            if (date) handleDatetimeSelect(date, fieldChange);
+            else handleClearDatetime(fieldChange);
+          }}
+          onBlur={blurHandler}
+        />
+      }
+    />
+  );
+
   const renderPopover = (
     hasError?: boolean,
     blurHandler?: (...args: any[]) => void,
@@ -478,6 +521,7 @@ export function DatetimePicker<
         />
       );
     }
+    if (touchWeb) return renderTouchTrigger(hasError, blurHandler, fieldChange);
     const handleOpenChange = (isOpen: boolean) => {
       // Re-seed the visible month from the current value on every open.
       if (isOpen && selectedDatetimeRef.current) setDisplayDate(selectedDatetimeRef.current);

package/src/fields/DatePicker/catalog.tsx

@@ -16,6 +16,12 @@ import type { FormFieldProps } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
 import { Skeleton } from "../../Skeleton";
 import type { FieldComponentProps, Validator } from "../../types";
+import {
+  fromNativeDateValue,
+  toDateInputValue,
+  TouchWebPickerInput,
+  useCoarsePointer,
+} from "../../shared/touchWebPicker";
 
 import {
   CalendarDays,
@@ -211,6 +217,7 @@ export function DatePicker<
   const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const hasLabel = Boolean(label);
+  const touchWeb = useCoarsePointer();
 
   const [open, setOpen] = useState(false);
   const [selectedDate, setSelectedDate] = useState<Date | null>(() =>
@@ -293,6 +300,46 @@ export function DatePicker<
       );
     }
 
+    const describedBy =
+      [
+        helperText && id ? `${id}-description` : undefined,
+        hasError && id ? `${id}-error` : undefined,
+      ]
+        .filter(Boolean)
+        .join(" ") || undefined;
+
+    if (touchWeb) {
+      return (
+        <DatePickerInputTrigger
+          value={formatDateDisplay(selectedDate)}
+          placeholder={placeholder}
+          disabled={disabled}
+          onReset={() => handleClearDate(fieldChange)}
+          onButtonPress={() => {}}
+          touchInput={
+            <TouchWebPickerInput
+              kind="date"
+              id={id}
+              value={toDateInputValue(selectedDate)}
+              min={toDateInputValue(minDate)}
+              max={toDateInputValue(maxDate)}
+              disabled={disabled}
+              required={required}
+              invalid={hasError}
+              aria-label={hasLabel ? undefined : t("Date")}
+              aria-describedby={describedBy}
+              onValue={(next) => {
+                const date = fromNativeDateValue(next);
+                if (date) handleDateSelect(date, fieldChange);
+                else handleClearDate(fieldChange);
+              }}
+              onBlur={blurHandler}
+            />
+          }
+        />
+      );
+    }
+
     const handleOpenChange = (isOpen: boolean) => {
       // Re-seed the visible month from the current value on every open —
       // the value may have changed (externally or by a pick) since mount.
@@ -336,14 +383,7 @@ export function DatePicker<
             // Labelled: FieldLayout's Label wires `aria-labelledby` onto this
             // id itself — naming it here too doubles the spoken name.
             aria-label={hasLabel ? undefined : t("Date")}
-            aria-describedby={
-              [
-                helperText && id ? `${id}-description` : undefined,
-                hasError && id ? `${id}-error` : undefined,
-              ]
-                .filter(Boolean)
-                .join(" ") || undefined
-            }
+            aria-describedby={describedBy}
             aria-required={required || undefined}
             aria-invalid={hasError || undefined}
           />

package/src/fields/DatePicker/parts.tsx

@@ -861,6 +861,11 @@ interface DatePickerInputTriggerProps {
   "aria-describedby"?: string;
   "aria-required"?: boolean;
   "aria-invalid"?: boolean;
+  /**
+   * Touch web (LC-266): the browser's own picker input, laid over the box.
+   * The input then owns the tap, the focus and the field's a11y name.
+   */
+  touchInput?: ReactNode;
 }
 
 export function DatePickerClearButton({
@@ -900,6 +905,7 @@ export function DatePickerInputTrigger({
   "aria-describedby": ariaDescribedBy,
   "aria-required": ariaRequired,
   "aria-invalid": ariaInvalid,
+  touchInput,
 }: DatePickerInputTriggerProps) {
   const handleTriggerKey = (
     e: PanelActionEvent & { key?: string; code?: string; preventDefault?: () => void },
@@ -942,10 +948,10 @@ export function DatePickerInputTrigger({
         // on the closed text-field trigger.
         elevation={undefined}
         data-testid="date-picker-trigger"
-        id={id}
-        onPress={isWeb && !disabled ? onButtonPress : undefined}
+        id={touchInput ? undefined : id}
+        onPress={isWeb && !disabled && !touchInput ? onButtonPress : undefined}
         {...(disabled ? { opacity: 0.5, pointerEvents: "none" } : undefined)}
-        {...(isWeb
+        {...(isWeb && !touchInput
           ? {
               role: "combobox" as const,
               "aria-haspopup": "dialog",
@@ -960,6 +966,7 @@ export function DatePickerInputTrigger({
             }
           : undefined)}
       >
+        {touchInput}
         <InputParts.Section data-testid="date-picker-glyph">
           <InputParts.Icon adornment="leading" color={formCommonColors.muted}>
             <Glyph />
@@ -970,6 +977,7 @@ export function DatePickerInputTrigger({
             readOnly
             pointerEvents="none"
             tabIndex={-1}
+            aria-hidden={touchInput ? true : undefined}
             value={value}
             placeholder={placeholder}
             disabled={disabled}
@@ -979,7 +987,14 @@ export function DatePickerInputTrigger({
         </InputParts.Section>
         {value && isWeb ? (
           <InputParts.Section>
-            <DatePickerClearButton onReset={onReset} disabled={disabled} />
+            {touchInput ? (
+              // Above the touch input, so Clear stays reachable on the box.
+              <View zIndex={2}>
+                <DatePickerClearButton onReset={onReset} disabled={disabled} />
+              </View>
+            ) : (
+              <DatePickerClearButton onReset={onReset} disabled={disabled} />
+            )}
           </InputParts.Section>
         ) : null}
       </InputParts.Box>

package/src/fields/DatePicker/touchWeb.spec.tsx

@@ -0,0 +1,245 @@
+/**
+ * FZ-8114 (LC-266): Date, Time and Datetime on a coarse-pointer web viewport
+ * hand the pick to the browser's own control, and a fine pointer keeps the
+ * MPO calendar. Both paths must commit the same value.
+ */
+import { formatCalendarDate } from "@multiplatform.one/theme";
+import { useForm } from "@tanstack/react-form";
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Button } from "../../Button";
+import { Form } from "../../Form";
+import { TimePicker } from "../TimePicker";
+import { DatePicker, DatetimePicker } from "./index";
+
+let coarse = false;
+const originalMatchMedia = window.matchMedia;
+
+beforeEach(() => {
+  Object.defineProperty(window, "matchMedia", {
+    configurable: true,
+    writable: true,
+    value: (media: string) => ({
+      media,
+      matches: media === "(pointer: coarse)" ? coarse : false,
+      onchange: null,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      addListener: () => {},
+      removeListener: () => {},
+      dispatchEvent: () => false,
+    }),
+  });
+});
+
+afterEach(() => {
+  coarse = false;
+  Object.defineProperty(window, "matchMedia", {
+    configurable: true,
+    writable: true,
+    value: originalMatchMedia,
+  });
+});
+
+function touchInput(root: ParentNode, type: string): HTMLInputElement {
+  const input = root.querySelector(`input[type="${type}"]`) as HTMLInputElement | null;
+  expect(input).not.toBeNull();
+  return input as HTMLInputElement;
+}
+
+function dayButton(root: ParentNode, day: string): HTMLElement {
+  const match = Array.from(root.querySelectorAll('button, [role="button"]')).find(
+    (el) => el.textContent?.trim() === day && el.getAttribute("aria-disabled") !== "true",
+  );
+  expect(match).toBeTruthy();
+  return match as HTMLElement;
+}
+
+describe("Date on touch web (FZ-8114)", () => {
+  it("a coarse pointer renders the browser's date input, labelled by the field", () => {
+    coarse = true;
+    const result = renderWithProviders(<DatePicker label="Due" name="due" />);
+    const input = touchInput(result.container, "date");
+    const label = result.container.querySelector("label");
+    expect(label?.getAttribute("for")).toBe(input.id);
+    expect(result.container.querySelector('[role="combobox"]')).toBeNull();
+  });
+
+  it("a fine pointer keeps the MPO combobox and no date input", () => {
+    const result = renderWithProviders(<DatePicker label="Due" name="due" />);
+    expect(result.container.querySelector('input[type="date"]')).toBeNull();
+    expect(result.container.querySelector('[role="combobox"]')).not.toBeNull();
+  });
+
+  it("the picked string shows in the MPO box and emits the calendar's Date", async () => {
+    coarse = true;
+    const onChange = vi.fn();
+    const result = renderWithProviders(<DatePicker label="Due" name="due" onChange={onChange} />);
+    await act(async () => {
+      fireEvent.change(touchInput(result.container, "date"), { target: { value: "2026-03-05" } });
+    });
+    expect(onChange).toHaveBeenCalledTimes(1);
+    const picked = onChange.mock.calls[0][0] as Date;
+    expect(picked.getTime()).toBe(new Date(2026, 2, 5).getTime());
+    expect(result.container.querySelector('input[value="Mar 5, 2026"]')).not.toBeNull();
+    expect(touchInput(result.container, "date").value).toBe("2026-03-05");
+  });
+
+  it("both paths commit the same value for the same day", async () => {
+    const fine = vi.fn();
+    const desktop = renderWithProviders(
+      <DatePicker label="Due" name="due" value="2026-03-01" onChange={fine} />,
+    );
+    await act(async () => {
+      fireEvent.click(desktop.container.querySelector('[role="combobox"]') as HTMLElement);
+    });
+    await waitFor(() => dayButton(document.body, "5"));
+    await act(async () => {
+      fireEvent.click(dayButton(document.body, "5"));
+    });
+    desktop.unmount();
+
+    coarse = true;
+    const touch = vi.fn();
+    const phone = renderWithProviders(
+      <DatePicker label="Due" name="due" value="2026-03-01" onChange={touch} />,
+    );
+    expect(touchInput(phone.container, "date").value).toBe("2026-03-01");
+    await act(async () => {
+      fireEvent.change(touchInput(phone.container, "date"), { target: { value: "2026-03-05" } });
+    });
+
+    expect(fine).toHaveBeenCalledTimes(1);
+    expect(touch).toHaveBeenCalledTimes(1);
+    expect((touch.mock.calls[0][0] as Date).getTime()).toBe(
+      (fine.mock.calls[0][0] as Date).getTime(),
+    );
+  });
+
+  it("clearing in the browser's control clears the field", async () => {
+    coarse = true;
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <DatePicker label="Due" name="due" value="2026-03-05" onChange={onChange} />,
+    );
+    await act(async () => {
+      fireEvent.change(touchInput(result.container, "date"), { target: { value: "" } });
+    });
+    expect(onChange).toHaveBeenLastCalledWith(null);
+  });
+
+  it("min and max ride the input as local calendar days", () => {
+    coarse = true;
+    const result = renderWithProviders(
+      <DatePicker
+        label="Due"
+        name="due"
+        minDate={new Date(2026, 0, 2)}
+        maxDate={new Date(2026, 11, 30)}
+      />,
+    );
+    const input = touchInput(result.container, "date");
+    expect(input.min).toBe("2026-01-02");
+    expect(input.max).toBe("2026-12-30");
+  });
+
+  it("commits into form state", async () => {
+    coarse = true;
+    const onSubmit = vi.fn();
+    const Fixture = () => {
+      const form = useForm({
+        defaultValues: { due: null as Date | null },
+        onSubmit: async ({ value }) => onSubmit(value),
+      });
+      return (
+        <Form form={form}>
+          <DatePicker label="Due" name="due" />
+          <Button action="submit">Submit</Button>
+        </Form>
+      );
+    };
+    const result = renderWithProviders(<Fixture />);
+    await act(async () => {
+      fireEvent.change(touchInput(result.container, "date"), { target: { value: "2026-08-15" } });
+    });
+    await act(async () => {
+      fireEvent.click(result.getSubmitButton() as HTMLElement);
+    });
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+    expect(formatCalendarDate(onSubmit.mock.calls[0][0].due, "date")).toBe("2026-08-15");
+  });
+});
+
+describe("Datetime on touch web (FZ-8114)", () => {
+  it("a coarse pointer renders datetime-local and emits the local wall clock", async () => {
+    coarse = true;
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <DatetimePicker label="Starts" name="starts" onChange={onChange} />,
+    );
+    await act(async () => {
+      fireEvent.change(touchInput(result.container, "datetime-local"), {
+        target: { value: "2026-03-05T14:30" },
+      });
+    });
+    const picked = onChange.mock.calls[0][0] as Date;
+    expect(formatCalendarDate(picked, "datetime")).toBe("2026-03-05 14:30:00");
+    expect(touchInput(result.container, "datetime-local").value).toBe("2026-03-05T14:30");
+  });
+
+  it("seconds widen the input's step and survive the round trip", () => {
+    coarse = true;
+    const result = renderWithProviders(
+      <DatetimePicker
+        label="Starts"
+        name="starts"
+        showSeconds
+        value={new Date(2026, 2, 5, 14, 30, 15)}
+      />,
+    );
+    const input = touchInput(result.container, "datetime-local");
+    expect(input.step).toBe("1");
+    expect(input.value).toBe("2026-03-05T14:30:15");
+  });
+
+  it("a fine pointer keeps the MPO panel trigger", () => {
+    const result = renderWithProviders(<DatetimePicker label="Starts" name="starts" />);
+    expect(result.container.querySelector('input[type="datetime-local"]')).toBeNull();
+    expect(result.container.querySelector('[role="combobox"]')).not.toBeNull();
+  });
+});
+
+describe("Time on touch web (FZ-8114)", () => {
+  it("a coarse pointer renders the time input and emits TimePicker's string", async () => {
+    coarse = true;
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <TimePicker label="At" name="at" value="09:15" onChange={onChange} />,
+    );
+    const input = touchInput(result.container, "time");
+    expect(input.value).toBe("09:15");
+    await act(async () => {
+      fireEvent.change(input, { target: { value: "14:30" } });
+    });
+    expect(onChange).toHaveBeenLastCalledWith("14:30");
+    expect(result.container.querySelector('input[value="2:30 PM"]')).not.toBeNull();
+  });
+
+  it("showSeconds emits HH:mm:ss even when the browser drops :00", async () => {
+    coarse = true;
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <TimePicker label="At" name="at" showSeconds onChange={onChange} />,
+    );
+    await act(async () => {
+      fireEvent.change(touchInput(result.container, "time"), { target: { value: "14:30" } });
+    });
+    expect(onChange).toHaveBeenLastCalledWith("14:30:00");
+  });
+
+  it("a fine pointer keeps the MPO wheels trigger", () => {
+    const result = renderWithProviders(<TimePicker label="At" name="at" />);
+    expect(result.container.querySelector('input[type="time"]')).toBeNull();
+  });
+});