@allxsmith/bestax-bulma 5.64.0 → 5.65.0

package/dist/index.cjs

@@ -10608,33 +10608,113 @@ function useBulmaBreakpoint(breakpoint) {
     return atOrPast;
 }
 
+// INTERNAL: deliberately not exported from src/index.ts.
+/** How far, in CSS pixels, a drag has to travel along an axis to count. */
+const SWIPE_THRESHOLD = 50;
+const AT_REST = { x: 0, y: 0 };
 /**
- * Individual carousel item/slide.
+ * Follows a mouse or touch drag on a surface and reports a swipe when it
+ * ends far enough from where it started. Carousel's drag, shared: it hands
+ * back the handlers to put on the surface and the live offset to draw the
+ * drag with, and leaves what a swipe does to the component.
  *
  * @function
- * @param {CarouselItemProps} props - Props for the CarouselItem component.
- * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the carousel item element.
- * @returns {JSX.Element} The rendered carousel item.
+ * @param {UseSwipeOptions} options - Whether it's on, the axes, and the callback.
+ * @returns {UseSwipeResult} The drag's state, its handlers, and a way to drop it.
  */
-const CarouselItem = React.forwardRef(({ active, className, children, ...props }, ref) => {
-    const itemClasses = classNames(usePrefixedClassNames('carousel-item', { 'is-active': active }), className);
-    return (jsxRuntime.jsx("div", { ref: ref, className: itemClasses, ...props, children: children }));
-});
-CarouselItem.displayName = 'CarouselItem';
+function useSwipe({ enabled = true, vertical = false, onSwipe, }) {
+    const [isSwiping, setIsSwiping] = React.useState(false);
+    const [start, setStart] = React.useState(AT_REST);
+    const [offset, setOffset] = React.useState(AT_REST);
+    const begin = React.useCallback((x, y) => {
+        if (!enabled)
+            return;
+        setIsSwiping(true);
+        setStart({ x, y: vertical ? y : 0 });
+        setOffset(AT_REST);
+    }, [enabled, vertical]);
+    const follow = React.useCallback((x, y) => {
+        if (!isSwiping)
+            return;
+        setOffset({ x: x - start.x, y: vertical ? y - start.y : 0 });
+    }, [isSwiping, start, vertical]);
+    const end = React.useCallback(() => {
+        if (!isSwiping)
+            return;
+        setIsSwiping(false);
+        if (vertical && Math.abs(offset.y) > Math.abs(offset.x)) {
+            if (offset.y > SWIPE_THRESHOLD)
+                onSwipe('down');
+            else if (offset.y < -SWIPE_THRESHOLD)
+                onSwipe('up');
+        }
+        else if (offset.x < -SWIPE_THRESHOLD) {
+            onSwipe('left');
+        }
+        else if (offset.x > SWIPE_THRESHOLD) {
+            onSwipe('right');
+        }
+        setOffset(AT_REST);
+    }, [isSwiping, vertical, offset, onSwipe]);
+    const cancel = React.useCallback(() => {
+        setIsSwiping(false);
+        setOffset(AT_REST);
+    }, []);
+    return {
+        isSwiping,
+        offsetX: offset.x,
+        offsetY: offset.y,
+        handlers: {
+            onMouseDown: event => {
+                // Disabled, the press is left as it is: a click still focuses and
+                // text can still be selected.
+                if (!enabled)
+                    return;
+                event.preventDefault();
+                begin(event.clientX, event.clientY);
+            },
+            onMouseMove: event => follow(event.clientX, event.clientY),
+            onMouseUp: end,
+            onMouseLeave: end,
+            onTouchStart: event => begin(event.touches[0].clientX, event.touches[0].clientY),
+            onTouchMove: event => follow(event.touches[0].clientX, event.touches[0].clientY),
+            onTouchEnd: end,
+        },
+        cancel,
+    };
+}
+
+// INTERNAL: deliberately not exported from src/index.ts. The chevrons the
+// Carousel's and the Lightbox's previous and next buttons draw, in one place
+// so the two look the same.
 /**
- * Default SVG icon for the previous arrow button.
+ * Chevron pointing left, for a previous button.
  *
  * @function
  * @returns {JSX.Element} The rendered SVG chevron-left icon.
  */
-const DefaultPrevIcon = () => (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: "15 18 9 12 15 6" }) }));
+const ChevronPrevIcon = () => (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: "15 18 9 12 15 6" }) }));
 /**
- * Default SVG icon for the next arrow button.
+ * Chevron pointing right, for a next button.
  *
  * @function
  * @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" }) }));
+const ChevronNextIcon = () => (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" }) }));
+
+/**
+ * Individual carousel item/slide.
+ *
+ * @function
+ * @param {CarouselItemProps} props - Props for the CarouselItem component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the carousel item element.
+ * @returns {JSX.Element} The rendered carousel item.
+ */
+const CarouselItem = React.forwardRef(({ active, className, children, ...props }, ref) => {
+    const itemClasses = classNames(usePrefixedClassNames('carousel-item', { 'is-active': active }), className);
+    return (jsxRuntime.jsx("div", { ref: ref, className: itemClasses, ...props, children: children }));
+});
+CarouselItem.displayName = 'CarouselItem';
 /**
  * The `--bulma-carousel-items-to-show*` variable each count prop writes, in
  * the order the component lists them: `useBulmaViewport`'s viewports, widest
@@ -10705,9 +10785,6 @@ const Carousel = React.forwardRef(({ value: controlledValue, autoplay = false, i
     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);
     const [isWrapping, setIsWrapping] = React.useState(false);
     const [displayIndex, setDisplayIndex] = React.useState(0);
     const [skipTransition, setSkipTransition] = React.useState(false);
@@ -10853,53 +10930,14 @@ const Carousel = React.forwardRef(({ value: controlledValue, autoplay = false, i
             setIsPaused(false);
         }
     }, [pauseOnHover]);
-    // Drag handlers
-    const handleDragStart = React.useCallback((clientX) => {
-        if (!hasDrag)
-            return;
-        setIsDragging(true);
-        setDragStart(clientX);
-        setDragOffset(0);
-    }, [hasDrag]);
-    const handleDragMove = React.useCallback((clientX) => {
-        if (!isDragging)
-            return;
-        setDragOffset(clientX - dragStart);
-    }, [isDragging, dragStart]);
-    const handleDragEnd = React.useCallback(() => {
-        if (!isDragging)
-            return;
-        setIsDragging(false);
-        const threshold = 50;
-        if (dragOffset < -threshold) {
-            goToNext();
-        }
-        else if (dragOffset > threshold) {
-            goToPrev();
-        }
-        setDragOffset(0);
-    }, [isDragging, dragOffset, goToNext, goToPrev]);
-    // Mouse events
-    const handleMouseDown = React.useCallback((e) => {
-        e.preventDefault();
-        handleDragStart(e.clientX);
-    }, [handleDragStart]);
-    const handleMouseMove = React.useCallback((e) => {
-        handleDragMove(e.clientX);
-    }, [handleDragMove]);
-    const handleMouseUp = React.useCallback(() => {
-        handleDragEnd();
-    }, [handleDragEnd]);
-    // Touch events
-    const handleTouchStart = React.useCallback((e) => {
-        handleDragStart(e.touches[0].clientX);
-    }, [handleDragStart]);
-    const handleTouchMove = React.useCallback((e) => {
-        handleDragMove(e.touches[0].clientX);
-    }, [handleDragMove]);
-    const handleTouchEnd = React.useCallback(() => {
-        handleDragEnd();
-    }, [handleDragEnd]);
+    // Drag and swipe, through the shared hook: a drag left goes on and a
+    // drag right goes back, past its 50px threshold.
+    const swipe = useSwipe({
+        enabled: hasDrag,
+        onSwipe: direction => (direction === 'left' ? goToNext() : goToPrev()),
+    });
+    const isDragging = swipe.isSwiping;
+    const dragOffset = swipe.offsetX;
     // 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.
@@ -11065,7 +11103,7 @@ const Carousel = React.forwardRef(({ value: controlledValue, autoplay = false, i
             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: {
+    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 ? swipe.handlers.onMouseDown : undefined, onMouseMove: hasDrag && isDragging ? swipe.handlers.onMouseMove : undefined, onMouseUp: hasDrag ? swipe.handlers.onMouseUp : undefined, onMouseLeave: hasDrag ? swipe.handlers.onMouseLeave : undefined, onTouchStart: hasDrag ? swipe.handlers.onTouchStart : undefined, onTouchMove: hasDrag ? swipe.handlers.onTouchMove : undefined, onTouchEnd: hasDrag ? swipe.handlers.onTouchEnd : undefined, style: {
                     transform: isDragging ? `translateX(${dragOffset}px)` : undefined,
                     cursor: hasDrag ? (isDragging ? 'grabbing' : 'grab') : undefined,
                 }, children: [jsxRuntime.jsx("div", { ref: slidesRef, className: carouselSlidesClass, style: {
@@ -11084,24 +11122,27 @@ const Carousel = React.forwardRef(({ value: controlledValue, autoplay = false, i
                             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', {
+                        }, 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(ChevronPrevIcon, {})) }), 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(ChevronNextIcon, {})) })] }))] }), 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';
 
+// INTERNAL: deliberately not exported from src/index.ts.
 /**
- * Detects the user's `prefers-reduced-motion` preference. Always `false` on
- * the server and on the very first client render, so SSR output and the
- * initial hydration pass always agree.
+ * Detects the user's `prefers-reduced-motion` preference, for motion that
+ * runs in script, where a stylesheet's media query can't reach it. Always
+ * `false` on the server and on the very first client render, so SSR output
+ * and the initial hydration pass always agree.
  *
  * @function
  * @returns {boolean} Whether the user has requested reduced motion.
  */
 function usePrefersReducedMotion() {
     const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(false);
+    // An effect, so it only ever runs in the browser.
     React.useEffect(() => {
-        if (typeof window === 'undefined' || !window.matchMedia)
+        if (!window.matchMedia)
             return undefined;
         const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
         // eslint-disable-next-line react-hooks/set-state-in-effect -- reads the live media query on mount
@@ -11114,6 +11155,818 @@ function usePrefersReducedMotion() {
     }, []);
     return prefersReducedMotion;
 }
+
+/**
+ * FigureCaption component for rendering a styled figcaption element.
+ *
+ * A FigureCaption wraps the HTML `<figcaption>` element with Bulma helper class integration.
+ * Use it inside Figure components to provide captions for images or other media.
+ *
+ * @function
+ * @param {FigureCaptionProps} props - Props for the FigureCaption component.
+ * @returns {JSX.Element} The rendered figcaption element.
+ */
+const FigureCaption = ({ className, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames();
+    const captionClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("figcaption", { className: captionClasses || undefined, ...rest, children: children }));
+};
+/**
+ * The `Figure` component renders a styled `<figure>` element with Bulma helper class integration.
+ *
+ * @function
+ * @param {FigureProps} props - Props for the Figure component.
+ * @returns {JSX.Element} The rendered figure element.
+ */
+const FigureComponent = ({ className, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames();
+    const figureClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("figure", { className: figureClasses || undefined, ...rest, children: children }));
+};
+/**
+ * Figure component with Caption subcomponent.
+ *
+ * @example
+ * <Figure>
+ *   <img src="image.jpg" alt="Description" />
+ *   <Figure.Caption>Image caption text</Figure.Caption>
+ * </Figure>
+ */
+const Figure = withSubComponents(FigureComponent, {
+    Caption: FigureCaption,
+}, 'Figure');
+
+/**
+ * The `Loader` component renders Bulma's `.loader`, a small spinning ring for inline loading states.
+ *
+ * The ring is `1em` square, so `textSize` scales it. It is exposed as an
+ * indeterminate `progressbar` named by `ariaLabel`, and it stops spinning
+ * under `prefers-reduced-motion: reduce` while staying drawn. In forced
+ * colors its two open sides take the page's color, so it stays open.
+ *
+ * @function
+ * @param {LoaderProps} props - Props for the Loader component.
+ * @param {React.Ref<HTMLSpanElement>} ref - Forwarded ref to the loader element.
+ * @returns {JSX.Element} The rendered loader element.
+ *
+ * @example
+ * <Loader />
+ *
+ * @example
+ * <Loader textSize="3" ariaLabel="Saving" />
+ */
+const Loader = React.forwardRef(({ className, ariaLabel = 'Loading', ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const loaderClass = usePrefixedClassNames('loader');
+    // role="progressbar", not role="status": a status region mounted together
+    // with its text is not reliably announced, so the loader claims only what
+    // it can deliver, a named indicator found by reading the page. No
+    // aria-valuenow, because the progress is indeterminate.
+    return (jsxRuntime.jsx("span", { ref: ref, className: classNames(loaderClass, bulmaHelperClasses, className), role: "progressbar", "aria-label": ariaLabel, ...rest }));
+});
+Loader.displayName = 'Loader';
+
+const LightboxContext = React.createContext(null);
+/** Each zoom button or key multiplies or divides the zoom by this. */
+const ZOOM_STEP = 1.5;
+/** Where a double click or a double tap zooms to. */
+const DOUBLE_ZOOM = 2;
+/** How far an arrow key pans a zoomed image, in CSS pixels. */
+const PAN_STEP = 50;
+/** How long an image can take before the Loader shows, in milliseconds. */
+const LOADER_DELAY = 300;
+/** How long the status line waits after a change, so a quick run of moves is read once. */
+const STATUS_DELAY = 500;
+/** How far a finger can move and still tap, in CSS pixels. */
+const TAP_SLOP = 10;
+/** The longest gap between the two taps of a double tap, in milliseconds. */
+const DOUBLE_TAP_TIME = 300;
+/** How far apart the two taps of a double tap can land, in CSS pixels. */
+const DOUBLE_TAP_SLOP = 30;
+/** A pinch that ends this close to the fitted size snaps back to it. */
+const SNAP_ZOOM = 1.01;
+const FITTED = { zoom: 1, x: 0, y: 0, animate: true };
+/**
+ * Reads the image's resting box and the viewer's size.
+ *
+ * @function
+ * @param {HTMLElement} image - The image shown.
+ * @param {HTMLElement} root - The viewer, its `.modal` element.
+ * @returns {Geometry} The geometry the zoom and pan are kept within.
+ */
+function measure(image, root) {
+    let x = 0;
+    let y = 0;
+    for (let node = image; node && node !== root; node = node.offsetParent) {
+        x += node.offsetLeft;
+        y += node.offsetTop;
+    }
+    const box = root.getBoundingClientRect();
+    return {
+        cx: x + image.offsetWidth / 2,
+        cy: y + image.offsetHeight / 2,
+        width: image.offsetWidth,
+        height: image.offsetHeight,
+        viewWidth: root.clientWidth,
+        viewHeight: root.clientHeight,
+        left: box.left,
+        top: box.top,
+    };
+}
+const clamp$5 = (value, min, max) => Math.min(Math.max(value, min), max);
+/**
+ * An offset along one axis, kept to the image's edges: a zoomed image wider
+ * than the viewer can't leave a gap at either side, and one that still fits
+ * stays where it rests, moved only as far as it takes to keep it in view.
+ */
+function fitAxis(offset, centre, size, room, zoom) {
+    const half = (size * zoom) / 2;
+    // The offsets that put the image's start edge on the viewer's, and its end edge.
+    const start = half - centre;
+    const end = room - centre - half;
+    return half * 2 > room ? clamp$5(offset, end, start) : clamp$5(0, start, end);
+}
+/** The view, with its offsets kept to the image's edges. */
+function fitView(view, geometry) {
+    return {
+        ...view,
+        x: fitAxis(view.x, geometry.cx, geometry.width, geometry.viewWidth, view.zoom),
+        y: fitAxis(view.y, geometry.cy, geometry.height, geometry.viewHeight, view.zoom),
+    };
+}
+/**
+ * The view at another zoom, with the point under `(px, py)`, in the
+ * viewer's coordinates, still there.
+ */
+function zoomView(view, zoom, px, py, geometry, animate) {
+    if (zoom <= 1)
+        return { ...FITTED, animate };
+    const ratio = zoom / view.zoom;
+    const dx = px - geometry.cx;
+    const dy = py - geometry.cy;
+    return fitView({
+        zoom,
+        x: dx - (dx - view.x) * ratio,
+        y: dy - (dy - view.y) * ratio,
+        animate,
+    }, geometry);
+}
+/**
+ * Whether a button has an accessible name from what it holds: its own
+ * label, text, an image's alt or a label on an element inside, leaving out
+ * what's hidden from assistive technology and what's inside a `<figure>`,
+ * whose content doesn't name the button around it. A development check, so
+ * it reads the common sources rather than the whole name computation.
+ */
+function hasName(element) {
+    if ((element.getAttribute('aria-label') || '').trim() ||
+        (element.getAttribute('aria-labelledby') || '').trim() ||
+        (element.getAttribute('title') || '').trim()) {
+        return true;
+    }
+    return Array.from(element.childNodes).some(node => node instanceof Element
+        ? node.getAttribute('aria-hidden') !== 'true' &&
+            node.tagName !== 'FIGURE' &&
+            ((node instanceof HTMLImageElement && !!node.alt.trim()) ||
+                hasName(node))
+        : !!node.textContent.trim());
+}
+/** Text a key typed into a field is that field's, not the viewer's. */
+const isTextEntry = (target) => target.matches('input, textarea, select, [contenteditable]:not([contenteditable="false"])');
+const ZoomInIcon = () => (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "7" }), jsxRuntime.jsx("path", { d: "M21 21l-5-5M11 8v6M8 11h6" })] }));
+const ZoomOutIcon = () => (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "7" }), jsxRuntime.jsx("path", { d: "M21 21l-5-5M8 11h6" })] }));
+const ResetZoomIcon = () => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntime.jsx("path", { d: "M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5" }) }));
+/**
+ * A button around a thumbnail, or a line of text, that opens the viewer at its `index`.
+ *
+ * @function
+ * @param {LightboxTriggerProps} props - Props for the trigger.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered button.
+ */
+const LightboxTrigger = React.forwardRef(function LightboxTrigger(triggerProps, ref) {
+    const { as: Component = 'button', index, className, children, onClick, 
+    // Kept from the helper classes, which read `color` as a text color: it
+    // belongs to a component `as`, as Button's `color="link"` does.
+    color, ...props } = triggerProps;
+    const lightbox = React.useContext(LightboxContext);
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const triggerClass = usePrefixedClassNames('lightbox-trigger');
+    const buttonRef = React.useRef(null);
+    const setRefs = React.useCallback((node) => {
+        buttonRef.current = node;
+        if (typeof ref === 'function')
+            return ref(node);
+        if (ref) {
+            ref.current = node;
+        }
+        return undefined;
+    }, [ref]);
+    if (!lightbox) {
+        warnOnce('Lightbox.Trigger:outside', '[bestax-bulma] <Lightbox.Trigger> is outside a <Lightbox>, so it ' +
+            'opens nothing. Put it inside the Lightbox whose items it opens.');
+    }
+    // Its content is its name, and a thumbnail with `alt=""` leaves it
+    // nameless. Checked after each commit, since the content can change.
+    React.useEffect(() => {
+        // An `as` component that keeps its ref, or hands back a handle of its
+        // own, leaves no element to check.
+        const button = buttonRef.current;
+        if (isDev() && button instanceof Element && !hasName(button)) {
+            warnOnce('Lightbox.Trigger:no-name', '[bestax-bulma] <Lightbox.Trigger> has no accessible name. Give ' +
+                'the image inside it an alt, or the button some text or an ' +
+                'aria-label. An image inside a <figure>, which a ratio Image ' +
+                'renders, doesn\'t name a button, so give that Image as="div".');
+        }
+    });
+    return (jsxRuntime.jsx(Component, { ref: setRefs, className: classNames(triggerClass, bulmaHelperClasses, className), "aria-haspopup": "dialog", ...rest, ...(typeof Component === 'string' ? {} : { color }), ...(Component === 'button' || typeof Component !== 'string'
+            ? { type: buttonType(rest.type) }
+            : {}), onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented || !lightbox)
+                return;
+            // Safari doesn't focus a button that's clicked, and the viewer hands
+            // focus back to whatever had it when it opened.
+            event.currentTarget.focus({ preventScroll: true });
+            lightbox.openAt(index);
+        }, children: children }));
+});
+LightboxTrigger.displayName = 'Lightbox.Trigger';
+/**
+ * The open viewer: a modal dialog showing one image, mounted only while the
+ * Lightbox is open, so each opening starts fitted.
+ *
+ * @function
+ * @param {LightboxViewerProps} props - The Lightbox's props and its state.
+ * @returns {JSX.Element} The rendered dialog.
+ */
+const LightboxViewer = React.forwardRef(function LightboxViewer({ items, index, onIndexChange, onClose, repeat, zoomable = true, maxZoom = 3, closeOnEscape = true, closeOnClickOutside = true, portal = true, ariaLabel = 'Image viewer', labels, className, onKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }, ref) {
+    const count = items.length;
+    const item = items[index];
+    const limit = Math.max(1, Number.isFinite(maxZoom) ? maxZoom : 3);
+    const formatNumber = useNumberFormat();
+    const number = (value) => formatNumber ? formatNumber(value) : String(value);
+    const words = {
+        close: labels?.close || 'Close',
+        previous: labels?.previous || 'Previous image',
+        next: labels?.next || 'Next image',
+        zoomIn: labels?.zoomIn || 'Zoom in',
+        zoomOut: labels?.zoomOut || 'Zoom out',
+        resetZoom: labels?.resetZoom || 'Reset zoom',
+        loading: labels?.loading || 'Loading image',
+        loadError: labels?.loadError || "This image didn't load.",
+        retry: labels?.retry || 'Retry',
+        progress: labels?.progress ??
+            ((current, total) => `Image ${number(current)} of ${number(total)}`),
+    };
+    const reducedMotion = usePrefersReducedMotion();
+    const hydrated = useIsHydrated();
+    const rootRef = React.useRef(null);
+    const setRoot = React.useCallback((node) => {
+        rootRef.current = node;
+        if (typeof ref === 'function')
+            return ref(node);
+        if (ref) {
+            ref.current = node;
+        }
+        return undefined;
+    }, [ref]);
+    const [image, setImage] = React.useState(null);
+    // The image shown and how it's doing. `leaving` is the image before it,
+    // kept on screen while the new one loads and then faded out over it. The
+    // fades are CSS animations, which start when the stylesheet's selector
+    // first matches, even for an image that was already loaded, where a
+    // transition wouldn't run.
+    const [shown, setShown] = React.useState({ index, item });
+    const [status, setStatus] = React.useState('loading');
+    const [attempt, setAttempt] = React.useState(0);
+    const [leaving, setLeaving] = React.useState();
+    const [view, setView] = React.useState(FITTED);
+    const zoomed = view.zoom > 1;
+    // The view as last set, for a gesture to go on from: pointer events can
+    // arrive faster than React renders.
+    const viewRef = React.useRef(view);
+    useClientLayoutEffect(() => {
+        viewRef.current = view;
+    });
+    const updateView = (next) => {
+        viewRef.current = next(viewRef.current);
+        setView(viewRef.current);
+    };
+    // A move starts the new image fitted and loading, and so does another
+    // image at the same index after `items` changes. Adjusted while rendering,
+    // React's pattern for state that follows a prop, so the old zoom or load
+    // state never paints on the new image.
+    if (shown.index !== index ||
+        shown.item.src !== item.src ||
+        shown.item.srcSet !== item.srcSet) {
+        setShown({ index, item });
+        setLeaving(reducedMotion ? undefined : status === 'loaded' ? shown.item : leaving);
+        setStatus('loading');
+        setAttempt(0);
+        setView(FITTED);
+    }
+    const fail = () => {
+        setStatus('error');
+        setLeaving(undefined);
+    };
+    // An image the server rendered loads or fails before hydration, so its
+    // event comes before React listens for it. A broken image is complete
+    // and has no size, and so is a loaded SVG with none of its own, so
+    // `decode()` tells those two apart.
+    useClientLayoutEffect(() => {
+        if (!image?.complete)
+            return undefined;
+        if (image.naturalWidth > 0) {
+            setStatus('loaded');
+            return undefined;
+        }
+        let live = true;
+        image.decode().then(() => live && setStatus('loaded'), () => {
+            if (!live)
+                return;
+            setStatus('error');
+            setLeaving(undefined);
+        });
+        return () => {
+            live = false;
+        };
+    }, [image]);
+    // The Loader shows only for an image that takes a while.
+    React.useEffect(() => {
+        if (status !== 'loading')
+            return undefined;
+        // Cleared by any change of status, so it only fires on a load still
+        // under way.
+        const timer = setTimeout(() => {
+            setStatus('slow');
+            setLeaving(undefined);
+        }, LOADER_DELAY);
+        return () => clearTimeout(timer);
+    }, [status, shown, attempt]);
+    // The images either side, fetched ahead so a move shows them at once.
+    // With `repeat` and two images, both sides are the one other image, so
+    // the indexes are deduplicated and it's fetched once.
+    const neighbours = Array.from(new Set([index - 1, index + 1].map(i => (repeat ? (i + count) % count : i))))
+        .filter(i => i >= 0 && i < count && i !== index)
+        .map(i => items[i]);
+    // None, one or two of them, in no particular order.
+    const [firstNeighbour, secondNeighbour] = neighbours;
+    const firstSrc = firstNeighbour?.src;
+    const firstSrcSet = firstNeighbour?.srcSet;
+    const firstSizes = firstNeighbour?.sizes;
+    const secondSrc = secondNeighbour?.src;
+    const secondSrcSet = secondNeighbour?.srcSet;
+    const secondSizes = secondNeighbour?.sizes;
+    React.useEffect(() => {
+        const fetchAhead = (src, srcSet, sizes) => {
+            if (!src)
+                return;
+            const img = document.createElement('img');
+            if (sizes)
+                img.sizes = sizes;
+            if (srcSet)
+                img.srcset = srcSet;
+            img.src = src;
+        };
+        fetchAhead(firstSrc, firstSrcSet, firstSizes);
+        fetchAhead(secondSrc, secondSrcSet, secondSizes);
+    }, [
+        firstSrc,
+        firstSrcSet,
+        firstSizes,
+        secondSrc,
+        secondSrcSet,
+        secondSizes,
+    ]);
+    // The status line, written a moment after it changes, so a quick run of
+    // moves is read once. It's written on opening too, which says which image
+    // the viewer opened at.
+    const progress = words.progress(index + 1, count);
+    const position = item.alt ? `${progress}: ${item.alt}` : progress;
+    // A failed image's line says which image failed too, so a move from one
+    // failed image to another still changes it.
+    const message = status === 'error' ? `${words.loadError} ${position}` : position;
+    const [said, setSaid] = React.useState('');
+    React.useEffect(() => {
+        const timer = setTimeout(() => setSaid(message), STATUS_DELAY);
+        return () => clearTimeout(timer);
+    }, [message]);
+    // ---- Moving -------------------------------------------------------------
+    const canPrev = repeat ? count > 1 : index > 0;
+    const canNext = repeat ? count > 1 : index < count - 1;
+    const go = (next) => {
+        if (next !== index)
+            onIndexChange(next);
+    };
+    const step = (delta) => {
+        if (delta < 0 ? !canPrev : !canNext)
+            return;
+        go((index + delta + count) % count);
+    };
+    const isRtl = (element) => getComputedStyle(element).direction === 'rtl';
+    const swipe = useSwipe({
+        enabled: !zoomed,
+        vertical: true,
+        onSwipe: direction => {
+            if (direction === 'down') {
+                onClose();
+            }
+            else if (direction !== 'up') {
+                // A swipe left brings the next image in from the right, and right
+                // to left the other way round.
+                const forward = isRtl(rootRef.current)
+                    ? 'right'
+                    : 'left';
+                step(direction === forward ? 1 : -1);
+            }
+        },
+    });
+    // ---- Zooming and panning --------------------------------------------------
+    // Zoom waits for the image: a loading one has no size to zoom, and a
+    // failed one isn't there.
+    const canZoom = zoomable && status === 'loaded';
+    // Only called with an image on screen: every way to zoom or pan checks
+    // `canZoom` first, and a pan needs a zoom.
+    const geometry = () => measure(image, rootRef.current);
+    /** Zooms to `zoom`, kept within the limits, about the viewer's centre. */
+    const zoomTo = (next) => {
+        if (!canZoom)
+            return;
+        const g = geometry();
+        updateView(v => zoomView(v, clamp$5(next(v.zoom), 1, limit), g.viewWidth / 2, g.viewHeight / 2, g, true));
+    };
+    const zoomIn = () => zoomTo(zoom => zoom * ZOOM_STEP);
+    const zoomOut = () => zoomTo(zoom => zoom / ZOOM_STEP);
+    const resetZoom = () => updateView(() => FITTED);
+    /** A double click or tap: fitted to 2x at the pointer, and back. */
+    const toggleZoomAt = (clientX, clientY) => {
+        const g = geometry();
+        updateView(v => v.zoom > 1
+            ? FITTED
+            : zoomView(v, Math.min(DOUBLE_ZOOM, limit), clientX - g.left, clientY - g.top, g, true));
+    };
+    const pan = (dx, dy) => {
+        const g = geometry();
+        updateView(v => fitView({ ...v, x: v.x + dx, y: v.y + dy, animate: true }, g));
+    };
+    // The wheel zooms at the pointer. A listener of its own, since React's
+    // wheel handlers are passive and can't stop the page from zooming too.
+    const handleWheel = useLatestRef((event) => {
+        const g = geometry();
+        const lines = event.deltaMode === 1 ? 16 : 1;
+        const delta = clamp$5(event.deltaY * lines, -100, 100);
+        updateView(v => zoomView(v, clamp$5(v.zoom * Math.exp(-delta / 300), 1, limit), event.clientX - g.left, event.clientY - g.top, g, false));
+    });
+    React.useEffect(() => {
+        if (!canZoom)
+            return undefined;
+        const target = image;
+        const onWheel = (event) => {
+            event.preventDefault();
+            handleWheel.current(event);
+        };
+        target.addEventListener('wheel', onWheel, { passive: false });
+        return () => target.removeEventListener('wheel', onWheel);
+    }, [image, canZoom, handleWheel]);
+    // Pointers on the image: one pans a zoomed image, two pinch. The first
+    // has to land on the image; the second can land anywhere in the viewer.
+    const pointersRef = React.useRef(new Map());
+    const gestureRef = React.useRef(null);
+    const tapRef = React.useRef(null);
+    const lastTapRef = React.useRef(null);
+    const lastPointerTypeRef = React.useRef('');
+    const startPan = (x, y) => {
+        gestureRef.current = {
+            kind: 'pan',
+            x,
+            y,
+            from: viewRef.current,
+            geometry: geometry(),
+        };
+    };
+    const handlePointerDown = (event) => {
+        onPointerDown?.(event);
+        lastPointerTypeRef.current = event.pointerType;
+        // A second finger is a pinch, never a swipe, whether or not anything
+        // zooms, and wherever in the viewer it lands.
+        if (!event.isPrimary)
+            swipe.cancel();
+        if (!canZoom || event.defaultPrevented)
+            return;
+        const onImage = event.target === image;
+        if (!onImage && pointersRef.current.size === 0)
+            return;
+        pointersRef.current.set(event.pointerId, {
+            x: event.clientX,
+            y: event.clientY,
+        });
+        // Two or more is a pinch, between the first two.
+        if (pointersRef.current.size > 1) {
+            const g = geometry();
+            const [a, b] = Array.from(pointersRef.current.values());
+            tapRef.current = null;
+            swipe.cancel();
+            gestureRef.current = {
+                kind: 'pinch',
+                distance: Math.hypot(a.x - b.x, a.y - b.y) || 1,
+                x: (a.x + b.x) / 2 - g.left,
+                y: (a.y + b.y) / 2 - g.top,
+                from: viewRef.current,
+                geometry: g,
+            };
+        }
+        else {
+            tapRef.current = { x: event.clientX, y: event.clientY };
+            if (zoomed) {
+                // So the pan follows a mouse that leaves the image.
+                event.target.setPointerCapture(event.pointerId);
+                startPan(event.clientX, event.clientY);
+            }
+        }
+    };
+    const handlePointerMove = (event) => {
+        onPointerMove?.(event);
+        const point = pointersRef.current.get(event.pointerId);
+        if (!point)
+            return;
+        point.x = event.clientX;
+        point.y = event.clientY;
+        if (tapRef.current &&
+            Math.hypot(event.clientX - tapRef.current.x, event.clientY - tapRef.current.y) > TAP_SLOP) {
+            tapRef.current = null;
+        }
+        const current = gestureRef.current;
+        if (current?.kind === 'pinch') {
+            const [a, b] = Array.from(pointersRef.current.values());
+            const g = current.geometry;
+            const zoom = clamp$5((current.from.zoom * Math.hypot(a.x - b.x, a.y - b.y)) /
+                current.distance, 1, limit);
+            // The point of the image under the pinch's start stays between the
+            // fingers, so they can pan as they pinch.
+            const midX = (a.x + b.x) / 2 - g.left;
+            const midY = (a.y + b.y) / 2 - g.top;
+            const imageX = (current.x - g.cx - current.from.x) / current.from.zoom;
+            const imageY = (current.y - g.cy - current.from.y) / current.from.zoom;
+            updateView(() => fitView({
+                zoom,
+                x: midX - g.cx - imageX * zoom,
+                y: midY - g.cy - imageY * zoom,
+                animate: false,
+            }, g));
+        }
+        else if (current) {
+            updateView(() => fitView({
+                ...current.from,
+                x: current.from.x + event.clientX - current.x,
+                y: current.from.y + event.clientY - current.y,
+                animate: false,
+            }, current.geometry));
+        }
+    };
+    const handlePointerEnd = (event) => {
+        if (!pointersRef.current.delete(event.pointerId))
+            return;
+        const wasPinch = gestureRef.current?.kind === 'pinch';
+        gestureRef.current = null;
+        if (wasPinch) {
+            if (viewRef.current.zoom < SNAP_ZOOM) {
+                updateView(() => FITTED);
+            }
+            else {
+                // A finger left down after a pinch carries on as a pan.
+                const [point] = Array.from(pointersRef.current.values());
+                startPan(point.x, point.y);
+            }
+        }
+        // Two quick taps in the same place zoom, the touch screen's double click.
+        if (event.type === 'pointerup' &&
+            event.pointerType === 'touch' &&
+            tapRef.current) {
+            const previous = lastTapRef.current;
+            if (previous &&
+                event.timeStamp - previous.time < DOUBLE_TAP_TIME &&
+                Math.hypot(event.clientX - previous.x, event.clientY - previous.y) <
+                    DOUBLE_TAP_SLOP) {
+                lastTapRef.current = null;
+                toggleZoomAt(event.clientX, event.clientY);
+            }
+            else {
+                lastTapRef.current = {
+                    x: event.clientX,
+                    y: event.clientY,
+                    time: event.timeStamp,
+                };
+            }
+        }
+        tapRef.current = null;
+    };
+    // ---- Keys -----------------------------------------------------------------
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented ||
+            event.altKey ||
+            event.ctrlKey ||
+            event.metaKey ||
+            // A key from content React portals elsewhere, such as a popover's,
+            // is that content's.
+            !event.currentTarget.contains(event.target) ||
+            isTextEntry(event.target)) {
+            return;
+        }
+        const forward = isRtl(event.currentTarget) ? -1 : 1;
+        switch (event.key) {
+            case 'ArrowLeft':
+                if (zoomed)
+                    pan(PAN_STEP, 0);
+                else
+                    step(forward === 1 ? -1 : 1);
+                break;
+            case 'ArrowRight':
+                if (zoomed)
+                    pan(-PAN_STEP, 0);
+                else
+                    step(forward === 1 ? 1 : -1);
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                if (!zoomed)
+                    return;
+                pan(0, event.key === 'ArrowUp' ? PAN_STEP : -PAN_STEP);
+                break;
+            case 'Home':
+                go(0);
+                break;
+            case 'End':
+                go(count - 1);
+                break;
+            case '+':
+            case '=':
+            case '-':
+            case '0':
+                if (!canZoom)
+                    return;
+                if (event.key === '0')
+                    resetZoom();
+                else if (event.key === '-')
+                    zoomOut();
+                else
+                    zoomIn();
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    };
+    // ---- Loading ----------------------------------------------------------------
+    const retry = () => {
+        setAttempt(n => n + 1);
+        setStatus('loading');
+        // Cleared, so a Retry that fails again is announced again.
+        setSaid('');
+        // The Retry button goes with the error, so focus waits on the dialog.
+        rootRef.current.focus();
+    };
+    // ---- Rendering --------------------------------------------------------------
+    const rootClass = usePrefixedClassNames('lightbox', {
+        'is-zoomed': zoomed,
+    });
+    const toolbarClass = usePrefixedClassNames('lightbox-toolbar');
+    const progressClass = usePrefixedClassNames('lightbox-progress');
+    const figureClass = usePrefixedClassNames('lightbox-figure');
+    const imageClass = usePrefixedClassNames('lightbox-image');
+    const loadingClass = usePrefixedClassNames('is-loading');
+    const leavingClass = usePrefixedClassNames('lightbox-image', 'is-leaving');
+    const captionClass = usePrefixedClassNames('lightbox-caption');
+    const startsSwipe = (target) => !target.closest(`button, a, input, select, textarea, .${captionClass}`);
+    const errorClass = usePrefixedClassNames('lightbox-error');
+    const previousClass = usePrefixedClassNames('lightbox-arrow', 'is-prev');
+    const nextClass = usePrefixedClassNames('lightbox-arrow', 'is-next');
+    const imageStyle = zoomed
+        ? {
+            transform: `translate(${view.x}px, ${view.y}px) scale(${view.zoom})`,
+            transition: view.animate ? undefined : 'none',
+        }
+        : view.animate
+            ? undefined
+            : { transition: 'none' };
+    const figureStyle = swipe.isSwiping
+        ? {
+            // A swipe up doesn't go anywhere, so the image doesn't follow it.
+            transform: `translate(${swipe.offsetX}px, ${Math.max(0, swipe.offsetY)}px)`,
+            transition: 'none',
+        }
+        : undefined;
+    return (jsxRuntime.jsxs(Modal, { ref: setRoot, isActive: true, onClose: onClose, closeOnEscape: closeOnEscape, portal: portal, className: classNames(rootClass, className), "aria-label": ariaLabel, ...props, onKeyDown: handleKeyDown, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: event => {
+            onPointerUp?.(event);
+            handlePointerEnd(event);
+        }, onPointerCancel: event => {
+            onPointerCancel?.(event);
+            handlePointerEnd(event);
+        }, children: [jsxRuntime.jsx(Modal.Background, { onClick: closeOnClickOutside ? onClose : undefined }), jsxRuntime.jsx(Modal.Close, { variant: "floating", size: "large", "aria-label": words.close }), jsxRuntime.jsxs("div", { className: toolbarClass, children: [count > 1 && (jsxRuntime.jsx("bdi", { className: progressClass, "aria-hidden": "true", children: `${number(index + 1)} / ${number(count)}` })), zoomable && (jsxRuntime.jsxs(Buttons, { children: [jsxRuntime.jsx(Button, { type: "button", "aria-label": words.zoomOut, "aria-disabled": !zoomed || undefined, onClick: zoomOut, children: jsxRuntime.jsx(ZoomOutIcon, {}) }), jsxRuntime.jsx(Button, { type: "button", "aria-label": words.zoomIn, "aria-disabled": !canZoom || view.zoom >= limit || undefined, onClick: zoomIn, children: jsxRuntime.jsx(ZoomInIcon, {}) }), jsxRuntime.jsx(Button, { type: "button", "aria-label": words.resetZoom, "aria-disabled": !zoomed || undefined, onClick: resetZoom, children: jsxRuntime.jsx(ResetZoomIcon, {}) })] }))] }), jsxRuntime.jsx(Modal.Content, { children: jsxRuntime.jsxs(Figure, { className: figureClass, style: figureStyle, ...swipe.handlers, onMouseDown: event => {
+                        if (startsSwipe(event.target))
+                            swipe.handlers.onMouseDown(event);
+                    }, onTouchStart: event => {
+                        // A second finger is a pinch, not a swipe.
+                        if (event.touches.length > 1)
+                            swipe.cancel();
+                        else if (startsSwipe(event.target)) {
+                            swipe.handlers.onTouchStart(event);
+                        }
+                    }, children: [status !== 'error' && (jsxRuntime.jsx("img", { ref: setImage, className: classNames(imageClass, hydrated && status !== 'loaded' && loadingClass), src: item.src, srcSet: item.srcSet, sizes: item.sizes, alt: item.alt, draggable: false, style: imageStyle, onLoad: () => setStatus('loaded'), onError: fail, onDoubleClick: event => {
+                                // A touch screen's double tap is handled as it lands.
+                                if (canZoom && lastPointerTypeRef.current !== 'touch') {
+                                    toggleZoomAt(event.clientX, event.clientY);
+                                }
+                            } }, `${index}-${item.src}-${item.srcSet}-${attempt}`)), leaving && (jsxRuntime.jsx("img", { className: leavingClass, src: leaving.src, srcSet: leaving.srcSet, sizes: leaving.sizes, alt: "", "aria-hidden": "true", draggable: false, onAnimationEnd: () => setLeaving(undefined) })), status === 'slow' && jsxRuntime.jsx(Loader, { ariaLabel: words.loading }), status === 'error' && (jsxRuntime.jsxs("div", { className: errorClass, children: [jsxRuntime.jsx("p", { children: words.loadError }), item.alt && jsxRuntime.jsx("p", { children: item.alt }), jsxRuntime.jsx(Button, { type: "button", onClick: retry, children: words.retry })] })), item.caption ? (jsxRuntime.jsx(Figure.Caption, { className: captionClass, children: item.caption })) : null] }) }), count > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button, { type: "button", className: previousClass, "aria-label": words.previous, "aria-disabled": !canPrev || undefined, onClick: () => step(-1), children: jsxRuntime.jsx(ChevronPrevIcon, {}) }), jsxRuntime.jsx(Button, { type: "button", className: nextClass, "aria-label": words.next, "aria-disabled": !canNext || undefined, onClick: () => step(1), children: jsxRuntime.jsx(ChevronNextIcon, {}) })] })), jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", style: visuallyHidden, children: said })] }));
+});
+/**
+ * The `Lightbox` component shows a set of images one at a time in a modal viewer, with previous and next, a counter, captions and zoom, opened from the `Lightbox.Trigger` buttons you place.
+ *
+ * It renders its children where it stands, with no wrapper, and the
+ * viewer only while it's open, into a portal by default. The viewer is a
+ * `Modal`: focus moves to its close button, Tab stays inside, Escape and a
+ * click on the background close it, and focus goes back to the trigger.
+ *
+ * @function
+ * @param {LightboxProps} props - Props for the Lightbox component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the viewer's `.modal` element, `null` while it's closed.
+ * @returns {JSX.Element} The children, and the viewer while it's open.
+ *
+ * @example
+ * <Lightbox items={photos}>
+ *   {photos.map((photo, i) => (
+ *     <Lightbox.Trigger key={photo.src} index={i}>
+ *       <Image as="div" src={photo.src} alt={photo.alt} size="4by3" />
+ *     </Lightbox.Trigger>
+ *   ))}
+ * </Lightbox>
+ */
+const LightboxRoot = React.forwardRef(({ items, children, open: controlledOpen, defaultOpen = false, onOpenChange, value: controlledValue, defaultValue = 0, onChange, repeat = true, ...props }, ref) => {
+    const [ownOpen, setOwnOpen] = React.useState(defaultOpen);
+    const open = controlledOpen ?? ownOpen;
+    const [ownValue, setOwnValue] = React.useState(defaultValue);
+    const count = items.length;
+    if (items.some(item => typeof item.alt !== 'string')) {
+        warnOnce('Lightbox:no-alt', '[bestax-bulma] <Lightbox> has an item with no alt. In a viewer the ' +
+            'image is the content, so give each one a text alternative.');
+    }
+    /** An index as one of the images: rounded, then held to the ends or wrapped. */
+    const fit = (value) => {
+        const whole = Number.isFinite(value) ? Math.trunc(value) : 0;
+        return repeat
+            ? ((whole % count) + count) % count
+            : clamp$5(whole, 0, count - 1);
+    };
+    const index = fit(controlledValue ?? ownValue);
+    const setOpen = (next) => {
+        if (controlledOpen === undefined)
+            setOwnOpen(next);
+        onOpenChange?.(next);
+    };
+    const setValue = (next) => {
+        if (controlledValue === undefined)
+            setOwnValue(next);
+        onChange?.(next);
+    };
+    // Read when a trigger is pressed, so the context stays the same object
+    // and the triggers don't re-render with every change here.
+    const openAt = useLatestRef((at) => {
+        if (!count)
+            return;
+        setValue(fit(at));
+        if (!open)
+            setOpen(true);
+    });
+    // When the images run out while it's open, it closes the way a user's
+    // close does, so an uncontrolled viewer doesn't open again by itself when
+    // they return. Only on the drop to none, so a viewer that opens before its
+    // images arrive (a deep link, or `defaultOpen` over data still loading)
+    // stays open for them.
+    const closeEmpty = useLatestRef(() => setOpen(false));
+    const countRef = React.useRef(count);
+    React.useEffect(() => {
+        const had = countRef.current;
+        countRef.current = count;
+        if (open && had > 0 && count === 0)
+            closeEmpty.current();
+    }, [open, count, closeEmpty]);
+    const context = React.useMemo(() => ({ openAt: at => openAt.current(at) }), [openAt]);
+    return (jsxRuntime.jsxs(LightboxContext.Provider, { value: context, children: [children, open && count > 0 && (jsxRuntime.jsx(LightboxViewer, { ...props, ref: ref, items: items, repeat: repeat, index: index, onIndexChange: setValue, onClose: () => setOpen(false) }))] }));
+});
+LightboxRoot.displayName = 'Lightbox';
+const Lightbox = withSubComponents(LightboxRoot, { Trigger: LightboxTrigger }, 'Lightbox');
+
 /**
  * The `Reveal` component animates its content into view as it scrolls into the viewport, backed by `IntersectionObserver`.
  *
@@ -15786,56 +16639,6 @@ const Emphasis = ({ className, textColor, bgColor, children, ...props }) => {
     return (jsxRuntime.jsx("em", { className: emphasisClasses || undefined, ...rest, children: children }));
 };
 
-/**
- * FigureCaption component for rendering a styled figcaption element.
- *
- * A FigureCaption wraps the HTML `<figcaption>` element with Bulma helper class integration.
- * Use it inside Figure components to provide captions for images or other media.
- *
- * @function
- * @param {FigureCaptionProps} props - Props for the FigureCaption component.
- * @returns {JSX.Element} The rendered figcaption element.
- */
-const FigureCaption = ({ className, textColor, bgColor, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const bulmaClasses = usePrefixedClassNames();
-    const captionClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("figcaption", { className: captionClasses || undefined, ...rest, children: children }));
-};
-/**
- * The `Figure` component renders a styled `<figure>` element with Bulma helper class integration.
- *
- * @function
- * @param {FigureProps} props - Props for the Figure component.
- * @returns {JSX.Element} The rendered figure element.
- */
-const FigureComponent = ({ className, textColor, bgColor, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const bulmaClasses = usePrefixedClassNames();
-    const figureClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("figure", { className: figureClasses || undefined, ...rest, children: children }));
-};
-/**
- * Figure component with Caption subcomponent.
- *
- * @example
- * <Figure>
- *   <img src="image.jpg" alt="Description" />
- *   <Figure.Caption>Image caption text</Figure.Caption>
- * </Figure>
- */
-const Figure = withSubComponents(FigureComponent, {
-    Caption: FigureCaption,
-}, 'Figure');
-
 /**
  * The `IconText` component provides a Bulma-styled horizontal arrangement of one or more `Icon` components and optional text.
  *
@@ -16015,36 +16818,6 @@ const ListItem = ({ className, textColor, bgColor, children, ...props }) => {
     return (jsxRuntime.jsx("li", { className: itemClasses || undefined, ...rest, children: children }));
 };
 
-/**
- * The `Loader` component renders Bulma's `.loader`, a small spinning ring for inline loading states.
- *
- * The ring is `1em` square, so `textSize` scales it. It is exposed as an
- * indeterminate `progressbar` named by `ariaLabel`, and it stops spinning
- * under `prefers-reduced-motion: reduce` while staying drawn. In forced
- * colors its two open sides take the page's color, so it stays open.
- *
- * @function
- * @param {LoaderProps} props - Props for the Loader component.
- * @param {React.Ref<HTMLSpanElement>} ref - Forwarded ref to the loader element.
- * @returns {JSX.Element} The rendered loader element.
- *
- * @example
- * <Loader />
- *
- * @example
- * <Loader textSize="3" ariaLabel="Saving" />
- */
-const Loader = React.forwardRef(({ className, ariaLabel = 'Loading', ...props }, ref) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const loaderClass = usePrefixedClassNames('loader');
-    // role="progressbar", not role="status": a status region mounted together
-    // with its text is not reliably announced, so the loader claims only what
-    // it can deliver, a named indicator found by reading the page. No
-    // aria-valuenow, because the progress is indeterminate.
-    return (jsxRuntime.jsx("span", { ref: ref, className: classNames(loaderClass, bulmaHelperClasses, className), role: "progressbar", "aria-label": ariaLabel, ...rest }));
-});
-Loader.displayName = 'Loader';
-
 /**
  * The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.
  *
@@ -30486,6 +31259,8 @@ exports.Level = Level;
 exports.LevelItem = LevelItem;
 exports.LevelLeft = LevelLeft;
 exports.LevelRight = LevelRight;
+exports.Lightbox = Lightbox;
+exports.LightboxTrigger = LightboxTrigger;
 exports.Link = Link;
 exports.LinkButton = LinkButton;
 exports.ListItem = ListItem;