@salt-ds/embla-carousel 0.1.5 → 1.0.0

package/dist-es/CarouselTabList.js

@@ -3,10 +3,12 @@ import { makePrefixer, renderProps } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useRef, useState, useEffect } from 'react';
 import { useCarouselContext } from './CarouselContext.js';
 import { CarouselTab, useCarouselTab } from './CarouselTab.js';
 import css_248z from './CarouselTabList.css.js';
+import { getSlideDescription } from './getSlideDescription.js';
+import { getVisibleSlideIndexes } from './getVisibleSlideIndexes.js';
 
 const withBaseName = makePrefixer("saltCarouselTabList");
 const CarouselTabRenderer = forwardRef((props, ref) => {
@@ -20,67 +22,85 @@ const CarouselTabList = forwardRef(
       css: css_248z,
       window: targetWindow
     });
-    const { emblaApi } = useCarouselContext();
-    const { selectedIndex, scrollSnaps, onClick } = useCarouselTab(emblaApi);
-    const slideNodes = emblaApi == null ? void 0 : emblaApi.slideNodes();
-    const numberOfSlides = (slideNodes == null ? void 0 : slideNodes.length) ?? 0;
-    const slidesPerTransition = numberOfSlides ? Math.ceil(numberOfSlides / scrollSnaps.length) : 0;
+    const { emblaApi, setAriaVariant, setAnnouncementState } = useCarouselContext();
+    const { selectedIndex, scrollSnaps } = useCarouselTab(emblaApi);
     const buttonRefs = useRef([]);
+    const [focusedTabIndex, setFocusedTabIndex] = useState(null);
     const handleKeyDown = (event) => {
       var _a;
-      let newIndex = selectedIndex;
+      let newIndex = focusedTabIndex ?? selectedIndex;
       if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        event.preventDefault();
         const direction = event.key === "ArrowLeft" ? -1 : 1;
-        newIndex = (selectedIndex + direction + scrollSnaps.length) % scrollSnaps.length;
+        newIndex = Math.max(
+          0,
+          Math.min(newIndex + direction, scrollSnaps.length - 1)
+        );
       } else if (event.key === "Home") {
+        event.preventDefault();
         newIndex = 0;
       } else if (event.key === "End") {
+        event.preventDefault();
         newIndex = scrollSnaps.length - 1;
       }
-      if (newIndex !== selectedIndex) {
-        onClick(newIndex);
+      if (newIndex !== focusedTabIndex) {
         (_a = buttonRefs.current[newIndex]) == null ? void 0 : _a.focus();
-        event.preventDefault();
-        event.stopPropagation();
+        setFocusedTabIndex(newIndex);
       }
       onKeyDown == null ? void 0 : onKeyDown(event);
     };
+    useEffect(() => {
+      setAriaVariant("tabpanel");
+    }, [setAriaVariant]);
     return /* @__PURE__ */ jsx(
       "div",
       {
         role: "tablist",
-        "aria-label": "Choose slide",
-        tabIndex: 0,
         className: clsx(withBaseName(), className),
         onKeyDown: handleKeyDown,
         ref,
         ...rest,
-        children: scrollSnaps.map((_, tabIndex) => {
-          const startSlideNumber = tabIndex * slidesPerTransition + 1;
-          const endSlideNumber = Math.min(
-            startSlideNumber + slidesPerTransition - 1,
-            numberOfSlides
+        children: scrollSnaps.map((_, scrollSnapIndex) => {
+          const visibleSlides = getVisibleSlideIndexes(
+            emblaApi,
+            scrollSnapIndex
           );
-          const label = startSlideNumber === endSlideNumber ? `Slide ${startSlideNumber}` : `Slides ${startSlideNumber}-${endSlideNumber} of ${numberOfSlides}`;
-          const selected = selectedIndex === tabIndex;
+          const startSlideNumber = visibleSlides.length >= 1 ? visibleSlides[0] : 0;
+          const endSlideNumber = visibleSlides.length > 1 ? visibleSlides[visibleSlides.length - 1] : 0;
+          const slideNodes = emblaApi == null ? void 0 : emblaApi.slideNodes();
+          const numberOfSlides = slideNodes == null ? void 0 : slideNodes.length;
+          let ariaLabel;
+          if (endSlideNumber >= 1) {
+            ariaLabel = `Slide ${startSlideNumber} to ${endSlideNumber} of ${numberOfSlides}`;
+          } else {
+            const description = getSlideDescription(emblaApi, startSlideNumber);
+            ariaLabel = `${description}`;
+          }
+          const selected = selectedIndex === scrollSnapIndex;
           const ariaControls = (slideNodes == null ? void 0 : slideNodes.length) ? slideNodes[startSlideNumber - 1].id : void 0;
           return /* @__PURE__ */ jsx(
             CarouselTabRenderer,
             {
               ref: (element) => {
-                buttonRefs.current[tabIndex] = element;
+                buttonRefs.current[scrollSnapIndex] = element;
               },
               render,
               role: "tab",
-              onClick: () => onClick(tabIndex),
-              "aria-selected": selected,
               selected,
-              tabIndex: selected ? 0 : -1,
-              "aria-label": label,
-              "aria-labelledby": ariaControls,
+              onBlur: () => {
+                setFocusedTabIndex(null);
+              },
+              onFocus: () => {
+                setFocusedTabIndex(scrollSnapIndex);
+                setAnnouncementState("tab");
+                emblaApi == null ? void 0 : emblaApi.scrollTo(scrollSnapIndex);
+              },
+              "aria-label": ariaLabel,
+              "aria-selected": selected,
+              tabIndex: selected && focusedTabIndex === null ? 0 : -1,
               "aria-controls": ariaControls
             },
-            `carouselTab-${tabIndex}}`
+            `carouselTab-${scrollSnapIndex}}`
           );
         })
       }

package/dist-es/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":["CarouselTabList","carouselControlsCss"],"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":["CarouselTabList","carouselControlsCss"],"mappings":"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"}

package/dist-es/createCustomSettle.js

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

package/dist-es/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-es/getSlideDescription.js

@@ -0,0 +1,30 @@
+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 || "";
+};
+
+export { getSlideDescription };
+//# sourceMappingURL=getSlideDescription.js.map

package/dist-es/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-es/getVisibleSlideDescription.js

@@ -0,0 +1,24 @@
+import { getSlideDescription } from './getSlideDescription.js';
+import { getVisibleSlideIndexes } from './getVisibleSlideIndexes.js';
+
+const getVisibleSlideDescription = (emblaApi, scrollSnapIndex) => {
+  if (!emblaApi) {
+    return "";
+  }
+  const visibleSlideIndexes = 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(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}`;
+};
+
+export { getVisibleSlideDescription };
+//# sourceMappingURL=getVisibleSlideDescription.js.map

package/dist-es/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":[],"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,GAAsB,sBAAA,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,GAAc,mBAAA,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-es/getVisibleSlideIndexes.js

@@ -0,0 +1,30 @@
+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);
+};
+
+export { getSlideNumberRange, getVisibleSlideIndexes };
+//# sourceMappingURL=getVisibleSlideIndexes.js.map

package/dist-es/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-es/index.js

@@ -1,5 +1,4 @@
 export { Carousel } from './Carousel.js';
-export { CarouselAnnouncement, getSlideLabel } from './CarouselAnnouncementPlugin.js';
 export { CarouselAutoplayIndicator } from './CarouselAutoplayIndicator.js';
 export { CarouselCard } from './CarouselCard.js';
 export { CarouselContext, useCarouselContext } from './CarouselContext.js';

package/dist-es/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-es/usePrevNextButtons.js

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

package/dist-es/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":["emblaApi"],"mappings":";;;AAuBO,MAAM,qBAAqB,MAA8B;AAC9D,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,IAAI,CAAA;AAC3D,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,IAAI,CAAA;AAE3D,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,kBAAmB,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,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,YAAA,GAAe,CAACA,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":["emblaApi"],"mappings":";;;AAuBO,MAAM,qBAAqB,MAA8B;AAC9D,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,IAAI,CAAA;AAC3D,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,IAAI,CAAA;AAE3D,EAAA,MAAM,EAAE,QAAA,EAAU,oBAAA,EAAqB,GAAI,kBAAA,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,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,YAAA,GAAe,CAACA,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-types/Carousel.d.ts

@@ -20,8 +20,14 @@ export interface CarouselProps extends ComponentPropsWithoutRef<"section"> {
      * These options are passed directly to the Embla Carousel instance.
      */
     emblaPlugins?: CarouselPlugin;
-    /** Get embla API instance, use this to manage the state of the Carousel */
+    /**
+     * Get embla API instance, use this to manage the state of the Carousel
+     **/
     getEmblaApi?: (embla: CarouselEmblaApiType) => void;
+    /**
+     * Disable screenreader announcing slide updates, defaults to false.
+     */
+    disableSlideAnnouncements?: boolean;
 }
 export declare const Carousel: import("react").ForwardRefExoticComponent<CarouselProps & import("react").RefAttributes<HTMLElement>>;
 export {};

package/dist-types/CarouselContext.d.ts

@@ -1,4 +1,7 @@
+import { type Dispatch, type SetStateAction } from "react";
 import type { CarouselEmblaApiType, CarouselEmblaRefType } from "./Carousel";
+export type CarouselAriaVariant = "group" | "tabpanel";
+export type CarouselAnnouncementTrigger = "tab" | "navigation" | "drag" | "focus";
 /**
  * Type definition for the Carousel context.
  * Provides access to the Embla Carousel API and reference.
@@ -14,6 +17,34 @@ interface CarouselContextType {
      * Used to directly interact with the carousel DOM element.
      */
     emblaRef?: CarouselEmblaRefType;
+    /**
+     * Aria variant for the Carousel.
+     * When used with a `CarouselTabList` the screenreader will be presented as a `tablist` of tabpanels.
+     * When used without a `CarouselTabList` the screenreader will be presented as a `group` of slides.
+     */
+    ariaVariant: CarouselAriaVariant;
+    /**
+     * Function to set the aria variant for the Carousel.
+     */
+    setAriaVariant: Dispatch<SetStateAction<CarouselAriaVariant>>;
+    /**
+     * Disable screenreader announcing slide updates, defaults to false.
+     */
+    disableSlideAnnouncements?: boolean;
+    /**
+     * Id for the carousel
+     */
+    carouselId: string | undefined;
+    /**
+     * Announcement state, determines whether change is communicated to screenreader.
+     * @param trigger
+     */
+    announcementState: CarouselAnnouncementTrigger | undefined;
+    /**
+     * Set announcement state, determines whether change is communicated to screenreader.
+     * @param trigger
+     */
+    setAnnouncementState: (trigger: CarouselAnnouncementTrigger | undefined) => void;
 }
 export declare const CarouselContext: import("react").Context<CarouselContextType | undefined>;
 export declare const useCarouselContext: () => CarouselContextType;

package/dist-types/CarouselTab.d.ts

@@ -13,12 +13,6 @@ type UseCarouselTabProps = {
      * An array of scroll snap positions for the carousel slides.
      */
     scrollSnaps: number[];
-    /**
-     * Handler function for clicking a tab button to navigate to a specific slide.
-     *
-     * @param index - The index of the slide to navigate to.
-     */
-    onClick: (index: number) => void;
 };
 export declare const useCarouselTab: (emblaApi: EmblaCarouselType | undefined) => UseCarouselTabProps;
 /**

package/dist-types/CarouselTabList.d.ts

@@ -1,5 +1,6 @@
 import { type RenderPropsType } from "@salt-ds/core";
 import { type HTMLAttributes } from "react";
+import { type CarouselTabProps } from "./CarouselTab";
 /**
  * Props for the CarouselTabList component.
  */
@@ -9,4 +10,7 @@ export interface CarouselTabListProps extends HTMLAttributes<HTMLDivElement> {
      */
     render?: RenderPropsType["render"];
 }
+export interface CarouselTabRendererProps extends CarouselTabProps {
+    render?: CarouselTabListProps["render"];
+}
 export declare const CarouselTabList: import("react").ForwardRefExoticComponent<CarouselTabListProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/getSlideDescription.d.ts

@@ -0,0 +1,7 @@
+import type { EmblaCarouselType } from "embla-carousel";
+/** Get a description of the slide.
+ * @param emblaApi
+ * @param slideIndex
+ * @returns A slide description if defined or an empty string
+ */
+export declare const getSlideDescription: (emblaApi: EmblaCarouselType | undefined, slideNumber: number) => string;

package/dist-types/getVisibleSlideDescription.d.ts

@@ -0,0 +1,7 @@
+import type { EmblaCarouselType } from "embla-carousel";
+/** Get a description of the visible slide(s).
+ * @param emblaApi
+ * @param slideIndex
+ * @returns An array of descriptions for the visible slides
+ */
+export declare const getVisibleSlideDescription: (emblaApi: EmblaCarouselType | undefined, scrollSnapIndex: number) => string;

package/dist-types/getVisibleSlideIndexes.d.ts

@@ -0,0 +1,8 @@
+import type { EmblaCarouselType } from "embla-carousel";
+export declare const getSlideNumberRange: (startSlideNumber: number, endSlideNumber: number) => number[];
+/** Get the visible slide indexes
+ * @param emblaApi
+ * @param scrollSnap
+ * @returns An array of visible slide indexes
+ */
+export declare const getVisibleSlideIndexes: (emblaApi: EmblaCarouselType | undefined, scrollSnapIndex: number) => number[];

package/dist-types/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./Carousel";
-export * from "./CarouselAnnouncementPlugin";
 export * from "./CarouselAutoplayIndicator";
 export * from "./CarouselCard";
 export * from "./CarouselContext";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/embla-carousel",
-  "version": "0.1.5",
+  "version": "1.0.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -20,7 +20,7 @@
     "*.css"
   ],
   "dependencies": {
-    "@salt-ds/core": "^1.48.0",
+    "@salt-ds/core": "^1.51.0",
     "clsx": "^2.0.0"
   },
   "devDependencies": {

package/dist-cjs/CarouselAnnouncementPlugin.js

@@ -1,52 +0,0 @@
-'use strict';
-
-var core = require('@salt-ds/core');
-var react = require('react');
-
-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 = ownerDocument.getElementById(labelledById);
-      description = (labelledByElement == null ? void 0 : labelledByElement.textContent) || "No description available";
-    } else {
-      description = "No description available";
-    }
-  }
-  return `slide ${slideIndexInView + 1} of ${slideCount}. ${description}`;
-};
-function CarouselAnnouncement(userOptions = {}) {
-  let emblaApi;
-  const { announce } = core.useAriaAnnouncer();
-  const handleSettle = react.useCallback(
-    (emblaApi2) => {
-      const slideLabel = getSlideLabel(emblaApi2);
-      announce(slideLabel);
-    },
-    [announce]
-  );
-  function init(emblaApiInstance) {
-    emblaApi = emblaApiInstance;
-    emblaApi.on("settle", handleSettle);
-  }
-  function destroy() {
-    emblaApi.off("settle", handleSettle);
-  }
-  const self = {
-    name: "announcement",
-    options: userOptions,
-    init,
-    destroy
-  };
-  return self;
-}
-
-exports.CarouselAnnouncement = CarouselAnnouncement;
-exports.getSlideLabel = getSlideLabel;
-//# sourceMappingURL=CarouselAnnouncementPlugin.js.map

package/dist-cjs/CarouselAnnouncementPlugin.js.map

@@ -1 +0,0 @@
-{"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/CarouselProgressLabel.css.js

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

package/dist-cjs/CarouselProgressLabel.css.js.map

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

package/dist-es/CarouselAnnouncementPlugin.js

@@ -1,49 +0,0 @@
-import { useAriaAnnouncer } from '@salt-ds/core';
-import { useCallback } from 'react';
-
-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 = ownerDocument.getElementById(labelledById);
-      description = (labelledByElement == null ? void 0 : labelledByElement.textContent) || "No description available";
-    } else {
-      description = "No description available";
-    }
-  }
-  return `slide ${slideIndexInView + 1} of ${slideCount}. ${description}`;
-};
-function CarouselAnnouncement(userOptions = {}) {
-  let emblaApi;
-  const { announce } = useAriaAnnouncer();
-  const handleSettle = useCallback(
-    (emblaApi2) => {
-      const slideLabel = getSlideLabel(emblaApi2);
-      announce(slideLabel);
-    },
-    [announce]
-  );
-  function init(emblaApiInstance) {
-    emblaApi = emblaApiInstance;
-    emblaApi.on("settle", handleSettle);
-  }
-  function destroy() {
-    emblaApi.off("settle", handleSettle);
-  }
-  const self = {
-    name: "announcement",
-    options: userOptions,
-    init,
-    destroy
-  };
-  return self;
-}
-
-export { CarouselAnnouncement, getSlideLabel };
-//# sourceMappingURL=CarouselAnnouncementPlugin.js.map