@seed-design/lynx-react 0.7.1 → 0.8.0

package/src/components/Slider/Slider.utils.ts

@@ -0,0 +1,167 @@
+export interface SliderGeometry {
+  left: number;
+  width: number;
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function percentageForValue(value: number, min: number, max: number): number {
+  if (max === min) return 0;
+  return clamp(((value - min) / (max - min)) * 100, 0, 100);
+}
+
+export function valueForPercentage(
+  percent: number,
+  min: number,
+  max: number,
+  dir: "ltr" | "rtl",
+): number {
+  const ratio = clamp(percent, 0, 100) / 100;
+  return dir === "rtl" ? max - ratio * (max - min) : min + ratio * (max - min);
+}
+
+export function decimalCount(value: number): number {
+  const text = String(value);
+  const exponent = text.toLowerCase().split("e");
+  const fraction = exponent[0].split(".")[1]?.length ?? 0;
+  return fraction + (exponent[1] ? Math.max(0, -Number(exponent[1])) : 0);
+}
+
+export function roundValue(value: number, decimals: number): number {
+  const factor = 10 ** decimals;
+  return Math.round(value * factor) / factor;
+}
+
+export function closestAllowedValue(value: number, allowedValues: readonly number[]): number {
+  if (allowedValues.length === 0) return value;
+  let closest = allowedValues[0];
+  let distance = Math.abs(value - closest);
+  for (let index = 1; index < allowedValues.length; index += 1) {
+    const candidate = allowedValues[index];
+    const candidateDistance = Math.abs(value - candidate);
+    if (candidateDistance < distance) {
+      closest = candidate;
+      distance = candidateDistance;
+    }
+  }
+  return closest;
+}
+
+export function normalizeValue(
+  value: number,
+  min: number,
+  max: number,
+  step: number,
+  allowedValues?: readonly number[],
+): number {
+  const safeMin = Math.min(min, max);
+  const safeMax = Math.max(min, max);
+  const candidate = Number.isFinite(value) ? value : safeMin;
+  if (allowedValues && allowedValues.length > 0) {
+    return closestAllowedValue(candidate, allowedValues);
+  }
+  const safeStep = Number.isFinite(step) && step > 0 ? step : 1;
+  const decimals = Math.max(decimalCount(safeStep), decimalCount(safeMin));
+  return clamp(
+    roundValue(Math.round((candidate - safeMin) / safeStep) * safeStep + safeMin, decimals),
+    safeMin,
+    safeMax,
+  );
+}
+
+export function normalizeValues(
+  values: readonly number[] | undefined,
+  min: number,
+  max: number,
+  step: number,
+  allowedValues?: readonly number[],
+): number[] {
+  const source = values && values.length > 0 ? values : [(min + max) / 2];
+  return source
+    .map((value) => normalizeValue(value, min, max, step, allowedValues))
+    .sort((a, b) => a - b);
+}
+
+export function nearestValueIndex(values: readonly number[], value: number): number {
+  if (values.length < 2) return 0;
+  let index = 0;
+  let distance = Math.abs(values[0] - value);
+  for (let candidate = 1; candidate < values.length; candidate += 1) {
+    const candidateDistance = Math.abs(values[candidate] - value);
+    if (candidateDistance < distance) {
+      index = candidate;
+      distance = candidateDistance;
+    }
+  }
+  return index;
+}
+
+export function hasMinimumSteps(
+  values: readonly number[],
+  minimumSteps: number,
+  step: number,
+): boolean {
+  if (minimumSteps <= 0 || values.length < 2) return true;
+  const safeStep = Number.isFinite(step) && step > 0 ? step : 1;
+  const decimals = decimalCount(safeStep);
+  const required = roundValue(minimumSteps * safeStep, decimals);
+  for (let index = 1; index < values.length; index += 1) {
+    const difference = roundValue(values[index] - values[index - 1], decimals);
+    if (difference < required) return false;
+  }
+  return true;
+}
+
+export function getThumbInBoundsOffset(width: number, percent: number, direction: 1 | -1): number {
+  if (!width) return 0;
+  const halfWidth = width / 2;
+  const scaledOffset = (clamp(percent, 0, 100) / 50) * halfWidth;
+  return (halfWidth - scaledOffset * direction) * direction;
+}
+
+export function getStickyLabelOffset(
+  labelWidth: number,
+  percent: number,
+  thumbWidth: number,
+  trackWidth: number,
+  direction: 1 | -1,
+): number {
+  if (!labelWidth || !trackWidth) return 0;
+  const thumbOffset = getThumbInBoundsOffset(thumbWidth, percent, direction);
+  const naturalCenter = (percent / 100) * trackWidth + thumbOffset;
+  const halfLabel = labelWidth / 2;
+  const center = clamp(naturalCenter, halfLabel, trackWidth - halfLabel);
+  return (center - (percent / 100) * trackWidth) * direction;
+}
+
+export function eventPageX(event: unknown): number {
+  const target = event as {
+    touches?: Array<{ pageX?: unknown; clientX?: unknown }>;
+    changedTouches?: Array<{ pageX?: unknown; clientX?: unknown }>;
+    pageX?: unknown;
+    clientX?: unknown;
+    detail?: { x?: unknown };
+  } | null;
+  const touch = target?.touches?.[0] ?? target?.changedTouches?.[0];
+  const candidates = [
+    touch?.pageX,
+    touch?.clientX,
+    target?.pageX,
+    target?.clientX,
+    target?.detail?.x,
+  ];
+  for (const candidate of candidates) {
+    const number = Number(candidate);
+    if (Number.isFinite(number)) return number;
+  }
+  return Number.NaN;
+}
+
+export function geometryFromRect(value: unknown): SliderGeometry | null {
+  const rect = value as { left?: unknown; width?: unknown } | null | undefined;
+  const left = Number(rect?.left);
+  const width = Number(rect?.width);
+  return Number.isFinite(left) && Number.isFinite(width) && width > 0 ? { left, width } : null;
+}

package/src/components/Slider/index.ts

@@ -0,0 +1,30 @@
+export {
+  SliderRoot,
+  SliderControl,
+  SliderTrack,
+  SliderRange,
+  SliderThumb,
+  SliderTick,
+  SliderMarkers,
+  SliderMarker,
+  SliderValueIndicatorRoot,
+  SliderValueIndicatorArrow,
+  SliderValueIndicatorArrowTip,
+  SliderValueIndicatorLabel,
+  type SliderClassNames,
+  type SliderValues,
+  type SliderRootProps,
+  type SliderControlProps,
+  type SliderTrackProps,
+  type SliderRangeProps,
+  type SliderThumbProps,
+  type SliderTickProps,
+  type SliderMarkersProps,
+  type SliderMarkerProps,
+  type SliderValueIndicatorRootProps,
+  type SliderValueIndicatorArrowProps,
+  type SliderValueIndicatorArrowTipProps,
+  type SliderValueIndicatorLabelProps,
+} from "./Slider";
+
+export * as Slider from "./Slider.namespace";

package/src/components/SwipeableMenuSheet/SwipeableMenuSheet.test.tsx

@@ -223,7 +223,9 @@ describe("SwipeableMenuSheet", () => {
       (getByText("Second item") as HTMLElement).parentElement?.parentElement?.className,
     ).toContain("labelAlign_center");
 
-    const item = (getByText("First item") as HTMLElement).parentElement?.parentElement;
+    const item = (getByText("First item") as HTMLElement).closest<HTMLElement>(
+      ".seed-menu-sheet-item__root",
+    );
     if (!item) throw new Error("Expected menu sheet item.");
     fireEvent.tap(item);
 
@@ -255,4 +257,22 @@ describe("SwipeableMenuSheet", () => {
       exitAnimation: { type: "tween", duration: 0 },
     });
   });
+  it("keeps item backgrounds outside the scale target and scales the whole close button", () => {
+    const { getByText } = render(
+      <SwipeableMenuSheet.Root>
+        <SwipeableMenuSheet.Item>
+          <SwipeableMenuSheet.ItemLabel>Choice</SwipeableMenuSheet.ItemLabel>
+        </SwipeableMenuSheet.Item>
+        <SwipeableMenuSheet.CloseButton>Close feedback</SwipeableMenuSheet.CloseButton>
+      </SwipeableMenuSheet.Root>,
+    );
+    const target = (getByText("Choice") as HTMLElement).parentElement!;
+    expect(target.classList.contains("seed-menu-sheet-item__scaleContent")).toBe(true);
+    expect(target.getAttribute("flatten")).toBe("false");
+    expect(target.parentElement!.classList.contains("seed-menu-sheet-item__root")).toBe(true);
+    expect(target.parentElement!.hasAttribute("flatten")).toBe(false);
+    const close = (getByText("Close feedback") as HTMLElement).parentElement!;
+    expect(close.classList.contains("seed-menu-sheet__closeButton")).toBe(true);
+    expect(close.getAttribute("flatten")).toBe("false");
+  });
 });

package/src/components/SwipeableMenuSheet/SwipeableMenuSheet.tsx

@@ -7,6 +7,8 @@ import { forwardRef, isValidElement } from "@lynx-js/react";
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "@lynx-js/react";
 import clsx from "clsx";
 
+import { useScaleFeedback } from "../../hooks/useScaleFeedback";
+import { mergeProps } from "../../utils/merge-props";
 import { usePressTap } from "../../hooks/usePressTap";
 import { useSafeArea } from "../../hooks/useSafeArea";
 import type {
@@ -54,6 +56,7 @@ interface SwipeableMenuSheetClassNames {
 
 interface SwipeableMenuSheetItemClassNames {
   root: string;
+  scaleContent: string;
   content: string;
   label: string;
   description: string;
@@ -457,6 +460,7 @@ export const SwipeableMenuSheetCloseButton: LynxForwardRefComponent<
     "accessibility-actions": accessibilityActions,
     "accessibility-exclusive-focus": accessibilityExclusiveFocus,
     "ios-platform-accessibility-id": iosPlatformAccessibilityId,
+    ...nativeProps
   } = props;
   const { rootRef, setPendingReason, skipAnimation } = useSwipeableMenuSheetContext();
   const handleTap = React.useCallback<NonNullable<LynxPressableProps["bindtap"]>>(
@@ -467,16 +471,26 @@ export const SwipeableMenuSheetCloseButton: LynxForwardRefComponent<
     },
     [rootRef, setPendingReason, skipAnimation, userBindtap],
   );
-  const { pressed, ...pressHandlers } = usePressTap({
+  const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
     onTap: handleTap,
     mainThreadOnTap: userMainThreadBindtap,
   });
+  const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+    onTouchStart: bindtouchstart,
+    onTouchEnd: bindtouchend,
+    onTouchCancel: bindtouchcancel,
+  });
   const classNames = menuSheet({ skipAnimation, closeButtonPressed: pressed });
 
   return (
     <view
       {...(ref ? ({ ref: ref as LynxViewRef } as Record<string, unknown>) : {})}
-      {...pressHandlers}
+      {...mergeProps(
+        scaleFeedbackTriggerProps,
+        scaleFeedbackTargetProps,
+        pressHandlers,
+        nativeProps,
+      )}
       className={clsx(classNames.closeButton, className)}
       style={style as never}
       accessibility-element={accessibilityElement}
@@ -541,14 +555,21 @@ export const SwipeableMenuSheetItem: LynxForwardRefComponent<unknown, SwipeableM
       "accessibility-actions": accessibilityActions,
       "accessibility-exclusive-focus": accessibilityExclusiveFocus,
       "ios-platform-accessibility-id": iosPlatformAccessibilityId,
+      ...nativeProps
     } = props;
     const groupLabelAlign = React.useContext(GroupLabelAlignContext);
     const contentLabelAlign = React.useContext(ContentLabelAlignContext);
     const { isLast } = React.useContext(SwipeableMenuSheetItemPositionContext);
     const resolvedLabelAlign = labelAlign ?? groupLabelAlign ?? contentLabelAlign ?? "left";
-    const { pressed, ...pressHandlers } = usePressTap({
-      onTap: userBindtap,
-      mainThreadOnTap: userMainThreadBindtap,
+    const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } =
+      usePressTap({
+        onTap: userBindtap,
+        mainThreadOnTap: userMainThreadBindtap,
+      });
+    const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+      onTouchStart: bindtouchstart,
+      onTouchEnd: bindtouchend,
+      onTouchCancel: bindtouchcancel,
     });
     const classNames = menuSheetItem({ tone, labelAlign: resolvedLabelAlign, pressed });
     const itemContext = React.useMemo<SwipeableMenuSheetItemContextValue>(
@@ -566,7 +587,7 @@ export const SwipeableMenuSheetItem: LynxForwardRefComponent<unknown, SwipeableM
         >
           <view
             {...(ref ? ({ ref: ref as LynxViewRef } as Record<string, unknown>) : {})}
-            {...pressHandlers}
+            {...mergeProps(scaleFeedbackTriggerProps, pressHandlers, nativeProps)}
             className={clsx(classNames.root, className)}
             style={style as never}
             accessibility-element={accessibilityElement}
@@ -580,7 +601,9 @@ export const SwipeableMenuSheetItem: LynxForwardRefComponent<unknown, SwipeableM
             accessibility-exclusive-focus={accessibilityExclusiveFocus}
             ios-platform-accessibility-id={iosPlatformAccessibilityId}
           >
-            {children}
+            <view className={classNames.scaleContent} {...scaleFeedbackTargetProps}>
+              {children}
+            </view>
           </view>
           {!isLast ? (
             <view className={classNames.divider} accessibility-elements-hidden={true} />

package/src/components/Switch/Switch.tsx

@@ -15,11 +15,9 @@ import type {
   LynxTextRef,
   LynxViewRef,
 } from "../../types";
-import {
-  useScaleFeedback,
-  type ScaleFeedbackTargetProps,
-} from "../../hooks/useScaleFeedback";
+import { useScaleFeedback, type ScaleFeedbackTargetProps } from "../../hooks/useScaleFeedback";
 import { mergeProps } from "../../utils/merge-props";
+import { ScaleFeedbackContentContext } from "../../contexts";
 
 /**
  * @platform Lynx
@@ -110,13 +108,7 @@ export const SwitchRoot = React.forwardRef<unknown, SwitchRootProps>((props, ref
 
   const toggle = React.useCallback(() => setChecked(!checked), [checked, setChecked]);
 
-  const {
-    pressed,
-    bindtouchstart,
-    bindtouchend,
-    bindtouchcancel,
-    ...pressHandlers
-  } = usePressTap({
+  const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
     disabled,
     onTap: toggle,
   });
@@ -139,7 +131,15 @@ export const SwitchRoot = React.forwardRef<unknown, SwitchRootProps>((props, ref
       toggle,
       scaleFeedbackTargetProps,
     }),
-    [checked, disabled, pressed, switchVariantProps, switchmarkVariantProps, toggle, scaleFeedbackTargetProps],
+    [
+      checked,
+      disabled,
+      pressed,
+      switchVariantProps,
+      switchmarkVariantProps,
+      toggle,
+      scaleFeedbackTargetProps,
+    ],
   );
 
   return (
@@ -175,6 +175,7 @@ export const SwitchControl = React.forwardRef<unknown, SwitchControlProps>((prop
   const [variantProps, restProps] = switchmark.splitVariantProps(props);
   const { children, className, ...nativeProps } = restProps;
   const context = useSwitchContext("SwitchControl");
+  const hasScaledContent = React.useContext(ScaleFeedbackContentContext);
   const switchmarkVariantProps: SwitchmarkVariantProps = {
     ...context.switchmarkVariantProps,
     ...variantProps,
@@ -190,7 +191,7 @@ export const SwitchControl = React.forwardRef<unknown, SwitchControlProps>((prop
       <view
         {...mergeProps(
           ref ? { ref: ref as LynxViewRef } : {},
-          context.scaleFeedbackTargetProps,
+          !hasScaledContent ? context.scaleFeedbackTargetProps : {},
           nativeProps,
         )}
         className={clsx(classes.root, className)}

package/src/components/Tabs/Tabs.test.tsx

@@ -1,15 +1,29 @@
 import "@testing-library/jest-dom";
-import { fireEvent, render } from "@lynx-js/react/testing-library";
+import * as React from "@lynx-js/react";
+import { createEvent, fireEvent, render } from "@lynx-js/react/testing-library";
 import { describe, expect, it, vi } from "vitest";
 
 import * as Tabs from "./Tabs.namespace";
+import * as ChipTabs from "../ChipTabs/ChipTabs.namespace";
 import {
   areTabsTransitionsEnabled,
   getTabsLayoutWidth,
   getTabsOrderedItems,
+  getTabsScrollOffset,
   getTabsTriggerRects,
 } from "./Tabs.utils";
 
+function fireViewPagerEvent(
+  pager: Element,
+  eventName: "change" | "willchange",
+  detail: { index: number; isDragged: boolean },
+) {
+  const init = { eventType: "bindEvent", eventName, detail };
+  const event = createEvent(`bindEvent:${eventName}`, pager, init);
+  Object.assign(event, init);
+  fireEvent(pager, event);
+}
+
 function BasicTabs(props: {
   value?: string;
   defaultValue?: string;
@@ -46,6 +60,22 @@ describe("Tabs", () => {
     expect(listContent?.querySelectorAll(".seed-tabs__trigger")).toHaveLength(2);
   });
 
+  it("passes native fading edges to the ChipTabs scroll-view", () => {
+    const { container } = render(
+      <ChipTabs.Root defaultValue="one">
+        <ChipTabs.List fading-edge-length="20px">
+          <ChipTabs.Trigger value="one">첫 번째</ChipTabs.Trigger>
+          <ChipTabs.Trigger value="two">두 번째</ChipTabs.Trigger>
+        </ChipTabs.List>
+      </ChipTabs.Root>,
+    );
+
+    expect(container.querySelector("scroll-view")).toHaveAttribute(
+      "fading-edge-length",
+      "20px",
+    );
+  });
+
   it("disables label and indicator transitions during the initial render", () => {
     const { container } = render(<BasicTabs defaultValue="two" />);
     const labels = container.querySelectorAll<HTMLElement>(".seed-tabs__triggerLabel");
@@ -140,6 +170,121 @@ describe("Tabs", () => {
     expect(rects["three"]?.left).toBe(0);
   });
 
+  it("calculates tab scroll offsets from content insets and measured widths", () => {
+    const geometry = {
+      viewportWidth: 360,
+      contentWidth: 792,
+      contentInsetStart: 16,
+      contentInsetEnd: 16,
+      triggerRect: { left: 320, width: 56 },
+    };
+
+    expect(getTabsScrollOffset({ ...geometry, scrollAlign: "start", currentOffset: 0 })).toBe(320);
+    expect(getTabsScrollOffset({ ...geometry, scrollAlign: "center", currentOffset: 0 })).toBe(184);
+    expect(getTabsScrollOffset({ ...geometry, scrollAlign: "end", currentOffset: 0 })).toBe(48);
+    expect(getTabsScrollOffset({ ...geometry, scrollAlign: "nearest", currentOffset: 0 })).toBe(48);
+    expect(getTabsScrollOffset({ ...geometry, scrollAlign: "nearest", currentOffset: 160 })).toBe(
+      160,
+    );
+    // A trigger can sit inside the desired 16px padding while remaining fully
+    // visible in the actual scroll viewport; nearest must not move it.
+    expect(
+      getTabsScrollOffset({
+        ...geometry,
+        scrollAlign: "nearest",
+        currentOffset: 200,
+        triggerRect: { left: 192, width: 56 },
+      }),
+    ).toBe(200);
+    expect(
+      getTabsScrollOffset({
+        ...geometry,
+        scrollAlign: "nearest",
+        currentOffset: 240,
+        triggerRect: { left: 192, width: 56 },
+      }),
+    ).toBe(192);
+  });
+
+  it("clamps tab scrolling at both content edges without moving a non-scrollable list", () => {
+    const geometry = {
+      viewportWidth: 360,
+      contentWidth: 792,
+      contentInsetStart: 16,
+      contentInsetEnd: 16,
+    };
+
+    expect(
+      getTabsScrollOffset({
+        ...geometry,
+        scrollAlign: "end",
+        currentOffset: 0,
+        triggerRect: { left: 0, width: 56 },
+      }),
+    ).toBe(0);
+    expect(
+      getTabsScrollOffset({
+        ...geometry,
+        scrollAlign: "start",
+        currentOffset: 0,
+        triggerRect: { left: 704, width: 56 },
+      }),
+    ).toBe(432);
+    expect(
+      getTabsScrollOffset({
+        ...geometry,
+        contentWidth: 360,
+        scrollAlign: "center",
+        currentOffset: 144,
+        triggerRect: { left: 320, width: 56 },
+      }),
+    ).toBe(0);
+  });
+
+  it("updates large ChipTabs selection and content without activating disabled triggers", () => {
+    const onValueChange = vi.fn();
+    const { container } = render(
+      <ChipTabs.Root size="large" defaultValue="one" onValueChange={onValueChange}>
+        <ChipTabs.List>
+          <ChipTabs.Trigger value="one" notification={<text>새 알림</text>}>
+            첫 번째
+          </ChipTabs.Trigger>
+          <ChipTabs.Trigger value="two">두 번째</ChipTabs.Trigger>
+          <ChipTabs.Trigger value="three" disabled>
+            세 번째
+          </ChipTabs.Trigger>
+        </ChipTabs.List>
+        <ChipTabs.Content value="one">첫 번째 콘텐츠</ChipTabs.Content>
+        <ChipTabs.Content value="two">두 번째 콘텐츠</ChipTabs.Content>
+        <ChipTabs.Content value="three">세 번째 콘텐츠</ChipTabs.Content>
+      </ChipTabs.Root>,
+    );
+    const triggers = container.querySelectorAll<HTMLElement>(
+      '[accessibility-role-description="tab"]',
+    );
+    const contents = container.querySelectorAll<HTMLElement>(
+      '[accessibility-role-description="tabpanel"]',
+    );
+
+    expect(triggers[0]).toHaveAttribute("accessibility-value", "selected");
+    expect(contents[0]).toHaveAttribute("accessibility-elements-hidden", "false");
+    expect(contents[0]).toHaveTextContent("첫 번째 콘텐츠");
+    expect(container).toHaveTextContent("새 알림");
+
+    fireEvent.tap(triggers[1]);
+
+    expect(onValueChange).toHaveBeenCalledWith("two");
+    expect(triggers[1]).toHaveAttribute("accessibility-value", "selected");
+    expect(contents[1]).toHaveAttribute("accessibility-elements-hidden", "false");
+    expect(contents[1]).toHaveTextContent("두 번째 콘텐츠");
+
+    fireEvent.tap(triggers[2]);
+
+    expect(onValueChange).toHaveBeenCalledTimes(1);
+    expect(triggers[1]).toHaveAttribute("accessibility-value", "selected");
+    expect(contents[1]).toHaveAttribute("accessibility-elements-hidden", "false");
+  });
+
   it("does not select a disabled trigger", () => {
     const onValueChange = vi.fn();
     const { container } = render(
@@ -190,6 +335,78 @@ describe("Tabs", () => {
     expect(container.querySelector(".seed-tabs__content")).not.toBeNull();
   });
 
+  it("starts only for native drags and closes non-changing or cancelled swipes", () => {
+    function SwipeLifecycleTabs() {
+      const [counts, setCounts] = React.useState({ starts: 0, ends: 0, settles: 0 });
+      const isSwiping = counts.starts > counts.ends;
+
+      return (
+        <Tabs.Root defaultValue="one">
+          <Tabs.List>
+            <Tabs.Trigger value="one">첫 번째</Tabs.Trigger>
+            <Tabs.Trigger value="two">두 번째</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Carousel
+            swipeable
+            onSwipeStart={() =>
+              setCounts((current) => ({ ...current, starts: current.starts + 1 }))
+            }
+            onSwipeEnd={() => setCounts((current) => ({ ...current, ends: current.ends + 1 }))}
+            onSettle={() => setCounts((current) => ({ ...current, settles: current.settles + 1 }))}
+          >
+            <Tabs.CarouselCamera>
+              <Tabs.Content value="one">첫 번째 콘텐츠</Tabs.Content>
+              <Tabs.Content value="two">두 번째 콘텐츠</Tabs.Content>
+            </Tabs.CarouselCamera>
+          </Tabs.Carousel>
+          <text data-testid="swipe-state">{isSwiping ? "swiping" : "idle"}</text>
+          <text data-testid="swipe-counts">
+            {`${counts.starts}/${counts.ends}/${counts.settles}`}
+          </text>
+        </Tabs.Root>
+      );
+    }
+
+    const { container, getByTestId } = render(<SwipeLifecycleTabs />);
+    const pager = container.querySelector("viewpager")!;
+
+    fireEvent.touchstart(pager, {});
+    expect(getByTestId("swipe-state")).toHaveTextContent("idle");
+    fireEvent.touchend(pager, {});
+    expect(getByTestId("swipe-counts")).toHaveTextContent("0/0/0");
+
+    fireEvent.touchstart(pager, {});
+    fireViewPagerEvent(pager, "willchange", { index: 1, isDragged: true });
+    expect(getByTestId("swipe-state")).toHaveTextContent("swiping");
+    fireViewPagerEvent(pager, "change", { index: 1, isDragged: true });
+    fireEvent.touchend(pager, {});
+
+    expect(getByTestId("swipe-state")).toHaveTextContent("idle");
+    expect(getByTestId("swipe-counts")).toHaveTextContent("1/1/1");
+
+    fireEvent.touchstart(pager, {});
+    fireViewPagerEvent(pager, "willchange", { index: 1, isDragged: true });
+    fireEvent.touchend(pager, {});
+
+    expect(getByTestId("swipe-state")).toHaveTextContent("idle");
+    expect(getByTestId("swipe-counts")).toHaveTextContent("2/2/1");
+
+    fireEvent.touchstart(pager, {});
+    fireViewPagerEvent(pager, "willchange", { index: 0, isDragged: true });
+    fireViewPagerEvent(pager, "change", { index: 0, isDragged: true });
+    fireEvent.touchend(pager, {});
+
+    expect(getByTestId("swipe-state")).toHaveTextContent("idle");
+    expect(getByTestId("swipe-counts")).toHaveTextContent("3/3/2");
+
+    fireEvent.touchstart(pager, {});
+    fireViewPagerEvent(pager, "willchange", { index: 0, isDragged: true });
+    fireEvent.touchcancel(pager, {});
+    fireEvent.touchend(pager, {});
+    expect(getByTestId("swipe-state")).toHaveTextContent("idle");
+    expect(getByTestId("swipe-counts")).toHaveTextContent("4/4/2");
+  });
+
   it("renders carousel camera contents as native viewpager items", () => {
     const { container } = render(
       <Tabs.Root defaultValue="one">