jfs-components 0.0.63 → 0.0.64

package/lib/module/components/Drawer/Drawer.js

@@ -126,7 +126,17 @@ function Drawer({
   const updateMode = useCallback(newMode => {
     setMode(newMode);
   }, []);
-  const gesture = Gesture.Pan().simultaneousWithExternalGesture(scrollRef).activeOffsetY([-5, 5]).activeOffsetX([-5, 5]).onStart(() => {
+
+  // Gesture policy:
+  //  • activeOffsetY: require a clear *vertical* drag (10px) before this
+  //    pan claims the gesture.  Matches typical iOS scroll activation feel.
+  //  • failOffsetX:  if the finger crosses ~16px horizontally *before* we
+  //    activate, surrender the gesture entirely so any horizontal child
+  //    (FlatList horizontal, swiper, slider, etc.) can scroll cleanly
+  //    without the drawer also translating on Y.
+  //  • simultaneousWithExternalGesture(scrollRef): cooperate with the
+  //    drawer's own internal vertical ScrollView for nested scrolling.
+  const gesture = Gesture.Pan().simultaneousWithExternalGesture(scrollRef).activeOffsetY([-10, 10]).failOffsetX([-16, 16]).onStart(() => {
     context.value = {
       y: translateY.value
     };
@@ -135,6 +145,16 @@ function Drawer({
     prevAtTop.value = scrollY.value <= 1;
     scrollTopTranslationOffset.value = 0;
   }).onUpdate(event => {
+    // Defense-in-depth: even after vertical activation, if the *current*
+    // motion is dominantly horizontal (e.g., the user activated with a
+    // small Y nudge and then curved into a horizontal swipe on a child
+    // carousel), don't translate the drawer this frame.  failOffsetX
+    // already prevents activation in pure-horizontal swipes; this guards
+    // the diagonal-then-horizontal case.
+    if (Math.abs(event.translationX) > Math.abs(event.translationY) * 1.5) {
+      return;
+    }
+
     // Logic for nested scrolling:
     // If we are at the expanded position (minTranslateY) AND content is
     // scrolled down (scrollY > 0), let the ScrollView handle the gesture.
@@ -246,71 +266,108 @@ function Drawer({
   const titleWeight = getVariableByName('drawer/title/fontWeight', modes) || '700';
   const titleLineHeight = getVariableByName('drawer/title/lineHeight', modes) || 17;
   const titlePaddingBottom = getVariableByName('drawer/titleWrap/padding/bottom', modes) || 8;
+
+  // Drop shadow — Figma layers two shadows (primary + secondary) sharing
+  // the same offsetY/blur but with their own offsetX and color.
+  const shadowPrimaryOffsetX = getVariableByName('drawer/shadow/primary/offsetX', modes) ?? 0;
+  const shadowPrimaryOffsetY = getVariableByName('drawer/shadow/primary/offsetY', modes) ?? 16;
+  const shadowPrimaryBlur = getVariableByName('drawer/shadow/primary/blur', modes) ?? 48;
+  const shadowPrimaryColor = getVariableByName('drawer/shadow/primary/color', modes) ?? 'rgba(12, 13, 16, 0.16)';
+  const shadowSecondaryOffsetX = getVariableByName('drawer/shadow/secondary/offsetX', modes) ?? 0;
+  const shadowSecondaryColor = getVariableByName('drawer/shadow/secondary/color', modes) ?? 'rgba(12, 13, 16, 0.12)';
+
+  // Cross-platform shadow style. Web supports stacking two shadows via
+  // boxShadow. iOS only supports a single native shadow per view, so we
+  // apply the more prominent (primary) one. Android uses elevation.
+  const shadowStyle = Platform.select({
+    web: {
+      boxShadow: `${shadowSecondaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowSecondaryColor}, ` + `${shadowPrimaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowPrimaryColor}`
+    },
+    ios: {
+      shadowColor: shadowPrimaryColor,
+      shadowOffset: {
+        width: shadowPrimaryOffsetX,
+        height: shadowPrimaryOffsetY
+      },
+      shadowOpacity: 1,
+      shadowRadius: shadowPrimaryBlur / 2
+    },
+    android: {
+      elevation: 16
+    },
+    default: {}
+  });
   const defaultAccessibilityLabel = accessibilityLabel || title || 'Drawer';
   return /*#__PURE__*/_jsx(GestureHandlerRootView, {
     style: [styles.host, style],
     pointerEvents: "box-none",
     children: /*#__PURE__*/_jsx(GestureDetector, {
       gesture: gesture,
-      children: /*#__PURE__*/_jsxs(Animated.View, {
+      children: /*#__PURE__*/_jsx(Animated.View, {
         style: [styles.sheet, {
           // Constraint the height strictly to the expanded height
           // This ensures the ScrollView has a finite frame to scroll within
           height: expandedHeight,
           backgroundColor,
           borderTopLeftRadius: radius,
-          borderTopRightRadius: radius,
-          paddingLeft,
-          paddingRight,
-          paddingBottom,
-          rowGap: drawerGap
-        }, sheetStyle, animatedStyle],
+          borderTopRightRadius: radius
+        }, shadowStyle, sheetStyle, animatedStyle],
         accessible: true,
         ...(Platform.OS === 'web' ? {
           accessibilityRole: 'dialog'
         } : undefined),
         accessibilityLabel: undefined,
         accessibilityHint: accessibilityHint || 'Swipe up to expand, swipe down to collapse',
-        children: [/*#__PURE__*/_jsx(View, {
-          style: [styles.handleArea, !title && !header && {
-            paddingBottom: 0
+        children: /*#__PURE__*/_jsxs(View, {
+          style: [styles.sheetInner, {
+            borderTopLeftRadius: radius,
+            borderTopRightRadius: radius,
+            paddingLeft,
+            paddingRight,
+            paddingBottom,
+            rowGap: drawerGap
           }],
-          children: /*#__PURE__*/_jsx(View, {
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.handleArea, !title && !header && {
+              paddingBottom: 0
+            }],
+            children: /*#__PURE__*/_jsx(View, {
+              style: [{
+                backgroundColor: handleColor,
+                width: handleWidth,
+                height: handleHeight,
+                borderRadius: handleRadius
+              }]
+            })
+          }), header, title && /*#__PURE__*/_jsx(Text, {
             style: [{
-              backgroundColor: handleColor,
-              width: handleWidth,
-              height: handleHeight,
-              borderRadius: handleRadius
-            }]
-          })
-        }), header, title && /*#__PURE__*/_jsx(Text, {
-          style: [{
-            color: titleColor,
-            fontSize: titleSize,
-            fontWeight: titleWeight,
-            lineHeight: titleLineHeight,
-            marginBottom: titlePaddingBottom
-          }],
-          children: title
-        }), /*#__PURE__*/_jsx(AnimatedScrollView, {
-          ref: scrollRef,
-          style: [styles.content, contentStyle],
-          contentContainerStyle: [{
-            paddingBottom: paddingBottom + bottomInset,
-            gap: drawerGap,
-            flexDirection: 'column',
-            alignItems: 'stretch'
-          }, contentContainerStyle],
-          showsVerticalScrollIndicator: showsVerticalScrollIndicator,
-          animatedProps: animatedScrollProps,
-          alwaysBounceVertical: false,
-          overScrollMode: "always",
-          onScroll: useAnimatedScrollHandler(event => {
-            scrollY.value = event.contentOffset.y;
-          }),
-          scrollEventThrottle: 16,
-          children: children
-        })]
+              color: titleColor,
+              fontSize: titleSize,
+              fontWeight: titleWeight,
+              lineHeight: titleLineHeight,
+              marginBottom: titlePaddingBottom
+            }],
+            children: title
+          }), /*#__PURE__*/_jsx(AnimatedScrollView, {
+            ref: scrollRef,
+            style: [styles.content, contentStyle],
+            contentContainerStyle: [{
+              paddingBottom: paddingBottom + bottomInset,
+              gap: drawerGap,
+              flexDirection: 'column',
+              alignItems: 'stretch'
+            }, contentContainerStyle],
+            showsVerticalScrollIndicator: showsVerticalScrollIndicator,
+            animatedProps: animatedScrollProps,
+            alwaysBounceVertical: false,
+            overScrollMode: "always",
+            onScroll: useAnimatedScrollHandler(event => {
+              scrollY.value = event.contentOffset.y;
+            }),
+            scrollEventThrottle: 16,
+            children: children
+          })]
+        })
       })
     })
   });
@@ -328,7 +385,10 @@ const styles = StyleSheet.create({
   sheet: {
     width: '100%',
     position: 'absolute',
-    top: 0,
+    top: 0
+  },
+  sheetInner: {
+    flex: 1,
     overflow: 'hidden'
   },
   handleArea: {

package/lib/module/components/Section/Section.js

@@ -2,8 +2,11 @@
 
 import React, { useState, useMemo, useRef, useCallback } from 'react';
 import { View, Text, Pressable, Platform } from 'react-native';
+import Animated, { FadeInUp, FadeOutUp, ReduceMotion, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import NavArrow from '../NavArrow/NavArrow';
+import IconCapsule from '../IconCapsule/IconCapsule';
+import ListItem from '../ListItem/ListItem';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
 import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
 
@@ -32,76 +35,95 @@ const headerFocusStyle = {
 };
 
 // ---------------------------------------------------------------------------
-// Shared grid layout: measures the widest child once per item-count, then
-// renders uniform-width cells laid out with `justify-content: space-between`.
-// This preserves three visual invariants regardless of viewport width:
+// Shared grid layout — first-row-anchored sizing.
+//
+// We measure each cell of the *first row* via `onLayout`, take their max as
+// the canonical cellWidth, then apply that explicit width to every cell in
+// every row. Combined with `justify-content: space-between`, this preserves
+// three visual invariants regardless of viewport width:
 //   1. The first cell hugs the container's left edge.
 //   2. The last cell hugs the container's right edge.
 //   3. Cells in row N column K align with cells in row N+1 column K
 //      (uniform cell width across the whole grid).
-// Pure flex sizing (e.g. `flexBasis: 0; flexGrow: 1`) cannot satisfy (1) and
-// (2) on wide viewports — it distributes extra space inside each cell, which
-// makes the icon+label content drift toward each cell's center and produces
-// visible "dead" margins on the left and right of the grid.
 //
-// To avoid the blank-flash that the previous implementation suffered from
-// (it hid the grid with `opacity: 0` until measurement completed, and reset
-// every measurement when the item count changed):
-//   * Cells render at their *natural* widths during measurement instead of
-//     being hidden. With `space-between`, the first/last cells already hug
-//     the edges; only the column alignment can be off by a few pixels for
-//     the single frame between mount and the onLayout callback.
-//   * On item-count change (e.g. expand / collapse), we clear the per-cell
-//     samples but keep the rendered layout visible — we never blank out.
-//   * No 500ms safety timeout is needed because the grid is visible from the
-//     first frame.
+// Why first-row-anchored?
+//
+// The first row is *always present* (collapsed and expanded both render it),
+// so the measurement happens exactly once on first mount and stays valid for
+// the lifetime of the SlotGrid — the cellWidth is *stable across toggles*.
+// New cells in row 2+ mount when the user expands, and by that time
+// `cellWidth` is already cached, so their `Animated.View` `entering` cascade
+// is never interrupted by a re-measurement-driven re-render.
+//
+// Why not container-width math (e.g. `(containerWidth - gaps) / columns`)?
+// That makes every cell wide enough to fill its share of the row. On wide
+// viewports each cell becomes much wider than its content (icon + label),
+// the content centers inside its oversized cell, and the visible result is
+// a "dead margin" of empty space on the left and right of the grid. Sizing
+// cells to natural content + `space-between` instead pushes the first cell
+// flush left and the last cell flush right, distributing leftover space as
+// the inter-cell gap.
+//
+// Why not measure every cell?
+// The original implementation did, and `max()` could change when the item
+// count changed (collapsed picks one max, expanded another), producing a
+// visible width jump on toggle. The per-cell remeasurement also forced a
+// re-render in the same React batch as the `entering` animation mounting,
+// which Reanimated treats as a cancellation signal — cells visibly didn't
+// animate. Anchoring to the first row eliminates both costs.
+//
+// First-frame behavior is preserved (no blank-flash): until the first-row
+// `onLayout` fires, cells render at their natural width with `space-between`
+// already laying them out correctly; the only thing that changes after
+// measurement is that subsequent rows snap to the same cellWidth so columns
+// align.
 // ---------------------------------------------------------------------------
 const SLOT_GRID_MAX_COLUMNS = 4;
-const slotGridRowStyle = {
+
+// Beyond this many "extra" cells, additional cells reuse the cap delay so very
+// large grids (16, 32, …) still feel snappy instead of cascading for >1s.
+const SLOT_GRID_STAGGER_CAP = 8;
+const SLOT_GRID_ENTER_STAGGER_MS = 35;
+const SLOT_GRID_EXIT_STAGGER_MS = 20;
+const SLOT_GRID_EXIT_DURATION_MS = 160;
+const slotGridRowFlowStyle = {
   flexDirection: 'row',
   justifyContent: 'space-between'
 };
 const SlotGrid = /*#__PURE__*/React.memo(function SlotGrid({
   items,
   gap,
-  maxColumns = SLOT_GRID_MAX_COLUMNS
+  maxColumns = SLOT_GRID_MAX_COLUMNS,
+  animateExtrasFromIndex,
+  animateContainerLayout
 }) {
   const totalItems = items.length;
-  const [maxItemWidth, setMaxItemWidth] = useState(null);
-  // Tracks the item-count that `maxItemWidth` corresponds to. When the
-  // current `totalItems` differs, the existing measurement is considered
-  // stale and cells fall back to natural widths until remeasurement.
-  const [measuredForCount, setMeasuredForCount] = useState(0);
-  const itemWidthsRef = useRef(new Map());
+  const columns = Math.min(maxColumns, totalItems || 1);
+  // Number of cells in the first row. Capped by `columns` (a fully-filled row)
+  // and by `totalItems` (e.g. a 1-item grid has a 1-cell first row).
+  const firstRowSize = Math.min(columns, totalItems);
 
-  // Synchronously invalidate per-cell samples when the item count changes
-  // (e.g. show more / less). We deliberately do NOT touch `maxItemWidth` or
-  // `measuredForCount` state here — flipping them would force an extra render
-  // pass; instead we let the count mismatch (`measuredForCount !== totalItems`)
-  // gate the use of the stale value, and the next onLayout cycle will publish
-  // a fresh `maxItemWidth` for the new count.
-  const prevTotalRef = useRef(totalItems);
-  if (prevTotalRef.current !== totalItems) {
-    prevTotalRef.current = totalItems;
-    itemWidthsRef.current = new Map();
-  }
-  const handleItemLayout = useCallback((index, width) => {
-    const widths = itemWidthsRef.current;
+  // First-row width measurement. Only cells whose `itemIndex < firstRowSize`
+  // get an `onLayout` callback. Once we have a width sample for each first-row
+  // cell, we publish the max and the callbacks become inert — no further
+  // measurement happens for the rest of the SlotGrid's lifetime, so toggles
+  // never trigger a re-measurement-driven re-render.
+  const [firstRowMaxWidth, setFirstRowMaxWidth] = useState(null);
+  const firstRowWidthsRef = useRef(new Map());
+  const handleFirstRowItemLayout = useCallback((index, width) => {
+    const widths = firstRowWidthsRef.current;
     const previous = widths.get(index);
     if (previous !== undefined && Math.abs(previous - width) < 0.5) return;
     widths.set(index, width);
-    if (widths.size >= totalItems && totalItems > 0) {
+    if (widths.size >= firstRowSize && firstRowSize > 0) {
       let newMax = 0;
       for (const w of widths.values()) {
         if (w > newMax) newMax = w;
       }
-      setMaxItemWidth(prev => prev !== null && Math.abs(prev - newMax) < 0.5 ? prev : newMax);
-      setMeasuredForCount(totalItems);
+      setFirstRowMaxWidth(prev => prev !== null && Math.abs(prev - newMax) < 0.5 ? prev : newMax);
     }
-  }, [totalItems]);
-  const hasFreshMeasurement = maxItemWidth !== null && measuredForCount === totalItems;
-  const cellWidth = hasFreshMeasurement ? maxItemWidth : undefined;
-  const columns = Math.min(maxColumns, totalItems || 1);
+  }, [firstRowSize]);
+  const cellWidth = firstRowMaxWidth;
   const rows = [];
   for (let i = 0; i < items.length; i += columns) {
     rows.push(items.slice(i, i + columns));
@@ -109,34 +131,131 @@ const SlotGrid = /*#__PURE__*/React.memo(function SlotGrid({
   const containerStyle = useMemo(() => ({
     gap
   }), [gap]);
-  const measuredCellStyle = useMemo(() => cellWidth !== undefined ? {
+  const cellStyle = useMemo(() => cellWidth !== null ? {
     width: cellWidth
   } : undefined, [cellWidth]);
-  return /*#__PURE__*/_jsx(View, {
-    style: containerStyle,
+
+  // `space-between` distributes any leftover row space as inter-cell gap, so
+  // the first cell is flush-left and the last cell is flush-right regardless
+  // of whether cellWidth has been measured yet. Identical layout strategy
+  // before and after measurement — no first-frame layout shift.
+  const rowStyle = slotGridRowFlowStyle;
+  const animationsEnabled = animateExtrasFromIndex !== undefined;
+  // Resolve the threshold once. When undefined we treat it as
+  // Number.POSITIVE_INFINITY so the per-cell branch always picks the plain
+  // `<View>` path.
+  const extrasThreshold = animationsEnabled ? animateExtrasFromIndex : Number.POSITIVE_INFINITY;
+  // Total count of "extra" cells currently rendered. Used to compute the
+  // reverse-stagger delay for the exiting animation so that the last cell
+  // leaves first.
+  const extrasCount = animationsEnabled ? Math.max(0, totalItems - extrasThreshold) : 0;
+  const useAnimatedContainer = animateContainerLayout === true;
+
+  // Explicit-height clip animation:
+  //
+  // Reanimated's `LinearTransition` interpolates the container's bounds, and
+  // in practice that interpolation drags on the cells inside (they momentarily
+  // appear squashed because the parent is shorter than its natural content
+  // for the duration of the animation). To keep cells at their *natural size
+  // throughout*, we instead:
+  //   1. Render the rows inside an inner `<View>` that sizes to its content
+  //      naturally — cells are never squeezed, never resized.
+  //   2. Wrap that inner view in an `Animated.View` with `overflow: 'hidden'`
+  //      and an explicit `height` driven by a shared value.
+  //   3. The inner view reports its natural height via `onLayout`. The first
+  //      measurement snaps the shared value (no first-mount animation). Every
+  //      subsequent change (e.g. expand/collapse adds or removes rows) springs
+  //      the shared value to the new natural height.
+  //
+  // Visually: the container reveals/conceals content like a curtain, and the
+  // cells never deform.
+  const animatedHeight = useSharedValue(-1);
+  const isFirstHeightLayoutRef = useRef(true);
+  const handleContentLayout = useCallback(e => {
+    const h = e.nativeEvent.layout.height;
+    if (h <= 0) return;
+    if (isFirstHeightLayoutRef.current) {
+      isFirstHeightLayoutRef.current = false;
+      animatedHeight.value = h;
+      return;
+    }
+    animatedHeight.value = withSpring(h, {
+      damping: 22,
+      stiffness: 180,
+      reduceMotion: ReduceMotion.System
+    });
+  }, [animatedHeight]);
+  const animatedHeightStyle = useAnimatedStyle(() => animatedHeight.value < 0 ? {} : {
+    height: animatedHeight.value,
+    overflow: 'hidden'
+  });
+  const rowsChildren = /*#__PURE__*/_jsx(_Fragment, {
     children: rows.map((row, rowIndex) => {
       const spacersNeeded = row.length < columns ? columns - row.length : 0;
       return /*#__PURE__*/_jsxs(View, {
-        style: slotGridRowStyle,
+        style: rowStyle,
         children: [row.map((child, colIndex) => {
           const itemIndex = rowIndex * columns + colIndex;
+          // Only first-row cells participate in measurement, and only
+          // until firstRowMaxWidth has been published. After that the
+          // onLayout becomes a no-op (we elide it).
+          const onLayoutHandler = firstRowMaxWidth === null && itemIndex < firstRowSize ? e => handleFirstRowItemLayout(itemIndex, e.nativeEvent.layout.width) : undefined;
+          if (itemIndex >= extrasThreshold) {
+            const extraOrdinal = itemIndex - extrasThreshold;
+            const enterStaggerSteps = Math.min(extraOrdinal, SLOT_GRID_STAGGER_CAP);
+            const reverseOrdinal = Math.max(0, extrasCount - 1 - extraOrdinal);
+            const exitStaggerSteps = Math.min(reverseOrdinal, SLOT_GRID_STAGGER_CAP);
+            const entering = FadeInUp.springify().damping(18).delay(enterStaggerSteps * SLOT_GRID_ENTER_STAGGER_MS).reduceMotion(ReduceMotion.System);
+            const exiting = FadeOutUp.duration(SLOT_GRID_EXIT_DURATION_MS).delay(exitStaggerSteps * SLOT_GRID_EXIT_STAGGER_MS).reduceMotion(ReduceMotion.System);
+            return /*#__PURE__*/_jsx(Animated.View, {
+              entering: entering,
+              exiting: exiting,
+              ...(onLayoutHandler ? {
+                onLayout: onLayoutHandler
+              } : null),
+              style: cellStyle,
+              children: child
+            }, itemIndex);
+          }
           return /*#__PURE__*/_jsx(View, {
-            onLayout: hasFreshMeasurement ? undefined : e => handleItemLayout(itemIndex, e.nativeEvent.layout.width),
-            style: measuredCellStyle,
+            ...(onLayoutHandler ? {
+              onLayout: onLayoutHandler
+            } : null),
+            style: cellStyle,
             children: child
           }, itemIndex);
-        }), hasFreshMeasurement && spacersNeeded > 0 && Array.from({
+        }), cellWidth !== null && spacersNeeded > 0 && Array.from({
           length: spacersNeeded
         }, (_, i) => /*#__PURE__*/_jsx(View, {
-          style: measuredCellStyle
+          style: cellStyle
         }, `spacer-${i}`))]
       }, rowIndex);
     })
   });
+  if (useAnimatedContainer) {
+    // Outer Animated.View clips and animates height. Inner View holds the
+    // rows at natural size and reports its natural height for the spring
+    // target. Cell-width measurement happens on the cells themselves
+    // (first-row only) — no container-level onLayout is needed.
+    return /*#__PURE__*/_jsx(Animated.View, {
+      style: animatedHeightStyle,
+      children: /*#__PURE__*/_jsx(View, {
+        style: containerStyle,
+        onLayout: handleContentLayout,
+        children: rowsChildren
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: containerStyle,
+    children: rowsChildren
+  });
 }, slotGridPropsAreEqual);
 function slotGridPropsAreEqual(prev, next) {
   if (prev.gap !== next.gap) return false;
   if ((prev.maxColumns ?? SLOT_GRID_MAX_COLUMNS) !== (next.maxColumns ?? SLOT_GRID_MAX_COLUMNS)) return false;
+  if (prev.animateExtrasFromIndex !== next.animateExtrasFromIndex) return false;
+  if (prev.animateContainerLayout !== next.animateContainerLayout) return false;
   if (prev.items === next.items) return true;
   if (prev.items.length !== next.items.length) return false;
   for (let i = 0; i < prev.items.length; i++) {
@@ -423,9 +542,17 @@ function SectionBento({
   // Same rationale as Section: accepted on the type but unused internally.
   accessibilityLabel: _accessibilityLabel,
   accessibilityHint,
+  collapsedCount = SLOT_GRID_MAX_COLUMNS,
+  defaultExpanded = false,
+  expanded: controlledExpanded,
+  onExpandedChange,
+  toggleMoreLabel = 'More',
+  toggleLessLabel = 'Less',
+  toggleMoreIcon = 'ic_chevron_down',
+  toggleLessIcon = 'ic_chevron_up',
+  renderToggle,
   ...rest
 }) {
-  // Resolve section container tokens
   const backgroundColor = getVariableByName('section/background/color', modes) || '#ffffff';
   const gap = getVariableByName('section/gap', modes) || 12;
   const paddingHorizontal = getVariableByName('section/padding/horizontal', modes) || 12;
@@ -440,6 +567,51 @@ function SectionBento({
   }), [backgroundColor, paddingHorizontal, paddingVertical, radius, gap]);
   const processedNavSlot = useMemo(() => navSlot ? cloneChildrenWithModes(flattenChildren(navSlot), modes) : null, [navSlot, modes]);
   const processedUpiSlot = useMemo(() => upiSlot ? cloneChildrenWithModes(flattenChildren(upiSlot), modes) : null, [upiSlot, modes]);
+
+  // `canExpand` is true iff there are strictly more real items than fit into
+  // the collapsed grid. When `allRealItems.length === collapsedCount` we just
+  // render them all with no toggle — identical to the pre-feature behavior.
+  const allRealItems = useMemo(() => processedNavSlot ?? [], [processedNavSlot]);
+  const canExpand = allRealItems.length > collapsedCount;
+  const isControlled = controlledExpanded !== undefined;
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const expanded = isControlled ? controlledExpanded : internalExpanded;
+
+  // Mirror onExpandedChange in a ref so `toggle` can stay referentially stable.
+  const onExpandedChangeRef = useRef(onExpandedChange);
+  onExpandedChangeRef.current = onExpandedChange;
+  const isControlledRef = useRef(isControlled);
+  isControlledRef.current = isControlled;
+  const expandedRef = useRef(expanded);
+  expandedRef.current = expanded;
+  const toggle = useCallback(() => {
+    const next = !expandedRef.current;
+    if (!isControlledRef.current) {
+      setInternalExpanded(next);
+    }
+    onExpandedChangeRef.current?.(next);
+  }, []);
+  const navGridItems = useMemo(() => {
+    if (!canExpand) {
+      return allRealItems;
+    }
+    // Leave the last collapsed slot for the toggle cell.
+    const visibleRealItems = expanded ? allRealItems : allRealItems.slice(0, collapsedCount - 1);
+    const toggleNode = renderToggle ? renderToggle({
+      expanded,
+      toggle
+    }) : /*#__PURE__*/_jsx(DefaultBentoToggle, {
+      expanded: expanded,
+      onPress: toggle,
+      modes: modes,
+      moreLabel: toggleMoreLabel,
+      lessLabel: toggleLessLabel,
+      moreIcon: toggleMoreIcon,
+      lessIcon: toggleLessIcon,
+      extraCount: allRealItems.length - (collapsedCount - 1)
+    });
+    return [...visibleRealItems, toggleNode];
+  }, [canExpand, allRealItems, expanded, collapsedCount, renderToggle, toggle, modes, toggleMoreLabel, toggleLessLabel, toggleMoreIcon, toggleLessIcon]);
   return /*#__PURE__*/_jsxs(View, {
     style: [containerStyle, style],
     ...(Platform.OS === 'web' ? {
@@ -448,9 +620,13 @@ function SectionBento({
     accessibilityLabel: undefined,
     accessibilityHint: accessibilityHint,
     ...rest,
-    children: [processedNavSlot && /*#__PURE__*/_jsx(SlotGrid, {
-      items: processedNavSlot,
-      gap: gap
+    children: [navGridItems.length > 0 && /*#__PURE__*/_jsx(SlotGrid, {
+      items: navGridItems,
+      gap: gap,
+      ...(canExpand ? {
+        animateExtrasFromIndex: collapsedCount,
+        animateContainerLayout: true
+      } : null)
     }), processedUpiSlot && /*#__PURE__*/_jsx(View, {
       style: sectionBentoUpiRowStyle,
       children: processedUpiSlot
@@ -458,6 +634,52 @@ function SectionBento({
   });
 }
 
+// ---------------------------------------------------------------------------
+// DefaultBentoToggle — internal toggle cell rendered by `SectionBento` when no
+// `renderToggle` prop is provided. Uses a vertical `ListItem` so the cell
+// matches the visual rhythm of the surrounding nav items in every mode.
+//
+// Two icons (`ic_chevron_down` / `ic_chevron_up`) are used instead of a
+// rotating single icon, because the toggle cell is reconciled by position
+// (collapsed: end of row 1; expanded: end of last row), so any persistent
+// shared-value-driven rotation would lose its anchor across toggles.
+// ---------------------------------------------------------------------------
+
+function DefaultBentoToggle({
+  expanded,
+  onPress,
+  modes,
+  moreLabel,
+  lessLabel,
+  moreIcon,
+  lessIcon,
+  extraCount
+}) {
+  const label = expanded ? lessLabel : moreLabel;
+  const iconName = expanded ? lessIcon : moreIcon;
+  const accessibilityState = useMemo(() => ({
+    expanded
+  }), [expanded]);
+  const webAccessibilityProps = useMemo(() => ({
+    ariaExpanded: expanded
+  }), [expanded]);
+  const accessibilityHint = expanded ? `Hides ${extraCount} additional ${extraCount === 1 ? 'action' : 'actions'}` : `Shows ${extraCount} additional ${extraCount === 1 ? 'action' : 'actions'}`;
+  return /*#__PURE__*/_jsx(ListItem, {
+    layout: "Vertical",
+    supportText: label,
+    leading: /*#__PURE__*/_jsx(IconCapsule, {
+      iconName: iconName,
+      modes: modes
+    }),
+    modes: modes,
+    onPress: onPress,
+    accessibilityLabel: label,
+    accessibilityHint: accessibilityHint,
+    accessibilityState: accessibilityState,
+    webAccessibilityProps: webAccessibilityProps
+  });
+}
+
 // Attach Bento as a property of Section using namespace pattern
 Section.Bento = SectionBento;
 export default Section;