pixelize-native-library 1.0.7 → 1.2.1

package/lib/module/modules/bottom-nav/BottomNav.variants.js

@@ -47,6 +47,14 @@ export const BOTTOM_NAV_BADGE_FONT_SIZE = 10;
 /** The More trigger's presence-only badge dot — same quiet idiom as the bar's active-indicator dot;
  *  the summed count still reaches AT users through the trigger's accessible name. */
 export const BOTTOM_NAV_BADGE_DOT_SIZE = 8;
+
+/** The active-tab dot. Geometry is static — selection is animated on opacity/scale only, so the
+ *  bar never reflows when the active tab changes. */
+export const BOTTOM_NAV_ACTIVE_DOT_SIZE = 6;
+
+/** The one settle magnitude the bar owns: the scale both the active dot and a badge grow FROM as
+ *  they fade in, so every appearance in this module reads as the same gesture. */
+export const BOTTOM_NAV_SETTLE_SCALE = 0.8;
 /** `undefined`/`0` (or any non-positive count) resolves to `null` — the badge renders nothing and
  *  leaves the accessible name untouched. */
 export function resolveBottomNavBadge(count) {
@@ -112,8 +120,8 @@ export function resolveOverflowSheetHeight(windowHeight) {
  */
 export function resolveBottomNavTabColors(colors, active) {
   return {
-    icon: active ? colors.fg.default : colors.fg.muted,
-    label: active ? colors.fg.default : colors.fg.muted,
+    icon: active ? colors.accent.text : colors.fg.muted,
+    label: active ? colors.accent.text : colors.fg.muted,
     indicator: colors.accent.solid
   };
 }
@@ -129,19 +137,16 @@ export function resolveBottomNavBadgeColors(colors) {
   };
 }
 /**
- * Derives one tab's accessibility surface once, purely (WCAG 4.1.2): `selected` is required,
- * `expanded` and `disabled` are folded in only when the caller actually passes them, so a plain
- * core tab's `accessibilityState` never carries a stray `expanded: undefined` key.
+ * Derives one tab's accessibility surface once, purely (WCAG 4.1.2): `selected` is required, while
+ * `expanded` and `disabled` stay `undefined` unless the caller passes them — React drops an
+ * `undefined` prop, so a plain core tab renders neither attribute.
  */
 export function resolveBottomNavAccessibility(input) {
-  const accessibilityState = {
-    selected: input.selected
-  };
-  if (input.expanded !== undefined) accessibilityState.expanded = input.expanded;
-  if (input.disabled !== undefined) accessibilityState.disabled = input.disabled;
   return {
     accessibilityRole: "tab",
-    accessibilityState
+    "aria-selected": input.selected,
+    "aria-expanded": input.expanded,
+    "aria-disabled": input.disabled
   };
 }
 /** Pure "is this the targeted slot" derivation, shared by the render tree and its tests — the same
@@ -152,13 +157,10 @@ export function resolveEditRowState(input) {
   };
 }
 
-/** The bar container: tabs laid out as equal-width flex children, top border separating it from the
- *  screen content above. Colour (border, background) is resolved from role tokens and applied
- *  inline over this — never a hardcoded hex here. */
-export const bottomNavBarStructure = createThemedVariants(theme => ({
+/** Tabs laid out as equal-width flex children; the bar separates from content by tone + elevation. */
+export const bottomNavBarStructure = createThemedVariants(_theme => ({
   base: {
-    flexDirection: "row",
-    borderTopWidth: theme.borderWidths.thin
+    flexDirection: "row"
   }
 }));
 
@@ -175,6 +177,21 @@ export const bottomNavTabStructure = createThemedVariants(theme => ({
   }
 }));
 
+/** The keyboard/AT focus ring drawn over one tab's own bounds — same `border.focus` treatment
+ *  Button/Input use. Its colour is applied inline over this, never hardcoded here. */
+export const bottomNavFocusRingStructure = createThemedVariants(theme => ({
+  base: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth: theme.borderWidths.thick,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }
+}));
+
 /** One row inside the overflow sheet — Recent, a grouped section's destination, or a search result.
  *  Same shape as Select's own `selectRowStructure` / Menu's `menuRowStructure`. */
 export const overflowRowStructure = createThemedVariants(theme => ({
@@ -223,7 +240,8 @@ export const editRowStructure = createThemedVariants(theme => ({
     minHeight: MIN_TOUCH_TARGET,
     columnGap: theme.space[2],
     paddingHorizontal: theme.space[3],
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   }
 }));
 //# sourceMappingURL=BottomNav.variants.js.map

package/lib/module/modules/bottom-nav/BottomNavIconWithBadge.js

@@ -14,11 +14,12 @@
  * accessible name but never passes that fresh-per-render object down.
  */
 
-import { memo } from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { memo, useEffect, useMemo, useRef } from "react";
+import { Animated, StyleSheet, Text, View } from "react-native";
 import { Icon } from "../../core/icon/index.js";
-import { useTheme } from "../../theme/index.js";
-import { BOTTOM_NAV_BADGE_DOT_SIZE, BOTTOM_NAV_BADGE_FONT_SIZE, bottomNavBadgePillStructure, resolveBottomNavBadge, resolveBottomNavBadgeColors } from "./BottomNav.variants.js";
+import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { BOTTOM_NAV_BADGE_DOT_SIZE, BOTTOM_NAV_BADGE_FONT_SIZE, BOTTOM_NAV_SETTLE_SCALE, bottomNavBadgePillStructure, resolveBottomNavBadge, resolveBottomNavBadgeColors } from "./BottomNav.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 const DOT_OFFSET = -2;
@@ -31,26 +32,67 @@ export const BottomNavIconWithBadge = /*#__PURE__*/memo(function BottomNavIconWi
   badgeTestID
 }) {
   const theme = useTheme();
+  const motion = useMotion();
   const badge = resolveBottomNavBadge(badgeCount);
   const badgeColors = resolveBottomNavBadgeColors(theme.colors);
+  const settle = useAnimatedValue(badge === null ? 0 : 1);
+  const running = useRef(null);
+  const firstRun = useRef(true);
+  const settleMotionStyle = useMemo(() => ({
+    opacity: settle,
+    transform: [{
+      scale: settle.interpolate({
+        inputRange: [0, 1],
+        outputRange: [BOTTOM_NAV_SETTLE_SCALE, 1]
+      })
+    }]
+  }), [settle]);
+  // No animation runs under reduce motion, so the settled style is rendered directly.
+  const settleStyle = motion.enabled ? settleMotionStyle : styles.settled;
+
+  // Keyed on the DISPLAY label, so a count change inside the "99+" cap doesn't re-settle a pill
+  // that looks identical.
+  const badgeLabel = badge?.label;
+  useEffect(() => {
+    // A badge already present at mount is part of the bar's resting state, not an appearance.
+    const onMount = firstRun.current;
+    firstRun.current = false;
+    running.current?.stop();
+    if (badgeLabel === undefined) {
+      settle.setValue(0);
+      return;
+    }
+    if (onMount || !motion.enabled) {
+      settle.setValue(1);
+      return;
+    }
+    settle.setValue(0);
+    running.current = motion.timing(settle, 1, {
+      duration: "fast",
+      easing: "decelerate"
+    });
+    running.current.start();
+    return () => running.current?.stop();
+  }, [badgeLabel, motion, settle]);
+  useEffect(() => () => running.current?.stop(), []);
   return /*#__PURE__*/_jsxs(View, {
     children: [/*#__PURE__*/_jsx(Icon, {
       name: icon,
       size: iconSize,
       color: iconColor,
       strokeWidth: ICON_STROKE
-    }), badge !== null && (appearance === "dot" ? /*#__PURE__*/_jsx(View, {
+    }), badge !== null && (appearance === "dot" ? /*#__PURE__*/_jsx(Animated.View, {
       testID: badgeTestID,
       pointerEvents: "none",
       style: [styles.dot, {
         backgroundColor: badgeColors.fill
-      }]
-    }) : /*#__PURE__*/_jsx(View, {
+      }, settleStyle]
+    }) : /*#__PURE__*/_jsx(Animated.View, {
       testID: badgeTestID,
       pointerEvents: "none",
       style: [bottomNavBadgePillStructure(theme), {
         backgroundColor: badgeColors.fill
-      }],
+      }, settleStyle],
       children: /*#__PURE__*/_jsx(Text, {
         numberOfLines: 1,
         style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
@@ -63,6 +105,12 @@ export const BottomNavIconWithBadge = /*#__PURE__*/memo(function BottomNavIconWi
   });
 });
 const styles = StyleSheet.create({
+  settled: {
+    opacity: 1,
+    transform: [{
+      scale: 1
+    }]
+  },
   dot: {
     position: "absolute",
     top: DOT_OFFSET,

package/lib/module/modules/bottom-nav/BottomNavOverflowSheet.js

@@ -20,11 +20,12 @@
  * "Controlled-state contract" for why these two — and only these two — are internal.
  */
 
-import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { Animated, Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from "react-native";
-import { useReducedMotion } from "../../core/a11y/index.js";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, Platform, Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from "react-native";
 import { Icon } from "../../core/icon/index.js";
-import { useTheme } from "../../theme/index.js";
+import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { Button } from "../button/index.js";
 import { Input } from "../input/index.js";
 import { editRowStructure, EDIT_SLOT_INDICATOR_SIZE, OVERFLOW_ROW_ICON_SIZE, overflowRowStructure, overflowSectionHeaderStructure, resolveBottomNavBadge, resolveBottomNavDestinationAccessibilityLabel, resolveEditRowState, resolveOverflowSheetHeight } from "./BottomNav.variants.js";
@@ -46,7 +47,6 @@ export const BottomNavOverflowSheet = /*#__PURE__*/memo(function BottomNavOverfl
   testID
 }) {
   const theme = useTheme();
-  const reducedMotion = useReducedMotion();
   const {
     height: windowHeight
   } = useWindowDimensions();
@@ -72,6 +72,14 @@ export const BottomNavOverflowSheet = /*#__PURE__*/memo(function BottomNavOverfl
     }
     wasEditing.current = isEditing;
   }, [edit?.editing, coreTabs.length]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode)
+  } : undefined, [theme.mode]);
+  const rowStyle = useCallback(({
+    pressed
+  }) => [overflowRowStructure(theme), pressed && {
+    backgroundColor: theme.colors.bg.sunken
+  }], [theme]);
   const sheetHeight = resolveOverflowSheetHeight(windowHeight);
   const isSearching = normalizeQuery(query).length > 0;
   const matches = isSearching ? matchDestinations(query, overflowSections) : [];
@@ -106,11 +114,10 @@ export const BottomNavOverflowSheet = /*#__PURE__*/memo(function BottomNavOverfl
       accessibilityLabel: destination.accessibilityLabel,
       badge: resolveBottomNavBadge(destination.badge)
     }),
-    accessibilityState: {
-      selected: isRowSelected(destination.id)
-    },
+    "aria-selected": isRowSelected(destination.id),
     onPress: () => handleRowPress(destination),
-    style: overflowRowStructure(theme),
+    android_ripple: androidRipple,
+    style: rowStyle,
     children: [/*#__PURE__*/_jsx(BottomNavIconWithBadge, {
       icon: destination.icon,
       iconSize: OVERFLOW_ROW_ICON_SIZE,
@@ -138,135 +145,164 @@ export const BottomNavOverflowSheet = /*#__PURE__*/memo(function BottomNavOverfl
       children: label
     })
   });
-  return /*#__PURE__*/_jsxs(View, {
-    testID: testID,
-    style: {
-      maxHeight: sheetHeight
-    },
-    children: [edit !== undefined && /*#__PURE__*/_jsx(View, {
-      style: [styles.editHeader, {
-        paddingHorizontal: theme.space[4],
-        paddingTop: theme.space[2]
-      }],
-      children: /*#__PURE__*/_jsx(Button, {
-        variant: "ghost",
-        tone: "neutral",
-        size: "sm",
-        label: edit.editing ? edit.doneLabel ?? "Done" : edit.editLabel ?? "Edit",
-        onPress: handleEditToggle,
-        testID: testID ? `${testID}-edit-toggle` : undefined
-      })
-    }), edit !== undefined && edit.editing && /*#__PURE__*/_jsxs(View, {
-      testID: testID ? `${testID}-edit-slots` : undefined,
-      children: [coreTabs.map((tab, index) => {
-        const rowState = resolveEditRowState({
-          slotIndex: index,
-          selectedSlotIndex
-        });
-        return /*#__PURE__*/_jsx(EditSlotChip, {
-          tab: tab,
-          index: index,
-          selected: rowState.selected,
-          reducedMotion: reducedMotion,
-          theme: theme,
-          onPress: handleSlotPress,
-          testID: testID ? `${testID}-edit-slot-${index}` : undefined
-        }, tab.id);
-      }), edit.onResetToDefault !== undefined && /*#__PURE__*/_jsxs(Pressable, {
-        testID: testID ? `${testID}-reset` : undefined,
-        accessibilityRole: "menuitem",
-        onPress: edit.onResetToDefault,
-        style: editRowStructure(theme),
-        children: [/*#__PURE__*/_jsx(Icon, {
-          name: "refresh-cw",
-          size: OVERFLOW_ROW_ICON_SIZE,
-          color: theme.colors.fg.default,
-          strokeWidth: ICON_STROKE
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
-            flex: 1,
-            fontSize: theme.fontSizes.md,
-            color: theme.colors.fg.default
-          }],
-          children: edit.resetLabel ?? "Reset to default"
-        })]
-      })]
-    }), /*#__PURE__*/_jsx(View, {
+  return (
+    /*#__PURE__*/
+    // Keyboard avoidance for this sheet is handled by `Drawer` itself (it grows its own bottom
+    // padding by the keyboard height, since it — not this content — owns the bottom-anchored
+    // position); this stays a plain height-capped View.
+    _jsxs(View, {
+      testID: testID,
       style: {
-        paddingHorizontal: theme.space[4],
-        paddingBottom: theme.space[2]
+        maxHeight: sheetHeight
       },
-      children: /*#__PURE__*/_jsx(Input, {
-        value: query,
-        onChangeText: setQuery,
-        leadingIcon: "search",
-        placeholder: searchPlaceholder,
-        accessibilityLabel: searchAccessibilityLabel,
-        testID: testID ? `${testID}-search` : undefined
-      })
-    }), /*#__PURE__*/_jsx(ScrollView, {
-      bounces: false,
-      keyboardShouldPersistTaps: "handled",
-      children: isSearching ? matches.length > 0 ? matches.map(match => renderRow(match.destination, "result")) : /*#__PURE__*/_jsx(Text, {
-        testID: testID ? `${testID}-no-results` : undefined,
-        style: [theme.fontStyleForWeight(theme.fontWeights.regular), styles.noResults, {
-          color: theme.colors.fg.muted,
-          fontSize: theme.fontSizes.md,
-          paddingVertical: theme.space[6]
+      children: [edit !== undefined && /*#__PURE__*/_jsx(View, {
+        style: [styles.editHeader, {
+          paddingHorizontal: theme.space[4],
+          paddingTop: theme.space[2]
         }],
-        children: noResultsLabel
-      }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [recent.length > 0 && /*#__PURE__*/_jsxs(View, {
-          children: [renderSectionHeader(recentLabel), recent.map(destination => renderRow(destination, "recent"))]
-        }), overflowSections.map(section => /*#__PURE__*/_jsxs(View, {
-          children: [section.label !== undefined && renderSectionHeader(section.label), section.destinations.map(destination => renderRow(destination, "result"))]
-        }, section.id))]
-      })
-    })]
-  });
+        children: /*#__PURE__*/_jsx(Button, {
+          variant: "ghost",
+          tone: "neutral",
+          size: "sm",
+          label: edit.editing ? edit.doneLabel ?? "Done" : edit.editLabel ?? "Edit",
+          onPress: handleEditToggle,
+          testID: testID ? `${testID}-edit-toggle` : undefined
+        })
+      }), edit !== undefined && edit.editing && /*#__PURE__*/_jsxs(View, {
+        testID: testID ? `${testID}-edit-slots` : undefined,
+        children: [coreTabs.map((tab, index) => {
+          const rowState = resolveEditRowState({
+            slotIndex: index,
+            selectedSlotIndex
+          });
+          return /*#__PURE__*/_jsx(EditSlotChip, {
+            tab: tab,
+            index: index,
+            selected: rowState.selected,
+            theme: theme,
+            onPress: handleSlotPress,
+            testID: testID ? `${testID}-edit-slot-${index}` : undefined
+          }, tab.id);
+        }), edit.onResetToDefault !== undefined && /*#__PURE__*/_jsxs(Pressable, {
+          testID: testID ? `${testID}-reset` : undefined,
+          accessibilityRole: "menuitem",
+          onPress: edit.onResetToDefault,
+          android_ripple: androidRipple,
+          style: ({
+            pressed
+          }) => [editRowStructure(theme), pressed && {
+            backgroundColor: theme.colors.bg.sunken
+          }],
+          children: [/*#__PURE__*/_jsx(Icon, {
+            name: "refresh-cw",
+            size: OVERFLOW_ROW_ICON_SIZE,
+            color: theme.colors.fg.default,
+            strokeWidth: ICON_STROKE
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+              flex: 1,
+              fontSize: theme.fontSizes.md,
+              color: theme.colors.fg.default
+            }],
+            children: edit.resetLabel ?? "Reset to default"
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          paddingHorizontal: theme.space[4],
+          paddingBottom: theme.space[2]
+        },
+        children: /*#__PURE__*/_jsx(Input, {
+          value: query,
+          onChangeText: setQuery,
+          leadingIcon: "search",
+          placeholder: searchPlaceholder,
+          accessibilityLabel: searchAccessibilityLabel,
+          testID: testID ? `${testID}-search` : undefined,
+          autoComplete: "off"
+        })
+      }), /*#__PURE__*/_jsx(ScrollView, {
+        bounces: false,
+        keyboardShouldPersistTaps: "handled",
+        children: isSearching ? matches.length > 0 ? matches.map(match => renderRow(match.destination, "result")) : /*#__PURE__*/_jsx(Text, {
+          testID: testID ? `${testID}-no-results` : undefined,
+          style: [theme.fontStyleForWeight(theme.fontWeights.regular), styles.noResults, {
+            color: theme.colors.fg.muted,
+            fontSize: theme.fontSizes.md,
+            paddingVertical: theme.space[6]
+          }],
+          children: noResultsLabel
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [recent.length > 0 && /*#__PURE__*/_jsxs(View, {
+            children: [renderSectionHeader(recentLabel), recent.map(destination => renderRow(destination, "recent"))]
+          }), overflowSections.map(section => /*#__PURE__*/_jsxs(View, {
+            children: [section.label !== undefined && renderSectionHeader(section.label), section.destinations.map(destination => renderRow(destination, "result"))]
+          }, section.id))]
+        })
+      })]
+    })
+  );
 });
-const INDICATOR_FADE_MS = 150;
-
 /**
  * One core-tab slot chip in the edit-mode mini-list. Its own component (not inlined in the `.map()`
  * above) for the same reason `Reorder`'s own `ReorderRow` is split out: the selected-indicator fade
  * needs a per-row `useEffect` instance, and Rules of Hooks forbid calling one inside a loop body.
  *
- * The selected indicator is an `Animated.Value` opacity fade (0 → 1), not a colour swap — the same
- * "presence/absence, not a re-tint" principle the bar's own active dot documents — collapsed to an
- * instant `setValue` under reduced motion (WCAG 2.3.3), the identical idiom `Reorder`'s row-shift and
- * `Accordion`'s chevron rotation already use for their own per-item animated values.
+ * The selected indicator is an opacity fade (0 → 1), not a colour swap — the same "presence/absence,
+ * not a re-tint" principle the bar's own active dot documents — timed by `core/motion` and collapsed
+ * to the resting state under reduced motion (WCAG 2.3.3), exactly as `BottomNavTab`'s own dot is.
  */
 const EditSlotChip = /*#__PURE__*/memo(function EditSlotChip({
   tab,
   index,
   selected,
-  reducedMotion,
   theme,
   onPress,
   testID
 }) {
-  const opacity = useRef(new Animated.Value(selected ? 1 : 0)).current;
+  const motion = useMotion();
+  const opacity = useAnimatedValue(selected ? 1 : 0);
+  const running = useRef(null);
+  const opacityMotionStyle = useMemo(() => ({
+    opacity
+  }), [opacity]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode)
+  } : undefined, [theme.mode]);
+  const chipStyle = useCallback(({
+    pressed
+  }) => [editRowStructure(theme), pressed && {
+    backgroundColor: theme.colors.bg.sunken
+  }], [theme]);
   useEffect(() => {
-    if (reducedMotion) {
-      opacity.setValue(selected ? 1 : 0);
+    const toValue = selected ? 1 : 0;
+    running.current?.stop();
+    if (!motion.enabled) {
+      opacity.setValue(toValue);
       return;
     }
-    Animated.timing(opacity, {
-      toValue: selected ? 1 : 0,
-      duration: INDICATOR_FADE_MS,
-      useNativeDriver: true
-    }).start();
-  }, [opacity, selected, reducedMotion]);
+    running.current = motion.timing(opacity, toValue, {
+      duration: "fast"
+    });
+    running.current.start();
+    return () => running.current?.stop();
+  }, [opacity, selected, motion]);
+  useEffect(() => () => running.current?.stop(), []);
   return /*#__PURE__*/_jsxs(Pressable, {
     testID: testID,
-    accessibilityRole: "button",
+    accessibilityRole: "button"
+    // A toggle button, not a tab/option, so the correct WEB signal is `aria-pressed` — `aria-
+    // selected` is invalid on `role="button"`. `aria-pressed` has no RN equivalent, so native
+    // rides `accessibilityState` instead (RNW discards that object, so the two never collide).
+    ,
+    "aria-pressed": selected,
     accessibilityState: {
       selected
     },
     accessibilityLabel: `${tab.label}, slot ${index + 1}`,
     onPress: () => onPress(index),
-    style: editRowStructure(theme),
+    android_ripple: androidRipple,
+    style: chipStyle,
     children: [/*#__PURE__*/_jsx(Icon, {
       name: tab.icon,
       size: OVERFLOW_ROW_ICON_SIZE,
@@ -282,13 +318,9 @@ const EditSlotChip = /*#__PURE__*/memo(function EditSlotChip({
       children: tab.label
     }), /*#__PURE__*/_jsx(Animated.View, {
       testID: testID ? `${testID}-indicator` : undefined,
-      style: {
-        width: EDIT_SLOT_INDICATOR_SIZE,
-        height: EDIT_SLOT_INDICATOR_SIZE,
-        borderRadius: EDIT_SLOT_INDICATOR_SIZE / 2,
-        backgroundColor: theme.colors.accent.solid,
-        opacity
-      }
+      style: [styles.slotIndicator, {
+        backgroundColor: theme.colors.accent.solid
+      }, motion.enabled ? opacityMotionStyle : selected ? styles.slotIndicatorShown : styles.slotIndicatorHidden]
     })]
   });
 });
@@ -299,6 +331,17 @@ const styles = StyleSheet.create({
   },
   noResults: {
     textAlign: "center"
+  },
+  slotIndicator: {
+    width: EDIT_SLOT_INDICATOR_SIZE,
+    height: EDIT_SLOT_INDICATOR_SIZE,
+    borderRadius: EDIT_SLOT_INDICATOR_SIZE / 2
+  },
+  slotIndicatorShown: {
+    opacity: 1
+  },
+  slotIndicatorHidden: {
+    opacity: 0
   }
 });
 //# sourceMappingURL=BottomNavOverflowSheet.js.map