@allxsmith/bestax-bulma 5.31.0 → 5.33.0

package/dist/index.cjs

@@ -1762,26 +1762,36 @@ const Avatar = React.forwardRef(function Avatar(avatarProps, ref) {
 });
 Avatar.displayName = 'Avatar';
 
+// INTERNAL: deliberately not exported from src/index.ts.
 /**
- * Flattens Fragment children (recursively) into a flat element array so they
- * participate in max clamping and size/shape injection. Children.toArray keys
- * restart at ".0" inside each fragment, so fragment children are re-keyed by
- * prefixing the fragment's own key — otherwise a fragment sibling of a direct
- * child would collide (both ".0") and trigger duplicate-key warnings.
+ * A component's children as a flat list, with each Fragment opened up
+ * (recursively) so the items inside one count one by one rather than as the
+ * Fragment. `Children.toArray` already drops `null`, `undefined` and
+ * booleans and flattens arrays, but it keeps a Fragment whole, so an empty
+ * one would still count as an item and two items in one would count as one.
+ *
+ * `Children.toArray` keys restart at ".0" inside each Fragment, so the items
+ * in one are re-keyed with the Fragment's own key as a prefix. Otherwise an
+ * item in a Fragment and a sibling outside it could share a key.
+ *
+ * Text and numbers pass through as they are, so a caller that wants only
+ * elements filters with `React.isValidElement`.
  */
-function flattenChildren$1(children, keyPrefix = '') {
+function flattenChildren(children, keyPrefix = '') {
     return React.Children.toArray(children).flatMap(child => {
         if (!React.isValidElement(child))
-            return [];
+            return [child];
         if (child.type === React.Fragment) {
-            return flattenChildren$1(child.props.children, keyPrefix + child.key);
+            return flattenChildren(child.props.children, keyPrefix + child.key);
         }
-        const el = child;
         return [
-            keyPrefix ? React.cloneElement(el, { key: keyPrefix + el.key }) : el,
+            keyPrefix
+                ? React.cloneElement(child, { key: keyPrefix + child.key })
+                : child,
         ];
     });
 }
+
 /**
  * The `Avatars` component renders an overlapping/stacked group of `Avatar`s, the "members" list pattern.
  *
@@ -1808,7 +1818,9 @@ const AvatarsComponent = ({ className, max, size, shape, spacing = 'md', spaced
         : undefined;
     const surplusClass = usePrefixedClassNames('is-surplus');
     const combinedClasses = classNames(avatarsClasses, bulmaHelperClasses, className);
-    const childArray = flattenChildren$1(children);
+    // Fragments are opened up, so the avatars inside one count toward `max` and
+    // take the group's size and shape one by one. Text between them is dropped.
+    const childArray = flattenChildren(children).filter((child) => React.isValidElement(child));
     const maxCount = typeof max === 'number' && Number.isInteger(max) && max >= 0
         ? max
         : undefined;
@@ -4645,6 +4657,361 @@ const Tabs = withSubComponents(TabsComponent, {
     Content: TabsContent,
 }, 'Tabs');
 
+const validButtonColors = [...validColors, 'text', 'ghost'];
+/**
+ * The `Button` component provides a flexible and highly customizable button for your Bulma React UI.
+ *
+ * @function
+ * @param {ButtonProps} props - Props for the Button component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered button, anchor, or custom element.
+ * @see {@link https://bulma.io/documentation/elements/button/ | Bulma Button documentation}
+ */
+const Button = React.forwardRef(function Button(props, ref) {
+    const { color, size, isLight, isRounded, isLoading, isStatic, isFullwidth, isFullWidth, isOutlined, isInverted, isFocused, isActive, isHovered, isDisabled, className, children, textColor, bgColor, as: Component = 'button', href, onClick, target, rel, ...bulmaProps } = props;
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...bulmaProps,
+    });
+    // Generate Bulma classes with prefix
+    const bulmaClasses = usePrefixedClassNames('button', {
+        [`is-${color}`]: color &&
+            validButtonColors.includes(color),
+        [`is-${size}`]: size,
+        'is-outlined': isOutlined,
+        'is-light': isLight,
+        'is-loading': isLoading,
+        'is-static': isStatic,
+        'is-disabled': isDisabled,
+        'is-rounded': isRounded,
+        'is-hovered': isHovered,
+        'is-focused': isFocused,
+        'is-active': isActive,
+        'is-inverted': isInverted,
+        'is-fullwidth': isFullwidth ?? isFullWidth,
+    });
+    // Combine prefixed Bulma classes with unprefixed user className and prefixed helper classes
+    const buttonClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    if (Component !== 'button') {
+        // Strip the form-control attributes a link-like element cannot carry, so a
+        // JavaScript consumer or a spread object doesn't put them on the DOM. The
+        // types no longer allow them through; this is the runtime backstop.
+        //
+        // Only for INTRINSIC tags. A custom component (a router Link, ...) owns its
+        // prop contract, and `ComponentPropsWithoutRef<T>` promises the caller that
+        // its props reach it. Stripping names by their spelling alone broke that
+        // promise silently: `<Button as={Custom} name="x" />` type-checked while
+        // `Custom` never received the `name` it requires.
+        //
+        // `autoFocus` and `type` are deliberately NOT stripped: both are valid on
+        // targets this list was filtering them from. `autoFocus` is a global
+        // attribute (React decides per element whether to honour it, which is not
+        // ours to pre-empt), and `type` on an anchor is the MIME hint that
+        // `ButtonProps<'a'>` now types it as.
+        //
+        // The types already answer this for a TypeScript caller: `ButtonProps<T>`
+        // derives from `ComponentPropsWithoutRef<T>`, so only what the target
+        // accepts can be passed. What is left is a runtime backstop for JavaScript
+        // consumers and spread objects.
+        //
+        // Keep it to the two cases where a stray attribute does something. The
+        // submit-overrides belong to a submit control and never make sense on the
+        // anchor path. `disabled` is the one that is VISIBLE: Bulma styles
+        // `.button[disabled]` (background, border, shadow, opacity), so letting it
+        // through to a `<span>` greys the element out — main stripped it, and not
+        // stripping it would be a silent visual change on a types-only release.
+        //
+        // Everything else (`name`, `value`, `form`) is inert where it does not
+        // belong, and enumerating which tags own it is what kept going wrong:
+        // first all nine names on every non-button tag (so `<Button as="input"
+        // name="query" value="Search">` submitted nothing), then a form-control
+        // allowlist that still lost `formAction` on an input and `value` on an
+        // option. Those now ride on the types instead.
+        //
+        // A custom component is exempt entirely — it owns its prop contract, and
+        // `ComponentPropsWithoutRef<T>` promises the caller its props arrive.
+        //
+        // The elements that own `disabled`, per the HTML spec. A closed set, unlike
+        // the open-ended question of which tag owns which attribute.
+        const SUBMIT_OVERRIDES = [
+            'formAction',
+            'formEncType',
+            'formMethod',
+            'formNoValidate',
+            'formTarget',
+        ];
+        const OWNS_DISABLED = [
+            'button',
+            'fieldset',
+            'input',
+            'optgroup',
+            'option',
+            'select',
+            'textarea',
+        ];
+        // Two independent filters. They are not exclusive — an `<a>` owns neither
+        // the submit-overrides nor `disabled`, so it takes both — and deriving them
+        // from one destructure, or from one if/else, is what broke each of them in
+        // turn: first the overrides came off every intrinsic (an `as="input"` lost
+        // `formAction`), then scoping them to the anchor let `disabled` back onto
+        // it.
+        const forwardedRest = { ...rest };
+        if (typeof Component === 'string' && !isCustomElement(Component)) {
+            // Meaningless anywhere but a submit control, and an anchor is not one.
+            if (Component === 'a') {
+                for (const key of SUBMIT_OVERRIDES)
+                    delete forwardedRest[key];
+            }
+            // Visible via Bulma's `.button[disabled]`, so withheld from any element
+            // that does not own it.
+            if (!OWNS_DISABLED.includes(Component))
+                delete forwardedRest.disabled;
+        }
+        return (jsxRuntime.jsx(Component, { ref: ref, className: buttonClasses, href: href, target: target, rel: rel, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : undefined, onClick: isDisabled
+                ? // Guarded, because this handler is installed into whatever `as`
+                    // renders and a custom component's `onClick` need not be a DOM
+                    // event handler at all. One declaring `onClick: (v: string) =>
+                    // void` calls this with a string, and an unguarded
+                    // `e.preventDefault()` throws `is not a function`. Blocking the
+                    // real event is the point; a foreign payload is simply not ours
+                    // to act on.
+                    (e) => {
+                        if (typeof e?.preventDefault === 'function')
+                            e.preventDefault();
+                    }
+                : onClick, ...forwardedRest, children: children }));
+    }
+    return (jsxRuntime.jsx("button", { ref: ref, className: buttonClasses, disabled: isDisabled, onClick: onClick, ...rest, children: children }));
+});
+Button.displayName = 'Button';
+
+// INTERNAL: deliberately not exported from src/index.ts.
+/**
+ * `useLayoutEffect` in the browser, `useEffect` on the server. A server
+ * render runs neither, and React 18 warns about a layout effect there, so the
+ * server is handed the plain one.
+ */
+const useClientLayoutEffect = typeof document === 'undefined' ? React.useEffect : React.useLayoutEffect;
+
+// Not exported, so it stays out of the public API that `index.ts` re-exports.
+const SegmentedControlContext = React.createContext(null);
+/** Sorts mounted segments into the order they sit in the page. */
+const inDocumentOrder = (a, b) => a.node.compareDocumentPosition(b.node) & Node.DOCUMENT_POSITION_FOLLOWING
+    ? -1
+    : 1;
+/** How far each arrow key moves along the row. */
+const STEPS = {
+    ArrowRight: 1,
+    ArrowDown: 1,
+    ArrowLeft: -1,
+    ArrowUp: -1,
+};
+/**
+ * The segment a key moves to, found among the segments of the same group in
+ * DOM order, skipping disabled ones and wrapping at either end. `undefined`
+ * for a key the group leaves alone, when no enabled segment is left, or when
+ * the segment isn't inside its row in the page, as a portaled one isn't.
+ */
+function segmentFor(current, key) {
+    const group = current.closest('[role="radiogroup"]');
+    if (!group)
+        return undefined;
+    const segments = Array.from(group.querySelectorAll('[role="radio"]'));
+    const enabled = segments.filter(segment => !segment.disabled);
+    if (key === 'Home')
+        return enabled[0];
+    if (key === 'End')
+        return enabled[enabled.length - 1];
+    const step = STEPS[key];
+    if (!step)
+        return undefined;
+    const at = segments.indexOf(current);
+    for (let i = 1; i <= segments.length; i += 1) {
+        const candidate = segments[(at + step * i + segments.length) % segments.length];
+        if (!candidate.disabled)
+            return candidate;
+    }
+    return undefined;
+}
+/**
+ * The `SegmentedControl` component renders a row of buttons where only one can be on, and tells a screen reader it's a radio group.
+ *
+ * It's Bulma's `.buttons.has-addons` row, with the checked segment filled and
+ * marked `is-selected`, the way Bulma's button docs show it. To a screen
+ * reader it's `role="radiogroup"`, with `role="radio"` and `aria-checked` on
+ * each segment, which is how the APG toolbar example marks its alignment
+ * buttons. The keys follow the APG radio group: the row is one tab stop, the
+ * arrow keys move to the next or previous enabled segment and check it,
+ * wrapping at either end, Home and End go to the first and last, and Space
+ * checks the focused segment. Once a segment is checked, one always is.
+ *
+ * It carries no form value. A choice that's sent with a form is `Radios`.
+ *
+ * @function
+ * @param {SegmentedControlProps} props - Props for the SegmentedControl component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the row's `<div>`.
+ * @returns {JSX.Element} The rendered segmented control.
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/radio/ | APG radio group pattern}
+ * @see {@link https://bulma.io/documentation/elements/button/#list-of-buttons | Bulma list of buttons}
+ *
+ * @example
+ * <SegmentedControl aria-label="Text alignment" defaultValue="left">
+ *   <SegmentedControl.Segment value="left">Left</SegmentedControl.Segment>
+ *   <SegmentedControl.Segment value="center">Center</SegmentedControl.Segment>
+ *   <SegmentedControl.Segment value="right">Right</SegmentedControl.Segment>
+ * </SegmentedControl>
+ */
+const SegmentedControlRoot = React.forwardRef(function SegmentedControl({ value, defaultValue, onChange, color = 'link', size, hasAddons = true, isCentered, isRight, className, children, ...props }, ref) {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    // Controlled vs uncontrolled, as in Tabs and Collapses.
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const checked = isControlled ? (value ?? undefined) : internalValue;
+    const select = (next) => {
+        if (next === checked)
+            return;
+        if (!isControlled)
+            setInternalValue(next);
+        onChange?.(next);
+    };
+    // The segments mount and register from an effect, so the group knows
+    // which can hold the tab stop wherever in the tree they sit.
+    const [segments, setSegments] = React.useState([]);
+    const register = React.useCallback((record) => {
+        setSegments(prev => [...prev, record]);
+        return () => setSegments(prev => prev.filter(r => r !== record));
+    }, []);
+    const [focused, setFocused] = React.useState();
+    // The first enabled segment in the page, sorted when it's read rather
+    // than when a segment registers, so reordered segments are seen too. It's
+    // read after the commit: a render runs before React moves the nodes, so
+    // sorting there would find the old order.
+    const [firstEnabled, setFirstEnabled] = React.useState();
+    useClientLayoutEffect(() => {
+        const inPage = segments.filter(s => !s.disabled).sort(inDocumentOrder);
+        setFirstEnabled(inPage[0]?.value);
+    }, [segments, children]);
+    // One tab stop for the row (roving tabindex). While focus is in the row
+    // the stop follows it, so Tab leaves from wherever focus is even when a
+    // controlled group hasn't taken the new value. Otherwise it's the checked
+    // segment, or the first enabled one when none is checked or the checked
+    // one is disabled. Before the segments register (the server render and
+    // the first client render) the checked one holds it, so a row with
+    // nothing checked has no stop until the client has rendered.
+    const canHoldStop = (candidate) => segments.some(s => !s.disabled && s.value === candidate);
+    let tabStop;
+    if (canHoldStop(focused))
+        tabStop = focused;
+    else if (segments.length === 0 || canHoldStop(checked))
+        tabStop = checked;
+    else
+        tabStop = firstEnabled;
+    const named = Boolean(rest['aria-label'] || rest['aria-labelledby']);
+    React.useEffect(() => {
+        if (!named) {
+            warnOnce('SegmentedControl:unnamed', '[bestax-bulma] <SegmentedControl> has no accessible name. Pass ' +
+                'aria-label or aria-labelledby, so a screen reader can say what ' +
+                'the choice is.');
+        }
+    }, [named]);
+    const rowClasses = usePrefixedClassNames('buttons', {
+        'has-addons': hasAddons,
+        'is-centered': isCentered,
+        'is-right': isRight,
+        [`are-${size}`]: size,
+    });
+    // The props are spread first, so the role a screen reader relies on wins
+    // over anything a JavaScript caller or a spread object passes along.
+    return (jsxRuntime.jsx(SegmentedControlContext.Provider, { value: { checked, tabStop, color, select, setFocused, register }, children: jsxRuntime.jsx("div", { ...rest, ref: ref, role: "radiogroup", className: classNames(rowClasses, bulmaHelperClasses, className), children: children }) }));
+});
+/**
+ * One option in the row: a `<button role="radio">` that's checked while the group's value is its `value`, filled with the group's `color` and marked `is-selected`.
+ *
+ * @function
+ * @param {SegmentedControlSegmentProps} props - Props for the segment.
+ * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.
+ * @returns {JSX.Element} The rendered segment.
+ */
+const Segment = React.forwardRef(function Segment({ value, isDisabled, disabled, className, onClick, onKeyDown, onFocus, onBlur, ...props }, ref) {
+    const ctx = React.useContext(SegmentedControlContext);
+    const checked = ctx !== null && ctx.checked === value;
+    const off = Boolean(isDisabled || disabled);
+    // Prefixed like Button's own classes, which a hand-written
+    // `className="is-selected"` could not be under ConfigProvider classPrefix.
+    // Bulma lifts `is-selected` above its neighbours in `.buttons.has-addons`.
+    const selectedClass = usePrefixedClassNames({ 'is-selected': checked });
+    const nodeRef = React.useRef(null);
+    const setRefs = React.useCallback((node) => {
+        nodeRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const register = ctx?.register;
+    React.useEffect(() => {
+        if (!register) {
+            warnOnce('SegmentedControl.Segment:outside', '[bestax-bulma] <SegmentedControl.Segment> is outside a ' +
+                '<SegmentedControl>, so nothing can check it. Put it inside one.');
+            return undefined;
+        }
+        return register({
+            value,
+            disabled: off,
+            node: nodeRef.current,
+        });
+    }, [register, value, off]);
+    // The caller's onClick runs first, so a `preventDefault()` there keeps
+    // the segment from being checked. A disabled button gets no click.
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        ctx?.select(value);
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (!ctx ||
+            event.defaultPrevented ||
+            event.altKey ||
+            event.ctrlKey ||
+            event.metaKey) {
+            return;
+        }
+        const target = segmentFor(event.currentTarget, event.key);
+        if (!target)
+            return;
+        event.preventDefault();
+        // The row has taken this key, so nothing above it acts on it too: a
+        // Carousel moves its slide on the arrows from a document listener that
+        // doesn't read `defaultPrevented`. Keys the row leaves alone still bubble.
+        event.stopPropagation();
+        target.focus();
+        // The check follows focus, APG's rule for a radio group outside a
+        // toolbar. It goes through a click on the segment, as a native radio's
+        // does, so its onClick sees it. Inside a toolbar the arrows would move
+        // focus alone; that is the line a toolbar would change.
+        target.click();
+    };
+    const handleFocus = (event) => {
+        onFocus?.(event);
+        ctx?.setFocused(value);
+    };
+    // The segment focus moves to, if any, records itself straight after.
+    const handleBlur = (event) => {
+        onBlur?.(event);
+        ctx?.setFocused(undefined);
+    };
+    // The props are spread first, so what a radio depends on wins over
+    // anything a JavaScript caller or a spread object passes along: it stays
+    // a button, never submits, reports whether it's checked, and the group
+    // decides whether Tab reaches it.
+    return (jsxRuntime.jsx(Button, { ...props, ref: setRefs, as: "button", type: "button", role: "radio", "aria-checked": checked, tabIndex: ctx ? (ctx.tabStop === value ? 0 : -1) : undefined, isDisabled: off, color: checked ? ctx.color : undefined, className: classNames(selectedClass, className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur }));
+});
+Segment.displayName = 'SegmentedControl.Segment';
+const SegmentedControl = withSubComponents(SegmentedControlRoot, { Segment }, 'SegmentedControl');
+
 /**
  * The `Loading` component provides a loading overlay with a spinner animation.
  *
@@ -4940,26 +5307,6 @@ function toIndexes(value) {
         return value;
     return typeof value === 'number' ? [value] : [];
 }
-/**
- * Flattens Fragment children (recursively) so each item inside one gets its
- * own index rather than sharing the fragment's. Children.toArray keys restart
- * at ".0" inside each fragment, so those children are re-keyed with the
- * fragment's own key as a prefix, the way Avatars does it.
- */
-function flattenChildren(children, keyPrefix = '') {
-    return React.Children.toArray(children).flatMap(child => {
-        if (!React.isValidElement(child))
-            return [child];
-        if (child.type === React.Fragment) {
-            return flattenChildren(child.props.children, keyPrefix + child.key);
-        }
-        return [
-            keyPrefix
-                ? React.cloneElement(child, { key: keyPrefix + child.key })
-                : child,
-        ];
-    });
-}
 /**
  * The `Collapses` component groups `Collapse` items into an accordion that keeps one item open at a time, or any number with `multiple`.
  *
@@ -5022,14 +5369,6 @@ const CollapsesComponent = ({ multiple = false, value, defaultValue, onChange, s
 };
 const Collapses = withSubComponents(CollapsesComponent, { Collapse }, 'Collapses');
 
-// INTERNAL: deliberately not exported from src/index.ts.
-/**
- * `useLayoutEffect` in the browser, `useEffect` on the server. A server
- * render runs neither, and React 18 warns about a layout effect there, so the
- * server is handed the plain one.
- */
-const useClientLayoutEffect = typeof document === 'undefined' ? React.useEffect : React.useLayoutEffect;
-
 // INTERNAL: deliberately not exported from src/index.ts.
 /**
  * Runs the caller's own handler on the element that holds the trigger, then
@@ -6207,135 +6546,6 @@ function useAnchoredPosition(anchorRef, panelRef, { active, position, fixed, off
     return resolved;
 }
 
-const validButtonColors = [...validColors, 'text', 'ghost'];
-/**
- * The `Button` component provides a flexible and highly customizable button for your Bulma React UI.
- *
- * @function
- * @param {ButtonProps} props - Props for the Button component.
- * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
- * @returns {JSX.Element} The rendered button, anchor, or custom element.
- * @see {@link https://bulma.io/documentation/elements/button/ | Bulma Button documentation}
- */
-const Button = React.forwardRef(function Button(props, ref) {
-    const { color, size, isLight, isRounded, isLoading, isStatic, isFullwidth, isFullWidth, isOutlined, isInverted, isFocused, isActive, isHovered, isDisabled, className, children, textColor, bgColor, as: Component = 'button', href, onClick, target, rel, ...bulmaProps } = props;
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...bulmaProps,
-    });
-    // Generate Bulma classes with prefix
-    const bulmaClasses = usePrefixedClassNames('button', {
-        [`is-${color}`]: color &&
-            validButtonColors.includes(color),
-        [`is-${size}`]: size,
-        'is-outlined': isOutlined,
-        'is-light': isLight,
-        'is-loading': isLoading,
-        'is-static': isStatic,
-        'is-disabled': isDisabled,
-        'is-rounded': isRounded,
-        'is-hovered': isHovered,
-        'is-focused': isFocused,
-        'is-active': isActive,
-        'is-inverted': isInverted,
-        'is-fullwidth': isFullwidth ?? isFullWidth,
-    });
-    // Combine prefixed Bulma classes with unprefixed user className and prefixed helper classes
-    const buttonClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    if (Component !== 'button') {
-        // Strip the form-control attributes a link-like element cannot carry, so a
-        // JavaScript consumer or a spread object doesn't put them on the DOM. The
-        // types no longer allow them through; this is the runtime backstop.
-        //
-        // Only for INTRINSIC tags. A custom component (a router Link, ...) owns its
-        // prop contract, and `ComponentPropsWithoutRef<T>` promises the caller that
-        // its props reach it. Stripping names by their spelling alone broke that
-        // promise silently: `<Button as={Custom} name="x" />` type-checked while
-        // `Custom` never received the `name` it requires.
-        //
-        // `autoFocus` and `type` are deliberately NOT stripped: both are valid on
-        // targets this list was filtering them from. `autoFocus` is a global
-        // attribute (React decides per element whether to honour it, which is not
-        // ours to pre-empt), and `type` on an anchor is the MIME hint that
-        // `ButtonProps<'a'>` now types it as.
-        //
-        // The types already answer this for a TypeScript caller: `ButtonProps<T>`
-        // derives from `ComponentPropsWithoutRef<T>`, so only what the target
-        // accepts can be passed. What is left is a runtime backstop for JavaScript
-        // consumers and spread objects.
-        //
-        // Keep it to the two cases where a stray attribute does something. The
-        // submit-overrides belong to a submit control and never make sense on the
-        // anchor path. `disabled` is the one that is VISIBLE: Bulma styles
-        // `.button[disabled]` (background, border, shadow, opacity), so letting it
-        // through to a `<span>` greys the element out — main stripped it, and not
-        // stripping it would be a silent visual change on a types-only release.
-        //
-        // Everything else (`name`, `value`, `form`) is inert where it does not
-        // belong, and enumerating which tags own it is what kept going wrong:
-        // first all nine names on every non-button tag (so `<Button as="input"
-        // name="query" value="Search">` submitted nothing), then a form-control
-        // allowlist that still lost `formAction` on an input and `value` on an
-        // option. Those now ride on the types instead.
-        //
-        // A custom component is exempt entirely — it owns its prop contract, and
-        // `ComponentPropsWithoutRef<T>` promises the caller its props arrive.
-        //
-        // The elements that own `disabled`, per the HTML spec. A closed set, unlike
-        // the open-ended question of which tag owns which attribute.
-        const SUBMIT_OVERRIDES = [
-            'formAction',
-            'formEncType',
-            'formMethod',
-            'formNoValidate',
-            'formTarget',
-        ];
-        const OWNS_DISABLED = [
-            'button',
-            'fieldset',
-            'input',
-            'optgroup',
-            'option',
-            'select',
-            'textarea',
-        ];
-        // Two independent filters. They are not exclusive — an `<a>` owns neither
-        // the submit-overrides nor `disabled`, so it takes both — and deriving them
-        // from one destructure, or from one if/else, is what broke each of them in
-        // turn: first the overrides came off every intrinsic (an `as="input"` lost
-        // `formAction`), then scoping them to the anchor let `disabled` back onto
-        // it.
-        const forwardedRest = { ...rest };
-        if (typeof Component === 'string' && !isCustomElement(Component)) {
-            // Meaningless anywhere but a submit control, and an anchor is not one.
-            if (Component === 'a') {
-                for (const key of SUBMIT_OVERRIDES)
-                    delete forwardedRest[key];
-            }
-            // Visible via Bulma's `.button[disabled]`, so withheld from any element
-            // that does not own it.
-            if (!OWNS_DISABLED.includes(Component))
-                delete forwardedRest.disabled;
-        }
-        return (jsxRuntime.jsx(Component, { ref: ref, className: buttonClasses, href: href, target: target, rel: rel, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : undefined, onClick: isDisabled
-                ? // Guarded, because this handler is installed into whatever `as`
-                    // renders and a custom component's `onClick` need not be a DOM
-                    // event handler at all. One declaring `onClick: (v: string) =>
-                    // void` calls this with a string, and an unguarded
-                    // `e.preventDefault()` throws `is not a function`. Blocking the
-                    // real event is the point; a foreign payload is simply not ours
-                    // to act on.
-                    (e) => {
-                        if (typeof e?.preventDefault === 'function')
-                            e.preventDefault();
-                    }
-                : onClick, ...forwardedRest, children: children }));
-    }
-    return (jsxRuntime.jsx("button", { ref: ref, className: buttonClasses, disabled: isDisabled, onClick: onClick, ...rest, children: children }));
-});
-Button.displayName = 'Button';
-
 const PopoverContext = React.createContext(null);
 /** Intrinsic elements that are controls already, and keep their own role. */
 const NATIVE_CONTROLS = new Set([
@@ -8579,7 +8789,8 @@ LinkButton.displayName = 'LinkButton';
  * carries no form value: a setting saved with a form is a `Checkbox` or a
  * `Switch`. A set of toggles that each turn on and off on their own goes in
  * `Buttons hasAddons` with `role="group"` and an `aria-label`. A set where only
- * one can be on is a radio group rather than a row of these: use `Radios`.
+ * one can be on is a radio group rather than a row of these: use
+ * `SegmentedControl`, or `Radios` for a choice that's sent with a form.
  *
  * @function
  * @param {ToggleButtonProps} props - Props for the ToggleButton component.
@@ -8932,83 +9143,6 @@ const Image = ({ as, className, textColor, color, bgColor, size, isRounded, isRe
     return (jsxRuntime.jsx(Tag, { className: imageClasses, ...rest, children: content }));
 };
 
-/**
- * The `Link` component renders a styled anchor (`<a>`) element with Bulma helper class integration.
- *
- * @function
- * @param {LinkProps} props - Props for the Link component.
- * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
- * @returns {JSX.Element} The rendered anchor, or whatever `as` names.
- * @see {@link https://bulma.io/documentation/elements/content/ | Bulma Content documentation}
- */
-const Link = React.forwardRef(function Link(linkProps, ref) {
-    const { className, textColor, bgColor, isActive, as: Component = 'a', children, ...props } = linkProps;
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const bulmaClasses = usePrefixedClassNames({
-        'is-active': isActive,
-    });
-    const linkClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx(Component, { ref: ref, className: linkClasses || undefined, ...rest, ...(Component === 'button' ? { type: buttonType(rest.type) } : {}), children: children }));
-});
-Link.displayName = 'Link';
-
-/**
- * The `ListItem` component renders a styled list item (`<li>`) element with Bulma helper class integration.
- *
- * @function
- * @param {ListItemProps} props - Props for the ListItem component.
- * @returns {JSX.Element} The rendered li element.
- */
-const ListItem = ({ className, textColor, bgColor, children, ...props }) => {
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const bulmaClasses = usePrefixedClassNames();
-    const itemClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("li", { className: itemClasses || undefined, ...rest, children: children }));
-};
-
-/**
- * The `Loader` component renders Bulma's `.loader`, a small spinning ring for inline loading states.
- *
- * The ring is `1em` square, so `textSize` scales it. It is exposed as an
- * indeterminate `progressbar` named by `ariaLabel`, and it stops spinning
- * under `prefers-reduced-motion: reduce` while staying drawn.
- *
- * @function
- * @param {LoaderProps} props - Props for the Loader component.
- * @param {React.Ref<HTMLSpanElement>} ref - Forwarded ref to the loader element.
- * @returns {JSX.Element} The rendered loader element.
- *
- * @example
- * <Loader />
- *
- * @example
- * <Loader textSize="3" ariaLabel="Saving" />
- */
-const Loader = React.forwardRef(({ className, ariaLabel = 'Loading', ...props }, ref) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const loaderClass = usePrefixedClassNames('loader');
-    // role="progressbar", not role="status": a status region mounted together
-    // with its text is not reliably announced, so the loader claims only what
-    // it can deliver, a named indicator found by reading the page. No
-    // aria-valuenow, because the progress is indeterminate.
-    return (jsxRuntime.jsx("span", { ref: ref, className: classNames(loaderClass, bulmaHelperClasses, className), role: "progressbar", "aria-label": ariaLabel, ...rest }));
-});
-Loader.displayName = 'Loader';
-
 /**
  * How long after an item appears its announcement is written, in ms. The wait
  * lets a screen reader register a region the container has only just mounted,
@@ -9285,6 +9419,158 @@ function StatusRegion({ items, describe, }) {
     return (jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "false", style: visuallyHidden, children: announcements.map(announcement => (jsxRuntime.jsx("div", { children: announcement.text }, announcement.id))) }));
 }
 
+/**
+ * Keys pressed together or one after another, in the outer `<kbd>` HTML gives a combination, with the separator between each pair as text.
+ *
+ * It doesn't wrap in the middle and isn't drawn as a key itself. It sets no
+ * font size, so the keys in it are the size of a key on its own.
+ *
+ * @function
+ * @param {KbdGroupProps} props - Props for Kbd.Group.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the outer `<kbd>`.
+ * @returns {JSX.Element} The rendered combination.
+ *
+ * @example
+ * <Kbd.Group>
+ *   <Kbd>Ctrl</Kbd>
+ *   <Kbd>Shift</Kbd>
+ *   <Kbd>P</Kbd>
+ * </Kbd.Group>
+ *
+ * @example
+ * <Kbd.Group separator="then">
+ *   <Kbd>G</Kbd>
+ *   <Kbd>I</Kbd>
+ * </Kbd.Group>
+ */
+const KbdGroup = React.forwardRef(({ className, textColor, separator = '+', children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        ...props,
+    });
+    const groupClass = usePrefixedClassNames('kbd-group');
+    const separatorClass = usePrefixedClassNames('kbd-separator');
+    // Null, undefined and booleans drop out, and Fragments are opened up, so
+    // an empty Fragment leaves no separator behind and the keys in one are
+    // separated like the rest. The spaces are part of the text, so a screen
+    // reader reads "Ctrl plus S" rather than one run-together word, whatever
+    // the CSS does.
+    const keys = flattenChildren(children);
+    return (jsxRuntime.jsx("kbd", { ref: ref, className: classNames(groupClass, bulmaHelperClasses, className), ...rest, children: keys.map((key, index) => (jsxRuntime.jsxs(React.Fragment, { children: [index > 0 && (jsxRuntime.jsx("span", { className: separatorClass, children: ` ${separator} ` })), key] }, React.isValidElement(key) && key.key != null ? key.key : index))) }));
+});
+KbdGroup.displayName = 'Kbd.Group';
+/**
+ * The `Kbd` component renders a `<kbd>` drawn as a keycap, for a key the reader presses.
+ *
+ * It only shows the key: it doesn't listen for it. The key takes its colors
+ * from the text it sits in, and its size in `em`, so it fits a paragraph, a
+ * title or a filled button as it is, and `textSize` sizes it outright. For a
+ * combination or a sequence, put the keys in a `Kbd.Group`. What tells
+ * assistive tech a control has a shortcut is `aria-keyshortcuts` on that
+ * control, with `Kbd` as the hint people see next to it.
+ *
+ * @function
+ * @param {KbdProps} props - Props for the Kbd component.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<kbd>`.
+ * @returns {JSX.Element} The rendered key.
+ *
+ * @example
+ * <Kbd>Esc</Kbd>
+ *
+ * @example
+ * <Kbd label="Command">⌘</Kbd>
+ */
+const KbdRoot = React.forwardRef(({ className, textColor, bgColor, label, children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const kbdClass = usePrefixedClassNames('kbd');
+    // The name is text rather than an aria-label, which ARIA in HTML
+    // prohibits on kbd. Its styles are inline, so it stays hidden in a
+    // modular build that leaves out Bulma's helper classes.
+    return (jsxRuntime.jsx("kbd", { ref: ref, className: classNames(kbdClass, bulmaHelperClasses, className), ...rest, children: label ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { "aria-hidden": "true", children: children }), jsxRuntime.jsx("span", { style: visuallyHidden, children: label })] })) : (children) }));
+});
+const Kbd = withSubComponents(KbdRoot, { Group: KbdGroup }, 'Kbd');
+
+/**
+ * The `Link` component renders a styled anchor (`<a>`) element with Bulma helper class integration.
+ *
+ * @function
+ * @param {LinkProps} props - Props for the Link component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered anchor, or whatever `as` names.
+ * @see {@link https://bulma.io/documentation/elements/content/ | Bulma Content documentation}
+ */
+const Link = React.forwardRef(function Link(linkProps, ref) {
+    const { className, textColor, bgColor, isActive, as: Component = 'a', children, ...props } = linkProps;
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames({
+        'is-active': isActive,
+    });
+    const linkClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx(Component, { ref: ref, className: linkClasses || undefined, ...rest, ...(Component === 'button' ? { type: buttonType(rest.type) } : {}), children: children }));
+});
+Link.displayName = 'Link';
+
+/**
+ * The `ListItem` component renders a styled list item (`<li>`) element with Bulma helper class integration.
+ *
+ * @function
+ * @param {ListItemProps} props - Props for the ListItem component.
+ * @returns {JSX.Element} The rendered li element.
+ */
+const ListItem = ({ className, textColor, bgColor, children, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames();
+    const itemClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("li", { className: itemClasses || undefined, ...rest, children: children }));
+};
+
+/**
+ * The `Loader` component renders Bulma's `.loader`, a small spinning ring for inline loading states.
+ *
+ * The ring is `1em` square, so `textSize` scales it. It is exposed as an
+ * indeterminate `progressbar` named by `ariaLabel`, and it stops spinning
+ * under `prefers-reduced-motion: reduce` while staying drawn.
+ *
+ * @function
+ * @param {LoaderProps} props - Props for the Loader component.
+ * @param {React.Ref<HTMLSpanElement>} ref - Forwarded ref to the loader element.
+ * @returns {JSX.Element} The rendered loader element.
+ *
+ * @example
+ * <Loader />
+ *
+ * @example
+ * <Loader textSize="3" ariaLabel="Saving" />
+ */
+const Loader = React.forwardRef(({ className, ariaLabel = 'Loading', ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const loaderClass = usePrefixedClassNames('loader');
+    // role="progressbar", not role="status": a status region mounted together
+    // with its text is not reliably announced, so the loader claims only what
+    // it can deliver, a named indicator found by reading the page. No
+    // aria-valuenow, because the progress is indeterminate.
+    return (jsxRuntime.jsx("span", { ref: ref, className: classNames(loaderClass, bulmaHelperClasses, className), role: "progressbar", "aria-label": ariaLabel, ...rest }));
+});
+Loader.displayName = 'Loader';
+
 /**
  * The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.
  *
@@ -19143,6 +19429,8 @@ exports.IconText = IconText;
 exports.Image = Image;
 exports.Input = Input;
 exports.InputBase = InputBase;
+exports.Kbd = Kbd;
+exports.KbdGroup = KbdGroup;
 exports.Level = Level;
 exports.LevelItem = LevelItem;
 exports.LevelLeft = LevelLeft;
@@ -19206,6 +19494,7 @@ exports.Radios = Radios;
 exports.Rate = Rate;
 exports.Reveal = Reveal;
 exports.Section = Section;
+exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;
 exports.SelectBase = SelectBase;
 exports.Sidebar = Sidebar;