@allxsmith/bestax-bulma 5.27.7 → 5.28.0

package/dist/index.cjs

@@ -1444,8 +1444,13 @@ function isCustomElement(as) {
 
 // INTERNAL: deliberately not exported from src/index.ts.
 const warnedKeys = new Set();
-// Fail closed: with no bundler and no Node (raw CDN ESM), reading `process`
-// throws and warnings stay off, so production can never warn by accident.
+/**
+ * Whether this is a development build. Fail closed: with no bundler and no
+ * Node (raw CDN ESM), reading `process` throws and this is false, so
+ * production can never warn by accident. Exported for a caller whose
+ * development-only check costs something before it reaches `warnOnce`, so it
+ * can skip that work in production too.
+ */
 const isDev = () => {
     try {
         return process.env.NODE_ENV !== 'production';
@@ -5082,6 +5087,7 @@ const isDetailsSummary = (el) => el.parentElement?.localName === 'details' &&
  * can read `-1` for an editable region or an `<embed>` that Tab still visits,
  * and `0` for a `<video>` without controls that it doesn't. So a valid
  * `tabindex` attribute decides, and otherwise the element's kind does.
+ * Internal like `firstTabStop`: `src/index.ts` names what it takes from here.
  */
 function isTabbableKind(el) {
     const tabindex = el.getAttribute('tabindex');
@@ -6009,6 +6015,502 @@ const Popover = withSubComponents(PopoverComponent, {
     Close: PopoverClose,
 }, 'Popover');
 
+// INTERNAL: deliberately not exported from src/index.ts.
+/**
+ * Whether focus that just arrived on `el` is keyboard focus, as the browser
+ * decides it for `:focus-visible`: focus from a key or from the browser's
+ * own controls is, focus a press brings isn't, and focus a script moves
+ * follows whichever came last. A browser that can't match the selector
+ * throws, and then every focus counts, so keyboard users can still open it.
+ */
+function isKeyboardFocus(el) {
+    try {
+        return el.matches(':focus-visible');
+    }
+    catch {
+        return true;
+    }
+}
+/** Whether `node` is `container` or inside it, when there are both. */
+const within = (container, node) => Boolean(container && node && container.contains(node));
+/**
+ * Per document, the hooks that want Escape and the one listener they share
+ * while there are any, so a card inside another card doesn't add a second
+ * listener that closes both on one keypress.
+ */
+const escapeListeners = new Map();
+/** Counts openings across the page, so the most recent one is known. */
+let openings = 0;
+/**
+ * Adds `entry` to the hooks that want Escape on `doc`, starting the shared
+ * listener when it is the first.
+ *
+ * Escape takes back every open that is on its way, so nothing appears right
+ * after it, and closes one open floating element, chosen by these rules in
+ * turn:
+ *
+ * 1. One that focus is in, on its trigger or inside it, when there is one.
+ * 2. The innermost: one whose floating element holds no other's trigger.
+ *    That follows nesting whether either one is portaled, since an inner
+ *    trigger sits in the outer floating element either way.
+ * 3. The one that opened last.
+ *
+ * The keypress belongs to whatever has focus. When that is one of the open
+ * floating elements or their triggers, or nothing, the listener stops it in
+ * the capture phase, before anything around (a Popover, a Modal) sees it.
+ * When focus is anywhere else, such as a combobox or a dialog of its own,
+ * the floating element still closes, since hover put it there without
+ * focus, and the key goes on to that owner.
+ *
+ * @returns What to call when the hook stops wanting Escape.
+ */
+function wantEscape(doc, entry) {
+    let listener = escapeListeners.get(doc);
+    if (!listener) {
+        const entries = new Set();
+        const handleKeyDown = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            const open = [];
+            // A copy, since taking an open back can take its hook out of the set.
+            for (const each of [...entries]) {
+                if (each.openedAt)
+                    open.push(each);
+                else
+                    each.cancel();
+            }
+            const focused = getDeepestActiveElement(doc);
+            const holding = open.filter(each => within(each.trigger(), focused) || within(each.floating(), focused));
+            const pool = holding.length > 0 ? holding : open;
+            let top;
+            for (const each of pool) {
+                const holdsAnother = pool.some(other => other !== each && within(each.floating(), other.trigger()));
+                if (!holdsAnother && (!top || each.openedAt > top.openedAt)) {
+                    top = each;
+                }
+            }
+            if (!top)
+                return;
+            if (holding.length > 0 || !focused || focused === doc.body) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            top.close();
+        };
+        doc.addEventListener('keydown', handleKeyDown, true);
+        listener = {
+            entries,
+            stop: () => {
+                doc.removeEventListener('keydown', handleKeyDown, true);
+                escapeListeners.delete(doc);
+            },
+        };
+        escapeListeners.set(doc, listener);
+    }
+    const shared = listener;
+    shared.entries.add(entry);
+    return () => {
+        shared.entries.delete(entry);
+        if (shared.entries.size === 0)
+            shared.stop();
+    };
+}
+/**
+ * Decides when a floating element that opens on hover or keyboard focus asks
+ * to open and to close. It renders nothing, and leaves roles, ARIA and
+ * placement to the component that calls it.
+ *
+ * - The pointer entering, or keyboard focus arriving on the trigger, asks to
+ *   open after `openDelay`. A touch pointer doesn't count. Neither does focus
+ *   that a press brings to the trigger: it counts when the browser shows it
+ *   as `:focus-visible`.
+ * - Focus in the floating element holds it open however it got there,
+ *   including focus in content it portals elsewhere, such as a nested card.
+ *   Whether a click focuses what it lands on is up to the browser: Safari
+ *   and Firefox on macOS don't focus a button on click, so there a clicked
+ *   button doesn't hold it once the pointer leaves.
+ * - Once the pointer and focus have both left, it asks to close after
+ *   `closeDelay`, and either coming back before then keeps it open. Nothing
+ *   else closes it on a timer.
+ * - Escape closes it at once, wherever focus is, and stops there when focus
+ *   is in it, on its trigger or nowhere, so a `Popover` or `Modal` around it
+ *   keeps its own. With focus somewhere else, the key goes on after closing
+ *   it. Inside another one, the inner one closes first. Escape before it
+ *   opens takes the opening back and goes on its way. One key listener per
+ *   document serves every hook on it, there only while one of them is open
+ *   or on its way to open.
+ * - With `openOnTap`, a tap on the trigger opens it at once and the next tap
+ *   on the trigger closes it. While a tap holds it open, a press outside the
+ *   trigger and the floating element closes it, from a listener on the
+ *   document that is there only then. Taps never count as hover, and mouse
+ *   and pen work the same with it or without.
+ * - Once it closes, for any reason, whatever was holding it open has to
+ *   leave and come back to open it again.
+ * - When the floating element closes with focus inside it, focus goes back
+ *   to the trigger, unless the same update put it somewhere else. Handing it
+ *   back doesn't count as focus arriving.
+ *
+ * Nothing it scheduled runs after the component unmounts.
+ *
+ * @function useHoverOpen
+ * @param options - The open state, how to ask for another, the delays, and the two elements.
+ * @returns Handlers for the element that holds the trigger.
+ */
+function useHoverOpen(options) {
+    const latestRef = React.useRef(options);
+    const stateRef = React.useRef({
+        pointerIn: false,
+        focusIn: false,
+        focusInFloating: false,
+        held: false,
+        opening: false,
+        asked: false,
+        restoring: false,
+    });
+    // In the hooks that want Escape from the moment an open is on its way until
+    // the floating element closes, and out otherwise. Stamped with the order it
+    // opened in.
+    const listenForEscape = React.useCallback(function listen() {
+        const s = stateRef.current;
+        const entry = entryRef.current;
+        const { open, triggerRef } = latestRef.current;
+        if (!open)
+            entry.openedAt = 0;
+        else if (!entry.openedAt) {
+            openings += 1;
+            entry.openedAt = openings;
+        }
+        const wanted = open || s.opening || s.asked;
+        if (wanted === Boolean(s.releaseEscape))
+            return;
+        if (s.releaseEscape) {
+            s.releaseEscape();
+            s.releaseEscape = undefined;
+            return;
+        }
+        const doc = triggerRef.current?.ownerDocument ?? document;
+        s.releaseEscape = wantEscape(doc, entry);
+    }, []);
+    const entryRef = React.useRef({
+        openedAt: 0,
+        trigger: () => latestRef.current.triggerRef.current,
+        floating: () => latestRef.current.floatingRef.current,
+        // Only ever called while an open is on its way, so it is one or the
+        // other: still waiting on its delay, or asked for already.
+        cancel: () => {
+            const s = stateRef.current;
+            clearTimeout(s.timer);
+            // An ask already made is taken back by asking the other way.
+            if (s.asked)
+                latestRef.current.onOpenChange(false);
+            s.opening = false;
+            s.asked = false;
+            listenForEscape();
+        },
+        close: () => {
+            clearTimeout(stateRef.current.timer);
+            latestRef.current.onOpenChange(false);
+        },
+    });
+    // Asks to open or to close. Escape can take an ask to open back until it is
+    // answered: by the commit that follows it, or, when the caller keeps it
+    // closed without rendering at all, once the event that asked is over, by
+    // which time React has rendered any answer the caller set.
+    const ask = React.useCallback((next) => {
+        const s = stateRef.current;
+        s.asked = next;
+        latestRef.current.onOpenChange(next);
+        listenForEscape();
+        if (!next)
+            return;
+        clearTimeout(s.askTimer);
+        s.askTimer = setTimeout(() => {
+            // Still closed: the caller turned it down.
+            if (latestRef.current.open)
+                return;
+            s.asked = false;
+            s.tappedIn = undefined;
+            listenForEscape();
+        });
+    }, [listenForEscape]);
+    // Asks for what the pointer and focus call for, after its delay, when that
+    // changed since the last time and isn't the state already.
+    const settle = React.useCallback(() => {
+        const s = stateRef.current;
+        const held = s.pointerIn || s.focusIn;
+        if (held !== s.held) {
+            s.held = held;
+            clearTimeout(s.timer);
+            const { open, openDelay, closeDelay } = latestRef.current;
+            s.opening = held && !open;
+            if (held !== open) {
+                s.timer = setTimeout(() => {
+                    s.opening = false;
+                    if (latestRef.current.open !== held)
+                        ask(held);
+                    else
+                        listenForEscape();
+                }, held ? openDelay : closeDelay);
+            }
+        }
+        listenForEscape();
+    }, [listenForEscape, ask]);
+    // While a tap holds the floating element open, a press outside the trigger
+    // and the floating element closes it. Set up again each time it opens or
+    // closes.
+    const listenForPress = React.useCallback(() => {
+        const s = stateRef.current;
+        s.stopPress?.();
+        s.stopPress = undefined;
+        const doc = latestRef.current.open ? s.tappedIn : undefined;
+        if (!doc)
+            return;
+        const handlePointerDown = (event) => {
+            // Inside is a press React brought to the holder, which covers content
+            // the floating element portals elsewhere, or one whose path runs
+            // through the trigger or the floating element, which covers a press
+            // that something inside stopped before React got it to the holder.
+            const { triggerRef, floatingRef } = latestRef.current;
+            if (event === s.pressedInside ||
+                isEventInside(event, triggerRef.current) ||
+                isEventInside(event, floatingRef.current)) {
+                return;
+            }
+            latestRef.current.onOpenChange(false);
+        };
+        doc.addEventListener('pointerdown', handlePointerDown);
+        s.stopPress = () => doc.removeEventListener('pointerdown', handlePointerDown);
+    }, []);
+    useClientLayoutEffect(() => {
+        latestRef.current = options;
+        // The commit after an ask to open answers it, open or still closed. A
+        // tap that asked and still finds it closed was turned down.
+        const s = stateRef.current;
+        if (s.asked) {
+            s.asked = false;
+            if (!options.open)
+                s.tappedIn = undefined;
+            listenForEscape();
+        }
+    });
+    useClientLayoutEffect(() => {
+        const s = stateRef.current;
+        return () => {
+            clearTimeout(s.timer);
+            clearTimeout(s.askTimer);
+            s.opening = false;
+            s.asked = false;
+            s.releaseEscape?.();
+            s.releaseEscape = undefined;
+            s.stopPress?.();
+            s.stopPress = undefined;
+        };
+    }, []);
+    const { open } = options;
+    // Before paint, so a pointer or a key arriving next finds this settled.
+    useClientLayoutEffect(() => {
+        const s = stateRef.current;
+        if (!open) {
+            // The floating element left from under the pointer, if it was there,
+            // and no leave event says so. Focus resting on the trigger has done
+            // its job too, so neither opens it again until it comes back.
+            s.pointerIn = false;
+            s.focusIn = false;
+            s.tappedIn = undefined;
+            if (s.focusInFloating) {
+                s.focusInFloating = false;
+                const trigger = latestRef.current.triggerRef.current;
+                // Focus that went down with the floating element sits on <body>.
+                // Focus somewhere else was put there by the same update, so it stays.
+                if (trigger &&
+                    trigger.ownerDocument.activeElement === trigger.ownerDocument.body) {
+                    s.restoring = true;
+                    trigger.focus();
+                    s.restoring = false;
+                }
+            }
+        }
+        settle();
+        listenForPress();
+    }, [open, settle, listenForPress]);
+    return React.useMemo(() => {
+        const inTrigger = (node) => within(latestRef.current.triggerRef.current, node);
+        return {
+            onPointerEnter: event => {
+                if (event.pointerType === 'touch')
+                    return;
+                stateRef.current.pointerIn = true;
+                settle();
+            },
+            onPointerLeave: event => {
+                // A touch pointer never set pointerIn, so its leave has nothing to
+                // clear, and on a device with a mouse too it would close a card the
+                // mouse is still holding open.
+                if (event.pointerType === 'touch')
+                    return;
+                stateRef.current.pointerIn = false;
+                settle();
+            },
+            onFocus: event => {
+                const s = stateRef.current;
+                // React brings focus here from the trigger and from the floating
+                // element's whole tree, portals included, so focus not in the
+                // trigger is in the floating element, wherever its DOM is.
+                s.focusInFloating = !inTrigger(event.target);
+                if (s.restoring)
+                    return;
+                // Any focus in the floating element holds it. On the trigger, only
+                // keyboard focus does, so a click there opens nothing.
+                s.focusIn = s.focusInFloating || isKeyboardFocus(event.target);
+                settle();
+            },
+            onBlur: event => {
+                const s = stateRef.current;
+                const next = event.relatedTarget;
+                // Where focus goes next, as far as the DOM can say. Focus going into
+                // content the floating element portals elsewhere reads as leaving,
+                // and the focus event that follows straight after brings it back.
+                s.focusInFloating = within(latestRef.current.floatingRef.current, next);
+                // Moving between the trigger and the floating element isn't leaving.
+                if (s.focusInFloating || within(event.currentTarget, next))
+                    return;
+                s.focusIn = false;
+                settle();
+            },
+            onPointerDown: event => {
+                stateRef.current.pressedInside = event.nativeEvent;
+            },
+            onPointerUp: event => {
+                const now = latestRef.current;
+                // With openOnTap, a tap on the trigger opens it at once, and the
+                // next one closes it. A tap anywhere else does nothing here.
+                if (!now.openOnTap ||
+                    event.pointerType !== 'touch' ||
+                    !inTrigger(event.target)) {
+                    return;
+                }
+                stateRef.current.tappedIn = now.open
+                    ? undefined
+                    : event.target.ownerDocument;
+                ask(!now.open);
+            },
+        };
+    }, [settle, ask]);
+}
+
+/** Runs the caller's handler on the wrapper, then the hover card's. */
+function chain(own, ours) {
+    return event => {
+        own?.(event);
+        ours(event);
+    };
+}
+/**
+ * The `HoverCard` component shows a card previewing what's behind a link or a button while the pointer rests on it or keyboard focus is on it.
+ *
+ * Nothing moves focus when the card opens, and nothing traps it. In place,
+ * the card comes right after the trigger, so Tab goes from the trigger into
+ * its links and tabbing past them closes it. The pointer can move onto the
+ * card, Escape closes it from anywhere, and by default touch doesn't open it,
+ * so tapping the trigger just does what the trigger does. `openOnTap` opens
+ * it with a tap, for a trigger with no tap action of its own. For hints with nothing to
+ * click use `Tooltip`, and for content opened on purpose, such as a form,
+ * use `Popover`.
+ *
+ * @function
+ * @param {HoverCardProps} props - Props for the HoverCard component.
+ * @returns {JSX.Element} The trigger in its wrapper, and the card while open.
+ *
+ * @example
+ * <HoverCard trigger={<a href="/people/ada">Ada Lovelace</a>}>
+ *   <Title as="p" size="6">Ada Lovelace</Title>
+ *   <SubTitle as="p" size="6">Analytical Engine team</SubTitle>
+ * </HoverCard>
+ */
+const HoverCard = ({ trigger, children, open: controlledOpen, defaultOpen = false, onOpenChange, openDelay = 600, closeDelay = 300, position = 'bottom-left', appendToBody = false, openOnTap = false, className, contentClassName, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const { onPointerEnter, onPointerLeave, onPointerDown, onPointerUp, onFocus, onBlur, ...attrs } = rest;
+    const rootRef = React.useRef(null);
+    const cardRef = React.useRef(null);
+    const cardId = `${React.useId()}-card`;
+    const isControlled = controlledOpen !== undefined;
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const isOpen = controlledOpen ?? internalOpen;
+    const requestOpen = React.useCallback((next) => {
+        onOpenChange?.(next);
+        if (!isControlled)
+            setInternalOpen(next);
+    }, [isControlled, onOpenChange]);
+    // A portaled card has no server markup, so it only exists from the commit
+    // after hydration, and nothing measures it before then.
+    const hydrated = useIsHydrated();
+    const cardMounted = isOpen && (hydrated || !appendToBody);
+    const resolved = useAnchoredPosition(rootRef, cardRef, {
+        active: cardMounted,
+        position,
+        fixed: appendToBody,
+        // The gap comes from `--bulma-hover-card-offset` in the stylesheet, so
+        // the coordinates leave it out and `auto` reads it off the card.
+        offset: 0,
+        styledGap: marginGap,
+    });
+    // The trigger renders first inside the wrapper. Read when needed rather
+    // than held, so a trigger that remounted is still the one found.
+    const triggerRef = React.useMemo(() => ({
+        get current() {
+            const first = rootRef.current.firstElementChild;
+            return first && first !== cardRef.current
+                ? first
+                : null;
+        },
+    }), []);
+    const hover = useHoverOpen({
+        open: isOpen,
+        onOpenChange: requestOpen,
+        openDelay,
+        closeDelay,
+        triggerRef,
+        floatingRef: cardRef,
+        openOnTap,
+    });
+    // A trigger that can't take focus leaves keyboard users no way to open the
+    // card. It has to be the trigger element itself, not something inside it,
+    // since focus comes back to it and its ARIA is on it. Judged by what the
+    // element is rather than by its styles, which can hide it for now. After
+    // every commit, since the trigger can change, and only in development.
+    React.useEffect(() => {
+        if (!isDev())
+            return;
+        const triggerNode = triggerRef.current;
+        if (!triggerNode)
+            return;
+        if (!triggerNode.matches(':disabled') && isTabbableKind(triggerNode)) {
+            return;
+        }
+        warnOnce('HoverCard:unfocusable-trigger', "[bestax-bulma] <HoverCard> has a trigger that can't take focus, so " +
+            "keyboard users can't open the card. Use a link or a button as the " +
+            'trigger, or give it tabIndex={0}.');
+    });
+    // Expanded only while the card is on the page, so a portaled card that
+    // waits for hydration isn't announced before it exists.
+    const clonedTrigger = React.cloneElement(trigger, {
+        'aria-expanded': cardMounted,
+        'aria-controls': cardMounted ? cardId : undefined,
+    });
+    const rootClasses = classNames(usePrefixedClassNames('hover-card', { 'is-active': cardMounted }), bulmaHelperClasses, className);
+    const cardClasses = classNames(usePrefixedClassNames('hover-card-content', {
+        [`is-${resolved.position}`]: true,
+        'is-portal': appendToBody,
+    }), contentClassName);
+    return (jsxRuntime.jsxs("span", { className: rootClasses, ...attrs, onPointerEnter: chain(onPointerEnter, hover.onPointerEnter), onPointerLeave: chain(onPointerLeave, hover.onPointerLeave), onFocus: chain(onFocus, hover.onFocus), onBlur: chain(onBlur, hover.onBlur), onPointerDown: chain(onPointerDown, hover.onPointerDown), onPointerUp: chain(onPointerUp, hover.onPointerUp), ref: rootRef, children: [clonedTrigger, isOpen && (jsxRuntime.jsx(Portal, { disabled: !appendToBody, children: jsxRuntime.jsx("div", { ref: cardRef, id: cardId, className: cardClasses, style: appendToBody
+                        ? {
+                            position: 'fixed',
+                            top: resolved.top,
+                            left: resolved.left,
+                        }
+                        : undefined, children: children }) }))] }));
+};
+
 /**
  * Individual Step component for use inside Steps.
  *
@@ -9069,10 +9571,14 @@ const FieldLabelIdContext = React.createContext(undefined);
  * The id a labeled Field wants its single composed control to adopt (#495).
  * `undefined` outside a Field, in unlabeled/grouped/addons Fields, or when the
  * user took over the association with an explicit `labelProps.htmlFor`.
- * Consumed by the single-control bases (InputBase, SelectBase, TextAreaBase,
- * and the date and time picker bases unless inline, #968) and, through
- * `useAutoLabelId`, by the convenience inputs that render an input of their
- * own (#939). Internal; not part of the public API.
+ * Consumed through `useFieldLabelTarget` by the single-control bases
+ * (InputBase, SelectBase, TextAreaBase, and the date and time picker bases
+ * unless inline, #968) and, through `useAutoLabelId`, by the convenience
+ * inputs that render an input of their own (#939). Read it only through
+ * those, which report what they take: a control that read it directly would
+ * report nothing and lose its label (#1004), and
+ * `__tests__/field-label-readers.test.ts` fails on one. Internal; not part of
+ * the public API.
  */
 const useFieldLabelId = () => React.useContext(FieldLabelIdContext);
 /** Provider for the Field label-target id — used internally by Field. */
@@ -9098,15 +9604,54 @@ const FieldLabelForContext = React.createContext({});
  * the outer label names it, and point at that label by its id, as a range
  * Slider's thumbs (#981) and Autocomplete's suggestion list (#998) do. The
  * `htmlFor` is only ever compared with a control's own id, never adopted, so
- * it hands out no id for a control. The `id` is set only while that label
- * renders with it. Unlike {@link useFieldLabelId}, it is set in a `grouped`
- * or `hasAddons` Field too, so a label wired by hand names the control its
- * `for` picks in those rows as well. Consumed through `useAutoLabelId`.
+ * it hands out no id for a control. It keeps the generated id after the
+ * label drops a `for` nothing took (#1004), which no control's id matches
+ * then, so the value does not change under the content that reported it.
+ * The `id` is set only while that label renders with it. Unlike
+ * {@link useFieldLabelId}, it is set in a `grouped` or `hasAddons` Field
+ * too, so a label wired by hand names the control its `for` picks in those
+ * rows as well. Consumed through `useAutoLabelId`.
  * Internal; not part of the public API.
  */
 const useFieldLabelFor = () => React.useContext(FieldLabelForContext);
 /** Provider for the Field label's `htmlFor` target and id, used internally by Field. */
 const FieldLabelForProvider = FieldLabelForContext.Provider;
+const FieldLabelForReportContext = React.createContext(undefined);
+/**
+ * Tells the nearest labeled Field that this content took its generated id
+ * while `takesFor` is true (#1004). Once the Field's content has mounted, its
+ * label keeps the generated `for` only while something has said so, so the
+ * label renders none over a group, a `Checkbox`, `Radio` or `Switch`, an
+ * inner `Field`, an input with an `id` of its own, markup of your own, or
+ * nothing at all. Anything that puts the id from {@link useFieldLabelId} on
+ * an element has to say so, or the label drops the `for` that names it, and
+ * content that takes no id has nothing to do. Set under the same conditions
+ * as {@link useFieldLabelId}, so a label wired by hand and a `grouped` or
+ * `hasAddons` Field hear nothing. It reports from a layout effect, which a
+ * server never runs and a hydrating client runs only after its first render,
+ * so that render writes the `for` the way the server did.
+ * Internal; not part of the public API.
+ */
+const useReportFieldLabelFor = (takesFor) => {
+    const report = React.useContext(FieldLabelForReportContext);
+    useClientLayoutEffect(() => (takesFor ? report?.() : undefined), [report, takesFor]);
+};
+/** Provider for the labeled Field's report function, used internally by Field. */
+const FieldLabelForReportProvider = FieldLabelForReportContext.Provider;
+/**
+ * The id a control with one input of its own renders with: the caller's
+ * `id` when one arrived, otherwise the one a labeled Field offers (#495),
+ * unless it has no input to put it on (`hasInput: false`, as in an `inline`
+ * picker). It also tells that Field when it took the Field's id, through
+ * {@link useReportFieldLabelFor}, so the label keeps its `for` (#1004). Used
+ * by the single-control bases. Internal; not part of the public API.
+ */
+const useFieldLabelTarget = (id, hasInput = true) => {
+    const fieldLabelId = useFieldLabelId();
+    const target = id ?? (hasInput ? fieldLabelId : undefined);
+    useReportFieldLabelFor(fieldLabelId !== undefined && target === fieldLabelId);
+    return target;
+};
 const RadiosContext = React.createContext(undefined);
 const CheckboxesContext = React.createContext(undefined);
 /**
@@ -9438,13 +9983,43 @@ const FieldComponent = ({ horizontal, grouped, hasAddons, narrow, label, labelSi
     const labelForTarget = userWiredLabel ? labelProps.htmlFor : targetId;
     const ownLabelFor = React.useMemo(() => ({ htmlFor: labelForTarget, id: labelId }), [labelForTarget, labelId]);
     const labelFor = label ? ownLabelFor : inheritedLabelFor;
+    // Whether the label keeps its generated `for` (#1004). Content that takes
+    // the Field's id says so from a layout effect, and this Field's own layout
+    // effect runs after its content's in the same commit, so by then every
+    // report has landed. Until it runs, on the server and in the first render
+    // while hydrating, the label writes the `for` as it always has. From then
+    // on it keeps the `for` only while some content holds the id, and content
+    // that mounts or changes later reports when it does. Counted in a ref, and
+    // state is set only once settled, so content that takes the id renders
+    // the Field just once.
+    const takersRef = React.useRef(0);
+    const settledRef = React.useRef(false);
+    const [forTaken, setForTaken] = React.useState(true);
+    const settle = React.useCallback(() => {
+        if (settledRef.current)
+            setForTaken(takersRef.current > 0);
+    }, []);
+    const reportLabelFor = React.useCallback(() => {
+        takersRef.current += 1;
+        settle();
+        return () => {
+            takersRef.current -= 1;
+            settle();
+        };
+    }, [settle]);
+    useClientLayoutEffect(() => {
+        settledRef.current = true;
+        if (targetId)
+            settle();
+    }, [targetId, settle]);
+    const renderedTargetId = forTaken ? targetId : undefined;
     let renderedLabel = null;
     if (label) {
         if (horizontal) {
-            renderedLabel = (jsxRuntime.jsx(FieldLabel, { size: effectiveLabelSize, children: jsxRuntime.jsx("label", { htmlFor: targetId, ...labelProps, id: labelId, className: classNames(labelClass, labelProps?.className), style: labelProps?.style, children: label }) }));
+            renderedLabel = (jsxRuntime.jsx(FieldLabel, { size: effectiveLabelSize, children: jsxRuntime.jsx("label", { htmlFor: renderedTargetId, ...labelProps, id: labelId, className: classNames(labelClass, labelProps?.className), style: labelProps?.style, children: label }) }));
         }
         else {
-            renderedLabel = (jsxRuntime.jsx("label", { htmlFor: targetId, ...labelProps, id: labelId, className: classNames(labelClass, labelProps?.className), style: { display: 'block', ...(labelProps?.style || {}) }, children: label }));
+            renderedLabel = (jsxRuntime.jsx("label", { htmlFor: renderedTargetId, ...labelProps, id: labelId, className: classNames(labelClass, labelProps?.className), style: { display: 'block', ...(labelProps?.style || {}) }, children: label }));
         }
     }
     // If horizontal, wrap children in FieldBody (unless the user already provided
@@ -9467,7 +10042,7 @@ const FieldComponent = ({ horizontal, grouped, hasAddons, narrow, label, labelSi
             content = jsxRuntime.jsx(FieldBody, { children: children });
         }
     }
-    return (jsxRuntime.jsx(FieldProvider, { value: true, children: jsxRuntime.jsx(FieldLabelIdProvider, { value: targetId, children: jsxRuntime.jsx(FieldLabelElementIdProvider, { value: targetId ? labelId : undefined, children: jsxRuntime.jsx(FieldLabelForProvider, { value: labelFor, children: jsxRuntime.jsxs("div", { className: fieldClass, ...rest, children: [renderedLabel, content] }) }) }) }) }));
+    return (jsxRuntime.jsx(FieldProvider, { value: true, children: jsxRuntime.jsx(FieldLabelIdProvider, { value: targetId, children: jsxRuntime.jsx(FieldLabelElementIdProvider, { value: targetId ? labelId : undefined, children: jsxRuntime.jsx(FieldLabelForProvider, { value: labelFor, children: jsxRuntime.jsx(FieldLabelForReportProvider, { value: targetId ? reportLabelFor : undefined, children: jsxRuntime.jsxs("div", { className: fieldClass, ...rest, children: [renderedLabel, content] }) }) }) }) }) }));
 };
 FieldLabel.displayName = 'FieldLabel';
 FieldBody.displayName = 'FieldBody';
@@ -9485,8 +10060,10 @@ const Field = withSubComponents(FieldComponent, {
  * generation entirely: the user has taken over the association (#495 presence
  * semantics). When the control renders no label of its own, it adopts the id
  * a labeled Field around it offers, the way the bases do, so that Field's
- * label names it (#939); a user `id` still wins there. With `needsLabelId`
- * it also returns the id of whichever label names the control (#981).
+ * label names it (#939); a user `id` still wins there. It tells that Field
+ * when the control took its id, since the Field's label drops a `for`
+ * nothing took (#1004). With `needsLabelId` it also returns the id of
+ * whichever label names the control (#981).
  * Internal; not part of the public API.
  */
 function useAutoLabelId({ label, id, labelProps, rendersLabel, hasInput = true, needsLabelId = false, }) {
@@ -9507,6 +10084,9 @@ function useAutoLabelId({ label, id, labelProps, rendersLabel, hasInput = true,
     const userWired = !!labelProps && 'htmlFor' in labelProps;
     const adopted = !active && hasInput ? fieldLabelId : undefined;
     const controlId = id ?? (active && !userWired ? generatedId : adopted);
+    // Tells a labeled Field around the control when its label's `for` names
+    // the control, since it drops a `for` nothing took (#1004).
+    useReportFieldLabelFor(fieldLabelId !== undefined && controlId === fieldLabelId);
     const ownLabelProps = { htmlFor: controlId, ...labelProps };
     const labelTarget = active ? ownLabelProps.htmlFor : fieldLabelFor.htmlFor;
     const labelled = !!controlId && labelTarget === controlId;
@@ -11569,7 +12149,9 @@ const InputBase = React.forwardRef(({ color, size, isRounded, isStatic, isHovere
         color,
         ...props,
     });
-    const fieldLabelId = useFieldLabelId();
+    // A labeled Field's generated id when no user id arrived (rest.id may be
+    // an undefined own key), reported to that Field (#1004).
+    const id = useFieldLabelTarget(rest.id);
     const mainClass = usePrefixedClassNames('input', {
         [`is-${color}`]: !!color,
         [`is-${size}`]: !!size,
@@ -11581,9 +12163,8 @@ const InputBase = React.forwardRef(({ color, size, isRounded, isStatic, isHovere
     });
     const inputClass = classNames(mainClass, bulmaHelperClasses, className);
     return (jsxRuntime.jsx("input", { ref: ref, className: inputClass, disabled: disabled, readOnly: readOnly, ...rest, 
-        // After the spread: a labeled Field's generated id is adopted only
-        // when no user id arrived (rest.id may be an undefined own key).
-        id: rest.id ?? fieldLabelId }));
+        // After the spread, which may carry an undefined id key.
+        id: id }));
 });
 InputBase.displayName = 'InputBase';
 
@@ -11600,7 +12181,9 @@ const SelectBase = React.forwardRef(({ color, size, isRounded, isLoading, isActi
         color,
         ...props,
     });
-    const fieldLabelId = useFieldLabelId();
+    // A labeled Field's generated id when no user id arrived (rest.id may be
+    // an undefined own key), reported to that Field (#1004).
+    const id = useFieldLabelTarget(rest.id);
     const mainClass = usePrefixedClassNames('select', {
         [`is-${color}`]: !!color,
         [`is-${size}`]: !!size,
@@ -11626,9 +12209,9 @@ const SelectBase = React.forwardRef(({ color, size, isRounded, isLoading, isActi
         selectProps.size = multipleSize;
     }
     return (jsxRuntime.jsx("div", { className: selectClass, children: jsxRuntime.jsx("select", { ref: ref, className: innerSelectClass || undefined, ...selectProps, 
-            // After the spread: a labeled Field's generated id is adopted only
-            // when no user id arrived; the id belongs on the inner <select>.
-            id: selectProps.id ?? fieldLabelId, children: children }) }));
+            // After the spread, which may carry an undefined id key; the id
+            // belongs on the inner <select>.
+            id: id, children: children }) }));
 });
 SelectBase.displayName = 'SelectBase';
 
@@ -11645,7 +12228,9 @@ const TextAreaBase = React.forwardRef(({ color, size, isRounded, isStatic, isHov
         color,
         ...props,
     });
-    const fieldLabelId = useFieldLabelId();
+    // A labeled Field's generated id when no user id arrived (rest.id may be
+    // an undefined own key), reported to that Field (#1004).
+    const id = useFieldLabelTarget(rest.id);
     // Note: `is-loading` is intentionally NOT applied to the <textarea> itself —
     // Bulma documents `<div class="control is-loading">` as the loading pattern
     // for textareas, not `<textarea class="textarea is-loading">`. The convenience
@@ -11662,9 +12247,8 @@ const TextAreaBase = React.forwardRef(({ color, size, isRounded, isStatic, isHov
     });
     const textareaClass = classNames(mainClass, bulmaHelperClasses, className);
     return (jsxRuntime.jsx("textarea", { ref: ref, className: textareaClass, disabled: disabled, readOnly: readOnly, rows: rows, ...rest, 
-        // After the spread: a labeled Field's generated id is adopted only
-        // when no user id arrived (rest.id may be an undefined own key).
-        id: rest.id ?? fieldLabelId }));
+        // After the spread, which may carry an undefined id key.
+        id: id }));
 });
 TextAreaBase.displayName = 'TextAreaBase';
 
@@ -14159,8 +14743,7 @@ const DateInputBase = React.forwardRef((props, ref) => {
     // when the caller set none, as InputBase does, and the popover's ids
     // follow it. Inline there is no input to name, so nothing takes the
     // Field's id or builds on it.
-    const fieldLabelId = useFieldLabelId();
-    const id = idProp ?? (inline ? undefined : fieldLabelId);
+    const id = useFieldLabelTarget(idProp, !inline);
     // The launcher gives way to the loading spinner of a Control this sits in.
     const controlLoading = useControlLoading();
     const triggerIcon = triggerIconProp ?? !controlLoading;
@@ -15341,8 +15924,7 @@ const TimeInputBase = React.forwardRef((props, ref) => {
     // when the caller set none, as InputBase does, and the popover's ids
     // follow it. Inline there is no input to name, so nothing takes the
     // Field's id or builds on it.
-    const fieldLabelId = useFieldLabelId();
-    const id = idProp ?? (inline ? undefined : fieldLabelId);
+    const id = useFieldLabelTarget(idProp, !inline);
     // The launcher gives way to the loading spinner of a Control this sits in.
     const controlLoading = useControlLoading();
     const triggerIcon = triggerIconProp ?? !controlLoading;
@@ -15659,8 +16241,7 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
     // when the caller set none, as InputBase does, and the popover's ids
     // follow it. Inline there is no input to name, so nothing takes the
     // Field's id or builds on it.
-    const fieldLabelId = useFieldLabelId();
-    const id = idProp ?? (inline ? undefined : fieldLabelId);
+    const id = useFieldLabelTarget(idProp, !inline);
     // The launcher gives way to the loading spinner of a Control this sits in.
     const controlLoading = useControlLoading();
     const triggerIcon = triggerIconProp ?? !controlLoading;
@@ -16444,8 +17025,15 @@ const GridComponent = ({ isFixed = false, gap, columnGap, rowGap, minCol, fixedC
 };
 const Grid = withSubComponents(GridComponent, { Cell }, 'Grid');
 
-// --- FULL Bulma v1 CSS variable keys (auto-generated from CSSVAR_KEYS) ---
-const bulmaCssVars = [
+// --- Bulma v1 CSS variables Theme sets (originally generated from
+// CSSVAR_KEYS), in two lists by where Bulma declares them ---
+/**
+ * Variables a value set on an ancestor reaches. Bulma declares them on
+ * `:root` (or a theme scope), or on no component in its plain state, so the
+ * value Theme writes on its wrapper or at `:root` is the one the components
+ * under it use.
+ */
+const bulmaGlobalVars = [
     // scheme
     '--bulma-scheme-h',
     '--bulma-scheme-s',
@@ -16562,6 +17150,36 @@ const bulmaCssVars = [
     '--bulma-skeleton-block-min-height',
     '--bulma-skeleton-lines-gap',
     '--bulma-skeleton-line-height',
+    // control
+    '--bulma-control-radius',
+    '--bulma-control-radius-small',
+    '--bulma-control-border-width',
+    '--bulma-control-height',
+    '--bulma-control-line-height',
+    '--bulma-control-padding-vertical',
+    '--bulma-control-padding-horizontal',
+    '--bulma-control-size',
+    '--bulma-control-focus-shadow-l',
+    // columns
+    '--bulma-column-gap',
+    // grid
+    '--bulma-grid-cell-column-start',
+];
+/**
+ * Variables Bulma declares on the component's own element, such as
+ * `--bulma-card-radius` on `.card`. An element that declares a variable uses
+ * its own value whatever its ancestors set, so a value Theme writes for one
+ * of these, on its wrapper or at `:root`, never reaches the component.
+ *
+ * They stay in `BulmaVars`, and so stay valid `bulmaVars` keys and variable
+ * props, because taking a key out would be a breaking change. Setting one
+ * warns in development instead; see `warnComponentVars`.
+ *
+ * `scripts/css-var-scopes.test.mjs` holds this split to Bulma's compiled
+ * stylesheet in both directions, so a Bulma upgrade that moves a variable
+ * fails there.
+ */
+const bulmaComponentVars = [
     // breadcrumb
     '--bulma-breadcrumb-item-color',
     '--bulma-breadcrumb-item-hover-color',
@@ -16911,16 +17529,6 @@ const bulmaCssVars = [
     '--bulma-subtitle-line-height',
     '--bulma-subtitle-strong-color',
     '--bulma-subtitle-strong-weight',
-    // control
-    '--bulma-control-radius',
-    '--bulma-control-radius-small',
-    '--bulma-control-border-width',
-    '--bulma-control-height',
-    '--bulma-control-line-height',
-    '--bulma-control-padding-vertical',
-    '--bulma-control-padding-horizontal',
-    '--bulma-control-size',
-    '--bulma-control-focus-shadow-l',
     // file
     '--bulma-file-radius',
     '--bulma-file-name-border-color',
@@ -16971,14 +17579,11 @@ const bulmaCssVars = [
     '--bulma-input-icon-hover-color',
     '--bulma-input-icon-focus-color',
     '--bulma-input-radius',
-    // columns
-    '--bulma-column-gap',
     // grid
     '--bulma-grid-gap',
     '--bulma-grid-column-count',
     '--bulma-grid-column-min',
     '--bulma-grid-cell-column-span',
-    '--bulma-grid-cell-column-start',
     // footer
     '--bulma-footer-background-color',
     '--bulma-footer-color',
@@ -17004,6 +17609,8 @@ const bulmaCssVars = [
     '--bulma-section-padding-medium',
     '--bulma-section-padding-large',
 ];
+/** Every Bulma CSS variable Theme accepts: the two lists above. */
+const bulmaCssVars = [...bulmaGlobalVars, ...bulmaComponentVars];
 /**
  * Convert a Bulma CSS variable name to a camelCase prop name.
  * @param {string} varName - CSS variable name (e.g., '--bulma-primary-h').
@@ -17122,6 +17729,44 @@ const themeColumnGapVar = (columnGap) => {
         `bulmaVars={{ '--bulma-column-gap': '${columnGap}' }} instead.`);
     return columnGap;
 };
+/**
+ * `bulmaComponentVars` as a lookup, built by `warnComponentVars` the first
+ * time it is needed.
+ */
+let componentVarKeys;
+/**
+ * Warn in development when a Theme is given variables Bulma declares on the
+ * component itself (`bulmaComponentVars`), whether through `bulmaVars` or a
+ * variable prop such as `cardRadius`. Theme writes them where they can never
+ * win, so nothing changes on the page, and saying so is the only way to find
+ * out short of reading Bulma's stylesheet.
+ *
+ * Keyed by the set of variables, so a Theme that keeps passing the same ones
+ * warns once, and a different set warns again. An empty value writes nothing,
+ * so it is not reported.
+ *
+ * All of this is development-only, so it returns before doing anything in
+ * production, and it builds its lookup on the first development call rather
+ * than when the module loads.
+ */
+const warnComponentVars = (vars) => {
+    if (!isDev()) {
+        return;
+    }
+    const keys = (componentVarKeys ?? (componentVarKeys = new Set(bulmaComponentVars)));
+    const inert = Object.entries(vars)
+        .filter(([key, value]) => value && keys.has(key))
+        .map(([key]) => key)
+        .sort();
+    if (inert.length === 0) {
+        return;
+    }
+    const one = inert.length === 1;
+    warnOnce(`Theme:component-vars:${inert.join(',')}`, `[bestax-bulma] <Theme>: Bulma declares ${inert.join(', ')} on the ` +
+        `component itself, so a value set on Theme never reaches ` +
+        `${one ? 'it' : 'them'}. Set ${one ? 'it' : 'them'} on that ` +
+        'component instead, with className or style, or through Sass.');
+};
 /** The one `<style>` element every `isRoot` Theme writes into. */
 const ROOT_STYLE_ID = 'bestax-bulma-theme-vars';
 /**
@@ -17283,6 +17928,12 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode,
         }
         return vars;
     }, [bulmaVars, bulmaVarProps, radiusVar, columnGapVar]);
+    // From an effect rather than the render body, so rendering does none of
+    // this work, and a server render none at all. In production it returns
+    // at its development check before looking at the variables.
+    React.useEffect(() => {
+        warnComponentVars(mergedVars);
+    }, [mergedVars]);
     // This Theme's place among root Themes; see `rootThemeRules`.
     const [rootOrder] = React.useState(() => nextRootOrder++);
     // The `:root` rules this Theme contributes, or '' when it contributes none.
@@ -17803,6 +18454,7 @@ exports.Hero = Hero;
 exports.HeroBody = HeroBody;
 exports.HeroFoot = HeroFoot;
 exports.HeroHead = HeroHead;
+exports.HoverCard = HoverCard;
 exports.Icon = Icon;
 exports.IconText = IconText;
 exports.Image = Image;