@multiplatform.one/forms 8.3.0 → 8.5.0

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>
   );

package/src/fields/FileUpload/index.tsx

@@ -2,7 +2,16 @@ import { transitionProps } from "@multiplatform.one/theme";
 import { useTouchSurface } from "@multiplatform.one/theme";
 import { FileIcon, UploadIcon, XIcon } from "@phosphor-icons/react";
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
-import { type DragEvent, type ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import {
+  type DragEvent,
+  type ReactNode,
+  type Ref,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
 import { useMedia, useProps, type SizeTokens } from "tamagui";
 import { Image, isWeb, Text, XStack, YStack, styled } from "tamagui";
 import { Button, IconButton, IconButtonGroup } from "../../Button";
@@ -26,6 +35,7 @@ import {
 import { formCommonColors, formDropzoneColors, formInputColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import type { FieldComponentProps, Validator } from "../../types";
+import type { FieldPickerHandle, FieldPickerTrigger } from "../pickerHandle";
 import type { NativePickedFile, NativePickerMode } from "./filePickerTypes";
 // Platform-split: the web twin is inert, the `.native` twin opens
 // expo-document-picker / expo-image-picker (Geolocation map-surface pattern).
@@ -114,6 +124,10 @@ export type FileUploadProps<
     existing?: { src: string; name?: string; isImage?: boolean } | null;
     /** Removes the existing file; given, its tile carries a remove disc. */
     onExistingRemove?: () => void;
+    /** LC-290: `open()` runs the picker from the app's own control. */
+    ref?: Ref<FieldPickerHandle>;
+    /** LC-290: the app's own control, drawn in place of the dropzone; call `open` from its press. */
+    trigger?: FieldPickerTrigger;
   };
 
 const UploadAreaFrame = styled(YStack, {
@@ -203,6 +217,7 @@ export function FileUpload<
 >(props: FileUploadProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
   const hydrationTouch = useTouchSurface();
   const media = useMedia();
+  const { ref: pickerRef, trigger } = props;
   const {
     defaultValue,
     form,
@@ -230,6 +245,8 @@ export function FileUpload<
     existing,
     onExistingRemove,
     id: idProp,
+    ref: _ref,
+    trigger: _trigger,
     ...fieldProps
   } = useProps(props);
 
@@ -615,6 +632,9 @@ export function FileUpload<
     fileInputRef.current?.click();
   }, [disabled, readOnly]);
 
+  const requestFilesRef = useRef<() => void>(openFileDialog);
+  useImperativeHandle(pickerRef, () => ({ open: () => requestFilesRef.current() }), []);
+
   // Native has no <input type="file">. The same press opens the OS picker and
   // routes its result through the identical validate → setState → field path,
   // so `accept`, `maxSize`, `multiple` and the removal list behave as on web.
@@ -912,6 +932,29 @@ export function FileUpload<
       : () => {
           void openNativePicker(onValueChange, onBlurHandler);
         };
+    requestFilesRef.current = requestFiles;
+    const hiddenInput = isWeb ? (
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        tabIndex={-1}
+        onChange={(e) => {
+          handleFileSelect(e.target.files, onValueChange, e.target.files);
+          onBlurHandler?.();
+        }}
+        style={{ display: "none" }}
+        disabled={!canInteract}
+      />
+    ) : null;
+    if (trigger)
+      return (
+        <YStack data-file-upload="trigger" alignItems="flex-start">
+          {trigger(requestFiles)}
+          {hiddenInput}
+        </YStack>
+      );
 
     // Drag-and-drop, keyboard activation and the focus ring are DOM concerns;
     // native gets a plain press target on the same surface instead.
@@ -1150,21 +1193,7 @@ export function FileUpload<
             </Text>
           )}
 
-          {isWeb ? (
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept={accept}
-              multiple={multiple}
-              tabIndex={-1}
-              onChange={(e) => {
-                handleFileSelect(e.target.files, onValueChange, e.target.files);
-                onBlurHandler?.();
-              }}
-              style={{ display: "none" }}
-              disabled={!canInteract}
-            />
-          ) : null}
+          {hiddenInput}
         </YStack>
 
         {((multiple && hasRows) || transfers.length > 0) && (

package/src/fields/ImageField/index.tsx

@@ -18,8 +18,9 @@ import {
   type DisabledSurfaceProps,
   type KnobProps,
 } from "@multiplatform.one/theme";
-import type { DragEvent, ReactNode } from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import type { DragEvent, ReactNode, Ref } from "react";
+import { useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import type { FieldPickerHandle, FieldPickerTrigger } from "../pickerHandle";
 import type { LabelProps, SizeTokens } from "tamagui";
 import { Image, Text as TamaguiText, View, YStack, isWeb, styled } from "tamagui";
 import { IconButton } from "../../Button";
@@ -78,6 +79,10 @@ export interface ImageFieldProps {
   objectFit?: "cover" | "contain" | "fill" | "none";
   /** When true, renders a skeleton placeholder instead of the image field */
   skeleton?: boolean;
+  /** LC-290: `open()` runs the picker from the app's own control. */
+  ref?: Ref<FieldPickerHandle>;
+  /** LC-290: the app's own control, drawn in place of the image frame; call `open` from its press. */
+  trigger?: FieldPickerTrigger;
 }
 
 const ImageFrame = styled(View, {
@@ -112,6 +117,8 @@ type ImageControlProps = {
   onChangeProp?: (val: string | File | null) => void;
   onInvalid?: (message: string | undefined) => void;
   blurHandler?: (...args: any[]) => void;
+  pickerRef?: Ref<FieldPickerHandle>;
+  trigger?: FieldPickerTrigger;
 };
 
 function isImageFile(file: File, accept: string): boolean {
@@ -148,6 +155,8 @@ function ImageControl({
   onChangeProp,
   onInvalid,
   blurHandler,
+  pickerRef,
+  trigger,
 }: ImageControlProps) {
   const describedBy = useFieldDescribedBy();
   const fieldA11y = useFieldA11y();
@@ -230,6 +239,7 @@ function ImageControl({
     if (!canInteract) return;
     fileInputRef.current?.click();
   }, [canInteract]);
+  useImperativeHandle(pickerRef, () => ({ open: openFileDialog }), [openFileDialog]);
 
   const isInteractiveChild = useCallback((e: { target: unknown; currentTarget: unknown }) => {
     const target = e.target as HTMLElement | null;
@@ -313,6 +323,31 @@ function ImageControl({
   const emptyName =
     typeof label === "string" && label ? t("{{label}}: add image", { label }) : t("Add image");
 
+  const hiddenInput = isWeb ? (
+    <input
+      ref={fileInputRef}
+      type="file"
+      accept={accept}
+      tabIndex={-1}
+      aria-hidden={true}
+      onChange={(e) => {
+        const files = e.target.files;
+        e.target.value = "";
+        if (!files || files.length === 0) return;
+        applyFile(files[0]);
+      }}
+      style={{ display: "none" }}
+      disabled={!canInteract}
+    />
+  ) : null;
+  if (trigger)
+    return (
+      <YStack alignItems="flex-start" data-image-field="trigger">
+        {trigger(openFileDialog)}
+        {hiddenInput}
+      </YStack>
+    );
+
   return (
     <YStack alignItems="flex-start" {...knobProps.gap}>
       <ImageFrame
@@ -398,23 +433,7 @@ function ImageControl({
           </View>
         )}
 
-        {isWeb && (
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept={accept}
-            tabIndex={-1}
-            aria-hidden={true}
-            onChange={(e) => {
-              const files = e.target.files;
-              e.target.value = "";
-              if (!files || files.length === 0) return;
-              applyFile(files[0]);
-            }}
-            style={{ display: "none" }}
-            disabled={!canInteract}
-          />
-        )}
+        {hiddenInput}
       </ImageFrame>
 
       {showRemove && hasValue && canInteract && !inTableCell && (
@@ -453,6 +472,8 @@ export function ImageField({
   placeholder,
   objectFit = "cover",
   skeleton,
+  ref,
+  trigger,
 }: ImageFieldProps) {
   const { resolvedForm, knobProps, disabledState, id } = useFormField({
     form: formProp,
@@ -486,6 +507,8 @@ export function ImageField({
     disabledSurface: disabled ? disabledState.surfaceKnobProps : undefined,
     onChangeProp,
     onInvalid: setValidationError,
+    pickerRef: ref,
+    trigger,
   };
 
   if (!resolvedForm || !name) {

package/src/fields/Progress/index.tsx

@@ -25,6 +25,7 @@ import {
 import { Field, FieldLayout, useFieldDescribedBy } from "../../fieldLayout";
 import { Skeleton } from "../../Skeleton";
 import { formControlColors, formSelectedColors } from "../../shared/colorRamps";
+import { useControlTrackFill } from "../../shared/controlTrack";
 import { useIsInTableCell } from "../../shared/tableCellContext";
 import { bidiIsolate, t } from "../../shared/t";
 import {
@@ -186,6 +187,7 @@ function ProgressTrack({
   blurHandler,
 }: ProgressTrackProps) {
   const describedBy = useFieldDescribedBy();
+  const trackFill = useControlTrackFill();
   const trackSize = size ?? sizeToken;
   const percent = Math.round((progressValue / max) * 100);
   const motion = indicatorMotion(knobProps.motion.slide);
@@ -197,6 +199,7 @@ function ProgressTrack({
       size={trackSize}
       overflow="hidden"
       outlined={knobProps.outlined}
+      {...(knobProps.outlined ? undefined : { backgroundColor: trackFill })}
       {...knobProps.borderRadius}
       {...(knobProps.outlined ? knobProps.inputSurface : { borderWidth: 0 })}
       {...(knobProps.outlined ? { borderColor: formControlColors.boundary } : undefined)}

package/src/fields/Slider/Slider.system.native.spec.tsx

@@ -25,6 +25,17 @@ const SystemSliderProbe = vi.hoisted(
           data-rail={props.maximumTrackTintColor}
           data-thumb={props.thumbTintColor ?? ""}
           data-label={props.accessibilityLabel ?? ""}
+          data-accessible={String(props.accessible ?? "")}
+          data-role={props.accessibilityRole ?? ""}
+          data-a11y-value={JSON.stringify(props.accessibilityValue ?? null)}
+          data-actions={(props.accessibilityActions ?? [])
+            .map((a: { name: string }) => a.name)
+            .join(",")}
+          onKeyDown={(event) => {
+            const actionName =
+              event.key === "ArrowUp" ? "increment" : event.key === "ArrowDown" ? "decrement" : "";
+            if (actionName) props.onAccessibilityAction?.({ nativeEvent: { actionName } });
+          }}
           data-min={props.minimumValue}
           data-max={props.maximumValue}
           data-step={props.step}
@@ -101,6 +112,39 @@ describe("Slider on iOS and Android", () => {
     },
   );
 
+  it("is an adjustable element named by its label, valued, stepping on VoiceOver swipes (FZ-8905)", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <Slider
+        label="Brightness"
+        defaultValue={[80]}
+        min={0}
+        max={100}
+        step={1}
+        onChange={onChange}
+      />,
+    );
+    const view = result.getByTestId("system-slider");
+    expect(view.dataset).toMatchObject({
+      accessible: "true",
+      role: "adjustable",
+      label: "Brightness",
+      actions: "increment,decrement",
+    });
+    expect(JSON.parse(view.dataset.a11yValue ?? "null")).toEqual({
+      min: 0,
+      max: 100,
+      now: 80,
+      text: "80",
+    });
+    fireEvent.keyDown(view, { key: "ArrowUp" });
+    expect(onChange).toHaveBeenLastCalledWith([81]);
+    expect(JSON.parse(view.dataset.a11yValue ?? "null")).toMatchObject({ now: 81 });
+    fireEvent.keyDown(view, { key: "ArrowDown" });
+    fireEvent.keyDown(view, { key: "ArrowDown" });
+    expect(onChange).toHaveBeenLastCalledWith([79]);
+  });
+
   it("tints the Android thumb with the fill", () => {
     system.os = "android";
     const result = renderInScheme(<Slider label="Volume" />, "light");

package/src/fields/Slider/index.tsx

@@ -34,6 +34,7 @@ import {
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
 import { formCommonColors, formControlColors, formSelectedColors } from "../../shared/colorRamps";
+import { useControlTrackFill } from "../../shared/controlTrack";
 import { loadSystemSlider } from "../../shared/systemControlModules";
 import {
   type SystemPlatform,
@@ -74,12 +75,16 @@ function radiusStopFromToken(token: number | string): BorderRadius {
 }
 
 // Track styling helper - returns props to pass to TamaguiSlider.Track
-const getTrackProps = (outlined: boolean | undefined, borderRadius: number) => ({
+const getTrackProps = (
+  outlined: boolean | undefined,
+  borderRadius: number,
+  trackFill: string = formControlColors.background,
+) => ({
   unstyled: false,
   height: TRACK_HEIGHT,
   width: "100%",
   alignSelf: "center" as const,
-  backgroundColor: outlined ? "transparent" : formControlColors.background,
+  backgroundColor: outlined ? "transparent" : trackFill,
   borderWidth: outlined ? 1 : 0,
   borderColor: outlined ? formControlColors.border : undefined,
   borderRadius,
@@ -270,9 +275,26 @@ function SystemSliderControl({
   onBlur?: (...args: any[]) => void;
 }) {
   const literal = useThemeLiteral();
+  const trackFill = useControlTrackFill();
   const [displayValue, setDisplayValue] = useState(value);
   useEffect(() => setDisplayValue(value), [value]);
   const fill = literal(hasError ? formCommonColors.error : formSelectedColors.mark);
+  // A Fabric view is an accessibility element only when `accessible` says so:
+  // without it UIKit drops the UISlider from the tree (FZ-8905). It takes the
+  // MPO thumb's VoiceOver contract: adjustable, named by its field, valued,
+  // and one step per swipe.
+  const fieldA11y = useFieldA11y();
+  const move = (next: number) => {
+    setDisplayValue(next);
+    if (disabled || readOnly) return;
+    onChangeValue(next);
+  };
+  const adjust = (direction: 1 | -1) => {
+    if (disabled || readOnly) return;
+    const next = snapSliderValue(displayValue + direction * step, min, max, step);
+    if (next !== displayValue) move(next);
+  };
+  const readout = formatSliderOutput([displayValue], step);
   return (
     <XStack height={height} alignItems="center" width="100%" gap="$3">
       <View
@@ -291,15 +313,20 @@ function SystemSliderControl({
           step={step}
           disabled={disabled}
           minimumTrackTintColor={fill}
-          maximumTrackTintColor={literal(formControlColors.background)}
+          maximumTrackTintColor={literal(trackFill)}
           {...(platform === "android" && { thumbTintColor: fill })}
-          accessibilityLabel={accessibilityLabel}
-          accessibilityHint={accessibilityHint}
-          onValueChange={(next) => {
-            setDisplayValue(next);
-            if (disabled || readOnly) return;
-            onChangeValue(next);
+          accessible
+          accessibilityRole="adjustable"
+          accessibilityLabel={accessibilityLabel ?? fieldA11y?.label ?? t("Slider")}
+          accessibilityHint={accessibilityHint ?? fieldA11y?.description}
+          accessibilityValue={{ min, max, now: displayValue, text: readout }}
+          accessibilityState={{ disabled: Boolean(disabled) }}
+          accessibilityActions={A11Y_ADJUSTABLE_ACTIONS}
+          onAccessibilityAction={(event: { nativeEvent: { actionName: string } }) => {
+            if (event.nativeEvent.actionName === "increment") adjust(1);
+            else if (event.nativeEvent.actionName === "decrement") adjust(-1);
           }}
+          onValueChange={move}
           onSlidingComplete={() => onBlur?.()}
         />
       </View>
@@ -310,7 +337,7 @@ function SystemSliderControl({
         textAlign="right"
         aria-hidden
       >
-        {formatSliderOutput([displayValue], step)}
+        {readout}
       </Paragraph>
     </XStack>
   );
@@ -383,6 +410,7 @@ function SliderControl({
   // with their thumbs (RULINGS-2026-08-28 §R2).
   const radiusStop = radiusStopFromToken(borderRadius);
   const railRadius = resolveRadiusClass("BINARY", radiusStop, { heightPx: TRACK_HEIGHT });
+  const trackFill = useControlTrackFill();
 
   // Native jump tween rides transform (FLIP) — the RN driver cannot animate
   // the thumb's `left` percent (see ./jumpMotion.ts). Web keeps the css
@@ -634,12 +662,12 @@ function SliderControl({
               height={TRACK_HEIGHT}
               borderRadius={railRadius}
             >
-              <TamaguiSlider.Track {...getTrackProps(outlined, railRadius)}>
+              <TamaguiSlider.Track {...getTrackProps(outlined, railRadius, trackFill)}>
                 {trackActive}
               </TamaguiSlider.Track>
             </View>
           ) : (
-            <TamaguiSlider.Track {...getTrackProps(outlined, railRadius)}>
+            <TamaguiSlider.Track {...getTrackProps(outlined, railRadius, trackFill)}>
               {trackActive}
             </TamaguiSlider.Track>
           )}

package/src/fields/Stepper/Stepper.stories.tsx

@@ -188,3 +188,45 @@ export const InTable: Story = {
     );
   },
 };
+
+/** LC-114: a buttonless Stepper with `hug` is the number field. It is as wide as its value plus the currency glyph or unit, and a long signed value with decimals still fits (FZ-7598). */
+export const HuggingCurrency: Story = {
+  render: () => (
+    <YStack gap="$4" width="100%">
+      <Stepper
+        label="Daily loss cap"
+        aria-label="Daily loss cap"
+        currency="USD"
+        hug
+        showButtons={false}
+        min={0}
+        max={50000}
+        precision={2}
+        defaultValue={2500}
+      />
+      <Stepper
+        label="Position limit"
+        aria-label="Position limit"
+        unit="%"
+        hug
+        showButtons={false}
+        min={0}
+        max={100}
+        precision={1}
+        defaultValue={12.5}
+      />
+      <Stepper
+        label="Adjustment"
+        aria-label="Adjustment"
+        currency="USD"
+        hug
+        showButtons={false}
+        min={-9999999}
+        max={9999999}
+        precision={2}
+        defaultValue={-1234567.89}
+      />
+      <Stepper label="Contracts" aria-label="Contracts" hug min={1} max={500} defaultValue={12} />
+    </YStack>
+  ),
+};