@multiplatform.one/components 6.6.0 → 7.0.0

package/dist/esm/Avatar/index.native.js

@@ -1,33 +1,60 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { radiusClassProps, useReadableTextOn, useResolvedKnobs } from "@multiplatform.one/theme";
-import { Avatar as TamaguiAvatar, SizableText, withStaticProperties } from "tamagui";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Children, createContext, isValidElement, useContext } from "react";
+import { UserIcon } from "@phosphor-icons/react";
+import { MIN_PRESS_TARGET, ensureFocusVisibleRing, getGroupPosition, pressTargetHitSlop, radiusClassProps, stackRadiusProps, useReadableTextOn, useResolvedKnobs } from "@multiplatform.one/theme";
+import { Avatar as TamaguiAvatar, SizableText, View, XStack, getVariableValue, withStaticProperties } from "tamagui";
+import { getSize } from "@tamagui/get-token";
 import { componentColors } from "../componentColors.native.js";
-import { getInitials } from "./getInitials.native.js";
-import { getInitials as getInitials2 } from "./getInitials.native.js";
-var avatarSizeMap = {
-  $3: "$2",
-  $4: "$3",
-  $5: "$4"
-};
+import { fallbackTone, getInitials } from "./getInitials.native.js";
+import { fallbackTone as fallbackTone2, fallbackToneIndex, FALLBACK_TONES, getInitials as getInitials2 } from "./getInitials.native.js";
+var GroupCtx = /* @__PURE__ */createContext(null);
 var identityShapeProps = radiusClassProps("R-IDENTITY", "Avatar");
-function initialsFontSize(size) {
-  if (typeof size === "number") {
-    if (size <= 24) return "$1";
-    if (size <= 40) return "$2";
-    return "$3";
-  }
-  switch (size) {
-    case "$0.5":
-    case "$1":
-    case "$1.5":
-      return "$1";
-    case "$2":
-    case "$2.5":
-    case "$3":
-      return "$2";
-    default:
-      return "$3";
-  }
+var pipShapeProps = radiusClassProps("R-PILL", "Avatar status");
+var AVATAR_MIN_PX = 16;
+var AVATAR_KNOB_TOKEN = {
+  small: "$2",
+  medium: "$3",
+  large: "$4"
+};
+function avatarTokenPx(token) {
+  var resolved = getVariableValue(getSize(token));
+  return typeof resolved === "number" && Number.isFinite(resolved) ? Math.max(AVATAR_MIN_PX, resolved) : void 0;
+}
+var STATUS_COLOR = {
+  online: "$green10",
+  busy: "$red10",
+  away: "$yellow10",
+  offline: "$color8"
+};
+var CUTOUT_BORDER = 2;
+function sizeToPx(size) {
+  if (typeof size === "number") return size;
+  return avatarTokenPx(String(size));
+}
+function resolveVisualPx(sizeProp, nested, sizeKnob, nestedPx) {
+  var _avatarTokenPx, _sizeToPx, _ref;
+  var mediumPx = (_avatarTokenPx = avatarTokenPx(AVATAR_KNOB_TOKEN.medium)) !== null && _avatarTokenPx !== void 0 ? _avatarTokenPx : 36;
+  if (sizeProp != null) return (_sizeToPx = sizeToPx(sizeProp)) !== null && _sizeToPx !== void 0 ? _sizeToPx : mediumPx;
+  if (nested) return nestedPx;
+  var knobToken = AVATAR_KNOB_TOKEN[sizeKnob];
+  return (_ref = knobToken ? avatarTokenPx(knobToken) : void 0) !== null && _ref !== void 0 ? _ref : mediumPx;
+}
+function opticalFont(px) {
+  if (px <= 20) return "$1";
+  if (px <= 32) return "$2";
+  return "$3";
+}
+function activateOnEnterSpace(onPress) {
+  if (!onPress) return void 0;
+  return {
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === "Enter" || e.key === " ") {
+        var _e_preventDefault;
+        (_e_preventDefault = e.preventDefault) === null || _e_preventDefault === void 0 ? void 0 : _e_preventDefault.call(e);
+        onPress();
+      }
+    }
+  };
 }
 function AvatarRoot(param) {
   var {
@@ -35,70 +62,224 @@ function AvatarRoot(param) {
     name,
     alt,
     initials,
-    fallbackBackgroundColor = "$accentBackground",
+    fallbackBackgroundColor,
     fallbackColor,
     fallback,
     size: sizeProp,
-    circular = true,
+    circular: circularProp,
+    nested: nestedProp = false,
+    compact,
+    status,
     children,
     backgroundColor,
+    onPress,
+    focusStyle,
+    focusVisibleStyle,
+    hitSlop: hitSlopProp,
     ...props
   } = param;
-  var _ref, _ref1;
+  var _ref, _ref1, _ref2, _ref3;
+  var group = useContext(GroupCtx);
+  var circular = group ? group.circular : circularProp !== null && circularProp !== void 0 ? circularProp : true;
+  var nested = nestedProp || Boolean(group === null || group === void 0 ? void 0 : group.nested);
+  var densityCompact = compact !== null && compact !== void 0 ? compact : group === null || group === void 0 ? void 0 : group.compact;
+  var resolvedSizeProp = sizeProp !== null && sizeProp !== void 0 ? sizeProp : group === null || group === void 0 ? void 0 : group.size;
   var {
     knobProps
-  } = useResolvedKnobs();
+  } = useResolvedKnobs({
+    compact: densityCompact
+  });
+  var visualPx = resolveVisualPx(resolvedSizeProp, nested, knobProps.size, knobProps.nestedControl.px);
+  var interactive = typeof onPress === "function";
+  var pressSlop = interactive && visualPx < MIN_PRESS_TARGET ? pressTargetHitSlop(visualPx) : void 0;
   var onAccentInitials = useReadableTextOn("$accentBackground");
-  var size = (_ref = sizeProp !== null && sizeProp !== void 0 ? sizeProp : avatarSizeMap[knobProps.sizeToken]) !== null && _ref !== void 0 ? _ref : "$3";
+  var tone = fallbackBackgroundColor || backgroundColor ? void 0 : fallbackTone(name);
+  var fallbackBg = (_ref = (_ref1 = backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : fallbackBackgroundColor) !== null && _ref1 !== void 0 ? _ref1 : tone === null || tone === void 0 ? void 0 : tone.bg) !== null && _ref !== void 0 ? _ref : "$color4";
+  var onAccent = fallbackBg === "$accentBackground";
+  var fallbackFg = fallbackColor !== null && fallbackColor !== void 0 ? fallbackColor : onAccent ? onAccentInitials !== null && onAccentInitials !== void 0 ? onAccentInitials : "$color" : (_ref2 = tone === null || tone === void 0 ? void 0 : tone.fg) !== null && _ref2 !== void 0 ? _ref2 : componentColors.text.primary;
   var identityProps = circular ? identityShapeProps : null;
-  if (children != null) {
-    return /* @__PURE__ */_jsx(TamaguiAvatar, {
-      circular,
-      size,
-      backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : fallbackBackgroundColor,
-      ...identityProps,
-      ...props,
-      children
-    });
-  }
-  var label = (_ref1 = alt !== null && alt !== void 0 ? alt : name) !== null && _ref1 !== void 0 ? _ref1 : "Avatar";
+  var position = group ? getGroupPosition(group.index, group.count) : void 0;
+  var squareFlush = Boolean(group && !group.overlap && !circular && position);
+  var stackCorners = squareFlush ? stackRadiusProps(position, knobProps.borderRadius.borderRadius, "horizontal") : void 0;
+  var cutout = Boolean(group === null || group === void 0 ? void 0 : group.overlap);
+  var labeled = Boolean(alt || name);
+  var decorative = !labeled && !interactive;
+  var label = (_ref3 = alt !== null && alt !== void 0 ? alt : name) !== null && _ref3 !== void 0 ? _ref3 : interactive ? "Avatar" : void 0;
   var initialsText = initials !== null && initials !== void 0 ? initials : name ? getInitials(name) : "?";
-  var onAccent = fallbackBackgroundColor === "$accentBackground";
-  return /* @__PURE__ */_jsxs(TamaguiAvatar, {
-    circular,
-    size,
-    backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : fallbackBackgroundColor,
-    "aria-label": label,
+  var pipPx = Math.max(8, Math.round(visualPx * 0.28));
+  var frame = /* @__PURE__ */_jsx(TamaguiAvatar, {
+    circular: circular && !stackCorners,
+    size: visualPx,
+    width: visualPx,
+    height: visualPx,
+    minWidth: visualPx,
+    minHeight: visualPx,
+    maxWidth: visualPx,
+    maxHeight: visualPx,
+    backgroundColor: fallbackBg,
+    overflow: "hidden",
+    flexShrink: 0,
+    outlineWidth: 0,
+    onPress,
+    ...(!circular && !stackCorners ? knobProps.borderRadius : void 0),
+    ...stackCorners,
+    ...(cutout ? {
+      borderWidth: CUTOUT_BORDER,
+      borderColor: "$background"
+    } : squareFlush && position !== "first" && position !== "only" ? {
+      borderStartWidth: 1,
+      borderColor: knobProps.borderRadius.borderColor
+    } : void 0),
     ...identityProps,
     ...props,
-    children: [src ? /* @__PURE__ */_jsx(TamaguiAvatar.Image, {
-      src,
-      alt: label
-    }) : null, /* @__PURE__ */_jsx(TamaguiAvatar.Fallback, {
-      backgroundColor: fallbackBackgroundColor,
-      alignItems: "center",
-      justifyContent: "center",
-      // Omit delayMs so Fallback mounts immediately (tamagui treats
-      // delayMs=0 as "wait for timeout" and starts canRender=false).
-      ...(src ? {
-        delayMs: 600
-      } : {}),
-      children: fallback !== null && fallback !== void 0 ? fallback : /* @__PURE__ */_jsx(SizableText, {
-        fontSize: initialsFontSize(size),
-        // Luminance-computed on-fill foreground (Axiom 15): the paper/ink
-        // anchor that reads best on the resolved accent tint, not the
-        // accent theme's fixed near-white.
-        color: fallbackColor !== null && fallbackColor !== void 0 ? fallbackColor : onAccent ? onAccentInitials !== null && onAccentInitials !== void 0 ? onAccentInitials : "$color" : componentColors.text.primary,
-        fontWeight: "600",
-        textAlign: "center",
-        children: initialsText
-      })
+    "aria-hidden": decorative || void 0,
+    "aria-label": decorative ? void 0 : label,
+    role: interactive ? "button" : props.role,
+    tabIndex: interactive ? 0 : void 0,
+    cursor: interactive ? "pointer" : void 0,
+    ...activateOnEnterSpace(onPress),
+    "data-avatar-px": visualPx,
+    "data-avatar-nested": nested ? "true" : void 0,
+    "data-avatar-interactive": interactive ? "true" : void 0,
+    "data-avatar-hitslop": pressSlop ? String(pressSlop.top) : void 0,
+    focusStyle: {
+      outlineWidth: 0,
+      ...focusStyle
+    },
+    focusVisibleStyle: interactive ? ensureFocusVisibleRing({
+      outlineOffset: -2,
+      ...focusVisibleStyle
+    }) : focusVisibleStyle,
+    hitSlop: pressSlop !== null && pressSlop !== void 0 ? pressSlop : hitSlopProp,
+    children: children != null ? children : /* @__PURE__ */_jsxs(_Fragment, {
+      children: [src ? /* @__PURE__ */_jsx(TamaguiAvatar.Image, {
+        src,
+        alt: label !== null && label !== void 0 ? label : ""
+      }) : null, /* @__PURE__ */_jsx(TamaguiAvatar.Fallback, {
+        backgroundColor: fallbackBg,
+        alignItems: "center",
+        justifyContent: "center",
+        ...(src ? {
+          delayMs: 600
+        } : {}),
+        children: fallback !== null && fallback !== void 0 ? fallback : initialsText === "?" ? /* @__PURE__ */_jsx(View, {
+          ...{
+            color: fallbackFg
+          },
+          children: /* @__PURE__ */_jsx(UserIcon, {
+            size: Math.round(visualPx * 0.42),
+            color: "currentColor"
+          })
+        }) : /* @__PURE__ */_jsx(SizableText, {
+          ...knobProps.label,
+          fontSize: opticalFont(visualPx),
+          fontWeight: "600",
+          color: fallbackFg,
+          textAlign: "center",
+          userSelect: "none",
+          children: initialsText
+        })
+      })]
+    })
+  });
+  if (!status) return frame;
+  return /* @__PURE__ */_jsxs(View, {
+    position: "relative",
+    width: visualPx,
+    height: visualPx,
+    flexShrink: 0,
+    children: [frame, /* @__PURE__ */_jsx(View, {
+      ...pipShapeProps,
+      position: "absolute",
+      bottom: -1,
+      right: -1,
+      width: pipPx,
+      height: pipPx,
+      borderRadius: 1e3,
+      backgroundColor: STATUS_COLOR[status],
+      borderWidth: 2,
+      borderColor: "$background",
+      pointerEvents: "none"
     })]
   });
 }
+function AvatarGroup(param) {
+  var {
+    children,
+    max = 4,
+    size,
+    circular = true,
+    nested = false,
+    compact,
+    overlap = true
+  } = param;
+  var {
+    knobProps
+  } = useResolvedKnobs({
+    compact
+  });
+  var visualPx = resolveVisualPx(size, nested, knobProps.size, knobProps.nestedControl.px);
+  var overlapPx = overlap ? Math.round(visualPx * 0.32) : 0;
+  var items = Children.toArray(children).filter(isValidElement);
+  var shown = items.slice(0, Math.max(1, max));
+  var extra = items.length - shown.length;
+  var total = shown.length + (extra > 0 ? 1 : 0);
+  var overflowLabel = extra > 9 ? "9+" : `+${extra}`;
+  return /* @__PURE__ */_jsxs(XStack, {
+    alignItems: "center",
+    flexShrink: 0,
+    gap: 0,
+    "data-avatar-group": "",
+    "data-avatar-overlap": overlap ? "true" : "false",
+    children: [shown.map(function (child, index) {
+      return /* @__PURE__ */_jsx(GroupCtx.Provider, {
+        value: {
+          size,
+          circular,
+          nested,
+          compact,
+          overlap,
+          index,
+          count: total
+        },
+        children: /* @__PURE__ */_jsx(View, {
+          zIndex: index,
+          marginStart: index > 0 ? -overlapPx : 0,
+          flexShrink: 0,
+          children: child
+        })
+      }, index);
+    }), extra > 0 ? /* @__PURE__ */_jsx(GroupCtx.Provider, {
+      value: {
+        size,
+        circular,
+        nested,
+        compact,
+        overlap,
+        index: shown.length,
+        count: total
+      },
+      children: /* @__PURE__ */_jsx(View, {
+        zIndex: shown.length,
+        marginStart: -overlapPx,
+        flexShrink: 0,
+        children: /* @__PURE__ */_jsx(AvatarRoot, {
+          initials: overflowLabel,
+          fallbackBackgroundColor: "$color4",
+          fallbackColor: "$color12",
+          circular,
+          nested,
+          compact,
+          size
+        })
+      })
+    }) : null]
+  });
+}
 var Avatar = withStaticProperties(AvatarRoot, {
   Image: TamaguiAvatar.Image,
-  Fallback: TamaguiAvatar.Fallback
+  Fallback: TamaguiAvatar.Fallback,
+  Group: AvatarGroup
 });
-export { Avatar, getInitials2 as getInitials };
+export { Avatar, FALLBACK_TONES, fallbackTone2 as fallbackTone, fallbackToneIndex, getInitials2 as getInitials };
 //# sourceMappingURL=index.native.js.map

package/dist/esm/Avatar/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","radiusClassProps","useReadableTextOn","useResolvedKnobs","Avatar","TamaguiAvatar","SizableText","withStaticProperties","componentColors","getInitials","getInitials2","avatarSizeMap","$3","$4","$5","identityShapeProps","initialsFontSize","size","AvatarRoot","param","src","name","alt","initials","fallbackBackgroundColor","fallbackColor","fallback","sizeProp","circular","children","backgroundColor","props","_ref","_ref1","knobProps","onAccentInitials","sizeToken","identityProps","label","initialsText","onAccent","Image","Fallback","alignItems","justifyContent","delayMs","fontSize","color","text","primary","fontWeight","textAlign"],"sources":["../../../src/Avatar/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Children","createContext","isValidElement","useContext","UserIcon","MIN_PRESS_TARGET","ensureFocusVisibleRing","getGroupPosition","pressTargetHitSlop","radiusClassProps","stackRadiusProps","useReadableTextOn","useResolvedKnobs","Avatar","TamaguiAvatar","SizableText","View","XStack","getVariableValue","withStaticProperties","getSize","componentColors","fallbackTone","getInitials","fallbackTone2","fallbackToneIndex","FALLBACK_TONES","getInitials2","GroupCtx","identityShapeProps","pipShapeProps","AVATAR_MIN_PX","AVATAR_KNOB_TOKEN","small","medium","large","avatarTokenPx","token","resolved","Number","isFinite","Math","max","STATUS_COLOR","online","busy","away","offline","CUTOUT_BORDER","sizeToPx","size","String","resolveVisualPx","sizeProp","nested","sizeKnob","nestedPx","_avatarTokenPx","_sizeToPx","_ref","mediumPx","knobToken","opticalFont","px","activateOnEnterSpace","onPress","onKeyDown","e","key","_e_preventDefault","preventDefault","call","AvatarRoot","param","src","name","alt","initials","fallbackBackgroundColor","fallbackColor","fallback","circular","circularProp","nestedProp","compact","status","children","backgroundColor","focusStyle","focusVisibleStyle","hitSlop","hitSlopProp","props","_ref1","_ref2","_ref3","group","Boolean","densityCompact","resolvedSizeProp","knobProps","visualPx","nestedControl","interactive","pressSlop","onAccentInitials","tone","fallbackBg","bg","onAccent","fallbackFg","fg","text","primary","identityProps","position","index","count","squareFlush","overlap","stackCorners","borderRadius","cutout","labeled","decorative","label","initialsText","pipPx","round","frame","width","height","minWidth","minHeight","maxWidth","maxHeight","overflow","flexShrink","outlineWidth","borderWidth","borderColor","borderStartWidth","role","tabIndex","cursor","top","outlineOffset","Image","Fallback","alignItems","justifyContent","delayMs","color","fontSize","fontWeight","textAlign","userSelect","bottom","right","pointerEvents","AvatarGroup","overlapPx","items","toArray","filter","shown","slice","extra","length","total","overflowLabel","gap","map","child","Provider","value","zIndex","marginStart","Group"],"sources":["../../../src/Avatar/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/Badge/index.mjs

@@ -1,7 +1,10 @@
+import { useTranslation } from "react-i18next";
 import { radiusClassProps, useResolvedKnobs } from "@multiplatform.one/theme";
-import { Text, View, styled } from "tamagui";
+import { Text, View, isWeb, styled } from "tamagui";
 import { componentColors } from "../componentColors.mjs";
+import { useDirection } from "../hooks/useDirection.mjs";
 import { useAsyncBoundary } from "../layouts/AsyncBoundary.mjs";
+import { bidiIsolate } from "../shared/t.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 const colorMap = {
   red: {
@@ -28,74 +31,78 @@ const colorMap = {
 const badgeGeometryMap = {
   $3: {
     capsule: 16,
-    font: 10,
+    font: "$1",
+    pad: 4,
     dot: 6
   },
   $4: {
     capsule: 18,
-    font: 11,
+    font: "$1",
+    pad: 5,
     dot: 8
   },
   $5: {
     capsule: 22,
-    font: 13,
+    font: "$2",
+    pad: 6,
     dot: 10
   }
 };
-const positionMap = {
-  "top-right": {
-    top: 0,
-    right: 0
-  },
-  "top-left": {
-    top: 0,
-    left: 0
-  },
-  "bottom-right": {
-    bottom: 0,
-    right: 0
-  },
-  "bottom-left": {
-    bottom: 0,
-    left: 0
-  }
-};
+const CONTRAST_RING = 2;
 const BadgeWrapper = styled(View, {
   name: "BadgeWrapper",
   position: "relative",
-  display: "inline-flex"
+  display: "inline-flex",
+  alignSelf: "flex-start",
+  overflow: "visible"
 });
 const BadgeIndicator = styled(View, {
   name: "BadgeIndicator",
-  // R-PILL (D-09 / LC-60): the count/dot indicator is a pill at every radius
-  // value; the knob moves its size and padding, never its shape.
+  // R-PILL (D-09 / LC-60): the count/dot is a pill at every radius value;
+  // the knob moves its size and padding, never its shape.
   ...radiusClassProps("R-PILL", "Badge count/dot"),
-  position: "absolute",
   alignItems: "center",
   justifyContent: "center",
   borderRadius: 1e3,
-  minWidth: 18,
-  height: 18,
-  paddingHorizontal: "$1",
+  borderWidth: CONTRAST_RING,
+  borderColor: "$color1",
+  borderStyle: "solid",
   zIndex: 1,
-  variants: {
-    dot: {
-      true: {
-        minWidth: 8,
-        width: 8,
-        height: 8,
-        paddingHorizontal: 0
-      }
-    }
-  }
+  // Orbit/Primer: badges are not actionable — clicks hit the host.
+  pointerEvents: "none"
 });
 const BadgeText = styled(Text, {
   name: "BadgeText",
-  fontSize: 11,
   fontWeight: "600",
-  lineHeight: 18,
-  textAlign: "center"
+  textAlign: "center",
+  pointerEvents: "none"
 });
+function normalizeCount(count) {
+  if (count === void 0 || !Number.isFinite(count)) return void 0;
+  return Math.max(0, Math.floor(count));
+}
+function normalizeMax(max) {
+  if (!Number.isFinite(max) || max < 0) return 99;
+  return Math.floor(max);
+}
+function indicatorPlacement(position, isRTL, overlap, offset) {
+  const atEnd = position.includes("right");
+  const atTop = position.includes("top");
+  const [ox, oy] = offset;
+  const inlineProp = atEnd === !isRTL ? "right" : "left";
+  const dirX = inlineProp === "right" ? 1 : -1;
+  const dirY = atTop ? -1 : 1;
+  return {
+    position: "absolute",
+    [atTop ? "top" : "bottom"]: 0,
+    [inlineProp]: 0,
+    transform: [{
+      translateX: dirX * (overlap + ox)
+    }, {
+      translateY: dirY * (overlap + oy)
+    }]
+  };
+}
 function Badge({
   children,
   count,
@@ -105,49 +112,76 @@ function Badge({
   color = "red",
   position = "top-right",
   offset = [0, 0],
-  visible = true
+  visible = true,
+  compact,
+  accessibilityLabel
 }) {
+  const {
+    t
+  } = useTranslation();
+  const isRTL = useDirection() === "rtl";
   const {
     knobProps
-  } = useResolvedKnobs();
+  } = useResolvedKnobs({
+    component: "Badge",
+    compact
+  });
   const colors = colorMap[color];
   const geometry = badgeGeometryMap[knobProps.sizeToken] ?? badgeGeometryMap.$4;
-  const posStyles = positionMap[position];
   const asyncCtx = useAsyncBoundary();
   const effectiveVisible = visible && !asyncCtx?.hideBadges;
-  const effectiveCount = asyncCtx?.hideBadges ? void 0 : count;
+  const effectiveCount = asyncCtx?.hideBadges ? void 0 : normalizeCount(count);
+  const cap = normalizeMax(max);
+  const standalone = children == null;
   const shouldShow = effectiveVisible && (dot || effectiveCount !== void 0 && (effectiveCount > 0 || showZero));
-  const displayValue = effectiveCount !== void 0 && effectiveCount > max ? `${max}+` : effectiveCount;
-  const [offsetX, offsetY] = offset;
+  const overflowed = effectiveCount !== void 0 && effectiveCount > cap;
+  const displayValue = overflowed ? `${cap}+` : effectiveCount;
+  const painted = dot ? geometry.dot : geometry.capsule;
+  const overlap = standalone ? 0 : painted / 2;
+  const a11yLabel = accessibilityLabel ?? (dot ? t("New activity") : overflowed && effectiveCount !== void 0 ? String(effectiveCount) : void 0);
+  if (!shouldShow) {
+    return standalone ? null : /* @__PURE__ */jsx(BadgeWrapper, {
+      children
+    });
+  }
+  const indicator = /* @__PURE__ */jsx(BadgeIndicator, {
+    backgroundColor: colors.bg,
+    minWidth: painted,
+    height: painted,
+    ...(dot ? {
+      width: painted,
+      paddingHorizontal: 0
+    } : {
+      paddingHorizontal: geometry.pad
+    }),
+    ...(standalone ? void 0 : indicatorPlacement(position, isRTL, overlap, offset)),
+    role: "status",
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    "aria-label": a11yLabel,
+    ...(isWeb && overflowed && effectiveCount !== void 0 ? {
+      title: String(effectiveCount)
+    } : void 0),
+    ...{
+      "data-badge": dot ? "dot" : "count",
+      ...(overflowed ? {
+        "data-overflow": "true"
+      } : {})
+    },
+    children: !dot && effectiveCount !== void 0 && /* @__PURE__ */jsx(BadgeText, {
+      ...knobProps.body,
+      fontWeight: "600",
+      fontSize: geometry.font,
+      lineHeight: Math.max(1, painted - CONTRAST_RING * 2),
+      color: colors.text,
+      children: bidiIsolate(String(displayValue))
+    })
+  });
+  if (standalone) {
+    return indicator;
+  }
   return /* @__PURE__ */jsxs(BadgeWrapper, {
-    children: [children, shouldShow && /* @__PURE__ */jsx(BadgeIndicator, {
-      dot,
-      backgroundColor: colors.bg,
-      ...(dot ? {
-        minWidth: geometry.dot,
-        width: geometry.dot,
-        height: geometry.dot
-      } : {
-        minWidth: geometry.capsule,
-        height: geometry.capsule
-      }),
-      style: {
-        ...posStyles,
-        transform: [{
-          translateX: position.includes("right") ? offsetX : -offsetX
-        }, {
-          translateY: position.includes("top") ? -offsetY : offsetY
-        }]
-      },
-      children: !dot && effectiveCount !== void 0 && /* @__PURE__ */jsx(BadgeText, {
-        ...knobProps.body,
-        fontWeight: "600",
-        fontSize: geometry.font,
-        lineHeight: geometry.capsule,
-        color: colors.text,
-        children: displayValue
-      })
-    })]
+    children: [children, indicator]
   });
 }
 export { Badge };