@oxy.so/bloom 4.33.0 → 4.34.1

package/src/mail-list/shared.ts

@@ -1,5 +1,7 @@
 import { Platform } from 'react-native';
 
+import { space } from '../styles/tokens';
+
 import { RiInbox2Line } from '../icons/remix/RiInbox2Line';
 import {
   hairlineOn,
@@ -28,7 +30,7 @@ export const IS_WEB = Platform.OS === 'web';
 export const MAIL_EMPTY_ICON = RiInbox2Line;
 
 // ---------------------------------------------------------------------------
-//  Geometry — the whole difference between the two densities
+//  Geometry — the whole difference between the densities
 // ---------------------------------------------------------------------------
 
 export interface MailRowGeometry {
@@ -82,15 +84,8 @@ export interface MailRowGeometry {
 }
 
 /**
- * 64 tall with two lines on a phone, 40 tall with one on a desktop. The avatar
- * is centred in both, so a row with no snippet is the same height as one with a
- * snippet and a label.
- *
- * The phone rung is the same 72/48 as a `chat-list` row on purpose: a mail row
- * and a conversation row are the same kind of object, and an inbox that stands
- * 16px taller per row than the messages screen reads as a different library.
- * Two lines is what pays for it — the sender and the time share the first, the
- * subject and the snippet the second.
+ * Two stacked lines at comfortable/cozy, one baseline at compact. Stacked rows
+ * grow with their content; cozy gives the same facts more breathing room.
  */
 export const MAIL_ROW_GEOMETRY: Record<MailDensity, MailRowGeometry> = {
   comfortable: {
@@ -118,6 +113,27 @@ export const MAIL_ROW_GEOMETRY: Record<MailDensity, MailRowGeometry> = {
     actionGlyph: 18,
     starControl: 24,
   },
+  cozy: {
+    minHeight: 80,
+    paddingVertical: space.lg,
+    paddingHorizontal: space.lg,
+    avatar: 48,
+    gap: space.md,
+    lineGap: space._2xs,
+    glyph: space.lg,
+    senderWidth: 0,
+    senderMinWidth: 0,
+    senderMaxWidth: '100%',
+    senderVariant: 'headline-regular',
+    senderUnreadVariant: 'headline-semibold',
+    subjectVariant: 'body-regular',
+    subjectUnreadVariant: 'body-semibold',
+    snippetVariant: 'body-regular',
+    timeVariant: 'caption-1-regular',
+    action: 44,
+    actionGlyph: 18,
+    starControl: space._2xl,
+  },
   compact: {
     minHeight: 40,
     height: 40,
@@ -161,6 +177,7 @@ export const MAIL_LABEL_DOT = 8;
 /** The selection bar's height, per density. */
 export const MAIL_SELECTION_BAR_HEIGHT: Record<MailDensity, number> = {
   comfortable: 56,
+  cozy: 56,
   compact: 44,
 };
 

package/src/mail-list/types.ts

@@ -5,13 +5,11 @@ import type { BloomIconComponent } from '../icons/icon-component';
 import type { AccentTone } from '../theme/accent-colors';
 
 /**
- * The two rungs of ONE row, not two components.
- *
- * `comfortable` is the phone inbox: avatar, three lines, 88 tall. `compact` is
- * the desktop list: one line, 40 tall, the same facts on a single baseline.
- * Nothing but the geometry table changes between them.
+ * One row at three densities: compact is a single 40px baseline, comfortable
+ * stacks two lines at a 64px floor, cozy keeps those lines with an 80px floor
+ * and a larger avatar and insets. All share the same content and actions.
  */
-export type MailDensity = 'comfortable' | 'compact';
+export type MailDensity = 'comfortable' | 'cozy' | 'compact';
 
 /** Who a message is from, as a row draws them. */
 export interface MailSender {
@@ -154,6 +152,8 @@ export interface MailRowProps {
    */
   checked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
+  /** Show sender avatars. Selection checkboxes remain visible when enabled. */
+  showAvatar?: boolean;
   density?: MailDensity;
   onPress?: () => void;
   onLongPress?: () => void;
@@ -203,6 +203,8 @@ export interface MailListProps {
   sections?: readonly MailListSection[];
   /** One unlabelled run, for a list that is not bucketed. */
   mails?: readonly MailSummary[];
+  /** Show sender avatars. Selection checkboxes remain visible when enabled. */
+  showAvatar?: boolean;
   density?: MailDensity;
   /** The row the reading pane is showing. */
   selectedId?: string;

package/src/map-marker/MapListingPreview.tsx

@@ -24,6 +24,7 @@ import {
   type MapMarkerPaint,
 } from './shared';
 import type { MapListingPreviewProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The small card a map shows when a marker is pressed.
@@ -124,12 +125,15 @@ function MapListingPreviewComponent({
   onPress,
   layout = 'vertical',
   width = DEFAULT_WIDTH,
-  closeLabel = 'Close',
-  favoriteLabel = 'Save',
+  closeLabel: closeLabelProp,
+  favoriteLabel: favoriteLabelProp,
   accessibilityLabel,
   style,
   testID,
 }: MapListingPreviewProps) {
+  const common = useCommonMessages();
+  const closeLabel = closeLabelProp ?? common.close;
+  const favoriteLabel = favoriteLabelProp ?? common.save;
   const theme = useTheme();
   const paint = useMemo(() => resolveMapMarkerPaint(theme), [theme]);
   const resolver = useImageResolver();

package/src/media-card/FriendActivityCard.tsx

@@ -14,6 +14,7 @@ import { Text } from '../typography';
 import { Artwork, CardLink, useMediaCardCss } from './parts';
 import { composeName, resolveMediaCardPaint, ROW_PADDING, ROW_RADIUS } from './shared';
 import type { FriendActivityCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 const AVATAR = 40;
 const DOT = 12;
@@ -50,13 +51,14 @@ function FriendActivityCardComponent({
   style,
   testID,
 }: FriendActivityCardProps) {
+  const common = useCommonMessages();
   const theme = useTheme();
   useMediaCardCss();
   const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
 
   if (skeleton) {
     return (
-      <View aria-busy accessibilityLabel="Loading" style={[{ flexDirection: 'row', gap: 12, padding: ROW_PADDING }, style]} testID={testID}>
+      <View aria-busy accessibilityLabel={common.loading} style={[{ flexDirection: 'row', gap: 12, padding: ROW_PADDING }, style]} testID={testID}>
         <SkeletonCircle size={AVATAR} />
         <View style={{ flex: 1, gap: 8, justifyContent: 'center' }}>
           <SkeletonBox width="35%" height={12} borderRadius={4} />

package/src/media-card/GenreCard.tsx

@@ -19,6 +19,7 @@ import {
   TILE_ARTWORK,
 } from './shared';
 import type { GenreCardProps, MediaCardSize } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 const TITLE: Record<MediaCardSize, TypeScaleVariant> = {
   large: 'title-2-bold',
@@ -51,6 +52,7 @@ function GenreCardComponent({
   style,
   testID,
 }: GenreCardProps) {
+  const common = useCommonMessages();
   const theme = useTheme();
   useMediaCardCss();
   const resolver = useImageResolver();
@@ -62,7 +64,7 @@ function GenreCardComponent({
 
   if (skeleton) {
     return (
-      <View aria-busy accessibilityLabel="Loading" style={[{ width: side, aspectRatio: 1 }, style]} testID={testID}>
+      <View aria-busy accessibilityLabel={common.loading} style={[{ width: side, aspectRatio: 1 }, style]} testID={testID}>
         <SkeletonBox width="100%" height="100%" borderRadius={GENRE_RADIUS} />
       </View>
     );

package/src/media-card/MediaCard.tsx

@@ -24,6 +24,7 @@ import {
   TILE_RADIUS,
 } from './shared';
 import type { MediaCardLayout, MediaCardProps, MediaCardSize } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The anatomy every music card shares.
@@ -92,6 +93,7 @@ export function MediaCardSkeleton({
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }) {
+  const common = useCommonMessages();
   const box = resolveArtworkBox(size, layout, aspectRatio, artworkSize);
   const row = layout === 'row';
   const padding = row ? ROW_PADDING : TILE_PADDING;
@@ -103,7 +105,7 @@ export function MediaCardSkeleton({
   return (
     <View
       aria-busy
-      accessibilityLabel="Loading"
+      accessibilityLabel={common.loading}
       style={[
         {
           flexDirection: row ? 'row' : 'column',

package/src/media-card/QuickAccessTile.tsx

@@ -18,6 +18,7 @@ import {
   resolvePlayVisibility,
 } from './shared';
 import type { QuickAccessTileProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The compact home-screen shortcut, laid out 2–4 to a row.
@@ -55,13 +56,14 @@ function QuickAccessTileComponent({
   style,
   testID,
 }: QuickAccessTileProps) {
+  const common = useCommonMessages();
   const theme = useTheme();
   useMediaCardCss();
   const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
 
   if (skeleton) {
     return (
-      <View aria-busy accessibilityLabel="Loading" style={style} testID={testID}>
+      <View aria-busy accessibilityLabel={common.loading} style={style} testID={testID}>
         <SkeletonBox width="100%" height={QUICK_TILE_HEIGHT} borderRadius={QUICK_TILE_RADIUS} />
       </View>
     );

package/src/media-card/RecapCard.tsx

@@ -12,6 +12,7 @@ import { Text } from '../typography';
 import { Artwork, CoverGradient, useMediaCardCss } from './parts';
 import { IS_WEB, RECAP_RADIUS, resolveCoverTint, resolveMediaCardPaint, type CoverTint } from './shared';
 import type { RecapCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The share pill over a generated cover. Not `Button`: its fill is the cover's
@@ -76,6 +77,7 @@ function RecapCardComponent({
   style,
   testID,
 }: RecapCardProps) {
+  const common = useCommonMessages();
   const theme = useTheme();
   useMediaCardCss();
   const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
@@ -83,7 +85,7 @@ function RecapCardComponent({
 
   if (skeleton) {
     return (
-      <View aria-busy accessibilityLabel="Loading" style={style} testID={testID}>
+      <View aria-busy accessibilityLabel={common.loading} style={style} testID={testID}>
         <SkeletonBox width="100%" height={360} borderRadius={RECAP_RADIUS} />
       </View>
     );

package/src/media-card/parts.tsx

@@ -37,6 +37,7 @@ import {
 } from './shared';
 import type { MediaCardMenuItem } from './types';
 import type { BloomIconComponent } from '../icons/icon-component';
+import { useCommonMessages } from '../locale/common-messages';
 
 export function useMediaCardCss(): void {
   React.useEffect(() => {
@@ -324,7 +325,7 @@ export function hasMenu(menu: React.ReactNode, items?: ReadonlyArray<MediaCardMe
 export function CardMenu({
   items,
   menu,
-  label = 'More options',
+  label: labelProp,
   subject,
   open,
   onOpenChange,
@@ -340,7 +341,9 @@ export function CardMenu({
   reveal: boolean;
   testID?: string;
 }) {
-  const name = `${label} for ${subject}`;
+  const common = useCommonMessages();
+  const label = labelProp ?? common.moreOptions;
+  const name = common.labelFor(label, subject);
   return (
     <View
       {...webDataSet({ bloomMediaCardMenu: '', ...(reveal ? { bloomMediaCardReveal: 'hover' } : null) })}

package/src/media-header/MediaActionBar.tsx

@@ -33,6 +33,7 @@ import type {
   MediaMoreButtonProps,
   ShuffleButtonProps,
 } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The row of controls under a media header.
@@ -144,10 +145,12 @@ ShuffleButton.displayName = 'ShuffleButton';
 
 function MediaMoreButtonComponent({
   onPress,
-  accessibilityLabel = 'More options',
+  accessibilityLabel: accessibilityLabelProp,
   size = 28,
   ...rest
 }: MediaMoreButtonProps) {
+  const common = useCommonMessages();
+  const accessibilityLabel = accessibilityLabelProp ?? common.moreOptions;
   return (
     <MediaIconButton
       icon={RiMoreFill}

package/src/media-header/PopularTracks.tsx

@@ -11,6 +11,7 @@ import { Text } from '../typography';
 import { useImageUri, useMediaHeaderPaint } from './parts';
 import { type MediaHeaderPaint } from './shared';
 import type { PopularTrack, PopularTracksProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * An artist's most played tracks: five rows, "See more" shows ten.
@@ -129,13 +130,15 @@ function PopularTracksComponent({
   expanded: expandedProp,
   onExpandedChange,
   showMoreLabel = 'See more',
-  showLessLabel = 'Show less',
+  showLessLabel: showLessLabelProp,
   activeTrackId,
   playing = false,
   onTrackPress,
   style,
   testID,
 }: PopularTracksProps) {
+  const common = useCommonMessages();
+  const showLessLabel = showLessLabelProp ?? common.showLess;
   const paint = useMediaHeaderPaint();
   const [expandedState, setExpandedState] = useState(false);
   const expanded = expandedProp ?? expandedState;

package/src/media-header/parts.tsx

@@ -19,6 +19,7 @@ import { clamp01 } from '../styles/clamp';
 import { isImageUrl as isUrl } from '../image-resolver';
 import { webDataSet as webData } from '../styles/web-data';
 import type { MediaHeaderPerson, MediaImageSource } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /** The family's paint for an artwork colour, plus its web sheet. */
 export function useMediaHeaderPaint(artworkColor?: string | null): MediaHeaderPaint {
@@ -395,8 +396,8 @@ export function ClampedText({
   color,
   linkColor,
   ring,
-  showMoreLabel = 'Show more',
-  showLessLabel = 'Show less',
+  showMoreLabel: showMoreLabelProp,
+  showLessLabel: showLessLabelProp,
   testID,
 }: {
   children: string;
@@ -408,6 +409,9 @@ export function ClampedText({
   showLessLabel?: string;
   testID?: string;
 }) {
+  const common = useCommonMessages();
+  const showMoreLabel = showMoreLabelProp ?? common.showMore;
+  const showLessLabel = showLessLabelProp ?? common.showLess;
   const [expanded, setExpanded] = React.useState(false);
   const { state: hovered, onIn, onOut } = useInteractionState();
   // Only offer the toggle when the text can plausibly overflow: ~ 60 characters a line.

package/src/media-shelf/Shelf.tsx

@@ -31,6 +31,7 @@ import {
   type ShelfScroll,
 } from './shared';
 import type { ShelfProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * A section of a home or search page: a header over a run of items.
@@ -69,12 +70,15 @@ function ShelfComponent({
   gap = SHELF_GAP,
   contentInset = 0,
   headingLevel = 2,
-  previousLabel = 'Previous',
-  nextLabel = 'Next',
+  previousLabel: previousLabelProp,
+  nextLabel: nextLabelProp,
   children,
   style,
   testID,
 }: ShelfProps) {
+  const common = useCommonMessages();
+  const previousLabel = previousLabelProp ?? common.previous;
+  const nextLabel = nextLabelProp ?? common.next;
   const theme = useTheme();
   const reducedMotion = useReducedMotion();
   useEffect(() => {

package/src/media-shelf/ShelfSkeleton.tsx

@@ -4,6 +4,7 @@ import { ScrollView, View, type LayoutChangeEvent } from 'react-native';
 import * as Skeleton from '../skeleton';
 import { SHELF_GAP, shelfGridColumns } from './shared';
 import type { ShelfSkeletonProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The placeholder for a `Shelf` that is still loading: a title bar and
@@ -21,10 +22,12 @@ function ShelfSkeletonComponent({
   round = false,
   eyebrow = false,
   gap = SHELF_GAP,
-  accessibilityLabel = 'Loading',
+  accessibilityLabel: accessibilityLabelProp,
   style,
   testID,
 }: ShelfSkeletonProps) {
+  const common = useCommonMessages();
+  const accessibilityLabel = accessibilityLabelProp ?? common.loading;
   const [gridWidth, setGridWidth] = useState(0);
   const onGridLayout = useCallback((event: LayoutChangeEvent) => {
     const width = event.nativeEvent.layout.width;

package/src/menubar/Menubar.web.tsx

@@ -27,12 +27,13 @@ import { cx } from '../floating/shared';
 import { useAnchorRect } from '../floating/use-anchor-rect';
 import { useMenubarMenu } from './context';
 import type { MenubarContentProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 export { Menubar, MenubarMenu, MenubarTrigger } from './MenubarBase';
 
 export function MenubarContent({
   children,
-  label = 'Menu',
+  label: labelProp,
   side,
   align = 'start',
   // `alignOffset={-4} sideOffset={8}` — upstream's own defaults, which pull the
@@ -47,6 +48,8 @@ export function MenubarContent({
   style,
   testID,
 }: MenubarContentProps) {
+  const common = useCommonMessages();
+  const label = labelProp ?? common.menu;
   const menu = useMenubarMenu();
   const anchor = useAnchorRect(menu.anchorRef, menu.open);
   const close = useCallback(() => menu.setOpen(false), [menu]);

package/src/message-media/FileMessage.tsx

@@ -30,6 +30,7 @@ import {
   resolveMessageMediaPaint,
 } from './shared';
 import type { FileKind, FileMessageProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /** One glyph per kind. The colour is `resolveFileKindPaint`'s job, not this map's. */
 const KIND_ICONS: Record<FileKind, typeof RiFileTextLine> = {
@@ -84,13 +85,15 @@ function FileMessageComponent({
   width,
   accessibilityLabel,
   downloadLabel = 'Download',
-  cancelLabel = 'Cancel',
+  cancelLabel: cancelLabelProp,
   tone = 'incoming',
   onColor,
   bubbleColor,
   style,
   testID,
 }: FileMessageProps) {
+  const common = useCommonMessages();
+  const cancelLabel = cancelLabelProp ?? common.cancel;
   const theme = useTheme();
   useMessageMediaCss();
   const paint = useMemo(

package/src/message-media/parts.tsx

@@ -29,6 +29,7 @@ import {
 } from './shared';
 import { useMediaSource } from './use-media-source';
 import type { MessageMediaSource } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The pieces every block in `message-media` is built from.
@@ -557,10 +558,12 @@ function retryStyle(hovered: boolean, paint: MessageMediaPaint): WebCssStyle {
 export const MediaFailure = memo(function MediaFailure({
   paint,
   label = 'Not sent',
-  retryLabel = 'Retry',
+  retryLabel: retryLabelProp,
   onRetry,
   testID,
 }: MediaFailureProps) {
+  const common = useCommonMessages();
+  const retryLabel = retryLabelProp ?? common.retry;
   useMessageMediaCss();
   const [hovered, setHovered] = useState(false);
   return (

package/src/music-library/SearchField.tsx

@@ -14,6 +14,7 @@ import { useTheme } from '../theme/use-theme';
 import { TYPE_SCALE } from '../typography/scale';
 import { IS_WEB, MUSIC_LIBRARY_CSS, MUSIC_LIBRARY_STYLE_ID, resolveMusicLibraryPaint } from './shared';
 import type { SearchFieldProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The top-bar search pill.
@@ -59,13 +60,15 @@ function SearchFieldComponent({
   onBrowsePress,
   browseActive = false,
   placeholder = 'What do you want to play?',
-  accessibilityLabel = 'Search',
+  accessibilityLabel: accessibilityLabelProp,
   clearLabel = 'Clear search',
   browseLabel = 'Browse',
   autoFocus,
   style,
   testID,
 }: SearchFieldProps) {
+  const common = useCommonMessages();
+  const accessibilityLabel = accessibilityLabelProp ?? common.search;
   const theme = useTheme();
   useEffect(() => {
     adoptStyleSheet(MUSIC_LIBRARY_STYLE_ID, MUSIC_LIBRARY_CSS);

package/src/overlay/Overlay.tsx

@@ -61,6 +61,7 @@ import { useHardwareBack } from './use-hardware-back';
 import { useModalOverlayRegistration } from './use-modal-overlay-active';
 import { useOverlayLayer } from './use-overlay-layer';
 import type { OverlayRootProps, BackdropProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
 
@@ -390,9 +391,11 @@ export const Backdrop = memo(function Backdrop({
   style,
   layerStyle,
   children,
-  accessibilityLabel = 'Dismiss',
+  accessibilityLabel: accessibilityLabelProp,
   testID,
 }: BackdropProps) {
+  const common = useCommonMessages();
+  const accessibilityLabel = accessibilityLabelProp ?? common.dismiss;
   const inert = disabled || !onPress;
   // `undefined` unless this backdrop is inside a declared separate native
   // window. On Android that is the difference between a real blur and a crash.

package/src/page-header/PageHeader.tsx

@@ -33,6 +33,7 @@ import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { EdgeScrim, SCRIM_TAIL_RATIO } from './EdgeScrim';
 import type { PageHeaderProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * `PageHeader`: a screen's top chrome.
@@ -120,7 +121,7 @@ function PageHeaderComponent({
   presentation = 'floating',
   placement = 'inline',
   onBack,
-  backLabel = 'Back',
+  backLabel: backLabelProp,
   leading,
   actions,
   border = 'auto',
@@ -134,6 +135,8 @@ function PageHeaderComponent({
   style,
   testID,
 }: PageHeaderProps) {
+  const common = useCommonMessages();
+  const backLabel = backLabelProp ?? common.back;
   const isWeb = Platform.OS === 'web';
   const floating = presentation === 'floating';
   const overlay = placement === 'overlay';

package/src/pagination/Pagination.tsx

@@ -13,6 +13,7 @@ import { RiArrowLeftLine as ArrowLeft } from '../icons/remix/RiArrowLeftLine';
 import { RiArrowRightLine as ArrowRight } from '../icons/remix/RiArrowRightLine';
 import type { Theme } from '../theme/types';
 import type { PaginationProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The pagination, coloured from Bloom's theme through the ramps
@@ -177,13 +178,16 @@ const PaginationComponent: React.FC<PaginationProps> = ({
   totalPages,
   onChange,
   siblingCount = 1,
-  previousLabel = 'Previous',
-  nextLabel = 'Next',
+  previousLabel: previousLabelProp,
+  nextLabel: nextLabelProp,
   getPageLabel,
   accessibilityLabel = 'Pagination',
   style,
   testID,
 }) => {
+  const common = useCommonMessages();
+  const previousLabel = previousLabelProp ?? common.previous;
+  const nextLabel = nextLabelProp ?? common.next;
   const theme = useTheme();
   useInteractiveWebCss(STYLE_ID, PAGINATION_CSS);
   const palette = useMemo(() => resolvePaginationPalette(theme), [theme]);

package/src/place-card/PlaceCard.tsx

@@ -34,6 +34,7 @@ import { PLACE_CARD_GEOMETRY, PLACE_OPEN_TONE } from './constants';
 import { PlaceActions } from './PlaceActions';
 import { composePlaceName, openLabelFor, resolvePlaceCardPaint, type PlaceCardPaint } from './shared';
 import type { PlaceCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * A place on the map — the result you scroll past, and the header of the sheet
@@ -219,11 +220,12 @@ function PlaceCardSkeleton({
   style,
   testID,
 }: Pick<PlaceCardProps, 'style' | 'testID'> & { density: 'row' | 'detail' }) {
+  const common = useCommonMessages();
   if (density === 'row') {
     return (
       <View
         aria-busy
-        accessibilityLabel="Loading"
+        accessibilityLabel={common.loading}
         style={[{ flexDirection: 'row', alignItems: 'flex-start' }, style]}
         testID={testID}
       >
@@ -243,7 +245,7 @@ function PlaceCardSkeleton({
     );
   }
   return (
-    <View aria-busy accessibilityLabel="Loading" style={style} testID={testID}>
+    <View aria-busy accessibilityLabel={common.loading} style={style} testID={testID}>
       <SkeletonBox width="100%" height={G.cover} borderRadius={G.radius} />
       <View style={{ gap: 8, paddingTop: G.padding }}>
         <SkeletonBox width="55%" height={20} borderRadius={4} />

package/src/place-reviews/PlaceReviewCard.tsx

@@ -22,6 +22,7 @@ import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { PLACE_REVIEW_CATEGORIES_WIDE_MIN_WIDTH } from './constants';
 import type { PlaceReviewCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * One past tenant's review of a building.
@@ -60,8 +61,8 @@ function PlaceReviewCardComponent({
   notRecommendLabel = "Wouldn't recommend",
   text,
   numberOfLines = 4,
-  showMoreLabel = 'Show more',
-  showLessLabel = 'Show less',
+  showMoreLabel: showMoreLabelProp,
+  showLessLabel: showLessLabelProp,
   expanded: expandedProp,
   onExpandedChange,
   helpfulCount,
@@ -74,6 +75,9 @@ function PlaceReviewCardComponent({
   style,
   testID,
 }: PlaceReviewCardProps) {
+  const common = useCommonMessages();
+  const showMoreLabel = showMoreLabelProp ?? common.showMore;
+  const showLessLabel = showLessLabelProp ?? common.showLess;
   useHousingWebCss();
   const palette = useHousingPalette();
   const id = (part: string) => (testID ? `${testID}-${part}` : undefined);