@salt-ds/embla-carousel 0.1.6 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @salt-ds/embla-carousel
 
+## 1.0.0
+
+### Major Changes
+
+- da42e9a: Carousel is now a stable API.
+
+  Features include:
+
+  - Composable Salt controls for navigation and progress.
+  - Composable with custom content within slides.
+  - Built on the popular `embla-carousel` library, with Salt-specific accessibility and theming enhancements.
+
+  Refer to [example](https://saltdesignsystem.com/salt/components/carousel/usage#sequential-with-slide-group) for basic usage.
+
+### Patch Changes
+
+- Updated dependencies [61c2bad]
+- Updated dependencies [fef411f]
+  - @salt-ds/core@1.51.0
+
 ## 0.1.6
 
 ### Patch Changes

package/css/salt-embla-carousel.css

@@ -18,10 +18,6 @@
 .saltCarouselAutoplayIndicatorSVG {
   transform: rotate(-90deg);
 }
-.saltCarouselAutoplayIndicatorSVG-track {
-  fill: none;
-  stroke: var(--salt-accent-foreground);
-}
 .saltCarouselAutoplayIndicatorSVG-bar {
   fill: none;
   stroke: var(--salt-accent-background);
@@ -59,7 +55,18 @@
 .saltCarouselCard:focus-visible {
   outline: none;
 }
-.saltCarouselCard:focus-visible::after {
+.saltCarouselCard:not(.saltCarouselCard-bordered):focus-visible::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--carousel-slide-spacing);
+  right: 0;
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-focused-outlineWidth) * -1);
+  cursor: var(--salt-cursor-hover);
+}
+.saltCarouselCard-bordered:focus-visible::after {
   content: "";
   position: absolute;
   top: 0;
@@ -91,7 +98,7 @@
 .saltCarouselCard-content h3 {
   margin: 0;
 }
-.saltCarouselCard-bordered {
+.saltCarouselCard-bordered-content {
   background: var(--salt-container-primary-background);
   border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
   border-radius: var(--salt-palette-corner, 0);
@@ -172,4 +179,4 @@
   gap: var(--salt-spacing-200);
 }
 
-/* src/28b4a5f8-340b-4ae4-bd4b-182f53df6997.css */
+/* src/1a62c25b-2a44-4f89-9546-cfbe130f6c2f.css */

package/dist-cjs/CarouselAutoplayIndicator.css.js

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

package/dist-cjs/CarouselAutoplayIndicatorSVG.js

@@ -14,7 +14,7 @@ const CarouselAutoplayIndicatorSVG = react.forwardRef(
     size,
     strokeWidth
   }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
       {
         className: clsx.clsx(withBaseName(), className),
@@ -22,29 +22,17 @@ const CarouselAutoplayIndicatorSVG = react.forwardRef(
         height: size,
         "aria-hidden": true,
         ref,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "circle",
-            {
-              className: withBaseName("track"),
-              cx: size / 2,
-              cy: size / 2,
-              r: radius,
-              strokeWidth
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "circle",
-            {
-              ref: barRef,
-              className: withBaseName("bar"),
-              cx: size / 2,
-              cy: size / 2,
-              r: radius,
-              strokeWidth
-            }
-          )
-        ]
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            ref: barRef,
+            className: withBaseName("bar"),
+            cx: size / 2,
+            cy: size / 2,
+            r: radius,
+            strokeWidth
+          }
+        )
       }
     );
   }

package/dist-cjs/CarouselAutoplayIndicatorSVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselAutoplayIndicatorSVG.js","sources":["../src/CarouselAutoplayIndicatorSVG.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type Ref, type SVGAttributes } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltCarouselAutoplayIndicatorSVG\");\n\nexport interface CarouselAutoplayIndicatorSVGProps\n  extends SVGAttributes<SVGSVGElement> {\n  /**\n   * Class name to apply to the SVG element.\n   */\n  className?: string;\n  /**\n   * Ref to attach to progress indicator element\n   */\n  barRef: Ref<SVGCircleElement>;\n  /**\n   * Size of the SVG in pixels.\n   */\n  size: number;\n  /**\n   * Stroke width of the progress indicator in pixels.\n   */\n  strokeWidth: number;\n  /**\n   * Radius of the progress indicator circle.\n   */\n  radius: number;\n}\n\nexport const CarouselAutoplayIndicatorSVG = forwardRef<\n  SVGSVGElement,\n  CarouselAutoplayIndicatorSVGProps\n>(\n  (\n    {\n      barRef,\n      className,\n      radius,\n      size,\n      strokeWidth,\n    }: CarouselAutoplayIndicatorSVGProps,\n    ref,\n  ) => {\n    return (\n      <svg\n        className={clsx(withBaseName(), className)}\n        width={size}\n        height={size}\n        aria-hidden\n        ref={ref}\n      >\n        <circle\n          className={withBaseName(\"track\")}\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          strokeWidth={strokeWidth}\n        />\n        <circle\n          ref={barRef}\n          className={withBaseName(\"bar\")}\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          strokeWidth={strokeWidth}\n        />\n      </svg>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","jsxs","clsx","jsx"],"mappings":";;;;;;;AAIA,MAAM,YAAA,GAAeA,kBAAa,kCAAkC,CAAA;AA0B7D,MAAM,4BAAA,GAA+BC,gBAAA;AAAA,EAI1C,CACE;AAAA,IACE,MAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,KAEF,GAAA,KACG;AACH,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,KAAA,EAAO,IAAA;AAAA,QACP,MAAA,EAAQ,IAAA;AAAA,QACR,aAAA,EAAW,IAAA;AAAA,QACX,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,IAAI,IAAA,GAAO,CAAA;AAAA,cACX,IAAI,IAAA,GAAO,CAAA;AAAA,cACX,CAAA,EAAG,MAAA;AAAA,cACH;AAAA;AAAA,WACF;AAAA,0BACAA,cAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,MAAA;AAAA,cACL,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,cAC7B,IAAI,IAAA,GAAO,CAAA;AAAA,cACX,IAAI,IAAA,GAAO,CAAA;AAAA,cACX,CAAA,EAAG,MAAA;AAAA,cACH;AAAA;AAAA;AACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"CarouselAutoplayIndicatorSVG.js","sources":["../src/CarouselAutoplayIndicatorSVG.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type Ref, type SVGAttributes } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltCarouselAutoplayIndicatorSVG\");\n\nexport interface CarouselAutoplayIndicatorSVGProps\n  extends SVGAttributes<SVGSVGElement> {\n  /**\n   * Class name to apply to the SVG element.\n   */\n  className?: string;\n  /**\n   * Ref to attach to progress indicator element\n   */\n  barRef: Ref<SVGCircleElement>;\n  /**\n   * Size of the SVG in pixels.\n   */\n  size: number;\n  /**\n   * Stroke width of the progress indicator in pixels.\n   */\n  strokeWidth: number;\n  /**\n   * Radius of the progress indicator circle.\n   */\n  radius: number;\n}\n\nexport const CarouselAutoplayIndicatorSVG = forwardRef<\n  SVGSVGElement,\n  CarouselAutoplayIndicatorSVGProps\n>(\n  (\n    {\n      barRef,\n      className,\n      radius,\n      size,\n      strokeWidth,\n    }: CarouselAutoplayIndicatorSVGProps,\n    ref,\n  ) => {\n    return (\n      <svg\n        className={clsx(withBaseName(), className)}\n        width={size}\n        height={size}\n        aria-hidden\n        ref={ref}\n      >\n        <circle\n          ref={barRef}\n          className={withBaseName(\"bar\")}\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          strokeWidth={strokeWidth}\n        />\n      </svg>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","jsx","clsx"],"mappings":";;;;;;;AAIA,MAAM,YAAA,GAAeA,kBAAa,kCAAkC,CAAA;AA0B7D,MAAM,4BAAA,GAA+BC,gBAAA;AAAA,EAI1C,CACE;AAAA,IACE,MAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,KAEF,GAAA,KACG;AACH,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,KAAA,EAAO,IAAA;AAAA,QACP,MAAA,EAAQ,IAAA;AAAA,QACR,aAAA,EAAW,IAAA;AAAA,QACX,GAAA;AAAA,QAEA,QAAA,kBAAAD,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,MAAA;AAAA,YACL,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,YAC7B,IAAI,IAAA,GAAO,CAAA;AAAA,YACX,IAAI,IAAA,GAAO,CAAA;AAAA,YACX,CAAA,EAAG,MAAA;AAAA,YACH;AAAA;AAAA;AACF;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/CarouselCard.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCarouselCard {\n  display: flex;\n  transform: translate3d(0, 0, 0);\n  flex: 0 0 var(--carousel-slide-size);\n  min-width: 0;\n  padding-left: var(--carousel-slide-spacing);\n  box-sizing: border-box;\n}\n\n.saltCarouselCard-content {\n  display: flex;\n  user-select: none;\n  overflow: hidden;\n  flex-direction: column;\n  gap: var(--salt-spacing-200);\n  flex-grow: 1;\n}\n\n.saltCarouselCard:focus-visible {\n  outline: none;\n}\n\n.saltCarouselCard:focus-visible::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: var(--carousel-slide-spacing);\n  right: 0;\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-focused-outlineWidth) * -1);\n  cursor: var(--salt-cursor-hover);\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltCarouselCard-body {\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  flex-grow: 1;\n  padding-bottom: var(--salt-spacing-200);\n}\n\n.saltCarouselCard-header {\n  padding-bottom: var(--salt-spacing-100);\n}\n.saltCarouselCard-actions {\n  padding-top: var(--salt-spacing-200);\n}\n\n.saltCarouselCard-body.saltCarouselCard-bordered-body {\n  padding: 0 var(--salt-spacing-200) var(--salt-spacing-200) var(--salt-spacing-200);\n}\n\n.saltCarouselCard-content h2,\n.saltCarouselCard-content h3 {\n  margin: 0;\n}\n\n.saltCarouselCard-bordered {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-radius: var(--salt-palette-corner, 0);\n}\n";
+var css_248z = ".saltCarouselCard {\n  display: flex;\n  transform: translate3d(0, 0, 0);\n  flex: 0 0 var(--carousel-slide-size);\n  min-width: 0;\n  padding-left: var(--carousel-slide-spacing);\n  box-sizing: border-box;\n}\n\n.saltCarouselCard-content {\n  display: flex;\n  user-select: none;\n  overflow: hidden;\n  flex-direction: column;\n  gap: var(--salt-spacing-200);\n  flex-grow: 1;\n}\n\n.saltCarouselCard:focus-visible {\n  outline: none;\n}\n\n.saltCarouselCard:not(.saltCarouselCard-bordered):focus-visible::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: var(--carousel-slide-spacing);\n  right: 0;\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-focused-outlineWidth) * -1);\n  cursor: var(--salt-cursor-hover);\n}\n\n.saltCarouselCard-bordered:focus-visible::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: var(--carousel-slide-spacing);\n  right: 0;\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-focused-outlineWidth) * -1);\n  cursor: var(--salt-cursor-hover);\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltCarouselCard-body {\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  flex-grow: 1;\n  padding-bottom: var(--salt-spacing-200);\n}\n\n.saltCarouselCard-header {\n  padding-bottom: var(--salt-spacing-100);\n}\n.saltCarouselCard-actions {\n  padding-top: var(--salt-spacing-200);\n}\n\n.saltCarouselCard-body.saltCarouselCard-bordered-body {\n  padding: 0 var(--salt-spacing-200) var(--salt-spacing-200) var(--salt-spacing-200);\n}\n\n.saltCarouselCard-content h2,\n.saltCarouselCard-content h3 {\n  margin: 0;\n}\n\n.saltCarouselCard-bordered-content {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-radius: var(--salt-palette-corner, 0);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CarouselCard.css.js.map

package/dist-cjs/CarouselCard.js

@@ -23,7 +23,11 @@ const CarouselCard = react.forwardRef(
       "div",
       {
         "aria-roledescription": "slide",
-        className: clsx.clsx([withBaseName(), className]),
+        className: clsx.clsx([
+          withBaseName(),
+          { [withBaseName("bordered")]: appearance === "bordered" },
+          className
+        ]),
         ref,
         role: ariaVariant,
         ...rest,
@@ -31,7 +35,7 @@ const CarouselCard = react.forwardRef(
           "div",
           {
             className: clsx.clsx(withBaseName("content"), {
-              [withBaseName("bordered")]: appearance === "bordered"
+              [withBaseName("bordered-content")]: appearance === "bordered"
             }),
             children: [
               media,

package/dist-cjs/CarouselCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselCard.js","sources":["../src/CarouselCard.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentProps, forwardRef, type ReactNode } from \"react\";\nimport saltCarouselCardCss from \"./CarouselCard.css\";\nimport { useCarouselContext } from \"./CarouselContext\";\n\nconst withBaseName = makePrefixer(\"saltCarouselCard\");\n\n/**\n * Props for the CarouselCard component.\n */\nexport interface CarouselCardProps extends ComponentProps<\"div\"> {\n  /**\n   * Actions to be displayed in the content footer.\n   * This can include buttons or any other interactive elements.\n   */\n  actions?: ReactNode;\n\n  /**\n   * Media content to be displayed inside the slide.\n   * This could include images, videos, etc., that are visually prominent.\n   * It differs from children in that media is intended to be the main visual element of the slide.\n   */\n  media?: ReactNode;\n\n  /**\n   * The appearance of the slide. Options are 'bordered', and 'transparent'.\n   * 'transparent' is the default value.\n   **/\n  appearance?: \"bordered\" | \"transparent\";\n\n  /**\n   * Header content to be displayed at the top of the slide.\n   * This can be text or any other React node.\n   */\n  header?: ReactNode;\n\n  /**\n   * Carousel slide id.\n   * This can be used to uniquely identify the slide.\n   */\n  id?: string;\n}\n\nexport const CarouselCard = forwardRef<HTMLDivElement, CarouselCardProps>(\n  function CarouselCard(\n    { actions, appearance, children, className, header, media, ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-card\",\n      css: saltCarouselCardCss,\n      window: targetWindow,\n    });\n\n    const { ariaVariant } = useCarouselContext();\n\n    return (\n      <div\n        aria-roledescription=\"slide\"\n        className={clsx([withBaseName(), className])}\n        ref={ref}\n        role={ariaVariant}\n        {...rest}\n      >\n        <div\n          className={clsx(withBaseName(\"content\"), {\n            [withBaseName(\"bordered\")]: appearance === \"bordered\",\n          })}\n        >\n          {media}\n          {children && (\n            <div\n              className={clsx(withBaseName(\"body\"), {\n                [withBaseName(\"bordered-body\")]: appearance === \"bordered\",\n              })}\n            >\n              {header ? (\n                <div className={withBaseName(\"header\")}>{header}</div>\n              ) : null}\n              {children}\n              {actions ? (\n                <div className={withBaseName(\"actions\")}>{actions}</div>\n              ) : null}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","CarouselCard","useWindow","useComponentCssInjection","saltCarouselCardCss","useCarouselContext","jsx","clsx","jsxs"],"mappings":";;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAsC7C,MAAM,YAAA,GAAeC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CACP,EAAE,OAAA,EAAS,UAAA,EAAY,QAAA,EAAU,SAAA,EAAW,MAAA,EAAQ,KAAA,EAAO,GAAG,IAAA,EAAK,EACnE,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,cAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,WAAA,EAAY,GAAIC,kCAAA,EAAmB;AAE3C,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,sBAAA,EAAqB,OAAA;AAAA,QACrB,WAAWC,SAAA,CAAK,CAAC,YAAA,EAAa,EAAG,SAAS,CAAC,CAAA;AAAA,QAC3C,GAAA;AAAA,QACA,IAAA,EAAM,WAAA;AAAA,QACL,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAAC,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWD,SAAA,CAAK,YAAA,CAAa,SAAS,CAAA,EAAG;AAAA,cACvC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAA,KAAe;AAAA,aAC5C,CAAA;AAAA,YAEA,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cACA,QAAA,oBACCC,eAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAWD,SAAA,CAAK,YAAA,CAAa,MAAM,CAAA,EAAG;AAAA,oBACpC,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG,UAAA,KAAe;AAAA,mBACjD,CAAA;AAAA,kBAEA,QAAA,EAAA;AAAA,oBAAA,MAAA,kCACE,KAAA,EAAA,EAAI,SAAA,EAAW,aAAa,QAAQ,CAAA,EAAI,kBAAO,CAAA,GAC9C,IAAA;AAAA,oBACH,QAAA;AAAA,oBACA,OAAA,kCACE,KAAA,EAAA,EAAI,SAAA,EAAW,aAAa,SAAS,CAAA,EAAI,mBAAQ,CAAA,GAChD;AAAA;AAAA;AAAA;AACN;AAAA;AAAA;AAEJ;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"CarouselCard.js","sources":["../src/CarouselCard.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentProps, forwardRef, type ReactNode } from \"react\";\nimport saltCarouselCardCss from \"./CarouselCard.css\";\nimport { useCarouselContext } from \"./CarouselContext\";\n\nconst withBaseName = makePrefixer(\"saltCarouselCard\");\n\n/**\n * Props for the CarouselCard component.\n */\nexport interface CarouselCardProps extends ComponentProps<\"div\"> {\n  /**\n   * Actions to be displayed in the content footer.\n   * This can include buttons or any other interactive elements.\n   */\n  actions?: ReactNode;\n\n  /**\n   * Media content to be displayed inside the slide.\n   * This could include images, videos, etc., that are visually prominent.\n   * It differs from children in that media is intended to be the main visual element of the slide.\n   */\n  media?: ReactNode;\n\n  /**\n   * The appearance of the slide. Options are 'bordered', and 'transparent'.\n   * 'transparent' is the default value.\n   **/\n  appearance?: \"bordered\" | \"transparent\";\n\n  /**\n   * Header content to be displayed at the top of the slide.\n   * This can be text or any other React node.\n   */\n  header?: ReactNode;\n\n  /**\n   * Carousel slide id.\n   * This can be used to uniquely identify the slide.\n   */\n  id?: string;\n}\n\nexport const CarouselCard = forwardRef<HTMLDivElement, CarouselCardProps>(\n  function CarouselCard(\n    { actions, appearance, children, className, header, media, ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-card\",\n      css: saltCarouselCardCss,\n      window: targetWindow,\n    });\n\n    const { ariaVariant } = useCarouselContext();\n\n    return (\n      <div\n        aria-roledescription=\"slide\"\n        className={clsx([\n          withBaseName(),\n          { [withBaseName(\"bordered\")]: appearance === \"bordered\" },\n          className,\n        ])}\n        ref={ref}\n        role={ariaVariant}\n        {...rest}\n      >\n        <div\n          className={clsx(withBaseName(\"content\"), {\n            [withBaseName(\"bordered-content\")]: appearance === \"bordered\",\n          })}\n        >\n          {media}\n          {children && (\n            <div\n              className={clsx(withBaseName(\"body\"), {\n                [withBaseName(\"bordered-body\")]: appearance === \"bordered\",\n              })}\n            >\n              {header ? (\n                <div className={withBaseName(\"header\")}>{header}</div>\n              ) : null}\n              {children}\n              {actions ? (\n                <div className={withBaseName(\"actions\")}>{actions}</div>\n              ) : null}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","CarouselCard","useWindow","useComponentCssInjection","saltCarouselCardCss","useCarouselContext","jsx","clsx","jsxs"],"mappings":";;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAsC7C,MAAM,YAAA,GAAeC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CACP,EAAE,OAAA,EAAS,UAAA,EAAY,QAAA,EAAU,SAAA,EAAW,MAAA,EAAQ,KAAA,EAAO,GAAG,IAAA,EAAK,EACnE,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,cAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,WAAA,EAAY,GAAIC,kCAAA,EAAmB;AAE3C,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,sBAAA,EAAqB,OAAA;AAAA,QACrB,WAAWC,SAAA,CAAK;AAAA,UACd,YAAA,EAAa;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,eAAe,UAAA,EAAW;AAAA,UACxD;AAAA,SACD,CAAA;AAAA,QACD,GAAA;AAAA,QACA,IAAA,EAAM,WAAA;AAAA,QACL,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAAC,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWD,SAAA,CAAK,YAAA,CAAa,SAAS,CAAA,EAAG;AAAA,cACvC,CAAC,YAAA,CAAa,kBAAkB,CAAC,GAAG,UAAA,KAAe;AAAA,aACpD,CAAA;AAAA,YAEA,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cACA,QAAA,oBACCC,eAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAWD,SAAA,CAAK,YAAA,CAAa,MAAM,CAAA,EAAG;AAAA,oBACpC,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG,UAAA,KAAe;AAAA,mBACjD,CAAA;AAAA,kBAEA,QAAA,EAAA;AAAA,oBAAA,MAAA,kCACE,KAAA,EAAA,EAAI,SAAA,EAAW,aAAa,QAAQ,CAAA,EAAI,kBAAO,CAAA,GAC9C,IAAA;AAAA,oBACH,QAAA;AAAA,oBACA,OAAA,kCACE,KAAA,EAAA,EAAI,SAAA,EAAW,aAAa,SAAS,CAAA,EAAI,mBAAQ,CAAA,GAChD;AAAA;AAAA;AAAA;AACN;AAAA;AAAA;AAEJ;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/CarouselSlides.js

@@ -16,6 +16,7 @@ const ANNOUNCEMENT_DURATION = 1200;
 const withBaseName = core.makePrefixer("saltCarouselSlides");
 const announceSlideChangesFrom = [
   "drag",
+  "focus",
   "navigation"
 ];
 const CarouselSlides = react.forwardRef(
@@ -34,10 +35,16 @@ const CarouselSlides = react.forwardRef(
       emblaRef,
       carouselId
     } = CarouselContext.useCarouselContext();
-    const carouselRef = core.useForkRef(ref, emblaRef);
+    const containerRef = react.useRef(null);
+    const forkedEmblaRef = core.useForkRef(ref, emblaRef);
+    const carouselRef = core.useForkRef(
+      forkedEmblaRef,
+      containerRef
+    );
     const slideRefs = react.useRef([]);
-    const [focusSlideIndex, setFocusedSlideIndex] = react.useState(-1);
+    const [focusedSlideIndex, setFocusedSlideIndex] = react.useState(-1);
     const [dragging, setDragging] = react.useState(false);
+    const focusOnSettle = react.useRef(false);
     const [stableScrollSnap, setStableScrollSnap] = react.useState(void 0);
     const visibleSlideIndexes = getVisibleSlideIndexes.getVisibleSlideIndexes(
       emblaApi,
@@ -48,6 +55,12 @@ const CarouselSlides = react.forwardRef(
       const handleSettle = (emblaApi2) => {
         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;
@@ -62,29 +75,39 @@ const CarouselSlides = react.forwardRef(
         emblaApi.off("scroll", scrollCallback);
         emblaApi.off("pointerDown", pointerDownCallback);
       };
-    }, [emblaApi]);
-    react.useLayoutEffect(() => {
-      if (focusSlideIndex >= 0) {
-        const numberOfSnaps = (emblaApi == null ? void 0 : emblaApi.scrollSnapList().length) ?? 1;
-        const numberOfSlidesPerSnap = slideRefs.current.length / numberOfSnaps;
+    }, [emblaApi, setAnnouncementState]);
+    react.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]);
+    react.useEffect(() => {
+      const numberOfSnaps = (emblaApi == null ? void 0 : emblaApi.scrollSnapList().length) ?? 1;
+      const numberOfSlidesPerSnap = slideRefs.current.length / numberOfSnaps;
+      if (focusedSlideIndex >= 0) {
         const nearestScrollSnap = Math.floor(
-          focusSlideIndex / numberOfSlidesPerSnap
+          focusedSlideIndex / numberOfSlidesPerSnap
         );
         if ((emblaApi == null ? void 0 : emblaApi.selectedScrollSnap()) !== nearestScrollSnap) {
-          setAnnouncementState("focus");
           emblaApi == null ? void 0 : emblaApi.scrollTo(nearestScrollSnap);
+          focusOnSettle.current = true;
         }
-        setTimeout(() => {
-          var _a;
-          (_a = slideRefs.current[focusSlideIndex]) == null ? void 0 : _a.focus();
-        }, 0);
+      } 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);
       }
-    }, [focusSlideIndex, emblaApi, setAnnouncementState]);
+    }, [focusedSlideIndex, emblaApi]);
     react.useEffect(() => {
       if (disableSlideAnnouncements === false) {
         setAnnouncementState(void 0);
       }
-    }, [disableSlideAnnouncements]);
+    }, [disableSlideAnnouncements, setAnnouncementState]);
     react.useEffect(() => {
       if (stableScrollSnap === void 0 || disableSlideAnnouncements || !announcementState || announceSlideChangesFrom.indexOf(announcementState) === -1) {
         return;
@@ -105,17 +128,22 @@ const CarouselSlides = react.forwardRef(
       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();
-          setFocusedSlideIndex((prevState) => Math.max(prevState - 1, 0));
+          const prevSnap = Math.max(currentSnap - 1, 0);
+          const newIndex = prevSnap * numberOfSlidesPerSnap;
+          setFocusedSlideIndex(newIndex);
           break;
         }
         case "ArrowRight": {
           event.preventDefault();
-          setFocusedSlideIndex(
-            (prevState) => Math.min(prevState + 1, slideRefs.current.length - 1)
-          );
+          const nextSnap = Math.min(currentSnap + 1, numberOfSnaps - 1);
+          const newIndex = nextSnap * numberOfSlidesPerSnap;
+          setFocusedSlideIndex(newIndex);
           break;
         }
       }
@@ -152,15 +180,14 @@ const CarouselSlides = react.forwardRef(
             children: react.Children.map(children, (child, index) => {
               const childElement = child;
               const existingId = childElement.props.id;
-              const isHidden = !visibleSlideIndexes.includes(index + 1);
+              const isFocused = focusedSlideIndex === index;
+              const isHidden = !visibleSlideIndexes.includes(index + 1) && !isFocused;
               const element = child;
               return react.cloneElement(element, {
                 "aria-hidden": isHidden,
                 id: existingId ?? `${carouselId}-slide${index + 1}`,
-                onMouseDown: (event) => event.preventDefault(),
                 onFocus: (event) => {
                   var _a, _b;
-                  event.preventDefault();
                   setFocusedSlideIndex(index);
                   (_b = (_a = element.props) == null ? void 0 : _a.onFocus) == null ? void 0 : _b.call(_a, event);
                 },

package/dist-cjs/CarouselSlides.js.map

@@ -1 +1 @@
-{"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  forwardRef,\n  type KeyboardEvent,\n  type MouseEventHandler,\n  type SyntheticEvent,\n  useEffect,\n  useLayoutEffect,\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  \"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 carouselRef = useForkRef<HTMLDivElement>(ref, emblaRef);\n\n    const slideRefs = useRef<(HTMLDivElement | null)[]>([]);\n    const [focusSlideIndex, setFocusedSlideIndex] = useState<number>(-1);\n    const [dragging, setDragging] = useState(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      };\n\n      if (!emblaApi) {\n        return;\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]);\n\n    useLayoutEffect(() => {\n      if (focusSlideIndex >= 0) {\n        const numberOfSnaps = emblaApi?.scrollSnapList().length ?? 1;\n        const numberOfSlidesPerSnap = slideRefs.current.length / numberOfSnaps;\n        const nearestScrollSnap = Math.floor(\n          focusSlideIndex / numberOfSlidesPerSnap,\n        );\n        if (emblaApi?.selectedScrollSnap() !== nearestScrollSnap) {\n          setAnnouncementState(\"focus\");\n          emblaApi?.scrollTo(nearestScrollSnap);\n        }\n        setTimeout(() => {\n          slideRefs.current[focusSlideIndex]?.focus();\n        }, 0);\n      }\n    }, [focusSlideIndex, emblaApi, setAnnouncementState]);\n\n    useEffect(() => {\n      if (disableSlideAnnouncements === false) {\n        setAnnouncementState(undefined);\n      }\n    }, [disableSlideAnnouncements]);\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      switch (event.key) {\n        case \"ArrowLeft\": {\n          event.preventDefault();\n          setFocusedSlideIndex((prevState) => Math.max(prevState - 1, 0));\n          break;\n        }\n        case \"ArrowRight\": {\n          event.preventDefault();\n          setFocusedSlideIndex((prevState) =>\n            Math.min(prevState + 1, slideRefs.current.length - 1),\n          );\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 React.ReactElement;\n            const existingId = childElement.props.id;\n            const isHidden = !visibleSlideIndexes.includes(index + 1);\n            const element = child as React.ReactElement;\n            return cloneElement(element, {\n              \"aria-hidden\": isHidden,\n              id: existingId ?? `${carouselId}-slide${index + 1}`,\n              onMouseDown: (event: SyntheticEvent) => event.preventDefault(),\n              onFocus: (event: FocusEvent) => {\n                event.preventDefault();\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":["makePrefixer","forwardRef","CarouselSlides","useWindow","useComponentCssInjection","carouselSlidesCss","useCarouselContext","useForkRef","useRef","useState","getVisibleSlideIndexes","useAriaAnnouncer","useEffect","emblaApi","createCustomSettle","useLayoutEffect","getVisibleSlideDescription","jsx","clsx","Children","cloneElement"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAM,qBAAA,GAAwB,IAAA;AAO9B,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAEtD,MAAM,wBAAA,GAA0D;AAAA,EAC9D,MAAA;AAAA,EACA;AACF,CAAA;AAEO,MAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,eAAAA,CACP,EAAE,QAAA,EAAU,SAAA,EAAW,IAAI,SAAA,EAAW,GAAG,IAAA,EAAK,EAC9C,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,gBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM;AAAA,MACJ,yBAAA;AAAA,MACA,iBAAA;AAAA,MACA,oBAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,QACEC,kCAAA,EAAmB;AAEvB,IAAA,MAAM,WAAA,GAAcC,eAAA,CAA2B,GAAA,EAAK,QAAQ,CAAA;AAE5D,IAAA,MAAM,SAAA,GAAYC,YAAA,CAAkC,EAAE,CAAA;AACtD,IAAA,MAAM,CAAC,eAAA,EAAiB,oBAAoB,CAAA,GAAIC,eAAiB,EAAE,CAAA;AACnE,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,eAAS,KAAK,CAAA;AAE9C,IAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAIA,eAE9C,MAAS,CAAA;AAEX,IAAA,MAAM,mBAAA,GAAsBC,6CAAA;AAAA,MAC1B,QAAA;AAAA,MACA,gBAAA,IAAoB;AAAA,KACtB;AACA,IAAA,MAAM,EAAE,QAAA,EAAS,GAAIC,qBAAA,EAAiB;AAEtC,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,MAAM,YAAA,GAAe,CAACC,SAAAA,KAAgC;AACpD,QAAA,MAAM,kBAAA,GAAA,CAAqBA,SAAAA,IAAA,IAAA,GAAA,MAAA,GAAAA,SAAAA,CAAU,kBAAA,EAAA,KAAwB,CAAA;AAC7D,QAAA,mBAAA,CAAoB,kBAAkB,CAAA;AAAA,MACxC,CAAA;AAEA,MAAA,IAAI,CAAC,QAAA,EAAU;AACb,QAAA;AAAA,MACF;AACA,MAAA,MAAM,cAAA,GAAiBC,sCAAmB,YAAY,CAAA;AACtD,MAAA,MAAM,sBAAsB,MAAM;AAChC,QAAA,oBAAA,CAAqB,MAAM,CAAA;AAAA,MAC7B,CAAA;AACA,MAAA,QAAA,CAAS,EAAA,CAAG,UAAU,cAAc,CAAA;AACpC,MAAA,QAAA,CAAS,EAAA,CAAG,eAAe,mBAAmB,CAAA;AAE9C,MAAA,OAAO,MAAM;AACX,QAAA,QAAA,CAAS,GAAA,CAAI,UAAU,cAAc,CAAA;AACrC,QAAA,QAAA,CAAS,GAAA,CAAI,eAAe,mBAAmB,CAAA;AAAA,MACjD,CAAA;AAAA,IACF,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,IAAAC,qBAAA,CAAgB,MAAM;AACpB,MAAA,IAAI,mBAAmB,CAAA,EAAG;AACxB,QAAA,MAAM,aAAA,GAAA,CAAgB,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,cAAA,EAAA,CAAiB,MAAA,KAAU,CAAA;AAC3D,QAAA,MAAM,qBAAA,GAAwB,SAAA,CAAU,OAAA,CAAQ,MAAA,GAAS,aAAA;AACzD,QAAA,MAAM,oBAAoB,IAAA,CAAK,KAAA;AAAA,UAC7B,eAAA,GAAkB;AAAA,SACpB;AACA,QAAA,IAAA,CAAI,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,0BAAyB,iBAAA,EAAmB;AACxD,UAAA,oBAAA,CAAqB,OAAO,CAAA;AAC5B,UAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,QAAA,CAAS,iBAAA,CAAA;AAAA,QACrB;AACA,QAAA,UAAA,CAAW,MAAM;AA9GzB,UAAA,IAAA,EAAA;AA+GU,UAAA,CAAA,EAAA,GAAA,SAAA,CAAU,OAAA,CAAQ,eAAe,CAAA,KAAjC,IAAA,GAAA,MAAA,GAAA,EAAA,CAAoC,KAAA,EAAA;AAAA,QACtC,GAAG,CAAC,CAAA;AAAA,MACN;AAAA,IACF,CAAA,EAAG,CAAC,eAAA,EAAiB,QAAA,EAAU,oBAAoB,CAAC,CAAA;AAEpD,IAAAH,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,8BAA8B,KAAA,EAAO;AACvC,QAAA,oBAAA,CAAqB,MAAS,CAAA;AAAA,MAChC;AAAA,IACF,CAAA,EAAG,CAAC,yBAAyB,CAAC,CAAA;AAE9B,IAAAA,eAAA,CAAU,MAAM;AACd,MAAA,IACE,gBAAA,KAAqB,UACrB,yBAAA,IACA,CAAC,qBACD,wBAAA,CAAyB,OAAA,CAAQ,iBAAiB,CAAA,KAAM,EAAA,EACxD;AACA,QAAA;AAAA,MACF;AACA,MAAA,MAAM,YAAA,GAAeI,qDAAA;AAAA,QACnB,QAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,QAAA,CAAS,cAAc,qBAAqB,CAAA;AAAA,IAC9C,CAAA,EAAG;AAAA,MACD,QAAA;AAAA,MACA,iBAAA;AAAA,MACA,yBAAA;AAAA,MACA,gBAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAAyC;AAC9D,MAAA,IAAI,MAAM,MAAA,EAAQ;AAChB,QAAA;AAAA,MACF;AACA,MAAA,QAAQ,MAAM,GAAA;AAAK,QACjB,KAAK,WAAA,EAAa;AAChB,UAAA,KAAA,CAAM,cAAA,EAAe;AACrB,UAAA,oBAAA,CAAqB,CAAC,SAAA,KAAc,IAAA,CAAK,IAAI,SAAA,GAAY,CAAA,EAAG,CAAC,CAAC,CAAA;AAC9D,UAAA;AAAA,QACF;AAAA,QACA,KAAK,YAAA,EAAc;AACjB,UAAA,KAAA,CAAM,cAAA,EAAe;AACrB,UAAA,oBAAA;AAAA,YAAqB,CAAC,cACpB,IAAA,CAAK,GAAA,CAAI,YAAY,CAAA,EAAG,SAAA,CAAU,OAAA,CAAQ,MAAA,GAAS,CAAC;AAAA,WACtD;AACA,UAAA;AAAA,QACF;AAAA;AAEF,MAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,KAAA,CAAA;AAAA,IACd,CAAA;AAEA,IAAA,MAAM,eAAA,GAAqD,CAAC,KAAA,KAAU;AArK1E,MAAA,IAAA,EAAA;AAsKM,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,CAAA,EAAA,GAAA,IAAA,CAAK,gBAAL,IAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,EAAmB,KAAA,CAAA;AAAA,IACrB,CAAA;AACA,IAAA,MAAM,aAAA,GAAmD,CAAC,KAAA,KAAU;AAzKxE,MAAA,IAAA,EAAA;AA0KM,MAAA,WAAA,CAAY,KAAK,CAAA;AACjB,MAAA,CAAA,EAAA,GAAA,IAAA,CAAK,cAAL,IAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,EAAiB,KAAA,CAAA;AAAA,IACnB,CAAA;AAEA,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,aAAA;AAAA,QACX,WAAA,EAAa,eAAA;AAAA,QACb,SAAA,EAAW,aAAA;AAAA,QACX,GAAA,EAAK,WAAA;AAAA,QACL,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA,EAAS;AAAA,UACvC;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAAD,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,YACnC,EAAA,EAAI,EAAA,IAAM,CAAA,EAAG,UAAU,CAAA,OAAA,CAAA;AAAA,YAEtB,QAAA,EAAAE,cAAA,CAAS,GAAA,CAAI,QAAA,EAAU,CAAC,OAAO,KAAA,KAAU;AACxC,cAAA,MAAM,YAAA,GAAe,KAAA;AACrB,cAAA,MAAM,UAAA,GAAa,aAAa,KAAA,CAAM,EAAA;AACtC,cAAA,MAAM,QAAA,GAAW,CAAC,mBAAA,CAAoB,QAAA,CAAS,QAAQ,CAAC,CAAA;AACxD,cAAA,MAAM,OAAA,GAAU,KAAA;AAChB,cAAA,OAAOC,mBAAa,OAAA,EAAS;AAAA,gBAC3B,aAAA,EAAe,QAAA;AAAA,gBACf,IAAI,UAAA,IAAc,CAAA,EAAG,UAAU,CAAA,MAAA,EAAS,QAAQ,CAAC,CAAA,CAAA;AAAA,gBACjD,WAAA,EAAa,CAAC,KAAA,KAA0B,KAAA,CAAM,cAAA,EAAe;AAAA,gBAC7D,OAAA,EAAS,CAAC,KAAA,KAAsB;AAxM9C,kBAAA,IAAA,EAAA,EAAA,EAAA;AAyMgB,kBAAA,KAAA,CAAM,cAAA,EAAe;AACrB,kBAAA,oBAAA,CAAqB,KAAK,CAAA;AAC1B,kBAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,OAAA,CAAQ,KAAA,KAAR,IAAA,GAAA,MAAA,GAAA,EAAA,CAAe,OAAA,KAAf,IAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EAAyB,KAAA,CAAA;AAAA,gBAC3B,CAAA;AAAA,gBACA,QAAA,EAAU,CAAC,QAAA,GAAW,CAAA,GAAI,EAAA;AAAA,gBAC1B,GAAA,EAAK,CAAC,EAAA,KAAuB;AAC3B,kBAAA,SAAA,CAAU,OAAA,CAAQ,KAAK,CAAA,GAAI,EAAA;AAAA,gBAC7B;AAAA,eACD,CAAA;AAAA,YACH,CAAC;AAAA;AAAA;AACH;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
+{"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":["makePrefixer","forwardRef","CarouselSlides","useWindow","useComponentCssInjection","carouselSlidesCss","useCarouselContext","useRef","useForkRef","useState","getVisibleSlideIndexes","useAriaAnnouncer","useEffect","emblaApi","createCustomSettle","getVisibleSlideDescription","jsx","clsx","Children","cloneElement"],"mappings":"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"}

package/dist-cjs/CarouselTabList.js

@@ -32,11 +32,17 @@ const CarouselTabList = react.forwardRef(
       var _a;
       let newIndex = focusedTabIndex ?? selectedIndex;
       if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        event.preventDefault();
         const direction = event.key === "ArrowLeft" ? -1 : 1;
-        newIndex = (newIndex + direction + scrollSnaps.length) % scrollSnaps.length;
+        newIndex = Math.max(
+          0,
+          Math.min(newIndex + direction, scrollSnaps.length - 1)
+        );
       } else if (event.key === "Home") {
+        event.preventDefault();
         newIndex = 0;
       } else if (event.key === "End") {
+        event.preventDefault();
         newIndex = scrollSnaps.length - 1;
       }
       if (newIndex !== focusedTabIndex) {

package/dist-cjs/CarouselTabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselTabList.js","sources":["../src/CarouselTabList.tsx"],"sourcesContent":["import { makePrefixer, type RenderPropsType, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type KeyboardEventHandler,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport {\n  CarouselTab,\n  type CarouselTabProps,\n  useCarouselTab,\n} from \"./CarouselTab\";\nimport carouselControlsCss from \"./CarouselTabList.css\";\nimport { getSlideDescription } from \"./getSlideDescription\";\nimport { getVisibleSlideIndexes } from \"./getVisibleSlideIndexes\";\n\nconst withBaseName = makePrefixer(\"saltCarouselTabList\");\n\n/**\n * Props for the CarouselTabList component.\n */\nexport interface CarouselTabListProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Render prop to enable customisation of tab button.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nexport interface CarouselTabRendererProps extends CarouselTabProps {\n  render?: CarouselTabListProps[\"render\"];\n}\n\nconst CarouselTabRenderer = forwardRef<\n  HTMLButtonElement,\n  CarouselTabRendererProps\n>((props, ref) => {\n  return renderProps(CarouselTab, { ...props, ref });\n});\n\nexport const CarouselTabList = forwardRef<HTMLDivElement, CarouselTabListProps>(\n  function CarouselTabList({ className, render, onKeyDown, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-controls\",\n      css: carouselControlsCss,\n      window: targetWindow,\n    });\n\n    const { emblaApi, setAriaVariant, setAnnouncementState } =\n      useCarouselContext();\n    const { selectedIndex, scrollSnaps } = useCarouselTab(emblaApi);\n\n    const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    const [focusedTabIndex, setFocusedTabIndex] = useState<number | null>(null);\n\n    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {\n      let newIndex = focusedTabIndex ?? selectedIndex;\n\n      if (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\") {\n        const direction = event.key === \"ArrowLeft\" ? -1 : 1;\n        newIndex =\n          (newIndex + 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 !== focusedTabIndex) {\n        buttonRefs.current[newIndex]?.focus();\n        setFocusedTabIndex(newIndex);\n      }\n      onKeyDown?.(event);\n    };\n\n    useEffect(() => {\n      setAriaVariant(\"tabpanel\");\n    }, [setAriaVariant]);\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(withBaseName(), className)}\n        onKeyDown={handleKeyDown}\n        ref={ref}\n        {...rest}\n      >\n        {scrollSnaps.map((_, scrollSnapIndex) => {\n          const visibleSlides = getVisibleSlideIndexes(\n            emblaApi,\n            scrollSnapIndex,\n          );\n          const startSlideNumber =\n            visibleSlides.length >= 1 ? visibleSlides[0] : 0;\n          const endSlideNumber =\n            visibleSlides.length > 1\n              ? visibleSlides[visibleSlides.length - 1]\n              : 0;\n          const slideNodes = emblaApi?.slideNodes();\n          const numberOfSlides = slideNodes?.length;\n\n          let ariaLabel: string;\n          if (endSlideNumber >= 1) {\n            ariaLabel = `Slide ${startSlideNumber} to ${endSlideNumber} of ${numberOfSlides}`;\n          } else {\n            const description = getSlideDescription(emblaApi, startSlideNumber);\n            ariaLabel = `${description}`;\n          }\n\n          const selected = selectedIndex === scrollSnapIndex;\n          const ariaControls = slideNodes?.length\n            ? slideNodes[startSlideNumber - 1].id\n            : undefined;\n\n          return (\n            <CarouselTabRenderer\n              key={`carouselTab-${scrollSnapIndex}}`}\n              ref={(element: HTMLButtonElement) => {\n                buttonRefs.current[scrollSnapIndex] = element;\n              }}\n              render={render}\n              role={\"tab\"}\n              selected={selected}\n              onBlur={() => {\n                setFocusedTabIndex(null);\n              }}\n              onFocus={() => {\n                setFocusedTabIndex(scrollSnapIndex);\n                setAnnouncementState(\"tab\");\n                emblaApi?.scrollTo(scrollSnapIndex);\n              }}\n              aria-label={ariaLabel}\n              aria-selected={selected}\n              tabIndex={selected && focusedTabIndex === null ? 0 : -1}\n              aria-controls={ariaControls}\n            />\n          );\n        })}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","renderProps","CarouselTab","CarouselTabList","useWindow","useComponentCssInjection","carouselControlsCss","useCarouselContext","useCarouselTab","useRef","useState","useEffect","jsx","clsx","getVisibleSlideIndexes","getSlideDescription"],"mappings":"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"}
+{"version":3,"file":"CarouselTabList.js","sources":["../src/CarouselTabList.tsx"],"sourcesContent":["import { makePrefixer, type RenderPropsType, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type KeyboardEventHandler,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport {\n  CarouselTab,\n  type CarouselTabProps,\n  useCarouselTab,\n} from \"./CarouselTab\";\nimport carouselControlsCss from \"./CarouselTabList.css\";\nimport { getSlideDescription } from \"./getSlideDescription\";\nimport { getVisibleSlideIndexes } from \"./getVisibleSlideIndexes\";\n\nconst withBaseName = makePrefixer(\"saltCarouselTabList\");\n\n/**\n * Props for the CarouselTabList component.\n */\nexport interface CarouselTabListProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Render prop to enable customisation of tab button.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nexport interface CarouselTabRendererProps extends CarouselTabProps {\n  render?: CarouselTabListProps[\"render\"];\n}\n\nconst CarouselTabRenderer = forwardRef<\n  HTMLButtonElement,\n  CarouselTabRendererProps\n>((props, ref) => {\n  return renderProps(CarouselTab, { ...props, ref });\n});\n\nexport const CarouselTabList = forwardRef<HTMLDivElement, CarouselTabListProps>(\n  function CarouselTabList({ className, render, onKeyDown, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-controls\",\n      css: carouselControlsCss,\n      window: targetWindow,\n    });\n\n    const { emblaApi, setAriaVariant, setAnnouncementState } =\n      useCarouselContext();\n    const { selectedIndex, scrollSnaps } = useCarouselTab(emblaApi);\n\n    const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    const [focusedTabIndex, setFocusedTabIndex] = useState<number | null>(null);\n\n    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {\n      let newIndex = focusedTabIndex ?? selectedIndex;\n\n      if (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\") {\n        event.preventDefault();\n        const direction = event.key === \"ArrowLeft\" ? -1 : 1;\n        newIndex = Math.max(\n          0,\n          Math.min(newIndex + direction, scrollSnaps.length - 1),\n        );\n      } else if (event.key === \"Home\") {\n        event.preventDefault();\n        newIndex = 0;\n      } else if (event.key === \"End\") {\n        event.preventDefault();\n        newIndex = scrollSnaps.length - 1;\n      }\n\n      if (newIndex !== focusedTabIndex) {\n        buttonRefs.current[newIndex]?.focus();\n        setFocusedTabIndex(newIndex);\n      }\n      onKeyDown?.(event);\n    };\n\n    useEffect(() => {\n      setAriaVariant(\"tabpanel\");\n    }, [setAriaVariant]);\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(withBaseName(), className)}\n        onKeyDown={handleKeyDown}\n        ref={ref}\n        {...rest}\n      >\n        {scrollSnaps.map((_, scrollSnapIndex) => {\n          const visibleSlides = getVisibleSlideIndexes(\n            emblaApi,\n            scrollSnapIndex,\n          );\n          const startSlideNumber =\n            visibleSlides.length >= 1 ? visibleSlides[0] : 0;\n          const endSlideNumber =\n            visibleSlides.length > 1\n              ? visibleSlides[visibleSlides.length - 1]\n              : 0;\n          const slideNodes = emblaApi?.slideNodes();\n          const numberOfSlides = slideNodes?.length;\n\n          let ariaLabel: string;\n          if (endSlideNumber >= 1) {\n            ariaLabel = `Slide ${startSlideNumber} to ${endSlideNumber} of ${numberOfSlides}`;\n          } else {\n            const description = getSlideDescription(emblaApi, startSlideNumber);\n            ariaLabel = `${description}`;\n          }\n\n          const selected = selectedIndex === scrollSnapIndex;\n          const ariaControls = slideNodes?.length\n            ? slideNodes[startSlideNumber - 1].id\n            : undefined;\n\n          return (\n            <CarouselTabRenderer\n              key={`carouselTab-${scrollSnapIndex}}`}\n              ref={(element: HTMLButtonElement) => {\n                buttonRefs.current[scrollSnapIndex] = element;\n              }}\n              render={render}\n              role={\"tab\"}\n              selected={selected}\n              onBlur={() => {\n                setFocusedTabIndex(null);\n              }}\n              onFocus={() => {\n                setFocusedTabIndex(scrollSnapIndex);\n                setAnnouncementState(\"tab\");\n                emblaApi?.scrollTo(scrollSnapIndex);\n              }}\n              aria-label={ariaLabel}\n              aria-selected={selected}\n              tabIndex={selected && focusedTabIndex === null ? 0 : -1}\n              aria-controls={ariaControls}\n            />\n          );\n        })}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","renderProps","CarouselTab","CarouselTabList","useWindow","useComponentCssInjection","carouselControlsCss","useCarouselContext","useCarouselTab","useRef","useState","useEffect","jsx","clsx","getVisibleSlideIndexes","getSlideDescription"],"mappings":"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"}

package/dist-cjs/createCustomSettle.js

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

package/dist-cjs/createCustomSettle.js.map

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

package/dist-es/CarouselAutoplayIndicator.css.js

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

package/dist-es/CarouselAutoplayIndicatorSVG.js

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

package/dist-es/CarouselAutoplayIndicatorSVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselAutoplayIndicatorSVG.js","sources":["../src/CarouselAutoplayIndicatorSVG.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type Ref, type SVGAttributes } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltCarouselAutoplayIndicatorSVG\");\n\nexport interface CarouselAutoplayIndicatorSVGProps\n  extends SVGAttributes<SVGSVGElement> {\n  /**\n   * Class name to apply to the SVG element.\n   */\n  className?: string;\n  /**\n   * Ref to attach to progress indicator element\n   */\n  barRef: Ref<SVGCircleElement>;\n  /**\n   * Size of the SVG in pixels.\n   */\n  size: number;\n  /**\n   * Stroke width of the progress indicator in pixels.\n   */\n  strokeWidth: number;\n  /**\n   * Radius of the progress indicator circle.\n   */\n  radius: number;\n}\n\nexport const CarouselAutoplayIndicatorSVG = forwardRef<\n  SVGSVGElement,\n  CarouselAutoplayIndicatorSVGProps\n>(\n  (\n    {\n      barRef,\n      className,\n      radius,\n      size,\n      strokeWidth,\n    }: CarouselAutoplayIndicatorSVGProps,\n    ref,\n  ) => {\n    return (\n      <svg\n        className={clsx(withBaseName(), className)}\n        width={size}\n        height={size}\n        aria-hidden\n        ref={ref}\n      >\n        <circle\n          className={withBaseName(\"track\")}\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          strokeWidth={strokeWidth}\n        />\n        <circle\n          ref={barRef}\n          className={withBaseName(\"bar\")}\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          strokeWidth={strokeWidth}\n        />\n      </svg>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;AAIA,MAAM,YAAA,GAAe,aAAa,kCAAkC,CAAA;AA0B7D,MAAM,4BAAA,GAA+B,UAAA;AAAA,EAI1C,CACE;AAAA,IACE,MAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,KAEF,GAAA,KACG;AACH,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,KAAA,EAAO,IAAA;AAAA,QACP,MAAA,EAAQ,IAAA;AAAA,QACR,aAAA,EAAW,IAAA;AAAA,QACX,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,IAAI,IAAA,GAAO,CAAA;AAAA,cACX,IAAI,IAAA,GAAO,CAAA;AAAA,cACX,CAAA,EAAG,MAAA;AAAA,cACH;AAAA;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,MAAA;AAAA,cACL,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,cAC7B,IAAI,IAAA,GAAO,CAAA;AAAA,cACX,IAAI,IAAA,GAAO,CAAA;AAAA,cACX,CAAA,EAAG,MAAA;AAAA,cACH;AAAA;AAAA;AACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"CarouselAutoplayIndicatorSVG.js","sources":["../src/CarouselAutoplayIndicatorSVG.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type Ref, type SVGAttributes } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltCarouselAutoplayIndicatorSVG\");\n\nexport interface CarouselAutoplayIndicatorSVGProps\n  extends SVGAttributes<SVGSVGElement> {\n  /**\n   * Class name to apply to the SVG element.\n   */\n  className?: string;\n  /**\n   * Ref to attach to progress indicator element\n   */\n  barRef: Ref<SVGCircleElement>;\n  /**\n   * Size of the SVG in pixels.\n   */\n  size: number;\n  /**\n   * Stroke width of the progress indicator in pixels.\n   */\n  strokeWidth: number;\n  /**\n   * Radius of the progress indicator circle.\n   */\n  radius: number;\n}\n\nexport const CarouselAutoplayIndicatorSVG = forwardRef<\n  SVGSVGElement,\n  CarouselAutoplayIndicatorSVGProps\n>(\n  (\n    {\n      barRef,\n      className,\n      radius,\n      size,\n      strokeWidth,\n    }: CarouselAutoplayIndicatorSVGProps,\n    ref,\n  ) => {\n    return (\n      <svg\n        className={clsx(withBaseName(), className)}\n        width={size}\n        height={size}\n        aria-hidden\n        ref={ref}\n      >\n        <circle\n          ref={barRef}\n          className={withBaseName(\"bar\")}\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          strokeWidth={strokeWidth}\n        />\n      </svg>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;AAIA,MAAM,YAAA,GAAe,aAAa,kCAAkC,CAAA;AA0B7D,MAAM,4BAAA,GAA+B,UAAA;AAAA,EAI1C,CACE;AAAA,IACE,MAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,KAEF,GAAA,KACG;AACH,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,KAAA,EAAO,IAAA;AAAA,QACP,MAAA,EAAQ,IAAA;AAAA,QACR,aAAA,EAAW,IAAA;AAAA,QACX,GAAA;AAAA,QAEA,QAAA,kBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,MAAA;AAAA,YACL,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,YAC7B,IAAI,IAAA,GAAO,CAAA;AAAA,YACX,IAAI,IAAA,GAAO,CAAA;AAAA,YACX,CAAA,EAAG,MAAA;AAAA,YACH;AAAA;AAAA;AACF;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-es/CarouselCard.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltCarouselCard {\n  display: flex;\n  transform: translate3d(0, 0, 0);\n  flex: 0 0 var(--carousel-slide-size);\n  min-width: 0;\n  padding-left: var(--carousel-slide-spacing);\n  box-sizing: border-box;\n}\n\n.saltCarouselCard-content {\n  display: flex;\n  user-select: none;\n  overflow: hidden;\n  flex-direction: column;\n  gap: var(--salt-spacing-200);\n  flex-grow: 1;\n}\n\n.saltCarouselCard:focus-visible {\n  outline: none;\n}\n\n.saltCarouselCard:focus-visible::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: var(--carousel-slide-spacing);\n  right: 0;\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-focused-outlineWidth) * -1);\n  cursor: var(--salt-cursor-hover);\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltCarouselCard-body {\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  flex-grow: 1;\n  padding-bottom: var(--salt-spacing-200);\n}\n\n.saltCarouselCard-header {\n  padding-bottom: var(--salt-spacing-100);\n}\n.saltCarouselCard-actions {\n  padding-top: var(--salt-spacing-200);\n}\n\n.saltCarouselCard-body.saltCarouselCard-bordered-body {\n  padding: 0 var(--salt-spacing-200) var(--salt-spacing-200) var(--salt-spacing-200);\n}\n\n.saltCarouselCard-content h2,\n.saltCarouselCard-content h3 {\n  margin: 0;\n}\n\n.saltCarouselCard-bordered {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-radius: var(--salt-palette-corner, 0);\n}\n";
+var css_248z = ".saltCarouselCard {\n  display: flex;\n  transform: translate3d(0, 0, 0);\n  flex: 0 0 var(--carousel-slide-size);\n  min-width: 0;\n  padding-left: var(--carousel-slide-spacing);\n  box-sizing: border-box;\n}\n\n.saltCarouselCard-content {\n  display: flex;\n  user-select: none;\n  overflow: hidden;\n  flex-direction: column;\n  gap: var(--salt-spacing-200);\n  flex-grow: 1;\n}\n\n.saltCarouselCard:focus-visible {\n  outline: none;\n}\n\n.saltCarouselCard:not(.saltCarouselCard-bordered):focus-visible::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: var(--carousel-slide-spacing);\n  right: 0;\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-focused-outlineWidth) * -1);\n  cursor: var(--salt-cursor-hover);\n}\n\n.saltCarouselCard-bordered:focus-visible::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: var(--carousel-slide-spacing);\n  right: 0;\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-focused-outlineWidth) * -1);\n  cursor: var(--salt-cursor-hover);\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltCarouselCard-body {\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  flex-grow: 1;\n  padding-bottom: var(--salt-spacing-200);\n}\n\n.saltCarouselCard-header {\n  padding-bottom: var(--salt-spacing-100);\n}\n.saltCarouselCard-actions {\n  padding-top: var(--salt-spacing-200);\n}\n\n.saltCarouselCard-body.saltCarouselCard-bordered-body {\n  padding: 0 var(--salt-spacing-200) var(--salt-spacing-200) var(--salt-spacing-200);\n}\n\n.saltCarouselCard-content h2,\n.saltCarouselCard-content h3 {\n  margin: 0;\n}\n\n.saltCarouselCard-bordered-content {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-radius: var(--salt-palette-corner, 0);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=CarouselCard.css.js.map

package/dist-es/CarouselCard.js

@@ -21,7 +21,11 @@ const CarouselCard = forwardRef(
       "div",
       {
         "aria-roledescription": "slide",
-        className: clsx([withBaseName(), className]),
+        className: clsx([
+          withBaseName(),
+          { [withBaseName("bordered")]: appearance === "bordered" },
+          className
+        ]),
         ref,
         role: ariaVariant,
         ...rest,
@@ -29,7 +33,7 @@ const CarouselCard = forwardRef(
           "div",
           {
             className: clsx(withBaseName("content"), {
-              [withBaseName("bordered")]: appearance === "bordered"
+              [withBaseName("bordered-content")]: appearance === "bordered"
             }),
             children: [
               media,

package/dist-es/CarouselCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselCard.js","sources":["../src/CarouselCard.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentProps, forwardRef, type ReactNode } from \"react\";\nimport saltCarouselCardCss from \"./CarouselCard.css\";\nimport { useCarouselContext } from \"./CarouselContext\";\n\nconst withBaseName = makePrefixer(\"saltCarouselCard\");\n\n/**\n * Props for the CarouselCard component.\n */\nexport interface CarouselCardProps extends ComponentProps<\"div\"> {\n  /**\n   * Actions to be displayed in the content footer.\n   * This can include buttons or any other interactive elements.\n   */\n  actions?: ReactNode;\n\n  /**\n   * Media content to be displayed inside the slide.\n   * This could include images, videos, etc., that are visually prominent.\n   * It differs from children in that media is intended to be the main visual element of the slide.\n   */\n  media?: ReactNode;\n\n  /**\n   * The appearance of the slide. Options are 'bordered', and 'transparent'.\n   * 'transparent' is the default value.\n   **/\n  appearance?: \"bordered\" | \"transparent\";\n\n  /**\n   * Header content to be displayed at the top of the slide.\n   * This can be text or any other React node.\n   */\n  header?: ReactNode;\n\n  /**\n   * Carousel slide id.\n   * This can be used to uniquely identify the slide.\n   */\n  id?: string;\n}\n\nexport const CarouselCard = forwardRef<HTMLDivElement, CarouselCardProps>(\n  function CarouselCard(\n    { actions, appearance, children, className, header, media, ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-card\",\n      css: saltCarouselCardCss,\n      window: targetWindow,\n    });\n\n    const { ariaVariant } = useCarouselContext();\n\n    return (\n      <div\n        aria-roledescription=\"slide\"\n        className={clsx([withBaseName(), className])}\n        ref={ref}\n        role={ariaVariant}\n        {...rest}\n      >\n        <div\n          className={clsx(withBaseName(\"content\"), {\n            [withBaseName(\"bordered\")]: appearance === \"bordered\",\n          })}\n        >\n          {media}\n          {children && (\n            <div\n              className={clsx(withBaseName(\"body\"), {\n                [withBaseName(\"bordered-body\")]: appearance === \"bordered\",\n              })}\n            >\n              {header ? (\n                <div className={withBaseName(\"header\")}>{header}</div>\n              ) : null}\n              {children}\n              {actions ? (\n                <div className={withBaseName(\"actions\")}>{actions}</div>\n              ) : null}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["CarouselCard","saltCarouselCardCss"],"mappings":";;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAsC7C,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,SAASA,aAAAA,CACP,EAAE,OAAA,EAAS,UAAA,EAAY,QAAA,EAAU,SAAA,EAAW,MAAA,EAAQ,KAAA,EAAO,GAAG,IAAA,EAAK,EACnE,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,WAAA,EAAY,GAAI,kBAAA,EAAmB;AAE3C,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,sBAAA,EAAqB,OAAA;AAAA,QACrB,WAAW,IAAA,CAAK,CAAC,YAAA,EAAa,EAAG,SAAS,CAAC,CAAA;AAAA,QAC3C,GAAA;AAAA,QACA,IAAA,EAAM,WAAA;AAAA,QACL,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA,CAAK,YAAA,CAAa,SAAS,CAAA,EAAG;AAAA,cACvC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAA,KAAe;AAAA,aAC5C,CAAA;AAAA,YAEA,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cACA,QAAA,oBACC,IAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,IAAA,CAAK,YAAA,CAAa,MAAM,CAAA,EAAG;AAAA,oBACpC,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG,UAAA,KAAe;AAAA,mBACjD,CAAA;AAAA,kBAEA,QAAA,EAAA;AAAA,oBAAA,MAAA,uBACE,KAAA,EAAA,EAAI,SAAA,EAAW,aAAa,QAAQ,CAAA,EAAI,kBAAO,CAAA,GAC9C,IAAA;AAAA,oBACH,QAAA;AAAA,oBACA,OAAA,uBACE,KAAA,EAAA,EAAI,SAAA,EAAW,aAAa,SAAS,CAAA,EAAI,mBAAQ,CAAA,GAChD;AAAA;AAAA;AAAA;AACN;AAAA;AAAA;AAEJ;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"CarouselCard.js","sources":["../src/CarouselCard.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentProps, forwardRef, type ReactNode } from \"react\";\nimport saltCarouselCardCss from \"./CarouselCard.css\";\nimport { useCarouselContext } from \"./CarouselContext\";\n\nconst withBaseName = makePrefixer(\"saltCarouselCard\");\n\n/**\n * Props for the CarouselCard component.\n */\nexport interface CarouselCardProps extends ComponentProps<\"div\"> {\n  /**\n   * Actions to be displayed in the content footer.\n   * This can include buttons or any other interactive elements.\n   */\n  actions?: ReactNode;\n\n  /**\n   * Media content to be displayed inside the slide.\n   * This could include images, videos, etc., that are visually prominent.\n   * It differs from children in that media is intended to be the main visual element of the slide.\n   */\n  media?: ReactNode;\n\n  /**\n   * The appearance of the slide. Options are 'bordered', and 'transparent'.\n   * 'transparent' is the default value.\n   **/\n  appearance?: \"bordered\" | \"transparent\";\n\n  /**\n   * Header content to be displayed at the top of the slide.\n   * This can be text or any other React node.\n   */\n  header?: ReactNode;\n\n  /**\n   * Carousel slide id.\n   * This can be used to uniquely identify the slide.\n   */\n  id?: string;\n}\n\nexport const CarouselCard = forwardRef<HTMLDivElement, CarouselCardProps>(\n  function CarouselCard(\n    { actions, appearance, children, className, header, media, ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-card\",\n      css: saltCarouselCardCss,\n      window: targetWindow,\n    });\n\n    const { ariaVariant } = useCarouselContext();\n\n    return (\n      <div\n        aria-roledescription=\"slide\"\n        className={clsx([\n          withBaseName(),\n          { [withBaseName(\"bordered\")]: appearance === \"bordered\" },\n          className,\n        ])}\n        ref={ref}\n        role={ariaVariant}\n        {...rest}\n      >\n        <div\n          className={clsx(withBaseName(\"content\"), {\n            [withBaseName(\"bordered-content\")]: appearance === \"bordered\",\n          })}\n        >\n          {media}\n          {children && (\n            <div\n              className={clsx(withBaseName(\"body\"), {\n                [withBaseName(\"bordered-body\")]: appearance === \"bordered\",\n              })}\n            >\n              {header ? (\n                <div className={withBaseName(\"header\")}>{header}</div>\n              ) : null}\n              {children}\n              {actions ? (\n                <div className={withBaseName(\"actions\")}>{actions}</div>\n              ) : null}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["CarouselCard","saltCarouselCardCss"],"mappings":";;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAsC7C,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,SAASA,aAAAA,CACP,EAAE,OAAA,EAAS,UAAA,EAAY,QAAA,EAAU,SAAA,EAAW,MAAA,EAAQ,KAAA,EAAO,GAAG,IAAA,EAAK,EACnE,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,WAAA,EAAY,GAAI,kBAAA,EAAmB;AAE3C,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,sBAAA,EAAqB,OAAA;AAAA,QACrB,WAAW,IAAA,CAAK;AAAA,UACd,YAAA,EAAa;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,eAAe,UAAA,EAAW;AAAA,UACxD;AAAA,SACD,CAAA;AAAA,QACD,GAAA;AAAA,QACA,IAAA,EAAM,WAAA;AAAA,QACL,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA,CAAK,YAAA,CAAa,SAAS,CAAA,EAAG;AAAA,cACvC,CAAC,YAAA,CAAa,kBAAkB,CAAC,GAAG,UAAA,KAAe;AAAA,aACpD,CAAA;AAAA,YAEA,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cACA,QAAA,oBACC,IAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,IAAA,CAAK,YAAA,CAAa,MAAM,CAAA,EAAG;AAAA,oBACpC,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG,UAAA,KAAe;AAAA,mBACjD,CAAA;AAAA,kBAEA,QAAA,EAAA;AAAA,oBAAA,MAAA,uBACE,KAAA,EAAA,EAAI,SAAA,EAAW,aAAa,QAAQ,CAAA,EAAI,kBAAO,CAAA,GAC9C,IAAA;AAAA,oBACH,QAAA;AAAA,oBACA,OAAA,uBACE,KAAA,EAAA,EAAI,SAAA,EAAW,aAAa,SAAS,CAAA,EAAI,mBAAQ,CAAA,GAChD;AAAA;AAAA;AAAA;AACN;AAAA;AAAA;AAEJ;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-es/CarouselSlides.js

@@ -3,7 +3,7 @@ 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, useState, useEffect, useLayoutEffect, Children, cloneElement } 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';
@@ -14,6 +14,7 @@ const ANNOUNCEMENT_DURATION = 1200;
 const withBaseName = makePrefixer("saltCarouselSlides");
 const announceSlideChangesFrom = [
   "drag",
+  "focus",
   "navigation"
 ];
 const CarouselSlides = forwardRef(
@@ -32,10 +33,16 @@ const CarouselSlides = forwardRef(
       emblaRef,
       carouselId
     } = useCarouselContext();
-    const carouselRef = useForkRef(ref, emblaRef);
+    const containerRef = useRef(null);
+    const forkedEmblaRef = useForkRef(ref, emblaRef);
+    const carouselRef = useForkRef(
+      forkedEmblaRef,
+      containerRef
+    );
     const slideRefs = useRef([]);
-    const [focusSlideIndex, setFocusedSlideIndex] = useState(-1);
+    const [focusedSlideIndex, setFocusedSlideIndex] = useState(-1);
     const [dragging, setDragging] = useState(false);
+    const focusOnSettle = useRef(false);
     const [stableScrollSnap, setStableScrollSnap] = useState(void 0);
     const visibleSlideIndexes = getVisibleSlideIndexes(
       emblaApi,
@@ -46,6 +53,12 @@ const CarouselSlides = forwardRef(
       const handleSettle = (emblaApi2) => {
         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;
@@ -60,29 +73,39 @@ const CarouselSlides = forwardRef(
         emblaApi.off("scroll", scrollCallback);
         emblaApi.off("pointerDown", pointerDownCallback);
       };
-    }, [emblaApi]);
-    useLayoutEffect(() => {
-      if (focusSlideIndex >= 0) {
-        const numberOfSnaps = (emblaApi == null ? void 0 : emblaApi.scrollSnapList().length) ?? 1;
-        const numberOfSlidesPerSnap = slideRefs.current.length / numberOfSnaps;
+    }, [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(
-          focusSlideIndex / numberOfSlidesPerSnap
+          focusedSlideIndex / numberOfSlidesPerSnap
         );
         if ((emblaApi == null ? void 0 : emblaApi.selectedScrollSnap()) !== nearestScrollSnap) {
-          setAnnouncementState("focus");
           emblaApi == null ? void 0 : emblaApi.scrollTo(nearestScrollSnap);
+          focusOnSettle.current = true;
         }
-        setTimeout(() => {
-          var _a;
-          (_a = slideRefs.current[focusSlideIndex]) == null ? void 0 : _a.focus();
-        }, 0);
+      } 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);
       }
-    }, [focusSlideIndex, emblaApi, setAnnouncementState]);
+    }, [focusedSlideIndex, emblaApi]);
     useEffect(() => {
       if (disableSlideAnnouncements === false) {
         setAnnouncementState(void 0);
       }
-    }, [disableSlideAnnouncements]);
+    }, [disableSlideAnnouncements, setAnnouncementState]);
     useEffect(() => {
       if (stableScrollSnap === void 0 || disableSlideAnnouncements || !announcementState || announceSlideChangesFrom.indexOf(announcementState) === -1) {
         return;
@@ -103,17 +126,22 @@ const CarouselSlides = forwardRef(
       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();
-          setFocusedSlideIndex((prevState) => Math.max(prevState - 1, 0));
+          const prevSnap = Math.max(currentSnap - 1, 0);
+          const newIndex = prevSnap * numberOfSlidesPerSnap;
+          setFocusedSlideIndex(newIndex);
           break;
         }
         case "ArrowRight": {
           event.preventDefault();
-          setFocusedSlideIndex(
-            (prevState) => Math.min(prevState + 1, slideRefs.current.length - 1)
-          );
+          const nextSnap = Math.min(currentSnap + 1, numberOfSnaps - 1);
+          const newIndex = nextSnap * numberOfSlidesPerSnap;
+          setFocusedSlideIndex(newIndex);
           break;
         }
       }
@@ -150,15 +178,14 @@ const CarouselSlides = forwardRef(
             children: Children.map(children, (child, index) => {
               const childElement = child;
               const existingId = childElement.props.id;
-              const isHidden = !visibleSlideIndexes.includes(index + 1);
+              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}`,
-                onMouseDown: (event) => event.preventDefault(),
                 onFocus: (event) => {
                   var _a, _b;
-                  event.preventDefault();
                   setFocusedSlideIndex(index);
                   (_b = (_a = element.props) == null ? void 0 : _a.onFocus) == null ? void 0 : _b.call(_a, event);
                 },

package/dist-es/CarouselSlides.js.map

@@ -1 +1 @@
-{"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  forwardRef,\n  type KeyboardEvent,\n  type MouseEventHandler,\n  type SyntheticEvent,\n  useEffect,\n  useLayoutEffect,\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  \"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 carouselRef = useForkRef<HTMLDivElement>(ref, emblaRef);\n\n    const slideRefs = useRef<(HTMLDivElement | null)[]>([]);\n    const [focusSlideIndex, setFocusedSlideIndex] = useState<number>(-1);\n    const [dragging, setDragging] = useState(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      };\n\n      if (!emblaApi) {\n        return;\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]);\n\n    useLayoutEffect(() => {\n      if (focusSlideIndex >= 0) {\n        const numberOfSnaps = emblaApi?.scrollSnapList().length ?? 1;\n        const numberOfSlidesPerSnap = slideRefs.current.length / numberOfSnaps;\n        const nearestScrollSnap = Math.floor(\n          focusSlideIndex / numberOfSlidesPerSnap,\n        );\n        if (emblaApi?.selectedScrollSnap() !== nearestScrollSnap) {\n          setAnnouncementState(\"focus\");\n          emblaApi?.scrollTo(nearestScrollSnap);\n        }\n        setTimeout(() => {\n          slideRefs.current[focusSlideIndex]?.focus();\n        }, 0);\n      }\n    }, [focusSlideIndex, emblaApi, setAnnouncementState]);\n\n    useEffect(() => {\n      if (disableSlideAnnouncements === false) {\n        setAnnouncementState(undefined);\n      }\n    }, [disableSlideAnnouncements]);\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      switch (event.key) {\n        case \"ArrowLeft\": {\n          event.preventDefault();\n          setFocusedSlideIndex((prevState) => Math.max(prevState - 1, 0));\n          break;\n        }\n        case \"ArrowRight\": {\n          event.preventDefault();\n          setFocusedSlideIndex((prevState) =>\n            Math.min(prevState + 1, slideRefs.current.length - 1),\n          );\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 React.ReactElement;\n            const existingId = childElement.props.id;\n            const isHidden = !visibleSlideIndexes.includes(index + 1);\n            const element = child as React.ReactElement;\n            return cloneElement(element, {\n              \"aria-hidden\": isHidden,\n              id: existingId ?? `${carouselId}-slide${index + 1}`,\n              onMouseDown: (event: SyntheticEvent) => event.preventDefault(),\n              onFocus: (event: FocusEvent) => {\n                event.preventDefault();\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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"}
+{"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/CarouselTabList.js

@@ -30,11 +30,17 @@ const CarouselTabList = forwardRef(
       var _a;
       let newIndex = focusedTabIndex ?? selectedIndex;
       if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        event.preventDefault();
         const direction = event.key === "ArrowLeft" ? -1 : 1;
-        newIndex = (newIndex + direction + scrollSnaps.length) % scrollSnaps.length;
+        newIndex = Math.max(
+          0,
+          Math.min(newIndex + direction, scrollSnaps.length - 1)
+        );
       } else if (event.key === "Home") {
+        event.preventDefault();
         newIndex = 0;
       } else if (event.key === "End") {
+        event.preventDefault();
         newIndex = scrollSnaps.length - 1;
       }
       if (newIndex !== focusedTabIndex) {

package/dist-es/CarouselTabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselTabList.js","sources":["../src/CarouselTabList.tsx"],"sourcesContent":["import { makePrefixer, type RenderPropsType, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type KeyboardEventHandler,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport {\n  CarouselTab,\n  type CarouselTabProps,\n  useCarouselTab,\n} from \"./CarouselTab\";\nimport carouselControlsCss from \"./CarouselTabList.css\";\nimport { getSlideDescription } from \"./getSlideDescription\";\nimport { getVisibleSlideIndexes } from \"./getVisibleSlideIndexes\";\n\nconst withBaseName = makePrefixer(\"saltCarouselTabList\");\n\n/**\n * Props for the CarouselTabList component.\n */\nexport interface CarouselTabListProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Render prop to enable customisation of tab button.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nexport interface CarouselTabRendererProps extends CarouselTabProps {\n  render?: CarouselTabListProps[\"render\"];\n}\n\nconst CarouselTabRenderer = forwardRef<\n  HTMLButtonElement,\n  CarouselTabRendererProps\n>((props, ref) => {\n  return renderProps(CarouselTab, { ...props, ref });\n});\n\nexport const CarouselTabList = forwardRef<HTMLDivElement, CarouselTabListProps>(\n  function CarouselTabList({ className, render, onKeyDown, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-controls\",\n      css: carouselControlsCss,\n      window: targetWindow,\n    });\n\n    const { emblaApi, setAriaVariant, setAnnouncementState } =\n      useCarouselContext();\n    const { selectedIndex, scrollSnaps } = useCarouselTab(emblaApi);\n\n    const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    const [focusedTabIndex, setFocusedTabIndex] = useState<number | null>(null);\n\n    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {\n      let newIndex = focusedTabIndex ?? selectedIndex;\n\n      if (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\") {\n        const direction = event.key === \"ArrowLeft\" ? -1 : 1;\n        newIndex =\n          (newIndex + 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 !== focusedTabIndex) {\n        buttonRefs.current[newIndex]?.focus();\n        setFocusedTabIndex(newIndex);\n      }\n      onKeyDown?.(event);\n    };\n\n    useEffect(() => {\n      setAriaVariant(\"tabpanel\");\n    }, [setAriaVariant]);\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(withBaseName(), className)}\n        onKeyDown={handleKeyDown}\n        ref={ref}\n        {...rest}\n      >\n        {scrollSnaps.map((_, scrollSnapIndex) => {\n          const visibleSlides = getVisibleSlideIndexes(\n            emblaApi,\n            scrollSnapIndex,\n          );\n          const startSlideNumber =\n            visibleSlides.length >= 1 ? visibleSlides[0] : 0;\n          const endSlideNumber =\n            visibleSlides.length > 1\n              ? visibleSlides[visibleSlides.length - 1]\n              : 0;\n          const slideNodes = emblaApi?.slideNodes();\n          const numberOfSlides = slideNodes?.length;\n\n          let ariaLabel: string;\n          if (endSlideNumber >= 1) {\n            ariaLabel = `Slide ${startSlideNumber} to ${endSlideNumber} of ${numberOfSlides}`;\n          } else {\n            const description = getSlideDescription(emblaApi, startSlideNumber);\n            ariaLabel = `${description}`;\n          }\n\n          const selected = selectedIndex === scrollSnapIndex;\n          const ariaControls = slideNodes?.length\n            ? slideNodes[startSlideNumber - 1].id\n            : undefined;\n\n          return (\n            <CarouselTabRenderer\n              key={`carouselTab-${scrollSnapIndex}}`}\n              ref={(element: HTMLButtonElement) => {\n                buttonRefs.current[scrollSnapIndex] = element;\n              }}\n              render={render}\n              role={\"tab\"}\n              selected={selected}\n              onBlur={() => {\n                setFocusedTabIndex(null);\n              }}\n              onFocus={() => {\n                setFocusedTabIndex(scrollSnapIndex);\n                setAnnouncementState(\"tab\");\n                emblaApi?.scrollTo(scrollSnapIndex);\n              }}\n              aria-label={ariaLabel}\n              aria-selected={selected}\n              tabIndex={selected && focusedTabIndex === null ? 0 : -1}\n              aria-controls={ariaControls}\n            />\n          );\n        })}\n      </div>\n    );\n  },\n);\n"],"names":["CarouselTabList","carouselControlsCss"],"mappings":"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"}
+{"version":3,"file":"CarouselTabList.js","sources":["../src/CarouselTabList.tsx"],"sourcesContent":["import { makePrefixer, type RenderPropsType, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type KeyboardEventHandler,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport {\n  CarouselTab,\n  type CarouselTabProps,\n  useCarouselTab,\n} from \"./CarouselTab\";\nimport carouselControlsCss from \"./CarouselTabList.css\";\nimport { getSlideDescription } from \"./getSlideDescription\";\nimport { getVisibleSlideIndexes } from \"./getVisibleSlideIndexes\";\n\nconst withBaseName = makePrefixer(\"saltCarouselTabList\");\n\n/**\n * Props for the CarouselTabList component.\n */\nexport interface CarouselTabListProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Render prop to enable customisation of tab button.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nexport interface CarouselTabRendererProps extends CarouselTabProps {\n  render?: CarouselTabListProps[\"render\"];\n}\n\nconst CarouselTabRenderer = forwardRef<\n  HTMLButtonElement,\n  CarouselTabRendererProps\n>((props, ref) => {\n  return renderProps(CarouselTab, { ...props, ref });\n});\n\nexport const CarouselTabList = forwardRef<HTMLDivElement, CarouselTabListProps>(\n  function CarouselTabList({ className, render, onKeyDown, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-controls\",\n      css: carouselControlsCss,\n      window: targetWindow,\n    });\n\n    const { emblaApi, setAriaVariant, setAnnouncementState } =\n      useCarouselContext();\n    const { selectedIndex, scrollSnaps } = useCarouselTab(emblaApi);\n\n    const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    const [focusedTabIndex, setFocusedTabIndex] = useState<number | null>(null);\n\n    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {\n      let newIndex = focusedTabIndex ?? selectedIndex;\n\n      if (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\") {\n        event.preventDefault();\n        const direction = event.key === \"ArrowLeft\" ? -1 : 1;\n        newIndex = Math.max(\n          0,\n          Math.min(newIndex + direction, scrollSnaps.length - 1),\n        );\n      } else if (event.key === \"Home\") {\n        event.preventDefault();\n        newIndex = 0;\n      } else if (event.key === \"End\") {\n        event.preventDefault();\n        newIndex = scrollSnaps.length - 1;\n      }\n\n      if (newIndex !== focusedTabIndex) {\n        buttonRefs.current[newIndex]?.focus();\n        setFocusedTabIndex(newIndex);\n      }\n      onKeyDown?.(event);\n    };\n\n    useEffect(() => {\n      setAriaVariant(\"tabpanel\");\n    }, [setAriaVariant]);\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(withBaseName(), className)}\n        onKeyDown={handleKeyDown}\n        ref={ref}\n        {...rest}\n      >\n        {scrollSnaps.map((_, scrollSnapIndex) => {\n          const visibleSlides = getVisibleSlideIndexes(\n            emblaApi,\n            scrollSnapIndex,\n          );\n          const startSlideNumber =\n            visibleSlides.length >= 1 ? visibleSlides[0] : 0;\n          const endSlideNumber =\n            visibleSlides.length > 1\n              ? visibleSlides[visibleSlides.length - 1]\n              : 0;\n          const slideNodes = emblaApi?.slideNodes();\n          const numberOfSlides = slideNodes?.length;\n\n          let ariaLabel: string;\n          if (endSlideNumber >= 1) {\n            ariaLabel = `Slide ${startSlideNumber} to ${endSlideNumber} of ${numberOfSlides}`;\n          } else {\n            const description = getSlideDescription(emblaApi, startSlideNumber);\n            ariaLabel = `${description}`;\n          }\n\n          const selected = selectedIndex === scrollSnapIndex;\n          const ariaControls = slideNodes?.length\n            ? slideNodes[startSlideNumber - 1].id\n            : undefined;\n\n          return (\n            <CarouselTabRenderer\n              key={`carouselTab-${scrollSnapIndex}}`}\n              ref={(element: HTMLButtonElement) => {\n                buttonRefs.current[scrollSnapIndex] = element;\n              }}\n              render={render}\n              role={\"tab\"}\n              selected={selected}\n              onBlur={() => {\n                setFocusedTabIndex(null);\n              }}\n              onFocus={() => {\n                setFocusedTabIndex(scrollSnapIndex);\n                setAnnouncementState(\"tab\");\n                emblaApi?.scrollTo(scrollSnapIndex);\n              }}\n              aria-label={ariaLabel}\n              aria-selected={selected}\n              tabIndex={selected && focusedTabIndex === null ? 0 : -1}\n              aria-controls={ariaControls}\n            />\n          );\n        })}\n      </div>\n    );\n  },\n);\n"],"names":["CarouselTabList","carouselControlsCss"],"mappings":"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"}

package/dist-es/createCustomSettle.js

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

package/dist-es/createCustomSettle.js.map

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

package/package.json

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