@salt-ds/embla-carousel 0.1.5 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # @salt-ds/embla-carousel
 
+## 1.0.0
+
+### Major Changes
+
+- da42e9a: Carousel is now a stable API.
+
+  Features include:
+
+  - Composable Salt controls for navigation and progress.
+  - Composable with custom content within slides.
+  - Built on the popular `embla-carousel` library, with Salt-specific accessibility and theming enhancements.
+
+  Refer to [example](https://saltdesignsystem.com/salt/components/carousel/usage#sequential-with-slide-group) for basic usage.
+
+### Patch Changes
+
+- Updated dependencies [61c2bad]
+- Updated dependencies [fef411f]
+  - @salt-ds/core@1.51.0
+
+## 0.1.6
+
+### Patch Changes
+
+- 30fc785: Accessibility updates for Carousel
+
+  - Carousel now passes WCAG 2.1 AA requirements, if implemented as per documentation.
+  - Removed next/prev buttons from focus order, when displaying a tablist.
+  - Slides and actions within slides are now focusable.
+
+  Removed embla plugin `CarouselAnnouncementPlugin.ts` as it is no longer needed.
+
+  ```diff
+  - import { CarouselAnnouncementPlugin } from "./CarouselAnnouncementPlugin";
+    <Carousel
+      aria-label="Account overview"
+      getEmblaApi={setEmblaApi}
+   -  emblaPlugins={[CarouselAnnouncementPlugin()]}
+    >
+    </Carousel>
+  ```
+
+- Updated dependencies [378fc01]
+- Updated dependencies [1f53f12]
+- Updated dependencies [22fed0d]
+- Updated dependencies [770bc9c]
+- Updated dependencies [54e4b19]
+- Updated dependencies [bbb7dba]
+- Updated dependencies [c3df8d8]
+  - @salt-ds/core@1.49.0
+
 ## 0.1.5
 
 ### Patch Changes

package/css/salt-embla-carousel.css

@@ -18,10 +18,6 @@
 .saltCarouselAutoplayIndicatorSVG {
   transform: rotate(-90deg);
 }
-.saltCarouselAutoplayIndicatorSVG-track {
-  fill: none;
-  stroke: var(--salt-accent-foreground);
-}
 .saltCarouselAutoplayIndicatorSVG-bar {
   fill: none;
   stroke: var(--salt-accent-background);
@@ -56,41 +52,82 @@
   gap: var(--salt-spacing-200);
   flex-grow: 1;
 }
+.saltCarouselCard:focus-visible {
+  outline: none;
+}
+.saltCarouselCard:not(.saltCarouselCard-bordered):focus-visible::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--carousel-slide-spacing);
+  right: 0;
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-focused-outlineWidth) * -1);
+  cursor: var(--salt-cursor-hover);
+}
+.saltCarouselCard-bordered:focus-visible::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--carousel-slide-spacing);
+  right: 0;
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-focused-outlineWidth) * -1);
+  cursor: var(--salt-cursor-hover);
+  border-radius: var(--salt-palette-corner, 0);
+}
 .saltCarouselCard-body {
   display: flex;
   overflow: hidden;
   flex-direction: column;
-  gap: var(--salt-spacing-200);
   flex-grow: 1;
+  padding-bottom: var(--salt-spacing-200);
+}
+.saltCarouselCard-header {
+  padding-bottom: var(--salt-spacing-100);
+}
+.saltCarouselCard-actions {
+  padding-top: var(--salt-spacing-200);
+}
+.saltCarouselCard-body.saltCarouselCard-bordered-body {
   padding: 0 var(--salt-spacing-200) var(--salt-spacing-200) var(--salt-spacing-200);
 }
 .saltCarouselCard-content h2,
 .saltCarouselCard-content h3 {
   margin: 0;
 }
-.saltCarouselCard[data-visibility=off-screen] a {
-  visibility: hidden;
-}
-.saltCarouselCard-bordered {
+.saltCarouselCard-bordered-content {
   background: var(--salt-container-primary-background);
   border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
   border-radius: var(--salt-palette-corner, 0);
 }
 
-/* src/CarouselProgressLabel.css */
-.saltCarouselTabList.saltText {
-  font-weight: var(--salt-text-fontWeight-strong);
-}
-
 /* src/CarouselSlides.css */
 .saltCarouselSlides {
   overflow: hidden;
+  cursor: var(--salt-cursor-grab);
 }
 .saltCarouselSlides-container {
   display: flex;
   touch-action: pan-y pinch-zoom;
   margin-left: calc(var(--carousel-slide-spacing) * -1);
 }
+.saltCarouselSlides-sr-only {
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+.saltCarouselSlides-dragging {
+  cursor: var(--salt-cursor-grab-active);
+}
 
 /* src/CarouselTab.css */
 .saltCarouselTab {
@@ -126,12 +163,8 @@
   transform: translate(-50%, -50%);
 }
 .saltCarouselTab:focus-visible {
-  outline-style: var(--salt-focused-outlineStyle);
-  outline-width: var(--salt-focused-outlineWidth);
-  outline-color: var(--salt-focused-outlineColor);
-  outline-offset: var(--salt-focused-outlineOffset);
-  background: var(--salt-selectable-background-hover);
-  border-color: var(--salt-selectable-borderColor-hover);
+  outline: var(--saltRadioButton-outline, var(--salt-focused-outline));
+  outline-offset: var(--salt-spacing-fixed-100);
 }
 .saltCarouselTab-selected {
   box-shadow: inset 0 0 0 var(--salt-size-selectable) var(--salt-selectable-borderColor-selected);
@@ -145,11 +178,5 @@
   align-items: center;
   gap: var(--salt-spacing-200);
 }
-.saltCarouselTabList:focus-visible {
-  outline-style: var(--salt-focused-outlineStyle);
-  outline-width: var(--salt-focused-outlineWidth);
-  outline-offset: var(--salt-focused-outlineOffset);
-  outline-color: var(--salt-focused-outlineColor);
-}
 
-/* src/81cb225b-897f-4a91-b699-d5538acf9f18.css */
+/* src/1a62c25b-2a44-4f89-9546-cfbe130f6c2f.css */

package/dist-cjs/Carousel.js

@@ -15,9 +15,11 @@ const Carousel = react.forwardRef(
   function Carousel2({
     children,
     className,
+    disableSlideAnnouncements,
     emblaOptions = {},
     emblaPlugins = [],
     getEmblaApi,
+    id,
     ...rest
   }, ref) {
     const targetWindow = window.useWindow();
@@ -29,23 +31,42 @@ const Carousel = react.forwardRef(
     const [emblaRef, emblaApi] = useEmblaCarousel(emblaOptions, [
       ...emblaPlugins
     ]);
+    const carouselId = core.useId(id);
     react.useEffect(() => {
       if (emblaApi) {
         getEmblaApi == null ? void 0 : getEmblaApi(emblaApi);
       }
       return void 0;
     }, [emblaApi]);
-    return /* @__PURE__ */ jsxRuntime.jsx(CarouselContext.CarouselContext.Provider, { value: { emblaApi, emblaRef }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "section",
+    const [ariaVariant, setAriaVariant] = react.useState("group");
+    const [announcementState, setAnnouncementState] = react.useState(void 0);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CarouselContext.CarouselContext.Provider,
       {
-        "aria-roledescription": "carousel",
-        role: "region",
-        className: clsx.clsx(withBaseName(), className),
-        ref,
-        ...rest,
-        children
+        value: {
+          ariaVariant,
+          disableSlideAnnouncements,
+          emblaApi,
+          emblaRef,
+          setAriaVariant,
+          announcementState,
+          setAnnouncementState,
+          carouselId
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "section",
+          {
+            "aria-roledescription": "carousel",
+            role: "region",
+            className: clsx.clsx(withBaseName(), className),
+            ref,
+            ...rest,
+            children
+          },
+          `carousel-${ariaVariant}}`
+        )
       }
-    ) });
+    );
   }
 );
 

package/dist-cjs/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sources":["../src/Carousel.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\";\nimport { type ComponentPropsWithoutRef, forwardRef, useEffect } from \"react\";\nimport carouselCss from \"./Carousel.css\";\nimport { CarouselContext } from \"./CarouselContext\";\n\nconst withBaseName = makePrefixer(\"saltCarousel\");\n\nexport type CarouselEmblaRefType = UseEmblaCarouselType[0];\nexport type CarouselEmblaApiType = UseEmblaCarouselType[1];\n\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\nexport type CarouselOptions = UseCarouselParameters[0];\nexport type CarouselPlugin = UseCarouselParameters[1];\n\n/**\n * Props for the Carousel component.\n * Pass a ref to the carousel to get it to return a reference to the embla API\n */\nexport interface CarouselProps extends ComponentPropsWithoutRef<\"section\"> {\n  /**\n   * Options to configure the Embla Carousel.\n   * These options are passed directly to the Embla Carousel instance.\n   */\n  emblaOptions?: CarouselOptions;\n\n  /**\n   * Plugins to enhance the functionality of the Embla Carousel.\n   * These options are passed directly to the Embla Carousel instance.\n   */\n  emblaPlugins?: CarouselPlugin;\n  /** Get embla API instance, use this to manage the state of the Carousel */\n  getEmblaApi?: (embla: CarouselEmblaApiType) => void;\n}\n\nexport const Carousel = forwardRef<HTMLElement, CarouselProps>(\n  function Carousel(\n    {\n      children,\n      className,\n      emblaOptions = {},\n      emblaPlugins = [],\n      getEmblaApi,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel\",\n      css: carouselCss,\n      window: targetWindow,\n    });\n\n    const [emblaRef, emblaApi] = useEmblaCarousel(emblaOptions, [\n      ...emblaPlugins,\n    ]);\n\n    useEffect(() => {\n      if (emblaApi) {\n        getEmblaApi?.(emblaApi);\n      }\n      return undefined;\n    }, [emblaApi]);\n\n    return (\n      <CarouselContext.Provider value={{ emblaApi, emblaRef }}>\n        <section\n          aria-roledescription=\"carousel\"\n          role=\"region\"\n          className={clsx(withBaseName(), className)}\n          ref={ref}\n          {...rest}\n        >\n          {children}\n        </section>\n      </CarouselContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Carousel","useWindow","useComponentCssInjection","carouselCss","useEffect","jsx","CarouselContext","clsx"],"mappings":";;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA;AA6BzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAe,EAAC;AAAA,IAChB,eAAe,EAAC;AAAA,IAChB,WAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,QAAA,EAAU,QAAQ,CAAA,GAAI,iBAAiB,YAAc,EAAA;AAAA,MAC1D,GAAG;AAAA,KACJ,CAAA;AAED,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAU,EAAA;AACZ,QAAc,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAA,QAAA,CAAA;AAAA;AAEhB,MAAO,OAAA,MAAA;AAAA,KACT,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,IACE,uBAAAC,cAAA,CAACC,gCAAgB,QAAhB,EAAA,EAAyB,OAAO,EAAE,QAAA,EAAU,UAC3C,EAAA,QAAA,kBAAAD,cAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,sBAAqB,EAAA,UAAA;AAAA,QACrB,IAAK,EAAA,QAAA;AAAA,QACL,SAAW,EAAAE,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KAEL,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"Carousel.js","sources":["../src/Carousel.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  useEffect,\n  useState,\n} from \"react\";\nimport carouselCss from \"./Carousel.css\";\nimport {\n  type CarouselAnnouncementTrigger,\n  type CarouselAriaVariant,\n  CarouselContext,\n} from \"./CarouselContext\";\n\nconst withBaseName = makePrefixer(\"saltCarousel\");\n\nexport type CarouselEmblaRefType = UseEmblaCarouselType[0];\nexport type CarouselEmblaApiType = UseEmblaCarouselType[1];\n\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\nexport type CarouselOptions = UseCarouselParameters[0];\nexport type CarouselPlugin = UseCarouselParameters[1];\n\n/**\n * Props for the Carousel component.\n * Pass a ref to the carousel to get it to return a reference to the embla API\n */\nexport interface CarouselProps extends ComponentPropsWithoutRef<\"section\"> {\n  /**\n   * Options to configure the Embla Carousel.\n   * These options are passed directly to the Embla Carousel instance.\n   */\n  emblaOptions?: CarouselOptions;\n\n  /**\n   * Plugins to enhance the functionality of the Embla Carousel.\n   * These options are passed directly to the Embla Carousel instance.\n   */\n  emblaPlugins?: CarouselPlugin;\n  /**\n   * Get embla API instance, use this to manage the state of the Carousel\n   **/\n  getEmblaApi?: (embla: CarouselEmblaApiType) => void;\n  /**\n   * Disable screenreader announcing slide updates, defaults to false.\n   */\n  disableSlideAnnouncements?: boolean;\n}\n\nexport const Carousel = forwardRef<HTMLElement, CarouselProps>(\n  function Carousel(\n    {\n      children,\n      className,\n      disableSlideAnnouncements,\n      emblaOptions = {},\n      emblaPlugins = [],\n      getEmblaApi,\n      id,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel\",\n      css: carouselCss,\n      window: targetWindow,\n    });\n\n    const [emblaRef, emblaApi] = useEmblaCarousel(emblaOptions, [\n      ...emblaPlugins,\n    ]);\n\n    const carouselId = useId(id);\n\n    useEffect(() => {\n      if (emblaApi) {\n        getEmblaApi?.(emblaApi);\n      }\n      return undefined;\n    }, [emblaApi]);\n\n    const [ariaVariant, setAriaVariant] =\n      useState<CarouselAriaVariant>(\"group\");\n    const [announcementState, setAnnouncementState] = useState<\n      CarouselAnnouncementTrigger | undefined\n    >(undefined);\n\n    return (\n      <CarouselContext.Provider\n        value={{\n          ariaVariant,\n          disableSlideAnnouncements,\n          emblaApi,\n          emblaRef,\n          setAriaVariant,\n          announcementState,\n          setAnnouncementState,\n          carouselId,\n        }}\n      >\n        <section\n          key={`carousel-${ariaVariant}}`}\n          aria-roledescription=\"carousel\"\n          role=\"region\"\n          className={clsx(withBaseName(), className)}\n          ref={ref}\n          {...rest}\n        >\n          {children}\n        </section>\n      </CarouselContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Carousel","useWindow","useComponentCssInjection","carouselCss","useId","useEffect","useState","jsx","CarouselContext","clsx"],"mappings":";;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA;AAmCzC,MAAM,QAAA,GAAWC,gBAAA;AAAA,EACtB,SAASC,SAAAA,CACP;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,yBAAA;AAAA,IACA,eAAe,EAAC;AAAA,IAChB,eAAe,EAAC;AAAA,IAChB,WAAA;AAAA,IACA,EAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,eAAA;AAAA,MACR,GAAA,EAAKC,UAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,QAAA,EAAU,QAAQ,CAAA,GAAI,iBAAiB,YAAA,EAAc;AAAA,MAC1D,GAAG;AAAA,KACJ,CAAA;AAED,IAAA,MAAM,UAAA,GAAaC,WAAM,EAAE,CAAA;AAE3B,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAA,EAAU;AACZ,QAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,QAAA,CAAA;AAAA,MAChB;AACA,MAAA,OAAO,MAAA;AAAA,IACT,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,IAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAChCC,eAA8B,OAAO,CAAA;AACvC,IAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAIA,eAEhD,MAAS,CAAA;AAEX,IAAA,uBACEC,cAAA;AAAA,MAACC,+BAAA,CAAgB,QAAA;AAAA,MAAhB;AAAA,QACC,KAAA,EAAO;AAAA,UACL,WAAA;AAAA,UACA,yBAAA;AAAA,UACA,QAAA;AAAA,UACA,QAAA;AAAA,UACA,cAAA;AAAA,UACA,iBAAA;AAAA,UACA,oBAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAAD,cAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YAEC,sBAAA,EAAqB,UAAA;AAAA,YACrB,IAAA,EAAK,QAAA;AAAA,YACL,SAAA,EAAWE,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,YACzC,GAAA;AAAA,YACC,GAAG,IAAA;AAAA,YAEH;AAAA,WAAA;AAAA,UAPI,YAAY,WAAW,CAAA,CAAA;AAAA;AAQ9B;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/CarouselAutoplayIndicator.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCarouselAutoplayIndicator {\n  --carousel-svg-circumference: 0;\n  display: flex;\n  align-self: center;\n}\n\n.saltCarouselAutoplayIndicatorSVG {\n  transform: rotate(-90deg);\n}\n\n.saltCarouselAutoplayIndicatorSVG-track {\n  fill: none;\n  stroke: var(--salt-accent-foreground);\n}\n\n.saltCarouselAutoplayIndicatorSVG-bar {\n  fill: none;\n  stroke: var(--salt-accent-background);\n  stroke-dasharray: var(--carousel-svg-circumference);\n  stroke-dashoffset: var(--carousel-svg-circumference);\n  animation: indicatorAnimation 0.5s linear;\n  animation-play-state: paused;\n}\n\n@keyframes indicatorAnimation {\n  from {\n    stroke-dashoffset: var(--carousel-svg-circumference);\n  }\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n";
+var css_248z = ".saltCarouselAutoplayIndicator {\n  --carousel-svg-circumference: 0;\n  display: flex;\n  align-self: center;\n}\n\n.saltCarouselAutoplayIndicatorSVG {\n  transform: rotate(-90deg);\n}\n\n.saltCarouselAutoplayIndicatorSVG-bar {\n  fill: none;\n  stroke: var(--salt-accent-background);\n  stroke-dasharray: var(--carousel-svg-circumference);\n  stroke-dashoffset: var(--carousel-svg-circumference);\n  animation: indicatorAnimation 0.5s linear;\n  animation-play-state: paused;\n}\n\n@keyframes indicatorAnimation {\n  from {\n    stroke-dashoffset: var(--carousel-svg-circumference);\n  }\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CarouselAutoplayIndicator.css.js.map

package/dist-cjs/CarouselAutoplayIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselAutoplayIndicator.js","sources":["../src/CarouselAutoplayIndicator.tsx"],"sourcesContent":["import { makePrefixer, useDensity } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  forwardRef,\n  useEffect,\n  useRef,\n} from \"react\";\nimport carouselAutoplayIndicator from \"./CarouselAutoplayIndicator.css\";\nimport { CarouselAutoplayIndicatorSVG } from \"./CarouselAutoplayIndicatorSVG\";\n\nexport interface CarouselAutoplayIndicatorProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Duration of each slide in milliseconds.\n   */\n  duration: number;\n  /**\n   * Index of slide currently displayed.\n   */\n  slideIndex: number;\n  /**\n   * If `true`, the indicator is animated to visualize the time until the next slide.\n   */\n  isPlaying: boolean;\n  /**\n   * If `true`, the animation is paused.\n   */\n  isPaused?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltCarouselAutoplayIndicator\");\n\nconst sizeAndStrokeWidthMapping = {\n  high: { size: 10, strokeWidth: 2 },\n  medium: { size: 12, strokeWidth: 2 },\n  low: { size: 14, strokeWidth: 2 },\n  touch: { size: 16, strokeWidth: 2 },\n};\n\nexport const CarouselAutoplayIndicator = forwardRef<\n  HTMLDivElement,\n  CarouselAutoplayIndicatorProps\n>(\n  (\n    {\n      className,\n      duration,\n      slideIndex,\n      isPlaying,\n      isPaused = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-autoplay-indicator\",\n      css: carouselAutoplayIndicator,\n      window: targetWindow,\n    });\n\n    const barRef = useRef<SVGCircleElement>(null);\n    const animationFrameId = useRef<number | null>(null);\n\n    const density = useDensity();\n    const { size, strokeWidth } = sizeAndStrokeWidthMapping[density];\n    const radius = (size - strokeWidth) / 2;\n    const circumference = 2 * Math.PI * radius;\n\n    useEffect(() => {\n      if (barRef.current) {\n        animationFrameId.current = requestAnimationFrame(() => {\n          if (!barRef.current) {\n            return;\n          }\n          barRef.current.style.animation = \"none\"; // Reset animation\n          barRef.current.style.strokeDashoffset = `${circumference}`;\n          animationFrameId.current = requestAnimationFrame(() => {\n            if (!barRef.current) {\n              return;\n            }\n            barRef.current.style.animation = `indicatorAnimation ${duration}ms linear`;\n            barRef.current.style.animationPlayState = isPaused\n              ? \"paused\"\n              : isPlaying\n                ? \"running\"\n                : \"paused\";\n          });\n        });\n      }\n\n      return () => {\n        if (animationFrameId.current !== null) {\n          cancelAnimationFrame(animationFrameId.current);\n          animationFrameId.current = null;\n        }\n      };\n    }, [circumference, duration, slideIndex, isPlaying, isPaused]);\n\n    return (\n      <div\n        ref={ref}\n        style={\n          {\n            width: size,\n            height: size,\n            \"--carousel-svg-circumference\": circumference,\n          } as CSSProperties\n        }\n        className={clsx(withBaseName(), className)}\n        {...props}\n      >\n        <CarouselAutoplayIndicatorSVG\n          size={size}\n          strokeWidth={strokeWidth}\n          barRef={barRef}\n          radius={radius}\n        />\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","carouselAutoplayIndicator","useRef","useDensity","useEffect","jsx","clsx","CarouselAutoplayIndicatorSVG"],"mappings":"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"}
+{"version":3,"file":"CarouselAutoplayIndicator.js","sources":["../src/CarouselAutoplayIndicator.tsx"],"sourcesContent":["import { makePrefixer, useDensity } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  forwardRef,\n  useEffect,\n  useRef,\n} from \"react\";\nimport carouselAutoplayIndicator from \"./CarouselAutoplayIndicator.css\";\nimport { CarouselAutoplayIndicatorSVG } from \"./CarouselAutoplayIndicatorSVG\";\n\nexport interface CarouselAutoplayIndicatorProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Duration of each slide in milliseconds.\n   */\n  duration: number;\n  /**\n   * Index of slide currently displayed.\n   */\n  slideIndex: number;\n  /**\n   * If `true`, the indicator is animated to visualize the time until the next slide.\n   */\n  isPlaying: boolean;\n  /**\n   * If `true`, the animation is paused.\n   */\n  isPaused?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltCarouselAutoplayIndicator\");\n\nconst sizeAndStrokeWidthMapping = {\n  high: { size: 10, strokeWidth: 2 },\n  medium: { size: 12, strokeWidth: 2 },\n  low: { size: 14, strokeWidth: 2 },\n  touch: { size: 16, strokeWidth: 2 },\n};\n\nexport const CarouselAutoplayIndicator = forwardRef<\n  HTMLDivElement,\n  CarouselAutoplayIndicatorProps\n>(\n  (\n    {\n      className,\n      duration,\n      slideIndex,\n      isPlaying,\n      isPaused = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-autoplay-indicator\",\n      css: carouselAutoplayIndicator,\n      window: targetWindow,\n    });\n\n    const barRef = useRef<SVGCircleElement>(null);\n    const animationFrameId = useRef<number | null>(null);\n\n    const density = useDensity();\n    const { size, strokeWidth } = sizeAndStrokeWidthMapping[density];\n    const radius = (size - strokeWidth) / 2;\n    const circumference = 2 * Math.PI * radius;\n\n    useEffect(() => {\n      if (barRef.current) {\n        animationFrameId.current = requestAnimationFrame(() => {\n          if (!barRef.current) {\n            return;\n          }\n          barRef.current.style.animation = \"none\"; // Reset animation\n          barRef.current.style.strokeDashoffset = `${circumference}`;\n          animationFrameId.current = requestAnimationFrame(() => {\n            if (!barRef.current) {\n              return;\n            }\n            barRef.current.style.animation = `indicatorAnimation ${duration}ms linear`;\n            barRef.current.style.animationPlayState = isPaused\n              ? \"paused\"\n              : isPlaying\n                ? \"running\"\n                : \"paused\";\n          });\n        });\n      }\n\n      return () => {\n        if (animationFrameId.current !== null) {\n          cancelAnimationFrame(animationFrameId.current);\n          animationFrameId.current = null;\n        }\n      };\n    }, [circumference, duration, slideIndex, isPlaying, isPaused]);\n\n    return (\n      <div\n        ref={ref}\n        style={\n          {\n            width: size,\n            height: size,\n            \"--carousel-svg-circumference\": circumference,\n          } as CSSProperties\n        }\n        className={clsx(withBaseName(), className)}\n        {...props}\n      >\n        <CarouselAutoplayIndicatorSVG\n          size={size}\n          strokeWidth={strokeWidth}\n          barRef={barRef}\n          radius={radius}\n        />\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","carouselAutoplayIndicator","useRef","useDensity","useEffect","jsx","clsx","CarouselAutoplayIndicatorSVG"],"mappings":"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"}

package/dist-cjs/CarouselAutoplayIndicatorSVG.js

@@ -14,7 +14,7 @@ const CarouselAutoplayIndicatorSVG = react.forwardRef(
     size,
     strokeWidth
   }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
       {
         className: clsx.clsx(withBaseName(), className),
@@ -22,29 +22,17 @@ const CarouselAutoplayIndicatorSVG = react.forwardRef(
         height: size,
         "aria-hidden": true,
         ref,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "circle",
-            {
-              className: withBaseName("track"),
-              cx: size / 2,
-              cy: size / 2,
-              r: radius,
-              strokeWidth
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "circle",
-            {
-              ref: barRef,
-              className: withBaseName("bar"),
-              cx: size / 2,
-              cy: size / 2,
-              r: radius,
-              strokeWidth
-            }
-          )
-        ]
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            ref: barRef,
+            className: withBaseName("bar"),
+            cx: size / 2,
+            cy: size / 2,
+            r: radius,
+            strokeWidth
+          }
+        )
       }
     );
   }

package/dist-cjs/CarouselAutoplayIndicatorSVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselAutoplayIndicatorSVG.js","sources":["../src/CarouselAutoplayIndicatorSVG.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type Ref, type SVGAttributes } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltCarouselAutoplayIndicatorSVG\");\n\nexport interface CarouselAutoplayIndicatorSVGProps\n  extends SVGAttributes<SVGSVGElement> {\n  /**\n   * Class name to apply to the SVG element.\n   */\n  className?: string;\n  /**\n   * Ref to attach to progress indicator element\n   */\n  barRef: Ref<SVGCircleElement>;\n  /**\n   * Size of the SVG in pixels.\n   */\n  size: number;\n  /**\n   * Stroke width of the progress indicator in pixels.\n   */\n  strokeWidth: number;\n  /**\n   * Radius of the progress indicator circle.\n   */\n  radius: number;\n}\n\nexport const CarouselAutoplayIndicatorSVG = forwardRef<\n  SVGSVGElement,\n  CarouselAutoplayIndicatorSVGProps\n>(\n  (\n    {\n      barRef,\n      className,\n      radius,\n      size,\n      strokeWidth,\n    }: CarouselAutoplayIndicatorSVGProps,\n    ref,\n  ) => {\n    return (\n      <svg\n        className={clsx(withBaseName(), className)}\n        width={size}\n        height={size}\n        aria-hidden\n        ref={ref}\n      >\n        <circle\n          className={withBaseName(\"track\")}\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          strokeWidth={strokeWidth}\n        />\n        <circle\n          ref={barRef}\n          className={withBaseName(\"bar\")}\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          strokeWidth={strokeWidth}\n        />\n      </svg>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","jsxs","clsx","jsx"],"mappings":";;;;;;;AAIA,MAAM,YAAA,GAAeA,kBAAa,kCAAkC,CAAA;AA0B7D,MAAM,4BAA+B,GAAAC,gBAAA;AAAA,EAI1C,CACE;AAAA,IACE,MAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,KAEF,GACG,KAAA;AACH,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,KAAO,EAAA,IAAA;AAAA,QACP,MAAQ,EAAA,IAAA;AAAA,QACR,aAAW,EAAA,IAAA;AAAA,QACX,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,IAAI,IAAO,GAAA,CAAA;AAAA,cACX,IAAI,IAAO,GAAA,CAAA;AAAA,cACX,CAAG,EAAA,MAAA;AAAA,cACH;AAAA;AAAA,WACF;AAAA,0BACAA,cAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,GAAK,EAAA,MAAA;AAAA,cACL,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,cAC7B,IAAI,IAAO,GAAA,CAAA;AAAA,cACX,IAAI,IAAO,GAAA,CAAA;AAAA,cACX,CAAG,EAAA,MAAA;AAAA,cACH;AAAA;AAAA;AACF;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}
+{"version":3,"file":"CarouselAutoplayIndicatorSVG.js","sources":["../src/CarouselAutoplayIndicatorSVG.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type Ref, type SVGAttributes } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltCarouselAutoplayIndicatorSVG\");\n\nexport interface CarouselAutoplayIndicatorSVGProps\n  extends SVGAttributes<SVGSVGElement> {\n  /**\n   * Class name to apply to the SVG element.\n   */\n  className?: string;\n  /**\n   * Ref to attach to progress indicator element\n   */\n  barRef: Ref<SVGCircleElement>;\n  /**\n   * Size of the SVG in pixels.\n   */\n  size: number;\n  /**\n   * Stroke width of the progress indicator in pixels.\n   */\n  strokeWidth: number;\n  /**\n   * Radius of the progress indicator circle.\n   */\n  radius: number;\n}\n\nexport const CarouselAutoplayIndicatorSVG = forwardRef<\n  SVGSVGElement,\n  CarouselAutoplayIndicatorSVGProps\n>(\n  (\n    {\n      barRef,\n      className,\n      radius,\n      size,\n      strokeWidth,\n    }: CarouselAutoplayIndicatorSVGProps,\n    ref,\n  ) => {\n    return (\n      <svg\n        className={clsx(withBaseName(), className)}\n        width={size}\n        height={size}\n        aria-hidden\n        ref={ref}\n      >\n        <circle\n          ref={barRef}\n          className={withBaseName(\"bar\")}\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          strokeWidth={strokeWidth}\n        />\n      </svg>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","jsx","clsx"],"mappings":";;;;;;;AAIA,MAAM,YAAA,GAAeA,kBAAa,kCAAkC,CAAA;AA0B7D,MAAM,4BAAA,GAA+BC,gBAAA;AAAA,EAI1C,CACE;AAAA,IACE,MAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,KAEF,GAAA,KACG;AACH,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,KAAA,EAAO,IAAA;AAAA,QACP,MAAA,EAAQ,IAAA;AAAA,QACR,aAAA,EAAW,IAAA;AAAA,QACX,GAAA;AAAA,QAEA,QAAA,kBAAAD,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,MAAA;AAAA,YACL,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,YAC7B,IAAI,IAAA,GAAO,CAAA;AAAA,YACX,IAAI,IAAA,GAAO,CAAA;AAAA,YACX,CAAA,EAAG,MAAA;AAAA,YACH;AAAA;AAAA;AACF;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/CarouselCard.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCarouselCard {\n  display: flex;\n  transform: translate3d(0, 0, 0);\n  flex: 0 0 var(--carousel-slide-size);\n  min-width: 0;\n  padding-left: var(--carousel-slide-spacing);\n  box-sizing: border-box;\n}\n\n.saltCarouselCard-content {\n  display: flex;\n  user-select: none;\n  overflow: hidden;\n  flex-direction: column;\n  gap: var(--salt-spacing-200);\n  flex-grow: 1;\n}\n\n.saltCarouselCard-body {\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  gap: var(--salt-spacing-200);\n  flex-grow: 1;\n  padding: 0 var(--salt-spacing-200) var(--salt-spacing-200) var(--salt-spacing-200);\n}\n\n.saltCarouselCard-content h2,\n.saltCarouselCard-content h3 {\n  margin: 0;\n}\n\n.saltCarouselCard[data-visibility=\"off-screen\"] a {\n  visibility: hidden;\n}\n\n.saltCarouselCard-bordered {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-radius: var(--salt-palette-corner, 0);\n}\n";
+var css_248z = ".saltCarouselCard {\n  display: flex;\n  transform: translate3d(0, 0, 0);\n  flex: 0 0 var(--carousel-slide-size);\n  min-width: 0;\n  padding-left: var(--carousel-slide-spacing);\n  box-sizing: border-box;\n}\n\n.saltCarouselCard-content {\n  display: flex;\n  user-select: none;\n  overflow: hidden;\n  flex-direction: column;\n  gap: var(--salt-spacing-200);\n  flex-grow: 1;\n}\n\n.saltCarouselCard:focus-visible {\n  outline: none;\n}\n\n.saltCarouselCard:not(.saltCarouselCard-bordered):focus-visible::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: var(--carousel-slide-spacing);\n  right: 0;\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-focused-outlineWidth) * -1);\n  cursor: var(--salt-cursor-hover);\n}\n\n.saltCarouselCard-bordered:focus-visible::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: var(--carousel-slide-spacing);\n  right: 0;\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-focused-outlineWidth) * -1);\n  cursor: var(--salt-cursor-hover);\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltCarouselCard-body {\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  flex-grow: 1;\n  padding-bottom: var(--salt-spacing-200);\n}\n\n.saltCarouselCard-header {\n  padding-bottom: var(--salt-spacing-100);\n}\n.saltCarouselCard-actions {\n  padding-top: var(--salt-spacing-200);\n}\n\n.saltCarouselCard-body.saltCarouselCard-bordered-body {\n  padding: 0 var(--salt-spacing-200) var(--salt-spacing-200) var(--salt-spacing-200);\n}\n\n.saltCarouselCard-content h2,\n.saltCarouselCard-content h3 {\n  margin: 0;\n}\n\n.saltCarouselCard-bordered-content {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-radius: var(--salt-palette-corner, 0);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CarouselCard.css.js.map

package/dist-cjs/CarouselCard.js

@@ -7,6 +7,7 @@ var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var react = require('react');
 var CarouselCard$1 = require('./CarouselCard.css.js');
+var CarouselContext = require('./CarouselContext.js');
 
 const withBaseName = core.makePrefixer("saltCarouselCard");
 const CarouselCard = react.forwardRef(
@@ -17,27 +18,40 @@ const CarouselCard = react.forwardRef(
       css: CarouselCard$1,
       window: targetWindow
     });
+    const { ariaVariant } = CarouselContext.useCarouselContext();
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        role: "tabpanel",
         "aria-roledescription": "slide",
-        className: clsx.clsx(withBaseName(), className),
-        ...rest,
+        className: clsx.clsx([
+          withBaseName(),
+          { [withBaseName("bordered")]: appearance === "bordered" },
+          className
+        ]),
         ref,
+        role: ariaVariant,
+        ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: clsx.clsx(withBaseName("content"), {
-              [withBaseName("bordered")]: appearance === "bordered"
+              [withBaseName("bordered-content")]: appearance === "bordered"
             }),
             children: [
               media,
-              children && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: withBaseName("body"), children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { children: header }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { children }),
-                actions
-              ] })
+              children && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: clsx.clsx(withBaseName("body"), {
+                    [withBaseName("bordered-body")]: appearance === "bordered"
+                  }),
+                  children: [
+                    header ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("header"), children: header }) : null,
+                    children,
+                    actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("actions"), children: actions }) : null
+                  ]
+                }
+              )
             ]
           }
         )

package/dist-cjs/CarouselCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselCard.js","sources":["../src/CarouselCard.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentProps, forwardRef, type ReactNode } from \"react\";\nimport saltCarouselCardCss from \"./CarouselCard.css\";\n\nconst withBaseName = makePrefixer(\"saltCarouselCard\");\n\n/**\n * Props for the CarouselCard component.\n */\nexport interface CarouselCardProps extends ComponentProps<\"div\"> {\n  /**\n   * Actions to be displayed in the content footer.\n   * This can include buttons or any other interactive elements.\n   */\n  actions?: ReactNode;\n\n  /**\n   * Media content to be displayed inside the slide.\n   * This could include images, videos, etc., that are visually prominent.\n   * It differs from children in that media is intended to be the main visual element of the slide.\n   */\n  media?: ReactNode;\n\n  /**\n   * The appearance of the slide. Options are 'bordered', and 'transparent'.\n   * 'transparent' is the default value.\n   **/\n  appearance?: \"bordered\" | \"transparent\";\n\n  /**\n   * Header content to be displayed at the top of the slide.\n   * This can be text or any other React node.\n   */\n  header?: ReactNode;\n\n  /**\n   * Carousel slide id.\n   * This can be used to uniquely identify the slide.\n   */\n  id?: string;\n}\n\nexport const CarouselCard = forwardRef<HTMLDivElement, CarouselCardProps>(\n  function CarouselCard(\n    { actions, appearance, children, className, header, media, ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-card\",\n      css: saltCarouselCardCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        role=\"tabpanel\"\n        aria-roledescription=\"slide\"\n        className={clsx(withBaseName(), className)}\n        {...rest}\n        ref={ref}\n      >\n        <div\n          className={clsx(withBaseName(\"content\"), {\n            [withBaseName(\"bordered\")]: appearance === \"bordered\",\n          })}\n        >\n          {media}\n          {children && (\n            <div className={withBaseName(\"body\")}>\n              <div>{header}</div>\n              <div>{children}</div>\n              {actions}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","CarouselCard","useWindow","useComponentCssInjection","saltCarouselCardCss","jsx","clsx","jsxs"],"mappings":";;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAsC7C,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CACP,EAAE,OAAA,EAAS,UAAY,EAAA,QAAA,EAAU,SAAW,EAAA,MAAA,EAAQ,KAAO,EAAA,GAAG,IAAK,EAAA,EACnE,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,UAAA;AAAA,QACL,sBAAqB,EAAA,OAAA;AAAA,QACrB,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,kBAAAC,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAAD,SAAA,CAAK,YAAa,CAAA,SAAS,CAAG,EAAA;AAAA,cACvC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAe,KAAA;AAAA,aAC5C,CAAA;AAAA,YAEA,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cACA,4BACEC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,MAAM,CACjC,EAAA,QAAA,EAAA;AAAA,gCAAAF,cAAA,CAAC,SAAK,QAAO,EAAA,MAAA,EAAA,CAAA;AAAA,gCACbA,cAAA,CAAC,SAAK,QAAS,EAAA,CAAA;AAAA,gBACd;AAAA,eACH,EAAA;AAAA;AAAA;AAAA;AAEJ;AAAA,KACF;AAAA;AAGN;;;;"}
+{"version":3,"file":"CarouselCard.js","sources":["../src/CarouselCard.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentProps, forwardRef, type ReactNode } from \"react\";\nimport saltCarouselCardCss from \"./CarouselCard.css\";\nimport { useCarouselContext } from \"./CarouselContext\";\n\nconst withBaseName = makePrefixer(\"saltCarouselCard\");\n\n/**\n * Props for the CarouselCard component.\n */\nexport interface CarouselCardProps extends ComponentProps<\"div\"> {\n  /**\n   * Actions to be displayed in the content footer.\n   * This can include buttons or any other interactive elements.\n   */\n  actions?: ReactNode;\n\n  /**\n   * Media content to be displayed inside the slide.\n   * This could include images, videos, etc., that are visually prominent.\n   * It differs from children in that media is intended to be the main visual element of the slide.\n   */\n  media?: ReactNode;\n\n  /**\n   * The appearance of the slide. Options are 'bordered', and 'transparent'.\n   * 'transparent' is the default value.\n   **/\n  appearance?: \"bordered\" | \"transparent\";\n\n  /**\n   * Header content to be displayed at the top of the slide.\n   * This can be text or any other React node.\n   */\n  header?: ReactNode;\n\n  /**\n   * Carousel slide id.\n   * This can be used to uniquely identify the slide.\n   */\n  id?: string;\n}\n\nexport const CarouselCard = forwardRef<HTMLDivElement, CarouselCardProps>(\n  function CarouselCard(\n    { actions, appearance, children, className, header, media, ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-card\",\n      css: saltCarouselCardCss,\n      window: targetWindow,\n    });\n\n    const { ariaVariant } = useCarouselContext();\n\n    return (\n      <div\n        aria-roledescription=\"slide\"\n        className={clsx([\n          withBaseName(),\n          { [withBaseName(\"bordered\")]: appearance === \"bordered\" },\n          className,\n        ])}\n        ref={ref}\n        role={ariaVariant}\n        {...rest}\n      >\n        <div\n          className={clsx(withBaseName(\"content\"), {\n            [withBaseName(\"bordered-content\")]: appearance === \"bordered\",\n          })}\n        >\n          {media}\n          {children && (\n            <div\n              className={clsx(withBaseName(\"body\"), {\n                [withBaseName(\"bordered-body\")]: appearance === \"bordered\",\n              })}\n            >\n              {header ? (\n                <div className={withBaseName(\"header\")}>{header}</div>\n              ) : null}\n              {children}\n              {actions ? (\n                <div className={withBaseName(\"actions\")}>{actions}</div>\n              ) : null}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","CarouselCard","useWindow","useComponentCssInjection","saltCarouselCardCss","useCarouselContext","jsx","clsx","jsxs"],"mappings":";;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAsC7C,MAAM,YAAA,GAAeC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CACP,EAAE,OAAA,EAAS,UAAA,EAAY,QAAA,EAAU,SAAA,EAAW,MAAA,EAAQ,KAAA,EAAO,GAAG,IAAA,EAAK,EACnE,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,cAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,WAAA,EAAY,GAAIC,kCAAA,EAAmB;AAE3C,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,sBAAA,EAAqB,OAAA;AAAA,QACrB,WAAWC,SAAA,CAAK;AAAA,UACd,YAAA,EAAa;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,eAAe,UAAA,EAAW;AAAA,UACxD;AAAA,SACD,CAAA;AAAA,QACD,GAAA;AAAA,QACA,IAAA,EAAM,WAAA;AAAA,QACL,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAAC,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWD,SAAA,CAAK,YAAA,CAAa,SAAS,CAAA,EAAG;AAAA,cACvC,CAAC,YAAA,CAAa,kBAAkB,CAAC,GAAG,UAAA,KAAe;AAAA,aACpD,CAAA;AAAA,YAEA,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cACA,QAAA,oBACCC,eAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAWD,SAAA,CAAK,YAAA,CAAa,MAAM,CAAA,EAAG;AAAA,oBACpC,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG,UAAA,KAAe;AAAA,mBACjD,CAAA;AAAA,kBAEA,QAAA,EAAA;AAAA,oBAAA,MAAA,kCACE,KAAA,EAAA,EAAI,SAAA,EAAW,aAAa,QAAQ,CAAA,EAAI,kBAAO,CAAA,GAC9C,IAAA;AAAA,oBACH,QAAA;AAAA,oBACA,OAAA,kCACE,KAAA,EAAA,EAAI,SAAA,EAAW,aAAa,SAAS,CAAA,EAAI,mBAAQ,CAAA,GAChD;AAAA;AAAA;AAAA;AACN;AAAA;AAAA;AAEJ;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/CarouselContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselContext.js","sources":["../src/CarouselContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\nimport type { CarouselEmblaApiType, CarouselEmblaRefType } from \"./Carousel\";\n\n/**\n * Type definition for the Carousel context.\n * Provides access to the Embla Carousel API and reference.\n */\ninterface CarouselContextType {\n  /**\n   * The API instance of the Embla Carousel.\n   * Provides methods to control the carousel programmatically.\n   */\n  emblaApi?: CarouselEmblaApiType;\n\n  /**\n   * The reference to the Embla Carousel viewport.\n   * Used to directly interact with the carousel DOM element.\n   */\n  emblaRef?: CarouselEmblaRefType;\n}\n\nexport const CarouselContext = createContext<CarouselContextType | undefined>(\n  \"CarouselContext\",\n  undefined,\n);\n\nexport const useCarouselContext = (): CarouselContextType => {\n  const context = useContext(CarouselContext);\n  if (!context) {\n    throw new Error(\n      \"useCarouselContext must be used within a CarouselProvider\",\n    );\n  }\n  return context;\n};\n"],"names":["createContext","useContext"],"mappings":";;;;;AAsBO,MAAM,eAAkB,GAAAA,kBAAA;AAAA,EAC7B,iBAAA;AAAA,EACA;AACF;AAEO,MAAM,qBAAqB,MAA2B;AAC3D,EAAM,MAAA,OAAA,GAAUC,iBAAW,eAAe,CAAA;AAC1C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,OAAA;AACT;;;;;"}
+{"version":3,"file":"CarouselContext.js","sources":["../src/CarouselContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { type Dispatch, type SetStateAction, useContext } from \"react\";\nimport type { CarouselEmblaApiType, CarouselEmblaRefType } from \"./Carousel\";\n\nexport type CarouselAriaVariant = \"group\" | \"tabpanel\";\n\nexport type CarouselAnnouncementTrigger =\n  | \"tab\"\n  | \"navigation\"\n  | \"drag\"\n  | \"focus\";\n\n/**\n * Type definition for the Carousel context.\n * Provides access to the Embla Carousel API and reference.\n */\ninterface CarouselContextType {\n  /**\n   * The API instance of the Embla Carousel.\n   * Provides methods to control the carousel programmatically.\n   */\n  emblaApi?: CarouselEmblaApiType;\n\n  /**\n   * The reference to the Embla Carousel viewport.\n   * Used to directly interact with the carousel DOM element.\n   */\n  emblaRef?: CarouselEmblaRefType;\n  /**\n   * Aria variant for the Carousel.\n   * When used with a `CarouselTabList` the screenreader will be presented as a `tablist` of tabpanels.\n   * When used without a `CarouselTabList` the screenreader will be presented as a `group` of slides.\n   */\n  ariaVariant: CarouselAriaVariant;\n  /**\n   * Function to set the aria variant for the Carousel.\n   */\n  setAriaVariant: Dispatch<SetStateAction<CarouselAriaVariant>>;\n  /**\n   * Disable screenreader announcing slide updates, defaults to false.\n   */\n  disableSlideAnnouncements?: boolean;\n  /**\n   * Id for the carousel\n   */\n  carouselId: string | undefined;\n  /**\n   * Announcement state, determines whether change is communicated to screenreader.\n   * @param trigger\n   */\n  announcementState: CarouselAnnouncementTrigger | undefined;\n  /**\n   * Set announcement state, determines whether change is communicated to screenreader.\n   * @param trigger\n   */\n  setAnnouncementState: (\n    trigger: CarouselAnnouncementTrigger | undefined,\n  ) => void;\n}\n\nexport const CarouselContext = createContext<CarouselContextType | undefined>(\n  \"CarouselContext\",\n  undefined,\n);\n\nexport const useCarouselContext = (): CarouselContextType => {\n  const context = useContext(CarouselContext);\n  if (!context) {\n    throw new Error(\n      \"useCarouselContext must be used within a CarouselProvider\",\n    );\n  }\n  return context;\n};\n"],"names":["createContext","useContext"],"mappings":";;;;;AA4DO,MAAM,eAAA,GAAkBA,kBAAA;AAAA,EAC7B,iBAAA;AAAA,EACA;AACF;AAEO,MAAM,qBAAqB,MAA2B;AAC3D,EAAA,MAAM,OAAA,GAAUC,iBAAW,eAAe,CAAA;AAC1C,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA,EACF;AACA,EAAA,OAAO,OAAA;AACT;;;;;"}

package/dist-cjs/CarouselNextButton.js

@@ -3,11 +3,13 @@
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var react = require('react');
+var CarouselContext = require('./CarouselContext.js');
 var usePrevNextButtons = require('./usePrevNextButtons.js');
 
 const CarouselNextButton = react.forwardRef(function CarouselNextButton2({ className, onClick, ...rest }, ref) {
   const { NextIcon } = core.useIcon();
   const { nextBtnDisabled, onNextButtonClick } = usePrevNextButtons.usePrevNextButtons();
+  const { carouselId } = CarouselContext.useCarouselContext();
   const handleClick = (event) => {
     onNextButtonClick();
     onClick == null ? void 0 : onClick(event);
@@ -18,7 +20,8 @@ const CarouselNextButton = react.forwardRef(function CarouselNextButton2({ class
       onClick: handleClick,
       disabled: nextBtnDisabled,
       focusableWhenDisabled: true,
-      appearance: "bordered",
+      appearance: "transparent",
+      "aria-controls": `${carouselId}-slides`,
       sentiment: "neutral",
       "aria-label": "Next slide",
       ref,

package/dist-cjs/CarouselNextButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselNextButton.js","sources":["../src/CarouselNextButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, useIcon } from \"@salt-ds/core\";\nimport { forwardRef, type MouseEventHandler } from \"react\";\nimport { usePrevNextButtons } from \"./usePrevNextButtons\";\n\n/**\n * Props for the CarouselNextButton component.\n */\nexport interface CarouselNextButtonProps\n  extends Omit<ButtonProps, \"variant\" | \"loading\" | \"loadingAnnouncement\"> {}\n\nexport const CarouselNextButton = forwardRef<\n  HTMLButtonElement,\n  CarouselNextButtonProps\n>(function CarouselNextButton({ className, onClick, ...rest }, ref) {\n  const { NextIcon } = useIcon();\n  const { nextBtnDisabled, onNextButtonClick } = usePrevNextButtons();\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    onNextButtonClick();\n    onClick?.(event);\n  };\n\n  return (\n    <Button\n      onClick={handleClick}\n      disabled={nextBtnDisabled}\n      focusableWhenDisabled\n      appearance=\"bordered\"\n      sentiment=\"neutral\"\n      aria-label=\"Next slide\"\n      ref={ref}\n      {...rest}\n    >\n      <NextIcon aria-hidden />\n    </Button>\n  );\n});\n"],"names":["forwardRef","CarouselNextButton","useIcon","usePrevNextButtons","jsx","Button"],"mappings":";;;;;;;AAUa,MAAA,kBAAA,GAAqBA,gBAGhC,CAAA,SAASC,mBAAmB,CAAA,EAAE,WAAW,OAAS,EAAA,GAAG,IAAK,EAAA,EAAG,GAAK,EAAA;AAClE,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,YAAQ,EAAA;AAC7B,EAAA,MAAM,EAAE,eAAA,EAAiB,iBAAkB,EAAA,GAAIC,qCAAmB,EAAA;AAElE,EAAM,MAAA,WAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,IAAkB,iBAAA,EAAA;AAClB,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,WAAA;AAAA,MACT,QAAU,EAAA,eAAA;AAAA,MACV,qBAAqB,EAAA,IAAA;AAAA,MACrB,UAAW,EAAA,UAAA;AAAA,MACX,SAAU,EAAA,SAAA;AAAA,MACV,YAAW,EAAA,YAAA;AAAA,MACX,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA,CAAC,QAAS,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,GACxB;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CarouselNextButton.js","sources":["../src/CarouselNextButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, useIcon } from \"@salt-ds/core\";\nimport { forwardRef, type MouseEventHandler } from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport { usePrevNextButtons } from \"./usePrevNextButtons\";\n\n/**\n * Props for the CarouselNextButton component.\n */\nexport interface CarouselNextButtonProps\n  extends Omit<ButtonProps, \"variant\" | \"loading\" | \"loadingAnnouncement\"> {}\n\nexport const CarouselNextButton = forwardRef<\n  HTMLButtonElement,\n  CarouselNextButtonProps\n>(function CarouselNextButton({ className, onClick, ...rest }, ref) {\n  const { NextIcon } = useIcon();\n  const { nextBtnDisabled, onNextButtonClick } = usePrevNextButtons();\n\n  const { carouselId } = useCarouselContext();\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    onNextButtonClick();\n    onClick?.(event);\n  };\n\n  return (\n    <Button\n      onClick={handleClick}\n      disabled={nextBtnDisabled}\n      focusableWhenDisabled\n      appearance=\"transparent\"\n      aria-controls={`${carouselId}-slides`}\n      sentiment=\"neutral\"\n      aria-label=\"Next slide\"\n      ref={ref}\n      {...rest}\n    >\n      <NextIcon aria-hidden />\n    </Button>\n  );\n});\n"],"names":["forwardRef","CarouselNextButton","useIcon","usePrevNextButtons","useCarouselContext","jsx","Button"],"mappings":";;;;;;;;AAWO,MAAM,kBAAA,GAAqBA,gBAAA,CAGhC,SAASC,mBAAAA,CAAmB,EAAE,WAAW,OAAA,EAAS,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AAClE,EAAA,MAAM,EAAE,QAAA,EAAS,GAAIC,YAAA,EAAQ;AAC7B,EAAA,MAAM,EAAE,eAAA,EAAiB,iBAAA,EAAkB,GAAIC,qCAAA,EAAmB;AAElE,EAAA,MAAM,EAAE,UAAA,EAAW,GAAIC,kCAAA,EAAmB;AAE1C,EAAA,MAAM,WAAA,GAAoD,CAAC,KAAA,KAAU;AACnE,IAAA,iBAAA,EAAkB;AAClB,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,uBACEC,cAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,WAAA;AAAA,MACT,QAAA,EAAU,eAAA;AAAA,MACV,qBAAA,EAAqB,IAAA;AAAA,MACrB,UAAA,EAAW,aAAA;AAAA,MACX,eAAA,EAAe,GAAG,UAAU,CAAA,OAAA,CAAA;AAAA,MAC5B,SAAA,EAAU,SAAA;AAAA,MACV,YAAA,EAAW,YAAA;AAAA,MACX,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA,CAAC,QAAA,EAAA,EAAS,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,GACxB;AAEJ,CAAC;;;;"}

package/dist-cjs/CarouselPreviousButton.js

@@ -3,11 +3,13 @@
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var react = require('react');
+var CarouselContext = require('./CarouselContext.js');
 var usePrevNextButtons = require('./usePrevNextButtons.js');
 
 const CarouselPreviousButton = react.forwardRef(function CarouselPreviousButton2({ className, onClick, ...rest }, ref) {
   const { PreviousIcon } = core.useIcon();
   const { prevBtnDisabled, onPrevButtonClick } = usePrevNextButtons.usePrevNextButtons();
+  const { carouselId } = CarouselContext.useCarouselContext();
   const handleClick = (event) => {
     onPrevButtonClick();
     onClick == null ? void 0 : onClick(event);
@@ -18,7 +20,8 @@ const CarouselPreviousButton = react.forwardRef(function CarouselPreviousButton2
       onClick: handleClick,
       disabled: prevBtnDisabled,
       focusableWhenDisabled: true,
-      appearance: "bordered",
+      appearance: "transparent",
+      "aria-controls": `${carouselId}-slides`,
       sentiment: "neutral",
       "aria-label": "Previous slide",
       ref,

package/dist-cjs/CarouselPreviousButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselPreviousButton.js","sources":["../src/CarouselPreviousButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, useIcon } from \"@salt-ds/core\";\nimport { forwardRef, type MouseEventHandler } from \"react\";\nimport { usePrevNextButtons } from \"./usePrevNextButtons\";\n\n/**\n * Props for the CarouselPreviousButton component.\n */\nexport interface CarouselPreviousButtonProps\n  extends Omit<ButtonProps, \"variant\" | \"loading\" | \"loadingAnnouncement\"> {}\n\nexport const CarouselPreviousButton = forwardRef<\n  HTMLButtonElement,\n  CarouselPreviousButtonProps\n>(function CarouselPreviousButton({ className, onClick, ...rest }, ref) {\n  const { PreviousIcon } = useIcon();\n  const { prevBtnDisabled, onPrevButtonClick } = usePrevNextButtons();\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    onPrevButtonClick();\n    onClick?.(event);\n  };\n\n  return (\n    <Button\n      onClick={handleClick}\n      disabled={prevBtnDisabled}\n      focusableWhenDisabled\n      appearance=\"bordered\"\n      sentiment=\"neutral\"\n      aria-label=\"Previous slide\"\n      ref={ref}\n      {...rest}\n    >\n      <PreviousIcon aria-hidden />\n    </Button>\n  );\n});\n"],"names":["forwardRef","CarouselPreviousButton","useIcon","usePrevNextButtons","jsx","Button"],"mappings":";;;;;;;AAUa,MAAA,sBAAA,GAAyBA,gBAGpC,CAAA,SAASC,uBAAuB,CAAA,EAAE,WAAW,OAAS,EAAA,GAAG,IAAK,EAAA,EAAG,GAAK,EAAA;AACtE,EAAM,MAAA,EAAE,YAAa,EAAA,GAAIC,YAAQ,EAAA;AACjC,EAAA,MAAM,EAAE,eAAA,EAAiB,iBAAkB,EAAA,GAAIC,qCAAmB,EAAA;AAElE,EAAM,MAAA,WAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,IAAkB,iBAAA,EAAA;AAClB,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,WAAA;AAAA,MACT,QAAU,EAAA,eAAA;AAAA,MACV,qBAAqB,EAAA,IAAA;AAAA,MACrB,UAAW,EAAA,UAAA;AAAA,MACX,SAAU,EAAA,SAAA;AAAA,MACV,YAAW,EAAA,gBAAA;AAAA,MACX,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA,CAAC,YAAa,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,GAC5B;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CarouselPreviousButton.js","sources":["../src/CarouselPreviousButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, useIcon } from \"@salt-ds/core\";\nimport { forwardRef, type MouseEventHandler } from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport { usePrevNextButtons } from \"./usePrevNextButtons\";\n\n/**\n * Props for the CarouselPreviousButton component.\n */\nexport interface CarouselPreviousButtonProps\n  extends Omit<ButtonProps, \"variant\" | \"loading\" | \"loadingAnnouncement\"> {}\n\nexport const CarouselPreviousButton = forwardRef<\n  HTMLButtonElement,\n  CarouselPreviousButtonProps\n>(function CarouselPreviousButton({ className, onClick, ...rest }, ref) {\n  const { PreviousIcon } = useIcon();\n  const { prevBtnDisabled, onPrevButtonClick } = usePrevNextButtons();\n\n  const { carouselId } = useCarouselContext();\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    onPrevButtonClick();\n    onClick?.(event);\n  };\n\n  return (\n    <Button\n      onClick={handleClick}\n      disabled={prevBtnDisabled}\n      focusableWhenDisabled\n      appearance=\"transparent\"\n      aria-controls={`${carouselId}-slides`}\n      sentiment=\"neutral\"\n      aria-label=\"Previous slide\"\n      ref={ref}\n      {...rest}\n    >\n      <PreviousIcon aria-hidden />\n    </Button>\n  );\n});\n"],"names":["forwardRef","CarouselPreviousButton","useIcon","usePrevNextButtons","useCarouselContext","jsx","Button"],"mappings":";;;;;;;;AAWO,MAAM,sBAAA,GAAyBA,gBAAA,CAGpC,SAASC,uBAAAA,CAAuB,EAAE,WAAW,OAAA,EAAS,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AACtE,EAAA,MAAM,EAAE,YAAA,EAAa,GAAIC,YAAA,EAAQ;AACjC,EAAA,MAAM,EAAE,eAAA,EAAiB,iBAAA,EAAkB,GAAIC,qCAAA,EAAmB;AAElE,EAAA,MAAM,EAAE,UAAA,EAAW,GAAIC,kCAAA,EAAmB;AAE1C,EAAA,MAAM,WAAA,GAAoD,CAAC,KAAA,KAAU;AACnE,IAAA,iBAAA,EAAkB;AAClB,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,uBACEC,cAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,WAAA;AAAA,MACT,QAAA,EAAU,eAAA;AAAA,MACV,qBAAA,EAAqB,IAAA;AAAA,MACrB,UAAA,EAAW,aAAA;AAAA,MACX,eAAA,EAAe,GAAG,UAAU,CAAA,OAAA,CAAA;AAAA,MAC5B,SAAA,EAAU,SAAA;AAAA,MACV,YAAA,EAAW,gBAAA;AAAA,MACX,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA,CAAC,YAAA,EAAA,EAAa,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,GAC5B;AAEJ,CAAC;;;;"}