@salt-ds/lab 1.0.0-alpha.65 → 1.0.0-alpha.67

package/dist-es/carousel/CarouselSlide.js

@@ -1,56 +1,106 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer } from '@salt-ds/core';
-import { forwardRef, useRef } from 'react';
+import { makePrefixer, useIdMemo, useId, useForkRef } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
+import { forwardRef, useContext, useRef, useEffect } from 'react';
+import { CarouselDispatchContext, CarouselStateContext } from './CarouselContext.js';
+import css_248z from './CarouselSlide.css.js';
 
 const withBaseName = makePrefixer("saltCarouselSlide");
 const CarouselSlide = forwardRef(
-  function CarouselSlide2({ ButtonBar, Media, description, title, contentAlignment }, ref) {
-    const buttonBarRef = useRef(null);
-    return /* @__PURE__ */ jsxs("div", { ref, children: [
-      Media && /* @__PURE__ */ jsx("div", { className: withBaseName("mediaContainer"), children: Media }),
-      /* @__PURE__ */ jsxs("div", { className: withBaseName("fixedContainer"), ref: buttonBarRef, children: [
-        /* @__PURE__ */ jsxs(
-          "div",
+  function CarouselSlide2({
+    actions,
+    appearance,
+    media,
+    header,
+    children,
+    "aria-labelledby": ariaLabelledBy,
+    style,
+    id: idProp,
+    ...rest
+  }, refProp) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-carousel-slide",
+      css: css_248z,
+      window: targetWindow
+    });
+    const dispatch = useContext(CarouselDispatchContext);
+    const { slides, visibleSlides, activeSlideIndex } = useContext(CarouselStateContext);
+    const slideRef = useRef(null);
+    const headerRef = useRef(null);
+    const id = useIdMemo(idProp);
+    const announcerId = useId();
+    const slideCount = slides.size;
+    useEffect(() => {
+      var _a;
+      if (!slideRef.current) return;
+      dispatch({
+        type: "register",
+        payload: [
+          id,
           {
-            className: clsx({
-              [withBaseName("textContainer")]: contentAlignment === "center",
-              [withBaseName("textContainerLeft")]: contentAlignment === "left"
-            }),
-            children: [
-              title && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "aria-level": 1,
-                  className: withBaseName("titleContainer"),
-                  role: "heading",
-                  children: title
-                }
-              ),
-              description && /* @__PURE__ */ jsx("div", { className: withBaseName("descriptionContainer"), children: description })
-            ]
+            element: slideRef.current,
+            slideDescription: (_a = headerRef == null ? void 0 : headerRef.current) == null ? void 0 : _a.innerText
           }
-        ),
-        ButtonBar && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: clsx({
-              [withBaseName("buttonBarOverride")]: contentAlignment === "center",
-              [withBaseName("buttonBarOverrideLeft")]: contentAlignment === "left"
-            }),
-            children: /* @__PURE__ */ jsx(
-              ButtonBar,
-              {
-                className: clsx({
-                  [withBaseName("buttonBarContainer")]: contentAlignment === "center",
-                  [withBaseName("buttonBarContainerLeft")]: contentAlignment === "left"
-                })
-              }
-            )
-          }
-        )
-      ] })
-    ] });
+        ]
+      });
+      return () => dispatch({ type: "unregister", payload: id });
+    }, [dispatch, id]);
+    const SlideStyles = {
+      "--carousel-slide-width": visibleSlides > 1 ? `calc((100% / ${visibleSlides}) - var(--salt-spacing-200)/${visibleSlides})` : void 0,
+      ...style
+    };
+    const ref = useForkRef(refProp, slideRef);
+    const slideIds = [...slides.keys()];
+    const index = slideIds.indexOf(id || slideIds[0]);
+    const helperText = `${index + 1} of ${slideCount}`;
+    const isVisible = index >= activeSlideIndex && index < activeSlideIndex + visibleSlides;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "group",
+        "aria-roledescription": "slide",
+        "aria-labelledby": clsx(ariaLabelledBy, announcerId),
+        id,
+        className: clsx(withBaseName(), {
+          [withBaseName("bordered")]: appearance === "bordered"
+        }),
+        style: SlideStyles,
+        tabIndex: isVisible ? 0 : -1,
+        hidden: !isVisible,
+        ...rest,
+        ref,
+        children: [
+          media,
+          children && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: clsx(withBaseName("container"), {
+                [withBaseName("card")]: appearance === "bordered"
+              }),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: withBaseName("content"), children: [
+                  isVisible && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      id: announcerId,
+                      className: withBaseName("sr-only"),
+                      "aria-hidden": "true",
+                      children: helperText
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { ref: headerRef, children: header }),
+                  /* @__PURE__ */ jsx("div", { children })
+                ] }),
+                isVisible && actions
+              ]
+            }
+          )
+        ]
+      }
+    );
   }
 );
 

package/dist-es/carousel/CarouselSlide.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselSlide.js","sources":["../src/carousel/CarouselSlide.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport {\n  type ElementType,\n  type HTMLAttributes,\n  type ReactElement,\n  forwardRef,\n  useRef,\n} from \"react\";\n\nimport { clsx } from \"clsx\";\n\nexport interface CarouselSlideProps extends HTMLAttributes<HTMLDivElement> {\n  ButtonBar?: ElementType;\n  Media: ReactElement;\n  description?: string;\n  title?: string;\n  contentAlignment?: \"center\" | \"left\" | \"right\";\n}\n\nconst withBaseName = makePrefixer(\"saltCarouselSlide\");\n\nexport const CarouselSlide = forwardRef<HTMLDivElement, CarouselSlideProps>(\n  function CarouselSlide(\n    { ButtonBar, Media, description, title, contentAlignment },\n    ref,\n  ) {\n    const buttonBarRef = useRef(null);\n\n    return (\n      <div ref={ref}>\n        {Media && <div className={withBaseName(\"mediaContainer\")}>{Media}</div>}\n        <div className={withBaseName(\"fixedContainer\")} ref={buttonBarRef}>\n          <div\n            className={clsx({\n              [withBaseName(\"textContainer\")]: contentAlignment === \"center\",\n              [withBaseName(\"textContainerLeft\")]: contentAlignment === \"left\",\n            })}\n          >\n            {title && (\n              <div\n                aria-level={1}\n                className={withBaseName(\"titleContainer\")}\n                role=\"heading\"\n              >\n                {title}\n              </div>\n            )}\n            {description && (\n              <div className={withBaseName(\"descriptionContainer\")}>\n                {description}\n              </div>\n            )}\n          </div>\n          {ButtonBar && (\n            <div\n              className={clsx({\n                [withBaseName(\"buttonBarOverride\")]:\n                  contentAlignment === \"center\",\n                [withBaseName(\"buttonBarOverrideLeft\")]:\n                  contentAlignment === \"left\",\n              })}\n            >\n              <ButtonBar\n                className={clsx({\n                  [withBaseName(\"buttonBarContainer\")]:\n                    contentAlignment === \"center\",\n                  [withBaseName(\"buttonBarContainerLeft\")]:\n                    contentAlignment === \"left\",\n                })}\n              />\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["CarouselSlide"],"mappings":";;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,eACP,EAAE,SAAA,EAAW,OAAO,WAAa,EAAA,KAAA,EAAO,gBAAiB,EAAA,EACzD,GACA,EAAA;AACA,IAAM,MAAA,YAAA,GAAe,OAAO,IAAI,CAAA;AAEhC,IACE,uBAAA,IAAA,CAAC,SAAI,GACF,EAAA,QAAA,EAAA;AAAA,MAAA,KAAA,wBAAU,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,gBAAgB,GAAI,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,2BAChE,KAAI,EAAA,EAAA,SAAA,EAAW,aAAa,gBAAgB,CAAA,EAAG,KAAK,YACnD,EAAA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,WAAW,IAAK,CAAA;AAAA,cACd,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG,gBAAqB,KAAA,QAAA;AAAA,cACtD,CAAC,YAAA,CAAa,mBAAmB,CAAC,GAAG,gBAAqB,KAAA;AAAA,aAC3D,CAAA;AAAA,YAEA,QAAA,EAAA;AAAA,cACC,KAAA,oBAAA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,YAAY,EAAA,CAAA;AAAA,kBACZ,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,kBACxC,IAAK,EAAA,SAAA;AAAA,kBAEJ,QAAA,EAAA;AAAA;AAAA,eACH;AAAA,cAED,+BACE,GAAA,CAAA,KAAA,EAAA,EAAI,WAAW,YAAa,CAAA,sBAAsB,GAChD,QACH,EAAA,WAAA,EAAA;AAAA;AAAA;AAAA,SAEJ;AAAA,QACC,SACC,oBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,WAAW,IAAK,CAAA;AAAA,cACd,CAAC,YAAA,CAAa,mBAAmB,CAAC,GAChC,gBAAqB,KAAA,QAAA;AAAA,cACvB,CAAC,YAAA,CAAa,uBAAuB,CAAC,GACpC,gBAAqB,KAAA;AAAA,aACxB,CAAA;AAAA,YAED,QAAA,kBAAA,GAAA;AAAA,cAAC,SAAA;AAAA,cAAA;AAAA,gBACC,WAAW,IAAK,CAAA;AAAA,kBACd,CAAC,YAAA,CAAa,oBAAoB,CAAC,GACjC,gBAAqB,KAAA,QAAA;AAAA,kBACvB,CAAC,YAAA,CAAa,wBAAwB,CAAC,GACrC,gBAAqB,KAAA;AAAA,iBACxB;AAAA;AAAA;AACH;AAAA;AACF,OAEJ,EAAA;AAAA,KACF,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"CarouselSlide.js","sources":["../src/carousel/CarouselSlide.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useId, useIdMemo } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentProps,\n  type ReactNode,\n  forwardRef,\n  useContext,\n  useEffect,\n  useRef,\n} from \"react\";\nimport {\n  CarouselDispatchContext,\n  CarouselStateContext,\n} from \"./CarouselContext\";\nimport carouselSlideCss from \"./CarouselSlide.css\";\n\nexport type CarouselSlideId = string;\nexport type CarouselSlideElement = HTMLDivElement;\nexport type CarouselSlideMeta = {\n  element: CarouselSlideElement;\n  slideDescription?: string;\n};\nexport interface CarouselSlideProps extends ComponentProps<\"div\"> {\n  /**\n   * Actions to be displayed in the content footer.\n   **/\n  actions?: ReactNode;\n  /**\n   * Media content to be displayed inside the slide. 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   * The appearance of the slide. Options are 'bordered', and 'transparent'.\n   * 'transparent' is the default value.\n   **/\n  appearance?: \"bordered\" | \"transparent\";\n  /**\n   * Header content to be displayed at the top of the slide. This can be text or any other React node.\n   **/\n  header?: ReactNode;\n  /**\n   * Carousel slide id.\n   */\n  id?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltCarouselSlide\");\n\nexport const CarouselSlide = forwardRef<HTMLDivElement, CarouselSlideProps>(\n  function CarouselSlide(\n    {\n      actions,\n      appearance,\n      media,\n      header,\n      children,\n      \"aria-labelledby\": ariaLabelledBy,\n      style,\n      id: idProp,\n      ...rest\n    },\n    refProp,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-slide\",\n      css: carouselSlideCss,\n      window: targetWindow,\n    });\n    const dispatch = useContext(CarouselDispatchContext);\n    const { slides, visibleSlides, activeSlideIndex } =\n      useContext(CarouselStateContext);\n\n    const slideRef = useRef<HTMLDivElement>(null);\n    const headerRef = useRef<HTMLDivElement>(null);\n    const id = useIdMemo(idProp);\n    const announcerId = useId();\n    const slideCount = slides.size;\n\n    useEffect(() => {\n      if (!slideRef.current) return;\n\n      dispatch({\n        type: \"register\",\n        payload: [\n          id,\n          {\n            element: slideRef.current,\n            slideDescription: headerRef?.current?.innerText,\n          },\n        ],\n      });\n      return () => dispatch({ type: \"unregister\", payload: id });\n    }, [dispatch, id]);\n\n    const SlideStyles = {\n      \"--carousel-slide-width\":\n        visibleSlides > 1\n          ? `calc((100% / ${visibleSlides}) - var(--salt-spacing-200)/${visibleSlides})`\n          : undefined,\n      ...style,\n    };\n\n    const ref = useForkRef(refProp, slideRef);\n    const slideIds = [...slides.keys()];\n    const index = slideIds.indexOf(id || slideIds[0]);\n    const helperText = `${index + 1} of ${slideCount}`;\n    const isVisible =\n      index >= activeSlideIndex && index < activeSlideIndex + visibleSlides;\n\n    return (\n      <div\n        role=\"group\"\n        aria-roledescription=\"slide\"\n        aria-labelledby={clsx(ariaLabelledBy, announcerId)}\n        id={id}\n        className={clsx(withBaseName(), {\n          [withBaseName(\"bordered\")]: appearance === \"bordered\",\n        })}\n        style={SlideStyles}\n        tabIndex={isVisible ? 0 : -1}\n        hidden={!isVisible}\n        {...rest}\n        ref={ref}\n      >\n        {media}\n        {children && (\n          <div\n            className={clsx(withBaseName(\"container\"), {\n              [withBaseName(\"card\")]: appearance === \"bordered\",\n            })}\n          >\n            <div className={withBaseName(\"content\")}>\n              {isVisible && (\n                <span\n                  id={announcerId}\n                  className={withBaseName(\"sr-only\")}\n                  aria-hidden=\"true\"\n                >\n                  {helperText}\n                </span>\n              )}\n              <div ref={headerRef}>{header}</div>\n              <div>{children}</div>\n            </div>\n            {isVisible && actions}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["CarouselSlide","carouselSlideCss"],"mappings":"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"}

package/dist-es/carousel/CarouselSlider.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltCarouselSlider {\n  display: flex;\n  scroll-snap-type: x mandatory;\n  overflow-x: auto;\n  scroll-behavior: smooth;\n  width: 100%;\n  gap: var(--salt-spacing-100);\n  grid-area: slider;\n}\n@supports (scrollbar-width: none) {\n  .saltCarouselSlider {\n    scrollbar-width: none;\n  }\n}\n@supports not (scrollbar-width: none) {\n  .saltCarouselSlider::-webkit-scrollbar {\n    display: none;\n  }\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=CarouselSlider.css.js.map

package/dist-es/carousel/CarouselSlider.css.js.map

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

package/dist-es/carousel/CarouselSlider.js

@@ -0,0 +1,91 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useForkRef } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { forwardRef, useRef, useContext, useLayoutEffect } from 'react';
+import { CarouselStateContext, CarouselDispatchContext } from './CarouselContext.js';
+import css_248z from './CarouselSlider.css.js';
+
+const withBaseName = makePrefixer("saltCarouselSlider");
+const CarouselSlider = forwardRef(
+  function CarouselSlider2({ children, onKeyDown, onScroll, onSelectionChange, ...rest }, propRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-carousel-slider",
+      css: css_248z,
+      window: targetWindow
+    });
+    const containerRef = useRef(null);
+    const hasRun = useRef(false);
+    const { slides, activeSlideIndex, focusedSlideIndex, visibleSlides } = useContext(CarouselStateContext);
+    const dispatch = useContext(CarouselDispatchContext);
+    const slideIds = [...slides.keys()];
+    const handleKeyDown = (event) => {
+      var _a, _b;
+      if (event.repeat) return;
+      switch (event.key) {
+        case "ArrowLeft": {
+          const prevIndex = focusedSlideIndex && focusedSlideIndex > activeSlideIndex ? focusedSlideIndex - 1 : activeSlideIndex - 1;
+          const prevId = slideIds[prevIndex] || null;
+          if (!prevId) break;
+          dispatch({ type: "scroll", payload: prevId });
+          onSelectionChange == null ? void 0 : onSelectionChange(event, prevIndex);
+          (_a = slides.get(prevId)) == null ? void 0 : _a.element.focus();
+          break;
+        }
+        case "ArrowRight": {
+          const nextIndex = activeSlideIndex + 1;
+          const nextId = slideIds[nextIndex] || null;
+          if (!nextId) break;
+          dispatch({ type: "scroll", payload: nextId });
+          onSelectionChange == null ? void 0 : onSelectionChange(event, nextIndex);
+          (_b = slides.get(nextId)) == null ? void 0 : _b.element.focus();
+          break;
+        }
+      }
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    };
+    const handleScroll = (event) => {
+      const container = containerRef == null ? void 0 : containerRef.current;
+      if (!container) return;
+      const scrollLeft = container.scrollLeft;
+      const slideWidth = container.offsetWidth / visibleSlides;
+      const newIndex = Math.round(scrollLeft / slideWidth) || 0;
+      if (newIndex !== activeSlideIndex) {
+        dispatch({ type: "move", payload: slideIds[newIndex] });
+        onSelectionChange == null ? void 0 : onSelectionChange(event, newIndex);
+      }
+      onScroll == null ? void 0 : onScroll(event);
+    };
+    useLayoutEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      const scrollBehavior = hasRun.current ? "smooth" : "instant";
+      const slideWidth = container.offsetWidth / visibleSlides;
+      requestAnimationFrame(() => {
+        container.scrollTo({
+          left: focusedSlideIndex * slideWidth,
+          // @ts-ignore ScrollBehavior typescript definition missing instant
+          behavior: scrollBehavior
+        });
+      });
+      hasRun.current = true;
+    }, [focusedSlideIndex, visibleSlides]);
+    const ref = useForkRef(propRef, containerRef);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: withBaseName(),
+        tabIndex: -1,
+        onKeyDown: handleKeyDown,
+        onScroll: handleScroll,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+export { CarouselSlider };
+//# sourceMappingURL=CarouselSlider.js.map

package/dist-es/carousel/CarouselSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselSlider.js","sources":["../src/carousel/CarouselSlider.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactElement,\n  type SyntheticEvent,\n  type UIEvent,\n  forwardRef,\n  useContext,\n  useLayoutEffect,\n  useRef,\n} from \"react\";\nimport {\n  CarouselDispatchContext,\n  CarouselStateContext,\n} from \"./CarouselContext\";\nimport type { CarouselSlideProps } from \"./CarouselSlide\";\nimport carouselSliderCss from \"./CarouselSlider.css\";\n\nexport interface CarouselSliderProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Collection of slides to render\n   */\n  children: Array<ReactElement<CarouselSlideProps>>;\n  /**\n   * Callback fired when the selected slide change.\n   **/\n  onSelectionChange?: (\n    event: SyntheticEvent<HTMLDivElement>,\n    index: number,\n  ) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltCarouselSlider\");\n\nexport const CarouselSlider = forwardRef<HTMLDivElement, CarouselSliderProps>(\n  function CarouselSlider(\n    { children, onKeyDown, onScroll, onSelectionChange, ...rest },\n    propRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-slider\",\n      css: carouselSliderCss,\n      window: targetWindow,\n    });\n    const containerRef = useRef<HTMLDivElement>(null);\n    const hasRun = useRef(false);\n    const { slides, activeSlideIndex, focusedSlideIndex, visibleSlides } =\n      useContext(CarouselStateContext);\n    const dispatch = useContext(CarouselDispatchContext);\n    const slideIds = [...slides.keys()];\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.repeat) return;\n      switch (event.key) {\n        case \"ArrowLeft\": {\n          const prevIndex =\n            focusedSlideIndex && focusedSlideIndex > activeSlideIndex\n              ? focusedSlideIndex - 1\n              : activeSlideIndex - 1;\n          const prevId = slideIds[prevIndex] || null;\n\n          if (!prevId) break;\n          dispatch({ type: \"scroll\", payload: prevId });\n          onSelectionChange?.(event, prevIndex);\n          slides.get(prevId)?.element.focus();\n\n          break;\n        }\n        case \"ArrowRight\": {\n          const nextIndex = activeSlideIndex + 1;\n          const nextId = slideIds[nextIndex] || null;\n\n          if (!nextId) break;\n\n          dispatch({ type: \"scroll\", payload: nextId });\n          onSelectionChange?.(event, nextIndex);\n\n          slides.get(nextId)?.element.focus();\n\n          break;\n        }\n      }\n      onKeyDown?.(event);\n    };\n\n    const handleScroll = (event: UIEvent<HTMLDivElement>) => {\n      const container = containerRef?.current;\n      if (!container) return;\n      const scrollLeft = container.scrollLeft;\n      const slideWidth = container.offsetWidth / visibleSlides;\n      const newIndex = Math.round(scrollLeft / slideWidth) || 0;\n\n      if (newIndex !== activeSlideIndex) {\n        dispatch({ type: \"move\", payload: slideIds[newIndex] });\n        onSelectionChange?.(event, newIndex);\n      }\n      onScroll?.(event);\n    };\n\n    useLayoutEffect(() => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const scrollBehavior = hasRun.current ? \"smooth\" : \"instant\";\n      const slideWidth = container.offsetWidth / visibleSlides;\n\n      requestAnimationFrame(() => {\n        container.scrollTo({\n          left: focusedSlideIndex * slideWidth,\n          // @ts-ignore ScrollBehavior typescript definition missing instant\n          behavior: scrollBehavior,\n        });\n      });\n\n      hasRun.current = true;\n    }, [focusedSlideIndex, visibleSlides]);\n\n    const ref = useForkRef(propRef, containerRef);\n    return (\n      <div\n        ref={ref}\n        className={withBaseName()}\n        tabIndex={-1}\n        onKeyDown={handleKeyDown}\n        onScroll={handleScroll}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["CarouselSlider","carouselSliderCss"],"mappings":"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"}

package/dist-es/index.js

@@ -14,9 +14,9 @@ export { isPlainObject } from './utils/isPlainObject.js';
 export { partition } from './utils/partition.js';
 export { useClickOutside } from './utils/useClickOutside.js';
 export { useEventCallback } from './utils/useEventCallback.js';
+export { useIsViewportLargerThanBreakpoint } from './utils/useIsViewportLargerThanBreakpoint.js';
 export { useLayoutEffectOnce } from './utils/useLayoutEffectOnce.js';
 export { useLayoutEffectSkipFirst } from './utils/useLayoutEffectSkipFirst.js';
-export { useIsViewportLargerThanBreakpoint } from './utils/useIsViewportLargerThanBreakpoint.js';
 export { useOverflowDetection } from './utils/useOverflowDetection.js';
 export { useSlideSelection } from './utils/useSlideSelection.js';
 export { AppHeader } from './app-header/AppHeader.js';
@@ -33,6 +33,8 @@ export { useCalendar } from './calendar/useCalendar.js';
 export { isDateRangeSelection, isMultipleDateSelection, isSingleSelectionValueType, useCalendarSelection, useCalendarSelectionDay } from './calendar/useCalendarSelection.js';
 export { Carousel } from './carousel/Carousel.js';
 export { CarouselSlide } from './carousel/CarouselSlide.js';
+export { CarouselSlider } from './carousel/CarouselSlider.js';
+export { CarouselControls } from './carousel/CarouselControls.js';
 export { CascadingMenu } from './cascading-menu/CascadingMenu.js';
 export { ColorChooser } from './color-chooser/ColorChooser.js';
 export { Color } from './color-chooser/Color.js';
@@ -124,9 +126,6 @@ export { SplitHandle } from './splitter/SplitHandle.js';
 export { StaticList } from './static-list/StaticList.js';
 export { StaticListItem } from './static-list/StaticListItem.js';
 export { StaticListItemContent } from './static-list/StaticListItemContent.js';
-export { SteppedTracker } from './stepped-tracker/SteppedTracker.js';
-export { Step } from './stepped-tracker/Step.js';
-export { useStepReducer } from './stepped-tracker/useStepReducer.js';
 export { SystemStatus } from './system-status/SystemStatus.js';
 export { SystemStatusContent } from './system-status/SystemStatusContent.js';
 export { SystemStatusActions } from './system-status/SystemStatusActions.js';

package/dist-es/index.js.map

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

package/dist-types/carousel/Carousel.d.ts

@@ -1,36 +1,23 @@
-import { type HTMLAttributes, type ReactElement } from "react";
-import type { CarouselSlideProps } from "./CarouselSlide";
+import { type ResponsiveProp } from "@salt-ds/core";
+import { type HTMLAttributes } from "react";
 export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The initial Index enables you to select the active slide in the carousel.
      * Optional, default 0.
      **/
-    initialIndex?: number;
+    defaultActiveSlideIndex?: number;
     /**
-     * The animation when the slides are shown.
-     * Optional. Defaults to `slide`
+     * Controlled index of active slide in the carousel.
      **/
-    animation?: "slide" | "fade";
+    activeSlideIndex?: number;
     /**
-     * If this props is passed it will set the aria-label with value to the carousel container.
-     * Optional. Defaults to undefined
+     * Set the placement of the CarouselControls relative to the CarouselSlider element. Defaults to `top`.
      */
-    carouselDescription?: string;
+    controlsPlacement?: "top" | "bottom";
     /**
-     * Collection of slides to render
-     * Component must implement CarouselSlideProps. Mandatory.
-     */
-    children: Array<ReactElement<CarouselSlideProps>>;
-    /**
-     * This prop will enable compact / reduced width mode.
-     * The navigation buttons would be part of indicators
-     * Optional. Defaults to false
+     * Number of slides visible at a time.
+     * Optional, default 1.
      **/
-    compact?: boolean;
-    /**
-     * It sets the id for the Carousel Container.
-     * String. Optional
-     */
-    id?: string;
+    visibleSlides?: ResponsiveProp<number>;
 }
 export declare const Carousel: import("react").ForwardRefExoticComponent<CarouselProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/carousel/CarouselContext.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import { type CarouselReducerDispatch, type CarouselReducerState } from "./CarouselReducer";
+export declare const CarouselStateContext: import("react").Context<CarouselReducerState>;
+export declare const CarouselDispatchContext: import("react").Context<CarouselReducerDispatch>;
+export declare function CarouselProvider({ children, activeSlideIndex: activeSlideIndexProp, defaultActiveSlideIndex, visibleSlides, id, }: {
+    children: ReactNode;
+    activeSlideIndex?: number;
+    defaultActiveSlideIndex?: number;
+    visibleSlides?: number;
+    id?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist-types/carousel/CarouselControls.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type ReactNode, type SyntheticEvent } from "react";
+export interface CarouselControlsProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * Callback when Back button is clicked.
+     */
+    onPrevious?: (event: SyntheticEvent<HTMLButtonElement>, index: number) => void;
+    /**
+     * Callback when Next button is clicked.
+     */
+    onNext?: (event: SyntheticEvent<HTMLButtonElement>, index: number) => void;
+    /**
+     * Location of the label relative to the controls.
+     *
+     * Either 'left', or 'right'`.
+     */
+    labelPlacement?: "left" | "right";
+    /**
+     * If `true`, the carousel controls will be disabled.
+     * **/
+    disabled?: boolean;
+    /**
+     * The title of the carousel that accompanies the controls.
+     */
+    title?: ReactNode;
+}
+export declare const CarouselControls: import("react").ForwardRefExoticComponent<CarouselControlsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/carousel/CarouselReducer.d.ts

@@ -0,0 +1,30 @@
+import type { Dispatch } from "react";
+import type { CarouselSlideId, CarouselSlideMeta } from "./CarouselSlide";
+export interface CarouselReducerState {
+    slides: Map<CarouselSlideId, CarouselSlideMeta>;
+    activeSlideIndex: number;
+    visibleSlides: number;
+    focusedSlideIndex: number;
+    carouselId?: string;
+}
+export declare type CarouselReducerAction = {
+    type: "register";
+    payload: [CarouselSlideId, CarouselSlideMeta];
+} | {
+    type: "unregister";
+    payload: CarouselSlideId;
+} | {
+    type: "updateSlideCount";
+    payload: number;
+} | {
+    type: "move";
+    payload: CarouselSlideId;
+} | {
+    type: "moveToIndex";
+    payload: number;
+} | {
+    type: "scroll";
+    payload: CarouselSlideId;
+};
+export declare type CarouselReducerDispatch = Dispatch<CarouselReducerAction>;
+export declare function carouselReducer(state: CarouselReducerState, action: CarouselReducerAction): CarouselReducerState;

package/dist-types/carousel/CarouselSlide.d.ts

@@ -1,9 +1,32 @@
-import { type ElementType, type HTMLAttributes, type ReactElement } from "react";
-export interface CarouselSlideProps extends HTMLAttributes<HTMLDivElement> {
-    ButtonBar?: ElementType;
-    Media: ReactElement;
-    description?: string;
-    title?: string;
-    contentAlignment?: "center" | "left" | "right";
+import { type ComponentProps, type ReactNode } from "react";
+export declare type CarouselSlideId = string;
+export declare type CarouselSlideElement = HTMLDivElement;
+export declare type CarouselSlideMeta = {
+    element: CarouselSlideElement;
+    slideDescription?: string;
+};
+export interface CarouselSlideProps extends ComponentProps<"div"> {
+    /**
+     * Actions to be displayed in the content footer.
+     **/
+    actions?: ReactNode;
+    /**
+     * Media content to be displayed inside the slide. This could include images, videos, etc., that are visually prominent.
+     * It differs from children in that media is intended to be the main visual element of the slide.
+     **/
+    media?: ReactNode;
+    /**
+     * The appearance of the slide. Options are 'bordered', and 'transparent'.
+     * 'transparent' is the default value.
+     **/
+    appearance?: "bordered" | "transparent";
+    /**
+     * Header content to be displayed at the top of the slide. This can be text or any other React node.
+     **/
+    header?: ReactNode;
+    /**
+     * Carousel slide id.
+     */
+    id?: string;
 }
-export declare const CarouselSlide: import("react").ForwardRefExoticComponent<CarouselSlideProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CarouselSlide: import("react").ForwardRefExoticComponent<Omit<CarouselSlideProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/carousel/CarouselSlider.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes, type ReactElement, type SyntheticEvent } from "react";
+import type { CarouselSlideProps } from "./CarouselSlide";
+export interface CarouselSliderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Collection of slides to render
+     */
+    children: Array<ReactElement<CarouselSlideProps>>;
+    /**
+     * Callback fired when the selected slide change.
+     **/
+    onSelectionChange?: (event: SyntheticEvent<HTMLDivElement>, index: number) => void;
+}
+export declare const CarouselSlider: import("react").ForwardRefExoticComponent<CarouselSliderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/carousel/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./Carousel";
 export * from "./CarouselSlide";
+export * from "./CarouselSlider";
+export * from "./CarouselControls";

package/dist-types/index.d.ts

@@ -37,7 +37,6 @@ export * from "./responsive";
 export * from "./search-input";
 export * from "./splitter";
 export * from "./static-list";
-export * from "./stepped-tracker";
 export * from "./system-status";
 export * from "./tabs";
 export * from "./tabs-next";

package/dist-types/utils/index.d.ts

@@ -5,8 +5,8 @@ export * from "./isPlainObject";
 export * from "./partition";
 export * from "./useClickOutside";
 export * from "./useEventCallback";
+export * from "./useIsViewportLargerThanBreakpoint";
 export * from "./useLayoutEffectOnce";
 export * from "./useLayoutEffectSkipFirst";
-export * from "./useIsViewportLargerThanBreakpoint";
 export * from "./useOverflowDetection";
 export * from "./useSlideSelection";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.65",
+  "version": "1.0.0-alpha.67",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -21,7 +21,7 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.28",
-    "@salt-ds/core": "^1.44.0",
+    "@salt-ds/core": "^1.45.0",
     "@salt-ds/date-adapters": "0.1.0-alpha.3",
     "@salt-ds/icons": "^1.13.2",
     "@salt-ds/styles": "0.2.1",

package/dist-cjs/stepped-tracker/Step.Connector.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = ".saltStepConnector {\n  grid-area: connector;\n\n  transition-duration: inherit;\n  transition-timing-function: inherit;\n  transition-property: opacity, min-height;\n}\n\n.saltSteppedTracker-horizontal .saltStepConnector {\n  position: absolute;\n  transform: translateY(-100%);\n  top: calc(var(--step-icon-size) / 2);\n  left: calc(50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));\n  right: calc(-50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));\n\n  border-top-width: var(--salt-size-border-strong);\n  border-top-style: var(--salt-track-borderStyle-incomplete);\n  border-top-color: var(--salt-track-borderColor);\n}\n\n.saltSteppedTracker-horizontal .saltStep-stage-completed > .saltStepConnector,\n.saltSteppedTracker-horizontal .saltStep-stage-inprogress > .saltStepConnector {\n  border-top-style: var(--salt-track-borderStyle-complete);\n}\n\n.saltSteppedTracker-vertical .saltStepConnector {\n  min-height: var(--salt-size-base);\n  align-self: stretch;\n  justify-self: center;\n\n  border-left-width: var(--salt-size-border-strong);\n  border-left-style: var(--salt-track-borderStyle-incomplete);\n  border-left-color: var(--salt-track-borderColor);\n}\n\n.saltSteppedTracker-vertical .saltStep-stage-completed > .saltStepConnector,\n.saltSteppedTracker-vertical .saltStep-stage-inprogress > .saltStepConnector {\n  border-left-style: var(--salt-track-borderStyle-complete);\n}\n\n.saltStep-depth-0.saltStep:not(.saltStep-expanded):last-child > .saltStepConnector {\n  opacity: 0;\n  min-height: 0;\n}\n\n.saltStep-depth-0.saltStep-expanded:last-child .saltStep:not(.saltStep-expanded):last-child .saltStepConnector {\n  opacity: 0;\n  min-height: 0;\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=Step.Connector.css.js.map

package/dist-cjs/stepped-tracker/Step.Connector.css.js.map

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

package/dist-cjs/stepped-tracker/Step.Connector.js

@@ -1,21 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var Step_Connector = require('./Step.Connector.css.js');
-
-const withBaseName = core.makePrefixer("saltStepConnector");
-function StepConnector() {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "salt-step-connector",
-    css: Step_Connector,
-    window: targetWindow
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: withBaseName() });
-}
-
-exports.StepConnector = StepConnector;
-//# sourceMappingURL=Step.Connector.js.map

package/dist-cjs/stepped-tracker/Step.Connector.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Step.Connector.js","sources":["../src/stepped-tracker/Step.Connector.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport stepConnectorCSS from \"./Step.Connector.css\";\n\nconst withBaseName = makePrefixer(\"saltStepConnector\");\n\nexport function StepConnector() {\n  const targetWindow = useWindow();\n\n  useComponentCssInjection({\n    testId: \"salt-step-connector\",\n    css: stepConnectorCSS,\n    window: targetWindow,\n  });\n\n  return <div aria-hidden className={withBaseName()} />;\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepConnectorCSS"],"mappings":";;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA;AAE9C,SAAS,aAAgB,GAAA;AAC9B,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,sCAAQ,KAAI,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA,SAAA,EAAW,cAAgB,EAAA,CAAA;AACrD;;;;"}

package/dist-cjs/stepped-tracker/Step.Description.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = ".saltStepDescription {\n  grid-area: description;\n}\n\n.saltSteppedTracker-vertical .saltStepDescription {\n  padding-bottom: var(--salt-spacing-300);\n  padding-left: calc((var(--step-depth)) * var(--salt-spacing-100));\n}\n\n.saltStep-status-warning > .saltStepDescription {\n  color: var(--salt-status-warning-foreground-informative);\n}\n\n.saltStep-status-error > .saltStepDescription {\n  color: var(--salt-status-error-foreground-informative);\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=Step.Description.css.js.map

package/dist-cjs/stepped-tracker/Step.Description.css.js.map

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