@coinbase/cds-mcp-server 8.42.0 → 8.43.2

package/mcp-docs/web/components/Carousel.txt

@@ -10,7 +10,7 @@ import { Carousel } from '@coinbase/cds-web/carousel/Carousel'
 
 ## Examples
 
-### Basic Example
+### Basics
 
 Carousels are a great way to showcase a list of items in a compact and engaging way.
 By default, Carousels have navigation and pagination enabled.
@@ -28,7 +28,9 @@ Images inside of the carousel have `pointer-events` disabled by default.
 
 ```jsx live
 function MyCarousel() {
-  function SquareAssetCard({ imageUrl, name }) {
+  const toast = useToast();
+
+  function SquareAssetCard({ imageUrl, name, onClick }) {
     return (
       <ContainedAssetCard
         description={
@@ -37,6 +39,7 @@ function MyCarousel() {
           </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
+        onClick={onClick}
         subtitle={name}
         title="$0.87"
       />
@@ -45,7 +48,8 @@ function MyCarousel() {
   return (
     <Box marginX={-3}>
       <Carousel
-        hidePagination
+        loop
+        paginationVariant="dot"
         title="Explore Assets"
         styles={{
           root: { paddingInline: 'var(--space-3)' },
@@ -54,7 +58,13 @@ function MyCarousel() {
       >
         {Object.values(assets).map((asset, index) => (
           <CarouselItem key={asset.symbol} id={asset.symbol} accessibilityLabel={asset.name}>
-            <SquareAssetCard imageUrl={asset.imageUrl} name={asset.symbol} />
+            {({ isVisible }) => (
+              <SquareAssetCard
+                imageUrl={asset.imageUrl}
+                name={asset.symbol}
+                onClick={() => toast.show(`${asset.symbol} clicked`)}
+              />
+            )}
           </CarouselItem>
         ))}
       </Carousel>
@@ -98,14 +108,7 @@ function DynamicSizingCarousel() {
   }
   function ActionButton({ isVisible, children }) {
     return (
-      <Button
-        compact
-        flush="start"
-        numberOfLines={1}
-        onClick={NoopFn}
-        tabIndex={isVisible ? undefined : -1}
-        variant="secondary"
-      >
+      <Button compact flush="start" numberOfLines={1} onClick={NoopFn} variant="secondary">
         {children}
       </Button>
     );
@@ -467,13 +470,14 @@ When set to `snap`, upon release the carousel will snap to either the nearest it
 
 ```jsx live
 function DragCarousel() {
+  const toast = useToast();
   const dragOptions = [
     { id: 'snap', label: 'Snap' },
     { id: 'free', label: 'Free' },
     { id: 'none', label: 'None' },
   ];
   const [drag, setDrag] = useState(dragOptions[0]);
-  function SquareAssetCard({ imageUrl, name }) {
+  function SquareAssetCard({ imageUrl, name, onClick }) {
     return (
       <ContainedAssetCard
         description={
@@ -482,6 +486,7 @@ function DragCarousel() {
           </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
+        onClick={onClick}
         subtitle={name}
         title="$0.87"
       />
@@ -508,8 +513,14 @@ function DragCarousel() {
           key={drag.id}
         >
           {Object.values(assets).map((asset, index) => (
-            <CarouselItem key={asset.symbol} id={asset.symbol}>
-              <SquareAssetCard imageUrl={asset.imageUrl} name={asset.symbol} />
+            <CarouselItem key={asset.symbol} id={asset.symbol} accessibilityLabel={asset.name}>
+              {({ isVisible }) => (
+                <SquareAssetCard
+                  imageUrl={asset.imageUrl}
+                  name={asset.symbol}
+                  onClick={() => toast.show(`${asset.symbol} clicked`)}
+                />
+              )}
             </CarouselItem>
           ))}
         </Carousel>
@@ -527,12 +538,13 @@ When set to `item`, the carousel will snap to the nearest item.
 
 ```jsx live
 function SnapModeCarousel() {
+  const toast = useToast();
   const snapModeOptions = [
     { id: 'page', label: 'Page' },
     { id: 'item', label: 'Item' },
   ];
   const [snapMode, setSnapMode] = useState(snapModeOptions[0]);
-  function SquareAssetCard({ imageUrl, name }) {
+  function SquareAssetCard({ imageUrl, name, onClick }) {
     return (
       <ContainedAssetCard
         description={
@@ -541,6 +553,7 @@ function SnapModeCarousel() {
           </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
+        onClick={onClick}
         subtitle={name}
         title="$0.87"
       />
@@ -557,6 +570,7 @@ function SnapModeCarousel() {
       <Box marginX={-3}>
         <Carousel
           title="Explore Assets"
+          paginationVariant="dot"
           styles={{
             root: { paddingInline: 'var(--space-3)' },
             carousel: { gap: 'var(--space-1)' },
@@ -565,8 +579,14 @@ function SnapModeCarousel() {
           key={snapMode.id}
         >
           {Object.values(assets).map((asset, index) => (
-            <CarouselItem key={asset.symbol} id={asset.symbol}>
-              <SquareAssetCard imageUrl={asset.imageUrl} name={asset.symbol} />
+            <CarouselItem key={asset.symbol} id={asset.symbol} accessibilityLabel={asset.name}>
+              {({ isVisible }) => (
+                <SquareAssetCard
+                  imageUrl={asset.imageUrl}
+                  name={asset.symbol}
+                  onClick={() => toast.show(`${asset.symbol} clicked`)}
+                />
+              )}
             </CarouselItem>
           ))}
         </Carousel>
@@ -593,7 +613,8 @@ If you want to have the next item be shown at the edge of the screen, make sure
 
 ```jsx live
 function OverflowCarousel() {
-  function SquareAssetCard({ isVisible, imageUrl, name }) {
+  const toast = useToast();
+  function SquareAssetCard({ imageUrl, name, onClick }) {
     return (
       <ContainedAssetCard
         description={
@@ -602,7 +623,7 @@ function OverflowCarousel() {
           </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
-        onClick={isVisible ? () => console.log('clicked') : undefined}
+        onClick={onClick}
         subtitle={name}
         title="$0.87"
       />
@@ -612,6 +633,7 @@ function OverflowCarousel() {
     <Box marginX={-3}>
       <Carousel
         title="Explore Assets"
+        paginationVariant="dot"
         snapMode="item"
         styles={{
           root: { paddingInline: 'var(--space-3)' },
@@ -619,12 +641,12 @@ function OverflowCarousel() {
         }}
       >
         {Object.values(assets).map((asset, index) => (
-          <CarouselItem key={asset.symbol} id={asset.symbol}>
+          <CarouselItem key={asset.symbol} id={asset.symbol} accessibilityLabel={asset.name}>
             {({ isVisible }) => (
               <SquareAssetCard
-                isVisible={isVisible}
                 imageUrl={asset.imageUrl}
                 name={asset.symbol}
+                onClick={() => toast.show(`${asset.symbol} clicked`)}
               />
             )}
           </CarouselItem>
@@ -635,19 +657,17 @@ function OverflowCarousel() {
 }
 ```
 
-### Looping
-
-Enable infinite looping with the `loop` prop. You must have at least two pages of content to enable looping.
+### Autoplay
 
-Looping works with both `snap` and `free` drag modes, and with both `page` and `item` snap modes.
+Use `autoplay` to allow for automatic page advancement. The default interval is 3 seconds but can be changed with `autoplayInterval`.
 
-#### Looping with Snap
-
-When looping is enabled with snap drag mode, the carousel will snap to the nearest item or page (depending on `snapMode`) after releasing, allowing infinite scrolling in either direction.
+It is recommended to use pagination with autoplay so users know how many pages there are, and you should also set `paginationVariant="dot"` to best indicate the active page and progress.
 
 ```jsx live
-function LoopingSnapCarousel() {
-  function SquareAssetCard({ imageUrl, name }) {
+function AutoplayCarousel() {
+  const toast = useToast();
+
+  function SquareAssetCard({ imageUrl, name, onClick }) {
     return (
       <ContainedAssetCard
         description={
@@ -656,6 +676,7 @@ function LoopingSnapCarousel() {
           </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
+        onClick={onClick}
         subtitle={name}
         title="$0.87"
       />
@@ -664,8 +685,10 @@ function LoopingSnapCarousel() {
   return (
     <Box marginX={-3}>
       <Carousel
+        autoplay
         loop
-        title="Infinite Scroll"
+        paginationVariant="dot"
+        title="Trending Assets"
         styles={{
           root: { paddingInline: 'var(--space-3)' },
           carousel: { gap: 'var(--space-1)' },
@@ -673,7 +696,13 @@ function LoopingSnapCarousel() {
       >
         {Object.values(assets).map((asset) => (
           <CarouselItem key={asset.symbol} id={asset.symbol} accessibilityLabel={asset.name}>
-            <SquareAssetCard imageUrl={asset.imageUrl} name={asset.symbol} />
+            {({ isVisible }) => (
+              <SquareAssetCard
+                imageUrl={asset.imageUrl}
+                name={asset.symbol}
+                onClick={() => toast.show(`${asset.symbol} clicked`)}
+              />
+            )}
           </CarouselItem>
         ))}
       </Carousel>
@@ -682,13 +711,14 @@ function LoopingSnapCarousel() {
 }
 ```
 
-#### Looping with Free Drag
+### Looping
 
-When looping with free drag, the carousel scrolls continuously without snapping, creating a smooth endless scrolling experience.
+Use `loop` to allow for infinite scrolling.
 
 ```jsx live
-function LoopingFreeDragCarousel() {
-  function SquareAssetCard({ imageUrl, name }) {
+function LoopingCarousel() {
+  const toast = useToast();
+  function SquareAssetCard({ imageUrl, name, onClick }) {
     return (
       <ContainedAssetCard
         description={
@@ -697,6 +727,7 @@ function LoopingFreeDragCarousel() {
           </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
+        onClick={onClick}
         subtitle={name}
         title="$0.87"
       />
@@ -705,10 +736,11 @@ function LoopingFreeDragCarousel() {
   return (
     <Box marginX={-3}>
       <Carousel
+        autoplay
         loop
-        drag="free"
+        paginationVariant="dot"
         snapMode="item"
-        title="Free Scroll Loop"
+        title="Infinite Scroll"
         styles={{
           root: { paddingInline: 'var(--space-3)' },
           carousel: { gap: 'var(--space-1)' },
@@ -716,7 +748,13 @@ function LoopingFreeDragCarousel() {
       >
         {Object.values(assets).map((asset) => (
           <CarouselItem key={asset.symbol} id={asset.symbol} accessibilityLabel={asset.name}>
-            <SquareAssetCard imageUrl={asset.imageUrl} name={asset.symbol} />
+            {({ isVisible }) => (
+              <SquareAssetCard
+                imageUrl={asset.imageUrl}
+                name={asset.symbol}
+                onClick={() => toast.show(`${asset.symbol} clicked`)}
+              />
+            )}
           </CarouselItem>
         ))}
       </Carousel>
@@ -727,14 +765,14 @@ function LoopingFreeDragCarousel() {
 
 ### Accessibility
 
-The carousel is accessible by default.
+The carousel is accessible by default, and works best with interactive elements that can be focused. Users can navigate via keyboard or voiceover and will switch pages as they navigate through the carousel.
 
-You need to use `accessibilityLabel` or `accessibilityLabelledBy` props to provide a label for the carousel items.
+Each carousel item should have proper text within the focusable element or you use `accessibilityLabel` or `accessibilityLabelledBy` props to provide a label.
 
-If you have elements that are focusable, you can use `isVisible` render prop to disable focus when the item is not visible.
+While not recommended, if your carousel has disabled drag, you can use `isVisible` render prop to prevent users from focusing on carousel items that are not visible.
 
 ```jsx
-<Carousel>
+<Carousel paginationVariant="dot" drag="none">
   <CarouselItem id="btc" accessibilityLabel="Bitcoin">
     <SquareAssetCard imageUrl={assets.btc.imageUrl} name={assets.btc.symbol} />
   </CarouselItem>
@@ -772,6 +810,28 @@ If you have elements that are focusable, you can use `isVisible` render prop to
 </Carousel>
 ```
 
+#### Autoplay
+
+You should note use `hideNavigation` and `autoplay` together, unless you provide an alternative pause mechanism. See [this example](#custom-autoplay-controls) with custom autoplay controls as an example.
+
+#### Accessibility Labels
+
+The Carousel provides several props to customize accessibility labels for screen reader users
+
+```jsx
+<Carousel
+  nextPageAccessibilityLabel="Go to next slide"
+  previousPageAccessibilityLabel="Go to previous slide"
+  paginationAccessibilityLabel={(pageIndex) => `Go to page ${pageIndex + 1}`}
+  autoplayAccessibilityLabel="Play/pause carousel"
+  pageChangeAccessibilityLabel={(activePageIndex, totalPages) =>
+    `Showing page ${activePageIndex + 1} of ${totalPages}`
+  }
+>
+  ...
+</Carousel>
+```
+
 ### Customization
 
 #### Custom Components
@@ -1005,6 +1065,7 @@ function CustomStylesCarousel() {
   return (
     <Box marginX={-3}>
       <Carousel
+        paginationVariant="dot"
         styles={{
           root: { position: 'relative', paddingInline: 'var(--space-6)' },
           carousel: { gap: 'var(--space-6)' },
@@ -1086,15 +1147,190 @@ function CustomStylesCarousel() {
 }
 ```
 
+#### Custom Autoplay Controls
+
+You can use `useCarouselAutoplayContext` inside a custom `PaginationComponent` to build your own controls. This example shows a composed layout with pagination and play/pause on the left, and navigation arrows on the right.
+
+```jsx live
+function ComposedAutoplayCarousel() {
+  const carouselRef = useRef(null);
+
+  function CustomPaginationDots({ totalPages, activePageIndex, onClickPage }) {
+    const autoplay = useCarouselAutoplayContext();
+
+    return (
+      <HStack
+        alignItems="center"
+        background="bgSecondary"
+        borderRadius={1000}
+        gap={0.5}
+        paddingX={1.5}
+        style={{ height: 40 }}
+      >
+        {Array.from({ length: totalPages }, (_, index) => {
+          const isActive = index === activePageIndex;
+          const showProgress = isActive && autoplay.isEnabled;
+
+          // Calculate progress from timing info
+          const remainingTime = autoplay.getRemainingTime();
+          const progress = 1 - remainingTime / autoplay.totalTime;
+          const progressDuration = autoplay.isPlaying ? remainingTime / 1000 : 0;
+
+          return (
+            <Pressable
+              key={index}
+              accessibilityLabel={`Go to page ${index + 1}`}
+              background={isActive && !showProgress ? 'fgPrimary' : 'bgTertiary'}
+              borderRadius={1000}
+              borderWidth={0}
+              onClick={() => onClickPage?.(index)}
+              style={{
+                height: 8,
+                width: isActive ? 24 : 8,
+                transition: 'width 0.2s ease',
+                overflow: 'hidden',
+              }}
+            >
+              {showProgress && (
+                <m.div
+                  animate={{ width: autoplay.isPlaying ? '100%' : `${progress * 100}%` }}
+                  initial={false}
+                  transition={{ duration: progressDuration, ease: 'linear' }}
+                  style={{
+                    height: '100%',
+                    background: 'var(--color-fgPrimary)',
+                    borderRadius: 'var(--borderRadius-1000)',
+                  }}
+                />
+              )}
+            </Pressable>
+          );
+        })}
+      </HStack>
+    );
+  }
+
+  function CustomControls({ totalPages, activePageIndex, onClickPage }) {
+    const autoplay = useCarouselAutoplayContext();
+
+    return (
+      <HStack justifyContent="space-between" paddingY={1}>
+        <HStack gap={1} alignItems="center">
+          <CustomPaginationDots
+            totalPages={totalPages}
+            activePageIndex={activePageIndex}
+            onClickPage={onClickPage}
+          />
+          <IconButton
+            accessibilityLabel={'Play/Pause Carousel'}
+            name={autoplay.isStopped ? 'play' : 'pause'}
+            onClick={autoplay.toggle}
+            variant="secondary"
+          />
+        </HStack>
+        <HStack gap={1}>
+          <IconButton
+            accessibilityLabel="Previous"
+            disabled={activePageIndex <= 0}
+            name="caretLeft"
+            onClick={() => carouselRef.current?.goToPage(activePageIndex - 1)}
+            variant="secondary"
+          />
+          <IconButton
+            accessibilityLabel="Next"
+            disabled={activePageIndex >= totalPages - 1}
+            name="caretRight"
+            onClick={() => carouselRef.current?.goToPage(activePageIndex + 1)}
+            variant="secondary"
+          />
+        </HStack>
+      </HStack>
+    );
+  }
+
+  return (
+    <Box marginX={-3}>
+      <Carousel
+        ref={carouselRef}
+        autoplay
+        loop
+        hideNavigation
+        PaginationComponent={CustomControls}
+        styles={{
+          root: { paddingInline: 'var(--space-3)' },
+          carousel: { gap: 'var(--space-2)' },
+        }}
+      >
+        <CarouselItem id="innovation-1" width="calc((100% - 2 * var(--space-2)) / 3)">
+          <NudgeCard
+            title="Innovation"
+            description="Cards are a great way to showcase content."
+            pictogram="shield"
+            width="100%"
+            minWidth="0"
+          />
+        </CarouselItem>
+        <CarouselItem id="innovation-2" width="calc((100% - 2 * var(--space-2)) / 3)">
+          <NudgeCard
+            title="Innovation"
+            description="Cards are a great way to showcase content."
+            pictogram="security"
+            width="100%"
+            minWidth="0"
+          />
+        </CarouselItem>
+        <CarouselItem id="innovation-3" width="calc((100% - 2 * var(--space-2)) / 3)">
+          <NudgeCard
+            title="Innovation"
+            description="Cards are a great way to showcase content."
+            pictogram="institutions"
+            width="100%"
+            minWidth="0"
+          />
+        </CarouselItem>
+        <CarouselItem id="innovation-4" width="calc((100% - 2 * var(--space-2)) / 3)">
+          <NudgeCard
+            title="Innovation"
+            description="Cards are a great way to showcase content."
+            pictogram="key"
+            width="100%"
+            minWidth="0"
+          />
+        </CarouselItem>
+        <CarouselItem id="innovation-5" width="calc((100% - 2 * var(--space-2)) / 3)">
+          <NudgeCard
+            title="Innovation"
+            description="Cards are a great way to showcase content."
+            pictogram="receipt"
+            width="100%"
+            minWidth="0"
+          />
+        </CarouselItem>
+        <CarouselItem id="innovation-6" width="calc((100% - 2 * var(--space-2)) / 3)">
+          <NudgeCard
+            title="Innovation"
+            description="Cards are a great way to showcase content."
+            pictogram="worldwide"
+            width="100%"
+            minWidth="0"
+          />
+        </CarouselItem>
+      </Carousel>
+    </Box>
+  );
+}
+```
+
 #### Dynamic Content
 
 You can dynamically add and remove items from the carousel.
 
 ```jsx live
 function DynamicContentCarousel() {
+  const toast = useToast();
   const [items, setItems] = useState(Object.values(assets).slice(0, 3));
 
-  function SquareAssetCard({ imageUrl, name }) {
+  function SquareAssetCard({ imageUrl, name, onClick }) {
     return (
       <ContainedAssetCard
         description={
@@ -1103,6 +1339,7 @@ function DynamicContentCarousel() {
           </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
+        onClick={onClick}
         subtitle={name}
         title="$0.87"
       />
@@ -1126,14 +1363,21 @@ function DynamicContentCarousel() {
       <Box marginX={-3}>
         <Carousel
           title="Explore Assets"
+          paginationVariant="dot"
           styles={{
             root: { paddingInline: 'var(--space-3)' },
             carousel: { gap: 'var(--space-1)', height: '156px' },
           }}
         >
           {items.map((asset, index) => (
-            <CarouselItem key={asset.symbol} id={asset.symbol}>
-              <SquareAssetCard imageUrl={asset.imageUrl} name={asset.symbol} />
+            <CarouselItem key={asset.symbol} id={asset.symbol} accessibilityLabel={asset.name}>
+              {({ isVisible }) => (
+                <SquareAssetCard
+                  imageUrl={asset.imageUrl}
+                  name={asset.symbol}
+                  onClick={() => toast.show(`${asset.symbol} clicked`)}
+                />
+              )}
             </CarouselItem>
           ))}
         </Carousel>
@@ -1147,7 +1391,8 @@ You can also animate items as they enter or leave the viewport.
 
 ```jsx live
 function AnimatedCarousel() {
-  function SquareAssetCard({ imageUrl, name }) {
+  const toast = useToast();
+  function SquareAssetCard({ imageUrl, name, onClick }) {
     const ref = useRef(null);
     // useInView is a framer motion hook that detects when an element is in the viewport
     const isInView = useInView(ref, {
@@ -1170,6 +1415,7 @@ function AnimatedCarousel() {
             </Text>
           }
           header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
+          onClick={onClick}
           subtitle={name}
           title="$0.87"
         />
@@ -1188,8 +1434,14 @@ function AnimatedCarousel() {
         hidePagination
       >
         {Object.values(assets).map((asset, index) => (
-          <CarouselItem key={asset.symbol} id={asset.symbol}>
-            <SquareAssetCard imageUrl={asset.imageUrl} name={asset.symbol} />
+          <CarouselItem key={asset.symbol} id={asset.symbol} accessibilityLabel={asset.name}>
+            {({ isVisible }) => (
+              <SquareAssetCard
+                imageUrl={asset.imageUrl}
+                name={asset.symbol}
+                onClick={() => toast.show(`${asset.symbol} clicked`)}
+              />
+            )}
           </CarouselItem>
         ))}
       </Carousel>
@@ -1264,6 +1516,7 @@ function AnimatedSelectionCarousel() {
     <Box marginX={-3}>
       <Carousel
         title="Explore Assets"
+        paginationVariant="dot"
         styles={{
           root: { paddingInline: 'var(--space-3)' },
           carousel: { gap: 'var(--space-1)' },
@@ -1291,13 +1544,14 @@ function AnimatedSelectionCarousel() {
 
 You can hide the navigation and pagination components of the carousel if desired (using `hideNavigation` and `hidePagination` props).
 
-Note that this can prevent proper accessibility for the carousel. If hiding pagination, it's recommended instead to
+Note that this can prevent proper accessibility for the carousel, if carousel items are not focusable. If hiding pagination, it's recommended instead to
 pass in `DefaultCarouselNavigation` with `hideUnlessFocused` prop. Alternatively, you can ensure that the carousel is
 navigable by keyboard through other means.
 
 ```jsx live
 function HideNavigationAndPaginationCarousel() {
-  function SquareAssetCard({ imageUrl, name }) {
+  const toast = useToast();
+  function SquareAssetCard({ imageUrl, name, onClick }) {
     return (
       <ContainedAssetCard
         description={
@@ -1306,6 +1560,7 @@ function HideNavigationAndPaginationCarousel() {
           </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
+        onClick={onClick}
         subtitle={name}
         title="$0.87"
       />
@@ -1325,8 +1580,14 @@ function HideNavigationAndPaginationCarousel() {
         }}
       >
         {Object.values(assets).map((asset, index) => (
-          <CarouselItem key={asset.symbol} id={asset.symbol}>
-            <SquareAssetCard imageUrl={asset.imageUrl} name={asset.symbol} />
+          <CarouselItem key={asset.symbol} id={asset.symbol} accessibilityLabel={asset.name}>
+            {({ isVisible }) => (
+              <SquareAssetCard
+                imageUrl={asset.imageUrl}
+                name={asset.symbol}
+                onClick={() => toast.show(`${asset.symbol} clicked`)}
+              />
+            )}
           </CarouselItem>
         ))}
       </Carousel>
@@ -1341,6 +1602,7 @@ You can create smooth pagination animations by customizing the pagination dots.
 
 ```jsx live
 function AnimatedPaginationCarousel() {
+  const toast = useToast();
   const AnimatedPagination = memo((props) => {
     const { totalPages, activePageIndex, onClickPage, style } = props;
 
@@ -1374,7 +1636,7 @@ function AnimatedPaginationCarousel() {
     );
   });
 
-  function SquareAssetCard({ imageUrl, name }) {
+  function SquareAssetCard({ imageUrl, name, onClick }) {
     return (
       <ContainedAssetCard
         description={
@@ -1383,6 +1645,7 @@ function AnimatedPaginationCarousel() {
           </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
+        onClick={onClick}
         subtitle={name}
         title="$0.87"
       />
@@ -1403,7 +1666,13 @@ function AnimatedPaginationCarousel() {
       >
         {Object.values(assets).map((asset, index) => (
           <CarouselItem key={asset.symbol} id={asset.symbol} accessibilityLabel={asset.name}>
-            <SquareAssetCard imageUrl={asset.imageUrl} name={asset.symbol} />
+            {({ isVisible }) => (
+              <SquareAssetCard
+                imageUrl={asset.imageUrl}
+                name={asset.symbol}
+                onClick={() => toast.show(`${asset.symbol} clicked`)}
+              />
+            )}
           </CarouselItem>
         ))}
       </Carousel>
@@ -1418,6 +1687,7 @@ You can control the carousel programmatically using a ref. The carousel exposes
 
 ```jsx live
 function ImperativeApiCarousel() {
+  const toast = useToast();
   const carouselRef = useRef(null);
   const [currentPageInfo, setCurrentPageInfo] = useState('Page 1');
 
@@ -1451,7 +1721,7 @@ function ImperativeApiCarousel() {
     }
   }
 
-  function SquareAssetCard({ imageUrl, name }) {
+  function SquareAssetCard({ imageUrl, name, onClick }) {
     return (
       <ContainedAssetCard
         description={
@@ -1460,6 +1730,7 @@ function ImperativeApiCarousel() {
           </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
+        onClick={onClick}
         subtitle={name}
         title="$0.87"
       />
@@ -1529,7 +1800,13 @@ function ImperativeApiCarousel() {
         >
           {Object.values(assets).map((asset, index) => (
             <CarouselItem key={asset.symbol} id={asset.symbol} accessibilityLabel={asset.name}>
-              <SquareAssetCard imageUrl={asset.imageUrl} name={asset.symbol} />
+              {({ isVisible }) => (
+                <SquareAssetCard
+                  imageUrl={asset.imageUrl}
+                  name={asset.symbol}
+                  onClick={() => toast.show(`${asset.symbol} clicked`)}
+                />
+              )}
             </CarouselItem>
           ))}
         </Carousel>
@@ -1545,6 +1822,7 @@ You can use the `onChangePage`, `onDragStart`, and `onDragEnd` callbacks to list
 
 ```tsx
 <Carousel
+  paginationVariant="dot"
   onChangePage={(pageIndex: number) => console.log('Page changed', activePageIndex)}
   onDragStart={() => console.log('Drag started')}
   onDragEnd={() => console.log('Drag ended')}
@@ -1564,6 +1842,8 @@ You can use the `onChangePage`, `onDragStart`, and `onDragEnd` callbacks to list
 | `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
 | `as` | `div` | No | `-` | The underlying element or component the polymorphic component will render.  Changing as also changes the inherited native props (e.g. href for as=a) and the expected ref type. |
 | `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `autoplay` | `boolean` | No | `-` | Whether autoplay is enabled for the carousel. |
+| `autoplayInterval` | `number` | No | `3000 (3 seconds)` | The interval in milliseconds for autoplay. |
 | `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
 | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
 | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
@@ -1617,7 +1897,7 @@ You can use the `onChangePage`, `onDragStart`, and `onDragEnd` callbacks to list
 | `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
 | `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
 | `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
-| `hideNavigation` | `boolean` | No | `-` | Hides the navigation arrows (previous/next buttons). |
+| `hideNavigation` | `boolean` | No | `-` | Hides the navigation arrows (previous/next buttons and autoplay control). |
 | `hidePagination` | `boolean` | No | `-` | Hides the pagination indicators (dots/bars showing current page). |
 | `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
 | `key` | `Key \| null` | No | `-` | - |
@@ -1635,7 +1915,7 @@ You can use the `onChangePage`, `onDragStart`, and `onDragEnd` callbacks to list
 | `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
 | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
 | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
-| `nextPageAccessibilityLabel` | `string` | No | `-` | Accessibility label for the next page button. |
+| `nextPageAccessibilityLabel` | `string` | No | `'Next page'` | Accessibility label for the next page button. |
 | `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
 | `onChangePage` | `((activePageIndex: number) => void)` | No | `-` | Callback fired when the carousel page changes. |
 | `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
@@ -1647,14 +1927,18 @@ You can use the `onChangePage`, `onDragStart`, and `onDragEnd` callbacks to list
 | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
-| `paginationAccessibilityLabel` | `string \| ((pageIndex: number) => string)` | No | `-` | Accessibility label for the go to page button. |
+| `pageChangeAccessibilityLabel` | `((activePageIndex: number, totalPages: number) => string)` | No | ``Page X of Y`` | Accessibility label announced by screen readers when the page changes. Receives the current page index (0-based) and total pages. |
+| `paginationAccessibilityLabel` | `string \| ((pageIndex: number) => string)` | No | ``Go to page X`` | Accessibility label for the go to page button. When a string is provided, it is used as-is for all indicators. When a function is provided, it receives the page index and returns a label. |
+| `paginationVariant` | `dot \| pill` | No | `'pill'` | Visual variant for the pagination indicators. - pill: All indicators are pill-shaped (default) - dot: Inactive indicators are small dots, active indicator expands to a pill |
 | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
 | `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
-| `previousPageAccessibilityLabel` | `string` | No | `-` | Accessibility label for the previous page button. |
+| `previousPageAccessibilityLabel` | `string` | No | `'Previous page'` | Accessibility label for the previous page button. |
 | `ref` | `((instance: CarouselImperativeHandle \| null) => void) \| RefObject<CarouselImperativeHandle> \| null` | No | `-` | - |
 | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
 | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `snapMode` | `page \| item` | No | `'page'` | Specifies the pagination and navigation strategy for the carousel. item treats each item as a separate page for navigation, pagination, and snapping. page groups items into pages based on visible area for navigation, pagination, and snapping. This affects page calculation, navigation button behavior, and snap targets when dragging. |
+| `startAutoplayAccessibilityLabel` | `string` | No | `'Play Carousel'` | Accessibility label for starting autoplay. |
+| `stopAutoplayAccessibilityLabel` | `string` | No | `'Pause Carousel'` | Accessibility label for stopping autoplay. |
 | `style` | `CSSProperties` | No | `-` | Custom styles for the root element. |
 | `styles` | `{ root?: CSSProperties; title?: CSSProperties \| undefined; navigation?: CSSProperties \| undefined; pagination?: CSSProperties \| undefined; carousel?: CSSProperties \| undefined; carouselContainer?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the component. |
 | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
@@ -1670,3 +1954,15 @@ You can use the `onChangePage`, `onDragStart`, and `onDragEnd` callbacks to list
 | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 
 
+## Styles
+
+| Selector | Static class name | Description |
+| --- | --- | --- |
+| `root` | `-` | root element. |
+| `title` | `-` | title element. |
+| `navigation` | `-` | navigation element. |
+| `pagination` | `-` | pagination element. |
+| `carousel` | `-` | main carousel element. |
+| `carouselContainer` | `-` | outer carousel container element. |
+
+