@allxsmith/bestax-bulma 5.40.0 → 5.42.0

package/dist/index.cjs

@@ -3593,6 +3593,28 @@ const EmptyState = withSubComponents(EmptyStateRoot, {
     Actions: EmptyStateActions,
 }, 'EmptyState');
 
+// INTERNAL: deliberately not exported from src/index.ts.
+/** The major version of the React this bundle is running against. */
+const runningMajor = () => Number(React.version.split('.')[0]);
+/**
+ * The prop that makes an element inert, spelled for the React in use, or
+ * nothing when `inert` is false.
+ *
+ * Both majors must render `inert=""`, and each warns on the other's spelling
+ * and then drops the attribute. React 19 treats `inert` as a boolean and
+ * rejects the empty string. React 18 does not know the attribute, so it
+ * passes a string through and rejects `true`.
+ */
+const inertProps = (inert, major = runningMajor()) => {
+    if (!inert)
+        return {};
+    // The cast is for React 18's spelling: this package's types are React 19's,
+    // where `inert` is a boolean.
+    return (major >= 19
+        ? { inert: true }
+        : { inert: '' });
+};
+
 // Context to track MenuList nesting level
 const MenuListLevelContext = React.createContext(0);
 /**
@@ -3702,11 +3724,83 @@ const MenuItem = React.forwardRef(function MenuItem(itemProps, ref) {
                     : {}), children: labelChildren }), nestedMenuLists] }));
 });
 MenuItem.displayName = 'MenuItem';
+/**
+ * A section of the menu that opens and closes: its heading is a button drawn like `Menu.Label`, and its `Menu.List` of links shows while it's open.
+ *
+ * It's APG's disclosure navigation, for a sidebar of link groups: the links
+ * stay ordinary links, each its own tab stop, and a closed section's list is
+ * `hidden` and `inert`, so Tab and assistive tech skip it. It goes directly in
+ * `Menu`, holding a `Menu.List`. Closing it while focus is on one of its links
+ * moves focus to its heading.
+ *
+ * @function
+ * @param {MenuSectionProps} props - Props for the MenuSection component.
+ * @returns {JSX.Element} The rendered menu section.
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/ | APG Disclosure Navigation Menu example}
+ *
+ * @example
+ * <Menu>
+ *   <Menu.Section label="Components" defaultOpen>
+ *     <Menu.List>
+ *       <Menu.Item href="/button" active>Button</Menu.Item>
+ *       <Menu.Item href="/card">Card</Menu.Item>
+ *     </Menu.List>
+ *   </Menu.Section>
+ * </Menu>
+ */
+const MenuSection = ({ className, label, children, open: controlledOpen, defaultOpen = false, onOpenChange, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const sectionClass = usePrefixedClassNames('menu-section');
+    const toggleClass = usePrefixedClassNames('menu-section-toggle');
+    const labelClass = usePrefixedClassNames('menu-section-label');
+    const chevronClass = usePrefixedClassNames('menu-section-chevron');
+    const listId = React.useId();
+    const toggleRef = React.useRef(null);
+    const listRef = React.useRef(null);
+    // The caller owns the state when `open` is set, and the section does
+    // otherwise, as with Collapse. The button reports in both modes.
+    const isControlled = controlledOpen !== undefined;
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const isOpen = controlledOpen ?? internalOpen;
+    const handleClick = () => {
+        const next = !isOpen;
+        onOpenChange?.(next);
+        if (!isControlled)
+            setInternalOpen(next);
+    };
+    // An app holding `open` can close a section while focus is on one of its
+    // links, as a sidebar that keeps only the current route's section open
+    // does after a link is followed. The browser then drops focus to <body>
+    // a frame later, and the next Tab starts from the top of the page. The
+    // heading is where the reader was, so focus goes there. A layout effect,
+    // because it runs in the same task as the commit that hid the list, while
+    // the link still has focus. A close from the button itself finds focus on
+    // the button and leaves it.
+    useClientLayoutEffect(() => {
+        if (isOpen)
+            return;
+        const list = listRef.current;
+        if (list.contains(getActiveElementInTree(list))) {
+            toggleRef.current.focus();
+        }
+    }, [isOpen]);
+    // A real button, so Enter and Space work with no key handler, and
+    // `type="button"`, so a menu inside a form isn't submitted by it.
+    //
+    // A closed list is `hidden`, so it isn't drawn and find-in-page doesn't
+    // reach it, and `inert`, so its links stay out of Tab and assistive tech
+    // even if a stylesheet sets `display` on it and shows it anyway. The markup
+    // is the same from the server and on both React majors, which `inertProps`
+    // sees to. It stays mounted, so `aria-controls` always names an element
+    // that exists.
+    return (jsxRuntime.jsxs("div", { className: classNames(sectionClass, bulmaHelperClasses, className), ...rest, children: [jsxRuntime.jsxs("button", { ref: toggleRef, type: "button", className: toggleClass, "aria-expanded": isOpen, "aria-controls": listId, onClick: handleClick, children: [jsxRuntime.jsx("span", { className: labelClass, children: label }), jsxRuntime.jsx("span", { className: chevronClass, "aria-hidden": "true" })] }), jsxRuntime.jsx("div", { ref: listRef, id: listId, hidden: !isOpen, ...inertProps(!isOpen), children: children })] }));
+};
 // Attach static subcomponents
 const Menu = withSubComponents(MenuComponent, {
     Label: MenuLabel,
     List: MenuList,
     Item: MenuItem,
+    Section: MenuSection,
 }, 'Menu');
 
 const validMessageSizes = ['small', 'medium', 'large'];
@@ -4004,7 +4098,7 @@ const isDetailsSummary = (el) => el.parentElement?.localName === 'details' &&
  * can read `-1` for an editable region or an `<embed>` that Tab still visits,
  * and `0` for a `<video>` without controls that it doesn't. So a valid
  * `tabindex` attribute decides, and otherwise the element's kind does.
- * Internal like `firstTabStop`: `src/index.ts` names what it takes from here.
+ * Internal like `focusTabStop`: `src/index.ts` names what it takes from here.
  */
 function isTabbableKind(el) {
     const tabindex = el.getAttribute('tabindex');
@@ -4237,31 +4331,25 @@ function findTabStops(container) {
         return stop;
     };
     const isStop = (el) => usable(el) && (!isGroupedRadio(el) || groupStop(el) === el);
-    const first = candidates.find(isStop);
-    if (!first)
-        return null;
-    let last = first;
-    for (let i = candidates.length - 1; candidates[i] !== first; i--) {
-        if (isStop(candidates[i])) {
-            last = candidates[i];
-            break;
+    // Checked only as they're reached, and the checks are kept, so finding
+    // both ends costs what it did when only the ends were looked for.
+    function* from(fromLast) {
+        for (let i = 0; i < candidates.length; i++) {
+            const el = candidates[fromLast ? candidates.length - 1 - i : i];
+            if (isStop(el))
+                yield el;
         }
     }
+    const first = from(false).next().value;
+    if (!first)
+        return null;
     return {
         first,
-        last,
+        last: from(true).next().value,
         stopFor: node => (isGroupedRadio(node) && groupStop(node)) || node,
+        from,
     };
 }
-/**
- * The first tab stop inside `container`, found the way the trap finds it, or
- * `null` when there is none. For a component that moves focus into a panel
- * itself rather than through the hook. `src/index.ts` names its exports from
- * this module, so this one stays internal.
- */
-function firstTabStop(container) {
-    return findTabStops(container)?.first ?? null;
-}
 /**
  * The element that has focus in the container's own document (an iframe's,
  * when it renders into one), inside open shadow roots too. Focus inside a
@@ -4271,24 +4359,47 @@ function firstTabStop(container) {
  * was inside a shadow root that was removed, so this falls back for it.
  */
 const focusedElement = (doc) => getDeepestActiveElement(doc) ?? doc.body;
+/**
+ * Moves focus to the first tab stop inside `container`, or the last when
+ * `fromLast`, and to the container when there is none. Every move a trap
+ * makes goes through here: into the container as it opens, to the other end
+ * on a wrap, and back in after a Tab the browser carried out.
+ *
+ * A stop that doesn't take focus is passed over for the next one in. An
+ * `<object>` or `<embed>` with nothing to show is one: it counts as a stop by
+ * its kind, but browsers refuse to focus it, and which ones they refuse
+ * depends on the browser and on what has loaded, so only trying tells. A
+ * stop took focus when focus moved, wherever it went (a stop can hand focus
+ * on), or when focus was on it already. `src/index.ts` names its exports from
+ * this module, so this one stays internal.
+ */
+function focusTabStop(container, fromLast = false) {
+    const doc = container.ownerDocument;
+    for (const stop of findTabStops(container)?.from(fromLast) ?? []) {
+        const before = focusedElement(doc);
+        stop.focus();
+        const now = focusedElement(doc);
+        if (now !== before || inside(stop, now))
+            return;
+    }
+    container.focus();
+}
 /**
  * Handles a Tab for a trap on `container`. When the browser has no tab stop
  * left in that direction inside the container, focus goes to the stop at the
  * other end and the key is marked used, and with no stops at all the
  * container takes focus. Focus outside the container goes in at that end
- * too. Otherwise the browser moves focus, and this returns the end to send it
- * to should that Tab take it out anyway.
+ * too. Returns whether it moved focus; otherwise the browser does.
  */
 function wrapTab(e, container) {
     const stops = findTabStops(container);
     if (!stops) {
         e.preventDefault();
         container.focus();
-        return null;
+        return true;
     }
     const focused = focusedElement(container.ownerDocument);
     const current = stops.stopFor(focused);
-    const end = e.shiftKey ? stops.last : stops.first;
     // Wrap whenever the browser has no stop left in that direction inside the
     // container. Comparing positions rather than testing `=== first` also
     // covers focus resting on the container or on an element outside the tab
@@ -4298,10 +4409,10 @@ function wrapTab(e, container) {
             ? !follows(container, stops.first, current)
             : !follows(container, current, stops.last))) {
         e.preventDefault();
-        end.focus();
-        return null;
+        focusTabStop(container, e.shiftKey);
+        return true;
     }
-    return end;
+    return false;
 }
 /**
  * Holds Tab inside the element `container` returns until the returned
@@ -4313,7 +4424,7 @@ function wrapTab(e, container) {
  * overlay whose nodes are remounted while it's open, as moving to another
  * portal target does, stays trapped without attaching again. `holds` is asked
  * on every Tab, and the trap leaves the key alone while it says no. Internal
- * like `firstTabStop`. It's for an overlay that holds Tab from a listener of
+ * like `focusTabStop`. It's for an overlay that holds Tab from a listener of
  * its own on `window` and asks the overlay stack first, so it stands aside
  * while another overlay is open over it, which a trap listening on the
  * container can't do.
@@ -4324,9 +4435,10 @@ function trapTab(container, keyTarget, holds = () => true) {
     // A window and an element type their listeners differently, so the trap
     // listens through the base type both share.
     const keys = keyTarget;
-    // Where focus goes if a Tab the trap let the browser handle takes it out,
-    // held until that Tab has finished moving focus.
-    let wrapTo = null;
+    // The end focus goes back to if a Tab the trap let the browser handle
+    // takes it out (the last for Shift+Tab), held until that Tab has finished
+    // moving focus, and `null` otherwise.
+    let wrapFromLast = null;
     let wrapTimer;
     // `keyTarget` is any target, so the listener takes the base event type.
     const handleKeyDown = (event) => {
@@ -4335,24 +4447,25 @@ function trapTab(container, keyTarget, holds = () => true) {
         // A trap nested inside this one has already wrapped focus.
         if (e.key !== 'Tab' || e.defaultPrevented || !box || !holds())
             return;
-        const end = wrapTab(e, box);
-        if (!end)
+        if (wrapTab(e, box))
             return;
-        wrapTo = end;
+        wrapFromLast = e.shiftKey;
         clearTimeout(wrapTimer);
         wrapTimer = setTimeout(() => {
-            wrapTo = null;
+            wrapFromLast = null;
         });
     };
     // The browser moves focus as soon as the keydown is over, so focus that
-    // lands outside while `wrapTo` is set got there by that Tab.
+    // lands outside while `wrapFromLast` is set got there by that Tab.
     const handleFocusIn = (e) => {
         const box = container();
-        if (!wrapTo || !box || inside(box, e.composedPath()[0]))
+        if (wrapFromLast === null || !box)
             return;
-        const target = wrapTo;
-        wrapTo = null;
-        target.focus();
+        if (inside(box, e.composedPath()[0]))
+            return;
+        const fromLast = wrapFromLast;
+        wrapFromLast = null;
+        focusTabStop(box, fromLast);
     };
     keys.addEventListener('keydown', handleKeyDown);
     doc.addEventListener('focusin', handleFocusIn, true);
@@ -4438,7 +4551,7 @@ function useFocusTrap(containerRef, options = {}) {
         const inTrap = initial && inside(container, initial) ? initial : null;
         inTrap?.focus();
         if (!inTrap || !inside(container, focusedElement(doc))) {
-            (findTabStops(container)?.first ?? container).focus();
+            focusTabStop(container);
         }
         const releaseTab = trapTab(() => container, container);
         return () => {
@@ -4727,8 +4840,8 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
         previouslyFocusedRef.current =
             getDeepestActiveElement();
         const node = modalRootRef.current;
-        const focusable = node ? firstTabStop(node) : null;
-        (focusable ?? node)?.focus();
+        if (node)
+            focusTabStop(node);
         return () => {
             // Only hand focus back if this modal still owns it: closing a background
             // modal must not pull focus out of one that is still open on top. A
@@ -6158,28 +6271,6 @@ const Loading = ({ active = false, isFullPage = false, size, color, canCancel =
     return (jsxRuntime.jsxs("div", { className: combinedClasses, role: "alert", "aria-busy": "true", "aria-label": "Loading", ...rest, ref: loadingRef, children: [jsxRuntime.jsx("div", { className: combinedOverlayClasses, onClick: handleOverlayClick, "aria-hidden": "true" }), jsxRuntime.jsxs("div", { className: loadingContentClass, children: [indicator ? (jsxRuntime.jsx("span", { className: loadingIconCustomClass, children: indicator })) : (jsxRuntime.jsx("span", { className: combinedIconClasses })), children && jsxRuntime.jsx("div", { className: loadingTextClass, children: children }), canCancel && (jsxRuntime.jsx("button", { type: "button", className: loadingCancelClass, onClick: onCancel, "aria-label": "Cancel loading", children: "Cancel" }))] })] }));
 };
 
-// INTERNAL: deliberately not exported from src/index.ts.
-/** The major version of the React this bundle is running against. */
-const runningMajor = () => Number(React.version.split('.')[0]);
-/**
- * The prop that makes an element inert, spelled for the React in use, or
- * nothing when `inert` is false.
- *
- * Both majors must render `inert=""`, and each warns on the other's spelling
- * and then drops the attribute. React 19 treats `inert` as a boolean and
- * rejects the empty string. React 18 does not know the attribute, so it
- * passes a string through and rejects `true`.
- */
-const inertProps = (inert, major = runningMajor()) => {
-    if (!inert)
-        return {};
-    // The cast is for React 18's spelling: this package's types are React 19's,
-    // where `inert` is a boolean.
-    return (major >= 19
-        ? { inert: true }
-        : { inert: '' });
-};
-
 /**
  * `null` outside a group. A `Collapse` also resets it to `null` for its own
  * subtree, so a Collapse nested in an item's content keeps its own state
@@ -7277,7 +7368,7 @@ const PopoverComponent = ({ trigger, children, open: controlledOpen, defaultOpen
         const panel = panelRef.current;
         if (!panelMounted || trapFocus || !panel)
             return undefined;
-        (firstTabStop(panel) ?? panel).focus();
+        focusTabStop(panel);
         return () => {
             const doc = panel.ownerDocument;
             const now = getDeepestActiveElement(doc);
@@ -8614,7 +8705,7 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
         // the sidebar's other controls out of reach. It leaves focus alone
         // then, and the cleanup below finds focus outside and leaves it too.
         if (overlay || !isModalOverlayOpen()) {
-            (firstTabStop(element) ?? element).focus();
+            focusTabStop(element);
         }
         return () => {
             // Only while the sidebar still holds focus: closing one under another
@@ -9365,6 +9456,69 @@ const DefaultPrevIcon = () => (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org
  * @returns {JSX.Element} The rendered SVG chevron-right icon.
  */
 const DefaultNextIcon = () => (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntime.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] = React.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.
  *
@@ -9391,15 +9545,28 @@ const DefaultNextIcon = () => (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org
  *     <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 = React.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 = React.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 = React.useRef(null);
     // Cleanup returned by a consumer's callback ref on attach, held until detach.
     const consumerCleanupRef = React.useRef(null);
     const containerRef = React.useRef(null);
+    const slidesRef = React.useRef(null);
+    // The item (a child of the track) that holds focus, until focus leaves
+    // the items for somewhere else
+    const focusedItemRef = React.useRef(undefined);
     const [internalValue, setInternalValue] = React.useState(0);
     const [isPaused, setIsPaused] = React.useState(false);
+    const [isFocusInside, setIsFocusInside] = React.useState(false);
     const [isDragging, setIsDragging] = React.useState(false);
     const [dragStart, setDragStart] = React.useState(0);
     const [dragOffset, setDragOffset] = React.useState(0);
@@ -9409,64 +9576,105 @@ const Carousel = React.forwardRef(({ value: controlledValue, autoplay = false, i
     // Get valid children
     const items = React.Children.toArray(children).filter(React.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.
     React.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 = React.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 = React.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 = React.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 = React.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 = React.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.
@@ -9474,15 +9682,28 @@ const Carousel = React.forwardRef(({ value: controlledValue, autoplay = false, i
     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;
     React.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 = React.useCallback(() => {
         if (pauseOnHover) {
@@ -9541,12 +9762,16 @@ const Carousel = React.forwardRef(({ value: controlledValue, autoplay = false, i
     const handleTouchEnd = React.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.
     React.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();
@@ -9561,22 +9786,14 @@ const Carousel = React.forwardRef(({ value: controlledValue, autoplay = false, i
         document.addEventListener('keydown', handleKeyDown);
         return () => document.removeEventListener('keydown', handleKeyDown);
     }, [goToPrevRef, goToNextRef]);
-    // Handle wrap-around transition end
-    const handleTransitionEnd = React.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 = React.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(() => {
@@ -9618,8 +9835,8 @@ const Carousel = React.forwardRef(({ value: controlledValue, autoplay = false, i
         }
     }, [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,
@@ -9637,50 +9854,101 @@ const Carousel = React.forwardRef(({ value: controlledValue, autoplay = false, i
         '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 (React.isValidElement(item)) {
-                return React.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 React.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 = React.isValidElement(lastItem)
-                ? React.cloneElement(lastItem, {
-                    key: 'clone-last',
-                    active: false,
-                })
-                : null;
-            const firstClone = React.isValidElement(firstItem)
-                ? React.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 (jsxRuntime.jsxs("div", { ref: combinedRef, className: combinedClasses, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: "region", "aria-roledescription": "carousel", "aria-label": ariaLabel, ...rest, children: [jsxRuntime.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 (jsxRuntime.jsxs("div", { ref: combinedRef, className: combinedClasses, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: "region", "aria-roledescription": "carousel", "aria-label": ariaLabel, style: { ...countStyle, ...style }, ...rest, children: [jsxRuntime.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: [jsxRuntime.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: [jsxRuntime.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 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button, { type: "button", className: carouselArrowPrevClass, onClick: goToPrev, isDisabled: !canGoPrev, "aria-label": "Previous slide", children: iconPrev ? (jsxRuntime.jsx(Icon, { name: iconPrev, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })) : (jsxRuntime.jsx(DefaultPrevIcon, {})) }), jsxRuntime.jsx(Button, { type: "button", className: carouselArrowNextClass, onClick: goToNext, isDisabled: !canGoNext, "aria-label": "Next slide", children: iconNext ? (jsxRuntime.jsx(Icon, { name: iconNext, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })) : (jsxRuntime.jsx(DefaultNextIcon, {})) })] }))] }), indicator && itemCount > 1 && (jsxRuntime.jsx("div", { className: carouselIndicatorClass, role: "tablist", children: items.map((_, index) => (jsxRuntime.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 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button, { type: "button", className: carouselArrowPrevClass, onClick: goToPrev, isDisabled: !canGoPrev, "aria-label": "Previous slide", children: iconPrev ? (jsxRuntime.jsx(Icon, { name: iconPrev, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })) : (jsxRuntime.jsx(DefaultPrevIcon, {})) }), jsxRuntime.jsx(Button, { type: "button", className: carouselArrowNextClass, onClick: goToNext, isDisabled: !canGoNext, "aria-label": "Next slide", children: iconNext ? (jsxRuntime.jsx(Icon, { name: iconNext, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })) : (jsxRuntime.jsx(DefaultNextIcon, {})) })] }))] }), indicator && canMove && (jsxRuntime.jsx("div", { className: carouselIndicatorClass, role: "tablist", children: positions.map((position, index) => (jsxRuntime.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';
 
@@ -11163,23 +11431,15 @@ const Image = ({ as, className, textColor, color, bgColor, size, isRounded, isRe
         backgroundColor: bgColor,
         ...props,
     });
+    // Bulma reads `.has-ratio` only on a child of the ratio container, so the
+    // container carries just its `is-<ratio>` class.
     const bulmaClasses = usePrefixedClassNames('image', {
         [`is-${size}`]: size,
-        'has-ratio': size && typeof size === 'string' && size.includes('by'),
     });
     const imageClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     // Default tag logic: if "as" is provided, use it.
-    // If not, use <figure> for aspect ratios or children, <div> otherwise.
-    let Tag;
-    if (as) {
-        Tag = as;
-    }
-    else if (size && typeof size === 'string' && size.includes('by')) {
-        Tag = 'figure';
-    }
-    else {
-        Tag = 'div';
-    }
+    // If not, use <figure> for aspect ratios, <div> otherwise.
+    const Tag = as ?? (size?.includes('by') ? 'figure' : 'div');
     const roundedClass = usePrefixedClassNames('is-rounded');
     const content = children ? (children) : (jsxRuntime.jsx("img", { className: classNames({ [roundedClass]: isRounded }) || undefined, src: src, alt: alt, ...(isRetina && src ? { srcSet: `${src} 2x` } : {}) }));
     return (jsxRuntime.jsx(Tag, { className: imageClasses, ...rest, children: content }));
@@ -21896,6 +22156,7 @@ exports.Menu = Menu;
 exports.MenuItem = MenuItem;
 exports.MenuLabel = MenuLabel;
 exports.MenuList = MenuList;
+exports.MenuSection = MenuSection;
 exports.Message = Message;
 exports.Modal = Modal;
 exports.Navbar = Navbar;