@salt-ds/embla-carousel 0.0.0-snapshot-20250627090641 → 0.1.0

package/CHANGELOG.md

@@ -1,19 +1,19 @@
 # @salt-ds/embla-carousel
 
-## 0.0.0-snapshot-20250627090641
+## 0.1.0
 
-### Patch Changes
+### Minor Changes
 
-- e8d4fd7: ### Summary
+- 9c4575b: ### Summary
 
   The `Carousel` component has been moved from the Lab package to its own package, `@salt-ds/embla-carousel`.
-  Initially released as a pre-release in Lab, the Carousel was not fully featured. We have now pivoted to treating Carousel as a pattern using embla, that can compose Salt components as its slides.
+  Initially released as a pre-release in Lab, the Carousel was not fully featured. We have now pivoted to treating Carousel as a pattern using Embla, that can compose Salt components as its slides.
 
-  [embla](https://www.embla-carousel.com) is a headless open-source carousel library offering a comprehensive set of features and an extensible API.
+  [Embla](https://www.embla-carousel.com) is a headless open-source carousel library offering a comprehensive set of features and an extensible API.
 
   ### Migration Guide
 
-  To allow consumers to manage their own version of `embla`, it is defined as a peer dependency.
+  To allow consumers to manage their own version of Embla, it's defined as a peer dependency.
 
   To migrate from the current Lab version of `Carousel`:
 
@@ -25,7 +25,7 @@
   }
   ```
 
-  2. update your imports.
+  2. Update your imports.
 
   ```diff
   import {
@@ -90,9 +90,9 @@
 
   The Carousel can be configured using the Embla API.
 
-  To configure embla, pass `emblaOptions` or `emblaPlugins` to the Carousel.
+  To configure Embla, pass `emblaOptions` or `emblaPlugins` to the Carousel.
 
-  To control the behavior of the Carousel through the embla API, obtain a reference to the embla API through the `setApiRef` prop.
+  To control the behavior of the Carousel through the Embla API, obtain a reference to the Embla API through the `getEmblaApi` prop.
 
   ```
   const [emblaApi, setEmblaApi] = useState<CarouselEmblaApiType | null>(null);
@@ -153,9 +153,13 @@
   - `CarouselAutoplayIndicator`: An animated countdown indicator for autoplay functionality.
   - `CarouselAnnouncementPlugin`: A plugin for announcing slide changes to assistive technologies.
 
+### Patch Changes
+
 - Updated dependencies [62975de]
+- Updated dependencies [b96166e]
 - Updated dependencies [73ccf6b]
 - Updated dependencies [95dd874]
 - Updated dependencies [c93c943]
 - Updated dependencies [104d776]
-  - @salt-ds/core@0.0.0-snapshot-20250627090641
+- Updated dependencies [621253b]
+  - @salt-ds/core@1.47.1

package/css/salt-embla-carousel.css

@@ -1,8 +1,8 @@
 /* src/Carousel.css */
 .saltCarousel {
-  --saltCarousel-slide-height: 310px;
-  --saltCarousel-slide-spacing: var(--salt-spacing-100);
-  --saltCarousel-slide-size: 100%;
+  --carousel-slide-height: 310px;
+  --carousel-slide-spacing: var(--salt-spacing-100);
+  --carousel-slide-size: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--salt-spacing-100);
@@ -11,7 +11,7 @@
 
 /* src/CarouselAutoplayIndicator.css */
 .saltCarouselAutoplayIndicator {
-  --salt-carousel-svg-circumference: 0;
+  --carousel-svg-circumference: 0;
   display: flex;
   align-self: center;
 }
@@ -25,14 +25,14 @@
 .saltCarouselAutoplayIndicatorSVG-bar {
   fill: none;
   stroke: var(--salt-accent-background);
-  stroke-dasharray: var(--salt-carousel-svg-circumference);
-  stroke-dashoffset: var(--salt-carousel-svg-circumference);
+  stroke-dasharray: var(--carousel-svg-circumference);
+  stroke-dashoffset: var(--carousel-svg-circumference);
   animation: indicatorAnimation 0.5s linear;
   animation-play-state: paused;
 }
 @keyframes indicatorAnimation {
   from {
-    stroke-dashoffset: var(--salt-carousel-svg-circumference);
+    stroke-dashoffset: var(--carousel-svg-circumference);
   }
   to {
     stroke-dashoffset: 0;
@@ -43,9 +43,9 @@
 .saltCarouselCard {
   display: flex;
   transform: translate3d(0, 0, 0);
-  flex: 0 0 var(--saltCarousel-slide-size);
+  flex: 0 0 var(--carousel-slide-size);
   min-width: 0;
-  padding-left: var(--saltCarousel-slide-spacing);
+  padding-left: var(--carousel-slide-spacing);
   box-sizing: border-box;
 }
 .saltCarouselCard-content {
@@ -73,13 +73,13 @@
 }
 .saltCarouselCard-bordered {
   background: var(--salt-container-primary-background);
-  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
+  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-palette-text-body-fontWeight-strong);
+  font-weight: var(--salt-text-fontWeight-strong);
 }
 
 /* src/CarouselSlides.css */
@@ -89,7 +89,7 @@
 .saltCarouselSlides-container {
   display: flex;
   touch-action: pan-y pinch-zoom;
-  margin-left: calc(var(--saltCarousel-slide-spacing) * -1);
+  margin-left: calc(var(--carousel-slide-spacing) * -1);
 }
 
 /* src/CarouselTab.css */
@@ -98,7 +98,7 @@
   width: var(--salt-size-selectable);
   height: var(--salt-size-selectable);
   border: none;
-  box-shadow: inset 0 0 0 var(--salt-size-border) var(--salt-selectable-borderColor);
+  box-shadow: inset 0 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor);
   -webkit-tap-highlight-color: var(--salt-selectable-borderColor-hover);
   -webkit-appearance: none;
   appearance: none;
@@ -152,4 +152,4 @@
   outline-color: var(--salt-focused-outlineColor);
 }
 
-/* src/cd851d81-d6a7-4108-95c8-d10689f569ce.css */
+/* src/55a330ae-262e-4577-91e9-4c6270057f5e.css */

package/dist-cjs/Carousel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCarousel {\n  --saltCarousel-slide-height: 310px;\n  --saltCarousel-slide-spacing: var(--salt-spacing-100);\n  --saltCarousel-slide-size: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-100);\n  margin: auto;\n}\n";
+var css_248z = ".saltCarousel {\n  --carousel-slide-height: 310px;\n  --carousel-slide-spacing: var(--salt-spacing-100);\n  --carousel-slide-size: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-100);\n  margin: auto;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Carousel.css.js.map

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 as ref, 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 } 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;;;;"}

package/dist-cjs/CarouselAnnouncementPlugin.js

@@ -3,33 +3,30 @@
 var core = require('@salt-ds/core');
 var react = require('react');
 
-const getSlideLabel = (slideElement, slideIndex, slideCount) => {
+const getSlideLabel = (emblaApi) => {
+  var _a;
+  const slideCount = (emblaApi == null ? void 0 : emblaApi.slideNodes().length) ?? 0;
+  const slideIndexInView = ((_a = emblaApi == null ? void 0 : emblaApi.slidesInView()) == null ? void 0 : _a[0]) ?? 0;
+  const slideElement = emblaApi == null ? void 0 : emblaApi.slideNodes()[slideIndexInView];
   let description = slideElement == null ? void 0 : slideElement.getAttribute("aria-label");
   if (!description) {
     const labelledById = slideElement == null ? void 0 : slideElement.getAttribute("aria-labelledby");
+    const { ownerDocument } = emblaApi.internalEngine();
     if (labelledById) {
-      const labelledByElement = document.getElementById(labelledById);
+      const labelledByElement = ownerDocument.getElementById(labelledById);
       description = (labelledByElement == null ? void 0 : labelledByElement.textContent) || "No description available";
     } else {
       description = "No description available";
     }
   }
-  return `slide ${slideIndex + 1} of ${slideCount}. ${description}`;
+  return `slide ${slideIndexInView + 1} of ${slideCount}. ${description}`;
 };
 function CarouselAnnouncement(userOptions = {}) {
   let emblaApi;
   const { announce } = core.useAriaAnnouncer();
   const handleSettle = react.useCallback(
     (emblaApi2) => {
-      var _a;
-      const slideCount = (emblaApi2 == null ? void 0 : emblaApi2.slideNodes().length) ?? 0;
-      const slideIndexInView = ((_a = emblaApi2 == null ? void 0 : emblaApi2.slidesInView()) == null ? void 0 : _a[0]) ?? 0;
-      const slideElement = emblaApi2 == null ? void 0 : emblaApi2.slideNodes()[slideIndexInView];
-      const slideLabel = getSlideLabel(
-        slideElement,
-        slideIndexInView,
-        slideCount
-      );
+      const slideLabel = getSlideLabel(emblaApi2);
       announce(slideLabel);
     },
     [announce]

package/dist-cjs/CarouselAnnouncementPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselAnnouncementPlugin.js","sources":["../src/CarouselAnnouncementPlugin.ts"],"sourcesContent":["import { useAriaAnnouncer } from \"@salt-ds/core\";\nimport type {\n  CreateOptionsType,\n  CreatePluginType,\n  EmblaCarouselType,\n} from \"embla-carousel\";\nimport { useCallback } from \"react\";\n\ndeclare module \"embla-carousel\" {\n  interface EmblaPluginsType {\n    announcement: CarouselAnnouncementType;\n  }\n}\n\n/**\n * Type definition for the parameters of the getSlideLabel function.\n */\nexport type GetSlideLabelProps = (\n  /**\n   * The HTML element representing the slide.\n   */\n  slideElement: HTMLElement,\n\n  /**\n   * The index of the slide within the carousel.\n   */\n  slideIndex: number,\n\n  /**\n   * The total number of slides in the carousel.\n   */\n  slideCount: number,\n) => string;\n\n/**\n * Generates a label for a carousel slide based on ARIA attributes.\n *\n * @param props - The properties required to generate the slide description.\n * @returns A string description of the slide, including its position and ARIA label or text content.\n */\nexport const getSlideLabel: GetSlideLabelProps = (\n  slideElement,\n  slideIndex,\n  slideCount,\n): string => {\n  let description = slideElement?.getAttribute(\"aria-label\");\n  if (!description) {\n    const labelledById = slideElement?.getAttribute(\"aria-labelledby\");\n    if (labelledById) {\n      const labelledByElement = document.getElementById(labelledById);\n      description =\n        labelledByElement?.textContent || \"No description available\";\n    } else {\n      description = \"No description available\";\n    }\n  }\n  return `slide ${slideIndex + 1} of ${slideCount}. ${description}`;\n};\n\n// biome-ignore lint/complexity/noBannedTypes: Replicated from embla docs/code\ntype OptionsType = CreateOptionsType<{}>;\n// biome-ignore lint/complexity/noBannedTypes: Replicated from embla docs/code\nexport type CarouselAnnouncementType = CreatePluginType<{}, OptionsType>;\n\nexport type CarouselAnnouncementOptionsType =\n  CarouselAnnouncementType[\"options\"];\n\nexport function CarouselAnnouncement(\n  userOptions: CarouselAnnouncementOptionsType = {},\n): CarouselAnnouncementType {\n  let emblaApi: EmblaCarouselType;\n\n  const { announce } = useAriaAnnouncer();\n\n  const handleSettle = useCallback(\n    (emblaApi: EmblaCarouselType) => {\n      const slideCount = emblaApi?.slideNodes().length ?? 0;\n      const slideIndexInView = emblaApi?.slidesInView()?.[0] ?? 0;\n      const slideElement = emblaApi?.slideNodes()[slideIndexInView];\n\n      const slideLabel = getSlideLabel(\n        slideElement,\n        slideIndexInView,\n        slideCount,\n      );\n      announce(slideLabel);\n    },\n    [announce],\n  );\n\n  function init(emblaApiInstance: EmblaCarouselType): void {\n    emblaApi = emblaApiInstance;\n    emblaApi.on(\"settle\", handleSettle);\n  }\n\n  function destroy(): void {\n    emblaApi.off(\"settle\", handleSettle);\n  }\n\n  const self: CarouselAnnouncementType = {\n    name: \"announcement\",\n    options: userOptions,\n    init,\n    destroy,\n  };\n  return self;\n}\n"],"names":["useAriaAnnouncer","useCallback","emblaApi"],"mappings":";;;;;AAwCO,MAAM,aAAoC,GAAA,CAC/C,YACA,EAAA,UAAA,EACA,UACW,KAAA;AACX,EAAI,IAAA,WAAA,GAAc,6CAAc,YAAa,CAAA,YAAA,CAAA;AAC7C,EAAA,IAAI,CAAC,WAAa,EAAA;AAChB,IAAM,MAAA,YAAA,GAAe,6CAAc,YAAa,CAAA,iBAAA,CAAA;AAChD,IAAA,IAAI,YAAc,EAAA;AAChB,MAAM,MAAA,iBAAA,GAAoB,QAAS,CAAA,cAAA,CAAe,YAAY,CAAA;AAC9D,MAAA,WAAA,GAAA,CACE,uDAAmB,WAAe,KAAA,0BAAA;AAAA,KAC/B,MAAA;AACL,MAAc,WAAA,GAAA,0BAAA;AAAA;AAChB;AAEF,EAAA,OAAO,SAAS,UAAa,GAAA,CAAC,CAAO,IAAA,EAAA,UAAU,KAAK,WAAW,CAAA,CAAA;AACjE;AAUgB,SAAA,oBAAA,CACd,WAA+C,GAAA,EACrB,EAAA;AAC1B,EAAI,IAAA,QAAA;AAEJ,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIA,qBAAiB,EAAA;AAEtC,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,CAACC,SAAgC,KAAA;AA3ErC,MAAA,IAAA,EAAA;AA4EM,MAAA,MAAM,UAAaA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,aAAa,MAAU,KAAA,CAAA;AACpD,MAAA,MAAM,qBAAmB,EAAAA,GAAAA,SAAAA,IAAA,gBAAAA,SAAU,CAAA,YAAA,EAAA,KAAV,mBAA2B,CAAM,CAAA,KAAA,CAAA;AAC1D,MAAA,MAAM,YAAeA,GAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,UAAa,EAAA,CAAA,gBAAA,CAAA;AAE5C,MAAA,MAAM,UAAa,GAAA,aAAA;AAAA,QACjB,YAAA;AAAA,QACA,gBAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,QAAA,CAAS,UAAU,CAAA;AAAA,KACrB;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,SAAS,KAAK,gBAA2C,EAAA;AACvD,IAAW,QAAA,GAAA,gBAAA;AACX,IAAS,QAAA,CAAA,EAAA,CAAG,UAAU,YAAY,CAAA;AAAA;AAGpC,EAAA,SAAS,OAAgB,GAAA;AACvB,IAAS,QAAA,CAAA,GAAA,CAAI,UAAU,YAAY,CAAA;AAAA;AAGrC,EAAA,MAAM,IAAiC,GAAA;AAAA,IACrC,IAAM,EAAA,cAAA;AAAA,IACN,OAAS,EAAA,WAAA;AAAA,IACT,IAAA;AAAA,IACA;AAAA,GACF;AACA,EAAO,OAAA,IAAA;AACT;;;;;"}
+{"version":3,"file":"CarouselAnnouncementPlugin.js","sources":["../src/CarouselAnnouncementPlugin.ts"],"sourcesContent":["import { useAriaAnnouncer } from \"@salt-ds/core\";\nimport type {\n  CreateOptionsType,\n  CreatePluginType,\n  EmblaCarouselType,\n} from \"embla-carousel\";\nimport { useCallback } from \"react\";\n\ndeclare module \"embla-carousel\" {\n  interface EmblaPluginsType {\n    announcement: CarouselAnnouncementType;\n  }\n}\n\n/**\n * Type definition for the parameters of the getSlideLabel function.\n * @returns A string that describes the slide, including its index and total count.\n */\nexport type GetSlideLabelProps = (emblaApi: EmblaCarouselType) => string;\n\n/** * Generates a label for a carousel slide based on ARIA attributes.\n * This function retrieves the slide's ARIA label or text content and formats it into a descriptive string.\n * @param slideElement\n * @param slideIndex\n * @param slideCount\n * @returns A string description of the slide, including its position and ARIA label or text content.\n */\nexport const getSlideLabel: GetSlideLabelProps = (emblaApi): string => {\n  const slideCount = emblaApi?.slideNodes().length ?? 0;\n  const slideIndexInView = emblaApi?.slidesInView()?.[0] ?? 0;\n  const slideElement = emblaApi?.slideNodes()[slideIndexInView];\n\n  let description = slideElement?.getAttribute(\"aria-label\");\n  if (!description) {\n    const labelledById = slideElement?.getAttribute(\"aria-labelledby\");\n    const { ownerDocument } = emblaApi.internalEngine();\n    if (labelledById) {\n      const labelledByElement = ownerDocument.getElementById(labelledById);\n      description =\n        labelledByElement?.textContent || \"No description available\";\n    } else {\n      description = \"No description available\";\n    }\n  }\n  return `slide ${slideIndexInView + 1} of ${slideCount}. ${description}`;\n};\n\n// biome-ignore lint/complexity/noBannedTypes: Replicated from embla docs/code\ntype OptionsType = CreateOptionsType<{}>;\n// biome-ignore lint/complexity/noBannedTypes: Replicated from embla docs/code\nexport type CarouselAnnouncementType = CreatePluginType<{}, OptionsType>;\n\nexport type CarouselAnnouncementOptionsType =\n  CarouselAnnouncementType[\"options\"];\n\nexport function CarouselAnnouncement(\n  userOptions: CarouselAnnouncementOptionsType = {},\n): CarouselAnnouncementType {\n  let emblaApi: EmblaCarouselType;\n\n  const { announce } = useAriaAnnouncer();\n\n  const handleSettle = useCallback(\n    (emblaApi: EmblaCarouselType) => {\n      const slideLabel = getSlideLabel(emblaApi);\n      announce(slideLabel);\n    },\n    [announce],\n  );\n\n  function init(emblaApiInstance: EmblaCarouselType): void {\n    emblaApi = emblaApiInstance;\n    emblaApi.on(\"settle\", handleSettle);\n  }\n\n  function destroy(): void {\n    emblaApi.off(\"settle\", handleSettle);\n  }\n\n  const self: CarouselAnnouncementType = {\n    name: \"announcement\",\n    options: userOptions,\n    init,\n    destroy,\n  };\n  return self;\n}\n"],"names":["useAriaAnnouncer","useCallback","emblaApi"],"mappings":";;;;;AA2Ba,MAAA,aAAA,GAAoC,CAAC,QAAqB,KAAA;AA3BvE,EAAA,IAAA,EAAA;AA4BE,EAAM,MAAA,UAAA,GAAA,CAAa,QAAU,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,UAAA,EAAA,CAAa,MAAU,KAAA,CAAA;AACpD,EAAA,MAAM,gBAAmB,GAAA,CAAA,CAAA,EAAA,GAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,YAAV,EAAA,KAAA,IAAA,GAAA,MAAA,GAAA,EAAA,CAA2B,CAAM,CAAA,KAAA,CAAA;AAC1D,EAAM,MAAA,YAAA,GAAe,qCAAU,UAAa,EAAA,CAAA,gBAAA,CAAA;AAE5C,EAAI,IAAA,WAAA,GAAc,6CAAc,YAAa,CAAA,YAAA,CAAA;AAC7C,EAAA,IAAI,CAAC,WAAa,EAAA;AAChB,IAAM,MAAA,YAAA,GAAe,6CAAc,YAAa,CAAA,iBAAA,CAAA;AAChD,IAAA,MAAM,EAAE,aAAA,EAAkB,GAAA,QAAA,CAAS,cAAe,EAAA;AAClD,IAAA,IAAI,YAAc,EAAA;AAChB,MAAM,MAAA,iBAAA,GAAoB,aAAc,CAAA,cAAA,CAAe,YAAY,CAAA;AACnE,MAAA,WAAA,GAAA,CACE,uDAAmB,WAAe,KAAA,0BAAA;AAAA,KAC/B,MAAA;AACL,MAAc,WAAA,GAAA,0BAAA;AAAA;AAChB;AAEF,EAAA,OAAO,SAAS,gBAAmB,GAAA,CAAC,CAAO,IAAA,EAAA,UAAU,KAAK,WAAW,CAAA,CAAA;AACvE;AAUgB,SAAA,oBAAA,CACd,WAA+C,GAAA,EACrB,EAAA;AAC1B,EAAI,IAAA,QAAA;AAEJ,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIA,qBAAiB,EAAA;AAEtC,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,CAACC,SAAgC,KAAA;AAC/B,MAAM,MAAA,UAAA,GAAa,cAAcA,SAAQ,CAAA;AACzC,MAAA,QAAA,CAAS,UAAU,CAAA;AAAA,KACrB;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,SAAS,KAAK,gBAA2C,EAAA;AACvD,IAAW,QAAA,GAAA,gBAAA;AACX,IAAS,QAAA,CAAA,EAAA,CAAG,UAAU,YAAY,CAAA;AAAA;AAGpC,EAAA,SAAS,OAAgB,GAAA;AACvB,IAAS,QAAA,CAAA,GAAA,CAAI,UAAU,YAAY,CAAA;AAAA;AAGrC,EAAA,MAAM,IAAiC,GAAA;AAAA,IACrC,IAAM,EAAA,cAAA;AAAA,IACN,OAAS,EAAA,WAAA;AAAA,IACT,IAAA;AAAA,IACA;AAAA,GACF;AACA,EAAO,OAAA,IAAA;AACT;;;;;"}

package/dist-cjs/CarouselAutoplayIndicator.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCarouselAutoplayIndicator {\n  --salt-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(--salt-carousel-svg-circumference);\n  stroke-dashoffset: var(--salt-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(--salt-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-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";
 
 module.exports = css_248z;
 //# sourceMappingURL=CarouselAutoplayIndicator.css.js.map

package/dist-cjs/CarouselAutoplayIndicator.js

@@ -16,67 +16,77 @@ const sizeAndStrokeWidthMapping = {
   low: { size: 14, strokeWidth: 2 },
   touch: { size: 16, strokeWidth: 2 }
 };
-const CarouselAutoplayIndicator = react.forwardRef(({ className, duration, slideIndex, isPlaying, children, ...props }, ref) => {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "salt-carousel-autoplay-indicator",
-    css: CarouselAutoplayIndicator$1,
-    window: targetWindow
-  });
-  const barRef = react.useRef(null);
-  const animationFrameId = react.useRef(null);
-  const density = core.useDensity();
-  const { size, strokeWidth } = sizeAndStrokeWidthMapping[density];
-  const radius = (size - strokeWidth) / 2;
-  const circumference = 2 * Math.PI * radius;
-  react.useEffect(() => {
-    if (barRef.current) {
-      animationFrameId.current = requestAnimationFrame(() => {
-        if (!barRef.current) {
-          return;
-        }
-        barRef.current.style.animation = "none";
-        barRef.current.style.strokeDashoffset = `${circumference}`;
+const CarouselAutoplayIndicator = react.forwardRef(
+  ({
+    className,
+    duration,
+    slideIndex,
+    isPlaying,
+    isPaused = false,
+    children,
+    ...props
+  }, ref) => {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-carousel-autoplay-indicator",
+      css: CarouselAutoplayIndicator$1,
+      window: targetWindow
+    });
+    const barRef = react.useRef(null);
+    const animationFrameId = react.useRef(null);
+    const density = core.useDensity();
+    const { size, strokeWidth } = sizeAndStrokeWidthMapping[density];
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    react.useEffect(() => {
+      if (barRef.current) {
         animationFrameId.current = requestAnimationFrame(() => {
           if (!barRef.current) {
             return;
           }
-          barRef.current.style.animation = `indicatorAnimation ${duration}ms linear`;
-          barRef.current.style.animationPlayState = isPlaying ? "running" : "paused";
+          barRef.current.style.animation = "none";
+          barRef.current.style.strokeDashoffset = `${circumference}`;
+          animationFrameId.current = requestAnimationFrame(() => {
+            if (!barRef.current) {
+              return;
+            }
+            barRef.current.style.animation = `indicatorAnimation ${duration}ms linear`;
+            barRef.current.style.animationPlayState = isPaused ? "paused" : isPlaying ? "running" : "paused";
+          });
         });
-      });
-    }
-    return () => {
-      if (animationFrameId.current !== null) {
-        cancelAnimationFrame(animationFrameId.current);
-        animationFrameId.current = null;
       }
-    };
-  }, [circumference, duration, slideIndex, isPlaying]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      style: {
-        width: size,
-        height: size,
-        // @ts-ignore
-        "--salt-carousel-svg-circumference": circumference
-      },
-      className: clsx(withBaseName(), className),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        CarouselAutoplayIndicatorSVG.CarouselAutoplayIndicatorSVG,
-        {
-          size,
-          strokeWidth,
-          barRef,
-          radius
+      return () => {
+        if (animationFrameId.current !== null) {
+          cancelAnimationFrame(animationFrameId.current);
+          animationFrameId.current = null;
         }
-      )
-    }
-  );
-});
+      };
+    }, [circumference, duration, slideIndex, isPlaying, isPaused]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        style: {
+          width: size,
+          height: size,
+          // @ts-ignore
+          "--carousel-svg-circumference": circumference
+        },
+        className: clsx(withBaseName(), className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          CarouselAutoplayIndicatorSVG.CarouselAutoplayIndicatorSVG,
+          {
+            size,
+            strokeWidth,
+            barRef,
+            radius
+          }
+        )
+      }
+    );
+  }
+);
 
 exports.CarouselAutoplayIndicator = CarouselAutoplayIndicator;
 //# sourceMappingURL=CarouselAutoplayIndicator.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 \"classnames\";\nimport {\n  type ComponentPropsWithoutRef,\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\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>(({ className, duration, slideIndex, isPlaying, children, ...props }, ref) => {\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>(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 = 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]);\n\n  return (\n    <div\n      ref={ref}\n      style={{\n        width: size,\n        height: size,\n        // @ts-ignore\n        \"--salt-carousel-svg-circumference\": circumference,\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"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","carouselAutoplayIndicator","useRef","useDensity","useEffect","jsx","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 \"classnames\";\nimport {\n  type ComponentPropsWithoutRef,\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          width: size,\n          height: size,\n          // @ts-ignore\n          \"--carousel-svg-circumference\": circumference,\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","CarouselAutoplayIndicatorSVG"],"mappings":"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"}

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 \"classnames\";\nimport { type SVGAttributes, forwardRef } from \"react\";\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: React.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","jsx"],"mappings":";;;;;;;AAGA,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,EAAA,IAAA,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 \"classnames\";\nimport { type Ref, type SVGAttributes, forwardRef } 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","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,EAAA,IAAA,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;;;;"}

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(--saltCarousel-slide-size);\n  min-width: 0;\n  padding-left: var(--saltCarousel-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-border) 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-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";
 
 module.exports = css_248z;
 //# sourceMappingURL=CarouselCard.css.js.map

package/dist-cjs/CarouselCard.js

@@ -13,7 +13,7 @@ const CarouselCard = react.forwardRef(
   function CarouselCard2({ actions, appearance, children, className, header, media, ...rest }, ref) {
     const targetWindow = window.useWindow();
     styles.useComponentCssInjection({
-      testId: "salt-carousel-slide",
+      testId: "salt-carousel-card",
       css: CarouselCard$1,
       window: targetWindow
     });

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, type ReactNode, forwardRef } 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-slide\",\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,qBAAA;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, type ReactNode, forwardRef } 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;;;;"}

package/dist-cjs/CarouselNextButton.js

@@ -8,13 +8,10 @@ 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 handleClick = react.useCallback(
-    (event) => {
-      onNextButtonClick();
-      onClick == null ? void 0 : onClick(event);
-    },
-    [onNextButtonClick, onClick]
-  );
+  const handleClick = (event) => {
+    onNextButtonClick();
+    onClick == null ? void 0 : onClick(event);
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     core.Button,
     {

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 { type MouseEventHandler, forwardRef, useCallback } from \"react\";\nimport { usePrevNextButtons } from \"./usePrevNextButtons\";\n\n/**\n * Props for the CarouselNextButton component.\n */\nexport interface CarouselNextButtonProps extends ButtonProps {}\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> = useCallback(\n    (event) => {\n      onNextButtonClick();\n      onClick?.(event);\n    },\n    [onNextButtonClick, onClick],\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","useCallback","jsx","Button"],"mappings":";;;;;;;AASa,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,EAAA,MAAM,WAAoD,GAAAC,iBAAA;AAAA,IACxD,CAAC,KAAU,KAAA;AACT,MAAkB,iBAAA,EAAA;AAClB,MAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,KACZ;AAAA,IACA,CAAC,mBAAmB,OAAO;AAAA,GAC7B;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 { type MouseEventHandler, forwardRef } 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;;;;"}

package/dist-cjs/CarouselPreviousButton.js

@@ -8,13 +8,10 @@ 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 handleClick = react.useCallback(
-    (event) => {
-      onPrevButtonClick();
-      onClick == null ? void 0 : onClick(event);
-    },
-    [onPrevButtonClick, onClick]
-  );
+  const handleClick = (event) => {
+    onPrevButtonClick();
+    onClick == null ? void 0 : onClick(event);
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     core.Button,
     {

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 { type MouseEventHandler, forwardRef, useCallback } from \"react\";\nimport { usePrevNextButtons } from \"./usePrevNextButtons\";\n\n/**\n * Props for the CarouselPreviousButton component.\n */\nexport interface CarouselPreviousButtonProps extends ButtonProps {}\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> = useCallback(\n    (event) => {\n      onPrevButtonClick();\n      onClick?.(event);\n    },\n    [onPrevButtonClick, onClick],\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","useCallback","jsx","Button"],"mappings":";;;;;;;AASa,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,EAAA,MAAM,WAAoD,GAAAC,iBAAA;AAAA,IACxD,CAAC,KAAU,KAAA;AACT,MAAkB,iBAAA,EAAA;AAClB,MAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,KACZ;AAAA,IACA,CAAC,mBAAmB,OAAO;AAAA,GAC7B;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 { type MouseEventHandler, forwardRef } 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;;;;"}

package/dist-cjs/CarouselProgressLabel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCarouselTabList.saltText {\n  font-weight: var(--salt-palette-text-body-fontWeight-strong);\n}\n";
+var css_248z = ".saltCarouselTabList.saltText {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CarouselProgressLabel.css.js.map