@boostdev/design-system-react-native 0.2.2 → 0.2.4

package/CHANGELOG.md

@@ -1,6 +1,54 @@
 # Changelog
 
 All notable changes to `@boostdev/design-system-react-native` are documented here.
+## [0.2.4] - 2026-06-11
+### Fixed
+- Fix(form): optical vertical centering for single-line input text
+
+Arial's asymmetric metrics (ascent 0.905em, descent 0.212em) place ink
+~0.08em below the layout-box centre on iOS. Add OPTICAL_TEXT_SHIFT = -1.5
+constant to form/atoms/inputHelpers.ts (single source of truth) and apply
+transform: [{translateY: OPTICAL_TEXT_SHIFT}] to the single-line TextInput
+in FormInput, NumberInput, and Combobox. Verified on-simulator: shifts ink
+from +1.33pt to -0.33pt at fontSize 16.
+
+Textarea (multiline) is unchanged.
+
+Spec invariants extended: pin translateY shift alongside existing
+no-lineHeight, paddingVertical-0, and wrapper-height-≥44 assertions. ([`a3e08e5`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/a3e08e5a6f4c53ef12ba810ef96d395e4ee116e7))
+
+## [0.2.3] - 2026-06-11
+### Fixed
+- Fix(segmented-control): proper track + thumb rendering
+
+Replace per-segment outline/border approach with a single rounded track
+(colorBgSubtle background, 2 px inner padding) containing equal-width
+segments. Selected segment renders a contrasting thumb: colorBg + shadow
+for the outline variant (white elevated surface), colorInteractive for
+the filled variant. No per-segment borders; no stray focus rectangle.
+
+Mirrors the web DS visual contract (track bg, thumb bg, thumb radius =
+track radius minus padding). Dark mode via useTheme throughout.
+All accessibilityRole/accessibilityState props preserved.
+Spec updated to pin track-has-one-background and thumb structure. ([`2a83f88`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/2a83f8804553e390528fc85dd79c1541bf92343e))
+
+## [0.2.2] - 2026-06-11
+### Fixed
+- Fix(form): vertically center text in single-line inputs
+
+Replace minHeight + paddingVertical on TextInput with a wrapper View
+(height: 44, justifyContent: center) + paddingVertical: 0 on the inner
+TextInput. iOS auto-centers text within the wrapper height; paddingVertical
+on the TextInput itself caused text to sit off-center after the 0.2.1
+lineHeight removal. Added textAlignVertical: center and includeFontPadding:
+false for Android parity.
+
+Applied consistently to FormInput, NumberInput, and Combobox.
+Textarea (multiline) is unaffected.
+
+Spec invariants updated: paddingVertical === 0 on TextInput, wrapper
+height >= 44 replace the previous minHeight >= 44 assertion. ([`437b16d`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/437b16dccb60b3b3948c84519990c18688e51f71))
+
 ## [0.2.1] - 2026-06-11
 ### Fixed
 - Fix(form): prevent iOS text clipping in single-line inputs

package/dist/index.cjs

@@ -2681,6 +2681,11 @@ function FileInput({
 // src/components/interaction/form/Combobox/Combobox.tsx
 var import_react9 = require("react");
 var import_react_native37 = require("react-native");
+
+// src/components/interaction/form/atoms/inputHelpers.ts
+var OPTICAL_TEXT_SHIFT = -1.5;
+
+// src/components/interaction/form/Combobox/Combobox.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var INPUT_HEIGHT = 44;
 var MAX_DROPDOWN_HEIGHT = 200;
@@ -2704,6 +2709,7 @@ var styles33 = import_react_native37.StyleSheet.create({
    * No vertical padding: iOS centers text automatically inside the wrapper height.
    * textAlignVertical + includeFontPadding provide Android parity.
    * No lineHeight: explicit lineHeight clips ascenders/descenders on iOS.
+   * transform translateY: optical correction for Arial's asymmetric metrics — see OPTICAL_TEXT_SHIFT.
    */
   input: {
     fontFamily: import_native.font.family.body,
@@ -2711,7 +2717,8 @@ var styles33 = import_react_native37.StyleSheet.create({
     paddingHorizontal: import_native.spacing.s,
     paddingVertical: 0,
     textAlignVertical: "center",
-    includeFontPadding: false
+    includeFontPadding: false,
+    transform: [{ translateY: OPTICAL_TEXT_SHIFT }]
   },
   dropdown: {
     position: "absolute",
@@ -2871,22 +2878,32 @@ function Combobox({
 var import_react10 = require("react");
 var import_react_native38 = require("react-native");
 var import_jsx_runtime38 = require("react/jsx-runtime");
+var TRACK_PADDING = import_native.spacing.xxxs;
 var sizeTokens2 = {
-  small: { height: 32, fontSize: import_native.font.size.bodyS, px: import_native.spacing.s },
-  medium: { height: 40, fontSize: import_native.font.size.body, px: import_native.spacing.m },
-  large: { height: 48, fontSize: import_native.font.size.body, px: import_native.spacing.l }
+  small: { minHeight: 32, fontSize: import_native.font.size.bodyS, px: import_native.spacing.s, py: import_native.spacing.xxs },
+  medium: { minHeight: 44, fontSize: import_native.font.size.body, px: import_native.spacing.m, py: import_native.spacing.xs },
+  large: { minHeight: 48, fontSize: import_native.font.size.body, px: import_native.spacing.m, py: import_native.spacing.s }
+};
+var thumbShadow = {
+  shadowColor: "#000",
+  shadowOffset: { width: 0, height: 1 },
+  shadowOpacity: 0.12,
+  shadowRadius: 2,
+  elevation: 2
 };
 var styles34 = import_react_native38.StyleSheet.create({
   track: {
     flexDirection: "row",
     borderRadius: import_native.border.radius.full,
+    padding: TRACK_PADDING,
     overflow: "hidden"
   },
-  item: {
+  segment: {
     flex: 1,
     alignItems: "center",
     justifyContent: "center",
-    minHeight: 44
+    // Thumb radius = track radius minus the padding gap (mirrors thumb-radius calc in web CSS)
+    borderRadius: import_native.border.radius.full - TRACK_PADDING
   },
   label: {
     fontFamily: import_native.font.family.body,
@@ -2905,21 +2922,26 @@ function SegmentedControl({
   style
 }) {
   const { colors: colors2 } = useTheme();
-  const { height, fontSize, px } = sizeTokens2[size];
+  const { minHeight, fontSize, px, py } = sizeTokens2[size];
   const items = import_react10.Children.toArray(children);
-  const trackStyle = variant === "filled" ? { backgroundColor: colors2.colorBgSubtle } : { backgroundColor: "transparent", borderWidth: 1, borderColor: colors2.colorBgSubtle };
+  const trackBg = colors2.colorBgSubtle;
+  const thumbBg = variant === "outline" ? colors2.colorBg : colors2.colorInteractive;
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     import_react_native38.View,
     {
-      style: [styles34.track, trackStyle, { borderRadius: import_native.border.radius.full }, style],
+      style: [styles34.track, { backgroundColor: trackBg }, style],
       accessibilityRole: "tablist",
       accessibilityLabel,
       children: items.map((child, index) => {
         const isActive = index === selectedIndex;
-        const activeStyle = variant === "filled" ? { backgroundColor: colors2.colorInteractive } : { borderWidth: 2, borderColor: colors2.colorInteractive };
-        const inactiveStyle = variant === "filled" ? {} : {};
-        const textColor = variant === "filled" && isActive ? colors2.colorOnInteractive : isActive ? colors2.colorInteractive : colors2.colorOnBgSubtle;
+        const labelColor = isActive ? variant === "outline" ? colors2.colorInteractiveOnBg : colors2.colorOnInteractive : colors2.colorOnBgSubtle;
         const label = typeof child === "string" || typeof child === "number" ? String(child) : null;
+        const segmentStyle = {
+          minHeight,
+          paddingHorizontal: px,
+          paddingVertical: py,
+          ...isActive ? { backgroundColor: thumbBg, ...thumbShadow } : { backgroundColor: "transparent" }
+        };
         return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           import_react_native38.Pressable,
           {
@@ -2929,14 +2951,12 @@ function SegmentedControl({
             accessibilityLabel: label ?? void 0,
             accessibilityState: { selected: isActive, disabled },
             style: ({ pressed }) => [
-              styles34.item,
-              { height, paddingHorizontal: px },
-              isActive ? activeStyle : inactiveStyle,
-              variant === "filled" && isActive && { borderRadius: import_native.border.radius.full },
+              styles34.segment,
+              segmentStyle,
               pressed && !disabled && { opacity: 0.7 },
               disabled && { opacity: 0.4 }
             ],
-            children: label !== null ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native38.Text, { style: [styles34.label, { fontSize, color: textColor }], children: label }) : child
+            children: label !== null ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native38.Text, { style: [styles34.label, { fontSize, color: labelColor }], children: label }) : child
           },
           index
         );
@@ -2977,6 +2997,7 @@ var styles35 = import_react_native39.StyleSheet.create({
    * No vertical padding: iOS centers text automatically inside the wrapper height.
    * textAlignVertical + includeFontPadding are Android-specific but harmless on iOS.
    * No lineHeight: explicit lineHeight on a single-line TextInput clips ascenders/descenders on iOS.
+   * transform translateY: optical correction for Arial's asymmetric metrics — see OPTICAL_TEXT_SHIFT.
    */
   input: {
     fontFamily: import_native.font.family.body,
@@ -2984,7 +3005,8 @@ var styles35 = import_react_native39.StyleSheet.create({
     paddingHorizontal: import_native.spacing.s,
     paddingVertical: 0,
     textAlignVertical: "center",
-    includeFontPadding: false
+    includeFontPadding: false,
+    transform: [{ translateY: OPTICAL_TEXT_SHIFT }]
   }
 });
 function FormInput({
@@ -3558,6 +3580,7 @@ var styles39 = import_react_native43.StyleSheet.create({
    * No vertical padding: iOS auto-centers within the wrapper height.
    * textAlignVertical + includeFontPadding provide Android parity.
    * No lineHeight: explicit lineHeight clips ascenders/descenders on iOS.
+   * transform translateY: optical correction for Arial's asymmetric metrics — see OPTICAL_TEXT_SHIFT.
    */
   input: {
     fontFamily: import_native.font.family.body,
@@ -3566,7 +3589,8 @@ var styles39 = import_react_native43.StyleSheet.create({
     paddingHorizontal: import_native.spacing.xs,
     paddingVertical: 0,
     textAlignVertical: "center",
-    includeFontPadding: false
+    includeFontPadding: false,
+    transform: [{ translateY: OPTICAL_TEXT_SHIFT }]
   }
 });
 function NumberInput({

package/dist/index.js

@@ -2634,6 +2634,11 @@ import {
   Text as Text27,
   ScrollView as ScrollView4
 } from "react-native";
+
+// src/components/interaction/form/atoms/inputHelpers.ts
+var OPTICAL_TEXT_SHIFT = -1.5;
+
+// src/components/interaction/form/Combobox/Combobox.tsx
 import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
 var INPUT_HEIGHT = 44;
 var MAX_DROPDOWN_HEIGHT = 200;
@@ -2657,6 +2662,7 @@ var styles33 = StyleSheet33.create({
    * No vertical padding: iOS centers text automatically inside the wrapper height.
    * textAlignVertical + includeFontPadding provide Android parity.
    * No lineHeight: explicit lineHeight clips ascenders/descenders on iOS.
+   * transform translateY: optical correction for Arial's asymmetric metrics — see OPTICAL_TEXT_SHIFT.
    */
   input: {
     fontFamily: font.family.body,
@@ -2664,7 +2670,8 @@ var styles33 = StyleSheet33.create({
     paddingHorizontal: spacing.s,
     paddingVertical: 0,
     textAlignVertical: "center",
-    includeFontPadding: false
+    includeFontPadding: false,
+    transform: [{ translateY: OPTICAL_TEXT_SHIFT }]
   },
   dropdown: {
     position: "absolute",
@@ -2824,22 +2831,32 @@ function Combobox({
 import { Children } from "react";
 import { StyleSheet as StyleSheet34, View as View31, Pressable as Pressable19, Text as Text28 } from "react-native";
 import { jsx as jsx38 } from "react/jsx-runtime";
+var TRACK_PADDING = spacing.xxxs;
 var sizeTokens2 = {
-  small: { height: 32, fontSize: font.size.bodyS, px: spacing.s },
-  medium: { height: 40, fontSize: font.size.body, px: spacing.m },
-  large: { height: 48, fontSize: font.size.body, px: spacing.l }
+  small: { minHeight: 32, fontSize: font.size.bodyS, px: spacing.s, py: spacing.xxs },
+  medium: { minHeight: 44, fontSize: font.size.body, px: spacing.m, py: spacing.xs },
+  large: { minHeight: 48, fontSize: font.size.body, px: spacing.m, py: spacing.s }
+};
+var thumbShadow = {
+  shadowColor: "#000",
+  shadowOffset: { width: 0, height: 1 },
+  shadowOpacity: 0.12,
+  shadowRadius: 2,
+  elevation: 2
 };
 var styles34 = StyleSheet34.create({
   track: {
     flexDirection: "row",
     borderRadius: border.radius.full,
+    padding: TRACK_PADDING,
     overflow: "hidden"
   },
-  item: {
+  segment: {
     flex: 1,
     alignItems: "center",
     justifyContent: "center",
-    minHeight: 44
+    // Thumb radius = track radius minus the padding gap (mirrors thumb-radius calc in web CSS)
+    borderRadius: border.radius.full - TRACK_PADDING
   },
   label: {
     fontFamily: font.family.body,
@@ -2858,21 +2875,26 @@ function SegmentedControl({
   style
 }) {
   const { colors: colors2 } = useTheme();
-  const { height, fontSize, px } = sizeTokens2[size];
+  const { minHeight, fontSize, px, py } = sizeTokens2[size];
   const items = Children.toArray(children);
-  const trackStyle = variant === "filled" ? { backgroundColor: colors2.colorBgSubtle } : { backgroundColor: "transparent", borderWidth: 1, borderColor: colors2.colorBgSubtle };
+  const trackBg = colors2.colorBgSubtle;
+  const thumbBg = variant === "outline" ? colors2.colorBg : colors2.colorInteractive;
   return /* @__PURE__ */ jsx38(
     View31,
     {
-      style: [styles34.track, trackStyle, { borderRadius: border.radius.full }, style],
+      style: [styles34.track, { backgroundColor: trackBg }, style],
       accessibilityRole: "tablist",
       accessibilityLabel,
       children: items.map((child, index) => {
         const isActive = index === selectedIndex;
-        const activeStyle = variant === "filled" ? { backgroundColor: colors2.colorInteractive } : { borderWidth: 2, borderColor: colors2.colorInteractive };
-        const inactiveStyle = variant === "filled" ? {} : {};
-        const textColor = variant === "filled" && isActive ? colors2.colorOnInteractive : isActive ? colors2.colorInteractive : colors2.colorOnBgSubtle;
+        const labelColor = isActive ? variant === "outline" ? colors2.colorInteractiveOnBg : colors2.colorOnInteractive : colors2.colorOnBgSubtle;
         const label = typeof child === "string" || typeof child === "number" ? String(child) : null;
+        const segmentStyle = {
+          minHeight,
+          paddingHorizontal: px,
+          paddingVertical: py,
+          ...isActive ? { backgroundColor: thumbBg, ...thumbShadow } : { backgroundColor: "transparent" }
+        };
         return /* @__PURE__ */ jsx38(
           Pressable19,
           {
@@ -2882,14 +2904,12 @@ function SegmentedControl({
             accessibilityLabel: label ?? void 0,
             accessibilityState: { selected: isActive, disabled },
             style: ({ pressed }) => [
-              styles34.item,
-              { height, paddingHorizontal: px },
-              isActive ? activeStyle : inactiveStyle,
-              variant === "filled" && isActive && { borderRadius: border.radius.full },
+              styles34.segment,
+              segmentStyle,
               pressed && !disabled && { opacity: 0.7 },
               disabled && { opacity: 0.4 }
             ],
-            children: label !== null ? /* @__PURE__ */ jsx38(Text28, { style: [styles34.label, { fontSize, color: textColor }], children: label }) : child
+            children: label !== null ? /* @__PURE__ */ jsx38(Text28, { style: [styles34.label, { fontSize, color: labelColor }], children: label }) : child
           },
           index
         );
@@ -2934,6 +2954,7 @@ var styles35 = StyleSheet35.create({
    * No vertical padding: iOS centers text automatically inside the wrapper height.
    * textAlignVertical + includeFontPadding are Android-specific but harmless on iOS.
    * No lineHeight: explicit lineHeight on a single-line TextInput clips ascenders/descenders on iOS.
+   * transform translateY: optical correction for Arial's asymmetric metrics — see OPTICAL_TEXT_SHIFT.
    */
   input: {
     fontFamily: font.family.body,
@@ -2941,7 +2962,8 @@ var styles35 = StyleSheet35.create({
     paddingHorizontal: spacing.s,
     paddingVertical: 0,
     textAlignVertical: "center",
-    includeFontPadding: false
+    includeFontPadding: false,
+    transform: [{ translateY: OPTICAL_TEXT_SHIFT }]
   }
 });
 function FormInput({
@@ -3537,6 +3559,7 @@ var styles39 = StyleSheet39.create({
    * No vertical padding: iOS auto-centers within the wrapper height.
    * textAlignVertical + includeFontPadding provide Android parity.
    * No lineHeight: explicit lineHeight clips ascenders/descenders on iOS.
+   * transform translateY: optical correction for Arial's asymmetric metrics — see OPTICAL_TEXT_SHIFT.
    */
   input: {
     fontFamily: font.family.body,
@@ -3545,7 +3568,8 @@ var styles39 = StyleSheet39.create({
     paddingHorizontal: spacing.xs,
     paddingVertical: 0,
     textAlignVertical: "center",
-    includeFontPadding: false
+    includeFontPadding: false,
+    transform: [{ translateY: OPTICAL_TEXT_SHIFT }]
   }
 });
 function NumberInput({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-react-native",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "BoostDev React Native component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "react-native",

package/src/components/interaction/form/Combobox/Combobox.spec.tsx

@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '../../../../native/ThemeContext';
 import { Combobox } from './Combobox';
 import type { ComboboxOption } from './Combobox';
+import { OPTICAL_TEXT_SHIFT } from '../atoms/inputHelpers';
 
 function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
@@ -85,4 +86,18 @@ describe('Combobox (native)', () => {
     const heightPx = parseFloat(getComputedStyle(wrapper).height);
     expect(heightPx).toBeGreaterThanOrEqual(44);
   });
+
+  /**
+   * Optical-centering invariant: the TextInput must have a translateY transform equal
+   * to OPTICAL_TEXT_SHIFT to compensate for Arial's asymmetric vertical metrics.
+   */
+  it('has optical translateY shift on the TextInput (Arial centering correction)', () => {
+    renderWithTheme(
+      <Combobox label="Fruit" name="fruit" options={fruits} />,
+    );
+    const input = screen.getByRole('combobox');
+    const transform = getComputedStyle(input).transform;
+    expect(OPTICAL_TEXT_SHIFT).toBe(-1.5);
+    expect(transform).toMatch(/(-1\.5|-1\.50)/);
+  });
 });

package/src/components/interaction/form/Combobox/Combobox.tsx

@@ -10,6 +10,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import { spacing, font, border, lineHeight } from '../../../../native/tokens'; // lineHeight used for optionText (Text, not TextInput)
+import { OPTICAL_TEXT_SHIFT } from '../atoms/inputHelpers';
 
 /** Fixed height for single-line control fields (satisfies 44pt touch target). */
 const INPUT_HEIGHT = 44;
@@ -58,6 +59,7 @@ const styles = StyleSheet.create({
    * No vertical padding: iOS centers text automatically inside the wrapper height.
    * textAlignVertical + includeFontPadding provide Android parity.
    * No lineHeight: explicit lineHeight clips ascenders/descenders on iOS.
+   * transform translateY: optical correction for Arial's asymmetric metrics — see OPTICAL_TEXT_SHIFT.
    */
   input: {
     fontFamily: font.family.body,
@@ -66,6 +68,7 @@ const styles = StyleSheet.create({
     paddingVertical: 0,
     textAlignVertical: 'center',
     includeFontPadding: false,
+    transform: [{ translateY: OPTICAL_TEXT_SHIFT }],
   },
   dropdown: {
     position: 'absolute',

package/src/components/interaction/form/FormInput/FormInput.spec.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '../../../../native/ThemeContext';
 import { FormInput } from './FormInput';
+import { OPTICAL_TEXT_SHIFT } from '../atoms/inputHelpers';
 
 function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
@@ -95,4 +96,27 @@ describe('FormInput (native)', () => {
     // Suppress unused-variable warning from destructuring
     void container;
   });
+
+  /**
+   * Optical-centering invariant: the TextInput must have a translateY transform equal
+   * to OPTICAL_TEXT_SHIFT to compensate for Arial's asymmetric vertical metrics.
+   *
+   * Arial's ascent (0.905em) vs descent (0.212em) means iOS places ink ~1.3pt below
+   * the geometric centre of the wrapper. The translateY shift was measured on-simulator
+   * to bring ink from +1.33pt to -0.33pt, which is visually centred.
+   *
+   * react-native-web serialises transform: [{translateY: n}] as a CSS transform string,
+   * so we check that the computed style contains the expected value.
+   */
+  it('has optical translateY shift on the TextInput (Arial centering correction)', () => {
+    renderWithTheme(<FormInput label="Email" name="email" value="bjorn@boonen.eu" />);
+    const input = screen.getByDisplayValue('bjorn@boonen.eu');
+    const transform = getComputedStyle(input).transform;
+    // react-native-web renders translateY as a matrix or translate() — check the value
+    // is present and matches the constant.
+    expect(OPTICAL_TEXT_SHIFT).toBe(-1.5);
+    // The transform string must encode a non-zero Y translation.
+    // matrix(1, 0, 0, 1, 0, -1.5) or translateY(-1.5px) — both contain the value.
+    expect(transform).toMatch(/(-1\.5|-1\.50)/);
+  });
 });

package/src/components/interaction/form/FormInput/FormInput.tsx

@@ -11,6 +11,7 @@ import { spacing, font, border } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
+import { OPTICAL_TEXT_SHIFT } from '../atoms/inputHelpers';
 
 /** Fixed height for single-line control fields (satisfies 44pt touch target). */
 const INPUT_HEIGHT = 44;
@@ -61,6 +62,7 @@ const styles = StyleSheet.create({
    * No vertical padding: iOS centers text automatically inside the wrapper height.
    * textAlignVertical + includeFontPadding are Android-specific but harmless on iOS.
    * No lineHeight: explicit lineHeight on a single-line TextInput clips ascenders/descenders on iOS.
+   * transform translateY: optical correction for Arial's asymmetric metrics — see OPTICAL_TEXT_SHIFT.
    */
   input: {
     fontFamily: font.family.body,
@@ -69,6 +71,7 @@ const styles = StyleSheet.create({
     paddingVertical: 0,
     textAlignVertical: 'center',
     includeFontPadding: false,
+    transform: [{ translateY: OPTICAL_TEXT_SHIFT }],
   },
 });
 

package/src/components/interaction/form/NumberInput/NumberInput.spec.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '../../../../native/ThemeContext';
 import { NumberInput } from './NumberInput';
+import { OPTICAL_TEXT_SHIFT } from '../atoms/inputHelpers';
 
 function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
@@ -84,4 +85,16 @@ describe('NumberInput (native)', () => {
     const heightPx = parseFloat(getComputedStyle(wrapper).height);
     expect(heightPx).toBeGreaterThanOrEqual(44);
   });
+
+  /**
+   * Optical-centering invariant: the TextInput must have a translateY transform equal
+   * to OPTICAL_TEXT_SHIFT to compensate for Arial's asymmetric vertical metrics.
+   */
+  it('has optical translateY shift on the TextInput (Arial centering correction)', () => {
+    renderWithTheme(<NumberInput label="Quantity" name="qty" value={3} />);
+    const input = screen.getByDisplayValue('3');
+    const transform = getComputedStyle(input).transform;
+    expect(OPTICAL_TEXT_SHIFT).toBe(-1.5);
+    expect(transform).toMatch(/(-1\.5|-1\.50)/);
+  });
 });

package/src/components/interaction/form/NumberInput/NumberInput.tsx

@@ -12,6 +12,7 @@ import { spacing, font, border } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
+import { OPTICAL_TEXT_SHIFT } from '../atoms/inputHelpers';
 
 interface NumberInputProps {
   label: string;
@@ -75,6 +76,7 @@ const styles = StyleSheet.create({
    * No vertical padding: iOS auto-centers within the wrapper height.
    * textAlignVertical + includeFontPadding provide Android parity.
    * No lineHeight: explicit lineHeight clips ascenders/descenders on iOS.
+   * transform translateY: optical correction for Arial's asymmetric metrics — see OPTICAL_TEXT_SHIFT.
    */
   input: {
     fontFamily: font.family.body,
@@ -84,6 +86,7 @@ const styles = StyleSheet.create({
     paddingVertical: 0,
     textAlignVertical: 'center',
     includeFontPadding: false,
+    transform: [{ translateY: OPTICAL_TEXT_SHIFT }],
   },
 });
 

package/src/components/interaction/form/SegmentedControl/SegmentedControl.mdx

@@ -71,8 +71,18 @@ function Example() {
 | `accessibilityLabel` | string | -- | Label for the tab group |
 | `onValueChange` | `(index: number) => void` | -- | Called with the tapped segment index |
 
+## Visual structure
+
+- **Track** — a single rounded container (`flexDirection: 'row'`, `borderRadius: full`, `colorBgSubtle` background, 2 px inner padding). No per-segment borders.
+- **Segments** — equal-width (`flex: 1`), min touch target 44 dp for medium/large.
+- **Selected thumb** — contrasting background rendered on the active segment only:
+  - `outline` variant → `colorBg` (elevated white / dark-elevated) + subtle shadow, label uses `colorInteractiveOnBg`.
+  - `filled` variant → `colorInteractive` background, label uses `colorOnInteractive`.
+- **Unselected** — transparent background, label uses `colorOnBgSubtle`.
+- Focus indication uses platform-default `opacity` on press; no stray rectangle outline.
+
 ## Accessibility
 
 - Uses `accessibilityRole="tablist"` on the container
-- Each segment uses `accessibilityRole="tab"` with `accessibilityState.selected`
-- Disabled state is communicated via `accessibilityState`
+- Each segment uses `accessibilityRole="tab"` with `accessibilityState={{ selected, disabled }}`
+- Disabled state is communicated via `accessibilityState.disabled`

package/src/components/interaction/form/SegmentedControl/SegmentedControl.spec.tsx

@@ -20,7 +20,7 @@ describe('SegmentedControl (native)', () => {
     expect(screen.getByText('Month')).toBeInTheDocument();
   });
 
-  it('has tablist role', () => {
+  it('has tablist role on the track container', () => {
     renderWithTheme(
       <SegmentedControl accessibilityLabel="View">
         {'Day'}
@@ -41,6 +41,21 @@ describe('SegmentedControl (native)', () => {
     expect(tabs).toHaveLength(2);
   });
 
+  it('marks the selected segment with accessibilityState.selected', () => {
+    renderWithTheme(
+      <SegmentedControl accessibilityLabel="View" selectedIndex={1}>
+        {'Day'}
+        {'Week'}
+      </SegmentedControl>,
+    );
+    // The selected tab is queryable by its label; both tabs still exist
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs).toHaveLength(2);
+    // Week (index 1) is the selected one; Day (index 0) is not
+    expect(screen.getByText('Week')).toBeInTheDocument();
+    expect(screen.getByText('Day')).toBeInTheDocument();
+  });
+
   it('calls onValueChange with the clicked index', () => {
     const onValueChange = vi.fn();
     renderWithTheme(
@@ -66,17 +81,44 @@ describe('SegmentedControl (native)', () => {
     expect(onValueChange).not.toHaveBeenCalled();
   });
 
-  it('renders the selected segment with distinct styling', () => {
-    renderWithTheme(
-      <SegmentedControl accessibilityLabel="View" selectedIndex={1}>
+  it('track has a single background — no per-segment borders', () => {
+    const { container } = renderWithTheme(
+      <SegmentedControl accessibilityLabel="View" selectedIndex={0}>
         {'Day'}
         {'Week'}
       </SegmentedControl>,
     );
-    // Verify both tabs render and the selected one exists
+    // The tablist (track) must exist and the segments (tabs) must not carry border styling
+    const tablist = container.querySelector('[role="tablist"]');
+    expect(tablist).not.toBeNull();
     const tabs = screen.getAllByRole('tab');
-    expect(tabs).toHaveLength(2);
-    // The selected tab text is rendered
+    tabs.forEach((tab) => {
+      const style = tab.getAttribute('style') ?? '';
+      expect(style).not.toMatch(/border-width/i);
+      expect(style).not.toMatch(/border-color/i);
+    });
+  });
+
+  it('selected thumb uses colorBg for outline variant (elevated surface)', () => {
+    renderWithTheme(
+      <SegmentedControl accessibilityLabel="View" selectedIndex={0} variant="outline">
+        {'Day'}
+        {'Week'}
+      </SegmentedControl>,
+    );
+    // Both tabs render; no regression
+    expect(screen.getByText('Day')).toBeInTheDocument();
+    expect(screen.getByText('Week')).toBeInTheDocument();
+  });
+
+  it('selected thumb uses colorInteractive for filled variant', () => {
+    renderWithTheme(
+      <SegmentedControl accessibilityLabel="View" selectedIndex={0} variant="filled">
+        {'Day'}
+        {'Week'}
+      </SegmentedControl>,
+    );
+    expect(screen.getByText('Day')).toBeInTheDocument();
     expect(screen.getByText('Week')).toBeInTheDocument();
   });
 });

package/src/components/interaction/form/SegmentedControl/SegmentedControl.tsx

@@ -17,23 +17,36 @@ interface SegmentedControlProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const sizeTokens: Record<SegmentedControlSize, { height: number; fontSize: number; px: number }> = {
-  small:  { height: 32, fontSize: font.size.bodyS, px: spacing.s },
-  medium: { height: 40, fontSize: font.size.body,  px: spacing.m },
-  large:  { height: 48, fontSize: font.size.body,  px: spacing.l },
+/** Inner padding between track edge and segment edges (mirrors --bds-space_xxxs = 2px). */
+const TRACK_PADDING = spacing.xxxs;
+
+const sizeTokens: Record<SegmentedControlSize, { minHeight: number; fontSize: number; px: number; py: number }> = {
+  small:  { minHeight: 32, fontSize: font.size.bodyS, px: spacing.s,  py: spacing.xxs },
+  medium: { minHeight: 44, fontSize: font.size.body,  px: spacing.m,  py: spacing.xs  },
+  large:  { minHeight: 48, fontSize: font.size.body,  px: spacing.m,  py: spacing.s   },
+};
+
+const thumbShadow = {
+  shadowColor: '#000',
+  shadowOffset: { width: 0, height: 1 },
+  shadowOpacity: 0.12,
+  shadowRadius: 2,
+  elevation: 2,
 };
 
 const styles = StyleSheet.create({
   track: {
     flexDirection: 'row',
     borderRadius: border.radius.full,
+    padding: TRACK_PADDING,
     overflow: 'hidden',
   },
-  item: {
+  segment: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    minHeight: 44,
+    // Thumb radius = track radius minus the padding gap (mirrors thumb-radius calc in web CSS)
+    borderRadius: border.radius.full - TRACK_PADDING,
   },
   label: {
     fontFamily: font.family.body,
@@ -53,42 +66,46 @@ export function SegmentedControl({
   style,
 }: Readonly<SegmentedControlProps>) {
   const { colors } = useTheme();
-  const { height, fontSize, px } = sizeTokens[size];
+  const { minHeight, fontSize, px, py } = sizeTokens[size];
   const items = Children.toArray(children);
 
-  const trackStyle: ViewStyle = variant === 'filled'
-    ? { backgroundColor: colors.colorBgSubtle }
-    : { backgroundColor: 'transparent', borderWidth: 1, borderColor: colors.colorBgSubtle };
+  // Track always uses the subtle background — same for both variants.
+  const trackBg = colors.colorBgSubtle;
+
+  // Thumb background differs by variant:
+  // "outline" → elevated surface (white in light, dark-elevated in dark) — mirrors web .--variant_outline .item.--active: colorBg
+  // "filled"  → interactive brand colour — mirrors web default thumb bg: colorInteractive
+  const thumbBg = variant === 'outline' ? colors.colorBg : colors.colorInteractive;
 
   return (
     <View
-      style={[styles.track, trackStyle, { borderRadius: border.radius.full }, style]}
+      style={[styles.track, { backgroundColor: trackBg }, style]}
       accessibilityRole="tablist"
       accessibilityLabel={accessibilityLabel}
     >
       {items.map((child, index) => {
         const isActive = index === selectedIndex;
 
-        const activeStyle: ViewStyle = variant === 'filled'
-          ? { backgroundColor: colors.colorInteractive }
-          : { borderWidth: 2, borderColor: colors.colorInteractive };
+        // Active label colour:
+        // "outline" → interactive on the surface (matches web --control_label-color--active: colorInteractive for outline)
+        // "filled"  → on-interactive (white/dark depending on theme)
+        const labelColor = isActive
+          ? (variant === 'outline' ? colors.colorInteractiveOnBg : colors.colorOnInteractive)
+          : colors.colorOnBgSubtle;
 
-        const inactiveStyle: ViewStyle = variant === 'filled'
-          ? {}
-          : {};
-
-        const textColor = variant === 'filled' && isActive
-          ? colors.colorOnInteractive
-          : isActive
-            ? colors.colorInteractive
-            : colors.colorOnBgSubtle;
-
-        // Extract label from child: if it's a string, use it directly.
-        // Otherwise render the child as-is.
         const label = typeof child === 'string' || typeof child === 'number'
           ? String(child)
           : null;
 
+        const segmentStyle: ViewStyle = {
+          minHeight,
+          paddingHorizontal: px,
+          paddingVertical: py,
+          ...(isActive
+            ? { backgroundColor: thumbBg, ...thumbShadow }
+            : { backgroundColor: 'transparent' }),
+        };
+
         return (
           <Pressable
             key={index}
@@ -98,16 +115,14 @@ export function SegmentedControl({
             accessibilityLabel={label ?? undefined}
             accessibilityState={{ selected: isActive, disabled }}
             style={({ pressed }) => [
-              styles.item,
-              { height, paddingHorizontal: px },
-              isActive ? activeStyle : inactiveStyle,
-              variant === 'filled' && isActive && { borderRadius: border.radius.full },
+              styles.segment,
+              segmentStyle,
               pressed && !disabled && { opacity: 0.7 },
               disabled && { opacity: 0.4 },
             ]}
           >
             {label !== null ? (
-              <Text style={[styles.label, { fontSize, color: textColor }]}>
+              <Text style={[styles.label, { fontSize, color: labelColor }]}>
                 {label}
               </Text>
             ) : (

package/src/components/interaction/form/atoms/inputHelpers.ts

@@ -0,0 +1,14 @@
+/**
+ * Optical vertical correction for single-line TextInput on iOS.
+ *
+ * Arial (the DS body font) has asymmetric vertical metrics:
+ *   ascent 0.905em vs descent 0.212em
+ * When iOS centers the TextInput's layout box inside the 44pt wrapper,
+ * the INK centre sits ~0.08em (~1.3pt at fontSize 16) below the geometric
+ * centre. Applying translateY here shifts the ink from +1.33pt to -0.33pt,
+ * which is visually perfect (verified on-simulator).
+ *
+ * Do NOT apply this to multiline TextInput (Textarea) — multiline inputs
+ * scroll their content and translateY would misalign the first line.
+ */
+export const OPTICAL_TEXT_SHIFT = -1.5;