@salt-ds/embla-carousel 0.1.4 → 0.1.6

package/dist-es/usePrevNextButtons.js

@@ -4,11 +4,13 @@ import { useCarouselContext } from './CarouselContext.js';
 const usePrevNextButtons = () => {
   const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
   const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
-  const { emblaApi } = useCarouselContext();
+  const { emblaApi, setAnnouncementState } = useCarouselContext();
   const handlePrevButtonClick = () => {
+    setAnnouncementState("navigation");
     emblaApi == null ? void 0 : emblaApi.scrollPrev();
   };
   const handleNextButtonClick = () => {
+    setAnnouncementState("navigation");
     emblaApi == null ? void 0 : emblaApi.scrollNext();
   };
   useEffect(() => {

package/dist-es/usePrevNextButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePrevNextButtons.js","sources":["../src/usePrevNextButtons.tsx"],"sourcesContent":["import type { EmblaCarouselType } from \"embla-carousel\";\nimport { useEffect, useState } from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\n\ntype UsePrevNextButtonsType = {\n  /**\n   * Indicates whether the previous button is disabled.\n   */\n  prevBtnDisabled: boolean;\n  /**\n   * Indicates whether the next button is disabled.\n   */\n  nextBtnDisabled: boolean;\n  /**\n   * Handles the click event for the previous button.\n   */\n  onPrevButtonClick: () => void;\n  /**\n   * Handles the click event for the next button.\n   */\n  onNextButtonClick: () => void;\n};\n\nexport const usePrevNextButtons = (): UsePrevNextButtonsType => {\n  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);\n  const [nextBtnDisabled, setNextBtnDisabled] = useState(true);\n\n  const { emblaApi } = useCarouselContext();\n\n  const handlePrevButtonClick = () => {\n    emblaApi?.scrollPrev();\n  };\n\n  const handleNextButtonClick = () => {\n    emblaApi?.scrollNext();\n  };\n\n  useEffect(() => {\n    const handleSelect = (emblaApi: EmblaCarouselType) => {\n      setPrevBtnDisabled(!emblaApi.canScrollPrev());\n      setNextBtnDisabled(!emblaApi.canScrollNext());\n    };\n\n    if (!emblaApi) {\n      return;\n    }\n    handleSelect(emblaApi);\n    emblaApi\n      .on(\"init\", handleSelect)\n      .on(\"reInit\", handleSelect)\n      .on(\"select\", handleSelect);\n    // Cleanup listener on component unmount\n    return () => {\n      emblaApi\n        .off(\"init\", handleSelect)\n        .off(\"reInit\", handleSelect)\n        .off(\"select\", handleSelect);\n    };\n  }, [emblaApi]);\n\n  return {\n    prevBtnDisabled,\n    nextBtnDisabled,\n    onPrevButtonClick: handlePrevButtonClick,\n    onNextButtonClick: handleNextButtonClick,\n  };\n};\n"],"names":["emblaApi"],"mappings":";;;AAuBO,MAAM,qBAAqB,MAA8B;AAC9D,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,IAAI,CAAA;AAC3D,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,IAAI,CAAA;AAE3D,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,kBAAmB,EAAA;AAExC,EAAA,MAAM,wBAAwB,MAAM;AAClC,IAAU,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,UAAA,EAAA;AAAA,GACZ;AAEA,EAAA,MAAM,wBAAwB,MAAM;AAClC,IAAU,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,UAAA,EAAA;AAAA,GACZ;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,YAAA,GAAe,CAACA,SAAgC,KAAA;AACpD,MAAmB,kBAAA,CAAA,CAACA,SAAS,CAAA,aAAA,EAAe,CAAA;AAC5C,MAAmB,kBAAA,CAAA,CAACA,SAAS,CAAA,aAAA,EAAe,CAAA;AAAA,KAC9C;AAEA,IAAA,IAAI,CAAC,QAAU,EAAA;AACb,MAAA;AAAA;AAEF,IAAA,YAAA,CAAa,QAAQ,CAAA;AACrB,IACG,QAAA,CAAA,EAAA,CAAG,MAAQ,EAAA,YAAY,CACvB,CAAA,EAAA,CAAG,UAAU,YAAY,CAAA,CACzB,EAAG,CAAA,QAAA,EAAU,YAAY,CAAA;AAE5B,IAAA,OAAO,MAAM;AACX,MACG,QAAA,CAAA,GAAA,CAAI,MAAQ,EAAA,YAAY,CACxB,CAAA,GAAA,CAAI,UAAU,YAAY,CAAA,CAC1B,GAAI,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA,KAC/B;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAO,OAAA;AAAA,IACL,eAAA;AAAA,IACA,eAAA;AAAA,IACA,iBAAmB,EAAA,qBAAA;AAAA,IACnB,iBAAmB,EAAA;AAAA,GACrB;AACF;;;;"}
+{"version":3,"file":"usePrevNextButtons.js","sources":["../src/usePrevNextButtons.tsx"],"sourcesContent":["import type { EmblaCarouselType } from \"embla-carousel\";\nimport { useEffect, useState } from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\n\ntype UsePrevNextButtonsType = {\n  /**\n   * Indicates whether the previous button is disabled.\n   */\n  prevBtnDisabled: boolean;\n  /**\n   * Indicates whether the next button is disabled.\n   */\n  nextBtnDisabled: boolean;\n  /**\n   * Handles the click event for the previous button.\n   */\n  onPrevButtonClick: () => void;\n  /**\n   * Handles the click event for the next button.\n   */\n  onNextButtonClick: () => void;\n};\n\nexport const usePrevNextButtons = (): UsePrevNextButtonsType => {\n  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);\n  const [nextBtnDisabled, setNextBtnDisabled] = useState(true);\n\n  const { emblaApi, setAnnouncementState } = useCarouselContext();\n\n  const handlePrevButtonClick = () => {\n    setAnnouncementState(\"navigation\");\n    emblaApi?.scrollPrev();\n  };\n\n  const handleNextButtonClick = () => {\n    setAnnouncementState(\"navigation\");\n    emblaApi?.scrollNext();\n  };\n\n  useEffect(() => {\n    const handleSelect = (emblaApi: EmblaCarouselType) => {\n      setPrevBtnDisabled(!emblaApi.canScrollPrev());\n      setNextBtnDisabled(!emblaApi.canScrollNext());\n    };\n\n    if (!emblaApi) {\n      return;\n    }\n    handleSelect(emblaApi);\n    emblaApi\n      .on(\"init\", handleSelect)\n      .on(\"reInit\", handleSelect)\n      .on(\"select\", handleSelect);\n    // Cleanup listener on component unmount\n    return () => {\n      emblaApi\n        .off(\"init\", handleSelect)\n        .off(\"reInit\", handleSelect)\n        .off(\"select\", handleSelect);\n    };\n  }, [emblaApi]);\n\n  return {\n    prevBtnDisabled,\n    nextBtnDisabled,\n    onPrevButtonClick: handlePrevButtonClick,\n    onNextButtonClick: handleNextButtonClick,\n  };\n};\n"],"names":["emblaApi"],"mappings":";;;AAuBO,MAAM,qBAAqB,MAA8B;AAC9D,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,IAAI,CAAA;AAC3D,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,IAAI,CAAA;AAE3D,EAAA,MAAM,EAAE,QAAA,EAAU,oBAAA,EAAqB,GAAI,kBAAA,EAAmB;AAE9D,EAAA,MAAM,wBAAwB,MAAM;AAClC,IAAA,oBAAA,CAAqB,YAAY,CAAA;AACjC,IAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,UAAA,EAAA;AAAA,EACZ,CAAA;AAEA,EAAA,MAAM,wBAAwB,MAAM;AAClC,IAAA,oBAAA,CAAqB,YAAY,CAAA;AACjC,IAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,UAAA,EAAA;AAAA,EACZ,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,YAAA,GAAe,CAACA,SAAAA,KAAgC;AACpD,MAAA,kBAAA,CAAmB,CAACA,SAAAA,CAAS,aAAA,EAAe,CAAA;AAC5C,MAAA,kBAAA,CAAmB,CAACA,SAAAA,CAAS,aAAA,EAAe,CAAA;AAAA,IAC9C,CAAA;AAEA,IAAA,IAAI,CAAC,QAAA,EAAU;AACb,MAAA;AAAA,IACF;AACA,IAAA,YAAA,CAAa,QAAQ,CAAA;AACrB,IAAA,QAAA,CACG,EAAA,CAAG,MAAA,EAAQ,YAAY,CAAA,CACvB,EAAA,CAAG,UAAU,YAAY,CAAA,CACzB,EAAA,CAAG,QAAA,EAAU,YAAY,CAAA;AAE5B,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CACG,GAAA,CAAI,MAAA,EAAQ,YAAY,CAAA,CACxB,GAAA,CAAI,UAAU,YAAY,CAAA,CAC1B,GAAA,CAAI,QAAA,EAAU,YAAY,CAAA;AAAA,IAC/B,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,OAAO;AAAA,IACL,eAAA;AAAA,IACA,eAAA;AAAA,IACA,iBAAA,EAAmB,qBAAA;AAAA,IACnB,iBAAA,EAAmB;AAAA,GACrB;AACF;;;;"}

package/dist-types/Carousel.d.ts

@@ -20,8 +20,14 @@ export interface CarouselProps extends ComponentPropsWithoutRef<"section"> {
      * These options are passed directly to the Embla Carousel instance.
      */
     emblaPlugins?: CarouselPlugin;
-    /** Get embla API instance, use this to manage the state of the Carousel */
+    /**
+     * Get embla API instance, use this to manage the state of the Carousel
+     **/
     getEmblaApi?: (embla: CarouselEmblaApiType) => void;
+    /**
+     * Disable screenreader announcing slide updates, defaults to false.
+     */
+    disableSlideAnnouncements?: boolean;
 }
 export declare const Carousel: import("react").ForwardRefExoticComponent<CarouselProps & import("react").RefAttributes<HTMLElement>>;
 export {};

package/dist-types/CarouselContext.d.ts

@@ -1,4 +1,7 @@
+import { type Dispatch, type SetStateAction } from "react";
 import type { CarouselEmblaApiType, CarouselEmblaRefType } from "./Carousel";
+export type CarouselAriaVariant = "group" | "tabpanel";
+export type CarouselAnnouncementTrigger = "tab" | "navigation" | "drag" | "focus";
 /**
  * Type definition for the Carousel context.
  * Provides access to the Embla Carousel API and reference.
@@ -14,6 +17,34 @@ interface CarouselContextType {
      * Used to directly interact with the carousel DOM element.
      */
     emblaRef?: CarouselEmblaRefType;
+    /**
+     * Aria variant for the Carousel.
+     * When used with a `CarouselTabList` the screenreader will be presented as a `tablist` of tabpanels.
+     * When used without a `CarouselTabList` the screenreader will be presented as a `group` of slides.
+     */
+    ariaVariant: CarouselAriaVariant;
+    /**
+     * Function to set the aria variant for the Carousel.
+     */
+    setAriaVariant: Dispatch<SetStateAction<CarouselAriaVariant>>;
+    /**
+     * Disable screenreader announcing slide updates, defaults to false.
+     */
+    disableSlideAnnouncements?: boolean;
+    /**
+     * Id for the carousel
+     */
+    carouselId: string | undefined;
+    /**
+     * Announcement state, determines whether change is communicated to screenreader.
+     * @param trigger
+     */
+    announcementState: CarouselAnnouncementTrigger | undefined;
+    /**
+     * Set announcement state, determines whether change is communicated to screenreader.
+     * @param trigger
+     */
+    setAnnouncementState: (trigger: CarouselAnnouncementTrigger | undefined) => void;
 }
 export declare const CarouselContext: import("react").Context<CarouselContextType | undefined>;
 export declare const useCarouselContext: () => CarouselContextType;

package/dist-types/CarouselTab.d.ts

@@ -13,12 +13,6 @@ type UseCarouselTabProps = {
      * An array of scroll snap positions for the carousel slides.
      */
     scrollSnaps: number[];
-    /**
-     * Handler function for clicking a tab button to navigate to a specific slide.
-     *
-     * @param index - The index of the slide to navigate to.
-     */
-    onClick: (index: number) => void;
 };
 export declare const useCarouselTab: (emblaApi: EmblaCarouselType | undefined) => UseCarouselTabProps;
 /**

package/dist-types/CarouselTabList.d.ts

@@ -1,5 +1,6 @@
 import { type RenderPropsType } from "@salt-ds/core";
 import { type HTMLAttributes } from "react";
+import { type CarouselTabProps } from "./CarouselTab";
 /**
  * Props for the CarouselTabList component.
  */
@@ -9,4 +10,7 @@ export interface CarouselTabListProps extends HTMLAttributes<HTMLDivElement> {
      */
     render?: RenderPropsType["render"];
 }
+export interface CarouselTabRendererProps extends CarouselTabProps {
+    render?: CarouselTabListProps["render"];
+}
 export declare const CarouselTabList: import("react").ForwardRefExoticComponent<CarouselTabListProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/getSlideDescription.d.ts

@@ -0,0 +1,7 @@
+import type { EmblaCarouselType } from "embla-carousel";
+/** Get a description of the slide.
+ * @param emblaApi
+ * @param slideIndex
+ * @returns A slide description if defined or an empty string
+ */
+export declare const getSlideDescription: (emblaApi: EmblaCarouselType | undefined, slideNumber: number) => string;

package/dist-types/getVisibleSlideDescription.d.ts

@@ -0,0 +1,7 @@
+import type { EmblaCarouselType } from "embla-carousel";
+/** Get a description of the visible slide(s).
+ * @param emblaApi
+ * @param slideIndex
+ * @returns An array of descriptions for the visible slides
+ */
+export declare const getVisibleSlideDescription: (emblaApi: EmblaCarouselType | undefined, scrollSnapIndex: number) => string;

package/dist-types/getVisibleSlideIndexes.d.ts

@@ -0,0 +1,8 @@
+import type { EmblaCarouselType } from "embla-carousel";
+export declare const getSlideNumberRange: (startSlideNumber: number, endSlideNumber: number) => number[];
+/** Get the visible slide indexes
+ * @param emblaApi
+ * @param scrollSnap
+ * @returns An array of visible slide indexes
+ */
+export declare const getVisibleSlideIndexes: (emblaApi: EmblaCarouselType | undefined, scrollSnapIndex: number) => number[];

package/dist-types/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./Carousel";
-export * from "./CarouselAnnouncementPlugin";
 export * from "./CarouselAutoplayIndicator";
 export * from "./CarouselCard";
 export * from "./CarouselContext";

package/package.json

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

package/dist-cjs/CarouselAnnouncementPlugin.js

@@ -1,52 +0,0 @@
-'use strict';
-
-var core = require('@salt-ds/core');
-var react = require('react');
-
-const getSlideLabel = (emblaApi) => {
-  var _a;
-  const slideCount = (emblaApi == null ? void 0 : emblaApi.slideNodes().length) ?? 0;
-  const slideIndexInView = ((_a = emblaApi == null ? void 0 : emblaApi.slidesInView()) == null ? void 0 : _a[0]) ?? 0;
-  const slideElement = emblaApi == null ? void 0 : emblaApi.slideNodes()[slideIndexInView];
-  let description = slideElement == null ? void 0 : slideElement.getAttribute("aria-label");
-  if (!description) {
-    const labelledById = slideElement == null ? void 0 : slideElement.getAttribute("aria-labelledby");
-    const { ownerDocument } = emblaApi.internalEngine();
-    if (labelledById) {
-      const labelledByElement = ownerDocument.getElementById(labelledById);
-      description = (labelledByElement == null ? void 0 : labelledByElement.textContent) || "No description available";
-    } else {
-      description = "No description available";
-    }
-  }
-  return `slide ${slideIndexInView + 1} of ${slideCount}. ${description}`;
-};
-function CarouselAnnouncement(userOptions = {}) {
-  let emblaApi;
-  const { announce } = core.useAriaAnnouncer();
-  const handleSettle = react.useCallback(
-    (emblaApi2) => {
-      const slideLabel = getSlideLabel(emblaApi2);
-      announce(slideLabel);
-    },
-    [announce]
-  );
-  function init(emblaApiInstance) {
-    emblaApi = emblaApiInstance;
-    emblaApi.on("settle", handleSettle);
-  }
-  function destroy() {
-    emblaApi.off("settle", handleSettle);
-  }
-  const self = {
-    name: "announcement",
-    options: userOptions,
-    init,
-    destroy
-  };
-  return self;
-}
-
-exports.CarouselAnnouncement = CarouselAnnouncement;
-exports.getSlideLabel = getSlideLabel;
-//# sourceMappingURL=CarouselAnnouncementPlugin.js.map

package/dist-cjs/CarouselAnnouncementPlugin.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CarouselAnnouncementPlugin.js","sources":["../src/CarouselAnnouncementPlugin.ts"],"sourcesContent":["import { useAriaAnnouncer } from \"@salt-ds/core\";\nimport type {\n  CreateOptionsType,\n  CreatePluginType,\n  EmblaCarouselType,\n} from \"embla-carousel\";\nimport { useCallback } from \"react\";\n\ndeclare module \"embla-carousel\" {\n  interface EmblaPluginsType {\n    announcement: CarouselAnnouncementType;\n  }\n}\n\n/**\n * Type definition for the parameters of the getSlideLabel function.\n * @returns A string that describes the slide, including its index and total count.\n */\nexport type GetSlideLabelProps = (emblaApi: EmblaCarouselType) => string;\n\n/** * Generates a label for a carousel slide based on ARIA attributes.\n * This function retrieves the slide's ARIA label or text content and formats it into a descriptive string.\n * @param slideElement\n * @param slideIndex\n * @param slideCount\n * @returns A string description of the slide, including its position and ARIA label or text content.\n */\nexport const getSlideLabel: GetSlideLabelProps = (emblaApi): string => {\n  const slideCount = emblaApi?.slideNodes().length ?? 0;\n  const slideIndexInView = emblaApi?.slidesInView()?.[0] ?? 0;\n  const slideElement = emblaApi?.slideNodes()[slideIndexInView];\n\n  let description = slideElement?.getAttribute(\"aria-label\");\n  if (!description) {\n    const labelledById = slideElement?.getAttribute(\"aria-labelledby\");\n    const { ownerDocument } = emblaApi.internalEngine();\n    if (labelledById) {\n      const labelledByElement = ownerDocument.getElementById(labelledById);\n      description =\n        labelledByElement?.textContent || \"No description available\";\n    } else {\n      description = \"No description available\";\n    }\n  }\n  return `slide ${slideIndexInView + 1} of ${slideCount}. ${description}`;\n};\n\n// biome-ignore lint/complexity/noBannedTypes: Replicated from embla docs/code\ntype OptionsType = CreateOptionsType<{}>;\n// biome-ignore lint/complexity/noBannedTypes: Replicated from embla docs/code\nexport type CarouselAnnouncementType = CreatePluginType<{}, OptionsType>;\n\nexport type CarouselAnnouncementOptionsType =\n  CarouselAnnouncementType[\"options\"];\n\nexport function CarouselAnnouncement(\n  userOptions: CarouselAnnouncementOptionsType = {},\n): CarouselAnnouncementType {\n  let emblaApi: EmblaCarouselType;\n\n  const { announce } = useAriaAnnouncer();\n\n  const handleSettle = useCallback(\n    (emblaApi: EmblaCarouselType) => {\n      const slideLabel = getSlideLabel(emblaApi);\n      announce(slideLabel);\n    },\n    [announce],\n  );\n\n  function init(emblaApiInstance: EmblaCarouselType): void {\n    emblaApi = emblaApiInstance;\n    emblaApi.on(\"settle\", handleSettle);\n  }\n\n  function destroy(): void {\n    emblaApi.off(\"settle\", handleSettle);\n  }\n\n  const self: CarouselAnnouncementType = {\n    name: \"announcement\",\n    options: userOptions,\n    init,\n    destroy,\n  };\n  return self;\n}\n"],"names":["useAriaAnnouncer","useCallback","emblaApi"],"mappings":";;;;;AA2Ba,MAAA,aAAA,GAAoC,CAAC,QAAqB,KAAA;AA3BvE,EAAA,IAAA,EAAA;AA4BE,EAAM,MAAA,UAAA,GAAA,CAAa,QAAU,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,UAAA,EAAA,CAAa,MAAU,KAAA,CAAA;AACpD,EAAA,MAAM,gBAAmB,GAAA,CAAA,CAAA,EAAA,GAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,YAAV,EAAA,KAAA,IAAA,GAAA,MAAA,GAAA,EAAA,CAA2B,CAAM,CAAA,KAAA,CAAA;AAC1D,EAAM,MAAA,YAAA,GAAe,qCAAU,UAAa,EAAA,CAAA,gBAAA,CAAA;AAE5C,EAAI,IAAA,WAAA,GAAc,6CAAc,YAAa,CAAA,YAAA,CAAA;AAC7C,EAAA,IAAI,CAAC,WAAa,EAAA;AAChB,IAAM,MAAA,YAAA,GAAe,6CAAc,YAAa,CAAA,iBAAA,CAAA;AAChD,IAAA,MAAM,EAAE,aAAA,EAAkB,GAAA,QAAA,CAAS,cAAe,EAAA;AAClD,IAAA,IAAI,YAAc,EAAA;AAChB,MAAM,MAAA,iBAAA,GAAoB,aAAc,CAAA,cAAA,CAAe,YAAY,CAAA;AACnE,MAAA,WAAA,GAAA,CACE,uDAAmB,WAAe,KAAA,0BAAA;AAAA,KAC/B,MAAA;AACL,MAAc,WAAA,GAAA,0BAAA;AAAA;AAChB;AAEF,EAAA,OAAO,SAAS,gBAAmB,GAAA,CAAC,CAAO,IAAA,EAAA,UAAU,KAAK,WAAW,CAAA,CAAA;AACvE;AAUgB,SAAA,oBAAA,CACd,WAA+C,GAAA,EACrB,EAAA;AAC1B,EAAI,IAAA,QAAA;AAEJ,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIA,qBAAiB,EAAA;AAEtC,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,CAACC,SAAgC,KAAA;AAC/B,MAAM,MAAA,UAAA,GAAa,cAAcA,SAAQ,CAAA;AACzC,MAAA,QAAA,CAAS,UAAU,CAAA;AAAA,KACrB;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,SAAS,KAAK,gBAA2C,EAAA;AACvD,IAAW,QAAA,GAAA,gBAAA;AACX,IAAS,QAAA,CAAA,EAAA,CAAG,UAAU,YAAY,CAAA;AAAA;AAGpC,EAAA,SAAS,OAAgB,GAAA;AACvB,IAAS,QAAA,CAAA,GAAA,CAAI,UAAU,YAAY,CAAA;AAAA;AAGrC,EAAA,MAAM,IAAiC,GAAA;AAAA,IACrC,IAAM,EAAA,cAAA;AAAA,IACN,OAAS,EAAA,WAAA;AAAA,IACT,IAAA;AAAA,IACA;AAAA,GACF;AACA,EAAO,OAAA,IAAA;AACT;;;;;"}

package/dist-cjs/CarouselProgressLabel.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = ".saltCarouselTabList.saltText {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=CarouselProgressLabel.css.js.map

package/dist-cjs/CarouselProgressLabel.css.js.map

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

package/dist-es/CarouselAnnouncementPlugin.js

@@ -1,49 +0,0 @@
-import { useAriaAnnouncer } from '@salt-ds/core';
-import { useCallback } from 'react';
-
-const getSlideLabel = (emblaApi) => {
-  var _a;
-  const slideCount = (emblaApi == null ? void 0 : emblaApi.slideNodes().length) ?? 0;
-  const slideIndexInView = ((_a = emblaApi == null ? void 0 : emblaApi.slidesInView()) == null ? void 0 : _a[0]) ?? 0;
-  const slideElement = emblaApi == null ? void 0 : emblaApi.slideNodes()[slideIndexInView];
-  let description = slideElement == null ? void 0 : slideElement.getAttribute("aria-label");
-  if (!description) {
-    const labelledById = slideElement == null ? void 0 : slideElement.getAttribute("aria-labelledby");
-    const { ownerDocument } = emblaApi.internalEngine();
-    if (labelledById) {
-      const labelledByElement = ownerDocument.getElementById(labelledById);
-      description = (labelledByElement == null ? void 0 : labelledByElement.textContent) || "No description available";
-    } else {
-      description = "No description available";
-    }
-  }
-  return `slide ${slideIndexInView + 1} of ${slideCount}. ${description}`;
-};
-function CarouselAnnouncement(userOptions = {}) {
-  let emblaApi;
-  const { announce } = useAriaAnnouncer();
-  const handleSettle = useCallback(
-    (emblaApi2) => {
-      const slideLabel = getSlideLabel(emblaApi2);
-      announce(slideLabel);
-    },
-    [announce]
-  );
-  function init(emblaApiInstance) {
-    emblaApi = emblaApiInstance;
-    emblaApi.on("settle", handleSettle);
-  }
-  function destroy() {
-    emblaApi.off("settle", handleSettle);
-  }
-  const self = {
-    name: "announcement",
-    options: userOptions,
-    init,
-    destroy
-  };
-  return self;
-}
-
-export { CarouselAnnouncement, getSlideLabel };
-//# sourceMappingURL=CarouselAnnouncementPlugin.js.map

package/dist-es/CarouselAnnouncementPlugin.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CarouselAnnouncementPlugin.js","sources":["../src/CarouselAnnouncementPlugin.ts"],"sourcesContent":["import { useAriaAnnouncer } from \"@salt-ds/core\";\nimport type {\n  CreateOptionsType,\n  CreatePluginType,\n  EmblaCarouselType,\n} from \"embla-carousel\";\nimport { useCallback } from \"react\";\n\ndeclare module \"embla-carousel\" {\n  interface EmblaPluginsType {\n    announcement: CarouselAnnouncementType;\n  }\n}\n\n/**\n * Type definition for the parameters of the getSlideLabel function.\n * @returns A string that describes the slide, including its index and total count.\n */\nexport type GetSlideLabelProps = (emblaApi: EmblaCarouselType) => string;\n\n/** * Generates a label for a carousel slide based on ARIA attributes.\n * This function retrieves the slide's ARIA label or text content and formats it into a descriptive string.\n * @param slideElement\n * @param slideIndex\n * @param slideCount\n * @returns A string description of the slide, including its position and ARIA label or text content.\n */\nexport const getSlideLabel: GetSlideLabelProps = (emblaApi): string => {\n  const slideCount = emblaApi?.slideNodes().length ?? 0;\n  const slideIndexInView = emblaApi?.slidesInView()?.[0] ?? 0;\n  const slideElement = emblaApi?.slideNodes()[slideIndexInView];\n\n  let description = slideElement?.getAttribute(\"aria-label\");\n  if (!description) {\n    const labelledById = slideElement?.getAttribute(\"aria-labelledby\");\n    const { ownerDocument } = emblaApi.internalEngine();\n    if (labelledById) {\n      const labelledByElement = ownerDocument.getElementById(labelledById);\n      description =\n        labelledByElement?.textContent || \"No description available\";\n    } else {\n      description = \"No description available\";\n    }\n  }\n  return `slide ${slideIndexInView + 1} of ${slideCount}. ${description}`;\n};\n\n// biome-ignore lint/complexity/noBannedTypes: Replicated from embla docs/code\ntype OptionsType = CreateOptionsType<{}>;\n// biome-ignore lint/complexity/noBannedTypes: Replicated from embla docs/code\nexport type CarouselAnnouncementType = CreatePluginType<{}, OptionsType>;\n\nexport type CarouselAnnouncementOptionsType =\n  CarouselAnnouncementType[\"options\"];\n\nexport function CarouselAnnouncement(\n  userOptions: CarouselAnnouncementOptionsType = {},\n): CarouselAnnouncementType {\n  let emblaApi: EmblaCarouselType;\n\n  const { announce } = useAriaAnnouncer();\n\n  const handleSettle = useCallback(\n    (emblaApi: EmblaCarouselType) => {\n      const slideLabel = getSlideLabel(emblaApi);\n      announce(slideLabel);\n    },\n    [announce],\n  );\n\n  function init(emblaApiInstance: EmblaCarouselType): void {\n    emblaApi = emblaApiInstance;\n    emblaApi.on(\"settle\", handleSettle);\n  }\n\n  function destroy(): void {\n    emblaApi.off(\"settle\", handleSettle);\n  }\n\n  const self: CarouselAnnouncementType = {\n    name: \"announcement\",\n    options: userOptions,\n    init,\n    destroy,\n  };\n  return self;\n}\n"],"names":["emblaApi"],"mappings":";;;AA2Ba,MAAA,aAAA,GAAoC,CAAC,QAAqB,KAAA;AA3BvE,EAAA,IAAA,EAAA;AA4BE,EAAM,MAAA,UAAA,GAAA,CAAa,QAAU,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,UAAA,EAAA,CAAa,MAAU,KAAA,CAAA;AACpD,EAAA,MAAM,gBAAmB,GAAA,CAAA,CAAA,EAAA,GAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,YAAV,EAAA,KAAA,IAAA,GAAA,MAAA,GAAA,EAAA,CAA2B,CAAM,CAAA,KAAA,CAAA;AAC1D,EAAM,MAAA,YAAA,GAAe,qCAAU,UAAa,EAAA,CAAA,gBAAA,CAAA;AAE5C,EAAI,IAAA,WAAA,GAAc,6CAAc,YAAa,CAAA,YAAA,CAAA;AAC7C,EAAA,IAAI,CAAC,WAAa,EAAA;AAChB,IAAM,MAAA,YAAA,GAAe,6CAAc,YAAa,CAAA,iBAAA,CAAA;AAChD,IAAA,MAAM,EAAE,aAAA,EAAkB,GAAA,QAAA,CAAS,cAAe,EAAA;AAClD,IAAA,IAAI,YAAc,EAAA;AAChB,MAAM,MAAA,iBAAA,GAAoB,aAAc,CAAA,cAAA,CAAe,YAAY,CAAA;AACnE,MAAA,WAAA,GAAA,CACE,uDAAmB,WAAe,KAAA,0BAAA;AAAA,KAC/B,MAAA;AACL,MAAc,WAAA,GAAA,0BAAA;AAAA;AAChB;AAEF,EAAA,OAAO,SAAS,gBAAmB,GAAA,CAAC,CAAO,IAAA,EAAA,UAAU,KAAK,WAAW,CAAA,CAAA;AACvE;AAUgB,SAAA,oBAAA,CACd,WAA+C,GAAA,EACrB,EAAA;AAC1B,EAAI,IAAA,QAAA;AAEJ,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,gBAAiB,EAAA;AAEtC,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAACA,SAAgC,KAAA;AAC/B,MAAM,MAAA,UAAA,GAAa,cAAcA,SAAQ,CAAA;AACzC,MAAA,QAAA,CAAS,UAAU,CAAA;AAAA,KACrB;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,SAAS,KAAK,gBAA2C,EAAA;AACvD,IAAW,QAAA,GAAA,gBAAA;AACX,IAAS,QAAA,CAAA,EAAA,CAAG,UAAU,YAAY,CAAA;AAAA;AAGpC,EAAA,SAAS,OAAgB,GAAA;AACvB,IAAS,QAAA,CAAA,GAAA,CAAI,UAAU,YAAY,CAAA;AAAA;AAGrC,EAAA,MAAM,IAAiC,GAAA;AAAA,IACrC,IAAM,EAAA,cAAA;AAAA,IACN,OAAS,EAAA,WAAA;AAAA,IACT,IAAA;AAAA,IACA;AAAA,GACF;AACA,EAAO,OAAA,IAAA;AACT;;;;"}

package/dist-es/CarouselProgressLabel.css.js

@@ -1,4 +0,0 @@
-var css_248z = ".saltCarouselTabList.saltText {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n";
-
-export { css_248z as default };
-//# sourceMappingURL=CarouselProgressLabel.css.js.map

package/dist-es/CarouselProgressLabel.css.js.map

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

package/dist-types/CarouselAnnouncementPlugin.d.ts

@@ -1,24 +0,0 @@
-import type { CreateOptionsType, CreatePluginType, EmblaCarouselType } from "embla-carousel";
-declare module "embla-carousel" {
-    interface EmblaPluginsType {
-        announcement: CarouselAnnouncementType;
-    }
-}
-/**
- * Type definition for the parameters of the getSlideLabel function.
- * @returns A string that describes the slide, including its index and total count.
- */
-export type GetSlideLabelProps = (emblaApi: EmblaCarouselType) => string;
-/** * Generates a label for a carousel slide based on ARIA attributes.
- * This function retrieves the slide's ARIA label or text content and formats it into a descriptive string.
- * @param slideElement
- * @param slideIndex
- * @param slideCount
- * @returns A string description of the slide, including its position and ARIA label or text content.
- */
-export declare const getSlideLabel: GetSlideLabelProps;
-type OptionsType = CreateOptionsType<{}>;
-export type CarouselAnnouncementType = CreatePluginType<{}, OptionsType>;
-export type CarouselAnnouncementOptionsType = CarouselAnnouncementType["options"];
-export declare function CarouselAnnouncement(userOptions?: CarouselAnnouncementOptionsType): CarouselAnnouncementType;
-export {};