@allxsmith/bestax-bulma 5.27.6 → 5.27.8

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';
@@ -8131,6 +8136,7 @@ const Notification = ({ className, color, textColor, isLight, hasDelete, onDelet
     const bulmaClasses = usePrefixedClassNames('notification', {
         [`is-${color}`]: color && validColors.includes(color),
         'is-light': isLight,
+        'has-delete': hasDelete,
     });
     const deleteClasses = usePrefixedClassNames('delete');
     const notificationClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
@@ -9068,10 +9074,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. */
@@ -9079,8 +9089,9 @@ const FieldLabelIdProvider = FieldLabelIdContext.Provider;
 const FieldLabelElementIdContext = React.createContext(undefined);
 /**
  * The id of a labeled Field's own `<label>`, for a group control (Radios,
- * Checkboxes, Rate, DateRangeInput) to point `aria-labelledby` at, since a group cannot take
- * the label's `htmlFor` (#939). Set under the same conditions as
+ * Checkboxes, Rate, DateRangeInput and DateRangeInputBase) to point
+ * `aria-labelledby` at, since a group cannot take the label's `htmlFor`
+ * (#939, #1005). Set under the same conditions as
  * {@link useFieldLabelId}. Consumed through `useAutoLabelledBy`.
  * Internal; not part of the public API.
  */
@@ -9096,15 +9107,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);
 /**
@@ -9417,8 +9467,9 @@ const FieldComponent = ({ horizontal, grouped, hasAddons, narrow, label, labelSi
     const targetId = label && !userWiredLabel && !grouped && !hasAddons
         ? generatedId
         : undefined;
-    // A group control (Radios, Checkboxes, Rate, DateRangeInput) cannot take
-    // that `for`, so it points `aria-labelledby` at the label itself (#939).
+    // A group control (Radios, Checkboxes, Rate, DateRangeInput and its base)
+    // cannot take that `for`, so it points `aria-labelledby` at the label
+    // itself (#939).
     // The label gets an id whenever the association is on, unless the caller
     // gave it one.
     const labelId = labelProps?.id ?? (targetId ? `${targetId}-label` : undefined);
@@ -9435,13 +9486,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
@@ -9464,7 +9545,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';
@@ -9482,8 +9563,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, }) {
@@ -9504,6 +9587,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;
@@ -11566,7 +11652,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,
@@ -11578,9 +11666,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';
 
@@ -11597,7 +11684,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,
@@ -11623,9 +11712,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';
 
@@ -11642,7 +11731,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
@@ -11659,9 +11750,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';
 
@@ -14156,8 +14246,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;
@@ -15338,8 +15427,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;
@@ -15656,8 +15744,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;
@@ -16016,6 +16103,11 @@ const today = () => startOfDay(new Date());
 /**
  * Raw DateRangeInput: the two inputs and the popover calendar without
  * Field/Control wrapping. Use `DateRangeInput` for the convenience wrapper.
+ * Composed in a labeled `Field`, its `role="group"` root points
+ * `aria-labelledby` at that `Field`'s label, `inline` too, as the wrapper's
+ * does, and each input keeps its own name. An `aria-label` or
+ * `aria-labelledby` you give it wins over the label, and an `aria-labelledby`
+ * key counts even when undefined, since it is spread over the group's own.
  *
  * @function
  * @param {DateRangeInputBaseProps} props
@@ -16056,6 +16148,15 @@ const DateRangeInputBase = React.forwardRef((props, ref) => {
     const reactId = React.useId();
     const popoverId = id ? `${id}-popover` : `picker-${reactId}`;
     const { bulmaHelperClasses, rest: cleanRest } = useBulmaClasses(rest);
+    // Two inputs can't share a labeled Field's `for`, so inside one the group
+    // points `aria-labelledby` at that Field's label, as `DateRangeInput`
+    // does, in every mode. A name the caller gave the group wins, and so does
+    // the `aria-labelledby` that wrapper always passes, so it decides there.
+    const { ariaLabelledBy } = useAutoLabelledBy({
+        label: undefined,
+        rendersLabel: false,
+        callerProps: rest,
+    });
     const { shouldUseNative } = useNativeMobilePicker({
         force: mobileNative === 'auto' ? undefined : mobileNative,
     });
@@ -16244,14 +16345,14 @@ const DateRangeInputBase = React.forwardRef((props, ref) => {
         };
         const minIso = min ? isoDay(lowerBound) : undefined;
         const maxIso = max ? isoDay(max) : undefined;
-        return (jsxRuntime.jsxs("div", { ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [jsxRuntime.jsxs("div", { className: fieldClass, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "date", id: id, "aria-label": t.rangeStart, className: inputClass, value: isoDay(start), onChange: nativeChange(commitStart, isBlockedDay), min: minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required }), separator, jsxRuntime.jsx("input", { ref: endRef, type: "date", id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, className: inputClass, value: isoDay(end), onChange: nativeChange(commitEnd, isBlockedEnd), min: start ? isoDay(start) : minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required })] }), hiddenInputs] }));
+        return (jsxRuntime.jsxs("div", { "aria-labelledby": ariaLabelledBy, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [jsxRuntime.jsxs("div", { className: fieldClass, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "date", id: id, "aria-label": t.rangeStart, className: inputClass, value: isoDay(start), onChange: nativeChange(commitStart, isBlockedDay), min: minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required }), separator, jsxRuntime.jsx("input", { ref: endRef, type: "date", id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, className: inputClass, value: isoDay(end), onChange: nativeChange(commitEnd, isBlockedEnd), min: start ? isoDay(start) : minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required })] }), hiddenInputs] }));
     }
     const calendar = (jsxRuntime.jsx(Calendar, { range: range, onRangeSelect: handleRangeSelect, allowDisabledInRange: allowDisabledInRange, focusedDate: focusedDate, onFocusedDateChange: setFocusedDate, min: min, max: max, shouldDisableDate: shouldDisableDate, unselectableDates: unselectableDates, firstDayOfWeek: firstDayOfWeek, locale: locale, dayNames: dayNames, monthNames: monthNames, nearbyMonthDays: nearbyMonthDays, color: color, size: size, 
         // The popover panel takes `popoverId`, so the calendar inside it takes
         // one of its own. Inline there is no panel.
         id: inline ? popoverId : `${popoverId}-cal`, autoFocusCell: open, labels: labels }));
     if (inline) {
-        return (jsxRuntime.jsxs("div", { ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [calendar, hiddenInputs] }));
+        return (jsxRuntime.jsxs("div", { "aria-labelledby": ariaLabelledBy, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [calendar, hiddenInputs] }));
     }
     const canOpen = !!popover && !disabled && !readOnly;
     const inputReadOnly = !!readOnly || !editable;
@@ -16286,7 +16387,7 @@ const DateRangeInputBase = React.forwardRef((props, ref) => {
         readOnly: inputReadOnly,
         required,
     };
-    return (jsxRuntime.jsxs("div", { ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: handleFocus, onFocusCapture: handleFocusCapture, children: [jsxRuntime.jsxs("div", { className: fieldClass, onMouseDown: handleFieldMouseDown, children: [jsxRuntime.jsx("input", { ...comboboxProps, ref: combinedRef, id: id, "aria-label": t.rangeStart, value: startText, ...startHandlers }), separator, jsxRuntime.jsx("input", { ...comboboxProps, ref: endRef, id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, value: endText, ...endHandlers })] }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, 
+    return (jsxRuntime.jsxs("div", { "aria-labelledby": ariaLabelledBy, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: handleFocus, onFocusCapture: handleFocusCapture, children: [jsxRuntime.jsxs("div", { className: fieldClass, onMouseDown: handleFieldMouseDown, children: [jsxRuntime.jsx("input", { ...comboboxProps, ref: combinedRef, id: id, "aria-label": t.rangeStart, value: startText, ...startHandlers }), separator, jsxRuntime.jsx("input", { ...comboboxProps, ref: endRef, id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, value: endText, ...endHandlers })] }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, 
                 // Disabled whenever the popover can't open, so a click can.
                 onClick: () => setOpen(!open), disabled: !canOpen, "aria-label": t.chooseDateRange, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { isOpen: open, onClose: handlePopoverClose, anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseDateRange, id: popoverId, restoreFocusRef: restoreFocusRef, initialFocusSelector: CALENDAR_FOCUSED_CELL, children: calendar })), hiddenInputs] }));
 });
@@ -16427,8 +16528,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',
@@ -16545,6 +16653,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',
@@ -16894,16 +17032,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',
@@ -16954,14 +17082,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',
@@ -16987,6 +17112,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').
@@ -17105,6 +17232,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';
 /**
@@ -17266,6 +17431,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.