@salt-ds/embla-carousel 0.1.5 → 1.0.0

package/dist-cjs/CarouselTabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselTabList.js","sources":["../src/CarouselTabList.tsx"],"sourcesContent":["import { makePrefixer, type RenderPropsType, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type KeyboardEventHandler,\n  useRef,\n} from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport {\n  CarouselTab,\n  type CarouselTabProps,\n  useCarouselTab,\n} from \"./CarouselTab\";\nimport carouselControlsCss from \"./CarouselTabList.css\";\n\nconst withBaseName = makePrefixer(\"saltCarouselTabList\");\n\n/**\n * Props for the CarouselTabList component.\n */\nexport interface CarouselTabListProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Render prop to enable customisation of tab button.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nconst CarouselTabRenderer = forwardRef<\n  HTMLButtonElement,\n  CarouselTabProps & { render?: CarouselTabListProps[\"render\"] }\n>((props, ref) => {\n  return renderProps(CarouselTab, { ...props, ref });\n});\n\nexport const CarouselTabList = forwardRef<HTMLDivElement, CarouselTabListProps>(\n  function CarouselTabList({ className, render, onKeyDown, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-controls\",\n      css: carouselControlsCss,\n      window: targetWindow,\n    });\n\n    const { emblaApi } = useCarouselContext();\n    const { selectedIndex, scrollSnaps, onClick } = useCarouselTab(emblaApi);\n\n    const slideNodes = emblaApi?.slideNodes();\n    const numberOfSlides = slideNodes?.length ?? 0;\n    const slidesPerTransition = numberOfSlides\n      ? Math.ceil(numberOfSlides / scrollSnaps.length)\n      : 0;\n\n    const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {\n      let newIndex = selectedIndex;\n\n      if (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\") {\n        const direction = event.key === \"ArrowLeft\" ? -1 : 1;\n        newIndex =\n          (selectedIndex + direction + scrollSnaps.length) % scrollSnaps.length;\n      } else if (event.key === \"Home\") {\n        newIndex = 0;\n      } else if (event.key === \"End\") {\n        newIndex = scrollSnaps.length - 1;\n      }\n\n      if (newIndex !== selectedIndex) {\n        onClick(newIndex);\n        buttonRefs.current[newIndex]?.focus();\n        event.preventDefault();\n        event.stopPropagation();\n      }\n      onKeyDown?.(event);\n    };\n\n    return (\n      <div\n        role=\"tablist\"\n        aria-label=\"Choose slide\"\n        tabIndex={0}\n        className={clsx(withBaseName(), className)}\n        onKeyDown={handleKeyDown}\n        ref={ref}\n        {...rest}\n      >\n        {scrollSnaps.map((_, tabIndex) => {\n          const startSlideNumber = tabIndex * slidesPerTransition + 1;\n          const endSlideNumber = Math.min(\n            startSlideNumber + slidesPerTransition - 1,\n            numberOfSlides,\n          );\n          const label =\n            startSlideNumber === endSlideNumber\n              ? `Slide ${startSlideNumber}`\n              : `Slides ${startSlideNumber}-${endSlideNumber} of ${numberOfSlides}`;\n\n          const selected = selectedIndex === tabIndex;\n\n          const ariaControls = slideNodes?.length\n            ? slideNodes[startSlideNumber - 1].id\n            : undefined;\n          return (\n            <CarouselTabRenderer\n              key={`carouselTab-${tabIndex}}`}\n              ref={(element: HTMLButtonElement) => {\n                buttonRefs.current[tabIndex] = element;\n              }}\n              render={render}\n              role={\"tab\"}\n              onClick={() => onClick(tabIndex)}\n              aria-selected={selected}\n              selected={selected}\n              tabIndex={selected ? 0 : -1}\n              aria-label={label}\n              aria-labelledby={ariaControls}\n              aria-controls={ariaControls}\n            />\n          );\n        })}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","renderProps","CarouselTab","CarouselTabList","useWindow","useComponentCssInjection","carouselControlsCss","useCarouselContext","useCarouselTab","useRef","jsx","clsx"],"mappings":"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"}
+{"version":3,"file":"CarouselTabList.js","sources":["../src/CarouselTabList.tsx"],"sourcesContent":["import { makePrefixer, type RenderPropsType, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type KeyboardEventHandler,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport {\n  CarouselTab,\n  type CarouselTabProps,\n  useCarouselTab,\n} from \"./CarouselTab\";\nimport carouselControlsCss from \"./CarouselTabList.css\";\nimport { getSlideDescription } from \"./getSlideDescription\";\nimport { getVisibleSlideIndexes } from \"./getVisibleSlideIndexes\";\n\nconst withBaseName = makePrefixer(\"saltCarouselTabList\");\n\n/**\n * Props for the CarouselTabList component.\n */\nexport interface CarouselTabListProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Render prop to enable customisation of tab button.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nexport interface CarouselTabRendererProps extends CarouselTabProps {\n  render?: CarouselTabListProps[\"render\"];\n}\n\nconst CarouselTabRenderer = forwardRef<\n  HTMLButtonElement,\n  CarouselTabRendererProps\n>((props, ref) => {\n  return renderProps(CarouselTab, { ...props, ref });\n});\n\nexport const CarouselTabList = forwardRef<HTMLDivElement, CarouselTabListProps>(\n  function CarouselTabList({ className, render, onKeyDown, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-controls\",\n      css: carouselControlsCss,\n      window: targetWindow,\n    });\n\n    const { emblaApi, setAriaVariant, setAnnouncementState } =\n      useCarouselContext();\n    const { selectedIndex, scrollSnaps } = useCarouselTab(emblaApi);\n\n    const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    const [focusedTabIndex, setFocusedTabIndex] = useState<number | null>(null);\n\n    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {\n      let newIndex = focusedTabIndex ?? selectedIndex;\n\n      if (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\") {\n        event.preventDefault();\n        const direction = event.key === \"ArrowLeft\" ? -1 : 1;\n        newIndex = Math.max(\n          0,\n          Math.min(newIndex + direction, scrollSnaps.length - 1),\n        );\n      } else if (event.key === \"Home\") {\n        event.preventDefault();\n        newIndex = 0;\n      } else if (event.key === \"End\") {\n        event.preventDefault();\n        newIndex = scrollSnaps.length - 1;\n      }\n\n      if (newIndex !== focusedTabIndex) {\n        buttonRefs.current[newIndex]?.focus();\n        setFocusedTabIndex(newIndex);\n      }\n      onKeyDown?.(event);\n    };\n\n    useEffect(() => {\n      setAriaVariant(\"tabpanel\");\n    }, [setAriaVariant]);\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(withBaseName(), className)}\n        onKeyDown={handleKeyDown}\n        ref={ref}\n        {...rest}\n      >\n        {scrollSnaps.map((_, scrollSnapIndex) => {\n          const visibleSlides = getVisibleSlideIndexes(\n            emblaApi,\n            scrollSnapIndex,\n          );\n          const startSlideNumber =\n            visibleSlides.length >= 1 ? visibleSlides[0] : 0;\n          const endSlideNumber =\n            visibleSlides.length > 1\n              ? visibleSlides[visibleSlides.length - 1]\n              : 0;\n          const slideNodes = emblaApi?.slideNodes();\n          const numberOfSlides = slideNodes?.length;\n\n          let ariaLabel: string;\n          if (endSlideNumber >= 1) {\n            ariaLabel = `Slide ${startSlideNumber} to ${endSlideNumber} of ${numberOfSlides}`;\n          } else {\n            const description = getSlideDescription(emblaApi, startSlideNumber);\n            ariaLabel = `${description}`;\n          }\n\n          const selected = selectedIndex === scrollSnapIndex;\n          const ariaControls = slideNodes?.length\n            ? slideNodes[startSlideNumber - 1].id\n            : undefined;\n\n          return (\n            <CarouselTabRenderer\n              key={`carouselTab-${scrollSnapIndex}}`}\n              ref={(element: HTMLButtonElement) => {\n                buttonRefs.current[scrollSnapIndex] = element;\n              }}\n              render={render}\n              role={\"tab\"}\n              selected={selected}\n              onBlur={() => {\n                setFocusedTabIndex(null);\n              }}\n              onFocus={() => {\n                setFocusedTabIndex(scrollSnapIndex);\n                setAnnouncementState(\"tab\");\n                emblaApi?.scrollTo(scrollSnapIndex);\n              }}\n              aria-label={ariaLabel}\n              aria-selected={selected}\n              tabIndex={selected && focusedTabIndex === null ? 0 : -1}\n              aria-controls={ariaControls}\n            />\n          );\n        })}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","renderProps","CarouselTab","CarouselTabList","useWindow","useComponentCssInjection","carouselControlsCss","useCarouselContext","useCarouselTab","useRef","useState","useEffect","jsx","clsx","getVisibleSlideIndexes","getSlideDescription"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA;AAgBvD,MAAM,mBAAA,GAAsBC,gBAAA,CAG1B,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,OAAOC,iBAAYC,uBAAA,EAAa,EAAE,GAAG,KAAA,EAAO,KAAK,CAAA;AACnD,CAAC,CAAA;AAEM,MAAM,eAAA,GAAkBF,gBAAA;AAAA,EAC7B,SAASG,iBAAgB,EAAE,SAAA,EAAW,QAAQ,SAAA,EAAW,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AACvE,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,wBAAA;AAAA,MACR,GAAA,EAAKC,iBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,cAAA,EAAgB,oBAAA,KAChCC,kCAAA,EAAmB;AACrB,IAAA,MAAM,EAAE,aAAA,EAAe,WAAA,EAAY,GAAIC,2BAAe,QAAQ,CAAA;AAE9D,IAAA,MAAM,UAAA,GAAaC,YAAA,CAAqC,EAAE,CAAA;AAE1D,IAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAIC,eAAwB,IAAI,CAAA;AAE1E,IAAA,MAAM,aAAA,GAAsD,CAAC,KAAA,KAAU;AA9D3E,MAAA,IAAA,EAAA;AA+DM,MAAA,IAAI,WAAW,eAAA,IAAmB,aAAA;AAElC,MAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,WAAA,IAAe,KAAA,CAAM,QAAQ,YAAA,EAAc;AAC3D,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,MAAM,SAAA,GAAY,KAAA,CAAM,GAAA,KAAQ,WAAA,GAAc,EAAA,GAAK,CAAA;AACnD,QAAA,QAAA,GAAW,IAAA,CAAK,GAAA;AAAA,UACd,CAAA;AAAA,UACA,KAAK,GAAA,CAAI,QAAA,GAAW,SAAA,EAAW,WAAA,CAAY,SAAS,CAAC;AAAA,SACvD;AAAA,MACF,CAAA,MAAA,IAAW,KAAA,CAAM,GAAA,KAAQ,MAAA,EAAQ;AAC/B,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,QAAA,GAAW,CAAA;AAAA,MACb,CAAA,MAAA,IAAW,KAAA,CAAM,GAAA,KAAQ,KAAA,EAAO;AAC9B,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,QAAA,GAAW,YAAY,MAAA,GAAS,CAAA;AAAA,MAClC;AAEA,MAAA,IAAI,aAAa,eAAA,EAAiB;AAChC,QAAA,CAAA,EAAA,GAAA,UAAA,CAAW,OAAA,CAAQ,QAAQ,CAAA,KAA3B,IAAA,GAAA,MAAA,GAAA,EAAA,CAA8B,KAAA,EAAA;AAC9B,QAAA,kBAAA,CAAmB,QAAQ,CAAA;AAAA,MAC7B;AACA,MAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,KAAA,CAAA;AAAA,IACd,CAAA;AAEA,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,cAAA,CAAe,UAAU,CAAA;AAAA,IAC3B,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,SAAA,EAAW,aAAA;AAAA,QACX,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,WAAA,CAAY,GAAA,CAAI,CAAC,CAAA,EAAG,eAAA,KAAoB;AACvC,UAAA,MAAM,aAAA,GAAgBC,6CAAA;AAAA,YACpB,QAAA;AAAA,YACA;AAAA,WACF;AACA,UAAA,MAAM,mBACJ,aAAA,CAAc,MAAA,IAAU,CAAA,GAAI,aAAA,CAAc,CAAC,CAAA,GAAI,CAAA;AACjD,UAAA,MAAM,cAAA,GACJ,cAAc,MAAA,GAAS,CAAA,GACnB,cAAc,aAAA,CAAc,MAAA,GAAS,CAAC,CAAA,GACtC,CAAA;AACN,UAAA,MAAM,aAAa,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,UAAA,EAAA;AAC7B,UAAA,MAAM,iBAAiB,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY,MAAA;AAEnC,UAAA,IAAI,SAAA;AACJ,UAAA,IAAI,kBAAkB,CAAA,EAAG;AACvB,YAAA,SAAA,GAAY,CAAA,MAAA,EAAS,gBAAgB,CAAA,IAAA,EAAO,cAAc,OAAO,cAAc,CAAA,CAAA;AAAA,UACjF,CAAA,MAAO;AACL,YAAA,MAAM,WAAA,GAAcC,uCAAA,CAAoB,QAAA,EAAU,gBAAgB,CAAA;AAClE,YAAA,SAAA,GAAY,GAAG,WAAW,CAAA,CAAA;AAAA,UAC5B;AAEA,UAAA,MAAM,WAAW,aAAA,KAAkB,eAAA;AACnC,UAAA,MAAM,gBAAe,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY,MAAA,IAC7B,WAAW,gBAAA,GAAmB,CAAC,EAAE,EAAA,GACjC,MAAA;AAEJ,UAAA,uBACEH,cAAA;AAAA,YAAC,mBAAA;AAAA,YAAA;AAAA,cAEC,GAAA,EAAK,CAAC,OAAA,KAA+B;AACnC,gBAAA,UAAA,CAAW,OAAA,CAAQ,eAAe,CAAA,GAAI,OAAA;AAAA,cACxC,CAAA;AAAA,cACA,MAAA;AAAA,cACA,IAAA,EAAM,KAAA;AAAA,cACN,QAAA;AAAA,cACA,QAAQ,MAAM;AACZ,gBAAA,kBAAA,CAAmB,IAAI,CAAA;AAAA,cACzB,CAAA;AAAA,cACA,SAAS,MAAM;AACb,gBAAA,kBAAA,CAAmB,eAAe,CAAA;AAClC,gBAAA,oBAAA,CAAqB,KAAK,CAAA;AAC1B,gBAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,QAAA,CAAS,eAAA,CAAA;AAAA,cACrB,CAAA;AAAA,cACA,YAAA,EAAY,SAAA;AAAA,cACZ,eAAA,EAAe,QAAA;AAAA,cACf,QAAA,EAAU,QAAA,IAAY,eAAA,KAAoB,IAAA,GAAO,CAAA,GAAI,EAAA;AAAA,cACrD,eAAA,EAAe;AAAA,aAAA;AAAA,YAlBV,eAAe,eAAe,CAAA,CAAA;AAAA,WAmBrC;AAAA,QAEJ,CAAC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/createCustomSettle.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const settlePixelThreshold = 10;
+const settlePixelThreshold = 25;
 const createCustomSettle = (callback) => function fireCustomSettle(emblaApi) {
   const { dragHandler, location, target } = emblaApi.internalEngine();
   if (dragHandler.pointerDown()) return;

package/dist-cjs/createCustomSettle.js.map

@@ -1 +1 @@
-{"version":3,"file":"createCustomSettle.js","sources":["../src/createCustomSettle.ts"],"sourcesContent":["import type { EmblaCarouselType } from \"embla-carousel\";\n\nconst settlePixelThreshold = 10;\n\nexport type SettleCallback = (emblaApi: EmblaCarouselType) => void;\nexport type CreateCustomSettle = (callback: SettleCallback) => SettleCallback;\n\nexport const createCustomSettle: CreateCustomSettle = (callback) =>\n  function fireCustomSettle(emblaApi: EmblaCarouselType) {\n    const { dragHandler, location, target } = emblaApi.internalEngine();\n    if (dragHandler.pointerDown()) return;\n    const displacement = target.get() - location.get();\n    if (Math.abs(displacement) < settlePixelThreshold) {\n      callback(emblaApi);\n    }\n  };\n"],"names":[],"mappings":";;AAEA,MAAM,oBAAuB,GAAA,EAAA;AAKtB,MAAM,kBAAyC,GAAA,CAAC,QACrD,KAAA,SAAS,iBAAiB,QAA6B,EAAA;AACrD,EAAA,MAAM,EAAE,WAAa,EAAA,QAAA,EAAU,MAAO,EAAA,GAAI,SAAS,cAAe,EAAA;AAClE,EAAI,IAAA,WAAA,CAAY,aAAe,EAAA;AAC/B,EAAA,MAAM,YAAe,GAAA,MAAA,CAAO,GAAI,EAAA,GAAI,SAAS,GAAI,EAAA;AACjD,EAAA,IAAI,IAAK,CAAA,GAAA,CAAI,YAAY,CAAA,GAAI,oBAAsB,EAAA;AACjD,IAAA,QAAA,CAAS,QAAQ,CAAA;AAAA;AAErB;;;;"}
+{"version":3,"file":"createCustomSettle.js","sources":["../src/createCustomSettle.ts"],"sourcesContent":["import type { EmblaCarouselType } from \"embla-carousel\";\n\nconst settlePixelThreshold = 25;\n\nexport type SettleCallback = (emblaApi: EmblaCarouselType) => void;\nexport type CreateCustomSettle = (callback: SettleCallback) => SettleCallback;\n\nexport const createCustomSettle: CreateCustomSettle = (callback) =>\n  function fireCustomSettle(emblaApi: EmblaCarouselType) {\n    const { dragHandler, location, target } = emblaApi.internalEngine();\n    if (dragHandler.pointerDown()) return;\n    const displacement = target.get() - location.get();\n    if (Math.abs(displacement) < settlePixelThreshold) {\n      callback(emblaApi);\n    }\n  };\n"],"names":[],"mappings":";;AAEA,MAAM,oBAAA,GAAuB,EAAA;AAKtB,MAAM,kBAAA,GAAyC,CAAC,QAAA,KACrD,SAAS,iBAAiB,QAAA,EAA6B;AACrD,EAAA,MAAM,EAAE,WAAA,EAAa,QAAA,EAAU,MAAA,EAAO,GAAI,SAAS,cAAA,EAAe;AAClE,EAAA,IAAI,WAAA,CAAY,aAAY,EAAG;AAC/B,EAAA,MAAM,YAAA,GAAe,MAAA,CAAO,GAAA,EAAI,GAAI,SAAS,GAAA,EAAI;AACjD,EAAA,IAAI,IAAA,CAAK,GAAA,CAAI,YAAY,CAAA,GAAI,oBAAA,EAAsB;AACjD,IAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,EACnB;AACF;;;;"}

package/dist-cjs/getSlideDescription.js

@@ -0,0 +1,32 @@
+'use strict';
+
+const getSlideDescription = (emblaApi, slideNumber) => {
+  if (!emblaApi || slideNumber < 1) {
+    return "";
+  }
+  const slideElement = emblaApi.slideNodes()[slideNumber - 1];
+  const { ownerDocument } = emblaApi.internalEngine();
+  const resolveAriaLabelledBy = (element) => {
+    if (!element) return null;
+    const labelledById = element.getAttribute("aria-labelledby");
+    let description2 = null;
+    if (labelledById) {
+      const labelledByElement = ownerDocument.getElementById(labelledById);
+      if (labelledByElement) {
+        description2 = resolveAriaLabelledBy(labelledByElement);
+      }
+    }
+    if (!description2) {
+      description2 = element.getAttribute("aria-label") || element.textContent || null;
+    }
+    return description2;
+  };
+  let description = resolveAriaLabelledBy(slideElement);
+  if (!description) {
+    description = (slideElement == null ? void 0 : slideElement.getAttribute("aria-label")) ?? null;
+  }
+  return description || "";
+};
+
+exports.getSlideDescription = getSlideDescription;
+//# sourceMappingURL=getSlideDescription.js.map

package/dist-cjs/getSlideDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getSlideDescription.js","sources":["../src/getSlideDescription.ts"],"sourcesContent":["import type { EmblaCarouselType } from \"embla-carousel\";\n\n/** Get a description of the slide.\n * @param emblaApi\n * @param slideIndex\n * @returns A slide description if defined or an empty string\n */\nexport const getSlideDescription = (\n  emblaApi: EmblaCarouselType | undefined,\n  slideNumber: number,\n): string => {\n  if (!emblaApi || slideNumber < 1) {\n    return \"\";\n  }\n\n  const slideElement = emblaApi.slideNodes()[slideNumber - 1];\n  const { ownerDocument } = emblaApi.internalEngine();\n\n  const resolveAriaLabelledBy = (element: Element | null): string | null => {\n    if (!element) return null;\n\n    const labelledById = element.getAttribute(\"aria-labelledby\");\n    let description = null;\n\n    if (labelledById) {\n      const labelledByElement = ownerDocument.getElementById(labelledById);\n      if (labelledByElement) {\n        // Recursively resolve aria-labelledby\n        description = resolveAriaLabelledBy(labelledByElement);\n      }\n    }\n\n    // If no description found, use aria-label or text content\n    if (!description) {\n      description =\n        element.getAttribute(\"aria-label\") || element.textContent || null;\n    }\n\n    return description;\n  };\n\n  let description = resolveAriaLabelledBy(slideElement);\n\n  if (!description) {\n    description = slideElement?.getAttribute(\"aria-label\") ?? null;\n  }\n\n  return description || \"\";\n};\n"],"names":["description"],"mappings":";;AAOO,MAAM,mBAAA,GAAsB,CACjC,QAAA,EACA,WAAA,KACW;AACX,EAAA,IAAI,CAAC,QAAA,IAAY,WAAA,GAAc,CAAA,EAAG;AAChC,IAAA,OAAO,EAAA;AAAA,EACT;AAEA,EAAA,MAAM,YAAA,GAAe,QAAA,CAAS,UAAA,EAAW,CAAE,cAAc,CAAC,CAAA;AAC1D,EAAA,MAAM,EAAE,aAAA,EAAc,GAAI,QAAA,CAAS,cAAA,EAAe;AAElD,EAAA,MAAM,qBAAA,GAAwB,CAAC,OAAA,KAA2C;AACxE,IAAA,IAAI,CAAC,SAAS,OAAO,IAAA;AAErB,IAAA,MAAM,YAAA,GAAe,OAAA,CAAQ,YAAA,CAAa,iBAAiB,CAAA;AAC3D,IAAA,IAAIA,YAAAA,GAAc,IAAA;AAElB,IAAA,IAAI,YAAA,EAAc;AAChB,MAAA,MAAM,iBAAA,GAAoB,aAAA,CAAc,cAAA,CAAe,YAAY,CAAA;AACnE,MAAA,IAAI,iBAAA,EAAmB;AAErB,QAAAA,YAAAA,GAAc,sBAAsB,iBAAiB,CAAA;AAAA,MACvD;AAAA,IACF;AAGA,IAAA,IAAI,CAACA,YAAAA,EAAa;AAChB,MAAAA,eACE,OAAA,CAAQ,YAAA,CAAa,YAAY,CAAA,IAAK,QAAQ,WAAA,IAAe,IAAA;AAAA,IACjE;AAEA,IAAA,OAAOA,YAAAA;AAAA,EACT,CAAA;AAEA,EAAA,IAAI,WAAA,GAAc,sBAAsB,YAAY,CAAA;AAEpD,EAAA,IAAI,CAAC,WAAA,EAAa;AAChB,IAAA,WAAA,GAAA,CAAc,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,aAAa,YAAA,CAAA,KAAiB,IAAA;AAAA,EAC5D;AAEA,EAAA,OAAO,WAAA,IAAe,EAAA;AACxB;;;;"}

package/dist-cjs/getVisibleSlideDescription.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var getSlideDescription = require('./getSlideDescription.js');
+var getVisibleSlideIndexes = require('./getVisibleSlideIndexes.js');
+
+const getVisibleSlideDescription = (emblaApi, scrollSnapIndex) => {
+  if (!emblaApi) {
+    return "";
+  }
+  const visibleSlideIndexes = getVisibleSlideIndexes.getVisibleSlideIndexes(emblaApi, scrollSnapIndex);
+  const numberOfSlides = (emblaApi == null ? void 0 : emblaApi.slideNodes().length) ?? 0;
+  if (numberOfSlides < 1) {
+    return "";
+  }
+  if (visibleSlideIndexes.length > 1) {
+    return `Slide ${visibleSlideIndexes[0]} to ${visibleSlideIndexes[visibleSlideIndexes.length - 1]} of ${numberOfSlides}`;
+  }
+  const visibleSlideIndex = visibleSlideIndexes[0];
+  const description = getSlideDescription.getSlideDescription(emblaApi, visibleSlideIndex);
+  const slide = emblaApi == null ? void 0 : emblaApi.slideNodes()[visibleSlideIndex - 1];
+  const slideRoleDescription = (slide == null ? void 0 : slide.ariaRoleDescription) ?? "slide";
+  return `${description}, ${slideRoleDescription}, ${visibleSlideIndex} of ${numberOfSlides}`;
+};
+
+exports.getVisibleSlideDescription = getVisibleSlideDescription;
+//# sourceMappingURL=getVisibleSlideDescription.js.map

package/dist-cjs/getVisibleSlideDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getVisibleSlideDescription.js","sources":["../src/getVisibleSlideDescription.ts"],"sourcesContent":["import type { EmblaCarouselType } from \"embla-carousel\";\nimport { getSlideDescription } from \"./getSlideDescription\";\nimport { getVisibleSlideIndexes } from \"./getVisibleSlideIndexes\";\n\n/** Get a description of the visible slide(s).\n * @param emblaApi\n * @param slideIndex\n * @returns An array of descriptions for the visible slides\n */\nexport const getVisibleSlideDescription = (\n  emblaApi: EmblaCarouselType | undefined,\n  scrollSnapIndex: number,\n): string => {\n  if (!emblaApi) {\n    return \"\";\n  }\n\n  const visibleSlideIndexes = getVisibleSlideIndexes(emblaApi, scrollSnapIndex);\n  const numberOfSlides = emblaApi?.slideNodes().length ?? 0;\n\n  if (numberOfSlides < 1) {\n    return \"\";\n  }\n\n  if (visibleSlideIndexes.length > 1) {\n    return `Slide ${visibleSlideIndexes[0]} to ${visibleSlideIndexes[visibleSlideIndexes.length - 1]} of ${numberOfSlides}`;\n  }\n  const visibleSlideIndex = visibleSlideIndexes[0];\n  const description = getSlideDescription(emblaApi, visibleSlideIndex);\n  const slide = emblaApi?.slideNodes()[visibleSlideIndex - 1];\n  const slideRoleDescription = slide?.ariaRoleDescription ?? \"slide\";\n  return `${description}, ${slideRoleDescription}, ${visibleSlideIndex} of ${numberOfSlides}`;\n};\n"],"names":["getVisibleSlideIndexes","getSlideDescription"],"mappings":";;;;;AASO,MAAM,0BAAA,GAA6B,CACxC,QAAA,EACA,eAAA,KACW;AACX,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,OAAO,EAAA;AAAA,EACT;AAEA,EAAA,MAAM,mBAAA,GAAsBA,6CAAA,CAAuB,QAAA,EAAU,eAAe,CAAA;AAC5E,EAAA,MAAM,cAAA,GAAA,CAAiB,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,UAAA,EAAA,CAAa,MAAA,KAAU,CAAA;AAExD,EAAA,IAAI,iBAAiB,CAAA,EAAG;AACtB,IAAA,OAAO,EAAA;AAAA,EACT;AAEA,EAAA,IAAI,mBAAA,CAAoB,SAAS,CAAA,EAAG;AAClC,IAAA,OAAO,CAAA,MAAA,EAAS,mBAAA,CAAoB,CAAC,CAAC,CAAA,IAAA,EAAO,mBAAA,CAAoB,mBAAA,CAAoB,MAAA,GAAS,CAAC,CAAC,CAAA,IAAA,EAAO,cAAc,CAAA,CAAA;AAAA,EACvH;AACA,EAAA,MAAM,iBAAA,GAAoB,oBAAoB,CAAC,CAAA;AAC/C,EAAA,MAAM,WAAA,GAAcC,uCAAA,CAAoB,QAAA,EAAU,iBAAiB,CAAA;AACnE,EAAA,MAAM,KAAA,GAAQ,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,UAAA,EAAA,CAAa,iBAAA,GAAoB,CAAA,CAAA;AACzD,EAAA,MAAM,oBAAA,GAAA,CAAuB,+BAAO,mBAAA,KAAuB,OAAA;AAC3D,EAAA,OAAO,GAAG,WAAW,CAAA,EAAA,EAAK,oBAAoB,CAAA,EAAA,EAAK,iBAAiB,OAAO,cAAc,CAAA,CAAA;AAC3F;;;;"}

package/dist-cjs/getVisibleSlideIndexes.js

@@ -0,0 +1,33 @@
+'use strict';
+
+const getSlideNumberRange = (startSlideNumber, endSlideNumber) => {
+  const slideNumbers = [];
+  for (let i = startSlideNumber; i <= endSlideNumber; i++) {
+    slideNumbers.push(i);
+  }
+  return slideNumbers;
+};
+const getVisibleSlideIndexes = (emblaApi, scrollSnapIndex) => {
+  if (!emblaApi) {
+    return [];
+  }
+  const numberOfSlides = (emblaApi == null ? void 0 : emblaApi.slideNodes().length) ?? 0;
+  const scrollSnaps = (emblaApi == null ? void 0 : emblaApi.scrollSnapList()) ?? [];
+  const slidesPerTransition = numberOfSlides ? Math.ceil(numberOfSlides / scrollSnaps.length) : 0;
+  const startSlideNumber = Math.min(
+    scrollSnapIndex * slidesPerTransition + 1,
+    numberOfSlides - (slidesPerTransition - 1)
+  );
+  const endSlideNumber = Math.min(
+    startSlideNumber + slidesPerTransition - 1,
+    numberOfSlides
+  );
+  if (startSlideNumber === endSlideNumber) {
+    return [startSlideNumber];
+  }
+  return getSlideNumberRange(startSlideNumber, endSlideNumber);
+};
+
+exports.getSlideNumberRange = getSlideNumberRange;
+exports.getVisibleSlideIndexes = getVisibleSlideIndexes;
+//# sourceMappingURL=getVisibleSlideIndexes.js.map

package/dist-cjs/getVisibleSlideIndexes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getVisibleSlideIndexes.js","sources":["../src/getVisibleSlideIndexes.ts"],"sourcesContent":["import type { EmblaCarouselType } from \"embla-carousel\";\n\nexport const getSlideNumberRange = (\n  startSlideNumber: number,\n  endSlideNumber: number,\n): number[] => {\n  const slideNumbers: number[] = [];\n  for (let i = startSlideNumber; i <= endSlideNumber; i++) {\n    slideNumbers.push(i);\n  }\n  return slideNumbers;\n};\n\n/** Get the visible slide indexes\n * @param emblaApi\n * @param scrollSnap\n * @returns An array of visible slide indexes\n */\nexport const getVisibleSlideIndexes = (\n  emblaApi: EmblaCarouselType | undefined,\n  scrollSnapIndex: number,\n): number[] => {\n  if (!emblaApi) {\n    return [];\n  }\n\n  const numberOfSlides = emblaApi?.slideNodes().length ?? 0;\n  const scrollSnaps = emblaApi?.scrollSnapList() ?? [];\n  const slidesPerTransition = numberOfSlides\n    ? Math.ceil(numberOfSlides / scrollSnaps.length)\n    : 0;\n  const startSlideNumber = Math.min(\n    scrollSnapIndex * slidesPerTransition + 1,\n    numberOfSlides - (slidesPerTransition - 1),\n  );\n  const endSlideNumber = Math.min(\n    startSlideNumber + slidesPerTransition - 1,\n    numberOfSlides,\n  );\n\n  if (startSlideNumber === endSlideNumber) {\n    return [startSlideNumber];\n  }\n  return getSlideNumberRange(startSlideNumber, endSlideNumber);\n};\n"],"names":[],"mappings":";;AAEO,MAAM,mBAAA,GAAsB,CACjC,gBAAA,EACA,cAAA,KACa;AACb,EAAA,MAAM,eAAyB,EAAC;AAChC,EAAA,KAAA,IAAS,CAAA,GAAI,gBAAA,EAAkB,CAAA,IAAK,cAAA,EAAgB,CAAA,EAAA,EAAK;AACvD,IAAA,YAAA,CAAa,KAAK,CAAC,CAAA;AAAA,EACrB;AACA,EAAA,OAAO,YAAA;AACT;AAOO,MAAM,sBAAA,GAAyB,CACpC,QAAA,EACA,eAAA,KACa;AACb,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,OAAO,EAAC;AAAA,EACV;AAEA,EAAA,MAAM,cAAA,GAAA,CAAiB,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,UAAA,EAAA,CAAa,MAAA,KAAU,CAAA;AACxD,EAAA,MAAM,WAAA,GAAA,CAAc,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,cAAA,EAAA,KAAoB,EAAC;AACnD,EAAA,MAAM,sBAAsB,cAAA,GACxB,IAAA,CAAK,KAAK,cAAA,GAAiB,WAAA,CAAY,MAAM,CAAA,GAC7C,CAAA;AACJ,EAAA,MAAM,mBAAmB,IAAA,CAAK,GAAA;AAAA,IAC5B,kBAAkB,mBAAA,GAAsB,CAAA;AAAA,IACxC,kBAAkB,mBAAA,GAAsB,CAAA;AAAA,GAC1C;AACA,EAAA,MAAM,iBAAiB,IAAA,CAAK,GAAA;AAAA,IAC1B,mBAAmB,mBAAA,GAAsB,CAAA;AAAA,IACzC;AAAA,GACF;AAEA,EAAA,IAAI,qBAAqB,cAAA,EAAgB;AACvC,IAAA,OAAO,CAAC,gBAAgB,CAAA;AAAA,EAC1B;AACA,EAAA,OAAO,mBAAA,CAAoB,kBAAkB,cAAc,CAAA;AAC7D;;;;;"}

package/dist-cjs/index.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var Carousel = require('./Carousel.js');
-var CarouselAnnouncementPlugin = require('./CarouselAnnouncementPlugin.js');
 var CarouselAutoplayIndicator = require('./CarouselAutoplayIndicator.js');
 var CarouselCard = require('./CarouselCard.js');
 var CarouselContext = require('./CarouselContext.js');
@@ -15,8 +14,6 @@ var CarouselTabList = require('./CarouselTabList.js');
 
 
 exports.Carousel = Carousel.Carousel;
-exports.CarouselAnnouncement = CarouselAnnouncementPlugin.CarouselAnnouncement;
-exports.getSlideLabel = CarouselAnnouncementPlugin.getSlideLabel;
 exports.CarouselAutoplayIndicator = CarouselAutoplayIndicator.CarouselAutoplayIndicator;
 exports.CarouselCard = CarouselCard.CarouselCard;
 exports.CarouselContext = CarouselContext.CarouselContext;

package/dist-cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-cjs/usePrevNextButtons.js

@@ -6,11 +6,13 @@ var CarouselContext = require('./CarouselContext.js');
 const usePrevNextButtons = () => {
   const [prevBtnDisabled, setPrevBtnDisabled] = react.useState(true);
   const [nextBtnDisabled, setNextBtnDisabled] = react.useState(true);
-  const { emblaApi } = CarouselContext.useCarouselContext();
+  const { emblaApi, setAnnouncementState } = CarouselContext.useCarouselContext();
   const handlePrevButtonClick = () => {
+    setAnnouncementState("navigation");
     emblaApi == null ? void 0 : emblaApi.scrollPrev();
   };
   const handleNextButtonClick = () => {
+    setAnnouncementState("navigation");
     emblaApi == null ? void 0 : emblaApi.scrollNext();
   };
   react.useEffect(() => {

package/dist-cjs/usePrevNextButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePrevNextButtons.js","sources":["../src/usePrevNextButtons.tsx"],"sourcesContent":["import type { EmblaCarouselType } from \"embla-carousel\";\nimport { useEffect, useState } from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\n\ntype UsePrevNextButtonsType = {\n  /**\n   * Indicates whether the previous button is disabled.\n   */\n  prevBtnDisabled: boolean;\n  /**\n   * Indicates whether the next button is disabled.\n   */\n  nextBtnDisabled: boolean;\n  /**\n   * Handles the click event for the previous button.\n   */\n  onPrevButtonClick: () => void;\n  /**\n   * Handles the click event for the next button.\n   */\n  onNextButtonClick: () => void;\n};\n\nexport const usePrevNextButtons = (): UsePrevNextButtonsType => {\n  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);\n  const [nextBtnDisabled, setNextBtnDisabled] = useState(true);\n\n  const { emblaApi } = useCarouselContext();\n\n  const handlePrevButtonClick = () => {\n    emblaApi?.scrollPrev();\n  };\n\n  const handleNextButtonClick = () => {\n    emblaApi?.scrollNext();\n  };\n\n  useEffect(() => {\n    const handleSelect = (emblaApi: EmblaCarouselType) => {\n      setPrevBtnDisabled(!emblaApi.canScrollPrev());\n      setNextBtnDisabled(!emblaApi.canScrollNext());\n    };\n\n    if (!emblaApi) {\n      return;\n    }\n    handleSelect(emblaApi);\n    emblaApi\n      .on(\"init\", handleSelect)\n      .on(\"reInit\", handleSelect)\n      .on(\"select\", handleSelect);\n    // Cleanup listener on component unmount\n    return () => {\n      emblaApi\n        .off(\"init\", handleSelect)\n        .off(\"reInit\", handleSelect)\n        .off(\"select\", handleSelect);\n    };\n  }, [emblaApi]);\n\n  return {\n    prevBtnDisabled,\n    nextBtnDisabled,\n    onPrevButtonClick: handlePrevButtonClick,\n    onNextButtonClick: handleNextButtonClick,\n  };\n};\n"],"names":["useState","useCarouselContext","useEffect","emblaApi"],"mappings":";;;;;AAuBO,MAAM,qBAAqB,MAA8B;AAC9D,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAIA,eAAS,IAAI,CAAA;AAC3D,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAIA,eAAS,IAAI,CAAA;AAE3D,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,kCAAmB,EAAA;AAExC,EAAA,MAAM,wBAAwB,MAAM;AAClC,IAAU,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,UAAA,EAAA;AAAA,GACZ;AAEA,EAAA,MAAM,wBAAwB,MAAM;AAClC,IAAU,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,UAAA,EAAA;AAAA,GACZ;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAM,MAAA,YAAA,GAAe,CAACC,SAAgC,KAAA;AACpD,MAAmB,kBAAA,CAAA,CAACA,SAAS,CAAA,aAAA,EAAe,CAAA;AAC5C,MAAmB,kBAAA,CAAA,CAACA,SAAS,CAAA,aAAA,EAAe,CAAA;AAAA,KAC9C;AAEA,IAAA,IAAI,CAAC,QAAU,EAAA;AACb,MAAA;AAAA;AAEF,IAAA,YAAA,CAAa,QAAQ,CAAA;AACrB,IACG,QAAA,CAAA,EAAA,CAAG,MAAQ,EAAA,YAAY,CACvB,CAAA,EAAA,CAAG,UAAU,YAAY,CAAA,CACzB,EAAG,CAAA,QAAA,EAAU,YAAY,CAAA;AAE5B,IAAA,OAAO,MAAM;AACX,MACG,QAAA,CAAA,GAAA,CAAI,MAAQ,EAAA,YAAY,CACxB,CAAA,GAAA,CAAI,UAAU,YAAY,CAAA,CAC1B,GAAI,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA,KAC/B;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAO,OAAA;AAAA,IACL,eAAA;AAAA,IACA,eAAA;AAAA,IACA,iBAAmB,EAAA,qBAAA;AAAA,IACnB,iBAAmB,EAAA;AAAA,GACrB;AACF;;;;"}
+{"version":3,"file":"usePrevNextButtons.js","sources":["../src/usePrevNextButtons.tsx"],"sourcesContent":["import type { EmblaCarouselType } from \"embla-carousel\";\nimport { useEffect, useState } from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\n\ntype UsePrevNextButtonsType = {\n  /**\n   * Indicates whether the previous button is disabled.\n   */\n  prevBtnDisabled: boolean;\n  /**\n   * Indicates whether the next button is disabled.\n   */\n  nextBtnDisabled: boolean;\n  /**\n   * Handles the click event for the previous button.\n   */\n  onPrevButtonClick: () => void;\n  /**\n   * Handles the click event for the next button.\n   */\n  onNextButtonClick: () => void;\n};\n\nexport const usePrevNextButtons = (): UsePrevNextButtonsType => {\n  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);\n  const [nextBtnDisabled, setNextBtnDisabled] = useState(true);\n\n  const { emblaApi, setAnnouncementState } = useCarouselContext();\n\n  const handlePrevButtonClick = () => {\n    setAnnouncementState(\"navigation\");\n    emblaApi?.scrollPrev();\n  };\n\n  const handleNextButtonClick = () => {\n    setAnnouncementState(\"navigation\");\n    emblaApi?.scrollNext();\n  };\n\n  useEffect(() => {\n    const handleSelect = (emblaApi: EmblaCarouselType) => {\n      setPrevBtnDisabled(!emblaApi.canScrollPrev());\n      setNextBtnDisabled(!emblaApi.canScrollNext());\n    };\n\n    if (!emblaApi) {\n      return;\n    }\n    handleSelect(emblaApi);\n    emblaApi\n      .on(\"init\", handleSelect)\n      .on(\"reInit\", handleSelect)\n      .on(\"select\", handleSelect);\n    // Cleanup listener on component unmount\n    return () => {\n      emblaApi\n        .off(\"init\", handleSelect)\n        .off(\"reInit\", handleSelect)\n        .off(\"select\", handleSelect);\n    };\n  }, [emblaApi]);\n\n  return {\n    prevBtnDisabled,\n    nextBtnDisabled,\n    onPrevButtonClick: handlePrevButtonClick,\n    onNextButtonClick: handleNextButtonClick,\n  };\n};\n"],"names":["useState","useCarouselContext","useEffect","emblaApi"],"mappings":";;;;;AAuBO,MAAM,qBAAqB,MAA8B;AAC9D,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAIA,eAAS,IAAI,CAAA;AAC3D,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAIA,eAAS,IAAI,CAAA;AAE3D,EAAA,MAAM,EAAE,QAAA,EAAU,oBAAA,EAAqB,GAAIC,kCAAA,EAAmB;AAE9D,EAAA,MAAM,wBAAwB,MAAM;AAClC,IAAA,oBAAA,CAAqB,YAAY,CAAA;AACjC,IAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,UAAA,EAAA;AAAA,EACZ,CAAA;AAEA,EAAA,MAAM,wBAAwB,MAAM;AAClC,IAAA,oBAAA,CAAqB,YAAY,CAAA;AACjC,IAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,UAAA,EAAA;AAAA,EACZ,CAAA;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,YAAA,GAAe,CAACC,SAAAA,KAAgC;AACpD,MAAA,kBAAA,CAAmB,CAACA,SAAAA,CAAS,aAAA,EAAe,CAAA;AAC5C,MAAA,kBAAA,CAAmB,CAACA,SAAAA,CAAS,aAAA,EAAe,CAAA;AAAA,IAC9C,CAAA;AAEA,IAAA,IAAI,CAAC,QAAA,EAAU;AACb,MAAA;AAAA,IACF;AACA,IAAA,YAAA,CAAa,QAAQ,CAAA;AACrB,IAAA,QAAA,CACG,EAAA,CAAG,MAAA,EAAQ,YAAY,CAAA,CACvB,EAAA,CAAG,UAAU,YAAY,CAAA,CACzB,EAAA,CAAG,QAAA,EAAU,YAAY,CAAA;AAE5B,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CACG,GAAA,CAAI,MAAA,EAAQ,YAAY,CAAA,CACxB,GAAA,CAAI,UAAU,YAAY,CAAA,CAC1B,GAAA,CAAI,QAAA,EAAU,YAAY,CAAA;AAAA,IAC/B,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,OAAO;AAAA,IACL,eAAA;AAAA,IACA,eAAA;AAAA,IACA,iBAAA,EAAmB,qBAAA;AAAA,IACnB,iBAAA,EAAmB;AAAA,GACrB;AACF;;;;"}

package/dist-es/Carousel.js

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
-import { makePrefixer } from '@salt-ds/core';
+import { makePrefixer, useId } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
 import useEmblaCarousel from 'embla-carousel-react';
-import { forwardRef, useEffect } from 'react';
+import { forwardRef, useEffect, useState } from 'react';
 import css_248z from './Carousel.css.js';
 import { CarouselContext } from './CarouselContext.js';
 
@@ -13,9 +13,11 @@ const Carousel = forwardRef(
   function Carousel2({
     children,
     className,
+    disableSlideAnnouncements,
     emblaOptions = {},
     emblaPlugins = [],
     getEmblaApi,
+    id,
     ...rest
   }, ref) {
     const targetWindow = useWindow();
@@ -27,23 +29,42 @@ const Carousel = forwardRef(
     const [emblaRef, emblaApi] = useEmblaCarousel(emblaOptions, [
       ...emblaPlugins
     ]);
+    const carouselId = useId(id);
     useEffect(() => {
       if (emblaApi) {
         getEmblaApi == null ? void 0 : getEmblaApi(emblaApi);
       }
       return void 0;
     }, [emblaApi]);
-    return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: { emblaApi, emblaRef }, children: /* @__PURE__ */ jsx(
-      "section",
+    const [ariaVariant, setAriaVariant] = useState("group");
+    const [announcementState, setAnnouncementState] = useState(void 0);
+    return /* @__PURE__ */ jsx(
+      CarouselContext.Provider,
       {
-        "aria-roledescription": "carousel",
-        role: "region",
-        className: clsx(withBaseName(), className),
-        ref,
-        ...rest,
-        children
+        value: {
+          ariaVariant,
+          disableSlideAnnouncements,
+          emblaApi,
+          emblaRef,
+          setAriaVariant,
+          announcementState,
+          setAnnouncementState,
+          carouselId
+        },
+        children: /* @__PURE__ */ jsx(
+          "section",
+          {
+            "aria-roledescription": "carousel",
+            role: "region",
+            className: clsx(withBaseName(), className),
+            ref,
+            ...rest,
+            children
+          },
+          `carousel-${ariaVariant}}`
+        )
       }
-    ) });
+    );
   }
 );
 

package/dist-es/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":["Carousel","carouselCss"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AA6BzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,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,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAC,QAAA;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,IAAA,SAAA,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,uBAAA,GAAA,CAAC,gBAAgB,QAAhB,EAAA,EAAyB,OAAO,EAAE,QAAA,EAAU,UAC3C,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,sBAAqB,EAAA,UAAA;AAAA,QACrB,IAAK,EAAA,QAAA;AAAA,QACL,SAAW,EAAA,IAAA,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":["Carousel","carouselCss"],"mappings":";;;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAmCzC,MAAM,QAAA,GAAW,UAAA;AAAA,EACtB,SAASA,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,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,eAAA;AAAA,MACR,GAAA,EAAKC,QAAA;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,GAAa,MAAM,EAAE,CAAA;AAE3B,IAAA,SAAA,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,GAChC,SAA8B,OAAO,CAAA;AACvC,IAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,SAEhD,MAAS,CAAA;AAEX,IAAA,uBACE,GAAA;AAAA,MAAC,eAAA,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,kBAAA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YAEC,sBAAA,EAAqB,UAAA;AAAA,YACrB,IAAA,EAAK,QAAA;AAAA,YACL,SAAA,EAAW,IAAA,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-es/CarouselAutoplayIndicator.css.js

@@ -1,4 +1,4 @@
-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";
 
 export { css_248z as default };
 //# sourceMappingURL=CarouselAutoplayIndicator.css.js.map

package/dist-es/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":["carouselAutoplayIndicator"],"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":["carouselAutoplayIndicator"],"mappings":";;;;;;;;;AAkCA,MAAM,YAAA,GAAe,aAAa,+BAA+B,CAAA;AAEjE,MAAM,yBAAA,GAA4B;AAAA,EAChC,IAAA,EAAM,EAAE,IAAA,EAAM,EAAA,EAAI,aAAa,CAAA,EAAE;AAAA,EACjC,MAAA,EAAQ,EAAE,IAAA,EAAM,EAAA,EAAI,aAAa,CAAA,EAAE;AAAA,EACnC,GAAA,EAAK,EAAE,IAAA,EAAM,EAAA,EAAI,aAAa,CAAA,EAAE;AAAA,EAChC,KAAA,EAAO,EAAE,IAAA,EAAM,EAAA,EAAI,aAAa,CAAA;AAClC,CAAA;AAEO,MAAM,yBAAA,GAA4B,UAAA;AAAA,EAIvC,CACE;AAAA,IACE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kCAAA;AAAA,MACR,GAAA,EAAKA,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,MAAA,GAAS,OAAyB,IAAI,CAAA;AAC5C,IAAA,MAAM,gBAAA,GAAmB,OAAsB,IAAI,CAAA;AAEnD,IAAA,MAAM,UAAU,UAAA,EAAW;AAC3B,IAAA,MAAM,EAAE,IAAA,EAAM,WAAA,EAAY,GAAI,0BAA0B,OAAO,CAAA;AAC/D,IAAA,MAAM,MAAA,GAAA,CAAU,OAAO,WAAA,IAAe,CAAA;AACtC,IAAA,MAAM,aAAA,GAAgB,CAAA,GAAI,IAAA,CAAK,EAAA,GAAK,MAAA;AAEpC,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,OAAO,OAAA,EAAS;AAClB,QAAA,gBAAA,CAAiB,OAAA,GAAU,sBAAsB,MAAM;AACrD,UAAA,IAAI,CAAC,OAAO,OAAA,EAAS;AACnB,YAAA;AAAA,UACF;AACA,UAAA,MAAA,CAAO,OAAA,CAAQ,MAAM,SAAA,GAAY,MAAA;AACjC,UAAA,MAAA,CAAO,OAAA,CAAQ,KAAA,CAAM,gBAAA,GAAmB,CAAA,EAAG,aAAa,CAAA,CAAA;AACxD,UAAA,gBAAA,CAAiB,OAAA,GAAU,sBAAsB,MAAM;AACrD,YAAA,IAAI,CAAC,OAAO,OAAA,EAAS;AACnB,cAAA;AAAA,YACF;AACA,YAAA,MAAA,CAAO,OAAA,CAAQ,KAAA,CAAM,SAAA,GAAY,CAAA,mBAAA,EAAsB,QAAQ,CAAA,SAAA,CAAA;AAC/D,YAAA,MAAA,CAAO,QAAQ,KAAA,CAAM,kBAAA,GAAqB,QAAA,GACtC,QAAA,GACA,YACE,SAAA,GACA,QAAA;AAAA,UACR,CAAC,CAAA;AAAA,QACH,CAAC,CAAA;AAAA,MACH;AAEA,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,gBAAA,CAAiB,YAAY,IAAA,EAAM;AACrC,UAAA,oBAAA,CAAqB,iBAAiB,OAAO,CAAA;AAC7C,UAAA,gBAAA,CAAiB,OAAA,GAAU,IAAA;AAAA,QAC7B;AAAA,MACF,CAAA;AAAA,IACF,GAAG,CAAC,aAAA,EAAe,UAAU,UAAA,EAAY,SAAA,EAAW,QAAQ,CAAC,CAAA;AAE7D,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,KAAA,EACE;AAAA,UACE,KAAA,EAAO,IAAA;AAAA,UACP,MAAA,EAAQ,IAAA;AAAA,UACR,8BAAA,EAAgC;AAAA,SAClC;AAAA,QAEF,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,4BAAA;AAAA,UAAA;AAAA,YACC,IAAA;AAAA,YACA,WAAA;AAAA,YACA,MAAA;AAAA,YACA;AAAA;AAAA;AACF;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-es/CarouselAutoplayIndicatorSVG.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { makePrefixer } from '@salt-ds/core';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
@@ -12,7 +12,7 @@ const CarouselAutoplayIndicatorSVG = forwardRef(
     size,
     strokeWidth
   }, ref) => {
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       "svg",
       {
         className: clsx(withBaseName(), className),
@@ -20,29 +20,17 @@ const CarouselAutoplayIndicatorSVG = forwardRef(
         height: size,
         "aria-hidden": true,
         ref,
-        children: [
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              className: withBaseName("track"),
-              cx: size / 2,
-              cy: size / 2,
-              r: radius,
-              strokeWidth
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              ref: barRef,
-              className: withBaseName("bar"),
-              cx: size / 2,
-              cy: size / 2,
-              r: radius,
-              strokeWidth
-            }
-          )
-        ]
+        children: /* @__PURE__ */ jsx(
+          "circle",
+          {
+            ref: barRef,
+            className: withBaseName("bar"),
+            cx: size / 2,
+            cy: size / 2,
+            r: radius,
+            strokeWidth
+          }
+        )
       }
     );
   }

package/dist-es/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":[],"mappings":";;;;;AAIA,MAAM,YAAA,GAAe,aAAa,kCAAkC,CAAA;AA0B7D,MAAM,4BAA+B,GAAA,UAAA;AAAA,EAI1C,CACE;AAAA,IACE,MAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,KAEF,GACG,KAAA;AACH,IACE,uBAAA,IAAA;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,0BAAA,GAAA;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,0BACA,GAAA;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":[],"mappings":";;;;;AAIA,MAAM,YAAA,GAAe,aAAa,kCAAkC,CAAA;AA0B7D,MAAM,4BAAA,GAA+B,UAAA;AAAA,EAI1C,CACE;AAAA,IACE,MAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,KAEF,GAAA,KACG;AACH,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,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,kBAAA,GAAA;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-es/CarouselCard.css.js

@@ -1,4 +1,4 @@
-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";
 
 export { css_248z as default };
 //# sourceMappingURL=CarouselCard.css.js.map

package/dist-es/CarouselCard.js

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

package/dist-es/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":["CarouselCard","saltCarouselCardCss"],"mappings":";;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAsC7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAAA,CACP,EAAE,OAAA,EAAS,UAAY,EAAA,QAAA,EAAU,SAAW,EAAA,MAAA,EAAQ,KAAO,EAAA,GAAG,IAAK,EAAA,EACnE,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,UAAA;AAAA,QACL,sBAAqB,EAAA,OAAA;AAAA,QACrB,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,kBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,IAAA,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,4BACE,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,MAAM,CACjC,EAAA,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,SAAK,QAAO,EAAA,MAAA,EAAA,CAAA;AAAA,gCACb,GAAA,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":["CarouselCard","saltCarouselCardCss"],"mappings":";;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAsC7C,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,SAASA,aAAAA,CACP,EAAE,OAAA,EAAS,UAAA,EAAY,QAAA,EAAU,SAAA,EAAW,MAAA,EAAQ,KAAA,EAAO,GAAG,IAAA,EAAK,EACnE,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,WAAA,EAAY,GAAI,kBAAA,EAAmB;AAE3C,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,sBAAA,EAAqB,OAAA;AAAA,QACrB,WAAW,IAAA,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,kBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA,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,oBACC,IAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,IAAA,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,uBACE,KAAA,EAAA,EAAI,SAAA,EAAW,aAAa,QAAQ,CAAA,EAAI,kBAAO,CAAA,GAC9C,IAAA;AAAA,oBACH,QAAA;AAAA,oBACA,OAAA,uBACE,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-es/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":[],"mappings":";;;AAsBO,MAAM,eAAkB,GAAA,aAAA;AAAA,EAC7B,iBAAA;AAAA,EACA;AACF;AAEO,MAAM,qBAAqB,MAA2B;AAC3D,EAAM,MAAA,OAAA,GAAU,WAAW,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":[],"mappings":";;;AA4DO,MAAM,eAAA,GAAkB,aAAA;AAAA,EAC7B,iBAAA;AAAA,EACA;AACF;AAEO,MAAM,qBAAqB,MAA2B;AAC3D,EAAA,MAAM,OAAA,GAAU,WAAW,eAAe,CAAA;AAC1C,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA,EACF;AACA,EAAA,OAAO,OAAA;AACT;;;;"}