@multiplatform.one/forms 8.3.0 → 8.4.0

package/src/Button/Button.controlTiers.spec.tsx

@@ -37,9 +37,9 @@ const SCHEMES = ["light", "dark"] as const;
 type Scheme = (typeof SCHEMES)[number];
 const WASH: Record<Scheme, { rest: string; hover: string; press: string }> = {
   light: { rest: "color3", hover: "color4", press: "color5" },
-  dark: { rest: "color4", hover: "color5", press: "color6" },
+  dark: { rest: "color5", hover: "color6", press: "color7" },
 };
-const ELEVATED_DARK_WASH = { rest: "color5", hover: "color6", press: "color7" };
+const ELEVATED_DARK_WASH = { rest: "color6", hover: "color7", press: "color8" };
 
 function houseRender(ui: ReactElement, scheme: Scheme = "light", knobs?: object) {
   return render(

package/src/ControlGroup/index.tsx

@@ -186,7 +186,7 @@ function ControlGroupImpl({ children, orientation = "horizontal", ...props }: Co
           <View
             key={`seam-${index}`}
             {...(isVertical ? hairline.line : hairline.vline)}
-            backgroundColor={formInputColors.border.base}
+            backgroundColor={formCommonColors.divider}
             flexGrow={0}
             flexShrink={0}
             alignSelf="stretch"
@@ -235,6 +235,7 @@ function ControlGroupImpl({ children, orientation = "horizontal", ...props }: Co
             backgroundColor={knobProps.outlined ? "transparent" : formInputColors.background.base}
             {...knobProps.inputSurface}
             {...knobProps.borderRadius}
+            borderColor={formInputColors.border.base}
             {...elevationWrapperProps}
             {...transitionProps(knobProps.motion.control, [
               "borderRadius",

package/src/FloatingPanel/FloatingPanel.holdCue.native.spec.tsx

@@ -0,0 +1,72 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, screen } from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Text } from "tamagui";
+import { holdCueStartMs } from "../hooks/useHoldCue";
+import { FloatingPanel } from "./index.native";
+
+vi.mock("react-native-web", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-native")>();
+  return {
+    ...actual,
+    ActionSheetIOS: undefined,
+    Modal: ({ children, visible }: { children: import("react").ReactNode; visible: boolean }) =>
+      visible ? children : null,
+  };
+});
+
+beforeEach(() => {
+  vi.useFakeTimers();
+});
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+function ContextPanel() {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      openOn="contextmenu"
+      trigger={<Text>Row</Text>}
+      triggerA11y={{ label: "Row" }}
+    >
+      <Text>Copy</Text>
+    </FloatingPanel>
+  );
+}
+
+function press(target: Element, type: "mousedown" | "mouseup") {
+  act(() => {
+    target.dispatchEvent(new MouseEvent(type, { bubbles: true, cancelable: true, button: 0 }));
+  });
+}
+
+describe("FloatingPanel native context trigger hold cue (LC-197, FZ-8902)", () => {
+  it("shows the cue partway to the 500ms hold and clears it on release", () => {
+    renderWithProviders(<ContextPanel />);
+    const trigger = screen.getByRole("button", { name: "Row" });
+    press(trigger, "mousedown");
+    expect(trigger).not.toHaveAttribute("data-hold");
+    act(() => {
+      vi.advanceTimersByTime(holdCueStartMs);
+    });
+    expect(trigger).toHaveAttribute("data-hold", "progress");
+    expect(screen.queryByText("Copy")).toBeNull();
+    press(trigger, "mouseup");
+    expect(trigger).not.toHaveAttribute("data-hold");
+  });
+
+  it("drops the cue when the hold opens the menu", () => {
+    renderWithProviders(<ContextPanel />);
+    const trigger = screen.getByRole("button", { name: "Row" });
+    press(trigger, "mousedown");
+    act(() => {
+      vi.advanceTimersByTime(600);
+    });
+    expect(screen.getByText("Copy")).toBeTruthy();
+    expect(trigger).not.toHaveAttribute("data-hold");
+  });
+});

package/src/FloatingPanel/index.native.tsx

@@ -124,6 +124,7 @@ import {
   scrollArrowBand,
   scrollArrowThreshold,
 } from "../shared/checkedOnField";
+import { holdCueScale, useHoldCue } from "../hooks/useHoldCue";
 import { useInsideOverlay, useOverlayZIndex } from "../shared/overlayStack";
 import { OverlayWindow } from "../shared/OverlayWindow";
 import { t } from "../shared/t";
@@ -244,8 +245,10 @@ export function FloatingPanel({
   const handleTriggerPress = useCallback(() => {
     if (!disabled) onOpenChange(!open);
   }, [disabled, onOpenChange, open]);
+  const hold = useHoldCue();
   const handleTriggerLongPress = useCallback(
     (event?: GestureResponderEvent) => {
+      hold.stop();
       if (disabled) return;
       const { pageX, pageY } = event?.nativeEvent ?? {};
       setPressPoint(
@@ -253,7 +256,7 @@ export function FloatingPanel({
       );
       onOpenChange(true);
     },
-    [disabled, onOpenChange],
+    [disabled, onOpenChange, hold.stop],
   );
   const isContextMenu = openOn === "contextmenu";
   // A long-press menu never eats its trigger's tap: the web lets the primary
@@ -629,6 +632,10 @@ export function FloatingPanel({
             ? {
                 onLongPress: handleTriggerLongPress,
                 delayLongPress: 500,
+                ...(disabled
+                  ? undefined
+                  : { delayPressIn: 0, onPressIn: hold.start, onPressOut: hold.stop }),
+                ...(hold.holding ? { dataSet: { hold: "progress" } } : undefined),
                 ...(triggerOwn?.onPress && !disabled ? { onPress: triggerOwn.onPress } : undefined),
               }
             : { onPress: handleTriggerPress })}
@@ -648,6 +655,7 @@ export function FloatingPanel({
             alignSelf: "stretch",
             width: triggerSizing === "content" ? undefined : "100%",
             opacity: disabled ? 0.5 : 1,
+            ...(hold.holding ? { transform: [{ scale: holdCueScale }] } : undefined),
           }}
         >
           {/* Own the hit target — see file header for why pointerEvents="none". */}

package/src/InputParts/index.tsx

@@ -634,6 +634,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
           {...(knobProps.elevation == null ? { elevation: undefined } : knobProps.elevationChrome)}
           {...knobProps.borderRadius}
           borderWidth={knobProps.fieldEdge.borderWidth}
+          borderColor={formInputColors.border.base}
           {...hiddenEdge}
           {...sizeTableRadius}
           {...transitionProps(knobProps.motion.control)}

package/src/Wheel/Wheel.edgeFade.spec.tsx

@@ -0,0 +1,74 @@
+/**
+ * The web wheel's edge fade (FZ-8080): a LinearGradient veil of the surface the
+ * wheel sits on, never a CSS mask on the drum.
+ */
+import { SurfaceContext } from "@multiplatform.one/theme";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { createElement } from "react";
+import { Theme, useTheme } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Wheel } from "./index";
+
+vi.mock("tamagui/linear-gradient", () => ({
+  LinearGradient: (props: Record<string, unknown>) =>
+    createElement("span", {
+      "data-testid": props["data-testid"],
+      "data-colors": JSON.stringify(props.colors),
+      "data-locations": JSON.stringify(props.locations),
+      "data-opacity": props.opacity,
+      "data-pointer-events": props.pointerEvents,
+    }),
+}));
+
+afterEach(cleanup);
+
+const items = Array.from({ length: 24 }, (_, i) => i);
+const seen = { background: "" };
+
+function Probe() {
+  seen.background = String(useTheme().background?.val);
+  return null;
+}
+
+describe("web Wheel edge fade (FZ-8080)", () => {
+  it("paints no CSS mask on the drum", () => {
+    renderWithProviders(<Wheel items={items} value={6} onChange={() => {}} />);
+    const drum = screen.getByTestId("wheel-wrapper");
+    expect(drum.style.maskImage).toBe("");
+    expect(drum.style.getPropertyValue("-webkit-mask-image")).toBe("");
+  });
+
+  it("veils both ends in the page surface and leaves the selection band clear", () => {
+    renderWithProviders(
+      <>
+        <Probe />
+        <Wheel items={items} value={6} onChange={() => {}} />
+      </>,
+    );
+    const fade = screen.getByTestId("wheel-fade");
+    expect(JSON.parse(fade.getAttribute("data-colors")!)).toEqual([
+      seen.background,
+      "transparent",
+      "transparent",
+      seen.background,
+    ]);
+    expect(JSON.parse(fade.getAttribute("data-locations")!)).toEqual([0, 0.32, 0.68, 1]);
+    expect(fade.getAttribute("data-opacity")).toBe("0.72");
+    expect(fade.getAttribute("data-pointer-events")).toBe("none");
+  });
+
+  it("veils in the elevated surface on a dark overlay", () => {
+    renderWithProviders(
+      <Theme name="dark">
+        <SurfaceContext.Provider elevated>
+          <Probe />
+          <Wheel items={items} value={6} onChange={() => {}} />
+        </SurfaceContext.Provider>
+      </Theme>,
+    );
+    const colors = JSON.parse(screen.getByTestId("wheel-fade").getAttribute("data-colors")!);
+    expect(colors[0]).not.toBe(seen.background);
+    expect(colors[0]).toBe(colors[3]);
+  });
+});

package/src/Wheel/index.tsx

@@ -1,7 +1,8 @@
-import type { CSSProperties } from "react";
+import { useElevatedSurface } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { GetProps } from "tamagui";
-import { View, isWeb, styled, Text } from "tamagui";
+import { View, isWeb, styled, Text, useTheme } from "tamagui";
+import { LinearGradient } from "tamagui/linear-gradient";
 import { t } from "../shared/t";
 import { fireSelectionHaptic } from "./haptic";
 import { NativeWheel } from "./NativeWheel";
@@ -49,14 +50,8 @@ function ensureWheelFocusStyles() {
   document.head.appendChild(style);
 }
 
-const wheelMaskStyle: CSSProperties | undefined = isWeb
-  ? {
-      WebkitMaskImage:
-        "linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, #000 32%, #000 68%, rgba(0,0,0,0.28) 100%)",
-      maskImage:
-        "linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, #000 32%, #000 68%, rgba(0,0,0,0.28) 100%)",
-    }
-  : undefined;
+const wheelFadeStops = [0, 0.32, 0.68, 1];
+const wheelFadeOpacity = 0.72;
 
 // ── Styled components ─────────────────────────────────────────
 
@@ -164,6 +159,12 @@ function WebWheel<T = string | number>(props: WheelProps<T>) {
     highlightClassName,
   } = useWheelLayout(props);
   const columnWidth = widthProp ?? defaultColumnWidth;
+  const theme = useTheme();
+  const elevatedGround = useElevatedSurface();
+  const fadeKey = (
+    elevatedGround ? knobProps.elevatedSurface.backgroundColor : "$background"
+  ) as string;
+  const fadeSurface = String(theme[fadeKey.replace(/^\$/, "") as "background"]?.val ?? fadeKey);
   ensureWheelFocusStyles();
   const containerRef = useRef<HTMLDivElement>(null);
   const [scrollOffset, setScrollOffset] = useState(0);
@@ -714,7 +715,6 @@ function WebWheel<T = string | number>(props: WheelProps<T>) {
           userSelect: "none",
           touchAction: "none",
           cursor: disabled ? "not-allowed" : "grab",
-          ...wheelMaskStyle,
         }}
         onPointerDown={handlePointerDown as any}
         onPointerMove={handlePointerMove as any}
@@ -757,6 +757,20 @@ function WebWheel<T = string | number>(props: WheelProps<T>) {
           );
         })}
       </div>
+      <LinearGradient
+        data-testid="wheel-fade"
+        pointerEvents="none"
+        position="absolute"
+        top={0}
+        right={0}
+        bottom={0}
+        left={0}
+        opacity={wheelFadeOpacity}
+        colors={[fadeSurface, "transparent", "transparent", fadeSurface]}
+        locations={wheelFadeStops}
+        start={[0, 0]}
+        end={[0, 1]}
+      />
     </WheelContainer>
   );
 }

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

@@ -0,0 +1,154 @@
+import { CalendarBlankIcon, ClockIcon } from "@phosphor-icons/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import {
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+} from "@multiplatform.one/theme";
+import { configWithoutAnimations } from "@tamagui/config";
+import { animationsCSS } from "@tamagui/config/v5-css";
+import { render } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { TamaguiProvider, createTamagui } from "tamagui";
+import { describe, expect, it, vi } from "vitest";
+import { Input } from "../Input";
+import { TimePicker } from "../TimePicker";
+import { DatePicker, DatetimePicker } from "./index";
+import { CalendarDays, MonthGrid, YearGrid, isSameDay, useCalendarData } from "./parts";
+
+vi.mock("@multiplatform.one/storybook", () => ({ action: () => () => {} }));
+vi.mock("@multiplatform.one/table", () => ({ DataTable: () => null }));
+
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+const houseConfig = createTamagui({
+  ...configWithoutAnimations,
+  animations: animationsCSS,
+  themes: houseThemes as never,
+});
+
+function placeholderInk(node: ReactElement) {
+  const { container, unmount } = renderWithProviders(node);
+  const input = container.querySelector("input");
+  expect(input).toBeTruthy();
+  const ink = input!.style.getPropertyValue("--t_placeholderColor");
+  unmount();
+  return ink;
+}
+
+function pathOf(icon: ReactElement) {
+  return renderToStaticMarkup(icon).match(/ d="([^"]+)"/)![1];
+}
+
+function June() {
+  const calendarData = useCalendarData(new Date(2024, 5, 15));
+  return (
+    <CalendarDays
+      calendarData={calendarData}
+      isSelected={(day) => isSameDay(day, new Date(2024, 5, 15))}
+      onSelect={() => {}}
+    />
+  );
+}
+
+function selectedCell(node: ReactElement, scheme: "light" | "dark") {
+  const { container } = render(
+    <TamaguiProvider config={houseConfig} defaultTheme={scheme} disableInjectCSS>
+      {node}
+    </TamaguiProvider>,
+  );
+  const cell = container.querySelector<HTMLElement>("[aria-pressed='true']");
+  expect(cell).toBeTruthy();
+  return cell!;
+}
+
+describe("date and time fields read empty, name their kind and mark the pick (FZ-8433)", () => {
+  const stock = placeholderInk(<Input label="Name" placeholder="Your name" />);
+
+  it.each([
+    ["DatePicker", <DatePicker key="d" label="Date" placeholder="Pick a date" />],
+    ["DatetimePicker", <DatetimePicker key="dt" label="When" placeholder="Pick a time" />],
+    ["TimePicker", <TimePicker key="t" label="Time" placeholder="Select time" />],
+  ])("an empty %s draws its placeholder in the theme's placeholder ink", (_name, node) => {
+    const ink = placeholderInk(node);
+    expect(stock).not.toBe("");
+    expect(ink).toBe(stock);
+    expect(ink).not.toBe("var(--color11)");
+  });
+
+  it.each([
+    [
+      "DatetimePicker",
+      <DatetimePicker key="dt" label="When" />,
+      "date-picker-glyph",
+      CalendarBlankIcon,
+    ],
+    ["DatePicker", <DatePicker key="d" label="Date" />, "date-picker-glyph", CalendarBlankIcon],
+    ["TimePicker", <TimePicker key="t" label="Time" />, "time-picker-glyph", ClockIcon],
+    [
+      "a read-only DatetimePicker",
+      <DatetimePicker key="ro" label="When" value={new Date(2026, 9, 31, 9, 30)} readOnly />,
+      "date-picker-glyph",
+      CalendarBlankIcon,
+    ],
+  ] as const)("%s draws one glyph, on the input's right", (_name, node, testId, Icon) => {
+    const { container, unmount } = renderWithProviders(node);
+    const glyphs = container.querySelectorAll(`[data-testid='${testId}']`);
+    expect(glyphs).toHaveLength(1);
+    const paths = Array.from(glyphs[0]!.querySelectorAll("svg path")).map((p) =>
+      p.getAttribute("d"),
+    );
+    expect(paths).toEqual([pathOf(<Icon />)]);
+    const input = container.querySelector("input")!;
+    expect(
+      input.compareDocumentPosition(glyphs[0]!) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+    unmount();
+  });
+
+  it("a filled web field swaps its glyph for the clear action, so the right holds one icon", () => {
+    const { container } = renderWithProviders(
+      <DatetimePicker label="When" value={new Date(2026, 9, 31, 9, 30)} />,
+    );
+    expect(container.querySelector("[data-testid='date-picker-glyph']")).toBeNull();
+    expect(container.querySelector("[data-testid='date-picker-clear']")).toBeTruthy();
+  });
+
+  it.each(
+    (["light", "dark"] as const).flatMap((scheme) => [
+      ["day", scheme, <June key="d" />],
+      [
+        "month",
+        scheme,
+        <MonthGrid key="m" currentYear={2024} selectedMonth={5} onSelectMonth={() => {}} />,
+      ],
+      [
+        "year",
+        scheme,
+        <YearGrid
+          key="y"
+          yearPageStart={2020}
+          selectedYear={2024}
+          onSelectYear={() => {}}
+          onPrevPage={() => {}}
+          onNextPage={() => {}}
+        />,
+      ],
+    ]) as [string, "light" | "dark", ReactElement][],
+  )(
+    "the picked %s fills with the accent mark in %s, inked for that fill",
+    (_name, scheme, node) => {
+      const cell = selectedCell(node, scheme);
+      expect(cell.className).toMatch(/(?:^|\s)_bg-accentBackg/);
+      expect(cell.className).not.toMatch(/t_accent/);
+      const ink = cell.querySelector<HTMLElement>("span")!.className;
+      expect(ink).toMatch(/(?:^|\s)_col-(?:hsla?|rgba?)/);
+    },
+  );
+});

package/src/fields/DatePicker/parts.tsx

@@ -12,6 +12,7 @@ import {
   getMonthNames,
   useAccentOnSurface,
   useGlyphColor,
+  useReadableTextOn,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
 import {
@@ -29,7 +30,7 @@ import { FloatingPanel, floatingPanelActionProps, isNestedPanelAction } from "..
 import type { PanelActionEvent } from "../../FloatingPanel/nestedAction";
 import type { PanelWidth } from "../../FloatingPanel/panelWidth";
 import { Input as InputParts } from "../../InputParts";
-import { formCommonColors } from "../../shared/colorRamps";
+import { formCommonColors, formSelectedColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 
 // ---------------------------------------------------------------------------
@@ -341,6 +342,7 @@ export function CalendarDayCell({
 }) {
   const { knobProps } = useCalendarKnobs();
   const accentText = useAccentOnSurface();
+  const onMark = useReadableTextOn(formSelectedColors.mark);
   const { px, hitSlop, box } = splitNestedControl(knobProps.nestedControl);
 
   if (!visible) {
@@ -373,8 +375,7 @@ export function CalendarDayCell({
       // identical to a choosable cell; we do not adopt that.
       opacity={disabled ? 0.5 : dimmed ? 0.45 : 1}
       pointerEvents={disabled ? "none" : "auto"}
-      backgroundColor={selected ? (selectedBackground ?? "$background") : "transparent"}
-      theme={selected ? ("accent" as any) : undefined}
+      backgroundColor={selected ? (selectedBackground ?? formSelectedColors.mark) : "transparent"}
       borderWidth={showTodayMark ? 2 : 0}
       borderColor={showTodayMark ? accentText : "transparent"}
       zIndex={1}
@@ -398,7 +399,7 @@ export function CalendarDayCell({
         {...knobProps.label}
         {...knobProps.textWeight}
         fontWeight={selected ? "bold" : knobProps.textWeight.fontWeight}
-        color={selected ? undefined : today ? accentText : formCommonColors.text}
+        color={selected ? onMark : today ? accentText : formCommonColors.text}
       >
         {day.getDate()}
       </Text>
@@ -675,6 +676,7 @@ interface MonthGridProps {
 
 export function MonthGrid({ currentYear, selectedMonth, onSelectMonth }: MonthGridProps) {
   const { knobProps } = useCalendarKnobs();
+  const onMark = useReadableTextOn(formSelectedColors.mark);
   const { animation, animationKey } = useDateAnimation(currentYear);
   const { px, hitSlop, box } = splitNestedControl(knobProps.nestedControl);
   const cellW = (px * 7) / 3;
@@ -706,8 +708,7 @@ export function MonthGrid({ currentYear, selectedMonth, onSelectMonth }: MonthGr
               cursor="pointer"
               alignItems="center"
               justifyContent="center"
-              theme={isSelected ? ("accent" as any) : undefined}
-              backgroundColor={isSelected ? "$background" : "transparent"}
+              backgroundColor={isSelected ? formSelectedColors.mark : "transparent"}
               onPress={() => onSelectMonth(index)}
               outlineWidth={0}
               focusStyle={{ outlineWidth: 0 }}
@@ -725,7 +726,7 @@ export function MonthGrid({ currentYear, selectedMonth, onSelectMonth }: MonthGr
             >
               <Text
                 {...knobProps.label}
-                color={isSelected ? "$color" : formCommonColors.text}
+                color={isSelected ? onMark : formCommonColors.text}
                 fontWeight={isSelected ? "bold" : "400"}
               >
                 {t(name.slice(0, 3))}
@@ -758,6 +759,7 @@ export function YearGrid({
   onNextPage,
 }: YearGridProps) {
   const { knobProps } = useCalendarKnobs();
+  const onMark = useReadableTextOn(formSelectedColors.mark);
   const glyphColor = useGlyphColor();
   const { px, hitSlop, box } = splitNestedControl(knobProps.nestedControl);
   const cellW = (px * 7) / 3;
@@ -810,8 +812,7 @@ export function YearGrid({
                 cursor="pointer"
                 alignItems="center"
                 justifyContent="center"
-                theme={isSelected ? ("accent" as any) : undefined}
-                backgroundColor={isSelected ? "$background" : "transparent"}
+                backgroundColor={isSelected ? formSelectedColors.mark : "transparent"}
                 onPress={() => onSelectYear(year)}
                 outlineWidth={0}
                 focusStyle={{ outlineWidth: 0 }}
@@ -829,7 +830,7 @@ export function YearGrid({
               >
                 <Text
                   {...knobProps.label}
-                  color={isSelected ? "$color" : formCommonColors.text}
+                  color={isSelected ? onMark : formCommonColors.text}
                   fontWeight={isSelected ? "bold" : "400"}
                 >
                   {year}
@@ -855,8 +856,8 @@ interface DatePickerInputTriggerProps {
   onReset: () => void;
   onButtonPress: () => void;
   id?: string;
-  /** Empty-state glyph. Datetime uses calendar; TimePicker uses clock. */
-  glyph?: "calendar" | "clock";
+  /** Trailing glyph: a clock for a time, else a calendar. */
+  glyph?: TriggerGlyphKind;
   "aria-label"?: string;
   "aria-labelledby"?: string;
   "aria-describedby"?: string;
@@ -864,6 +865,16 @@ interface DatePickerInputTriggerProps {
   "aria-invalid"?: boolean;
 }
 
+type TriggerGlyphKind = "calendar" | "clock";
+
+function TriggerGlyph({ glyph, ...groupItem }: { glyph: TriggerGlyphKind }) {
+  return (
+    <InputParts.Icon adornment="trailing" color={formCommonColors.muted} {...groupItem}>
+      {glyph === "clock" ? <ClockIcon /> : <CalendarBlankIcon />}
+    </InputParts.Icon>
+  );
+}
+
 export function DatePickerClearButton({
   onReset,
   disabled,
@@ -918,8 +929,6 @@ export function DatePickerInputTrigger({
     }
   };
 
-  const Glyph = glyph === "clock" ? ClockIcon : CalendarBlankIcon;
-
   return (
     // LC-40: the disabled Box below is pointerEvents-none, so the cursor
     // affordance must ride this wrapper — the fragment's not-allowed never
@@ -961,11 +970,6 @@ export function DatePickerInputTrigger({
             }
           : undefined)}
       >
-        <InputParts.Section data-testid="date-picker-glyph">
-          <InputParts.Icon adornment="leading" color={formCommonColors.muted}>
-            <Glyph />
-          </InputParts.Icon>
-        </InputParts.Section>
         <InputParts.Section>
           <InputParts.Area
             readOnly
@@ -975,14 +979,17 @@ export function DatePickerInputTrigger({
             placeholder={placeholder}
             disabled={disabled}
             color={formCommonColors.text}
-            placeholderTextColor={formCommonColors.muted}
           />
         </InputParts.Section>
-        {value && isWeb ? (
+        {value && isWeb && !disabled ? (
           <InputParts.Section>
             <DatePickerClearButton onReset={onReset} disabled={disabled} />
           </InputParts.Section>
-        ) : null}
+        ) : (
+          <InputParts.Section data-testid="date-picker-glyph">
+            <TriggerGlyph glyph={glyph} />
+          </InputParts.Section>
+        )}
       </InputParts.Box>
     </View>
   );
@@ -992,7 +999,7 @@ interface DatePickerReadOnlyFieldProps {
   value: string;
   placeholder?: string;
   id?: string;
-  glyph?: "calendar" | "clock";
+  glyph?: TriggerGlyphKind;
   "aria-label"?: string;
   "aria-required"?: boolean;
   "aria-invalid"?: boolean;
@@ -1011,7 +1018,6 @@ export function DatePickerReadOnlyField({
   "aria-required": ariaRequired,
   "aria-invalid": ariaInvalid,
 }: DatePickerReadOnlyFieldProps) {
-  const Glyph = glyph === "clock" ? ClockIcon : CalendarBlankIcon;
   return (
     <View flexDirection="row" alignItems="center" width="100%">
       <InputParts.Box
@@ -1020,11 +1026,6 @@ export function DatePickerReadOnlyField({
         elevation={undefined}
         data-testid="date-picker-readonly"
       >
-        <InputParts.Section data-testid="date-picker-glyph">
-          <InputParts.Icon adornment="leading" color={formCommonColors.muted}>
-            <Glyph />
-          </InputParts.Icon>
-        </InputParts.Section>
         <InputParts.Section>
           <InputParts.Area
             readOnly
@@ -1032,13 +1033,15 @@ export function DatePickerReadOnlyField({
             value={value}
             placeholder={placeholder}
             color={formCommonColors.text}
-            placeholderTextColor={formCommonColors.muted}
             aria-label={ariaLabel}
             aria-readonly="true"
             aria-required={ariaRequired}
             aria-invalid={ariaInvalid}
           />
         </InputParts.Section>
+        <InputParts.Section data-testid="date-picker-glyph">
+          <TriggerGlyph glyph={glyph} />
+        </InputParts.Section>
       </InputParts.Box>
     </View>
   );