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

package/dist-cjs/CarouselProgressLabel.js

@@ -25,34 +25,34 @@ function CarouselProgressLabel({
   const { emblaApi } = CarouselContext.useCarouselContext();
   const [currentSlide, setCurrentSlide] = react.useState("");
   const [totalSlides, setTotalSlides] = react.useState(0);
-  const handleSettle = react.useCallback((emblaApi2) => {
-    const slideIndexInView = (emblaApi2 == null ? void 0 : emblaApi2.selectedScrollSnap()) ?? 0;
-    const numberOfSlides = (emblaApi2 == null ? void 0 : emblaApi2.slideNodes().length) ?? 0;
-    const scrollSnaps = (emblaApi2 == null ? void 0 : emblaApi2.scrollSnapList()) ?? [];
-    const slidesPerTransition = numberOfSlides ? Math.ceil(numberOfSlides / scrollSnaps.length) : 0;
-    const startSlideNumber = Math.min(
-      slideIndexInView * slidesPerTransition + 1,
-      numberOfSlides - (slidesPerTransition - 1)
-    );
-    const endSlideNumber = Math.min(
-      startSlideNumber + slidesPerTransition - 1,
-      numberOfSlides
-    );
-    if (startSlideNumber === endSlideNumber) {
-      setCurrentSlide(startSlideNumber.toString(10));
-    } else {
-      setCurrentSlide(`${startSlideNumber}-${endSlideNumber}`);
-    }
-    setTotalSlides(numberOfSlides);
-  }, []);
   react.useEffect(() => {
+    const handleSelect = (emblaApi2) => {
+      const slideIndexInView = (emblaApi2 == null ? void 0 : emblaApi2.selectedScrollSnap()) ?? 0;
+      const numberOfSlides = (emblaApi2 == null ? void 0 : emblaApi2.slideNodes().length) ?? 0;
+      const scrollSnaps = (emblaApi2 == null ? void 0 : emblaApi2.scrollSnapList()) ?? [];
+      const slidesPerTransition = numberOfSlides ? Math.ceil(numberOfSlides / scrollSnaps.length) : 0;
+      const startSlideNumber = Math.min(
+        slideIndexInView * slidesPerTransition + 1,
+        numberOfSlides - (slidesPerTransition - 1)
+      );
+      const endSlideNumber = Math.min(
+        startSlideNumber + slidesPerTransition - 1,
+        numberOfSlides
+      );
+      if (startSlideNumber === endSlideNumber) {
+        setCurrentSlide(startSlideNumber.toString(10));
+      } else {
+        setCurrentSlide(`${startSlideNumber}-${endSlideNumber}`);
+      }
+      setTotalSlides(numberOfSlides);
+    };
     if (!emblaApi) return;
-    emblaApi.on("init", handleSettle).on("reInit", handleSettle).on("settle", handleSettle);
-    handleSettle(emblaApi);
+    emblaApi.on("init", handleSelect).on("reInit", handleSelect).on("select", handleSelect);
+    handleSelect(emblaApi);
     return () => {
-      emblaApi.off("init", handleSettle).off("reInit", handleSettle).off("settle", handleSettle);
+      emblaApi.off("init", handleSelect).off("reInit", handleSelect).off("select", handleSelect);
     };
-  }, [emblaApi, handleSettle]);
+  }, [emblaApi]);
   return /* @__PURE__ */ jsxRuntime.jsxs(core.Text, { className: clsx.clsx(withBaseName(), className), ...props, children: [
     "Slide ",
     currentSlide,

package/dist-cjs/CarouselProgressLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselProgressLabel.js","sources":["../src/CarouselProgressLabel.tsx"],"sourcesContent":["import { Text, type TextProps, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { EmblaCarouselType } from \"embla-carousel\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport carouselProgressLabelCss from \"./CarouselProgressLabel.css\";\n\n/**\n * Props for the CarouselProgressLabel component.\n */\nexport interface CarouselProgressLabelProps extends TextProps<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCarouselTabList\");\n\nexport function CarouselProgressLabel({\n  className,\n  styleAs = \"label\",\n  children,\n  ...props\n}: CarouselProgressLabelProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-carousel-progress-label\",\n    css: carouselProgressLabelCss,\n    window: targetWindow,\n  });\n\n  const { emblaApi } = useCarouselContext();\n\n  const [currentSlide, setCurrentSlide] = useState(\"\");\n  const [totalSlides, setTotalSlides] = useState(0);\n\n  const handleSettle = useCallback((emblaApi: EmblaCarouselType) => {\n    const slideIndexInView = emblaApi?.selectedScrollSnap() ?? 0;\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      slideIndexInView * 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      setCurrentSlide(startSlideNumber.toString(10));\n    } else {\n      setCurrentSlide(`${startSlideNumber}-${endSlideNumber}`);\n    }\n    setTotalSlides(numberOfSlides);\n  }, []);\n\n  useEffect(() => {\n    if (!emblaApi) return;\n    emblaApi\n      .on(\"init\", handleSettle)\n      .on(\"reInit\", handleSettle)\n      .on(\"settle\", handleSettle);\n    handleSettle(emblaApi);\n    // Cleanup listener on component unmount\n    return () => {\n      emblaApi\n        .off(\"init\", handleSettle)\n        .off(\"reInit\", handleSettle)\n        .off(\"settle\", handleSettle);\n    };\n  }, [emblaApi, handleSettle]);\n\n  return (\n    <Text className={clsx(withBaseName(), className)} {...props}>\n      Slide {currentSlide} of {totalSlides}\n    </Text>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","carouselProgressLabelCss","useCarouselContext","useState","useCallback","emblaApi","useEffect","jsxs","Text","clsx"],"mappings":";;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA;AAEhD,SAAS,qBAAsB,CAAA;AAAA,EACpC,SAAA;AAAA,EACA,OAAU,GAAA,OAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAA+B,EAAA;AAC7B,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,8BAAA;AAAA,IACR,GAAK,EAAAC,uBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,kCAAmB,EAAA;AAExC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,eAAS,EAAE,CAAA;AACnD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIA,eAAS,CAAC,CAAA;AAEhD,EAAM,MAAA,YAAA,GAAeC,iBAAY,CAAA,CAACC,SAAgC,KAAA;AAChE,IAAA,MAAM,gBAAmBA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,kBAAwB,EAAA,KAAA,CAAA;AAC3D,IAAA,MAAM,cAAiBA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,aAAa,MAAU,KAAA,CAAA;AACxD,IAAA,MAAM,WAAcA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,qBAAoB,EAAC;AACnD,IAAA,MAAM,sBAAsB,cACxB,GAAA,IAAA,CAAK,KAAK,cAAiB,GAAA,WAAA,CAAY,MAAM,CAC7C,GAAA,CAAA;AACJ,IAAA,MAAM,mBAAmB,IAAK,CAAA,GAAA;AAAA,MAC5B,mBAAmB,mBAAsB,GAAA,CAAA;AAAA,MACzC,kBAAkB,mBAAsB,GAAA,CAAA;AAAA,KAC1C;AACA,IAAA,MAAM,iBAAiB,IAAK,CAAA,GAAA;AAAA,MAC1B,mBAAmB,mBAAsB,GAAA,CAAA;AAAA,MACzC;AAAA,KACF;AAEA,IAAA,IAAI,qBAAqB,cAAgB,EAAA;AACvC,MAAgB,eAAA,CAAA,gBAAA,CAAiB,QAAS,CAAA,EAAE,CAAC,CAAA;AAAA,KACxC,MAAA;AACL,MAAA,eAAA,CAAgB,CAAG,EAAA,gBAAgB,CAAI,CAAA,EAAA,cAAc,CAAE,CAAA,CAAA;AAAA;AAEzD,IAAA,cAAA,CAAe,cAAc,CAAA;AAAA,GAC/B,EAAG,EAAE,CAAA;AAEL,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,QAAU,EAAA;AACf,IACG,QAAA,CAAA,EAAA,CAAG,MAAQ,EAAA,YAAY,CACvB,CAAA,EAAA,CAAG,UAAU,YAAY,CAAA,CACzB,EAAG,CAAA,QAAA,EAAU,YAAY,CAAA;AAC5B,IAAA,YAAA,CAAa,QAAQ,CAAA;AAErB,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,GACC,EAAA,CAAC,QAAU,EAAA,YAAY,CAAC,CAAA;AAE3B,EACE,uBAAAC,eAAA,CAACC,aAAK,SAAW,EAAAC,SAAA,CAAK,cAAgB,EAAA,SAAS,CAAI,EAAA,GAAG,KAAO,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACpD,YAAA;AAAA,IAAa,MAAA;AAAA,IAAK;AAAA,GAC3B,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CarouselProgressLabel.js","sources":["../src/CarouselProgressLabel.tsx"],"sourcesContent":["import { Text, type TextProps, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { EmblaCarouselType } from \"embla-carousel\";\nimport { useEffect, useState } from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport carouselProgressLabelCss from \"./CarouselProgressLabel.css\";\n\n/**\n * Props for the CarouselProgressLabel component.\n */\nexport interface CarouselProgressLabelProps extends TextProps<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCarouselTabList\");\n\nexport function CarouselProgressLabel({\n  className,\n  styleAs = \"label\",\n  children,\n  ...props\n}: CarouselProgressLabelProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-carousel-progress-label\",\n    css: carouselProgressLabelCss,\n    window: targetWindow,\n  });\n\n  const { emblaApi } = useCarouselContext();\n\n  const [currentSlide, setCurrentSlide] = useState(\"\");\n  const [totalSlides, setTotalSlides] = useState(0);\n\n  useEffect(() => {\n    const handleSelect = (emblaApi: EmblaCarouselType) => {\n      const slideIndexInView = emblaApi?.selectedScrollSnap() ?? 0;\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        slideIndexInView * 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        setCurrentSlide(startSlideNumber.toString(10));\n      } else {\n        setCurrentSlide(`${startSlideNumber}-${endSlideNumber}`);\n      }\n      setTotalSlides(numberOfSlides);\n    };\n\n    if (!emblaApi) return;\n    emblaApi\n      .on(\"init\", handleSelect)\n      .on(\"reInit\", handleSelect)\n      .on(\"select\", handleSelect);\n    handleSelect(emblaApi);\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    <Text className={clsx(withBaseName(), className)} {...props}>\n      Slide {currentSlide} of {totalSlides}\n    </Text>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","carouselProgressLabelCss","useCarouselContext","useState","useEffect","emblaApi","jsxs","Text","clsx"],"mappings":";;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA;AAEhD,SAAS,qBAAsB,CAAA;AAAA,EACpC,SAAA;AAAA,EACA,OAAU,GAAA,OAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAA+B,EAAA;AAC7B,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,8BAAA;AAAA,IACR,GAAK,EAAAC,uBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,kCAAmB,EAAA;AAExC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,eAAS,EAAE,CAAA;AACnD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIA,eAAS,CAAC,CAAA;AAEhD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAM,MAAA,YAAA,GAAe,CAACC,SAAgC,KAAA;AACpD,MAAA,MAAM,gBAAmBA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,kBAAwB,EAAA,KAAA,CAAA;AAC3D,MAAA,MAAM,cAAiBA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,aAAa,MAAU,KAAA,CAAA;AACxD,MAAA,MAAM,WAAcA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,qBAAoB,EAAC;AACnD,MAAA,MAAM,sBAAsB,cACxB,GAAA,IAAA,CAAK,KAAK,cAAiB,GAAA,WAAA,CAAY,MAAM,CAC7C,GAAA,CAAA;AACJ,MAAA,MAAM,mBAAmB,IAAK,CAAA,GAAA;AAAA,QAC5B,mBAAmB,mBAAsB,GAAA,CAAA;AAAA,QACzC,kBAAkB,mBAAsB,GAAA,CAAA;AAAA,OAC1C;AACA,MAAA,MAAM,iBAAiB,IAAK,CAAA,GAAA;AAAA,QAC1B,mBAAmB,mBAAsB,GAAA,CAAA;AAAA,QACzC;AAAA,OACF;AAEA,MAAA,IAAI,qBAAqB,cAAgB,EAAA;AACvC,QAAgB,eAAA,CAAA,gBAAA,CAAiB,QAAS,CAAA,EAAE,CAAC,CAAA;AAAA,OACxC,MAAA;AACL,QAAA,eAAA,CAAgB,CAAG,EAAA,gBAAgB,CAAI,CAAA,EAAA,cAAc,CAAE,CAAA,CAAA;AAAA;AAEzD,MAAA,cAAA,CAAe,cAAc,CAAA;AAAA,KAC/B;AAEA,IAAA,IAAI,CAAC,QAAU,EAAA;AACf,IACG,QAAA,CAAA,EAAA,CAAG,MAAQ,EAAA,YAAY,CACvB,CAAA,EAAA,CAAG,UAAU,YAAY,CAAA,CACzB,EAAG,CAAA,QAAA,EAAU,YAAY,CAAA;AAC5B,IAAA,YAAA,CAAa,QAAQ,CAAA;AAErB,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,EACE,uBAAAC,eAAA,CAACC,aAAK,SAAW,EAAAC,SAAA,CAAK,cAAgB,EAAA,SAAS,CAAI,EAAA,GAAG,KAAO,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACpD,YAAA;AAAA,IAAa,MAAA;AAAA,IAAK;AAAA,GAC3B,EAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/CarouselSlides.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCarouselSlides {\n  overflow: hidden;\n}\n.saltCarouselSlides-container {\n  display: flex;\n  touch-action: pan-y pinch-zoom;\n  margin-left: calc(var(--saltCarousel-slide-spacing) * -1);\n}\n";
+var css_248z = ".saltCarouselSlides {\n  overflow: hidden;\n}\n.saltCarouselSlides-container {\n  display: flex;\n  touch-action: pan-y pinch-zoom;\n  margin-left: calc(var(--carousel-slide-spacing) * -1);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CarouselSlides.css.js.map

package/dist-cjs/CarouselSlides.js

@@ -8,10 +8,11 @@ var clsx = require('clsx');
 var react = require('react');
 var CarouselContext = require('./CarouselContext.js');
 var CarouselSlides$1 = require('./CarouselSlides.css.js');
+var createCustomSettle = require('./createCustomSettle.js');
 
 const withBaseName = core.makePrefixer("saltCarouselSlides");
 const CarouselSlides = react.forwardRef(
-  function CarouselSlides2({ children, className, onKeyDown, ...rest }, propRef) {
+  function CarouselSlides2({ children, className, onKeyDown, ...rest }, ref) {
     const targetWindow = window.useWindow();
     styles.useComponentCssInjection({
       testId: "salt-carousel-slides",
@@ -19,7 +20,34 @@ const CarouselSlides = react.forwardRef(
       window: targetWindow
     });
     const { emblaApi, emblaRef } = CarouselContext.useCarouselContext();
-    const ref = core.useForkRef(propRef, emblaRef);
+    const carouselRef = core.useForkRef(ref, emblaRef);
+    const usingArrowNavigation = react.useRef();
+    react.useEffect(() => {
+      const handleSettle = (emblaApi2) => {
+        if (!usingArrowNavigation.current) {
+          return;
+        }
+        const slideIndexInView = (emblaApi2 == null ? void 0 : emblaApi2.selectedScrollSnap()) ?? 0;
+        const snappedSlide = emblaApi2.slideNodes()[slideIndexInView];
+        if (snappedSlide) {
+          const focusableElements = snappedSlide.querySelectorAll(
+            'a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])'
+          );
+          if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+          }
+        }
+        usingArrowNavigation.current = false;
+      };
+      if (!emblaApi) {
+        return;
+      }
+      const scrollCallback = createCustomSettle.createCustomSettle(handleSettle);
+      emblaApi.on("scroll", scrollCallback);
+      return () => {
+        emblaApi.off("scroll", scrollCallback);
+      };
+    }, [emblaApi]);
     const handleKeyDown = (event) => {
       if (event.repeat) {
         return;
@@ -28,11 +56,13 @@ const CarouselSlides = react.forwardRef(
         case "ArrowLeft": {
           event.preventDefault();
           emblaApi == null ? void 0 : emblaApi.scrollPrev();
+          usingArrowNavigation.current = true;
           break;
         }
         case "ArrowRight": {
           event.preventDefault();
           emblaApi == null ? void 0 : emblaApi.scrollNext();
+          usingArrowNavigation.current = true;
           break;
         }
       }
@@ -42,7 +72,7 @@ const CarouselSlides = react.forwardRef(
       "div",
       {
         onKeyDown: handleKeyDown,
-        ref,
+        ref: carouselRef,
         className: clsx.clsx(withBaseName(), className),
         ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("container"), children })

package/dist-cjs/CarouselSlides.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselSlides.js","sources":["../src/CarouselSlides.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } 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 KeyboardEvent,\n  type Ref,\n  forwardRef,\n} from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport carouselSlidesCss from \"./CarouselSlides.css\";\n\n/**\n * Props for the CarouselSlides component.\n */\nexport interface CarouselSlidesProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCarouselSlides\");\n\nexport const CarouselSlides = forwardRef<HTMLDivElement, CarouselSlidesProps>(\n  function CarouselSlides(\n    { children, className, onKeyDown, ...rest },\n    propRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-slides\",\n      css: carouselSlidesCss,\n      window: targetWindow,\n    });\n    const { emblaApi, emblaRef } = useCarouselContext();\n\n    const ref = useForkRef(propRef, emblaRef) as Ref<HTMLDivElement>;\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.repeat) {\n        return;\n      }\n      switch (event.key) {\n        case \"ArrowLeft\": {\n          event.preventDefault();\n          emblaApi?.scrollPrev();\n          break;\n        }\n        case \"ArrowRight\": {\n          event.preventDefault();\n          emblaApi?.scrollNext();\n          break;\n        }\n      }\n      onKeyDown?.(event);\n    };\n\n    return (\n      <div\n        onKeyDown={handleKeyDown}\n        ref={ref}\n        className={clsx(withBaseName(), className)}\n        {...rest}\n      >\n        <div className={withBaseName(\"container\")}>{children}</div>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","CarouselSlides","useWindow","useComponentCssInjection","carouselSlidesCss","useCarouselContext","useForkRef","jsx","clsx"],"mappings":";;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,gBACP,EAAE,QAAA,EAAU,WAAW,SAAW,EAAA,GAAG,IAAK,EAAA,EAC1C,OACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAE,QAAA,EAAU,QAAS,EAAA,GAAIC,kCAAmB,EAAA;AAElD,IAAM,MAAA,GAAA,GAAMC,eAAW,CAAA,OAAA,EAAS,QAAQ,CAAA;AAExC,IAAM,MAAA,aAAA,GAAgB,CAAC,KAAyC,KAAA;AAC9D,MAAA,IAAI,MAAM,MAAQ,EAAA;AAChB,QAAA;AAAA;AAEF,MAAA,QAAQ,MAAM,GAAK;AAAA,QACjB,KAAK,WAAa,EAAA;AAChB,UAAA,KAAA,CAAM,cAAe,EAAA;AACrB,UAAU,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,UAAA,EAAA;AACV,UAAA;AAAA;AACF,QACA,KAAK,YAAc,EAAA;AACjB,UAAA,KAAA,CAAM,cAAe,EAAA;AACrB,UAAU,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,UAAA,EAAA;AACV,UAAA;AAAA;AACF;AAEF,MAAY,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,KAAA,CAAA;AAAA,KACd;AAEA,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,aAAA;AAAA,QACX,GAAA;AAAA,QACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEJ,yCAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,WAAW,GAAI,QAAS,EAAA;AAAA;AAAA,KACvD;AAAA;AAGN;;;;"}
+{"version":3,"file":"CarouselSlides.js","sources":["../src/CarouselSlides.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { EmblaCarouselType } from \"embla-carousel\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  forwardRef,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport carouselSlidesCss from \"./CarouselSlides.css\";\nimport { createCustomSettle } from \"./createCustomSettle\";\n\n/**\n * Props for the CarouselSlides component.\n */\nexport interface CarouselSlidesProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCarouselSlides\");\n\nexport const CarouselSlides = forwardRef<HTMLDivElement, CarouselSlidesProps>(\n  function CarouselSlides({ children, className, onKeyDown, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-slides\",\n      css: carouselSlidesCss,\n      window: targetWindow,\n    });\n    const { emblaApi, emblaRef } = useCarouselContext();\n\n    const carouselRef = useForkRef<HTMLDivElement>(ref, emblaRef);\n\n    const usingArrowNavigation = useRef<boolean>();\n\n    useEffect(() => {\n      const handleSettle = (emblaApi: EmblaCarouselType) => {\n        if (!usingArrowNavigation.current) {\n          return;\n        }\n        const slideIndexInView = emblaApi?.selectedScrollSnap() ?? 0;\n        const snappedSlide = emblaApi.slideNodes()[slideIndexInView];\n        if (snappedSlide) {\n          const focusableElements = snappedSlide.querySelectorAll<HTMLElement>(\n            'a, button, input, textarea, select, [tabindex]:not([tabindex=\"-1\"])',\n          );\n          if (focusableElements.length > 0) {\n            focusableElements[0].focus();\n          }\n        }\n        usingArrowNavigation.current = false;\n      };\n\n      if (!emblaApi) {\n        return;\n      }\n      const scrollCallback = createCustomSettle(handleSettle);\n      emblaApi.on(\"scroll\", scrollCallback);\n      // Cleanup listener on component unmount\n      return () => {\n        emblaApi.off(\"scroll\", scrollCallback);\n      };\n    }, [emblaApi]);\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.repeat) {\n        return;\n      }\n      switch (event.key) {\n        case \"ArrowLeft\": {\n          event.preventDefault();\n          emblaApi?.scrollPrev();\n          usingArrowNavigation.current = true;\n          break;\n        }\n        case \"ArrowRight\": {\n          event.preventDefault();\n          emblaApi?.scrollNext();\n          usingArrowNavigation.current = true;\n          break;\n        }\n      }\n      onKeyDown?.(event);\n    };\n\n    return (\n      <div\n        onKeyDown={handleKeyDown}\n        ref={carouselRef}\n        className={clsx(withBaseName(), className)}\n        {...rest}\n      >\n        <div className={withBaseName(\"container\")}>{children}</div>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","CarouselSlides","useWindow","useComponentCssInjection","carouselSlidesCss","useCarouselContext","useForkRef","useRef","useEffect","emblaApi","createCustomSettle","jsx","clsx"],"mappings":"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"}

package/dist-cjs/CarouselTab.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCarouselTab {\n  position: relative;\n  width: var(--salt-size-selectable);\n  height: var(--salt-size-selectable);\n  border: none;\n  box-shadow: inset 0 0 0 var(--salt-size-border) var(--salt-selectable-borderColor);\n  -webkit-tap-highlight-color: var(--salt-selectable-borderColor-hover);\n  -webkit-appearance: none;\n  appearance: none;\n  background-color: transparent;\n  touch-action: manipulation;\n  display: inline-flex;\n  text-decoration: none;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--salt-palette-corner-strongest);\n  transition: box-shadow var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltCarouselTab:after {\n  content: \"\";\n  position: absolute;\n  width: var(--salt-size-selectable);\n  height: var(--salt-size-selectable);\n  border-radius: 50%;\n  background-color: transparent;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.saltCarouselTab:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--salt-selectable-background-hover);\n  border-color: var(--salt-selectable-borderColor-hover);\n}\n\n.saltCarouselTab-selected {\n  box-shadow: inset 0 0 0 var(--salt-size-selectable) var(--salt-selectable-borderColor-selected);\n}\n";
+var css_248z = ".saltCarouselTab {\n  position: relative;\n  width: var(--salt-size-selectable);\n  height: var(--salt-size-selectable);\n  border: none;\n  box-shadow: inset 0 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor);\n  -webkit-tap-highlight-color: var(--salt-selectable-borderColor-hover);\n  -webkit-appearance: none;\n  appearance: none;\n  background-color: transparent;\n  touch-action: manipulation;\n  display: inline-flex;\n  text-decoration: none;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--salt-palette-corner-strongest);\n  transition: box-shadow var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltCarouselTab:after {\n  content: \"\";\n  position: absolute;\n  width: var(--salt-size-selectable);\n  height: var(--salt-size-selectable);\n  border-radius: 50%;\n  background-color: transparent;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.saltCarouselTab:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--salt-selectable-background-hover);\n  border-color: var(--salt-selectable-borderColor-hover);\n}\n\n.saltCarouselTab-selected {\n  box-shadow: inset 0 0 0 var(--salt-size-selectable) var(--salt-selectable-borderColor-selected);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CarouselTab.css.js.map

package/dist-cjs/CarouselTab.js

@@ -12,20 +12,16 @@ const withBaseName = core.makePrefixer("saltCarouselTab");
 const useCarouselTab = (emblaApi) => {
   const [selectedIndex, setSelectedIndex] = react.useState(0);
   const [scrollSnaps, setScrollSnaps] = react.useState([]);
-  const handleClick = react.useCallback(
-    (index) => {
-      if (!emblaApi) return;
-      emblaApi.scrollTo(index);
-    },
-    [emblaApi]
-  );
-  const handleInit = react.useCallback((emblaApi2) => {
-    setScrollSnaps(emblaApi2.scrollSnapList());
-  }, []);
-  const handleSelect = react.useCallback((emblaApi2) => {
-    setSelectedIndex(emblaApi2.selectedScrollSnap());
-  }, []);
+  const handleClick = (index) => {
+    emblaApi == null ? void 0 : emblaApi.scrollTo(index);
+  };
   react.useEffect(() => {
+    const handleInit = (emblaApi2) => {
+      setScrollSnaps(emblaApi2.scrollSnapList());
+    };
+    const handleSelect = (emblaApi2) => {
+      setSelectedIndex(emblaApi2.selectedScrollSnap());
+    };
     if (!emblaApi) return;
     handleInit(emblaApi);
     handleSelect(emblaApi);
@@ -33,9 +29,9 @@ const useCarouselTab = (emblaApi) => {
     return () => {
       emblaApi.off("init", handleInit);
       emblaApi.off("reInit", handleInit);
-      emblaApi.off("settle", handleSelect);
+      emblaApi.off("select", handleSelect);
     };
-  }, [emblaApi, handleInit, handleSelect]);
+  }, [emblaApi]);
   return {
     selectedIndex,
     scrollSnaps,

package/dist-cjs/CarouselTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselTab.js","sources":["../src/CarouselTab.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 { EmblaCarouselType } from \"embla-carousel\";\nimport {\n  type ComponentPropsWithRef,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\nimport carouselTabCss from \"./CarouselTab.css\";\n\n/**\n * Type definition for the UseCarouselTab hook.\n * Provides state and handlers for tablist navigation in a carousel.\n */\ntype UseCarouselTabProps = {\n  /**\n   * The index of the currently selected slide.\n   */\n  selectedIndex: number;\n\n  /**\n   * An array of scroll snap positions for the carousel slides.\n   */\n  scrollSnaps: number[];\n\n  /**\n   * Handler function for clicking a tab button to navigate to a specific slide.\n   *\n   * @param index - The index of the slide to navigate to.\n   */\n  onClick: (index: number) => void;\n};\n\nconst withBaseName = makePrefixer(\"saltCarouselTab\");\n\nexport const useCarouselTab = (\n  emblaApi: EmblaCarouselType | undefined,\n): UseCarouselTabProps => {\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);\n\n  const handleClick = useCallback(\n    (index: number) => {\n      if (!emblaApi) return;\n      emblaApi.scrollTo(index);\n    },\n    [emblaApi],\n  );\n\n  const handleInit = useCallback((emblaApi: EmblaCarouselType) => {\n    setScrollSnaps(emblaApi.scrollSnapList());\n  }, []);\n\n  const handleSelect = useCallback((emblaApi: EmblaCarouselType) => {\n    setSelectedIndex(emblaApi.selectedScrollSnap());\n  }, []);\n\n  useEffect(() => {\n    if (!emblaApi) return;\n\n    handleInit(emblaApi);\n    handleSelect(emblaApi);\n    emblaApi\n      .on(\"init\", handleInit)\n      .on(\"reInit\", handleInit)\n      .on(\"select\", handleSelect);\n    // Cleanup listener on component unmount\n    return () => {\n      emblaApi.off(\"init\", handleInit);\n      emblaApi.off(\"reInit\", handleInit);\n      emblaApi.off(\"settle\", handleSelect);\n    };\n  }, [emblaApi, handleInit, handleSelect]);\n\n  return {\n    selectedIndex,\n    scrollSnaps,\n    onClick: handleClick,\n  };\n};\n\n/**\n * Props for the CarouselTab component.\n */\nexport interface CarouselTabProps extends ComponentPropsWithRef<\"button\"> {\n  /**\n   * Is the selected slide\n   */\n  selected?: boolean;\n}\n\nexport const CarouselTab = forwardRef<HTMLButtonElement, CarouselTabProps>(\n  function CarouselTab(\n    { children, className, selected = false, ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-tab\",\n      css: carouselTabCss,\n      window: targetWindow,\n    });\n\n    return (\n      <button\n        className={clsx(\n          withBaseName(),\n          { [withBaseName(\"selected\")]: selected },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["makePrefixer","useState","useCallback","emblaApi","useEffect","forwardRef","CarouselTab","useWindow","useComponentCssInjection","carouselTabCss","jsx","clsx"],"mappings":";;;;;;;;;;AAqCA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA;AAEtC,MAAA,cAAA,GAAiB,CAC5B,QACwB,KAAA;AACxB,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,eAAS,CAAC,CAAA;AACpD,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,CAAI,GAAAA,cAAA,CAAmB,EAAE,CAAA;AAE3D,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,KAAkB,KAAA;AACjB,MAAA,IAAI,CAAC,QAAU,EAAA;AACf,MAAA,QAAA,CAAS,SAAS,KAAK,CAAA;AAAA,KACzB;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAM,MAAA,UAAA,GAAaA,iBAAY,CAAA,CAACC,SAAgC,KAAA;AAC9D,IAAeA,cAAAA,CAAAA,SAAAA,CAAS,gBAAgB,CAAA;AAAA,GAC1C,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,YAAA,GAAeD,iBAAY,CAAA,CAACC,SAAgC,KAAA;AAChE,IAAiBA,gBAAAA,CAAAA,SAAAA,CAAS,oBAAoB,CAAA;AAAA,GAChD,EAAG,EAAE,CAAA;AAEL,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,QAAU,EAAA;AAEf,IAAA,UAAA,CAAW,QAAQ,CAAA;AACnB,IAAA,YAAA,CAAa,QAAQ,CAAA;AACrB,IACG,QAAA,CAAA,EAAA,CAAG,MAAQ,EAAA,UAAU,CACrB,CAAA,EAAA,CAAG,UAAU,UAAU,CAAA,CACvB,EAAG,CAAA,QAAA,EAAU,YAAY,CAAA;AAE5B,IAAA,OAAO,MAAM;AACX,MAAS,QAAA,CAAA,GAAA,CAAI,QAAQ,UAAU,CAAA;AAC/B,MAAS,QAAA,CAAA,GAAA,CAAI,UAAU,UAAU,CAAA;AACjC,MAAS,QAAA,CAAA,GAAA,CAAI,UAAU,YAAY,CAAA;AAAA,KACrC;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,UAAA,EAAY,YAAY,CAAC,CAAA;AAEvC,EAAO,OAAA;AAAA,IACL,aAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAS,EAAA;AAAA,GACX;AACF;AAYO,MAAM,WAAc,GAAAC,gBAAA;AAAA,EACzB,SAASC,YACP,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,WAAW,KAAO,EAAA,GAAG,IAAK,EAAA,EACjD,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAS,EAAA;AAAA,UACvC;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;;"}
+{"version":3,"file":"CarouselTab.js","sources":["../src/CarouselTab.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 { EmblaCarouselType } from \"embla-carousel\";\nimport {\n  type ComponentPropsWithRef,\n  forwardRef,\n  useEffect,\n  useState,\n} from \"react\";\nimport carouselTabCss from \"./CarouselTab.css\";\n\n/**\n * Type definition for the UseCarouselTab hook.\n * Provides state and handlers for tablist navigation in a carousel.\n */\ntype UseCarouselTabProps = {\n  /**\n   * The index of the currently selected slide.\n   */\n  selectedIndex: number;\n\n  /**\n   * An array of scroll snap positions for the carousel slides.\n   */\n  scrollSnaps: number[];\n\n  /**\n   * Handler function for clicking a tab button to navigate to a specific slide.\n   *\n   * @param index - The index of the slide to navigate to.\n   */\n  onClick: (index: number) => void;\n};\n\nconst withBaseName = makePrefixer(\"saltCarouselTab\");\n\nexport const useCarouselTab = (\n  emblaApi: EmblaCarouselType | undefined,\n): UseCarouselTabProps => {\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);\n\n  const handleClick = (index: number) => {\n    emblaApi?.scrollTo(index);\n  };\n\n  useEffect(() => {\n    const handleInit = (emblaApi: EmblaCarouselType) => {\n      setScrollSnaps(emblaApi.scrollSnapList());\n    };\n\n    const handleSelect = (emblaApi: EmblaCarouselType) => {\n      setSelectedIndex(emblaApi.selectedScrollSnap());\n    };\n\n    if (!emblaApi) return;\n\n    handleInit(emblaApi);\n    handleSelect(emblaApi);\n    emblaApi\n      .on(\"init\", handleInit)\n      .on(\"reInit\", handleInit)\n      .on(\"select\", handleSelect);\n    // Cleanup listener on component unmount\n    return () => {\n      emblaApi.off(\"init\", handleInit);\n      emblaApi.off(\"reInit\", handleInit);\n      emblaApi.off(\"select\", handleSelect);\n    };\n  }, [emblaApi]);\n\n  return {\n    selectedIndex,\n    scrollSnaps,\n    onClick: handleClick,\n  };\n};\n\n/**\n * Props for the CarouselTab component.\n */\nexport interface CarouselTabProps extends ComponentPropsWithRef<\"button\"> {\n  /**\n   * Is the selected slide\n   */\n  selected?: boolean;\n}\n\nexport const CarouselTab = forwardRef<HTMLButtonElement, CarouselTabProps>(\n  function CarouselTab(\n    { children, className, selected = false, ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-tab\",\n      css: carouselTabCss,\n      window: targetWindow,\n    });\n\n    return (\n      <button\n        className={clsx(\n          withBaseName(),\n          { [withBaseName(\"selected\")]: selected },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["makePrefixer","useState","useEffect","emblaApi","forwardRef","CarouselTab","useWindow","useComponentCssInjection","carouselTabCss","jsx","clsx"],"mappings":";;;;;;;;;;AAoCA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA;AAEtC,MAAA,cAAA,GAAiB,CAC5B,QACwB,KAAA;AACxB,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,eAAS,CAAC,CAAA;AACpD,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,CAAI,GAAAA,cAAA,CAAmB,EAAE,CAAA;AAE3D,EAAM,MAAA,WAAA,GAAc,CAAC,KAAkB,KAAA;AACrC,IAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,QAAS,CAAA,KAAA,CAAA;AAAA,GACrB;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAM,MAAA,UAAA,GAAa,CAACC,SAAgC,KAAA;AAClD,MAAeA,cAAAA,CAAAA,SAAAA,CAAS,gBAAgB,CAAA;AAAA,KAC1C;AAEA,IAAM,MAAA,YAAA,GAAe,CAACA,SAAgC,KAAA;AACpD,MAAiBA,gBAAAA,CAAAA,SAAAA,CAAS,oBAAoB,CAAA;AAAA,KAChD;AAEA,IAAA,IAAI,CAAC,QAAU,EAAA;AAEf,IAAA,UAAA,CAAW,QAAQ,CAAA;AACnB,IAAA,YAAA,CAAa,QAAQ,CAAA;AACrB,IACG,QAAA,CAAA,EAAA,CAAG,MAAQ,EAAA,UAAU,CACrB,CAAA,EAAA,CAAG,UAAU,UAAU,CAAA,CACvB,EAAG,CAAA,QAAA,EAAU,YAAY,CAAA;AAE5B,IAAA,OAAO,MAAM;AACX,MAAS,QAAA,CAAA,GAAA,CAAI,QAAQ,UAAU,CAAA;AAC/B,MAAS,QAAA,CAAA,GAAA,CAAI,UAAU,UAAU,CAAA;AACjC,MAAS,QAAA,CAAA,GAAA,CAAI,UAAU,YAAY,CAAA;AAAA,KACrC;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAO,OAAA;AAAA,IACL,aAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAS,EAAA;AAAA,GACX;AACF;AAYO,MAAM,WAAc,GAAAC,gBAAA;AAAA,EACzB,SAASC,YACP,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,WAAW,KAAO,EAAA,GAAG,IAAK,EAAA,EACjD,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAS,EAAA;AAAA,UACvC;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;;"}

package/dist-cjs/CarouselTabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselTabList.js","sources":["../src/CarouselTabList.tsx"],"sourcesContent":["import { type RenderPropsType, makePrefixer, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef, useRef } 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: React.KeyboardEventHandler<HTMLDivElement> = (\n      event,\n    ) => {\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":";;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA;AAYvD,MAAM,mBAAsB,GAAAC,gBAAA,CAG1B,CAAC,KAAA,EAAO,GAAQ,KAAA;AAChB,EAAA,OAAOC,iBAAYC,uBAAa,EAAA,EAAE,GAAG,KAAA,EAAO,KAAK,CAAA;AACnD,CAAC,CAAA;AAEM,MAAM,eAAkB,GAAAF,gBAAA;AAAA,EAC7B,SAASG,iBAAgB,EAAE,SAAA,EAAW,QAAQ,SAAW,EAAA,GAAG,IAAK,EAAA,EAAG,GAAK,EAAA;AACvE,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,wBAAA;AAAA,MACR,GAAK,EAAAC,iBAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,kCAAmB,EAAA;AACxC,IAAA,MAAM,EAAE,aAAe,EAAA,WAAA,EAAa,OAAQ,EAAA,GAAIC,2BAAe,QAAQ,CAAA;AAEvE,IAAA,MAAM,aAAa,QAAU,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,UAAA,EAAA;AAC7B,IAAM,MAAA,cAAA,GAAA,CAAiB,yCAAY,MAAU,KAAA,CAAA;AAC7C,IAAA,MAAM,sBAAsB,cACxB,GAAA,IAAA,CAAK,KAAK,cAAiB,GAAA,WAAA,CAAY,MAAM,CAC7C,GAAA,CAAA;AAEJ,IAAM,MAAA,UAAA,GAAaC,YAAqC,CAAA,EAAE,CAAA;AAE1D,IAAM,MAAA,aAAA,GAA4D,CAChE,KACG,KAAA;AAtDT,MAAA,IAAA,EAAA;AAuDM,MAAA,IAAI,QAAW,GAAA,aAAA;AAEf,MAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,WAAe,IAAA,KAAA,CAAM,QAAQ,YAAc,EAAA;AAC3D,QAAA,MAAM,SAAY,GAAA,KAAA,CAAM,GAAQ,KAAA,WAAA,GAAc,EAAK,GAAA,CAAA;AACnD,QAAA,QAAA,GAAA,CACG,aAAgB,GAAA,SAAA,GAAY,WAAY,CAAA,MAAA,IAAU,WAAY,CAAA,MAAA;AAAA,OACnE,MAAA,IAAW,KAAM,CAAA,GAAA,KAAQ,MAAQ,EAAA;AAC/B,QAAW,QAAA,GAAA,CAAA;AAAA,OACb,MAAA,IAAW,KAAM,CAAA,GAAA,KAAQ,KAAO,EAAA;AAC9B,QAAA,QAAA,GAAW,YAAY,MAAS,GAAA,CAAA;AAAA;AAGlC,MAAA,IAAI,aAAa,aAAe,EAAA;AAC9B,QAAA,OAAA,CAAQ,QAAQ,CAAA;AAChB,QAAW,CAAA,EAAA,GAAA,UAAA,CAAA,OAAA,CAAQ,QAAQ,CAAA,KAA3B,IAA8B,GAAA,MAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAC9B,QAAA,KAAA,CAAM,cAAe,EAAA;AACrB,QAAA,KAAA,CAAM,eAAgB,EAAA;AAAA;AAExB,MAAY,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,KAAA,CAAA;AAAA,KACd;AAEA,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,SAAA;AAAA,QACL,YAAW,EAAA,cAAA;AAAA,QACX,QAAU,EAAA,CAAA;AAAA,QACV,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,SAAW,EAAA,aAAA;AAAA,QACX,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAY,EAAA,WAAA,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,QAAa,KAAA;AAChC,UAAM,MAAA,gBAAA,GAAmB,WAAW,mBAAsB,GAAA,CAAA;AAC1D,UAAA,MAAM,iBAAiB,IAAK,CAAA,GAAA;AAAA,YAC1B,mBAAmB,mBAAsB,GAAA,CAAA;AAAA,YACzC;AAAA,WACF;AACA,UAAM,MAAA,KAAA,GACJ,gBAAqB,KAAA,cAAA,GACjB,CAAS,MAAA,EAAA,gBAAgB,CACzB,CAAA,GAAA,CAAA,OAAA,EAAU,gBAAgB,CAAA,CAAA,EAAI,cAAc,CAAA,IAAA,EAAO,cAAc,CAAA,CAAA;AAEvE,UAAA,MAAM,WAAW,aAAkB,KAAA,QAAA;AAEnC,UAAA,MAAM,gBAAe,UAAY,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAA,MAAA,IAC7B,WAAW,gBAAmB,GAAA,CAAC,EAAE,EACjC,GAAA,MAAA;AACJ,UACE,uBAAAD,cAAA;AAAA,YAAC,mBAAA;AAAA,YAAA;AAAA,cAEC,GAAA,EAAK,CAAC,OAA+B,KAAA;AACnC,gBAAW,UAAA,CAAA,OAAA,CAAQ,QAAQ,CAAI,GAAA,OAAA;AAAA,eACjC;AAAA,cACA,MAAA;AAAA,cACA,IAAM,EAAA,KAAA;AAAA,cACN,OAAA,EAAS,MAAM,OAAA,CAAQ,QAAQ,CAAA;AAAA,cAC/B,eAAe,EAAA,QAAA;AAAA,cACf,QAAA;AAAA,cACA,QAAA,EAAU,WAAW,CAAI,GAAA,EAAA;AAAA,cACzB,YAAY,EAAA,KAAA;AAAA,cACZ,iBAAiB,EAAA,YAAA;AAAA,cACjB,eAAe,EAAA;AAAA,aAAA;AAAA,YAZV,eAAe,QAAQ,CAAA,CAAA;AAAA,WAa9B;AAAA,SAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"CarouselTabList.js","sources":["../src/CarouselTabList.tsx"],"sourcesContent":["import { type RenderPropsType, makePrefixer, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type HTMLAttributes,\n  type KeyboardEventHandler,\n  forwardRef,\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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"}

package/dist-cjs/createCustomSettle.js

@@ -0,0 +1,14 @@
+'use strict';
+
+const settlePixelThreshold = 10;
+const createCustomSettle = (callback) => function fireCustomSettle(emblaApi) {
+  const { dragHandler, location, target } = emblaApi.internalEngine();
+  if (dragHandler.pointerDown()) return;
+  const displacement = target.get() - location.get();
+  if (Math.abs(displacement) < settlePixelThreshold) {
+    callback(emblaApi);
+  }
+};
+
+exports.createCustomSettle = createCustomSettle;
+//# sourceMappingURL=createCustomSettle.js.map

package/dist-cjs/createCustomSettle.js.map

@@ -0,0 +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;;;;"}

package/dist-cjs/usePrevNextButtons.js

@@ -7,19 +7,17 @@ const usePrevNextButtons = () => {
   const [prevBtnDisabled, setPrevBtnDisabled] = react.useState(true);
   const [nextBtnDisabled, setNextBtnDisabled] = react.useState(true);
   const { emblaApi } = CarouselContext.useCarouselContext();
-  const handlePrevButtonClick = react.useCallback(() => {
-    if (!emblaApi) return;
-    emblaApi.scrollPrev();
-  }, [emblaApi]);
-  const handleNextButtonClick = react.useCallback(() => {
-    if (!emblaApi) return;
-    emblaApi.scrollNext();
-  }, [emblaApi]);
-  const handleSelect = react.useCallback((emblaApi2) => {
-    setPrevBtnDisabled(!emblaApi2.canScrollPrev());
-    setNextBtnDisabled(!emblaApi2.canScrollNext());
-  }, []);
+  const handlePrevButtonClick = () => {
+    emblaApi == null ? void 0 : emblaApi.scrollPrev();
+  };
+  const handleNextButtonClick = () => {
+    emblaApi == null ? void 0 : emblaApi.scrollNext();
+  };
   react.useEffect(() => {
+    const handleSelect = (emblaApi2) => {
+      setPrevBtnDisabled(!emblaApi2.canScrollPrev());
+      setNextBtnDisabled(!emblaApi2.canScrollNext());
+    };
     if (!emblaApi) {
       return;
     }
@@ -28,7 +26,7 @@ const usePrevNextButtons = () => {
     return () => {
       emblaApi.off("init", handleSelect).off("reInit", handleSelect).off("select", handleSelect);
     };
-  }, [emblaApi, handleSelect]);
+  }, [emblaApi]);
   return {
     prevBtnDisabled,
     nextBtnDisabled,

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 { useCallback, 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 = useCallback(() => {\n    if (!emblaApi) return;\n    emblaApi.scrollPrev();\n  }, [emblaApi]);\n\n  const handleNextButtonClick = useCallback(() => {\n    if (!emblaApi) return;\n    emblaApi.scrollNext();\n  }, [emblaApi]);\n\n  const handleSelect = useCallback((emblaApi: EmblaCarouselType) => {\n    setPrevBtnDisabled(!emblaApi.canScrollPrev());\n    setNextBtnDisabled(!emblaApi.canScrollNext());\n  }, []);\n\n  useEffect(() => {\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, handleSelect]);\n\n  return {\n    prevBtnDisabled,\n    nextBtnDisabled,\n    onPrevButtonClick: handlePrevButtonClick,\n    onNextButtonClick: handleNextButtonClick,\n  };\n};\n"],"names":["useState","useCarouselContext","useCallback","emblaApi","useEffect"],"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,EAAM,MAAA,qBAAA,GAAwBC,kBAAY,MAAM;AAC9C,IAAA,IAAI,CAAC,QAAU,EAAA;AACf,IAAA,QAAA,CAAS,UAAW,EAAA;AAAA,GACtB,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAM,MAAA,qBAAA,GAAwBA,kBAAY,MAAM;AAC9C,IAAA,IAAI,CAAC,QAAU,EAAA;AACf,IAAA,QAAA,CAAS,UAAW,EAAA;AAAA,GACtB,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAM,MAAA,YAAA,GAAeA,iBAAY,CAAA,CAACC,SAAgC,KAAA;AAChE,IAAmB,kBAAA,CAAA,CAACA,SAAS,CAAA,aAAA,EAAe,CAAA;AAC5C,IAAmB,kBAAA,CAAA,CAACA,SAAS,CAAA,aAAA,EAAe,CAAA;AAAA,GAC9C,EAAG,EAAE,CAAA;AAEL,EAAAC,eAAA,CAAU,MAAM;AACd,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,GACC,EAAA,CAAC,QAAU,EAAA,YAAY,CAAC,CAAA;AAE3B,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 } = 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;;;;"}

package/dist-es/Carousel.css.js

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

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 as ref, use this to manage the state of the Carousel */\n  getEmblaApi?: (embla: CarouselEmblaApiType) => void;\n}\n\nexport const Carousel = forwardRef<HTMLElement, CarouselProps>(\n  function Carousel(\n    {\n      children,\n      className,\n      emblaOptions = {},\n      emblaPlugins = [],\n      getEmblaApi,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel\",\n      css: carouselCss,\n      window: targetWindow,\n    });\n\n    const [emblaRef, emblaApi] = useEmblaCarousel(emblaOptions, [\n      ...emblaPlugins,\n    ]);\n\n    useEffect(() => {\n      if (emblaApi) {\n        getEmblaApi?.(emblaApi);\n      }\n      return undefined;\n    }, [emblaApi]);\n\n    return (\n      <CarouselContext.Provider value={{ emblaApi, emblaRef }}>\n        <section\n          aria-roledescription=\"carousel\"\n          role=\"region\"\n          className={clsx(withBaseName(), className)}\n          ref={ref}\n          {...rest}\n        >\n          {children}\n        </section>\n      </CarouselContext.Provider>\n    );\n  },\n);\n"],"names":["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 } 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;;;;"}

package/dist-es/CarouselAnnouncementPlugin.js

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

package/dist-es/CarouselAnnouncementPlugin.js.map

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

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