@allxsmith/bestax-bulma 5.63.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`.
  *
@@ -12453,7 +13306,7 @@ const TreeView = withSubComponents(TreeViewRoot, { Item: TreeViewItem }, 'TreeVi
 const EDGES = ['top', 'bottom', 'start', 'end'];
 // Layout can land a fraction of a pixel short of an edge, so anything closer
 // than this counts as there.
-const SLACK = 1;
+const SLACK$1 = 1;
 const sameMeasure = (a, b) => !!a &&
     a.overflowing === b.overflowing &&
     a.barInline === b.barInline &&
@@ -12534,8 +13387,8 @@ const ScrollArea = React.forwardRef(({ className, style, textColor, bgColor, hei
         const scrollsX = orientation !== 'vertical';
         const maxTop = el.scrollHeight - el.clientHeight;
         const maxLeft = el.scrollWidth - el.clientWidth;
-        const overflowY = scrollsY && maxTop > SLACK;
-        const overflowX = scrollsX && maxLeft > SLACK;
+        const overflowY = scrollsY && maxTop > SLACK$1;
+        const overflowX = scrollsX && maxLeft > SLACK$1;
         // Right to left, scrollLeft runs from 0 at the start to negative.
         const fromStart = layoutRef.current.rtl
             ? -el.scrollLeft
@@ -12543,10 +13396,10 @@ const ScrollArea = React.forwardRef(({ className, style, textColor, bgColor, hei
         const next = {
             overflowing: overflowY || overflowX,
             edges: {
-                top: overflowY && el.scrollTop > SLACK,
-                bottom: overflowY && maxTop - el.scrollTop > SLACK,
-                start: overflowX && fromStart > SLACK,
-                end: overflowX && maxLeft - fromStart > SLACK,
+                top: overflowY && el.scrollTop > SLACK$1,
+                bottom: overflowY && maxTop - el.scrollTop > SLACK$1,
+                start: overflowX && fromStart > SLACK$1,
+                end: overflowX && maxLeft - fromStart > SLACK$1,
             },
             barInline: layoutRef.current.barInline,
             barBlock: layoutRef.current.barBlock,
@@ -15065,59 +15918,412 @@ const DataTable = React.forwardRef(function DataTableRender({ columns, data, tab
                         return column.isRowHeader ? (jsxRuntime.jsx(Th, { ...cellProps, children: content }, column.id)) : (jsxRuntime.jsx(Td, { ...cellProps, children: content }, column.id));
                     })] }, rowId));
         });
-    }
-    const tableElement = (jsxRuntime.jsxs(Table, { isBordered: isBordered, isStriped: isStriped, isNarrow: isNarrow, isHoverable: isHoverable, isFullwidth: isFullwidth, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-busy": loading || undefined, children: [captionNode, header, jsxRuntime.jsx(Tbody, { children: body })] }));
-    // The name the scroll area and the pager take from the table.
-    const textName = ariaLabel || (typeof caption === 'string' ? caption : undefined);
-    const scrollName = ariaLabel
-        ? { 'aria-label': ariaLabel }
-        : {
-            'aria-labelledby': ariaLabelledby || (hasCaption ? nameId : undefined),
+    }
+    const tableElement = (jsxRuntime.jsxs(Table, { isBordered: isBordered, isStriped: isStriped, isNarrow: isNarrow, isHoverable: isHoverable, isFullwidth: isFullwidth, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-busy": loading || undefined, children: [captionNode, header, jsxRuntime.jsx(Tbody, { children: body })] }));
+    // The name the scroll area and the pager take from the table.
+    const textName = ariaLabel || (typeof caption === 'string' ? caption : undefined);
+    const scrollName = ariaLabel
+        ? { 'aria-label': ariaLabel }
+        : {
+            'aria-labelledby': ariaLabelledby || (hasCaption ? nameId : undefined),
+        };
+    // Pagination names itself "pagination" unless given another name.
+    const pagerLabel = words.pagination || (textName ? `${textName} pages` : undefined);
+    const pagerName = pagerLabel ? { 'aria-label': pagerLabel } : {};
+    const toolbarContent = toolbar?.(table);
+    const hasToolbar = hasSearch || isShown(toolbarContent);
+    return (jsxRuntime.jsxs("div", { ref: ref, className: rootClass, ...rest, children: [hasToolbar && (jsxRuntime.jsxs("div", { className: toolbarClass, children: [hasSearch && (jsxRuntime.jsx(Input, { label: words.search, ...table.getSearchProps() })), isShown(toolbarContent) && (jsxRuntime.jsx("div", { className: actionsClass, children: toolbarContent }))] })), isResponsive ? (jsxRuntime.jsx(ScrollArea, { orientation: "horizontal", ...scrollName, children: tableElement })) : (tableElement), jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", style: visuallyHidden, children: said }), pageCount > 1 && (jsxRuntime.jsx(Pagination, { ...table.getPaginationProps(), ...pagerName }))] }));
+});
+DataTable.displayName = 'DataTable';
+
+/**
+ * The `Affix` component keeps its content fixed to a corner of the viewport while the page scrolls under it.
+ *
+ * It's a `<div>` with no role, so what's inside keeps its own. It sits
+ * `--bulma-affix-offset-vertical` and `--bulma-affix-offset-horizontal`
+ * from its corner's edges, plus the device's safe-area inset, and stacks at
+ * `--bulma-affix-z-index`, over the page's content and under its navbar,
+ * static or fixed, its menus, popovers, the Sidebar, the modals, Tooltip and
+ * Toast. It's as wide as its
+ * content and never wider than the viewport less its offsets. It doesn't
+ * scroll, so nothing inside it is clipped, and content that can be taller
+ * than the screen scrolls itself. Its place in the reading and Tab order is
+ * its place in the DOM, whatever corner it shows in.
+ *
+ * @function
+ * @param {AffixProps} props - Props for the Affix component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `<div>`.
+ * @returns The `<div>`, in place or in its portal.
+ *
+ * @example
+ * <Affix position="bottom-left">
+ *   <Button color="primary">Feedback</Button>
+ * </Affix>
+ */
+const Affix = React.forwardRef(({ position = 'bottom-right', portal = false, className, children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const affixClasses = usePrefixedClassNames('affix', {
+        [`is-${position}`]: true,
+    });
+    // In place on the server and while hydrating, then into the portal, as
+    // Modal does. The move remounts the `<div>`.
+    const { isPortaled, container } = usePortalProp(portal);
+    return (jsxRuntime.jsx(Portal, { disabled: !isPortaled, container: container, children: jsxRuntime.jsx("div", { ref: ref, className: classNames(affixClasses, bulmaHelperClasses, className), ...rest, children: children }) }));
+});
+Affix.displayName = 'Affix';
+
+/**
+ * How long the page has to stay still before a jump counts as over: long
+ * enough to span the gap between two frames of a smooth scroll.
+ */
+const SETTLE_MS = 100;
+/**
+ * A pixel of slack at the line, for a jump that lands a fraction of a pixel
+ * away from it.
+ */
+const SLACK = 1;
+/** The page's `scroll-padding-top` in pixels, or 0 for `auto`. */
+function scrollPaddingTop() {
+    const root = document.documentElement;
+    const value = getComputedStyle(root).scrollPaddingTop;
+    const number = parseFloat(value);
+    if (!Number.isFinite(number))
+        return 0;
+    // A percentage is of the page's scrollport: the viewport less a classic
+    // scrollbar.
+    return value.endsWith('%') ? (number * root.clientHeight) / 100 : number;
+}
+/**
+ * The height of the viewport the reader sees the page through, less a
+ * classic scrollbar: the larger of the root's `clientHeight` and the visual
+ * viewport's height. The visual viewport grows when a phone hides its
+ * toolbar, where the root keeps the height it had with the toolbar shown;
+ * under a pinch zoom it's the smaller, and the root's stands. Its `pageTop`
+ * isn't read, since Firefox can leave it behind `scrollY` for a frame after
+ * it puts back the scroll position on a reload.
+ */
+function viewportHeight() {
+    return Math.max(document.documentElement.clientHeight, window.visualViewport?.height ?? 0);
+}
+/** Whether the page is scrolled as far down as it goes. */
+const atEnd = () => window.scrollY > 0 &&
+    window.scrollY + viewportHeight() >=
+        document.documentElement.scrollHeight - 1;
+/** Whether the browser draws an element: `display: none` draws no box. */
+const isDrawn = (element) => element.getClientRects().length > 0;
+/** The id a URL fragment names, such as `#caf%C3%A9`. */
+function fragmentId(hash) {
+    const raw = hash.slice(1);
+    try {
+        return decodeURIComponent(raw);
+    }
+    catch {
+        return raw;
+    }
+}
+/**
+ * Whether the page was opened afresh, as by a link, rather than reloaded or
+ * reached by Back or Forward, where the browser puts it back where it was.
+ * Where the navigation isn't recorded (jsdom), it counts as opened afresh.
+ */
+function openedAfresh() {
+    const [entry] = performance.getEntriesByType?.('navigation') ?? [];
+    const type = entry?.type;
+    return type !== 'reload' && type !== 'back_forward';
+}
+/**
+ * The link a click was on, if it's a plain click that follows it in this
+ * page: the main button, no modifier key, and no `target` sending it
+ * elsewhere. The path is read rather than the target, so a link inside a
+ * shadow root counts.
+ */
+function followedLink(event) {
+    if (event.button !== 0 ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.altKey) {
+        return undefined;
+    }
+    const link = event
+        .composedPath()
+        .find((node) => node instanceof HTMLAnchorElement);
+    return link && (!link.target || link.target === '_self') ? link : undefined;
+}
+/**
+ * The `useScrollSpy` hook returns the id of the section being read: the last
+ * of `ids` whose top is at or above the offset line, or the last one once the
+ * page is scrolled to its end. After a jump to one of them, it's that one
+ * until the reader scrolls on. `null` above the first section, on the server
+ * and until the page hydrates.
+ *
+ * It checks once per frame while the page scrolls, and on resize. A jump is
+ * a plain click on a link to one of the ids (the main button, no modifier
+ * key, opening in this page), noted and never stopped, so the browser jumps
+ * as it always does; and the `#id` a page opened afresh opens at. Back,
+ * Forward and a reload aren't jumps. That `#id` is read once, when `ids`
+ * first has some: a section rendered after that isn't held, even if the
+ * page opened at it, and the reading rule marks where the page is. Once the
+ * page has been still for a
+ * moment, the section stays current only if it's where a jump puts it: its
+ * top at the line, give or take a shift of the layout smaller than its own
+ * height, or, at the end of the page, on screen below the line. Otherwise,
+ * as after a flick right after the click, the reading rule takes over. The
+ * next scroll after that lets it go, the browser's own included, so when
+ * content loading above it makes the browser scroll to keep the reader's
+ * place, the rule takes over too.
+ *
+ * A section that isn't drawn (`display: none`) is never current. A section
+ * that moves while nothing scrolls is seen at the next scroll or resize. It
+ * watches the document only: not a panel that scrolls inside it, and not
+ * sections inside a shadow root, which an `#id` link can't reach either.
+ * Whether a page was opened afresh is read from how the document loaded, so
+ * in an app that changes routes on the client, a route change can briefly
+ * mark the address bar's section until the page settles, when the reading
+ * rule takes over, and after a reload a route change to an `#id` holds
+ * nothing.
+ *
+ * @function
+ * @param {UseScrollSpyOptions} options - The ids to watch, the offset, and a change callback.
+ * @returns {string | null} The current section's id, or `null`.
+ *
+ * @example
+ * const current = useScrollSpy({ ids: ['profile', 'security', 'billing'] });
+ */
+function useScrollSpy({ ids, offset, onCurrentChange, }) {
+    const [active, setActive] = React.useState(null);
+    // What was last reported, kept across a re-subscribe so the same id isn't
+    // reported twice.
+    const reportedRef = React.useRef(null);
+    // The section a jump went to. It belongs to the hook rather than to one run
+    // of the effect, so new ids, a new offset or React's development double run
+    // don't lose it, and the `#id` the page opened at is read once, when the
+    // ids first include some.
+    const heldRef = React.useRef(null);
+    const openedRef = React.useRef(false);
+    const onCurrentChangeRef = useLatestRef(onCurrentChange);
+    // The ids as a value, so a new array with the same ids each render doesn't
+    // re-subscribe.
+    const key = JSON.stringify(ids);
+    const fixedOffset = typeof offset === 'number' && Number.isFinite(offset) ? offset : undefined;
+    React.useEffect(() => {
+        const watched = JSON.parse(key);
+        let line = fixedOffset ?? scrollPaddingTop();
+        let settled = true;
+        let settleTimer;
+        let frame = 0;
+        const report = (id) => {
+            if (id === reportedRef.current)
+                return;
+            reportedRef.current = id;
+            setActive(id);
+            onCurrentChangeRef.current?.(id);
+        };
+        /** The element for one of the ids, if it's on the page and drawn. */
+        const sectionOf = (id) => {
+            const element = watched.includes(id) ? document.getElementById(id) : null;
+            return element && isDrawn(element) ? element : null;
+        };
+        /**
+         * Whether a section is where a jump puts it: its top at the line, give or
+         * take a shift of the layout smaller than the section's own height, or,
+         * at the end of the page, as near as the page lets it come, on screen
+         * below the line.
+         */
+        const atJump = (id) => {
+            const element = sectionOf(id);
+            if (!element)
+                return false;
+            const { top, bottom, height } = element.getBoundingClientRect();
+            if (top <= line + height && bottom >= line)
+                return true;
+            return top > line && top < viewportHeight() && atEnd();
+        };
+        const check = () => {
+            if (heldRef.current !== null)
+                return report(heldRef.current);
+            const drawn = [];
+            for (const id of watched) {
+                const element = document.getElementById(id);
+                if (element && isDrawn(element))
+                    drawn.push([id, element]);
+            }
+            let current = null;
+            if (atEnd()) {
+                // A short last section can't reach the line, so the end of the page
+                // stands in for it.
+                if (drawn.length)
+                    current = drawn[drawn.length - 1][0];
+            }
+            else {
+                for (const [id, element] of drawn) {
+                    if (element.getBoundingClientRect().top <= line + SLACK)
+                        current = id;
+                }
+            }
+            report(current);
+        };
+        /** Runs the check in the next frame, once however many events ask. */
+        const schedule = () => {
+            if (frame)
+                return;
+            frame = requestAnimationFrame(() => {
+                frame = 0;
+                check();
+            });
+        };
+        /**
+         * Starts, or starts again, the wait for the page to be still, when a
+         * held section that isn't where a jump puts it is let go.
+         */
+        const waitToSettle = () => {
+            settled = false;
+            clearTimeout(settleTimer);
+            settleTimer = setTimeout(() => {
+                settled = true;
+                if (heldRef.current !== null && !atJump(heldRef.current)) {
+                    heldRef.current = null;
+                }
+                check();
+            }, SETTLE_MS);
+        };
+        /** Holds the section a jump goes to, if it's one of these on the page. */
+        const hold = (id) => {
+            if (!sectionOf(id))
+                return;
+            heldRef.current = id;
+            waitToSettle();
+        };
+        const onScroll = () => {
+            if (heldRef.current !== null) {
+                // Once the page has been still, the next scroll lets the jump go;
+                // until then, each scroll pushes the end of the jump back.
+                if (settled)
+                    heldRef.current = null;
+                else
+                    waitToSettle();
+            }
+            schedule();
+        };
+        const onResize = () => {
+            line = fixedOffset ?? scrollPaddingTop();
+            schedule();
+        };
+        const onClick = (event) => {
+            const link = followedLink(event);
+            if (link?.hash &&
+                link.href.split('#')[0] === window.location.href.split('#')[0]) {
+                hold(fragmentId(link.hash));
+                check();
+            }
+        };
+        if (!openedRef.current) {
+            // Ids built from content fetched after mount arrive later, so the read
+            // waits until there are some.
+            if (watched.length) {
+                openedRef.current = true;
+                if (openedAfresh())
+                    hold(fragmentId(window.location.hash));
+            }
+        }
+        else if (heldRef.current !== null) {
+            // A jump held across new ids carries on if its section still counts.
+            if (sectionOf(heldRef.current))
+                waitToSettle();
+            else
+                heldRef.current = null;
+        }
+        check();
+        window.addEventListener('scroll', onScroll, { passive: true });
+        window.addEventListener('resize', onResize);
+        document.addEventListener('click', onClick, {
+            capture: true,
+            passive: true,
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+            clearTimeout(settleTimer);
+            window.removeEventListener('scroll', onScroll);
+            window.removeEventListener('resize', onResize);
+            document.removeEventListener('click', onClick, { capture: true });
         };
-    // Pagination names itself "pagination" unless given another name.
-    const pagerLabel = words.pagination || (textName ? `${textName} pages` : undefined);
-    const pagerName = pagerLabel ? { 'aria-label': pagerLabel } : {};
-    const toolbarContent = toolbar?.(table);
-    const hasToolbar = hasSearch || isShown(toolbarContent);
-    return (jsxRuntime.jsxs("div", { ref: ref, className: rootClass, ...rest, children: [hasToolbar && (jsxRuntime.jsxs("div", { className: toolbarClass, children: [hasSearch && (jsxRuntime.jsx(Input, { label: words.search, ...table.getSearchProps() })), isShown(toolbarContent) && (jsxRuntime.jsx("div", { className: actionsClass, children: toolbarContent }))] })), isResponsive ? (jsxRuntime.jsx(ScrollArea, { orientation: "horizontal", ...scrollName, children: tableElement })) : (tableElement), jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", style: visuallyHidden, children: said }), pageCount > 1 && (jsxRuntime.jsx(Pagination, { ...table.getPaginationProps(), ...pagerName }))] }));
-});
-DataTable.displayName = 'DataTable';
+    }, [key, fixedOffset, onCurrentChangeRef]);
+    return active;
+}
 
+/** Every id in the tree, in page order. */
+const idsOf = (items) => items.flatMap(item => [item.id, ...idsOf(item.children ?? [])]);
 /**
- * The `Affix` component keeps its content fixed to a corner of the viewport while the page scrolls under it.
+ * The entries as `MenuItem` links, each entry's own entries in a nested
+ * `MenuList`, and the current one marked.
+ */
+const entries = (items, active) => items.map(item => {
+    const current = item.id === active;
+    return (jsxRuntime.jsxs(MenuItem, { href: `#${encodeURIComponent(item.id)}`, active: current, "aria-current": current ? 'location' : undefined, children: [item.label, item.children?.length ? (jsxRuntime.jsx(MenuList, { children: entries(item.children, active) })) : null] }, item.id));
+});
+/**
+ * The `TableOfContents` component lists a long page's sections as links in Bulma's menu look, and marks the one being read.
  *
- * It's a `<div>` with no role, so what's inside keeps its own. It sits
- * `--bulma-affix-offset-vertical` and `--bulma-affix-offset-horizontal`
- * from its corner's edges, plus the device's safe-area inset, and stacks at
- * `--bulma-affix-z-index`, over the page's content and under its navbar,
- * static or fixed, its menus, popovers, the Sidebar, the modals, Tooltip and
- * Toast. It's as wide as its
- * content and never wider than the viewport less its offsets. It doesn't
- * scroll, so nothing inside it is clipped, and content that can be taller
- * than the screen scrolls itself. Its place in the reading and Tab order is
- * its place in the DOM, whatever corner it shows in.
+ * It's a `<nav>` named by its title, holding `MenuList` and `MenuItem` links
+ * to each `#id`, rendered in full on the server. `useScrollSpy` picks the
+ * current section, and its link alone gets `is-active` and
+ * `aria-current="location"`. Use the hook on its own to mark the section in
+ * view somewhere else, such as an app's nav `Menu`.
  *
  * @function
- * @param {AffixProps} props - Props for the Affix component.
- * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `<div>`.
- * @returns The `<div>`, in place or in its portal.
+ * @param {TableOfContentsProps} props - Props for the TableOfContents component.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<nav>`.
+ * @returns {JSX.Element} The rendered table of contents.
  *
  * @example
- * <Affix position="bottom-left">
- *   <Button color="primary">Feedback</Button>
- * </Affix>
+ * <TableOfContents
+ *   isSticky
+ *   items={[
+ *     { id: 'install', label: 'Install' },
+ *     { id: 'usage', label: 'Usage', children: [{ id: 'props', label: 'Props' }] },
+ *   ]}
+ * />
  */
-const Affix = React.forwardRef(({ position = 'bottom-right', portal = false, className, children, ...props }, ref) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const affixClasses = usePrefixedClassNames('affix', {
-        [`is-${position}`]: true,
+const TableOfContents = React.forwardRef(({ className, textColor, bgColor, items, onCurrentChange, offset, isSticky, labels, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
     });
-    // In place on the server and while hydrating, then into the portal, as
-    // Modal does. The move remounts the `<div>`.
-    const { isPortaled, container } = usePortalProp(portal);
-    return (jsxRuntime.jsx(Portal, { disabled: !isPortaled, container: container, children: jsxRuntime.jsx("div", { ref: ref, className: classNames(affixClasses, bulmaHelperClasses, className), ...rest, children: children }) }));
+    const titleId = React.useId();
+    const active = useScrollSpy({ ids: idsOf(items), offset, onCurrentChange });
+    const navRef = React.useRef(null);
+    const setRefs = React.useCallback((node) => {
+        navRef.current = node;
+        if (typeof ref === 'function')
+            return ref(node);
+        if (ref)
+            ref.current = node;
+    }, [ref]);
+    // A list taller than the room it has scrolls itself to keep the current
+    // link in view. Only the list moves: scrollIntoView would move the page
+    // too whenever the link is off screen.
+    React.useEffect(() => {
+        const nav = navRef.current;
+        const link = nav.querySelector('a[aria-current="location"]');
+        if (!link || nav.scrollHeight <= nav.clientHeight)
+            return;
+        const top = nav.getBoundingClientRect().top + nav.clientTop;
+        const bottom = top + nav.clientHeight;
+        const at = link.getBoundingClientRect();
+        if (at.top < top)
+            nav.scrollTop -= top - at.top;
+        else if (at.bottom > bottom)
+            nav.scrollTop += at.bottom - bottom;
+    }, [active]);
+    // Bulma's menu, which draws it, and its own class beside it.
+    const menuClass = usePrefixedClassNames('menu');
+    const rootClass = usePrefixedClassNames('table-of-contents', {
+        'is-sticky': !!isSticky,
+    });
+    return (jsxRuntime.jsxs("nav", { ref: setRefs, className: classNames(menuClass, rootClass, bulmaHelperClasses, className), "aria-labelledby": titleId, ...rest, children: [jsxRuntime.jsx(MenuLabel, { id: titleId, children: labels?.title || 'On this page' }), jsxRuntime.jsx(MenuList, { children: entries(items, active) })] }));
 });
-Affix.displayName = 'Affix';
+TableOfContents.displayName = 'TableOfContents';
 
 /**
  * The `Block` component renders a simple container with Bulma's `.block` class, adding vertical margin between sections of content.
@@ -15433,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.
  *
@@ -15662,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.
  *
@@ -22386,6 +23512,167 @@ const TextAreaBase = React.forwardRef(({ color, size, isRounded, isStatic, isHov
 });
 TextAreaBase.displayName = 'TextAreaBase';
 
+/** An eye, drawn while the password is hidden. */
+const EyeIcon = () => (jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1.25em", height: "1.25em", "aria-hidden": "true", children: jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M1.5 8s2.5-4.5 6.5-4.5 6.5 4.5 6.5 4.5-2.5 4.5-6.5 4.5S1.5 8 1.5 8z" }), jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "2" })] }) }));
+/** The eye crossed out, drawn while the password shows. */
+const EyeOffIcon = () => (jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1.25em", height: "1.25em", "aria-hidden": "true", children: jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M1.5 8s2.5-4.5 6.5-4.5 6.5 4.5 6.5 4.5-2.5 4.5-6.5 4.5S1.5 8 1.5 8z" }), jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "2" }), jsxRuntime.jsx("path", { d: "M2.5 2.5l11 11" })] }) }));
+/**
+ * Warns in development when the `text` toggle's name doesn't contain the
+ * word on it, which a voice control user says to press it.
+ */
+const checkLabelInName = (name, word) => {
+    if (name.toLocaleLowerCase().includes(word.toLocaleLowerCase()))
+        return;
+    warnOnce(`PasswordInput:label-in-name:${name}:${word}`, `[bestax-bulma] A PasswordInput with variant="text" is named ` +
+        `"${name}" while its button says "${word}". A voice control user ` +
+        `says the word they see, so the name has to contain it (WCAG 2.5.3, ` +
+        `Label in Name). Set labels so each name contains its word.`);
+};
+/**
+ * The raw PasswordInput: a password field with a button inside it that shows what was typed, without Field/Control wrapping.
+ *
+ * Use `PasswordInput` for the convenience wrapper.
+ *
+ * @function
+ * @param {PasswordInputBaseProps} props - Props for PasswordInputBase.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the `<input>`.
+ * @returns {JSX.Element} The input and its toggle, in a container.
+ */
+const PasswordInputBase = React.forwardRef((props, ref) => {
+    const { visible: visibleProp, defaultVisible = false, onVisibleChange, variant = 'icon', labels, autoComplete = 'current-password', spellCheck = false, autoCorrect = 'off', autoCapitalize = 'none', disabled: disabledProp, color, className, style, ...others } = props;
+    // Helper props, `className` and `style` go on the container, so a margin,
+    // a width or a display moves the field and its toggle together. `color`
+    // stays with the input, whose border it colors.
+    const { bulmaHelperClasses, rest } = useBulmaClasses(others);
+    const disabled = useFieldsetDisabled(disabledProp);
+    // The toggle gives way to the loading spinner of a Control this sits in,
+    // which takes its slot, and the field hides the password meanwhile, as
+    // there's no button to hide it with.
+    const controlLoading = useControlLoading();
+    const isText = variant === 'text';
+    const showPassword = labels?.showPassword || 'Show password';
+    const hidePassword = labels?.hidePassword || 'Hide password';
+    const show = labels?.show || 'Show';
+    const hide = labels?.hide || 'Hide';
+    if (isText) {
+        checkLabelInName(showPassword, show);
+        checkLabelInName(hidePassword, hide);
+    }
+    const isControlled = visibleProp !== undefined;
+    const [internalVisible, setInternalVisible] = React.useState(defaultVisible);
+    const visible = isControlled ? visibleProp : internalVisible;
+    // Whether the field shows now: as last reported, until `visible` changes.
+    // Two hide events before React renders, as from an effect, or a caller
+    // holding `visible` that keeps it `true`, report `false` once.
+    const shownRef = React.useRef(visible);
+    useClientLayoutEffect(() => {
+        shownRef.current = visible;
+    }, [visible]);
+    const setVisible = (next) => {
+        shownRef.current = next;
+        if (!isControlled)
+            setInternalVisible(next);
+        onVisibleChange?.(next);
+    };
+    const inputRef = React.useRef(null);
+    // A caller's callback ref may return a cleanup, as React 19 allows. It's
+    // held here and run on detach in place of a call with `null`, on React 18
+    // as well, since this ref is the one React calls.
+    const refCleanup = React.useRef(null);
+    const combinedRef = React.useCallback((node) => {
+        inputRef.current = node;
+        if (typeof ref === 'function') {
+            if (node === null) {
+                const cleanup = refCleanup.current;
+                refCleanup.current = null;
+                if (cleanup)
+                    cleanup();
+                else
+                    ref(null);
+                return;
+            }
+            const cleanup = ref(node);
+            refCleanup.current =
+                typeof cleanup === 'function' ? cleanup : null;
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    // A toggle with focus that leaves while the input stays, as it does when a
+    // Control starts loading, hands focus to the input rather than dropping it
+    // to the page. React lets go of the toggle before it takes it out of the
+    // page, so the toggle still has focus here; when the whole field unmounts,
+    // React has let go of the input first.
+    const toggleRef = React.useRef(null);
+    const setToggle = React.useCallback((node) => {
+        // React lets go only of a toggle it handed over, so there is one.
+        const leaving = toggleRef.current;
+        toggleRef.current = node;
+        if (node)
+            return;
+        const root = leaving.getRootNode();
+        if (root.activeElement === leaving)
+            inputRef.current?.focus();
+    }, []);
+    // Hides the password again: reports `false`, and sets its own state when it
+    // holds it. Inside `flushSync`, React renders that, a caller's own state
+    // update included, before the listener returns, so the browser reads the
+    // form, or saves the page's form state, from a password field. The
+    // component never sets the field's type itself, so a caller holding
+    // `visible` that keeps it `true` keeps the field shown. The one catch: an
+    // event fired while React is rendering or committing, which includes
+    // `useEffect` and `useLayoutEffect` callbacks (a `requestSubmit()` from
+    // an effect), can't flush there, so React warns in development and the
+    // hide lands after the form is read. Only the listeners below call it,
+    // while the input is mounted.
+    const hideRef = useLatestRef(() => {
+        if (!shownRef.current)
+            return;
+        // eslint-disable-next-line @eslint-react/dom-no-flush-sync -- the form is read, or the page saved, before React would render this on its own
+        reactDom.flushSync(() => setVisible(false));
+    });
+    // When the form it belongs to submits or resets: whichever form that is
+    // when it happens, so a form mounted after the field, or mounted again,
+    // counts. Neither event leaves a shadow root, so it listens on the field's
+    // own root, the document or the shadow root it renders in, and in the
+    // capture phase, before any listener on the form.
+    React.useEffect(() => {
+        const input = inputRef.current;
+        const root = input.getRootNode();
+        const onFormEvent = (event) => {
+            if (event.target === input.form)
+                hideRef.current();
+        };
+        root.addEventListener('submit', onFormEvent, true);
+        root.addEventListener('reset', onFormEvent, true);
+        return () => {
+            root.removeEventListener('submit', onFormEvent, true);
+            root.removeEventListener('reset', onFormEvent, true);
+        };
+    }, [hideRef]);
+    // When the page is left, so the history the browser keeps of the form
+    // holds a password field rather than text. It fires on the way into the
+    // back-forward cache too, so a page coming back from there is hidden.
+    React.useEffect(() => {
+        const onPageHide = () => hideRef.current();
+        window.addEventListener('pagehide', onPageHide);
+        return () => window.removeEventListener('pagehide', onPageHide);
+    }, [hideRef]);
+    const containerClass = usePrefixedClassNames('password-input-container', {
+        'is-text': isText,
+    });
+    const toggleClass = usePrefixedClassNames('password-input-toggle');
+    // The icon keeps one name and reports its state; the words change, so
+    // the name follows them and there's no state to report.
+    const toggleName = isText && visible ? hidePassword : showPassword;
+    const glyph = visible ? jsxRuntime.jsx(EyeOffIcon, {}) : jsxRuntime.jsx(EyeIcon, {});
+    return (jsxRuntime.jsxs("div", { className: classNames(containerClass, bulmaHelperClasses, className), style: style, children: [jsxRuntime.jsx(InputBase, { ref: combinedRef, autoComplete: autoComplete, spellCheck: spellCheck, autoCorrect: autoCorrect, autoCapitalize: autoCapitalize, disabled: disabled, color: color, ...rest, type: visible && !controlLoading ? 'text' : 'password' }), !controlLoading && (jsxRuntime.jsx("button", { ref: setToggle, type: "button", className: toggleClass, "aria-label": toggleName, "aria-pressed": isText ? undefined : visible, disabled: disabled, 
+                // A pointer press leaves focus, and the caret, in the input.
+                onMouseDown: event => event.preventDefault(), onClick: () => setVisible(!visible), children: isText ? (visible ? hide : show) : glyph }))] }));
+});
+PasswordInputBase.displayName = 'PasswordInputBase';
+
 /**
  * The `Select` component provides a Bulma-styled dropdown for selecting one or more options.
  *
@@ -22520,6 +23807,97 @@ fieldClassName, controlClassName,
 });
 TextArea.displayName = 'TextArea';
 
+/** The right-icon props, which the toggle's place leaves no room for. */
+const RIGHT_ICON_PROPS = [
+    'iconRight',
+    'iconRightName',
+    'iconRightSize',
+    'hasIconsRight',
+];
+/**
+ * The `PasswordInput` component is a password field with a button inside it that shows what was typed.
+ *
+ * By default the button is an eye named "Show password" that reports
+ * whether the password shows with `aria-pressed`; `variant="text"` makes it
+ * the words "Show" and "Hide". The field asks for
+ * `autocomplete="current-password"` and no spellcheck, and hides the
+ * password again when its form submits.
+ *
+ * @function
+ * @param {PasswordInputProps} props - Props for PasswordInput.
+ * @returns {JSX.Element} The composed field element.
+ *
+ * @example
+ * <PasswordInput label="Password" />
+ *
+ * @example
+ * <PasswordInput label="New password" autoComplete="new-password" variant="text" />
+ */
+const PasswordInput = React.forwardRef((props, ref) => {
+    const { 
+    // Field props
+    label, labelSize, labelProps, horizontal, 
+    // Control props
+    iconLeft, iconLeftName, iconLeftSize, hasIconsLeft, isLoading, isExpanded, controlSize, 
+    // Message props
+    message, messageColor, 
+    // Container class overrides
+    fieldClassName, controlClassName, 
+    // Not offered, and not passed on
+    iconRight: _iconRight, iconRightName: _iconRightName, iconRightSize: _iconRightSize, hasIconsRight: _hasIconsRight, 
+    // Everything else goes to the base
+    ...baseProps } = props;
+    const rightIcon = RIGHT_ICON_PROPS.filter(prop => props[prop]);
+    if (rightIcon.length > 0) {
+        const names = rightIcon.join(' ');
+        warnOnce(`PasswordInput:right-icon:${names}`, `[bestax-bulma] <PasswordInput ${names}> draws no right icon: the ` +
+            `visibility toggle sits at that edge. Leave ` +
+            `${rightIcon.length > 1 ? 'them' : 'it'} out, or use a left icon.`);
+    }
+    const insideField = useInsideField();
+    const insideControl = useInsideControl();
+    const ownField = rendersOwnField('PasswordInput', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
+    const ownControl = rendersOwnControl('PasswordInput', {
+        insideControl,
+        isLoading,
+        iconLeft,
+        iconLeftName,
+        iconLeftSize,
+        hasIconsLeft,
+        isExpanded,
+        controlSize,
+        controlClassName,
+    });
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: baseProps.id,
+        labelProps,
+        rendersLabel: ownField,
+    });
+    const helpClass = usePrefixedClassNames('help', {
+        [`is-${messageColor}`]: !!messageColor,
+    });
+    // The base hides its toggle while the Control it sits in is loading,
+    // whether that is the one rendered below or an enclosing one.
+    let content = (jsxRuntime.jsx(PasswordInputBase, { ref: ref, ...baseProps, id: controlId }));
+    if (ownControl) {
+        content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconLeftName: iconLeftName, iconLeftSize: iconLeftSize, hasIconsLeft: hasIconsLeft, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
+    }
+    const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
+    if (ownField) {
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
+});
+PasswordInput.displayName = 'PasswordInput';
+
 function isSameDay(a, b) {
     return (a.getFullYear() === b.getFullYear() &&
         a.getMonth() === b.getMonth() &&
@@ -29881,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;
@@ -29930,6 +31310,8 @@ exports.PanelIcon = PanelIcon;
 exports.PanelInputBlock = PanelInputBlock;
 exports.PanelTabs = PanelTabs;
 exports.Paragraph = Paragraph;
+exports.PasswordInput = PasswordInput;
+exports.PasswordInputBase = PasswordInputBase;
 exports.PinInput = PinInput;
 exports.Popover = Popover;
 exports.PopoverBody = PopoverBody;
@@ -29973,6 +31355,7 @@ exports.TabContentItem = TabContentItem;
 exports.TabItem = TabItem;
 exports.TabList = TabList;
 exports.Table = Table;
+exports.TableOfContents = TableOfContents;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
 exports.Tag = Tag;
@@ -30034,6 +31417,7 @@ exports.useNumberFormat = useNumberFormat;
 exports.useOtherClasses = useOtherClasses;
 exports.usePrefixedClass = usePrefixedClass;
 exports.usePrefixedClassNames = usePrefixedClassNames;
+exports.useScrollSpy = useScrollSpy;
 exports.useSpacingClasses = useSpacingClasses;
 exports.useTypographyClasses = useTypographyClasses;
 exports.useVisibilityClasses = useVisibilityClasses;