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

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # @salt-ds/lab
 
+## 1.0.0-alpha.67
+
+### Minor Changes
+
+- c664e97: - Moved `SteppedTracker` component from labs to core, renamed as `Stepper`.
+
+### Patch Changes
+
+- Updated dependencies [c664e97]
+- Updated dependencies [06232b0]
+  - @salt-ds/core@1.45.0
+
+## 1.0.0-alpha.66
+
+### Minor Changes
+
+- 799cf41: Updated `Carousel` component
+
+  - Renamed `initialIndex` to `defaultActiveSlideIndex`
+  - Added controlled `activeSlideIndex`
+  - Added `visibleSlides` to control how many slides can be visible at a time.
+  - Added `CarouselSlider` and extracted the controls to its own component, `CarouselControls` to improve composition.
+  - Added appearance in `CarouselSlide` to allow for border items.
+  - Added keyboard navigation.
+  - Removed usage of `DeckLayout`.
+
+  before:
+
+  ```tsx
+  <Carousel>
+    {items.map((item, index) => (
+      <CarouselSlide
+        key={index}
+        ButtonBar={<Button variant="cta">Learn more</Button>}
+        description="Lorem ipsum"
+        title="Carousel slide title"
+      />
+    ))}
+  </Carousel>
+  ```
+
+  after:
+
+  ```tsx
+  <Carousel>
+    <CarouselControls />
+    <CarouselSlider>
+      {items.map((slide) => (
+        <CarouselSlide
+          key={slide.title}
+          header={<H3>{slide.title}</H3>}
+          actions={<Link href="#">{slide.link}</Link>}
+        >
+          <Text>{slide.content}</Text>
+        </CarouselSlide>
+      ))}
+    </CarouselSlider>
+  </Carousel>
+  ```
+
+### Patch Changes
+
+- Updated dependencies [851b2eb]
+  - @salt-ds/core@1.44.1
+
 ## 1.0.0-alpha.65
 
 ### Minor Changes

package/css/salt-lab.css

@@ -252,27 +252,122 @@
 }
 
 /* src/carousel/Carousel.css */
-.saltGridLayout.saltCarousel {
-  grid-template-columns: min-content auto min-content;
-  grid-template-areas: "prev-button slider next-button" "dots dots dots";
+.saltCarousel {
+  display: grid;
+  grid-row-gap: var(--salt-spacing-100);
+  grid-template-areas: "controls" "slider";
+  grid-template-rows: auto 1fr;
 }
-.saltCarousel.saltCarousel-compact {
-  grid-template-areas: "slider slider slider" "prev-button dots next-button";
+.saltCarousel.saltCarousel-bottom {
+  grid-template-areas: "slider" "controls";
+  grid-template-rows: 1fr auto;
 }
-.saltCarousel-prev-button {
-  grid-area: prev-button;
-  height: 100%;
+
+/* src/carousel/CarouselControls.css */
+.saltCarouselControls {
+  display: flex;
+  gap: var(--salt-spacing-100);
+  align-items: center;
+  grid-area: controls;
 }
-.saltCarousel-next-button {
-  grid-area: next-button;
-  height: 100%;
+.saltCarouselControls-container {
+  display: flex;
+  flex-flow: wrap;
+  align-items: center;
+  gap: var(--salt-spacing-100);
+  justify-content: space-between;
+}
+.saltCarouselControls-container:last-child {
+  margin-left: auto;
+}
+.saltCarouselControls-container h2 {
+  margin: 0;
+}
+.saltCarouselControls-sr-only {
+  display: none;
+}
+.saltCarouselControls:focus-within .saltCarouselControls-sr-only {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  transform: translate(-100%, -100%);
 }
-.saltCarousel-slider {
+
+/* src/carousel/CarouselSlide.css */
+.saltCarouselSlide {
+  scroll-snap-align: start;
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  width: var(--carousel-slide-width, 100%);
+  gap: var(--salt-spacing-200);
+}
+.saltCarouselSlide:focus-visible {
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(0px - var(--salt-focused-outlineWidth));
+}
+.saltCarouselSlide-actions {
+  display: none;
+}
+.saltCarouselSlide-sr-only {
+  position: fixed;
+  top: 0;
+  left: 0;
+  transform: translate(-100%, -100%);
+}
+.saltCarouselSlide-actions.saltCarouselSlide-visible {
+  display: flex;
+}
+.saltCarouselSlide-container {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  gap: var(--salt-spacing-200);
+  padding-left: var(--salt-spacing-25);
+  padding-bottom: var(--salt-spacing-25);
+  flex-grow: 1;
+}
+.saltCarouselSlide-content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: var(--salt-spacing-100);
+}
+.saltCarouselSlide-card {
+  padding: var(--salt-spacing-200);
+  padding-top: 0;
+}
+.saltCarouselSlide-content h2,
+.saltCarouselSlide-content h3 {
+  margin: 0;
+}
+.saltCarouselSlide-bordered {
+  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
+  border-radius: var(--salt-palette-corner, 0);
+  overflow: hidden;
+}
+
+/* src/carousel/CarouselSlider.css */
+.saltCarouselSlider {
+  display: flex;
+  scroll-snap-type: x mandatory;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  width: 100%;
+  gap: var(--salt-spacing-100);
   grid-area: slider;
 }
-.saltCarousel-dots {
-  grid-area: dots;
-  justify-self: center;
+@supports (scrollbar-width: none) {
+  .saltCarouselSlider {
+    scrollbar-width: none;
+  }
+}
+@supports not (scrollbar-width: none) {
+  .saltCarouselSlider::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 /* src/cascading-menu/CascadingMenuItem.css */
@@ -2892,204 +2987,6 @@
   letter-spacing: var(--salt-text-letterSpacing);
 }
 
-/* src/stepped-tracker/Step.Connector.css */
-.saltStepConnector {
-  grid-area: connector;
-  transition-duration: inherit;
-  transition-timing-function: inherit;
-  transition-property: opacity, min-height;
-}
-.saltSteppedTracker-horizontal .saltStepConnector {
-  position: absolute;
-  transform: translateY(-100%);
-  top: calc(var(--step-icon-size) / 2);
-  left: calc(50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));
-  right: calc(-50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));
-  border-top-width: var(--salt-size-border-strong);
-  border-top-style: var(--salt-track-borderStyle-incomplete);
-  border-top-color: var(--salt-track-borderColor);
-}
-.saltSteppedTracker-horizontal .saltStep-stage-completed > .saltStepConnector,
-.saltSteppedTracker-horizontal .saltStep-stage-inprogress > .saltStepConnector {
-  border-top-style: var(--salt-track-borderStyle-complete);
-}
-.saltSteppedTracker-vertical .saltStepConnector {
-  min-height: var(--salt-size-base);
-  align-self: stretch;
-  justify-self: center;
-  border-left-width: var(--salt-size-border-strong);
-  border-left-style: var(--salt-track-borderStyle-incomplete);
-  border-left-color: var(--salt-track-borderColor);
-}
-.saltSteppedTracker-vertical .saltStep-stage-completed > .saltStepConnector,
-.saltSteppedTracker-vertical .saltStep-stage-inprogress > .saltStepConnector {
-  border-left-style: var(--salt-track-borderStyle-complete);
-}
-.saltStep-depth-0.saltStep:not(.saltStep-expanded):last-child > .saltStepConnector {
-  opacity: 0;
-  min-height: 0;
-}
-.saltStep-depth-0.saltStep-expanded:last-child .saltStep:not(.saltStep-expanded):last-child .saltStepConnector {
-  opacity: 0;
-  min-height: 0;
-}
-
-/* src/stepped-tracker/Step.Description.css */
-.saltStepDescription {
-  grid-area: description;
-}
-.saltSteppedTracker-vertical .saltStepDescription {
-  padding-bottom: var(--salt-spacing-300);
-  padding-left: calc((var(--step-depth)) * var(--salt-spacing-100));
-}
-.saltStep-status-warning > .saltStepDescription {
-  color: var(--salt-status-warning-foreground-informative);
-}
-.saltStep-status-error > .saltStepDescription {
-  color: var(--salt-status-error-foreground-informative);
-}
-
-/* src/stepped-tracker/Step.ExpandTrigger.css */
-.saltStepExpandTrigger {
-  grid-area: expand;
-}
-.saltButton.saltStepExpandTrigger:focus-visible {
-  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));
-}
-
-/* src/stepped-tracker/Step.Icon.css */
-.saltStepIcon {
-  grid-area: icon;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  justify-self: center;
-}
-.saltSteppedTracker-vertical .saltStepIcon {
-  height: var(--salt-size-base);
-}
-.saltStep-stage-pending > .saltStepIcon {
-  --saltIcon-color: var(--salt-status-static-foreground);
-}
-.saltStep-stage-locked > .saltStepIcon {
-  --saltIcon-color: var(--salt-status-static-foreground);
-}
-.saltStep-stage-inprogress > .saltStepIcon {
-  --saltIcon-color: var(--salt-status-info-foreground-decorative);
-}
-.saltStep-stage-active > .saltStepIcon {
-  --saltIcon-color: var(--salt-status-info-foreground-decorative);
-}
-.saltStep-stage-completed > .saltStepIcon {
-  --saltIcon-color: var(--salt-status-success-foreground-decorative);
-}
-.saltStep-status-warning > .saltStepIcon {
-  --saltIcon-color: var(--salt-status-warning-foreground-decorative);
-}
-.saltStep-status-error > .saltStepIcon {
-  --saltIcon-color: var(--salt-status-error-foreground-decorative);
-}
-
-/* src/stepped-tracker/Step.Label.css */
-.saltStepLabel {
-  grid-area: label;
-}
-.saltSteppedTracker-horizontal .saltStepLabel {
-  margin-top: var(--salt-spacing-50);
-}
-.saltSteppedTracker-vertical .saltStepLabel {
-  padding-top: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);
-  padding-bottom: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);
-  padding-left: calc((var(--step-depth)) * var(--salt-spacing-100));
-}
-.saltStep-depth-0 > .saltText.saltStepLabel {
-  font-weight: var(--salt-text-fontWeight-strong);
-}
-
-/* src/stepped-tracker/Step.SROnly.css */
-.saltStepSROnly {
-  position: fixed;
-  top: 0;
-  left: 0;
-  transform: translate(-100%, -100%);
-}
-
-/* src/stepped-tracker/Step.css */
-.saltStep {
-  --step-icon-base-size: var(--salt-size-icon, 12px);
-  --step-icon-size-multiplier: var(--saltIcon-size-multiplier, 1.5);
-  --step-icon-size: calc(var(--step-icon-base-size) * var(--step-icon-size-multiplier));
-  --step-depth: var(--saltStep-depth, 0);
-}
-.saltSteppedTracker-horizontal .saltStep {
-  position: relative;
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: repeat(3, min-content);
-  grid-template-areas: "icon" "label" "description";
-  justify-items: center;
-  align-items: center;
-  text-align: center;
-  flex: 1;
-  padding: 0 var(--salt-spacing-25);
-}
-.saltSteppedTracker-vertical .saltStep {
-  display: grid;
-  grid-template-columns: var(--step-icon-size) 1fr min-content;
-  grid-template-areas: "icon            label           expand" "connector       description     ." "stepped-tracker stepped-tracker stepped-tracker";
-  justify-items: start;
-  align-items: start;
-  gap: 0 var(--salt-spacing-100);
-  width: 100%;
-  transition-duration: inherit;
-  transition-timing-function: inherit;
-  transition-property: grid-template-rows;
-}
-.saltSteppedTracker-vertical .saltStep-terminal {
-  grid-template-areas: "icon            label           label" "connector       description     description" "stepped-tracker stepped-tracker stepped-tracker";
-}
-.saltSteppedTracker-vertical > .saltStep.saltStep-expanded {
-  grid-template-rows: var(--salt-size-base) min-content 1fr;
-}
-.saltSteppedTracker-vertical > .saltStep.saltStep-collapsed {
-  grid-template-rows: var(--salt-size-base) min-content 0fr;
-}
-
-/* src/stepped-tracker/SteppedTracker.css */
-.saltSteppedTracker {
-  grid-area: stepped-tracker;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-  transition-duration: var(--salt-duration-perceptible);
-  transition-timing-function: ease-in-out;
-  transition-property: opacity, visibility;
-}
-@media (prefers-reduced-motion) {
-  .saltSteppedTracker {
-    transition-duration: var(--salt-duration-instant);
-  }
-}
-.saltSteppedTracker-horizontal {
-  display: flex;
-  flex-direction: row;
-}
-.saltSteppedTracker-vertical {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.saltSteppedTracker-vertical > .saltStep.saltStep-expanded > .saltSteppedTracker {
-  opacity: 1;
-  visibility: visible;
-}
-.saltSteppedTracker-vertical > .saltStep.saltStep-collapsed > .saltSteppedTracker {
-  opacity: 0;
-  visibility: hidden;
-}
-
 /* src/system-status/SystemStatus.css */
 .saltSystemStatus {
   background: var(--saltSystemStatus-background, var(--systemStatus-background));
@@ -4597,4 +4494,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/5896d85c-5f80-4171-bcd0-176a25d4d17f.css */
+/* src/c73aefdf-62ff-4b8b-8ac0-ab77a4c4d85e.css */

package/dist-cjs/carousel/Carousel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltGridLayout.saltCarousel {\n  grid-template-columns: min-content auto min-content;\n  grid-template-areas: \"prev-button slider next-button\" \"dots dots dots\";\n}\n\n.saltCarousel.saltCarousel-compact {\n  grid-template-areas: \"slider slider slider\" \"prev-button dots next-button\";\n}\n\n.saltCarousel-prev-button {\n  grid-area: prev-button;\n  height: 100%;\n}\n\n.saltCarousel-next-button {\n  grid-area: next-button;\n  height: 100%;\n}\n\n.saltCarousel-slider {\n  grid-area: slider;\n}\n\n.saltCarousel-dots {\n  grid-area: dots;\n  justify-self: center;\n}\n";
+var css_248z = ".saltCarousel {\n  display: grid;\n  grid-row-gap: var(--salt-spacing-100);\n  grid-template-areas: \"controls\" \"slider\";\n  grid-template-rows: auto 1fr;\n}\n\n.saltCarousel.saltCarousel-bottom {\n  grid-template-areas: \"slider\" \"controls\";\n  grid-template-rows: 1fr auto;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Carousel.css.js.map

package/dist-cjs/carousel/Carousel.js

@@ -1,24 +1,22 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
 var core = require('@salt-ds/core');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var clsx = require('clsx');
-var DeckLayout = require('../deck-layout/DeckLayout.js');
-var useSlideSelection = require('../utils/useSlideSelection.js');
+var react = require('react');
 var Carousel$1 = require('./Carousel.css.js');
+var CarouselContext = require('./CarouselContext.js');
 
 const withBaseName = core.makePrefixer("saltCarousel");
 const Carousel = react.forwardRef(
   function Carousel2({
-    initialIndex,
-    animation = "slide",
-    carouselDescription,
+    defaultActiveSlideIndex = 0,
+    activeSlideIndex,
+    visibleSlides: visibleSlidesProp = 1,
     children,
-    className,
-    compact,
+    controlsPlacement = "top",
     id: idProp,
     ...rest
   }, ref) {
@@ -28,88 +26,33 @@ const Carousel = react.forwardRef(
       css: Carousel$1,
       window: targetWindow
     });
-    const { NextIcon, PreviousIcon } = core.useIcon();
+    const { matchedBreakpoints } = core.useBreakpoint();
+    const visibleSlides = core.resolveResponsiveValue(
+      visibleSlidesProp,
+      matchedBreakpoints
+    );
     const id = core.useId(idProp);
-    const slidesCount = react.Children.count(children);
-    const [_, selectedSlide, handleSlideSelection] = useSlideSelection.useSlideSelection(initialIndex);
-    const moveSlide = (direction) => {
-      const moveLeft = selectedSlide === 0 ? slidesCount - 1 : selectedSlide - 1;
-      const moveRight = selectedSlide === slidesCount - 1 ? 0 : selectedSlide + 1;
-      const newSelection = direction === "left" ? moveLeft : moveRight;
-      const newTransition = direction === "left" ? "decrease" : "increase";
-      handleSlideSelection(newSelection, newTransition);
-    };
-    const handleRadioChange = ({
-      target: { value }
-    }) => {
-      handleSlideSelection(Number(value));
-    };
-    react.useEffect(() => {
-      if (process.env.NODE_ENV !== "production") {
-        if (slidesCount < 1) {
-          console.warn(
-            "Carousel component requires more than one children to render. At least two elements should be provided."
-          );
-        }
-      }
-    }, [slidesCount]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      core.GridLayout,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CarouselContext.CarouselProvider,
       {
-        "aria-label": carouselDescription,
-        "aria-roledescription": "carousel",
+        defaultActiveSlideIndex,
+        activeSlideIndex,
+        visibleSlides,
         id,
-        role: "region",
-        ref,
-        gap: 0,
-        columns: 3,
-        className: clsx.clsx(
-          withBaseName(),
-          compact && withBaseName("compact"),
-          className
-        ),
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            core.Button,
-            {
-              variant: "secondary",
-              className: withBaseName("prev-button"),
-              onClick: () => moveSlide("left"),
-              children: /* @__PURE__ */ jsxRuntime.jsx(PreviousIcon, { size: 2 })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            DeckLayout.DeckLayout,
-            {
-              activeIndex: selectedSlide,
-              animation,
-              className: withBaseName("slider"),
-              children
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            core.Button,
-            {
-              variant: "secondary",
-              className: withBaseName("next-button"),
-              onClick: () => moveSlide("right"),
-              children: /* @__PURE__ */ jsxRuntime.jsx(NextIcon, { size: 2 })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("dots"), children: /* @__PURE__ */ jsxRuntime.jsx(
-            core.RadioButtonGroup,
-            {
-              "aria-label": "Carousel buttons",
-              onChange: handleRadioChange,
-              value: `${selectedSlide}`,
-              direction: "horizontal",
-              children: Array.from({ length: slidesCount }, (_2, index) => ({
-                value: `${index}`
-              })).map((radio) => /* @__PURE__ */ react.createElement(core.RadioButton, { ...radio, key: radio.value }))
-            }
-          ) })
-        ]
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "section",
+          {
+            role: "region",
+            className: clsx.clsx(withBaseName(), {
+              [withBaseName(controlsPlacement)]: controlsPlacement === "bottom"
+            }),
+            "aria-roledescription": "carousel",
+            id,
+            ref,
+            ...rest,
+            children
+          }
+        )
       }
     );
   }

package/dist-cjs/carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sources":["../src/carousel/Carousel.tsx"],"sourcesContent":["import {\n  Button,\n  GridLayout,\n  RadioButton,\n  RadioButtonGroup,\n  makePrefixer,\n  useIcon,\n  useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  Children,\n  type HTMLAttributes,\n  type ReactElement,\n  forwardRef,\n  useEffect,\n} from \"react\";\nimport { DeckLayout } from \"../deck-layout\";\nimport { useSlideSelection } from \"../utils\";\nimport type { CarouselSlideProps } from \"./CarouselSlide\";\n\nimport carouselCss from \"./Carousel.css\";\n\nconst withBaseName = makePrefixer(\"saltCarousel\");\n\nexport interface CarouselProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The initial Index enables you to select the active slide in the carousel.\n   * Optional, default 0.\n   **/\n  initialIndex?: number;\n  /**\n   * The animation when the slides are shown.\n   * Optional. Defaults to `slide`\n   **/\n  animation?: \"slide\" | \"fade\";\n  /**\n   * If this props is passed it will set the aria-label with value to the carousel container.\n   * Optional. Defaults to undefined\n   */\n  carouselDescription?: string;\n  /**\n   * Collection of slides to render\n   * Component must implement CarouselSlideProps. Mandatory.\n   */\n  children: Array<ReactElement<CarouselSlideProps>>;\n  /**\n   * This prop will enable compact / reduced width mode.\n   * The navigation buttons would be part of indicators\n   * Optional. Defaults to false\n   **/\n  compact?: boolean;\n  /**\n   * It sets the id for the Carousel Container.\n   * String. Optional\n   */\n  id?: string;\n}\n\nexport const Carousel = forwardRef<HTMLDivElement, CarouselProps>(\n  function Carousel(\n    {\n      initialIndex,\n      animation = \"slide\",\n      carouselDescription,\n      children,\n      className,\n      compact,\n      id: idProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel\",\n      css: carouselCss,\n      window: targetWindow,\n    });\n    const { NextIcon, PreviousIcon } = useIcon();\n    const id = useId(idProp);\n    const slidesCount = Children.count(children);\n\n    const [_, selectedSlide, handleSlideSelection] =\n      useSlideSelection(initialIndex);\n\n    const moveSlide = (direction: \"left\" | \"right\") => {\n      const moveLeft =\n        selectedSlide === 0 ? slidesCount - 1 : selectedSlide - 1;\n      const moveRight =\n        selectedSlide === slidesCount - 1 ? 0 : selectedSlide + 1;\n      const newSelection = direction === \"left\" ? moveLeft : moveRight;\n      const newTransition = direction === \"left\" ? \"decrease\" : \"increase\";\n      handleSlideSelection(newSelection, newTransition);\n    };\n\n    const handleRadioChange: ChangeEventHandler<HTMLInputElement> = ({\n      target: { value },\n    }) => {\n      handleSlideSelection(Number(value));\n    };\n\n    useEffect(() => {\n      if (process.env.NODE_ENV !== \"production\") {\n        if (slidesCount < 1) {\n          console.warn(\n            \"Carousel component requires more than one children to render. At least two elements should be provided.\",\n          );\n        }\n      }\n    }, [slidesCount]);\n\n    return (\n      <GridLayout\n        aria-label={carouselDescription}\n        aria-roledescription=\"carousel\"\n        id={id}\n        role=\"region\"\n        ref={ref}\n        gap={0}\n        columns={3}\n        className={clsx(\n          withBaseName(),\n          compact && withBaseName(\"compact\"),\n          className,\n        )}\n        {...rest}\n      >\n        <Button\n          variant=\"secondary\"\n          className={withBaseName(\"prev-button\")}\n          onClick={() => moveSlide(\"left\")}\n        >\n          <PreviousIcon size={2} />\n        </Button>\n        <DeckLayout\n          activeIndex={selectedSlide}\n          animation={animation}\n          className={withBaseName(\"slider\")}\n        >\n          {children}\n        </DeckLayout>\n        <Button\n          variant=\"secondary\"\n          className={withBaseName(\"next-button\")}\n          onClick={() => moveSlide(\"right\")}\n        >\n          <NextIcon size={2} />\n        </Button>\n        <div className={withBaseName(\"dots\")}>\n          <RadioButtonGroup\n            aria-label=\"Carousel buttons\"\n            onChange={handleRadioChange}\n            value={`${selectedSlide}`}\n            direction={\"horizontal\"}\n          >\n            {Array.from({ length: slidesCount }, (_, index) => ({\n              value: `${index}`,\n            })).map((radio) => (\n              <RadioButton {...radio} key={radio.value} />\n            ))}\n          </RadioButtonGroup>\n        </div>\n      </GridLayout>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Carousel","useWindow","useComponentCssInjection","carouselCss","useIcon","useId","Children","useSlideSelection","useEffect","jsxs","GridLayout","clsx","jsx","Button","DeckLayout","RadioButtonGroup","_","createElement","RadioButton"],"mappings":"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"}
+{"version":3,"file":"Carousel.js","sources":["../src/carousel/Carousel.tsx"],"sourcesContent":["import {\n  type ResponsiveProp,\n  makePrefixer,\n  resolveResponsiveValue,\n  useBreakpoint,\n  useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\nimport carouselCss from \"./Carousel.css\";\nimport { CarouselProvider } from \"./CarouselContext\";\n\nconst withBaseName = makePrefixer(\"saltCarousel\");\n\nexport interface CarouselProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The initial Index enables you to select the active slide in the carousel.\n   * Optional, default 0.\n   **/\n  defaultActiveSlideIndex?: number;\n  /**\n   * Controlled index of active slide in the carousel.\n   **/\n  activeSlideIndex?: number;\n  /**\n   * Set the placement of the CarouselControls relative to the CarouselSlider element. Defaults to `top`.\n   */\n  controlsPlacement?: \"top\" | \"bottom\";\n  /**\n   * Number of slides visible at a time.\n   * Optional, default 1.\n   **/\n  visibleSlides?: ResponsiveProp<number>;\n}\n\nexport const Carousel = forwardRef<HTMLDivElement, CarouselProps>(\n  function Carousel(\n    {\n      defaultActiveSlideIndex = 0,\n      activeSlideIndex,\n      visibleSlides: visibleSlidesProp = 1,\n      children,\n      controlsPlacement = \"top\",\n      id: idProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel\",\n      css: carouselCss,\n      window: targetWindow,\n    });\n    const { matchedBreakpoints } = useBreakpoint();\n\n    const visibleSlides = resolveResponsiveValue(\n      visibleSlidesProp,\n      matchedBreakpoints,\n    );\n    const id = useId(idProp);\n    return (\n      <CarouselProvider\n        defaultActiveSlideIndex={defaultActiveSlideIndex}\n        activeSlideIndex={activeSlideIndex}\n        visibleSlides={visibleSlides}\n        id={id}\n      >\n        <section\n          role=\"region\"\n          className={clsx(withBaseName(), {\n            [withBaseName(controlsPlacement)]: controlsPlacement === \"bottom\",\n          })}\n          aria-roledescription=\"carousel\"\n          id={id}\n          ref={ref}\n          {...rest}\n        >\n          {children}\n        </section>\n      </CarouselProvider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Carousel","useWindow","useComponentCssInjection","carouselCss","useBreakpoint","resolveResponsiveValue","useId","jsx","CarouselProvider","clsx"],"mappings":";;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA;AAuBzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SACP,CAAA;AAAA,IACE,uBAA0B,GAAA,CAAA;AAAA,IAC1B,gBAAA;AAAA,IACA,eAAe,iBAAoB,GAAA,CAAA;AAAA,IACnC,QAAA;AAAA,IACA,iBAAoB,GAAA,KAAA;AAAA,IACpB,EAAI,EAAA,MAAA;AAAA,IACJ,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAIC,kBAAc,EAAA;AAE7C,IAAA,MAAM,aAAgB,GAAAC,2BAAA;AAAA,MACpB,iBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA;AACvB,IACE,uBAAAC,cAAA;AAAA,MAACC,gCAAA;AAAA,MAAA;AAAA,QACC,uBAAA;AAAA,QACA,gBAAA;AAAA,QACA,aAAA;AAAA,QACA,EAAA;AAAA,QAEA,QAAA,kBAAAD,cAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,IAAK,EAAA,QAAA;AAAA,YACL,SAAA,EAAWE,SAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,cAC9B,CAAC,YAAA,CAAa,iBAAiB,CAAC,GAAG,iBAAsB,KAAA;AAAA,aAC1D,CAAA;AAAA,YACD,sBAAqB,EAAA,UAAA;AAAA,YACrB,EAAA;AAAA,YACA,GAAA;AAAA,YACC,GAAG,IAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA,KACF;AAAA;AAGN;;;;"}

package/dist-cjs/carousel/CarouselContext.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var react = require('react');
+var CarouselReducer = require('./CarouselReducer.js');
+
+const CarouselStateContext = core.createContext(
+  "CarouselStateContext",
+  {
+    slides: /* @__PURE__ */ new Map(),
+    activeSlideIndex: 0,
+    visibleSlides: 1,
+    focusedSlideIndex: 0,
+    carouselId: void 0
+  }
+);
+const CarouselDispatchContext = core.createContext(
+  "CarouselDispatchContext",
+  () => {
+    return;
+  }
+);
+function CarouselProvider({
+  children,
+  activeSlideIndex: activeSlideIndexProp,
+  defaultActiveSlideIndex = 0,
+  visibleSlides = 1,
+  id
+}) {
+  const [activeSlideIndex, setActiveSlideIndex] = core.useControlled({
+    controlled: activeSlideIndexProp,
+    default: defaultActiveSlideIndex,
+    name: "Carousel",
+    state: "activeSlideIndex"
+  });
+  const [state, dispatch] = react.useReducer(CarouselReducer.carouselReducer, {
+    slides: /* @__PURE__ */ new Map(),
+    focusedSlideIndex: activeSlideIndex,
+    activeSlideIndex,
+    visibleSlides,
+    carouselId: id
+  });
+  react.useEffect(() => {
+    dispatch({
+      type: "updateSlideCount",
+      payload: visibleSlides
+    });
+  }, [visibleSlides]);
+  react.useEffect(() => {
+    dispatch({
+      type: "moveToIndex",
+      payload: activeSlideIndex
+    });
+  }, [activeSlideIndex]);
+  return /* @__PURE__ */ jsxRuntime.jsx(CarouselStateContext.Provider, { value: state, children: /* @__PURE__ */ jsxRuntime.jsx(CarouselDispatchContext.Provider, { value: dispatch, children }) });
+}
+
+exports.CarouselDispatchContext = CarouselDispatchContext;
+exports.CarouselProvider = CarouselProvider;
+exports.CarouselStateContext = CarouselStateContext;
+//# sourceMappingURL=CarouselContext.js.map

package/dist-cjs/carousel/CarouselContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselContext.js","sources":["../src/carousel/CarouselContext.tsx"],"sourcesContent":["import { createContext, useControlled } from \"@salt-ds/core\";\nimport { type ReactNode, useEffect, useReducer } from \"react\";\nimport {\n  type CarouselReducerDispatch,\n  type CarouselReducerState,\n  carouselReducer,\n} from \"./CarouselReducer\";\n\nexport const CarouselStateContext = createContext<CarouselReducerState>(\n  \"CarouselStateContext\",\n  {\n    slides: new Map(),\n    activeSlideIndex: 0,\n    visibleSlides: 1,\n    focusedSlideIndex: 0,\n    carouselId: undefined,\n  },\n);\nexport const CarouselDispatchContext = createContext<CarouselReducerDispatch>(\n  \"CarouselDispatchContext\",\n  () => {\n    return;\n  },\n);\n\nexport function CarouselProvider({\n  children,\n  activeSlideIndex: activeSlideIndexProp,\n  defaultActiveSlideIndex = 0,\n  visibleSlides = 1,\n  id,\n}: {\n  children: ReactNode;\n  activeSlideIndex?: number;\n  defaultActiveSlideIndex?: number;\n  visibleSlides?: number;\n  id?: string;\n}) {\n  const [activeSlideIndex, setActiveSlideIndex] = useControlled({\n    controlled: activeSlideIndexProp,\n    default: defaultActiveSlideIndex,\n    name: \"Carousel\",\n    state: \"activeSlideIndex\",\n  });\n  const [state, dispatch] = useReducer(carouselReducer, {\n    slides: new Map(),\n    focusedSlideIndex: activeSlideIndex,\n    activeSlideIndex,\n    visibleSlides,\n    carouselId: id,\n  });\n\n  useEffect(() => {\n    dispatch({\n      type: \"updateSlideCount\",\n      payload: visibleSlides,\n    });\n  }, [visibleSlides]);\n\n  useEffect(() => {\n    dispatch({\n      type: \"moveToIndex\",\n      payload: activeSlideIndex,\n    });\n  }, [activeSlideIndex]);\n\n  return (\n    <CarouselStateContext.Provider value={state}>\n      <CarouselDispatchContext.Provider value={dispatch}>\n        {children}\n      </CarouselDispatchContext.Provider>\n    </CarouselStateContext.Provider>\n  );\n}\n"],"names":["createContext","useControlled","useReducer","carouselReducer","useEffect","jsx"],"mappings":";;;;;;;AAQO,MAAM,oBAAuB,GAAAA,kBAAA;AAAA,EAClC,sBAAA;AAAA,EACA;AAAA,IACE,MAAA,sBAAY,GAAI,EAAA;AAAA,IAChB,gBAAkB,EAAA,CAAA;AAAA,IAClB,aAAe,EAAA,CAAA;AAAA,IACf,iBAAmB,EAAA,CAAA;AAAA,IACnB,UAAY,EAAA,KAAA;AAAA;AAEhB;AACO,MAAM,uBAA0B,GAAAA,kBAAA;AAAA,EACrC,yBAAA;AAAA,EACA,MAAM;AACJ,IAAA;AAAA;AAEJ;AAEO,SAAS,gBAAiB,CAAA;AAAA,EAC/B,QAAA;AAAA,EACA,gBAAkB,EAAA,oBAAA;AAAA,EAClB,uBAA0B,GAAA,CAAA;AAAA,EAC1B,aAAgB,GAAA,CAAA;AAAA,EAChB;AACF,CAMG,EAAA;AACD,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAIC,kBAAc,CAAA;AAAA,IAC5D,UAAY,EAAA,oBAAA;AAAA,IACZ,OAAS,EAAA,uBAAA;AAAA,IACT,IAAM,EAAA,UAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AACD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,iBAAWC,+BAAiB,EAAA;AAAA,IACpD,MAAA,sBAAY,GAAI,EAAA;AAAA,IAChB,iBAAmB,EAAA,gBAAA;AAAA,IACnB,gBAAA;AAAA,IACA,aAAA;AAAA,IACA,UAAY,EAAA;AAAA,GACb,CAAA;AAED,EAAAC,eAAA,CAAU,MAAM;AACd,IAAS,QAAA,CAAA;AAAA,MACP,IAAM,EAAA,kBAAA;AAAA,MACN,OAAS,EAAA;AAAA,KACV,CAAA;AAAA,GACH,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,EAAAA,eAAA,CAAU,MAAM;AACd,IAAS,QAAA,CAAA;AAAA,MACP,IAAM,EAAA,aAAA;AAAA,MACN,OAAS,EAAA;AAAA,KACV,CAAA;AAAA,GACH,EAAG,CAAC,gBAAgB,CAAC,CAAA;AAErB,EAAA,uBACGC,cAAA,CAAA,oBAAA,CAAqB,QAArB,EAAA,EAA8B,KAAO,EAAA,KAAA,EACpC,QAAC,kBAAAA,cAAA,CAAA,uBAAA,CAAwB,QAAxB,EAAA,EAAiC,KAAO,EAAA,QAAA,EACtC,UACH,CACF,EAAA,CAAA;AAEJ;;;;;;"}