@oxy.so/bloom 4.14.1 → 4.16.0

package/src/sidebar/Sidebar.tsx

@@ -19,6 +19,7 @@ import { Badge } from '../badge';
 import { CloseButton } from '../button';
 import { useControllableState } from '../hooks/use-controllable-state';
 import { useInteractionState } from '../hooks/use-interaction-state';
+import { useDirectionProps, useIsRtl } from '../hooks/use-is-rtl';
 import { RiCloseLine } from '../icons/remix/RiCloseLine';
 import { RiSearchLine } from '../icons/remix/RiSearchLine';
 import { RiSideBarFill } from '../icons/remix/RiSideBarFill';
@@ -87,6 +88,7 @@ function SearchField({
   onDismiss,
   placeholder,
   label,
+  clearLabel,
   compact = false,
 }: {
   palette: SidebarPalette;
@@ -96,6 +98,7 @@ function SearchField({
   onDismiss: (restoreFocus: boolean) => void;
   placeholder: string;
   label: string;
+  clearLabel: string;
   compact?: boolean;
 }) {
   const inputStyle: TextStyle & WebCssStyle = {
@@ -130,7 +133,7 @@ function SearchField({
       />
       <CloseButton
         size="xs"
-        accessibilityLabel="Clear navigation search"
+        accessibilityLabel={clearLabel}
         onPress={() => onDismiss(true)}
         style={{ backgroundColor: palette.tertiaryHover }}
       />
@@ -157,6 +160,10 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   onCollapsedChange,
   mobile = false,
   onClose,
+  accessibilityLabel = 'Sidebar',
+  collapseLabel = 'Collapse sidebar',
+  expandLabel = 'Expand sidebar',
+  closeLabel = 'Close sidebar',
   fluid = false,
   surface = 'card',
   size: sizeProp,
@@ -167,7 +174,10 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   searchQuery,
   onSearchQueryChange,
   searchLabel = 'Quick Search',
+  searchButtonLabel = 'Search',
   searchPlaceholder,
+  filterLabel = 'Filter navigation',
+  clearSearchLabel = 'Clear navigation search',
   noResultsLabel = 'No results',
   logo,
   account,
@@ -186,6 +196,12 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   const metrics = SIDEBAR_METRICS[size];
   useSidebarWebCss();
   const reducedMotion = useReducedMotion();
+  // Insets below are logical and mirror by themselves; the header control's
+  // `translateX` and the collapse glyph's `scaleX` are signs, and flip here.
+  const dir = useIsRtl() ? -1 : 1;
+  // A standalone sidebar has no shell above it to hand react-native-web the
+  // document's direction, so it hands it on itself (see `useDirectionProps`).
+  const dirProps = useDirectionProps();
 
   const [collapsedState, setCollapsed] = useControllableState<boolean>({
     value: collapsedProp,
@@ -255,8 +271,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     return { paddingLeft: padding, paddingRight: padding, marginLeft: (collapsedLane - metrics.row.square) / 2 * progress.value, marginRight: (collapsedLane - metrics.row.square) / 2 * progress.value };
   }, [progress, metrics.row.square, metrics.row.padding, metrics.row.icon, expandedInset, collapsedLane]);
   const sideBarIconStyle = useAnimatedStyle(
-    () => ({ transform: [{ scaleX: 2 * progress.value - 1 }] }),
-    [progress],
+    () => ({ transform: [{ scaleX: dir * (2 * progress.value - 1) }] }),
+    [progress, dir],
   );
 
   const hasLogo = !!logo;
@@ -266,17 +282,17 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   }), [progress, hasLogo, hasAccount]);
   const headerIdentityGeometry = useAnimatedStyle(() => ({
     top: hasLogo ? 0 : 30 * progress.value,
-    right: (hasLogo ? 28 : 20) * (1 - progress.value),
+    insetInlineEnd: (hasLogo ? 28 : 20) * (1 - progress.value),
   }), [progress, hasLogo]);
   const headerControlGeometry = useAnimatedStyle(() => {
     const p = progress.value;
     return {
-      left: `${100 * (1 - p)}%` as `${number}%`,
+      insetInlineStart: `${100 * (1 - p)}%` as `${number}%`,
       width: 20 + (collapsedLane - 20) * p,
       top: hasLogo ? 8 + 38 * p : hasAccount ? 6 * (1 - p) : 0,
-      transform: [{ translateX: -20 * (1 - p) }],
+      transform: [{ translateX: dir * -20 * (1 - p) }],
     };
-  }, [progress, hasLogo, hasAccount, collapsedLane]);
+  }, [progress, hasLogo, hasAccount, collapsedLane, dir]);
   const themeGeometry = useAnimatedStyle(() => ({ height: 40 - 4 * progress.value }), [progress]);
   const themeExpandedStyle = useAnimatedStyle(() => ({ opacity: 1 - progress.value }), [progress]);
   const themeCollapsedStyle = useAnimatedStyle(() => ({ opacity: progress.value }), [progress]);
@@ -368,7 +384,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
 
   // ---- chrome ------------------------------------------------------------
   // Three surfaces, one place. `docked` keeps the panel fill and spends its
-  // edge on ONE hairline — the side facing the content — because a column
+  // edge on ONE hairline — the side facing the content, its END edge (the
+  // nav is the row's first child, so the right in LTR, the left in RTL) — because a column
   // flush to the window has no other edge to draw: a border all the way round
   // would draw two lines nobody can see and one they can.
   const chrome: WebCssStyle =
@@ -377,8 +394,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
       : surface === 'docked'
         ? {
             backgroundColor: palette.panel,
-            borderRightWidth: 1,
-            borderRightColor: palette.dockedEdge,
+            borderEndWidth: 1,
+            borderEndColor: palette.dockedEdge,
           }
         : {
             borderRadius: 24,
@@ -411,7 +428,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
         borderRadius: borderRadius.full,
         backgroundColor: palette.tertiary,
         ...(searchActive
-          ? { flex: 1, gap: 8, paddingLeft: 8, paddingRight: 10, boxShadow: searchRing }
+          ? { flex: 1, gap: 8, paddingInlineStart: 8, paddingInlineEnd: 10, boxShadow: searchRing }
           : { width: 36, gap: 0, paddingLeft: 8, paddingRight: 8 }),
       }}
     >
@@ -419,7 +436,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
         ref={searchTriggerRef}
         {...(IS_WEB ? { dataSet: { bloomSidebar: 'ring' } } : {})}
         role="button"
-        accessibilityLabel="Search"
+        accessibilityLabel={searchButtonLabel}
         onPress={activateSearch}
         style={{ width: 20, height: 20, alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}
       >
@@ -434,7 +451,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
           onChangeText={setQuery}
           onDismiss={deactivateSearch}
           placeholder={placeholder}
-          label="Filter navigation"
+          label={filterLabel}
+          clearLabel={clearSearchLabel}
         />
       ) : null}
     </View>
@@ -442,7 +460,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     <Pressable
       {...(IS_WEB ? { dataSet: { bloomSidebar: 'ring' } } : {})}
       role="button"
-      accessibilityLabel="Close sidebar"
+      accessibilityLabel={closeLabel}
       onPress={onClose}
       testID="sidebar-close"
     >
@@ -452,7 +470,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     <Pressable
       {...(IS_WEB ? { dataSet: { bloomSidebar: 'ring' } } : {})}
       role="button"
-      accessibilityLabel={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+      accessibilityLabel={collapsed ? expandLabel : collapseLabel}
       aria-expanded={!collapsed}
       onPress={toggleCollapse}
       style={{ width: '100%', alignItems: 'center', justifyContent: 'center' }}
@@ -476,8 +494,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
         backgroundColor: palette.tertiary,
         paddingTop: 8,
         paddingBottom: 8,
-        paddingLeft: 8,
-        paddingRight: 10,
+        paddingInlineStart: 8,
+        paddingInlineEnd: 10,
         boxShadow: searchRing,
       }}
       testID="sidebar-search-field"
@@ -490,7 +508,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
         onChangeText={setQuery}
         onDismiss={deactivateSearch}
         placeholder={placeholder}
-        label="Filter navigation"
+        label={filterLabel}
+        clearLabel={clearSearchLabel}
       />
     </View>
   ) : (
@@ -600,7 +619,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   ) : (
     <>
       <Animated.View testID="sidebar-header" style={[{ width: '100%', position: 'relative' }, headerGeometry]}>
-        {logo || account ? <Animated.View style={[{ position: 'absolute', left: 0, minWidth: 0 }, headerIdentityGeometry]}>
+        {logo || account ? <Animated.View style={[{ position: 'absolute', insetInlineStart: 0, minWidth: 0 }, headerIdentityGeometry]}>
           {logo ? <SidebarLogoView logo={logo} collapsed={collapsed} testID="sidebar-logo" /> : accountMenu}
         </Animated.View> : null}
         <Animated.View testID="sidebar-header-control" style={[{ position: 'absolute', height: 20 }, headerControlGeometry]}>
@@ -616,8 +635,9 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     <SidebarGeometryProvider value={geometry}>
     <CollapseProvider value={progress}>
       <Animated.View
+        {...dirProps}
         role="complementary"
-        accessibilityLabel="Sidebar"
+        accessibilityLabel={accessibilityLabel}
         onLayout={onPanelLayout}
         testID={testID}
         style={[
@@ -706,7 +726,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
             <Animated.View testID="sidebar-theme-morph" style={[{ position: 'relative', overflow: 'hidden' }, themeGeometry]}>
               <Animated.View pointerEvents={collapsed ? 'none' : 'auto'} aria-hidden={collapsed} accessibilityElementsHidden={collapsed} importantForAccessibility={collapsed ? 'no-hide-descendants' : 'auto'}
                 {...(IS_WEB && collapsed ? { inert: true } : {})}
-                style={[{ position: 'absolute', left: 0, top: 0 }, themeExpandedStyle]}>
+                style={[{ position: 'absolute', insetInlineStart: 0, top: 0 }, themeExpandedStyle]}>
                 <ThemeToggle variant="sidebar-segmented" style={plain ? { backgroundColor: palette.panel } : undefined} />
               </Animated.View>
               <Animated.View pointerEvents={collapsed ? 'auto' : 'none'} aria-hidden={!collapsed} accessibilityElementsHidden={!collapsed} importantForAccessibility={collapsed ? 'auto' : 'no-hide-descendants'}

package/src/sidebar/SidebarFolder.tsx

@@ -12,6 +12,7 @@ import Svg, { Path } from 'react-native-svg';
 
 import { useControllableState } from '../hooks/use-controllable-state';
 import { useInteractionState } from '../hooks/use-interaction-state';
+import { useIsRtl } from '../hooks/use-is-rtl';
 import { RiFolderLine } from '../icons/remix/RiFolderLine';
 import { RiFolderOpenLine } from '../icons/remix/RiFolderOpenLine';
 import type { WebCssStyle } from '../styles/web-view-style';
@@ -27,13 +28,15 @@ const FIRST_CENTER = 15;
 /**
  * The curved connector: a guide dropping from the folder glyph with a rounded
  * elbow into each row — 1px icon-quaternary, trunk at x 17, each elbow landing 5px
- * right of it and running on to 11.5.
+ * toward the end of it and running on to 11.5. The path is drawn left-to-right,
+ * so under RTL the box is mirrored as well as anchored from the start edge.
  */
 function TreeConnector({ count, color }: { count: number; color: string }) {
+  const rtl = useIsRtl();
   if (count === 0) return null;
   const height = FIRST_CENTER + ROW_PITCH * (count - 1) + 1;
   return (
-    <View pointerEvents="none" style={{ position: 'absolute', top: 0, left: 16.5, width: 12, height }}>
+    <View pointerEvents="none" style={{ position: 'absolute', top: 0, insetInlineStart: 16.5, width: 12, height, transform: rtl ? [{ scaleX: -1 }] : undefined }}>
       <Svg width={12} height={height} viewBox={`0 0 12 ${height}`} fill="none">
         {Array.from({ length: count }, (_, i) => {
           const y = FIRST_CENTER + ROW_PITCH * i;
@@ -69,8 +72,8 @@ function TreeRow({
     borderRadius: borderRadius.full,
     paddingTop: 5,
     paddingBottom: 5,
-    paddingRight: 8,
-    paddingLeft: 36,
+    paddingInlineEnd: 8,
+    paddingInlineStart: 36,
     backgroundColor: selected || hovered ? palette.rowHover : 'transparent',
     '--bloom-sidebar-ring': palette.ring,
   };

package/src/sidebar/SidebarLogoView.tsx

@@ -18,7 +18,7 @@ export const SIDEBAR_LOGO_SIZE = 36;
  *   mark      centred in a 36 × 36 box — the collapsed column — so it stays
  *             put while the rail morphs; sized by the caller (a 24–28px glyph
  *             reads right)
- *   wordmark  8 to the right, in a collapse slot; a string renders as
+ *   wordmark  8 after it (inline-end), in a collapse slot; a string renders as
  *             headline-semibold text-primary, anything else as given (an SVG
  *             wordmark, an image)
  *   link      with `href` a real anchor on web, with `onPress` a button; the
@@ -53,7 +53,7 @@ const SidebarLogoViewComponent: React.FC<SidebarLogoViewProps> = ({
       ) : null}
       {wordmark != null && showWordmark ? (
         <Collapsible collapsed={collapsed}>
-          <View style={{ minHeight: SIDEBAR_LOGO_SIZE, paddingLeft: icon != null ? 8 : 0, justifyContent: 'center' }} testID={testID ? `${testID}-wordmark` : undefined}>
+          <View style={{ minHeight: SIDEBAR_LOGO_SIZE, paddingInlineStart: icon != null ? 8 : 0, justifyContent: 'center' }} testID={testID ? `${testID}-wordmark` : undefined}>
             {typeof wordmark === 'string' ? (
               <Text variant="headline-semibold" numberOfLines={1} style={{ color: palette.text }}>
                 {wordmark}

package/src/sidebar/SidebarModeSwitcher.tsx

@@ -118,7 +118,7 @@ function ModeRow({
           <Text
             variant="caption-2-regular"
             numberOfLines={1}
-            style={{ color: palette.textTertiary, paddingRight: 12, opacity: hovered ? 1 : 0 }}
+            style={{ color: palette.textTertiary, paddingInlineEnd: 12, opacity: hovered ? 1 : 0 }}
           >
             {mode.shortcut}
           </Text>

package/src/sidebar/SidebarPlanCard.tsx

@@ -31,8 +31,8 @@ function SidebarPlanCardComponent({ plan, collapsed = false, style, testID }: Si
   const geometry = useAnimatedStyle(() => ({
     width: inSidebar ? '100%' : naturalWidth.value > 0 ? naturalWidth.value + (36 - naturalWidth.value) * progress.value : progress.value === 1 ? 36 : '100%',
     height: 56 - 20 * progress.value,
-    paddingLeft: 10 + (compactPadding - 10) * progress.value,
-    paddingRight: 12 + (compactPadding - 12) * progress.value,
+    paddingInlineStart: 10 + (compactPadding - 10) * progress.value,
+    paddingInlineEnd: 12 + (compactPadding - 12) * progress.value,
   }), [progress, inSidebar, naturalWidth, compactPadding]);
   const fill = useAnimatedStyle(() => ({ opacity: 1 - progress.value }), [progress]);
   const avatar = plan.avatar ?? { initials: plan.name.slice(0, 1).toUpperCase(), color: 'blue' as const };
@@ -87,7 +87,7 @@ function SidebarPlanCardComponent({ plan, collapsed = false, style, testID }: Si
       <View style={{ minWidth: 0, flexShrink: 1, flexDirection: 'row', alignItems: 'center' }}>
         {avatarNode}
         <Collapsible collapsed={collapsed}>
-        <View style={{ paddingLeft: 8, minWidth: 0, flexShrink: 1, flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center' }}>
+        <View style={{ paddingInlineStart: 8, minWidth: 0, flexShrink: 1, flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center' }}>
           <Text variant="body-medium" numberOfLines={1} style={{ color: palette.text }}>
             {plan.name}
           </Text>

package/src/sidebar/SidebarRail.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 
 import { Badge } from '../badge';
+import { useDirectionProps } from '../hooks/use-is-rtl';
 import { useSidebarPalette } from './palette';
 import { IS_WEB } from './parts';
 import { SidebarPrimaryAction } from './SidebarPrimaryAction';
@@ -34,10 +35,14 @@ export function SidebarRail({
   secondaryItems = [],
   selected,
   onNavigate,
+  accessibilityLabel = 'Sidebar',
   style,
   testID,
 }: SidebarProps) {
   const palette = useSidebarPalette();
+  // The badges sit on logical insets; react-native-web resolves those against a
+  // `dir` prop, not `<html dir>` (see `useDirectionProps`).
+  const dirProps = useDirectionProps();
 
   const renderItem = (item: SidebarNavItem) => {
     const isSelected = selected === item.key;
@@ -68,8 +73,9 @@ export function SidebarRail({
 
   return (
     <View
+      {...dirProps}
       role="complementary"
-      accessibilityLabel="Sidebar"
+      accessibilityLabel={accessibilityLabel}
       testID={testID}
       style={[
         {

package/src/sidebar/SidebarRailItem.tsx

@@ -26,7 +26,7 @@ const SELECTION_DURATION = 220;
  *              glyph), background-secondary-hover on hover
  *   label      10px, centred, one line; text-primary medium while selected,
  *              text-secondary otherwise
- *   badge      over the indicator's top-right corner
+ *   badge      over the indicator's top-end corner (top-right in LTR)
  *
  * With `href` the item is a link (a real anchor on web).
  */
@@ -111,7 +111,7 @@ const SidebarRailItemComponent: React.FC<SidebarRailItemProps> = ({
           <SelectedGlyph width={ICON_SIZE} height={ICON_SIZE} fill={palette.selectedForeground} />
         </Animated.View>
         {badge != null ? (
-          <View pointerEvents="none" style={{ position: 'absolute', top: -6, left: INDICATOR_WIDTH - 16 }}>
+          <View pointerEvents="none" style={{ position: 'absolute', top: -6, insetInlineStart: INDICATOR_WIDTH - 16 }}>
             {badge}
           </View>
         ) : null}

package/src/sidebar/SidebarTeamMenu.tsx

@@ -10,6 +10,7 @@ import Animated, {
 
 import { Badge } from '../badge';
 import { useInteractionState } from '../hooks/use-interaction-state';
+import { mirrorAlign, mirrorSide, useIsRtl } from '../hooks/use-is-rtl';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { BREAKPOINTS } from '../styles/breakpoints';
 import { borderRadius } from '../styles/tokens';
@@ -43,7 +44,7 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
  *                     tertiary-hover) that turns over while open (200ms)
  *   card (collapsed)  36px circle, transparent, just the avatar
  *   menu              265 wide, radius 16, 1px border, p10, shadow-dropdown,
- *                     beside the rail (right, bottom-aligned), below it under
+ *                     beside the rail (end side, bottom-aligned), below it under
  *                     `sm`; header, grouped rows with full-bleed dividers
  *                     (10px either side), footer with a version chip
  *   row               p8 radius 10 gap 10, icon 20 secondary, body-medium
@@ -149,6 +150,7 @@ const SidebarTeamMenuComponent: React.FC<SidebarTeamMenuProps> = ({ team, collap
   const narrow = width < BREAKPOINTS.sm;
   const { state: hovered, onIn, onOut } = useInteractionState();
   const reducedMotion = useReducedMotion();
+  const rtl = useIsRtl();
 
   const turn = useSharedValue(0);
   useEffect(() => {
@@ -168,7 +170,7 @@ const SidebarTeamMenuComponent: React.FC<SidebarTeamMenuProps> = ({ team, collap
     const height = expandedHeight + (36 - expandedHeight) * p;
     return { width: inSidebar ? '100%' : naturalWidth.value > 0 ? naturalWidth.value + (36 - naturalWidth.value) * p : p === 1 ? 36 : '100%',
       height,
-      borderRadius: height / 2, paddingLeft: 10 + (compactPadding - 10) * p, paddingRight: 16 + (compactPadding - 16) * p };
+      borderRadius: height / 2, paddingInlineStart: 10 + (compactPadding - 10) * p, paddingInlineEnd: 16 + (compactPadding - 16) * p };
   }, [progress, expandedHeight, inSidebar, naturalWidth, compactPadding]);
   const fill = useAnimatedStyle(() => ({ opacity: 1 - progress.value }), [progress]);
   const cardStyle: WebCssStyle = {
@@ -209,7 +211,7 @@ const SidebarTeamMenuComponent: React.FC<SidebarTeamMenuProps> = ({ team, collap
           <View style={{ flexDirection: 'row', alignItems: 'center', minWidth: 0, flexShrink: 1 }}>
             <SidebarAvatarView avatar={team.avatar} size="md" palette={palette} />
             <Collapsible collapsed={collapsed}>
-              <View style={{ paddingLeft: 8, justifyContent: 'center', alignItems: 'flex-start' }}>
+              <View style={{ paddingInlineStart: 8, justifyContent: 'center', alignItems: 'flex-start' }}>
                 <Text variant="body-medium" numberOfLines={1} style={{ color: palette.text }}>
                   {team.name}
                 </Text>
@@ -241,9 +243,11 @@ const SidebarTeamMenuComponent: React.FC<SidebarTeamMenuProps> = ({ team, collap
         </AnimatedPressable>
       </PopoverTrigger>
       <PopoverContent
-        label={`${team.name} menu`}
-        side={narrow ? 'bottom' : 'right'}
-        align={narrow ? 'start' : 'end'}
+        label={team.menuLabel ?? `${team.name} menu`}
+        // Beside the rail's trailing edge: floating sides are physical, so
+        // they are mirrored here rather than by the layout.
+        side={mirrorSide(narrow ? 'bottom' : 'right', rtl)}
+        align={mirrorAlign(narrow ? 'start' : 'end', narrow ? 'bottom' : 'right', rtl)}
         sideOffset={8}
         maxWidth={width - 32}
         style={SIDEBAR_MENU_PANEL}

package/src/sidebar/SidebarUserMenu.tsx

@@ -4,6 +4,7 @@ import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
 import { Button } from '../button';
 import { useInteractionState } from '../hooks/use-interaction-state';
+import { mirrorAlign, mirrorSide, useIsRtl } from '../hooks/use-is-rtl';
 import { RiAddFill } from '../icons/remix/RiAddFill';
 import { RiEqualizer3Line } from '../icons/remix/RiEqualizer3Line';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
@@ -36,7 +37,7 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
  *              without moving layout. Collapsed: the rail's 36px column, the
  *              pill squared to 42×42 (3px sides).
  *   menu       265 wide, radius 16, border, p10, shadow-dropdown, beside the
- *              rail (right, top-aligned), below it under `sm`: "Users with
+ *              rail (its end side — right in LTR — top-aligned), below it under `sm`: "Users with
  *              access" (pt5, gap 6), rows px8 py6 radius 10 (20px avatar +
  *              body-medium), a full-bleed divider 14px either side, then two
  *              small secondary buttons 12 apart, pb8 so the inset reads 18
@@ -158,6 +159,7 @@ const SidebarUserMenuComponent: React.FC<SidebarUserMenuProps> = ({
   const [open, setOpen] = useState(false);
   const { width } = useWindowDimensions();
   const narrow = width < BREAKPOINTS.sm;
+  const rtl = useIsRtl();
   const { state: hovered, onIn, onOut } = useInteractionState();
 
   const progress = useSidebarCollapseProgress(collapsed);
@@ -208,7 +210,7 @@ const SidebarUserMenuComponent: React.FC<SidebarUserMenuProps> = ({
           />
           <SidebarAvatarView avatar={account.avatar} size="md" palette={palette} background={avatarBackground} />
           <Collapsible collapsed={collapsed}>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 2, paddingLeft: 8 }}>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 2, paddingInlineStart: 8 }}>
               <Text variant="body-medium" numberOfLines={1} style={{ color: palette.text }}>
                 {account.name}
               </Text>
@@ -218,9 +220,10 @@ const SidebarUserMenuComponent: React.FC<SidebarUserMenuProps> = ({
         </AnimatedPressable>
       </PopoverTrigger>
       <PopoverContent
-        label="Account menu"
-        side={narrow ? 'bottom' : 'right'}
-        align="start"
+        label={account.menuLabel ?? 'Account menu'}
+        // Beside the rail's trailing edge; floating sides are physical.
+        side={mirrorSide(narrow ? 'bottom' : 'right', rtl)}
+        align={mirrorAlign('start', narrow ? 'bottom' : 'right', rtl)}
         sideOffset={8}
         maxWidth={width - 32}
         style={SIDEBAR_MENU_PANEL}

package/src/sidebar/types.ts

@@ -28,7 +28,7 @@ export interface SidebarNavItem {
   activeIcon?: SidebarIcon;
   /** Link target. On web the row renders a real anchor. */
   href?: string;
-  /** Counter badge on the right; primary-tinted when the row is selected. */
+  /** Counter badge at the row's end (the right in LTR); primary-tinted when the row is selected. */
   badge?: string | number;
   /**
    * An ACTION row (Settings → a modal): intercepts the navigation. When set,
@@ -87,7 +87,7 @@ export interface SidebarRailItemProps {
   activeIcon?: SidebarIcon;
   label: string;
   href?: string;
-  /** Sits over the indicator's top-right corner. */
+  /** Sits over the indicator's top-end corner (top-right in LTR). */
   badge?: ReactNode;
   selected?: boolean;
   onPress?: () => void;
@@ -158,6 +158,8 @@ export interface SidebarTeam {
   groups?: SidebarMenuGroup[];
   /** Footer line: product name and an optional version chip. */
   footer?: { label: string; version?: string };
+  /** Names the menu the card opens. Default `` `${name} menu` ``. */
+  menuLabel?: string;
 }
 
 export interface SidebarAccountUser {
@@ -210,6 +212,8 @@ export interface SidebarAccount {
   onManage?: () => void;
   addUserLabel?: string;
   manageLabel?: string;
+  /** Names the menu the switcher opens. Default `"Account menu"`. */
+  menuLabel?: string;
 }
 
 export interface SidebarTeamMenuProps {
@@ -289,6 +293,15 @@ export interface SidebarProps {
   /** Rendered inside a mobile drawer: always expanded, close button instead of collapse. */
   mobile?: boolean;
   onClose?: () => void;
+
+  /** The landmark's accessible name. Default `"Sidebar"`. */
+  accessibilityLabel?: string;
+  /** Names the collapse control while expanded. Default `"Collapse sidebar"`. */
+  collapseLabel?: string;
+  /** Names the same control while collapsed. Default `"Expand sidebar"`. */
+  expandLabel?: string;
+  /** Names the `mobile` close button. Default `"Close sidebar"`. */
+  closeLabel?: string;
   /** Expanded width fills the container instead of the size's own width. */
   fluid?: boolean;
   /** The panel's edge. Defaults to `card`. */
@@ -307,8 +320,17 @@ export interface SidebarProps {
   searchShortcutLabel?: string;
   /** Binds ⌘L / Ctrl+L on web. Defaults to true. */
   searchShortcut?: boolean;
+  /** Names the quick-search button. Default `"Quick Search"`. */
   searchLabel?: string;
+  /** Names the search button in a flat `mobile` header. Default `"Search"`. */
+  searchButtonLabel?: string;
+  /** Placeholder. Defaults `"Search navigation…"`, or `"Search..."` in a flat `mobile` header. */
   searchPlaceholder?: string;
+  /** Names the search field. Default `"Filter navigation"`. */
+  filterLabel?: string;
+  /** Names the button that clears and closes the search. Default `"Clear navigation search"`. */
+  clearSearchLabel?: string;
+  /** Default `"No results"`. */
   noResultsLabel?: string;
 
   /**
@@ -346,7 +368,7 @@ export interface SidebarTreeItem {
   onLongPress?: () => void;
   key: string;
   label: string;
-  /** A short chip on the right, e.g. a relative time (`34m`, `now`). */
+  /** A short chip at the row's end (the right in LTR), e.g. a relative time (`34m`, `now`). */
   meta?: string;
   /** Link target (a real anchor on web). */
   href?: string;

package/src/tab-bar/TabBarBase.tsx

@@ -48,6 +48,7 @@ import Animated, {
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useHaptics } from '../hooks/use-haptics';
+import { useDirectionProps, useIsRtl } from '../hooks/use-is-rtl';
 import { useClaimBottomEdge } from '../layout/bottom-edge';
 import { windowEdgeGap } from '../layout/edge';
 import type { ProgressiveBlurProps } from '../progressive-blur/types';
@@ -178,6 +179,14 @@ function TabBarBody({
   const isDragging = useSharedValue(false);
   const lastTicked = useSharedValue(-1);
   const { colors } = useTheme();
+  // The tabs are a flex row, so they mirror under RTL by themselves; the
+  // highlight is a `translateX` from the start edge and the scrub reads a
+  // PHYSICAL `event.x`, so both take the direction explicitly.
+  const rtl = useIsRtl();
+  const dir = rtl ? -1 : 1;
+  // The capsule's `insetInlineStart` must resolve on the same side the row
+  // mirrors to; react-native-web reads that from a `dir` prop, not `<html>`.
+  const dirProps = useDirectionProps();
   const theme = useTabBarTheme(material === 'solid' ? { ...themeOverrides, solidFallback: themeOverrides?.solidFallback ?? colors.backgroundSecondary } : themeOverrides);
   const impact = useHaptics();
 
@@ -310,7 +319,10 @@ function TabBarBody({
       // border edge either way.)
       const barWidth = barOuterWidth - sideInset * 2;
       const itemWidth = (barWidth - ROW_PAD_H * 2) / tabCount;
-      const raw = (x - ROW_PAD_H) / itemWidth - 0.5;
+      // Under RTL the first tab is at the right edge, so distance is measured
+      // from there instead.
+      const fromStart = rtl ? barWidth - x : x;
+      const raw = (fromStart - ROW_PAD_H) / itemWidth - 0.5;
       return Math.min(Math.max(raw, 0), tabCount - 1);
     };
 
@@ -413,6 +425,7 @@ function TabBarBody({
     highlightOpacity,
     minimized,
     progress,
+    rtl,
   ]);
 
   // CRITICAL — every shared value and every scalar a mapper READS must appear
@@ -497,9 +510,9 @@ function TabBarBody({
       // out-of-range one is a real place — one item-width to the LEFT of the
       // first tab, i.e. half outside the pill — not an absence.
       opacity: highlightOpacity.value,
-      transform: [{ translateX: ROW_PAD_H + itemWidth * slideIndex.value }],
+      transform: [{ translateX: dir * (ROW_PAD_H + itemWidth * slideIndex.value) }],
     };
-  }, [progress, slideIndex, highlightOpacity, barOuterWidth, tabCount, minimizeInset]);
+  }, [progress, slideIndex, highlightOpacity, barOuterWidth, tabCount, minimizeInset, dir]);
 
   // Shared with `useTabBarFootprint`, so a consumer accounting for the bar in
   // its own layout can never drift from where the bar actually sits.
@@ -534,7 +547,7 @@ function TabBarBody({
 
   const ResolvedSurface = material === 'solid' ? SolidTabBarSurface : Surface;
   return (
-    <View {...viewProps} onLayout={(event) => { setContainerWidth(event.nativeEvent.layout.width); onLayout?.(event); }} pointerEvents="box-none" style={[embedded ? { width: '100%' } : styles.root, style]}>
+    <View {...viewProps} {...dirProps} onLayout={(event) => { setContainerWidth(event.nativeEvent.layout.width); onLayout?.(event); }} pointerEvents="box-none" style={[embedded ? { width: '100%' } : styles.root, style]}>
       {/* Progressive blur rising from the screen's bottom edge behind the pill.
           Rendered CONDITIONALLY, and as nothing at all when off: the band is
           full-bleed and 114pt tall at a zero bottom inset, so it blurs whatever
@@ -784,7 +797,8 @@ const styles = StyleSheet.create({
   },
   highlight: {
     position: 'absolute',
-    left: 0,
+    // The START edge: the translate above runs from it, signed by direction.
+    insetInlineStart: 0,
     borderCurve: 'continuous',
   },
   itemRow: {

package/src/web-search/WebSearch.tsx

@@ -9,6 +9,7 @@ import React, {
   useState,
 } from 'react';
 import {
+  Image,
   Linking,
   Platform,
   Pressable,
@@ -373,6 +374,7 @@ function SourceMark({
   );
   const tx = useSharedValue(0);
   const ty = useSharedValue(0);
+  const [faviconFailed, setFaviconFailed] = useState(false);
 
   useLayoutEffect(() => {
     const node = ref.current;
@@ -451,6 +453,13 @@ function SourceMark({
         </View>
       ) : source.brand ? (
         <BrandMark brand={source.brand} size={12} palette={palette} />
+      ) : source.faviconUrl && !faviconFailed ? (
+        <Image
+          source={{ uri: source.faviconUrl }}
+          onError={() => setFaviconFailed(true)}
+          resizeMode="contain"
+          style={{ width: 12, height: 12, borderRadius: 2 }}
+        />
       ) : (
         <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: palette.markDot }} />
       )}

package/src/web-search/types.ts

@@ -21,6 +21,12 @@ export interface WebSearchSource {
   href?: string;
   /** Draws that site's real mark in its own colour. */
   brand?: WebSearchBrand;
+  /**
+   * The site's favicon, for a site with no brand mark: an image URL drawn 12×12
+   * in the mark. A brand mark wins over it; an image that fails to load falls
+   * back to the dot, so a missing icon never leaves a broken one.
+   */
+  faviconUrl?: string;
   /**
    * A glyph for anything outside the brand marks — a docs site, a customer's own
    * product. Supplied ready-made and sized by the caller (the slot is 12×12).