@multiplatform.one/forms 8.2.2 → 8.4.0

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>
+  ),
+};

package/src/fields/Switch/Switch.spec.tsx

@@ -499,16 +499,20 @@ describe("Switch thumb and pointer paint", () => {
     expect(paint(track, "_bg-")).toBe("var(--switchTrackOff)");
   });
 
-  it.each([false, true])("grown=%s changes only the outlined ring on hover", (grown) => {
-    const { frame, track } = mount({ grown, outlined: true });
-    expect(track.className).toContain("_bg-transparent");
-    expect(paint(track, "_btc-")).toBe("var(--switchTrackOff)");
-    fireEvent.mouseEnter(frame);
-    expect(track.className).toContain("_bg-transparent");
-    expect(paint(track, "_btc-")).toBe("var(--switchTrackOffHover)");
-    fireEvent.mouseLeave(frame);
-    expect(paint(track, "_btc-")).toBe("var(--switchTrackOff)");
-  });
+  it.each([false, true])(
+    "grown=%s keeps the outlined ring on its 3:1 edge and washes the track on hover (LC-299)",
+    (grown) => {
+      const { frame, track } = mount({ grown, outlined: true });
+      expect(track.className).toContain("_bg-transparent");
+      expect(paint(track, "_btc-")).toBe("var(--switchTrackOffBorder)");
+      fireEvent.mouseEnter(frame);
+      expect(paint(track, "_bg-")).toBe("var(--switchTrackOffHover)");
+      expect(paint(track, "_btc-")).toBe("var(--switchTrackOffBorder)");
+      fireEvent.mouseLeave(frame);
+      expect(track.className).toContain("_bg-transparent");
+      expect(paint(track, "_btc-")).toBe("var(--switchTrackOffBorder)");
+    },
+  );
 
   it("composes the caller's mouse handlers once", () => {
     const onMouseEnter = vi.fn();

package/src/fields/Switch/index.tsx

@@ -198,7 +198,7 @@ const SwitchFrameStyled = styled(View, {
         borderRadius: 1000,
         backgroundColor: formSwitchColors.track.off,
         borderWidth: 0,
-        borderColor: formSwitchColors.track.off,
+        borderColor: formSwitchColors.track.offBorder,
         outlineWidth: 0,
         focusStyle: { outlineWidth: 0 },
         // LC-71: ring is painted from keyboard modality on the track, never
@@ -214,7 +214,7 @@ const SwitchFrameStyled = styled(View, {
       },
       false: {
         backgroundColor: formSwitchColors.track.off,
-        borderColor: formSwitchColors.track.off,
+        borderColor: formSwitchColors.track.offBorder,
       },
     },
 
@@ -406,6 +406,8 @@ function SwitchControl({
     : hovered
       ? formSwitchColors.track.offHover
       : formSwitchColors.track.off;
+  const offFill = outlined && !hovered && !pressed ? "transparent" : offPaint;
+  const offRing = outlined ? undefined : knobProps.trackRing;
   const { thumbInset, thumbSize, travel: dragDistance } = footprint;
   const motion = resolveSwitchMotion(transition);
   const [dragX, setDragX] = useState<number | null>(null);
@@ -562,8 +564,9 @@ function SwitchControl({
               borderColor: formSwitchColors.track.on,
             }
           : {
-              backgroundColor: outlined ? "transparent" : offPaint,
-              borderColor: offPaint,
+              backgroundColor: offFill,
+              borderColor: formSwitchColors.track.offBorder,
+              ...offRing,
             })}
       {...(kbFocus ? { "data-kb-focus": "true" } : undefined)}
       {...(frameClassName ? { className: frameClassName } : undefined)}
@@ -653,10 +656,11 @@ function SwitchControl({
           borderRadius={cellTrack.borderRadius}
           {...radiusResolution}
           borderWidth={cellTrack.borderWidth}
-          borderColor={displayChecked ? formSwitchColors.track.on : offPaint}
-          backgroundColor={
-            displayChecked ? formSwitchColors.track.on : outlined ? "transparent" : offPaint
+          borderColor={
+            displayChecked ? formSwitchColors.track.on : formSwitchColors.track.offBorder
           }
+          backgroundColor={displayChecked ? formSwitchColors.track.on : offFill}
+          {...(displayChecked ? undefined : offRing)}
           {...transitionProps({ ...knobProps.motion.control, transition: motion }, ["borderWidth"])}
           pointerEvents="none"
           className={kbFocus ? SWITCH_KB_RING_CLASS : undefined}

package/src/fields/TimePicker/parts.tsx

@@ -160,11 +160,6 @@ export function TimePickerInputTrigger({
         onPress={isWeb && interactive ? onOpen : undefined}
         {...(disabled ? { opacity: 0.5, pointerEvents: "none" as const } : undefined)}
       >
-        <InputParts.Section data-testid="time-picker-glyph">
-          <InputParts.Icon adornment="leading" color={formCommonColors.muted}>
-            {clockIcon ?? <ClockIcon />}
-          </InputParts.Icon>
-        </InputParts.Section>
         <InputParts.Section>
           <InputParts.Area
             readOnly
@@ -174,7 +169,6 @@ export function TimePickerInputTrigger({
             placeholder={placeholder}
             disabled={disabled}
             color={formCommonColors.text}
-            placeholderTextColor={formCommonColors.muted}
             aria-label={ariaLabel}
             aria-required={ariaRequired}
             aria-invalid={ariaInvalid}
@@ -196,11 +190,17 @@ export function TimePickerInputTrigger({
             }
           />
         </InputParts.Section>
-        {value && isWeb && !readOnly ? (
+        {value && isWeb && !readOnly && !disabled ? (
           <InputParts.Section>
             <TimePickerClearButton onClear={onClear} disabled={disabled} />
           </InputParts.Section>
-        ) : null}
+        ) : (
+          <InputParts.Section data-testid="time-picker-glyph">
+            <InputParts.Icon adornment="trailing" color={formCommonColors.muted}>
+              {clockIcon ?? <ClockIcon />}
+            </InputParts.Icon>
+          </InputParts.Section>
+        )}
       </InputParts.Box>
     </View>
   );

package/src/fields/ToggleGroup/index.tsx

@@ -25,7 +25,12 @@ import {
 } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
-import { formButtonColors, formCommonColors, formInputColors } from "../../shared/colorRamps";
+import {
+  formButtonColors,
+  formCommonColors,
+  formControlColors,
+  formInputColors,
+} from "../../shared/colorRamps";
 import { warnBareDisabled } from "../../shared/devWarn";
 import { choiceItemA11y, composeA11yName } from "../../shared/nativeA11y";
 import { loadSystemSegmentedControl } from "../../shared/systemControlModules";
@@ -693,6 +698,7 @@ export function ToggleGroup({
           {...toggleProps}
           {...knobProps.borderRadius}
           {...knobProps.inputSurface}
+          borderColor={formControlColors.edge}
           overflow="hidden"
           backgroundColor={knobProps.outlined ? "transparent" : formInputColors.background.base}
           {...(isWeb

package/src/fields/fieldTriggerSlot.spec.tsx

@@ -0,0 +1,89 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent } from "@testing-library/react";
+import { createRef } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Button } from "../Button";
+import { FileUpload } from "./FileUpload";
+import { ImageField } from "./ImageField";
+import type { FieldPickerHandle } from "./pickerHandle";
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+function fileInput(container: HTMLElement) {
+  return container.querySelector("input[type='file']") as HTMLInputElement;
+}
+
+function pick(input: HTMLInputElement, file: File) {
+  fireEvent.change(input, { target: { files: [file] } });
+}
+
+describe("LC-290 FIELD-TRIGGER-SLOT", () => {
+  it("FileUpload opens its picker from an imperative open()", () => {
+    const click = vi.spyOn(HTMLInputElement.prototype, "click").mockImplementation(() => {});
+    const handle = createRef<FieldPickerHandle>();
+    renderWithProviders(<FileUpload ref={handle} />);
+    act(() => handle.current?.open());
+    expect(click).toHaveBeenCalledTimes(1);
+  });
+
+  it("FileUpload draws a consumer trigger instead of its dropzone, and a pick from it reaches onChange", () => {
+    const click = vi.spyOn(HTMLInputElement.prototype, "click").mockImplementation(() => {});
+    const onChange = vi.fn();
+    const { container, getByRole } = renderWithProviders(
+      <FileUpload
+        onChange={onChange}
+        trigger={(open) => (
+          <Button onPress={open} aria-label="Choose from library">
+            Library
+          </Button>
+        )}
+      />,
+    );
+    expect(container.querySelector("[data-file-upload='trigger']")).toBeTruthy();
+    expect(container.textContent).not.toContain("Choose File");
+    fireEvent.click(getByRole("button", { name: "Choose from library" }));
+    expect(click).toHaveBeenCalledTimes(1);
+    pick(fileInput(container), new File(["x"], "receipt.pdf", { type: "application/pdf" }));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("FileUpload's open() does nothing while disabled", () => {
+    const click = vi.spyOn(HTMLInputElement.prototype, "click").mockImplementation(() => {});
+    const handle = createRef<FieldPickerHandle>();
+    renderWithProviders(<FileUpload ref={handle} disabled />);
+    act(() => handle.current?.open());
+    expect(click).not.toHaveBeenCalled();
+  });
+
+  it("ImageField opens its picker from an imperative open()", () => {
+    const click = vi.spyOn(HTMLInputElement.prototype, "click").mockImplementation(() => {});
+    const handle = createRef<FieldPickerHandle>();
+    renderWithProviders(<ImageField ref={handle} label="Avatar" />);
+    act(() => handle.current?.open());
+    expect(click).toHaveBeenCalledTimes(1);
+  });
+
+  it("ImageField draws a consumer trigger instead of its frame, and a pick from it reaches onChange", () => {
+    const click = vi.spyOn(HTMLInputElement.prototype, "click").mockImplementation(() => {});
+    const onChange = vi.fn();
+    const { container, getByRole } = renderWithProviders(
+      <ImageField
+        label="Receipt"
+        onChange={onChange}
+        trigger={(open) => (
+          <Button onPress={open} aria-label="Photo library">
+            Library
+          </Button>
+        )}
+      />,
+    );
+    expect(container.querySelector("[data-media-tile]")).toBeNull();
+    fireEvent.click(getByRole("button", { name: "Photo library" }));
+    expect(click).toHaveBeenCalledTimes(1);
+    pick(fileInput(container), new File(["x"], "receipt.png", { type: "image/png" }));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+});

package/src/fields/pickerHandle.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+
+/**
+ * LC-290 FIELD-TRIGGER-SLOT: a picking field (FileUpload, ImageField) opens
+ * from the app's own control. `ref` takes this handle; `open()` runs the same
+ * press the field's own surface runs, through the same validation.
+ */
+export interface FieldPickerHandle {
+  open: () => void;
+}
+
+/** Draws the app's own control in place of the field's surface; call `open` from its press. */
+export type FieldPickerTrigger = (open: () => void) => ReactNode;

package/src/hooks/useHoldCue.ts

@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/** LC-197 HOLD-CUE: how far into a hold the press cue starts. */
+export const holdCueStartMs = 150;
+
+/** LC-197: how far a held control shrinks while its long press builds. */
+export const holdCueScale = 0.97;
+
+export function useHoldCue(cueStartMs: number = holdCueStartMs) {
+  const [holding, setHolding] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const clear = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  };
+  const stop = useCallback(() => {
+    clear();
+    setHolding(false);
+  }, []);
+  const start = useCallback(() => {
+    clear();
+    timer.current = setTimeout(() => setHolding(true), cueStartMs);
+  }, [cueStartMs]);
+  useEffect(() => clear, []);
+  return { holding, start, stop };
+}

package/src/index.gnome.ts

@@ -101,6 +101,7 @@ export {
 } from "./shared/utils";
 export { TableCellContext, useIsInTableCell, useTableCellContext } from "./shared/tableCellContext";
 export { useControlGrouped } from "./shared/groupContext";
+export { holdCueScale, holdCueStartMs, useHoldCue } from "./hooks/useHoldCue";
 export { formFieldGap, formReadableMaxWidth, formSectionGap } from "./formSpacing";
 export type {
   AnyFormApi,

package/src/index.ts

@@ -264,6 +264,7 @@ export type { PhotonGeocoderOptions } from "./fields/Geolocation/photonGeocoder"
 
 export { ImageField } from "./fields/ImageField";
 export type { ImageFieldProps } from "./fields/ImageField";
+export type { FieldPickerHandle, FieldPickerTrigger } from "./fields/pickerHandle";
 
 export {
   Icon,
@@ -386,6 +387,7 @@ export {
   focusFieldTarget,
 } from "./hooks/useFocusManagement";
 export type { FocusManagementOptions, FocusManagementReturn } from "./hooks/useFocusManagement";
+export { holdCueScale, holdCueStartMs, useHoldCue } from "./hooks/useHoldCue";
 
 // ── Shared Utilities ──────────────────────────────────────────
 export {

package/src/overlayGround.spec.ts

@@ -10,6 +10,7 @@
 import * as themePackage from "@multiplatform.one/theme";
 import {
   controlTierPaint,
+  controlTrackFill,
   createDefaultThemeConfig,
   holdInkFloor,
   measureContrast,
@@ -21,7 +22,7 @@ import { readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 import { describe, expect, it } from "vitest";
-import { formControlColors, formSelectedColors, formSwitchColors } from "./shared/colorRamps";
+import { formSelectedColors, formSwitchColors } from "./shared/colorRamps";
 
 /** The card's floor: the console's "a plain Button on an overlay's ground" asks the same. */
 const plateFloor = 1.1;
@@ -141,7 +142,8 @@ describe("FZ-7944: a control on an overlay has a plate distinct from the overlay
 
     it("Slider and Progress tracks read on the ground", () => {
       for (const component of ["Slider", "Progress"]) {
-        const track = resolve(c.scope, formControlColors.background, component);
+        // On an overlay the track takes the elevated fill (FZ-8400).
+        const track = resolve(c.scope, controlTrackFill(true, true), component);
         expect(
           ratio(track, ground),
           `${component} track ${track} on ${ground}`,
@@ -170,7 +172,7 @@ describe("FZ-7944: a control on an overlay has a plate distinct from the overlay
     const knobs = themePackage.defaultPreset.knobs;
     const ground = (scheme: "light" | "dark") =>
       resolveKnobs(knobs, undefined, scheme).knobProps.elevatedSurface.backgroundColor;
-    expect(ground("dark")).toBe("$color4");
+    expect(ground("dark")).toBe("$color5");
     expect(ground("light")).toBe("$background");
     expect(controlTierPaint("tinted", false, true)).toEqual(controlTierPaint("tinted", false));
   });

package/src/shared/OverlayWindow.tsx

@@ -3,8 +3,8 @@ import { OverlayStackProvider } from "./overlayStack";
 
 export interface OverlayWindowProps {
   /** The z the window's own overlay binds; nested overlays stack above it. */
-  zIndex: number;
-  children?: ReactNode;
+  readonly zIndex: number;
+  readonly children?: ReactNode;
 }
 
 /**

package/src/shared/colorRamps.ts

@@ -30,9 +30,9 @@ export const formInputColors = {
     focus: "$color4",
   },
   border: {
-    base: "$borderColor",
-    hover: "$borderColorHover",
-    focus: "$borderColorFocus",
+    base: "$borderColorField",
+    hover: "$borderColorFieldHover",
+    focus: "$borderColorField",
   },
 } as const;
 
@@ -41,6 +41,7 @@ export const formControlColors = {
   border: "$borderColor",
   /** DF-06 / WCAG 1.4.11: the build holds ≥3:1 on page, surface1 and control well. */
   boundary: "$boundaryColor",
+  edge: "$borderColorControl",
   thumb: {
     base: "$color10",
     hover: "$color9",
@@ -49,10 +50,11 @@ export const formControlColors = {
 } as const;
 
 // LC-05: the neutral selection tier, shared with componentColors.selection.
+// Theme keys, so a row on a dark card steps off the card's fill (FZ-8400).
 export const formSelectionColors = {
-  background: "$color4",
-  hover: "$color5",
-  press: "$color5",
+  background: "$selectFill",
+  hover: "$selectPress",
+  press: "$selectPress",
   ink: "$color12",
   ring: "$color8",
 } as const;
@@ -81,6 +83,7 @@ export const formSwitchColors = {
     off: "$switchTrackOff",
     offHover: "$switchTrackOffHover",
     offPress: "$switchTrackOffPress",
+    offBorder: "$switchTrackOffBorder",
   },
   thumb: "$switchThumb",
 } as const;

package/src/shared/controlTrack.ts

@@ -0,0 +1,7 @@
+import { controlTrackFill, isDarkThemeName, useElevatedSurface } from "@multiplatform.one/theme";
+import { useThemeName } from "tamagui";
+
+/** The track fill for this control's ground: a step above an elevated dark overlay. */
+export function useControlTrackFill(): string {
+  return controlTrackFill(isDarkThemeName(useThemeName()), useElevatedSurface());
+}

package/src/shared/nativeOverlayWindow.tsx

@@ -16,7 +16,7 @@ export type { OverlayWindowProps } from "./OverlayWindow";
  * content, and those overlays open inside it. A PortalItem in here aimed at
  * any other app-level host finds no host, since this provider owns none.
  */
-export function OverlayWindow({ zIndex, children }: OverlayWindowProps) {
+export function OverlayWindow({ zIndex, children }: Readonly<OverlayWindowProps>) {
   return (
     <PortalProvider shouldAddRootHost={false}>
       <OverlayStackProvider zIndex={zIndex}>{children}</OverlayStackProvider>

package/src/shared/systemControls.ts

@@ -1,5 +1,5 @@
 import type { ComponentType } from "react";
-import { Platform } from "react-native";
+import { Platform, type AccessibilityProps } from "react-native";
 import { isDarkThemeName } from "@multiplatform.one/theme";
 import { useTheme, useThemeName } from "tamagui";
 
@@ -30,7 +30,15 @@ export function useSystemControlScheme(): "light" | "dark" {
   return isDarkThemeName(useThemeName()) ? "dark" : "light";
 }
 
-export interface SystemSliderProps {
+export interface SystemSliderProps extends Pick<
+  AccessibilityProps,
+  | "accessible"
+  | "accessibilityRole"
+  | "accessibilityState"
+  | "accessibilityValue"
+  | "accessibilityActions"
+  | "onAccessibilityAction"
+> {
   id?: string;
   value?: number;
   minimumValue?: number;

package/types/ControlGroup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ControlGroup/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAe,IAAI,EAAiB,MAAM,SAAS,CAAC;AAC3D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAmBxC,QAAA,MAAM,iBAAiB;;;6CAsBrB,CAAC;AAgCH,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,GAAG;IAC3D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,iBAAS,qBAAqB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAgC5E;AAED,eAAO,MAAM,iBAAiB;;CAE5B,CAAC;AAMH,MAAM,WAAW,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,iBAAiB,CAAC;IAC3E,QAAQ,EAAE,SAAS,CAAC;IACpB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAED,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CA6K9F;AAED,eAAO,MAAM,YAAY;;;;CAEvB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ControlGroup/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAe,IAAI,EAAiB,MAAM,SAAS,CAAC;AAC3D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAmBxC,QAAA,MAAM,iBAAiB;;;6CAsBrB,CAAC;AAgCH,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,GAAG;IAC3D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,iBAAS,qBAAqB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAgC5E;AAED,eAAO,MAAM,iBAAiB;;CAE5B,CAAC;AAMH,MAAM,WAAW,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,iBAAiB,CAAC;IAC3E,QAAQ,EAAE,SAAS,CAAC;IACpB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAED,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CA8K9F;AAED,eAAO,MAAM,YAAY;;;;CAEvB,CAAC"}

package/types/FloatingPanel/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../src/FloatingPanel/index.native.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AAwDH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAyBlD,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,EACf,oBAAoB,GACrB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC1F,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAClD,OAAO,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE/E,uFAAuF;AACvF,wBAAgB,eAAe,YAE9B;AAiBD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,UAAU,EACV,aAAyB,EACzB,QAAQ,EAAE,aAAa,EACvB,UAAU,EACV,QAAQ,EACR,cAA0B,EAC1B,MAAM,EACN,eAAe,EACf,WAAW,EACX,SAAS,EACT,MAAgB,EAChB,WAAW,EACX,UAAU,EACV,WAAkB,EAClB,UAAoB,EACpB,SAAiB,EACjB,KAAK,EACL,UAAU,EACV,UAAsB,EACtB,KAAK,EACL,SAAS,GACV,EAAE,kBAAkB,2CAgoBpB;AAuaD,oEAAoE;AACpE,wBAAgB,cAAc,CAAC,MAAM,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,GAAG,IAAI,CAEvE;AAED,6EAA6E;AAC7E,wBAAgB,oBAAoB,CAClC,aAAa,EAAE,OAAO,EACtB,SAAS,EAAE,OAAO,EAClB,QAAQ,CAAC,EAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAC/B,IAAI,CAAG"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../src/FloatingPanel/index.native.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AAyDH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAyBlD,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,EACf,oBAAoB,GACrB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC1F,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAClD,OAAO,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE/E,uFAAuF;AACvF,wBAAgB,eAAe,YAE9B;AAiBD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,UAAU,EACV,aAAyB,EACzB,QAAQ,EAAE,aAAa,EACvB,UAAU,EACV,QAAQ,EACR,cAA0B,EAC1B,MAAM,EACN,eAAe,EACf,WAAW,EACX,SAAS,EACT,MAAgB,EAChB,WAAW,EACX,UAAU,EACV,WAAkB,EAClB,UAAoB,EACpB,SAAiB,EACjB,KAAK,EACL,UAAU,EACV,UAAsB,EACtB,KAAK,EACL,SAAS,GACV,EAAE,kBAAkB,2CAuoBpB;AAuaD,oEAAoE;AACpE,wBAAgB,cAAc,CAAC,MAAM,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,GAAG,IAAI,CAEvE;AAED,6EAA6E;AAC7E,wBAAgB,oBAAoB,CAClC,aAAa,EAAE,OAAO,EACtB,SAAS,EAAE,OAAO,EAClB,QAAQ,CAAC,EAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAC/B,IAAI,CAAG"}

package/types/InputParts/index.d.ts

@@ -24,7 +24,7 @@ export declare const inputPartsRingCss: string;
 export declare function ensureInputPartsFocusRing(): void;
 export declare const defaultInputGroupStyles: {
     readonly hoverStyle: {
-        readonly borderColor: "$borderColorHover";
+        readonly borderColor: "$borderColorFieldHover";
     };
     readonly focusStyle: {
         borderColor: string;
@@ -41,7 +41,7 @@ export declare const defaultInputGroupStyles: {
     readonly outlineWidth: number;
     readonly outlineStyle: "solid";
     readonly outlineColor: string;
-    readonly borderColor: "$borderColor";
+    readonly borderColor: "$borderColorField";
     readonly backgroundColor: "$background";
     readonly minWidth: 0;
     readonly tabIndex: number;
@@ -51,7 +51,7 @@ export declare const defaultInputGroupStyles: {
     readonly color: "$color";
 } | {
     readonly hoverStyle: {
-        readonly borderColor: "$borderColorHover";
+        readonly borderColor: "$borderColorFieldHover";
     };
     readonly focusStyle: {
         borderColor: string;
@@ -68,7 +68,7 @@ export declare const defaultInputGroupStyles: {
     readonly outlineWidth: number;
     readonly outlineStyle: "solid";
     readonly outlineColor: string;
-    readonly borderColor: "$borderColor";
+    readonly borderColor: "$borderColorField";
     readonly backgroundColor: "$background";
     readonly minWidth: 0;
     readonly focusable: boolean;