pixelize-native-library 1.2.0 → 1.2.1

package/lib/module/modules/button/Button.js

@@ -1,48 +1,23 @@
 "use strict";
 
-/**
- * Button — the reference component. The single most-repeated shape in the audited apps (81 raw
- * TouchableOpacity in crm-mobile, 155 in ecommerce-mobile with three different style-key sets for the
- * SAME add-to-cart button, 195 web usages). Every other module copies the patterns here: how variants
- * resolve, how `tone` maps to role colours, how accessibility is wired, and the shape of the tests.
- */
-
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ActivityIndicator, Animated, Pressable, StyleSheet, Text, View } from "react-native";
-import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { memo, useCallback, useMemo, useState } from "react";
+import { ActivityIndicator, Platform, Pressable, StyleSheet, Text } from "react-native";
+import Animated from "react-native-reanimated";
+import { AccentGradientFill } from "../../core/gradient/index.js";
+import { useFocusRing, usePressState } from "../../core/motion/usePressState.js";
+import { useHaptics } from "../../core/haptics/index.js";
 import { Icon } from "../../core/icon/index.js";
-import { useTheme } from "../../theme/hooks.js";
+import { composeBoxShadow, highlight } from "../../theme/platform/highlight.native.js";
+import { tokenBoxShadow } from "../../theme/platform/floatingSurface.native.js";
+import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
+import { useTheme, useThemeColors } from "../../theme/hooks.js";
 import { BUTTON_SIZES, buttonStructure, resolveButtonAccessibility, resolveButtonTone } from "./Button.variants.js";
-
-/** A button with a visible text label. `accessibilityLabel` defaults to `label`. */
-
-/**
- * An icon-only button. It has no visible text, so `accessibilityLabel` is REQUIRED at the type level
- * — the single worst a11y trap on web (its tooltip was the only label on icon-only buttons in 22
- * files, and tooltips do not exist on touch). `label?: never` makes the two shapes mutually exclusive.
- */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
-// State-layer scrims. Direction is chosen by the label's brightness so the fill moves AWAY from the
-// label on press — its contrast can only rise. 8-digit hex carries the alpha (~15%) directly.
-const PRESS_SCRIM_DARK = "#00000026";
-const PRESS_SCRIM_LIGHT = "#ffffff26";
-// The focus ring sits a small gap OUTSIDE the control, on the canvas, because `border.focus` is the
-// role token proven ≥ 3:1 against the canvas (WCAG 2.4.11) — drawn over a solid fill it could fail.
-const FOCUS_RING_WIDTH = 2;
+const FOCUS_RING_WIDTH = 3;
 const FOCUS_RING_GAP = 2;
-
-// The press scale has to sit on the same node `style` lands on, so the contract's "style last" holds.
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-
-/** Cheap perceived-brightness split; `onFill` is only ever a near-white or near-black role value. */
-function isLight(hex) {
-  const n = parseInt(hex.slice(1, 7), 16);
-  const r = n >> 16 & 0xff;
-  const g = n >> 8 & 0xff;
-  const b = n & 0xff;
-  return r * 0.299 + g * 0.587 + b * 0.114 > 140;
-}
 function ButtonImpl(props) {
   const {
     variant = "solid",
@@ -68,45 +43,35 @@ function ButtonImpl(props) {
     accessibilityHint
   } = props;
   const theme = useTheme();
-  const motion = useMotion();
-  const pressed = useAnimatedValue(0);
-  const running = useRef(null);
-  // Keyboard / external-keyboard / assistive-tech focus (no-op on pure touch, correct everywhere else).
+  const colors = useThemeColors();
+  const haptics = useHaptics();
+  const blocked = disabled || loading;
+  const press = usePressState(blocked);
   const [focused, setFocused] = useState(false);
+  const {
+    focusRingStyle
+  } = useFocusRing(focused, blocked);
   const spec = BUTTON_SIZES[size];
   const toneColors = useMemo(() => resolveButtonTone(theme.colors, tone), [theme.colors, tone]);
   const iconOnly = label === undefined;
   const foreground = variant === "solid" ? toneColors.onFill : toneColors.text;
-  const overlayColor = variant === "solid" ? isLight(toneColors.onFill) ? PRESS_SCRIM_DARK : PRESS_SCRIM_LIGHT : toneColors.subtle;
+  const overlayColor = stateLayerScrim(theme.mode);
+  const handlePress = useCallback(() => {
+    haptics.selection();
+    onPress?.();
+  }, [haptics, onPress]);
   const a11y = useMemo(() => resolveButtonAccessibility({
     label,
     accessibilityLabel,
     disabled,
     loading,
     selected,
-    onPress
-  }), [label, accessibilityLabel, disabled, loading, selected, onPress]);
-  const setPressed = useCallback(isPressed => {
-    running.current?.stop();
-    const toValue = isPressed ? 1 : 0;
-    if (!motion.enabled) {
-      pressed.setValue(toValue);
-      return;
-    }
-    running.current = motion.timing(pressed, toValue, {
-      duration: "fast"
-    });
-    running.current.start();
-  }, [motion, pressed]);
-  useEffect(() => () => running.current?.stop(), []);
-
-  // Own state first, then the incoming handler — an outer handler that throws can never strand the
-  // press/focus ring in its active state.
-  const handlePressIn = useCallback(() => setPressed(true), [setPressed]);
+    onPress: onPress === undefined ? undefined : handlePress
+  }), [label, accessibilityLabel, disabled, loading, selected, onPress, handlePress]);
   const handlePressOut = useCallback(event => {
-    setPressed(false);
+    press.handlers.onPressOut();
     onPressOut?.(event);
-  }, [setPressed, onPressOut]);
+  }, [press.handlers, onPressOut]);
   const handleFocus = useCallback(event => {
     setFocused(true);
     onFocus?.(event);
@@ -115,42 +80,55 @@ function ButtonImpl(props) {
     setFocused(false);
     onBlur?.(event);
   }, [onBlur]);
-
-  // One value, two consumers: the state-layer opacity and the root's press scale.
-  const scaleStyle = useMemo(() => ({
-    transform: [{
-      scale: pressed.interpolate({
-        inputRange: [0, 1],
-        outputRange: [1, motion.transform.pressScale]
-      })
-    }]
-  }), [pressed, motion.transform.pressScale]);
-  const overlayStyle = useMemo(() => [StyleSheet.absoluteFill, {
+  const radius = theme.radii.md;
+  const solidToken = elevationTokens.sm;
+  const solidElevation = theme.elevation.sm;
+  const highlightLayers = highlight("subtle", theme.mode);
+  const surfaceStyle = useMemo(() => {
+    const base = {
+      borderRadius: radius,
+      borderCurve: "continuous"
+    };
+    if (variant === "solid") {
+      base.boxShadow = composeBoxShadow(tokenBoxShadow(solidToken), highlightLayers);
+      base.elevation = solidElevation.elevation;
+      Object.assign(base, solidElevation);
+    }
+    return base;
+  }, [variant, radius, solidToken, solidElevation, highlightLayers]);
+  const androidRipple = useMemo(() => {
+    if (Platform.OS !== "android") return undefined;
+    return {
+      color: rippleColor(theme.mode),
+      borderless: false
+    };
+  }, [theme.mode]);
+  const overlayStaticStyle = useMemo(() => ({
     backgroundColor: overlayColor,
-    opacity: pressed,
-    borderRadius: theme.radii.base,
-    pointerEvents: "none"
-  }], [overlayColor, pressed, theme.radii.base]);
-  const focusRingStyle = useMemo(() => ({
-    position: "absolute",
-    pointerEvents: "none",
+    borderRadius: radius
+  }), [overlayColor, radius]);
+  const focusRingStaticStyle = useMemo(() => ({
+    borderWidth: FOCUS_RING_WIDTH,
+    borderColor: colors.border.focus,
+    borderRadius: radius + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
     top: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
     left: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
     right: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
-    bottom: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
-    borderWidth: FOCUS_RING_WIDTH,
-    borderColor: theme.colors.border.focus,
-    borderRadius: theme.radii.base + FOCUS_RING_GAP + FOCUS_RING_WIDTH
-  }), [theme.colors.border.focus, theme.radii.base]);
+    bottom: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH)
+  }), [colors.border.focus, radius]);
+  const focusOutlineStyle = useMemo(() => ({
+    outlineWidth: FOCUS_RING_WIDTH,
+    outlineOffset: FOCUS_RING_GAP,
+    outlineColor: colors.border.focus,
+    outlineStyle: "solid",
+    borderRadius: radius
+  }), [colors.border.focus, radius]);
   const glyph = useCallback(name => /*#__PURE__*/_jsx(Icon, {
     name: name,
     size: spec.iconSize,
     color: foreground,
     strokeWidth: ICON_STROKE
   }), [spec.iconSize, foreground]);
-
-  // The spinner is never the sole loading signal — `accessibilityState.busy` announces it, and the
-  // label (when present) stays visible. Hidden from AT so it isn't read as a separate element.
   const spinner = useMemo(() => /*#__PURE__*/_jsx(ActivityIndicator, {
     size: "small",
     color: foreground,
@@ -171,30 +149,38 @@ function ButtonImpl(props) {
     disabled: a11y.disabled,
     onPress: a11y.onPress,
     onLongPress: onLongPress,
-    onPressIn: handlePressIn,
+    onPressIn: press.handlers.onPressIn,
     onPressOut: handlePressOut,
     onHoverIn: onHoverIn,
     onHoverOut: onHoverOut,
     onFocus: handleFocus,
     onBlur: handleBlur,
+    onLayout: press.onLayout,
     hitSlop: spec.hitSlop,
+    android_ripple: androidRipple,
     style: [buttonStructure(theme, {
       variant,
       size
-    }), variant === "solid" && {
+    }), surfaceStyle, {
+      overflow: "hidden"
+    }, variant === "solid" && {
       backgroundColor: toneColors.fill
     }, variant === "outline" && {
       borderColor: toneColors.border
     }, iconOnly && {
       paddingHorizontal: 0,
       minWidth: spec.height
-    }, fullWidth && styles.fullWidth, scaleStyle, (disabled || loading) && styles.dimmed, style],
-    children: [/*#__PURE__*/_jsx(Animated.View, {
-      testID: "button-press-overlay",
-      style: overlayStyle
-    }), focused && /*#__PURE__*/_jsx(View, {
+    }, fullWidth && styles.fullWidth, press.animatedStyle, focused && focusOutlineStyle, (disabled || loading) && styles.dimmed, style],
+    children: [variant === "solid" && /*#__PURE__*/_jsx(AccentGradientFill, {
+      color: toneColors.fill
+    }), focused && /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
       testID: "button-focus-ring",
-      style: focusRingStyle
+      style: [styles.focusRingHost, focusRingStaticStyle, focusRingStyle]
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      testID: "button-press-overlay",
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
     }), leading, label !== undefined && /*#__PURE__*/_jsx(Text, {
       numberOfLines: 1,
       style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
@@ -209,16 +195,16 @@ const styles = StyleSheet.create({
   fullWidth: {
     alignSelf: "stretch"
   },
-  // A disabled control is exempt from the contrast minimum (WCAG 1.4.3), so a uniform dim is correct.
   dimmed: {
     opacity: 0.5
   },
   linkText: {
     textDecorationLine: "underline"
+  },
+  focusRingHost: {
+    position: "absolute",
+    pointerEvents: "none"
   }
 });
-
-// A consumer's screen re-renders far more often than Button's own props change — memo is near-free
-// insurance for a design-system primitive (see CLAUDE.md "Performance — no unnecessary re-renders").
 export const Button = /*#__PURE__*/memo(ButtonImpl);
 //# sourceMappingURL=Button.js.map

package/lib/module/modules/button/Button.variants.js

@@ -31,22 +31,22 @@ const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2)
  */
 export const BUTTON_SIZES = {
   sm: {
-    height: 32,
+    height: 44,
     fontSize: 14,
     iconSize: 16,
-    hitSlop: slopFor(32)
+    hitSlop: slopFor(44)
   },
   md: {
-    height: 40,
+    height: 52,
     fontSize: 16,
     iconSize: 18,
-    hitSlop: slopFor(40)
+    hitSlop: slopFor(52)
   },
   lg: {
-    height: 48,
+    height: 56,
     fontSize: 18,
     iconSize: 20,
-    hitSlop: slopFor(48)
+    hitSlop: slopFor(56)
   }
 };
 /**
@@ -136,7 +136,8 @@ export const buttonStructure = createThemedVariants(theme => ({
     alignItems: "center",
     justifyContent: "center",
     columnGap: theme.space[2],
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   },
   variants: {
     size: {

package/lib/module/modules/button/MODULE.md

@@ -98,6 +98,10 @@ label); `accent`/`danger` map to the accent and danger roles.
   as optional peers); `Button.tsx` and `index.ts` import from there.
 - `useReducedMotion` hoisted to `src/core/a11y/`.
 
+Press feedback uses `usePressState` (Reanimated scale + state-layer overlay, width-aware).
+Focus ring uses native `outline*` props animated via `useFocusRing`. Solid variant gets
+`elevation.sm` + inset highlight; Android `android_ripple` on a clipped pressable.
+
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`) — renamed to `ButtonImpl` internally, exported as `Button = memo(ButtonImpl)`. Its one child, `Icon`, only ever receives primitives — nothing to memoize.
@@ -107,3 +111,5 @@ Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLA
 - Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
 - List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
 - `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.
+
+- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.

package/lib/module/modules/button-group/ButtonGroup.js

@@ -1,27 +1,14 @@
 "use strict";
 
-/**
- * ButtonGroup — a segmented single-choice control. Visually connected segments sharing one outer
- * border and a divider line between adjacent segments, NOT a row of standalone `Button`s — that
- * connected/segmented treatment is a different structural shape than Button's own pill/rect
- * variants, so this is a standalone sibling (it never imports `../button`). The border/divider is
- * drawn PER SEGMENT, not once on the container: every edge that touches the selected segment omits
- * the stroke (see `resolveButtonGroupSegmentEdgeColors` — WCAG 1.4.11) and relies on the selected
- * fill's own contrast against the canvas instead.
- *
- * One component owns the whole group, same as `RadioGroup`: each segment carries its own
- * `accessibilityRole="radio"` + `accessibilityState.checked`, and the container carries
- * `accessibilityRole="radiogroup"` so assistive tech announces the grouping without collapsing the
- * individually-focusable segments into one.
- *
- * No animation anywhere, deliberately: selection is a conditional fill, and the segments share one
- * continuous border, so a per-segment press scale (Button's affordance) would visibly detach a
- * segment from the control it is part of. The `pressed` fill swap is the affordance instead. Nothing
- * animates, so — like `RadioGroup` — there is nothing here for reduce motion (WCAG 2.3.3) to gate.
- */
+// Segmented single-choice control: segments share one tonal container fill, not a bordered frame.
+// A hairline divider sits between adjacent unselected segments, omitted at the selected edge (WCAG
+// 1.4.11) — see `resolveButtonGroupSegmentEdgeColors`. Never imports `../button`; a different shape.
 
 import { memo, useCallback, useMemo, useRef, useState } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { BUTTON_GROUP_SIZES, buttonGroupSegmentStructure, buttonGroupStructure, resolveButtonGroupColors, resolveButtonGroupKeyIndex, resolveButtonGroupSegmentAccessibility, resolveButtonGroupSegmentEdgeColors, resolveButtonGroupSegmentHitSlop } from "./ButtonGroup.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -38,6 +25,7 @@ const KeyboardView = View;
  */
 const FOCUS_RING_WIDTH = 2;
 const FOCUS_RING_INSET = 2;
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 function ButtonGroupSegmentImpl({
   label,
   value,
@@ -56,6 +44,7 @@ function ButtonGroupSegmentImpl({
   testID
 }) {
   const theme = useTheme();
+  const press = usePressState(disabled || selected);
   const [focused, setFocused] = useState(false);
   const a11y = useMemo(() => resolveButtonGroupSegmentAccessibility({
     selected,
@@ -69,6 +58,13 @@ function ButtonGroupSegmentImpl({
     isFirst,
     isLast
   }), [size, isFirst, isLast]);
+  const androidRipple = useMemo(() => {
+    if (Platform.OS !== "android" || disabled || selected) return undefined;
+    return {
+      color: rippleColor(theme.mode),
+      borderless: false
+    };
+  }, [theme.mode, disabled, selected]);
   const handlePress = useCallback(() => onValueChange(value), [onValueChange, value]);
   const handleFocus = useCallback(() => setFocused(true), []);
   const handleBlur = useCallback(() => setFocused(false), []);
@@ -84,29 +80,28 @@ function ButtonGroupSegmentImpl({
     bottom: FOCUS_RING_INSET,
     borderWidth: FOCUS_RING_WIDTH,
     borderColor: theme.colors.border.focus,
-    borderRadius: Math.max(0, theme.radii.base - FOCUS_RING_INSET)
-  }), [theme.colors.border.focus, theme.radii.base]);
-  const segmentStyle = useCallback(({
-    pressed
-  }) => [buttonGroupSegmentStructure(theme, {
+    borderRadius: Math.max(0, theme.radii.md - FOCUS_RING_INSET)
+  }), [theme.colors.border.focus, theme.radii.md]);
+  const segmentStyle = useMemo(() => [buttonGroupSegmentStructure(theme, {
     size,
     first: isFirst ? "on" : "off",
     last: isLast ? "on" : "off"
   }), {
-    borderTopColor: edges.top,
-    borderBottomColor: edges.bottom,
-    borderLeftColor: edges.left,
     borderRightColor: edges.right
   }, selected ? {
     backgroundColor: colors.selectedFill
-  } : pressed && !disabled && {
-    backgroundColor: colors.pressedFill
-  }, disabled && styles.dimmed], [theme, size, isFirst, isLast, edges, selected, disabled, colors]);
+  } : null, {
+    overflow: "hidden"
+  }, press.animatedStyle, disabled && styles.dimmed], [theme, size, isFirst, isLast, edges, selected, disabled, colors, press.animatedStyle]);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: Math.max(0, theme.radii.md - FOCUS_RING_INSET)
+  }), [theme.mode, theme.radii.md]);
   const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
     fontSize,
     color: selected ? colors.onSelectedFill : colors.label
   }], [theme, fontSize, selected, colors]);
-  return /*#__PURE__*/_jsxs(Pressable, {
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     ref: setRef,
     testID: testID,
     accessibilityRole: a11y.accessibilityRole,
@@ -114,17 +109,21 @@ function ButtonGroupSegmentImpl({
     "aria-disabled": a11y["aria-disabled"],
     accessibilityLabel: label,
     disabled: a11y.disabled,
-    tabIndex: active && !disabled ? 0 : -1
-    // RN's Pressable stays `focusable` when disabled, so a TV remote could otherwise land on a
-    // segment that renders no ring (WCAG 2.4.7) — the same fix NumberInput's steppers use.
-    ,
+    tabIndex: active && !disabled ? 0 : -1,
     focusable: !disabled,
     onFocus: handleFocus,
     onBlur: handleBlur,
     onPress: disabled ? undefined : handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
     hitSlop: hitSlop,
+    android_ripple: androidRipple,
     style: segmentStyle,
-    children: [focused && !disabled && /*#__PURE__*/_jsx(View, {
+    children: [!selected && /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), focused && !disabled && /*#__PURE__*/_jsx(View, {
       testID: testID === undefined ? undefined : `${testID}-focus-ring`,
       style: focusRingStyle
     }), /*#__PURE__*/_jsx(Text, {

package/lib/module/modules/button-group/ButtonGroup.variants.js

@@ -65,12 +65,7 @@ export function resolveButtonGroupColors(colors) {
     selectedFill: colors.accent.solid,
     onSelectedFill: colors.accent.onSolid,
     label: colors.fg.default,
-    // `bg.sunken` (a pale neutral tint), NOT `bg.hover`: measured, `bg.hover`'s saturated mid-tone
-    // drops the brand-tinted `fg.default` label below 4.5:1 on several brands — same class of bug
-    // Button's "neutral" tone and RadioGroup's pressed row document fixing the same way. Composited
-    // with a small `bg.canvas` overlay (see `PRESSED_FILL_OVERLAY_ALPHA_HEX` above) so it also clears
-    // 3:1 against `selectedFill` — the boundary a segment adjacent to the selected one actually draws
-    // while being pressed.
+    containerFill: colors.bg.raised,
     pressedFill: compositeOver(`${colors.bg.canvas}${PRESSED_FILL_OVERLAY_ALPHA_HEX}`, colors.bg.sunken),
     outline: colors.border.interactive
   };
@@ -80,19 +75,9 @@ export function resolveButtonGroupColors(colors) {
  * the WIDTH constant (see `buttonGroupSegmentStructure`) and only swapping the COLOUR avoids a
  * layout shift when a segment's selection changes. */
 const OMITTED_EDGE = "transparent";
-/**
- * Per-edge, per-segment outline colour — the WCAG 1.4.11 fix. An edge draws the shared `outline`
- * colour only when BOTH sides of it are unselected; any edge touching the selected segment is
- * `transparent` instead, so the selected fill's own contrast against the canvas (or, for the
- * divider case, against the neighbour's transparent/canvas background) is what marks the boundary.
- */
 export function resolveButtonGroupSegmentEdgeColors(colors, input) {
-  const own = input.selected ? OMITTED_EDGE : colors.outline;
   const right = input.selected || input.nextSelected ? OMITTED_EDGE : colors.outline;
   return {
-    top: own,
-    bottom: own,
-    left: own,
     right
   };
 }
@@ -166,37 +151,29 @@ export function resolveButtonGroupKeyIndex(input) {
 }
 
 /**
- * The container — a clipping rect only. `overflow: hidden` + `borderRadius` clips every segment's
- * fill (and the outer segments' square corners) to this single rounded outline, so the selected
- * segment never shows a corner poking past the shared shape — the visual mechanism that makes this
- * read as ONE connected control rather than a row of standalone buttons. It carries NO border of its
- * own: the outer border is drawn by the first/last segments themselves (see
- * `buttonGroupSegmentStructure`), because only a per-segment border can be selectively omitted where
- * it touches the selected segment (WCAG 1.4.11) — a single container-wide border is one colour for
- * its entire perimeter and cannot vary by which segment it runs along.
+ * The container. `overflow: hidden` + `borderRadius` clips every segment's fill (and the outer
+ * segments' square corners) to one rounded shape, so the selected segment never pokes a corner past
+ * it. `backgroundColor: bg.raised` is the group's tonal frame — it replaces the old outer hairline,
+ * so unselected segments (transparent) read as sitting on one continuous raised surface.
  */
 export const buttonGroupStructure = createThemedVariants(theme => ({
   base: {
     flexDirection: "row",
-    borderRadius: theme.radii.base,
-    overflow: "hidden"
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
+    overflow: "hidden",
+    backgroundColor: theme.colors.bg.raised
   }
 }));
 
 /**
  * One segment's layout. `minWidth: MIN_TOUCH_TARGET` is the real ≥44dp touch-target floor for the
- * WIDTH axis — horizontal hitSlop can no longer safely pad an internal segment (see
- * `resolveButtonGroupSegmentHitSlop`), so the rendered node itself must never shrink narrower than
- * 44dp, for a realistic 2–4 option row at either size. `height` is fixed (not a minimum) so the
+ * WIDTH axis (see `resolveButtonGroupSegmentHitSlop`). `height` is fixed (not a minimum) so the
  * vertical hitSlop math holds against what actually renders.
  *
- * Every segment structurally carries a top, bottom, and right border (thin width) — the right one is
- * the divider on every segment except the last, where it is instead that segment's own outer right
- * edge. Only the FIRST segment gets a left border and left-corner radii (the group's own outer left
- * edge); only the LAST segment gets right-corner radii (matching the container's own `borderRadius`,
- * so that segment's own border curves rather than being clipped into an L by the container). Border
- * WIDTHS are structural and constant; COLOURS (drawn vs `transparent`) are resolved per render by
- * `resolveButtonGroupSegmentEdgeColors` and applied inline over this.
+ * Only a right border remains, structural on every segment but the last — the internal divider
+ * between two adjacent unselected segments (see `resolveButtonGroupSegmentEdgeColors`). There is no
+ * more top/bottom/left border: the container's own tonal fill carries the group's outer shape now.
  */
 export const buttonGroupSegmentStructure = createThemedVariants(theme => ({
   base: {
@@ -204,8 +181,6 @@ export const buttonGroupSegmentStructure = createThemedVariants(theme => ({
     minWidth: MIN_TOUCH_TARGET,
     alignItems: "center",
     justifyContent: "center",
-    borderTopWidth: theme.borderWidths.thin,
-    borderBottomWidth: theme.borderWidths.thin,
     borderRightWidth: theme.borderWidths.thin
   },
   variants: {
@@ -221,18 +196,18 @@ export const buttonGroupSegmentStructure = createThemedVariants(theme => ({
     },
     first: {
       on: {
-        borderLeftWidth: theme.borderWidths.thin,
-        borderTopLeftRadius: theme.radii.base,
-        borderBottomLeftRadius: theme.radii.base
+        borderTopLeftRadius: theme.radii.md,
+        borderBottomLeftRadius: theme.radii.md,
+        borderCurve: "continuous"
       },
-      off: {
-        borderLeftWidth: 0
-      }
+      off: {}
     },
     last: {
       on: {
-        borderTopRightRadius: theme.radii.base,
-        borderBottomRightRadius: theme.radii.base
+        borderTopRightRadius: theme.radii.md,
+        borderBottomRightRadius: theme.radii.md,
+        borderCurve: "continuous",
+        borderRightWidth: 0
       },
       off: {}
     }