pixelize-native-library 1.2.0 → 1.3.0

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

@@ -16,12 +16,10 @@
  *    `resolveRadioRowAccessibility` — this is a single-choice value selector, not a set of tabs.
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { compositeOver } from "../../theme/tokens/builders/color.js";
 import { createThemedVariants } from "../../core/style/index.js";
-/** Same floor as Button/RadioGroup/Tabs — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported: modules
- * stay isolated. */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2));
+export { MIN_TOUCH_TARGET };
 /**
  * ButtonGroup-specific dimensions. Kept a plain constant — no theme dependency — so the hit-target
  * test can assert `height + 2·hitSlop ≥ 44` without a provider, same as `BUTTON_SIZES`.
@@ -65,12 +63,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 +73,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 +149,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 +179,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 +194,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: {}
     }

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=ButtonGroupProps.js.map

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

@@ -1,19 +1,20 @@
 # button-group/ — 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. One component owns the whole group, same shape as
-`radio-group/`: each segment carries its own `accessibilityRole="radio"`; the container carries
-`accessibilityRole="radiogroup"` so assistive tech announces the grouping without collapsing the
-individually-focusable segments into one. The border/divider is drawn PER SEGMENT (never once on
-the container) so it can be selectively omitted where it touches the selected segment — see
-**1.4.11** below.
+Segments sit on one shared tonal container fill (`bg.raised`) with a hairline divider between
+adjacent unselected segments — NOT a row of standalone `Button`s. One component owns the whole
+group, same shape as `radio-group/`: each segment carries its own `accessibilityRole="radio"`; the
+container carries `accessibilityRole="radiogroup"` so assistive tech announces the grouping without
+collapsing the individually-focusable segments into one. The divider is drawn PER SEGMENT (never
+once on the container) so it can be selectively omitted where it touches the selected segment — see
+**1.4.11** below. There is no outer frame border any more (Wave 5 tonal restyle) — the container's
+own fill carries the group's shape.
 
 ## Files
 
 | File | Role |
 |------|------|
-| `ButtonGroup.tsx` | The component. Segment composition, press wiring, a11y wiring. |
-| `ButtonGroup.variants.ts` | Pure resolvers (`BUTTON_GROUP_SIZES`, `resolveButtonGroupColors`, `resolveButtonGroupSegmentEdgeColors`, `resolveButtonGroupSegmentHitSlop`, `resolveButtonGroupSegmentAccessibility`) + the themed structural resolvers (`buttonGroupStructure`, `buttonGroupSegmentStructure`). No React, no lucide. |
+| `ButtonGroup.tsx` | The component. Segment composition, press wiring, a11y wiring. Focus ring width comes from `core/style/focusRing` (`FOCUS_RING_WIDTH`; inset ring drawn inside each segment). |
+| `ButtonGroup.variants.ts` | Pure resolvers (`BUTTON_GROUP_SIZES`, `resolveButtonGroupColors`, `resolveButtonGroupSegmentEdgeColors`, `resolveButtonGroupSegmentHitSlop`, `resolveButtonGroupSegmentAccessibility`) + the themed structural resolvers (`buttonGroupStructure`, `buttonGroupSegmentStructure`). `MIN_TOUCH_TARGET` / `slopFor` from `core/a11y/touchTarget`. No React, no lucide. |
 | `index.ts` | Public surface: `ButtonGroup`, `ButtonGroupProps`, `ButtonGroupOption`, `ButtonGroupSize`. |
 | `__tests__/ButtonGroup.test.ts` | Pure: WCAG contrast (selected label, unselected label resting + pressed, every per-segment boundary pairing — all brands × modes × first/middle/last selected) + touch target (vertical hitSlop math + per-edge hitSlop decision) + a11y contract. |
 | `__tests__/ButtonGroup.render.test.tsx` | Render: selection, press blocking when disabled, per-segment a11y state, the ACTUAL rendered border colours per edge, the ACTUAL rendered hitSlop object, the ACTUAL rendered `minWidth`. |
@@ -65,18 +66,12 @@ appearances. The selected fill is always `accent.solid`; the shared outline/divi
   canvas (resting) and `bg.sunken` (pressed) — NOT `bg.hover`, whose saturated mid-tone was measured
   to drop the brand-tinted label below 4.5:1 on several brands, the same class of bug Button's
   "neutral" tone and RadioGroup's pressed row document fixing the same way.
-- **1.4.11** — the shared `outline` token (`border.interactive`) clears 3:1 against `bg.canvas` on
-  every brand × mode, but measured against a SELECTED segment's `accent.solid` fill it FAILS 3:1 on
-  15 of 16 brand × mode combinations (some catastrophically: slate light 1.00, emerald light 1.02).
-  Because `value` is required, some segment is always selected — that adjacency is every render, not
-  an edge case, and it previously went unmeasured (the shipped test only checked outline-vs-canvas).
-  Fixed: `resolveButtonGroupSegmentEdgeColors` computes, per edge of per segment, whether that edge
-  touches the selected segment; any edge that does gets `transparent` instead of `outline`, and the
-  boundary there is served instead by the selected fill's own contrast against the canvas —
-  `accent.solid` clears 3:1 against `bg.canvas` on all 16 brand × mode combinations (worst case
-  3.24:1, emerald light) — the same mechanism every other solid-fill component in this library
-  already relies on. `ButtonGroup.test.ts` measures every actually-rendered boundary pairing (not
-  just the easy outline-vs-canvas one) for first/middle/last selected × all 8 brands × both modes.
+- **1.4.11** — the shared `outline` token (`border.interactive`) is now only ever drawn as the
+  divider between two adjacent unselected segments; any edge touching the selected segment gets
+  `transparent` instead, and the boundary there is served by `accent.solid` (`selectedFill`) against
+  the group's own `containerFill` (`bg.raised`) — measured ≥ 3:1 on all 16 brand × mode combinations
+  (worst case 3.31:1, rosewood light). `ButtonGroup.test.ts` measures every actually-rendered
+  boundary for first/middle/last selected × all 8 brands × both modes.
 - **2.1.1 (keyboard) — roving tabindex.** `accessibilityRole="radio"` per segment means ARIA requires
   the group to be ONE tab stop whose arrows both move and select. `tabIndex` is `0` on exactly one
   segment and `-1` on the rest; arrows move and select (wrapping), Home/End jump to the ends
@@ -92,8 +87,8 @@ appearances. The selected fill is always `accent.solid`; the shared outline/divi
   offsets inside the segment instead; `ButtonGroup.render.test.tsx` asserts both halves — that the
   container really clips, and that every ring edge is a positive inset that therefore survives it.
   Segments also carry `focusable={!disabled}`, since RN's `Pressable` stays focusable when disabled.
-- **2.3.3** — n/a: nothing here animates. Selection is a conditional fill (not a slide or a fade), so
-  there is no transition for `useReducedMotion` to gate — same as `RadioGroup`.
+- **2.3.3** — n/a for selection (conditional fill, not a slide). Segment presses use `usePressState`
+  (scale + state-layer overlay), which snaps under reduce motion — same gating as `Button`.
 - Disabled segments are exempt from the contrast minimum (WCAG 1.4.3), so the uniform `opacity: 0.5`
   dim is correct, same as Button/RadioGroup.
 
@@ -105,15 +100,12 @@ appearances. The selected fill is always `accent.solid`; the shared outline/divi
    and — per edge, per segment — `outline` vs `transparent`) is resolved by `resolveButtonGroupColors`
    / `resolveButtonGroupSegmentEdgeColors` from role tokens and applied inline over the structural
    style.
-2. **One connected control, not N buttons — and the border lives on the segments, not the container.**
-   The container is only a clipping rect (`overflow: 'hidden'` + `borderRadius`, no border of its
-   own): it clips a filled end segment's square corner into the shared rounded shape. Every segment
-   structurally carries its own top/bottom/right border; 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 + left-corner radii, only the LAST gets right-corner radii. A single
-   container-wide border could never be selectively omitted per segment (one colour for its whole
-   perimeter), which is exactly why 1.4.11 shipped broken the first time — moving the border onto the
-   segments is what makes the WCAG fix possible at all.
+2. **One connected control, not N buttons — the divider lives on the segments, the shape on the
+   container.** The container clips (`overflow: 'hidden'` + `borderRadius`) AND carries the tonal
+   `containerFill`; it clips a filled end segment's square corner into the shared rounded shape.
+   Every segment but the last structurally carries its own right border, the divider between it and
+   its neighbour; a single container-wide border could never be selectively omitted per segment (one
+   colour for its whole perimeter), which is why the divider still lives on the segments.
 3. **Pure, testable resolvers** in `ButtonGroup.variants.ts` (no React) so the WCAG + behaviour
    contract is unit-tested against the real palettes — never eyeballed.
 4. **No `{...rest}`, `style` once on the outermost node**, no icon (per spec), no import from
@@ -148,6 +140,9 @@ an `if (dark)` branch. Worst case now 3.08:1 (rosewood light); the unselected la
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`) — renamed to `ButtonGroupImpl` internally, exported as `ButtonGroup = memo(ButtonGroupImpl)`. The `options.map()` hands every per-row prop to host elements (`Pressable`/`Text`/`View`), never a library child component, so no `useCallback`/`useMemo` was needed.
 
+Android segments carry `android_ripple` (mirrors Button/RadioGroup), gated off while
+`disabled || selected` since a selected segment already reads via its fill.
+
 ## Modernization (v1.0.7)
 
 - Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.

package/lib/module/modules/card/Card.js

@@ -1,42 +1,163 @@
 "use strict";
 
 /**
- * Card — a plain container for grouping content. No interaction, no text of its own: `children` is
- * ordinary composition (a consumer places `Text`, `Button`, whatever it needs inside), so there is
- * nothing here for `accessibilityRole` to announce — the container is intentionally invisible to
- * assistive tech and its children carry their own semantics, exactly like a plain `View` would.
+ * Card — a plain container for grouping content, optionally pressable. When `onPress` is absent the
+ * root is a plain `View` with no press hook or animated values. Children carry their own semantics.
  */
 
-import { memo, useMemo } from "react";
-import { View } from "react-native";
+import { memo, useCallback, useMemo } from "react";
+import { Platform, Pressable, StyleSheet, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { renderNodeSlot } from "../../core/slot/index.js";
+import { elevation, floatingBackground, floatingSurfaceStyle, highlight } from "../../theme/platform/index.js";
+import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { cardStructure, resolveCardVariant } from "./Card.variants.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-function CardImpl({
-  variant = "elevated",
-  children,
-  style,
-  testID
-}) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function useCardChildrenSlotStyle() {
+  const theme = useTheme();
+  return useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    color: theme.colors.fg.default,
+    fontSize: theme.fontSizes.md
+  }], [theme]);
+}
+function useCardStyles(variant, style) {
   const theme = useTheme();
-  const rootStyle = useMemo(() => {
+  return useMemo(() => {
     const variantColors = resolveCardVariant(theme.colors, variant);
+    const elevated = variant === "elevated";
+    highlight("subtle", theme.mode);
+    elevation(elevationTokens.sm);
+    const elevatedBg = elevated ? floatingBackground(theme, "sm") : variantColors.background;
     return [cardStructure(theme, {
       variant
     }), {
-      backgroundColor: variantColors.background
+      backgroundColor: elevatedBg,
+      borderCurve: "continuous"
     }, variantColors.border !== undefined && {
       borderColor: variantColors.border
-    }, variant === "elevated" && theme.elevation.md, style];
+    }, elevated && floatingSurfaceStyle(theme, "sm"), style];
   }, [theme, variant, style]);
+}
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+function StaticCard({
+  variant,
+  children,
+  style,
+  testID
+}) {
+  const rootStyle = useCardStyles(variant, style);
+  const childrenSlotStyle = useCardChildrenSlotStyle();
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
     style: rootStyle,
+    children: renderNodeSlot(children, childrenSlotStyle)
+  });
+}
+function PressableCard({
+  variant,
+  children,
+  style,
+  testID,
+  onPress,
+  onLongPress,
+  disabled = false,
+  accessibilityLabel,
+  accessibilityState
+}) {
+  const theme = useTheme();
+  const blocked = disabled;
+  const press = usePressState(blocked);
+  const rootStyle = useCardStyles(variant, style);
+  const childrenSlotStyle = useCardChildrenSlotStyle();
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.lg,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.lg]);
+  const handlePressOut = useCallback(() => {
+    press.handlers.onPressOut();
+  }, [press.handlers]);
+  const androidRipple = useMemo(() => {
+    if (Platform.OS !== "android" || blocked) return undefined;
+    return {
+      color: rippleColor(theme.mode),
+      borderless: false
+    };
+  }, [blocked, theme.mode]);
+  return /*#__PURE__*/_jsx(AnimatedPressable, {
+    testID: testID,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      disabled: blocked,
+      ...accessibilityState
+    },
+    disabled: blocked,
+    onPress: blocked ? undefined : onPress,
+    onLongPress: blocked ? undefined : onLongPress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: handlePressOut,
+    onLayout: press.onLayout,
+    android_ripple: androidRipple,
+    style: [rootStyle, press.animatedStyle, blocked && styles.dimmed, {
+      overflow: "hidden"
+    }],
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [styles.rippleClip, {
+        pointerEvents: 'box-none'
+      }],
+      children: [/*#__PURE__*/_jsx(Animated.View, {
+        testID: testID === undefined ? undefined : `${testID}-press-overlay`,
+        style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+          pointerEvents: 'none'
+        }]
+      }), renderNodeSlot(children, childrenSlotStyle)]
+    })
+  });
+}
+function CardImpl({
+  variant = "elevated",
+  children,
+  onPress,
+  onLongPress,
+  disabled = false,
+  accessibilityLabel,
+  accessibilityState,
+  style,
+  testID
+}) {
+  if (onPress === undefined) {
+    return /*#__PURE__*/_jsx(StaticCard, {
+      variant: variant,
+      style: style,
+      testID: testID,
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(PressableCard, {
+    variant: variant,
+    style: style,
+    testID: testID,
+    onPress: onPress,
+    onLongPress: onLongPress,
+    disabled: disabled,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: accessibilityState,
     children: children
   });
 }
-
-// A consumer's screen re-renders far more often than Card's own props change — memo is near-free
-// insurance for a design-system primitive (see CLAUDE.md "Performance" section).
+const styles = StyleSheet.create({
+  dimmed: {
+    opacity: 0.5
+  },
+  rippleClip: {
+    flex: 1,
+    overflow: "hidden",
+    borderRadius: 0
+  }
+});
 export const Card = /*#__PURE__*/memo(CardImpl);
 //# sourceMappingURL=Card.js.map

package/lib/module/modules/card/Card.variants.js

@@ -53,6 +53,7 @@ export function resolveCardVariant(colors, variant) {
 export const cardStructure = createThemedVariants(theme => ({
   base: {
     borderRadius: theme.radii.lg,
+    borderCurve: "continuous",
     padding: theme.space[4]
   },
   variants: {

package/lib/module/modules/card/CardProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=CardProps.js.map

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

@@ -1,13 +1,15 @@
 # card/ — a plain, variant-driven container
 
 `Card` groups content with a themed background, optional border, and optional elevation. It takes
-no icon, no press handler, and renders no text of its own — `children` is ordinary composition.
+no icon and renders no text of its own — `children` is ordinary composition. When `onPress` is
+provided the root becomes a pressable surface with scale + state-layer feedback; otherwise it stays
+a plain `View` with no press hook.
 
 ## Files
 
 | File | Role |
 |------|------|
-| `Card.tsx` | The component. Resolves the variant's colours + elevation, applies them inline over the structural style, in that order, `style` last. |
+| `Card.tsx` | The component. Resolves variant colours + `floatingSurfaceStyle` for `elevated`, applies inline over structure, `style` last. |
 | `Card.variants.ts` | Pure resolver (`resolveCardVariant`) + the themed structural variant resolver `cardStructure`. No React. |
 | `index.ts` | Public surface: `Card`, `CardProps`, `CardVariant`. |
 | `__tests__/Card.test.ts` | Pure: WCAG 1.4.11 (outline border, all brands × modes) + variant→colour resolution. |
@@ -18,6 +20,11 @@ no icon, no press handler, and renders no text of its own — `children` is ordi
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `variant` | `elevated \| outline \| flat` | `elevated` | Closed union — see below. |
+| `onPress` | `() => void` | — | When set, root is `Pressable` with `usePressState` feedback. |
+| `onLongPress` | `(event) => void` | — | Only when `onPress` is set. |
+| `disabled` | `boolean` | `false` | Only when `onPress` is set. |
+| `accessibilityLabel` | `string` | — | Pressable cards only. |
+| `accessibilityState` | `{ disabled?, selected? }` | — | Pressable cards only. |
 | `children` | `ReactNode` | — | Ordinary composition, not a prop spread. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
 | `testID` | `string` | — | Forwarded to the outermost `View`. |
@@ -28,7 +35,7 @@ no icon, no press handler, and renders no text of its own — `children` is ordi
 |---------|-----------|--------|-----------|
 | `flat` | `bg.surface` | none | none |
 | `outline` | `bg.surface` | `border.interactive`, `borderWidths.thin` | none |
-| `elevated` (default) | `bg.raised` | none | `theme.elevation.md` (already-rendered `ElevationStyle`, spread as-is — never re-derived) |
+| `elevated` (default) | `floatingBackground(sm)` in dark | none | `floatingSurfaceStyle(sm)` — `elevation` + `highlight` + `borderCurve` |
 
 Padding (`theme.space[4]`) and radius (`theme.radii.lg`) are shared across all three variants via
 `cardStructure`; only border WIDTH varies by variant there (colour is resolved separately and
@@ -49,24 +56,22 @@ edge. `elevated` additionally separates itself with a shadow, not a colour jump.
 
 ## Accessibility contract (WCAG)
 
-- **No `accessibilityRole`.** `Card` is a plain grouping container with no interaction and no text
-  of its own — there is nothing here for assistive tech to announce beyond its children, so the
-  *correct* role (rule 8) is none, exactly like an unstyled `View`. Children carry their own
-  semantics.
+- **No `accessibilityRole` when not pressable.** Plain grouping container — children carry semantics.
+  When `onPress` is set, `accessibilityRole="button"`.
 - **1.4.11** — the only rendered non-text boundary (`outline`'s border) clears ≥ 3:1 against
   `bg.canvas`, measured for all 8 brands × both modes (`Card.test.ts`).
 - **1.4.3** — N/A. Card renders no text; contrast for whatever a consumer places in `children` is
   that content's own responsibility, same as `Button.test.ts` only measures what Button itself
   renders.
-- **2.3.3 (reduced motion)** — N/A. Card has no animation.
-- **Touch target (2.5.x)** — N/A. Card is not interactive; it has no press handler to reach 44dp.
+- **2.3.3 (reduced motion)** — press feedback respects `usePressState` / `useMotion` when interactive.
+- **Touch target (2.5.x)** — N/A unless `onPress` is set; the card's padded area is the target.
 
 ## Patterns copied from `button/` (the reference module)
 
 1. **Structure vs colour split.** Static/theme-numeric structure (padding, radius, border *width*)
    → `createThemedVariants` (registered once per theme). Colour → resolved from role tokens per
-   `variant`, applied inline. Elevation (a shadow, not a role colour) is applied directly from
-   `theme.elevation.md` — spread as-is, never re-derived.
+   `variant`, applied inline. Elevation (a shadow, not a role colour) comes from
+   `floatingSurfaceStyle(theme, "sm")` — spread as-is, never re-derived.
 2. **Pure, testable resolver** in `Card.variants.ts` (no React) so the WCAG contract is
    unit-tested by measuring real palettes — never eyeballed.
 3. **Closed union only** (`variant`), `style: LayoutStyle` last and once, no `{...rest}`, no
@@ -74,7 +79,7 @@ edge. `elevated` additionally separates itself with a shadow, not a colour jump.
 
 ## Known gaps
 
-None — no icon, no new theme token, no new core helper needed for this component.
+None.
 
 ## Performance