@allxsmith/bestax-bulma 5.27.0 → 5.27.2

package/dist/index.cjs

@@ -2447,7 +2447,9 @@ const DropdownComponent = React.forwardRef(function DropdownComponent({ label, c
             // Closing hides the item that has focus, and the browser drops focus
             // to the page when that happens. Hand it back to the trigger, as
             // Escape does. An item that moved focus somewhere else keeps it there.
-            if (e.currentTarget.contains(getActiveElementInTree(e.currentTarget))) {
+            // The menu around this content is what a click between items focuses.
+            const menu = e.currentTarget.parentElement;
+            if (menu.contains(getActiveElementInTree(e.currentTarget))) {
                 triggerRef.current?.focus();
             }
         }
@@ -2608,7 +2610,10 @@ const DropdownComponent = React.forwardRef(function DropdownComponent({ label, c
         }
     };
     const dropdownClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsxs("div", { className: dropdownClasses, ref: setRefs, id: id, "data-testid": "dropdown-root", ...rest, children: [jsxRuntime.jsx("div", { className: usePrefixedClassNames('dropdown-trigger'), children: jsxRuntime.jsxs("button", { ref: triggerRef, className: buttonClass, "aria-haspopup": "true", "aria-controls": id ? `${id}-menu` : undefined, "aria-expanded": active, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, disabled: disabled, type: "button", children: [jsxRuntime.jsx("span", { children: label }), jsxRuntime.jsx("span", { className: usePrefixedClassNames('icon', 'is-small'), "aria-hidden": "true", children: jsxRuntime.jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('dropdown-menu'), menuClassName), id: id ? `${id}-menu` : undefined, role: "menu", "data-testid": "dropdown-menu", onKeyDown: handleMenuKeyDown, children: jsxRuntime.jsx("div", { className: usePrefixedClassNames('dropdown-content'), onClick: handleMenuClick, tabIndex: -1, children: children }) })] }));
+    return (jsxRuntime.jsxs("div", { className: dropdownClasses, ref: setRefs, id: id, "data-testid": "dropdown-root", ...rest, children: [jsxRuntime.jsx("div", { className: usePrefixedClassNames('dropdown-trigger'), children: jsxRuntime.jsxs("button", { ref: triggerRef, className: buttonClass, "aria-haspopup": "true", "aria-controls": id ? `${id}-menu` : undefined, "aria-expanded": active, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, disabled: disabled, type: "button", children: [jsxRuntime.jsx("span", { children: label }), jsxRuntime.jsx("span", { className: usePrefixedClassNames('icon', 'is-small'), "aria-hidden": "true", children: jsxRuntime.jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('dropdown-menu'), menuClassName), id: id ? `${id}-menu` : undefined, role: "menu", "data-testid": "dropdown-menu", onKeyDown: handleMenuKeyDown, 
+                // The menu, not its content, takes focus from a click between items,
+                // so the menu owns nothing focusable but its items.
+                tabIndex: -1, children: jsxRuntime.jsx("div", { className: usePrefixedClassNames('dropdown-content'), onClick: handleMenuClick, children: children }) })] }));
 });
 /**
  * The anchor's attributes, minus the one a `<button>` legitimately takes.
@@ -3910,7 +3915,7 @@ function getIconClasses(library, name, variant, features) {
  * @see {@link https://bulma.io/documentation/elements/icon/ | Bulma Icon documentation}
  */
 const Icon = ({ className, textColor, bgColor, name, library, variant, features, libraryFeatures, // Deprecated but maintained for backward compatibility
-size, ariaLabel = 'icon', style, icon, // Capture and exclude the deprecated 'icon' prop from DOM
+size, ariaLabel, style, icon, // Capture and exclude the deprecated 'icon' prop from DOM
 color: _color, // Exclude 'color' prop if passed directly
 containerClassName, children, ...restProps }) => {
     // Get the default icon library from context, fallback to 'fa' if not set
@@ -3934,10 +3939,22 @@ containerClassName, children, ...restProps }) => {
         ? containerClassName
         : defaultIconClasses;
     const iconContainerClasses = classNames(bulmaClasses, containerClassName && size ? sizeModifierClass : undefined, bulmaHelperClasses, className);
+    // A named icon is an image, whose name is its label alone, so a ligature inside
+    // never leaks into it. An unnamed one is decorative and hidden outright. Spread
+    // before `rest`, so a caller's own `role` or `aria-hidden` still wins.
+    const named = !!ariaLabel || !!restProps['aria-label'] || !!restProps['aria-labelledby'];
+    // A caller's own `role` or `tabIndex` on an unnamed icon means it isn't decoration (an
+    // icon made a button, say), so it isn't hidden either: `aria-hidden` on something
+    // focusable is a failure of its own.
+    const a11yProps = named
+        ? { role: 'img', 'aria-label': ariaLabel || undefined }
+        : restProps.role !== undefined || restProps.tabIndex !== undefined
+            ? {}
+            : { 'aria-hidden': true };
     if (children !== undefined) {
         // `IconChildrenProps`: render the caller's node (an inline SVG, a `react-icons`
         // component, …) in place of a class-based glyph. Library/variant/features don't apply.
-        return (jsxRuntime.jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: children }));
+        return (jsxRuntime.jsx("span", { className: iconContainerClasses, ...a11yProps, style: style, ...rest, children: children }));
     }
     // `name` is guaranteed once `children` is absent UNLESS the caller is on the deprecated
     // `icon` path, which `IconDeprecatedProps` declares with `name?: undefined`.
@@ -3971,7 +3988,7 @@ containerClassName, children, ...restProps }) => {
         // by a plain-JS caller (or one that casts). Building a class off an absent name produced
         // a bogus `fa-undefined` glyph; render the bare container instead, matching the
         // `children` branch.
-        return (jsxRuntime.jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest }));
+        return (jsxRuntime.jsx("span", { className: iconContainerClasses, ...a11yProps, style: style, ...rest }));
     }
     // Backward compatibility: if libraryFeatures is provided, parse it for variant and features
     let finalVariant = variant;
@@ -4034,16 +4051,16 @@ containerClassName, children, ...restProps }) => {
         else if (finalVariant === 'sharp') {
             ionName = `${finalName}-sharp`;
         }
-        return (jsxRuntime.jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: jsxRuntime.jsx("ion-icon", { name: ionName }) }));
+        return (jsxRuntime.jsx("span", { className: iconContainerClasses, ...a11yProps, style: style, ...rest, children: jsxRuntime.jsx("ion-icon", { name: ionName }) }));
     }
     // Legacy CSS-based icons
     const iClasses = getIconClasses(finalLibrary, finalName, finalVariant, finalFeatures);
     // Material Icons and Material Symbols use text content, not CSS classes for the icon name
     if (finalLibrary === 'material-icons' ||
         finalLibrary === 'material-symbols') {
-        return (jsxRuntime.jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: jsxRuntime.jsx("i", { className: iClasses, children: finalName }) }));
+        return (jsxRuntime.jsx("span", { className: iconContainerClasses, ...a11yProps, style: style, ...rest, children: jsxRuntime.jsx("i", { className: iClasses, children: finalName }) }));
     }
-    return (jsxRuntime.jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: jsxRuntime.jsx("i", { className: iClasses }) }));
+    return (jsxRuntime.jsx("span", { className: iconContainerClasses, ...a11yProps, style: style, ...rest, children: jsxRuntime.jsx("i", { className: iClasses }) }));
 };
 
 /**
@@ -9051,12 +9068,36 @@ 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 only by the single-control bases (InputBase, SelectBase,
- * TextAreaBase). Internal; not part of the public API.
+ * Consumed by the single-control bases (InputBase, SelectBase, TextAreaBase)
+ * and, through `useAutoLabelId`, by the convenience inputs that render an
+ * input of their own (#939). Internal; not part of the public API.
  */
 const useFieldLabelId = () => React.useContext(FieldLabelIdContext);
 /** Provider for the Field label-target id — used internally by Field. */
 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
+ * {@link useFieldLabelId}. Consumed through `useAutoLabelledBy`.
+ * Internal; not part of the public API.
+ */
+const useFieldLabelElementId = () => React.useContext(FieldLabelElementIdContext);
+/** Provider for the Field label's own id, used internally by Field. */
+const FieldLabelElementIdProvider = FieldLabelElementIdContext.Provider;
+const FieldLabelForContext = React.createContext(undefined);
+/**
+ * What the nearest labeled Field's `<label>` points `htmlFor` at: the id it
+ * generated, or the caller's own `labelProps.htmlFor`. An unlabeled Field
+ * passes it through, so a control in the inner Field of a horizontal layout
+ * can tell the outer label names it. Only ever compared with a control's own
+ * id, never adopted, so it hands out no id. Internal; not part of the public
+ * API.
+ */
+const useFieldLabelFor = () => React.useContext(FieldLabelForContext);
+/** Provider for the Field label's `htmlFor` target, used internally by Field. */
+const FieldLabelForProvider = FieldLabelForContext.Provider;
 const RadiosContext = React.createContext(undefined);
 const CheckboxesContext = React.createContext(undefined);
 /**
@@ -9357,13 +9398,27 @@ 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).
+    // The label gets an id whenever the association is on, unless the caller
+    // gave it one.
+    const labelId = labelProps?.id ?? (targetId ? `${targetId}-label` : undefined);
+    // What the rendered label's `for` points at, generated or the caller's, so
+    // a control can tell when a label wired by hand names it. An unlabeled
+    // Field passes on its parent's.
+    const inheritedLabelFor = useFieldLabelFor();
+    const labelFor = label
+        ? userWiredLabel
+            ? labelProps.htmlFor
+            : targetId
+        : inheritedLabelFor;
     let renderedLabel = null;
     if (label) {
         if (horizontal) {
-            renderedLabel = (jsxRuntime.jsx(FieldLabel, { size: effectiveLabelSize, children: jsxRuntime.jsx("label", { htmlFor: targetId, ...labelProps, className: classNames(labelClass, labelProps?.className), style: labelProps?.style, children: label }) }));
+            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 }) }));
         }
         else {
-            renderedLabel = (jsxRuntime.jsx("label", { htmlFor: targetId, ...labelProps, className: classNames(labelClass, labelProps?.className), style: { display: 'block', ...(labelProps?.style || {}) }, children: label }));
+            renderedLabel = (jsxRuntime.jsx("label", { htmlFor: targetId, ...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
@@ -9386,7 +9441,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.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.jsxs("div", { className: fieldClass, ...rest, children: [renderedLabel, content] }) }) }) }) }));
 };
 FieldLabel.displayName = 'FieldLabel';
 FieldBody.displayName = 'FieldBody';
@@ -9402,27 +9457,42 @@ const Field = withSubComponents(FieldComponent, {
  * A user-supplied `id` is used as the target instead of the generated one, and
  * an explicit `htmlFor` key in labelProps — even set to `undefined` — disables
  * generation entirely: the user has taken over the association (#495 presence
- * semantics). Internal; not part of the public API.
+ * 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.
+ * Internal; not part of the public API.
  */
-function useAutoLabelId({ label, id, labelProps, rendersLabel, }) {
+function useAutoLabelId({ label, id, labelProps, rendersLabel, hasInput = true, }) {
     // Called unconditionally per the rules of hooks; SSR-safe on React 18 and 19.
     const generatedId = React.useId();
+    // Read outside the control's own Field, so it is set only when an outer
+    // Field holds the control, which then renders no label of its own.
+    const fieldLabelId = useFieldLabelId();
+    // What an outer Field's label points at, even when wired by hand.
+    const fieldLabelFor = useFieldLabelFor();
     // Truthiness mirrors Field's own `if (label)` render gate.
     const active = !!label && rendersLabel;
     // Presence, not truthiness: `htmlFor: undefined` is an explicit opt-out and
     // must not leave an orphan generated id on the control.
     const userWired = !!labelProps && 'htmlFor' in labelProps;
-    const controlId = id ?? (active && !userWired ? generatedId : undefined);
+    const adopted = !active && hasInput ? fieldLabelId : undefined;
+    const controlId = id ?? (active && !userWired ? generatedId : adopted);
+    const ownLabelProps = { htmlFor: controlId, ...labelProps };
     // Inactive with a label still means an own Field may render it (pickers'
     // inline mode, Taginput at maxTags) — the explicit `htmlFor: undefined`
     // tells Field the association is owned here, so it must not generate one
     // that would dangle (#495 presence semantics).
     const fieldLabelProps = active
-        ? { htmlFor: controlId, ...labelProps }
+        ? ownLabelProps
         : label
             ? { htmlFor: undefined, ...labelProps }
             : labelProps;
-    return { controlId, fieldLabelProps };
+    const labelTarget = active ? ownLabelProps.htmlFor : fieldLabelFor;
+    return {
+        controlId,
+        fieldLabelProps,
+        labelled: !!controlId && labelTarget === controlId,
+    };
 }
 /**
  * Group-input counterpart of {@link useAutoLabelId} (#494): a group of
@@ -9431,18 +9501,36 @@ function useAutoLabelId({ label, id, labelProps, rendersLabel, }) {
  * `aria-labelledby`. A user-supplied `labelProps.id` is used as the target
  * instead of generating one. Any caller `htmlFor` is stripped — a group label
  * names the group, never a single control — so the merged labelProps always
- * carry an explicit `htmlFor: undefined`.
+ * carry an explicit `htmlFor: undefined`. When the group renders no label of
+ * its own, it points at the label of a labeled Field around it instead
+ * (#939). A caller who named the group with `aria-label` or
+ * `aria-labelledby` gets no `aria-labelledby` from either label, so their
+ * name wins wherever the label sits.
  * Internal; not part of the public API.
  */
-function useAutoLabelledBy({ label, labelProps, rendersLabel, }) {
+function useAutoLabelledBy({ label, labelProps, rendersLabel, callerProps, }) {
     // Called unconditionally per the rules of hooks; SSR-safe on React 18 and 19.
     const generatedId = React.useId();
+    // Set only when an outer Field holds the group (see useAutoLabelId).
+    const fieldLabelElementId = useFieldLabelElementId();
     const active = !!label && rendersLabel;
     const labelId = labelProps?.id ?? (active ? generatedId : undefined);
     const fieldLabelProps = active
         ? { ...labelProps, id: labelId, htmlFor: undefined }
         : labelProps;
-    return { ariaLabelledBy: active ? labelId : undefined, fieldLabelProps };
+    const aria = callerProps;
+    // Presence for aria-labelledby: the caller's key replaces the attribute
+    // through the spread whatever its value, and pointing it at a label would
+    // only take a Rate's fallback name away. Checked before either label, so
+    // the caller's name wins over the group's own `label` as it does over a
+    // Field's, the way an aria-label beats a `<label for>` on a single input.
+    const callerNamed = !!aria['aria-label'] || 'aria-labelledby' in aria;
+    const ariaLabelledBy = callerNamed
+        ? undefined
+        : active
+            ? labelId
+            : fieldLabelElementId;
+    return { ariaLabelledBy, fieldLabelProps };
 }
 
 /**
@@ -9485,6 +9573,7 @@ const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message
         label,
         labelProps,
         rendersLabel: ownField,
+        callerProps: props,
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
@@ -9581,9 +9670,12 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         rendersLabel: ownField,
     });
     const { classPrefix } = useConfig();
+    // The input takes `controlId`, so `id` stays out of the spread, where an
+    // undefined `id` key would wipe the id the label points at.
+    const { id: _id, ...inputProps } = props;
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
-        ...props,
+        ...inputProps,
     });
     // Mutually exclusive alignment
     let alignmentClass;
@@ -9755,6 +9847,7 @@ const RadiosComponent = ({ label, labelSize, labelProps, horizontal, message, me
         label,
         labelProps,
         rendersLabel: ownField,
+        callerProps: props,
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
@@ -10247,7 +10340,9 @@ const Slider = React.forwardRef((props, ref) => {
     // --- Single slider ---
     const sliderElement = !range ? (jsxRuntime.jsxs("div", { ref: wrapperRef, className: combinedClasses, style: wrapperStyle, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "range", min: min, max: max, step: step, value: currentSingle, disabled: disabled, onChange: handleSingleChange, onKeyDown: handleKeyDown, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), className: prefixedClassNames(classPrefix, 'slider-input'), style: {
                     '--slider-progress': `${progressSingle}%`,
-                }, "aria-valuenow": currentSingle, "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel, ...getAriaProps(currentSingle), id: controlId, ...rest }), tooltipMode !== 'hidden' && (jsxRuntime.jsx("output", { ref: outputRef, className: prefixedClassNames(classPrefix, 'slider-output', {
+                }, "aria-valuenow": currentSingle, "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel, ...getAriaProps(currentSingle), ...rest, 
+                // After the spread: an undefined `id` key in rest would wipe it.
+                id: controlId }), tooltipMode !== 'hidden' && (jsxRuntime.jsx("output", { ref: outputRef, className: prefixedClassNames(classPrefix, 'slider-output', {
                     'is-visible': showTipLow,
                     'is-flipped': flipped,
                     'is-flipped-left': isVertical && verticalFlippedLeft,
@@ -10275,7 +10370,7 @@ const Slider = React.forwardRef((props, ref) => {
                     : {
                         '--slider-progress-low': `${progressLow}%`,
                         '--slider-progress-high': `${progressHigh}%`,
-                    } }), jsxRuntime.jsx("input", { ref: combinedRef, type: "range", min: min, max: max, step: step, value: currentRange[0], disabled: disabled, onChange: handleRangeLowChange, onKeyDown: handleKeyDown, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-low'), "aria-valuenow": currentRange[0], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[0] ?? 'Minimum value', ...getAriaProps(currentRange[0]), id: controlId, ...rest, ...(nameLow !== undefined ? { name: nameLow } : {}) }), jsxRuntime.jsx("input", { ref: inputHighRef, type: "range", min: min, max: max, step: step, value: currentRange[1], disabled: disabled, onChange: handleRangeHighChange, onMouseEnter: () => setShowTooltipHigh(true), onMouseLeave: () => setShowTooltipHigh(false), onFocus: () => setShowTooltipHigh(true), onBlur: () => setShowTooltipHigh(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-high'), "aria-valuenow": currentRange[1], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[1] ?? 'Maximum value', ...getAriaProps(currentRange[1]), name: nameHigh }), tooltipMode !== 'hidden' && (jsxRuntime.jsx("output", { ref: outputRef, className: prefixedClassNames(classPrefix, 'slider-output', 'slider-output-low', {
+                    } }), jsxRuntime.jsx("input", { ref: combinedRef, type: "range", min: min, max: max, step: step, value: currentRange[0], disabled: disabled, onChange: handleRangeLowChange, onKeyDown: handleKeyDown, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-low'), "aria-valuenow": currentRange[0], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[0] ?? 'Minimum value', ...getAriaProps(currentRange[0]), ...rest, id: controlId, ...(nameLow !== undefined ? { name: nameLow } : {}) }), jsxRuntime.jsx("input", { ref: inputHighRef, type: "range", min: min, max: max, step: step, value: currentRange[1], disabled: disabled, onChange: handleRangeHighChange, onMouseEnter: () => setShowTooltipHigh(true), onMouseLeave: () => setShowTooltipHigh(false), onFocus: () => setShowTooltipHigh(true), onBlur: () => setShowTooltipHigh(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-high'), "aria-valuenow": currentRange[1], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[1] ?? 'Maximum value', ...getAriaProps(currentRange[1]), name: nameHigh }), tooltipMode !== 'hidden' && (jsxRuntime.jsx("output", { ref: outputRef, className: prefixedClassNames(classPrefix, 'slider-output', 'slider-output-low', {
                     'is-visible': showTipLow,
                     'is-flipped': flipped,
                     'is-flipped-left': isVertical && verticalFlippedLeft,
@@ -10468,7 +10563,9 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         }
     };
     // Shared input element
-    const inputControl = (jsxRuntime.jsx("div", { className: expandedControlClasses, children: jsxRuntime.jsx("input", { ref: combinedRef, type: "number", className: inputClasses, value: currentValue ?? '', min: min, max: max, step: step, disabled: disabled, readOnly: !editable, onChange: handleInputChange, onKeyDown: handleKeyDown, "aria-valuenow": currentValue ?? undefined, "aria-valuemin": min, "aria-valuemax": max, id: controlId, ...rest }) }));
+    const inputControl = (jsxRuntime.jsx("div", { className: expandedControlClasses, children: jsxRuntime.jsx("input", { ref: combinedRef, type: "number", className: inputClasses, value: currentValue ?? '', min: min, max: max, step: step, disabled: disabled, readOnly: !editable, onChange: handleInputChange, onKeyDown: handleKeyDown, "aria-valuenow": currentValue ?? undefined, "aria-valuemin": min, "aria-valuemax": max, ...rest, 
+            // After the spread: an undefined `id` key in rest would wipe it.
+            id: controlId }) }));
     // Stepper variant
     if (isStepper) {
         const stepperElement = (jsxRuntime.jsxs("div", { className: combinedClasses, children: [inputControl, jsxRuntime.jsx("div", { className: controlClasses, children: jsxRuntime.jsxs("div", { className: stepperClasses, children: [jsxRuntime.jsx("button", { type: "button", className: stepperButtonClasses, onClick: handleIncrement, disabled: disabled || isAtMax, tabIndex: -1, "aria-label": "Increase value", children: jsxRuntime.jsx(ArrowDropUp, {}) }), jsxRuntime.jsx("button", { type: "button", className: stepperButtonClasses, onClick: handleDecrement, disabled: disabled || isAtMin, tabIndex: -1, "aria-label": "Decrease value", children: jsxRuntime.jsx(ArrowDropDown, {}) })] }) })] }));
@@ -10566,8 +10663,10 @@ const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, messa
         label,
         labelProps,
         rendersLabel: ownField,
+        callerProps: props,
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const starBaseId = React.useId();
     const [internalValue, setInternalValue] = React.useState(defaultValue);
     const [hoverValue, setHoverValue] = React.useState(null);
     const defaultIconLibrary = useIconLibrary();
@@ -10729,6 +10828,14 @@ const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, messa
         const clipId = `rate-clip-${iconIndex}`;
         return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", "aria-hidden": "true", children: [jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: clipId, children: jsxRuntime.jsx("rect", { x: "0", y: "0", width: `${(fillPercent / 100) * 24}`, height: "24" }) }) }), jsxRuntime.jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", d: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" }), jsxRuntime.jsx("path", { clipPath: `url(#${clipId})`, fill: "currentColor", d: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" })] }));
     };
+    // The star the value falls in is the checked radio, and it carries the
+    // value: a radiogroup takes no aria-value* of its own. A fractional value
+    // names that star by the value itself ("3.5 stars"). Both go by the value
+    // as that name writes it, to hundredths, so a value a hair over a whole
+    // number checks that number's star under its own name, and no two stars
+    // share a name.
+    const shownValue = Number(currentValue.toFixed(2));
+    const checkedIndex = shownValue > 0 ? Math.min(Math.ceil(shownValue), max) - 1 : -1;
     // Render icons
     const renderIcons = () => {
         const icons = [];
@@ -10744,17 +10851,13 @@ const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, messa
             icons.push(jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'rate-item', {
                     'is-active': isActive,
                     'is-hovered': isHovered,
-                }), onClick: e => handleClick(iconIndex, e), onMouseEnter: () => handleMouseEnter(iconIndex), onMouseMove: e => handleMouseMove(iconIndex, e), onMouseLeave: handleMouseLeave, role: "radio", "aria-checked": currentValue === iconIndex + 1 ||
-                    (precision < 1 &&
-                        currentValue > iconIndex &&
-                        currentValue <= iconIndex + 1), "aria-label": `${iconIndex + 1} star${iconIndex === 0 ? '' : 's'}`, tabIndex: -1, children: icon }, iconIndex));
+                }), onClick: e => handleClick(iconIndex, e), onMouseEnter: () => handleMouseEnter(iconIndex), onMouseMove: e => handleMouseMove(iconIndex, e), onMouseLeave: handleMouseLeave, id: `${starBaseId}-${iconIndex}`, role: "radio", "aria-checked": iconIndex === checkedIndex, "aria-label": iconIndex === checkedIndex && shownValue % 1 !== 0
+                    ? `${shownValue} stars`
+                    : `${iconIndex + 1} star${iconIndex === 0 ? '' : 's'}`, tabIndex: -1, children: icon }, iconIndex));
         }
         return icons;
     };
     const text = getText();
-    const ariaValueText = precision < 1 && currentValue % 1 !== 0
-        ? `${currentValue.toFixed(1)} out of ${max} stars`
-        : undefined;
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
@@ -10763,7 +10866,7 @@ const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, messa
     const rateScoreClass = usePrefixedClassNames('rate-score');
     const rateTextClass = usePrefixedClassNames('rate-text');
     const rateCustomTextClass = usePrefixedClassNames('rate-custom-text');
-    const rateElement = (jsxRuntime.jsxs("div", { ref: ref, className: combinedClasses, role: "radiogroup", "aria-label": ariaLabelledBy ? undefined : 'Rating', "aria-labelledby": ariaLabelledBy, "aria-valuenow": currentValue, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuetext": ariaValueText, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, ...rest, children: [jsxRuntime.jsx("div", { className: rateItemsClass, children: renderIcons() }), showScore && (jsxRuntime.jsx("span", { className: rateScoreClass, children: getScoreDisplay() })), text && jsxRuntime.jsx("span", { className: rateTextClass, children: text }), customText && (jsxRuntime.jsx("span", { className: rateCustomTextClass, children: customText })), name && (jsxRuntime.jsx("input", { type: "hidden", name: name, value: currentValue, form: form }))] }));
+    const rateElement = (jsxRuntime.jsxs("div", { ref: ref, className: combinedClasses, role: "radiogroup", "aria-label": ariaLabelledBy ? undefined : 'Rating', "aria-labelledby": ariaLabelledBy, "aria-activedescendant": checkedIndex >= 0 ? `${starBaseId}-${checkedIndex}` : undefined, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, ...rest, children: [jsxRuntime.jsx("div", { className: rateItemsClass, children: renderIcons() }), showScore && (jsxRuntime.jsx("span", { className: rateScoreClass, children: getScoreDisplay() })), text && jsxRuntime.jsx("span", { className: rateTextClass, children: text }), customText && (jsxRuntime.jsx("span", { className: rateCustomTextClass, children: customText })), name && (jsxRuntime.jsx("input", { type: "hidden", name: name, value: currentValue, form: form }))] }));
     let content = rateElement;
     if (rendersOwnControl('Rate', { insideControl })) {
         content = jsxRuntime.jsx(Control, { children: content });
@@ -10817,6 +10920,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     const [internalValue, setInternalValue] = React.useState('');
     const [isActive, setIsActive] = React.useState(false);
     const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
+    const listboxId = `${React.useId()}-listbox`;
     // Use controlled or internal value
     const inputValue = controlledValue !== undefined ? controlledValue : internalValue;
     // Get display value from item
@@ -11008,19 +11112,33 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     // or that of a loading Control this sits in.
     const controlLoading = useControlLoading();
     const showClear = clearable && !!inputValue && !disabled && !loading && !controlLoading;
-    const autocompleteElement = (jsxRuntime.jsxs("div", { ref: containerRef, className: combinedClasses, ...rest, children: [jsxRuntime.jsxs("div", { className: controlClasses, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: placeholder, disabled: disabled, name: name, form: form, required: required, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, role: "combobox", "aria-expanded": isActive, "aria-haspopup": "listbox", "aria-autocomplete": "list", autoComplete: "off" }), showClear && (jsxRuntime.jsx("button", { type: "button", className: iconRightClickableClass, onClick: handleClear, "aria-label": "Clear", children: jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", "aria-hidden": "true", children: [jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), isActive && (filteredData.length > 0 || empty) && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsxs("div", { ref: dropdownRef, className: dropdownContentClass, style: { maxHeight: `${maxHeight}px`, overflowY: 'auto' }, role: "listbox", onScroll: handleDropdownScroll, children: [header && jsxRuntime.jsx("div", { className: dropdownHeaderClass, children: header }), filteredData.length > 0 ? (filteredData.map((item, index) => {
+    // The combobox controls its listbox and points at the highlighted option.
+    // The listbox takes its name from the label this renders, or a fallback
+    // when it renders none.
+    const listOpen = isActive && (filteredData.length > 0 || !!empty);
+    const listLabelId = !insideField && label
+        ? (fieldLabelProps?.id ?? `${listboxId}-label`)
+        : undefined;
+    const activeOptionId = listOpen &&
+        highlightedIndex >= 0 &&
+        highlightedIndex < filteredData.length
+        ? `${listboxId}-${highlightedIndex}`
+        : undefined;
+    const autocompleteElement = (jsxRuntime.jsxs("div", { ref: containerRef, className: combinedClasses, ...rest, children: [jsxRuntime.jsxs("div", { className: controlClasses, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: placeholder, disabled: disabled, name: name, form: form, required: required, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, role: "combobox", "aria-expanded": listOpen, "aria-controls": listOpen ? listboxId : undefined, "aria-activedescendant": activeOptionId, "aria-haspopup": "listbox", "aria-autocomplete": "list", autoComplete: "off" }), showClear && (jsxRuntime.jsx("button", { type: "button", className: iconRightClickableClass, onClick: handleClear, "aria-label": "Clear", children: jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", "aria-hidden": "true", children: [jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), listOpen && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsxs("div", { ref: dropdownRef, className: dropdownContentClass, style: { maxHeight: `${maxHeight}px`, overflowY: 'auto' }, id: listboxId, role: "listbox", "aria-labelledby": listLabelId, "aria-label": listLabelId ? undefined : 'Suggestions', onScroll: handleDropdownScroll, children: [header && jsxRuntime.jsx("div", { className: dropdownHeaderClass, children: header }), filteredData.length > 0 ? (filteredData.map((item, index) => {
                             const isDisabled = typeof item !== 'string' && item.disabled;
                             const isHighlighted = index === highlightedIndex;
                             const itemClasses = prefixedClassNames(classPrefix, 'dropdown-item', {
                                 'is-active': isHighlighted,
                                 'is-disabled': isDisabled,
                             });
-                            return (jsxRuntime.jsx("a", { "data-index": index, className: itemClasses, onClick: () => !isDisabled && handleSelect(item), onMouseEnter: () => !isDisabled && setHighlightedIndex(index), role: "option", "aria-selected": isHighlighted, "aria-disabled": isDisabled, children: itemTemplate
+                            return (jsxRuntime.jsx("a", { id: `${listboxId}-${index}`, "data-index": index, className: itemClasses, onClick: () => !isDisabled && handleSelect(item), onMouseEnter: () => !isDisabled && setHighlightedIndex(index), role: "option", "aria-selected": isHighlighted, "aria-disabled": isDisabled, children: itemTemplate
                                     ? itemTemplate(item)
                                     : getDisplayValue(item) }, index));
                         })) : (jsxRuntime.jsx("div", { className: emptyItemClasses, children: empty })), footer && jsxRuntime.jsx("div", { className: dropdownFooterClass, children: footer })] }) }))] }));
     if (!insideField) {
-        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [autocompleteElement, messageEl] }));
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: listLabelId
+                ? { ...fieldLabelProps, id: listLabelId }
+                : fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [autocompleteElement, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [autocompleteElement, messageEl] }));
 });
@@ -11078,12 +11196,13 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     const tags = controlledValue !== undefined ? controlledValue : internalTags;
     const isMaxReached = maxTags !== undefined && tags.length >= maxTags;
     // At the tag limit the text input is not rendered, so there is nothing to
-    // wire the label to.
-    const { controlId, fieldLabelProps } = useAutoLabelId({
+    // wire a label to, its own or a surrounding Field's.
+    const { controlId, fieldLabelProps, labelled } = useAutoLabelId({
         label,
         id,
         labelProps,
         rendersLabel: ownField && !isMaxReached,
+        hasInput: !isMaxReached,
     });
     // Get display value from tag
     const getDisplayValue = (tag) => {
@@ -11349,9 +11468,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
                                                 e.stopPropagation();
                                                 removeTag(index);
                                             }, "aria-label": ariaCloseLabel || `Remove ${displayVal}` }))] }, index));
-                            }), !isMaxReached && (jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: tags.length === 0 ? placeholder : undefined, disabled: disabled, readOnly: readonly, maxLength: maxlength, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, onPaste: handlePaste, "aria-label": controlId && fieldLabelProps?.htmlFor === controlId
-                                    ? undefined
-                                    : 'Add tag' }))] }), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), isActive && filteredData.length > 0 && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsx("div", { ref: dropdownRef, className: dropdownContentClasses, role: "listbox", children: filteredData.map((item, index) => (jsxRuntime.jsx("a", { className: pcn('dropdown-item', {
+                            }), !isMaxReached && (jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: tags.length === 0 ? placeholder : undefined, disabled: disabled, readOnly: readonly, maxLength: maxlength, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, onPaste: handlePaste, "aria-label": labelled ? undefined : 'Add tag' }))] }), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), isActive && filteredData.length > 0 && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsx("div", { ref: dropdownRef, className: dropdownContentClasses, role: "listbox", children: filteredData.map((item, index) => (jsxRuntime.jsx("a", { className: pcn('dropdown-item', {
                             'is-active': index === highlightedIndex,
                         }), onClick: () => addTag(item), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": index === highlightedIndex, children: item }, index))) }) })), showCounter && jsxRuntime.jsx("small", { className: counterClasses, children: counterText }), name &&
                 tags.map((tag, i) => (jsxRuntime.jsx("input", { type: "hidden", name: name, value: getDisplayValue(tag), form: form }, `tag-input-${i}`)))] }));
@@ -11540,7 +11657,7 @@ fieldClassName, controlClassName,
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
-    let content = jsxRuntime.jsx(InputBase, { ref: ref, id: controlId, ...inputProps });
+    let content = jsxRuntime.jsx(InputBase, { ref: ref, ...inputProps, id: controlId });
     if (ownControl) {
         content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
@@ -11609,7 +11726,7 @@ fieldClassName, controlClassName,
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
-    let content = jsxRuntime.jsx(SelectBase, { ref: ref, id: controlId, ...selectProps });
+    let content = jsxRuntime.jsx(SelectBase, { ref: ref, ...selectProps, id: controlId });
     if (ownControl) {
         content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconLeftName: iconLeftName, iconLeftSize: iconLeftSize, hasIconsLeft: hasIconsLeft, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
@@ -11674,7 +11791,7 @@ fieldClassName, controlClassName,
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
-    let content = jsxRuntime.jsx(TextAreaBase, { ref: ref, id: controlId, ...textAreaProps });
+    let content = jsxRuntime.jsx(TextAreaBase, { ref: ref, ...textAreaProps, id: controlId });
     if (ownControl) {
         content = (jsxRuntime.jsx(Control, { isLoading: controlIsLoading, size: controlSize, className: controlClassName, children: content }));
     }
@@ -14243,13 +14360,14 @@ const DateInput = React.forwardRef((props, ref) => {
         labelProps,
         // Inline mode renders a bare calendar with no input to label.
         rendersLabel: ownField && !baseProps.inline,
+        hasInput: !baseProps.inline,
     });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
     // The base hides its launcher while the Control it sits in is loading,
     // whether that is the one rendered below or an enclosing one.
-    let content = (jsxRuntime.jsx(DateInputBase, { ref: ref, id: controlId, ...baseProps }));
+    let content = (jsxRuntime.jsx(DateInputBase, { ref: ref, ...baseProps, id: controlId }));
     if (ownControl) {
         content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
@@ -14914,13 +15032,16 @@ const WheelInner = ({ values, index, onChange, formatLabel, formatAriaText, aria
                 const top = centreTop + offCentreItems * itemHeight;
                 const selected = vIdx === virtualIdx;
                 const itemDisabled = disabled || (disabledFor ? disabledFor(values[aIdx]) : false);
-                return (jsxRuntime.jsx("button", { type: "button", role: "option", "aria-selected": selected, tabIndex: -1, className: itemClass(selected), style: {
+                return (jsxRuntime.jsx("button", { type: "button", "aria-hidden": "true", tabIndex: -1, className: itemClass(selected), style: {
                         position: 'absolute',
                         left: 0,
                         right: 0,
                         height: itemHeight,
                         top: `${top}px`,
-                    }, disabled: itemDisabled, onClick: () => {
+                    }, disabled: itemDisabled, 
+                    // Keep a press from focusing the item, which assistive technology
+                    // can't see; the click below hands focus to the wheel instead.
+                    onMouseDown: e => e.preventDefault(), onClick: () => {
                         moveBy(vIdx - virtualIdx);
                         // Click focuses the <button> child by default; pull focus back
                         // to the wheel root so the column emphasis (:focus rules) match.
@@ -15104,7 +15225,7 @@ const TimeWheels = ({ value, onChange, hourFormat = '24', enableSeconds = false,
         });
         columnOrder[nearestIdx]?.current?.startDrag(e.pointerId, e.clientY);
     };
-    return (jsxRuntime.jsx("div", { id: id, className: classNames(rootClass, className), "aria-disabled": disabled, children: jsxRuntime.jsxs("div", { className: wheelsClass, ref: wheelsContainerRef, onPointerDown: onWheelsContainerPointerDown, children: [jsxRuntime.jsx(Wheel, { ref: hoursRef, values: hourValues, index: hourIndex, onChange: onHourIndex, formatLabel: pad2, ariaLabel: t.hours, visibleCount: visibleCount, itemHeight: itemHeight, disabled: disabled, size: size, color: color, wrap: true, onCommit: onCommit, onFocusPrev: focusPrevOf(hoursRef), onFocusNext: focusNextOf(hoursRef), disabledFor: hourDisabledFor, audioTick: audioTick }), jsxRuntime.jsx("div", { className: sepClass, "aria-hidden": "true", children: ":" }), jsxRuntime.jsx(Wheel, { ref: minutesRef, values: minuteValues, index: minuteIndex, onChange: onMinuteIndex, formatLabel: pad2, ariaLabel: t.minutes, visibleCount: visibleCount, itemHeight: itemHeight, disabled: disabled, size: size, color: color, wrap: true, onCommit: onCommit, onFocusPrev: focusPrevOf(minutesRef), onFocusNext: focusNextOf(minutesRef), disabledFor: minuteDisabledFor, audioTick: audioTick }), enableSeconds && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: sepClass, "aria-hidden": "true", children: ":" }), jsxRuntime.jsx(Wheel, { ref: secondsRef, values: secondValues, index: secondIndex, onChange: onSecondIndex, formatLabel: pad2, ariaLabel: t.seconds, visibleCount: visibleCount, itemHeight: itemHeight, disabled: disabled, size: size, color: color, wrap: true, onFocusPrev: focusPrevOf(secondsRef), onFocusNext: focusNextOf(secondsRef), disabledFor: secondDisabledFor, audioTick: audioTick })] })), hourFormat === '12' && (jsxRuntime.jsx(Wheel, { ref: ampmRef, values: ['AM', 'PM'], index: ampmIndex, onChange: onAmpmIndex, formatLabel: v => v, ariaLabel: t.ampm, visibleCount: visibleCount, itemHeight: itemHeight, disabled: disabled, size: size, color: color, onCommit: onCommit, onFocusPrev: focusPrevOf(ampmRef), onFocusNext: focusNextOf(ampmRef), audioTick: audioTick }))] }) }));
+    return (jsxRuntime.jsx("div", { id: id, className: classNames(rootClass, className), "aria-disabled": disabled, children: jsxRuntime.jsxs("div", { className: wheelsClass, ref: wheelsContainerRef, onPointerDown: onWheelsContainerPointerDown, children: [jsxRuntime.jsx(Wheel, { ref: hoursRef, values: hourValues, index: hourIndex, onChange: onHourIndex, formatLabel: pad2, ariaLabel: t.hours, visibleCount: visibleCount, itemHeight: itemHeight, disabled: disabled, size: size, color: color, wrap: true, onCommit: onCommit, onFocusPrev: focusPrevOf(hoursRef), onFocusNext: focusNextOf(hoursRef), disabledFor: hourDisabledFor, audioTick: audioTick }), jsxRuntime.jsx("div", { className: sepClass, "aria-hidden": "true", children: ":" }), jsxRuntime.jsx(Wheel, { ref: minutesRef, values: minuteValues, index: minuteIndex, onChange: onMinuteIndex, formatLabel: pad2, ariaLabel: t.minutes, visibleCount: visibleCount, itemHeight: itemHeight, disabled: disabled, size: size, color: color, wrap: true, onCommit: onCommit, onFocusPrev: focusPrevOf(minutesRef), onFocusNext: focusNextOf(minutesRef), disabledFor: minuteDisabledFor, audioTick: audioTick }), enableSeconds && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: sepClass, "aria-hidden": "true", children: ":" }), jsxRuntime.jsx(Wheel, { ref: secondsRef, values: secondValues, index: secondIndex, onChange: onSecondIndex, formatLabel: pad2, ariaLabel: t.seconds, visibleCount: visibleCount, itemHeight: itemHeight, disabled: disabled, size: size, color: color, wrap: true, onCommit: onCommit, onFocusPrev: focusPrevOf(secondsRef), onFocusNext: focusNextOf(secondsRef), disabledFor: secondDisabledFor, audioTick: audioTick })] })), hourFormat === '12' && (jsxRuntime.jsx(Wheel, { ref: ampmRef, values: ['AM', 'PM'], index: ampmIndex, onChange: onAmpmIndex, formatLabel: v => v, ariaLabel: t.ampm, visibleCount: visibleCount, itemHeight: itemHeight, disabled: disabled, size: size, color: color, onCommit: onCommit, onFocusPrev: focusPrevOf(ampmRef), onFocusNext: focusNextOf(ampmRef), audioTick: audioTick }))] }) }));
 };
 TimeWheels.displayName = 'TimeWheels';
 
@@ -15307,7 +15428,11 @@ const TimeInputBase = React.forwardRef((props, ref) => {
         minutes: value?.getMinutes() ?? 0,
         seconds: enableSeconds ? (value?.getSeconds() ?? 0) : undefined,
     };
-    const panel = (jsxRuntime.jsxs("div", { className: panelClass, children: [jsxRuntime.jsx(TimeWheels, { value: spinnerValue, onChange: handleSpinnerChange, hourFormat: effectiveHourFormat, enableSeconds: enableSeconds, incrementHours: incrementHours, incrementMinutes: incrementMinutes, incrementSeconds: incrementSeconds, unselectableTimes: unselectableTimes, color: color, size: size, disabled: disabled, id: popoverId, labels: labels, itemHeight: wheelItemHeight, audioTick: effectiveAudioTick, onCommit: () => setOpen(false) }), !inline && !isSmallViewport && (jsxRuntime.jsxs(Buttons, { className: footerClass, hasAddons: true, children: [jsxRuntime.jsx("button", { type: "button", className: footerOkClass, onClick: () => setOpen(false), children: t.ok }), jsxRuntime.jsx("button", { type: "button", className: footerButton, onClick: () => {
+    const panel = (jsxRuntime.jsxs("div", { className: panelClass, children: [jsxRuntime.jsx(TimeWheels, { value: spinnerValue, onChange: handleSpinnerChange, hourFormat: effectiveHourFormat, enableSeconds: enableSeconds, incrementHours: incrementHours, incrementMinutes: incrementMinutes, incrementSeconds: incrementSeconds, unselectableTimes: unselectableTimes, color: color, size: size, disabled: disabled, 
+                // The popover panel takes `popoverId`, so the wheels inside it take
+                // one of their own. Inline there is no panel, and the wheels keep
+                // the id they released with.
+                id: inline ? popoverId : `${popoverId}-time`, labels: labels, itemHeight: wheelItemHeight, audioTick: effectiveAudioTick, onCommit: () => setOpen(false) }), !inline && !isSmallViewport && (jsxRuntime.jsxs(Buttons, { className: footerClass, hasAddons: true, children: [jsxRuntime.jsx("button", { type: "button", className: footerOkClass, onClick: () => setOpen(false), children: t.ok }), jsxRuntime.jsx("button", { type: "button", className: footerButton, onClick: () => {
                             commitValue(snapTimeToIncrement(new Date(), {
                                 incrementHours,
                                 incrementMinutes,
@@ -15385,13 +15510,14 @@ const TimeInput = React.forwardRef((props, ref) => {
         labelProps,
         // Inline mode renders a bare panel with no input to label.
         rendersLabel: ownField && !baseProps.inline,
+        hasInput: !baseProps.inline,
     });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
     // The base hides its launcher while the Control it sits in is loading,
     // whether that is the one rendered below or an enclosing one.
-    let content = (jsxRuntime.jsx(TimeInputBase, { ref: ref, id: controlId, ...baseProps }));
+    let content = (jsxRuntime.jsx(TimeInputBase, { ref: ref, ...baseProps, id: controlId }));
     if (ownControl) {
         content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
@@ -15489,6 +15615,7 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
     const valueAtOpenRef = React.useRef(null);
     const reactId = React.useId();
     const popoverId = id ? `${id}-popover` : `picker-${reactId}`;
+    const timeWheelsId = `${popoverId}-time`;
     const { bulmaHelperClasses, rest: cleanRest } = useBulmaClasses(rest);
     const { shouldUseNative, isSmallViewport } = useNativeMobilePicker({
         force: mobileNative === 'auto' ? undefined : mobileNative,
@@ -15549,17 +15676,14 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
     // The footer's Time button opens the wheels, and the hours wheel takes
     // focus so the keys turn it straight away. The calendar they cover is
     // inert meanwhile, so no tab stop, pointer or screen reader reaches a day
-    // behind them; the attribute is set on the element, as React 18 has no
-    // `inert` prop. Closing the wheels hands focus back to the button: focus
+    // behind them. Closing the wheels hands focus back to the button: focus
     // in them would fall to the page as they unmount, and a pointer press
     // outside them has already dropped it on the panel or the page. Focus the
     // keys moved on to the footer, such as Reset, stays there.
     const panelRef = React.useRef(null);
-    const calendarRef = React.useRef(null);
     const timeButtonRef = React.useRef(null);
     const timeOverlayRef = React.useRef(null);
     React.useEffect(() => {
-        calendarRef.current?.toggleAttribute('inert', timeOpen);
         if (!timeOpen)
             return;
         timeOverlayRef.current
@@ -15697,13 +15821,17 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
                 e.stopPropagation();
                 closeTime();
             }
-        }, children: [jsxRuntime.jsxs("div", { className: calendarWrapClass, children: [jsxRuntime.jsx("div", { ref: calendarRef, children: jsxRuntime.jsx(Calendar, { value: value, focusedDate: focusedDate, onSelect: handleDateSelect, onFocusedDateChange: setFocusedDate, min: min, max: max, shouldDisableDate: shouldDisableDate, unselectableDates: unselectableDates, firstDayOfWeek: firstDayOfWeek, locale: locale, dayNames: dayNames, monthNames: monthNames, nearbyMonthDays: nearbyMonthDays, color: color, size: size, id: `${popoverId}-cal`, autoFocusCell: open, labels: labels }) }), timeOpen && (jsxRuntime.jsx("div", { ref: timeOverlayRef, className: timeOverlayClass, onClick: e => {
+        }, children: [jsxRuntime.jsxs("div", { className: calendarWrapClass, children: [jsxRuntime.jsx("div", { ...inertProps(timeOpen), children: jsxRuntime.jsx(Calendar, { value: value, focusedDate: focusedDate, onSelect: handleDateSelect, onFocusedDateChange: setFocusedDate, min: min, max: max, shouldDisableDate: shouldDisableDate, unselectableDates: unselectableDates, firstDayOfWeek: firstDayOfWeek, locale: locale, dayNames: dayNames, monthNames: monthNames, nearbyMonthDays: nearbyMonthDays, color: color, size: size, id: `${popoverId}-cal`, autoFocusCell: open, labels: labels }) }), timeOpen && (jsxRuntime.jsx("div", { ref: timeOverlayRef, className: timeOverlayClass, onClick: e => {
                             // Tap outside the wheel card (on the covered calendar area)
                             // collapses the wheels without selecting a date, matching the
                             // native behavior.
                             if (e.target === e.currentTarget)
                                 closeTime();
-                        }, children: jsxRuntime.jsx("div", { className: timeCardClass, children: jsxRuntime.jsx(TimeWheels, { value: spinnerValue, onChange: handleTimeChange, hourFormat: effectiveHourFormat, enableSeconds: enableSeconds, incrementHours: incrementHours, incrementMinutes: incrementMinutes, incrementSeconds: incrementSeconds, unselectableTimes: unselectableTimes, color: color, size: size, disabled: disabled, id: `${popoverId}-time`, labels: labels, itemHeight: wheelItemHeight, audioTick: effectiveAudioTick, onCommit: () => setOpen(false) }) }) }))] }), jsxRuntime.jsxs("div", { className: footerClass, children: [jsxRuntime.jsxs("button", { ref: timeButtonRef, type: "button", className: footerTimeClass, onClick: () => (timeOpen ? closeTime() : setTimeOpen(true)), "aria-expanded": timeOpen, disabled: disabled, children: [jsxRuntime.jsx("span", { children: t.time }), jsxRuntime.jsx("span", { className: footerTimePillClass, children: value ? formatTime(value, timeDisplayFormat, locale) : '—' })] }), jsxRuntime.jsxs("div", { className: footerActionsClass, children: [jsxRuntime.jsx("button", { type: "button", className: footerResetClass, onClick: () => commitValue(valueAtOpenRef.current), children: t.reset }), jsxRuntime.jsx("button", { type: "button", className: footerDoneClass, "aria-label": t.done, onClick: () => setOpen(false), children: jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M5 11l4 4 8-8", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] })] }));
+                        }, children: jsxRuntime.jsx("div", { className: timeCardClass, children: jsxRuntime.jsx(TimeWheels, { value: spinnerValue, onChange: handleTimeChange, hourFormat: effectiveHourFormat, enableSeconds: enableSeconds, incrementHours: incrementHours, incrementMinutes: incrementMinutes, incrementSeconds: incrementSeconds, unselectableTimes: unselectableTimes, color: color, size: size, disabled: disabled, id: timeWheelsId, labels: labels, itemHeight: wheelItemHeight, audioTick: effectiveAudioTick, 
+                                // Enter on a wheel commits the time, which the wheels already
+                                // did live, and closes: the popover, or inline, where there
+                                // is no popover, the wheels, as Escape does.
+                                onCommit: () => (inline ? closeTime() : setOpen(false)) }) }) }))] }), jsxRuntime.jsxs("div", { className: footerClass, children: [jsxRuntime.jsxs("button", { ref: timeButtonRef, type: "button", className: footerTimeClass, onClick: () => (timeOpen ? closeTime() : setTimeOpen(true)), "aria-expanded": timeOpen, "aria-controls": timeOpen ? timeWheelsId : undefined, disabled: disabled, children: [jsxRuntime.jsx("span", { children: t.time }), jsxRuntime.jsx("span", { className: footerTimePillClass, children: value ? formatTime(value, timeDisplayFormat, locale) : '—' })] }), jsxRuntime.jsxs("div", { className: footerActionsClass, children: [jsxRuntime.jsx("button", { type: "button", className: footerResetClass, onClick: () => commitValue(valueAtOpenRef.current), children: t.reset }), jsxRuntime.jsx("button", { type: "button", className: footerDoneClass, "aria-label": t.done, onClick: () => setOpen(false), children: jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M5 11l4 4 8-8", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] })] }));
     if (inline) {
         return (jsxRuntime.jsxs("div", { ...cleanRest, ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), children: [panel, name && (jsxRuntime.jsx("input", { type: "hidden", name: name, form: form, value: value ? toIsoDateTime(value, enableSeconds) : '', required: required }))] }));
     }
@@ -15771,13 +15899,14 @@ const DateTimeInput = React.forwardRef((props, ref) => {
         labelProps,
         // Inline mode renders a bare picker with no input to label.
         rendersLabel: ownField && !baseProps.inline,
+        hasInput: !baseProps.inline,
     });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
     // The base hides its launcher while the Control it sits in is loading,
     // whether that is the one rendered below or an enclosing one.
-    let content = (jsxRuntime.jsx(DateTimeInputBase, { ref: ref, id: controlId, ...baseProps }));
+    let content = (jsxRuntime.jsx(DateTimeInputBase, { ref: ref, ...baseProps, id: controlId }));
     if (ownControl) {
         content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
@@ -16121,6 +16250,7 @@ const DateRangeInput = React.forwardRef((props, ref) => {
         label,
         labelProps,
         rendersLabel: ownField,
+        callerProps: baseProps,
     });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,