@coinbase/cds-web 8.42.0 → 8.43.2

package/esm/carousel/Carousel.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "title", "hideNavigation", "hidePagination", "drag", "snapMode", "NavigationComponent", "PaginationComponent", "className", "classNames", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "paginationAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd", "loop"];
+const _excluded = ["children", "title", "hideNavigation", "hidePagination", "drag", "snapMode", "NavigationComponent", "PaginationComponent", "className", "classNames", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "paginationAccessibilityLabel", "startAutoplayAccessibilityLabel", "stopAutoplayAccessibilityLabel", "pageChangeAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd", "loop", "autoplay", "autoplayInterval", "paginationVariant"];
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -7,6 +7,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useCarouselAutoplay } from '@coinbase/cds-common/carousel/useCarouselAutoplay';
 import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap';
 import { RefMapContext } from '@coinbase/cds-common/system/RefMapContext';
 import { animate, domMax, LazyMotion, m, useAnimation, useDragControls, useMotionValue, useTransform } from 'framer-motion';
@@ -14,13 +15,20 @@ import { cx } from '../cx';
 import { HStack } from '../layout/HStack';
 import { VStack } from '../layout/VStack';
 import { Text } from '../typography';
-import { CarouselContext, useCarouselContext } from './CarouselContext';
+import { CarouselAutoplayContext, CarouselContext, useCarouselAutoplayContext, useCarouselContext } from './CarouselContext';
 import { CarouselItem } from './CarouselItem';
 import { DefaultCarouselNavigation } from './DefaultCarouselNavigation';
 import { DefaultCarouselPagination } from './DefaultCarouselPagination';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultCarouselCss = "defaultCarouselCss-d3is9f4";
-export { CarouselContext, useCarouselContext };
+const screenReaderOnlyCss = "screenReaderOnlyCss-shdwk7s";
+const animationConfig = {
+  type: 'spring',
+  stiffness: 900,
+  damping: 120,
+  mass: 4
+};
+export { CarouselAutoplayContext, CarouselContext, useCarouselAutoplayContext, useCarouselContext };
 /**
  * Wraps a value within a range (min, max) for circular indexing.
  * @param min - The minimum value of the range.
@@ -253,6 +261,81 @@ const getVisibleItems = (itemRects, containerWidth, scrollOffset) => {
   });
   return visibleItems;
 };
+
+/**
+ * Finds the carousel item element and its rect from a focus event target.
+ * Returns null if the target is not within a carousel item or is a clone.
+ * @param target - The focused element.
+ * @param carouselItemRects - The item rects to search.
+ * @returns The item ID and rect, or null if not found.
+ */
+const getFocusedCarouselItemInfo = (target, carouselItemRects) => {
+  const carouselItemElement = target.closest('[data-carousel-item-id]');
+  if (!carouselItemElement) return null;
+  const itemId = carouselItemElement.dataset.carouselItemId;
+  if (!itemId || itemId.startsWith('clone-')) return null;
+  const itemRect = carouselItemRects[itemId];
+  if (!itemRect) return null;
+  return {
+    itemId,
+    itemRect
+  };
+};
+
+/**
+ * Checks if an item is fully visible within the current viewport.
+ * @param itemRect - The item rect to check.
+ * @param scrollOffset - The current scroll offset (positive value).
+ * @param containerWidth - The width of the container viewport.
+ * @param isLoopingActive - Whether looping is active.
+ * @param loopLength - The total length of one loop cycle.
+ * @returns Whether the item is fully visible.
+ */
+const isItemFullyVisible = (itemRect, scrollOffset, containerWidth, isLoopingActive, loopLength) => {
+  const adjustedOffset = isLoopingActive ? (scrollOffset % loopLength + loopLength) % loopLength : scrollOffset;
+  const viewportLeft = adjustedOffset;
+  const viewportRight = adjustedOffset + containerWidth;
+  const itemLeft = itemRect.x;
+  const itemRight = itemRect.x + itemRect.width;
+  return itemLeft >= viewportLeft && itemRight <= viewportRight;
+};
+
+/**
+ * Finds the first focusable element within the first visible carousel item.
+ * @param visibleCarouselItems - Set of visible item IDs.
+ * @param carouselItemRects - The item rects for sorting by position.
+ * @param containerElement - The container element to search within.
+ * @returns The first focusable element, or null if not found.
+ */
+const findFirstVisibleItem = (visibleCarouselItems, carouselItemRects, containerElement) => {
+  const visibleItemIds = Array.from(visibleCarouselItems).filter(id => !id.startsWith('clone-'));
+  if (visibleItemIds.length === 0 || !containerElement) return null;
+  const sortedVisibleIds = visibleItemIds.sort((a, b) => {
+    var _rectA$x, _rectB$x;
+    const rectA = carouselItemRects[a];
+    const rectB = carouselItemRects[b];
+    return ((_rectA$x = rectA === null || rectA === void 0 ? void 0 : rectA.x) !== null && _rectA$x !== void 0 ? _rectA$x : 0) - ((_rectB$x = rectB === null || rectB === void 0 ? void 0 : rectB.x) !== null && _rectB$x !== void 0 ? _rectB$x : 0);
+  });
+  const firstVisibleElement = containerElement.querySelector("[data-carousel-item-id=\"".concat(sortedVisibleIds[0], "\"]"));
+  if (!firstVisibleElement) return null;
+  return firstVisibleElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+};
+
+/**
+ * Finds the page index that best displays the given item.
+ * @param itemRect - The item rect to find the page for.
+ * @param pageOffsets - The page offsets to search.
+ * @returns The page index that shows the item.
+ */
+const findPageIndexForItem = (itemRect, pageOffsets) => {
+  for (let i = pageOffsets.length - 1; i >= 0; i--) {
+    if (pageOffsets[i] <= itemRect.x) {
+      return i;
+    }
+  }
+  return 0;
+};
+const defaultPageChangeAccessibilityLabel = (activePageIndex, totalPages) => "Page ".concat(activePageIndex + 1, " of ").concat(totalPages);
 export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) => {
   let {
       children,
@@ -270,10 +353,16 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
       nextPageAccessibilityLabel,
       previousPageAccessibilityLabel,
       paginationAccessibilityLabel,
+      startAutoplayAccessibilityLabel,
+      stopAutoplayAccessibilityLabel,
+      pageChangeAccessibilityLabel = defaultPageChangeAccessibilityLabel,
       onChangePage,
       onDragStart,
       onDragEnd,
-      loop
+      loop,
+      autoplay,
+      autoplayInterval = 3000,
+      paginationVariant
     } = _ref4,
     props = _objectWithoutProperties(_ref4, _excluded);
   const animationApi = useAnimation();
@@ -281,7 +370,6 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
   const dragControls = useDragControls();
   const [activePageIndex, setActivePageIndex] = useState(0);
   const containerRef = useRef(null);
-  const rootRef = useRef(null);
   const [containerWidth, setContainerWidth] = useState(0);
   const carouselItemRefMap = useRefMap();
   const [carouselItemRects, setCarouselItemRects] = useState({});
@@ -333,7 +421,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
     if (!shouldLoop) return 0;
     return contentWidth + gap;
   }, [shouldLoop, contentWidth, gap]);
-  const isLoopingActive = shouldLoop && loopLength > 0;
+  const isLoopingActive = Boolean(shouldLoop && loopLength > 0);
 
   // Derived transform: physics (carouselScrollX) can go to ±∞, visuals (wrappedX) stay bounded
   const wrappedX = useTransform(carouselScrollX, value => {
@@ -344,9 +432,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
   const updateActivePageIndex = useCallback(newPageIndexOrUpdater => {
     setActivePageIndex(prevIndex => {
       const newPageIndex = typeof newPageIndexOrUpdater === 'function' ? newPageIndexOrUpdater(prevIndex) : newPageIndexOrUpdater;
-      if (prevIndex !== newPageIndex && onChangePage) {
-        onChangePage(newPageIndex);
-      }
+      if (prevIndex !== newPageIndex) onChangePage === null || onChangePage === void 0 || onChangePage(newPageIndex);
       return newPageIndex;
     });
   }, [onChangePage]);
@@ -439,6 +525,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
       const cloneId = "clone-backward-".concat(child.props.id);
       result.push(/*#__PURE__*/_jsx(CarouselItem, {
         "aria-hidden": true,
+        isClone: true,
         id: cloneId,
         style: _objectSpread({
           position: 'absolute',
@@ -460,6 +547,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
       const cloneId = "clone-forward-".concat(child.props.id);
       result.push(/*#__PURE__*/_jsx(CarouselItem, {
         "aria-hidden": true,
+        isClone: true,
         id: cloneId,
         style: _objectSpread({
           width: itemData === null || itemData === void 0 ? void 0 : itemData.width,
@@ -491,21 +579,43 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
     updateActivePageIndex(pageIndex => Math.min(pageIndex, pageOffsets.totalPages - 1));
     return pageOffsets;
   }, [hasDimensions, carouselItemRects, snapMode, containerWidth, maxScrollOffset, shouldLoop, updateActivePageIndex]);
+  const {
+    isPlaying,
+    isStopped,
+    isPaused,
+    start,
+    stop,
+    toggle,
+    reset,
+    pause,
+    resume,
+    getRemainingTime,
+    addCompletionListener
+  } = useCarouselAutoplay({
+    enabled: autoplay !== null && autoplay !== void 0 ? autoplay : false,
+    interval: autoplayInterval
+  });
   const goToPage = useCallback(page => {
     const newPage = Math.max(0, Math.min(totalPages - 1, page));
     updateActivePageIndex(newPage);
     updateVisibleCarouselItems(pageOffsets[newPage]);
     const targetOffset = isLoopingActive ? findNearestLoopOffset(-carouselScrollX.get(), [pageOffsets[newPage]], loopLength).offset : pageOffsets[newPage];
-    animate(carouselScrollX, -targetOffset, {
-      type: 'tween',
-      duration: 0.25
-    });
-  }, [totalPages, updateActivePageIndex, updateVisibleCarouselItems, pageOffsets, isLoopingActive, carouselScrollX, loopLength]);
+    animate(carouselScrollX, -targetOffset, animationConfig);
+    reset();
+  }, [totalPages, updateActivePageIndex, updateVisibleCarouselItems, pageOffsets, isLoopingActive, carouselScrollX, loopLength, reset]);
   useImperativeHandle(ref, () => ({
     activePageIndex,
     totalPages,
     goToPage
   }), [activePageIndex, totalPages, goToPage]);
+  useEffect(() => {
+    if (!autoplay || totalPages === 0) return;
+    const unsubscribe = addCompletionListener(() => {
+      const nextPage = wrap(0, totalPages, activePageIndex + 1);
+      goToPage(nextPage);
+    });
+    return unsubscribe;
+  }, [autoplay, addCompletionListener, activePageIndex, totalPages, goToPage]);
   const handleGoNext = useCallback(() => {
     const nextPage = shouldLoop ? wrap(0, totalPages, activePageIndex + 1) : activePageIndex + 1;
     goToPage(nextPage);
@@ -522,6 +632,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
         offset: nearestOffset,
         index: pageIndex
       } = findNearestLoopOffset(targetOffset, pageOffsets, loopLength);
+      if (pageIndex !== activePageIndex) reset();
       updateActivePageIndex(pageIndex);
       if (drag === 'snap') {
         updateVisibleCarouselItems(pageOffsets[pageIndex]);
@@ -535,6 +646,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
       // Non-looping logic with clamping
       const clampedScrollOffset = clampWithElasticResistance(targetOffset, maxScrollOffset, 0);
       const closestPageIndex = getNearestPageIndexFromOffset(clampedScrollOffset, pageOffsets);
+      if (closestPageIndex !== activePageIndex) reset();
       updateActivePageIndex(closestPageIndex);
       if (drag === 'snap') {
         const snapOffset = pageOffsets[closestPageIndex];
@@ -544,103 +656,201 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
       updateVisibleCarouselItems(clampedScrollOffset);
       return targetOffsetScroll;
     }
-  }, [drag, isLoopingActive, pageOffsets, loopLength, updateActivePageIndex, updateVisibleCarouselItems, maxScrollOffset]);
+  }, [drag, isLoopingActive, pageOffsets, loopLength, activePageIndex, updateActivePageIndex, updateVisibleCarouselItems, maxScrollOffset, reset]);
   const handleDragStart = useCallback(() => {
     onDragStart === null || onDragStart === void 0 || onDragStart();
-  }, [onDragStart]);
+    pause();
+  }, [onDragStart, pause]);
   const handleDragEnd = useCallback(() => {
     onDragEnd === null || onDragEnd === void 0 || onDragEnd();
-  }, [onDragEnd]);
+    resume();
+  }, [onDragEnd, resume]);
+  const handlePointerEnter = useCallback(() => {
+    pause();
+  }, [pause]);
+  const handlePointerLeave = useCallback(() => {
+    resume();
+  }, [resume]);
+
+  // Resume autoplay when focus leaves the carousel items container
+  const handleBlur = useCallback(event => {
+    var _containerRef$current;
+    const relatedTarget = event.relatedTarget;
+    // Only resume if we know focus is going outside the container.
+    // If relatedTarget is null (e.g., focus leaving window), also resume.
+    const isLeavingContainer = !relatedTarget || !((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(relatedTarget));
+    if (isLeavingContainer) {
+      resume();
+    }
+  }, [resume]);
+
+  // Handle focus moving to an element inside the carousel items container.
+  // Pauses autoplay when focus enters from outside (keyboard navigation a11y).
+  // Scrolls to show focused items that are not fully visible.
+  const handleFocusIn = useCallback(event => {
+    var _containerRef$current2;
+    const relatedTarget = event.relatedTarget;
+    // Check if focus is entering from outside the carousel items container
+    const isEnteringFromOutside = !relatedTarget || !((_containerRef$current2 = containerRef.current) !== null && _containerRef$current2 !== void 0 && _containerRef$current2.contains(relatedTarget));
+
+    // Pause autoplay when focus enters the container from outside.
+    // Only pause if we positively know focus came from outside (relatedTarget exists).
+    // This avoids false pauses during render, programmatic focus, or test environments.
+    if (relatedTarget && isEnteringFromOutside) {
+      pause();
+    }
+    if (pageOffsets.length === 0 || Object.keys(carouselItemRects).length === 0) return;
+    const target = event.target;
+    const focusedItem = getFocusedCarouselItemInfo(target, carouselItemRects);
+    if (!focusedItem) return;
+    const {
+      itemRect
+    } = focusedItem;
+    const currentOffset = Math.abs(carouselScrollX.get());
+
+    // Item is already visible - no action needed
+    if (isItemFullyVisible(itemRect, currentOffset, containerWidth, isLoopingActive, loopLength)) {
+      return;
+    }
+    if (isEnteringFromOutside) {
+      // Redirect focus to first focusable element on current page
+      const focusable = findFirstVisibleItem(visibleCarouselItems, carouselItemRects, containerRef.current);
+      if (focusable && focusable !== target) {
+        focusable.focus({
+          preventScroll: true
+        });
+        return;
+      }
+    }
+
+    // Navigate to show the focused item and reset autoplay progress
+    const targetPageIndex = findPageIndexForItem(itemRect, pageOffsets);
+    if (targetPageIndex !== activePageIndex) {
+      reset();
+      goToPage(targetPageIndex);
+    }
+  }, [pause, reset, pageOffsets, carouselItemRects, carouselScrollX, isLoopingActive, loopLength, containerWidth, visibleCarouselItems, activePageIndex, goToPage]);
   const carouselContextValue = useMemo(() => ({
     visibleCarouselItems
   }), [visibleCarouselItems]);
+  const autoplayContextValue = useMemo(() => ({
+    isEnabled: !!autoplay,
+    isStopped,
+    isPaused,
+    isPlaying,
+    interval: autoplayInterval,
+    getRemainingTime,
+    start,
+    stop,
+    toggle,
+    reset,
+    pause,
+    resume
+  }), [autoplay, isStopped, isPaused, isPlaying, autoplayInterval, getRemainingTime, start, stop, toggle, reset, pause, resume]);
   return /*#__PURE__*/_jsx(LazyMotion, {
     features: domMax,
     children: /*#__PURE__*/_jsx(RefMapContext.Provider, {
       value: carouselItemRefMap,
-      children: /*#__PURE__*/_jsxs(VStack, _objectSpread(_objectSpread({
-        ref: rootRef,
-        "aria-live": "polite",
+      children: /*#__PURE__*/_jsx(VStack, _objectSpread(_objectSpread({
         "aria-roledescription": "carousel",
         className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
         gap: 2,
+        onPointerEnter: handlePointerEnter,
+        onPointerLeave: handlePointerLeave,
         role: "group",
         style: _objectSpread(_objectSpread({
-          overflow: 'hidden'
+          overflow: 'clip'
         }, style), styles === null || styles === void 0 ? void 0 : styles.root),
         width: "100%"
       }, props), {}, {
-        children: [(title || !hideNavigation) && /*#__PURE__*/_jsxs(HStack, {
-          alignItems: "center",
-          justifyContent: title ? 'space-between' : 'flex-end',
-          children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
-            className: classNames === null || classNames === void 0 ? void 0 : classNames.title,
-            font: "title3",
-            style: styles === null || styles === void 0 ? void 0 : styles.title,
-            children: title
-          }) : title, !hideNavigation && /*#__PURE__*/_jsx(NavigationComponent, {
-            className: classNames === null || classNames === void 0 ? void 0 : classNames.navigation,
-            disableGoNext: totalPages <= 1 || !shouldLoop && activePageIndex >= totalPages - 1,
-            disableGoPrevious: totalPages <= 1 || !shouldLoop && activePageIndex <= 0,
-            nextPageAccessibilityLabel: nextPageAccessibilityLabel,
-            onGoNext: handleGoNext,
-            onGoPrevious: handleGoPrevious,
-            previousPageAccessibilityLabel: previousPageAccessibilityLabel,
-            style: styles === null || styles === void 0 ? void 0 : styles.navigation
-          })]
-        }), /*#__PURE__*/_jsx("div", {
-          ref: containerRef,
-          className: classNames === null || classNames === void 0 ? void 0 : classNames.carouselContainer,
-          onPointerDown: e => {
-            if (isDragEnabled) {
-              // Allows us to grab between items where child wouldn't be selected
-              dragControls.start(e);
-              handleDragStart();
-            }
-          },
-          style: _objectSpread({
-            width: '100%',
-            position: 'relative'
-          }, styles === null || styles === void 0 ? void 0 : styles.carouselContainer),
-          children: /*#__PURE__*/_jsx(CarouselContext.Provider, {
-            value: carouselContextValue,
-            children: /*#__PURE__*/_jsx(m.div, {
-              _dragX: carouselScrollX,
-              animate: animationApi,
-              className: cx(classNames === null || classNames === void 0 ? void 0 : classNames.carousel, defaultCarouselCss),
-              drag: isDragEnabled ? 'x' : false,
-              dragConstraints: shouldLoop ? undefined : {
-                left: -maxScrollOffset,
-                right: 0
-              },
-              dragControls: dragControls,
-              dragTransition: {
-                // How much inertia affects the target
-                power: drag === 'free' ? 0.5 : 0.125,
-                timeConstant: drag !== 'free' ? 125 : undefined,
-                modifyTarget: handleDragTransition
-              },
-              initial: false,
-              onDragEnd: handleDragEnd,
-              style: _objectSpread({
-                display: 'flex',
-                position: 'relative',
-                x: shouldLoop ? wrappedX : carouselScrollX
-              }, styles === null || styles === void 0 ? void 0 : styles.carousel),
-              whileDrag: {
-                pointerEvents: 'none'
-              },
-              children: childrenWithClones
+        children: /*#__PURE__*/_jsxs(CarouselAutoplayContext.Provider, {
+          value: autoplayContextValue,
+          children: [(title || !hideNavigation) && /*#__PURE__*/_jsxs(HStack, {
+            alignItems: "center",
+            justifyContent: title ? 'space-between' : 'flex-end',
+            children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+              className: classNames === null || classNames === void 0 ? void 0 : classNames.title,
+              font: "title3",
+              style: styles === null || styles === void 0 ? void 0 : styles.title,
+              children: title
+            }) : title, !hideNavigation && /*#__PURE__*/_jsx(NavigationComponent, {
+              autoplay: autoplay,
+              className: classNames === null || classNames === void 0 ? void 0 : classNames.navigation,
+              disableGoNext: totalPages <= 1 || !shouldLoop && activePageIndex >= totalPages - 1,
+              disableGoPrevious: totalPages <= 1 || !shouldLoop && activePageIndex <= 0,
+              isAutoplayStopped: isStopped,
+              nextPageAccessibilityLabel: nextPageAccessibilityLabel,
+              onGoNext: handleGoNext,
+              onGoPrevious: handleGoPrevious,
+              onToggleAutoplay: toggle,
+              previousPageAccessibilityLabel: previousPageAccessibilityLabel,
+              startAutoplayAccessibilityLabel: startAutoplayAccessibilityLabel,
+              stopAutoplayAccessibilityLabel: stopAutoplayAccessibilityLabel,
+              style: styles === null || styles === void 0 ? void 0 : styles.navigation
+            })]
+          }), /*#__PURE__*/_jsx("div", {
+            ref: containerRef,
+            className: classNames === null || classNames === void 0 ? void 0 : classNames.carouselContainer,
+            onBlur: handleBlur,
+            onFocus: handleFocusIn,
+            onPointerDown: e => {
+              if (isDragEnabled) {
+                // Allows us to grab between items where child wouldn't be selected
+                dragControls.start(e);
+                handleDragStart();
+              }
+            },
+            style: _objectSpread({
+              width: '100%',
+              position: 'relative'
+            }, styles === null || styles === void 0 ? void 0 : styles.carouselContainer),
+            children: /*#__PURE__*/_jsxs(CarouselContext.Provider, {
+              value: carouselContextValue,
+              children: [totalPages > 0 && /*#__PURE__*/_jsx("div", {
+                "aria-atomic": "true",
+                "aria-live": isPlaying ? 'off' : 'polite',
+                className: screenReaderOnlyCss,
+                role: "status",
+                children: pageChangeAccessibilityLabel(activePageIndex, totalPages)
+              }), /*#__PURE__*/_jsx(m.div, {
+                _dragX: carouselScrollX,
+                animate: animationApi,
+                className: cx(classNames === null || classNames === void 0 ? void 0 : classNames.carousel, defaultCarouselCss),
+                drag: isDragEnabled ? 'x' : false,
+                dragConstraints: shouldLoop ? undefined : {
+                  left: -maxScrollOffset,
+                  right: 0
+                },
+                dragControls: dragControls,
+                dragTransition: {
+                  // How much inertia affects the target
+                  power: drag === 'free' ? 0.5 : 0.125,
+                  timeConstant: drag !== 'free' ? 125 : undefined,
+                  modifyTarget: handleDragTransition
+                },
+                initial: false,
+                onDragEnd: handleDragEnd,
+                style: _objectSpread({
+                  display: 'flex',
+                  position: 'relative',
+                  x: shouldLoop ? wrappedX : carouselScrollX
+                }, styles === null || styles === void 0 ? void 0 : styles.carousel),
+                whileDrag: {
+                  pointerEvents: 'none'
+                },
+                children: childrenWithClones
+              })]
             })
-          })
-        }), !hidePagination && /*#__PURE__*/_jsx(PaginationComponent, {
-          activePageIndex: activePageIndex,
-          className: classNames === null || classNames === void 0 ? void 0 : classNames.pagination,
-          onClickPage: goToPage,
-          paginationAccessibilityLabel: paginationAccessibilityLabel,
-          style: styles === null || styles === void 0 ? void 0 : styles.pagination,
-          totalPages: totalPages
-        })]
+          }), !hidePagination && /*#__PURE__*/_jsx(PaginationComponent, {
+            activePageIndex: activePageIndex,
+            className: classNames === null || classNames === void 0 ? void 0 : classNames.pagination,
+            onClickPage: goToPage,
+            paginationAccessibilityLabel: paginationAccessibilityLabel,
+            style: styles === null || styles === void 0 ? void 0 : styles.pagination,
+            totalPages: totalPages,
+            variant: paginationVariant
+          })]
+        })
       }))
     })
   });

package/esm/carousel/CarouselContext.js

@@ -6,4 +6,12 @@ export const useCarouselContext = () => {
     throw new Error('useCarouselContext must be used within a Carousel component');
   }
   return context;
+};
+export const CarouselAutoplayContext = /*#__PURE__*/React.createContext(undefined);
+export const useCarouselAutoplayContext = () => {
+  const context = useContext(CarouselAutoplayContext);
+  if (!context) {
+    throw new Error('useCarouselAutoplayContext must be used within a Carousel component');
+  }
+  return context;
 };

package/esm/carousel/CarouselItem.css

@@ -0,0 +1 @@
+@layer cds{.carouselItemCss-c1rrqdlt{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}}

package/esm/carousel/CarouselItem.js

@@ -1,4 +1,4 @@
-const _excluded = ["id", "children", "testID", "style"];
+const _excluded = ["id", "children", "testID", "style", "className", "isClone"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -8,19 +8,23 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { memo, useCallback } from 'react';
 import { useRefMapContext } from '@coinbase/cds-common/system/RefMapContext';
+import { cx } from '../cx';
 import { Box } from '../layout/Box';
 import { useCarouselContext } from './CarouselContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const carouselItemCss = "carouselItemCss-c1rrqdlt";
 
 /**
  * Individual carousel item component that registers itself with the carousel via RefMapContext.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export const CarouselItem = /*#__PURE__*/memo(_ref => {
   let {
       id,
       children,
       testID,
-      style
+      style,
+      className,
+      isClone
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -37,16 +41,19 @@ export const CarouselItem = /*#__PURE__*/memo(_ref => {
     ref: refCallback,
     "aria-hidden": !isVisible,
     "aria-roledescription": "carousel item",
+    className: cx(carouselItemCss, className),
+    "data-carousel-item-id": id
+    // @ts-expect-error - inert is a valid HTML attribute but not yet in React types, used to prevent navigation to clones
+    ,
+    inert: isClone ? '' : undefined,
     maxWidth: "100%",
     role: "group",
-    style: _objectSpread({
-      flexShrink: 0
-    }, style),
-    tabIndex: isVisible ? undefined : -1,
+    style: style,
     testID: testID !== null && testID !== void 0 ? testID : "carousel-item-".concat(id)
   }, props), {}, {
     children: typeof children === 'function' ? children({
       isVisible
     }) : children
   }));
-});
+});
+import "./CarouselItem.css";

package/esm/carousel/DefaultCarouselNavigation.js

@@ -10,7 +10,7 @@ import { HStack } from '../layout/HStack';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const navigationCss = "navigationCss-n15h1fxo";
 export const DefaultCarouselNavigation = /*#__PURE__*/memo(function DefaultCarouselNavigation(_ref) {
-  var _testIDMap$previousBu, _testIDMap$nextButton;
+  var _testIDMap$autoplayBu, _testIDMap$previousBu, _testIDMap$nextButton;
   let {
     onGoPrevious,
     onGoNext,
@@ -18,8 +18,15 @@ export const DefaultCarouselNavigation = /*#__PURE__*/memo(function DefaultCarou
     disableGoNext,
     nextPageAccessibilityLabel = 'Next page',
     previousPageAccessibilityLabel = 'Previous page',
+    autoplay,
+    isAutoplayStopped,
+    onToggleAutoplay,
+    startAutoplayAccessibilityLabel = 'Play Carousel',
+    stopAutoplayAccessibilityLabel = 'Pause Carousel',
     previousIcon = 'caretLeft',
     nextIcon = 'caretRight',
+    startIcon = 'play',
+    stopIcon = 'pause',
     variant = 'secondary',
     compact,
     className,
@@ -34,7 +41,16 @@ export const DefaultCarouselNavigation = /*#__PURE__*/memo(function DefaultCarou
     "data-hiddenunlessfocused": hideUnlessFocused,
     gap: 1,
     style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
-    children: [/*#__PURE__*/_jsx(IconButton, {
+    children: [autoplay && /*#__PURE__*/_jsx(IconButton, {
+      accessibilityLabel: isAutoplayStopped ? startAutoplayAccessibilityLabel : stopAutoplayAccessibilityLabel,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.autoplayButton,
+      compact: compact,
+      name: isAutoplayStopped ? startIcon : stopIcon,
+      onClick: onToggleAutoplay,
+      style: styles === null || styles === void 0 ? void 0 : styles.autoplayButton,
+      testID: (_testIDMap$autoplayBu = testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.autoplayButton) !== null && _testIDMap$autoplayBu !== void 0 ? _testIDMap$autoplayBu : 'carousel-autoplay-button',
+      variant: variant
+    }), /*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: previousPageAccessibilityLabel,
       className: classNames === null || classNames === void 0 ? void 0 : classNames.previousButton,
       compact: compact,

package/esm/carousel/DefaultCarouselPagination.css

@@ -1,2 +1,3 @@
-@layer cds{.defaultPaginationCss-dyqwmgi{padding:var(--space-0_5) 0;}
-.dotCss-dea8kmz{width:var(--space-3);height:var(--space-0_5);border-radius:var(--borderRadius-100);}}
+@layer cds{.defaultPaginationCss-dyqwmgi{padding:4px 0;}
+.pillCss-pea8kmz{width:24px;height:4px;border-radius:var(--borderRadius-100);}
+.dotCss-d1eoinf6{height:4px;border-radius:var(--borderRadius-100);overflow:hidden;}}