@allxsmith/bestax-bulma 5.51.0 → 5.52.0

package/dist/index.cjs

@@ -4156,7 +4156,7 @@ function flatChildren(el) {
     }
     return Array.from(el.children);
 }
-const isShown = (el) => !el.hasAttribute('inert') && getComputedStyle(el).display !== 'none';
+const isShown$1 = (el) => !el.hasAttribute('inert') && getComputedStyle(el).display !== 'none';
 const isVisible = (el) => {
     const { visibility } = getComputedStyle(el);
     return visibility !== 'hidden' && visibility !== 'collapse';
@@ -4170,7 +4170,7 @@ const isVisible = (el) => {
 function isShownUpTo(el, top) {
     let below = null;
     for (let node = el; node && node !== top; node = flatParent(node)) {
-        if (!isShown(node))
+        if (!isShown$1(node))
             return false;
         if (below &&
             node.localName === 'details' &&
@@ -11425,6 +11425,1482 @@ const ScrollArea = React.forwardRef(({ className, style, textColor, bgColor, hei
 });
 ScrollArea.displayName = 'ScrollArea';
 
+// INTERNAL: deliberately not exported from src/index.ts.
+/** An IME is composing, so the key belongs to it (`keyCode` 229 is Safari's word for it). */
+const isComposing$2 = (event) => event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229;
+const sameValues = (a, b) => a.length === b.length && a.every((value, i) => value === b[i]);
+/**
+ * The keys, the open state, the highlight and the ARIA of an editable
+ * combobox whose list the app renders and filters (#1083). DOM focus stays
+ * in the field the whole time: the highlight is `aria-activedescendant`, as
+ * the ARIA Authoring Practices ask of a combobox, where `useMenuKeys` moves
+ * real focus, as a menu should.
+ *
+ * The options are read from the listbox in document order whenever they're
+ * needed, so options in groups and options that come and go are found, and
+ * the highlight is remembered by value, so it survives a re-render. The text
+ * in the field and any value are the app's: a pick only calls
+ * `onSelect`.
+ *
+ * @function useComboboxEngine
+ * @param options - The open state, the pick callback and the shape.
+ * @returns The state and handlers the parts wire up.
+ */
+function useComboboxEngine({ open: controlledOpen, defaultOpen, onOpenChange, onSelect, onSettle, keepFirst, multiple, inline, deferred, }) {
+    const baseId = React.useId();
+    const listboxId = `${baseId}-listbox`;
+    const itemPrefix = `${baseId}-item-`;
+    // The value goes into the id encoded, so a value with a space in it still
+    // makes one id, not two.
+    const itemId = React.useCallback((value) => itemPrefix + encodeURIComponent(value), [itemPrefix]);
+    const rootRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const listboxRef = React.useRef(null);
+    const popupRef = React.useRef(null);
+    const insidePressRef = React.useRef(null);
+    const optionsRef = React.useRef(new Map());
+    const landingRef = React.useRef(null);
+    const wasOpenRef = React.useRef(false);
+    const shownValuesRef = React.useRef([]);
+    // Whether the next highlight change is one to scroll to: a key's or a
+    // landing's. The pointer's isn't, since the pointer is already on that
+    // option, and scrolling would move the list out from under it.
+    const scrollToHighlightRef = React.useRef(false);
+    const isControlled = controlledOpen !== undefined;
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const open = inline || (controlledOpen ?? internalOpen);
+    const [highlighted, setHighlighted] = React.useState(null);
+    const [typed, setTyped] = React.useState(false);
+    // Whether a listbox with an option in it is on the page, which only the
+    // page can say, so it's read once the open list has rendered.
+    const [listShown, setListShown] = React.useState(null);
+    // Options register from their own effects, which needn't render the
+    // component that holds this hook, so they ask for a render to be read.
+    const [, refresh] = React.useReducer((n) => n + 1, 0);
+    // Closing forgets the highlight, the typing and what was on the page,
+    // during render, React's pattern for adjusting state when other state
+    // changes.
+    if (!open) {
+        if (highlighted !== null)
+            setHighlighted(null);
+        if (typed)
+            setTyped(false);
+        if (listShown !== null)
+            setListShown(null);
+    }
+    const expanded = open && (listShown ?? !deferred);
+    /** The options on the page, in document order, groups included. */
+    const shownOptions = React.useCallback(() => {
+        const listbox = listboxRef.current;
+        if (!listbox)
+            return [];
+        const shown = [];
+        listbox
+            .querySelectorAll('[role="option"]')
+            .forEach(element => {
+            // Only the Combobox's own options: an element given the role by
+            // hand isn't one.
+            const state = optionsRef.current.get(element);
+            if (state)
+                shown.push({ element, ...state });
+        });
+        return shown;
+    }, []);
+    const requestOpen = React.useCallback((next, landing = 'open') => {
+        if (inline || next === open)
+            return;
+        landingRef.current = next ? landing : null;
+        onOpenChange?.(next);
+        if (!isControlled)
+            setInternalOpen(next);
+    }, [inline, open, onOpenChange, isControlled]);
+    const close = React.useCallback(() => requestOpen(false), [requestOpen]);
+    // After every render, read the list: whether it has options, and where
+    // the highlight goes now. A highlighted option that has left takes the
+    // highlight with it, or hands it to the first enabled one under
+    // `keepFirst`, which also moves it there whenever the options change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- after every render on purpose
+    useClientLayoutEffect(() => {
+        const opened = open && !wasOpenRef.current;
+        wasOpenRef.current = open;
+        if (!open) {
+            landingRef.current = null;
+            shownValuesRef.current = [];
+            return;
+        }
+        const options = shownOptions();
+        const values = options.map(option => option.value);
+        const changed = !sameValues(values, shownValuesRef.current);
+        shownValuesRef.current = values;
+        setListShown(values.length > 0);
+        const landing = landingRef.current ?? (opened ? 'open' : null);
+        landingRef.current = null;
+        const enabled = options.filter(option => !option.disabled);
+        const checked = enabled.find(option => option.checked)?.value;
+        const first = enabled.length > 0 ? enabled[0].value : null;
+        const last = enabled.length > 0 ? enabled[enabled.length - 1].value : null;
+        let next = highlighted;
+        if (landing === 'first')
+            next = checked ?? first;
+        else if (landing === 'last')
+            next = checked ?? last;
+        else if (landing === 'open')
+            next = checked ?? (keepFirst ? first : null);
+        else if (landing === 'typed')
+            next = keepFirst ? first : null;
+        else if (landing === 'none')
+            next = null;
+        else if (keepFirst && changed)
+            next = first;
+        // Without `keepFirst`, which moved it above, a highlighted option
+        // that left takes the highlight with it.
+        else if (next !== null && !values.includes(next))
+            next = null;
+        // Only a change is set. StrictMode runs this twice on mount, and the
+        // second run, with the landing used up, works out the rendered highlight
+        // again, so it leaves the first run's landing in place.
+        if (next !== highlighted) {
+            scrollToHighlightRef.current = true;
+            setHighlighted(next);
+        }
+    });
+    // A browser scrolls to what has focus, not to an active descendant, so
+    // the highlighted option is brought into view here, when a key or a
+    // landing moved it there.
+    useClientLayoutEffect(() => {
+        if (highlighted === null || !scrollToHighlightRef.current)
+            return;
+        scrollToHighlightRef.current = false;
+        const option = shownOptions().find(shown => shown.value === highlighted);
+        option?.element.scrollIntoView?.({ block: 'nearest' });
+    }, [highlighted, shownOptions]);
+    // A press outside the field and the list closes it. The path is checked
+    // rather than the target, so it works in a shadow root.
+    React.useEffect(() => {
+        const root = rootRef.current;
+        if (!open || inline || !root)
+            return undefined;
+        const onPress = (event) => {
+            if (event === insidePressRef.current ||
+                isEventInside(event, rootRef.current) ||
+                isEventInside(event, popupRef.current)) {
+                return;
+            }
+            close();
+        };
+        // Its document, an iframe's when the tree renders into one.
+        const doc = root.ownerDocument;
+        doc.addEventListener('pointerdown', onPress);
+        return () => doc.removeEventListener('pointerdown', onPress);
+    }, [open, inline, close]);
+    const submit = React.useCallback((value) => {
+        onSelect?.(value);
+        if (!multiple)
+            close();
+    }, [onSelect, multiple, close]);
+    const onKeyDown = (event) => {
+        // The caller's handler ran first and can keep a key, and an IME that's
+        // composing owns every key.
+        if (event.defaultPrevented || isComposing$2(event))
+            return;
+        const { key, altKey } = event;
+        if (!open) {
+            if (key === 'ArrowDown' || (key === 'ArrowUp' && !altKey)) {
+                event.preventDefault();
+                requestOpen(true, altKey ? 'none' : key === 'ArrowDown' ? 'first' : 'last');
+            }
+            return;
+        }
+        switch (key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                if (altKey) {
+                    if (key === 'ArrowUp' && !inline) {
+                        event.preventDefault();
+                        close();
+                    }
+                    return;
+                }
+                event.preventDefault();
+                // Disabled options too, so a screen reader user finds them.
+                const options = shownOptions();
+                if (options.length === 0)
+                    return;
+                const at = options.findIndex(option => option.value === highlighted);
+                const step = key === 'ArrowDown' ? 1 : -1;
+                const index = at === -1
+                    ? step === 1
+                        ? 0
+                        : options.length - 1
+                    : (at + step + options.length) % options.length;
+                scrollToHighlightRef.current = true;
+                setHighlighted(options[index].value);
+                return;
+            }
+            case 'Enter': {
+                const option = shownOptions().find(shown => shown.value === highlighted);
+                if (option) {
+                    event.preventDefault();
+                    if (!option.disabled)
+                        submit(option.value);
+                    return;
+                }
+                // Nothing to pick: the key goes on, so a form submits.
+                onSettle?.();
+                close();
+                return;
+            }
+            case 'Escape':
+                if (inline)
+                    return;
+                // It stops here only when there was something to close, so a
+                // Popover or Modal around it keeps its own Escape otherwise. Nothing
+                // stops it going on: a handler further out reads `defaultPrevented`.
+                if (popupRef.current)
+                    event.preventDefault();
+                close();
+                return;
+            case 'Tab':
+                close();
+                return;
+            case 'Home':
+            case 'End':
+            case 'ArrowLeft':
+            case 'ArrowRight':
+                // The field's own keys, which take the field back from the list.
+                setHighlighted(null);
+                return;
+        }
+    };
+    const onChange = () => {
+        setTyped(true);
+        if (open) {
+            landingRef.current = 'typed';
+            setHighlighted(null);
+            refresh();
+        }
+        else {
+            requestOpen(true, 'typed');
+        }
+    };
+    const onClick = () => {
+        requestOpen(true, 'open');
+    };
+    const onBlur = (event) => {
+        const next = event.relatedTarget;
+        if (next &&
+            (rootRef.current?.contains(next) || popupRef.current?.contains(next))) {
+            return;
+        }
+        close();
+    };
+    const hover = (value) => {
+        scrollToHighlightRef.current = false;
+        setHighlighted(value);
+    };
+    const pick = (value) => {
+        submit(value);
+        // A press in the list keeps focus in the field, but a browser that
+        // ignores that, or a tap, can leave it elsewhere.
+        const input = inputRef.current;
+        if (input && input.isConnected && getActiveElementInTree(input) !== input) {
+            input.focus();
+        }
+    };
+    const keepFocus = (event) => event.preventDefault();
+    const markInside = (event) => {
+        insidePressRef.current = event.nativeEvent;
+    };
+    const registerPopup = React.useCallback((element) => {
+        popupRef.current = element;
+        return () => {
+            popupRef.current = null;
+        };
+    }, []);
+    const registerItem = React.useCallback((element, state) => {
+        const options = optionsRef.current;
+        options.set(element, state);
+        refresh();
+        return () => {
+            options.delete(element);
+            refresh();
+        };
+    }, []);
+    return {
+        open,
+        expanded,
+        highlighted,
+        typed,
+        listboxId,
+        itemId,
+        rootRef,
+        inputRef,
+        listboxRef,
+        registerPopup,
+        registerItem,
+        onKeyDown,
+        onChange,
+        onClick,
+        onBlur,
+        hover,
+        pick,
+        keepFocus,
+        markInside,
+    };
+}
+
+/**
+ * Distinguishes an `IconProps` object from a plain custom node (an inline SVG, a
+ * `react-icons` component, …) in a slot that accepts either — `Control`'s
+ * `iconLeft`/`iconRight`, `IconText`'s `iconProps`.
+ *
+ * One copy, imported by both consumers: two hand-maintained copies, one per
+ * consumer, is how the deprecated `icon` path came to crash both (#663).
+ *
+ * Its own module rather than `Icon.tsx` because `src/index.ts` wildcard-exports
+ * that file, and everything published there is public forever. `polymorphic.ts`
+ * makes the same call for `isCustomElement`: an internal discriminator is not
+ * something to support for the life of the package.
+ *
+ * It tests each member's VALUE, not merely its key, and only after everything
+ * React owns is out of the way. `'icon' in value` was enough
+ * to claim a Font Awesome `IconDefinition` — `{ prefix, iconName, icon: [w, h, …,
+ * path] }` — whose `icon` is a path array rather than a class string. That object
+ * is not a renderable node either, so the honest outcome is the one this slot has
+ * always had for it: the node branch, and React's own "Objects are not valid as a
+ * React child". Claiming it here instead rendered a blank container that still
+ * reserved layout.
+ *
+ * A member added to `IconProps` needs a line here, and a missed one is a crash
+ * rather than a fallthrough. That is the cost of a slot taking either a props
+ * object or a node; keeping the guard in one place is what keeps the cost to a
+ * single line.
+ */
+function isIconProps(value) {
+    if (typeof value !== 'object' || value === null)
+        return false;
+    // Anything React owns. `isValidElement` covers elements only; a PORTAL is a
+    // valid `ReactNode` that fails it and carries a `children` key, so the member
+    // test below claimed it and `Control` spread it into `<Icon>` as props —
+    // rendering the portal's child locally instead of in its container. Every
+    // React internal carries `$$typeof`, so testing for it covers lazy, context
+    // and whatever React adds next, rather than portals alone.
+    if (React.isValidElement(value) || '$$typeof' in value)
+        return false;
+    const candidate = value;
+    return (typeof candidate.name === 'string' ||
+        typeof candidate.icon === 'string' ||
+        'children' in candidate);
+}
+
+// Whether the nearest enclosing `Control` shows its `isLoading` spinner. The
+// picker bases read it so their right-side launcher gives way to that
+// spinner, which sits at the same edge, whether the `Control` is the one a
+// convenience input renders or one the caller wrapped around the input.
+// Autocomplete reads it for its clear button, which sits there too.
+// Kept apart from `FormContext`, whose contexts only report whether a `Field`
+// or `Control` is present. Internal; not part of the public API.
+const ControlLoadingContext = React.createContext(false);
+/** Provider for the loading state, used internally by `Control`. */
+const ControlLoadingProvider = ControlLoadingContext.Provider;
+/** Whether the nearest enclosing `Control` is loading; `false` outside one. */
+const useControlLoading = () => React.useContext(ControlLoadingContext);
+
+const allowedColors = [...validColors, 'inherit', 'current'];
+/**
+ * The `Control` component is a Bulma-styled wrapper for form controls (`Input`, `Select`, `TextArea`, etc.), supporting icons (left/right), loading state, expansion, size, and Bulma helper props for layout and color.
+ *
+ * @function
+ * @param {ControlProps} props - Props for the Control component.
+ * @returns {JSX.Element} The rendered control container.
+ * @see {@link https://bulma.io/documentation/form/general/#control | Bulma Control documentation}
+ *
+ * @example
+ * // Control with left icon
+ * <Control iconLeftName="envelope" iconLeftSize="small">
+ *   <input className="input" type="email" placeholder="Email" />
+ * </Control>
+ */
+const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isLoading, isExpanded, size, textColor, bgColor, iconLeft, iconRight, iconLeftName, iconLeftSize, iconRightName, iconRightSize, className, children, ...props }, ref) => {
+    const Component = (as === 'p' ? 'p' : 'div');
+    const { classPrefix } = useConfig();
+    // Remove textColor/bgColor from props before spreading
+    const { textColor: _ignoredTextColor, bgColor: _ignoredBgColor, ...restProps } = props;
+    const safeTextColor = allowedColors.includes(textColor)
+        ? textColor
+        : undefined;
+    const safeBgColor = allowedColors.includes(bgColor)
+        ? bgColor
+        : undefined;
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: safeTextColor,
+        backgroundColor: safeBgColor,
+        ...restProps,
+    });
+    // Prepare icon props for the shortcut. A truthiness test (not `!== undefined`)
+    // so a falsy node from the idiomatic `iconLeft={cond && <Node/>}` / `iconLeft={maybe ?? null}`
+    // pattern counts as "no icon" — otherwise `false`/`null` would reserve the icon column and
+    // mount an empty `.icon` span. A falsy `iconLeft` also correctly falls through to the
+    // `iconLeftName` shortcut, matching the pre-node behavior.
+    const leftIconValue = iconLeft ||
+        (iconLeftName
+            ? {
+                name: iconLeftName,
+                size: iconLeftSize,
+            }
+            : undefined);
+    const rightIconValue = iconRight ||
+        (iconRightName
+            ? {
+                name: iconRightName,
+                size: iconRightSize,
+            }
+            : undefined);
+    const mainClass = usePrefixedClassNames('control', {
+        'has-icons-left': hasIconsLeft || !!leftIconValue,
+        'has-icons-right': hasIconsRight || !!rightIconValue,
+        'is-loading': isLoading,
+        'is-expanded': isExpanded,
+        [`is-${size}`]: !!size,
+    });
+    const controlClass = classNames(mainClass, bulmaHelperClasses, className);
+    // --- FIX: Spread both restProps (for data-testid, etc) AND rest (from useBulmaClasses) ---
+    return (jsxRuntime.jsx(ControlProvider, { value: true, children: jsxRuntime.jsxs(Component, { className: controlClass, ref: ref, ...restProps, ...rest, children: [jsxRuntime.jsx(ControlLoadingProvider, { value: !!isLoading, children: children }), leftIconValue &&
+                    (isIconProps(leftIconValue) ? (jsxRuntime.jsx(Icon, { ...leftIconValue, className: prefixedClassNames(classPrefix, 'is-left') })) : (jsxRuntime.jsx(Icon, { className: prefixedClassNames(classPrefix, 'is-left'), children: leftIconValue }))), rightIconValue &&
+                    (isIconProps(rightIconValue) ? (jsxRuntime.jsx(Icon, { ...rightIconValue, className: prefixedClassNames(classPrefix, 'is-right') })) : (jsxRuntime.jsx(Icon, { className: prefixedClassNames(classPrefix, 'is-right'), children: rightIconValue })))] }) }));
+});
+Control.displayName = 'Control';
+
+/**
+ * FieldLabel component for rendering a Bulma field label. It renders the
+ * label column of a horizontal `Field` (a `div` with the `field-label` class),
+ * not a `<label>`, so text placed straight in it names nothing. Put a `<label>`
+ * with the `label` class inside it and point its `htmlFor` at the control's
+ * `id`, or give the horizontal `Field` a `label` prop, which renders this
+ * column and its `<label>` for you. A `<label>` you put here names the
+ * control through its `htmlFor` alone: a range `Slider`'s thumbs and an
+ * `Autocomplete`'s, a `Combobox`'s or a `Taginput`'s list point
+ * `aria-labelledby` at a `Field`'s label only when its `label` prop renders it
+ * and it names the control. Where it would not name the control on its own, as in an inner `Field`,
+ * pass `labelProps={{ htmlFor, id }}` with a matching `id` on the control.
+ *
+ * @function
+ * @param {FieldLabelProps} props - Props for the FieldLabel component.
+ * @returns {JSX.Element} The rendered field label.
+ *
+ * @example
+ * <FieldLabel size="normal">
+ *   <label className="label" htmlFor="name">Name</label>
+ * </FieldLabel>
+ */
+const FieldLabel = ({ size, textColor, bgColor, className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('field-label', {
+        [`is-${size}`]: !!size,
+    });
+    const fieldLabelClass = classNames(mainClass, bulmaHelperClasses, className);
+    // Spread ...props and ...rest so custom props like data-testid are included
+    return (jsxRuntime.jsx("div", { className: fieldLabelClass, ...props, ...rest, children: children }));
+};
+/**
+ * FieldBody component for rendering Bulma field body.
+ *
+ * @function
+ * @param {FieldBodyProps} props - Props for the FieldBody component.
+ * @returns {JSX.Element} The rendered field body.
+ *
+ * @example
+ * <FieldBody><input className="input" /></FieldBody>
+ */
+const FieldBody = ({ textColor, bgColor, className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('field-body');
+    const fieldBodyClass = classNames(mainClass, bulmaHelperClasses, className);
+    // Spread ...props and ...rest so custom props like data-testid are included
+    return (jsxRuntime.jsx("div", { className: fieldBodyClass, ...props, ...rest, children: children }));
+};
+/**
+ * The `Field` component is a Bulma-styled form field container.
+ *
+ * @function
+ * @param {FieldProps} props - Props for the Field component.
+ * @returns {JSX.Element} The rendered field container.
+ * @see {@link https://bulma.io/documentation/form/general/#field | Bulma Field documentation}
+ *
+ * @example
+ * // Labelled field — the label auto-associates with the composed base
+ * <Field label="Email">
+ *   <Control>
+ *     <InputBase type="email" />
+ *   </Control>
+ * </Field>
+ *
+ * @example
+ * // Horizontal field
+ * <Field horizontal label="Name">
+ *   <Control>
+ *     <InputBase />
+ *   </Control>
+ * </Field>
+ */
+const FieldComponent = ({ horizontal, grouped, hasAddons, narrow, label, labelSize, labelProps, textColor, color: _fieldColor, bgColor, className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('field', {
+        'is-horizontal': horizontal,
+        'has-addons': !!hasAddons,
+        'has-addons-centered': hasAddons === 'centered',
+        'has-addons-right': hasAddons === 'right',
+        'is-narrow': narrow,
+        'is-grouped': grouped === true ||
+            grouped === 'centered' ||
+            grouped === 'right' ||
+            grouped === 'multiline',
+        'is-grouped-centered': grouped === 'centered',
+        'is-grouped-right': grouped === 'right',
+        'is-grouped-multiline': grouped === 'multiline',
+    });
+    const fieldClass = classNames(mainClass, bulmaHelperClasses, className);
+    // Default labelSize to 'normal' when horizontal for proper baseline alignment
+    const effectiveLabelSize = labelSize ?? (horizontal ? 'normal' : undefined);
+    const labelClass = usePrefixedClassNames('label');
+    // Auto-associate the label with a single composed base control (#495): the
+    // label points at a generated id shared via context, which a composed base
+    // adopts when the user supplied no id of their own.
+    // Presence semantics on htmlFor — even an explicit `htmlFor: undefined`
+    // means the caller owns the association. Grouped/addons fields hold several
+    // controls, so no single association is generated for them.
+    const generatedId = React.useId();
+    const userWiredLabel = !!labelProps && 'htmlFor' in labelProps;
+    const targetId = label && !userWiredLabel && !grouped && !hasAddons
+        ? generatedId
+        : undefined;
+    // 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);
+    // What the rendered label's `for` points at, generated or the caller's, and
+    // the id it renders with, so a control can tell when a label wired by hand
+    // names it and point at that label. An unlabeled Field passes on its
+    // parent's. Unlike `targetId`, a label wired by hand passes on its own in
+    // `grouped`/`hasAddons` Fields too, on purpose: those only stop the Field
+    // picking one control out of several, and the caller's `for` has picked
+    // one, so a range Slider or Autocomplete it names points at that label in
+    // a row as well. A group reads the label element id below instead, which
+    // stays off for a label wired by hand, since no group takes its `for`.
+    const inheritedLabelFor = useFieldLabelFor();
+    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: renderedTargetId, ...labelProps, id: labelId, className: classNames(labelClass, labelProps?.className), style: labelProps?.style, children: label }) }));
+        }
+        else {
+            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
+    // a FieldBody — either as the single child, or as one element among siblings
+    // like <Field.Label/> + <Field.Body/>).
+    let content = children;
+    if (horizontal) {
+        const isFieldBody = (c) => React.isValidElement(c) &&
+            // @ts-expect-error displayName isn't on the public type
+            (c.type === FieldBody || c.type?.displayName === 'FieldBody');
+        const isFieldLabel = (c) => React.isValidElement(c) &&
+            // @ts-expect-error displayName isn't on the public type
+            (c.type === FieldLabel || c.type?.displayName === 'FieldLabel');
+        const childArray = React.Children.toArray(children);
+        const userProvidedStructure = childArray.some(c => isFieldBody(c) || isFieldLabel(c));
+        if (userProvidedStructure) {
+            content = children;
+        }
+        else {
+            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.jsx(FieldLabelForReportProvider, { value: targetId ? reportLabelFor : undefined, children: jsxRuntime.jsxs("div", { className: fieldClass, ...rest, children: [renderedLabel, content] }) }) }) }) }) }));
+};
+FieldLabel.displayName = 'FieldLabel';
+FieldBody.displayName = 'FieldBody';
+const Field = withSubComponents(FieldComponent, {
+    Label: FieldLabel,
+    Body: FieldBody,
+    Control,
+}, 'Field');
+
+/**
+ * Bulma Input component with full Bulma helper class support.
+ *
+ * @function
+ * @param {InputBaseProps} props - Props for the Input component.
+ * @returns {JSX.Element} The rendered input element.
+ * @see {@link https://bulma.io/documentation/form/input/ | Bulma Input documentation}
+ */
+const InputBase = React.forwardRef(({ color, size, isRounded, isStatic, isHovered, isFocused, isLoading, className, disabled, readOnly, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color,
+        ...props,
+    });
+    // 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,
+        'is-rounded': isRounded,
+        'is-static': isStatic,
+        'is-hovered': isHovered,
+        'is-focused': isFocused,
+        'is-loading': isLoading,
+    });
+    const inputClass = classNames(mainClass, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("input", { ref: ref, className: inputClass, disabled: disabled, readOnly: readOnly, ...rest, 
+        // After the spread, which may carry an undefined id key.
+        id: id }));
+});
+InputBase.displayName = 'InputBase';
+
+/**
+ * Associates the convenience `label` prop with its control (#368): generates
+ * an id for the control and returns labelProps carrying a matching `htmlFor`.
+ * 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). 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. 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, }) {
+    // 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, and the
+    // id that label renders with, read together so the id is that label's.
+    // Set in `grouped`/`hasAddons` Fields too when the label is wired by hand,
+    // since its `for` names this one control whatever the layout (see Field).
+    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 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;
+    // Only a label that names the control gets an id to point at, with the
+    // suffix Field gives its own, from an id that is already unique.
+    const ownLabelId = needsLabelId && active && labelled
+        ? (labelProps?.id ?? `${generatedId}-label`)
+        : undefined;
+    // Inactive with a label still means an own Field may render it (pickers'
+    // inline mode). 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
+        ? ownLabelId
+            ? { ...ownLabelProps, id: ownLabelId }
+            : ownLabelProps
+        : label
+            ? { htmlFor: undefined, ...labelProps }
+            : labelProps;
+    const labelId = needsLabelId && labelled
+        ? active
+            ? ownLabelId
+            : fieldLabelFor.id
+        : undefined;
+    return { controlId, fieldLabelProps, labelled, labelId };
+}
+/**
+ * Group-input counterpart of {@link useAutoLabelId} (#494): a group of
+ * controls cannot take a single `htmlFor`, so instead the rendered `<label>`
+ * gets a generated id and the group container points at it with
+ * `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`. 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, 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;
+    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 };
+}
+
+/**
+ * The `Input` component provides a Bulma-styled text input, supporting colors, sizes, rounded corners, static state, hover/focus/loading states, and all Bulma helper props.
+ *
+ * @function
+ * @param {InputProps} props - Props for Input.
+ * @returns {JSX.Element} The composed field element.
+ *
+ * @example
+ * <Input label="Username" placeholder="Enter username" iconLeftName="user" />
+ *
+ * @example
+ * <Input
+ *   label="Email"
+ *   type="email"
+ *   message="Please enter a valid email"
+ *   messageColor="danger"
+ *   color="danger"
+ * />
+ */
+const Input = React.forwardRef(({ 
+// Field props
+label, labelSize, labelProps, horizontal, 
+// Control props
+iconLeft, iconRight, iconLeftName, iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, 
+// Message props
+message, messageColor, 
+// Container class overrides
+fieldClassName, controlClassName, 
+// Everything else goes to Input
+...inputProps }, ref) => {
+    const insideField = useInsideField();
+    const insideControl = useInsideControl();
+    const ownField = rendersOwnField('Input', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
+    const ownControl = rendersOwnControl('Input', {
+        insideControl,
+        isLoading,
+        iconLeft,
+        iconLeftName,
+        iconLeftSize,
+        iconRight,
+        iconRightName,
+        iconRightSize,
+        hasIconsLeft,
+        hasIconsRight,
+        isExpanded,
+        controlSize,
+        controlClassName,
+    });
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: inputProps.id,
+        labelProps,
+        rendersLabel: ownField,
+    });
+    const helpClass = usePrefixedClassNames('help', {
+        [`is-${messageColor}`]: !!messageColor,
+    });
+    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 }));
+    }
+    const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
+    if (ownField) {
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
+});
+Input.displayName = 'Input';
+
+/** What names a Command that's given no `label`. */
+const defaultLabel = 'Commands';
+/** What a Command given `actions` shows when nothing matches, unless it's given `empty`. */
+const defaultEmpty = 'No results';
+// What the status region announces: the `Command.Empty` content, as the one
+// item it's handed while that content is on screen because of the user's
+// typing.
+const typedNoMatches$2 = [{ id: 'empty' }];
+const nothingToAnnounce$2 = [];
+/** Whether a slot was given something to show. */
+const isShown = (node) => node !== undefined && node !== null && node !== false && node !== '';
+const noop$1 = () => { };
+const registerNothing$1 = () => noop$1;
+// What a part rendered outside a Command reads: nothing to report to, so it
+// renders its markup and does nothing.
+const standalone$1 = {
+    engine: {
+        open: false,
+        expanded: false,
+        highlighted: null,
+        typed: false,
+        listboxId: '',
+        itemId: () => '',
+        rootRef: { current: null },
+        inputRef: { current: null },
+        listboxRef: { current: null },
+        registerPopup: registerNothing$1,
+        registerItem: registerNothing$1,
+        onKeyDown: noop$1,
+        onChange: noop$1,
+        onClick: noop$1,
+        onBlur: noop$1,
+        hover: noop$1,
+        pick: noop$1,
+        keepFocus: noop$1,
+        markInside: noop$1,
+    },
+    label: defaultLabel,
+    query: '',
+    onFieldChange: noop$1,
+    reportLoading: noop$1,
+    reportEmpty: registerNothing$1,
+    registerHandler: registerNothing$1,
+};
+const CommandContext = React.createContext(null);
+const useCommand = () => React.useContext(CommandContext) ?? standalone$1;
+/** Hands a node to a forwarded ref and to one of the component's own. */
+function setRefs$1(node, own, forwarded) {
+    own.current = node;
+    if (typeof forwarded === 'function')
+        forwarded(node);
+    else if (forwarded)
+        forwarded.current = node;
+}
+/**
+ * The default filter: the actions whose label, keywords or description hold
+ * the search, ignoring case and the spaces around it, label matches first and
+ * the order otherwise kept. An empty search keeps them all.
+ */
+const filterActions = (query, actions) => {
+    const term = query.trim().toLowerCase();
+    if (term === '')
+        return actions;
+    const byLabel = [];
+    const byOther = [];
+    for (const action of actions) {
+        if (action.label.toLowerCase().includes(term)) {
+            byLabel.push(action);
+        }
+        else if (action.description?.toLowerCase().includes(term) ||
+            action.keywords?.some(keyword => keyword.toLowerCase().includes(term))) {
+            byOther.push(action);
+        }
+    }
+    return [...byLabel, ...byOther];
+};
+/** The search icon at the start of the field. */
+const SearchIcon = () => (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", width: "1em", height: "1em", focusable: "false", children: [jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "4.75" }), jsxRuntime.jsx("path", { d: "M10.5 10.5L14 14" })] }));
+/**
+ * The Command built from parts: the field, the list, the keys and the run,
+ * with the items and their filtering left to the app.
+ */
+const CommandParts = React.forwardRef(({ children, label, query: controlledQuery, defaultQuery = '', onQueryChange, onSelect, className, ...props }, ref) => {
+    const [ownQuery, setOwnQuery] = React.useState(defaultQuery);
+    const query = controlledQuery ?? ownQuery;
+    // Each item's `onSelect`, by value, read when it runs.
+    const handlersRef = React.useRef(new Map());
+    const registerHandler = React.useCallback((value, handler) => {
+        const handlers = handlersRef.current;
+        handlers.set(value, handler);
+        return () => {
+            if (handlers.get(value) === handler)
+                handlers.delete(value);
+        };
+    }, []);
+    const run = (value) => {
+        handlersRef.current.get(value)?.current?.();
+        onSelect?.(value);
+    };
+    // Inline: the list is always on screen, nothing opens or closes it, and
+    // Escape goes on to what's around it. `keepFirst` keeps the highlight on
+    // the top match, so Enter runs it.
+    const engine = useComboboxEngine({
+        defaultOpen: true,
+        onSelect: run,
+        keepFirst: true,
+        multiple: false,
+        inline: true,
+        deferred: false,
+    });
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const rootClass = usePrefixedClassNames('command');
+    // A polite status region, in the page from the start so it's there
+    // before anything is written into it, announces `Command.Empty` when the
+    // user's typing leaves it on screen: once each time that happens, not
+    // again on each keystroke while it stays. An empty search isn't a search,
+    // so it stays quiet then, and while the field's `isLoading` says results
+    // are on their way, it waits.
+    const [inputLoading, setInputLoading] = React.useState(false);
+    const emptyRef = React.useRef(null);
+    const [emptyShown, setEmptyShown] = React.useState(false);
+    const announced = engine.typed && query !== '' && emptyShown && !inputLoading
+        ? typedNoMatches$2
+        : nothingToAnnounce$2;
+    // The region reads the text on screen, whatever the message renders.
+    const describeEmpty = React.useCallback(() => {
+        const node = emptyRef.current;
+        /* istanbul ignore if: it's only announced while it's on screen */
+        if (!node)
+            return null;
+        return spokenText(node);
+    }, []);
+    const reportEmpty = React.useCallback((element) => {
+        emptyRef.current = element;
+        setEmptyShown(true);
+        return () => {
+            emptyRef.current = null;
+            setEmptyShown(false);
+        };
+    }, []);
+    const onFieldChange = (value) => {
+        if (controlledQuery === undefined)
+            setOwnQuery(value);
+        onQueryChange?.(value);
+        engine.onChange();
+    };
+    // A new value each render: the engine's state and handlers are, and the
+    // parts read the highlight from it.
+    const context = {
+        engine,
+        label: label || defaultLabel,
+        query,
+        onFieldChange,
+        reportLoading: setInputLoading,
+        reportEmpty,
+        registerHandler,
+    };
+    const { rootRef } = engine;
+    const rootRefs = React.useCallback((node) => setRefs$1(node, rootRef, ref), [rootRef, ref]);
+    return (jsxRuntime.jsxs("div", { className: classNames(rootClass, bulmaHelperClasses, className), ...rest, ref: rootRefs, children: [jsxRuntime.jsx(CommandContext.Provider, { value: context, children: children }), jsxRuntime.jsx(StatusRegion, { items: announced, describe: describeEmpty })] }));
+});
+CommandParts.displayName = 'CommandParts';
+/**
+ * The search field, with the combobox role and the keys, rendered as an `Input` with a search icon.
+ *
+ * @function
+ * @param {CommandInputProps} props - Props for the Command.Input component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the `<input>`.
+ * @returns {JSX.Element} The field in its Control.
+ */
+const CommandInput = React.forwardRef(({ isLoading, iconLeft, iconLeftName, onKeyDown, onChange, onClick, onBlur, 'aria-autocomplete': ariaAutocomplete, ...props }, ref) => {
+    const context = useCommand();
+    const { engine, reportLoading } = context;
+    useClientLayoutEffect(() => {
+        reportLoading(!!isLoading);
+        return () => reportLoading(false);
+    }, [reportLoading, isLoading]);
+    const { inputRef } = engine;
+    const inputRefs = React.useCallback((node) => setRefs$1(node, inputRef, ref), [inputRef, ref]);
+    const { expanded, highlighted } = engine;
+    // A name the caller gave the field wins over the Command's `label`.
+    const callerNamed = !!props['aria-label'] || 'aria-labelledby' in props;
+    return (jsxRuntime.jsx(Input, { autoCorrect: "off", spellCheck: false, ...props, ref: inputRefs, value: context.query, iconLeft: iconLeft === undefined && !iconLeftName ? jsxRuntime.jsx(SearchIcon, {}) : iconLeft, iconLeftName: iconLeftName, isLoading: isLoading, "aria-label": callerNamed ? props['aria-label'] : context.label, role: "combobox", "aria-autocomplete": ariaAutocomplete ?? 'list', "aria-haspopup": "listbox", "aria-expanded": expanded, "aria-controls": expanded ? engine.listboxId : undefined, "aria-activedescendant": expanded && highlighted !== null
+            ? engine.itemId(highlighted)
+            : undefined, autoComplete: "off", onKeyDown: event => {
+            onKeyDown?.(event);
+            engine.onKeyDown(event);
+        }, onChange: event => {
+            onChange?.(event);
+            context.onFieldChange(event.target.value);
+        }, onClick: event => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                engine.onClick();
+        }, onBlur: event => {
+            onBlur?.(event);
+            engine.onBlur(event);
+        } }));
+});
+CommandInput.displayName = 'CommandInput';
+/**
+ * The list of items, a `listbox` named by the Command's `label`.
+ *
+ * @function
+ * @param {CommandListProps} props - Props for the Command.List component.
+ * @returns {JSX.Element} The listbox.
+ */
+const CommandList = ({ children, className, onMouseDown, ...props }) => {
+    const { engine, label } = useCommand();
+    const { listboxRef, listboxId, keepFocus } = engine;
+    const listClass = usePrefixedClassNames('command-list');
+    // A name the caller gave the list wins over the Command's.
+    const callerNamed = !!props['aria-label'] || 'aria-labelledby' in props;
+    return (jsxRuntime.jsx("div", { className: classNames(listClass, className), ...props, ref: listboxRef, id: listboxId || undefined, role: "listbox", "aria-label": callerNamed ? props['aria-label'] : label, onMouseDown: event => {
+            onMouseDown?.(event);
+            keepFocus(event);
+        }, children: children }));
+};
+CommandList.displayName = 'CommandList';
+/**
+ * Items under a heading, a `group` named by it.
+ *
+ * @function
+ * @param {CommandGroupProps} props - Props for the Command.Group component.
+ * @returns {JSX.Element} The group and its heading.
+ */
+const CommandGroup = ({ label, children, className, ...props }) => {
+    const labelId = React.useId();
+    const groupClass = usePrefixedClassNames('command-group');
+    const labelClass = usePrefixedClassNames('command-group-label');
+    // A name the caller gave the group wins over its heading's, as on the list.
+    const callerNamed = !!props['aria-label'] || 'aria-labelledby' in props;
+    return (jsxRuntime.jsxs("div", { className: classNames(groupClass, className), ...props, role: "group", "aria-labelledby": callerNamed ? props['aria-labelledby'] : labelId, children: [jsxRuntime.jsx("div", { className: labelClass, id: labelId, children: label }), children] }));
+};
+CommandGroup.displayName = 'CommandGroup';
+/**
+ * One thing to do in the list, named by its label and described by its description and hint.
+ *
+ * @function
+ * @param {CommandItemProps} props - Props for the Command.Item component.
+ * @returns {JSX.Element} The item.
+ */
+const CommandItem = ({ value, disabled = false, onSelect, icon, description, hint, children, className, onClick, onPointerMove, ...props }) => {
+    const { engine, registerHandler } = useCommand();
+    const itemRef = React.useRef(null);
+    const { registerItem } = engine;
+    useClientLayoutEffect(() => registerItem(itemRef.current, {
+        value,
+        disabled,
+        checked: false,
+    }), [registerItem, value, disabled]);
+    const onSelectRef = useLatestRef(onSelect);
+    useClientLayoutEffect(() => registerHandler(value, onSelectRef), [registerHandler, value, onSelectRef]);
+    const highlighted = engine.highlighted === value;
+    const itemClass = usePrefixedClassNames('command-item', {
+        'is-active': highlighted,
+        'is-disabled': disabled,
+    });
+    const iconClass = usePrefixedClassNames('command-item-icon');
+    const bodyClass = usePrefixedClassNames('command-item-body');
+    const labelClass = usePrefixedClassNames('command-item-label');
+    const descriptionClass = usePrefixedClassNames('command-item-description');
+    const hintClass = usePrefixedClassNames('command-item-hint');
+    // Named by its label alone, so a screen reader says what it does before
+    // the rest, and described by the description and the hint.
+    const baseId = React.useId();
+    const labelId = `${baseId}label`;
+    const descriptionId = isShown(description)
+        ? `${baseId}description`
+        : undefined;
+    const hintId = isShown(hint) ? `${baseId}hint` : undefined;
+    const describedBy = [descriptionId, hintId].filter(Boolean).join(' ') || undefined;
+    const callerNamed = !!props['aria-label'] || 'aria-labelledby' in props;
+    return (jsxRuntime.jsxs("div", { className: classNames(itemClass, className), "aria-describedby": describedBy, ...props, ref: itemRef, id: engine.itemId(value) || undefined, role: "option", "aria-selected": disabled ? undefined : highlighted || undefined, "aria-disabled": disabled || undefined, "aria-labelledby": callerNamed ? props['aria-labelledby'] : labelId, onClick: event => {
+            onClick?.(event);
+            if (!disabled && !event.defaultPrevented)
+                engine.pick(value);
+        }, onPointerMove: event => {
+            onPointerMove?.(event);
+            if (!disabled && !highlighted)
+                engine.hover(value);
+        }, children: [isShown(icon) && (jsxRuntime.jsx("span", { className: iconClass, "aria-hidden": "true", children: icon })), jsxRuntime.jsxs("span", { className: bodyClass, children: [jsxRuntime.jsx("span", { className: labelClass, id: labelId, children: children }), descriptionId && (jsxRuntime.jsx("span", { className: descriptionClass, id: descriptionId, children: description }))] }), hintId && (jsxRuntime.jsx("span", { className: hintClass, id: hintId, children: hint }))] }));
+};
+CommandItem.displayName = 'CommandItem';
+/**
+ * The message shown in place of the list when nothing matches, announced when typing brings it on screen.
+ *
+ * @function
+ * @param {CommandEmptyProps} props - Props for the Command.Empty component.
+ * @returns {JSX.Element} The message.
+ */
+const CommandEmpty = ({ children, className, onMouseDown, ...props }) => {
+    const { engine, reportEmpty } = useCommand();
+    const emptyRef = React.useRef(null);
+    useClientLayoutEffect(() => reportEmpty(emptyRef.current), [reportEmpty]);
+    const emptyClass = usePrefixedClassNames('command-empty');
+    return (jsxRuntime.jsx("div", { className: classNames(emptyClass, className), ...props, ref: emptyRef, onMouseDown: event => {
+            onMouseDown?.(event);
+            engine.keepFocus(event);
+        }, children: children }));
+};
+CommandEmpty.displayName = 'CommandEmpty';
+/**
+ * The field, and the actions that match the search, grouped, or the empty
+ * message. The search is the parts root's, read from its context.
+ */
+const CommandActionsContent = ({ actions, filter = filterActions, placeholder, empty, }) => {
+    const { query } = useCommand();
+    const shown = filter(query, actions);
+    // Each group where the matches first name it, and the actions with none
+    // together where the first of them is, so the best match stays on top.
+    const sections = new Map();
+    for (const action of shown) {
+        const group = action.group ?? '';
+        sections.set(group, [...(sections.get(group) ?? []), action]);
+    }
+    const renderItem = (action) => (jsxRuntime.jsx(CommandItem, { value: action.id, disabled: action.disabled, icon: action.icon, description: action.description, hint: action.hint, onSelect: action.onSelect, children: action.label }, action.id));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CommandInput, { placeholder: placeholder }), shown.length > 0 ? (jsxRuntime.jsx(CommandList, { children: Array.from(sections, ([group, members]) => group ? (jsxRuntime.jsx(CommandGroup, { label: group, children: members.map(renderItem) }, group)) : (members.map(renderItem))) })) : isShown(empty) ? (jsxRuntime.jsx(CommandEmpty, { children: empty })) : null] }));
+};
+/**
+ * The Command given `actions`. It renders the parts itself and filters the
+ * actions as the user types, so a run goes through the same parts, keys and
+ * ARIA as one built by hand.
+ */
+const CommandFromActions = React.forwardRef(({ actions, filter, placeholder, empty = defaultEmpty, children, ...rest }, ref) => {
+    if (flattenChildren(children).length > 0) {
+        warnOnce('Command:actions-children', '[bestax-bulma] <Command actions> renders its own field and items, ' +
+            'so its children are ignored. Give it actions or build it from ' +
+            'parts, not both.');
+    }
+    return (jsxRuntime.jsx(CommandParts, { ...rest, ref: ref, children: jsxRuntime.jsx(CommandActionsContent, { actions: actions, filter: filter, placeholder: placeholder, empty: empty }) }));
+});
+CommandFromActions.displayName = 'CommandFromActions';
+/**
+ * The `Command` component is a search field over a list of things to do, which narrows as you type and runs the top match on Enter: inline by default, and a command palette in a modal as `Command.Dialog`.
+ *
+ * Given `actions`, it's one element. It renders the field, the list, the
+ * groups and the empty message, and filters the actions by label, keywords
+ * and description as the user types, with label matches first. `filter`
+ * takes over the matching, for fuzzy search.
+ *
+ * Built from parts, the app owns the items: what's in the list and how it's
+ * filtered, from the search `onQueryChange` reports. Nothing filters them,
+ * so a server's answer shows as it came.
+ *
+ * Either way, focus stays in the field, and the highlighted item is its
+ * `aria-activedescendant`. The first enabled item is highlighted whenever
+ * the items change, so Enter runs the top match. Running an item calls its
+ * own `onSelect`, then the Command's.
+ *
+ * When typing leaves the empty message on screen, its text is announced
+ * through a polite status region, once, after any loading ends. Result
+ * counts aren't announced: a screen reader reads the list's size from the
+ * markup, and a count on every keystroke talks over the typing.
+ *
+ * @function
+ * @param {CommandProps} props - Props for the Command component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `div.command`.
+ * @returns {JSX.Element} The field and its list.
+ *
+ * @example
+ * <Command
+ *   label="Settings"
+ *   placeholder="Search settings"
+ *   actions={[
+ *     { id: 'profile', label: 'Edit profile', onSelect: openProfile },
+ *     { id: 'theme', label: 'Dark mode', keywords: ['theme'], onSelect: toggleTheme },
+ *   ]}
+ * />
+ *
+ * @example
+ * <Command label="People" onQueryChange={setQuery} onSelect={openProfile}>
+ *   <Command.Input placeholder="Find a person" />
+ *   {matches.length > 0 ? (
+ *     <Command.List>
+ *       {matches.map(person => (
+ *         <Command.Item key={person.id} value={person.id}>
+ *           {person.name}
+ *         </Command.Item>
+ *       ))}
+ *     </Command.List>
+ *   ) : (
+ *     <Command.Empty>No one matches</Command.Empty>
+ *   )}
+ * </Command>
+ */
+const CommandRoot = React.forwardRef((props, ref) => props.actions === undefined ? (jsxRuntime.jsx(CommandParts, { ...props, ref: ref })) : (jsxRuntime.jsx(CommandFromActions, { ...props, ref: ref })));
+/** Other names a key goes by in a `shortcut`, for the ones `key` spells otherwise. */
+const keyAliases = {
+    space: ' ',
+    esc: 'escape',
+};
+/**
+ * Reads a `shortcut` such as `"mod+k"` or `"ctrl + shift + p"`.
+ *
+ * @param shortcut - Modifiers and a key, joined by `+`.
+ * @returns The combination, or `null` when it doesn't read as one.
+ */
+const parseShortcut = (shortcut) => {
+    const parts = shortcut
+        .toLowerCase()
+        .split('+')
+        .map(part => part.trim());
+    const key = parts.pop();
+    if (key === '')
+        return null;
+    const parsed = {
+        key: keyAliases[key] ?? key,
+        mod: false,
+        ctrl: false,
+        meta: false,
+        alt: false,
+        shift: false,
+    };
+    for (const part of parts) {
+        if (part === 'mod')
+            parsed.mod = true;
+        else if (part === 'ctrl' || part === 'control')
+            parsed.ctrl = true;
+        else if (part === 'meta' || part === 'cmd' || part === 'command')
+            parsed.meta = true;
+        else if (part === 'alt' || part === 'option')
+            parsed.alt = true;
+        else if (part === 'shift')
+            parsed.shift = true;
+        else
+            return null;
+    }
+    return parsed;
+};
+/**
+ * Whether a keydown is the combination. `mod` takes Ctrl or ⌘, and any other
+ * modifier has to be as the combination says, so `mod+k` isn't
+ * `mod+shift+k`. A letter or digit is matched by its key, and by where it
+ * sits on the keyboard only when the key isn't a Latin letter or digit at
+ * all, as on a Cyrillic layout or with Option held on a Mac, so another
+ * Latin layout's own letters keep their own shortcuts.
+ */
+const matchesShortcut = (event, shortcut) => {
+    if (event.altKey !== shortcut.alt)
+        return false;
+    // A symbol such as `?` already says whether Shift was down, and which key
+    // takes Shift to type it depends on the layout, so Shift is only checked
+    // for a letter, a digit or a named key, unless the combination names it.
+    const shiftMatters = shortcut.shift ||
+        shortcut.key.length > 1 ||
+        /^[a-z0-9]$/.test(shortcut.key);
+    if (shiftMatters && event.shiftKey !== shortcut.shift)
+        return false;
+    if (shortcut.mod) {
+        if (!event.ctrlKey && !event.metaKey)
+            return false;
+    }
+    else if (event.ctrlKey !== shortcut.ctrl ||
+        event.metaKey !== shortcut.meta) {
+        return false;
+    }
+    const key = (event.key ?? '').toLowerCase();
+    if (key === shortcut.key)
+        return true;
+    if (/^[a-z0-9]$/.test(key))
+        return false;
+    if (/^[a-z]$/.test(shortcut.key)) {
+        return event.code === `Key${shortcut.key.toUpperCase()}`;
+    }
+    if (/^[0-9]$/.test(shortcut.key)) {
+        return event.code === `Digit${shortcut.key}`;
+    }
+    return false;
+};
+/** Input types that take no typing, so a shortcut pressed in one still counts. */
+const untypedInputs = new Set([
+    'button',
+    'checkbox',
+    'color',
+    'file',
+    'hidden',
+    'image',
+    'radio',
+    'range',
+    'reset',
+    'submit',
+]);
+/**
+ * Whether a keydown happened while the user was typing: in a text field, a
+ * text area, a select, or editable content. The composed path's first entry
+ * is the element itself, even inside a shadow root.
+ */
+const isTyping = (event) => {
+    const target = event.composedPath()[0];
+    if (typeof target?.closest !== 'function')
+        return false;
+    const element = target;
+    const editable = element.closest('[contenteditable]');
+    if (editable && editable.getAttribute('contenteditable') !== 'false') {
+        return true;
+    }
+    const tag = element.tagName;
+    if (tag === 'TEXTAREA' || tag === 'SELECT')
+        return true;
+    return (tag === 'INPUT' &&
+        !untypedInputs.has(element.type.toLowerCase()));
+};
+/**
+ * The Command in a modal, a command palette, opened by its `shortcut` or by `open`, that closes once an item has run.
+ *
+ * It renders nothing while it's closed. Open, it's a `Modal` with a
+ * background and the Command's box as the `dialog`, named by `label`:
+ * focus goes to the search field, Tab stays inside, Escape and a click on
+ * the background close it, the page behind it doesn't scroll, and focus goes
+ * back to where it was when it closes.
+ *
+ * @function
+ * @param {CommandDialogProps} props - Props for the Command.Dialog component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `div.command` that is the dialog.
+ * @returns {JSX.Element | null} The dialog, or nothing while it's closed.
+ */
+const CommandDialog = React.forwardRef(({ open: controlledOpen, defaultOpen = false, onOpenChange, shortcut, closeOnSelect = true, clearOnClose = true, portal, label, query: controlledQuery, defaultQuery = '', onQueryChange, onSelect, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) => {
+    const [ownOpen, setOwnOpen] = React.useState(defaultOpen);
+    const open = controlledOpen ?? ownOpen;
+    // Only ever asked for the other state: the shortcut listens while it's
+    // closed, and everything that closes it is there while it's open.
+    const setOpen = (next) => {
+        if (controlledOpen === undefined)
+            setOwnOpen(next);
+        onOpenChange?.(next);
+    };
+    // The search is held here rather than in the Command, which is only
+    // mounted while the dialog is open, so it can outlive a close when
+    // `clearOnClose` is off.
+    const [ownQuery, setOwnQuery] = React.useState(defaultQuery);
+    const query = controlledQuery ?? ownQuery;
+    const setQuery = (next) => {
+        if (controlledQuery === undefined)
+            setOwnQuery(next);
+        onQueryChange?.(next);
+    };
+    // Closing clears the search, however the dialog closed. Our own is
+    // cleared during render, React's pattern for adjusting state when other
+    // state changes, and a controlled one is asked for after the commit.
+    const [shownOpen, setShownOpen] = React.useState(open);
+    if (shownOpen !== open) {
+        setShownOpen(open);
+        if (!open && clearOnClose && controlledQuery === undefined) {
+            setOwnQuery('');
+        }
+    }
+    const wasOpenRef = React.useRef(open);
+    const clearRef = useLatestRef(() => {
+        if (clearOnClose && controlledQuery !== undefined && query !== '') {
+            onQueryChange?.('');
+        }
+    });
+    React.useEffect(() => {
+        const wasOpen = wasOpenRef.current;
+        wasOpenRef.current = open;
+        if (wasOpen && !open)
+            clearRef.current();
+    }, [open, clearRef]);
+    if (controlledOpen === undefined && !defaultOpen && !shortcut) {
+        warnOnce('Command.Dialog:no-opener', '[bestax-bulma] <Command.Dialog> has no way to open. Give it a ' +
+            'shortcut, or open and onOpenChange.');
+    }
+    if (shortcut && !parseShortcut(shortcut)) {
+        warnOnce(`Command.Dialog:shortcut:${shortcut}`, `[bestax-bulma] <Command.Dialog> can't read the shortcut ` +
+            `"${shortcut}". Write modifiers and a key joined by +, such as ` +
+            `"mod+k", where the modifiers are mod, ctrl, meta, alt and shift.`);
+    }
+    const openFromShortcut = useLatestRef(() => setOpen(true));
+    React.useEffect(() => {
+        const combination = shortcut ? parseShortcut(shortcut) : null;
+        if (!combination || open)
+            return undefined;
+        const onKeyDown = (event) => {
+            if (event.defaultPrevented ||
+                event.isComposing ||
+                event.keyCode === 229 ||
+                !matchesShortcut(event, combination) ||
+                isTyping(event) ||
+                // A Modal, a Dialog, a Sidebar with its overlay or a full-page
+                // Loading has the page shut off, so the key isn't the page's. A
+                // Sidebar without one leaves the page in use, so it still opens.
+                isModalOverlayOpen()) {
+                return;
+            }
+            // The browser's own use of the combination, such as Ctrl+K's search
+            // in the address bar, doesn't happen as well.
+            event.preventDefault();
+            openFromShortcut.current();
+        };
+        // On `window`, where a keydown arrives last, so anything on the page
+        // that used the key first has said so with `preventDefault()`.
+        window.addEventListener('keydown', onKeyDown);
+        return () => window.removeEventListener('keydown', onKeyDown);
+    }, [shortcut, open, openFromShortcut]);
+    const dialogClass = usePrefixedClassNames('command-dialog');
+    if (!open)
+        return null;
+    const close = () => setOpen(false);
+    const run = (value) => {
+        onSelect?.(value);
+        if (closeOnSelect)
+            close();
+    };
+    return (jsxRuntime.jsxs(Modal, { isActive: true, onClose: close, role: "presentation", portal: portal, children: [jsxRuntime.jsx(Modal.Background, { onClick: close }), jsxRuntime.jsx(CommandRoot, { ...props, ref: ref, className: classNames(dialogClass, className), label: label, query: query, onQueryChange: setQuery, onSelect: run, role: "dialog", "aria-modal": "true", "aria-label": ariaLabelledBy === undefined
+                    ? ariaLabel || label || defaultLabel
+                    : ariaLabel, "aria-labelledby": ariaLabelledBy })] }));
+});
+CommandDialog.displayName = 'CommandDialog';
+/** Command with Input, List, Group, Item, Empty and Dialog sub-components. */
+const Command = withSubComponents(CommandRoot, {
+    Input: CommandInput,
+    List: CommandList,
+    Group: CommandGroup,
+    Item: CommandItem,
+    Empty: CommandEmpty,
+    Dialog: CommandDialog,
+}, 'Command');
+
 /**
  * The `Block` component renders a simple container with Bulma's `.block` class, adding vertical margin between sections of content.
  *
@@ -11739,64 +13215,20 @@ const FigureComponent = ({ className, textColor, bgColor, children, ...props })
     });
     const bulmaClasses = usePrefixedClassNames();
     const figureClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("figure", { className: figureClasses || undefined, ...rest, children: children }));
-};
-/**
- * Figure component with Caption subcomponent.
- *
- * @example
- * <Figure>
- *   <img src="image.jpg" alt="Description" />
- *   <Figure.Caption>Image caption text</Figure.Caption>
- * </Figure>
- */
-const Figure = withSubComponents(FigureComponent, {
-    Caption: FigureCaption,
-}, 'Figure');
-
-/**
- * Distinguishes an `IconProps` object from a plain custom node (an inline SVG, a
- * `react-icons` component, …) in a slot that accepts either — `Control`'s
- * `iconLeft`/`iconRight`, `IconText`'s `iconProps`.
- *
- * One copy, imported by both consumers: two hand-maintained copies, one per
- * consumer, is how the deprecated `icon` path came to crash both (#663).
- *
- * Its own module rather than `Icon.tsx` because `src/index.ts` wildcard-exports
- * that file, and everything published there is public forever. `polymorphic.ts`
- * makes the same call for `isCustomElement`: an internal discriminator is not
- * something to support for the life of the package.
- *
- * It tests each member's VALUE, not merely its key, and only after everything
- * React owns is out of the way. `'icon' in value` was enough
- * to claim a Font Awesome `IconDefinition` — `{ prefix, iconName, icon: [w, h, …,
- * path] }` — whose `icon` is a path array rather than a class string. That object
- * is not a renderable node either, so the honest outcome is the one this slot has
- * always had for it: the node branch, and React's own "Objects are not valid as a
- * React child". Claiming it here instead rendered a blank container that still
- * reserved layout.
- *
- * A member added to `IconProps` needs a line here, and a missed one is a crash
- * rather than a fallthrough. That is the cost of a slot taking either a props
- * object or a node; keeping the guard in one place is what keeps the cost to a
- * single line.
- */
-function isIconProps(value) {
-    if (typeof value !== 'object' || value === null)
-        return false;
-    // Anything React owns. `isValidElement` covers elements only; a PORTAL is a
-    // valid `ReactNode` that fails it and carries a `children` key, so the member
-    // test below claimed it and `Control` spread it into `<Icon>` as props —
-    // rendering the portal's child locally instead of in its container. Every
-    // React internal carries `$$typeof`, so testing for it covers lazy, context
-    // and whatever React adds next, rather than portals alone.
-    if (React.isValidElement(value) || '$$typeof' in value)
-        return false;
-    const candidate = value;
-    return (typeof candidate.name === 'string' ||
-        typeof candidate.icon === 'string' ||
-        'children' in candidate);
-}
+    return (jsxRuntime.jsx("figure", { className: figureClasses || undefined, ...rest, children: children }));
+};
+/**
+ * Figure component with Caption subcomponent.
+ *
+ * @example
+ * <Figure>
+ *   <img src="image.jpg" alt="Description" />
+ *   <Figure.Caption>Image caption text</Figure.Caption>
+ * </Figure>
+ */
+const Figure = withSubComponents(FigureComponent, {
+    Caption: FigureCaption,
+}, 'Figure');
 
 /**
  * The `IconText` component provides a Bulma-styled horizontal arrangement of one or more `Icon` components and optional text.
@@ -12881,392 +14313,150 @@ const UnorderedListComponent = ({ className, textColor, bgColor, children, ...pr
         backgroundColor: bgColor,
         ...props,
     });
-    const bulmaClasses = usePrefixedClassNames();
-    const listClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("ul", { className: listClasses || undefined, ...rest, children: children }));
-};
-const UnorderedList = withSubComponents(UnorderedListComponent, { Item: ListItem }, 'UnorderedList');
-
-// Whether the nearest enclosing `Control` shows its `isLoading` spinner. The
-// picker bases read it so their right-side launcher gives way to that
-// spinner, which sits at the same edge, whether the `Control` is the one a
-// convenience input renders or one the caller wrapped around the input.
-// Autocomplete reads it for its clear button, which sits there too.
-// Kept apart from `FormContext`, whose contexts only report whether a `Field`
-// or `Control` is present. Internal; not part of the public API.
-const ControlLoadingContext = React.createContext(false);
-/** Provider for the loading state, used internally by `Control`. */
-const ControlLoadingProvider = ControlLoadingContext.Provider;
-/** Whether the nearest enclosing `Control` is loading; `false` outside one. */
-const useControlLoading = () => React.useContext(ControlLoadingContext);
-
-const allowedColors = [...validColors, 'inherit', 'current'];
-/**
- * The `Control` component is a Bulma-styled wrapper for form controls (`Input`, `Select`, `TextArea`, etc.), supporting icons (left/right), loading state, expansion, size, and Bulma helper props for layout and color.
- *
- * @function
- * @param {ControlProps} props - Props for the Control component.
- * @returns {JSX.Element} The rendered control container.
- * @see {@link https://bulma.io/documentation/form/general/#control | Bulma Control documentation}
- *
- * @example
- * // Control with left icon
- * <Control iconLeftName="envelope" iconLeftSize="small">
- *   <input className="input" type="email" placeholder="Email" />
- * </Control>
- */
-const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isLoading, isExpanded, size, textColor, bgColor, iconLeft, iconRight, iconLeftName, iconLeftSize, iconRightName, iconRightSize, className, children, ...props }, ref) => {
-    const Component = (as === 'p' ? 'p' : 'div');
-    const { classPrefix } = useConfig();
-    // Remove textColor/bgColor from props before spreading
-    const { textColor: _ignoredTextColor, bgColor: _ignoredBgColor, ...restProps } = props;
-    const safeTextColor = allowedColors.includes(textColor)
-        ? textColor
-        : undefined;
-    const safeBgColor = allowedColors.includes(bgColor)
-        ? bgColor
-        : undefined;
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: safeTextColor,
-        backgroundColor: safeBgColor,
-        ...restProps,
-    });
-    // Prepare icon props for the shortcut. A truthiness test (not `!== undefined`)
-    // so a falsy node from the idiomatic `iconLeft={cond && <Node/>}` / `iconLeft={maybe ?? null}`
-    // pattern counts as "no icon" — otherwise `false`/`null` would reserve the icon column and
-    // mount an empty `.icon` span. A falsy `iconLeft` also correctly falls through to the
-    // `iconLeftName` shortcut, matching the pre-node behavior.
-    const leftIconValue = iconLeft ||
-        (iconLeftName
-            ? {
-                name: iconLeftName,
-                size: iconLeftSize,
-            }
-            : undefined);
-    const rightIconValue = iconRight ||
-        (iconRightName
-            ? {
-                name: iconRightName,
-                size: iconRightSize,
-            }
-            : undefined);
-    const mainClass = usePrefixedClassNames('control', {
-        'has-icons-left': hasIconsLeft || !!leftIconValue,
-        'has-icons-right': hasIconsRight || !!rightIconValue,
-        'is-loading': isLoading,
-        'is-expanded': isExpanded,
-        [`is-${size}`]: !!size,
-    });
-    const controlClass = classNames(mainClass, bulmaHelperClasses, className);
-    // --- FIX: Spread both restProps (for data-testid, etc) AND rest (from useBulmaClasses) ---
-    return (jsxRuntime.jsx(ControlProvider, { value: true, children: jsxRuntime.jsxs(Component, { className: controlClass, ref: ref, ...restProps, ...rest, children: [jsxRuntime.jsx(ControlLoadingProvider, { value: !!isLoading, children: children }), leftIconValue &&
-                    (isIconProps(leftIconValue) ? (jsxRuntime.jsx(Icon, { ...leftIconValue, className: prefixedClassNames(classPrefix, 'is-left') })) : (jsxRuntime.jsx(Icon, { className: prefixedClassNames(classPrefix, 'is-left'), children: leftIconValue }))), rightIconValue &&
-                    (isIconProps(rightIconValue) ? (jsxRuntime.jsx(Icon, { ...rightIconValue, className: prefixedClassNames(classPrefix, 'is-right') })) : (jsxRuntime.jsx(Icon, { className: prefixedClassNames(classPrefix, 'is-right'), children: rightIconValue })))] }) }));
-});
-Control.displayName = 'Control';
-
-/**
- * FieldLabel component for rendering a Bulma field label. It renders the
- * label column of a horizontal `Field` (a `div` with the `field-label` class),
- * not a `<label>`, so text placed straight in it names nothing. Put a `<label>`
- * with the `label` class inside it and point its `htmlFor` at the control's
- * `id`, or give the horizontal `Field` a `label` prop, which renders this
- * column and its `<label>` for you. A `<label>` you put here names the
- * control through its `htmlFor` alone: a range `Slider`'s thumbs and an
- * `Autocomplete`'s, a `Combobox`'s or a `Taginput`'s list point
- * `aria-labelledby` at a `Field`'s label only when its `label` prop renders it
- * and it names the control. Where it would not name the control on its own, as in an inner `Field`,
- * pass `labelProps={{ htmlFor, id }}` with a matching `id` on the control.
- *
- * @function
- * @param {FieldLabelProps} props - Props for the FieldLabel component.
- * @returns {JSX.Element} The rendered field label.
- *
- * @example
- * <FieldLabel size="normal">
- *   <label className="label" htmlFor="name">Name</label>
- * </FieldLabel>
- */
-const FieldLabel = ({ size, textColor, bgColor, className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const mainClass = usePrefixedClassNames('field-label', {
-        [`is-${size}`]: !!size,
-    });
-    const fieldLabelClass = classNames(mainClass, bulmaHelperClasses, className);
-    // Spread ...props and ...rest so custom props like data-testid are included
-    return (jsxRuntime.jsx("div", { className: fieldLabelClass, ...props, ...rest, children: children }));
-};
-/**
- * FieldBody component for rendering Bulma field body.
- *
- * @function
- * @param {FieldBodyProps} props - Props for the FieldBody component.
- * @returns {JSX.Element} The rendered field body.
- *
- * @example
- * <FieldBody><input className="input" /></FieldBody>
- */
-const FieldBody = ({ textColor, bgColor, className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const mainClass = usePrefixedClassNames('field-body');
-    const fieldBodyClass = classNames(mainClass, bulmaHelperClasses, className);
-    // Spread ...props and ...rest so custom props like data-testid are included
-    return (jsxRuntime.jsx("div", { className: fieldBodyClass, ...props, ...rest, children: children }));
-};
-/**
- * The `Field` component is a Bulma-styled form field container.
- *
- * @function
- * @param {FieldProps} props - Props for the Field component.
- * @returns {JSX.Element} The rendered field container.
- * @see {@link https://bulma.io/documentation/form/general/#field | Bulma Field documentation}
- *
- * @example
- * // Labelled field — the label auto-associates with the composed base
- * <Field label="Email">
- *   <Control>
- *     <InputBase type="email" />
- *   </Control>
- * </Field>
- *
- * @example
- * // Horizontal field
- * <Field horizontal label="Name">
- *   <Control>
- *     <InputBase />
- *   </Control>
- * </Field>
- */
-const FieldComponent = ({ horizontal, grouped, hasAddons, narrow, label, labelSize, labelProps, textColor, color: _fieldColor, bgColor, className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const mainClass = usePrefixedClassNames('field', {
-        'is-horizontal': horizontal,
-        'has-addons': !!hasAddons,
-        'has-addons-centered': hasAddons === 'centered',
-        'has-addons-right': hasAddons === 'right',
-        'is-narrow': narrow,
-        'is-grouped': grouped === true ||
-            grouped === 'centered' ||
-            grouped === 'right' ||
-            grouped === 'multiline',
-        'is-grouped-centered': grouped === 'centered',
-        'is-grouped-right': grouped === 'right',
-        'is-grouped-multiline': grouped === 'multiline',
-    });
-    const fieldClass = classNames(mainClass, bulmaHelperClasses, className);
-    // Default labelSize to 'normal' when horizontal for proper baseline alignment
-    const effectiveLabelSize = labelSize ?? (horizontal ? 'normal' : undefined);
-    const labelClass = usePrefixedClassNames('label');
-    // Auto-associate the label with a single composed base control (#495): the
-    // label points at a generated id shared via context, which a composed base
-    // adopts when the user supplied no id of their own.
-    // Presence semantics on htmlFor — even an explicit `htmlFor: undefined`
-    // means the caller owns the association. Grouped/addons fields hold several
-    // controls, so no single association is generated for them.
-    const generatedId = React.useId();
-    const userWiredLabel = !!labelProps && 'htmlFor' in labelProps;
-    const targetId = label && !userWiredLabel && !grouped && !hasAddons
-        ? generatedId
-        : undefined;
-    // 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);
-    // What the rendered label's `for` points at, generated or the caller's, and
-    // the id it renders with, so a control can tell when a label wired by hand
-    // names it and point at that label. An unlabeled Field passes on its
-    // parent's. Unlike `targetId`, a label wired by hand passes on its own in
-    // `grouped`/`hasAddons` Fields too, on purpose: those only stop the Field
-    // picking one control out of several, and the caller's `for` has picked
-    // one, so a range Slider or Autocomplete it names points at that label in
-    // a row as well. A group reads the label element id below instead, which
-    // stays off for a label wired by hand, since no group takes its `for`.
-    const inheritedLabelFor = useFieldLabelFor();
-    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]);
+    const bulmaClasses = usePrefixedClassNames();
+    const listClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("ul", { className: listClasses || undefined, ...rest, children: children }));
+};
+const UnorderedList = withSubComponents(UnorderedListComponent, { Item: ListItem }, 'UnorderedList');
+
+// The colors `Checkbox` takes, as `checkboxColors` lists them. Declared here as
+// well, so the API page can read them off this module, and a type test holds
+// the two lists to each other.
+const checkboxCardColors = [
+    'primary',
+    'link',
+    'info',
+    'success',
+    'warning',
+    'danger',
+];
+/**
+ * The `CheckboxCard` component is a checkbox drawn as a card, with a title and a description, that toggles wherever you click it.
+ *
+ * It's a `<label>` around a real checkbox, so it sends its `value` with a
+ * form and Space toggles it. The title names the checkbox and the
+ * description describes it. Alone it's one choice; inside `Checkboxes` it
+ * takes the group's name and selection, as `Checkbox` does.
+ *
+ * @function
+ * @param {CheckboxCardProps} props - Props for the CheckboxCard component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the `<input>`.
+ * @returns {JSX.Element} The rendered card.
+ *
+ * @example
+ * <Checkboxes label="Add-ons" name="extras" defaultValue={['backups']}>
+ *   <CheckboxCard value="backups" title="Daily backups" description="Kept for 30 days." />
+ *   <CheckboxCard value="domain" title="Custom domain" description="Bring your own." />
+ * </Checkboxes>
+ */
+const CheckboxCard = React.forwardRef(({ title, description, children, hasIndicator = true, color, className, textColor, disabled, name, value, checked, defaultChecked, indeterminate, onChange, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        ...props,
+    });
+    // The input's own ref, merged with the forwarded one, as Checkbox does,
+    // so the mixed state can be set on it.
+    const inputRef = React.useRef(null);
+    const setRefs = React.useCallback((node) => {
+        inputRef.current = node;
+        if (typeof ref === 'function')
+            return ref(node);
+        if (ref)
+            ref.current = node;
+    }, [ref]);
+    // `indeterminate` is a DOM property with no attribute, and a click clears
+    // it, so it's set after every render while the prop is set, and cleared
+    // once when the prop goes back to unset. Checkbox does the same.
+    const ownsIndeterminateRef = React.useRef(false);
     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: renderedTargetId, ...labelProps, id: labelId, className: classNames(labelClass, labelProps?.className), style: labelProps?.style, children: label }) }));
-        }
-        else {
-            renderedLabel = (jsxRuntime.jsx("label", { htmlFor: renderedTargetId, ...labelProps, id: labelId, className: classNames(labelClass, labelProps?.className), style: { display: 'block', ...(labelProps?.style || {}) }, children: label }));
+        if (indeterminate !== undefined) {
+            ownsIndeterminateRef.current = true;
+            inputRef.current.indeterminate = indeterminate;
         }
-    }
-    // If horizontal, wrap children in FieldBody (unless the user already provided
-    // a FieldBody — either as the single child, or as one element among siblings
-    // like <Field.Label/> + <Field.Body/>).
-    let content = children;
-    if (horizontal) {
-        const isFieldBody = (c) => React.isValidElement(c) &&
-            // @ts-expect-error displayName isn't on the public type
-            (c.type === FieldBody || c.type?.displayName === 'FieldBody');
-        const isFieldLabel = (c) => React.isValidElement(c) &&
-            // @ts-expect-error displayName isn't on the public type
-            (c.type === FieldLabel || c.type?.displayName === 'FieldLabel');
-        const childArray = React.Children.toArray(children);
-        const userProvidedStructure = childArray.some(c => isFieldBody(c) || isFieldLabel(c));
-        if (userProvidedStructure) {
-            content = children;
+        else if (ownsIndeterminateRef.current) {
+            ownsIndeterminateRef.current = false;
+            inputRef.current.indeterminate = false;
         }
-        else {
-            content = jsxRuntime.jsx(FieldBody, { children: children });
+    });
+    // A surrounding <Checkboxes> hands down its name and, when it manages
+    // the selection, whether this card's value is in it. The card's own
+    // props win, as they do on Checkbox.
+    const group = useCheckboxesGroup();
+    const effectiveName = name ?? group?.name;
+    const groupManaged = group?.value !== undefined && value !== undefined;
+    const effectiveChecked = checked !== undefined
+        ? checked
+        : groupManaged
+            ? group.value.includes(String(value))
+            : undefined;
+    const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;
+    const handleChange = React.useCallback((e) => {
+        if (indeterminate !== undefined)
+            e.target.indeterminate = indeterminate;
+        onChange?.(e);
+        if (group?.onChange && value !== undefined) {
+            const valStr = String(value);
+            const current = group.value ?? [];
+            group.onChange(e.target.checked
+                ? current.includes(valStr)
+                    ? current
+                    : [...current, valStr]
+                : current.filter(v => v !== valStr));
         }
-    }
-    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';
-const Field = withSubComponents(FieldComponent, {
-    Label: FieldLabel,
-    Body: FieldBody,
-    Control,
-}, 'Field');
+    }, [onChange, group, value, indeterminate]);
+    // The title names the input and the description describes it. A name
+    // passed in wins, and without one of either the label's own text names
+    // the input, description included, so it isn't described again.
+    const titleId = React.useId();
+    const descriptionId = React.useId();
+    const ariaLabel = rest['aria-label'];
+    const ariaLabelledBy = rest['aria-labelledby'] || (!ariaLabel && title ? titleId : undefined);
+    const ariaDescribedBy = rest['aria-describedby'] ||
+        (description && (ariaLabel || ariaLabelledBy)
+            ? descriptionId
+            : undefined);
+    const cardClass = usePrefixedClassNames('checkbox-card', 'card', {
+        [`is-${color}`]: color && checkboxCardColors.includes(color),
+    });
+    const contentClass = usePrefixedClassNames('card-content', 'checkbox-card-content');
+    const checkClass = usePrefixedClassNames('checkbox-card-check');
+    const bodyClass = usePrefixedClassNames('checkbox-card-body');
+    const titleClass = usePrefixedClassNames('checkbox-card-title');
+    const descriptionClass = usePrefixedClassNames('checkbox-card-description');
+    return (jsxRuntime.jsxs("label", { className: classNames(cardClass, bulmaHelperClasses, className), children: [jsxRuntime.jsx("input", { ref: setRefs, type: "checkbox", disabled: disabled, name: effectiveName, value: value, checked: effectiveChecked, defaultChecked: effectiveDefaultChecked, onChange: handleChange, ...rest, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy }), jsxRuntime.jsxs("span", { className: contentClass, children: [hasIndicator && jsxRuntime.jsx("span", { className: checkClass }), jsxRuntime.jsxs("span", { className: bodyClass, children: [title ? (jsxRuntime.jsx("span", { id: titleId, className: titleClass, children: title })) : null, description ? (jsxRuntime.jsx("span", { id: descriptionId, className: descriptionClass, children: description })) : null, children] })] })] }));
+});
+CheckboxCard.displayName = 'CheckboxCard';
 
 /**
- * Associates the convenience `label` prop with its control (#368): generates
- * an id for the control and returns labelProps carrying a matching `htmlFor`.
- * 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). 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. 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, }) {
-    // 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, and the
-    // id that label renders with, read together so the id is that label's.
-    // Set in `grouped`/`hasAddons` Fields too when the label is wired by hand,
-    // since its `for` names this one control whatever the layout (see Field).
-    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 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;
-    // Only a label that names the control gets an id to point at, with the
-    // suffix Field gives its own, from an id that is already unique.
-    const ownLabelId = needsLabelId && active && labelled
-        ? (labelProps?.id ?? `${generatedId}-label`)
-        : undefined;
-    // Inactive with a label still means an own Field may render it (pickers'
-    // inline mode). 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
-        ? ownLabelId
-            ? { ...ownLabelProps, id: ownLabelId }
-            : ownLabelProps
-        : label
-            ? { htmlFor: undefined, ...labelProps }
-            : labelProps;
-    const labelId = needsLabelId && labelled
-        ? active
-            ? ownLabelId
-            : fieldLabelFor.id
-        : undefined;
-    return { controlId, fieldLabelProps, labelled, labelId };
-}
-/**
- * Group-input counterpart of {@link useAutoLabelId} (#494): a group of
- * controls cannot take a single `htmlFor`, so instead the rendered `<label>`
- * gets a generated id and the group container points at it with
- * `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`. 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.
+ * The `Field` a `Checkboxes` or `Radios` with `as="fieldset"` renders of its
+ * own, as a native `<fieldset>`: Bulma's field markup, with its label as the
+ * `<legend>` (inside the `field-label` column when horizontal), so the legend
+ * names the group and needs no id. It holds a `Field`'s place for what is
+ * inside, so the choices read as inside a `Field`. Internal; not part of the
+ * public API.
  */
-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;
-    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 };
-}
+const GroupFieldset = ({ label, labelSize, labelProps, horizontal, fieldClassName, role, attributes, message, children, }) => {
+    const fieldClass = usePrefixedClassNames('field', {
+        'is-horizontal': !!horizontal,
+    });
+    const labelClass = usePrefixedClassNames('label');
+    const fieldLabelClass = usePrefixedClassNames('field-label', {
+        [`is-${labelSize || 'normal'}`]: true,
+    });
+    const fieldBodyClass = usePrefixedClassNames('field-body');
+    // A legend names its fieldset with no `for`, so a `htmlFor` has nothing
+    // to point at.
+    const { htmlFor: _htmlFor, className: labelClassName, ...ownLabelProps } = labelProps ?? {};
+    const shownLabel = {
+        ...ownLabelProps,
+        className: classNames(labelClass, labelClassName),
+    };
+    let legend = null;
+    if (label) {
+        legend = horizontal ? (jsxRuntime.jsx("legend", { className: fieldLabelClass, children: jsxRuntime.jsx("span", { ...shownLabel, children: label }) })) : (jsxRuntime.jsx("legend", { ...shownLabel, children: label }));
+    }
+    return (jsxRuntime.jsx(FieldProvider, { value: true, children: jsxRuntime.jsxs("fieldset", { className: classNames(fieldClass, fieldClassName), role: role, ...attributes, children: [legend, horizontal ? (jsxRuntime.jsxs("div", { className: fieldBodyClass, children: [children, message] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, message] }))] }) }));
+};
 
 /**
  * The `Checkboxes` component wraps multiple `Checkbox` components in a Bulma-styled group.
@@ -13293,7 +14483,7 @@ function useAutoLabelledBy({ label, labelProps, rendersLabel, callerProps, }) {
  *   <Checkbox value="angular">Angular</Checkbox>
  * </Checkboxes>
  */
-const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, name, value, defaultValue, onChange, children, className, ...props }) => {
+const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, name, value, defaultValue, onChange, children, className, as, ...props }) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('Checkboxes', {
@@ -13304,10 +14494,14 @@ const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message
         horizontal,
         fieldClassName,
     });
+    // As a fieldset with a Field of its own, the group's label is its legend,
+    // which names it with no id, so nothing points `aria-labelledby` at it.
+    const asFieldset = as === 'fieldset';
+    const fieldsetField = asFieldset && ownField;
     const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({
         label,
         labelProps,
-        rendersLabel: ownField,
+        rendersLabel: ownField && !fieldsetField,
         callerProps: props,
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -13332,11 +14526,17 @@ const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message
         name,
         ...(groupActive ? { value: currentValue, onChange: handleChange } : {}),
     }), [name, groupActive, currentValue, handleChange]);
-    const checkboxesElement = (jsxRuntime.jsx("div", { className: wrapperClass, role: "group", "aria-labelledby": ariaLabelledBy, ...rest, children: jsxRuntime.jsx(CheckboxesProvider, { value: ctx, children: children }) }));
+    const choices = (jsxRuntime.jsx(CheckboxesProvider, { value: ctx, children: children }));
+    // A fieldset is a group already, so it takes no role of its own.
+    const Group = asFieldset ? 'fieldset' : 'div';
+    const checkboxesElement = fieldsetField ? (jsxRuntime.jsx("div", { className: wrapperClass, children: choices })) : (jsxRuntime.jsx(Group, { className: wrapperClass, role: asFieldset ? undefined : 'group', "aria-labelledby": ariaLabelledBy, ...rest, children: choices }));
     let content = checkboxesElement;
     if (rendersOwnControl('Checkboxes', { insideControl })) {
         content = jsxRuntime.jsx(Control, { children: content });
     }
+    if (fieldsetField) {
+        return (jsxRuntime.jsx(GroupFieldset, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, fieldClassName: fieldClassName, attributes: rest, message: messageEl, children: content }));
+    }
     if (ownField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
@@ -13513,36 +14713,112 @@ const Radio = React.forwardRef(({ color, size, className, children, textColor, d
     // Local props always win over the group (explicit > implicit).
     const group = useRadiosGroup();
     const effectiveName = name ?? group?.name;
-    // Group-managed checked state — only when the group is in
-    // controlled/uncontrolled mode (group.value is defined) AND this Radio
-    // has a value to compare against. Local `checked` always wins.
+    // Group-managed checked state — only when the group is in
+    // controlled/uncontrolled mode (group.value is defined) AND this Radio
+    // has a value to compare against. Local `checked` always wins.
+    const groupManaged = group?.value !== undefined && value !== undefined;
+    const effectiveChecked = checked !== undefined
+        ? checked
+        : groupManaged
+            ? group.value === value
+            : undefined;
+    // When the group manages checked, suppress local defaultChecked to avoid
+    // the controlled/uncontrolled React warning.
+    const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;
+    const handleChange = React.useCallback((e) => {
+        // Local onChange always fires.
+        onChange?.(e);
+        // Dispatch to the group additionally — keeps group state in sync.
+        if (group?.onChange && value !== undefined) {
+            group.onChange(String(value));
+        }
+    }, [onChange, group, value]);
+    const mainClass = usePrefixedClassNames('styled-radio', 'radio', {
+        [`is-${color}`]: color && radioColors.includes(color),
+        [`is-${size}`]: size && radioSizes.includes(size),
+    });
+    const radioClass = classNames(mainClass, bulmaHelperClasses, className);
+    const checkClass = usePrefixedClassNames('check');
+    const controlLabelClass = usePrefixedClassNames('control-label');
+    return (jsxRuntime.jsxs("label", { className: radioClass, children: [jsxRuntime.jsx("input", { ref: ref, type: "radio", disabled: disabled, name: effectiveName, value: value, checked: effectiveChecked, defaultChecked: effectiveDefaultChecked, onChange: handleChange, ...rest }), jsxRuntime.jsx("span", { className: checkClass }), children && jsxRuntime.jsx("span", { className: controlLabelClass, children: children })] }));
+});
+Radio.displayName = 'Radio';
+
+// The colors `Radio` takes, as `radioColors` lists them. Declared here as
+// well, so the API page can read them off this module, and a type test holds
+// the two lists to each other.
+const radioCardColors = [
+    'primary',
+    'link',
+    'info',
+    'success',
+    'warning',
+    'danger',
+];
+/**
+ * The `RadioCard` component is a radio button drawn as a card, with a title and a description, picked wherever you click it.
+ *
+ * It's a `<label>` around a real radio, so it sends its `value` with a form,
+ * and the cards that share a `name` are one choice the arrow keys move
+ * through. The title names the radio and the description describes it.
+ * Inside `Radios` it takes the group's name and selection, as `Radio` does.
+ *
+ * @function
+ * @param {RadioCardProps} props - Props for the RadioCard component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the `<input>`.
+ * @returns {JSX.Element} The rendered card.
+ *
+ * @example
+ * <Radios label="Shipping" name="shipping" defaultValue="standard">
+ *   <RadioCard value="standard" title="Standard" description="Arrives in 4 to 6 days." />
+ *   <RadioCard value="express" title="Express" description="Arrives tomorrow." />
+ * </Radios>
+ */
+const RadioCard = React.forwardRef(({ title, description, children, hasIndicator = true, color, className, textColor, disabled, name, value, checked, defaultChecked, onChange, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        ...props,
+    });
+    // A surrounding <Radios> hands down its name and, when it manages the
+    // selection, whether this card is the one picked. The card's own props
+    // win, as they do on Radio.
+    const group = useRadiosGroup();
+    const effectiveName = name ?? group?.name;
     const groupManaged = group?.value !== undefined && value !== undefined;
     const effectiveChecked = checked !== undefined
         ? checked
         : groupManaged
             ? group.value === value
             : undefined;
-    // When the group manages checked, suppress local defaultChecked to avoid
-    // the controlled/uncontrolled React warning.
     const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;
     const handleChange = React.useCallback((e) => {
-        // Local onChange always fires.
         onChange?.(e);
-        // Dispatch to the group additionally — keeps group state in sync.
         if (group?.onChange && value !== undefined) {
             group.onChange(String(value));
         }
     }, [onChange, group, value]);
-    const mainClass = usePrefixedClassNames('styled-radio', 'radio', {
-        [`is-${color}`]: color && radioColors.includes(color),
-        [`is-${size}`]: size && radioSizes.includes(size),
-    });
-    const radioClass = classNames(mainClass, bulmaHelperClasses, className);
-    const checkClass = usePrefixedClassNames('check');
-    const controlLabelClass = usePrefixedClassNames('control-label');
-    return (jsxRuntime.jsxs("label", { className: radioClass, children: [jsxRuntime.jsx("input", { ref: ref, type: "radio", disabled: disabled, name: effectiveName, value: value, checked: effectiveChecked, defaultChecked: effectiveDefaultChecked, onChange: handleChange, ...rest }), jsxRuntime.jsx("span", { className: checkClass }), children && jsxRuntime.jsx("span", { className: controlLabelClass, children: children })] }));
+    // The title names the input and the description describes it. A name
+    // passed in wins, and without one of either the label's own text names
+    // the input, description included, so it isn't described again.
+    const titleId = React.useId();
+    const descriptionId = React.useId();
+    const ariaLabel = rest['aria-label'];
+    const ariaLabelledBy = rest['aria-labelledby'] || (!ariaLabel && title ? titleId : undefined);
+    const ariaDescribedBy = rest['aria-describedby'] ||
+        (description && (ariaLabel || ariaLabelledBy)
+            ? descriptionId
+            : undefined);
+    const cardClass = usePrefixedClassNames('radio-card', 'card', {
+        [`is-${color}`]: color && radioCardColors.includes(color),
+    });
+    const contentClass = usePrefixedClassNames('card-content', 'radio-card-content');
+    const checkClass = usePrefixedClassNames('radio-card-check');
+    const bodyClass = usePrefixedClassNames('radio-card-body');
+    const titleClass = usePrefixedClassNames('radio-card-title');
+    const descriptionClass = usePrefixedClassNames('radio-card-description');
+    return (jsxRuntime.jsxs("label", { className: classNames(cardClass, bulmaHelperClasses, className), children: [jsxRuntime.jsx("input", { ref: ref, type: "radio", disabled: disabled, name: effectiveName, value: value, checked: effectiveChecked, defaultChecked: effectiveDefaultChecked, onChange: handleChange, ...rest, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy }), jsxRuntime.jsxs("span", { className: contentClass, children: [hasIndicator && jsxRuntime.jsx("span", { className: checkClass }), jsxRuntime.jsxs("span", { className: bodyClass, children: [title ? (jsxRuntime.jsx("span", { id: titleId, className: titleClass, children: title })) : null, description ? (jsxRuntime.jsx("span", { id: descriptionId, className: descriptionClass, children: description })) : null, children] })] })] }));
 });
-Radio.displayName = 'Radio';
+RadioCard.displayName = 'RadioCard';
 
 /**
  * The `Radios` component wraps multiple `Radio` components in a Bulma-styled group.
@@ -13568,7 +14844,7 @@ Radio.displayName = 'Radio';
  *   <Radio value="green">Green</Radio>
  * </Radios>
  */
-const RadiosComponent = ({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, name, value, defaultValue, onChange, children, className, ...props }) => {
+const RadiosComponent = ({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, name, value, defaultValue, onChange, children, className, as, ...props }) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('Radios', {
@@ -13579,10 +14855,14 @@ const RadiosComponent = ({ label, labelSize, labelProps, horizontal, message, me
         horizontal,
         fieldClassName,
     });
+    // As a fieldset with a Field of its own, the group's label is its legend,
+    // which names it with no id, so nothing points `aria-labelledby` at it.
+    const asFieldset = as === 'fieldset';
+    const fieldsetField = asFieldset && ownField;
     const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({
         label,
         labelProps,
-        rendersLabel: ownField,
+        rendersLabel: ownField && !fieldsetField,
         callerProps: props,
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -13610,11 +14890,17 @@ const RadiosComponent = ({ label, labelSize, labelProps, horizontal, message, me
         name,
         ...(groupActive ? { value: currentValue, onChange: handleChange } : {}),
     }), [name, groupActive, currentValue, handleChange]);
-    const radiosElement = (jsxRuntime.jsx("div", { className: wrapperClass, role: "radiogroup", "aria-labelledby": ariaLabelledBy, ...rest, children: jsxRuntime.jsx(RadiosProvider, { value: ctx, children: children }) }));
+    const choices = jsxRuntime.jsx(RadiosProvider, { value: ctx, children: children });
+    // ARIA in HTML allows `radiogroup` on a fieldset, so it keeps the role.
+    const Group = asFieldset ? 'fieldset' : 'div';
+    const radiosElement = fieldsetField ? (jsxRuntime.jsx("div", { className: wrapperClass, children: choices })) : (jsxRuntime.jsx(Group, { className: wrapperClass, role: "radiogroup", "aria-labelledby": ariaLabelledBy, ...rest, children: choices }));
     let content = radiosElement;
     if (rendersOwnControl('Radios', { insideControl })) {
         content = jsxRuntime.jsx(Control, { children: content });
     }
+    if (fieldsetField) {
+        return (jsxRuntime.jsx(GroupFieldset, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, fieldClassName: fieldClassName, role: "radiogroup", attributes: rest, message: messageEl, children: content }));
+    }
     if (ownField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
@@ -14451,1190 +15737,758 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     const keep = (text) => (toAsciiDigits(text).match(new RegExp(allowed, 'g')) ?? [])
         .join('')
         .slice(0, length);
-    const commit = (next) => {
-        if (next === code)
-            return;
-        if (controlledValue === undefined)
-            setInternalValue(next);
-        onChange?.(next);
-        if (next.length === length)
-            onComplete?.(next);
-    };
-    const inputRef = React.useRef(null);
-    const setRefs = React.useCallback((node) => {
-        inputRef.current = node;
-        if (typeof ref === 'function')
-            return ref(node);
-        if (ref)
-            ref.current = node;
-    }, [ref]);
-    // The input's selection while it has focus, which the boxes draw.
-    const [selection, setSelection] = React.useState(null);
-    const follow = React.useCallback(() => {
-        const input = inputRef.current;
-        const next = getActiveElementInTree(input) === input
-            ? [input.selectionStart, input.selectionEnd]
-            : null;
-        setSelection(prev => prev?.[0] === next?.[0] && prev?.[1] === next?.[1] ? prev : next);
-    }, []);
-    // A new code moves the caret, and so can a value set from outside.
-    useClientLayoutEffect(follow, [code, follow]);
-    // React's `onSelect` never fires inside a shadow root, so the boxes
-    // follow the browser's own `selectionchange`. A caret that moves fires it
-    // at the input, and it bubbles to the document, but in a shadow root some
-    // browsers fire it at the document alone and others at the input alone,
-    // so both are followed.
-    React.useEffect(() => {
-        const input = inputRef.current;
-        const doc = input.ownerDocument;
-        input.addEventListener('selectionchange', follow);
-        doc.addEventListener('selectionchange', follow);
-        return () => {
-            input.removeEventListener('selectionchange', follow);
-            doc.removeEventListener('selectionchange', follow);
-        };
-    }, [follow]);
-    const handleChange = (e) => {
-        const input = e.target;
-        const typed = input.value;
-        const next = keep(typed);
-        if (next !== typed) {
-            // Drop what the code doesn't take before React sees the value, so
-            // the caret stays where it was rather than jumping to the end.
-            const caret = keep(typed.slice(0, input.selectionStart)).length;
-            input.value = next;
-            input.setSelectionRange(caret, caret);
-        }
-        commit(next);
-    };
-    // The browser cuts a paste to `maxLength` before anything else sees it,
-    // so a code pasted as "123 456" would lose its last digit. What the code
-    // takes is kept first, and it replaces the whole code, since what you
-    // paste into a code field is the code.
-    const handlePaste = (e) => {
-        onPaste?.(e);
-        if (e.defaultPrevented)
-            return;
-        e.preventDefault();
-        const pasted = keep(e.clipboardData.getData('text'));
-        if (pasted && !e.currentTarget.readOnly)
-            commit(pasted);
-    };
-    const rootClass = classNames(usePrefixedClassNames('pin-input'), bulmaHelperClasses, className);
-    const fieldClass = usePrefixedClassNames('pin-input-field');
-    const helpClass = usePrefixedClassNames('help', {
-        [`is-${messageColor}`]: !!messageColor,
-    });
-    // The boxes the selection covers: the one at a caret, or every selected
-    // one. A caret after the last character marks the last box.
-    const [start, end] = selection ?? [-1, -1];
-    const first = Math.min(start, length - 1);
-    const last = Math.max(first + 1, Math.min(end, length));
-    const boxes = Array.from({ length }, (_, i) => {
-        const char = code[i];
-        const active = i >= first && i < last;
-        return (jsxRuntime.jsx("div", { "aria-hidden": "true", className: prefixedClassNames(classPrefix, 'input', 'pin-input-box', {
-                [`is-${color}`]: !!color,
-                [`is-${size}`]: !!size,
-                'is-rounded': isRounded,
-                'is-focused': active,
-                'has-caret': active && start === end && !char,
-                'is-disabled': disabled,
-            }), children: char && (isMasked ? MASK : char) }, i));
-    });
-    // Left to right on a right-to-left page too: a code is written that way,
-    // so its first character stays in the first box on the left, and the
-    // arrow keys move the caret the way the boxes run.
-    let content = (jsxRuntime.jsxs("div", { className: rootClass, dir: "ltr", children: [jsxRuntime.jsx("input", { ref: setRefs, className: fieldClass, type: isMasked ? 'password' : 'text', inputMode: type === 'alphanumeric' ? 'text' : 'numeric', autoComplete: "one-time-code", autoCorrect: "off", spellCheck: false, 
-                // A partial code fails constraint validation. `minLength` would
-                // say so only after a keystroke, never after a paste or a filtered
-                // character, which set the value from script.
-                pattern: `${allowed}{${length}}`, ...rest, value: code, maxLength: length, disabled: disabled, onChange: handleChange, onPaste: handlePaste, onFocus: e => {
-                    follow();
-                    onFocus?.(e);
-                }, onBlur: e => {
-                    setSelection(null);
-                    onBlur?.(e);
-                }, 
-                // After the spread: an undefined `id` key in rest would wipe it.
-                id: controlId }), boxes] }));
-    if (ownControl) {
-        content = jsxRuntime.jsx(Control, { children: content });
-    }
-    const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
-    if (ownField) {
-        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
-    }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
-});
-PinInput.displayName = 'PinInput';
-
-/**
- * Default star icon component.
- */
-const StarIcon = ({ filled }) => (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: filled ? 'currentColor' : 'none', stroke: "currentColor", strokeWidth: filled ? 0 : 2, "aria-hidden": "true", children: jsxRuntime.jsx("path", { 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" }) }));
-/** Snap a value to the nearest precision step. */
-function snapToPrecision(val, precision) {
-    return Math.round(val / precision) * precision;
-}
-/** Get fill percentage for a given icon index based on current value. */
-function getFillPercent(iconIndex, value) {
-    if (value >= iconIndex + 1)
-        return 100;
-    if (value <= iconIndex)
-        return 0;
-    return Math.round((value - iconIndex) * 100);
-}
-/**
- * The `Rate` component provides a star/icon-based rating system.
- *
- * @function
- * @param {RateProps} props - Props for the Rate component.
- * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the container element.
- * @returns {JSX.Element} The rendered rating component.
- *
- * @example
- * // Basic 5-star rating
- * <Rate defaultValue={3} />
- *
- * @example
- * // With color and precision
- * <Rate defaultValue={3.5} color="warning" precision={0.5} showScore />
- *
- * @example
- * // With Font Awesome icons
- * <Rate iconName="star" iconLibrary="fa" iconVariant="solid" />
- */
-const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = 0, max = 5, size, disabled = false, showScore = false, showText = false, texts, onChange, customIcon, spaced = false, rtl = false, iconName, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, precision = 1, customText, name, form, className, ...props }, ref) => {
-    const insideField = useInsideField();
-    const insideControl = useInsideControl();
-    const ownField = rendersOwnField('Rate', {
-        insideField,
-        insideControl,
-        label,
-        message,
-        horizontal,
-        fieldClassName,
-    });
-    const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({
-        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();
-    const resolvedLibrary = iconLibraryProp || defaultIconLibrary || 'fa';
-    // Determine if controlled
-    const isControlled = controlledValue !== undefined;
-    const currentValue = isControlled ? controlledValue : internalValue;
-    const displayValue = hoverValue !== null ? hoverValue : currentValue;
-    // Update value
-    const updateValue = React.useCallback((newValue) => {
-        if (disabled)
-            return;
-        // Allow clicking same value to deselect (set to 0)
-        const finalValue = newValue === currentValue ? 0 : newValue;
-        if (!isControlled) {
-            setInternalValue(finalValue);
-        }
-        onChange?.(finalValue);
-    }, [isControlled, currentValue, disabled, onChange]);
-    // Handle click with precision support
-    const handleClick = React.useCallback((iconIndex, e) => {
-        if (disabled)
-            return;
-        if (precision < 1) {
-            const rect = e.currentTarget.getBoundingClientRect();
-            let relativeX = (e.clientX - rect.left) / rect.width;
-            if (rtl)
-                relativeX = 1 - relativeX;
-            const rawValue = iconIndex + relativeX;
-            const snapped = snapToPrecision(rawValue, precision);
-            const clamped = Math.max(precision, Math.min(snapped, max));
-            updateValue(clamped);
-        }
-        else {
-            updateValue(iconIndex + 1);
-        }
-    }, [disabled, precision, rtl, max, updateValue]);
-    // Handle mouse enter on icon
-    const handleMouseEnter = React.useCallback((iconIndex) => {
-        if (disabled)
-            return;
-        setHoverValue(iconIndex + 1);
-    }, [disabled]);
-    // Handle mouse move with precision support
-    const handleMouseMove = React.useCallback((iconIndex, e) => {
-        if (disabled || precision >= 1)
-            return;
-        const rect = e.currentTarget.getBoundingClientRect();
-        let relativeX = (e.clientX - rect.left) / rect.width;
-        if (rtl)
-            relativeX = 1 - relativeX;
-        const rawValue = iconIndex + relativeX;
-        const snapped = snapToPrecision(rawValue, precision);
-        const clamped = Math.max(precision, Math.min(snapped, max));
-        setHoverValue(clamped);
-    }, [disabled, precision, rtl, max]);
-    // Handle mouse leave
-    const handleMouseLeave = React.useCallback(() => {
-        setHoverValue(null);
-    }, []);
-    // Handle keyboard
-    const handleKeyDown = React.useCallback((e) => {
-        if (disabled)
+    const commit = (next) => {
+        if (next === code)
             return;
-        let newValue = currentValue;
-        const step = precision < 1 ? precision : 1;
-        if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
-            e.preventDefault();
-            newValue = Math.min(currentValue + step, max);
-        }
-        else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
-            e.preventDefault();
-            newValue = Math.max(currentValue - step, 0);
-        }
-        else if (e.key === 'Home') {
-            e.preventDefault();
-            newValue = 0;
-        }
-        else if (e.key === 'End') {
-            e.preventDefault();
-            newValue = max;
-        }
-        // Round to avoid floating point issues
-        newValue = Math.round(newValue * 1000) / 1000;
-        if (newValue !== currentValue) {
-            if (!isControlled) {
-                setInternalValue(newValue);
-            }
-            onChange?.(newValue);
-        }
-    }, [currentValue, max, precision, disabled, isControlled, onChange]);
-    // Get text for current value
-    const getText = () => {
-        if (!showText || !texts)
-            return null;
-        const wholeIndex = Math.ceil(displayValue) - 1;
-        const baseText = texts[wholeIndex] || null;
-        if (!baseText)
-            return null;
-        // For fractional hover values with precision < 1, append "+"
-        if (precision < 1 && hoverValue !== null && hoverValue % 1 !== 0) {
-            return `${baseText}+`;
-        }
-        return baseText;
-    };
-    // Format score display
-    const getScoreDisplay = () => {
-        if (precision < 1 && currentValue % 1 !== 0) {
-            return currentValue.toFixed(1);
-        }
-        return currentValue;
+        if (controlledValue === undefined)
+            setInternalValue(next);
+        onChange?.(next);
+        if (next.length === length)
+            onComplete?.(next);
     };
-    // Generate classes
-    const classPrefix = useClassPrefix();
-    const rateClasses = usePrefixedClassNames('rate', {
-        [`is-${size}`]: size,
-        'is-disabled': disabled,
-        'is-spaced': spaced,
-        'is-rtl': rtl,
-        [`is-${color}`]: color,
-    });
-    const combinedClasses = classNames(rateClasses, bulmaHelperClasses, className);
-    // Render a single icon based on priority: customIcon > iconName > default SVG
-    const renderIcon = (iconIndex, isActive, fillPercent) => {
-        const iconProps = {
-            index: iconIndex,
-            isActive,
-            isHovered: hoverValue !== null && iconIndex < hoverValue,
-            value: displayValue,
-            fillPercent,
+    const inputRef = React.useRef(null);
+    const setRefs = React.useCallback((node) => {
+        inputRef.current = node;
+        if (typeof ref === 'function')
+            return ref(node);
+        if (ref)
+            ref.current = node;
+    }, [ref]);
+    // The input's selection while it has focus, which the boxes draw.
+    const [selection, setSelection] = React.useState(null);
+    const follow = React.useCallback(() => {
+        const input = inputRef.current;
+        const next = getActiveElementInTree(input) === input
+            ? [input.selectionStart, input.selectionEnd]
+            : null;
+        setSelection(prev => prev?.[0] === next?.[0] && prev?.[1] === next?.[1] ? prev : next);
+    }, []);
+    // A new code moves the caret, and so can a value set from outside.
+    useClientLayoutEffect(follow, [code, follow]);
+    // React's `onSelect` never fires inside a shadow root, so the boxes
+    // follow the browser's own `selectionchange`. A caret that moves fires it
+    // at the input, and it bubbles to the document, but in a shadow root some
+    // browsers fire it at the document alone and others at the input alone,
+    // so both are followed.
+    React.useEffect(() => {
+        const input = inputRef.current;
+        const doc = input.ownerDocument;
+        input.addEventListener('selectionchange', follow);
+        doc.addEventListener('selectionchange', follow);
+        return () => {
+            input.removeEventListener('selectionchange', follow);
+            doc.removeEventListener('selectionchange', follow);
         };
-        if (customIcon) {
-            return customIcon(iconProps);
-        }
-        if (iconName) {
-            return (jsxRuntime.jsx(Icon, { name: iconName, library: resolvedLibrary, variant: iconVariant, features: iconFeatures }));
-        }
-        return jsxRuntime.jsx(StarIcon, { filled: isActive });
-    };
-    // Render partial icon with layered approach
-    const renderPartialIcon = (iconIndex, fillPercent) => {
-        if (customIcon) {
-            // For custom icons, pass fillPercent and let consumer handle it
-            const iconProps = {
-                index: iconIndex,
-                isActive: fillPercent > 0,
-                isHovered: hoverValue !== null && iconIndex < (hoverValue ?? 0),
-                value: displayValue,
-                fillPercent,
-            };
-            return customIcon(iconProps);
-        }
-        if (iconName) {
-            return (jsxRuntime.jsxs("span", { className: prefixedClassNames(classPrefix, 'rate-icon-partial'), style: {
-                    '--rate-fill-percent': `${fillPercent}%`,
-                }, children: [jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'rate-icon-bg'), children: jsxRuntime.jsx(Icon, { name: iconName, library: resolvedLibrary, variant: iconVariant, features: iconFeatures }) }), jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'rate-icon-fg'), children: jsxRuntime.jsx(Icon, { name: iconName, library: resolvedLibrary, variant: iconVariant, features: iconFeatures }) })] }));
+    }, [follow]);
+    const handleChange = (e) => {
+        const input = e.target;
+        const typed = input.value;
+        const next = keep(typed);
+        if (next !== typed) {
+            // Drop what the code doesn't take before React sees the value, so
+            // the caret stays where it was rather than jumping to the end.
+            const caret = keep(typed.slice(0, input.selectionStart)).length;
+            input.value = next;
+            input.setSelectionRange(caret, caret);
         }
-        // Default SVG with clipPath for partial fill
-        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" })] }));
+        commit(next);
     };
-    // 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 = [];
-        for (let i = 0; i < max; i++) {
-            const iconIndex = rtl ? max - 1 - i : i;
-            const fillPercent = getFillPercent(iconIndex, displayValue);
-            const isActive = fillPercent === 100;
-            const isHovered = hoverValue !== null && iconIndex < hoverValue;
-            const isPartial = fillPercent > 0 && fillPercent < 100;
-            const icon = isPartial
-                ? renderPartialIcon(iconIndex, fillPercent)
-                : renderIcon(iconIndex, isActive, fillPercent);
-            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, 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;
+    // The browser cuts a paste to `maxLength` before anything else sees it,
+    // so a code pasted as "123 456" would lose its last digit. What the code
+    // takes is kept first, and it replaces the whole code, since what you
+    // paste into a code field is the code.
+    const handlePaste = (e) => {
+        onPaste?.(e);
+        if (e.defaultPrevented)
+            return;
+        e.preventDefault();
+        const pasted = keep(e.clipboardData.getData('text'));
+        if (pasted && !e.currentTarget.readOnly)
+            commit(pasted);
     };
-    const text = getText();
+    const rootClass = classNames(usePrefixedClassNames('pin-input'), bulmaHelperClasses, className);
+    const fieldClass = usePrefixedClassNames('pin-input-field');
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
-    const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
-    const rateItemsClass = usePrefixedClassNames('rate-items');
-    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-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 })) {
+    // The boxes the selection covers: the one at a caret, or every selected
+    // one. A caret after the last character marks the last box.
+    const [start, end] = selection ?? [-1, -1];
+    const first = Math.min(start, length - 1);
+    const last = Math.max(first + 1, Math.min(end, length));
+    const boxes = Array.from({ length }, (_, i) => {
+        const char = code[i];
+        const active = i >= first && i < last;
+        return (jsxRuntime.jsx("div", { "aria-hidden": "true", className: prefixedClassNames(classPrefix, 'input', 'pin-input-box', {
+                [`is-${color}`]: !!color,
+                [`is-${size}`]: !!size,
+                'is-rounded': isRounded,
+                'is-focused': active,
+                'has-caret': active && start === end && !char,
+                'is-disabled': disabled,
+            }), children: char && (isMasked ? MASK : char) }, i));
+    });
+    // Left to right on a right-to-left page too: a code is written that way,
+    // so its first character stays in the first box on the left, and the
+    // arrow keys move the caret the way the boxes run.
+    let content = (jsxRuntime.jsxs("div", { className: rootClass, dir: "ltr", children: [jsxRuntime.jsx("input", { ref: setRefs, className: fieldClass, type: isMasked ? 'password' : 'text', inputMode: type === 'alphanumeric' ? 'text' : 'numeric', autoComplete: "one-time-code", autoCorrect: "off", spellCheck: false, 
+                // A partial code fails constraint validation. `minLength` would
+                // say so only after a keystroke, never after a paste or a filtered
+                // character, which set the value from script.
+                pattern: `${allowed}{${length}}`, ...rest, value: code, maxLength: length, disabled: disabled, onChange: handleChange, onPaste: handlePaste, onFocus: e => {
+                    follow();
+                    onFocus?.(e);
+                }, onBlur: e => {
+                    setSelection(null);
+                    onBlur?.(e);
+                }, 
+                // After the spread: an undefined `id` key in rest would wipe it.
+                id: controlId }), boxes] }));
+    if (ownControl) {
         content = jsxRuntime.jsx(Control, { children: content });
     }
+    const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
     if (ownField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
 });
-Rate.displayName = 'Rate';
+PinInput.displayName = 'PinInput';
 
-// What the status region announces: the `empty` content, as the one item
-// it's handed while that content is on screen because of the user's typing.
-const typedNoMatches$1 = [{ id: 'empty' }];
-const nothingToAnnounce$1 = [];
-// A press on an option would take focus from the field, since an option
-// can't hold it, and nothing would put it back. Cancelling the press keeps
-// it there, as the ARIA Authoring Practices' combobox does, and the click
-// still picks the option.
-const keepFocus = (e) => e.preventDefault();
-// An IME that's composing owns every key: Enter confirms what it composed,
-// and the arrows move through its candidates. Safari can say so with
-// `keyCode` 229 rather than `isComposing`.
-const isComposing$2 = (e) => e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229;
-// Whether an option can be picked. The arrows still reach a disabled one, so
-// a screen reader user finds it.
-const isEnabled = (item) => typeof item === 'string' || !item.disabled;
 /**
- * The `Autocomplete` component provides an input field with dropdown suggestions that filter based on user input.
+ * Default star icon component.
+ */
+const StarIcon = ({ filled }) => (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: filled ? 'currentColor' : 'none', stroke: "currentColor", strokeWidth: filled ? 0 : 2, "aria-hidden": "true", children: jsxRuntime.jsx("path", { 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" }) }));
+/** Snap a value to the nearest precision step. */
+function snapToPrecision(val, precision) {
+    return Math.round(val / precision) * precision;
+}
+/** Get fill percentage for a given icon index based on current value. */
+function getFillPercent(iconIndex, value) {
+    if (value >= iconIndex + 1)
+        return 100;
+    if (value <= iconIndex)
+        return 0;
+    return Math.round((value - iconIndex) * 100);
+}
+/**
+ * The `Rate` component provides a star/icon-based rating system.
  *
  * @function
- * @param {AutocompleteProps} props - Props for the Autocomplete component.
- * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the input element.
- * @returns {JSX.Element} The rendered autocomplete component.
+ * @param {RateProps} props - Props for the Rate component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the container element.
+ * @returns {JSX.Element} The rendered rating component.
  *
  * @example
- * // Basic usage with string array
- * <Autocomplete
- *   data={['Apple', 'Banana', 'Cherry']}
- *   placeholder="Search fruit..."
- *   onSelect={(item) => console.log(item)}
- * />
+ * // Basic 5-star rating
+ * <Rate defaultValue={3} />
  *
  * @example
- * // With object data
- * <Autocomplete
- *   data={[{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]}
- *   field="label"
- *   onSelect={(item) => console.log(item)}
- * />
+ * // With color and precision
+ * <Rate defaultValue={3.5} color="warning" precision={0.5} showScore />
+ *
+ * @example
+ * // With Font Awesome icons
+ * <Rate iconName="star" iconLibrary="fa" iconVariant="solid" />
  */
-const Autocomplete = React.forwardRef(({ data = [], value: controlledValue, placeholder, field = 'label', clearable = false, openOnFocus = false, keepFirst = false, keepOpen = false, selectOnClickOutside = false, maxHeight = 200, loading = false, disabled = false, checkInfiniteScroll = false, infiniteScrollDistance = 50, color, size, onInput, onSelect, onActiveChange, onInfiniteScroll, itemTemplate, header, footer, empty, name, form, required, id, 
-// Deprecated no-ops, taken here so they stay off the wrapper.
-// eslint-disable-next-line @typescript-eslint/no-unused-vars -- deprecated no-op
-selected, 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars -- deprecated no-op
-dropdown, 
-// Field props
-label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, className, ...props }, ref) => {
+const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = 0, max = 5, size, disabled = false, showScore = false, showText = false, texts, onChange, customIcon, spaced = false, rtl = false, iconName, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, precision = 1, customText, name, form, className, ...props }, ref) => {
     const insideField = useInsideField();
-    // The suggestion list points `aria-labelledby` at the label that names
-    // the input, so it needs that label's id.
-    const { controlId, fieldLabelProps, labelId: listLabelId, } = useAutoLabelId({
+    const insideControl = useInsideControl();
+    const ownField = rendersOwnField('Rate', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
+    const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({
         label,
-        id,
         labelProps,
-        rendersLabel: !insideField,
-        needsLabelId: true,
+        rendersLabel: ownField,
+        callerProps: props,
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const { classPrefix } = useConfig();
-    const containerRef = React.useRef(null);
-    const inputRef = React.useRef(null);
-    const dropdownRef = React.useRef(null);
-    const [internalValue, setInternalValue] = React.useState('');
-    const [isActive, setIsActive] = React.useState(false);
-    // Whether the user has typed since the list opened, since only typing
-    // gets the `empty` content announced. Closing the list resets it (during
-    // render, React's pattern for adjusting state when other state changes),
-    // so opening the list again without typing stays quiet.
-    const [typed, setTyped] = React.useState(false);
-    if (typed && !isActive)
-        setTyped(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
-    const getDisplayValue = (item) => {
-        if (typeof item === 'string')
-            return item;
-        const fieldValue = item[field];
-        if (typeof fieldValue === 'string')
-            return fieldValue;
-        return item.value || '';
-    };
-    // Filter data based on input
-    const filteredData = data.filter(item => {
-        const displayValue = getDisplayValue(item);
-        return displayValue.toLowerCase().includes(inputValue.toLowerCase());
-    });
-    // The dropdown shows the options or, when nothing matches, the `empty`
-    // content. The listbox holds only options, so it's on screen only while
-    // there are some.
-    const menuOpen = isActive && (filteredData.length > 0 || !!empty);
-    const listOpen = isActive && filteredData.length > 0;
-    // Handle input change
-    const handleInputChange = React.useCallback((e) => {
-        const newValue = e.target.value;
-        if (controlledValue === undefined) {
-            setInternalValue(newValue);
-        }
-        onInput?.(newValue);
-        setTyped(true);
-        if (!isActive && newValue) {
-            setIsActive(true);
-        }
-    }, [controlledValue, isActive, onInput]);
-    // Handle item selection
-    const handleSelect = React.useCallback((item) => {
-        if (typeof item !== 'string' && item.disabled)
-            return;
-        const displayValue = getDisplayValue(item);
-        if (controlledValue === undefined) {
-            setInternalValue(displayValue);
-        }
-        onInput?.(displayValue);
-        onSelect?.(item);
-        if (!keepOpen) {
-            setIsActive(false);
-        }
-        setHighlightedIndex(-1);
-    }, [controlledValue, field, keepOpen, onInput, onSelect]);
-    // Handle clear
-    const handleClear = React.useCallback(() => {
-        if (controlledValue === undefined) {
-            setInternalValue('');
-        }
-        onInput?.('');
-        onSelect?.(null);
-        inputRef.current?.focus();
-    }, [controlledValue, onInput, onSelect]);
-    // Handle focus
-    const handleFocus = React.useCallback(() => {
-        if (openOnFocus && !disabled) {
-            setIsActive(true);
-        }
-    }, [openOnFocus, disabled]);
-    // Read when a click lands outside, so the listener stays put while the
-    // list is open. What it selects changes as the user types and arrows
-    // through suggestions, the filtered list is new on every render, and an
-    // inline `onInput` or `onSelect` changes on every render of the parent.
-    // Typing leaves the highlight where it was, so a list that narrowed can
-    // leave it past the last suggestion, with nothing there to select.
-    const selectHighlightedRef = useLatestRef(() => {
-        if (selectOnClickOutside &&
-            highlightedIndex >= 0 &&
-            highlightedIndex < filteredData.length) {
-            handleSelect(filteredData[highlightedIndex]);
-        }
-    });
-    // Handle blur (click outside)
-    React.useEffect(() => {
-        if (!isActive)
-            return undefined;
-        const handleClickOutside = (e) => {
-            if (!containerRef.current)
-                return;
-            // Use composedPath() to correctly detect clicks inside Shadow DOM
-            const path = e.composedPath();
-            const isInside = path.includes(containerRef.current);
-            if (!isInside) {
-                selectHighlightedRef.current();
-                setIsActive(false);
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
-    }, [isActive, selectHighlightedRef]);
-    // Read when the dropdown opens or closes, so an inline `onActiveChange`,
-    // new on every render of the parent, isn't told again about a state that
-    // didn't change.
-    const onActiveChangeRef = useLatestRef(onActiveChange);
-    // Notify active state change
-    React.useEffect(() => {
-        onActiveChangeRef.current?.(isActive);
-    }, [isActive, onActiveChangeRef]);
-    // Keep first highlighted
-    React.useEffect(() => {
-        if (keepFirst && isActive && filteredData.length > 0) {
-            setHighlightedIndex(0);
-        }
-    }, [keepFirst, isActive, filteredData.length, inputValue]);
-    // Handle keyboard navigation
-    const handleKeyDown = React.useCallback((e) => {
-        if (disabled || isComposing$2(e))
+    const starBaseId = React.useId();
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const [hoverValue, setHoverValue] = React.useState(null);
+    const defaultIconLibrary = useIconLibrary();
+    const resolvedLibrary = iconLibraryProp || defaultIconLibrary || 'fa';
+    // Determine if controlled
+    const isControlled = controlledValue !== undefined;
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const displayValue = hoverValue !== null ? hoverValue : currentValue;
+    // Update value
+    const updateValue = React.useCallback((newValue) => {
+        if (disabled)
             return;
-        switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                if (!isActive) {
-                    // A closed list opens on its first enabled option, as the ARIA
-                    // Authoring Practices' combobox does. Alt+Down Arrow opens it
-                    // without a highlight.
-                    setIsActive(true);
-                    setHighlightedIndex(e.altKey ? -1 : filteredData.map(isEnabled).indexOf(true));
-                }
-                else {
-                    setHighlightedIndex(prev => prev < filteredData.length - 1 ? prev + 1 : prev);
-                }
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                if (!isActive) {
-                    // And Up Arrow opens it on its last enabled option.
-                    setIsActive(true);
-                    setHighlightedIndex(filteredData.map(isEnabled).lastIndexOf(true));
-                }
-                else {
-                    setHighlightedIndex(prev => (prev > 0 ? prev - 1 : prev));
-                }
-                break;
-            case 'Enter':
-                // With the list open on a highlighted option it can pick, Enter
-                // is that option's. Otherwise it closes the list and goes on, so
-                // a form around the field submits, as it would from any text
-                // field.
-                if (isActive &&
-                    highlightedIndex >= 0 &&
-                    filteredData[highlightedIndex] &&
-                    isEnabled(filteredData[highlightedIndex])) {
-                    e.preventDefault();
-                    handleSelect(filteredData[highlightedIndex]);
-                }
-                else {
-                    setIsActive(false);
-                }
-                break;
-            case 'Escape':
-                // Only closing the dropdown claims the key. With it closed, the
-                // key goes on to a Modal around the field.
-                if (menuOpen)
-                    e.preventDefault();
-                setIsActive(false);
-                setHighlightedIndex(-1);
-                break;
-            case 'Tab':
-                if (isActive &&
-                    highlightedIndex >= 0 &&
-                    filteredData[highlightedIndex]) {
-                    handleSelect(filteredData[highlightedIndex]);
-                }
-                setIsActive(false);
-                break;
+        // Allow clicking same value to deselect (set to 0)
+        const finalValue = newValue === currentValue ? 0 : newValue;
+        if (!isControlled) {
+            setInternalValue(finalValue);
         }
-    }, [
-        disabled,
-        isActive,
-        menuOpen,
-        highlightedIndex,
-        filteredData,
-        handleSelect,
-    ]);
-    // Handle dropdown scroll for infinite scroll
-    const handleDropdownScroll = React.useCallback(() => {
-        if (!checkInfiniteScroll || !dropdownRef.current)
+        onChange?.(finalValue);
+    }, [isControlled, currentValue, disabled, onChange]);
+    // Handle click with precision support
+    const handleClick = React.useCallback((iconIndex, e) => {
+        if (disabled)
             return;
-        const { scrollTop, scrollHeight, clientHeight } = dropdownRef.current;
-        if (scrollHeight - scrollTop - clientHeight <= infiniteScrollDistance) {
-            onInfiniteScroll?.();
+        if (precision < 1) {
+            const rect = e.currentTarget.getBoundingClientRect();
+            let relativeX = (e.clientX - rect.left) / rect.width;
+            if (rtl)
+                relativeX = 1 - relativeX;
+            const rawValue = iconIndex + relativeX;
+            const snapped = snapToPrecision(rawValue, precision);
+            const clamped = Math.max(precision, Math.min(snapped, max));
+            updateValue(clamped);
         }
-    }, [checkInfiniteScroll, infiniteScrollDistance, onInfiniteScroll]);
-    // Scroll highlighted item into view
-    React.useEffect(() => {
-        if (highlightedIndex >= 0 && dropdownRef.current) {
-            const highlightedEl = dropdownRef.current.querySelector(`[data-index="${highlightedIndex}"]`);
-            if (highlightedEl &&
-                typeof highlightedEl.scrollIntoView === 'function') {
-                highlightedEl.scrollIntoView({ block: 'nearest' });
+        else {
+            updateValue(iconIndex + 1);
+        }
+    }, [disabled, precision, rtl, max, updateValue]);
+    // Handle mouse enter on icon
+    const handleMouseEnter = React.useCallback((iconIndex) => {
+        if (disabled)
+            return;
+        setHoverValue(iconIndex + 1);
+    }, [disabled]);
+    // Handle mouse move with precision support
+    const handleMouseMove = React.useCallback((iconIndex, e) => {
+        if (disabled || precision >= 1)
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        let relativeX = (e.clientX - rect.left) / rect.width;
+        if (rtl)
+            relativeX = 1 - relativeX;
+        const rawValue = iconIndex + relativeX;
+        const snapped = snapToPrecision(rawValue, precision);
+        const clamped = Math.max(precision, Math.min(snapped, max));
+        setHoverValue(clamped);
+    }, [disabled, precision, rtl, max]);
+    // Handle mouse leave
+    const handleMouseLeave = React.useCallback(() => {
+        setHoverValue(null);
+    }, []);
+    // Handle keyboard
+    const handleKeyDown = React.useCallback((e) => {
+        if (disabled)
+            return;
+        let newValue = currentValue;
+        const step = precision < 1 ? precision : 1;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            newValue = Math.min(currentValue + step, max);
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            newValue = Math.max(currentValue - step, 0);
+        }
+        else if (e.key === 'Home') {
+            e.preventDefault();
+            newValue = 0;
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            newValue = max;
+        }
+        // Round to avoid floating point issues
+        newValue = Math.round(newValue * 1000) / 1000;
+        if (newValue !== currentValue) {
+            if (!isControlled) {
+                setInternalValue(newValue);
             }
+            onChange?.(newValue);
         }
-    }, [highlightedIndex]);
-    // Combined ref
-    const combinedRef = React.useCallback((node) => {
-        inputRef.current =
-            node;
-        if (typeof ref === 'function') {
-            ref(node);
+    }, [currentValue, max, precision, disabled, isControlled, onChange]);
+    // Get text for current value
+    const getText = () => {
+        if (!showText || !texts)
+            return null;
+        const wholeIndex = Math.ceil(displayValue) - 1;
+        const baseText = texts[wholeIndex] || null;
+        if (!baseText)
+            return null;
+        // For fractional hover values with precision < 1, append "+"
+        if (precision < 1 && hoverValue !== null && hoverValue % 1 !== 0) {
+            return `${baseText}+`;
         }
-        else if (ref) {
-            ref.current =
-                node;
+        return baseText;
+    };
+    // Format score display
+    const getScoreDisplay = () => {
+        if (precision < 1 && currentValue % 1 !== 0) {
+            return currentValue.toFixed(1);
         }
-    }, [ref]);
+        return currentValue;
+    };
     // Generate classes
-    const autocompleteClasses = usePrefixedClassNames('autocomplete', {
-        'is-active': isActive,
-        [`is-${size}`]: !!size,
-    });
-    const inputClasses = usePrefixedClassNames('input', {
-        [`is-${color}`]: !!color,
-        [`is-${size}`]: !!size,
-        'is-loading': loading,
-    });
-    const controlClasses = usePrefixedClassNames('control', 'is-expanded', 'has-icons-right');
-    const dropdownMenuClasses = usePrefixedClassNames('dropdown-menu', {
-        'is-active': menuOpen,
-    });
-    const dropdownContentClass = usePrefixedClassNames('dropdown-content');
-    const dropdownHeaderClass = usePrefixedClassNames('dropdown-header');
-    const dropdownFooterClass = usePrefixedClassNames('dropdown-footer');
-    const emptyItemClasses = usePrefixedClassNames('dropdown-item', 'has-text-grey');
-    const iconRightClickableClass = usePrefixedClassNames('icon', 'is-right', 'is-clickable');
-    const iconRightClass = usePrefixedClassNames('icon', 'is-right');
-    const loaderClass = usePrefixedClassNames('loader', 'is-loading');
-    const combinedClasses = classNames(autocompleteClasses, bulmaHelperClasses, className);
-    const helpClass = usePrefixedClassNames('help', {
-        [`is-${messageColor}`]: !!messageColor,
+    const classPrefix = useClassPrefix();
+    const rateClasses = usePrefixedClassNames('rate', {
+        [`is-${size}`]: size,
+        'is-disabled': disabled,
+        'is-spaced': spaced,
+        'is-rtl': rtl,
+        [`is-${color}`]: color,
     });
-    const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
-    // The clear button gives way to a spinner at its spot: the `loading` one,
-    // or that of a loading Control this sits in.
-    const controlLoading = useControlLoading();
-    const showClear = clearable && !!inputValue && !disabled && !loading && !controlLoading;
-    // The combobox controls its listbox and points at the highlighted option.
-    // The listbox takes its name from the label that names the combobox, the
-    // one this renders or a surrounding Field's, so the two say the same
-    // thing. When no label names the combobox, or the one that does has no
-    // id to point at, the list keeps a fallback name. While the dropdown
-    // shows only the `empty` content there's no listbox, so the combobox is
-    // collapsed and points at nothing.
-    const activeOptionId = listOpen &&
-        highlightedIndex >= 0 &&
-        highlightedIndex < filteredData.length
-        ? `${listboxId}-${highlightedIndex}`
-        : undefined;
-    // A polite status region, in the page from the start so it's there
-    // before anything is written into it, announces the `empty` content
-    // when the user's typing leaves nothing that matches what's in the
-    // field. It follows what's on screen, so results that come in after the
-    // typing count too. It's said once each time that happens, not again on
-    // each keystroke while nothing matches. An empty field isn't a search,
-    // so it stays quiet then, even with no data. While `loading`, or a
-    // loading Control around it, says results are on their way, it waits,
-    // and it's said once loading ends with nothing matching.
-    const emptyItems = typed &&
-        menuOpen &&
-        !listOpen &&
-        !!inputValue &&
-        !loading &&
-        !controlLoading
-        ? typedNoMatches$1
-        : nothingToAnnounce$1;
-    // The region reads the text on screen, whatever `empty` renders.
-    const emptyRef = React.useRef(null);
-    const describeEmpty = React.useCallback(() => {
-        const node = emptyRef.current;
-        /* istanbul ignore if: it's only announced while it's on screen */
-        if (!node)
-            return null;
-        return spokenText(node);
-    }, []);
-    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 }) }))] }), menuOpen && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsxs("div", { ref: dropdownRef, className: dropdownContentClass, style: { maxHeight: `${maxHeight}px`, overflowY: 'auto' }, onScroll: handleDropdownScroll, children: [header && jsxRuntime.jsx("div", { className: dropdownHeaderClass, children: header }), listOpen ? (jsxRuntime.jsx("div", { id: listboxId, role: "listbox", "aria-labelledby": listLabelId, "aria-label": listLabelId ? undefined : 'Suggestions', onMouseDown: keepFocus, children: 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", { id: `${listboxId}-${index}`, "data-index": index, className: itemClasses, onClick: () => !isDisabled && handleSelect(item), onMouseEnter: () => !isDisabled && setHighlightedIndex(index), role: "option", "aria-selected": isHighlighted && !isDisabled, "aria-disabled": isDisabled, children: itemTemplate
-                                        ? itemTemplate(item)
-                                        : getDisplayValue(item) }, index));
-                            }) })) : (jsxRuntime.jsx("div", { ref: emptyRef, className: emptyItemClasses, onMouseDown: keepFocus, children: empty })), footer && jsxRuntime.jsx("div", { className: dropdownFooterClass, children: footer })] }) })), jsxRuntime.jsx(StatusRegion, { items: emptyItems, describe: describeEmpty })] }));
-    if (!insideField) {
-        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [autocompleteElement, messageEl] }));
+    const combinedClasses = classNames(rateClasses, bulmaHelperClasses, className);
+    // Render a single icon based on priority: customIcon > iconName > default SVG
+    const renderIcon = (iconIndex, isActive, fillPercent) => {
+        const iconProps = {
+            index: iconIndex,
+            isActive,
+            isHovered: hoverValue !== null && iconIndex < hoverValue,
+            value: displayValue,
+            fillPercent,
+        };
+        if (customIcon) {
+            return customIcon(iconProps);
+        }
+        if (iconName) {
+            return (jsxRuntime.jsx(Icon, { name: iconName, library: resolvedLibrary, variant: iconVariant, features: iconFeatures }));
+        }
+        return jsxRuntime.jsx(StarIcon, { filled: isActive });
+    };
+    // Render partial icon with layered approach
+    const renderPartialIcon = (iconIndex, fillPercent) => {
+        if (customIcon) {
+            // For custom icons, pass fillPercent and let consumer handle it
+            const iconProps = {
+                index: iconIndex,
+                isActive: fillPercent > 0,
+                isHovered: hoverValue !== null && iconIndex < (hoverValue ?? 0),
+                value: displayValue,
+                fillPercent,
+            };
+            return customIcon(iconProps);
+        }
+        if (iconName) {
+            return (jsxRuntime.jsxs("span", { className: prefixedClassNames(classPrefix, 'rate-icon-partial'), style: {
+                    '--rate-fill-percent': `${fillPercent}%`,
+                }, children: [jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'rate-icon-bg'), children: jsxRuntime.jsx(Icon, { name: iconName, library: resolvedLibrary, variant: iconVariant, features: iconFeatures }) }), jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'rate-icon-fg'), children: jsxRuntime.jsx(Icon, { name: iconName, library: resolvedLibrary, variant: iconVariant, features: iconFeatures }) })] }));
+        }
+        // Default SVG with clipPath for partial fill
+        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 = [];
+        for (let i = 0; i < max; i++) {
+            const iconIndex = rtl ? max - 1 - i : i;
+            const fillPercent = getFillPercent(iconIndex, displayValue);
+            const isActive = fillPercent === 100;
+            const isHovered = hoverValue !== null && iconIndex < hoverValue;
+            const isPartial = fillPercent > 0 && fillPercent < 100;
+            const icon = isPartial
+                ? renderPartialIcon(iconIndex, fillPercent)
+                : renderIcon(iconIndex, isActive, fillPercent);
+            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, 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 helpClass = usePrefixedClassNames('help', {
+        [`is-${messageColor}`]: !!messageColor,
+    });
+    const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
+    const rateItemsClass = usePrefixedClassNames('rate-items');
+    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-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 });
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [autocompleteElement, messageEl] }));
+    if (ownField) {
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
 });
-Autocomplete.displayName = 'Autocomplete';
+Rate.displayName = 'Rate';
 
-// INTERNAL: deliberately not exported from src/index.ts.
-/** An IME is composing, so the key belongs to it (`keyCode` 229 is Safari's word for it). */
-const isComposing$1 = (event) => event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229;
-const sameValues = (a, b) => a.length === b.length && a.every((value, i) => value === b[i]);
+// What the status region announces: the `empty` content, as the one item
+// it's handed while that content is on screen because of the user's typing.
+const typedNoMatches$1 = [{ id: 'empty' }];
+const nothingToAnnounce$1 = [];
+// A press on an option would take focus from the field, since an option
+// can't hold it, and nothing would put it back. Cancelling the press keeps
+// it there, as the ARIA Authoring Practices' combobox does, and the click
+// still picks the option.
+const keepFocus = (e) => e.preventDefault();
+// An IME that's composing owns every key: Enter confirms what it composed,
+// and the arrows move through its candidates. Safari can say so with
+// `keyCode` 229 rather than `isComposing`.
+const isComposing$1 = (e) => e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229;
+// Whether an option can be picked. The arrows still reach a disabled one, so
+// a screen reader user finds it.
+const isEnabled = (item) => typeof item === 'string' || !item.disabled;
 /**
- * The keys, the open state, the highlight and the ARIA of an editable
- * combobox whose list the app renders and filters (#1083). DOM focus stays
- * in the field the whole time: the highlight is `aria-activedescendant`, as
- * the ARIA Authoring Practices ask of a combobox, where `useMenuKeys` moves
- * real focus, as a menu should.
+ * The `Autocomplete` component provides an input field with dropdown suggestions that filter based on user input.
  *
- * The options are read from the listbox in document order whenever they're
- * needed, so options in groups and options that come and go are found, and
- * the highlight is remembered by value, so it survives a re-render. The text
- * in the field and any value are the app's: a pick only calls
- * `onSelect`.
+ * @function
+ * @param {AutocompleteProps} props - Props for the Autocomplete component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the input element.
+ * @returns {JSX.Element} The rendered autocomplete component.
  *
- * @function useComboboxEngine
- * @param options - The open state, the pick callback and the shape.
- * @returns The state and handlers the parts wire up.
+ * @example
+ * // Basic usage with string array
+ * <Autocomplete
+ *   data={['Apple', 'Banana', 'Cherry']}
+ *   placeholder="Search fruit..."
+ *   onSelect={(item) => console.log(item)}
+ * />
+ *
+ * @example
+ * // With object data
+ * <Autocomplete
+ *   data={[{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]}
+ *   field="label"
+ *   onSelect={(item) => console.log(item)}
+ * />
  */
-function useComboboxEngine({ open: controlledOpen, defaultOpen, onOpenChange, onSelect, onSettle, keepFirst, multiple, inline, deferred, }) {
-    const baseId = React.useId();
-    const listboxId = `${baseId}-listbox`;
-    const itemPrefix = `${baseId}-item-`;
-    // The value goes into the id encoded, so a value with a space in it still
-    // makes one id, not two.
-    const itemId = React.useCallback((value) => itemPrefix + encodeURIComponent(value), [itemPrefix]);
-    const rootRef = React.useRef(null);
+const Autocomplete = React.forwardRef(({ data = [], value: controlledValue, placeholder, field = 'label', clearable = false, openOnFocus = false, keepFirst = false, keepOpen = false, selectOnClickOutside = false, maxHeight = 200, loading = false, disabled = false, checkInfiniteScroll = false, infiniteScrollDistance = 50, color, size, onInput, onSelect, onActiveChange, onInfiniteScroll, itemTemplate, header, footer, empty, name, form, required, id, 
+// Deprecated no-ops, taken here so they stay off the wrapper.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- deprecated no-op
+selected, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- deprecated no-op
+dropdown, 
+// Field props
+label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, className, ...props }, ref) => {
+    const insideField = useInsideField();
+    // The suggestion list points `aria-labelledby` at the label that names
+    // the input, so it needs that label's id.
+    const { controlId, fieldLabelProps, labelId: listLabelId, } = useAutoLabelId({
+        label,
+        id,
+        labelProps,
+        rendersLabel: !insideField,
+        needsLabelId: true,
+    });
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const { classPrefix } = useConfig();
+    const containerRef = React.useRef(null);
     const inputRef = React.useRef(null);
-    const listboxRef = React.useRef(null);
-    const popupRef = React.useRef(null);
-    const insidePressRef = React.useRef(null);
-    const optionsRef = React.useRef(new Map());
-    const landingRef = React.useRef(null);
-    const wasOpenRef = React.useRef(false);
-    const shownValuesRef = React.useRef([]);
-    // Whether the next highlight change is one to scroll to: a key's or a
-    // landing's. The pointer's isn't, since the pointer is already on that
-    // option, and scrolling would move the list out from under it.
-    const scrollToHighlightRef = React.useRef(false);
-    const isControlled = controlledOpen !== undefined;
-    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
-    const open = inline || (controlledOpen ?? internalOpen);
-    const [highlighted, setHighlighted] = React.useState(null);
+    const dropdownRef = React.useRef(null);
+    const [internalValue, setInternalValue] = React.useState('');
+    const [isActive, setIsActive] = React.useState(false);
+    // Whether the user has typed since the list opened, since only typing
+    // gets the `empty` content announced. Closing the list resets it (during
+    // render, React's pattern for adjusting state when other state changes),
+    // so opening the list again without typing stays quiet.
     const [typed, setTyped] = React.useState(false);
-    // Whether a listbox with an option in it is on the page, which only the
-    // page can say, so it's read once the open list has rendered.
-    const [listShown, setListShown] = React.useState(null);
-    // Options register from their own effects, which needn't render the
-    // component that holds this hook, so they ask for a render to be read.
-    const [, refresh] = React.useReducer((n) => n + 1, 0);
-    // Closing forgets the highlight, the typing and what was on the page,
-    // during render, React's pattern for adjusting state when other state
-    // changes.
-    if (!open) {
-        if (highlighted !== null)
-            setHighlighted(null);
-        if (typed)
-            setTyped(false);
-        if (listShown !== null)
-            setListShown(null);
-    }
-    const expanded = open && (listShown ?? !deferred);
-    /** The options on the page, in document order, groups included. */
-    const shownOptions = React.useCallback(() => {
-        const listbox = listboxRef.current;
-        if (!listbox)
-            return [];
-        const shown = [];
-        listbox
-            .querySelectorAll('[role="option"]')
-            .forEach(element => {
-            // Only the Combobox's own options: an element given the role by
-            // hand isn't one.
-            const state = optionsRef.current.get(element);
-            if (state)
-                shown.push({ element, ...state });
-        });
-        return shown;
-    }, []);
-    const requestOpen = React.useCallback((next, landing = 'open') => {
-        if (inline || next === open)
-            return;
-        landingRef.current = next ? landing : null;
-        onOpenChange?.(next);
-        if (!isControlled)
-            setInternalOpen(next);
-    }, [inline, open, onOpenChange, isControlled]);
-    const close = React.useCallback(() => requestOpen(false), [requestOpen]);
-    // After every render, read the list: whether it has options, and where
-    // the highlight goes now. A highlighted option that has left takes the
-    // highlight with it, or hands it to the first enabled one under
-    // `keepFirst`, which also moves it there whenever the options change.
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- after every render on purpose
-    useClientLayoutEffect(() => {
-        const opened = open && !wasOpenRef.current;
-        wasOpenRef.current = open;
-        if (!open) {
-            landingRef.current = null;
-            shownValuesRef.current = [];
+    if (typed && !isActive)
+        setTyped(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
+    const getDisplayValue = (item) => {
+        if (typeof item === 'string')
+            return item;
+        const fieldValue = item[field];
+        if (typeof fieldValue === 'string')
+            return fieldValue;
+        return item.value || '';
+    };
+    // Filter data based on input
+    const filteredData = data.filter(item => {
+        const displayValue = getDisplayValue(item);
+        return displayValue.toLowerCase().includes(inputValue.toLowerCase());
+    });
+    // The dropdown shows the options or, when nothing matches, the `empty`
+    // content. The listbox holds only options, so it's on screen only while
+    // there are some.
+    const menuOpen = isActive && (filteredData.length > 0 || !!empty);
+    const listOpen = isActive && filteredData.length > 0;
+    // Handle input change
+    const handleInputChange = React.useCallback((e) => {
+        const newValue = e.target.value;
+        if (controlledValue === undefined) {
+            setInternalValue(newValue);
+        }
+        onInput?.(newValue);
+        setTyped(true);
+        if (!isActive && newValue) {
+            setIsActive(true);
+        }
+    }, [controlledValue, isActive, onInput]);
+    // Handle item selection
+    const handleSelect = React.useCallback((item) => {
+        if (typeof item !== 'string' && item.disabled)
             return;
+        const displayValue = getDisplayValue(item);
+        if (controlledValue === undefined) {
+            setInternalValue(displayValue);
+        }
+        onInput?.(displayValue);
+        onSelect?.(item);
+        if (!keepOpen) {
+            setIsActive(false);
+        }
+        setHighlightedIndex(-1);
+    }, [controlledValue, field, keepOpen, onInput, onSelect]);
+    // Handle clear
+    const handleClear = React.useCallback(() => {
+        if (controlledValue === undefined) {
+            setInternalValue('');
         }
-        const options = shownOptions();
-        const values = options.map(option => option.value);
-        const changed = !sameValues(values, shownValuesRef.current);
-        shownValuesRef.current = values;
-        setListShown(values.length > 0);
-        const landing = landingRef.current ?? (opened ? 'open' : null);
-        landingRef.current = null;
-        const enabled = options.filter(option => !option.disabled);
-        const checked = enabled.find(option => option.checked)?.value;
-        const first = enabled.length > 0 ? enabled[0].value : null;
-        const last = enabled.length > 0 ? enabled[enabled.length - 1].value : null;
-        let next = highlighted;
-        if (landing === 'first')
-            next = checked ?? first;
-        else if (landing === 'last')
-            next = checked ?? last;
-        else if (landing === 'open')
-            next = checked ?? (keepFirst ? first : null);
-        else if (landing === 'typed')
-            next = keepFirst ? first : null;
-        else if (landing === 'none')
-            next = null;
-        else if (keepFirst && changed)
-            next = first;
-        // Without `keepFirst`, which moved it above, a highlighted option
-        // that left takes the highlight with it.
-        else if (next !== null && !values.includes(next))
-            next = null;
-        // Only a change is set. StrictMode runs this twice on mount, and the
-        // second run, with the landing used up, works out the rendered highlight
-        // again, so it leaves the first run's landing in place.
-        if (next !== highlighted) {
-            scrollToHighlightRef.current = true;
-            setHighlighted(next);
+        onInput?.('');
+        onSelect?.(null);
+        inputRef.current?.focus();
+    }, [controlledValue, onInput, onSelect]);
+    // Handle focus
+    const handleFocus = React.useCallback(() => {
+        if (openOnFocus && !disabled) {
+            setIsActive(true);
+        }
+    }, [openOnFocus, disabled]);
+    // Read when a click lands outside, so the listener stays put while the
+    // list is open. What it selects changes as the user types and arrows
+    // through suggestions, the filtered list is new on every render, and an
+    // inline `onInput` or `onSelect` changes on every render of the parent.
+    // Typing leaves the highlight where it was, so a list that narrowed can
+    // leave it past the last suggestion, with nothing there to select.
+    const selectHighlightedRef = useLatestRef(() => {
+        if (selectOnClickOutside &&
+            highlightedIndex >= 0 &&
+            highlightedIndex < filteredData.length) {
+            handleSelect(filteredData[highlightedIndex]);
         }
     });
-    // A browser scrolls to what has focus, not to an active descendant, so
-    // the highlighted option is brought into view here, when a key or a
-    // landing moved it there.
-    useClientLayoutEffect(() => {
-        if (highlighted === null || !scrollToHighlightRef.current)
-            return;
-        scrollToHighlightRef.current = false;
-        const option = shownOptions().find(shown => shown.value === highlighted);
-        option?.element.scrollIntoView?.({ block: 'nearest' });
-    }, [highlighted, shownOptions]);
-    // A press outside the field and the list closes it. The path is checked
-    // rather than the target, so it works in a shadow root.
+    // Handle blur (click outside)
     React.useEffect(() => {
-        const root = rootRef.current;
-        if (!open || inline || !root)
+        if (!isActive)
             return undefined;
-        const onPress = (event) => {
-            if (event === insidePressRef.current ||
-                isEventInside(event, rootRef.current) ||
-                isEventInside(event, popupRef.current)) {
+        const handleClickOutside = (e) => {
+            if (!containerRef.current)
                 return;
+            // Use composedPath() to correctly detect clicks inside Shadow DOM
+            const path = e.composedPath();
+            const isInside = path.includes(containerRef.current);
+            if (!isInside) {
+                selectHighlightedRef.current();
+                setIsActive(false);
             }
-            close();
         };
-        // Its document, an iframe's when the tree renders into one.
-        const doc = root.ownerDocument;
-        doc.addEventListener('pointerdown', onPress);
-        return () => doc.removeEventListener('pointerdown', onPress);
-    }, [open, inline, close]);
-    const submit = React.useCallback((value) => {
-        onSelect?.(value);
-        if (!multiple)
-            close();
-    }, [onSelect, multiple, close]);
-    const onKeyDown = (event) => {
-        // The caller's handler ran first and can keep a key, and an IME that's
-        // composing owns every key.
-        if (event.defaultPrevented || isComposing$1(event))
-            return;
-        const { key, altKey } = event;
-        if (!open) {
-            if (key === 'ArrowDown' || (key === 'ArrowUp' && !altKey)) {
-                event.preventDefault();
-                requestOpen(true, altKey ? 'none' : key === 'ArrowDown' ? 'first' : 'last');
-            }
-            return;
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isActive, selectHighlightedRef]);
+    // Read when the dropdown opens or closes, so an inline `onActiveChange`,
+    // new on every render of the parent, isn't told again about a state that
+    // didn't change.
+    const onActiveChangeRef = useLatestRef(onActiveChange);
+    // Notify active state change
+    React.useEffect(() => {
+        onActiveChangeRef.current?.(isActive);
+    }, [isActive, onActiveChangeRef]);
+    // Keep first highlighted
+    React.useEffect(() => {
+        if (keepFirst && isActive && filteredData.length > 0) {
+            setHighlightedIndex(0);
         }
-        switch (key) {
+    }, [keepFirst, isActive, filteredData.length, inputValue]);
+    // Handle keyboard navigation
+    const handleKeyDown = React.useCallback((e) => {
+        if (disabled || isComposing$1(e))
+            return;
+        switch (e.key) {
             case 'ArrowDown':
-            case 'ArrowUp': {
-                if (altKey) {
-                    if (key === 'ArrowUp' && !inline) {
-                        event.preventDefault();
-                        close();
-                    }
-                    return;
+                e.preventDefault();
+                if (!isActive) {
+                    // A closed list opens on its first enabled option, as the ARIA
+                    // Authoring Practices' combobox does. Alt+Down Arrow opens it
+                    // without a highlight.
+                    setIsActive(true);
+                    setHighlightedIndex(e.altKey ? -1 : filteredData.map(isEnabled).indexOf(true));
                 }
-                event.preventDefault();
-                // Disabled options too, so a screen reader user finds them.
-                const options = shownOptions();
-                if (options.length === 0)
-                    return;
-                const at = options.findIndex(option => option.value === highlighted);
-                const step = key === 'ArrowDown' ? 1 : -1;
-                const index = at === -1
-                    ? step === 1
-                        ? 0
-                        : options.length - 1
-                    : (at + step + options.length) % options.length;
-                scrollToHighlightRef.current = true;
-                setHighlighted(options[index].value);
-                return;
-            }
-            case 'Enter': {
-                const option = shownOptions().find(shown => shown.value === highlighted);
-                if (option) {
-                    event.preventDefault();
-                    if (!option.disabled)
-                        submit(option.value);
-                    return;
+                else {
+                    setHighlightedIndex(prev => prev < filteredData.length - 1 ? prev + 1 : prev);
                 }
-                // Nothing to pick: the key goes on, so a form submits.
-                onSettle?.();
-                close();
-                return;
-            }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (!isActive) {
+                    // And Up Arrow opens it on its last enabled option.
+                    setIsActive(true);
+                    setHighlightedIndex(filteredData.map(isEnabled).lastIndexOf(true));
+                }
+                else {
+                    setHighlightedIndex(prev => (prev > 0 ? prev - 1 : prev));
+                }
+                break;
+            case 'Enter':
+                // With the list open on a highlighted option it can pick, Enter
+                // is that option's. Otherwise it closes the list and goes on, so
+                // a form around the field submits, as it would from any text
+                // field.
+                if (isActive &&
+                    highlightedIndex >= 0 &&
+                    filteredData[highlightedIndex] &&
+                    isEnabled(filteredData[highlightedIndex])) {
+                    e.preventDefault();
+                    handleSelect(filteredData[highlightedIndex]);
+                }
+                else {
+                    setIsActive(false);
+                }
+                break;
             case 'Escape':
-                if (inline)
-                    return;
-                // It stops here only when there was something to close, so a
-                // Popover or Modal around it keeps its own Escape otherwise. Nothing
-                // stops it going on: a handler further out reads `defaultPrevented`.
-                if (popupRef.current)
-                    event.preventDefault();
-                close();
-                return;
+                // Only closing the dropdown claims the key. With it closed, the
+                // key goes on to a Modal around the field.
+                if (menuOpen)
+                    e.preventDefault();
+                setIsActive(false);
+                setHighlightedIndex(-1);
+                break;
             case 'Tab':
-                close();
-                return;
-            case 'Home':
-            case 'End':
-            case 'ArrowLeft':
-            case 'ArrowRight':
-                // The field's own keys, which take the field back from the list.
-                setHighlighted(null);
-                return;
-        }
-    };
-    const onChange = () => {
-        setTyped(true);
-        if (open) {
-            landingRef.current = 'typed';
-            setHighlighted(null);
-            refresh();
-        }
-        else {
-            requestOpen(true, 'typed');
+                if (isActive &&
+                    highlightedIndex >= 0 &&
+                    filteredData[highlightedIndex]) {
+                    handleSelect(filteredData[highlightedIndex]);
+                }
+                setIsActive(false);
+                break;
         }
-    };
-    const onClick = () => {
-        requestOpen(true, 'open');
-    };
-    const onBlur = (event) => {
-        const next = event.relatedTarget;
-        if (next &&
-            (rootRef.current?.contains(next) || popupRef.current?.contains(next))) {
+    }, [
+        disabled,
+        isActive,
+        menuOpen,
+        highlightedIndex,
+        filteredData,
+        handleSelect,
+    ]);
+    // Handle dropdown scroll for infinite scroll
+    const handleDropdownScroll = React.useCallback(() => {
+        if (!checkInfiniteScroll || !dropdownRef.current)
             return;
+        const { scrollTop, scrollHeight, clientHeight } = dropdownRef.current;
+        if (scrollHeight - scrollTop - clientHeight <= infiniteScrollDistance) {
+            onInfiniteScroll?.();
         }
-        close();
-    };
-    const hover = (value) => {
-        scrollToHighlightRef.current = false;
-        setHighlighted(value);
-    };
-    const pick = (value) => {
-        submit(value);
-        // A press in the list keeps focus in the field, but a browser that
-        // ignores that, or a tap, can leave it elsewhere.
-        const input = inputRef.current;
-        if (input && input.isConnected && getActiveElementInTree(input) !== input) {
-            input.focus();
+    }, [checkInfiniteScroll, infiniteScrollDistance, onInfiniteScroll]);
+    // Scroll highlighted item into view
+    React.useEffect(() => {
+        if (highlightedIndex >= 0 && dropdownRef.current) {
+            const highlightedEl = dropdownRef.current.querySelector(`[data-index="${highlightedIndex}"]`);
+            if (highlightedEl &&
+                typeof highlightedEl.scrollIntoView === 'function') {
+                highlightedEl.scrollIntoView({ block: 'nearest' });
+            }
         }
-    };
-    const keepFocus = (event) => event.preventDefault();
-    const markInside = (event) => {
-        insidePressRef.current = event.nativeEvent;
-    };
-    const registerPopup = React.useCallback((element) => {
-        popupRef.current = element;
-        return () => {
-            popupRef.current = null;
-        };
-    }, []);
-    const registerItem = React.useCallback((element, state) => {
-        const options = optionsRef.current;
-        options.set(element, state);
-        refresh();
-        return () => {
-            options.delete(element);
-            refresh();
-        };
-    }, []);
-    return {
-        open,
-        expanded,
-        highlighted,
-        typed,
-        listboxId,
-        itemId,
-        rootRef,
-        inputRef,
-        listboxRef,
-        registerPopup,
-        registerItem,
-        onKeyDown,
-        onChange,
-        onClick,
-        onBlur,
-        hover,
-        pick,
-        keepFocus,
-        markInside,
-    };
-}
-
-/**
- * Bulma Input component with full Bulma helper class support.
- *
- * @function
- * @param {InputBaseProps} props - Props for the Input component.
- * @returns {JSX.Element} The rendered input element.
- * @see {@link https://bulma.io/documentation/form/input/ | Bulma Input documentation}
- */
-const InputBase = React.forwardRef(({ color, size, isRounded, isStatic, isHovered, isFocused, isLoading, className, disabled, readOnly, ...props }, ref) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color,
-        ...props,
+    }, [highlightedIndex]);
+    // Combined ref
+    const combinedRef = React.useCallback((node) => {
+        inputRef.current =
+            node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current =
+                node;
+        }
+    }, [ref]);
+    // Generate classes
+    const autocompleteClasses = usePrefixedClassNames('autocomplete', {
+        'is-active': isActive,
+        [`is-${size}`]: !!size,
     });
-    // 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', {
+    const inputClasses = usePrefixedClassNames('input', {
         [`is-${color}`]: !!color,
         [`is-${size}`]: !!size,
-        'is-rounded': isRounded,
-        'is-static': isStatic,
-        'is-hovered': isHovered,
-        'is-focused': isFocused,
-        'is-loading': isLoading,
-    });
-    const inputClass = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("input", { ref: ref, className: inputClass, disabled: disabled, readOnly: readOnly, ...rest, 
-        // After the spread, which may carry an undefined id key.
-        id: id }));
-});
-InputBase.displayName = 'InputBase';
-
-/**
- * The `Input` component provides a Bulma-styled text input, supporting colors, sizes, rounded corners, static state, hover/focus/loading states, and all Bulma helper props.
- *
- * @function
- * @param {InputProps} props - Props for Input.
- * @returns {JSX.Element} The composed field element.
- *
- * @example
- * <Input label="Username" placeholder="Enter username" iconLeftName="user" />
- *
- * @example
- * <Input
- *   label="Email"
- *   type="email"
- *   message="Please enter a valid email"
- *   messageColor="danger"
- *   color="danger"
- * />
- */
-const Input = React.forwardRef(({ 
-// Field props
-label, labelSize, labelProps, horizontal, 
-// Control props
-iconLeft, iconRight, iconLeftName, iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, 
-// Message props
-message, messageColor, 
-// Container class overrides
-fieldClassName, controlClassName, 
-// Everything else goes to Input
-...inputProps }, ref) => {
-    const insideField = useInsideField();
-    const insideControl = useInsideControl();
-    const ownField = rendersOwnField('Input', {
-        insideField,
-        insideControl,
-        label,
-        message,
-        horizontal,
-        fieldClassName,
-    });
-    const ownControl = rendersOwnControl('Input', {
-        insideControl,
-        isLoading,
-        iconLeft,
-        iconLeftName,
-        iconLeftSize,
-        iconRight,
-        iconRightName,
-        iconRightSize,
-        hasIconsLeft,
-        hasIconsRight,
-        isExpanded,
-        controlSize,
-        controlClassName,
+        'is-loading': loading,
     });
-    const { controlId, fieldLabelProps } = useAutoLabelId({
-        label,
-        id: inputProps.id,
-        labelProps,
-        rendersLabel: ownField,
+    const controlClasses = usePrefixedClassNames('control', 'is-expanded', 'has-icons-right');
+    const dropdownMenuClasses = usePrefixedClassNames('dropdown-menu', {
+        'is-active': menuOpen,
     });
+    const dropdownContentClass = usePrefixedClassNames('dropdown-content');
+    const dropdownHeaderClass = usePrefixedClassNames('dropdown-header');
+    const dropdownFooterClass = usePrefixedClassNames('dropdown-footer');
+    const emptyItemClasses = usePrefixedClassNames('dropdown-item', 'has-text-grey');
+    const iconRightClickableClass = usePrefixedClassNames('icon', 'is-right', 'is-clickable');
+    const iconRightClass = usePrefixedClassNames('icon', 'is-right');
+    const loaderClass = usePrefixedClassNames('loader', 'is-loading');
+    const combinedClasses = classNames(autocompleteClasses, bulmaHelperClasses, className);
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
-    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 }));
-    }
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
-    if (ownField) {
-        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+    // The clear button gives way to a spinner at its spot: the `loading` one,
+    // or that of a loading Control this sits in.
+    const controlLoading = useControlLoading();
+    const showClear = clearable && !!inputValue && !disabled && !loading && !controlLoading;
+    // The combobox controls its listbox and points at the highlighted option.
+    // The listbox takes its name from the label that names the combobox, the
+    // one this renders or a surrounding Field's, so the two say the same
+    // thing. When no label names the combobox, or the one that does has no
+    // id to point at, the list keeps a fallback name. While the dropdown
+    // shows only the `empty` content there's no listbox, so the combobox is
+    // collapsed and points at nothing.
+    const activeOptionId = listOpen &&
+        highlightedIndex >= 0 &&
+        highlightedIndex < filteredData.length
+        ? `${listboxId}-${highlightedIndex}`
+        : undefined;
+    // A polite status region, in the page from the start so it's there
+    // before anything is written into it, announces the `empty` content
+    // when the user's typing leaves nothing that matches what's in the
+    // field. It follows what's on screen, so results that come in after the
+    // typing count too. It's said once each time that happens, not again on
+    // each keystroke while nothing matches. An empty field isn't a search,
+    // so it stays quiet then, even with no data. While `loading`, or a
+    // loading Control around it, says results are on their way, it waits,
+    // and it's said once loading ends with nothing matching.
+    const emptyItems = typed &&
+        menuOpen &&
+        !listOpen &&
+        !!inputValue &&
+        !loading &&
+        !controlLoading
+        ? typedNoMatches$1
+        : nothingToAnnounce$1;
+    // The region reads the text on screen, whatever `empty` renders.
+    const emptyRef = React.useRef(null);
+    const describeEmpty = React.useCallback(() => {
+        const node = emptyRef.current;
+        /* istanbul ignore if: it's only announced while it's on screen */
+        if (!node)
+            return null;
+        return spokenText(node);
+    }, []);
+    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 }) }))] }), menuOpen && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsxs("div", { ref: dropdownRef, className: dropdownContentClass, style: { maxHeight: `${maxHeight}px`, overflowY: 'auto' }, onScroll: handleDropdownScroll, children: [header && jsxRuntime.jsx("div", { className: dropdownHeaderClass, children: header }), listOpen ? (jsxRuntime.jsx("div", { id: listboxId, role: "listbox", "aria-labelledby": listLabelId, "aria-label": listLabelId ? undefined : 'Suggestions', onMouseDown: keepFocus, children: 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", { id: `${listboxId}-${index}`, "data-index": index, className: itemClasses, onClick: () => !isDisabled && handleSelect(item), onMouseEnter: () => !isDisabled && setHighlightedIndex(index), role: "option", "aria-selected": isHighlighted && !isDisabled, "aria-disabled": isDisabled, children: itemTemplate
+                                        ? itemTemplate(item)
+                                        : getDisplayValue(item) }, index));
+                            }) })) : (jsxRuntime.jsx("div", { ref: emptyRef, className: emptyItemClasses, onMouseDown: keepFocus, children: empty })), footer && jsxRuntime.jsx("div", { className: dropdownFooterClass, children: footer })] }) })), jsxRuntime.jsx(StatusRegion, { items: emptyItems, describe: describeEmpty })] }));
+    if (!insideField) {
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [autocompleteElement, messageEl] }));
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [autocompleteElement, messageEl] }));
 });
-Input.displayName = 'Input';
+Autocomplete.displayName = 'Autocomplete';
 
 const validComboboxSizes = ['small', 'medium', 'large'];
 // What the status region announces: the `Combobox.Empty` content, as the one
@@ -23462,6 +24316,7 @@ exports.Carousel = Carousel;
 exports.CarouselItem = CarouselItem;
 exports.Cell = Cell;
 exports.Checkbox = Checkbox;
+exports.CheckboxCard = CheckboxCard;
 exports.Checkboxes = Checkboxes;
 exports.ClientOnly = ClientOnly;
 exports.Code = Code;
@@ -23476,6 +24331,13 @@ exports.ComboboxInput = ComboboxInput;
 exports.ComboboxItem = ComboboxItem;
 exports.ComboboxList = ComboboxList;
 exports.ComboboxMenu = ComboboxMenu;
+exports.Command = Command;
+exports.CommandDialog = CommandDialog;
+exports.CommandEmpty = CommandEmpty;
+exports.CommandGroup = CommandGroup;
+exports.CommandInput = CommandInput;
+exports.CommandItem = CommandItem;
+exports.CommandList = CommandList;
 exports.ConfigProvider = ConfigProvider;
 exports.Container = Container;
 exports.Content = Content;
@@ -23584,6 +24446,7 @@ exports.Portal = Portal;
 exports.Pre = Pre;
 exports.Progress = Progress;
 exports.Radio = Radio;
+exports.RadioCard = RadioCard;
 exports.Radios = Radios;
 exports.Rate = Rate;
 exports.Reveal = Reveal;