@d4gger/design-system 3.0.0 → 3.0.1

package/dist/components/carousel/Carousel.js

@@ -2,10 +2,12 @@
 import * as React from "react";
 import classNames from "classnames";
 import { Slot } from "@radix-ui/react-slot";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
 import { extractProps } from "../../_internal/helpers/extractProps.js";
+import { usePrefersReducedMotion } from "../../_internal/usePrefersReducedMotion.js";
+import { Button } from "../button/Button.js";
 import { carouselPropDefs } from "./carousel.props.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 const CarouselContext = React.createContext(null);
 function useCarouselContext() {
   const context = React.useContext(CarouselContext);
@@ -19,6 +21,8 @@ const CarouselRoot = React.forwardRef((props, forwardedRef) => {
   const autoPlay = props.autoPlay ?? false;
   const autoPlayInterval = props.autoPlayInterval ?? 3e3;
   const {
+    autoPlay: _autoPlay,
+    autoPlayInterval: _autoPlayInterval,
     asChild,
     children,
     className,
@@ -29,45 +33,78 @@ const CarouselRoot = React.forwardRef((props, forwardedRef) => {
   } = extractProps(props, carouselPropDefs);
   const Comp = asChild ? Slot : "div";
   const containerRef = React.useRef(null);
-  const [currentIndex, setCurrentIndex] = React.useState(initialIndex);
+  const [currentIndex, setCurrentIndex] = React.useState(() => Number.isFinite(initialIndex) ? Math.max(0, Math.trunc(initialIndex)) : 0);
   const [slideCount, setSlideCountState] = React.useState(0);
-  const goTo = React.useCallback((index) => {
-    setCurrentIndex(index);
-  }, []);
+  const reducedMotion = usePrefersReducedMotion();
+  const [paused, setPaused] = React.useState(false);
+  const [hovered, setHovered] = React.useState(false);
+  const rotationControlRef = React.useRef(null);
+  const rotating = autoPlay && !paused && !hovered && !reducedMotion && slideCount > 1;
+  const index = slideCount > 0 ? Math.max(0, Math.min(currentIndex, slideCount - 1)) : 0;
+  const goTo = React.useCallback((index2) => {
+    setCurrentIndex(Number.isFinite(index2) ? Math.max(0, Math.min(Math.trunc(index2), Math.max(0, slideCount - 1))) : 0);
+  }, [slideCount]);
   const next = React.useCallback(() => {
     setCurrentIndex((prev2) => {
+      if (slideCount < 1) return 0;
       if (loop) return (prev2 + 1) % slideCount;
       return Math.min(prev2 + 1, slideCount - 1);
     });
   }, [loop, slideCount]);
   const prev = React.useCallback(() => {
     setCurrentIndex((prev2) => {
+      if (slideCount < 1) return 0;
       if (loop) return (prev2 - 1 + slideCount) % slideCount;
       return Math.max(prev2 - 1, 0);
     });
   }, [loop, slideCount]);
   const setSlideCount = React.useCallback((count) => {
     setSlideCountState(count);
+    setCurrentIndex((current) => Number.isFinite(current) ? Math.max(0, Math.min(Math.trunc(current), Math.max(0, count - 1))) : 0);
   }, []);
   React.useEffect(() => {
-    if (!autoPlay || slideCount < 2) return;
+    if (!rotating) return;
     const id = setInterval(() => {
-      setCurrentIndex((prev2) => (prev2 + 1) % slideCount);
-    }, autoPlayInterval);
+      setCurrentIndex((prev2) => loop ? (prev2 + 1) % slideCount : Math.min(prev2 + 1, slideCount - 1));
+    }, autoPlayInterval > 0 ? autoPlayInterval : 3e3);
     return () => clearInterval(id);
-  }, [autoPlay, autoPlayInterval, slideCount]);
+  }, [rotating, autoPlayInterval, slideCount, loop]);
   const contextValue = React.useMemo(
-    () => ({ currentIndex, slideCount, setSlideCount, goTo, next, prev, orientation, containerRef }),
-    [currentIndex, slideCount, setSlideCount, goTo, next, prev, orientation]
+    () => ({ currentIndex: index, slideCount, setSlideCount, goTo, next, prev, loop, rotating, orientation, containerRef }),
+    [index, slideCount, setSlideCount, goTo, next, prev, loop, rotating, orientation]
   );
   const isViewport = (child) => React.isValidElement(child) && child.type === CarouselViewport;
   const isNavButton = (child) => React.isValidElement(child) && (child.type === CarouselPrevious || child.type === CarouselNext);
   const isIndicators = (child) => React.isValidElement(child) && child.type === CarouselIndicators;
-  const childArray = React.Children.toArray(children);
+  const slotHost = asChild ? React.Children.only(children) : null;
+  const childArray = React.Children.toArray(slotHost ? slotHost.props.children : children);
   const viewportElements = childArray.filter(isViewport);
   const navElements = childArray.filter(isNavButton);
   const indicatorElements = childArray.filter(isIndicators);
-  return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    autoPlay && slideCount > 1 ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref: rotationControlRef,
+        type: "button",
+        size: "sm",
+        variant: "ghost",
+        disabled: reducedMotion,
+        onClick: () => {
+          setPaused((current) => !current);
+        },
+        children: reducedMotion ? "Slide rotation paused" : paused ? "Start slide rotation" : "Stop slide rotation"
+      }
+    ) : null,
+    viewportElements.map((viewport) => {
+      const vp = viewport;
+      return React.cloneElement(vp, {
+        children: [vp.props.children, ...navElements]
+      });
+    }),
+    indicatorElements
+  ] });
+  return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     Comp,
     {
       ...restProps,
@@ -75,31 +112,41 @@ const CarouselRoot = React.forwardRef((props, forwardedRef) => {
       className: classNames("dsx-carousel", className),
       "data-size": size,
       "data-slot": "carousel",
-      children: [
-        viewportElements.map((viewport) => {
-          const vp = viewport;
-          return React.cloneElement(vp, {
-            children: [vp.props.children, ...navElements]
-          });
-        }),
-        indicatorElements
-      ]
+      role: restProps.role ?? "group",
+      "aria-roledescription": "carousel",
+      onMouseEnter: (event) => {
+        setHovered(true);
+        restProps.onMouseEnter?.(event);
+      },
+      onMouseLeave: (event) => {
+        setHovered(false);
+        restProps.onMouseLeave?.(event);
+      },
+      onFocusCapture: (event) => {
+        if (!rotationControlRef.current?.contains(event.target)) setPaused(true);
+        restProps.onFocusCapture?.(event);
+      },
+      onPointerDownCapture: (event) => {
+        if (!rotationControlRef.current?.contains(event.target)) setPaused(true);
+        restProps.onPointerDownCapture?.(event);
+      },
+      children: slotHost ? React.cloneElement(slotHost, void 0, content) : content
     }
   ) });
 });
 CarouselRoot.displayName = "Carousel";
 const CarouselViewport = React.forwardRef((props, forwardedRef) => {
   const { className, children, onSlideCountChange, ...restProps } = props;
-  const { currentIndex, orientation, containerRef, setSlideCount } = useCarouselContext();
+  const { currentIndex, orientation, containerRef, setSlideCount, rotating } = useCarouselContext();
   const childArray = React.Children.toArray(children);
   const isNavButton = (child) => React.isValidElement(child) && (child.type === CarouselPrevious || child.type === CarouselNext);
   const trackChildren = childArray.filter((c) => !isNavButton(c));
   const navElements = childArray.filter(isNavButton);
+  const childCount = trackChildren.length;
   React.useEffect(() => {
-    const childCount = React.Children.count(trackChildren);
     setSlideCount(childCount);
     onSlideCountChange?.(childCount);
-  }, [trackChildren, onSlideCountChange, setSlideCount]);
+  }, [childCount, onSlideCountChange, setSlideCount]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -127,7 +174,21 @@ const CarouselViewport = React.forwardRef((props, forwardedRef) => {
               transform: orientation === "horizontal" ? `translateX(-${currentIndex * 100}%)` : `translateY(-${currentIndex * 100}%)`
             },
             "data-slot": "carousel-track",
-            children: trackChildren
+            "aria-live": rotating ? "off" : "polite",
+            "aria-atomic": "false",
+            children: trackChildren.map((child, index) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "dsx-carousel__slide",
+                role: "group",
+                "aria-roledescription": "slide",
+                "aria-label": `${index + 1} of ${childCount}`,
+                "aria-hidden": index !== currentIndex ? true : void 0,
+                inert: index !== currentIndex,
+                children: child
+              },
+              React.isValidElement(child) ? child.key ?? index : index
+            ))
           }
         ),
         navElements
@@ -150,35 +211,45 @@ const CarouselItem = React.forwardRef((props, forwardedRef) => {
 });
 CarouselItem.displayName = "CarouselItem";
 const CarouselPrevious = React.forwardRef((props, forwardedRef) => {
-  const { className, ...restProps } = props;
-  const { prev, orientation } = useCarouselContext();
+  const { className, onClick, ...restProps } = props;
+  const { prev, orientation, loop, currentIndex, slideCount } = useCarouselContext();
   return /* @__PURE__ */ jsx(
     "button",
     {
       ...restProps,
       ref: forwardedRef,
       className: classNames("dsx-carousel__nav dsx-carousel__nav--previous", className),
-      onClick: prev,
-      "aria-label": "Previous slide",
+      type: restProps.type ?? "button",
+      disabled: restProps.disabled || slideCount < 2 || !loop && currentIndex === 0,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) prev();
+      },
+      "aria-label": restProps["aria-label"] ?? "Previous slide",
       "data-slot": "carousel-previous",
-      children: orientation === "horizontal" ? /* @__PURE__ */ jsx(ChevronLeft, { size: 20 }) : /* @__PURE__ */ jsx(ChevronLeft, { size: 20 })
+      children: orientation === "horizontal" ? /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true", size: 20 }) : /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true", size: 20 })
     }
   );
 });
 CarouselPrevious.displayName = "CarouselPrevious";
 const CarouselNext = React.forwardRef((props, forwardedRef) => {
-  const { className, ...restProps } = props;
-  const { next, orientation } = useCarouselContext();
+  const { className, onClick, ...restProps } = props;
+  const { next, orientation, loop, currentIndex, slideCount } = useCarouselContext();
   return /* @__PURE__ */ jsx(
     "button",
     {
       ...restProps,
       ref: forwardedRef,
       className: classNames("dsx-carousel__nav dsx-carousel__nav--next", className),
-      onClick: next,
-      "aria-label": "Next slide",
+      type: restProps.type ?? "button",
+      disabled: restProps.disabled || slideCount < 2 || !loop && currentIndex >= slideCount - 1,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) next();
+      },
+      "aria-label": restProps["aria-label"] ?? "Next slide",
       "data-slot": "carousel-next",
-      children: orientation === "horizontal" ? /* @__PURE__ */ jsx(ChevronRight, { size: 20 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 20 })
+      children: orientation === "horizontal" ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", size: 20 }) : /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", size: 20 })
     }
   );
 });
@@ -193,8 +264,8 @@ const CarouselIndicators = React.forwardRef((props, forwardedRef) => {
       ...restProps,
       ref: forwardedRef,
       className: classNames("dsx-carousel__indicators", className),
-      role: "tablist",
-      "aria-label": "Slide indicators",
+      role: "group",
+      "aria-label": restProps["aria-label"] ?? "Slide indicators",
       "data-slot": "carousel-indicators",
       children: Array.from({ length: slideCount }).map((_, index) => /* @__PURE__ */ jsx(
         "button",
@@ -206,8 +277,7 @@ const CarouselIndicators = React.forwardRef((props, forwardedRef) => {
           ),
           onClick: () => goTo(index),
           "aria-label": `Go to slide ${index + 1}`,
-          "aria-selected": index === currentIndex,
-          role: "tab",
+          "aria-disabled": index === currentIndex,
           "data-slot": "carousel-indicator"
         },
         index

package/dist/components/carousel/Carousel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/carousel/Carousel.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { carouselPropDefs } from './carousel.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype CarouselOwnProps = GetPropDefTypes<typeof carouselPropDefs> & {\n  initialIndex?: number\n  loop?: boolean\n  autoPlay?: boolean\n  autoPlayInterval?: number\n}\n\ninterface CarouselProps extends React.ComponentPropsWithoutRef<'div'>, CarouselOwnProps {}\n\ntype CarouselContextValue = {\n  currentIndex: number\n  slideCount: number\n  setSlideCount: (count: number) => void\n  goTo: (index: number) => void\n  next: () => void\n  prev: () => void\n  orientation: 'horizontal' | 'vertical'\n  containerRef: React.RefObject<HTMLDivElement | null>\n}\n\nconst CarouselContext = React.createContext<CarouselContextValue | null>(null)\n\nfunction useCarouselContext() {\n  const context = React.useContext(CarouselContext)\n  if (!context) {\n    throw new Error('Carousel compound components must be used within Carousel')\n  }\n  return context\n}\n\nconst CarouselRoot = React.forwardRef<HTMLDivElement, CarouselProps>((props, forwardedRef) => {\n  const orientation = (props as { orientation?: 'horizontal' | 'vertical' }).orientation ?? 'horizontal'\n  const autoPlay = (props as { autoPlay?: boolean }).autoPlay ?? false\n  const autoPlayInterval = (props as { autoPlayInterval?: number }).autoPlayInterval ?? 3000\n  const {\n    asChild,\n    children,\n    className,\n    initialIndex = 0,\n    loop = false,\n    size = 'md',\n    ...restProps\n  } = extractProps(props, carouselPropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const [currentIndex, setCurrentIndex] = React.useState(initialIndex)\n  const [slideCount, setSlideCountState] = React.useState(0)\n\n  const goTo = React.useCallback((index: number) => {\n    setCurrentIndex(index)\n  }, [])\n\n  const next = React.useCallback(() => {\n    setCurrentIndex((prev) => {\n      if (loop) return (prev + 1) % slideCount\n      return Math.min(prev + 1, slideCount - 1)\n    })\n  }, [loop, slideCount])\n\n  const prev = React.useCallback(() => {\n    setCurrentIndex((prev) => {\n      if (loop) return (prev - 1 + slideCount) % slideCount\n      return Math.max(prev - 1, 0)\n    })\n  }, [loop, slideCount])\n\n  const setSlideCount = React.useCallback((count: number) => {\n    setSlideCountState(count)\n  }, [])\n\n  React.useEffect(() => {\n    if (!autoPlay || slideCount < 2) return\n    const id = setInterval(() => {\n      setCurrentIndex((prev) => (prev + 1) % slideCount)\n    }, autoPlayInterval)\n    return () => clearInterval(id)\n  }, [autoPlay, autoPlayInterval, slideCount])\n\n  const contextValue = React.useMemo(\n    () => ({ currentIndex, slideCount, setSlideCount, goTo, next, prev, orientation, containerRef }),\n    [currentIndex, slideCount, setSlideCount, goTo, next, prev, orientation],\n  )\n\n  const isViewport = (child: React.ReactNode) =>\n    React.isValidElement(child) && (child as React.ReactElement).type === CarouselViewport\n  const isNavButton = (child: React.ReactNode) =>\n    React.isValidElement(child) &&\n    ((child as React.ReactElement).type === CarouselPrevious ||\n      (child as React.ReactElement).type === CarouselNext)\n  const isIndicators = (child: React.ReactNode) =>\n    React.isValidElement(child) && (child as React.ReactElement).type === CarouselIndicators\n\n  const childArray = React.Children.toArray(children)\n  const viewportElements = childArray.filter(isViewport)\n  const navElements = childArray.filter(isNavButton)\n  const indicatorElements = childArray.filter(isIndicators)\n\n  return (\n    <CarouselContext.Provider value={contextValue}>\n      <Comp\n        {...restProps}\n        ref={forwardedRef}\n        className={classNames('dsx-carousel', className)}\n        data-size={size}\n        data-slot=\"carousel\"\n      >\n        {viewportElements.map((viewport) => {\n          const vp = viewport as React.ReactElement<CarouselViewportProps>\n          return React.cloneElement(vp, {\n            children: [vp.props.children, ...navElements] as React.ReactNode,\n          })\n        })}\n        {indicatorElements}\n      </Comp>\n    </CarouselContext.Provider>\n  )\n})\nCarouselRoot.displayName = 'Carousel'\n\ninterface CarouselViewportProps extends React.ComponentPropsWithoutRef<'div'> {\n  onSlideCountChange?: (count: number) => void\n}\n\nconst CarouselViewport = React.forwardRef<HTMLDivElement, CarouselViewportProps>((props, forwardedRef) => {\n  const { className, children, onSlideCountChange, ...restProps } = props\n  const { currentIndex, orientation, containerRef, setSlideCount } = useCarouselContext()\n\n  const childArray = React.Children.toArray(children)\n  const isNavButton = (child: React.ReactNode) =>\n    React.isValidElement(child) &&\n    ((child as React.ReactElement).type === CarouselPrevious ||\n      (child as React.ReactElement).type === CarouselNext)\n  const trackChildren = childArray.filter((c) => !isNavButton(c))\n  const navElements = childArray.filter(isNavButton)\n\n  React.useEffect(() => {\n    const childCount = React.Children.count(trackChildren)\n    setSlideCount(childCount)\n    onSlideCountChange?.(childCount)\n  }, [trackChildren, onSlideCountChange, setSlideCount])\n\n  return (\n      <div\n        {...restProps}\n        ref={(node) => {\n          containerRef.current = node\n          if (typeof forwardedRef === 'function') {\n            forwardedRef(node)\n          } else if (forwardedRef) {\n            forwardedRef.current = node\n          }\n        }}\n        className={classNames('dsx-carousel__viewport', className)}\n        data-slot=\"carousel-viewport\"\n        data-orientation={orientation}\n      >\n      <div\n        className={classNames(\n          'dsx-carousel__track',\n          orientation === 'vertical' && 'dsx-carousel__track--vertical',\n        )}\n        style={{\n          transform: orientation === 'horizontal'\n            ? `translateX(-${currentIndex * 100}%)`\n            : `translateY(-${currentIndex * 100}%)`,\n        }}\n        data-slot=\"carousel-track\"\n      >\n        {trackChildren}\n      </div>\n      {navElements}\n    </div>\n  )\n})\nCarouselViewport.displayName = 'CarouselViewport'\n\ninterface CarouselItemProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst CarouselItem = React.forwardRef<HTMLDivElement, CarouselItemProps>((props, forwardedRef) => {\n  const { className, ...restProps } = props\n  return (\n    <div\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-carousel__item', className)}\n      data-slot=\"carousel-item\"\n    />\n  )\n})\nCarouselItem.displayName = 'CarouselItem'\n\ninterface CarouselPreviousProps extends React.ComponentPropsWithoutRef<'button'> {}\n\nconst CarouselPrevious = React.forwardRef<HTMLButtonElement, CarouselPreviousProps>((props, forwardedRef) => {\n  const { className, ...restProps } = props\n  const { prev, orientation } = useCarouselContext()\n\n  return (\n    <button\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-carousel__nav dsx-carousel__nav--previous', className)}\n      onClick={prev}\n      aria-label=\"Previous slide\"\n      data-slot=\"carousel-previous\"\n    >\n      {orientation === 'horizontal' ? <ChevronLeft size={20} /> : <ChevronLeft size={20} />}\n    </button>\n  )\n})\nCarouselPrevious.displayName = 'CarouselPrevious'\n\ninterface CarouselNextProps extends React.ComponentPropsWithoutRef<'button'> {}\n\nconst CarouselNext = React.forwardRef<HTMLButtonElement, CarouselNextProps>((props, forwardedRef) => {\n  const { className, ...restProps } = props\n  const { next, orientation } = useCarouselContext()\n\n  return (\n    <button\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-carousel__nav dsx-carousel__nav--next', className)}\n      onClick={next}\n      aria-label=\"Next slide\"\n      data-slot=\"carousel-next\"\n    >\n      {orientation === 'horizontal' ? <ChevronRight size={20} /> : <ChevronRight size={20} />}\n    </button>\n  )\n})\nCarouselNext.displayName = 'CarouselNext'\n\ninterface CarouselIndicatorsProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst CarouselIndicators = React.forwardRef<HTMLDivElement, CarouselIndicatorsProps>((props, forwardedRef) => {\n  const { className, ...restProps } = props\n  const { currentIndex, slideCount, goTo } = useCarouselContext()\n\n  if (slideCount <= 1) return null\n\n  return (\n    <div\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-carousel__indicators', className)}\n      role=\"tablist\"\n      aria-label=\"Slide indicators\"\n      data-slot=\"carousel-indicators\"\n    >\n      {Array.from({ length: slideCount }).map((_, index) => (\n        <button\n          key={index}\n          type=\"button\"\n          className={classNames(\n            'dsx-carousel__indicator',\n            index === currentIndex && 'dsx-carousel__indicator--active',\n          )}\n          onClick={() => goTo(index)}\n          aria-label={`Go to slide ${index + 1}`}\n          aria-selected={index === currentIndex}\n          role=\"tab\"\n          data-slot=\"carousel-indicator\"\n        />\n      ))}\n    </div>\n  )\n})\nCarouselIndicators.displayName = 'CarouselIndicators'\n\nconst Carousel: typeof CarouselRoot & {\n  Viewport: typeof CarouselViewport\n  Item: typeof CarouselItem\n  Previous: typeof CarouselPrevious\n  Next: typeof CarouselNext\n  Indicators: typeof CarouselIndicators\n} = Object.assign(CarouselRoot, {\n  Viewport: CarouselViewport,\n  Item: CarouselItem,\n  Previous: CarouselPrevious,\n  Next: CarouselNext,\n  Indicators: CarouselIndicators,\n})\n\nexport { Carousel, CarouselItem, CarouselIndicators, CarouselNext, CarouselPrevious, CarouselRoot, CarouselViewport }\nexport type { CarouselIndicatorsProps, CarouselItemProps, CarouselNextProps, CarouselOwnProps, CarouselPreviousProps, CarouselProps, CarouselViewportProps }\n"],
-  "mappings": "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",
-  "names": ["prev"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { usePrefersReducedMotion } from '../../_internal/usePrefersReducedMotion'\nimport { Button } from '../button/Button'\nimport { carouselPropDefs } from './carousel.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype CarouselOwnProps = GetPropDefTypes<typeof carouselPropDefs> & {\n  initialIndex?: number\n  loop?: boolean\n  autoPlay?: boolean\n  autoPlayInterval?: number\n}\n\ninterface CarouselProps extends React.ComponentPropsWithoutRef<'div'>, CarouselOwnProps {}\n\ntype CarouselContextValue = {\n  currentIndex: number\n  slideCount: number\n  setSlideCount: (count: number) => void\n  goTo: (index: number) => void\n  next: () => void\n  prev: () => void\n  loop: boolean\n  rotating: boolean\n  orientation: 'horizontal' | 'vertical'\n  containerRef: React.RefObject<HTMLDivElement | null>\n}\n\nconst CarouselContext = React.createContext<CarouselContextValue | null>(null)\n\nfunction useCarouselContext() {\n  const context = React.useContext(CarouselContext)\n  if (!context) {\n    throw new Error('Carousel compound components must be used within Carousel')\n  }\n  return context\n}\n\nconst CarouselRoot = React.forwardRef<HTMLDivElement, CarouselProps>((props, forwardedRef) => {\n  const orientation = (props as { orientation?: 'horizontal' | 'vertical' }).orientation ?? 'horizontal'\n  const autoPlay = (props as { autoPlay?: boolean }).autoPlay ?? false\n  const autoPlayInterval = (props as { autoPlayInterval?: number }).autoPlayInterval ?? 3000\n  const {\n    autoPlay: _autoPlay,\n    autoPlayInterval: _autoPlayInterval,\n    asChild,\n    children,\n    className,\n    initialIndex = 0,\n    loop = false,\n    size = 'md',\n    ...restProps\n  } = extractProps(props, carouselPropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const [currentIndex, setCurrentIndex] = React.useState(() => Number.isFinite(initialIndex) ? Math.max(0, Math.trunc(initialIndex)) : 0)\n  const [slideCount, setSlideCountState] = React.useState(0)\n  const reducedMotion = usePrefersReducedMotion()\n  const [paused, setPaused] = React.useState(false)\n  const [hovered, setHovered] = React.useState(false)\n  const rotationControlRef = React.useRef<HTMLButtonElement>(null)\n  const rotating = autoPlay && !paused && !hovered && !reducedMotion && slideCount > 1\n  const index = slideCount > 0 ? Math.max(0, Math.min(currentIndex, slideCount - 1)) : 0\n\n  const goTo = React.useCallback((index: number) => {\n    setCurrentIndex(Number.isFinite(index) ? Math.max(0, Math.min(Math.trunc(index), Math.max(0, slideCount - 1))) : 0)\n  }, [slideCount])\n\n  const next = React.useCallback(() => {\n    setCurrentIndex((prev) => {\n      if (slideCount < 1) return 0\n      if (loop) return (prev + 1) % slideCount\n      return Math.min(prev + 1, slideCount - 1)\n    })\n  }, [loop, slideCount])\n\n  const prev = React.useCallback(() => {\n    setCurrentIndex((prev) => {\n      if (slideCount < 1) return 0\n      if (loop) return (prev - 1 + slideCount) % slideCount\n      return Math.max(prev - 1, 0)\n    })\n  }, [loop, slideCount])\n\n  const setSlideCount = React.useCallback((count: number) => {\n    setSlideCountState(count)\n    setCurrentIndex((current) => Number.isFinite(current) ? Math.max(0, Math.min(Math.trunc(current), Math.max(0, count - 1))) : 0)\n  }, [])\n\n  React.useEffect(() => {\n    if (!rotating) return\n    const id = setInterval(() => {\n      setCurrentIndex((prev) => loop ? (prev + 1) % slideCount : Math.min(prev + 1, slideCount - 1))\n    }, autoPlayInterval > 0 ? autoPlayInterval : 3000)\n    return () => clearInterval(id)\n  }, [rotating, autoPlayInterval, slideCount, loop])\n\n  const contextValue = React.useMemo(\n    () => ({ currentIndex: index, slideCount, setSlideCount, goTo, next, prev, loop, rotating, orientation, containerRef }),\n    [index, slideCount, setSlideCount, goTo, next, prev, loop, rotating, orientation],\n  )\n\n  const isViewport = (child: React.ReactNode) =>\n    React.isValidElement(child) && (child as React.ReactElement).type === CarouselViewport\n  const isNavButton = (child: React.ReactNode) =>\n    React.isValidElement(child) &&\n    ((child as React.ReactElement).type === CarouselPrevious ||\n      (child as React.ReactElement).type === CarouselNext)\n  const isIndicators = (child: React.ReactNode) =>\n    React.isValidElement(child) && (child as React.ReactElement).type === CarouselIndicators\n\n  const slotHost = asChild ? React.Children.only(children) as React.ReactElement<{ children?: React.ReactNode }> : null\n  const childArray = React.Children.toArray(slotHost ? slotHost.props.children : children)\n  const viewportElements = childArray.filter(isViewport)\n  const navElements = childArray.filter(isNavButton)\n  const indicatorElements = childArray.filter(isIndicators)\n\n  const content = (\n    <>\n      {autoPlay && slideCount > 1 ? (\n        <Button ref={rotationControlRef} type=\"button\" size=\"sm\" variant=\"ghost\" disabled={reducedMotion}\n          onClick={() => { setPaused((current) => !current) }}>\n          {reducedMotion ? 'Slide rotation paused' : paused ? 'Start slide rotation' : 'Stop slide rotation'}\n        </Button>\n      ) : null}\n      {viewportElements.map((viewport) => {\n        const vp = viewport as React.ReactElement<CarouselViewportProps>\n        return React.cloneElement(vp, {\n          children: [vp.props.children, ...navElements] as React.ReactNode,\n        })\n      })}\n      {indicatorElements}\n    </>\n  )\n\n  return (\n    <CarouselContext.Provider value={contextValue}>\n      <Comp\n        {...restProps}\n        ref={forwardedRef}\n        className={classNames('dsx-carousel', className)}\n        data-size={size}\n        data-slot=\"carousel\"\n        role={restProps.role ?? 'group'}\n        aria-roledescription=\"carousel\"\n        onMouseEnter={(event) => { setHovered(true); restProps.onMouseEnter?.(event) }}\n        onMouseLeave={(event) => { setHovered(false); restProps.onMouseLeave?.(event) }}\n        onFocusCapture={(event) => {\n          if (!rotationControlRef.current?.contains(event.target as Node)) setPaused(true)\n          restProps.onFocusCapture?.(event)\n        }}\n        onPointerDownCapture={(event) => {\n          if (!rotationControlRef.current?.contains(event.target as Node)) setPaused(true)\n          restProps.onPointerDownCapture?.(event)\n        }}\n      >\n        {slotHost ? React.cloneElement(slotHost, undefined, content) : content}\n      </Comp>\n    </CarouselContext.Provider>\n  )\n})\nCarouselRoot.displayName = 'Carousel'\n\ninterface CarouselViewportProps extends React.ComponentPropsWithoutRef<'div'> {\n  onSlideCountChange?: (count: number) => void\n}\n\nconst CarouselViewport = React.forwardRef<HTMLDivElement, CarouselViewportProps>((props, forwardedRef) => {\n  const { className, children, onSlideCountChange, ...restProps } = props\n  const { currentIndex, orientation, containerRef, setSlideCount, rotating } = useCarouselContext()\n\n  const childArray = React.Children.toArray(children)\n  const isNavButton = (child: React.ReactNode) =>\n    React.isValidElement(child) &&\n    ((child as React.ReactElement).type === CarouselPrevious ||\n      (child as React.ReactElement).type === CarouselNext)\n  const trackChildren = childArray.filter((c) => !isNavButton(c))\n  const navElements = childArray.filter(isNavButton)\n  const childCount = trackChildren.length\n\n  React.useEffect(() => {\n    setSlideCount(childCount)\n    onSlideCountChange?.(childCount)\n  }, [childCount, onSlideCountChange, setSlideCount])\n\n  return (\n      <div\n        {...restProps}\n        ref={(node) => {\n          containerRef.current = node\n          if (typeof forwardedRef === 'function') {\n            forwardedRef(node)\n          } else if (forwardedRef) {\n            forwardedRef.current = node\n          }\n        }}\n        className={classNames('dsx-carousel__viewport', className)}\n        data-slot=\"carousel-viewport\"\n        data-orientation={orientation}\n      >\n      <div\n        className={classNames(\n          'dsx-carousel__track',\n          orientation === 'vertical' && 'dsx-carousel__track--vertical',\n        )}\n        style={{\n          transform: orientation === 'horizontal'\n            ? `translateX(-${currentIndex * 100}%)`\n            : `translateY(-${currentIndex * 100}%)`,\n        }}\n        data-slot=\"carousel-track\"\n        aria-live={rotating ? 'off' : 'polite'}\n        aria-atomic=\"false\"\n      >\n        {trackChildren.map((child, index) => (\n          <div key={React.isValidElement(child) ? child.key ?? index : index} className=\"dsx-carousel__slide\"\n            role=\"group\" aria-roledescription=\"slide\" aria-label={`${index + 1} of ${childCount}`}\n            aria-hidden={index !== currentIndex ? true : undefined} inert={index !== currentIndex}>\n            {child}\n          </div>\n        ))}\n      </div>\n      {navElements}\n    </div>\n  )\n})\nCarouselViewport.displayName = 'CarouselViewport'\n\ninterface CarouselItemProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst CarouselItem = React.forwardRef<HTMLDivElement, CarouselItemProps>((props, forwardedRef) => {\n  const { className, ...restProps } = props\n  return (\n    <div\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-carousel__item', className)}\n      data-slot=\"carousel-item\"\n    />\n  )\n})\nCarouselItem.displayName = 'CarouselItem'\n\ninterface CarouselPreviousProps extends React.ComponentPropsWithoutRef<'button'> {}\n\nconst CarouselPrevious = React.forwardRef<HTMLButtonElement, CarouselPreviousProps>((props, forwardedRef) => {\n  const { className, onClick, ...restProps } = props\n  const { prev, orientation, loop, currentIndex, slideCount } = useCarouselContext()\n\n  return (\n    <button\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-carousel__nav dsx-carousel__nav--previous', className)}\n      type={restProps.type ?? 'button'}\n      disabled={restProps.disabled || slideCount < 2 || (!loop && currentIndex === 0)}\n      onClick={(event) => { onClick?.(event); if (!event.defaultPrevented) prev() }}\n      aria-label={restProps['aria-label'] ?? 'Previous slide'}\n      data-slot=\"carousel-previous\"\n    >\n      {orientation === 'horizontal' ? <ChevronLeft aria-hidden=\"true\" size={20} /> : <ChevronUp aria-hidden=\"true\" size={20} />}\n    </button>\n  )\n})\nCarouselPrevious.displayName = 'CarouselPrevious'\n\ninterface CarouselNextProps extends React.ComponentPropsWithoutRef<'button'> {}\n\nconst CarouselNext = React.forwardRef<HTMLButtonElement, CarouselNextProps>((props, forwardedRef) => {\n  const { className, onClick, ...restProps } = props\n  const { next, orientation, loop, currentIndex, slideCount } = useCarouselContext()\n\n  return (\n    <button\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-carousel__nav dsx-carousel__nav--next', className)}\n      type={restProps.type ?? 'button'}\n      disabled={restProps.disabled || slideCount < 2 || (!loop && currentIndex >= slideCount - 1)}\n      onClick={(event) => { onClick?.(event); if (!event.defaultPrevented) next() }}\n      aria-label={restProps['aria-label'] ?? 'Next slide'}\n      data-slot=\"carousel-next\"\n    >\n      {orientation === 'horizontal' ? <ChevronRight aria-hidden=\"true\" size={20} /> : <ChevronDown aria-hidden=\"true\" size={20} />}\n    </button>\n  )\n})\nCarouselNext.displayName = 'CarouselNext'\n\ninterface CarouselIndicatorsProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst CarouselIndicators = React.forwardRef<HTMLDivElement, CarouselIndicatorsProps>((props, forwardedRef) => {\n  const { className, ...restProps } = props\n  const { currentIndex, slideCount, goTo } = useCarouselContext()\n\n  if (slideCount <= 1) return null\n\n  return (\n    <div\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-carousel__indicators', className)}\n      role=\"group\"\n      aria-label={restProps['aria-label'] ?? 'Slide indicators'}\n      data-slot=\"carousel-indicators\"\n    >\n      {Array.from({ length: slideCount }).map((_, index) => (\n        <button\n          key={index}\n          type=\"button\"\n          className={classNames(\n            'dsx-carousel__indicator',\n            index === currentIndex && 'dsx-carousel__indicator--active',\n          )}\n          onClick={() => goTo(index)}\n          aria-label={`Go to slide ${index + 1}`}\n          aria-disabled={index === currentIndex}\n          data-slot=\"carousel-indicator\"\n        />\n      ))}\n    </div>\n  )\n})\nCarouselIndicators.displayName = 'CarouselIndicators'\n\nconst Carousel: typeof CarouselRoot & {\n  Viewport: typeof CarouselViewport\n  Item: typeof CarouselItem\n  Previous: typeof CarouselPrevious\n  Next: typeof CarouselNext\n  Indicators: typeof CarouselIndicators\n} = Object.assign(CarouselRoot, {\n  Viewport: CarouselViewport,\n  Item: CarouselItem,\n  Previous: CarouselPrevious,\n  Next: CarouselNext,\n  Indicators: CarouselIndicators,\n})\n\nexport { Carousel, CarouselItem, CarouselIndicators, CarouselNext, CarouselPrevious, CarouselRoot, CarouselViewport }\nexport type { CarouselIndicatorsProps, CarouselItemProps, CarouselNextProps, CarouselOwnProps, CarouselPreviousProps, CarouselProps, CarouselViewportProps }\n"],
+  "mappings": "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",
+  "names": ["index", "prev"]
 }

package/dist/components/carousel.css

@@ -1,25 +1,43 @@
 
 
 .dsx-carousel {
+  --_carousel-nav-size: var(--dsx-size-lg);
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--dsx-space-md);
   width: 100%;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-carousel__viewport {
+  --_carousel-gutter-start: 0;
+  --_carousel-gutter-end: 0;
   position: relative;
   width: 100%;
   overflow: hidden;
   border-radius: var(--dsx-rounded-xl);
 }
 
+.dsx-carousel__viewport:where(:not([data-orientation='vertical'])):has(> .dsx-carousel__nav--previous) {
+  --_carousel-gutter-start: calc(var(--_carousel-nav-size) + var(--dsx-space-md) + var(--dsx-space-xs));
+}
+
+.dsx-carousel__viewport:has(> .dsx-carousel__nav--next) {
+  --_carousel-gutter-end: calc(var(--_carousel-nav-size) + var(--dsx-space-md) + var(--dsx-space-xs));
+}
+
 .dsx-carousel__viewport[data-orientation='vertical'] {
+  --_carousel-gutter-start: 0;
   height: var(--dsx-carousel-vertical-height, 320px);
 }
 
+.dsx-carousel__viewport:where([data-orientation='vertical']):has(> .dsx-carousel__nav--previous) {
+  --_carousel-gutter-end: calc(var(--_carousel-nav-size) + var(--dsx-space-md) + var(--dsx-space-xs));
+}
+
 .dsx-carousel__track {
   display: flex;
   flex-direction: row;
@@ -30,24 +48,25 @@
 
 .dsx-carousel__track--vertical {
   flex-direction: column;
+  height: 100%;
 }
 
-/* Plain block, not a centering flex container: slide content (an image, a
-   colored panel, arbitrary consumer markup) must fill the full slide area.
-   A flex container with justify-content/align-items would shrink-wrap any
-   child to its own content size instead of the slide's 100% width.
+.dsx-carousel__slide {
+  flex: 0 0 100%;
+  min-width: 0;
+  min-height: 0;
+}
 
-   `padding-inline` added 2026-08-27 — real bug found live: `.dsx-carousel__nav` buttons are
-   absolutely positioned over the viewport (left/right: space-md), and item content had no
-   built-in clearance for them. Short centered content (a price) never reached the edges, so this
-   went unnoticed; a full sentence ("this tier isn't sold in <currency>") does, and sat directly
-   under the chevrons — "the chevrons of the carousel is colliding within the text." Reserving
-   space for the nav buttons here, once, means no consumer has to remember to pad their own item
-   content to avoid them. */
+.dsx-carousel__track--vertical .dsx-carousel__item {
+  height: 100%;
+}
+
+/* Keep consumer content full width, reserving only the lanes occupied by controls. */
 .dsx-carousel__item {
+  box-sizing: border-box;
   flex: 0 0 100%;
   min-width: 0;
-  padding-inline: calc(var(--dsx-size-lg) + var(--dsx-space-md) + var(--dsx-space-xs));
+  padding-inline: var(--_carousel-gutter-start) var(--_carousel-gutter-end);
 }
 
 .dsx-carousel__item:has(+ .dsx-carousel__item) {
@@ -61,8 +80,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--dsx-size-lg);
-  height: var(--dsx-size-lg);
+  box-sizing: border-box;
+  width: var(--_carousel-nav-size);
+  height: var(--_carousel-nav-size);
   padding: 0;
   border: var(--dsx-border-width-sm) solid var(--dsx-panel-border-color);
   border-radius: var(--dsx-rounded-full);
@@ -76,16 +96,44 @@
   box-shadow: var(--dsx-shadow-elevation-2);
 }
 
-.dsx-carousel__nav:hover {
+.dsx-carousel__nav:hover:enabled {
   background: var(--dsx-color-surface-raised);
   border-color: var(--dsx-color-primary);
   color: var(--dsx-color-primary);
 }
 
-.dsx-carousel__nav:active {
+.dsx-carousel__nav:focus-visible,
+.dsx-carousel__indicator:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
+}
+
+/* Preserve the circular paint while its entire 24px minimum box accepts input. */
+.dsx-carousel__nav::before {
+  content: '';
+  position: absolute;
+  inset: calc(-1 * var(--dsx-border-width-sm));
+}
+
+.dsx-carousel__nav:active:enabled {
   background: var(--dsx-effect-pressed-layer);
 }
 
+.dsx-carousel__nav:disabled {
+  cursor: default;
+  opacity: var(--dsx-opacity-disabled);
+}
+
+.dsx-carousel__viewport[data-orientation='vertical'] .dsx-carousel__nav--previous {
+  top: 25%;
+  left: auto;
+  right: var(--dsx-space-md);
+}
+
+.dsx-carousel__viewport[data-orientation='vertical'] .dsx-carousel__nav--next {
+  top: 75%;
+}
+
 .dsx-carousel__nav--previous {
   left: var(--dsx-space-md);
 }
@@ -94,14 +142,12 @@
   right: var(--dsx-space-md);
 }
 
-.dsx-carousel[data-size='sm'] .dsx-carousel__nav {
-  width: var(--dsx-size-md);
-  height: var(--dsx-size-md);
+.dsx-carousel[data-size='sm'] {
+  --_carousel-nav-size: var(--dsx-size-md);
 }
 
-.dsx-carousel[data-size='lg'] .dsx-carousel__nav {
-  width: var(--dsx-size-xl);
-  height: var(--dsx-size-xl);
+.dsx-carousel[data-size='lg'] {
+  --_carousel-nav-size: var(--dsx-size-xl);
 }
 
 .dsx-carousel__indicators {
@@ -116,18 +162,39 @@
    differentiation) — confirmed by direct computed-style comparison, not assumed. Swapped to
    the stronger --dsx-color-outline token and bumped the dot itself up one size step. */
 .dsx-carousel__indicator {
-  width: var(--dsx-space-sm);
-  height: var(--dsx-space-sm);
+  position: relative;
+  width: var(--dsx-size-md);
+  height: var(--dsx-size-md);
   padding: 0;
   border: none;
+  border-radius: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.dsx-carousel__indicator::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--dsx-space-sm);
+  height: var(--dsx-space-sm);
   border-radius: var(--dsx-rounded-full);
   background: var(--dsx-color-outline);
-  cursor: pointer;
   transition: background var(--dsx-motion-duration-fast) var(--dsx-motion-easing-in-out),
               width var(--dsx-motion-duration-fast) var(--dsx-motion-easing-in-out);
 }
 
-.dsx-carousel__indicator--active {
+.dsx-carousel__indicator--active::before {
   background: var(--dsx-color-primary);
   width: var(--dsx-space-md);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .dsx-carousel__track,
+  .dsx-carousel__nav,
+  .dsx-carousel__indicator::before {
+    transition: none;
+  }
+}