@allxsmith/bestax-bulma 5.63.0 → 5.64.0

package/dist/index.cjs

@@ -12453,7 +12453,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 +12534,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 +12543,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,
@@ -15119,6 +15119,359 @@ const Affix = React.forwardRef(({ position = 'bottom-right', portal = false, cla
 });
 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 });
+        };
+    }, [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 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 `<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 {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
+ * <TableOfContents
+ *   isSticky
+ *   items={[
+ *     { id: 'install', label: 'Install' },
+ *     { id: 'usage', label: 'Usage', children: [{ id: 'props', label: 'Props' }] },
+ *   ]}
+ * />
+ */
+const TableOfContents = React.forwardRef(({ className, textColor, bgColor, items, onCurrentChange, offset, isSticky, labels, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    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) })] }));
+});
+TableOfContents.displayName = 'TableOfContents';
+
 /**
  * The `Block` component renders a simple container with Bulma's `.block` class, adding vertical margin between sections of content.
  *
@@ -22386,6 +22739,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 +23034,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() &&
@@ -29930,6 +30535,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 +30580,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 +30642,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;