@allxsmith/bestax-bulma 5.40.0 → 5.42.0

package/dist/esm/components/Carousel.js

@@ -6,6 +6,8 @@ import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
 import { useClassPrefix } from '../helpers/Config.js';
 import { getActiveElementInTree } from '../helpers/shadowDom.js';
 import { useLatestRef } from '../helpers/useLatestRef.js';
+import { useClientLayoutEffect } from '../helpers/useClientLayoutEffect.js';
+import { inertProps } from '../helpers/inertProps.js';
 import { Icon } from '../elements/Icon.js';
 import { Button } from '../elements/Button.js';
 
@@ -36,6 +38,69 @@ const DefaultPrevIcon = () => (jsx("svg", { xmlns: "http://www.w3.org/2000/svg",
  * @returns {JSX.Element} The rendered SVG chevron-right icon.
  */
 const DefaultNextIcon = () => (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("polyline", { points: "9 18 15 12 9 6" }) }));
+/**
+ * The media queries Bulma's `fullhd`, `widescreen`, `desktop` and `tablet`
+ * mixins open with, widest first, at Bulma's default breakpoints. The
+ * stylesheet picks the count in view with those mixins; these tell the
+ * script which count that is. Narrower than the last one is `mobile`.
+ */
+const VIEWPORT_QUERIES = [
+    'screen and (min-width: 1408px)',
+    'screen and (min-width: 1216px)',
+    'screen and (min-width: 1024px)',
+    'screen and (min-width: 769px), print',
+];
+/** `useBulmaViewport`'s answer below the tablet breakpoint. */
+const MOBILE = VIEWPORT_QUERIES.length;
+/**
+ * The `--bulma-carousel-items-to-show*` variable each count prop writes, in
+ * the order the component lists them: the viewports as above, mobile, and
+ * last `itemsToShow` itself.
+ */
+const COUNT_SUFFIXES = [
+    '-fullhd',
+    '-widescreen',
+    '-desktop',
+    '-tablet',
+    '-mobile',
+    '',
+];
+/**
+ * Which of Bulma's viewports the window is in: the index of the widest
+ * `VIEWPORT_QUERIES` entry that matches, `MOBILE` below them all, or `-1`
+ * when that isn't known (on the server, before the first layout effect, and
+ * whenever `enabled` is off, so a carousel with one count everywhere
+ * subscribes to nothing).
+ *
+ * @function
+ * @param {boolean} enabled - Whether any viewport-specific count is set.
+ * @returns {number} The viewport, as described above.
+ */
+function useBulmaViewport(enabled) {
+    const [viewport, setViewport] = useState(-1);
+    useClientLayoutEffect(() => {
+        if (!enabled || typeof window.matchMedia !== 'function')
+            return undefined;
+        const lists = VIEWPORT_QUERIES.map(query => window.matchMedia(query));
+        const update = () => {
+            const index = lists.findIndex(list => list.matches);
+            setViewport(index < 0 ? MOBILE : index);
+        };
+        update();
+        lists.forEach(list => list.addEventListener('change', update));
+        return () => lists.forEach(list => list.removeEventListener('change', update));
+    }, [enabled]);
+    return enabled ? viewport : -1;
+}
+/**
+ * A count prop as the whole number the carousel works with: rounded down,
+ * and never below 1, so a zero or a stray `NaN` can't divide by nothing.
+ *
+ * @function
+ * @param {number | undefined} count - The prop as given.
+ * @returns {number | undefined} The count, or `undefined` when unset.
+ */
+const wholeCount = (count) => count === undefined ? undefined : Math.max(1, Math.floor(count) || 1);
 /**
  * The `Carousel` component provides an image/content slider with navigation arrows and indicators.
  *
@@ -62,15 +127,28 @@ const DefaultNextIcon = () => (jsx("svg", { xmlns: "http://www.w3.org/2000/svg",
  *     <img src="image2.jpg" alt="Slide 2" />
  *   </CarouselItem>
  * </Carousel>
+ *
+ * @example
+ * // Three cards in view on desktop, two on tablet, one on mobile
+ * <Carousel itemsToShow={1} itemsToShowTablet={2} itemsToShowDesktop={3}>
+ *   {cards.map(card => (
+ *     <CarouselItem key={card.id}>{card.body}</CarouselItem>
+ *   ))}
+ * </Carousel>
  */
-const Carousel = forwardRef(({ value: controlledValue, autoplay = false, interval = 5000, pauseOnHover = true, repeat = true, hasDrag = true, arrow = true, arrowHover = false, indicator = true, indicatorInside = false, indicatorPosition = 'bottom', indicatorStyle = 'dots', iconPrev, iconNext, iconLibrary, iconVariant, iconSize, iconFeatures, arrowBackground = true, arrowColor, ariaLabel = 'Image carousel', onChange, className, children, ...props }, ref) => {
+const Carousel = forwardRef(({ value: controlledValue, autoplay = false, interval = 5000, pauseOnHover = true, repeat = true, hasDrag = true, itemsToShow, itemsToShowMobile, itemsToShowTablet, itemsToShowDesktop, itemsToShowWidescreen, itemsToShowFullhd, itemsToScroll, arrow = true, arrowHover = false, indicator = true, indicatorInside = false, indicatorPosition = 'bottom', indicatorStyle = 'dots', iconPrev, iconNext, iconLibrary, iconVariant, iconSize, iconFeatures, arrowBackground = true, arrowColor, ariaLabel = 'Image carousel', onChange, className, style, children, ...props }, ref) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const carouselRef = useRef(null);
     // Cleanup returned by a consumer's callback ref on attach, held until detach.
     const consumerCleanupRef = useRef(null);
     const containerRef = useRef(null);
+    const slidesRef = useRef(null);
+    // The item (a child of the track) that holds focus, until focus leaves
+    // the items for somewhere else
+    const focusedItemRef = useRef(undefined);
     const [internalValue, setInternalValue] = useState(0);
     const [isPaused, setIsPaused] = useState(false);
+    const [isFocusInside, setIsFocusInside] = useState(false);
     const [isDragging, setIsDragging] = useState(false);
     const [dragStart, setDragStart] = useState(0);
     const [dragOffset, setDragOffset] = useState(0);
@@ -80,64 +158,105 @@ const Carousel = forwardRef(({ value: controlledValue, autoplay = false, interva
     // Get valid children
     const items = Children.toArray(children).filter(isValidElement);
     const itemCount = items.length;
-    // Use controlled or internal value
-    const activeIndex = controlledValue !== undefined ? controlledValue : internalValue;
-    // Sync displayIndex when controlled value changes externally. Intentional
-    // external-prop sync that must not run mid-wrap animation; covered by tests
-    // and certified in-browser.
+    // The count in view. The viewport props come widest first, in the order
+    // of VIEWPORT_QUERIES, then mobile; each min-width viewport falls back to
+    // the narrower ones, and every viewport to `itemsToShow`, the cascade the
+    // stylesheet's `--bulma-carousel-items-to-show-*` defaults spell out.
+    const counts = [
+        itemsToShowFullhd,
+        itemsToShowWidescreen,
+        itemsToShowDesktop,
+        itemsToShowTablet,
+        itemsToShowMobile,
+    ].map(wholeCount);
+    const baseCount = wholeCount(itemsToShow);
+    const viewport = useBulmaViewport(counts.some(c => c !== undefined));
+    const inView = (viewport === MOBILE
+        ? counts[MOBILE]
+        : viewport >= 0
+            ? counts.slice(viewport, MOBILE).find(c => c !== undefined)
+            : undefined) ??
+        baseCount ??
+        1;
+    // The props as the stylesheet reads them, so the widths are right from
+    // the first paint, on the server too.
+    const countStyle = {};
+    [...counts, baseCount].forEach((count, i) => {
+        if (count !== undefined) {
+            countStyle[`--bulma-carousel-items-to-show${COUNT_SUFFIXES[i]}`] =
+                count;
+        }
+    });
+    const scroll = Math.min(wholeCount(itemsToScroll) ?? 1, inView);
+    const looping = repeat && itemCount > inView;
+    const lastStart = Math.max(0, itemCount - inView);
+    // Where the view can start: every `scroll` items from the first, and
+    // without a loop the last full view as well, which is what keeps the
+    // end of the track from showing empty space.
+    const positions = [];
+    for (let p = 0; p < (looping ? itemCount : lastStart); p += scroll) {
+        positions.push(p);
+    }
+    if (!looping)
+        positions.push(lastStart);
+    const lastPosition = positions[positions.length - 1];
+    const canMove = positions.length > 1;
+    const wrap = (index) => ((index % itemCount) + itemCount) % itemCount;
+    const fit = (index) => looping ? wrap(index) : Math.min(Math.max(index, 0), lastStart);
+    // Use controlled or internal value, as a start the view can show
+    const activeIndex = fit(controlledValue ?? internalValue);
+    // The indicator for the last position at or before the first item in view
+    const activePosition = positions.reduce((found, position, index) => (position <= activeIndex ? index : found), 0);
+    const nextIndex = positions[activePosition + 1];
+    // From between two positions, the previous step is the one just behind
+    const prevIndex = activeIndex > positions[activePosition]
+        ? positions[activePosition]
+        : positions[activePosition - 1];
+    // Sync displayIndex when the value changes externally, or when the count
+    // in view moves the start it fits to. Intentional external-prop sync that
+    // must not run mid-wrap animation; covered by tests and certified
+    // in-browser. Uncontrolled, the fitted start becomes the value too, so a
+    // later change of count keeps what was first in view in view.
     useEffect(() => {
-        if (controlledValue !== undefined && !isWrapping) {
+        if (!isWrapping) {
             // eslint-disable-next-line react-hooks/set-state-in-effect -- syncing to controlled prop
-            setDisplayIndex(controlledValue);
+            setDisplayIndex(activeIndex);
+            if (controlledValue === undefined)
+                setInternalValue(activeIndex);
         }
-    }, [controlledValue, isWrapping]);
+    }, [activeIndex, isWrapping, controlledValue]);
     // Update active index
-    const setActiveIndex = useCallback((index, syncDisplay = true) => {
-        let newIndex = index;
-        if (repeat) {
-            if (index < 0) {
-                newIndex = itemCount - 1;
-            }
-            else if (index >= itemCount) {
-                newIndex = 0;
-            }
-        }
-        else {
-            newIndex = Math.max(0, Math.min(index, itemCount - 1));
-        }
+    const setActiveIndex = useCallback((index) => {
         if (controlledValue === undefined) {
-            setInternalValue(newIndex);
-        }
-        if (syncDisplay) {
-            setDisplayIndex(newIndex);
+            setInternalValue(index);
         }
-        onChange?.(newIndex);
-    }, [controlledValue, itemCount, repeat, onChange]);
+        setDisplayIndex(index);
+        setIsWrapping(false);
+        onChange?.(index);
+    }, [controlledValue, onChange]);
     // Navigation handlers
     const goToPrev = useCallback(() => {
-        if (activeIndex === 0 && repeat && itemCount > 1) {
-            // Animate to clone of last slide (position -1)
-            setDisplayIndex(-1);
-            setIsWrapping(true);
+        if (prevIndex !== undefined) {
+            setActiveIndex(prevIndex);
         }
-        else {
-            setActiveIndex(activeIndex - 1);
+        else if (looping) {
+            // Animate to the clones before the first item, which show the last
+            // position, and snap to the real one when the transition ends
+            setDisplayIndex(lastPosition - itemCount);
+            setIsWrapping(true);
         }
-    }, [activeIndex, repeat, itemCount, setActiveIndex]);
+    }, [prevIndex, looping, lastPosition, itemCount, setActiveIndex]);
     const goToNext = useCallback(() => {
-        if (activeIndex === itemCount - 1 && repeat && itemCount > 1) {
-            // Animate to clone of first slide (position itemCount)
+        if (nextIndex !== undefined) {
+            setActiveIndex(nextIndex);
+        }
+        else if (looping) {
+            // Animate to the clones after the last item, which show the first
+            // position, and snap to the real one when the transition ends
             setDisplayIndex(itemCount);
             setIsWrapping(true);
         }
-        else {
-            setActiveIndex(activeIndex + 1);
-        }
-    }, [activeIndex, itemCount, repeat, setActiveIndex]);
-    const goToSlide = useCallback((index) => {
-        setIsWrapping(false);
-        setActiveIndex(index);
-    }, [setActiveIndex]);
+    }, [nextIndex, looping, itemCount, setActiveIndex]);
     // Read when the timer fires or an arrow key arrives, so neither the
     // timer nor the key listener starts over while `onChange` changes
     // identity, as an inline one does on every render of the parent.
@@ -145,15 +264,28 @@ const Carousel = forwardRef(({ value: controlledValue, autoplay = false, interva
     const goToNextRef = useLatestRef(goToNext);
     // Auto-play. Each slide gets the whole interval, so a slide change,
     // autoplay's own or the user's, starts the timer over. A render that
-    // leaves the slide where it is doesn't.
+    // leaves the slide where it is doesn't. It waits while focus is inside
+    // an item, so what someone is reading or using doesn't move away. The
+    // timer reads where focus is when it fires, rather than trusting the
+    // last focus event alone: a browser moving focus off an element that
+    // went inert need not fire one, and the pause would never end. A focus
+    // change still starts the timer over, so an item gets the whole
+    // interval once focus leaves it.
+    const isPlaying = autoplay && (looping || nextIndex !== undefined) && !isPaused;
+    const isRotating = isPlaying && !isFocusInside;
     useEffect(() => {
-        if (!autoplay || isPaused || itemCount <= 1)
+        if (!isPlaying)
             return undefined;
         const timer = setInterval(() => {
+            const track = slidesRef.current;
+            if (track?.contains(getActiveElementInTree(track)))
+                return;
+            if (isFocusInside)
+                setIsFocusInside(false);
             goToNextRef.current();
         }, interval);
         return () => clearInterval(timer);
-    }, [autoplay, isPaused, interval, itemCount, activeIndex, goToNextRef]);
+    }, [isPlaying, isFocusInside, interval, activeIndex, goToNextRef]);
     // Pause on hover
     const handleMouseEnter = useCallback(() => {
         if (pauseOnHover) {
@@ -212,12 +344,16 @@ const Carousel = forwardRef(({ value: controlledValue, autoplay = false, interva
     const handleTouchEnd = useCallback(() => {
         handleDragEnd();
     }, [handleDragEnd]);
-    // Keyboard navigation
+    // Keyboard navigation, from the carousel's own controls. Inside an item
+    // the keys are its content's (a field's caret, a slider), and a step
+    // from there could take the focused item out of view.
     useEffect(() => {
         const handleKeyDown = (e) => {
             const node = carouselRef.current;
-            if (!node?.contains(getActiveElementInTree(node)))
+            const active = getActiveElementInTree(node);
+            if (!node?.contains(active) || slidesRef.current?.contains(active)) {
                 return;
+            }
             switch (e.key) {
                 case 'ArrowLeft':
                     e.preventDefault();
@@ -232,22 +368,14 @@ const Carousel = forwardRef(({ value: controlledValue, autoplay = false, interva
         document.addEventListener('keydown', handleKeyDown);
         return () => document.removeEventListener('keydown', handleKeyDown);
     }, [goToPrevRef, goToNextRef]);
-    // Handle wrap-around transition end
-    const handleTransitionEnd = useCallback(() => {
-        if (isWrapping) {
-            // Skip transition for the instant snap
+    // Handle wrap-around transition end: the track's own, since an item's
+    // content can end a transition of its own that bubbles up to here
+    const handleTransitionEnd = useCallback((e) => {
+        if (isWrapping && e.target === e.currentTarget) {
+            // Skip transition for the instant snap from the clones to the
+            // real items they copy
             setSkipTransition(true);
-            setIsWrapping(false);
-            if (displayIndex === itemCount) {
-                // Was at clone of first slide, snap to real first slide
-                setActiveIndex(0, false);
-                setDisplayIndex(0);
-            }
-            else if (displayIndex === -1) {
-                // Was at clone of last slide, snap to real last slide
-                setActiveIndex(itemCount - 1, false);
-                setDisplayIndex(itemCount - 1);
-            }
+            setActiveIndex(((displayIndex % itemCount) + itemCount) % itemCount);
             // Re-enable transition after the snap
             requestAnimationFrame(() => {
                 requestAnimationFrame(() => {
@@ -289,8 +417,8 @@ const Carousel = forwardRef(({ value: controlledValue, autoplay = false, interva
         }
     }, [ref]);
     // Can navigate
-    const canGoPrev = repeat || activeIndex > 0;
-    const canGoNext = repeat || activeIndex < itemCount - 1;
+    const canGoPrev = looping || prevIndex !== undefined;
+    const canGoNext = looping || nextIndex !== undefined;
     // Generate classes
     const carouselClasses = usePrefixedClassNames('carousel', {
         'is-overlay': indicatorInside,
@@ -308,50 +436,101 @@ const Carousel = forwardRef(({ value: controlledValue, autoplay = false, interva
         'is-top': indicatorPosition === 'top',
     });
     const combinedClasses = classNames(carouselClasses, bulmaHelperClasses, className);
-    // Render slides with active state (includes clones for infinite loop)
-    const renderSlides = () => {
-        const slides = items.map((item, index) => {
-            if (isValidElement(item)) {
-                return cloneElement(item, {
-                    key: index,
-                    active: index === activeIndex,
-                });
-            }
-            return item;
+    // Where the track is drawn from: mid-wrap the clones, otherwise a start
+    // the view can show, so a change in the count in view never paints
+    // empty space while the sync above catches up.
+    const shownIndex = isWrapping ? displayIndex : fit(displayIndex);
+    // Enough clones on each side to fill the widest view any viewport sets,
+    // since the stylesheet, not this count, sizes what's on screen
+    const cloneCount = looping
+        ? Math.min(itemCount, Math.max(baseCount ?? 1, ...counts.map(c => c ?? 1)))
+        : 0;
+    // The track: a full view's worth of clones of the last items, the items,
+    // and clones of the first ones, for a seamless loop. Each entry is the
+    // item it shows and its key.
+    const slots = items.map((_, index) => [
+        index,
+        index,
+    ]);
+    for (let k = 0; k < cloneCount; k++) {
+        slots.splice(k, 0, [itemCount - cloneCount + k, `clone-before-${k}`]);
+        slots.push([k, `clone-after-${k}`]);
+    }
+    // Render slides with active state (includes clones for infinite loop).
+    // What's in view is a run of slots, so where a looping view runs past
+    // the last item, the clones on screen are the live copies and the items
+    // they copy, off screen, are the hidden ones: no item is exposed twice,
+    // and the copy exposed is the one in view.
+    const renderSlides = () => slots.map(([index, key], slot) => {
+        const item = items[index];
+        const own = item.props;
+        const isShown = slot >= shownIndex + cloneCount &&
+            slot < shownIndex + cloneCount + inView;
+        return cloneElement(item, {
+            key,
+            active: isShown,
+            role: own.role ?? 'group',
+            'aria-roledescription': own['aria-roledescription'] ?? 'slide',
+            ...(own['aria-label'] || own['aria-labelledby']
+                ? {}
+                : { 'aria-label': `${index + 1} of ${itemCount}` }),
+            // Out of view: hidden from assistive tech, and inert, so nothing
+            // in it takes focus or a click
+            ...(isShown ? {} : { 'aria-hidden': true, ...inertProps(true) }),
         });
-        // Add clones for seamless infinite loop when repeat is enabled
-        if (repeat && itemCount > 1) {
-            const lastItem = items[itemCount - 1];
-            const firstItem = items[0];
-            const lastClone = isValidElement(lastItem)
-                ? cloneElement(lastItem, {
-                    key: 'clone-last',
-                    active: false,
-                })
-                : null;
-            const firstClone = isValidElement(firstItem)
-                ? cloneElement(firstItem, {
-                    key: 'clone-first',
-                    active: false,
-                })
-                : null;
-            return [lastClone, ...slides, firstClone];
+    });
+    // Hand focus on when the item holding it leaves the view. An item out
+    // of view is inert, and a browser drops focus from an inert element to
+    // the page, so a swipe, a change of count with the window's width, a new
+    // controlled value or the item's removal would leave a keyboard or
+    // screen reader user nowhere. Focus goes to the first item in view,
+    // given `tabindex="-1"` for it unless it has a tabindex of its own. A
+    // layout effect runs before the browser gets to drop the focus; the
+    // focused item's removal drops it at once, so focus on the page itself
+    // still counts as the item's.
+    useClientLayoutEffect(() => {
+        const held = focusedItemRef.current;
+        if (!held)
+            return;
+        const track = slidesRef.current;
+        const start = shownIndex + cloneCount;
+        const slot = Array.prototype.indexOf.call(track.children, held);
+        if (slot >= start && slot < start + inView)
+            return;
+        const active = getActiveElementInTree(track);
+        if (active !== held.ownerDocument.body && !held.contains(active)) {
+            return;
         }
-        return slides;
-    };
-    return (jsxs("div", { ref: combinedRef, className: combinedClasses, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: "region", "aria-roledescription": "carousel", "aria-label": ariaLabel, ...rest, children: [jsxs("div", { ref: containerRef, className: carouselContainerClass, onMouseDown: hasDrag ? handleMouseDown : undefined, onMouseMove: hasDrag && isDragging ? handleMouseMove : undefined, onMouseUp: hasDrag ? handleMouseUp : undefined, onMouseLeave: hasDrag ? handleMouseUp : undefined, onTouchStart: hasDrag ? handleTouchStart : undefined, onTouchMove: hasDrag ? handleTouchMove : undefined, onTouchEnd: hasDrag ? handleTouchEnd : undefined, style: {
+        focusedItemRef.current = undefined;
+        const first = track.children[start];
+        if (!first)
+            return;
+        if (!first.hasAttribute('tabindex'))
+            first.tabIndex = -1;
+        first.focus({ preventScroll: true });
+    }, [shownIndex, cloneCount, inView, itemCount]);
+    return (jsxs("div", { ref: combinedRef, className: combinedClasses, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: "region", "aria-roledescription": "carousel", "aria-label": ariaLabel, style: { ...countStyle, ...style }, ...rest, children: [jsxs("div", { ref: containerRef, className: carouselContainerClass, onMouseDown: hasDrag ? handleMouseDown : undefined, onMouseMove: hasDrag && isDragging ? handleMouseMove : undefined, onMouseUp: hasDrag ? handleMouseUp : undefined, onMouseLeave: hasDrag ? handleMouseUp : undefined, onTouchStart: hasDrag ? handleTouchStart : undefined, onTouchMove: hasDrag ? handleTouchMove : undefined, onTouchEnd: hasDrag ? handleTouchEnd : undefined, style: {
                     transform: isDragging ? `translateX(${dragOffset}px)` : undefined,
                     cursor: hasDrag ? (isDragging ? 'grabbing' : 'grab') : undefined,
-                }, children: [jsx("div", { className: carouselSlidesClass, style: {
-                            // When repeat is enabled, account for the prepended clone (+1 offset)
-                            transform: `translateX(-${(repeat && itemCount > 1 ? displayIndex + 1 : displayIndex) * 100}%)`,
+                }, children: [jsx("div", { ref: slidesRef, className: carouselSlidesClass, style: {
+                            // One item is the track's width plus a gap, over the count the
+                            // stylesheet has in view; account for the prepended clones
+                            transform: `translateX(calc(${-(shownIndex + cloneCount)} * (100% + var(--bulma-carousel-item-gap, 0px)) / var(--bulma-carousel-items-in-view, 1)))`,
                             // Disable transition during drag or instant snap after wrap-around
                             transition: isDragging || skipTransition
                                 ? 'none'
                                 : 'transform 0.3s ease-in-out',
-                        }, onTransitionEnd: handleTransitionEnd, children: renderSlides() }), arrow && itemCount > 1 && (jsxs(Fragment, { children: [jsx(Button, { type: "button", className: carouselArrowPrevClass, onClick: goToPrev, isDisabled: !canGoPrev, "aria-label": "Previous slide", children: iconPrev ? (jsx(Icon, { name: iconPrev, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })) : (jsx(DefaultPrevIcon, {})) }), jsx(Button, { type: "button", className: carouselArrowNextClass, onClick: goToNext, isDisabled: !canGoNext, "aria-label": "Next slide", children: iconNext ? (jsx(Icon, { name: iconNext, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })) : (jsx(DefaultNextIcon, {})) })] }))] }), indicator && itemCount > 1 && (jsx("div", { className: carouselIndicatorClass, role: "tablist", children: items.map((_, index) => (jsx(Button, { type: "button", className: prefixedClassNames(classPrefix, 'indicator-item', {
-                        'is-active': index === activeIndex,
-                    }), onClick: () => goToSlide(index), role: "tab", "aria-selected": index === activeIndex, "aria-label": `Go to slide ${index + 1}` }, index))) }))] }));
+                        }, "aria-live": isRotating ? 'off' : 'polite', onFocus: e => {
+                            setIsFocusInside(true);
+                            focusedItemRef.current = Array.from(e.currentTarget.children).find(item => item.contains(e.target));
+                        }, onBlur: e => {
+                            const inside = e.currentTarget.contains(e.relatedTarget);
+                            setIsFocusInside(inside);
+                            if (!inside)
+                                focusedItemRef.current = undefined;
+                        }, onTransitionEnd: handleTransitionEnd, children: renderSlides() }), arrow && canMove && (jsxs(Fragment, { children: [jsx(Button, { type: "button", className: carouselArrowPrevClass, onClick: goToPrev, isDisabled: !canGoPrev, "aria-label": "Previous slide", children: iconPrev ? (jsx(Icon, { name: iconPrev, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })) : (jsx(DefaultPrevIcon, {})) }), jsx(Button, { type: "button", className: carouselArrowNextClass, onClick: goToNext, isDisabled: !canGoNext, "aria-label": "Next slide", children: iconNext ? (jsx(Icon, { name: iconNext, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })) : (jsx(DefaultNextIcon, {})) })] }))] }), indicator && canMove && (jsx("div", { className: carouselIndicatorClass, role: "tablist", children: positions.map((position, index) => (jsx(Button, { type: "button", className: prefixedClassNames(classPrefix, 'indicator-item', {
+                        'is-active': index === activePosition,
+                    }), onClick: () => setActiveIndex(position), role: "tab", "aria-selected": index === activePosition, "aria-label": `Go to slide ${position + 1}` }, position))) }))] }));
 });
 Carousel.displayName = 'Carousel';