@multiplatform.one/forms 7.46.0 → 7.47.1

package/src/fields/Progress/Progress.stories.tsx

@@ -3,10 +3,11 @@ import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Paragraph, Progress as TamaguiProgress, XStack, YStack } from "tamagui";
+import { Progress as TamaguiProgress, XStack, YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Progress } from "./index";
+import { Paragraph } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Progress> = {
   title: "Forms/Progress",

package/src/fields/RadioGroup/RadioGroup.stories.tsx

@@ -3,8 +3,9 @@ import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Label, Paragraph, RadioGroup as TamaguiRadioGroup, Text, XStack, YStack } from "tamagui";
-import { Preset } from "@multiplatform.one/theme";
+import { RadioGroup as TamaguiRadioGroup, XStack, YStack } from "tamagui";
+import { Label } from "../../Label";
+import { Preset, Text, Paragraph } from "@multiplatform.one/theme";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { RadioGroup } from "./index";

package/src/fields/RadioGroup/index.tsx

@@ -654,6 +654,7 @@ export function RadioGroup({
       if (key !== "ArrowDown" && key !== "ArrowUp" && key !== "ArrowLeft" && key !== "ArrowRight")
         return;
       setTimeout(() => {
+        if (typeof document === "undefined") return;
         const active = document.activeElement as HTMLElement | null;
         if (!active?.id || !active.id.startsWith(`${id}-`)) return;
         if (active.getAttribute("role") !== "radio") return;

package/src/fields/Rating/Rating.stories.tsx

@@ -4,10 +4,11 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { StarIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Rating } from "./index";
+import { Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Rating> = {
   title: "Forms/Rating",

package/src/fields/SearchInput/SearchInput.stories.tsx

@@ -1,9 +1,10 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useRef, useState } from "react";
-import { Paragraph, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { SearchInput, type SearchInputHandle } from "./index";
+import { Paragraph } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof SearchInput> = {
   title: "Forms/SearchInput",

package/src/fields/SearchInput/index.tsx

@@ -7,12 +7,8 @@ import { useTouchSurface } from "@multiplatform.one/theme";
  * native field never rings. Magnifier is not a tab stop. Clear ✕ is the
  * second focusable and rings its own glyph (chip-dismiss, LC-16).
  *
- * Clear is a View sized from the size-recipe square (same geometry as
- * Input.Button). It was hand-rolled because TButton swallows className, so
- * the chip-dismiss ring classes could not ride Input.Button. `glyphRing`
- * now exists (InputParts/index.tsx, MPO-52) and renders this exact pair, so
- * this block can collapse onto `<Input.Button glyphRing>` — in SearchInput's
- * own lane, not this one.
+ * Clear is Input.Action, the field's trailing action (LC-149): the
+ * size-recipe square, chip-dismiss glyph ring, 44pt press target.
  */
 import { MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
 import {
@@ -24,7 +20,7 @@ import {
 import type { ComponentProps, ReactNode, Ref, RefObject } from "react";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import type { LabelProps, SizeTokens, TamaguiElement } from "tamagui";
-import { View, isWeb } from "tamagui";
+import { isWeb } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
@@ -364,46 +360,13 @@ function SearchInputImpl(
           onChangeText={(next: string) => writeText(next, fieldChange)}
         />
         {showClear ? (
-          <View
-            group={"searchClear" as unknown as undefined}
-            role="button"
-            tabIndex={0}
-            aria-label={t("Clear search")}
-            className={isWeb ? "mp-chip-dismiss" : undefined}
-            data-end-cap={visualHeight}
-            width={visualHeight}
-            height={visualHeight}
-            alignItems="center"
-            justifyContent="center"
-            cursor="pointer"
-            outlineWidth={0}
-            focusStyle={{ outlineWidth: 0 }}
-            focusVisibleStyle={{ outlineWidth: 0 }}
-            flexShrink={0}
-            hitSlop={belowFloor ? pressTargetHitSlop(visualHeight) : undefined}
+          <InputParts.Action
+            size={resolvedSize}
+            label={t("Clear search")}
             onPress={() => clearText(fieldChange)}
-            onKeyDown={
-              ((e: KeyboardEvent) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  clearText(fieldChange);
-                }
-              }) as unknown as () => void
-            }
           >
-            <View
-              className={isWeb ? "mp-chip-dismiss-ring" : undefined}
-              alignItems="center"
-              justifyContent="center"
-              hoverStyle={{ backgroundColor: "$color4" }}
-              {...{ "$group-searchClear-press": { backgroundColor: "$color5" } }}
-            >
-              <InputParts.Icon aria-hidden color={formCommonColors.muted}>
-                <XIcon size={resolvedIconSize} />
-              </InputParts.Icon>
-            </View>
-          </View>
+            <XIcon />
+          </InputParts.Action>
         ) : null}
       </InputParts.Box>
     );

package/src/fields/Select/Select.stories.tsx

@@ -1,4 +1,4 @@
-import { transitionProps } from "@multiplatform.one/theme";
+import { transitionProps, Paragraph } from "@multiplatform.one/theme";
 import React, { useState } from "react";
 import { action } from "@multiplatform.one/storybook";
 import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
@@ -6,7 +6,7 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Paragraph, Select as TamaguiSelect, Sheet, useMedia, XStack, YStack } from "tamagui";
+import { Select as TamaguiSelect, Sheet, useMedia, XStack, YStack } from "tamagui";
 import { Button } from "../../Button";
 import { useViewportGtSm } from "../../FloatingPanel";
 import { Form } from "../../Form";

package/src/fields/Select/index.tsx

@@ -21,6 +21,8 @@ import {
   useResolvedKnobs,
   wasKeyboardFocus,
   transitionProps,
+  Text as HouseText,
+  type TextProps as HouseTextProps,
 } from "@multiplatform.one/theme";
 import type { LabelProps, SizeTokens } from "tamagui";
 // `react-native` aliases to react-native-web on the web, and RNW 0.21 exports
@@ -162,18 +164,22 @@ const SelectRow = styled(View, {
   } as const,
 });
 
-const GroupHeader = styled(Text, {
-  name: "SelectGroupHeader",
-  paddingHorizontal: "$3",
-  paddingVertical: "$2",
-  paddingTop: "$3",
-  fontWeight: "600",
-  fontSize: "$2",
-  opacity: 0.6,
-  numberOfLines: 1,
-  userSelect: "none",
-  cursor: "default",
-});
+function GroupHeader(props: HouseTextProps) {
+  return (
+    <HouseText
+      paddingHorizontal="$3"
+      paddingVertical="$2"
+      paddingTop="$3"
+      fontWeight="600"
+      fontSize="$2"
+      opacity={0.6}
+      numberOfLines={1}
+      userSelect="none"
+      cursor="default"
+      {...props}
+    />
+  );
+}
 
 // ── Helper to group options ───────────────────────────────────
 

package/src/fields/Signature/Signature.stories.tsx

@@ -4,10 +4,11 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { EraserIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Signature } from "./index";
+import { Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Signature> = {
   title: "Forms/Signature",

package/src/fields/Signature/index.tsx

@@ -2,6 +2,7 @@ import { useTouchSurface } from "@multiplatform.one/theme";
 import type { KnobProps } from "@multiplatform.one/theme";
 import {
   FIELD_FOCUS_STYLE,
+  edgeColorAt,
   ensureKeyboardModalityTracking,
   wasKeyboardFocus,
   transitionProps,
@@ -522,7 +523,11 @@ function SignatureCanvasImpl({
       borderRadius={cappedRadius}
       borderWidth={knobProps.borderRadius.borderWidth}
       elevation={knobProps.elevation}
-      borderColor={error ? formCommonColors.error : formInputColors.border.base}
+      borderColor={
+        error
+          ? formCommonColors.error
+          : edgeColorAt(formInputColors.border.base, knobProps.borderWidthStop)
+      }
       aspectRatio={aspectRatio}
       minHeight={minHeightPx}
       cursor={cursor}

package/src/fields/Slider/Slider.stories.tsx

@@ -3,10 +3,11 @@ import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Paragraph, Slider as TamaguiSlider, Text, XStack, YStack } from "tamagui";
+import { Slider as TamaguiSlider, XStack, YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Slider } from "./index";
+import { Paragraph, Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Slider> = {
   title: "Forms/Slider",

package/src/fields/Slider/index.tsx

@@ -1,5 +1,10 @@
 import { transitionOrInstant } from "../../shared/instantMotion";
-import { transitionProps, motionRoleProperties, motionSettleMs } from "@multiplatform.one/theme";
+import {
+  transitionProps,
+  motionRoleProperties,
+  motionSettleMs,
+  Paragraph,
+} from "@multiplatform.one/theme";
 import { useTouchSurface, isTouchSurface } from "@multiplatform.one/theme";
 import { useEffect, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
 import type { AnyFormApi } from "../../types";
@@ -7,7 +12,6 @@ import type { LabelProps, SizeTokens } from "tamagui";
 import {
   type SliderProps as TamaguiSliderProps,
   Slider as TamaguiSlider,
-  Paragraph,
   View,
   XStack,
   isWeb,

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

@@ -4,10 +4,11 @@ import type { GuardrailSpecimenParameter } from "@multiplatform.one/theme";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Paragraph, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Stepper } from "./index";
+import { Paragraph } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Stepper> = {
   title: "Forms/Stepper",

package/src/fields/Switch/Switch.stories.tsx

@@ -4,10 +4,12 @@ import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Label, Paragraph, Switch as TamaguiSwitch, XStack, YStack } from "tamagui";
+import { Switch as TamaguiSwitch, XStack, YStack } from "tamagui";
+import { Label } from "../../Label";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Switch } from "./index";
+import { Paragraph } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Switch> = {
   title: "Forms/Switch",

package/src/fields/TextArea/TextArea.stories.tsx

@@ -3,10 +3,11 @@ import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Paragraph, TextArea as TamaguiTextArea, XStack, YStack } from "tamagui";
+import { TextArea as TamaguiTextArea, XStack, YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { TextArea } from "./index";
+import { Paragraph } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof TextArea> = {
   title: "Forms/TextArea",

package/src/fields/TimePicker/TimePicker.stories.tsx

@@ -3,10 +3,11 @@ import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { TimePicker } from "./index";
+import { Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof TimePicker> = {
   title: "Forms/TimePicker",

package/src/fields/TimePicker/parts.tsx

@@ -98,19 +98,15 @@ export function TimePickerClearButton({
   disabled?: boolean;
 }) {
   return (
-    <InputParts.Button
+    <InputParts.Action
       data-testid="time-picker-clear"
-      aria-label={t("Clear time")}
+      label={t("Clear time")}
       disabled={disabled}
-      onPress={(e) => {
-        e.stopPropagation();
-        onClear();
-      }}
+      tabIndex={-1}
+      onPress={onClear}
     >
-      <InputParts.Icon>
-        <XIcon />
-      </InputParts.Icon>
-    </InputParts.Button>
+      <XIcon />
+    </InputParts.Action>
   );
 }
 

package/src/fields/TimeRangeScrubber/index.tsx

@@ -1,4 +1,4 @@
-import { transitionProps, motionRoleProperties } from "@multiplatform.one/theme";
+import { transitionProps, motionRoleProperties, Text } from "@multiplatform.one/theme";
 import {
   defaultKnobs,
   ensureFocusVisibleRing,
@@ -7,6 +7,7 @@ import {
   formatAbsoluteDateTime,
   pressTargetHitSlop,
   usePresetContext,
+  useResolvedKnobs,
   wasKeyboardFocus,
   type BorderRadius,
 } from "@multiplatform.one/theme";
@@ -20,7 +21,7 @@ import {
   type ReactNode,
 } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
-import { Text, View, XStack, YStack, isWeb, useTheme } from "tamagui";
+import { Text as TamaguiText, View, XStack, YStack, isWeb, useTheme } from "tamagui";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { FloatingPanel } from "../../FloatingPanel";
 import { Skeleton } from "../../Skeleton";
@@ -178,13 +179,15 @@ function TimeRangeChip({
   part?: string;
   tabIndex?: number;
 }) {
+  const { knobProps } = useResolvedKnobs();
+  const edge = knobProps.controlBorderOutlined;
   return (
     <View
       height={CHIP_HEIGHT}
       paddingHorizontal={7}
       borderRadius={CHIP_RADIUS}
-      borderWidth={1}
-      borderColor={selected ? "$color11" : "$borderColor"}
+      borderWidth={edge.borderWidth}
+      borderColor={selected ? "$color11" : edge.borderColor}
       backgroundColor={selected ? "$color11" : "transparent"}
       justifyContent="center"
       alignItems="center"
@@ -197,14 +200,14 @@ function TimeRangeChip({
       onPress={disabled ? undefined : onPress}
       hoverStyle={disabled ? undefined : { borderColor: "$borderColorHover" }}
     >
-      <Text
+      <TamaguiText
         fontSize={12}
         lineHeight={22}
         color={selected ? "$color1" : "$color11"}
         fontFamily="$body"
       >
         {label}
-      </Text>
+      </TamaguiText>
     </View>
   );
 }
@@ -262,6 +265,7 @@ function TimeRangeScrubberControl({
 }) {
   if (isWeb) ensureKeyboardModalityTracking();
   const radiusStop = useRadiusStop();
+  const { knobProps } = useResolvedKnobs();
   const theme = useTheme();
   const reducedMotion = !transitionToken;
   const gripSize = getScrubberGripRenderSize(size != null ? String(size) : sizeToken);
@@ -564,7 +568,7 @@ function TimeRangeScrubberControl({
       opacity={disabled ? 0.5 : 1}
     >
       <XStack alignItems="baseline" gap="$3" justifyContent="flex-end" flexWrap="wrap">
-        <Text
+        <TamaguiText
           fontFamily="$mono"
           fontSize={12}
           lineHeight={22}
@@ -574,9 +578,9 @@ function TimeRangeScrubberControl({
           data-end={value?.end?.toISOString() ?? ""}
         >
           {formatRangeReadout(value)}
-        </Text>
+        </TamaguiText>
         {frameAt ? (
-          <Text
+          <TamaguiText
             fontFamily="$mono"
             fontSize={12}
             lineHeight={22}
@@ -584,7 +588,7 @@ function TimeRangeScrubberControl({
             data-part="frame-stale"
           >
             {`${t("frame")} −${frameStale}`}
-          </Text>
+          </TamaguiText>
         ) : null}
       </XStack>
       <XStack alignItems="center" gap={7}>
@@ -594,8 +598,7 @@ function TimeRangeScrubberControl({
           alignItems="center"
           justifyContent="center"
           borderRadius={CHIP_RADIUS}
-          borderWidth={1}
-          borderColor="$borderColor"
+          {...knobProps.controlBorderOutlined}
           cursor={locked ? "not-allowed" : "pointer"}
           tabIndex={-1}
           role="button"
@@ -611,8 +614,7 @@ function TimeRangeScrubberControl({
           alignItems="center"
           justifyContent="center"
           borderRadius={CHIP_RADIUS}
-          borderWidth={1}
-          borderColor="$borderColor"
+          {...knobProps.controlBorderOutlined}
           cursor={locked ? "not-allowed" : "pointer"}
           tabIndex={-1}
           role="button"
@@ -648,13 +650,13 @@ function TimeRangeScrubberControl({
               overflow="hidden"
               maxHeight={CAP_HEIGHT}
               borderRadius={CAP_RADIUS}
-              borderWidth={1}
-              borderColor="$borderColor"
+              borderWidth={knobProps.surface.borderWidth}
+              borderColor={knobProps.surface.borderColor}
               backgroundColor="$color2"
               onLayout={(event) => setCapWidth(event.nativeEvent.layout.width)}
               data-part="cap"
             >
-              <Text
+              <TamaguiText
                 fontFamily="$mono"
                 fontSize={12}
                 lineHeight={16}
@@ -664,7 +666,7 @@ function TimeRangeScrubberControl({
                 whiteSpace="nowrap"
               >
                 {formatClock(scrubTime)}
-              </Text>
+              </TamaguiText>
             </View>
           </XStack>
           <View position="relative" height={AXIS_BAND} data-part="frames-lane">

package/src/fields/ToggleGroup/ToggleGroup.stories.tsx

@@ -2,17 +2,11 @@ import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import {
-  Paragraph,
-  SizableText,
-  Text,
-  ToggleGroup as TamaguiToggleGroup,
-  XStack,
-  YStack,
-} from "tamagui";
+import { ToggleGroup as TamaguiToggleGroup, XStack, YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { ToggleGroup } from "./index";
+import { Paragraph, SizableText, Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof ToggleGroup> = {
   title: "Forms/ToggleGroup",

package/src/fields/ToggleGroup/index.tsx

@@ -1,5 +1,5 @@
 import { IconSlot } from "@multiplatform.one/theme";
-import { motionDurationMs } from "@multiplatform.one/theme";
+import { motionDurationMs, SizableText } from "@multiplatform.one/theme";
 import { cssAnimationConfig } from "@multiplatform.one/theme";
 import { transitionProps } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
@@ -16,7 +16,13 @@ import {
 } from "@multiplatform.one/theme";
 import type { AnyFormApi } from "../../types";
 import type { LabelProps, SizeTokens } from "tamagui";
-import { SizableText, ToggleGroup as TamaguiToggleGroup, View, isWeb, styled } from "tamagui";
+import {
+  SizableText as TamaguiSizableText,
+  ToggleGroup as TamaguiToggleGroup,
+  View,
+  isWeb,
+  styled,
+} from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import {
@@ -472,7 +478,7 @@ export function ToggleGroup({
                   : undefined
             }
           />
-          <SizableText
+          <TamaguiSizableText
             userSelect="none"
             {...knobProps.controlType}
             {...knobProps.body}
@@ -483,7 +489,7 @@ export function ToggleGroup({
             focusStyle={text.focusKnobProps}
           >
             {option.label}
-          </SizableText>
+          </TamaguiSizableText>
           {showSeam ? (
             <View
               pointerEvents="none"

package/src/fields/nativeDateTime/OsDateTimeSheet.tsx

@@ -12,8 +12,8 @@
  */
 import { useCallback, useState } from "react";
 import { Modal, Pressable, StyleSheet, useColorScheme, Platform } from "react-native";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Text, View, XStack, YStack, useTheme, useThemeName } from "tamagui";
+import { useResolvedKnobs, Text } from "@multiplatform.one/theme";
+import { View, XStack, YStack, useTheme, useThemeName } from "tamagui";
 import { formCommonColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import { type DateTimePickerEvent, loadDateTimePicker } from "./dateTimePickerLoader";

package/src/fields/pickerActivation.spec.tsx

@@ -79,7 +79,9 @@ describe("sheet picker pointer activation", () => {
     expect(clear.className).not.toContain("_miw-44px");
     expect(clear.className).not.toContain("_mih-44px");
     expect(clear.className).toContain("_w-37px");
-    expect(clear.getAttribute("data-mp-press-slop")).toBe("2");
+    expect(clear.className).toContain("_h-37px");
+    expect(clear.getAttribute("data-field-action")).toBe("trailing");
+    expect(clear.getAttribute("data-mp-press-slop")).toBe("4");
     fireEvent.click(clear, { detail: 1 });
     await waitFor(() => expect(result.getByText("Selected:none")).toBeTruthy());
     expect(result.getByRole("combobox", { name: "Choice" }).getAttribute("aria-expanded")).toBe(
@@ -95,9 +97,11 @@ it("desktop clear retains compact geometry and never opens on pointer down or cl
   const clear = result.getByRole("button", { name: "Clear" });
   expect(trigger.className).toContain("_h-37px");
   expect(clear.className).toContain("_h-37px");
-  expect(clear.className).toContain("_miw-44px");
+  expect(clear.className).toContain("_w-37px");
+  expect(clear.getAttribute("data-field-action")).toBe("trailing");
+  // LC-149: a square glyph inside the field, padded to 44 on both axes.
   expect(clear.getAttribute("data-mp-press-slop")).toBe("4");
-  expect(clear.getAttribute("data-mp-press-axis")).toBe("vertical");
+  expect(clear.getAttribute("data-mp-press-axis")).toBeNull();
   fireEvent.mouseDown(clear, { detail: 1 });
   expect(trigger.getAttribute("aria-expanded")).toBe("false");
   fireEvent.mouseUp(clear, { detail: 1 });

package/src/hooks/useFocusManagement.ts

@@ -26,7 +26,8 @@ export function focusFieldTarget(
   if (!isWeb || !container) return null;
 
   const tryFocus = (el: Element | null | undefined): HTMLElement | null => {
-    if (!el || !(el instanceof HTMLElement) || typeof el.focus !== "function") return null;
+    if (!el || typeof HTMLElement === "undefined" || !(el instanceof HTMLElement)) return null;
+    if (typeof el.focus !== "function") return null;
     // Prefer a nested focusable control when the match is a wrapper.
     const nested = el.matches?.(
       "input, textarea, select, button, [tabindex]:not([tabindex='-1']), [contenteditable='true']",
@@ -298,7 +299,7 @@ export function useFocusManagement(options: FocusManagementOptions = {}): FocusM
         if (initialFocus === "first") {
           const firstElement = getFocusableElements()[0];
           if (firstElement) focusElement(firstElement);
-        } else if (initialFocus instanceof HTMLElement) {
+        } else if (typeof HTMLElement !== "undefined" && initialFocus instanceof HTMLElement) {
           focusElement(initialFocus);
         }
       }, autoFocusDelay);

package/src/index.ts

@@ -348,6 +348,15 @@ export {
   KEYBOARD_TO_INPUT_MODE,
   INPUT_MODE_TO_KEYBOARD,
 } from "./InputParts";
+export type { InputActionProps } from "./InputParts";
+export { FieldTrailingOverlay } from "./InputParts";
+export {
+  PasswordReveal,
+  usePasswordReveal,
+  SHOW_PASSWORD,
+  HIDE_PASSWORD,
+} from "./InputParts/PasswordReveal";
+export type { PasswordRevealProps } from "./InputParts/PasswordReveal";
 
 export { useControlGrouped } from "./shared/groupContext";
 

package/src/shared/focusManagement.ts

@@ -217,7 +217,7 @@ export function useDialogShowFocus(onOpenAutoFocus: (event: Event) => void) {
     if (!open || !contentId || !canUseDom()) return;
     const content = document.getElementById(contentId);
     const focused = document.activeElement;
-    if (!content || !(focused instanceof HTMLElement)) return;
+    if (!content || typeof HTMLElement === "undefined" || !(focused instanceof HTMLElement)) return;
     if (!content.contains(focused) || focused.tabIndex >= 0) return;
     content.addEventListener(DIALOG_SHOW_FOCUS_EVENT, onOpenAutoFocus, { once: true });
     content.dispatchEvent(new CustomEvent(DIALOG_SHOW_FOCUS_EVENT, { cancelable: true }));

package/src/shared/panelPortal.ts

@@ -18,7 +18,8 @@ export function registerPanelPortal(portal: Element, anchor: Element): () => voi
 
 /** The element that opened the portaled panel `node` sits in, or null. */
 export function panelPortalAnchor(node: Node): Element | null {
-  const element = node instanceof Element ? node : node.parentElement;
+  const element =
+    typeof Element !== "undefined" && node instanceof Element ? node : node.parentElement;
   const portal = element?.closest(`[${panelPortalAttribute}]`);
   return portal ? (anchors.get(portal) ?? null) : null;
 }