@salt-ds/embla-carousel 0.1.5 → 1.0.0

package/dist-es/CarouselNextButton.js

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

package/dist-es/CarouselNextButton.js.map

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

package/dist-es/CarouselPreviousButton.js

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

package/dist-es/CarouselPreviousButton.js.map

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

package/dist-es/CarouselProgressLabel.js

@@ -1,11 +1,9 @@
-import { jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { makePrefixer, Text } from '@salt-ds/core';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
 import { useState, useEffect } from 'react';
 import { useCarouselContext } from './CarouselContext.js';
-import css_248z from './CarouselProgressLabel.css.js';
+import { getVisibleSlideIndexes } from './getVisibleSlideIndexes.js';
 
 const withBaseName = makePrefixer("saltCarouselTabList");
 function CarouselProgressLabel({
@@ -14,35 +12,20 @@ function CarouselProgressLabel({
   children,
   ...props
 }) {
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "salt-carousel-progress-label",
-    css: css_248z,
-    window: targetWindow
-  });
   const { emblaApi } = useCarouselContext();
-  const [currentSlide, setCurrentSlide] = useState("");
-  const [totalSlides, setTotalSlides] = useState(0);
+  const [progress, setProgress] = useState("");
   useEffect(() => {
     const handleSelect = (emblaApi2) => {
-      const slideIndexInView = (emblaApi2 == null ? void 0 : emblaApi2.selectedScrollSnap()) ?? 0;
+      const selectedScrollSnap = (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 visibleSlides = getVisibleSlideIndexes(
+        emblaApi2,
+        selectedScrollSnap
       );
-      const endSlideNumber = Math.min(
-        startSlideNumber + slidesPerTransition - 1,
-        numberOfSlides
-      );
-      if (startSlideNumber === endSlideNumber) {
-        setCurrentSlide(startSlideNumber.toString(10));
-      } else {
-        setCurrentSlide(`${startSlideNumber}-${endSlideNumber}`);
-      }
-      setTotalSlides(numberOfSlides);
+      const startSlideNumber = visibleSlides.length >= 1 ? visibleSlides[0] : 0;
+      const endSlideNumber = visibleSlides.length > 1 ? visibleSlides[visibleSlides.length - 1] : 0;
+      const slidePosition = endSlideNumber ? `${startSlideNumber}-${endSlideNumber}` : startSlideNumber;
+      setProgress(`Slide ${slidePosition} of ${numberOfSlides}`);
     };
     if (!emblaApi) return;
     emblaApi.on("init", handleSelect).on("reInit", handleSelect).on("select", handleSelect);
@@ -51,12 +34,7 @@ function CarouselProgressLabel({
       emblaApi.off("init", handleSelect).off("reInit", handleSelect).off("select", handleSelect);
     };
   }, [emblaApi]);
-  return /* @__PURE__ */ jsxs(Text, { className: clsx(withBaseName(), className), ...props, children: [
-    "Slide ",
-    currentSlide,
-    " of ",
-    totalSlides
-  ] });
+  return /* @__PURE__ */ jsx(Text, { className: clsx(withBaseName(), className), ...props, children: progress });
 }
 
 export { CarouselProgressLabel };

package/dist-es/CarouselProgressLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselProgressLabel.js","sources":["../src/CarouselProgressLabel.tsx"],"sourcesContent":["import { makePrefixer, Text, type TextProps } 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":["carouselProgressLabelCss","emblaApi"],"mappings":";;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,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,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,8BAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,kBAAmB,EAAA;AAExC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,EAAE,CAAA;AACnD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,CAAC,CAAA;AAEhD,EAAA,SAAA,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,uBAAA,IAAA,CAAC,QAAK,SAAW,EAAA,IAAA,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 { makePrefixer, Text, type TextProps } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport type { EmblaCarouselType } from \"embla-carousel\";\nimport { useEffect, useState } from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport { getVisibleSlideIndexes } from \"./getVisibleSlideIndexes\";\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 { emblaApi } = useCarouselContext();\n\n  const [progress, setProgress] = useState(\"\");\n\n  useEffect(() => {\n    const handleSelect = (emblaApi: EmblaCarouselType) => {\n      const selectedScrollSnap = emblaApi?.selectedScrollSnap() ?? 0;\n      const numberOfSlides = emblaApi?.slideNodes().length ?? 0;\n      const visibleSlides = getVisibleSlideIndexes(\n        emblaApi,\n        selectedScrollSnap,\n      );\n      const startSlideNumber = visibleSlides.length >= 1 ? visibleSlides[0] : 0;\n      const endSlideNumber =\n        visibleSlides.length > 1 ? visibleSlides[visibleSlides.length - 1] : 0;\n      const slidePosition = endSlideNumber\n        ? `${startSlideNumber}-${endSlideNumber}`\n        : startSlideNumber;\n      setProgress(`Slide ${slidePosition} of ${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      {progress}\n    </Text>\n  );\n}\n"],"names":["emblaApi"],"mappings":";;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA;AAEhD,SAAS,qBAAA,CAAsB;AAAA,EACpC,SAAA;AAAA,EACA,OAAA,GAAU,OAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA+B;AAC7B,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,kBAAA,EAAmB;AAExC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,EAAE,CAAA;AAE3C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,YAAA,GAAe,CAACA,SAAAA,KAAgC;AACpD,MAAA,MAAM,kBAAA,GAAA,CAAqBA,SAAAA,IAAA,IAAA,GAAA,MAAA,GAAAA,SAAAA,CAAU,kBAAA,EAAA,KAAwB,CAAA;AAC7D,MAAA,MAAM,cAAA,GAAA,CAAiBA,SAAAA,IAAA,IAAA,GAAA,MAAA,GAAAA,SAAAA,CAAU,aAAa,MAAA,KAAU,CAAA;AACxD,MAAA,MAAM,aAAA,GAAgB,sBAAA;AAAA,QACpBA,SAAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,MAAM,mBAAmB,aAAA,CAAc,MAAA,IAAU,CAAA,GAAI,aAAA,CAAc,CAAC,CAAA,GAAI,CAAA;AACxE,MAAA,MAAM,cAAA,GACJ,cAAc,MAAA,GAAS,CAAA,GAAI,cAAc,aAAA,CAAc,MAAA,GAAS,CAAC,CAAA,GAAI,CAAA;AACvE,MAAA,MAAM,gBAAgB,cAAA,GAClB,CAAA,EAAG,gBAAgB,CAAA,CAAA,EAAI,cAAc,CAAA,CAAA,GACrC,gBAAA;AACJ,MAAA,WAAA,CAAY,CAAA,MAAA,EAAS,aAAa,CAAA,IAAA,EAAO,cAAc,CAAA,CAAE,CAAA;AAAA,IAC3D,CAAA;AAEA,IAAA,IAAI,CAAC,QAAA,EAAU;AACf,IAAA,QAAA,CACG,EAAA,CAAG,MAAA,EAAQ,YAAY,CAAA,CACvB,EAAA,CAAG,UAAU,YAAY,CAAA,CACzB,EAAA,CAAG,QAAA,EAAU,YAAY,CAAA;AAC5B,IAAA,YAAA,CAAa,QAAQ,CAAA;AAErB,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,uBACE,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,IAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,KAAA,EACnD,QAAA,EAAA,QAAA,EACH,CAAA;AAEJ;;;;"}

package/dist-es/CarouselSlides.css.js

@@ -1,4 +1,4 @@
-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";
+var css_248z = ".saltCarouselSlides {\n  overflow: hidden;\n  cursor: var(--salt-cursor-grab);\n}\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\n.saltCarouselSlides-sr-only {\n  position: absolute;\n  height: 1px;\n  width: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n.saltCarouselSlides-dragging {\n  cursor: var(--salt-cursor-grab-active);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=CarouselSlides.css.js.map

package/dist-es/CarouselSlides.js

@@ -1,79 +1,202 @@
 import { jsx } from 'react/jsx-runtime';
-import { makePrefixer, useForkRef } from '@salt-ds/core';
+import { makePrefixer, useForkRef, useAriaAnnouncer } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { forwardRef, useRef, useEffect } from 'react';
+import { forwardRef, useRef, useState, useEffect, Children, cloneElement } from 'react';
 import { useCarouselContext } from './CarouselContext.js';
 import css_248z from './CarouselSlides.css.js';
 import { createCustomSettle } from './createCustomSettle.js';
+import { getVisibleSlideDescription } from './getVisibleSlideDescription.js';
+import { getVisibleSlideIndexes } from './getVisibleSlideIndexes.js';
 
+const ANNOUNCEMENT_DURATION = 1200;
 const withBaseName = makePrefixer("saltCarouselSlides");
+const announceSlideChangesFrom = [
+  "drag",
+  "focus",
+  "navigation"
+];
 const CarouselSlides = forwardRef(
-  function CarouselSlides2({ children, className, onKeyDown, ...rest }, ref) {
+  function CarouselSlides2({ children, className, id, onKeyDown, ...rest }, ref) {
     const targetWindow = useWindow();
     useComponentCssInjection({
       testId: "salt-carousel-slides",
       css: css_248z,
       window: targetWindow
     });
-    const { emblaApi, emblaRef } = useCarouselContext();
-    const carouselRef = useForkRef(ref, emblaRef);
-    const usingArrowNavigation = useRef();
+    const {
+      disableSlideAnnouncements,
+      announcementState,
+      setAnnouncementState,
+      emblaApi,
+      emblaRef,
+      carouselId
+    } = useCarouselContext();
+    const containerRef = useRef(null);
+    const forkedEmblaRef = useForkRef(ref, emblaRef);
+    const carouselRef = useForkRef(
+      forkedEmblaRef,
+      containerRef
+    );
+    const slideRefs = useRef([]);
+    const [focusedSlideIndex, setFocusedSlideIndex] = useState(-1);
+    const [dragging, setDragging] = useState(false);
+    const focusOnSettle = useRef(false);
+    const [stableScrollSnap, setStableScrollSnap] = useState(void 0);
+    const visibleSlideIndexes = getVisibleSlideIndexes(
+      emblaApi,
+      stableScrollSnap ?? 0
+    );
+    const { announce } = useAriaAnnouncer();
     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;
+        const selectedScrollSnap = (emblaApi2 == null ? void 0 : emblaApi2.selectedScrollSnap()) ?? 0;
+        setStableScrollSnap(selectedScrollSnap);
+        const numberOfSnaps = (emblaApi2 == null ? void 0 : emblaApi2.scrollSnapList().length) ?? 1;
+        const numberOfSlidesPerSnap = slideRefs.current.length / numberOfSnaps;
+        const settledSlideIndex = Math.floor(
+          selectedScrollSnap * numberOfSlidesPerSnap
+        );
+        setFocusedSlideIndex(settledSlideIndex);
       };
       if (!emblaApi) {
         return;
       }
       const scrollCallback = createCustomSettle(handleSettle);
+      const pointerDownCallback = () => {
+        setAnnouncementState("drag");
+      };
       emblaApi.on("scroll", scrollCallback);
+      emblaApi.on("pointerDown", pointerDownCallback);
       return () => {
         emblaApi.off("scroll", scrollCallback);
+        emblaApi.off("pointerDown", pointerDownCallback);
       };
-    }, [emblaApi]);
+    }, [emblaApi, setAnnouncementState]);
+    useEffect(() => {
+      var _a;
+      if (!focusOnSettle.current || stableScrollSnap === void 0) {
+        return;
+      }
+      (_a = slideRefs.current[focusedSlideIndex]) == null ? void 0 : _a.focus();
+      setAnnouncementState("focus");
+      focusOnSettle.current = false;
+    }, [stableScrollSnap, focusedSlideIndex, setAnnouncementState]);
+    useEffect(() => {
+      const numberOfSnaps = (emblaApi == null ? void 0 : emblaApi.scrollSnapList().length) ?? 1;
+      const numberOfSlidesPerSnap = slideRefs.current.length / numberOfSnaps;
+      if (focusedSlideIndex >= 0) {
+        const nearestScrollSnap = Math.floor(
+          focusedSlideIndex / numberOfSlidesPerSnap
+        );
+        if ((emblaApi == null ? void 0 : emblaApi.selectedScrollSnap()) !== nearestScrollSnap) {
+          emblaApi == null ? void 0 : emblaApi.scrollTo(nearestScrollSnap);
+          focusOnSettle.current = true;
+        }
+      } else if (focusedSlideIndex === -1) {
+        const initialSnap = emblaApi == null ? void 0 : emblaApi.selectedScrollSnap();
+        const initialSlideIndex = initialSnap !== void 0 ? Math.floor(initialSnap * numberOfSlidesPerSnap) : 0;
+        setFocusedSlideIndex(initialSlideIndex);
+        setStableScrollSnap(initialSnap);
+      }
+    }, [focusedSlideIndex, emblaApi]);
+    useEffect(() => {
+      if (disableSlideAnnouncements === false) {
+        setAnnouncementState(void 0);
+      }
+    }, [disableSlideAnnouncements, setAnnouncementState]);
+    useEffect(() => {
+      if (stableScrollSnap === void 0 || disableSlideAnnouncements || !announcementState || announceSlideChangesFrom.indexOf(announcementState) === -1) {
+        return;
+      }
+      const announcement = getVisibleSlideDescription(
+        emblaApi,
+        stableScrollSnap
+      );
+      announce(announcement, ANNOUNCEMENT_DURATION);
+    }, [
+      announce,
+      announcementState,
+      disableSlideAnnouncements,
+      stableScrollSnap,
+      emblaApi
+    ]);
     const handleKeyDown = (event) => {
       if (event.repeat) {
         return;
       }
+      const numberOfSnaps = (emblaApi == null ? void 0 : emblaApi.scrollSnapList().length) ?? 1;
+      const numberOfSlidesPerSnap = slideRefs.current.length / numberOfSnaps;
+      const currentSnap = Math.floor(focusedSlideIndex / numberOfSlidesPerSnap);
       switch (event.key) {
         case "ArrowLeft": {
           event.preventDefault();
-          emblaApi == null ? void 0 : emblaApi.scrollPrev();
-          usingArrowNavigation.current = true;
+          const prevSnap = Math.max(currentSnap - 1, 0);
+          const newIndex = prevSnap * numberOfSlidesPerSnap;
+          setFocusedSlideIndex(newIndex);
           break;
         }
         case "ArrowRight": {
           event.preventDefault();
-          emblaApi == null ? void 0 : emblaApi.scrollNext();
-          usingArrowNavigation.current = true;
+          const nextSnap = Math.min(currentSnap + 1, numberOfSnaps - 1);
+          const newIndex = nextSnap * numberOfSlidesPerSnap;
+          setFocusedSlideIndex(newIndex);
           break;
         }
       }
       onKeyDown == null ? void 0 : onKeyDown(event);
     };
+    const handleMouseDown = (event) => {
+      var _a;
+      setDragging(true);
+      (_a = rest.onMouseDown) == null ? void 0 : _a.call(rest, event);
+    };
+    const handleMouseUp = (event) => {
+      var _a;
+      setDragging(false);
+      (_a = rest.onMouseUp) == null ? void 0 : _a.call(rest, event);
+    };
     return /* @__PURE__ */ jsx(
       "div",
       {
         onKeyDown: handleKeyDown,
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
         ref: carouselRef,
-        className: clsx(withBaseName(), className),
+        className: clsx(
+          withBaseName(),
+          { [withBaseName("dragging")]: dragging },
+          className
+        ),
         ...rest,
-        children: /* @__PURE__ */ jsx("div", { className: withBaseName("container"), children })
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: withBaseName("container"),
+            id: id ?? `${carouselId}-slides`,
+            children: Children.map(children, (child, index) => {
+              const childElement = child;
+              const existingId = childElement.props.id;
+              const isFocused = focusedSlideIndex === index;
+              const isHidden = !visibleSlideIndexes.includes(index + 1) && !isFocused;
+              const element = child;
+              return cloneElement(element, {
+                "aria-hidden": isHidden,
+                id: existingId ?? `${carouselId}-slide${index + 1}`,
+                onFocus: (event) => {
+                  var _a, _b;
+                  setFocusedSlideIndex(index);
+                  (_b = (_a = element.props) == null ? void 0 : _a.onFocus) == null ? void 0 : _b.call(_a, event);
+                },
+                tabIndex: !isHidden ? 0 : -1,
+                ref: (el) => {
+                  slideRefs.current[index] = el;
+                }
+              });
+            })
+          }
+        )
       }
     );
   }

package/dist-es/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 type { EmblaCarouselType } from \"embla-carousel\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type KeyboardEvent,\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":["CarouselSlides","carouselSlidesCss","emblaApi"],"mappings":"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"}
+{"version":3,"file":"CarouselSlides.js","sources":["../src/CarouselSlides.tsx"],"sourcesContent":["import { makePrefixer, useAriaAnnouncer, 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  Children,\n  type ComponentPropsWithoutRef,\n  cloneElement,\n  type FocusEvent,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEventHandler,\n  type ReactElement,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  type CarouselAnnouncementTrigger,\n  useCarouselContext,\n} from \"./CarouselContext\";\nimport carouselSlidesCss from \"./CarouselSlides.css\";\nimport { createCustomSettle } from \"./createCustomSettle\";\nimport { getVisibleSlideDescription } from \"./getVisibleSlideDescription\";\nimport { getVisibleSlideIndexes } from \"./getVisibleSlideIndexes\";\n\nconst ANNOUNCEMENT_DURATION = 1200;\n\n/**\n * Props for the CarouselSlides component.\n */\nexport interface CarouselSlidesProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCarouselSlides\");\n\nconst announceSlideChangesFrom: CarouselAnnouncementTrigger[] = [\n  \"drag\",\n  \"focus\",\n  \"navigation\",\n];\n\nexport const CarouselSlides = forwardRef<HTMLDivElement, CarouselSlidesProps>(\n  function CarouselSlides(\n    { children, className, id, onKeyDown, ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-slides\",\n      css: carouselSlidesCss,\n      window: targetWindow,\n    });\n    const {\n      disableSlideAnnouncements,\n      announcementState,\n      setAnnouncementState,\n      emblaApi,\n      emblaRef,\n      carouselId,\n    } = useCarouselContext();\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const forkedEmblaRef = useForkRef<HTMLDivElement>(ref, emblaRef);\n    const carouselRef = useForkRef<HTMLDivElement>(\n      forkedEmblaRef,\n      containerRef,\n    );\n\n    const slideRefs = useRef<(HTMLDivElement | null)[]>([]);\n    const [focusedSlideIndex, setFocusedSlideIndex] = useState<number>(-1);\n    const [dragging, setDragging] = useState(false);\n    const focusOnSettle = useRef<boolean>(false);\n\n    const [stableScrollSnap, setStableScrollSnap] = useState<\n      number | undefined\n    >(undefined);\n\n    const visibleSlideIndexes = getVisibleSlideIndexes(\n      emblaApi,\n      stableScrollSnap ?? 0,\n    );\n    const { announce } = useAriaAnnouncer();\n\n    useEffect(() => {\n      const handleSettle = (emblaApi: EmblaCarouselType) => {\n        const selectedScrollSnap = emblaApi?.selectedScrollSnap() ?? 0;\n        setStableScrollSnap(selectedScrollSnap);\n        const numberOfSnaps = emblaApi?.scrollSnapList().length ?? 1;\n        const numberOfSlidesPerSnap = slideRefs.current.length / numberOfSnaps;\n        const settledSlideIndex = Math.floor(\n          selectedScrollSnap * numberOfSlidesPerSnap,\n        );\n        setFocusedSlideIndex(settledSlideIndex);\n      };\n\n      if (!emblaApi) {\n        return;\n      }\n\n      const scrollCallback = createCustomSettle(handleSettle);\n      const pointerDownCallback = () => {\n        setAnnouncementState(\"drag\");\n      };\n      emblaApi.on(\"scroll\", scrollCallback);\n      emblaApi.on(\"pointerDown\", pointerDownCallback);\n      // Cleanup listener on component unmount\n      return () => {\n        emblaApi.off(\"scroll\", scrollCallback);\n        emblaApi.off(\"pointerDown\", pointerDownCallback);\n      };\n    }, [emblaApi, setAnnouncementState]);\n\n    useEffect(() => {\n      if (!focusOnSettle.current || stableScrollSnap === undefined) {\n        return;\n      }\n      slideRefs.current[focusedSlideIndex]?.focus();\n      setAnnouncementState(\"focus\");\n      focusOnSettle.current = false;\n    }, [stableScrollSnap, focusedSlideIndex, setAnnouncementState]);\n\n    useEffect(() => {\n      const numberOfSnaps = emblaApi?.scrollSnapList().length ?? 1;\n      const numberOfSlidesPerSnap = slideRefs.current.length / numberOfSnaps;\n      if (focusedSlideIndex >= 0) {\n        const nearestScrollSnap = Math.floor(\n          focusedSlideIndex / numberOfSlidesPerSnap,\n        );\n        if (emblaApi?.selectedScrollSnap() !== nearestScrollSnap) {\n          emblaApi?.scrollTo(nearestScrollSnap);\n          focusOnSettle.current = true;\n        }\n      } else if (focusedSlideIndex === -1) {\n        const initialSnap = emblaApi?.selectedScrollSnap();\n        const initialSlideIndex =\n          initialSnap !== undefined\n            ? Math.floor(initialSnap * numberOfSlidesPerSnap)\n            : 0;\n        setFocusedSlideIndex(initialSlideIndex);\n        setStableScrollSnap(initialSnap);\n      }\n    }, [focusedSlideIndex, emblaApi]);\n\n    useEffect(() => {\n      if (disableSlideAnnouncements === false) {\n        setAnnouncementState(undefined);\n      }\n    }, [disableSlideAnnouncements, setAnnouncementState]);\n\n    useEffect(() => {\n      if (\n        stableScrollSnap === undefined ||\n        disableSlideAnnouncements ||\n        !announcementState ||\n        announceSlideChangesFrom.indexOf(announcementState) === -1\n      ) {\n        return;\n      }\n      const announcement = getVisibleSlideDescription(\n        emblaApi,\n        stableScrollSnap,\n      );\n      announce(announcement, ANNOUNCEMENT_DURATION);\n    }, [\n      announce,\n      announcementState,\n      disableSlideAnnouncements,\n      stableScrollSnap,\n      emblaApi,\n    ]);\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.repeat) {\n        return;\n      }\n      const numberOfSnaps = emblaApi?.scrollSnapList().length ?? 1;\n      const numberOfSlidesPerSnap = slideRefs.current.length / numberOfSnaps;\n\n      // Find the current snap\n      const currentSnap = Math.floor(focusedSlideIndex / numberOfSlidesPerSnap);\n\n      switch (event.key) {\n        case \"ArrowLeft\": {\n          event.preventDefault();\n          const prevSnap = Math.max(currentSnap - 1, 0);\n          const newIndex = prevSnap * numberOfSlidesPerSnap;\n          setFocusedSlideIndex(newIndex);\n          break;\n        }\n        case \"ArrowRight\": {\n          event.preventDefault();\n          const nextSnap = Math.min(currentSnap + 1, numberOfSnaps - 1);\n          const newIndex = nextSnap * numberOfSlidesPerSnap;\n          setFocusedSlideIndex(newIndex);\n          break;\n        }\n      }\n      onKeyDown?.(event);\n    };\n\n    const handleMouseDown: MouseEventHandler<HTMLDivElement> = (event) => {\n      setDragging(true);\n      rest.onMouseDown?.(event);\n    };\n    const handleMouseUp: MouseEventHandler<HTMLDivElement> = (event) => {\n      setDragging(false);\n      rest.onMouseUp?.(event);\n    };\n\n    return (\n      <div\n        onKeyDown={handleKeyDown}\n        onMouseDown={handleMouseDown}\n        onMouseUp={handleMouseUp}\n        ref={carouselRef}\n        className={clsx(\n          withBaseName(),\n          { [withBaseName(\"dragging\")]: dragging },\n          className,\n        )}\n        {...rest}\n      >\n        <div\n          className={withBaseName(\"container\")}\n          id={id ?? `${carouselId}-slides`}\n        >\n          {Children.map(children, (child, index) => {\n            const childElement = child as ReactElement;\n            const existingId = childElement.props.id;\n            const isFocused = focusedSlideIndex === index;\n            const isHidden =\n              !visibleSlideIndexes.includes(index + 1) && !isFocused;\n            const element = child as ReactElement;\n            return cloneElement(element, {\n              \"aria-hidden\": isHidden,\n              id: existingId ?? `${carouselId}-slide${index + 1}`,\n              onFocus: (event: FocusEvent) => {\n                setFocusedSlideIndex(index);\n                element.props?.onFocus?.(event);\n              },\n              tabIndex: !isHidden ? 0 : -1,\n              ref: (el: HTMLDivElement) => {\n                slideRefs.current[index] = el;\n              },\n            });\n          })}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["CarouselSlides","carouselSlidesCss","emblaApi"],"mappings":"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"}

package/dist-es/CarouselTab.css.js

@@ -1,4 +1,4 @@
-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";
+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: var(--saltRadioButton-outline, var(--salt-focused-outline));\n  outline-offset: var(--salt-spacing-fixed-100);\n}\n\n.saltCarouselTab-selected {\n  box-shadow: inset 0 0 0 var(--salt-size-selectable) var(--salt-selectable-borderColor-selected);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=CarouselTab.css.js.map

package/dist-es/CarouselTab.js

@@ -10,9 +10,6 @@ const withBaseName = makePrefixer("saltCarouselTab");
 const useCarouselTab = (emblaApi) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [scrollSnaps, setScrollSnaps] = useState([]);
-  const handleClick = (index) => {
-    emblaApi == null ? void 0 : emblaApi.scrollTo(index);
-  };
   useEffect(() => {
     const handleInit = (emblaApi2) => {
       setScrollSnaps(emblaApi2.scrollSnapList());
@@ -32,8 +29,7 @@ const useCarouselTab = (emblaApi) => {
   }, [emblaApi]);
   return {
     selectedIndex,
-    scrollSnaps,
-    onClick: handleClick
+    scrollSnaps
   };
 };
 const CarouselTab = forwardRef(

package/dist-es/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  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":["emblaApi","CarouselTab","carouselTabCss"],"mappings":";;;;;;;;AAoCA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AAEtC,MAAA,cAAA,GAAiB,CAC5B,QACwB,KAAA;AACxB,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,CAAC,CAAA;AACpD,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,QAAA,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,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,UAAA,GAAa,CAACA,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,GAAA,UAAA;AAAA,EACzB,SAASC,YACP,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,WAAW,KAAO,EAAA,GAAG,IAAK,EAAA,EACjD,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;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\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  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  };\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":["emblaApi","CarouselTab","carouselTabCss"],"mappings":";;;;;;;;AA6BA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AAE5C,MAAM,cAAA,GAAiB,CAC5B,QAAA,KACwB;AACxB,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,CAAC,CAAA;AACpD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,QAAA,CAAmB,EAAE,CAAA;AAE3D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAA,GAAa,CAACA,SAAAA,KAAgC;AAClD,MAAA,cAAA,CAAeA,SAAAA,CAAS,gBAAgB,CAAA;AAAA,IAC1C,CAAA;AAEA,IAAA,MAAM,YAAA,GAAe,CAACA,SAAAA,KAAgC;AACpD,MAAA,gBAAA,CAAiBA,SAAAA,CAAS,oBAAoB,CAAA;AAAA,IAChD,CAAA;AAEA,IAAA,IAAI,CAAC,QAAA,EAAU;AAEf,IAAA,UAAA,CAAW,QAAQ,CAAA;AACnB,IAAA,YAAA,CAAa,QAAQ,CAAA;AACrB,IAAA,QAAA,CACG,EAAA,CAAG,MAAA,EAAQ,UAAU,CAAA,CACrB,EAAA,CAAG,UAAU,UAAU,CAAA,CACvB,EAAA,CAAG,QAAA,EAAU,YAAY,CAAA;AAE5B,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,GAAA,CAAI,QAAQ,UAAU,CAAA;AAC/B,MAAA,QAAA,CAAS,GAAA,CAAI,UAAU,UAAU,CAAA;AACjC,MAAA,QAAA,CAAS,GAAA,CAAI,UAAU,YAAY,CAAA;AAAA,IACrC,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,OAAO;AAAA,IACL,aAAA;AAAA,IACA;AAAA,GACF;AACF;AAYO,MAAM,WAAA,GAAc,UAAA;AAAA,EACzB,SAASC,YAAAA,CACP,EAAE,QAAA,EAAU,SAAA,EAAW,WAAW,KAAA,EAAO,GAAG,IAAA,EAAK,EACjD,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,mBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA,EAAS;AAAA,UACvC;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-es/CarouselTabList.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltCarouselTabList {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  align-items: center;\n  gap: var(--salt-spacing-200);\n}\n\n.saltCarouselTabList:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-color: var(--salt-focused-outlineColor);\n}\n";
+var css_248z = ".saltCarouselTabList {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  align-items: center;\n  gap: var(--salt-spacing-200);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=CarouselTabList.css.js.map