pixelize-native-library 1.2.0 → 1.2.1

package/lib/module/modules/accordion/Accordion.js

@@ -10,9 +10,12 @@
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Animated, Pressable, StyleSheet, Text, View } from "react-native";
+import Reanimated, { FadeInDown, ReduceMotion } from "react-native-reanimated";
 import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
 import { Icon } from "../../core/icon/index.js";
 import { useThemedStyles } from "../../core/style/index.js";
+import { stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { VirtualList } from "../../core/list/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { Badge } from "../badge/index.js";
@@ -22,6 +25,7 @@ const VIRTUALIZE_THRESHOLD = 20;
 const ICON_STROKE = 2;
 const FOCUS_RING_WIDTH = 2;
 const FOCUS_RING_GAP = 2;
+const AnimatedPressable = Reanimated.createAnimatedComponent(Pressable);
 const toArray = v => v === undefined ? [] : Array.isArray(v) ? v : [v];
 let reanimatedModule;
 function getReanimated() {
@@ -119,6 +123,7 @@ const AccordionRow = /*#__PURE__*/memo(function AccordionRow({
   testID
 }) {
   const spec = ACCORDION_SIZES[size];
+  const press = usePressState(rowDisabled);
   const [focused, setFocused] = useState(false);
   const a11y = useMemo(() => resolveAccordionHeaderAccessibility({
     expanded,
@@ -134,58 +139,18 @@ const AccordionRow = /*#__PURE__*/memo(function AccordionRow({
     size
   }), theme, [size]);
   const itemBody = item.renderContent?.() ?? item.content;
-  return /*#__PURE__*/_jsxs(View, {
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.sm
+  }), [theme.mode, theme.radii.sm]);
+  return /*#__PURE__*/_jsxs(Reanimated.View, {
+    entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
     style: [accordionItemStructure(theme), {
       borderBottomColor: colors.divider
     }],
-    children: [/*#__PURE__*/_jsxs(Pressable, {
-      testID: testID,
-      accessibilityRole: a11y.accessibilityRole,
-      "aria-expanded": a11y["aria-expanded"],
-      "aria-disabled": a11y["aria-disabled"],
-      accessibilityLabel: item.subtitle ? `${item.title}, ${item.subtitle}` : item.title,
-      disabled: a11y.disabled,
-      onPress: a11y.disabled ? undefined : handlePress,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      hitSlop: spec.hitSlop,
-      style: ({
-        pressed
-      }) => [headerPressedStyle, pressed && !rowDisabled && {
-        backgroundColor: colors.pressedHeaderBg
-      }, rowDisabled && styles.dimmed],
-      children: [item.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
-        name: item.icon,
-        size: spec.iconSize,
-        color: colors.icon,
-        strokeWidth: ICON_STROKE
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.headerText,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
-            fontSize: spec.fontSize,
-            color: colors.title
-          }],
-          children: item.title
-        }), item.subtitle !== undefined && /*#__PURE__*/_jsx(Text, {
-          numberOfLines: 1,
-          style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
-            fontSize: theme.fontSizes.sm,
-            color: colors.icon,
-            marginTop: theme.space[1]
-          }],
-          children: item.subtitle
-        })]
-      }), item.badge !== undefined && /*#__PURE__*/_jsx(Badge, {
-        label: item.badge,
-        size: "sm",
-        tone: "neutral"
-      }), /*#__PURE__*/_jsx(AccordionChevron, {
-        expanded: expanded,
-        disabled: rowDisabled,
-        size: size,
-        colors: colors
-      }), focused && /*#__PURE__*/_jsx(View, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.headerHost,
+      children: [focused && /*#__PURE__*/_jsx(View, {
         pointerEvents: "none",
         testID: testID ? `${testID}-focus-ring` : undefined,
         style: {
@@ -198,6 +163,58 @@ const AccordionRow = /*#__PURE__*/memo(function AccordionRow({
           borderColor: colors.focusRing,
           borderRadius: theme.radii.sm + FOCUS_RING_GAP + FOCUS_RING_WIDTH
         }
+      }), /*#__PURE__*/_jsxs(AnimatedPressable, {
+        testID: testID,
+        accessibilityRole: a11y.accessibilityRole,
+        "aria-expanded": a11y["aria-expanded"],
+        "aria-disabled": a11y["aria-disabled"],
+        accessibilityLabel: item.subtitle ? `${item.title}, ${item.subtitle}` : item.title,
+        disabled: a11y.disabled,
+        onPress: a11y.disabled ? undefined : handlePress,
+        onPressIn: press.handlers.onPressIn,
+        onPressOut: press.handlers.onPressOut,
+        onLayout: press.onLayout,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        hitSlop: spec.hitSlop,
+        style: [headerPressedStyle, {
+          overflow: "hidden"
+        }, press.animatedStyle, rowDisabled && styles.dimmed],
+        children: [/*#__PURE__*/_jsx(Reanimated.View, {
+          pointerEvents: "none",
+          style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+        }), item.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
+          name: item.icon,
+          size: spec.iconSize,
+          color: colors.icon,
+          strokeWidth: ICON_STROKE
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.headerText,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
+              fontSize: spec.fontSize,
+              color: colors.title
+            }],
+            children: item.title
+          }), item.subtitle !== undefined && /*#__PURE__*/_jsx(Text, {
+            numberOfLines: 1,
+            style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+              fontSize: theme.fontSizes.sm,
+              color: colors.icon,
+              marginTop: theme.space[1]
+            }],
+            children: item.subtitle
+          })]
+        }), item.badge !== undefined && /*#__PURE__*/_jsx(Badge, {
+          label: item.badge,
+          size: "sm",
+          tone: "neutral"
+        }), /*#__PURE__*/_jsx(AccordionChevron, {
+          expanded: expanded,
+          disabled: rowDisabled,
+          size: size,
+          colors: colors
+        })]
       })]
     }), itemBody !== null && itemBody !== undefined && /*#__PURE__*/_jsx(AccordionAnimatedContent, {
       expanded: expanded,
@@ -358,6 +375,9 @@ const styles = StyleSheet.create({
   },
   headerText: {
     flex: 1
+  },
+  headerHost: {
+    position: "relative"
   }
 });
 //# sourceMappingURL=Accordion.js.map

package/lib/module/modules/accordion/Accordion.variants.js

@@ -14,6 +14,7 @@
  *    rendering React Native.
  */
 
+import { StyleSheet } from "react-native";
 import { createThemedVariants } from "../../core/style/index.js";
 /** Same floor as Button/Tabs/Select — 44dp (WCAG 2.5.5 AAA / HIG). Duplicated, not imported: modules
  * stay isolated. */
@@ -77,12 +78,12 @@ export function resolveAccordionHeaderAccessibility(input) {
 }
 
 /**
- * One item's separator — a hairline on the bottom edge, theme-scaled border WIDTH. Colour
+ * One item's separator — a StyleSheet.hairlineWidth on the bottom edge, theme-scaled border WIDTH. Colour
  * (`divider`) is resolved separately and applied inline over this.
  */
-export const accordionItemStructure = createThemedVariants(theme => ({
+export const accordionItemStructure = createThemedVariants(_theme => ({
   base: {
-    borderBottomWidth: theme.borderWidths.thin
+    borderBottomWidth: StyleSheet.hairlineWidth
   }
 }));
 

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

@@ -67,7 +67,8 @@ Everything routes through **`useMotion()`** — no module-local timing constant,
 reveal and the chevron now pick up the device tier's `durationScale` and the global `MOTION_SCALE` /
 `MOTION_ENABLED` switches, which a module-scope read of `MOTION_DURATION.normal` never could. The
 slide distance is `MOTION_TRANSFORM.offsetY`; reduce-motion is `motion.enabled`, never a second
-`useReducedMotion()` call (`core/motion/MODULE.md` rule 6).
+`useReducedMotion()` call (`core/motion/MODULE.md` rule 6). Header presses use `usePressState`
+(scale + state-layer overlay).
 
 ## Why content is not height-animated
 

package/lib/module/modules/alert-dialog/AlertDialog.js

@@ -9,10 +9,11 @@
  */
 
 import { memo } from "react";
-import { Text, View } from "react-native";
+import { View } from "react-native";
 import { useTheme } from "../../theme/hooks.js";
 import { Button } from "../button/index.js";
 import { Modal } from "../modal/index.js";
+import { Text } from "../text/index.js";
 import { alertDialogActionsStructure, resolveAlertDialogConfirmTone } from "./AlertDialog.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const AlertDialog = /*#__PURE__*/memo(function AlertDialog({
@@ -36,11 +37,11 @@ export const AlertDialog = /*#__PURE__*/memo(function AlertDialog({
     title: title,
     testID: testID,
     children: [description !== undefined && /*#__PURE__*/_jsx(Text, {
-      style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
-        fontSize: theme.fontSizes.md,
-        color: theme.colors.fg.muted,
+      variant: "body",
+      color: "muted",
+      style: {
         marginBottom: theme.space[5]
-      }],
+      },
       children: description
     }), /*#__PURE__*/_jsxs(View, {
       style: alertDialogActionsStructure(theme),

package/lib/module/modules/alert-dialog/AlertDialog.variants.js

@@ -15,6 +15,7 @@
  */
 
 import { createThemedVariants } from "../../core/style/index.js";
+import { floatingSurfaceStyle } from "../../theme/platform/floatingSurface.native.js";
 /**
  * Maps AlertDialog's own closed `tone` union onto the confirm action's `ButtonTone`. `"default"`
  * resolves to Button's own default tone (`"accent"`) rather than inventing a fourth tone value;
@@ -41,4 +42,7 @@ export const alertDialogActionsStructure = createThemedVariants(theme => ({
     columnGap: theme.space[3]
   }
 }));
+export function alertDialogPanelDepth(theme) {
+  return floatingSurfaceStyle(theme, "lg");
+}
 //# sourceMappingURL=AlertDialog.variants.js.map

package/lib/module/modules/app-bar/AppBar.js

@@ -21,6 +21,7 @@ import { Animated, Text, View } from "react-native";
 import { HEADING_LEVEL, HeadingText } from "../../core/heading/index.js";
 import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
+import { floatingBackground, floatingSurfaceStyle } from "../../theme/platform/index.js";
 import { Button } from "../button/index.js";
 import { appBarActionsRowStructure, appBarSideStructure, appBarSideTrailingStructure, appBarStructure, appBarTitleBoxStructure, resolveAppBarColors } from "./AppBar.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -112,12 +113,13 @@ export const AppBar = /*#__PURE__*/memo(function AppBar({
   const titleBoxStyle = useMemo(() => [appBarTitleBoxStructure(theme), {
     opacity
   }], [theme, opacity]);
+  const barDepth = useMemo(() => ({
+    backgroundColor: floatingBackground(theme, "sm"),
+    ...floatingSurfaceStyle(theme, "sm")
+  }), [theme]);
   return /*#__PURE__*/_jsxs(View, {
     testID: testID,
-    style: [appBarStructure(theme), {
-      backgroundColor: colors.background,
-      borderBottomColor: colors.border
-    }, style],
+    style: [appBarStructure(theme), barDepth, style],
     children: [/*#__PURE__*/_jsx(View, {
       style: appBarSideStructure(theme),
       children: onBack !== undefined ? /*#__PURE__*/_jsx(Button, {

package/lib/module/modules/app-bar/AppBar.variants.js

@@ -39,8 +39,7 @@ export const appBarStructure = createThemedVariants(theme => ({
     alignItems: "center",
     paddingHorizontal: theme.space[2],
     paddingVertical: theme.space[2],
-    columnGap: theme.space[1],
-    borderBottomWidth: theme.borderWidths.thin
+    columnGap: theme.space[1]
   }
 }));
 export const appBarSideStructure = createThemedVariants(_theme => ({

package/lib/module/modules/avatar/Avatar.js

@@ -19,6 +19,7 @@
 import { memo, useMemo } from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { MediaImage } from "../../core/media/index.js";
+import { Icon } from "../../core/icon/index.js";
 import { useMotion } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { AVATAR_SIZES, avatarStructure, resolveAvatarAccessibility, resolveAvatarColors, resolveAvatarIdentityColors } from "./Avatar.variants.js";
@@ -71,7 +72,12 @@ export const Avatar = /*#__PURE__*/memo(function Avatar({
       numberOfLines: 1,
       style: initialsStyle,
       children: initials.slice(0, 2)
-    }) : null
+    }) : /*#__PURE__*/_jsx(Icon, {
+      name: "user",
+      size: Math.round(spec.box * 0.45),
+      color: colors.initialsText,
+      strokeWidth: 2
+    })
   });
 });
 //# sourceMappingURL=Avatar.js.map

package/lib/module/modules/avatar/Avatar.variants.js

@@ -153,7 +153,7 @@ export const avatarStructure = createThemedVariants(theme => ({
         borderRadius: theme.radii.full
       },
       rounded: {
-        borderRadius: theme.radii.base
+        borderRadius: theme.radii.lg
       },
       square: {
         borderRadius: theme.radii.none

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

@@ -20,7 +20,7 @@ which is exactly why its accessibility default is the one place it deliberately
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `size` | `xs \| sm \| md \| lg \| xl` | `md` | Diameters 24 / 32 / 40 / 56 / 72 dp. |
-| `shape` | `circle \| rounded` | `circle` | `rounded` (the brand `radii.base`) for an org/product; a person stays circular. |
+| `shape` | `circle \| rounded` | `circle` | `rounded` uses `radii.full` for an org/product; a person stays circular. |
 | `source` | `{ uri: string }` | — | A remote image. Wins over `initials` when present. |
 | `initials` | `string` | — | Shown when there is no `source`. Clipped to the first two characters. |
 | `identity` | `string` | — | Seeds a stable hashed fill for the initials/placeholder state. Absent → the neutral fill. |
@@ -72,7 +72,7 @@ fewer place to special-case the optional-peer fallback.
    contract is unit-tested by measuring real palettes — never eyeballed.
 3. **`radii.full` clips a circle for any diameter.** One token (a finite `9999`, not `Infinity` —
    RN rejects non-finite style values) covers every size instead of each variant computing its own
-   `box / 2`; `shape="rounded"` swaps it for `radii.base`.
+   `box / 2`; `shape="rounded"` swaps it for `radii.full`.
 4. **`style: LayoutStyle` last and once, no `{...rest}`** — internals never receive consumer style.
 
 ## Testing note — hidden elements and React Native Testing Library

package/lib/module/modules/avatar-group/AvatarGroup.js

@@ -5,15 +5,17 @@
  * `avatars.length` exceeds `max`. Each face is this library's own `Avatar` module — never a hand-rolled
  * image/initials pair — so list recycling, identity hashing, and shape defaults stay consistent.
  *
- * No `accessibilityRole` of its own: each composed `Avatar` carries its own optional label; the
- * overflow pill is hidden from assistive tech as decorative chrome (the visible faces carry identity).
+ * No `accessibilityRole` of its own. Each composed `Avatar` gets a label — the consumer's, or (since
+ * a grouped face has no adjacent visible name to lean on, unlike a standalone `Avatar`) a generic
+ * `resolveAvatarGroupFaceFallbackLabel` fallback. The overflow pill carries its own `"text"`-role
+ * label so a screen reader hears how many faces are hidden, not just the ones on screen.
  */
 
 import { memo, useMemo } from "react";
 import { Text, View } from "react-native";
 import { useTheme } from "../../theme/hooks.js";
 import { Avatar } from "../avatar/index.js";
-import { AVATAR_GROUP_DEFAULT_MAX, avatarGroupItemStructure, avatarGroupOverflowLabelStructure, avatarGroupOverflowStructure, avatarGroupStructure, resolveAvatarGroupColors, resolveAvatarGroupOverflowCount, resolveAvatarGroupOverlap, resolveAvatarGroupVisibleCount } from "./AvatarGroup.variants.js";
+import { AVATAR_GROUP_DEFAULT_MAX, avatarGroupItemStructure, avatarGroupOverflowLabelStructure, avatarGroupOverflowStructure, avatarGroupStructure, resolveAvatarGroupColors, resolveAvatarGroupFaceFallbackLabel, resolveAvatarGroupOverflowAccessibility, resolveAvatarGroupOverflowCount, resolveAvatarGroupOverlap, resolveAvatarGroupVisibleCount } from "./AvatarGroup.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const AvatarGroup = /*#__PURE__*/memo(function AvatarGroup({
   avatars,
@@ -27,6 +29,7 @@ export const AvatarGroup = /*#__PURE__*/memo(function AvatarGroup({
   const overlap = resolveAvatarGroupOverlap(size);
   const visibleCount = resolveAvatarGroupVisibleCount(avatars.length, max);
   const overflowCount = resolveAvatarGroupOverflowCount(avatars.length, visibleCount);
+  const overflowAccessibility = resolveAvatarGroupOverflowAccessibility(overflowCount);
   const visibleAvatars = useMemo(() => avatars.slice(0, visibleCount), [avatars, visibleCount]);
   const rootStyle = useMemo(() => [avatarGroupStructure(theme), style], [theme, style]);
   const faces = useMemo(() => visibleAvatars.map((item, index) => /*#__PURE__*/_jsx(View, {
@@ -40,7 +43,7 @@ export const AvatarGroup = /*#__PURE__*/memo(function AvatarGroup({
       source: item.source,
       initials: item.initials,
       identity: item.identity,
-      accessibilityLabel: item.accessibilityLabel,
+      accessibilityLabel: item.accessibilityLabel ?? resolveAvatarGroupFaceFallbackLabel(index),
       testID: testID === undefined ? undefined : `${testID}-avatar-${index}`
     })
   }, `${item.source?.uri ?? item.initials ?? item.identity ?? "avatar"}-${index}`)), [visibleAvatars, theme, colors, overlap, size, testID]);
@@ -64,8 +67,9 @@ export const AvatarGroup = /*#__PURE__*/memo(function AvatarGroup({
     style: rootStyle,
     children: [faces, overflowCount > 0 ? /*#__PURE__*/_jsx(View, {
       testID: testID === undefined ? undefined : `${testID}-overflow`,
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no-hide-descendants",
+      accessible: overflowAccessibility.accessible,
+      accessibilityRole: overflowAccessibility.accessibilityRole,
+      accessibilityLabel: overflowAccessibility.accessibilityLabel,
       style: overflowStyle,
       children: /*#__PURE__*/_jsx(Text, {
         style: overflowLabelStyle,

package/lib/module/modules/avatar-group/AvatarGroup.variants.js

@@ -37,6 +37,29 @@ export function resolveAvatarGroupVisibleCount(total, max) {
 export function resolveAvatarGroupOverflowCount(total, visible) {
   return Math.max(0, total - visible);
 }
+/**
+ * WCAG 2.5.3: the accessible name must CONTAIN the visible "+N" text (same contract as
+ * `MoreItems`'s trigger), so a voice-control user saying what they read still lands on this pill.
+ * `"text"`, not `"button"` — the pill is informational chrome, not interactive (same as `Badge`).
+ */
+export function resolveAvatarGroupOverflowAccessibility(count) {
+  return {
+    accessible: true,
+    accessibilityRole: "text",
+    accessibilityLabel: `+${count} more`
+  };
+}
+
+/**
+ * A face's honest-but-generic name when its consumer never set `accessibilityLabel`. Unlike a
+ * standalone `Avatar` (usually sits beside a visible name, so undecorated is a fair default —
+ * see `resolveAvatarAccessibility`), a grouped face has no adjacent name: falling through to
+ * `Avatar`'s decorative default would leave a screen reader user unable to tell how many distinct
+ * people the stack represents.
+ */
+export function resolveAvatarGroupFaceFallbackLabel(index) {
+  return `Avatar ${index + 1}`;
+}
 export const avatarGroupStructure = createThemedVariants(_theme => ({
   base: {
     flexDirection: "row",

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

@@ -23,6 +23,22 @@ overflow pill when `avatars.length` exceeds `max`.
 | `style` | `LayoutStyle` | — | Layout-only, outermost, last. |
 | `testID` | `string` | — | Forwarded to the outermost `View`; faces get `${testID}-avatar-{i}`. |
 
+## Accessibility
+
+- **Overflow pill** carries `accessible` + `accessibilityRole="text"` + an accessibility label
+  (`"+N more"`, containing the visible `"+N"` per WCAG 2.5.3, same contract as `MoreItems`) instead
+  of being hidden from assistive tech — a screen reader user now hears how many faces are hidden.
+- **Per-face labels** fall back to `resolveAvatarGroupFaceFallbackLabel` (`"Avatar {n}"`) when a
+  consumer doesn't set `AvatarGroupItem.accessibilityLabel` — a grouped face has no adjacent visible
+  name to lean on, unlike a standalone `Avatar`, so leaving it unlabeled would leave it silent.
+
+## Borders (Wave 5 tonal restyle)
+
+The `AVATAR_GROUP_RING_WIDTH` ring (`avatarGroupItemStructure`) is deliberately KEPT, unlike other
+modules' container hairlines: it is drawn in `colors.ring` (`bg.canvas`, not a visible stroke
+colour) purely to cut a gap between overlapping circular faces — a divider BETWEEN adjacent avatars,
+not decorative container chrome. Removing it would let overlapping faces visually merge.
+
 ## Performance
 
 Wrapped in `React.memo`. Visible slice is `useMemo`'d on `avatars` and `max`.

package/lib/module/modules/badge/Badge.js

@@ -9,6 +9,7 @@
 import { memo } from "react";
 import { Text, View } from "react-native";
 import { Icon } from "../../core/icon/index.js";
+import { AccentGradientFill } from "../../core/gradient/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { BADGE_SIZES, badgeStructure, resolveBadgeAccessibility, resolveBadgeTone } from "./Badge.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -28,6 +29,7 @@ export const Badge = /*#__PURE__*/memo(function Badge({
   const a11y = resolveBadgeAccessibility({
     label
   });
+  const useGradient = tone === "accent";
   return /*#__PURE__*/_jsxs(View, {
     testID: testID,
     accessible: a11y.accessible,
@@ -36,19 +38,23 @@ export const Badge = /*#__PURE__*/memo(function Badge({
     style: [badgeStructure(theme, {
       size
     }), {
-      backgroundColor: toneColors.fill,
-      borderColor: toneColors.border
+      borderColor: toneColors.border,
+      overflow: "hidden"
+    }, !useGradient && {
+      backgroundColor: toneColors.fill
     }, style],
-    children: [icon && /*#__PURE__*/_jsx(Icon, {
+    children: [useGradient && /*#__PURE__*/_jsx(AccentGradientFill, {
+      color: theme.colors.accent.solid
+    }), icon && /*#__PURE__*/_jsx(Icon, {
       name: icon,
       size: spec.iconSize,
-      color: toneColors.text,
+      color: useGradient ? theme.colors.accent.onSolid : toneColors.text,
       strokeWidth: ICON_STROKE
     }), /*#__PURE__*/_jsx(Text, {
       numberOfLines: 1,
       style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
         fontSize: spec.fontSize,
-        color: toneColors.text
+        color: useGradient ? theme.colors.accent.onSolid : toneColors.text
       }],
       children: label
     })]

package/lib/module/modules/badge/Badge.variants.js

@@ -112,7 +112,8 @@ export const badgeStructure = createThemedVariants(theme => ({
     alignItems: "center",
     justifyContent: "center",
     columnGap: theme.space[1],
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     borderWidth: theme.borderWidths.thin
   },
   variants: {

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

@@ -18,7 +18,8 @@ or disabled state.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| `tone` | `accent \| neutral \| success \| warning \| danger \| info` | `accent` | Closed union — see below. |
+| `tone` | `accent \| neutral \| success \| warning \| danger \| info \| custom` | `accent` | Closed union — see below. |
+| `customColors` | `{ bg, fg }` | — | Required when `tone="custom"`. Server-driven hex escape hatch. |
 | `size` | `sm \| md` | `md` | 20 / 24 dp. No touch-target floor — not interactive. |
 | `label` | `string` | — | Always required; a Badge is never icon-only. |
 | `icon` | `IconName` | — | A NAME, never a `ReactNode`. Optional, leading only. |
@@ -40,10 +41,9 @@ or disabled state.
 ## Why `tone` is a union, not a `color`
 
 Same reasoning as Button/Input: every colour a Badge can show is a role lookup
-(`resolveBadgeTone`), guaranteed legible in both modes, never an app-invented hex. `accent`/
-`neutral` mirror Button's tone shapes at "subtle" emphasis only (a badge never uses a solid fill —
-it's a passive label, not a call-to-action). The four status tones map onto
-`colors.status.<role>`.
+(`resolveBadgeTone`), guaranteed legible in both modes, never an app-invented hex — except
+`tone="custom"`, which requires `customColors={{ bg, fg }}` and maps fill/text/border from those
+values (the same escape hatch `Chip` and `SelectOption` share for workflow-driven colours).
 
 ## A real gap this module found: `StatusColors.border` is not a badge border