@allxsmith/bestax-bulma 5.62.0 → 5.64.0

package/dist/index.cjs

@@ -3937,378 +3937,1125 @@ const IconButton = React.forwardRef(function IconButton(props, ref) {
 });
 IconButton.displayName = 'IconButton';
 
+// INTERNAL: deliberately not exported from src/index.ts.
 /**
- * The `LinkButton` component renders a `<button>` that visually looks like text or a link.
- *
- * @function
- * @param {LinkButtonProps} props - Props for the LinkButton component.
- * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
- * @returns {JSX.Element} The rendered link-styled button element.
- *
- * @example
- * // Text variant (default)
- * <LinkButton onClick={handleClick}>Click me</LinkButton>
+ * A check mark, 1em square and drawn in `currentColor`, so it takes the text
+ * color around it, the system's in forced colors included. Combobox draws it
+ * beside a chosen item, and CopyButton after a copy. It's decorative: put it
+ * inside something `aria-hidden`.
  *
- * @example
- * // Underline variant with color
- * <LinkButton variant="underline" color="primary">Learn more</LinkButton>
+ * @function CheckIcon
+ * @returns The check mark's `<svg>`.
  */
-const LinkButton = React.forwardRef(function LinkButton({ variant = 'text', color, className, ...props }, ref) {
-    const buttonColor = variant === 'underline' ? 'text' : variant;
-    const prefixedClasses = usePrefixedClassNames('link-button', color && `link-button-${color}`, variant === 'underline' && 'link-button-underline');
-    return (jsxRuntime.jsx(Button
-    // LinkButton is polymorphic through to Button, which resolves the element
-    // from `as`. TS cannot infer that through the spread below.
-    , { 
-        // LinkButton is polymorphic through to Button, which resolves the element
-        // from `as`. TS cannot infer that through the spread below.
-        ref: ref, color: buttonColor, className: classNames(prefixedClasses, className), ...props }));
-});
-LinkButton.displayName = 'LinkButton';
+function CheckIcon$1() {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "1em", height: "1em", focusable: "false", children: jsxRuntime.jsx("polyline", { points: "3 8.5 6.5 12 13 4.5" }) }));
+}
 
+// "Are we past hydration?" as a store that never changes: React reads the
+// server snapshot both while server-rendering and while hydrating, and the
+// client snapshot from the first post-hydration render onward.
+const subscribeToNothing = () => () => { };
+const getClientSnapshot = () => true;
+const getServerSnapshot = () => false;
 /**
- * The `ToggleButton` component renders a button that stays pressed until it's pressed again, and says whether it's on through `aria-pressed`.
- *
- * It's always a `<button type="button">`, so it never submits a form and
- * 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
- * `SegmentedControl`, or `Radios` for a choice that's sent with a form.
+ * Reports whether the component has passed hydration.
  *
- * @function
- * @param {ToggleButtonProps} props - Props for the ToggleButton component.
- * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.
- * @returns {JSX.Element} The rendered toggle button.
- * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/ | APG button pattern}
+ * Returns `false` during server rendering and during the hydrating client
+ * render, then `true` from the commit that follows. Use it to defer
+ * DOM-only behaviour (such as portalling) past hydration so the first client
+ * render matches the server markup instead of tripping hydration recovery.
  *
- * @example
- * <ToggleButton onPressedChange={setMuted}>Mute</ToggleButton>
+ * Only a component that hydrates ever sees `false` on the client. One that
+ * mounts later (after a route change, or in an app with no server rendering)
+ * gets `true` on its first render, so it pays for no extra render. It
+ * subscribes to nothing, so no later render flips it back.
  *
- * @example
- * <Buttons hasAddons role="group" aria-label="Text style">
- *   <ToggleButton aria-label="Bold" pressed={bold} onPressedChange={setBold}>
- *     <Icon name="bold" />
- *   </ToggleButton>
- * </Buttons>
+ * @function useIsHydrated
+ * @returns `true` once the hydrating render has completed, otherwise `false`.
  */
-const ToggleButton = React.forwardRef(function ToggleButton({ pressed: controlledPressed, defaultPressed = false, onPressedChange, color = 'link', isLoading, 'aria-busy': ariaBusy, 'aria-disabled': ariaDisabled, className, onClick, ...props }, ref) {
-    const isControlled = controlledPressed !== undefined;
-    const [internalPressed, setInternalPressed] = React.useState(defaultPressed);
-    const pressed = controlledPressed ?? internalPressed;
-    // 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': pressed });
-    // The caller's onClick runs first, so a `preventDefault()` there vetoes
-    // the toggle, as it does in Radix, MUI and Zag. Enter and Space reach here
-    // through the button's own click, and a disabled button gets no click.
-    //
-    // A loading one gets the click but drops it. Bulma's spinner only stops a
-    // pointer, so without this a key flipped a toggle the mouse couldn't.
-    // `disabled` would stop both, but it takes focus away mid-save.
-    const handleClick = (event) => {
-        if (isLoading)
-            return;
-        onClick?.(event);
-        if (event.defaultPrevented)
-            return;
-        const next = !pressed;
-        onPressedChange?.(next);
-        if (!isControlled)
-            setInternalPressed(next);
-    };
-    // The props are spread first, so what a toggle depends on wins over
-    // anything a JavaScript caller or a spread object passes along: it stays
-    // a button, never submits, reports the state it's in, and says it's busy
-    // and won't respond while it's loading. A caller's own `aria-busy` or
-    // `aria-disabled` stays when it isn't loading.
-    return (jsxRuntime.jsx(Button, { ...props, ref: ref, as: "button", type: "button", isLoading: isLoading, "aria-busy": isLoading || ariaBusy, "aria-disabled": isLoading || ariaDisabled, "aria-pressed": pressed, color: pressed ? color : undefined, className: classNames(selectedClass, className), onClick: handleClick }));
-});
-ToggleButton.displayName = 'ToggleButton';
+function useIsHydrated() {
+    return React.useSyncExternalStore(subscribeToNothing, getClientSnapshot, getServerSnapshot);
+}
 
-const validButtonsSizes = ['small', 'medium', 'large'];
 /**
- * The `Buttons` component lets you group multiple `Button` elements together with Bulma's spacing, alignment, and add-on features.
+ * Resolves a portal target: an `HTMLElement` is used directly, a non-empty
+ * `string` is treated as a `document.querySelector` selector (falling back to
+ * `document.body` when it matches nothing), and any falsy value — `undefined`
+ * or the empty string — resolves to `document.body`.
  *
- * @function
- * @param {ButtonsProps} props - Props for the Buttons component.
- * @returns {JSX.Element} The rendered group of buttons.
- * @see {@link https://bulma.io/documentation/elements/button/#group | Bulma Button Group documentation}
- */
-const ButtonsComponent = ({ className, textColor, color, bgColor, isCentered, isRight, hasAddons, size, children, ...props }) => {
-    const buttonsClasses = usePrefixedClassNames('buttons', {
-        'is-centered': isCentered,
-        'is-right': isRight,
-        'has-addons': hasAddons,
-        [`are-${size}`]: size && validButtonsSizes.includes(size),
-    });
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor ?? color,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const combinedClasses = classNames(buttonsClasses, className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("div", { className: combinedClasses, ...rest, children: children }));
-};
-const Buttons = withSubComponents(ButtonsComponent, {
-    Button,
-    LinkButton,
-    ToggleButton,
-    IconButton,
-}, 'Buttons');
-
-/**
- * The `Paragraph` component renders a styled `<p>` element with Bulma helper class integration.
+ * The empty string is deliberately treated as "no target" rather than passed
+ * through: `document.querySelector('')` throws a `SyntaxError`, and callers
+ * building a selector from state can easily hand us `''`.
  *
- * @function
- * @param {ParagraphProps} props - Props for the Paragraph component.
- * @returns {JSX.Element} The rendered paragraph element.
+ * @function resolvePortalContainer
+ * @param container - The requested portal target, if any.
+ * @returns The resolved DOM node to portal into.
  */
-const Paragraph = ({ 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 paragraphClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("p", { className: paragraphClasses || undefined, ...rest, children: children }));
-};
-
-const validTitleSizes = ['1', '2', '3', '4', '5', '6'];
-const validTitleElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'];
+function resolvePortalContainer(container) {
+    if (!container) {
+        return document.body;
+    }
+    if (typeof container === 'string') {
+        return (document.querySelector(container) ?? document.body);
+    }
+    return container;
+}
 /**
- * The `Title` component renders a Bulma-styled title (heading), supporting sizes `1`-`6`, spacing, and rendering as any heading or paragraph element (`h1`-`h6`, `p`).
+ * Where a component's portal goes, as a function to call when the portal is
+ * created: the target the component was given, else the `portalContainer` a
+ * `ConfigProvider` sets, else `document.body`, each read as
+ * `resolvePortalContainer` reads it. A component that portals resolves its
+ * target through this, so the provider's default reaches it.
  *
- * @function
- * @param {TitleProps} props - Props for the Title component.
- * @returns {JSX.Element} The rendered title element.
- * @see {@link https://bulma.io/documentation/elements/title/ | Bulma Title documentation}
- */
-const Title = ({ className, size, isSpaced, as = 'h1', hasSkeleton, textColor, bgColor, children, ...props }) => {
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    // Validate 'as' prop at runtime
-    const element = validTitleElements.includes(as) ? as : 'h1';
-    // Validate 'size' prop at runtime (numeric sizes normalize to strings)
-    const normalized = size == null ? undefined : String(size);
-    const validSize = normalized && validTitleSizes.includes(normalized)
-        ? normalized
-        : undefined;
-    const bulmaClasses = usePrefixedClassNames('title', {
-        [`is-${validSize}`]: validSize,
-        'is-spaced': isSpaced,
-        'has-skeleton': hasSkeleton,
-    });
-    const titleClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    // Determine the tag based on 'element' and 'validSize'
-    const Tag = element === 'p' ? 'p' : validSize ? `h${validSize}` : element;
-    return (jsxRuntime.jsx(Tag, { className: titleClasses, ...rest, children: children }));
-};
-
-const validEmptyStateColors = [
-    'primary',
-    'link',
-    'info',
-    'success',
-    'warning',
-    'danger',
-];
-const validEmptyStateHeadings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-const validEmptyStateSizes = ['small', 'medium', 'large'];
-/**
- * The circle the picture sits in, hidden from assistive tech whatever is in it.
+ * The hook only reads context, so it is safe to call on the server, ahead of
+ * any early return. The function it returns reads the DOM, so call it only
+ * where the portal is created, which the server never reaches.
  *
- * @function
- * @param {EmptyStateIndicatorProps} props - Props for EmptyState.Indicator.
- * @returns {JSX.Element} The rendered indicator.
+ * @function usePortalContainer
+ * @returns A function that takes the component's own target, if any, and
+ * returns the DOM node to portal into.
  */
-const EmptyStateIndicator = ({ className, textColor, bgColor, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const indicatorClass = usePrefixedClassNames('empty-state-indicator');
-    // Hidden after the rest of the props, so nothing passed in can expose the
-    // picture: the title says what it means.
-    return (jsxRuntime.jsx("div", { className: classNames(indicatorClass, bulmaHelperClasses, className), ...rest, "aria-hidden": "true", children: children }));
-};
-EmptyStateIndicator.displayName = 'EmptyState.Indicator';
+function usePortalContainer() {
+    const { portalContainer } = useConfig();
+    return container => resolvePortalContainer(container || portalContainer);
+}
 /**
- * The heading, a Bulma `Title` at the level `as` sets, `h2` by default, and at the EmptyState's size.
+ * Reads Modal's `portal` prop (`boolean | string | HTMLElement`) for a
+ * component that takes it: whether the content is in its portal yet, and
+ * where it goes.
  *
- * @function
- * @param {EmptyStateTitleProps} props - Props for EmptyState.Title.
- * @returns {JSX.Element} The rendered heading.
- */
-const EmptyStateTitle = ({ as = 'h2', className, ...props }) => {
-    // `size` isn't in the type, but on `Title` it picks the tag, so it's kept
-    // off even when it's passed anyway. The level is `as` alone.
-    const { size: _size, ...rest } = props;
-    const titleClass = usePrefixedClassNames('empty-state-title');
-    const level = validEmptyStateHeadings.includes(as) ? as : 'h2';
-    return (jsxRuntime.jsx(Title, { as: level, className: classNames(titleClass, className), ...rest }));
-};
-EmptyStateTitle.displayName = 'EmptyState.Title';
-/**
- * A sentence or two under the title, in the color of the text around it.
+ * A portal has no server-rendered counterpart, so such a component renders in
+ * place on the server and while hydrating, and moves into its portal once the
+ * client takes over. Render the content in `Portal` with
+ * `disabled={!isPortaled}` and this `container`. Moving remounts the content,
+ * so an effect that holds one of its nodes depends on `isPortaled`, `portal`
+ * and `defaultTarget`.
  *
- * @function
- * @param {EmptyStateDescriptionProps} props - Props for EmptyState.Description.
- * @returns {JSX.Element} The rendered description.
+ * @function usePortalProp
+ * @param portal - The component's `portal` prop.
+ * @returns Whether it's portaled now, its `container`, and the provider's
+ * target while that places it.
  */
-const EmptyStateDescription = ({ className, ...props }) => {
-    const descriptionClass = usePrefixedClassNames('empty-state-description');
-    return (jsxRuntime.jsx(Paragraph, { className: classNames(descriptionClass, className), ...props }));
-};
-EmptyStateDescription.displayName = 'EmptyState.Description';
+function usePortalProp(portal) {
+    const hydrated = useIsHydrated();
+    const { portalContainer } = useConfig();
+    const isPortaled = Boolean(portal) && hydrated;
+    return {
+        isPortaled,
+        container: typeof portal === 'boolean' ? undefined : portal,
+        defaultTarget: isPortaled && portal === true ? portalContainer : undefined,
+    };
+}
 /**
- * A row of buttons, centered under the text or at the start of the line beside the indicator.
+ * Renders its children into another part of the page, `document.body` unless `container` or a `ConfigProvider` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context.
  *
- * @function
- * @param {EmptyStateActionsProps} props - Props for EmptyState.Actions.
- * @returns {JSX.Element} The rendered row of buttons.
- */
-const EmptyStateActions = ({ className, ...props }) => {
-    const actionsClass = usePrefixedClassNames('empty-state-actions');
-    return jsxRuntime.jsx(Buttons, { className: classNames(actionsClass, className), ...props });
-};
-EmptyStateActions.displayName = 'EmptyState.Actions';
-/** Whether a shorthand prop was given something to render. */
-const isGiven$3 = (node) => node !== undefined &&
-    node !== null &&
-    typeof node !== 'boolean' &&
-    node !== '';
-/**
- * The `EmptyState` component renders the block an app shows where content would be: an empty list, a search with no results, or a first-run screen.
+ * React's server renderer can't render a portal, so `Portal` renders nothing
+ * on the server and during hydration, and mounts its children in the commit
+ * that follows. The first client render then matches the server markup. In an app
+ * without server rendering it portals on the first render.
  *
- * It's a column of a picture in a circle, a heading, a line of text and the
- * actions, with one layout whether it's written with the `icon`, `title` and
- * `description` props or with the parts. The children always render as
- * written, after the parts the props render.
+ * React context, such as `ConfigProvider`'s class prefix, reaches the
+ * portaled children, and their React events bubble through the React tree.
+ * CSS inheritance follows the DOM instead: a scoped (non-`isRoot`) `Theme`
+ * sets its variables on a wrapper element the portaled content has left, so
+ * that content sees the page-level theme, and styles scoped to a shadow root
+ * don't reach `document.body` at all. To keep them, portal into an element
+ * inside the themed area or the shadow root: pass it as `container`, or as
+ * the `portalContainer` of a `ConfigProvider` around that area. The second
+ * also reaches what the library's components portal, such as Popover's
+ * `appendToBody` panel or a `Modal` with `portal`.
  *
- * It has no role and no live region. It arrives already filled and goes away
- * when results come back, so it can't announce a search that matched
- * nothing: keep a `role="status"` region beside the search field for that,
- * in the page the whole time. While the data loads, show a `Skeleton` or a
- * `Loader` instead, so "No projects yet" doesn't flash first, and show a
- * load that failed in a `Message` or a `Notification`.
+ * Inside a `LocaleProvider`, the children keep its `dir` and `lang`. A
+ * container inside the provider's own wrapper takes the children as they
+ * are, and they follow the provider through the page. Any other,
+ * `document.body` included, gets them inside one `<div>` carrying the
+ * provider's values, with `display: contents` so it adds no box. It is
+ * still an element, so content that must be the container's direct child,
+ * a `<tr>` in a `<tbody>`, or that a direct-child selector styles, belongs
+ * in a container inside the provider. Which of the two is settled when the
+ * children mount, so a change of locale updates them in place rather than
+ * remounting them.
+ *
+ * Tab order and focus follow the DOM too. Content portaled from inside a
+ * focus trap is no longer inside the trapped element, so the trap neither
+ * reaches it nor holds focus there: render nested overlays inside the
+ * trapped element, or give them a trap of their own. To trap portaled
+ * content, put `useFocusTrap`'s ref on the element inside the `Portal`.
  *
  * @function
- * @param {EmptyStateProps} props - Props for the EmptyState component.
- * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the root `<div>`.
- * @returns {JSX.Element} The rendered empty state.
+ * @param {PortalProps} props - Props for the Portal component.
+ * @returns The portal, the children in place when `disabled`, or nothing
+ * before hydration.
  *
  * @example
- * <EmptyState
- *   icon="folder-open"
- *   title="No projects yet"
- *   description="Projects you create or join show up here."
- * >
- *   <Button color="primary">New project</Button>
- * </EmptyState>
- */
-const EmptyStateRoot = React.forwardRef(({ className, icon, title, titleAs = 'h2', description, children, color, variant = 'light', size = 'normal', align = 'center', textColor, bgColor, ...props }, ref) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const rootClass = usePrefixedClassNames('empty-state', {
-        [`is-${size}`]: validEmptyStateSizes.includes(size),
-        'is-left': align === 'left',
-        [`is-${color}`]: !!color && validEmptyStateColors.includes(color),
-        'is-filled': variant === 'filled',
-    });
-    // The props' parts first, each only when it's given, then the children
-    // exactly as they were written: nothing here looks at them.
-    return (jsxRuntime.jsxs("div", { ref: ref, className: classNames(rootClass, bulmaHelperClasses, className), ...rest, children: [isGiven$3(icon) && (jsxRuntime.jsx(EmptyStateIndicator, { children: typeof icon === 'string' ? jsxRuntime.jsx(Icon, { name: icon }) : icon })), isGiven$3(title) && (jsxRuntime.jsx(EmptyStateTitle, { as: titleAs, children: title })), isGiven$3(description) && (jsxRuntime.jsx(EmptyStateDescription, { children: description })), children] }));
-});
-const EmptyState = withSubComponents(EmptyStateRoot, {
-    Indicator: EmptyStateIndicator,
-    Title: EmptyStateTitle,
-    Description: EmptyStateDescription,
-    Actions: EmptyStateActions,
-}, 'EmptyState');
-
-// INTERNAL: deliberately not exported from src/index.ts.
-/** The major version of the React this bundle is running against. */
-const runningMajor = () => Number(React.version.split('.')[0]);
-/**
- * The prop that makes an element inert, spelled for the React in use, or
- * nothing when `inert` is false.
+ * <Portal>
+ *   <div className="box">Rendered at the end of document.body</div>
+ * </Portal>
  *
- * Both majors must render `inert=""`, and each warns on the other's spelling
- * and then drops the attribute. React 19 treats `inert` as a boolean and
- * rejects the empty string. React 18 does not know the attribute, so it
- * passes a string through and rejects `true`.
+ * @example
+ * // Into a dedicated overlay root
+ * <Portal container="#overlays">
+ *   <CommandPalette />
+ * </Portal>
  */
-const inertProps = (inert, major = runningMajor()) => {
-    if (!inert)
-        return {};
-    // The cast is for React 18's spelling: this package's types are React 19's,
-    // where `inert` is a boolean.
-    return (major >= 19
-        ? { inert: true }
-        : { inert: '' });
-};
+function Portal({ children, container, disabled = false }) {
+    const hydrated = useIsHydrated();
+    const resolveContainer = usePortalContainer();
+    if (disabled)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+    if (!hydrated)
+        return null;
+    const target = resolveContainer(container);
+    return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, children: children }), target);
+}
 
-// Context to track MenuList nesting level
-const MenuListLevelContext = React.createContext(0);
 /**
- * The `Menu` component provides Bulma's vertical navigation menu: a simple, accessible sidebar or section menu for your Bulma React UI.
- *
- * @function
- * @param {MenuProps} props - Props for the Menu component.
- * @returns {JSX.Element} The rendered menu.
- * @see {@link https://bulma.io/documentation/components/menu/ | Bulma Menu documentation}
+ * 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,
+ * and items shown in quick succession are written, and read out, together.
  */
-const MenuComponent = ({ className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    // Generate Bulma classes with prefix
-    const bulmaClasses = usePrefixedClassNames('menu');
-    return (jsxRuntime.jsx("aside", { className: classNames(bulmaClasses, bulmaHelperClasses, className), ...rest, children: children }));
-};
+const announceDelay = 100;
 /**
- * Bulma Menu label component.
- *
- * @function
- * @param {MenuLabelProps} props - Props for the MenuLabel component.
- * @returns {JSX.Element} The rendered menu label.
+ * How long an announcement stays in the region once written, in ms. That's
+ * long enough for a screen reader to pick it up. Clearing it after keeps a
+ * second copy of the item's text from sitting in the page, where someone
+ * reading through the page, or a test looking the text up, would find it
+ * again.
  */
-const MenuLabel = ({ className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsxRuntime.jsx("p", { className: classNames(usePrefixedClassNames('menu-label'), className, bulmaHelperClasses), ...rest, children: children }));
+const announcementLifetime = 1000;
+const noAnnouncements$2 = [];
+const nothingWritten = [];
+const noAnnouncementsYet = {
+    key: 0,
+    waiting: noAnnouncements$2,
+    written: nothingWritten,
+};
+// Hides the region with inline styles rather than a class, so it needs no
+// stylesheet, including the helper classes a modular Bulma build can leave
+// out. Clipping it, rather than using `display` or `visibility`, keeps it in
+// the accessibility tree. The declarations match the `extras-sr-only` mixin,
+// plus `clip-path`, which replaces the deprecated `clip`. The negative margin
+// pulls the 1px box back inside the page, so it doesn't add scrollable
+// overflow. Exported for other live regions that must work without a
+// stylesheet, such as a range calendar's.
+const visuallyHidden = {
+    position: 'absolute',
+    width: '1px',
+    height: '1px',
+    padding: 0,
+    margin: '-1px',
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    clipPath: 'inset(50%)',
+    whiteSpace: 'nowrap',
+    border: 0,
 };
 /**
- * MenuList applies `menu-list` class only at the top level (not for nested lists).
+ * Works out what a status region says. Each item is announced once each time
+ * it appears, so one that goes and comes back is announced again. Its
+ * announcement is written `announceDelay` after it appears, or after the last
+ * item to join it when several appear in quick succession, alongside whatever
+ * the region still says. Once written, it stays for `announcementLifetime`,
+ * whatever is written after it and whether or not its item goes in the
+ * meantime. An item that goes before its announcement is written isn't
+ * announced.
  *
- * Every level renders `role="list"`, which Safari needs: WebKit stops
- * exposing a `<ul>` as a list once its markers are hidden, and Bulma's reset
- * hides them.
+ * Nothing is written in the commit that mounts the region or the item. A
+ * screen reader reliably announces a polite live region whose content changes
+ * after the region is already in the page, and not always one that arrives
+ * with its content. By the time `describe` runs, an item's rendered text can
+ * be read.
  *
- * @function
- * @param {MenuListProps} props - Props for the MenuList component.
- * @returns {JSX.Element} The rendered menu list.
+ * @function useAnnouncements
+ * @param items - The items to announce, in the order they were shown.
+ * @param describe - The text to announce for an item, or nothing to skip it.
+ *   It runs once the item is on screen, and it must keep its identity between
+ *   renders (a module-level function or a `useCallback`), or every render
+ *   re-checks the items.
+ * @returns The announcements to render, in the order they were written.
  */
-const MenuList = ({ className, children, ...props }) => {
-    const level = React.useContext(MenuListLevelContext);
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const ulClass = classNames(className, bulmaHelperClasses, {
+function useAnnouncements(items, describe) {
+    // The ids of the items on screen as of the last change, every one of which
+    // has been looked at for an announcement already.
+    const onScreenIdsRef = React.useRef(new Set());
+    // Clears that haven't run yet. They outlive the batch that started them, so
+    // they're only stopped when the region unmounts.
+    const clearTimersRef = React.useRef(new Set());
+    const [announcements, setAnnouncements] = React.useState(noAnnouncementsYet);
+    // Runs after the commit that puts an item on screen, which is the first
+    // point its rendered text can be read.
+    React.useEffect(() => {
+        const announced = onScreenIdsRef.current;
+        const appeared = items.filter(item => !announced.has(item.id));
+        // Items that have gone drop out here too, so one that comes back has
+        // appeared again.
+        onScreenIdsRef.current = new Set(items.map(item => item.id));
+        const next = [];
+        for (const item of appeared) {
+            const text = describe(item);
+            if (text)
+                next.push({ id: item.id, text });
+        }
+        if (next.length > 0) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect -- an item's rendered text can only be read once it's on screen
+            setAnnouncements(current => ({
+                ...current,
+                key: current.key + 1,
+                // Announcements still waiting go out with the new ones, apart from
+                // one whose item came back before it was written, which the new one
+                // replaces. What's already written stays put.
+                waiting: [
+                    ...current.waiting.filter(waiting => !next.some(({ id }) => id === waiting.id)),
+                    ...next,
+                ],
+            }));
+        }
+    }, [items, describe]);
+    // The write only touches the batch it was started for: a newer batch can
+    // be set before the render that cancels this timer. Its clear is started
+    // by the write itself, so it's timed from the write without waiting on a
+    // render, and a newer batch arriving doesn't cut short what's written.
+    const { key } = announcements;
+    React.useEffect(() => {
+        if (key === noAnnouncementsYet.key)
+            return undefined;
+        const clearTimers = clearTimersRef.current;
+        const write = setTimeout(() => {
+            // Whether an item is on screen is decided here, once. An item that
+            // went before its announcement was due isn't announced, and one that
+            // goes after keeps its announcement for the rest of its lifetime, when
+            // the region holds the only copy of its text rather than a second one.
+            const onScreen = onScreenIdsRef.current;
+            setAnnouncements(current => current.key === key
+                ? {
+                    ...current,
+                    waiting: noAnnouncements$2,
+                    written: [
+                        ...current.written,
+                        ...current.waiting
+                            .filter(announcement => onScreen.has(announcement.id))
+                            .map(announcement => ({ ...announcement, batch: key })),
+                    ],
+                }
+                : current);
+            // eslint-disable-next-line @eslint-react/web-api-no-leaked-timeout -- it has to outlive this effect when a newer batch arrives, so the unmount effect below clears it
+            const clear = setTimeout(() => {
+                clearTimers.delete(clear);
+                setAnnouncements(current => {
+                    const written = current.written.filter(announcement => announcement.batch !== key);
+                    return written.length === current.written.length
+                        ? current
+                        : { ...current, written };
+                });
+            }, announcementLifetime);
+            clearTimers.add(clear);
+        }, announceDelay);
+        return () => clearTimeout(write);
+    }, [key]);
+    React.useEffect(() => {
+        const clearTimers = clearTimersRef.current;
+        return () => {
+            clearTimers.forEach(clearTimeout);
+            clearTimers.clear();
+        };
+    }, []);
+    return announcements.written;
+}
+/**
+ * Reads an element out roughly the way a screen reader would: its text, with
+ * an element's `aria-label`, or an image's `alt`, standing in for what's
+ * inside it, a break between block-level elements, and parts that are
+ * `aria-hidden`, `hidden` or inline-styled `display: none` left out. It isn't
+ * the full accessible name computation, so `aria-labelledby`, CSS-generated
+ * content, content hidden by a stylesheet and other ways of naming or hiding
+ * content aren't followed.
+ *
+ * @function spokenText
+ * @param element - The element to read.
+ * @returns Its text, with runs of whitespace collapsed and the ends trimmed.
+ */
+function spokenText(element) {
+    return readAloud(element).replace(/\s+/g, ' ').trim();
+}
+// Elements a browser displays as blocks by default, and `br`. A screen reader
+// pauses between them, so their text shouldn't run into the text beside them.
+// They're known by tag rather than by computed `display`, which would depend
+// on a stylesheet and on layout.
+const blockLevelTags = new Set([
+    'ADDRESS',
+    'ARTICLE',
+    'ASIDE',
+    'BLOCKQUOTE',
+    'BR',
+    'CAPTION',
+    'DD',
+    'DETAILS',
+    'DIALOG',
+    'DIV',
+    'DL',
+    'DT',
+    'FIELDSET',
+    'FIGCAPTION',
+    'FIGURE',
+    'FOOTER',
+    'FORM',
+    'H1',
+    'H2',
+    'H3',
+    'H4',
+    'H5',
+    'H6',
+    'HEADER',
+    'HGROUP',
+    'HR',
+    'LEGEND',
+    'LI',
+    'MAIN',
+    'MENU',
+    'NAV',
+    'OL',
+    'P',
+    'PRE',
+    'SEARCH',
+    'SECTION',
+    'SUMMARY',
+    'TABLE',
+    'TBODY',
+    'TD',
+    'TFOOT',
+    'TH',
+    'THEAD',
+    'TR',
+    'UL',
+]);
+/**
+ * Whether an element is left out of what a screen reader reads.
+ *
+ * @function isHidden
+ * @param element - The element to check.
+ * @returns True for `aria-hidden="true"`, the `hidden` attribute, and an
+ *   inline `display: none`, on an HTML, SVG or any other element with an
+ *   inline style.
+ */
+const isHidden = (element) => element.getAttribute('aria-hidden') === 'true' ||
+    element.hasAttribute('hidden') ||
+    element.style?.display === 'none';
+/**
+ * The text `spokenText` reads for an element, before its whitespace is
+ * tidied.
+ *
+ * @function readAloud
+ * @param element - The element to read.
+ * @returns Its text.
+ */
+function readAloud(element) {
+    if (isHidden(element))
+        return '';
+    const name = element.getAttribute('aria-label') ||
+        (element.tagName === 'IMG' ? element.getAttribute('alt') : null);
+    const text = name ||
+        Array.from(element.childNodes, child => {
+            if (child instanceof Element)
+                return readAloud(child);
+            return child.nodeType === Node.TEXT_NODE ? child.textContent : '';
+        }).join('');
+    // A name stands in for the element's content, and a block's content stands
+    // apart from what's around it, so both are padded to keep them from running
+    // into the neighboring text. An inline run, like `<span>Up</span>` then
+    // `<span>loaded</span>`, still reads as one word.
+    return name || blockLevelTags.has(element.tagName) ? ` ${text} ` : text;
+}
+/**
+ * A visually hidden, polite `status` live region that a container announces
+ * its items through. The container renders it from the moment it mounts,
+ * whether or not it has anything to show, so the region is already in the
+ * page when an announcement is written into it.
+ *
+ * The announcements are this component's own state, so writing and clearing
+ * them re-renders the region and leaves the container's items alone. Each one
+ * is its own keyed node, so a re-render that leaves the announcements alone
+ * leaves the region's content alone too, and nothing is read out twice.
+ *
+ * @function StatusRegion
+ * @param props - The items to announce, and the text to announce for each.
+ * @returns The region.
+ */
+function StatusRegion({ items, describe, }) {
+    const announcements = useAnnouncements(items, describe);
+    // `role="status"` makes a region atomic unless it says otherwise, which
+    // reads the whole region on every change. Each announcement is its own
+    // node, and only additions are relevant by default, so with atomic off a
+    // screen reader reads just what was written, and removing one announcement
+    // doesn't read out the ones still there. A node is keyed by its batch as
+    // well as its item, since an item that comes back can be written again
+    // while what it said before is still there.
+    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.batch}:${announcement.id}`))) }));
+}
+
+/** How long `copied` lasts when `duration` doesn't say, in ms. */
+const defaultDuration = 2000;
+/**
+ * The longest delay `setTimeout` takes, in ms. A longer one, `Infinity`
+ * included, runs at once.
+ */
+const longestDelay = 2 ** 31 - 1;
+/**
+ * `duration` as a delay `setTimeout` keeps, or `null` for no timer: `null`
+ * for `0`, as on Toast, the default when it's missing or `NaN` (or a
+ * JavaScript caller's `null`), `0` for a negative one, which ends `copied` at
+ * once, and the longest delay for `Infinity` or anything longer.
+ */
+const delayOf = (duration) => {
+    if (duration === 0)
+        return null;
+    return duration == null || Number.isNaN(duration)
+        ? defaultDuration
+        : Math.min(Math.max(duration, 0), longestDelay);
+};
+/** The error a copy reports when nothing could write and nothing said why. */
+const cannotCopy = 'The Clipboard API is missing or refused, and the copy command copied nothing.';
+/**
+ * Copies `text` the way browsers did before the Clipboard API: it runs the
+ * `copy` command and puts the text on the `copy` event that command fires.
+ * Success is the event having fired, not the command's return value, which
+ * WebKit reports as `false` for a copy that happened.
+ *
+ * This is the library's only call to the deprecated `document.execCommand`,
+ * so it can go when browsers drop it. Until then it's what writes on a page
+ * without the Clipboard API, such as one served over plain `http://`.
+ *
+ * @param text - The text to copy.
+ * @returns Whether the `copy` event fired and took the text.
+ */
+function copyWithCommand(text) {
+    let written = false;
+    // WebKit enables the copy command only when something is selected or a
+    // `beforecopy` listener cancels that event, and nothing is selected here.
+    const enable = (event) => event.preventDefault();
+    // On `window` while capturing, so it runs before the page's listeners on
+    // the document and its elements. The copy is this hook's own, so it's
+    // stopped there: a page's own copy handler, such as one that adds a
+    // credit line to whatever is copied, never sees it to rewrite it.
+    const onCopy = (event) => {
+        if (!event.clipboardData)
+            return;
+        event.clipboardData.setData('text/plain', text);
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        written = true;
+    };
+    window.addEventListener('beforecopy', enable, true);
+    window.addEventListener('copy', onCopy, true);
+    try {
+        document.execCommand('copy');
+    }
+    catch {
+        // An engine that refuses, or no longer has the command, can throw, and
+        // the event not firing already says so.
+    }
+    finally {
+        window.removeEventListener('beforecopy', enable, true);
+        window.removeEventListener('copy', onCopy, true);
+    }
+    return written;
+}
+/**
+ * Writes `text` through the Clipboard API, and through the copy command when
+ * that's missing or refuses. Where it's missing, the copy command runs before
+ * the first `await`, so it's still inside the click that called it. After a
+ * refusal it runs once the refusal arrives, which writes only where the
+ * browser still counts the click by then, and only if no later copy has
+ * started in the meantime, which it would otherwise write over.
+ *
+ * @param text - The text to write.
+ * @param isLatest - Whether this is still the latest copy.
+ * @returns `null` once it's written, or why it couldn't be.
+ */
+async function writeToClipboard(text, isLatest) {
+    let refusal = null;
+    // Read at the click, never while rendering, so there's always a navigator.
+    const { clipboard } = navigator;
+    if (clipboard?.writeText) {
+        try {
+            await clipboard.writeText(text);
+            return null;
+        }
+        catch (reason) {
+            refusal = reason;
+        }
+    }
+    if (isLatest() && copyWithCommand(text))
+        return null;
+    return refusal instanceof Error ? refusal : new Error(cannotCopy);
+}
+/**
+ * Copies text to the clipboard through the Clipboard API, falling back to the copy command where that's missing or refused, and keeps a `copied` flag for `duration` after a copy.
+ *
+ * It announces nothing. A trigger of your own says "Copied" in a
+ * `role="status"` region that's in the page before the click; `CopyButton`
+ * is this hook with the button, the label and the announcement built in.
+ *
+ * A failed copy sets `error`, calls `onCopyError`, and ends `copied` if a
+ * copy before it had set it. When copies overlap, only the latest one's
+ * outcome sets the state and fires the callbacks, whichever finishes first.
+ * Nothing changes and no callback fires once the component using it has
+ * unmounted, though a write already under way still finishes.
+ *
+ * @function useClipboard
+ * @param options - How long `copied` lasts, and the callbacks.
+ * @returns `copy`, which writes, and the `copied` and `error` state.
+ *
+ * @example
+ * const { copy, copied } = useClipboard();
+ * <Button onClick={() => copy(url)}>{copied ? 'Copied' : 'Copy link'}</Button>
+ */
+function useClipboard(options = {}) {
+    const [copied, setCopied] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const optionsRef = useLatestRef(options);
+    const copiedRef = React.useRef(false);
+    const timerRef = React.useRef(undefined);
+    const mountedRef = React.useRef(false);
+    // Counts the calls to `copy`, so only the latest one's outcome is kept.
+    const latestCallRef = React.useRef(0);
+    React.useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+            clearTimeout(timerRef.current);
+        };
+    }, []);
+    const copy = React.useCallback(async (text) => {
+        latestCallRef.current += 1;
+        const call = latestCallRef.current;
+        const isLatest = () => call === latestCallRef.current;
+        const failure = await writeToClipboard(text, isLatest);
+        // A write overtaken by a later copy, which may finish first, reports
+        // through its promise only.
+        if (!mountedRef.current || !isLatest()) {
+            return failure === null;
+        }
+        clearTimeout(timerRef.current);
+        const { duration, onCopiedChange, onCopyError } = optionsRef.current;
+        const wasCopied = copiedRef.current;
+        copiedRef.current = failure === null;
+        setCopied(failure === null);
+        setError(failure);
+        if (failure) {
+            if (wasCopied)
+                onCopiedChange?.(false);
+            onCopyError?.(failure);
+            return false;
+        }
+        onCopiedChange?.(true);
+        const delay = delayOf(duration);
+        if (delay !== null) {
+            timerRef.current = setTimeout(() => {
+                copiedRef.current = false;
+                setCopied(false);
+                optionsRef.current.onCopiedChange?.(false);
+            }, delay);
+        }
+        return true;
+    }, [optionsRef]);
+    return { copy, copied, error };
+}
+
+/** Two sheets, one over the other. */
+const CopyGlyph = () => (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round", width: "1em", height: "1em", focusable: "false", children: [jsxRuntime.jsx("path", { d: "M10.5 3.5v-1a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h1" }), jsxRuntime.jsx("rect", { x: "5.5", y: "5.5", width: "8", height: "9", rx: "1" })] }));
+const describeAnnouncement$1 = (announcement) => announcement.text;
+const noAnnouncements$1 = [];
+/** What marks an open modal dialog in ARIA. */
+const modalDialog = '[aria-modal="true"]';
+/**
+ * The open modal dialog an element is in: one marked `aria-modal="true"`, or
+ * a `<dialog>` opened with `showModal()`, which makes the rest of the page
+ * inert. An engine without the `:modal` selector throws on the whole list,
+ * so it then looks for the ARIA alone.
+ *
+ * @param element - Where to look up from.
+ * @returns The nearest open modal dialog around it, or `null`.
+ */
+function closestModalDialog(element) {
+    try {
+        return element.closest(`${modalDialog}, dialog:modal`);
+    }
+    catch {
+        return element.closest(modalDialog);
+    }
+}
+/**
+ * The `CopyButton` component renders a button that copies a piece of text to the clipboard, says "Copied" for a moment, and announces the result.
+ *
+ * It's a `Button` with a copy icon and "Copy", and takes everything `Button`
+ * takes. A click writes `value` through the Clipboard API, or through the
+ * older copy command where that's missing or refused, and reports a failure
+ * rather than showing "Copied". Each outcome is announced through a polite
+ * status region portaled out of the button's place, so it stays the last
+ * child of a `Control` or `Buttons`: into the open modal dialog the button is
+ * in, otherwise where `Portal` puts portaled content (the `ConfigProvider`'s
+ * `portalContainer`, or the end of the page). With `showLabel={false}` it's an
+ * `IconButton`. For a trigger of your own, use `useClipboard`, which it's
+ * built on.
+ *
+ * @function
+ * @param {CopyButtonProps} props - Props for the CopyButton component.
+ * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.
+ * @returns {JSX.Element} The rendered button.
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html | WCAG 4.1.3 Status Messages}
+ *
+ * @example
+ * <CopyButton value="https://bestax.io" />
+ *
+ * @example
+ * <CopyButton value={apiKey} showLabel={false} size="small" />
+ */
+const CopyButton = React.forwardRef(function CopyButton({ value, duration = 2000, showLabel = true, labels, onCopiedChange, onCopyError, onClick, onFocus, ...props }, ref) {
+    const copyLabel = labels?.copy || 'Copy';
+    const copiedLabel = labels?.copied || 'Copied';
+    const copiedStatus = labels?.copiedStatus || 'Copied to the clipboard';
+    const failedStatus = labels?.failedStatus || "Couldn't copy to the clipboard";
+    // The latest outcome. Each gets a new id, so the region announces a
+    // repeat too.
+    const [announcements, setAnnouncements] = React.useState(noAnnouncements$1);
+    const countRef = React.useRef(0);
+    const announce = (text) => {
+        countRef.current += 1;
+        setAnnouncements([{ id: String(countRef.current), text }]);
+    };
+    // The open modal dialog the button is in, which the region goes inside:
+    // a screen reader ignores a live region behind one. It's looked up when
+    // the button takes focus or a click, rather than once as it mounts,
+    // since Modal and Sidebar keep their content mounted while closed, and
+    // only an open one is `aria-modal`. A region that moves starts empty, so
+    // it doesn't say the last outcome again. This lookup can go once the
+    // overlays hand their content their own root as its portal container
+    // (#1471).
+    const [dialog, setDialog] = React.useState(null);
+    const placeRegion = (button) => {
+        const next = closestModalDialog(button);
+        if (next === dialog)
+            return;
+        setDialog(next);
+        setAnnouncements(noAnnouncements$1);
+    };
+    // The hook fires nothing once this has unmounted, so neither does the
+    // announcement.
+    const { copy, copied } = useClipboard({
+        duration,
+        onCopiedChange: next => {
+            if (next)
+                announce(copiedStatus);
+            onCopiedChange?.(next);
+        },
+        onCopyError: error => {
+            announce(failedStatus);
+            onCopyError?.(error);
+        },
+    });
+    // The caller's onClick runs first, so a `preventDefault()` there stops
+    // the copy, as it stops ToggleButton's toggle.
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        placeRegion(event.currentTarget);
+        void copy(value);
+    };
+    const handleFocus = (event) => {
+        onFocus?.(event);
+        placeRegion(event.currentTarget);
+    };
+    const glyph = jsxRuntime.jsx(Icon, { children: copied ? jsxRuntime.jsx(CheckIcon$1, {}) : jsxRuntime.jsx(CopyGlyph, {}) });
+    // The props are spread first, so it stays a `<button>` that doesn't
+    // submit by accident, whatever a JavaScript caller or a spread object
+    // passes along.
+    const button = showLabel ? (jsxRuntime.jsxs(Button, { ...props, ref: ref, as: "button", type: buttonType(props.type), onClick: handleClick, onFocus: handleFocus, children: [glyph, jsxRuntime.jsx("span", { children: copied ? copiedLabel : copyLabel })] })) : (jsxRuntime.jsx(IconButton, { ...{
+            ...props,
+            'aria-label': props['aria-label'] || copyLabel,
+        }, ref: ref, as: "button", onClick: handleClick, onFocus: handleFocus, children: glyph }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [button, jsxRuntime.jsx(Portal, { container: dialog || undefined, children: jsxRuntime.jsx(StatusRegion, { items: announcements, describe: describeAnnouncement$1 }) })] }));
+});
+CopyButton.displayName = 'CopyButton';
+
+/**
+ * The `LinkButton` component renders a `<button>` that visually looks like text or a link.
+ *
+ * @function
+ * @param {LinkButtonProps} props - Props for the LinkButton component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered link-styled button element.
+ *
+ * @example
+ * // Text variant (default)
+ * <LinkButton onClick={handleClick}>Click me</LinkButton>
+ *
+ * @example
+ * // Underline variant with color
+ * <LinkButton variant="underline" color="primary">Learn more</LinkButton>
+ */
+const LinkButton = React.forwardRef(function LinkButton({ variant = 'text', color, className, ...props }, ref) {
+    const buttonColor = variant === 'underline' ? 'text' : variant;
+    const prefixedClasses = usePrefixedClassNames('link-button', color && `link-button-${color}`, variant === 'underline' && 'link-button-underline');
+    return (jsxRuntime.jsx(Button
+    // LinkButton is polymorphic through to Button, which resolves the element
+    // from `as`. TS cannot infer that through the spread below.
+    , { 
+        // LinkButton is polymorphic through to Button, which resolves the element
+        // from `as`. TS cannot infer that through the spread below.
+        ref: ref, color: buttonColor, className: classNames(prefixedClasses, className), ...props }));
+});
+LinkButton.displayName = 'LinkButton';
+
+/**
+ * The `ToggleButton` component renders a button that stays pressed until it's pressed again, and says whether it's on through `aria-pressed`.
+ *
+ * It's always a `<button type="button">`, so it never submits a form and
+ * 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
+ * `SegmentedControl`, or `Radios` for a choice that's sent with a form.
+ *
+ * @function
+ * @param {ToggleButtonProps} props - Props for the ToggleButton component.
+ * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.
+ * @returns {JSX.Element} The rendered toggle button.
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/ | APG button pattern}
+ *
+ * @example
+ * <ToggleButton onPressedChange={setMuted}>Mute</ToggleButton>
+ *
+ * @example
+ * <Buttons hasAddons role="group" aria-label="Text style">
+ *   <ToggleButton aria-label="Bold" pressed={bold} onPressedChange={setBold}>
+ *     <Icon name="bold" />
+ *   </ToggleButton>
+ * </Buttons>
+ */
+const ToggleButton = React.forwardRef(function ToggleButton({ pressed: controlledPressed, defaultPressed = false, onPressedChange, color = 'link', isLoading, 'aria-busy': ariaBusy, 'aria-disabled': ariaDisabled, className, onClick, ...props }, ref) {
+    const isControlled = controlledPressed !== undefined;
+    const [internalPressed, setInternalPressed] = React.useState(defaultPressed);
+    const pressed = controlledPressed ?? internalPressed;
+    // 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': pressed });
+    // The caller's onClick runs first, so a `preventDefault()` there vetoes
+    // the toggle, as it does in Radix, MUI and Zag. Enter and Space reach here
+    // through the button's own click, and a disabled button gets no click.
+    //
+    // A loading one gets the click but drops it. Bulma's spinner only stops a
+    // pointer, so without this a key flipped a toggle the mouse couldn't.
+    // `disabled` would stop both, but it takes focus away mid-save.
+    const handleClick = (event) => {
+        if (isLoading)
+            return;
+        onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        const next = !pressed;
+        onPressedChange?.(next);
+        if (!isControlled)
+            setInternalPressed(next);
+    };
+    // The props are spread first, so what a toggle depends on wins over
+    // anything a JavaScript caller or a spread object passes along: it stays
+    // a button, never submits, reports the state it's in, and says it's busy
+    // and won't respond while it's loading. A caller's own `aria-busy` or
+    // `aria-disabled` stays when it isn't loading.
+    return (jsxRuntime.jsx(Button, { ...props, ref: ref, as: "button", type: "button", isLoading: isLoading, "aria-busy": isLoading || ariaBusy, "aria-disabled": isLoading || ariaDisabled, "aria-pressed": pressed, color: pressed ? color : undefined, className: classNames(selectedClass, className), onClick: handleClick }));
+});
+ToggleButton.displayName = 'ToggleButton';
+
+const validButtonsSizes = ['small', 'medium', 'large'];
+/**
+ * The `Buttons` component lets you group multiple `Button` elements together with Bulma's spacing, alignment, and add-on features.
+ *
+ * @function
+ * @param {ButtonsProps} props - Props for the Buttons component.
+ * @returns {JSX.Element} The rendered group of buttons.
+ * @see {@link https://bulma.io/documentation/elements/button/#group | Bulma Button Group documentation}
+ */
+const ButtonsComponent = ({ className, textColor, color, bgColor, isCentered, isRight, hasAddons, size, children, ...props }) => {
+    const buttonsClasses = usePrefixedClassNames('buttons', {
+        'is-centered': isCentered,
+        'is-right': isRight,
+        'has-addons': hasAddons,
+        [`are-${size}`]: size && validButtonsSizes.includes(size),
+    });
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const combinedClasses = classNames(buttonsClasses, className, bulmaHelperClasses);
+    return (jsxRuntime.jsx("div", { className: combinedClasses, ...rest, children: children }));
+};
+const Buttons = withSubComponents(ButtonsComponent, {
+    Button,
+    LinkButton,
+    ToggleButton,
+    IconButton,
+    CopyButton,
+}, 'Buttons');
+
+/**
+ * The `Paragraph` component renders a styled `<p>` element with Bulma helper class integration.
+ *
+ * @function
+ * @param {ParagraphProps} props - Props for the Paragraph component.
+ * @returns {JSX.Element} The rendered paragraph element.
+ */
+const Paragraph = ({ 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 paragraphClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("p", { className: paragraphClasses || undefined, ...rest, children: children }));
+};
+
+const validTitleSizes = ['1', '2', '3', '4', '5', '6'];
+const validTitleElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'];
+/**
+ * The `Title` component renders a Bulma-styled title (heading), supporting sizes `1`-`6`, spacing, and rendering as any heading or paragraph element (`h1`-`h6`, `p`).
+ *
+ * @function
+ * @param {TitleProps} props - Props for the Title component.
+ * @returns {JSX.Element} The rendered title element.
+ * @see {@link https://bulma.io/documentation/elements/title/ | Bulma Title documentation}
+ */
+const Title = ({ className, size, isSpaced, as = 'h1', hasSkeleton, textColor, bgColor, children, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    // Validate 'as' prop at runtime
+    const element = validTitleElements.includes(as) ? as : 'h1';
+    // Validate 'size' prop at runtime (numeric sizes normalize to strings)
+    const normalized = size == null ? undefined : String(size);
+    const validSize = normalized && validTitleSizes.includes(normalized)
+        ? normalized
+        : undefined;
+    const bulmaClasses = usePrefixedClassNames('title', {
+        [`is-${validSize}`]: validSize,
+        'is-spaced': isSpaced,
+        'has-skeleton': hasSkeleton,
+    });
+    const titleClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    // Determine the tag based on 'element' and 'validSize'
+    const Tag = element === 'p' ? 'p' : validSize ? `h${validSize}` : element;
+    return (jsxRuntime.jsx(Tag, { className: titleClasses, ...rest, children: children }));
+};
+
+/**
+ * INTERNAL, deliberately not exported from `src/index.ts`. Whether a prop
+ * was given something to render: `undefined`, `null`, a boolean and `''`
+ * weren't, and `0` was, since React renders it.
+ */
+const isGiven = (node) => node !== undefined &&
+    node !== null &&
+    typeof node !== 'boolean' &&
+    node !== '';
+
+const validEmptyStateColors = [
+    'primary',
+    'link',
+    'info',
+    'success',
+    'warning',
+    'danger',
+];
+const validEmptyStateHeadings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const validEmptyStateSizes = ['small', 'medium', 'large'];
+/**
+ * The circle the picture sits in, hidden from assistive tech whatever is in it.
+ *
+ * @function
+ * @param {EmptyStateIndicatorProps} props - Props for EmptyState.Indicator.
+ * @returns {JSX.Element} The rendered indicator.
+ */
+const EmptyStateIndicator = ({ className, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const indicatorClass = usePrefixedClassNames('empty-state-indicator');
+    // Hidden after the rest of the props, so nothing passed in can expose the
+    // picture: the title says what it means.
+    return (jsxRuntime.jsx("div", { className: classNames(indicatorClass, bulmaHelperClasses, className), ...rest, "aria-hidden": "true", children: children }));
+};
+EmptyStateIndicator.displayName = 'EmptyState.Indicator';
+/**
+ * The heading, a Bulma `Title` at the level `as` sets, `h2` by default, and at the EmptyState's size.
+ *
+ * @function
+ * @param {EmptyStateTitleProps} props - Props for EmptyState.Title.
+ * @returns {JSX.Element} The rendered heading.
+ */
+const EmptyStateTitle = ({ as = 'h2', className, ...props }) => {
+    // `size` isn't in the type, but on `Title` it picks the tag, so it's kept
+    // off even when it's passed anyway. The level is `as` alone.
+    const { size: _size, ...rest } = props;
+    const titleClass = usePrefixedClassNames('empty-state-title');
+    const level = validEmptyStateHeadings.includes(as) ? as : 'h2';
+    return (jsxRuntime.jsx(Title, { as: level, className: classNames(titleClass, className), ...rest }));
+};
+EmptyStateTitle.displayName = 'EmptyState.Title';
+/**
+ * A sentence or two under the title, in the color of the text around it.
+ *
+ * @function
+ * @param {EmptyStateDescriptionProps} props - Props for EmptyState.Description.
+ * @returns {JSX.Element} The rendered description.
+ */
+const EmptyStateDescription = ({ className, ...props }) => {
+    const descriptionClass = usePrefixedClassNames('empty-state-description');
+    return (jsxRuntime.jsx(Paragraph, { className: classNames(descriptionClass, className), ...props }));
+};
+EmptyStateDescription.displayName = 'EmptyState.Description';
+/**
+ * A row of buttons, centered under the text or at the start of the line beside the indicator.
+ *
+ * @function
+ * @param {EmptyStateActionsProps} props - Props for EmptyState.Actions.
+ * @returns {JSX.Element} The rendered row of buttons.
+ */
+const EmptyStateActions = ({ className, ...props }) => {
+    const actionsClass = usePrefixedClassNames('empty-state-actions');
+    return jsxRuntime.jsx(Buttons, { className: classNames(actionsClass, className), ...props });
+};
+EmptyStateActions.displayName = 'EmptyState.Actions';
+/**
+ * The `EmptyState` component renders the block an app shows where content would be: an empty list, a search with no results, or a first-run screen.
+ *
+ * It's a column of a picture in a circle, a heading, a line of text and the
+ * actions, with one layout whether it's written with the `icon`, `title` and
+ * `description` props or with the parts. The children always render as
+ * written, after the parts the props render.
+ *
+ * It has no role and no live region. It arrives already filled and goes away
+ * when results come back, so it can't announce a search that matched
+ * nothing: keep a `role="status"` region beside the search field for that,
+ * in the page the whole time. While the data loads, show a `Skeleton` or a
+ * `Loader` instead, so "No projects yet" doesn't flash first, and show a
+ * load that failed in a `Message` or a `Notification`.
+ *
+ * @function
+ * @param {EmptyStateProps} props - Props for the EmptyState component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the root `<div>`.
+ * @returns {JSX.Element} The rendered empty state.
+ *
+ * @example
+ * <EmptyState
+ *   icon="folder-open"
+ *   title="No projects yet"
+ *   description="Projects you create or join show up here."
+ * >
+ *   <Button color="primary">New project</Button>
+ * </EmptyState>
+ */
+const EmptyStateRoot = React.forwardRef(({ className, icon, title, titleAs = 'h2', description, children, color, variant = 'light', size = 'normal', align = 'center', textColor, bgColor, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const rootClass = usePrefixedClassNames('empty-state', {
+        [`is-${size}`]: validEmptyStateSizes.includes(size),
+        'is-left': align === 'left',
+        [`is-${color}`]: !!color && validEmptyStateColors.includes(color),
+        'is-filled': variant === 'filled',
+    });
+    // The props' parts first, each only when it's given, then the children
+    // exactly as they were written: nothing here looks at them.
+    return (jsxRuntime.jsxs("div", { ref: ref, className: classNames(rootClass, bulmaHelperClasses, className), ...rest, children: [isGiven(icon) && (jsxRuntime.jsx(EmptyStateIndicator, { children: typeof icon === 'string' ? jsxRuntime.jsx(Icon, { name: icon }) : icon })), isGiven(title) && (jsxRuntime.jsx(EmptyStateTitle, { as: titleAs, children: title })), isGiven(description) && (jsxRuntime.jsx(EmptyStateDescription, { children: description })), children] }));
+});
+const EmptyState = withSubComponents(EmptyStateRoot, {
+    Indicator: EmptyStateIndicator,
+    Title: EmptyStateTitle,
+    Description: EmptyStateDescription,
+    Actions: EmptyStateActions,
+}, 'EmptyState');
+
+// INTERNAL: deliberately not exported from src/index.ts.
+/** The major version of the React this bundle is running against. */
+const runningMajor = () => Number(React.version.split('.')[0]);
+/**
+ * The prop that makes an element inert, spelled for the React in use, or
+ * nothing when `inert` is false.
+ *
+ * Both majors must render `inert=""`, and each warns on the other's spelling
+ * and then drops the attribute. React 19 treats `inert` as a boolean and
+ * rejects the empty string. React 18 does not know the attribute, so it
+ * passes a string through and rejects `true`.
+ */
+const inertProps = (inert, major = runningMajor()) => {
+    if (!inert)
+        return {};
+    // The cast is for React 18's spelling: this package's types are React 19's,
+    // where `inert` is a boolean.
+    return (major >= 19
+        ? { inert: true }
+        : { inert: '' });
+};
+
+// Context to track MenuList nesting level
+const MenuListLevelContext = React.createContext(0);
+/**
+ * The `Menu` component provides Bulma's vertical navigation menu: a simple, accessible sidebar or section menu for your Bulma React UI.
+ *
+ * @function
+ * @param {MenuProps} props - Props for the Menu component.
+ * @returns {JSX.Element} The rendered menu.
+ * @see {@link https://bulma.io/documentation/components/menu/ | Bulma Menu documentation}
+ */
+const MenuComponent = ({ className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    // Generate Bulma classes with prefix
+    const bulmaClasses = usePrefixedClassNames('menu');
+    return (jsxRuntime.jsx("aside", { className: classNames(bulmaClasses, bulmaHelperClasses, className), ...rest, children: children }));
+};
+/**
+ * Bulma Menu label component.
+ *
+ * @function
+ * @param {MenuLabelProps} props - Props for the MenuLabel component.
+ * @returns {JSX.Element} The rendered menu label.
+ */
+const MenuLabel = ({ className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    return (jsxRuntime.jsx("p", { className: classNames(usePrefixedClassNames('menu-label'), className, bulmaHelperClasses), ...rest, children: children }));
+};
+/**
+ * MenuList applies `menu-list` class only at the top level (not for nested lists).
+ *
+ * Every level renders `role="list"`, which Safari needs: WebKit stops
+ * exposing a `<ul>` as a list once its markers are hidden, and Bulma's reset
+ * hides them.
+ *
+ * @function
+ * @param {MenuListProps} props - Props for the MenuList component.
+ * @returns {JSX.Element} The rendered menu list.
+ */
+const MenuList = ({ className, children, ...props }) => {
+    const level = React.useContext(MenuListLevelContext);
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const ulClass = classNames(className, bulmaHelperClasses, {
         [usePrefixedClassNames('menu-list')]: level === 0,
     });
     // Increment level for nested MenuLists. role="list" restates the <ul>'s
@@ -4502,195 +5249,37 @@ const Message = withSubComponents(MessageComponent, {
     Body: MessageBody,
 }, 'Message');
 
-// Ref-counted across every caller (e.g. a Dialog rendering its own Modal)
-// so overlapping/nested locks don't fight over which one restores `overflow`.
-// Every overlay that locks body scroll — Modal, Dialog, Sidebar, Loading —
-// goes through here; a component setting `document.body.style.overflow`
-// itself would clear a lock another overlay still needs.
-let lockCount = 0;
-let originalOverflow = '';
-/**
- * Locks (and ref-counted-ly unlocks) `document.body` scrolling while `active`
- * is true. Safe to call from multiple components at once — the body scroll
- * is only restored once every active caller has released its lock.
- *
- * @function useScrollLock
- * @param active - Whether this caller wants the body scroll locked.
- */
-function useScrollLock(active) {
-    React.useEffect(() => {
-        if (!active)
-            return undefined;
-        lockCount++;
-        if (lockCount === 1) {
-            originalOverflow = document.body.style.overflow;
-            document.body.style.overflow = 'hidden';
-        }
-        return () => {
-            lockCount--;
-            if (lockCount === 0) {
-                document.body.style.overflow = originalOverflow;
-            }
-        };
-    }, [active]);
-}
-
-// "Are we past hydration?" as a store that never changes: React reads the
-// server snapshot both while server-rendering and while hydrating, and the
-// client snapshot from the first post-hydration render onward.
-const subscribeToNothing = () => () => { };
-const getClientSnapshot = () => true;
-const getServerSnapshot = () => false;
-/**
- * Reports whether the component has passed hydration.
- *
- * Returns `false` during server rendering and during the hydrating client
- * render, then `true` from the commit that follows. Use it to defer
- * DOM-only behaviour (such as portalling) past hydration so the first client
- * render matches the server markup instead of tripping hydration recovery.
- *
- * Only a component that hydrates ever sees `false` on the client. One that
- * mounts later (after a route change, or in an app with no server rendering)
- * gets `true` on its first render, so it pays for no extra render. It
- * subscribes to nothing, so no later render flips it back.
- *
- * @function useIsHydrated
- * @returns `true` once the hydrating render has completed, otherwise `false`.
- */
-function useIsHydrated() {
-    return React.useSyncExternalStore(subscribeToNothing, getClientSnapshot, getServerSnapshot);
-}
-
-/**
- * Resolves a portal target: an `HTMLElement` is used directly, a non-empty
- * `string` is treated as a `document.querySelector` selector (falling back to
- * `document.body` when it matches nothing), and any falsy value — `undefined`
- * or the empty string — resolves to `document.body`.
- *
- * The empty string is deliberately treated as "no target" rather than passed
- * through: `document.querySelector('')` throws a `SyntaxError`, and callers
- * building a selector from state can easily hand us `''`.
- *
- * @function resolvePortalContainer
- * @param container - The requested portal target, if any.
- * @returns The resolved DOM node to portal into.
- */
-function resolvePortalContainer(container) {
-    if (!container) {
-        return document.body;
-    }
-    if (typeof container === 'string') {
-        return (document.querySelector(container) ?? document.body);
-    }
-    return container;
-}
-/**
- * Where a component's portal goes, as a function to call when the portal is
- * created: the target the component was given, else the `portalContainer` a
- * `ConfigProvider` sets, else `document.body`, each read as
- * `resolvePortalContainer` reads it. A component that portals resolves its
- * target through this, so the provider's default reaches it.
- *
- * The hook only reads context, so it is safe to call on the server, ahead of
- * any early return. The function it returns reads the DOM, so call it only
- * where the portal is created, which the server never reaches.
- *
- * @function usePortalContainer
- * @returns A function that takes the component's own target, if any, and
- * returns the DOM node to portal into.
- */
-function usePortalContainer() {
-    const { portalContainer } = useConfig();
-    return container => resolvePortalContainer(container || portalContainer);
-}
-/**
- * Reads Modal's `portal` prop (`boolean | string | HTMLElement`) for a
- * component that takes it: whether the content is in its portal yet, and
- * where it goes.
- *
- * A portal has no server-rendered counterpart, so such a component renders in
- * place on the server and while hydrating, and moves into its portal once the
- * client takes over. Render the content in `Portal` with
- * `disabled={!isPortaled}` and this `container`. Moving remounts the content,
- * so an effect that holds one of its nodes depends on `isPortaled`, `portal`
- * and `defaultTarget`.
- *
- * @function usePortalProp
- * @param portal - The component's `portal` prop.
- * @returns Whether it's portaled now, its `container`, and the provider's
- * target while that places it.
- */
-function usePortalProp(portal) {
-    const hydrated = useIsHydrated();
-    const { portalContainer } = useConfig();
-    const isPortaled = Boolean(portal) && hydrated;
-    return {
-        isPortaled,
-        container: typeof portal === 'boolean' ? undefined : portal,
-        defaultTarget: isPortaled && portal === true ? portalContainer : undefined,
-    };
-}
-/**
- * Renders its children into another part of the page, `document.body` unless `container` or a `ConfigProvider` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context.
- *
- * React's server renderer can't render a portal, so `Portal` renders nothing
- * on the server and during hydration, and mounts its children in the commit
- * that follows. The first client render then matches the server markup. In an app
- * without server rendering it portals on the first render.
- *
- * React context, such as `ConfigProvider`'s class prefix, reaches the
- * portaled children, and their React events bubble through the React tree.
- * CSS inheritance follows the DOM instead: a scoped (non-`isRoot`) `Theme`
- * sets its variables on a wrapper element the portaled content has left, so
- * that content sees the page-level theme, and styles scoped to a shadow root
- * don't reach `document.body` at all. To keep them, portal into an element
- * inside the themed area or the shadow root: pass it as `container`, or as
- * the `portalContainer` of a `ConfigProvider` around that area. The second
- * also reaches what the library's components portal, such as Popover's
- * `appendToBody` panel or a `Modal` with `portal`.
- *
- * Inside a `LocaleProvider`, the children keep its `dir` and `lang`. A
- * container inside the provider's own wrapper takes the children as they
- * are, and they follow the provider through the page. Any other,
- * `document.body` included, gets them inside one `<div>` carrying the
- * provider's values, with `display: contents` so it adds no box. It is
- * still an element, so content that must be the container's direct child,
- * a `<tr>` in a `<tbody>`, or that a direct-child selector styles, belongs
- * in a container inside the provider. Which of the two is settled when the
- * children mount, so a change of locale updates them in place rather than
- * remounting them.
- *
- * Tab order and focus follow the DOM too. Content portaled from inside a
- * focus trap is no longer inside the trapped element, so the trap neither
- * reaches it nor holds focus there: render nested overlays inside the
- * trapped element, or give them a trap of their own. To trap portaled
- * content, put `useFocusTrap`'s ref on the element inside the `Portal`.
- *
- * @function
- * @param {PortalProps} props - Props for the Portal component.
- * @returns The portal, the children in place when `disabled`, or nothing
- * before hydration.
- *
- * @example
- * <Portal>
- *   <div className="box">Rendered at the end of document.body</div>
- * </Portal>
+// Ref-counted across every caller (e.g. a Dialog rendering its own Modal)
+// so overlapping/nested locks don't fight over which one restores `overflow`.
+// Every overlay that locks body scroll — Modal, Dialog, Sidebar, Loading —
+// goes through here; a component setting `document.body.style.overflow`
+// itself would clear a lock another overlay still needs.
+let lockCount = 0;
+let originalOverflow = '';
+/**
+ * Locks (and ref-counted-ly unlocks) `document.body` scrolling while `active`
+ * is true. Safe to call from multiple components at once — the body scroll
+ * is only restored once every active caller has released its lock.
  *
- * @example
- * // Into a dedicated overlay root
- * <Portal container="#overlays">
- *   <CommandPalette />
- * </Portal>
+ * @function useScrollLock
+ * @param active - Whether this caller wants the body scroll locked.
  */
-function Portal({ children, container, disabled = false }) {
-    const hydrated = useIsHydrated();
-    const resolveContainer = usePortalContainer();
-    if (disabled)
-        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
-    if (!hydrated)
-        return null;
-    const target = resolveContainer(container);
-    return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, children: children }), target);
+function useScrollLock(active) {
+    React.useEffect(() => {
+        if (!active)
+            return undefined;
+        lockCount++;
+        if (lockCount === 1) {
+            originalOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+        }
+        return () => {
+            lockCount--;
+            if (lockCount === 0) {
+                document.body.style.overflow = originalOverflow;
+            }
+        };
+    }, [active]);
 }
 
 // INTERNAL: deliberately not exported from src/index.ts.
@@ -8182,1040 +8771,757 @@ const PopoverComponent = ({ trigger, children, open: controlledOpen, defaultOpen
     const handleTriggerKeyDown = (e) => {
         triggerProps.onKeyDown?.(e);
         // A key on something inside the trigger is that element's to answer.
-        if (e.defaultPrevented || e.target !== e.currentTarget)
-            return;
-        if (e.key === 'Escape') {
-            if (isOpen && closeOnEscape) {
-                e.preventDefault();
-                close();
-            }
-            return;
-        }
-        if (e.key !== 'Enter' && e.key !== ' ')
-            return;
-        if (handlesKeyItself(e.currentTarget, e.key))
-            return;
-        // Space would scroll the page; a held key repeats.
-        e.preventDefault();
-        if (!e.repeat)
-            requestOpen(!isOpen);
-    };
-    const needsButtonRole = typeof trigger.type === 'string' &&
-        !NATIVE_CONTROLS.has(trigger.type) &&
-        !(trigger.type === 'a' && triggerProps.href != null);
-    const clonedTrigger = React.cloneElement(trigger, {
-        ...(needsButtonRole
-            ? {
-                role: triggerProps.role ?? 'button',
-                tabIndex: triggerProps.tabIndex ?? 0,
-            }
-            : {}),
-        'aria-haspopup': 'dialog',
-        'aria-expanded': isOpen,
-        'aria-controls': panelMounted ? panelId : undefined,
-        onClick: handleTriggerClick,
-        onKeyDown: handleTriggerKeyDown,
-    });
-    const rootClasses = classNames(usePrefixedClassNames('popover', { 'is-active': isOpen }), bulmaHelperClasses, className);
-    const panelClasses = classNames(usePrefixedClassNames('popover-content', {
-        [`is-${resolved.position}`]: true,
-        'is-portal': appendToBody,
-    }), contentClassName);
-    return (jsxRuntime.jsxs("div", { className: rootClasses, ...rest, ref: rootRef, children: [clonedTrigger, isOpen && (jsxRuntime.jsx(Portal, { disabled: !appendToBody, children: jsxRuntime.jsx(PopoverPanel, { panelRef: panelRef, titleId: titleId, ariaLabel: ariaLabel, close: close, id: panelId, className: panelClasses, style: appendToBody
-                        ? {
-                            position: 'fixed',
-                            top: resolved.top,
-                            left: resolved.left,
-                        }
-                        : undefined, onKeyDown: handlePanelKeyDown, onPointerDownCapture: markInsidePress, children: children }) }))] }));
-};
-/**
- * The open panel. It mounts with each opening, so it counts the
- * `Popover.Header`s inside it afresh every time.
- */
-function PopoverPanel({ panelRef, titleId, ariaLabel, close, children, ...attrs }) {
-    // Headers register in a layout effect, after this first render, and this
-    // panel's own layout effect runs after theirs. Until then the panel assumes
-    // it has one, so a panel that does is named from its first commit, before
-    // focus moves in, and one that doesn't drops the reference before it paints.
-    const [titlesCounted, setTitlesCounted] = React.useState(false);
-    const [titleCount, setTitleCount] = React.useState(0);
-    const registerTitle = React.useCallback(() => {
-        setTitleCount(n => n + 1);
-        return () => setTitleCount(n => n - 1);
-    }, []);
-    useClientLayoutEffect(() => {
-        setTitlesCounted(true);
-    }, []);
-    const named = Boolean(ariaLabel) || titleCount > 0;
-    React.useEffect(() => {
-        if (titlesCounted && !named) {
-            warnOnce('Popover:unnamed', '[bestax-bulma] <Popover> opened a panel with no accessible name. ' +
-                'Pass ariaLabel, or render a Popover.Header inside it.');
-        }
-    }, [titlesCounted, named]);
-    const context = React.useMemo(() => ({ titleId, registerTitle, close }), [titleId, registerTitle, close]);
-    return (jsxRuntime.jsx(PopoverContext.Provider, { value: context, children: jsxRuntime.jsx("div", { ...attrs, ref: panelRef, role: "dialog", "aria-label": ariaLabel, "aria-labelledby": !ariaLabel && (!titlesCounted || titleCount > 0) ? titleId : undefined, tabIndex: -1, children: children }) }));
-}
-/**
- * The popover's title, which names the panel for assistive technology.
- *
- * @function
- * @param {PopoverHeaderProps} props - Props for the Popover.Header component.
- * @returns {JSX.Element} The header element.
- */
-const PopoverHeader = ({ className, ...props }) => {
-    const context = React.useContext(PopoverContext);
-    const registerTitle = context?.registerTitle;
-    // Before paint, so the panel is named by the time it shows.
-    useClientLayoutEffect(() => registerTitle?.(), [registerTitle]);
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('popover-header'), bulmaHelperClasses, className), ...rest, id: context?.titleId }));
-};
-/**
- * The popover's main content area.
- *
- * @function
- * @param {PopoverBodyProps} props - Props for the Popover.Body component.
- * @returns {JSX.Element} The body element.
- */
-const PopoverBody = ({ className, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('popover-body'), bulmaHelperClasses, className), ...rest }));
-};
-/**
- * A row of actions along the bottom of the popover, aligned to the end.
- *
- * @function
- * @param {PopoverFooterProps} props - Props for the Popover.Footer component.
- * @returns {JSX.Element} The footer element.
- */
-const PopoverFooter = ({ className, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('popover-footer'), bulmaHelperClasses, className), ...rest }));
-};
-/**
- * A `Button` that closes the popover, handing focus back to the trigger.
- *
- * @function
- * @param {PopoverCloseProps} props - Props for the Popover.Close component.
- * @returns {JSX.Element} The close button.
- */
-const PopoverClose = ({ onClick, ...props }) => {
-    const context = React.useContext(PopoverContext);
-    return (jsxRuntime.jsx(Button, { ...props, type: buttonType(props.type), onClick: (e) => {
-            onClick?.(e);
-            if (!e.defaultPrevented)
-                context?.close();
-        } }));
-};
-/** Popover with Header, Body, Footer and Close sub-components. */
-const Popover = withSubComponents(PopoverComponent, {
-    Header: PopoverHeader,
-    Body: PopoverBody,
-    Footer: PopoverFooter,
-    Close: PopoverClose,
-}, 'Popover');
-
-/**
- * The `HoverCard` component shows a card previewing what's behind a link or a button while the pointer rests on it or keyboard focus is on it.
- *
- * Nothing moves focus when the card opens, and nothing traps it. In place,
- * the card comes right after the trigger, so Tab goes from the trigger into
- * its links and tabbing past them closes it. The pointer can move onto the
- * card, Escape closes it from anywhere, and by default touch doesn't open it,
- * so tapping the trigger just does what the trigger does. `openOnTap` opens
- * it with a tap, for a trigger with no tap action of its own. For hints with nothing to
- * click use `Tooltip`, and for content opened on purpose, such as a form,
- * use `Popover`.
- *
- * @function
- * @param {HoverCardProps} props - Props for the HoverCard component.
- * @returns {JSX.Element} The trigger in its wrapper, and the card while open.
- *
- * @example
- * <HoverCard trigger={<a href="/people/ada">Ada Lovelace</a>}>
- *   <Title as="p" size="6">Ada Lovelace</Title>
- *   <SubTitle as="p" size="6">Analytical Engine team</SubTitle>
- * </HoverCard>
- */
-const HoverCard = ({ trigger, children, open: controlledOpen, defaultOpen = false, onOpenChange, openDelay = 600, closeDelay = 300, position = 'bottom-left', appendToBody = false, openOnTap = false, className, contentClassName, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const { onPointerEnter, onPointerOver, onPointerLeave, onPointerDown, onPointerUp, onFocus, onBlur, ...attrs } = rest;
-    const rootRef = React.useRef(null);
-    const cardRef = React.useRef(null);
-    const cardId = `${React.useId()}-card`;
-    const isControlled = controlledOpen !== undefined;
-    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
-    const isOpen = controlledOpen ?? internalOpen;
-    const requestOpen = React.useCallback((next) => {
-        onOpenChange?.(next);
-        if (!isControlled)
-            setInternalOpen(next);
-    }, [isControlled, onOpenChange]);
-    // A portaled card has no server markup, so it only exists from the commit
-    // after hydration, and nothing measures it before then.
-    const hydrated = useIsHydrated();
-    const cardMounted = isOpen && (hydrated || !appendToBody);
-    const resolved = useAnchoredPosition(rootRef, cardRef, {
-        active: cardMounted,
-        position,
-        fixed: appendToBody,
-        // The gap comes from `--bulma-hover-card-offset` in the stylesheet, so
-        // the coordinates leave it out and `auto` reads it off the card.
-        offset: 0,
-        styledGap: marginGap,
-    });
-    // The trigger renders first inside the wrapper. Read when needed rather
-    // than held, so a trigger that remounted is still the one found.
-    const triggerRef = React.useMemo(() => ({
-        get current() {
-            const first = rootRef.current.firstElementChild;
-            return first && first !== cardRef.current
-                ? first
-                : null;
-        },
-    }), []);
-    const hover = useHoverOpen({
-        open: isOpen,
-        onOpenChange: requestOpen,
-        openDelay,
-        closeDelay,
-        triggerRef,
-        floatingRef: cardRef,
-        openOnTap,
-    });
-    // A trigger that can't take focus leaves keyboard users no way to open the
-    // card. It has to be the trigger element itself, not something inside it,
-    // since focus comes back to it and its ARIA is on it. Judged by what the
-    // element is rather than by its styles, which can hide it for now. After
-    // every commit, since the trigger can change, and only in development.
-    React.useEffect(() => {
-        if (!isDev())
-            return;
-        const triggerNode = triggerRef.current;
-        if (!triggerNode)
+        if (e.defaultPrevented || e.target !== e.currentTarget)
             return;
-        if (!triggerNode.matches(':disabled') && isTabbableKind(triggerNode)) {
+        if (e.key === 'Escape') {
+            if (isOpen && closeOnEscape) {
+                e.preventDefault();
+                close();
+            }
             return;
         }
-        warnOnce('HoverCard:unfocusable-trigger', "[bestax-bulma] <HoverCard> has a trigger that can't take focus, so " +
-            "keyboard users can't open the card. Use a link or a button as the " +
-            'trigger, or give it tabIndex={0}.');
-    });
-    // Expanded only while the card is on the page, so a portaled card that
-    // waits for hydration isn't announced before it exists.
+        if (e.key !== 'Enter' && e.key !== ' ')
+            return;
+        if (handlesKeyItself(e.currentTarget, e.key))
+            return;
+        // Space would scroll the page; a held key repeats.
+        e.preventDefault();
+        if (!e.repeat)
+            requestOpen(!isOpen);
+    };
+    const needsButtonRole = typeof trigger.type === 'string' &&
+        !NATIVE_CONTROLS.has(trigger.type) &&
+        !(trigger.type === 'a' && triggerProps.href != null);
     const clonedTrigger = React.cloneElement(trigger, {
-        'aria-expanded': cardMounted,
-        'aria-controls': cardMounted ? cardId : undefined,
+        ...(needsButtonRole
+            ? {
+                role: triggerProps.role ?? 'button',
+                tabIndex: triggerProps.tabIndex ?? 0,
+            }
+            : {}),
+        'aria-haspopup': 'dialog',
+        'aria-expanded': isOpen,
+        'aria-controls': panelMounted ? panelId : undefined,
+        onClick: handleTriggerClick,
+        onKeyDown: handleTriggerKeyDown,
     });
-    const rootClasses = classNames(usePrefixedClassNames('hover-card', { 'is-active': cardMounted }), bulmaHelperClasses, className);
-    const cardClasses = classNames(usePrefixedClassNames('hover-card-content', {
+    const rootClasses = classNames(usePrefixedClassNames('popover', { 'is-active': isOpen }), bulmaHelperClasses, className);
+    const panelClasses = classNames(usePrefixedClassNames('popover-content', {
         [`is-${resolved.position}`]: true,
         'is-portal': appendToBody,
     }), contentClassName);
-    return (jsxRuntime.jsxs("span", { className: rootClasses, ...attrs, onPointerEnter: chain$1(onPointerEnter, hover.onPointerEnter), onPointerOver: chain$1(onPointerOver, hover.onPointerOver), onPointerLeave: chain$1(onPointerLeave, hover.onPointerLeave), onFocus: chain$1(onFocus, hover.onFocus), onBlur: chain$1(onBlur, hover.onBlur), onPointerDown: chain$1(onPointerDown, hover.onPointerDown), onPointerUp: chain$1(onPointerUp, hover.onPointerUp), ref: rootRef, children: [clonedTrigger, isOpen && (jsxRuntime.jsx(Portal, { disabled: !appendToBody, children: jsxRuntime.jsx("div", { ref: cardRef, id: cardId, className: cardClasses, style: appendToBody
+    return (jsxRuntime.jsxs("div", { className: rootClasses, ...rest, ref: rootRef, children: [clonedTrigger, isOpen && (jsxRuntime.jsx(Portal, { disabled: !appendToBody, children: jsxRuntime.jsx(PopoverPanel, { panelRef: panelRef, titleId: titleId, ariaLabel: ariaLabel, close: close, id: panelId, className: panelClasses, style: appendToBody
                         ? {
                             position: 'fixed',
                             top: resolved.top,
                             left: resolved.left,
                         }
-                        : undefined, children: children }) }))] }));
+                        : undefined, onKeyDown: handlePanelKeyDown, onPointerDownCapture: markInsidePress, children: children }) }))] }));
 };
-
-// INTERNAL: deliberately not exported from src/index.ts.
-/** How long a touch or a pen has to stay down to open the menu, in milliseconds. */
-const LONG_PRESS_DELAY = 500;
-/** How far a long press can move before it counts as something else, in CSS pixels. */
-const LONG_PRESS_TOLERANCE = 10;
-/**
- * The last press no trigger is to start a long press for: one a trigger
- * took, or another pointer coming down while a press is held. A press
- * reaches every trigger it bubbles through, the innermost first and all
- * before the next press, so this is how a trigger around another one knows
- * the inner one took it, and how a trigger a second finger lands on knows to
- * leave it.
- */
-let claimed = null;
-/** Whether the event happened in the element its handler is on, rather than in content portaled out of it. */
-const inTrigger = (event) => event.currentTarget.contains(event.target);
 /**
- * Where a `contextmenu` asks to open: at its point when that is on the
- * element it was fired at, which it is for the pointer, and at that
- * element's bottom-left corner otherwise, which is where the browser puts
- * its own menu for a key.
+ * The open panel. It mounts with each opening, so it counts the
+ * `Popover.Header`s inside it afresh every time.
  */
-function contextMenuPoint(event) {
-    const { clientX: x, clientY: y } = event;
-    const rect = event.target.getBoundingClientRect();
-    return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
-        ? { x, y }
-        : { x: rect.left, y: rect.bottom };
+function PopoverPanel({ panelRef, titleId, ariaLabel, close, children, ...attrs }) {
+    // Headers register in a layout effect, after this first render, and this
+    // panel's own layout effect runs after theirs. Until then the panel assumes
+    // it has one, so a panel that does is named from its first commit, before
+    // focus moves in, and one that doesn't drops the reference before it paints.
+    const [titlesCounted, setTitlesCounted] = React.useState(false);
+    const [titleCount, setTitleCount] = React.useState(0);
+    const registerTitle = React.useCallback(() => {
+        setTitleCount(n => n + 1);
+        return () => setTitleCount(n => n - 1);
+    }, []);
+    useClientLayoutEffect(() => {
+        setTitlesCounted(true);
+    }, []);
+    const named = Boolean(ariaLabel) || titleCount > 0;
+    React.useEffect(() => {
+        if (titlesCounted && !named) {
+            warnOnce('Popover:unnamed', '[bestax-bulma] <Popover> opened a panel with no accessible name. ' +
+                'Pass ariaLabel, or render a Popover.Header inside it.');
+        }
+    }, [titlesCounted, named]);
+    const context = React.useMemo(() => ({ titleId, registerTitle, close }), [titleId, registerTitle, close]);
+    return (jsxRuntime.jsx(PopoverContext.Provider, { value: context, children: jsxRuntime.jsx("div", { ...attrs, ref: panelRef, role: "dialog", "aria-label": ariaLabel, "aria-labelledby": !ariaLabel && (!titlesCounted || titleCount > 0) ? titleId : undefined, tabIndex: -1, children: children }) }));
 }
 /**
- * Decides when a context menu asks to open, and where. It renders nothing,
- * and knows nothing about ARIA or the menu.
- *
- * - **`contextmenu`:** a right-click, and Shift+F10 or the context menu key
- *   where the browser fires the event for them, asks to open at the point
- *   `contextMenuPoint` works out, and prevents the browser's own menu. Each
- *   one asks again, so a right-click elsewhere on the trigger moves it.
- * - **Long press:** a touch or a pen held still on the trigger for
- *   `LONG_PRESS_DELAY` fires a `contextmenu` at what it landed on, so it
- *   takes the same path, handlers on the way included. Moving more than
- *   `LONG_PRESS_TOLERANCE`, lifting, another pointer coming down anywhere in
- *   the document, or `pointercancel`, which is the browser taking the
- *   gesture for a scroll or a zoom, cancels it, and a mouse never starts
- *   one. A pointer that comes down while another is held starts no long
- *   press of its own, on this trigger or another, so two fingers on two rows
- *   open nothing. While the finger is down, and only then, a listener on the
- *   document hears other pointers coming down. Where the
- *   browser fires `contextmenu` for a long press itself, the first of the two
- *   opens it, and the end of a touch that opened it is prevented, so lifting
- *   doesn't click what is under the finger.
- * - **Who opens:** a handler that calls `preventDefault()` on the
- *   `contextmenu` before this one keeps it from asking, which is how a
- *   trigger's own handler opts out and how the innermost of nested triggers
- *   wins. A long press goes to the innermost trigger that takes it. Events
- *   from content portaled out of the trigger, which React brings here
- *   anyway, are ignored.
- * - **`disabled`:** nothing asks, and the browser's menu shows.
+ * The popover's title, which names the panel for assistive technology.
  *
- * Nothing it scheduled runs after the component unmounts.
+ * @function
+ * @param {PopoverHeaderProps} props - Props for the Popover.Header component.
+ * @returns {JSX.Element} The header element.
+ */
+const PopoverHeader = ({ className, ...props }) => {
+    const context = React.useContext(PopoverContext);
+    const registerTitle = context?.registerTitle;
+    // Before paint, so the panel is named by the time it shows.
+    useClientLayoutEffect(() => registerTitle?.(), [registerTitle]);
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('popover-header'), bulmaHelperClasses, className), ...rest, id: context?.titleId }));
+};
+/**
+ * The popover's main content area.
  *
- * @function useContextMenuTrigger
- * @param options - How to ask to open, and whether to.
- * @returns Handlers for the trigger element.
+ * @function
+ * @param {PopoverBodyProps} props - Props for the Popover.Body component.
+ * @returns {JSX.Element} The body element.
  */
-function useContextMenuTrigger({ onOpen, disabled, }) {
-    const pressRef = React.useRef(null);
-    /** A long press opened the menu, and the touch that made it hasn't ended. */
-    const heldRef = React.useRef(false);
-    const cancel = () => {
-        clearTimeout(pressRef.current?.timer);
-        pressRef.current?.stop();
-        pressRef.current = null;
-    };
-    React.useEffect(() => () => {
-        clearTimeout(pressRef.current?.timer);
-        pressRef.current?.stop();
-        pressRef.current = null;
-    }, []);
-    const isPress = (event) => pressRef.current?.pointerId === event.pointerId;
-    return {
-        onContextMenu: event => {
-            if (disabled || event.defaultPrevented || !inTrigger(event))
-                return;
-            event.preventDefault();
-            const press = pressRef.current;
-            if (press) {
-                if (press.opened)
-                    return;
-                clearTimeout(press.timer);
-                press.opened = true;
-                heldRef.current = true;
-            }
-            onOpen(contextMenuPoint(event), event.currentTarget);
-        },
-        onPointerDown: event => {
-            const native = event.nativeEvent;
-            if (disabled ||
-                (event.pointerType !== 'touch' && event.pointerType !== 'pen') ||
-                claimed === native ||
-                !inTrigger(event)) {
-                return;
-            }
-            claimed = native;
-            heldRef.current = false;
-            const target = event.target;
-            const doc = target.ownerDocument;
-            // Another pointer coming down anywhere makes it a pinch or a second
-            // touch, not a long press. In the capture phase, so it's heard before
-            // any trigger it lands on, which then leaves it. The press's own
-            // pointerdown has passed the document already, so it isn't heard.
-            const another = (other) => {
-                claimed = other;
-                cancel();
-            };
-            doc.addEventListener('pointerdown', another, true);
-            const press = {
-                pointerId: event.pointerId,
-                target,
-                x: event.clientX,
-                y: event.clientY,
-                opened: false,
-                stop: () => doc.removeEventListener('pointerdown', another, true),
-            };
-            press.timer = setTimeout(() => {
-                const view = press.target.ownerDocument.defaultView;
-                press.target.dispatchEvent(new view.MouseEvent('contextmenu', {
-                    bubbles: true,
-                    cancelable: true,
-                    composed: true,
-                    clientX: press.x,
-                    clientY: press.y,
-                    button: 2,
-                }));
-            }, LONG_PRESS_DELAY);
-            pressRef.current = press;
-        },
-        onPointerMove: event => {
-            const press = pressRef.current;
-            if (!press || !isPress(event) || press.opened)
-                return;
-            const moved = Math.hypot(event.clientX - press.x, event.clientY - press.y);
-            if (moved > LONG_PRESS_TOLERANCE)
-                cancel();
-        },
-        onPointerUp: event => {
-            if (isPress(event))
-                cancel();
-        },
-        onPointerCancel: event => {
-            if (isPress(event))
-                cancel();
-        },
-        onTouchEnd: event => {
-            if (!heldRef.current)
-                return;
-            heldRef.current = false;
-            event.preventDefault();
-        },
-    };
-}
-
+const PopoverBody = ({ className, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('popover-body'), bulmaHelperClasses, className), ...rest }));
+};
 /**
- * Where the menu goes along one axis, from the point at `at`: after it when
- * there's room, before it when there's room there instead, and otherwise
- * moved in until it fits in `room`.
+ * A row of actions along the bottom of the popover, aligned to the end.
+ *
+ * @function
+ * @param {PopoverFooterProps} props - Props for the Popover.Footer component.
+ * @returns {JSX.Element} The footer element.
  */
-function placeAlong(at, size, room) {
-    if (at + size <= room)
-        return { start: at, flip: false };
-    if (at - size >= 0)
-        return { start: at, flip: true };
-    return { start: Math.max(0, room - size), flip: false };
-}
-/** Runs the trigger's own handler, then the context menu's. */
-function chain(own, ours) {
-    return event => {
-        own?.(event);
-        ours(event);
-    };
-}
+const PopoverFooter = ({ className, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('popover-footer'), bulmaHelperClasses, className), ...rest }));
+};
 /**
- * The `ContextMenu` component opens a menu of actions where you right-click an element, such as a table row or a card, or long press it on a touch screen.
+ * A `Button` that closes the popover, handing focus back to the trigger.
  *
- * Shift+F10 and the context menu key open it too, where the browser fires
- * `contextmenu` for them, which Windows and Linux do. The menu is Dropdown's
- * markup, portaled into the `portalContainer` a `ConfigProvider` sets, or
- * the end of the trigger's own document's `<body>`, so it never has server
- * markup. It opens below and to the right of the point, flips above or to
- * the left where there's no room, moves in where it fits neither way, and
- * scrolls inside when it's taller than the viewport. It doesn't follow the
- * trigger, since scrolling closes it. Inside a `Modal` or a shadow root,
- * point `portalContainer` inside it, so screen readers that honor
- * `aria-modal` reach the menu and the shadow root's styles apply.
+ * @function
+ * @param {PopoverCloseProps} props - Props for the Popover.Close component.
+ * @returns {JSX.Element} The close button.
+ */
+const PopoverClose = ({ onClick, ...props }) => {
+    const context = React.useContext(PopoverContext);
+    return (jsxRuntime.jsx(Button, { ...props, type: buttonType(props.type), onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                context?.close();
+        } }));
+};
+/** Popover with Header, Body, Footer and Close sub-components. */
+const Popover = withSubComponents(PopoverComponent, {
+    Header: PopoverHeader,
+    Body: PopoverBody,
+    Footer: PopoverFooter,
+    Close: PopoverClose,
+}, 'Popover');
+
+/**
+ * The `HoverCard` component shows a card previewing what's behind a link or a button while the pointer rests on it or keyboard focus is on it.
  *
- * Opening moves focus to the first enabled item. The arrow keys, Home, End
- * and typing move between items, and Enter and Space activate one. Escape,
- * Tab, an item, a press outside, scrolling, resizing and the window losing
- * focus close it, handing focus back to what had it unless an item moved it
- * somewhere else. For a menu opened from a button use `Dropdown`.
+ * Nothing moves focus when the card opens, and nothing traps it. In place,
+ * the card comes right after the trigger, so Tab goes from the trigger into
+ * its links and tabbing past them closes it. The pointer can move onto the
+ * card, Escape closes it from anywhere, and by default touch doesn't open it,
+ * so tapping the trigger just does what the trigger does. `openOnTap` opens
+ * it with a tap, for a trigger with no tap action of its own. For hints with nothing to
+ * click use `Tooltip`, and for content opened on purpose, such as a form,
+ * use `Popover`.
  *
  * @function
- * @param {ContextMenuProps} props - Props for the ContextMenu component.
- * @returns {JSX.Element} The trigger, and the menu while open.
+ * @param {HoverCardProps} props - Props for the HoverCard component.
+ * @returns {JSX.Element} The trigger in its wrapper, and the card while open.
  *
  * @example
- * <ContextMenu
- *   aria-label="Actions for report.pdf"
- *   trigger={<Box>report.pdf</Box>}
- * >
- *   <ContextMenu.Item as="button">Rename</ContextMenu.Item>
- *   <ContextMenu.Divider />
- *   <ContextMenu.Item as="button">Delete</ContextMenu.Item>
- * </ContextMenu>
+ * <HoverCard trigger={<a href="/people/ada">Ada Lovelace</a>}>
+ *   <Title as="p" size="6">Ada Lovelace</Title>
+ *   <SubTitle as="p" size="6">Analytical Engine team</SubTitle>
+ * </HoverCard>
  */
-const ContextMenuComponent = ({ trigger, children, onOpenChange, closeOnClick = true, disabled = false, className, onKeyDown, onClick, onContextMenu, ...props }) => {
+const HoverCard = ({ trigger, children, open: controlledOpen, defaultOpen = false, onOpenChange, openDelay = 600, closeDelay = 300, position = 'bottom-left', appendToBody = false, openOnTap = false, className, contentClassName, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const { portalContainer } = useConfig();
-    const [menu, setMenu] = React.useState(null);
-    // Turning `disabled` on closes it.
-    if (disabled && menu)
-        setMenu(null);
-    const open = menu !== null;
-    const doc = menu?.doc;
-    const placed = menu?.placed;
-    const boxRef = React.useRef(null);
-    const menuRef = React.useRef(null);
-    const openerRef = React.useRef(null);
-    const reportedRef = React.useRef(false);
-    const menuKeys = useMenuKeys();
-    const named = Boolean(props['aria-label'] || props['aria-labelledby']);
-    const handlers = useContextMenuTrigger({
-        disabled,
-        onOpen: (point, triggerNode) => {
-            const ownerDoc = triggerNode.ownerDocument;
-            openerRef.current = getDeepestActiveElement(ownerDoc);
-            setMenu({ point, doc: ownerDoc });
-        },
+    const { onPointerEnter, onPointerOver, onPointerLeave, onPointerDown, onPointerUp, onFocus, onBlur, ...attrs } = rest;
+    const rootRef = React.useRef(null);
+    const cardRef = React.useRef(null);
+    const cardId = `${React.useId()}-card`;
+    const isControlled = controlledOpen !== undefined;
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const isOpen = controlledOpen ?? internalOpen;
+    const requestOpen = React.useCallback((next) => {
+        onOpenChange?.(next);
+        if (!isControlled)
+            setInternalOpen(next);
+    }, [isControlled, onOpenChange]);
+    // A portaled card has no server markup, so it only exists from the commit
+    // after hydration, and nothing measures it before then.
+    const hydrated = useIsHydrated();
+    const cardMounted = isOpen && (hydrated || !appendToBody);
+    const resolved = useAnchoredPosition(rootRef, cardRef, {
+        active: cardMounted,
+        position,
+        fixed: appendToBody,
+        // The gap comes from `--bulma-hover-card-offset` in the stylesheet, so
+        // the coordinates leave it out and `auto` reads it off the card.
+        offset: 0,
+        styledGap: marginGap,
     });
-    // Measured once per opening, before it paints, against what a fixed box
-    // resolves against: the root element's client area, which leaves out a
-    // classic scrollbar. `useAnchoredPosition` and Tooltip read innerWidth and
-    // innerHeight, which count it. A menu pinned to the viewport's edge would
-    // sit under the scrollbar by that much, so this reads the narrower box.
-    useClientLayoutEffect(() => {
-        const menuNode = menuRef.current;
-        if (!menu || menu.placed || !menuNode)
-            return;
-        const root = menuNode.ownerDocument.documentElement;
-        const { width, height } = menuNode.getBoundingClientRect();
-        const x = placeAlong(menu.point.x, width, root.clientWidth);
-        const y = placeAlong(menu.point.y, height, root.clientHeight);
-        setMenu({
-            ...menu,
-            placed: { left: x.start, top: y.start, right: x.flip, up: y.flip },
-        });
-    }, [menu]);
-    const isPlaced = Boolean(placed);
-    // What closes it while it's open, and focus back on closing. Nothing
-    // listens while it's closed.
-    React.useEffect(() => {
-        const box = boxRef.current;
-        const menuNode = menuRef.current;
-        if (!doc || !box || !menuNode)
-            return undefined;
-        const view = doc.defaultView;
-        // What had focus when it opened. This runs once per opening, so opening
-        // again at a new point while it's open keeps it.
-        const opener = openerRef.current;
-        const close = () => setMenu(null);
-        const closeOutside = (event) => {
-            if (!isEventInside(event, box))
-                close();
-        };
-        doc.addEventListener('pointerdown', closeOutside, true);
-        view.addEventListener('resize', close);
-        view.addEventListener('blur', close);
-        return () => {
-            doc.removeEventListener('pointerdown', closeOutside, true);
-            view.removeEventListener('resize', close);
-            view.removeEventListener('blur', close);
-            // Back to what had focus while the menu still has it, or it dropped to
-            // <body> when the menu left. An item that put it somewhere else, such
-            // as a Modal or a rename field, keeps it there.
-            const now = getDeepestActiveElement(doc);
-            if (!now || now === doc.body || menuNode.contains(now))
-                opener?.focus();
-        };
-    }, [doc]);
-    // Focus in, and closing on scroll, once it's placed. Placed, it's inside
-    // the viewport, so its first item has nothing to scroll into view, and
-    // `preventScroll` makes sure: a scroll the focus caused would close it as
-    // it opened. Opening again at a new point places it again, and leaves
-    // focus where it is in the menu.
-    React.useEffect(() => {
-        const box = boxRef.current;
-        const menuNode = menuRef.current;
-        if (!doc || !isPlaced || !box || !menuNode)
-            return undefined;
-        if (!menuNode.contains(getDeepestActiveElement(doc))) {
-            menuKeys.reset();
-            (enabledMenuItems(menuNode)[0] ?? menuNode).focus({
-                preventScroll: true,
-            });
-        }
-        const closeOutside = (event) => {
-            if (!isEventInside(event, box))
-                setMenu(null);
-        };
-        doc.addEventListener('scroll', closeOutside, true);
-        return () => doc.removeEventListener('scroll', closeOutside, true);
-    }, [doc, isPlaced, menuKeys]);
-    // Before paint, so what the caller does with it, such as highlighting the
-    // row, shows with the menu rather than a frame behind it.
-    useClientLayoutEffect(() => {
-        if (open === reportedRef.current)
-            return;
-        reportedRef.current = open;
-        onOpenChange?.(open);
+    // The trigger renders first inside the wrapper. Read when needed rather
+    // than held, so a trigger that remounted is still the one found.
+    const triggerRef = React.useMemo(() => ({
+        get current() {
+            const first = rootRef.current.firstElementChild;
+            return first && first !== cardRef.current
+                ? first
+                : null;
+        },
+    }), []);
+    const hover = useHoverOpen({
+        open: isOpen,
+        onOpenChange: requestOpen,
+        openDelay,
+        closeDelay,
+        triggerRef,
+        floatingRef: cardRef,
+        openOnTap,
     });
+    // A trigger that can't take focus leaves keyboard users no way to open the
+    // card. It has to be the trigger element itself, not something inside it,
+    // since focus comes back to it and its ARIA is on it. Judged by what the
+    // element is rather than by its styles, which can hide it for now. After
+    // every commit, since the trigger can change, and only in development.
     React.useEffect(() => {
-        if (open && !named) {
-            warnOnce('ContextMenu:unnamed', '[bestax-bulma] <ContextMenu> opened a menu with no accessible ' +
-                'name. Pass aria-label or aria-labelledby.');
-        }
-    }, [open, named]);
-    const handleKeyDown = (event) => {
-        onKeyDown?.(event);
-        // The menu has the keyboard while focus is in it. React brings its keys
-        // up the tree to wherever the ContextMenu sits, where a table that moves
-        // between rows on the arrow keys, or a Popover or a Modal waiting for
-        // Escape, would take them too.
-        event.stopPropagation();
-        if (event.key === 'Escape' || event.key === 'Tab') {
-            // Tab would go on from the end of <body>, past the rest of the page.
-            event.preventDefault();
-            setMenu(null);
+        if (!isDev())
             return;
-        }
-        menuKeys.onKeyDown(event);
-    };
-    const handleClick = (event) => {
-        onClick?.(event);
-        if (!closeOnClick)
+        const triggerNode = triggerRef.current;
+        if (!triggerNode)
             return;
-        const item = event.target.closest(MENU_ITEM_SELECTOR);
-        if (item && isEnabledMenuItem(item))
-            setMenu(null);
-    };
-    const handleContextMenu = (event) => {
-        onContextMenu?.(event);
-        // No other menu over this one: not the browser's, and not a trigger's
-        // that React brings the event up to.
-        event.preventDefault();
-        event.stopPropagation();
-    };
-    const own = trigger.props;
-    const triggerClass = usePrefixedClassNames('context-menu');
-    const clonedTrigger = React.cloneElement(trigger, {
-        className: classNames(own.className, !disabled && triggerClass) || undefined,
-        onContextMenu: chain(own.onContextMenu, handlers.onContextMenu),
-        onPointerDown: chain(own.onPointerDown, handlers.onPointerDown),
-        onPointerMove: chain(own.onPointerMove, handlers.onPointerMove),
-        onPointerUp: chain(own.onPointerUp, handlers.onPointerUp),
-        onPointerCancel: chain(own.onPointerCancel, handlers.onPointerCancel),
-        onTouchEnd: chain(own.onTouchEnd, handlers.onTouchEnd),
+        if (!triggerNode.matches(':disabled') && isTabbableKind(triggerNode)) {
+            return;
+        }
+        warnOnce('HoverCard:unfocusable-trigger', "[bestax-bulma] <HoverCard> has a trigger that can't take focus, so " +
+            "keyboard users can't open the card. Use a link or a button as the " +
+            'trigger, or give it tabIndex={0}.');
     });
-    const boxClasses = usePrefixedClassNames('context-menu-content', 'dropdown', {
-        'is-active': true,
-        'is-up': placed?.up,
-        'is-right': placed?.right,
+    // Expanded only while the card is on the page, so a portaled card that
+    // waits for hydration isn't announced before it exists.
+    const clonedTrigger = React.cloneElement(trigger, {
+        'aria-expanded': cardMounted,
+        'aria-controls': cardMounted ? cardId : undefined,
     });
-    const menuClasses = classNames(usePrefixedClassNames('dropdown-menu'), bulmaHelperClasses, className);
-    const contentClasses = usePrefixedClassNames('dropdown-content');
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [clonedTrigger, menu && (jsxRuntime.jsx(Portal, { container: portalContainer || menu.doc.body, children: jsxRuntime.jsx("div", { ref: boxRef, className: boxClasses, style: {
-                        top: placed?.top ?? menu.point.y,
-                        left: placed?.left ?? menu.point.x,
-                    }, children: jsxRuntime.jsx("div", { ...rest, ref: menuRef, role: "menu", tabIndex: -1, className: menuClasses, onKeyDown: handleKeyDown, onClick: handleClick, onContextMenu: handleContextMenu, children: jsxRuntime.jsx("div", { className: contentClasses, children: children }) }) }) }))] }));
+    const rootClasses = classNames(usePrefixedClassNames('hover-card', { 'is-active': cardMounted }), bulmaHelperClasses, className);
+    const cardClasses = classNames(usePrefixedClassNames('hover-card-content', {
+        [`is-${resolved.position}`]: true,
+        'is-portal': appendToBody,
+    }), contentClassName);
+    return (jsxRuntime.jsxs("span", { className: rootClasses, ...attrs, onPointerEnter: chain$1(onPointerEnter, hover.onPointerEnter), onPointerOver: chain$1(onPointerOver, hover.onPointerOver), onPointerLeave: chain$1(onPointerLeave, hover.onPointerLeave), onFocus: chain$1(onFocus, hover.onFocus), onBlur: chain$1(onBlur, hover.onBlur), onPointerDown: chain$1(onPointerDown, hover.onPointerDown), onPointerUp: chain$1(onPointerUp, hover.onPointerUp), ref: rootRef, children: [clonedTrigger, isOpen && (jsxRuntime.jsx(Portal, { disabled: !appendToBody, children: jsxRuntime.jsx("div", { ref: cardRef, id: cardId, className: cardClasses, style: appendToBody
+                        ? {
+                            position: 'fixed',
+                            top: resolved.top,
+                            left: resolved.left,
+                        }
+                        : undefined, children: children }) }))] }));
 };
+
+// INTERNAL: deliberately not exported from src/index.ts.
+/** How long a touch or a pen has to stay down to open the menu, in milliseconds. */
+const LONG_PRESS_DELAY = 500;
+/** How far a long press can move before it counts as something else, in CSS pixels. */
+const LONG_PRESS_TOLERANCE = 10;
 /**
- * ContextMenu with Item and Divider sub-components, which are `Dropdown.Item`
- * and `Dropdown.Divider`, so items written for a Dropdown work here
- * unchanged.
+ * The last press no trigger is to start a long press for: one a trigger
+ * took, or another pointer coming down while a press is held. A press
+ * reaches every trigger it bubbles through, the innermost first and all
+ * before the next press, so this is how a trigger around another one knows
+ * the inner one took it, and how a trigger a second finger lands on knows to
+ * leave it.
  */
-const ContextMenu = withSubComponents(ContextMenuComponent, {
-    Item: DropdownItem,
-    Divider: DropdownDivider,
-}, 'ContextMenu');
-
+let claimed = null;
+/** Whether the event happened in the element its handler is on, rather than in content portaled out of it. */
+const inTrigger = (event) => event.currentTarget.contains(event.target);
 /**
- * Individual Step component for use inside Steps.
- *
- * @function
- * @param {StepProps} props - Props for the Step component.
- * @returns {JSX.Element} The rendered step segment.
+ * Where a `contextmenu` asks to open: at its point when that is on the
+ * element it was fired at, which it is for the pointer, and at that
+ * element's bottom-left corner otherwise, which is where the browser puts
+ * its own menu for a key.
  */
-const Step = ({ isActive = false, isCompleted = false, label, icon, clickable = false, onClick, stepNumber, completedIcon, className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const formatNumber = useScopedNumberFormat();
-    const stepClasses = classNames(usePrefixedClassNames('steps-segment', {
-        'is-active': isActive,
-        'is-completed': isCompleted,
-    }), bulmaHelperClasses, className);
-    const stepsLinkClass = usePrefixedClassNames('steps-link');
-    const stepsMarkerClass = usePrefixedClassNames('steps-marker');
-    const stepsContentClass = usePrefixedClassNames('steps-content');
-    const stepsTitleClass = usePrefixedClassNames('steps-title');
-    const resolvedCompletedIcon = completedIcon === undefined ? '\u2713' : completedIcon;
-    const markerContent = icon ||
-        (isCompleted && resolvedCompletedIcon
-            ? resolvedCompletedIcon
-            : stepNumber == null || !formatNumber
-                ? (stepNumber ?? null)
-                : formatNumber(stepNumber));
-    const title = label || children;
-    const current = isActive ? 'step' : undefined;
-    // The step stays a list item, and a real button inside it does the
-    // clicking, so the list keeps its items and the button brings Enter, Space
-    // and focus with it. A button holds only phrasing content, so its parts
-    // are spans.
-    if (clickable) {
-        return (jsxRuntime.jsx("li", { className: stepClasses, ...rest, children: jsxRuntime.jsxs("button", { type: "button", className: stepsLinkClass, onClick: () => onClick?.(), "aria-current": current, children: [jsxRuntime.jsx("span", { className: stepsMarkerClass, children: markerContent }), title && (jsxRuntime.jsx("span", { className: stepsContentClass, children: jsxRuntime.jsx("span", { className: stepsTitleClass, children: title }) }))] }) }));
-    }
-    return (jsxRuntime.jsx("li", { className: stepClasses, "aria-current": current, ...rest, children: jsxRuntime.jsxs("div", { className: stepsLinkClass, children: [jsxRuntime.jsx("span", { className: stepsMarkerClass, children: markerContent }), title && (jsxRuntime.jsx("div", { className: stepsContentClass, children: jsxRuntime.jsx("p", { className: stepsTitleClass, children: title }) }))] }) }));
-};
+function contextMenuPoint(event) {
+    const { clientX: x, clientY: y } = event;
+    const rect = event.target.getBoundingClientRect();
+    return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
+        ? { x, y }
+        : { x: rect.left, y: rect.bottom };
+}
 /**
- * The `Steps` component provides a multi-step progress indicator for wizard flows, checkout processes, or any multi-step workflow.
+ * Decides when a context menu asks to open, and where. It renders nothing,
+ * and knows nothing about ARIA or the menu.
  *
- * @function
- * @param {StepsProps} props - Props for the Steps component.
- * @returns {JSX.Element} The rendered steps component.
+ * - **`contextmenu`:** a right-click, and Shift+F10 or the context menu key
+ *   where the browser fires the event for them, asks to open at the point
+ *   `contextMenuPoint` works out, and prevents the browser's own menu. Each
+ *   one asks again, so a right-click elsewhere on the trigger moves it.
+ * - **Long press:** a touch or a pen held still on the trigger for
+ *   `LONG_PRESS_DELAY` fires a `contextmenu` at what it landed on, so it
+ *   takes the same path, handlers on the way included. Moving more than
+ *   `LONG_PRESS_TOLERANCE`, lifting, another pointer coming down anywhere in
+ *   the document, or `pointercancel`, which is the browser taking the
+ *   gesture for a scroll or a zoom, cancels it, and a mouse never starts
+ *   one. A pointer that comes down while another is held starts no long
+ *   press of its own, on this trigger or another, so two fingers on two rows
+ *   open nothing. While the finger is down, and only then, a listener on the
+ *   document hears other pointers coming down. Where the
+ *   browser fires `contextmenu` for a long press itself, the first of the two
+ *   opens it, and the end of a touch that opened it is prevented, so lifting
+ *   doesn't click what is under the finger.
+ * - **Who opens:** a handler that calls `preventDefault()` on the
+ *   `contextmenu` before this one keeps it from asking, which is how a
+ *   trigger's own handler opts out and how the innermost of nested triggers
+ *   wins. A long press goes to the innermost trigger that takes it. Events
+ *   from content portaled out of the trigger, which React brings here
+ *   anyway, are ignored.
+ * - **`disabled`:** nothing asks, and the browser's menu shows.
  *
- * @example
- * // Basic steps with items
- * <Steps
- *   value={1}
- *   items={[
- *     { label: 'Account' },
- *     { label: 'Profile' },
- *     { label: 'Complete' },
- *   ]}
- * />
+ * Nothing it scheduled runs after the component unmounts.
  *
- * @example
- * // Clickable steps with navigation
- * <Steps
- *   value={currentStep}
- *   onStepClick={(step) => setCurrentStep(step)}
- *   hasNavigation
- *   items={[
- *     { label: 'Step 1', clickable: true },
- *     { label: 'Step 2', clickable: true },
- *     { label: 'Step 3', clickable: true },
- *   ]}
- * />
+ * @function useContextMenuTrigger
+ * @param options - How to ask to open, and whether to.
+ * @returns Handlers for the trigger element.
  */
-const StepsComponent = ({ value = 0, items, size, color, hasMarker = true, animated = true, rounded = true, vertical = false, labelPosition = 'bottom', mobileMode, showStepNumbers = true, hasNavigation = false, prevLabel, nextLabel, onPrev, onNext, onStepClick, className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    // Generate classes for the wrapper div
-    const stepsClasses = usePrefixedClassNames('steps', {
-        [`is-${size}`]: size,
-        [`is-${color}`]: color,
-        'has-marker': hasMarker,
-        'is-animated': animated,
-        'is-rounded': rounded,
-        'is-vertical': vertical,
-        [`has-label-${labelPosition}`]: labelPosition && (labelPosition !== 'bottom' || vertical),
-        [`is-${mobileMode}`]: mobileMode,
-    });
-    const combinedClasses = classNames(stepsClasses, bulmaHelperClasses, className);
-    // Generate classes for the ul (list)
-    const listClasses = usePrefixedClassNames('steps-list', {
-        'is-vertical': vertical,
-    });
-    const stepsNavigationClass = usePrefixedClassNames('steps-navigation');
-    const prevButtonClass = usePrefixedClassNames('button');
-    const nextButtonClass = usePrefixedClassNames('button', {
-        'is-primary': true,
-    });
-    // Count total steps for navigation
-    const totalSteps = items ? items.length : React.Children.count(children);
-    // Render items if provided
-    const renderSteps = () => {
-        if (items && items.length > 0) {
-            return items.map((item, index) => (jsxRuntime.jsx(Step, { isActive: index === value, isCompleted: index < value, label: item.label, icon: item.icon, completedIcon: item.completedIcon, clickable: item.clickable, stepNumber: showStepNumbers ? index + 1 : undefined, onClick: item.clickable && onStepClick ? () => onStepClick(index) : undefined, className: item.className }, index)));
-        }
-        // If children are provided, clone them with active/completed states
-        if (children) {
-            return React.Children.map(children, (child, index) => {
-                if (React.isValidElement(child)) {
-                    return React.cloneElement(child, {
-                        isActive: index === value,
-                        isCompleted: index < value,
-                        stepNumber: showStepNumbers ? index + 1 : undefined,
-                        onClick: child.props.clickable && onStepClick
-                            ? () => onStepClick(index)
-                            : child.props.onClick,
-                    });
-                }
-                return child;
-            });
-        }
-        return null;
+function useContextMenuTrigger({ onOpen, disabled, }) {
+    const pressRef = React.useRef(null);
+    /** A long press opened the menu, and the touch that made it hasn't ended. */
+    const heldRef = React.useRef(false);
+    const cancel = () => {
+        clearTimeout(pressRef.current?.timer);
+        pressRef.current?.stop();
+        pressRef.current = null;
+    };
+    React.useEffect(() => () => {
+        clearTimeout(pressRef.current?.timer);
+        pressRef.current?.stop();
+        pressRef.current = null;
+    }, []);
+    const isPress = (event) => pressRef.current?.pointerId === event.pointerId;
+    return {
+        onContextMenu: event => {
+            if (disabled || event.defaultPrevented || !inTrigger(event))
+                return;
+            event.preventDefault();
+            const press = pressRef.current;
+            if (press) {
+                if (press.opened)
+                    return;
+                clearTimeout(press.timer);
+                press.opened = true;
+                heldRef.current = true;
+            }
+            onOpen(contextMenuPoint(event), event.currentTarget);
+        },
+        onPointerDown: event => {
+            const native = event.nativeEvent;
+            if (disabled ||
+                (event.pointerType !== 'touch' && event.pointerType !== 'pen') ||
+                claimed === native ||
+                !inTrigger(event)) {
+                return;
+            }
+            claimed = native;
+            heldRef.current = false;
+            const target = event.target;
+            const doc = target.ownerDocument;
+            // Another pointer coming down anywhere makes it a pinch or a second
+            // touch, not a long press. In the capture phase, so it's heard before
+            // any trigger it lands on, which then leaves it. The press's own
+            // pointerdown has passed the document already, so it isn't heard.
+            const another = (other) => {
+                claimed = other;
+                cancel();
+            };
+            doc.addEventListener('pointerdown', another, true);
+            const press = {
+                pointerId: event.pointerId,
+                target,
+                x: event.clientX,
+                y: event.clientY,
+                opened: false,
+                stop: () => doc.removeEventListener('pointerdown', another, true),
+            };
+            press.timer = setTimeout(() => {
+                const view = press.target.ownerDocument.defaultView;
+                press.target.dispatchEvent(new view.MouseEvent('contextmenu', {
+                    bubbles: true,
+                    cancelable: true,
+                    composed: true,
+                    clientX: press.x,
+                    clientY: press.y,
+                    button: 2,
+                }));
+            }, LONG_PRESS_DELAY);
+            pressRef.current = press;
+        },
+        onPointerMove: event => {
+            const press = pressRef.current;
+            if (!press || !isPress(event) || press.opened)
+                return;
+            const moved = Math.hypot(event.clientX - press.x, event.clientY - press.y);
+            if (moved > LONG_PRESS_TOLERANCE)
+                cancel();
+        },
+        onPointerUp: event => {
+            if (isPress(event))
+                cancel();
+        },
+        onPointerCancel: event => {
+            if (isPress(event))
+                cancel();
+        },
+        onTouchEnd: event => {
+            if (!heldRef.current)
+                return;
+            heldRef.current = false;
+            event.preventDefault();
+        },
     };
-    // role="list" restates the <ul>'s own role, for Safari: WebKit stops
-    // exposing a list as one once its markers are hidden, as they are here,
-    // unless the role is set explicitly.
-    return (jsxRuntime.jsxs("div", { className: combinedClasses, ...rest, children: [jsxRuntime.jsx("ul", { className: listClasses, role: "list", children: renderSteps() }), hasNavigation && (jsxRuntime.jsxs("div", { className: stepsNavigationClass, children: [jsxRuntime.jsx("button", { type: "button", className: prevButtonClass, disabled: value === 0, onClick: onPrev ?? (() => onStepClick?.(value - 1)), children: prevLabel ?? 'Previous' }), jsxRuntime.jsx("button", { type: "button", className: nextButtonClass, disabled: value === totalSteps - 1, onClick: onNext ?? (() => onStepClick?.(value + 1)), children: nextLabel ?? 'Next' })] }))] }));
-};
-// Attach Step as static property
-const Steps = withSubComponents(StepsComponent, { Step }, 'Steps');
+}
 
 /**
- * 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,
- * and items shown in quick succession are written, and read out, together.
- */
-const announceDelay = 100;
-/**
- * How long an announcement stays in the region once written, in ms. That's
- * long enough for a screen reader to pick it up. Clearing it after keeps a
- * second copy of the item's text from sitting in the page, where someone
- * reading through the page, or a test looking the text up, would find it
- * again.
+ * Where the menu goes along one axis, from the point at `at`: after it when
+ * there's room, before it when there's room there instead, and otherwise
+ * moved in until it fits in `room`.
  */
-const announcementLifetime = 1000;
-const noAnnouncements$1 = [];
-const nothingWritten = [];
-const noAnnouncementsYet = {
-    key: 0,
-    waiting: noAnnouncements$1,
-    written: nothingWritten,
-};
-// Hides the region with inline styles rather than a class, so it needs no
-// stylesheet, including the helper classes a modular Bulma build can leave
-// out. Clipping it, rather than using `display` or `visibility`, keeps it in
-// the accessibility tree. The declarations match the `extras-sr-only` mixin,
-// plus `clip-path`, which replaces the deprecated `clip`. The negative margin
-// pulls the 1px box back inside the page, so it doesn't add scrollable
-// overflow. Exported for other live regions that must work without a
-// stylesheet, such as a range calendar's.
-const visuallyHidden = {
-    position: 'absolute',
-    width: '1px',
-    height: '1px',
-    padding: 0,
-    margin: '-1px',
-    overflow: 'hidden',
-    clip: 'rect(0, 0, 0, 0)',
-    clipPath: 'inset(50%)',
-    whiteSpace: 'nowrap',
-    border: 0,
-};
+function placeAlong(at, size, room) {
+    if (at + size <= room)
+        return { start: at, flip: false };
+    if (at - size >= 0)
+        return { start: at, flip: true };
+    return { start: Math.max(0, room - size), flip: false };
+}
+/** Runs the trigger's own handler, then the context menu's. */
+function chain(own, ours) {
+    return event => {
+        own?.(event);
+        ours(event);
+    };
+}
 /**
- * Works out what a status region says. Each item is announced once each time
- * it appears, so one that goes and comes back is announced again. Its
- * announcement is written `announceDelay` after it appears, or after the last
- * item to join it when several appear in quick succession, alongside whatever
- * the region still says. Once written, it stays for `announcementLifetime`,
- * whatever is written after it and whether or not its item goes in the
- * meantime. An item that goes before its announcement is written isn't
- * announced.
+ * The `ContextMenu` component opens a menu of actions where you right-click an element, such as a table row or a card, or long press it on a touch screen.
  *
- * Nothing is written in the commit that mounts the region or the item. A
- * screen reader reliably announces a polite live region whose content changes
- * after the region is already in the page, and not always one that arrives
- * with its content. By the time `describe` runs, an item's rendered text can
- * be read.
+ * Shift+F10 and the context menu key open it too, where the browser fires
+ * `contextmenu` for them, which Windows and Linux do. The menu is Dropdown's
+ * markup, portaled into the `portalContainer` a `ConfigProvider` sets, or
+ * the end of the trigger's own document's `<body>`, so it never has server
+ * markup. It opens below and to the right of the point, flips above or to
+ * the left where there's no room, moves in where it fits neither way, and
+ * scrolls inside when it's taller than the viewport. It doesn't follow the
+ * trigger, since scrolling closes it. Inside a `Modal` or a shadow root,
+ * point `portalContainer` inside it, so screen readers that honor
+ * `aria-modal` reach the menu and the shadow root's styles apply.
  *
- * @function useAnnouncements
- * @param items - The items to announce, in the order they were shown.
- * @param describe - The text to announce for an item, or nothing to skip it.
- *   It runs once the item is on screen, and it must keep its identity between
- *   renders (a module-level function or a `useCallback`), or every render
- *   re-checks the items.
- * @returns The announcements to render, in the order they were written.
+ * Opening moves focus to the first enabled item. The arrow keys, Home, End
+ * and typing move between items, and Enter and Space activate one. Escape,
+ * Tab, an item, a press outside, scrolling, resizing and the window losing
+ * focus close it, handing focus back to what had it unless an item moved it
+ * somewhere else. For a menu opened from a button use `Dropdown`.
+ *
+ * @function
+ * @param {ContextMenuProps} props - Props for the ContextMenu component.
+ * @returns {JSX.Element} The trigger, and the menu while open.
+ *
+ * @example
+ * <ContextMenu
+ *   aria-label="Actions for report.pdf"
+ *   trigger={<Box>report.pdf</Box>}
+ * >
+ *   <ContextMenu.Item as="button">Rename</ContextMenu.Item>
+ *   <ContextMenu.Divider />
+ *   <ContextMenu.Item as="button">Delete</ContextMenu.Item>
+ * </ContextMenu>
  */
-function useAnnouncements(items, describe) {
-    // The ids of the items on screen as of the last change, every one of which
-    // has been looked at for an announcement already.
-    const onScreenIdsRef = React.useRef(new Set());
-    // Clears that haven't run yet. They outlive the batch that started them, so
-    // they're only stopped when the region unmounts.
-    const clearTimersRef = React.useRef(new Set());
-    const [announcements, setAnnouncements] = React.useState(noAnnouncementsYet);
-    // Runs after the commit that puts an item on screen, which is the first
-    // point its rendered text can be read.
-    React.useEffect(() => {
-        const announced = onScreenIdsRef.current;
-        const appeared = items.filter(item => !announced.has(item.id));
-        // Items that have gone drop out here too, so one that comes back has
-        // appeared again.
-        onScreenIdsRef.current = new Set(items.map(item => item.id));
-        const next = [];
-        for (const item of appeared) {
-            const text = describe(item);
-            if (text)
-                next.push({ id: item.id, text });
-        }
-        if (next.length > 0) {
-            // eslint-disable-next-line react-hooks/set-state-in-effect -- an item's rendered text can only be read once it's on screen
-            setAnnouncements(current => ({
-                ...current,
-                key: current.key + 1,
-                // Announcements still waiting go out with the new ones, apart from
-                // one whose item came back before it was written, which the new one
-                // replaces. What's already written stays put.
-                waiting: [
-                    ...current.waiting.filter(waiting => !next.some(({ id }) => id === waiting.id)),
-                    ...next,
-                ],
-            }));
-        }
-    }, [items, describe]);
-    // The write only touches the batch it was started for: a newer batch can
-    // be set before the render that cancels this timer. Its clear is started
-    // by the write itself, so it's timed from the write without waiting on a
-    // render, and a newer batch arriving doesn't cut short what's written.
-    const { key } = announcements;
+const ContextMenuComponent = ({ trigger, children, onOpenChange, closeOnClick = true, disabled = false, className, onKeyDown, onClick, onContextMenu, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const { portalContainer } = useConfig();
+    const [menu, setMenu] = React.useState(null);
+    // Turning `disabled` on closes it.
+    if (disabled && menu)
+        setMenu(null);
+    const open = menu !== null;
+    const doc = menu?.doc;
+    const placed = menu?.placed;
+    const boxRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const openerRef = React.useRef(null);
+    const reportedRef = React.useRef(false);
+    const menuKeys = useMenuKeys();
+    const named = Boolean(props['aria-label'] || props['aria-labelledby']);
+    const handlers = useContextMenuTrigger({
+        disabled,
+        onOpen: (point, triggerNode) => {
+            const ownerDoc = triggerNode.ownerDocument;
+            openerRef.current = getDeepestActiveElement(ownerDoc);
+            setMenu({ point, doc: ownerDoc });
+        },
+    });
+    // Measured once per opening, before it paints, against what a fixed box
+    // resolves against: the root element's client area, which leaves out a
+    // classic scrollbar. `useAnchoredPosition` and Tooltip read innerWidth and
+    // innerHeight, which count it. A menu pinned to the viewport's edge would
+    // sit under the scrollbar by that much, so this reads the narrower box.
+    useClientLayoutEffect(() => {
+        const menuNode = menuRef.current;
+        if (!menu || menu.placed || !menuNode)
+            return;
+        const root = menuNode.ownerDocument.documentElement;
+        const { width, height } = menuNode.getBoundingClientRect();
+        const x = placeAlong(menu.point.x, width, root.clientWidth);
+        const y = placeAlong(menu.point.y, height, root.clientHeight);
+        setMenu({
+            ...menu,
+            placed: { left: x.start, top: y.start, right: x.flip, up: y.flip },
+        });
+    }, [menu]);
+    const isPlaced = Boolean(placed);
+    // What closes it while it's open, and focus back on closing. Nothing
+    // listens while it's closed.
     React.useEffect(() => {
-        if (key === noAnnouncementsYet.key)
+        const box = boxRef.current;
+        const menuNode = menuRef.current;
+        if (!doc || !box || !menuNode)
             return undefined;
-        const clearTimers = clearTimersRef.current;
-        const write = setTimeout(() => {
-            // Whether an item is on screen is decided here, once. An item that
-            // went before its announcement was due isn't announced, and one that
-            // goes after keeps its announcement for the rest of its lifetime, when
-            // the region holds the only copy of its text rather than a second one.
-            const onScreen = onScreenIdsRef.current;
-            setAnnouncements(current => current.key === key
-                ? {
-                    ...current,
-                    waiting: noAnnouncements$1,
-                    written: [
-                        ...current.written,
-                        ...current.waiting
-                            .filter(announcement => onScreen.has(announcement.id))
-                            .map(announcement => ({ ...announcement, batch: key })),
-                    ],
-                }
-                : current);
-            // eslint-disable-next-line @eslint-react/web-api-no-leaked-timeout -- it has to outlive this effect when a newer batch arrives, so the unmount effect below clears it
-            const clear = setTimeout(() => {
-                clearTimers.delete(clear);
-                setAnnouncements(current => {
-                    const written = current.written.filter(announcement => announcement.batch !== key);
-                    return written.length === current.written.length
-                        ? current
-                        : { ...current, written };
-                });
-            }, announcementLifetime);
-            clearTimers.add(clear);
-        }, announceDelay);
-        return () => clearTimeout(write);
-    }, [key]);
-    React.useEffect(() => {
-        const clearTimers = clearTimersRef.current;
+        const view = doc.defaultView;
+        // What had focus when it opened. This runs once per opening, so opening
+        // again at a new point while it's open keeps it.
+        const opener = openerRef.current;
+        const close = () => setMenu(null);
+        const closeOutside = (event) => {
+            if (!isEventInside(event, box))
+                close();
+        };
+        doc.addEventListener('pointerdown', closeOutside, true);
+        view.addEventListener('resize', close);
+        view.addEventListener('blur', close);
         return () => {
-            clearTimers.forEach(clearTimeout);
-            clearTimers.clear();
+            doc.removeEventListener('pointerdown', closeOutside, true);
+            view.removeEventListener('resize', close);
+            view.removeEventListener('blur', close);
+            // Back to what had focus while the menu still has it, or it dropped to
+            // <body> when the menu left. An item that put it somewhere else, such
+            // as a Modal or a rename field, keeps it there.
+            const now = getDeepestActiveElement(doc);
+            if (!now || now === doc.body || menuNode.contains(now))
+                opener?.focus();
         };
-    }, []);
-    return announcements.written;
-}
-/**
- * Reads an element out roughly the way a screen reader would: its text, with
- * an element's `aria-label`, or an image's `alt`, standing in for what's
- * inside it, a break between block-level elements, and parts that are
- * `aria-hidden`, `hidden` or inline-styled `display: none` left out. It isn't
- * the full accessible name computation, so `aria-labelledby`, CSS-generated
- * content, content hidden by a stylesheet and other ways of naming or hiding
- * content aren't followed.
- *
- * @function spokenText
- * @param element - The element to read.
- * @returns Its text, with runs of whitespace collapsed and the ends trimmed.
- */
-function spokenText(element) {
-    return readAloud(element).replace(/\s+/g, ' ').trim();
-}
-// Elements a browser displays as blocks by default, and `br`. A screen reader
-// pauses between them, so their text shouldn't run into the text beside them.
-// They're known by tag rather than by computed `display`, which would depend
-// on a stylesheet and on layout.
-const blockLevelTags = new Set([
-    'ADDRESS',
-    'ARTICLE',
-    'ASIDE',
-    'BLOCKQUOTE',
-    'BR',
-    'CAPTION',
-    'DD',
-    'DETAILS',
-    'DIALOG',
-    'DIV',
-    'DL',
-    'DT',
-    'FIELDSET',
-    'FIGCAPTION',
-    'FIGURE',
-    'FOOTER',
-    'FORM',
-    'H1',
-    'H2',
-    'H3',
-    'H4',
-    'H5',
-    'H6',
-    'HEADER',
-    'HGROUP',
-    'HR',
-    'LEGEND',
-    'LI',
-    'MAIN',
-    'MENU',
-    'NAV',
-    'OL',
-    'P',
-    'PRE',
-    'SEARCH',
-    'SECTION',
-    'SUMMARY',
-    'TABLE',
-    'TBODY',
-    'TD',
-    'TFOOT',
-    'TH',
-    'THEAD',
-    'TR',
-    'UL',
-]);
+    }, [doc]);
+    // Focus in, and closing on scroll, once it's placed. Placed, it's inside
+    // the viewport, so its first item has nothing to scroll into view, and
+    // `preventScroll` makes sure: a scroll the focus caused would close it as
+    // it opened. Opening again at a new point places it again, and leaves
+    // focus where it is in the menu.
+    React.useEffect(() => {
+        const box = boxRef.current;
+        const menuNode = menuRef.current;
+        if (!doc || !isPlaced || !box || !menuNode)
+            return undefined;
+        if (!menuNode.contains(getDeepestActiveElement(doc))) {
+            menuKeys.reset();
+            (enabledMenuItems(menuNode)[0] ?? menuNode).focus({
+                preventScroll: true,
+            });
+        }
+        const closeOutside = (event) => {
+            if (!isEventInside(event, box))
+                setMenu(null);
+        };
+        doc.addEventListener('scroll', closeOutside, true);
+        return () => doc.removeEventListener('scroll', closeOutside, true);
+    }, [doc, isPlaced, menuKeys]);
+    // Before paint, so what the caller does with it, such as highlighting the
+    // row, shows with the menu rather than a frame behind it.
+    useClientLayoutEffect(() => {
+        if (open === reportedRef.current)
+            return;
+        reportedRef.current = open;
+        onOpenChange?.(open);
+    });
+    React.useEffect(() => {
+        if (open && !named) {
+            warnOnce('ContextMenu:unnamed', '[bestax-bulma] <ContextMenu> opened a menu with no accessible ' +
+                'name. Pass aria-label or aria-labelledby.');
+        }
+    }, [open, named]);
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        // The menu has the keyboard while focus is in it. React brings its keys
+        // up the tree to wherever the ContextMenu sits, where a table that moves
+        // between rows on the arrow keys, or a Popover or a Modal waiting for
+        // Escape, would take them too.
+        event.stopPropagation();
+        if (event.key === 'Escape' || event.key === 'Tab') {
+            // Tab would go on from the end of <body>, past the rest of the page.
+            event.preventDefault();
+            setMenu(null);
+            return;
+        }
+        menuKeys.onKeyDown(event);
+    };
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (!closeOnClick)
+            return;
+        const item = event.target.closest(MENU_ITEM_SELECTOR);
+        if (item && isEnabledMenuItem(item))
+            setMenu(null);
+    };
+    const handleContextMenu = (event) => {
+        onContextMenu?.(event);
+        // No other menu over this one: not the browser's, and not a trigger's
+        // that React brings the event up to.
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    const own = trigger.props;
+    const triggerClass = usePrefixedClassNames('context-menu');
+    const clonedTrigger = React.cloneElement(trigger, {
+        className: classNames(own.className, !disabled && triggerClass) || undefined,
+        onContextMenu: chain(own.onContextMenu, handlers.onContextMenu),
+        onPointerDown: chain(own.onPointerDown, handlers.onPointerDown),
+        onPointerMove: chain(own.onPointerMove, handlers.onPointerMove),
+        onPointerUp: chain(own.onPointerUp, handlers.onPointerUp),
+        onPointerCancel: chain(own.onPointerCancel, handlers.onPointerCancel),
+        onTouchEnd: chain(own.onTouchEnd, handlers.onTouchEnd),
+    });
+    const boxClasses = usePrefixedClassNames('context-menu-content', 'dropdown', {
+        'is-active': true,
+        'is-up': placed?.up,
+        'is-right': placed?.right,
+    });
+    const menuClasses = classNames(usePrefixedClassNames('dropdown-menu'), bulmaHelperClasses, className);
+    const contentClasses = usePrefixedClassNames('dropdown-content');
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [clonedTrigger, menu && (jsxRuntime.jsx(Portal, { container: portalContainer || menu.doc.body, children: jsxRuntime.jsx("div", { ref: boxRef, className: boxClasses, style: {
+                        top: placed?.top ?? menu.point.y,
+                        left: placed?.left ?? menu.point.x,
+                    }, children: jsxRuntime.jsx("div", { ...rest, ref: menuRef, role: "menu", tabIndex: -1, className: menuClasses, onKeyDown: handleKeyDown, onClick: handleClick, onContextMenu: handleContextMenu, children: jsxRuntime.jsx("div", { className: contentClasses, children: children }) }) }) }))] }));
+};
 /**
- * Whether an element is left out of what a screen reader reads.
- *
- * @function isHidden
- * @param element - The element to check.
- * @returns True for `aria-hidden="true"`, the `hidden` attribute, and an
- *   inline `display: none`, on an HTML, SVG or any other element with an
- *   inline style.
+ * ContextMenu with Item and Divider sub-components, which are `Dropdown.Item`
+ * and `Dropdown.Divider`, so items written for a Dropdown work here
+ * unchanged.
  */
-const isHidden = (element) => element.getAttribute('aria-hidden') === 'true' ||
-    element.hasAttribute('hidden') ||
-    element.style?.display === 'none';
+const ContextMenu = withSubComponents(ContextMenuComponent, {
+    Item: DropdownItem,
+    Divider: DropdownDivider,
+}, 'ContextMenu');
+
 /**
- * The text `spokenText` reads for an element, before its whitespace is
- * tidied.
+ * Individual Step component for use inside Steps.
  *
- * @function readAloud
- * @param element - The element to read.
- * @returns Its text.
+ * @function
+ * @param {StepProps} props - Props for the Step component.
+ * @returns {JSX.Element} The rendered step segment.
  */
-function readAloud(element) {
-    if (isHidden(element))
-        return '';
-    const name = element.getAttribute('aria-label') ||
-        (element.tagName === 'IMG' ? element.getAttribute('alt') : null);
-    const text = name ||
-        Array.from(element.childNodes, child => {
-            if (child instanceof Element)
-                return readAloud(child);
-            return child.nodeType === Node.TEXT_NODE ? child.textContent : '';
-        }).join('');
-    // A name stands in for the element's content, and a block's content stands
-    // apart from what's around it, so both are padded to keep them from running
-    // into the neighboring text. An inline run, like `<span>Up</span>` then
-    // `<span>loaded</span>`, still reads as one word.
-    return name || blockLevelTags.has(element.tagName) ? ` ${text} ` : text;
-}
+const Step = ({ isActive = false, isCompleted = false, label, icon, clickable = false, onClick, stepNumber, completedIcon, className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const formatNumber = useScopedNumberFormat();
+    const stepClasses = classNames(usePrefixedClassNames('steps-segment', {
+        'is-active': isActive,
+        'is-completed': isCompleted,
+    }), bulmaHelperClasses, className);
+    const stepsLinkClass = usePrefixedClassNames('steps-link');
+    const stepsMarkerClass = usePrefixedClassNames('steps-marker');
+    const stepsContentClass = usePrefixedClassNames('steps-content');
+    const stepsTitleClass = usePrefixedClassNames('steps-title');
+    const resolvedCompletedIcon = completedIcon === undefined ? '\u2713' : completedIcon;
+    const markerContent = icon ||
+        (isCompleted && resolvedCompletedIcon
+            ? resolvedCompletedIcon
+            : stepNumber == null || !formatNumber
+                ? (stepNumber ?? null)
+                : formatNumber(stepNumber));
+    const title = label || children;
+    const current = isActive ? 'step' : undefined;
+    // The step stays a list item, and a real button inside it does the
+    // clicking, so the list keeps its items and the button brings Enter, Space
+    // and focus with it. A button holds only phrasing content, so its parts
+    // are spans.
+    if (clickable) {
+        return (jsxRuntime.jsx("li", { className: stepClasses, ...rest, children: jsxRuntime.jsxs("button", { type: "button", className: stepsLinkClass, onClick: () => onClick?.(), "aria-current": current, children: [jsxRuntime.jsx("span", { className: stepsMarkerClass, children: markerContent }), title && (jsxRuntime.jsx("span", { className: stepsContentClass, children: jsxRuntime.jsx("span", { className: stepsTitleClass, children: title }) }))] }) }));
+    }
+    return (jsxRuntime.jsx("li", { className: stepClasses, "aria-current": current, ...rest, children: jsxRuntime.jsxs("div", { className: stepsLinkClass, children: [jsxRuntime.jsx("span", { className: stepsMarkerClass, children: markerContent }), title && (jsxRuntime.jsx("div", { className: stepsContentClass, children: jsxRuntime.jsx("p", { className: stepsTitleClass, children: title }) }))] }) }));
+};
 /**
- * A visually hidden, polite `status` live region that a container announces
- * its items through. The container renders it from the moment it mounts,
- * whether or not it has anything to show, so the region is already in the
- * page when an announcement is written into it.
+ * The `Steps` component provides a multi-step progress indicator for wizard flows, checkout processes, or any multi-step workflow.
  *
- * The announcements are this component's own state, so writing and clearing
- * them re-renders the region and leaves the container's items alone. Each one
- * is its own keyed node, so a re-render that leaves the announcements alone
- * leaves the region's content alone too, and nothing is read out twice.
+ * @function
+ * @param {StepsProps} props - Props for the Steps component.
+ * @returns {JSX.Element} The rendered steps component.
  *
- * @function StatusRegion
- * @param props - The items to announce, and the text to announce for each.
- * @returns The region.
+ * @example
+ * // Basic steps with items
+ * <Steps
+ *   value={1}
+ *   items={[
+ *     { label: 'Account' },
+ *     { label: 'Profile' },
+ *     { label: 'Complete' },
+ *   ]}
+ * />
+ *
+ * @example
+ * // Clickable steps with navigation
+ * <Steps
+ *   value={currentStep}
+ *   onStepClick={(step) => setCurrentStep(step)}
+ *   hasNavigation
+ *   items={[
+ *     { label: 'Step 1', clickable: true },
+ *     { label: 'Step 2', clickable: true },
+ *     { label: 'Step 3', clickable: true },
+ *   ]}
+ * />
  */
-function StatusRegion({ items, describe, }) {
-    const announcements = useAnnouncements(items, describe);
-    // `role="status"` makes a region atomic unless it says otherwise, which
-    // reads the whole region on every change. Each announcement is its own
-    // node, and only additions are relevant by default, so with atomic off a
-    // screen reader reads just what was written, and removing one announcement
-    // doesn't read out the ones still there. A node is keyed by its batch as
-    // well as its item, since an item that comes back can be written again
-    // while what it said before is still there.
-    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.batch}:${announcement.id}`))) }));
-}
+const StepsComponent = ({ value = 0, items, size, color, hasMarker = true, animated = true, rounded = true, vertical = false, labelPosition = 'bottom', mobileMode, showStepNumbers = true, hasNavigation = false, prevLabel, nextLabel, onPrev, onNext, onStepClick, className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    // Generate classes for the wrapper div
+    const stepsClasses = usePrefixedClassNames('steps', {
+        [`is-${size}`]: size,
+        [`is-${color}`]: color,
+        'has-marker': hasMarker,
+        'is-animated': animated,
+        'is-rounded': rounded,
+        'is-vertical': vertical,
+        [`has-label-${labelPosition}`]: labelPosition && (labelPosition !== 'bottom' || vertical),
+        [`is-${mobileMode}`]: mobileMode,
+    });
+    const combinedClasses = classNames(stepsClasses, bulmaHelperClasses, className);
+    // Generate classes for the ul (list)
+    const listClasses = usePrefixedClassNames('steps-list', {
+        'is-vertical': vertical,
+    });
+    const stepsNavigationClass = usePrefixedClassNames('steps-navigation');
+    const prevButtonClass = usePrefixedClassNames('button');
+    const nextButtonClass = usePrefixedClassNames('button', {
+        'is-primary': true,
+    });
+    // Count total steps for navigation
+    const totalSteps = items ? items.length : React.Children.count(children);
+    // Render items if provided
+    const renderSteps = () => {
+        if (items && items.length > 0) {
+            return items.map((item, index) => (jsxRuntime.jsx(Step, { isActive: index === value, isCompleted: index < value, label: item.label, icon: item.icon, completedIcon: item.completedIcon, clickable: item.clickable, stepNumber: showStepNumbers ? index + 1 : undefined, onClick: item.clickable && onStepClick ? () => onStepClick(index) : undefined, className: item.className }, index)));
+        }
+        // If children are provided, clone them with active/completed states
+        if (children) {
+            return React.Children.map(children, (child, index) => {
+                if (React.isValidElement(child)) {
+                    return React.cloneElement(child, {
+                        isActive: index === value,
+                        isCompleted: index < value,
+                        stepNumber: showStepNumbers ? index + 1 : undefined,
+                        onClick: child.props.clickable && onStepClick
+                            ? () => onStepClick(index)
+                            : child.props.onClick,
+                    });
+                }
+                return child;
+            });
+        }
+        return null;
+    };
+    // role="list" restates the <ul>'s own role, for Safari: WebKit stops
+    // exposing a list as one once its markers are hidden, as they are here,
+    // unless the role is set explicitly.
+    return (jsxRuntime.jsxs("div", { className: combinedClasses, ...rest, children: [jsxRuntime.jsx("ul", { className: listClasses, role: "list", children: renderSteps() }), hasNavigation && (jsxRuntime.jsxs("div", { className: stepsNavigationClass, children: [jsxRuntime.jsx("button", { type: "button", className: prevButtonClass, disabled: value === 0, onClick: onPrev ?? (() => onStepClick?.(value - 1)), children: prevLabel ?? 'Previous' }), jsxRuntime.jsx("button", { type: "button", className: nextButtonClass, disabled: value === totalSteps - 1, onClick: onNext ?? (() => onStepClick?.(value + 1)), children: nextLabel ?? 'Next' })] }))] }));
+};
+// Attach Step as static property
+const Steps = withSubComponents(StepsComponent, { Step }, 'Steps');
 
 const validTimelineColors = [
     'primary',
@@ -9230,11 +9536,6 @@ const validTimelineTitleElements = ['h2', 'h3', 'h4', 'h5', 'h6', 'p'];
 const TimelineItemContext = React.createContext({
     titleAs: 'h2',
 });
-/** Whether a prop was given something to render. */
-const isGiven$2 = (node) => node !== undefined &&
-    node !== null &&
-    typeof node !== 'boolean' &&
-    node !== '';
 const isTimelineColor = (color) => !!color && validTimelineColors.includes(color);
 /**
  * One event: a marker on the rail, then its title, its time and anything else about it.
@@ -9264,7 +9565,7 @@ const TimelineItem = React.forwardRef(({ className, title, time, dateTime, icon,
         [`is-${color}`]: isTimelineColor(color),
     });
     const markerClass = usePrefixedClassNames('timeline-marker', {
-        'is-icon': isGiven$2(icon),
+        'is-icon': isGiven(icon),
     });
     const contentClass = usePrefixedClassNames('timeline-content');
     const titleClass = usePrefixedClassNames('timeline-title');
@@ -9276,8 +9577,8 @@ const TimelineItem = React.forwardRef(({ className, title, time, dateTime, icon,
     const words = label ? (jsxRuntime.jsx("span", { style: visuallyHidden, children: ` ${label}` })) : null;
     return (jsxRuntime.jsxs("li", { ref: ref, className: classNames(itemClass, bulmaHelperClasses, className), ...rest, ...(state && {
             'aria-current': state === 'active' ? 'step' : undefined,
-        }), children: [jsxRuntime.jsx("div", { className: markerClass, "aria-hidden": "true", children: isGiven$2(icon) &&
-                    (typeof icon === 'string' ? jsxRuntime.jsx(Icon, { name: icon }) : icon) }), jsxRuntime.jsxs("div", { className: contentClass, children: [isGiven$2(title) ? (jsxRuntime.jsxs(TitleTag, { className: titleClass, children: [title, words] })) : (words), isGiven$2(time) &&
+        }), children: [jsxRuntime.jsx("div", { className: markerClass, "aria-hidden": "true", children: isGiven(icon) &&
+                    (typeof icon === 'string' ? jsxRuntime.jsx(Icon, { name: icon }) : icon) }), jsxRuntime.jsxs("div", { className: contentClass, children: [isGiven(title) ? (jsxRuntime.jsxs(TitleTag, { className: titleClass, children: [title, words] })) : (words), isGiven(time) &&
                         (dateTime ? (jsxRuntime.jsx("time", { className: timeClass, dateTime: dateTime, children: time })) : (jsxRuntime.jsx("span", { className: timeClass, children: time }))), children] })] }));
 });
 TimelineItem.displayName = 'Timeline.Item';
@@ -9351,7 +9652,7 @@ const TimelineRoot = React.forwardRef(({ className, children, active, pending, a
     // Each child gets its state through context rather than a clone, so an
     // app's own component around a Timeline.Item still gets it. Fragments
     // and arrays are opened up first, so each item inside one counts.
-    return (jsxRuntime.jsxs("ol", { ref: ref, className: classNames(rootClass, bulmaHelperClasses, className), ...rest, role: "list", children: [flattenChildren(children).map((child, index) => (jsxRuntime.jsx(TimelineItemContext.Provider, { value: contextFor(stateAt(index)), children: child }, React.isValidElement(child) ? child.key : index))), isGiven$2(pending) && (jsxRuntime.jsx(TimelineItemContext.Provider, { value: contextFor('pending'), children: jsxRuntime.jsx(TimelineItem, { title: pending }) }))] }));
+    return (jsxRuntime.jsxs("ol", { ref: ref, className: classNames(rootClass, bulmaHelperClasses, className), ...rest, role: "list", children: [flattenChildren(children).map((child, index) => (jsxRuntime.jsx(TimelineItemContext.Provider, { value: contextFor(stateAt(index)), children: child }, React.isValidElement(child) ? child.key : index))), isGiven(pending) && (jsxRuntime.jsx(TimelineItemContext.Provider, { value: contextFor('pending'), children: jsxRuntime.jsx(TimelineItem, { title: pending }) }))] }));
 });
 const Timeline = withSubComponents(TimelineRoot, { Item: TimelineItem }, 'Timeline');
 
@@ -11870,11 +12171,6 @@ const TOP = { path: [], hidden: false };
 const BranchContext = React.createContext(TOP);
 /** The box's input lets the row's click toggle it, so a change on its own does nothing. */
 const ignoreChange$1 = () => { };
-/** Whether an `icon` was given something to render. */
-const isGiven$1 = (node) => node !== undefined &&
-    node !== null &&
-    typeof node !== 'boolean' &&
-    node !== '';
 /**
  * The `TreeView` component renders a tree of items you browse and pick from, the way a file explorer works: one tab stop, the arrow keys to move, and Right and Left to open and close.
  *
@@ -11993,7 +12289,7 @@ const TreeViewItem = React.forwardRef(function TreeViewItem({ value, label, icon
         ? null
         : isLoading
             ? 'loading'
-            : isGiven$1(loadError)
+            : isGiven(loadError)
                 ? 'error'
                 : null;
     const labelRef = React.useRef(null);
@@ -12102,7 +12398,7 @@ const TreeViewItem = React.forwardRef(function TreeViewItem({ value, label, icon
                             if (!(event.target instanceof HTMLInputElement)) {
                                 event.preventDefault();
                             }
-                        }, children: jsxRuntime.jsx(Checkbox, { tabIndex: -1, checked: checked === true, indeterminate: checked === 'mixed', disabled: disabled, onChange: ignoreChange$1 }) })), isGiven$1(icon) && (jsxRuntime.jsx("span", { className: iconClass, "aria-hidden": "true", children: typeof icon === 'string' ? jsxRuntime.jsx(Icon, { name: icon }) : icon })), jsxRuntime.jsx("span", { className: labelClass, id: labelId, ref: labelRef, children: label })] }), open && (hasItems || status) ? (jsxRuntime.jsxs("ul", { className: groupClass, role: "group", children: [items, status && (jsxRuntime.jsx(StatusRow, { kind: status, parent: value, level: branch.path.length + 2, message: loadError, onRetry: onRetry, labelRef: statusLabelRef }))] })) : (items)] }));
+                        }, children: jsxRuntime.jsx(Checkbox, { tabIndex: -1, checked: checked === true, indeterminate: checked === 'mixed', disabled: disabled, onChange: ignoreChange$1 }) })), isGiven(icon) && (jsxRuntime.jsx("span", { className: iconClass, "aria-hidden": "true", children: typeof icon === 'string' ? jsxRuntime.jsx(Icon, { name: icon }) : icon })), jsxRuntime.jsx("span", { className: labelClass, id: labelId, ref: labelRef, children: label })] }), open && (hasItems || status) ? (jsxRuntime.jsxs("ul", { className: groupClass, role: "group", children: [items, status && (jsxRuntime.jsx(StatusRow, { kind: status, parent: value, level: branch.path.length + 2, message: loadError, onRetry: onRetry, labelRef: statusLabelRef }))] })) : (items)] }));
 });
 TreeViewItem.displayName = 'TreeView.Item';
 /**
@@ -12157,7 +12453,7 @@ const TreeView = withSubComponents(TreeViewRoot, { Item: TreeViewItem }, 'TreeVi
 const EDGES = ['top', 'bottom', 'start', 'end'];
 // Layout can land a fraction of a pixel short of an edge, so anything closer
 // than this counts as there.
-const SLACK = 1;
+const SLACK$1 = 1;
 const sameMeasure = (a, b) => !!a &&
     a.overflowing === b.overflowing &&
     a.barInline === b.barInline &&
@@ -12238,8 +12534,8 @@ const ScrollArea = React.forwardRef(({ className, style, textColor, bgColor, hei
         const scrollsX = orientation !== 'vertical';
         const maxTop = el.scrollHeight - el.clientHeight;
         const maxLeft = el.scrollWidth - el.clientWidth;
-        const overflowY = scrollsY && maxTop > SLACK;
-        const overflowX = scrollsX && maxLeft > SLACK;
+        const overflowY = scrollsY && maxTop > SLACK$1;
+        const overflowX = scrollsX && maxLeft > SLACK$1;
         // Right to left, scrollLeft runs from 0 at the start to negative.
         const fromStart = layoutRef.current.rtl
             ? -el.scrollLeft
@@ -12247,10 +12543,10 @@ const ScrollArea = React.forwardRef(({ className, style, textColor, bgColor, hei
         const next = {
             overflowing: overflowY || overflowX,
             edges: {
-                top: overflowY && el.scrollTop > SLACK,
-                bottom: overflowY && maxTop - el.scrollTop > SLACK,
-                start: overflowX && fromStart > SLACK,
-                end: overflowX && maxLeft - fromStart > SLACK,
+                top: overflowY && el.scrollTop > SLACK$1,
+                bottom: overflowY && maxTop - el.scrollTop > SLACK$1,
+                start: overflowX && fromStart > SLACK$1,
+                end: overflowX && maxLeft - fromStart > SLACK$1,
             },
             barInline: layoutRef.current.barInline,
             barBlock: layoutRef.current.barBlock,
@@ -14778,50 +15074,403 @@ const DataTable = React.forwardRef(function DataTableRender({ columns, data, tab
         : {
             'aria-labelledby': ariaLabelledby || (hasCaption ? nameId : undefined),
         };
-    // Pagination names itself "pagination" unless given another name.
-    const pagerLabel = words.pagination || (textName ? `${textName} pages` : undefined);
-    const pagerName = pagerLabel ? { 'aria-label': pagerLabel } : {};
-    const toolbarContent = toolbar?.(table);
-    const hasToolbar = hasSearch || isShown(toolbarContent);
-    return (jsxRuntime.jsxs("div", { ref: ref, className: rootClass, ...rest, children: [hasToolbar && (jsxRuntime.jsxs("div", { className: toolbarClass, children: [hasSearch && (jsxRuntime.jsx(Input, { label: words.search, ...table.getSearchProps() })), isShown(toolbarContent) && (jsxRuntime.jsx("div", { className: actionsClass, children: toolbarContent }))] })), isResponsive ? (jsxRuntime.jsx(ScrollArea, { orientation: "horizontal", ...scrollName, children: tableElement })) : (tableElement), jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", style: visuallyHidden, children: said }), pageCount > 1 && (jsxRuntime.jsx(Pagination, { ...table.getPaginationProps(), ...pagerName }))] }));
-});
-DataTable.displayName = 'DataTable';
+    // Pagination names itself "pagination" unless given another name.
+    const pagerLabel = words.pagination || (textName ? `${textName} pages` : undefined);
+    const pagerName = pagerLabel ? { 'aria-label': pagerLabel } : {};
+    const toolbarContent = toolbar?.(table);
+    const hasToolbar = hasSearch || isShown(toolbarContent);
+    return (jsxRuntime.jsxs("div", { ref: ref, className: rootClass, ...rest, children: [hasToolbar && (jsxRuntime.jsxs("div", { className: toolbarClass, children: [hasSearch && (jsxRuntime.jsx(Input, { label: words.search, ...table.getSearchProps() })), isShown(toolbarContent) && (jsxRuntime.jsx("div", { className: actionsClass, children: toolbarContent }))] })), isResponsive ? (jsxRuntime.jsx(ScrollArea, { orientation: "horizontal", ...scrollName, children: tableElement })) : (tableElement), jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", style: visuallyHidden, children: said }), pageCount > 1 && (jsxRuntime.jsx(Pagination, { ...table.getPaginationProps(), ...pagerName }))] }));
+});
+DataTable.displayName = 'DataTable';
+
+/**
+ * The `Affix` component keeps its content fixed to a corner of the viewport while the page scrolls under it.
+ *
+ * It's a `<div>` with no role, so what's inside keeps its own. It sits
+ * `--bulma-affix-offset-vertical` and `--bulma-affix-offset-horizontal`
+ * from its corner's edges, plus the device's safe-area inset, and stacks at
+ * `--bulma-affix-z-index`, over the page's content and under its navbar,
+ * static or fixed, its menus, popovers, the Sidebar, the modals, Tooltip and
+ * Toast. It's as wide as its
+ * content and never wider than the viewport less its offsets. It doesn't
+ * scroll, so nothing inside it is clipped, and content that can be taller
+ * than the screen scrolls itself. Its place in the reading and Tab order is
+ * its place in the DOM, whatever corner it shows in.
+ *
+ * @function
+ * @param {AffixProps} props - Props for the Affix component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `<div>`.
+ * @returns The `<div>`, in place or in its portal.
+ *
+ * @example
+ * <Affix position="bottom-left">
+ *   <Button color="primary">Feedback</Button>
+ * </Affix>
+ */
+const Affix = React.forwardRef(({ position = 'bottom-right', portal = false, className, children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const affixClasses = usePrefixedClassNames('affix', {
+        [`is-${position}`]: true,
+    });
+    // In place on the server and while hydrating, then into the portal, as
+    // Modal does. The move remounts the `<div>`.
+    const { isPortaled, container } = usePortalProp(portal);
+    return (jsxRuntime.jsx(Portal, { disabled: !isPortaled, container: container, children: jsxRuntime.jsx("div", { ref: ref, className: classNames(affixClasses, bulmaHelperClasses, className), ...rest, children: children }) }));
+});
+Affix.displayName = 'Affix';
+
+/**
+ * How long the page has to stay still before a jump counts as over: long
+ * enough to span the gap between two frames of a smooth scroll.
+ */
+const SETTLE_MS = 100;
+/**
+ * A pixel of slack at the line, for a jump that lands a fraction of a pixel
+ * away from it.
+ */
+const SLACK = 1;
+/** The page's `scroll-padding-top` in pixels, or 0 for `auto`. */
+function scrollPaddingTop() {
+    const root = document.documentElement;
+    const value = getComputedStyle(root).scrollPaddingTop;
+    const number = parseFloat(value);
+    if (!Number.isFinite(number))
+        return 0;
+    // A percentage is of the page's scrollport: the viewport less a classic
+    // scrollbar.
+    return value.endsWith('%') ? (number * root.clientHeight) / 100 : number;
+}
+/**
+ * The height of the viewport the reader sees the page through, less a
+ * classic scrollbar: the larger of the root's `clientHeight` and the visual
+ * viewport's height. The visual viewport grows when a phone hides its
+ * toolbar, where the root keeps the height it had with the toolbar shown;
+ * under a pinch zoom it's the smaller, and the root's stands. Its `pageTop`
+ * isn't read, since Firefox can leave it behind `scrollY` for a frame after
+ * it puts back the scroll position on a reload.
+ */
+function viewportHeight() {
+    return Math.max(document.documentElement.clientHeight, window.visualViewport?.height ?? 0);
+}
+/** Whether the page is scrolled as far down as it goes. */
+const atEnd = () => window.scrollY > 0 &&
+    window.scrollY + viewportHeight() >=
+        document.documentElement.scrollHeight - 1;
+/** Whether the browser draws an element: `display: none` draws no box. */
+const isDrawn = (element) => element.getClientRects().length > 0;
+/** The id a URL fragment names, such as `#caf%C3%A9`. */
+function fragmentId(hash) {
+    const raw = hash.slice(1);
+    try {
+        return decodeURIComponent(raw);
+    }
+    catch {
+        return raw;
+    }
+}
+/**
+ * Whether the page was opened afresh, as by a link, rather than reloaded or
+ * reached by Back or Forward, where the browser puts it back where it was.
+ * Where the navigation isn't recorded (jsdom), it counts as opened afresh.
+ */
+function openedAfresh() {
+    const [entry] = performance.getEntriesByType?.('navigation') ?? [];
+    const type = entry?.type;
+    return type !== 'reload' && type !== 'back_forward';
+}
+/**
+ * The link a click was on, if it's a plain click that follows it in this
+ * page: the main button, no modifier key, and no `target` sending it
+ * elsewhere. The path is read rather than the target, so a link inside a
+ * shadow root counts.
+ */
+function followedLink(event) {
+    if (event.button !== 0 ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.altKey) {
+        return undefined;
+    }
+    const link = event
+        .composedPath()
+        .find((node) => node instanceof HTMLAnchorElement);
+    return link && (!link.target || link.target === '_self') ? link : undefined;
+}
+/**
+ * The `useScrollSpy` hook returns the id of the section being read: the last
+ * of `ids` whose top is at or above the offset line, or the last one once the
+ * page is scrolled to its end. After a jump to one of them, it's that one
+ * until the reader scrolls on. `null` above the first section, on the server
+ * and until the page hydrates.
+ *
+ * It checks once per frame while the page scrolls, and on resize. A jump is
+ * a plain click on a link to one of the ids (the main button, no modifier
+ * key, opening in this page), noted and never stopped, so the browser jumps
+ * as it always does; and the `#id` a page opened afresh opens at. Back,
+ * Forward and a reload aren't jumps. That `#id` is read once, when `ids`
+ * first has some: a section rendered after that isn't held, even if the
+ * page opened at it, and the reading rule marks where the page is. Once the
+ * page has been still for a
+ * moment, the section stays current only if it's where a jump puts it: its
+ * top at the line, give or take a shift of the layout smaller than its own
+ * height, or, at the end of the page, on screen below the line. Otherwise,
+ * as after a flick right after the click, the reading rule takes over. The
+ * next scroll after that lets it go, the browser's own included, so when
+ * content loading above it makes the browser scroll to keep the reader's
+ * place, the rule takes over too.
+ *
+ * A section that isn't drawn (`display: none`) is never current. A section
+ * that moves while nothing scrolls is seen at the next scroll or resize. It
+ * watches the document only: not a panel that scrolls inside it, and not
+ * sections inside a shadow root, which an `#id` link can't reach either.
+ * Whether a page was opened afresh is read from how the document loaded, so
+ * in an app that changes routes on the client, a route change can briefly
+ * mark the address bar's section until the page settles, when the reading
+ * rule takes over, and after a reload a route change to an `#id` holds
+ * nothing.
+ *
+ * @function
+ * @param {UseScrollSpyOptions} options - The ids to watch, the offset, and a change callback.
+ * @returns {string | null} The current section's id, or `null`.
+ *
+ * @example
+ * const current = useScrollSpy({ ids: ['profile', 'security', 'billing'] });
+ */
+function useScrollSpy({ ids, offset, onCurrentChange, }) {
+    const [active, setActive] = React.useState(null);
+    // What was last reported, kept across a re-subscribe so the same id isn't
+    // reported twice.
+    const reportedRef = React.useRef(null);
+    // The section a jump went to. It belongs to the hook rather than to one run
+    // of the effect, so new ids, a new offset or React's development double run
+    // don't lose it, and the `#id` the page opened at is read once, when the
+    // ids first include some.
+    const heldRef = React.useRef(null);
+    const openedRef = React.useRef(false);
+    const onCurrentChangeRef = useLatestRef(onCurrentChange);
+    // The ids as a value, so a new array with the same ids each render doesn't
+    // re-subscribe.
+    const key = JSON.stringify(ids);
+    const fixedOffset = typeof offset === 'number' && Number.isFinite(offset) ? offset : undefined;
+    React.useEffect(() => {
+        const watched = JSON.parse(key);
+        let line = fixedOffset ?? scrollPaddingTop();
+        let settled = true;
+        let settleTimer;
+        let frame = 0;
+        const report = (id) => {
+            if (id === reportedRef.current)
+                return;
+            reportedRef.current = id;
+            setActive(id);
+            onCurrentChangeRef.current?.(id);
+        };
+        /** The element for one of the ids, if it's on the page and drawn. */
+        const sectionOf = (id) => {
+            const element = watched.includes(id) ? document.getElementById(id) : null;
+            return element && isDrawn(element) ? element : null;
+        };
+        /**
+         * Whether a section is where a jump puts it: its top at the line, give or
+         * take a shift of the layout smaller than the section's own height, or,
+         * at the end of the page, as near as the page lets it come, on screen
+         * below the line.
+         */
+        const atJump = (id) => {
+            const element = sectionOf(id);
+            if (!element)
+                return false;
+            const { top, bottom, height } = element.getBoundingClientRect();
+            if (top <= line + height && bottom >= line)
+                return true;
+            return top > line && top < viewportHeight() && atEnd();
+        };
+        const check = () => {
+            if (heldRef.current !== null)
+                return report(heldRef.current);
+            const drawn = [];
+            for (const id of watched) {
+                const element = document.getElementById(id);
+                if (element && isDrawn(element))
+                    drawn.push([id, element]);
+            }
+            let current = null;
+            if (atEnd()) {
+                // A short last section can't reach the line, so the end of the page
+                // stands in for it.
+                if (drawn.length)
+                    current = drawn[drawn.length - 1][0];
+            }
+            else {
+                for (const [id, element] of drawn) {
+                    if (element.getBoundingClientRect().top <= line + SLACK)
+                        current = id;
+                }
+            }
+            report(current);
+        };
+        /** Runs the check in the next frame, once however many events ask. */
+        const schedule = () => {
+            if (frame)
+                return;
+            frame = requestAnimationFrame(() => {
+                frame = 0;
+                check();
+            });
+        };
+        /**
+         * Starts, or starts again, the wait for the page to be still, when a
+         * held section that isn't where a jump puts it is let go.
+         */
+        const waitToSettle = () => {
+            settled = false;
+            clearTimeout(settleTimer);
+            settleTimer = setTimeout(() => {
+                settled = true;
+                if (heldRef.current !== null && !atJump(heldRef.current)) {
+                    heldRef.current = null;
+                }
+                check();
+            }, SETTLE_MS);
+        };
+        /** Holds the section a jump goes to, if it's one of these on the page. */
+        const hold = (id) => {
+            if (!sectionOf(id))
+                return;
+            heldRef.current = id;
+            waitToSettle();
+        };
+        const onScroll = () => {
+            if (heldRef.current !== null) {
+                // Once the page has been still, the next scroll lets the jump go;
+                // until then, each scroll pushes the end of the jump back.
+                if (settled)
+                    heldRef.current = null;
+                else
+                    waitToSettle();
+            }
+            schedule();
+        };
+        const onResize = () => {
+            line = fixedOffset ?? scrollPaddingTop();
+            schedule();
+        };
+        const onClick = (event) => {
+            const link = followedLink(event);
+            if (link?.hash &&
+                link.href.split('#')[0] === window.location.href.split('#')[0]) {
+                hold(fragmentId(link.hash));
+                check();
+            }
+        };
+        if (!openedRef.current) {
+            // Ids built from content fetched after mount arrive later, so the read
+            // waits until there are some.
+            if (watched.length) {
+                openedRef.current = true;
+                if (openedAfresh())
+                    hold(fragmentId(window.location.hash));
+            }
+        }
+        else if (heldRef.current !== null) {
+            // A jump held across new ids carries on if its section still counts.
+            if (sectionOf(heldRef.current))
+                waitToSettle();
+            else
+                heldRef.current = null;
+        }
+        check();
+        window.addEventListener('scroll', onScroll, { passive: true });
+        window.addEventListener('resize', onResize);
+        document.addEventListener('click', onClick, {
+            capture: true,
+            passive: true,
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+            clearTimeout(settleTimer);
+            window.removeEventListener('scroll', onScroll);
+            window.removeEventListener('resize', onResize);
+            document.removeEventListener('click', onClick, { capture: true });
+        };
+    }, [key, fixedOffset, onCurrentChangeRef]);
+    return active;
+}
 
+/** Every id in the tree, in page order. */
+const idsOf = (items) => items.flatMap(item => [item.id, ...idsOf(item.children ?? [])]);
 /**
- * The `Affix` component keeps its content fixed to a corner of the viewport while the page scrolls under it.
+ * The entries as `MenuItem` links, each entry's own entries in a nested
+ * `MenuList`, and the current one marked.
+ */
+const entries = (items, active) => items.map(item => {
+    const current = item.id === active;
+    return (jsxRuntime.jsxs(MenuItem, { href: `#${encodeURIComponent(item.id)}`, active: current, "aria-current": current ? 'location' : undefined, children: [item.label, item.children?.length ? (jsxRuntime.jsx(MenuList, { children: entries(item.children, active) })) : null] }, item.id));
+});
+/**
+ * The `TableOfContents` component lists a long page's sections as links in Bulma's menu look, and marks the one being read.
  *
- * It's a `<div>` with no role, so what's inside keeps its own. It sits
- * `--bulma-affix-offset-vertical` and `--bulma-affix-offset-horizontal`
- * from its corner's edges, plus the device's safe-area inset, and stacks at
- * `--bulma-affix-z-index`, over the page's content and under its navbar,
- * static or fixed, its menus, popovers, the Sidebar, the modals, Tooltip and
- * Toast. It's as wide as its
- * content and never wider than the viewport less its offsets. It doesn't
- * scroll, so nothing inside it is clipped, and content that can be taller
- * than the screen scrolls itself. Its place in the reading and Tab order is
- * its place in the DOM, whatever corner it shows in.
+ * It's a `<nav>` named by its title, holding `MenuList` and `MenuItem` links
+ * to each `#id`, rendered in full on the server. `useScrollSpy` picks the
+ * current section, and its link alone gets `is-active` and
+ * `aria-current="location"`. Use the hook on its own to mark the section in
+ * view somewhere else, such as an app's nav `Menu`.
  *
  * @function
- * @param {AffixProps} props - Props for the Affix component.
- * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `<div>`.
- * @returns The `<div>`, in place or in its portal.
+ * @param {TableOfContentsProps} props - Props for the TableOfContents component.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<nav>`.
+ * @returns {JSX.Element} The rendered table of contents.
  *
  * @example
- * <Affix position="bottom-left">
- *   <Button color="primary">Feedback</Button>
- * </Affix>
+ * <TableOfContents
+ *   isSticky
+ *   items={[
+ *     { id: 'install', label: 'Install' },
+ *     { id: 'usage', label: 'Usage', children: [{ id: 'props', label: 'Props' }] },
+ *   ]}
+ * />
  */
-const Affix = React.forwardRef(({ position = 'bottom-right', portal = false, className, children, ...props }, ref) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const affixClasses = usePrefixedClassNames('affix', {
-        [`is-${position}`]: true,
+const TableOfContents = React.forwardRef(({ className, textColor, bgColor, items, onCurrentChange, offset, isSticky, labels, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
     });
-    // In place on the server and while hydrating, then into the portal, as
-    // Modal does. The move remounts the `<div>`.
-    const { isPortaled, container } = usePortalProp(portal);
-    return (jsxRuntime.jsx(Portal, { disabled: !isPortaled, container: container, children: jsxRuntime.jsx("div", { ref: ref, className: classNames(affixClasses, bulmaHelperClasses, className), ...rest, children: children }) }));
+    const titleId = React.useId();
+    const active = useScrollSpy({ ids: idsOf(items), offset, onCurrentChange });
+    const navRef = React.useRef(null);
+    const setRefs = React.useCallback((node) => {
+        navRef.current = node;
+        if (typeof ref === 'function')
+            return ref(node);
+        if (ref)
+            ref.current = node;
+    }, [ref]);
+    // A list taller than the room it has scrolls itself to keep the current
+    // link in view. Only the list moves: scrollIntoView would move the page
+    // too whenever the link is off screen.
+    React.useEffect(() => {
+        const nav = navRef.current;
+        const link = nav.querySelector('a[aria-current="location"]');
+        if (!link || nav.scrollHeight <= nav.clientHeight)
+            return;
+        const top = nav.getBoundingClientRect().top + nav.clientTop;
+        const bottom = top + nav.clientHeight;
+        const at = link.getBoundingClientRect();
+        if (at.top < top)
+            nav.scrollTop -= top - at.top;
+        else if (at.bottom > bottom)
+            nav.scrollTop += at.bottom - bottom;
+    }, [active]);
+    // Bulma's menu, which draws it, and its own class beside it.
+    const menuClass = usePrefixedClassNames('menu');
+    const rootClass = usePrefixedClassNames('table-of-contents', {
+        'is-sticky': !!isSticky,
+    });
+    return (jsxRuntime.jsxs("nav", { ref: setRefs, className: classNames(menuClass, rootClass, bulmaHelperClasses, className), "aria-labelledby": titleId, ...rest, children: [jsxRuntime.jsx(MenuLabel, { id: titleId, children: labels?.title || 'On this page' }), jsxRuntime.jsx(MenuList, { children: entries(items, active) })] }));
 });
-Affix.displayName = 'Affix';
+TableOfContents.displayName = 'TableOfContents';
 
 /**
  * The `Block` component renders a simple container with Bulma's `.block` class, adding vertical margin between sections of content.
@@ -14983,11 +15632,6 @@ const Delete = ({ className, textColor, color, bgColor, onClick, size, ariaLabel
 const validDescriptionListOrientations = ['vertical', 'horizontal'];
 const isOrientation = (orientation) => !!orientation &&
     validDescriptionListOrientations.includes(orientation);
-/** Whether a prop was given something to render. */
-const isGiven = (node) => node !== undefined &&
-    node !== null &&
-    typeof node !== 'boolean' &&
-    node !== '';
 /**
  * A label, the name of a fact: a `<dt>`, in the weaker text color.
  *
@@ -15934,6 +16578,225 @@ const Span = ({ className, textColor, bgColor, children, ...props }) => {
     return (jsxRuntime.jsx("span", { className: spanClasses || undefined, ...rest, children: children }));
 };
 
+// INTERNAL, deliberately not exported from src/index.ts: what a Stat and its
+// parts read from around them.
+const StatScopeContext = React.createContext({ row: false });
+
+/** How a change is written when no format is given: a signed percentage. */
+const DEFAULT_CHANGE_FORMAT = {
+    style: 'percent',
+    signDisplay: 'exceptZero',
+    maximumFractionDigits: 1,
+};
+/**
+ * What the figure is: a `<dt>`, small and in the weaker text color.
+ *
+ * @function
+ * @param {StatLabelProps} props - Props for Stat.Label.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<dt>`.
+ * @returns {JSX.Element} The rendered label.
+ *
+ * @example
+ * <Stat.Label>Revenue</Stat.Label>
+ */
+const StatLabel = React.forwardRef(({ className, textColor, bgColor, children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const labelClass = usePrefixedClassNames('stat-label');
+    return (jsxRuntime.jsx("dt", { ref: ref, className: classNames(labelClass, bulmaHelperClasses, className), ...rest, children: children }));
+});
+StatLabel.displayName = 'Stat.Label';
+/**
+ * The figure: a `<dd>`, large, in the Stat's color, with digits of one width so a figure that updates doesn't shift.
+ *
+ * @function
+ * @param {StatValueProps} props - Props for Stat.Value.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<dd>`.
+ * @returns {JSX.Element} The rendered figure.
+ *
+ * @example
+ * <Stat.Value>
+ *   <NumberFormatter value={182} format={{ style: 'unit', unit: 'millisecond' }} />
+ * </Stat.Value>
+ */
+const StatValue = React.forwardRef(({ className, textColor, bgColor, children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const valueClass = usePrefixedClassNames('stat-value');
+    return (jsxRuntime.jsx("dd", { ref: ref, className: classNames(valueClass, bulmaHelperClasses, className), ...rest, children: children }));
+});
+StatValue.displayName = 'Stat.Value';
+/**
+ * A note under the figure: a `<dd>`, small and in the weaker text color.
+ *
+ * @function
+ * @param {StatDescriptionProps} props - Props for Stat.Description.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<dd>`.
+ * @returns {JSX.Element} The rendered note.
+ *
+ * @example
+ * <Stat.Description>since last month</Stat.Description>
+ */
+const StatDescription = React.forwardRef(({ className, textColor, bgColor, children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const descriptionClass = usePrefixedClassNames('stat-description');
+    return (jsxRuntime.jsx("dd", { ref: ref, className: classNames(descriptionClass, bulmaHelperClasses, className), ...rest, children: children }));
+});
+StatDescription.displayName = 'Stat.Description';
+/**
+ * A change written with its sign, such as "+12%", after an arrow that repeats the direction: a `<dd>`, green when it's up and red when it's down unless `color` says otherwise.
+ *
+ * The sign is in the text, written by `Intl` for the locale, so a screen
+ * reader hears the direction; the arrow is hidden from assistive tech, and
+ * the color repeats the direction for sighted readers rather than carry it.
+ *
+ * @function
+ * @param {StatChangeProps} props - Props for Stat.Change.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<dd>`.
+ * @returns {JSX.Element} The rendered change.
+ *
+ * @example
+ * <Stat.Change value={-0.08} color="success" />
+ */
+const StatChange = React.forwardRef(({ className, value, format, locale, color, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const scope = React.useContext(StatScopeContext);
+    const ownLocale = locale || scope.locale;
+    const options = format
+        ? { ...format, signDisplay: format.signDisplay || 'exceptZero' }
+        : DEFAULT_CHANGE_FORMAT;
+    // A change that rounds to zero gets no arrow and no tone, which would
+    // contradict a figure of zero. `Intl` writes no sign with 'exceptZero'
+    // only when the value rounds to zero, by whatever rounding the options
+    // ask for, so the change written that way is zero's text exactly then.
+    const formatNumber = useNumberFormat(ownLocale);
+    const signed = { ...options, signDisplay: 'exceptZero' };
+    const direction = formatNumber(value, signed) === formatNumber(0, signed)
+        ? 0
+        : Math.sign(value);
+    const tone = color ||
+        (direction > 0 ? 'success' : direction < 0 ? 'danger' : undefined);
+    const changeClass = usePrefixedClassNames('stat-change', {
+        [`is-${tone}`]: !!tone,
+    });
+    return (jsxRuntime.jsxs("dd", { ref: ref, className: classNames(changeClass, bulmaHelperClasses, className), ...rest, children: [(direction > 0 || direction < 0) && (jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: direction > 0
+                        ? 'M8 13V3M3.5 7.5 8 3l4.5 4.5'
+                        : 'M8 3v10M3.5 8.5 8 13l4.5-4.5', fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })), jsxRuntime.jsx(NumberFormatter, { value: value, format: options, locale: ownLocale })] }));
+});
+StatChange.displayName = 'Stat.Change';
+/**
+ * The `Stat` component shows a figure with its name, and often a change and a note, such as a dashboard's revenue or an account's storage used.
+ *
+ * It's a label and its values in a description list: a `<dt>` for the
+ * label, and a `<dd>` each for the figure, the change and the note. On its
+ * own it renders its own `<dl>`; inside `Stats` it's a `<div>` in the row's.
+ * A number `value` is written by `NumberFormatter`, so it follows a
+ * `LocaleProvider`. A change is written with its sign ("+12%"), so the
+ * direction is in the text, beside a decorative arrow and a color.
+ *
+ * @function
+ * @param {StatProps} props - Props for the Stat component.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the root.
+ * @returns {JSX.Element} The rendered stat.
+ *
+ * @example
+ * <Stat
+ *   label="Revenue"
+ *   value={8456.4}
+ *   format={{ style: 'currency', currency: 'USD' }}
+ *   change={0.12}
+ *   description="since last month"
+ * />
+ */
+const StatRoot = React.forwardRef(({ className, label, value, format, locale, change, changeFormat, changeColor, description, size, loading, textColor, bgColor, children, ...props }, ref) => {
+    const scope = React.useContext(StatScopeContext);
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor || scope.textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const statClass = usePrefixedClassNames('stat', {
+        [`is-${size}`]: !!size,
+    });
+    // The parts given as children, by type, so the figure's `<dd>` and the
+    // warning below know what's there. A part rendered from inside another
+    // component isn't seen.
+    const parts = flattenChildren(children);
+    const hasPart = (type) => parts.some(part => React.isValidElement(part) && part.type === type);
+    const hasValuePart = hasPart(StatValue);
+    const labelled = isGiven(label) || hasPart(StatLabel);
+    // Without a label, the figure has no name and the values no term.
+    React.useEffect(() => {
+        if (!labelled) {
+            warnOnce('Stat:unlabelled', '[bestax-bulma] <Stat> has no label. Pass label, or a Stat.Label ' +
+                'child, so the figure has a name for assistive tech and its ' +
+                'values have a term in the list.');
+        }
+    }, [labelled]);
+    // Its parts take its locale and leave the row, so a Stat inside one of
+    // them, in a `<dd>`, renders a `<dl>` of its own.
+    const inner = React.useMemo(() => ({ row: false, locale }), [locale]);
+    const Root = scope.row ? 'div' : 'dl';
+    const figure = loading ? (jsxRuntime.jsx(Skeleton, {})) : typeof value === 'number' ? (jsxRuntime.jsx(NumberFormatter, { value: value, format: format, locale: locale })) : isGiven(value) ? (value) : null;
+    // A `Stat.Value` child is the figure. Without one, the figure's `<dd>`
+    // renders for a figure, or for a label, empty while the figure is
+    // missing, so the label keeps its definition.
+    const showsFigure = !hasValuePart && (figure !== null || labelled);
+    return (jsxRuntime.jsx(Root, { ref: ref, className: classNames(statClass, bulmaHelperClasses, className), ...rest, "aria-busy": loading || rest['aria-busy'], children: jsxRuntime.jsxs(StatScopeContext.Provider, { value: inner, children: [isGiven(label) && jsxRuntime.jsx(StatLabel, { children: label }), children, showsFigure && jsxRuntime.jsx(StatValue, { children: figure }), typeof change === 'number' && (jsxRuntime.jsx(StatChange, { value: change, format: changeFormat, color: changeColor })), isGiven(description) && (jsxRuntime.jsx(StatDescription, { children: description }))] }) }));
+});
+const Stat = withSubComponents(StatRoot, {
+    Label: StatLabel,
+    Value: StatValue,
+    Change: StatChange,
+    Description: StatDescription,
+}, 'Stat');
+
+/**
+ * The `Stats` component lays out a row of `Stat`s, such as the key figures at the top of a dashboard, as one description list on Bulma's smart grid.
+ *
+ * It's a `<dl>` with a `<div>` for each Stat, so a screen reader announces
+ * the row once, then each label with its values. The tiles fill the grid's
+ * columns, each at least `minCol` wide, and wrap without media queries;
+ * the `gap` helper prop sets the space between them. Name the row with
+ * `aria-labelledby` pointing at the heading above it. `Stat` is also
+ * `Stats.Stat`.
+ *
+ * @function
+ * @param {StatsProps} props - Props for the Stats component.
+ * @param {React.Ref<HTMLDListElement>} ref - Forwarded ref to the `<dl>`.
+ * @returns {JSX.Element} The rendered row.
+ *
+ * @example
+ * <Stats aria-labelledby="kpis" minCol={8} gap="4">
+ *   <Stat label="Revenue" value={8456.4} format={{ style: 'currency', currency: 'USD' }} />
+ *   <Stat label="New customers" value={1234} change={-0.019} />
+ * </Stats>
+ */
+const StatsRoot = React.forwardRef(({ className, minCol, textColor, bgColor, children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const statsClass = usePrefixedClassNames('stats grid', {
+        [`is-col-min-${minCol}`]: minCol !== undefined && minCol !== null,
+    });
+    const scope = React.useMemo(() => ({ row: true, textColor }), [textColor]);
+    return (jsxRuntime.jsx("dl", { ref: ref, className: classNames(statsClass, bulmaHelperClasses, className), ...rest, children: jsxRuntime.jsx(StatScopeContext.Provider, { value: scope, children: children }) }));
+});
+StatsRoot.displayName = 'Stats';
+const Stats = withSubComponents(StatsRoot, { Stat }, 'Stats');
+
 /**
  * The `Strong` component renders a styled `<strong>` element with Bulma helper class integration.
  *
@@ -19261,7 +20124,7 @@ const ComboboxItem = ({ value, disabled = false, checked = false, children, clas
             onPointerMove?.(event);
             if (!disabled && !highlighted)
                 engine.hover(value);
-        }, children: [checked && (jsxRuntime.jsx("span", { className: checkClass, "aria-hidden": "true", children: jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "1em", height: "1em", focusable: "false", children: jsxRuntime.jsx("polyline", { points: "3 8.5 6.5 12 13 4.5" }) }) })), children] }));
+        }, children: [checked && (jsxRuntime.jsx("span", { className: checkClass, "aria-hidden": "true", children: jsxRuntime.jsx(CheckIcon$1, {}) })), children] }));
 };
 ComboboxItem.displayName = 'ComboboxItem';
 /**
@@ -21876,6 +22739,167 @@ const TextAreaBase = React.forwardRef(({ color, size, isRounded, isStatic, isHov
 });
 TextAreaBase.displayName = 'TextAreaBase';
 
+/** An eye, drawn while the password is hidden. */
+const EyeIcon = () => (jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1.25em", height: "1.25em", "aria-hidden": "true", children: jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M1.5 8s2.5-4.5 6.5-4.5 6.5 4.5 6.5 4.5-2.5 4.5-6.5 4.5S1.5 8 1.5 8z" }), jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "2" })] }) }));
+/** The eye crossed out, drawn while the password shows. */
+const EyeOffIcon = () => (jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "1.25em", height: "1.25em", "aria-hidden": "true", children: jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M1.5 8s2.5-4.5 6.5-4.5 6.5 4.5 6.5 4.5-2.5 4.5-6.5 4.5S1.5 8 1.5 8z" }), jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "2" }), jsxRuntime.jsx("path", { d: "M2.5 2.5l11 11" })] }) }));
+/**
+ * Warns in development when the `text` toggle's name doesn't contain the
+ * word on it, which a voice control user says to press it.
+ */
+const checkLabelInName = (name, word) => {
+    if (name.toLocaleLowerCase().includes(word.toLocaleLowerCase()))
+        return;
+    warnOnce(`PasswordInput:label-in-name:${name}:${word}`, `[bestax-bulma] A PasswordInput with variant="text" is named ` +
+        `"${name}" while its button says "${word}". A voice control user ` +
+        `says the word they see, so the name has to contain it (WCAG 2.5.3, ` +
+        `Label in Name). Set labels so each name contains its word.`);
+};
+/**
+ * The raw PasswordInput: a password field with a button inside it that shows what was typed, without Field/Control wrapping.
+ *
+ * Use `PasswordInput` for the convenience wrapper.
+ *
+ * @function
+ * @param {PasswordInputBaseProps} props - Props for PasswordInputBase.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the `<input>`.
+ * @returns {JSX.Element} The input and its toggle, in a container.
+ */
+const PasswordInputBase = React.forwardRef((props, ref) => {
+    const { visible: visibleProp, defaultVisible = false, onVisibleChange, variant = 'icon', labels, autoComplete = 'current-password', spellCheck = false, autoCorrect = 'off', autoCapitalize = 'none', disabled: disabledProp, color, className, style, ...others } = props;
+    // Helper props, `className` and `style` go on the container, so a margin,
+    // a width or a display moves the field and its toggle together. `color`
+    // stays with the input, whose border it colors.
+    const { bulmaHelperClasses, rest } = useBulmaClasses(others);
+    const disabled = useFieldsetDisabled(disabledProp);
+    // The toggle gives way to the loading spinner of a Control this sits in,
+    // which takes its slot, and the field hides the password meanwhile, as
+    // there's no button to hide it with.
+    const controlLoading = useControlLoading();
+    const isText = variant === 'text';
+    const showPassword = labels?.showPassword || 'Show password';
+    const hidePassword = labels?.hidePassword || 'Hide password';
+    const show = labels?.show || 'Show';
+    const hide = labels?.hide || 'Hide';
+    if (isText) {
+        checkLabelInName(showPassword, show);
+        checkLabelInName(hidePassword, hide);
+    }
+    const isControlled = visibleProp !== undefined;
+    const [internalVisible, setInternalVisible] = React.useState(defaultVisible);
+    const visible = isControlled ? visibleProp : internalVisible;
+    // Whether the field shows now: as last reported, until `visible` changes.
+    // Two hide events before React renders, as from an effect, or a caller
+    // holding `visible` that keeps it `true`, report `false` once.
+    const shownRef = React.useRef(visible);
+    useClientLayoutEffect(() => {
+        shownRef.current = visible;
+    }, [visible]);
+    const setVisible = (next) => {
+        shownRef.current = next;
+        if (!isControlled)
+            setInternalVisible(next);
+        onVisibleChange?.(next);
+    };
+    const inputRef = React.useRef(null);
+    // A caller's callback ref may return a cleanup, as React 19 allows. It's
+    // held here and run on detach in place of a call with `null`, on React 18
+    // as well, since this ref is the one React calls.
+    const refCleanup = React.useRef(null);
+    const combinedRef = React.useCallback((node) => {
+        inputRef.current = node;
+        if (typeof ref === 'function') {
+            if (node === null) {
+                const cleanup = refCleanup.current;
+                refCleanup.current = null;
+                if (cleanup)
+                    cleanup();
+                else
+                    ref(null);
+                return;
+            }
+            const cleanup = ref(node);
+            refCleanup.current =
+                typeof cleanup === 'function' ? cleanup : null;
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    // A toggle with focus that leaves while the input stays, as it does when a
+    // Control starts loading, hands focus to the input rather than dropping it
+    // to the page. React lets go of the toggle before it takes it out of the
+    // page, so the toggle still has focus here; when the whole field unmounts,
+    // React has let go of the input first.
+    const toggleRef = React.useRef(null);
+    const setToggle = React.useCallback((node) => {
+        // React lets go only of a toggle it handed over, so there is one.
+        const leaving = toggleRef.current;
+        toggleRef.current = node;
+        if (node)
+            return;
+        const root = leaving.getRootNode();
+        if (root.activeElement === leaving)
+            inputRef.current?.focus();
+    }, []);
+    // Hides the password again: reports `false`, and sets its own state when it
+    // holds it. Inside `flushSync`, React renders that, a caller's own state
+    // update included, before the listener returns, so the browser reads the
+    // form, or saves the page's form state, from a password field. The
+    // component never sets the field's type itself, so a caller holding
+    // `visible` that keeps it `true` keeps the field shown. The one catch: an
+    // event fired while React is rendering or committing, which includes
+    // `useEffect` and `useLayoutEffect` callbacks (a `requestSubmit()` from
+    // an effect), can't flush there, so React warns in development and the
+    // hide lands after the form is read. Only the listeners below call it,
+    // while the input is mounted.
+    const hideRef = useLatestRef(() => {
+        if (!shownRef.current)
+            return;
+        // eslint-disable-next-line @eslint-react/dom-no-flush-sync -- the form is read, or the page saved, before React would render this on its own
+        reactDom.flushSync(() => setVisible(false));
+    });
+    // When the form it belongs to submits or resets: whichever form that is
+    // when it happens, so a form mounted after the field, or mounted again,
+    // counts. Neither event leaves a shadow root, so it listens on the field's
+    // own root, the document or the shadow root it renders in, and in the
+    // capture phase, before any listener on the form.
+    React.useEffect(() => {
+        const input = inputRef.current;
+        const root = input.getRootNode();
+        const onFormEvent = (event) => {
+            if (event.target === input.form)
+                hideRef.current();
+        };
+        root.addEventListener('submit', onFormEvent, true);
+        root.addEventListener('reset', onFormEvent, true);
+        return () => {
+            root.removeEventListener('submit', onFormEvent, true);
+            root.removeEventListener('reset', onFormEvent, true);
+        };
+    }, [hideRef]);
+    // When the page is left, so the history the browser keeps of the form
+    // holds a password field rather than text. It fires on the way into the
+    // back-forward cache too, so a page coming back from there is hidden.
+    React.useEffect(() => {
+        const onPageHide = () => hideRef.current();
+        window.addEventListener('pagehide', onPageHide);
+        return () => window.removeEventListener('pagehide', onPageHide);
+    }, [hideRef]);
+    const containerClass = usePrefixedClassNames('password-input-container', {
+        'is-text': isText,
+    });
+    const toggleClass = usePrefixedClassNames('password-input-toggle');
+    // The icon keeps one name and reports its state; the words change, so
+    // the name follows them and there's no state to report.
+    const toggleName = isText && visible ? hidePassword : showPassword;
+    const glyph = visible ? jsxRuntime.jsx(EyeOffIcon, {}) : jsxRuntime.jsx(EyeIcon, {});
+    return (jsxRuntime.jsxs("div", { className: classNames(containerClass, bulmaHelperClasses, className), style: style, children: [jsxRuntime.jsx(InputBase, { ref: combinedRef, autoComplete: autoComplete, spellCheck: spellCheck, autoCorrect: autoCorrect, autoCapitalize: autoCapitalize, disabled: disabled, color: color, ...rest, type: visible && !controlLoading ? 'text' : 'password' }), !controlLoading && (jsxRuntime.jsx("button", { ref: setToggle, type: "button", className: toggleClass, "aria-label": toggleName, "aria-pressed": isText ? undefined : visible, disabled: disabled, 
+                // A pointer press leaves focus, and the caret, in the input.
+                onMouseDown: event => event.preventDefault(), onClick: () => setVisible(!visible), children: isText ? (visible ? hide : show) : glyph }))] }));
+});
+PasswordInputBase.displayName = 'PasswordInputBase';
+
 /**
  * The `Select` component provides a Bulma-styled dropdown for selecting one or more options.
  *
@@ -22010,6 +23034,97 @@ fieldClassName, controlClassName,
 });
 TextArea.displayName = 'TextArea';
 
+/** The right-icon props, which the toggle's place leaves no room for. */
+const RIGHT_ICON_PROPS = [
+    'iconRight',
+    'iconRightName',
+    'iconRightSize',
+    'hasIconsRight',
+];
+/**
+ * The `PasswordInput` component is a password field with a button inside it that shows what was typed.
+ *
+ * By default the button is an eye named "Show password" that reports
+ * whether the password shows with `aria-pressed`; `variant="text"` makes it
+ * the words "Show" and "Hide". The field asks for
+ * `autocomplete="current-password"` and no spellcheck, and hides the
+ * password again when its form submits.
+ *
+ * @function
+ * @param {PasswordInputProps} props - Props for PasswordInput.
+ * @returns {JSX.Element} The composed field element.
+ *
+ * @example
+ * <PasswordInput label="Password" />
+ *
+ * @example
+ * <PasswordInput label="New password" autoComplete="new-password" variant="text" />
+ */
+const PasswordInput = React.forwardRef((props, ref) => {
+    const { 
+    // Field props
+    label, labelSize, labelProps, horizontal, 
+    // Control props
+    iconLeft, iconLeftName, iconLeftSize, hasIconsLeft, isLoading, isExpanded, controlSize, 
+    // Message props
+    message, messageColor, 
+    // Container class overrides
+    fieldClassName, controlClassName, 
+    // Not offered, and not passed on
+    iconRight: _iconRight, iconRightName: _iconRightName, iconRightSize: _iconRightSize, hasIconsRight: _hasIconsRight, 
+    // Everything else goes to the base
+    ...baseProps } = props;
+    const rightIcon = RIGHT_ICON_PROPS.filter(prop => props[prop]);
+    if (rightIcon.length > 0) {
+        const names = rightIcon.join(' ');
+        warnOnce(`PasswordInput:right-icon:${names}`, `[bestax-bulma] <PasswordInput ${names}> draws no right icon: the ` +
+            `visibility toggle sits at that edge. Leave ` +
+            `${rightIcon.length > 1 ? 'them' : 'it'} out, or use a left icon.`);
+    }
+    const insideField = useInsideField();
+    const insideControl = useInsideControl();
+    const ownField = rendersOwnField('PasswordInput', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
+    const ownControl = rendersOwnControl('PasswordInput', {
+        insideControl,
+        isLoading,
+        iconLeft,
+        iconLeftName,
+        iconLeftSize,
+        hasIconsLeft,
+        isExpanded,
+        controlSize,
+        controlClassName,
+    });
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: baseProps.id,
+        labelProps,
+        rendersLabel: ownField,
+    });
+    const helpClass = usePrefixedClassNames('help', {
+        [`is-${messageColor}`]: !!messageColor,
+    });
+    // The base hides its toggle while the Control it sits in is loading,
+    // whether that is the one rendered below or an enclosing one.
+    let content = (jsxRuntime.jsx(PasswordInputBase, { ref: ref, ...baseProps, id: controlId }));
+    if (ownControl) {
+        content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconLeftName: iconLeftName, iconLeftSize: iconLeftSize, hasIconsLeft: hasIconsLeft, 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] }));
+});
+PasswordInput.displayName = 'PasswordInput';
+
 function isSameDay(a, b) {
     return (a.getFullYear() === b.getFullYear() &&
         a.getMonth() === b.getMonth() &&
@@ -29318,6 +30433,7 @@ exports.Container = Container;
 exports.Content = Content;
 exports.ContextMenu = ContextMenu;
 exports.Control = Control;
+exports.CopyButton = CopyButton;
 exports.DataTable = DataTable;
 exports.DateInput = DateInput;
 exports.DateInputBase = DateInputBase;
@@ -29419,6 +30535,8 @@ exports.PanelIcon = PanelIcon;
 exports.PanelInputBlock = PanelInputBlock;
 exports.PanelTabs = PanelTabs;
 exports.Paragraph = Paragraph;
+exports.PasswordInput = PasswordInput;
+exports.PasswordInputBase = PasswordInputBase;
 exports.PinInput = PinInput;
 exports.Popover = Popover;
 exports.PopoverBody = PopoverBody;
@@ -29446,6 +30564,12 @@ exports.Span = Span;
 exports.Splitter = Splitter;
 exports.SplitterPane = SplitterPane;
 exports.Stack = Stack;
+exports.Stat = Stat;
+exports.StatChange = StatChange;
+exports.StatDescription = StatDescription;
+exports.StatLabel = StatLabel;
+exports.StatValue = StatValue;
+exports.Stats = Stats;
 exports.Step = Step;
 exports.Steps = Steps;
 exports.Strong = Strong;
@@ -29456,6 +30580,7 @@ exports.TabContentItem = TabContentItem;
 exports.TabItem = TabItem;
 exports.TabList = TabList;
 exports.Table = Table;
+exports.TableOfContents = TableOfContents;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
 exports.Tag = Tag;
@@ -29501,6 +30626,7 @@ exports.toast = toast;
 exports.useAppFrame = useAppFrame;
 exports.useBulmaClasses = useBulmaClasses;
 exports.useClassPrefix = useClassPrefix;
+exports.useClipboard = useClipboard;
 exports.useColorClasses = useColorClasses;
 exports.useColorStyles = useColorStyles;
 exports.useConfig = useConfig;
@@ -29516,6 +30642,7 @@ exports.useNumberFormat = useNumberFormat;
 exports.useOtherClasses = useOtherClasses;
 exports.usePrefixedClass = usePrefixedClass;
 exports.usePrefixedClassNames = usePrefixedClassNames;
+exports.useScrollSpy = useScrollSpy;
 exports.useSpacingClasses = useSpacingClasses;
 exports.useTypographyClasses = useTypographyClasses;
 exports.useVisibilityClasses = useVisibilityClasses;