@allxsmith/bestax-bulma 5.22.0 → 5.24.0

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 /* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { createContext, useContext, useMemo, forwardRef, useState, useRef, useEffect, useCallback, useSyncExternalStore, useId, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
+import React, { createContext, useContext, useMemo, forwardRef, useState, useRef, useEffect, useCallback, useSyncExternalStore, useId, useLayoutEffect, cloneElement, Children, isValidElement } from 'react';
 import { createPortal } from 'react-dom';
 
 const ConfigContext = createContext({});
@@ -2254,10 +2254,12 @@ function getActiveElementInTree(node) {
  * opener sits in. A closed shadow root cannot be entered, so focus inside one
  * reads as its host.
  *
+ * @param doc - The document to start from: the component's own, when it may
+ * render into one other than the page's (an iframe's). Defaults to `document`.
  * @returns The focused element, or `null` when the document has none.
  */
-function getDeepestActiveElement() {
-    let active = document.activeElement;
+function getDeepestActiveElement(doc = document) {
+    let active = doc.activeElement;
     while (active?.shadowRoot?.activeElement) {
         active = active.shadowRoot.activeElement;
     }
@@ -2794,6 +2796,32 @@ function useScrollLock(active) {
     }, [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 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
@@ -2817,31 +2845,49 @@ function resolvePortalContainer(container) {
     }
     return container;
 }
-
-// "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.
+ * Renders its children into another part of the page, `document.body` unless `container` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context.
  *
- * 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.
+ * 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.
  *
- * 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.
+ * 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. Point `container` at an element
+ * inside the themed area to keep it.
  *
- * @function useIsHydrated
- * @returns `true` once the hydrating render has completed, otherwise `false`.
+ * 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.
+ *
+ * @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>
+ *
+ * @example
+ * // Into a dedicated overlay root
+ * <Portal container="#overlays">
+ *   <CommandPalette />
+ * </Portal>
  */
-function useIsHydrated() {
-    return useSyncExternalStore(subscribeToNothing, getClientSnapshot, getServerSnapshot);
+function Portal({ children, container, disabled = false }) {
+    const hydrated = useIsHydrated();
+    if (disabled)
+        return jsx(Fragment, { children: children });
+    if (!hydrated)
+        return null;
+    return createPortal(children, resolvePortalContainer(container));
 }
 
 /**
@@ -2855,7 +2901,7 @@ const activeModalStack = [];
  * excluded because `focus()` on them is a no-op, which would leave focus
  * outside the modal.
  */
-const FOCUSABLE_SELECTOR$1 = 'button:not(:disabled), [href], input:not(:disabled):not([type="hidden"]), select:not(:disabled), textarea:not(:disabled), [tabindex]';
+const FOCUSABLE_SELECTOR = 'button:not(:disabled), [href], input:not(:disabled):not([type="hidden"]), select:not(:disabled), textarea:not(:disabled), [tabindex]';
 /**
  * The modal's tab stops, in document order. The selector alone is not the
  * tabbable set — `[href]` and `button` match regardless of `tabindex`, so an
@@ -2864,7 +2910,7 @@ const FOCUSABLE_SELECTOR$1 = 'button:not(:disabled), [href], input:not(:disabled
  * resolved value, so filtering on it drops every negative index (not just
  * `-1`) without a second selector to keep in sync.
  */
-const getTabbable = (node) => Array.from(node.querySelectorAll(FOCUSABLE_SELECTOR$1)).filter(el => el.tabIndex >= 0);
+const getTabbable = (node) => Array.from(node.querySelectorAll(FOCUSABLE_SELECTOR)).filter(el => el.tabIndex >= 0);
 /**
  * Modal.Background - Renders the modal background overlay.
  *
@@ -4754,160 +4800,1085 @@ const Tooltip = ({ label, content, position = 'top', color, size, active: always
 };
 
 /**
- * Individual Step component for use inside Steps.
- *
- * @function
- * @param {StepProps} props - Props for the Step component.
- * @returns {JSX.Element} The rendered step segment.
+ * Whether `el` is editable while its parent is not, which makes it an editing
+ * host: the one tab stop an editable region gets. `contenteditable="false"`
+ * turns editing off, and a missing or unknown value inherits the parent's.
  */
-const Step = ({ isActive = false, isCompleted = false, label, icon, clickable = false, onClick, stepNumber, completedIcon, className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    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 handleClick = () => {
-        if (clickable && onClick) {
-            onClick();
-        }
-    };
-    const handleKeyDown = (e) => {
-        if (clickable && onClick && (e.key === 'Enter' || e.key === ' ')) {
-            e.preventDefault();
-            onClick();
+function isEditingHost(el) {
+    const editable = (node) => {
+        const value = node.getAttribute('contenteditable')?.toLowerCase();
+        if (value === undefined)
+            return null;
+        if (value === '' || value === 'true' || value === 'plaintext-only') {
+            return true;
         }
+        return value === 'false' ? false : null;
     };
-    const resolvedCompletedIcon = completedIcon === undefined ? '\u2713' : completedIcon;
-    const markerContent = icon ||
-        (isCompleted && resolvedCompletedIcon
-            ? resolvedCompletedIcon
-            : (stepNumber ?? null));
-    return (jsx("li", { className: stepClasses, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: clickable ? 0 : undefined, role: clickable ? 'button' : undefined, "aria-current": isActive ? 'step' : undefined, ...rest, children: jsxs("div", { className: stepsLinkClass, children: [jsx("span", { className: stepsMarkerClass, children: markerContent }), (label || children) && (jsx("div", { className: stepsContentClass, children: jsx("p", { className: stepsTitleClass, children: label || children }) }))] }) }));
+    if (editable(el) !== true)
+        return false;
+    for (let node = el.parentElement; node; node = node.parentElement) {
+        const state = editable(node);
+        if (state !== null)
+            return !state;
+    }
+    return true;
+}
+/** Whether `el` is the summary of its `<details>`: the first one, not a stray. */
+const isDetailsSummary = (el) => el.parentElement?.localName === 'details' &&
+    Array.from(el.parentElement.children).find(child => child.localName === 'summary') === el;
+/**
+ * Whether the browser puts `el` in the tab order, before anything that hides
+ * or disables it. The `tabIndex` property can't answer this on its own: it
+ * can read `-1` for an editable region or an `<embed>` that Tab still visits,
+ * and `0` for a `<video>` without controls that it doesn't. So a valid
+ * `tabindex` attribute decides, and otherwise the element's kind does.
+ */
+function isTabbableKind(el) {
+    const tabindex = el.getAttribute('tabindex');
+    if (tabindex !== null && /^\s*[+-]?\d/.test(tabindex)) {
+        return el.tabIndex >= 0;
+    }
+    switch (el.localName) {
+        case 'a':
+        case 'area':
+            return el.hasAttribute('href');
+        case 'input':
+            return el.type !== 'hidden';
+        case 'button':
+        case 'select':
+        case 'textarea':
+        case 'iframe':
+        case 'embed':
+        case 'object':
+            return true;
+        case 'audio':
+        case 'video':
+            return el.hasAttribute('controls');
+        case 'summary':
+            return isDetailsSummary(el);
+        default:
+            return isEditingHost(el);
+    }
+}
+/**
+ * The node's parent in the flattened tree, the one the browser renders and
+ * tabs through: the slot it is assigned to, else its parent, else the host of
+ * the shadow root it tops, and nothing above the document. A closed shadow
+ * root hides its slots (`assignedSlot` reads `null` under one), so a child of
+ * its host goes straight to the host, whether a slot takes it or not.
+ */
+const flatParent = (node) => node.assignedSlot ??
+    node.parentElement ??
+    node.parentNode?.host ??
+    null;
+/**
+ * The element's children in the flattened tree, in the order they render: a
+ * host's shadow root content, a slot's assigned elements (or its fallback
+ * content when nothing is assigned), anything else's own children. A host
+ * whose shadow root is closed has no root to read, so its own children stand
+ * in, including any that no slot takes and that aren't rendered.
+ */
+function flatChildren(el) {
+    if (el.shadowRoot)
+        return Array.from(el.shadowRoot.children);
+    if (el.localName === 'slot') {
+        const assigned = el.assignedNodes();
+        if (assigned.length > 0) {
+            return assigned.filter((node) => node.nodeType === Node.ELEMENT_NODE);
+        }
+    }
+    return Array.from(el.children);
+}
+const isShown = (el) => !el.hasAttribute('inert') && getComputedStyle(el).display !== 'none';
+const isVisible = (el) => {
+    const { visibility } = getComputedStyle(el);
+    return visibility !== 'hidden' && visibility !== 'collapse';
 };
 /**
- * The `Steps` component provides a multi-step progress indicator for wizard flows, checkout processes, or any multi-step workflow.
- *
- * @function
- * @param {StepsProps} props - Props for the Steps component.
- * @returns {JSX.Element} The rendered steps component.
- *
- * @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 },
- *   ]}
- * />
+ * Whether nothing from `el` up to `top` hides it: `inert`, `display: none`
+ * (not inherited, so each element is checked) or a closed `<details>` it
+ * isn't the summary of. `top` itself isn't checked, and `null` walks to the
+ * top of the page.
  */
-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) => (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;
-            });
+function isShownUpTo(el, top) {
+    let below = null;
+    for (let node = el; node && node !== top; node = flatParent(node)) {
+        if (!isShown(node))
+            return false;
+        if (below &&
+            node.localName === 'details' &&
+            !node.hasAttribute('open') &&
+            !isDetailsSummary(below)) {
+            return false;
         }
+        below = node;
+    }
+    return true;
+}
+/**
+ * The images that use the image map `area` belongs to. An image names its
+ * map with `usemap="#…"`, matching the map's `name` or `id`.
+ */
+function imagesUsingMapOf(area) {
+    const map = area.closest('map');
+    if (!map)
+        return [];
+    const names = [map.getAttribute('name'), map.id].filter(name => name);
+    return Array.from(area.getRootNode().querySelectorAll('img[usemap]')).filter(img => {
+        const ref = img.getAttribute('usemap');
+        return ref.startsWith('#') && names.includes(ref.slice(1));
+    });
+}
+/**
+ * Whether an image map area is shown. An area has no box of its own: the
+ * HTML rendering rules give it `display: none`, though a browser may not
+ * report that. So it counts where an image using its map is shown, as long
+ * as nothing makes it inert.
+ */
+function isAreaShown(area, container) {
+    for (let node = area; node && node !== container; node = flatParent(node)) {
+        if (node.hasAttribute('inert'))
+            return false;
+    }
+    return imagesUsingMapOf(area).some(img => isShownUpTo(img, null) && isVisible(img));
+}
+/**
+ * Whether Tab can land on `el`, one of the kinds it visits. A disabled control
+ * (including one inside a disabled `<fieldset>`), an inert subtree and
+ * anything not rendered are skipped. `visibility` is inherited, so the
+ * element's own computed value covers its ancestors.
+ */
+function isRenderedAndEnabled(el, container) {
+    if (el.matches(':disabled'))
+        return false;
+    if (el.localName === 'area')
+        return isAreaShown(el, container);
+    return isShownUpTo(el, container) && isVisible(el);
+}
+/** A radio button with a name, which shares one tab stop with its group. */
+const isGroupedRadio = (el) => el.localName === 'input' &&
+    el.type === 'radio' &&
+    el.name !== '';
+/** Whether two radio buttons are in one group: same name, form owner and tree. */
+const sameGroup = (a, b) => isGroupedRadio(b) &&
+    b.name === a.name &&
+    b.form === a.form &&
+    b.getRootNode() === a.getRootNode();
+/**
+ * The checked button of `radio`'s group. The group isn't bounded by the trap,
+ * so this looks through the radio's whole tree.
+ */
+const checkedInGroup = (radio) => Array.from(radio.getRootNode().querySelectorAll('input:checked')).find(el => sameGroup(radio, el));
+/** The flattened-tree ancestors of `node` below the container, outermost first, then `node`. */
+function flatChain(node, container) {
+    const chain = [];
+    for (let n = node; n && n !== container; n = flatParent(n)) {
+        chain.unshift(n);
+    }
+    return chain;
+}
+/**
+ * Whether `node` is inside the container in the flattened tree: in it, in a
+ * shadow root it holds, or slotted into it. A child of a closed-root host
+ * counts as inside wherever the host is, as its slot can't be seen.
+ */
+function inside(container, node) {
+    for (let n = node; n; n = flatParent(n)) {
+        if (n === container)
+            return true;
+    }
+    return false;
+}
+/**
+ * `true` when Tab reaches `b` after `a`, which is their order in the
+ * flattened tree: a shadow host comes before its shadow root's content, and
+ * slotted content comes where its slot is. A closed root's slots can't be
+ * seen, so its host's children keep their place in the light DOM. Two
+ * flattened-tree siblings are always in one DOM tree, so their document
+ * position decides between them.
+ */
+function follows(container, a, b) {
+    const chainA = flatChain(a, container);
+    const chainB = flatChain(b, container);
+    for (let i = 0; i < Math.max(chainA.length, chainB.length); i++) {
+        const [x, y] = [chainA[i], chainB[i]];
+        if (x === y)
+            continue;
+        if (!x)
+            return true;
+        if (!y)
+            return false;
+        return Boolean(x.compareDocumentPosition(y) & Node.DOCUMENT_POSITION_FOLLOWING);
+    }
+    return false;
+}
+/**
+ * Every element of a tabbable kind under `el` in the flattened tree, depth
+ * first, which is the order Tab visits them. Under a host whose shadow root
+ * is closed, that takes in the host's own children instead, rendered or not.
+ */
+function collectCandidates(el, out = []) {
+    for (const child of flatChildren(el)) {
+        if (isTabbableKind(child))
+            out.push(child);
+        collectCandidates(child, out);
+    }
+    return out;
+}
+/**
+ * The first and last tab stops inside `container`, or `null` when there are
+ * none. Only the ends matter for wrapping, so the style checks run from each
+ * end until they find a stop rather than over every candidate.
+ *
+ * A radio group is one stop, the way the browser treats it: its checked
+ * button, or its first when none is checked. Counting every button would make
+ * the group's last one an end, and Tab from the checked one would leave. The
+ * group goes by name, form owner and tree, not by the trap, so a checked
+ * button outside the container that Tab can land on leaves the group no stop
+ * inside. One that Tab can't land on leaves the group as if none were checked.
+ */
+function findTabStops(container) {
+    const candidates = collectCandidates(container);
+    const checked = new Map();
+    const usable = (el) => {
+        let ok = checked.get(el);
+        if (ok === undefined) {
+            ok = isRenderedAndEnabled(el, container);
+            checked.set(el, ok);
+        }
+        return ok;
+    };
+    // Resolved once per group, filed under each of its buttons, since finding
+    // the checked one scans the radio's whole tree.
+    const groupStops = new Map();
+    const groupStop = (radio) => {
+        if (groupStops.has(radio))
+            return groupStops.get(radio);
+        const group = candidates.filter(el => sameGroup(radio, el));
+        const on = checkedInGroup(radio);
+        const stop = on && isTabbableKind(on) && usable(on)
+            ? group.find(el => el === on)
+            : group.find(usable);
+        for (const el of [radio, ...group])
+            groupStops.set(el, stop);
+        return stop;
+    };
+    const isStop = (el) => usable(el) && (!isGroupedRadio(el) || groupStop(el) === el);
+    const first = candidates.find(isStop);
+    if (!first)
         return null;
+    let last = first;
+    for (let i = candidates.length - 1; candidates[i] !== first; i--) {
+        if (isStop(candidates[i])) {
+            last = candidates[i];
+            break;
+        }
+    }
+    return {
+        first,
+        last,
+        stopFor: node => (isGroupedRadio(node) && groupStop(node)) || node,
     };
-    return (jsxs("div", { className: combinedClasses, ...rest, children: [jsx("ul", { className: listClasses, children: renderSteps() }), hasNavigation && (jsxs("div", { className: stepsNavigationClass, children: [jsx("button", { type: "button", className: prevButtonClass, disabled: value === 0, onClick: onPrev ?? (() => onStepClick?.(value - 1)), children: prevLabel ?? 'Previous' }), 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');
-
+}
 /**
- * The `Sidebar` component provides a slide-out navigation panel that appears from the left or right side of the screen.
- *
- * @function
- * @param {SidebarProps} props - Props for the Sidebar component.
- * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the sidebar element.
- * @returns {JSX.Element | null} The rendered sidebar component.
- *
- * @example
- * // Basic sidebar
- * const [isOpen, setIsOpen] = useState(false);
- * <Sidebar isOpen={isOpen} onClose={() => setIsOpen(false)}>
- *   <Menu>...</Menu>
- * </Sidebar>
+ * The first tab stop inside `container`, found the way the trap finds it, or
+ * `null` when there is none. For a component that moves focus into a panel
+ * without trapping it there. `src/index.ts` names its exports from this
+ * module, so this one stays internal.
+ */
+function firstTabStop(container) {
+    return findTabStops(container)?.first ?? null;
+}
+/**
+ * The element that has focus in the container's own document (an iframe's,
+ * when it renders into one), inside open shadow roots too. Focus inside a
+ * closed one reads as its host, which the comparisons above place like any
+ * other element. Browsers fall back to <body> when nothing has
+ * focus. jsdom, where consumers run their tests, reports nothing once focus
+ * was inside a shadow root that was removed, so this falls back for it.
+ */
+const focusedElement = (doc) => getDeepestActiveElement(doc) ?? doc.body;
+/**
+ * Keeps keyboard focus inside a container while it is active: focus moves in
+ * when the trap turns on, Tab and Shift+Tab wrap between the first and last
+ * tab stops, and focus goes back where it came from when the trap turns off.
+ *
+ * Tab stops are what the browser's Tab visits, in document order: links,
+ * form controls, frames, media with controls, a `<details>` summary, editable
+ * regions, anything with `tabIndex={0}`, and the content of open shadow
+ * roots. Hidden, disabled, inert and `tabIndex={-1}` elements are skipped,
+ * and a radio group counts once. Give the container `tabIndex={-1}` so it can
+ * hold focus itself when nothing inside can. The trap listens on the
+ * container, so a trap nested inside another handles Tab first and the outer
+ * one stands aside.
+ *
+ * The trap is about Tab. If a Tab it let through still takes focus out (a
+ * browser can leave out a stop the page has, such as links when its settings
+ * say to), it sends focus back to the other end. A pointer or a script moving
+ * focus out is left alone, because pulling focus back from a click is modal
+ * behaviour, and a modal also has to block the page behind it, which `Modal`
+ * does. Content the container renders through a portal lives elsewhere in
+ * the DOM, so it is outside the trap: render nested overlays inside the
+ * container, or give them a trap of their own.
+ *
+ * The container has to be in the DOM when the trap turns on. The trap waits
+ * for hydration, so a container that only appears once the page has
+ * hydrated, the way portaled content does, still has it attach in the commit
+ * where the container appears.
+ *
+ * @function useFocusTrap
+ * @param containerRef - Ref to the element focus stays inside.
+ * @param options - When the trap is on, and where focus starts and ends.
  *
  * @example
- * // Right-side sidebar with custom width
- * <Sidebar
- *   isOpen={isOpen}
- *   onClose={() => setIsOpen(false)}
- *   position="right"
- *   width="320px"
- * >
- *   <div>Panel content</div>
- * </Sidebar>
- */
-const SidebarComponent = forwardRef(({ isOpen, onClose, position = 'left', width = '260px', isFullwidth, fullWidth, overlay = true, overlayClose = true, escapeClose = true, canCancel = true, children, inline = false, className, style, ...props }, ref) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const sidebarRef = useRef(null);
-    // Cleanup returned by a consumer's callback ref on attach, held until detach.
-    const consumerCleanupRef = useRef(null);
-    const resolvedFullwidth = isFullwidth ?? fullWidth ?? false;
-    // Close handler
-    const handleClose = useCallback(() => {
-        if (canCancel && onClose) {
-            onClose();
+ * const panelRef = useRef<HTMLDivElement>(null);
+ * useFocusTrap(panelRef, { active: isOpen });
+ * return isOpen ? (
+ *   <div ref={panelRef} role="dialog" aria-label="Filters" tabIndex={-1}>
+ *     …
+ *   </div>
+ * ) : null;
+ */
+function useFocusTrap(containerRef, options = {}) {
+    const { active = true, initialFocusRef, restoreFocus = true } = options;
+    // Portaled content has no server-rendered counterpart, so a portaled
+    // container only exists from the commit after hydration.
+    const hydrated = useIsHydrated();
+    useEffect(() => {
+        if (!active || !hydrated)
+            return undefined;
+        const container = containerRef.current;
+        if (!container)
+            return undefined;
+        const doc = container.ownerDocument;
+        const opener = focusedElement(doc);
+        // `initialFocusRef` counts only when focusing it puts focus inside. Focus
+        // put outside would stay out, as Tab there never reaches the container's
+        // listener, and focusing something that can't take focus (a heading
+        // without `tabIndex`, a disabled control) leaves focus where it was.
+        const initial = initialFocusRef?.current;
+        const inTrap = initial && inside(container, initial) ? initial : null;
+        inTrap?.focus();
+        if (!inTrap || !inside(container, focusedElement(doc))) {
+            (findTabStops(container)?.first ?? container).focus();
+        }
+        // Where focus goes if a Tab the trap let the browser handle takes it out,
+        // held until that Tab has finished moving focus.
+        let wrapTo = null;
+        let wrapTimer;
+        const handleKeyDown = (e) => {
+            // A trap nested inside this one has already wrapped focus.
+            if (e.key !== 'Tab' || e.defaultPrevented)
+                return;
+            const stops = findTabStops(container);
+            if (!stops) {
+                e.preventDefault();
+                container.focus();
+                return;
+            }
+            const current = stops.stopFor(focusedElement(doc));
+            // Wrap whenever the browser has no stop left in that direction inside
+            // the container. Comparing positions rather than testing `=== first`
+            // also covers focus resting on the container or on an element outside
+            // the tab order, which the browser would otherwise walk straight out of.
+            if (e.shiftKey
+                ? !follows(container, stops.first, current)
+                : !follows(container, current, stops.last)) {
+                e.preventDefault();
+                (e.shiftKey ? stops.last : stops.first).focus();
+                return;
+            }
+            wrapTo = e.shiftKey ? stops.last : stops.first;
+            clearTimeout(wrapTimer);
+            wrapTimer = setTimeout(() => {
+                wrapTo = null;
+            });
+        };
+        // The browser moves focus as soon as the keydown is over, so focus that
+        // lands outside while `wrapTo` is set got there by that Tab.
+        const handleFocusIn = (e) => {
+            if (!wrapTo || inside(container, e.composedPath()[0]))
+                return;
+            const target = wrapTo;
+            wrapTo = null;
+            target.focus();
+        };
+        container.addEventListener('keydown', handleKeyDown);
+        doc.addEventListener('focusin', handleFocusIn, true);
+        return () => {
+            container.removeEventListener('keydown', handleKeyDown);
+            doc.removeEventListener('focusin', handleFocusIn, true);
+            clearTimeout(wrapTimer);
+            let target = restoreFocus ? opener : null;
+            // `null` is an object too, and a caller without types can pass it.
+            if (restoreFocus && typeof restoreFocus === 'object') {
+                // Read now rather than when the trap turned on: a trigger that
+                // re-mounted in between has a new node.
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                target = restoreFocus.current;
+            }
+            // Hand focus back only while the trap still holds it: inside the
+            // container, or dropped to <body> because the container left the page.
+            const now = focusedElement(doc);
+            if (target && (now === doc.body || inside(container, now))) {
+                target.focus();
+            }
+        };
+    }, [active, hydrated, containerRef, initialFocusRef, restoreFocus]);
+}
+
+// INTERNAL: deliberately not exported from src/index.ts.
+/**
+ * `useLayoutEffect` in the browser, `useEffect` on the server. A server
+ * render runs neither, and React 18 warns about a layout effect there, so the
+ * server is handed the plain one.
+ */
+const useClientLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect;
+
+// INTERNAL: deliberately not exported from src/index.ts.
+/**
+ * The corner that keeps a panel of this size in the viewport, preferring
+ * below the anchor and lined up with its left edge.
+ */
+function resolveAuto(view, rect, panelWidth, panelHeight, gap) {
+    const fitsBelow = rect.bottom + panelHeight + gap <= view.innerHeight;
+    const fitsRight = rect.left + panelWidth <= view.innerWidth;
+    if (fitsBelow)
+        return fitsRight ? 'bottom-left' : 'bottom-right';
+    return fitsRight ? 'top-left' : 'top-right';
+}
+const samePosition = (a, b) => a.position === b.position && a.top === b.top && a.left === b.left;
+/**
+ * Places a floating panel against its anchor: resolves `auto` to a corner
+ * and, for a panel fixed to the viewport, works out its coordinates. It
+ * measures again on resize and on any scroll of the anchor's window (an
+ * iframe's, when the anchor renders into one), so a fixed panel follows its
+ * anchor. A measurement that changes nothing doesn't render again.
+ *
+ * Measuring happens in a layout effect, so the panel is placed before it
+ * paints. It needs both elements on the page while `active` is on, and
+ * keeps the last placement when either is missing.
+ *
+ * @function useAnchoredPosition
+ * @param anchorRef - The element the panel opens from.
+ * @param panelRef - The floating panel.
+ * @param options - Whether to measure, the corner asked for, and how the panel is placed.
+ * @returns The corner the panel opens from, with coordinates when it is fixed.
+ */
+function useAnchoredPosition(anchorRef, panelRef, { active, position, fixed, offset = 4, styledGap }) {
+    const [resolved, setResolved] = useState({
+        position: position === 'auto' ? 'bottom-left' : position,
+    });
+    useClientLayoutEffect(() => {
+        if (!active)
+            return undefined;
+        const view = (anchorRef.current ?? panelRef.current)?.ownerDocument.defaultView ??
+            window;
+        const update = () => {
+            const anchor = anchorRef.current;
+            const panel = panelRef.current;
+            if (!anchor || !panel)
+                return;
+            const rect = anchor.getBoundingClientRect();
+            const { width, height } = panel.getBoundingClientRect();
+            const corner = position === 'auto'
+                ? resolveAuto(view, rect, width, height, offset + (styledGap?.(panel) ?? 0))
+                : position;
+            const next = fixed
+                ? {
+                    position: corner,
+                    top: corner.startsWith('bottom')
+                        ? rect.bottom + offset
+                        : rect.top - height - offset,
+                    left: corner.endsWith('left') ? rect.left : rect.right - width,
+                }
+                : { position: corner };
+            setResolved(prev => (samePosition(prev, next) ? prev : next));
+        };
+        update();
+        view.addEventListener('resize', update, { passive: true });
+        view.addEventListener('scroll', update, { passive: true, capture: true });
+        return () => {
+            view.removeEventListener('resize', update);
+            view.removeEventListener('scroll', update, { capture: true });
+        };
+    }, [active, anchorRef, panelRef, position, fixed, offset, styledGap]);
+    return resolved;
+}
+
+const validButtonColors = [...validColors, 'text', 'ghost'];
+/**
+ * The `Button` component provides a flexible and highly customizable button for your Bulma React UI.
+ *
+ * @function
+ * @param {ButtonProps} props - Props for the Button component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered button, anchor, or custom element.
+ * @see {@link https://bulma.io/documentation/elements/button/ | Bulma Button documentation}
+ */
+const Button = forwardRef(function Button(props, ref) {
+    const { color, size, isLight, isRounded, isLoading, isStatic, isFullwidth, isFullWidth, isOutlined, isInverted, isFocused, isActive, isHovered, isDisabled, className, children, textColor, bgColor, as: Component = 'button', href, onClick, target, rel, ...bulmaProps } = props;
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...bulmaProps,
+    });
+    // Generate Bulma classes with prefix
+    const bulmaClasses = usePrefixedClassNames('button', {
+        [`is-${color}`]: color &&
+            validButtonColors.includes(color),
+        [`is-${size}`]: size,
+        'is-outlined': isOutlined,
+        'is-light': isLight,
+        'is-loading': isLoading,
+        'is-static': isStatic,
+        'is-disabled': isDisabled,
+        'is-rounded': isRounded,
+        'is-hovered': isHovered,
+        'is-focused': isFocused,
+        'is-active': isActive,
+        'is-inverted': isInverted,
+        'is-fullwidth': isFullwidth ?? isFullWidth,
+    });
+    // Combine prefixed Bulma classes with unprefixed user className and prefixed helper classes
+    const buttonClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    if (Component !== 'button') {
+        // Strip the form-control attributes a link-like element cannot carry, so a
+        // JavaScript consumer or a spread object doesn't put them on the DOM. The
+        // types no longer allow them through; this is the runtime backstop.
+        //
+        // Only for INTRINSIC tags. A custom component (a router Link, ...) owns its
+        // prop contract, and `ComponentPropsWithoutRef<T>` promises the caller that
+        // its props reach it. Stripping names by their spelling alone broke that
+        // promise silently: `<Button as={Custom} name="x" />` type-checked while
+        // `Custom` never received the `name` it requires.
+        //
+        // `autoFocus` and `type` are deliberately NOT stripped: both are valid on
+        // targets this list was filtering them from. `autoFocus` is a global
+        // attribute (React decides per element whether to honour it, which is not
+        // ours to pre-empt), and `type` on an anchor is the MIME hint that
+        // `ButtonProps<'a'>` now types it as.
+        //
+        // The types already answer this for a TypeScript caller: `ButtonProps<T>`
+        // derives from `ComponentPropsWithoutRef<T>`, so only what the target
+        // accepts can be passed. What is left is a runtime backstop for JavaScript
+        // consumers and spread objects.
+        //
+        // Keep it to the two cases where a stray attribute does something. The
+        // submit-overrides belong to a submit control and never make sense on the
+        // anchor path. `disabled` is the one that is VISIBLE: Bulma styles
+        // `.button[disabled]` (background, border, shadow, opacity), so letting it
+        // through to a `<span>` greys the element out — main stripped it, and not
+        // stripping it would be a silent visual change on a types-only release.
+        //
+        // Everything else (`name`, `value`, `form`) is inert where it does not
+        // belong, and enumerating which tags own it is what kept going wrong:
+        // first all nine names on every non-button tag (so `<Button as="input"
+        // name="query" value="Search">` submitted nothing), then a form-control
+        // allowlist that still lost `formAction` on an input and `value` on an
+        // option. Those now ride on the types instead.
+        //
+        // A custom component is exempt entirely — it owns its prop contract, and
+        // `ComponentPropsWithoutRef<T>` promises the caller its props arrive.
+        //
+        // The elements that own `disabled`, per the HTML spec. A closed set, unlike
+        // the open-ended question of which tag owns which attribute.
+        const SUBMIT_OVERRIDES = [
+            'formAction',
+            'formEncType',
+            'formMethod',
+            'formNoValidate',
+            'formTarget',
+        ];
+        const OWNS_DISABLED = [
+            'button',
+            'fieldset',
+            'input',
+            'optgroup',
+            'option',
+            'select',
+            'textarea',
+        ];
+        // Two independent filters. They are not exclusive — an `<a>` owns neither
+        // the submit-overrides nor `disabled`, so it takes both — and deriving them
+        // from one destructure, or from one if/else, is what broke each of them in
+        // turn: first the overrides came off every intrinsic (an `as="input"` lost
+        // `formAction`), then scoping them to the anchor let `disabled` back onto
+        // it.
+        const forwardedRest = { ...rest };
+        if (typeof Component === 'string' && !isCustomElement(Component)) {
+            // Meaningless anywhere but a submit control, and an anchor is not one.
+            if (Component === 'a') {
+                for (const key of SUBMIT_OVERRIDES)
+                    delete forwardedRest[key];
+            }
+            // Visible via Bulma's `.button[disabled]`, so withheld from any element
+            // that does not own it.
+            if (!OWNS_DISABLED.includes(Component))
+                delete forwardedRest.disabled;
+        }
+        return (jsx(Component, { ref: ref, className: buttonClasses, href: href, target: target, rel: rel, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : undefined, onClick: isDisabled
+                ? // Guarded, because this handler is installed into whatever `as`
+                    // renders and a custom component's `onClick` need not be a DOM
+                    // event handler at all. One declaring `onClick: (v: string) =>
+                    // void` calls this with a string, and an unguarded
+                    // `e.preventDefault()` throws `is not a function`. Blocking the
+                    // real event is the point; a foreign payload is simply not ours
+                    // to act on.
+                    (e) => {
+                        if (typeof e?.preventDefault === 'function')
+                            e.preventDefault();
+                    }
+                : onClick, ...forwardedRest, children: children }));
+    }
+    return (jsx("button", { ref: ref, className: buttonClasses, disabled: isDisabled, onClick: onClick, ...rest, children: children }));
+});
+Button.displayName = 'Button';
+
+const PopoverContext = createContext(null);
+/** Intrinsic elements that are controls already, and keep their own role. */
+const NATIVE_CONTROLS = new Set([
+    'button',
+    'input',
+    'select',
+    'textarea',
+    'summary',
+]);
+/**
+ * Whether the browser answers this key on `el` itself, by clicking it or by
+ * using the key as input, so the trigger's click handler covers it.
+ */
+function handlesKeyItself(el, key) {
+    if (NATIVE_CONTROLS.has(el.localName))
+        return true;
+    return el.localName === 'a' && key === 'Enter' && el.hasAttribute('href');
+}
+/** The innermost dialog the event passed through, which is the one its Escape belongs to. */
+function nearestDialog(event) {
+    return (event.composedPath().find(node => {
+        const role = node.getAttribute?.('role');
+        return role === 'dialog' || role === 'alertdialog';
+    }) ?? null);
+}
+/**
+ * The gap the stylesheet puts between the panel and the trigger, in pixels.
+ * It is a margin on whichever side faces the trigger, and a negative one on
+ * a portaled panel above it, so the larger magnitude is the gap.
+ */
+function styledGap(panel) {
+    const { marginTop, marginBottom } = getComputedStyle(panel);
+    return Math.max(Math.abs(parseFloat(marginTop)) || 0, Math.abs(parseFloat(marginBottom)) || 0);
+}
+/**
+ * The `Popover` component opens a panel of interactive content, such as a filter form or a set of share options, anchored to the element that toggles it.
+ *
+ * The panel is a non-modal `role="dialog"`: focus moves into it on open
+ * and returns to the trigger on close, while the rest of the page stays
+ * reachable by pointer and assistive technology. For hover-only hints use
+ * `Tooltip`, and for a list of actions use `Dropdown`.
+ *
+ * @function
+ * @param {PopoverProps} props - Props for the Popover component.
+ * @returns {JSX.Element} The trigger in its wrapper, and the panel while open.
+ *
+ * @example
+ * <Popover trigger={<Button>Filters</Button>}>
+ *   <Popover.Header>Filter rows</Popover.Header>
+ *   <Popover.Body>…</Popover.Body>
+ *   <Popover.Footer>
+ *     <Popover.Close>Done</Popover.Close>
+ *   </Popover.Footer>
+ * </Popover>
+ */
+const PopoverComponent = ({ trigger, children, open: controlledOpen, defaultOpen = false, onOpenChange, position = 'bottom-left', appendToBody = false, trapFocus = true, closeOnClickOutside = true, closeOnEscape = true, ariaLabel, className, contentClassName, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const rootRef = useRef(null);
+    const panelRef = useRef(null);
+    // The last pointerdown React saw inside the panel. React's tree includes
+    // content the panel portals elsewhere, which the DOM path doesn't.
+    const insidePointerRef = useRef(null);
+    const baseId = useId();
+    const panelId = `${baseId}-panel`;
+    const titleId = `${baseId}-title`;
+    const isControlled = controlledOpen !== undefined;
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isOpen = controlledOpen ?? internalOpen;
+    const requestOpen = useCallback((next) => {
+        onOpenChange?.(next);
+        if (!isControlled)
+            setInternalOpen(next);
+    }, [isControlled, onOpenChange]);
+    const close = useCallback(() => requestOpen(false), [requestOpen]);
+    // A portaled panel has no server markup, so it only exists from the commit
+    // after hydration. Everything that measures or focuses it waits for that.
+    const hydrated = useIsHydrated();
+    const panelMounted = isOpen && (hydrated || !appendToBody);
+    const resolved = useAnchoredPosition(rootRef, panelRef, {
+        active: panelMounted,
+        position,
+        fixed: appendToBody,
+        // The gap comes from `--bulma-popover-offset` in the stylesheet, so the
+        // coordinates leave it out and `auto` reads it off the panel.
+        offset: 0,
+        styledGap,
+    });
+    // The trigger renders first inside the wrapper. Read when needed rather
+    // than held, so a trigger that remounted is still the one found.
+    const triggerNode = useCallback(() => {
+        const first = rootRef.current?.firstElementChild;
+        return first && first !== panelRef.current ? first : null;
+    }, []);
+    const restoreFocusRef = useMemo(() => ({
+        get current() {
+            return triggerNode();
+        },
+    }), [triggerNode]);
+    useFocusTrap(panelRef, {
+        active: panelMounted && trapFocus,
+        restoreFocus: restoreFocusRef,
+    });
+    // Without the trap, focus still arrives in the panel and goes back to the
+    // trigger, on the trap's terms: only while the panel still holds it.
+    useEffect(() => {
+        const panel = panelRef.current;
+        if (!panelMounted || trapFocus || !panel)
+            return undefined;
+        (firstTabStop(panel) ?? panel).focus();
+        return () => {
+            const doc = panel.ownerDocument;
+            const now = getDeepestActiveElement(doc);
+            if (!now || now === doc.body || panel.contains(now)) {
+                triggerNode()?.focus();
+            }
+        };
+    }, [panelMounted, trapFocus, triggerNode]);
+    useEffect(() => {
+        if (!panelMounted || !closeOnClickOutside)
+            return undefined;
+        const handlePointerDown = (e) => {
+            if (e === insidePointerRef.current || isEventInside(e, rootRef.current)) {
+                return;
+            }
+            close();
+        };
+        // The wrapper is on the page whenever the panel is. Its document, an
+        // iframe's when the tree renders into one, is where presses land.
+        const doc = rootRef.current.ownerDocument;
+        doc.addEventListener('pointerdown', handlePointerDown);
+        return () => doc.removeEventListener('pointerdown', handlePointerDown);
+    }, [panelMounted, closeOnClickOutside, close]);
+    const handlePanelKeyDown = (e) => {
+        if (e.key !== 'Escape' || !closeOnEscape || e.defaultPrevented)
+            return;
+        // React bubbles the key here from portaled content as well, so a dialog
+        // of its own on the way (a nested popover, a picker's calendar) owns it.
+        const owner = nearestDialog(e.nativeEvent);
+        if (owner && owner !== panelRef.current)
+            return;
+        e.preventDefault();
+        close();
+    };
+    const triggerProps = trigger.props;
+    const handleTriggerClick = (e) => {
+        triggerProps.onClick?.(e);
+        if (!e.defaultPrevented)
+            requestOpen(!isOpen);
+    };
+    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 = 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 (jsxs("div", { className: rootClasses, ...rest, ref: rootRef, children: [clonedTrigger, isOpen && (jsx(Portal, { disabled: !appendToBody, children: 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: e => {
+                        insidePointerRef.current = e.nativeEvent;
+                    }, 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] = useState(false);
+    const [titleCount, setTitleCount] = useState(0);
+    const registerTitle = useCallback(() => {
+        setTitleCount(n => n + 1);
+        return () => setTitleCount(n => n - 1);
+    }, []);
+    useClientLayoutEffect(() => {
+        setTitlesCounted(true);
+    }, []);
+    const named = Boolean(ariaLabel) || titleCount > 0;
+    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 = useMemo(() => ({ titleId, registerTitle, close }), [titleId, registerTitle, close]);
+    return (jsx(PopoverContext.Provider, { value: context, children: 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 = 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 (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 (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 (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 = useContext(PopoverContext);
+    return (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');
+
+/**
+ * Individual Step component for use inside Steps.
+ *
+ * @function
+ * @param {StepProps} props - Props for the Step component.
+ * @returns {JSX.Element} The rendered step segment.
+ */
+const Step = ({ isActive = false, isCompleted = false, label, icon, clickable = false, onClick, stepNumber, completedIcon, className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    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 handleClick = () => {
+        if (clickable && onClick) {
+            onClick();
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (clickable && onClick && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            onClick();
+        }
+    };
+    const resolvedCompletedIcon = completedIcon === undefined ? '\u2713' : completedIcon;
+    const markerContent = icon ||
+        (isCompleted && resolvedCompletedIcon
+            ? resolvedCompletedIcon
+            : (stepNumber ?? null));
+    return (jsx("li", { className: stepClasses, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: clickable ? 0 : undefined, role: clickable ? 'button' : undefined, "aria-current": isActive ? 'step' : undefined, ...rest, children: jsxs("div", { className: stepsLinkClass, children: [jsx("span", { className: stepsMarkerClass, children: markerContent }), (label || children) && (jsx("div", { className: stepsContentClass, children: jsx("p", { className: stepsTitleClass, children: label || children }) }))] }) }));
+};
+/**
+ * The `Steps` component provides a multi-step progress indicator for wizard flows, checkout processes, or any multi-step workflow.
+ *
+ * @function
+ * @param {StepsProps} props - Props for the Steps component.
+ * @returns {JSX.Element} The rendered steps component.
+ *
+ * @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 },
+ *   ]}
+ * />
+ */
+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) => (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;
+    };
+    return (jsxs("div", { className: combinedClasses, ...rest, children: [jsx("ul", { className: listClasses, children: renderSteps() }), hasNavigation && (jsxs("div", { className: stepsNavigationClass, children: [jsx("button", { type: "button", className: prevButtonClass, disabled: value === 0, onClick: onPrev ?? (() => onStepClick?.(value - 1)), children: prevLabel ?? 'Previous' }), 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');
+
+/**
+ * The `Sidebar` component provides a slide-out navigation panel that appears from the left or right side of the screen.
+ *
+ * @function
+ * @param {SidebarProps} props - Props for the Sidebar component.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the sidebar element.
+ * @returns {JSX.Element | null} The rendered sidebar component.
+ *
+ * @example
+ * // Basic sidebar
+ * const [isOpen, setIsOpen] = useState(false);
+ * <Sidebar isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <Menu>...</Menu>
+ * </Sidebar>
+ *
+ * @example
+ * // Right-side sidebar with custom width
+ * <Sidebar
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   position="right"
+ *   width="320px"
+ * >
+ *   <div>Panel content</div>
+ * </Sidebar>
+ */
+const SidebarComponent = forwardRef(({ isOpen, onClose, position = 'left', width = '260px', isFullwidth, fullWidth, overlay = true, overlayClose = true, escapeClose = true, canCancel = true, children, inline = false, className, style, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const sidebarRef = useRef(null);
+    // Cleanup returned by a consumer's callback ref on attach, held until detach.
+    const consumerCleanupRef = useRef(null);
+    const resolvedFullwidth = isFullwidth ?? fullWidth ?? false;
+    // Close handler
+    const handleClose = useCallback(() => {
+        if (canCancel && onClose) {
+            onClose();
         }
     }, [canCancel, onClose]);
     // Handle overlay click
@@ -5577,198 +6548,69 @@ const notifyDialogListeners = () => {
 /**
  * Programmatic dialog API for showing dialogs from anywhere.
  */
-const dialog = {
-    /**
-     * Show an alert dialog. Returns a promise that resolves when closed.
-     */
-    alert: (options) => {
-        return new Promise(resolve => {
-            const opts = typeof options === 'string' ? { message: options } : options;
-            currentDialog = {
-                type: 'alert',
-                options: opts,
-                resolve: () => resolve(),
-            };
-            notifyDialogListeners();
-        });
-    },
-    /**
-     * Show a confirm dialog. Returns a promise that resolves to true/false.
-     */
-    confirm: (options) => {
-        return new Promise(resolve => {
-            const opts = typeof options === 'string' ? { message: options } : options;
-            currentDialog = {
-                type: 'confirm',
-                options: opts,
-                resolve: value => resolve(Boolean(value)),
-            };
-            notifyDialogListeners();
-        });
-    },
-    /**
-     * Close the current dialog.
-     */
-    close: (value) => {
-        if (currentDialog) {
-            currentDialog.resolve(value);
-            currentDialog = null;
-            notifyDialogListeners();
-        }
-    },
-    /**
-     * Subscribe to dialog changes.
-     */
-    subscribe: (listener) => {
-        dialogListeners.add(listener);
-        return () => dialogListeners.delete(listener);
-    },
-};
-/**
- * DialogContainer component to render programmatic dialogs.
- * Place this once at the root of your app.
- *
- * @function
- * @returns {JSX.Element | null} The rendered dialog, or null if none is active.
- */
-const DialogContainer = () => {
-    // Starts from the dialog already open instead of none, then follows changes.
-    const current = useSyncExternalStore(dialog.subscribe, getCurrentDialog, getServerDialog);
-    if (!current) {
-        return null;
-    }
-    const { type, options } = current;
-    return (jsx(Dialog, { isOpen: true, title: options.title, message: options.message, type: options.type, confirmText: options.confirmText, cancelText: options.cancelText, icon: options.icon, showCancel: type === 'confirm', focusCancel: options.focusCancel, onConfirm: () => dialog.close(type === 'confirm' ? true : undefined), onCancel: () => dialog.close(type === 'confirm' ? false : undefined) }));
-};
-
-const validButtonColors = [...validColors, 'text', 'ghost'];
-/**
- * The `Button` component provides a flexible and highly customizable button for your Bulma React UI.
- *
- * @function
- * @param {ButtonProps} props - Props for the Button component.
- * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
- * @returns {JSX.Element} The rendered button, anchor, or custom element.
- * @see {@link https://bulma.io/documentation/elements/button/ | Bulma Button documentation}
- */
-const Button = forwardRef(function Button(props, ref) {
-    const { color, size, isLight, isRounded, isLoading, isStatic, isFullwidth, isFullWidth, isOutlined, isInverted, isFocused, isActive, isHovered, isDisabled, className, children, textColor, bgColor, as: Component = 'button', href, onClick, target, rel, ...bulmaProps } = props;
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...bulmaProps,
-    });
-    // Generate Bulma classes with prefix
-    const bulmaClasses = usePrefixedClassNames('button', {
-        [`is-${color}`]: color &&
-            validButtonColors.includes(color),
-        [`is-${size}`]: size,
-        'is-outlined': isOutlined,
-        'is-light': isLight,
-        'is-loading': isLoading,
-        'is-static': isStatic,
-        'is-disabled': isDisabled,
-        'is-rounded': isRounded,
-        'is-hovered': isHovered,
-        'is-focused': isFocused,
-        'is-active': isActive,
-        'is-inverted': isInverted,
-        'is-fullwidth': isFullwidth ?? isFullWidth,
-    });
-    // Combine prefixed Bulma classes with unprefixed user className and prefixed helper classes
-    const buttonClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    if (Component !== 'button') {
-        // Strip the form-control attributes a link-like element cannot carry, so a
-        // JavaScript consumer or a spread object doesn't put them on the DOM. The
-        // types no longer allow them through; this is the runtime backstop.
-        //
-        // Only for INTRINSIC tags. A custom component (a router Link, ...) owns its
-        // prop contract, and `ComponentPropsWithoutRef<T>` promises the caller that
-        // its props reach it. Stripping names by their spelling alone broke that
-        // promise silently: `<Button as={Custom} name="x" />` type-checked while
-        // `Custom` never received the `name` it requires.
-        //
-        // `autoFocus` and `type` are deliberately NOT stripped: both are valid on
-        // targets this list was filtering them from. `autoFocus` is a global
-        // attribute (React decides per element whether to honour it, which is not
-        // ours to pre-empt), and `type` on an anchor is the MIME hint that
-        // `ButtonProps<'a'>` now types it as.
-        //
-        // The types already answer this for a TypeScript caller: `ButtonProps<T>`
-        // derives from `ComponentPropsWithoutRef<T>`, so only what the target
-        // accepts can be passed. What is left is a runtime backstop for JavaScript
-        // consumers and spread objects.
-        //
-        // Keep it to the two cases where a stray attribute does something. The
-        // submit-overrides belong to a submit control and never make sense on the
-        // anchor path. `disabled` is the one that is VISIBLE: Bulma styles
-        // `.button[disabled]` (background, border, shadow, opacity), so letting it
-        // through to a `<span>` greys the element out — main stripped it, and not
-        // stripping it would be a silent visual change on a types-only release.
-        //
-        // Everything else (`name`, `value`, `form`) is inert where it does not
-        // belong, and enumerating which tags own it is what kept going wrong:
-        // first all nine names on every non-button tag (so `<Button as="input"
-        // name="query" value="Search">` submitted nothing), then a form-control
-        // allowlist that still lost `formAction` on an input and `value` on an
-        // option. Those now ride on the types instead.
-        //
-        // A custom component is exempt entirely — it owns its prop contract, and
-        // `ComponentPropsWithoutRef<T>` promises the caller its props arrive.
-        //
-        // The elements that own `disabled`, per the HTML spec. A closed set, unlike
-        // the open-ended question of which tag owns which attribute.
-        const SUBMIT_OVERRIDES = [
-            'formAction',
-            'formEncType',
-            'formMethod',
-            'formNoValidate',
-            'formTarget',
-        ];
-        const OWNS_DISABLED = [
-            'button',
-            'fieldset',
-            'input',
-            'optgroup',
-            'option',
-            'select',
-            'textarea',
-        ];
-        // Two independent filters. They are not exclusive — an `<a>` owns neither
-        // the submit-overrides nor `disabled`, so it takes both — and deriving them
-        // from one destructure, or from one if/else, is what broke each of them in
-        // turn: first the overrides came off every intrinsic (an `as="input"` lost
-        // `formAction`), then scoping them to the anchor let `disabled` back onto
-        // it.
-        const forwardedRest = { ...rest };
-        if (typeof Component === 'string' && !isCustomElement(Component)) {
-            // Meaningless anywhere but a submit control, and an anchor is not one.
-            if (Component === 'a') {
-                for (const key of SUBMIT_OVERRIDES)
-                    delete forwardedRest[key];
-            }
-            // Visible via Bulma's `.button[disabled]`, so withheld from any element
-            // that does not own it.
-            if (!OWNS_DISABLED.includes(Component))
-                delete forwardedRest.disabled;
+const dialog = {
+    /**
+     * Show an alert dialog. Returns a promise that resolves when closed.
+     */
+    alert: (options) => {
+        return new Promise(resolve => {
+            const opts = typeof options === 'string' ? { message: options } : options;
+            currentDialog = {
+                type: 'alert',
+                options: opts,
+                resolve: () => resolve(),
+            };
+            notifyDialogListeners();
+        });
+    },
+    /**
+     * Show a confirm dialog. Returns a promise that resolves to true/false.
+     */
+    confirm: (options) => {
+        return new Promise(resolve => {
+            const opts = typeof options === 'string' ? { message: options } : options;
+            currentDialog = {
+                type: 'confirm',
+                options: opts,
+                resolve: value => resolve(Boolean(value)),
+            };
+            notifyDialogListeners();
+        });
+    },
+    /**
+     * Close the current dialog.
+     */
+    close: (value) => {
+        if (currentDialog) {
+            currentDialog.resolve(value);
+            currentDialog = null;
+            notifyDialogListeners();
         }
-        return (jsx(Component, { ref: ref, className: buttonClasses, href: href, target: target, rel: rel, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : undefined, onClick: isDisabled
-                ? // Guarded, because this handler is installed into whatever `as`
-                    // renders and a custom component's `onClick` need not be a DOM
-                    // event handler at all. One declaring `onClick: (v: string) =>
-                    // void` calls this with a string, and an unguarded
-                    // `e.preventDefault()` throws `is not a function`. Blocking the
-                    // real event is the point; a foreign payload is simply not ours
-                    // to act on.
-                    (e) => {
-                        if (typeof e?.preventDefault === 'function')
-                            e.preventDefault();
-                    }
-                : onClick, ...forwardedRest, children: children }));
+    },
+    /**
+     * Subscribe to dialog changes.
+     */
+    subscribe: (listener) => {
+        dialogListeners.add(listener);
+        return () => dialogListeners.delete(listener);
+    },
+};
+/**
+ * DialogContainer component to render programmatic dialogs.
+ * Place this once at the root of your app.
+ *
+ * @function
+ * @returns {JSX.Element | null} The rendered dialog, or null if none is active.
+ */
+const DialogContainer = () => {
+    // Starts from the dialog already open instead of none, then follows changes.
+    const current = useSyncExternalStore(dialog.subscribe, getCurrentDialog, getServerDialog);
+    if (!current) {
+        return null;
     }
-    return (jsx("button", { ref: ref, className: buttonClasses, disabled: isDisabled, onClick: onClick, ...rest, children: children }));
-});
-Button.displayName = 'Button';
+    const { type, options } = current;
+    return (jsx(Dialog, { isOpen: true, title: options.title, message: options.message, type: options.type, confirmText: options.confirmText, cancelText: options.cancelText, icon: options.icon, showCancel: type === 'confirm', focusCancel: options.focusCancel, onConfirm: () => dialog.close(type === 'confirm' ? true : undefined), onCancel: () => dialog.close(type === 'confirm' ? false : undefined) }));
+};
 
 /**
  * Individual carousel item/slide.
@@ -10298,7 +11140,11 @@ TextArea.displayName = 'TextArea';
 const DEFAULT_PICKER_LABELS = {
     prevMonth: 'Previous month',
     nextMonth: 'Next month',
+    prevYear: 'Previous year',
+    nextYear: 'Next year',
     chooseDate: 'Choose date',
+    chooseMonth: 'Choose month',
+    chooseYear: 'Choose year',
     hours: 'hours',
     minutes: 'minutes',
     seconds: 'seconds',
@@ -10328,6 +11174,8 @@ const mergeLabels = (overrides) => ({
 });
 
 const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
+const DEFAULT_MONTH_FORMAT = 'YYYY-MM';
+const DEFAULT_YEAR_FORMAT = 'YYYY';
 const DEFAULT_TIME_FORMAT_24 = 'HH:mm';
 const DEFAULT_TIME_FORMAT_12 = 'hh:mm A';
 const DEFAULT_DATETIME_FORMAT = 'YYYY-MM-DD HH:mm';
@@ -10633,9 +11481,87 @@ function isWithin(d, min, max) {
 function startOfDay(d) {
     return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0);
 }
+function endOfDay(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59, 999);
+}
 function startOfMonth(d) {
     return new Date(d.getFullYear(), d.getMonth(), 1, 0, 0, 0, 0);
 }
+/**
+ * Local midnight on `year`-`month`-`day` (`month` from 0), like the
+ * `Date(y, m, d)` constructor except that years 0–99 stay as given rather than
+ * turning into 1900–1999.
+ */
+function makeDate(year, month = 0, day = 1) {
+    const d = new Date(2000, 0, 1);
+    d.setFullYear(year, month, day);
+    return d;
+}
+/**
+ * First instant of the day, month or year containing `d`. Works by setters on
+ * a copy rather than the `Date(y, m, d)` constructor, which reads years 0–99
+ * as 1900–1999: segmented typing passes through such years on the way to a
+ * four-digit one.
+ */
+function startOfPeriod(d, granularity) {
+    const r = new Date(d);
+    if (granularity === 'year')
+        r.setMonth(0, 1);
+    else if (granularity === 'month')
+        r.setDate(1);
+    r.setHours(0, 0, 0, 0);
+    return r;
+}
+/** Last instant of the day, month or year containing `d`. */
+function endOfPeriod(d, granularity) {
+    const r = new Date(d);
+    if (granularity === 'year')
+        r.setMonth(11, 31);
+    // Day 0 of the next month is this month's last day.
+    else if (granularity === 'month')
+        r.setMonth(r.getMonth() + 1, 0);
+    r.setHours(23, 59, 59, 999);
+    return r;
+}
+/**
+ * Whether the day `d` falls outside `[min, max]` or is blocked by
+ * `shouldDisableDate` / `unselectableDates`. This is the day grid's rule for a
+ * disabled cell.
+ */
+function isDayUnselectable(d, c) {
+    if (!isWithin(d, c.min, c.max))
+        return true;
+    if (c.shouldDisableDate?.(d))
+        return true;
+    if (c.unselectableDates?.some(u => isSameDay(u, d)))
+        return true;
+    return false;
+}
+/**
+ * Whether every day of the month or year containing `d` is unselectable, so
+ * the period as a whole can't be picked. Walks the period's days and stops at
+ * the first selectable one. `min` and `max` count whole days here, so a `min`
+ * of 3pm on a month's last day leaves that day, and so its month, selectable.
+ */
+function isPeriodUnselectable(d, granularity, c) {
+    const days = {
+        ...c,
+        min: c.min && startOfDay(c.min),
+        max: c.max && endOfDay(c.max),
+    };
+    const start = startOfPeriod(d, granularity);
+    const end = endOfPeriod(d, granularity).getTime();
+    // A period wholly outside the bounds needs no walk.
+    if (days.min && end < days.min.getTime())
+        return true;
+    if (days.max && start.getTime() > days.max.getTime())
+        return true;
+    for (let day = start; day.getTime() <= end; day = addDays(day, 1)) {
+        if (!isDayUnselectable(day, days))
+            return false;
+    }
+    return true;
+}
 function addDays(d, n) {
     const r = new Date(d);
     r.setDate(r.getDate() + n);
@@ -10729,12 +11655,100 @@ function buildMonthGrid(monthAnchor, firstDayOfWeek = 0) {
     return cells;
 }
 
-const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max, shouldDisableDate, unselectableDates, firstDayOfWeek = 0, locale, dayNames, monthNames, nearbyMonthDays = true, color, size, className, id, autoFocusCell = false, labels, yearsRange, }) => {
+const BASE_VIEW = {
+    day: 'days',
+    month: 'months',
+    year: 'years',
+};
+// Months in rows of three, so the grid is four rows deep.
+const MONTH_ROWS = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [9, 10, 11],
+];
+const MONTHS_PER_ROW = 3;
+// The year list's CSS lays it out four to a row.
+const YEARS_PER_ROW = 4;
+/**
+ * The month grid's keyboard, after the day grid's: arrows move a month or a
+ * row, Home/End go to the row's ends, PageUp/PageDown move a year. Returns
+ * the months to move by and the direction to search past disabled months, or
+ * `null` for a key the grid doesn't handle. `col` is the focused month's
+ * column.
+ */
+function monthStep(key, col) {
+    switch (key) {
+        case 'ArrowLeft':
+            return [-1, -1];
+        case 'ArrowRight':
+            return [1, 1];
+        case 'ArrowUp':
+            return [-MONTHS_PER_ROW, -1];
+        case 'ArrowDown':
+            return [MONTHS_PER_ROW, 1];
+        case 'PageUp':
+            return [-12, -1];
+        case 'PageDown':
+            return [12, 1];
+        case 'Home':
+            return [-col, 1];
+        case 'End':
+            return [MONTHS_PER_ROW - 1 - col, -1];
+        default:
+            return null;
+    }
+}
+/**
+ * The month nearest `month` that `disabled` leaves enabled, `month` itself
+ * when it is. At equal distance the later month wins. With every month
+ * disabled it stays `month`, as there is nothing to reach.
+ */
+function nearestEnabledMonth(month, disabled) {
+    if (!disabled[month])
+        return month;
+    for (let d = 1; d < 12; d++) {
+        if (month + d < 12 && !disabled[month + d])
+            return month + d;
+        if (month - d >= 0 && !disabled[month - d])
+            return month - d;
+    }
+    return month;
+}
+/**
+ * The year list's keyboard when it is the selection surface: arrows move a
+ * year or a row, Home/End go to the list's ends. Returns the year to start
+ * from and the direction to search past disabled years, or `null` for a key
+ * the list doesn't handle.
+ */
+function yearStep(key, focusedYear, years) {
+    switch (key) {
+        case 'ArrowLeft':
+            return [focusedYear - 1, -1];
+        case 'ArrowRight':
+            return [focusedYear + 1, 1];
+        case 'ArrowUp':
+            return [focusedYear - YEARS_PER_ROW, -1];
+        case 'ArrowDown':
+            return [focusedYear + YEARS_PER_ROW, 1];
+        case 'Home':
+            return [years[0], 1];
+        case 'End':
+            return [years[years.length - 1], -1];
+        default:
+            return null;
+    }
+}
+const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max, shouldDisableDate, unselectableDates, firstDayOfWeek = 0, locale, dayNames, monthNames, nearbyMonthDays = true, color, size, className, id, autoFocusCell = false, labels, yearsRange, granularity = 'day', }) => {
     const gridRef = useRef(null);
+    const monthGridRef = useRef(null);
     const yearGridRef = useRef(null);
     const { classPrefix } = useConfig();
     const t = mergeLabels(labels);
-    const [view, setView] = useState('days');
+    const baseView = BASE_VIEW[granularity];
+    const isDayGranularity = granularity === 'day';
+    const isYearGranularity = granularity === 'year';
+    const [view, setView] = useState(baseView);
     const computedDayNames = useMemo(() => {
         if (dayNames && dayNames.length === 7)
             return dayNames;
@@ -10749,16 +11763,28 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
             return monthNames;
         return getMonthNames(locale, 'long');
     }, [monthNames, locale]);
+    // The month grid's cells are too narrow for long names, so they show the
+    // short form unless the caller supplied names of their own.
+    const monthCellNames = useMemo(() => {
+        if (monthNames && monthNames.length === 12)
+            return monthNames;
+        return getMonthNames(locale, 'short');
+    }, [monthNames, locale]);
     const cells = useMemo(() => buildMonthGrid(focusedDate, firstDayOfWeek), [focusedDate, firstDayOfWeek]);
-    const isDateUnselectable = useCallback((d) => {
-        if (!isWithin(d, min, max))
-            return true;
-        if (shouldDisableDate?.(d))
-            return true;
-        if (unselectableDates?.some(u => isSameDay(u, d)))
-            return true;
-        return false;
-    }, [min, max, shouldDisableDate, unselectableDates]);
+    const isDateUnselectable = useCallback((d) => isDayUnselectable(d, { min, max, shouldDisableDate, unselectableDates }), [min, max, shouldDisableDate, unselectableDates]);
+    // A month or year is out of reach only when every day in it is.
+    const isMonthUnselectable = useCallback((d) => isPeriodUnselectable(d, 'month', {
+        min,
+        max,
+        shouldDisableDate,
+        unselectableDates,
+    }), [min, max, shouldDisableDate, unselectableDates]);
+    const isYearUnselectable = useCallback((year) => isPeriodUnselectable(makeDate(year), 'year', {
+        min,
+        max,
+        shouldDisableDate,
+        unselectableDates,
+    }), [min, max, shouldDisableDate, unselectableDates]);
     // Step from `next` by `direction` days until we hit a selectable date,
     // skipping past dates blocked by min/max, shouldDisableDate, or
     // unselectableDates. If the whole searched range is disabled, focus stays
@@ -10825,6 +11851,38 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
                 break;
         }
     }, [focusedDate, firstDayOfWeek, isDateUnselectable, moveFocus, onSelect]);
+    // The month grid's counterpart to `moveFocus`: step by `direction` months
+    // until a month with a selectable day turns up, stopping at the min/max
+    // months. The cap guards against a range with nothing selectable.
+    const moveMonthFocus = useCallback((next, direction) => {
+        let candidate = next;
+        for (let i = 0; i < 120; i++) {
+            const month = startOfMonth(candidate).getTime();
+            if (min && month < startOfMonth(min).getTime())
+                return;
+            if (max && month > startOfMonth(max).getTime())
+                return;
+            if (!isMonthUnselectable(candidate)) {
+                onFocusedDateChange(candidate);
+                return;
+            }
+            candidate = addMonths(candidate, direction);
+        }
+    }, [min, max, isMonthUnselectable, onFocusedDateChange]);
+    const handleMonthKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            if (!isMonthUnselectable(focusedDate)) {
+                onSelect(startOfMonth(focusedDate));
+            }
+            return;
+        }
+        const step = monthStep(e.key, focusedDate.getMonth() % MONTHS_PER_ROW);
+        if (!step)
+            return;
+        e.preventDefault();
+        moveMonthFocus(addMonths(focusedDate, step[0]), step[1]);
+    }, [focusedDate, isMonthUnselectable, moveMonthFocus, onSelect]);
     const calendarClass = usePrefixedClassNames('dateinput', {
         [`is-${color}`]: !!color,
         [`is-${size}`]: !!size,
@@ -10841,21 +11899,44 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
     const dayNamesRowClass = usePrefixedClassNames('dateinput-day-names');
     const dayNameClass = usePrefixedClassNames('dateinput-day-name');
     const gridClass = usePrefixedClassNames('dateinput-grid');
+    const monthsGridClass = usePrefixedClassNames('dateinput-months-grid');
+    const monthsRowClass = usePrefixedClassNames('dateinput-months-row');
     const yearsGridClass = usePrefixedClassNames('dateinput-years-grid');
+    const focusedYear = focusedDate.getFullYear();
+    const today = new Date();
+    const todayYear = today.getFullYear();
+    // The header steps a month at a time over the day grid and a year at a
+    // time over the month grid, kept inside min/max.
     const prevMonthAnchor = addMonths(focusedDate, -1);
     const nextMonthAnchor = addMonths(focusedDate, 1);
-    const prevDisabled = !!(min &&
-        prevMonthAnchor.getTime() < startOfDay(min).getTime() &&
-        isSameMonth(focusedDate, min));
-    const nextDisabled = !!(max &&
-        nextMonthAnchor.getTime() > startOfDay(max).getTime() &&
-        isSameMonth(focusedDate, max));
+    const prevAnchor = isDayGranularity
+        ? prevMonthAnchor
+        : clampDate(addYears(focusedDate, -1), min, max);
+    const nextAnchor = isDayGranularity
+        ? nextMonthAnchor
+        : clampDate(addYears(focusedDate, 1), min, max);
+    const prevDisabled = isDayGranularity
+        ? !!(min &&
+            prevMonthAnchor.getTime() < startOfDay(min).getTime() &&
+            isSameMonth(focusedDate, min))
+        : !!(min && focusedYear <= min.getFullYear());
+    const nextDisabled = isDayGranularity
+        ? !!(max &&
+            nextMonthAnchor.getTime() > startOfDay(max).getTime() &&
+            isSameMonth(focusedDate, max))
+        : !!(max && focusedYear >= max.getFullYear());
     const labelId = id ? `${id}-label` : undefined;
-    const monthLabel = `${computedMonthNames[focusedDate.getMonth()]} ${focusedDate.getFullYear()}`;
+    const monthLabel = isDayGranularity
+        ? `${computedMonthNames[focusedDate.getMonth()]} ${focusedYear}`
+        : String(focusedYear);
+    // As the selection surface the year list is where focus moves, so its
+    // window stays centred on the year focused at mount: re-centring on every
+    // move would reflow the list under the keyboard.
+    const [mountYear] = useState(focusedYear);
+    const windowYear = isYearGranularity ? mountYear : focusedYear;
     const yearList = useMemo(() => {
-        const focusedYear = focusedDate.getFullYear();
-        const minYear = min ? min.getFullYear() : focusedYear - 100;
-        const maxYear = max ? max.getFullYear() : focusedYear + 100;
+        const minYear = min ? min.getFullYear() : windowYear - 100;
+        const maxYear = max ? max.getFullYear() : windowYear + 100;
         const [lo, hi] = yearsRange ?? [minYear, maxYear];
         const start = Math.max(lo, minYear);
         const end = Math.min(hi, maxYear);
@@ -10863,14 +11944,59 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
         for (let y = start; y <= end; y++)
             out.push(y);
         return out;
-    }, [focusedDate, min, max, yearsRange]);
+    }, [windowYear, min, max, yearsRange]);
+    // Only the selection surface disables years; as navigation every listed
+    // year can be visited.
+    const disabledYears = useMemo(() => new Set(isYearGranularity ? yearList.filter(y => isYearUnselectable(y)) : []), [isYearGranularity, yearList, isYearUnselectable]);
+    // Which of the focused year's months have no selectable day.
+    const disabledMonths = useMemo(() => granularity === 'month'
+        ? Array.from({ length: 12 }, (_, m) => isMonthUnselectable(makeDate(focusedYear, m)))
+        : [], [granularity, focusedYear, isMonthUnselectable]);
+    // The month grid's one tab stop. A disabled button can't take focus, so
+    // when the focused month is disabled the stop moves to the nearest enabled
+    // month, and focusing it makes it the focused month.
+    const tabStopMonth = nearestEnabledMonth(focusedDate.getMonth(), disabledMonths);
     const handleYearSelect = useCallback((year) => {
         const next = new Date(focusedDate);
         next.setFullYear(year);
-        // Keep month/day but clamp into [min, max].
-        onFocusedDateChange(next);
-        setView('days');
-    }, [focusedDate, onFocusedDateChange]);
+        // Keep month/day. The month grid also clamps into [min, max] so its
+        // focused month is never one the bounds rule out.
+        onFocusedDateChange(isDayGranularity ? next : clampDate(next, min, max));
+        setView(baseView);
+    }, [focusedDate, onFocusedDateChange, isDayGranularity, min, max, baseView]);
+    // Picking from the year list as the selection surface: focus follows the
+    // pick and `onSelect` gets the year's first day.
+    const handleYearPick = useCallback((year) => {
+        onFocusedDateChange(clampDate(makeDate(year), min, max));
+        onSelect(makeDate(year));
+    }, [min, max, onFocusedDateChange, onSelect]);
+    // Step through the listed years from `year` by `direction`, skipping
+    // disabled ones, and focus the first selectable year found.
+    const moveYearFocus = useCallback((year, direction) => {
+        const first = yearList[0];
+        const last = yearList[yearList.length - 1];
+        for (let y = year; y >= first && y <= last; y += direction) {
+            if (!disabledYears.has(y)) {
+                onFocusedDateChange(clampDate(makeDate(y), min, max));
+                return;
+            }
+        }
+    }, [yearList, disabledYears, onFocusedDateChange, min, max]);
+    const handleYearListKeyDown = useCallback((e) => {
+        if (!isYearGranularity) {
+            // As navigation, Escape returns to the grid the list was opened from.
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                setView(baseView);
+            }
+            return;
+        }
+        const step = yearStep(e.key, focusedYear, yearList);
+        if (!step)
+            return;
+        e.preventDefault();
+        moveYearFocus(step[0], step[1]);
+    }, [isYearGranularity, baseView, focusedYear, yearList, moveYearFocus]);
     useEffect(() => {
         if (view !== 'days')
             return;
@@ -10879,17 +12005,55 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
         const target = gridRef.current.querySelector('[data-focused="true"]');
         target?.focus();
     }, [autoFocusCell, focusedDate, view]);
-    // When the year view opens, scroll the focused year into view.
+    // The month grid takes focus when the popover asks for it, and keeps it on
+    // the focused month while the keyboard moves through the grid.
+    useEffect(() => {
+        const grid = monthGridRef.current;
+        if (view !== 'months' || !grid)
+            return;
+        if (!autoFocusCell && !grid.contains(document.activeElement))
+            return;
+        grid.querySelector('[data-focused="true"]')?.focus();
+    }, [autoFocusCell, focusedDate, view]);
+    // When the year view opens as navigation, scroll the focused year into
+    // view.
     useEffect(() => {
-        if (view !== 'years' || !yearGridRef.current)
+        if (view !== 'years' || isYearGranularity || !yearGridRef.current)
             return;
         const sel = yearGridRef.current.querySelector('[data-focused-year="true"]');
         sel?.scrollIntoView({ block: 'center' });
         sel?.focus();
-    }, [view]);
-    const focusedYear = focusedDate.getFullYear();
-    const todayYear = new Date().getFullYear();
-    return (jsxs("div", { className: classNames(calendarClass, className), id: id, children: [jsxs("div", { className: headerClass, children: [jsxs("button", { type: "button", className: monthTriggerClass, "aria-haspopup": "listbox", "aria-expanded": view === 'years', onClick: () => setView(v => (v === 'years' ? 'days' : 'years')), children: [jsx("span", { className: monthLabelClass, id: labelId, "aria-live": "polite", children: monthLabel }), jsx("svg", { className: monthCaretClass, viewBox: "0 0 12 12", width: "10", height: "10", "aria-hidden": "true", children: jsx("path", { d: "M2 4l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), jsxs("div", { className: navGroupClass, children: [jsx("button", { type: "button", className: navPrevClass, "aria-label": t.prevMonth, disabled: prevDisabled || view !== 'days', onClick: () => onFocusedDateChange(prevMonthAnchor), children: jsx("svg", { viewBox: "0 0 16 16", width: "14", height: "14", "aria-hidden": "true", children: jsx("path", { d: "M10 3l-5 5 5 5", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), jsx("button", { type: "button", className: navNextClass, "aria-label": t.nextMonth, disabled: nextDisabled || view !== 'days', onClick: () => onFocusedDateChange(nextMonthAnchor), children: jsx("svg", { viewBox: "0 0 16 16", width: "14", height: "14", "aria-hidden": "true", children: jsx("path", { d: "M6 3l5 5-5 5", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), view === 'days' ? (jsxs(Fragment, { children: [jsx("div", { className: dayNamesRowClass, "aria-hidden": "true", children: computedDayNames.map((name, i) => (jsx("div", { className: dayNameClass, children: name }, i))) }), jsx("div", { ref: gridRef, role: "grid", "aria-labelledby": labelId, className: gridClass, onKeyDown: handleKeyDown, children: cells.map(cell => {
+    }, [view, isYearGranularity]);
+    // As the selection surface the year list opens with the focused year in
+    // its middle. It scrolls the list itself rather than calling
+    // `scrollIntoView`, which would also scroll the page to an inline calendar
+    // on load, and focuses that year only when the popover asks.
+    useEffect(() => {
+        const list = yearGridRef.current;
+        if (!isYearGranularity || !list)
+            return;
+        const target = list.querySelector('[data-focused-year="true"]');
+        if (!target)
+            return;
+        const rect = target.getBoundingClientRect();
+        list.scrollTop +=
+            rect.top -
+                list.getBoundingClientRect().top -
+                (list.clientHeight - rect.height) / 2;
+        if (autoFocusCell)
+            target.focus({ preventScroll: true });
+    }, [isYearGranularity, autoFocusCell]);
+    // Keyboard moves keep DOM focus on the focused year while the list has it.
+    useEffect(() => {
+        const list = yearGridRef.current;
+        if (!isYearGranularity || !list)
+            return;
+        if (!list.contains(document.activeElement))
+            return;
+        list.querySelector('[data-focused-year="true"]')?.focus();
+    }, [isYearGranularity, focusedYear]);
+    const navArrow = (d) => (jsx("svg", { viewBox: "0 0 16 16", width: "14", height: "14", "aria-hidden": "true", children: jsx("path", { d: d, fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+    return (jsxs("div", { className: classNames(calendarClass, className), id: id, children: [jsxs("div", { className: headerClass, children: [isYearGranularity ? (jsx("span", { className: monthLabelClass, id: labelId, children: monthLabel })) : (jsxs("button", { type: "button", className: monthTriggerClass, "aria-haspopup": "listbox", "aria-expanded": view === 'years', onClick: () => setView(v => (v === 'years' ? baseView : 'years')), children: [jsx("span", { className: monthLabelClass, id: labelId, "aria-live": "polite", children: monthLabel }), jsx("svg", { className: monthCaretClass, viewBox: "0 0 12 12", width: "10", height: "10", "aria-hidden": "true", children: jsx("path", { d: "M2 4l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })] })), !isYearGranularity && (jsxs("div", { className: navGroupClass, children: [jsx("button", { type: "button", className: navPrevClass, "aria-label": isDayGranularity ? t.prevMonth : t.prevYear, disabled: prevDisabled || view !== baseView, onClick: () => onFocusedDateChange(prevAnchor), children: navArrow('M10 3l-5 5 5 5') }), jsx("button", { type: "button", className: navNextClass, "aria-label": isDayGranularity ? t.nextMonth : t.nextYear, disabled: nextDisabled || view !== baseView, onClick: () => onFocusedDateChange(nextAnchor), children: navArrow('M6 3l5 5-5 5') })] }))] }), view === 'days' && (jsxs(Fragment, { children: [jsx("div", { className: dayNamesRowClass, "aria-hidden": "true", children: computedDayNames.map((name, i) => (jsx("div", { className: dayNameClass, children: name }, i))) }), jsx("div", { ref: gridRef, role: "grid", "aria-labelledby": labelId, className: gridClass, onKeyDown: handleKeyDown, children: cells.map(cell => {
                             const disabled = isDateUnselectable(cell.date);
                             const isSelected = !!value && isSameDay(value, cell.date);
                             const isFocused = isSameDay(cell.date, focusedDate);
@@ -10907,156 +12071,56 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
                                     onFocusedDateChange(cell.date);
                                     onSelect(cell.date);
                                 }, style: !display ? { visibility: 'hidden' } : undefined, children: cell.date.getDate() }, cell.date.toISOString()));
-                        }) })] })) : (jsx("div", { ref: yearGridRef, className: yearsGridClass, role: "listbox", "aria-label": monthLabel, onKeyDown: e => {
-                    if (e.key === 'Escape') {
-                        e.preventDefault();
-                        setView('days');
-                    }
-                }, children: yearList.map(year => {
+                        }) })] })), view === 'months' && (jsx("div", { ref: monthGridRef, role: "grid", "aria-labelledby": labelId, className: monthsGridClass, onKeyDown: handleMonthKeyDown, children: MONTH_ROWS.map(row => (jsx("div", { role: "row", className: monthsRowClass, children: row.map(month => {
+                        const date = makeDate(focusedYear, month);
+                        const disabled = disabledMonths[month];
+                        const isSelected = !!value && isSameMonth(value, date);
+                        const isFocused = month === tabStopMonth;
+                        const isCurrent = isSameMonth(date, today);
+                        const cellClass = prefixedClassNames(classPrefix, 'dateinput-month-cell', {
+                            'is-selected': isSelected,
+                            'is-today': isCurrent,
+                            'is-disabled': disabled,
+                        });
+                        return (jsx("button", { type: "button", role: "gridcell", tabIndex: isFocused ? 0 : -1, "aria-selected": isSelected, "aria-disabled": disabled, "aria-current": isCurrent ? 'date' : undefined, "aria-label": computedMonthNames[month], "data-focused": isFocused ? 'true' : undefined, disabled: disabled, className: cellClass, onFocus: () => {
+                                // Reached by Tab while the focused month is disabled,
+                                // or by pointer: keys move on from here.
+                                if (month !== focusedDate.getMonth()) {
+                                    onFocusedDateChange(clampDate(date, min, max));
+                                }
+                            }, onClick: () => {
+                                onFocusedDateChange(clampDate(date, min, max));
+                                onSelect(date);
+                            }, children: monthCellNames[month] }, month));
+                    }) }, row[0]))) })), view === 'years' && (jsx("div", { ref: yearGridRef, className: yearsGridClass, role: "listbox", "aria-label": isYearGranularity ? t.chooseYear : monthLabel, onKeyDown: handleYearListKeyDown, children: yearList.map(year => {
                     const isFocused = year === focusedYear;
                     const isToday = year === todayYear;
+                    // As navigation the focused year is the current one. As the
+                    // selection surface the value's year is selected and focus roams.
+                    const isSelected = isYearGranularity
+                        ? !!value && value.getFullYear() === year
+                        : isFocused;
+                    const disabled = disabledYears.has(year);
                     const cellCls = prefixedClassNames(classPrefix, 'dateinput-year-cell', {
-                        'is-selected': isFocused,
+                        'is-selected': isSelected,
                         'is-today': isToday,
+                        'is-disabled': disabled,
                     });
-                    return (jsx("button", { type: "button", role: "option", "aria-selected": isFocused, "data-focused-year": isFocused ? 'true' : undefined, tabIndex: isFocused ? 0 : -1, className: cellCls, onClick: () => handleYearSelect(year), children: year }, year));
+                    return (jsx("button", { type: "button", role: "option", "aria-selected": isSelected, "aria-disabled": isYearGranularity ? disabled : undefined, "aria-current": isYearGranularity && isToday ? 'date' : undefined, "data-focused-year": isFocused ? 'true' : undefined, tabIndex: isFocused ? 0 : -1, disabled: disabled, className: cellCls, onClick: () => isYearGranularity
+                            ? handleYearPick(year)
+                            : handleYearSelect(year), children: year }, year));
                 }) }))] }));
 };
 Calendar.displayName = 'Calendar';
 
-const FOCUSABLE_SELECTOR = [
-    'a[href]',
-    'button:not([disabled])',
-    'input:not([disabled]):not([type="hidden"])',
-    'select:not([disabled])',
-    'textarea:not([disabled])',
-    '[tabindex]:not([tabindex="-1"])',
-].join(',');
-function useFocusTrap(containerRef, active, options = {}) {
-    const { initialFocusRef, restoreFocus = true } = options;
-    useEffect(() => {
-        if (!active)
-            return undefined;
-        const container = containerRef.current;
-        if (!container)
-            return undefined;
-        const previouslyFocused = typeof document !== 'undefined'
-            ? document.activeElement
-            : null;
-        const focusInitial = () => {
-            if (initialFocusRef?.current) {
-                initialFocusRef.current.focus();
-                return;
-            }
-            const focusables = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(el => !el.hasAttribute('disabled'));
-            const target = focusables[0] ?? container;
-            target.focus();
-        };
-        focusInitial();
-        const handleKeyDown = (e) => {
-            if (e.key !== 'Tab')
-                return;
-            const focusables = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(el => !el.hasAttribute('disabled'));
-            if (focusables.length === 0) {
-                e.preventDefault();
-                return;
-            }
-            const first = focusables[0];
-            const last = focusables[focusables.length - 1];
-            const activeEl = document.activeElement;
-            if (e.shiftKey && activeEl === first) {
-                e.preventDefault();
-                last.focus();
-            }
-            else if (!e.shiftKey && activeEl === last) {
-                e.preventDefault();
-                first.focus();
-            }
-        };
-        container.addEventListener('keydown', handleKeyDown);
-        return () => {
-            container.removeEventListener('keydown', handleKeyDown);
-            if (restoreFocus && previouslyFocused?.focus) {
-                previouslyFocused.focus();
-            }
-        };
-    }, [active, containerRef, initialFocusRef, restoreFocus]);
-}
-
 const isBrowser = typeof window !== 'undefined';
-function resolveAuto(rect, panelWidth, panelHeight) {
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-    const fitsBelow = rect.bottom + panelHeight + 4 <= vh;
-    const fitsRight = rect.left + panelWidth <= vw;
-    if (fitsBelow && fitsRight)
-        return 'bottom-left';
-    if (fitsBelow && !fitsRight)
-        return 'bottom-right';
-    if (!fitsBelow && fitsRight)
-        return 'top-left';
-    return 'top-right';
-}
 const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'bottom-left', appendToBody = false, className, trapFocus = true, closeOnClickOutside = true, closeOnEscape = true, ariaLabel, ariaLabelledBy, role = 'dialog', id, }) => {
     const panelRef = useRef(null);
-    const [resolved, setResolved] = useState({
-        position: position === 'auto' ? 'bottom-left' : position,
+    const resolved = useAnchoredPosition(anchorRef, panelRef, {
+        active: isOpen,
+        position,
+        fixed: appendToBody,
     });
-    const updatePosition = useCallback(() => {
-        if (!isBrowser || !isOpen)
-            return;
-        const anchor = anchorRef.current;
-        const panel = panelRef.current;
-        if (!anchor || !panel)
-            return;
-        const rect = anchor.getBoundingClientRect();
-        const panelRect = panel.getBoundingClientRect();
-        const w = panelRect.width;
-        const h = panelRect.height;
-        const finalPos = position === 'auto' ? resolveAuto(rect, w, h) : position;
-        if (!appendToBody) {
-            setResolved({ position: finalPos });
-            return;
-        }
-        let top = 0;
-        let left = 0;
-        switch (finalPos) {
-            case 'bottom-left':
-                top = rect.bottom + 4;
-                left = rect.left;
-                break;
-            case 'bottom-right':
-                top = rect.bottom + 4;
-                left = rect.right - w;
-                break;
-            case 'top-left':
-                top = rect.top - h - 4;
-                left = rect.left;
-                break;
-            case 'top-right':
-                top = rect.top - h - 4;
-                left = rect.right - w;
-                break;
-        }
-        setResolved({ position: finalPos, top, left });
-    }, [anchorRef, appendToBody, isOpen, position]);
-    useLayoutEffect(() => {
-        if (!isOpen)
-            return undefined;
-        updatePosition();
-        if (!isBrowser)
-            return undefined;
-        const handler = () => updatePosition();
-        window.addEventListener('resize', handler, { passive: true });
-        window.addEventListener('scroll', handler, {
-            passive: true,
-            capture: true,
-        });
-        return () => {
-            window.removeEventListener('resize', handler);
-            window.removeEventListener('scroll', handler, { capture: true });
-        };
-    }, [isOpen, updatePosition]);
     useEffect(() => {
         if (!isOpen || !closeOnClickOutside || !isBrowser)
             return undefined;
@@ -11087,7 +12151,7 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
         document.addEventListener('keydown', handler);
         return () => document.removeEventListener('keydown', handler);
     }, [isOpen, closeOnEscape, onClose]);
-    useFocusTrap(panelRef, isOpen && trapFocus);
+    useFocusTrap(panelRef, { active: isOpen && trapFocus });
     const panelClass = usePrefixedClassNames('picker-popover', {
         'is-active': isOpen,
         [`is-${resolved.position}`]: true,
@@ -11479,8 +12543,14 @@ const SEPARATOR_RE = /[/:\-.\s]/;
  * null and the input transparently falls back to free-form text entry.
  */
 function useSegmentedEntry(params) {
-    const { format, value, commitValue, formatFn, tryParse, text, setText, makeBaseDate, locale, min, max, isBlocked, disabled, readOnly, editable = true, popover = true, openOnFocus = true, closeOnSelect = false, isOpen, setOpen, inputRef, containerRef, onFocus, onClick, onKeyDown, onBlur, } = params;
-    const segmentMap = useMemo(() => (typeof format === 'string' ? buildSegmentMap(format) : null), [format]);
+    const { format, skipKinds, value, commitValue, formatFn, tryParse, text, setText, makeBaseDate, locale, min, max, isBlocked, disabled, readOnly, editable = true, popover = true, openOnFocus = true, closeOnSelect = false, isOpen, setOpen, inputRef, containerRef, onFocus, onClick, onKeyDown, onBlur, } = params;
+    const segmentMap = useMemo(() => {
+        const map = typeof format === 'string' ? buildSegmentMap(format) : null;
+        if (!map || !skipKinds)
+            return map;
+        const editable = map.editable.filter(i => !skipKinds.includes(map.segments[i].kind));
+        return editable.length > 0 ? { ...map, editable } : null;
+    }, [format, skipKinds]);
     const [activeSegmentIdx, setActiveSegmentIdx] = useState(null);
     // Buffer of digits typed within the current segment, cleared on segment
     // change. Kept in a ref because key handlers read+update synchronously
@@ -11784,13 +12854,64 @@ function useSegmentedEntry(params) {
     };
 }
 
-const toIsoDate = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
-const fromIsoDate = (s) => {
+const support = new Map();
+/**
+ * Whether this browser implements `<input type={type}>`. A browser that
+ * doesn't know a type reads it back as `'text'`, so this sets the type on a
+ * detached input and checks what sticks. The answer can't change within a
+ * page, so it is worked out once per type.
+ *
+ * It needs a DOM, so callers ask only after hydration. It also can't see a
+ * browser that recognises a type without drawing a control for it: desktop
+ * Safari reports `'month'` but shows a plain text box.
+ */
+function supportsInputType(type) {
+    let supported = support.get(type);
+    if (supported === undefined) {
+        const input = document.createElement('input');
+        input.setAttribute('type', type);
+        supported = input.type === type;
+        support.set(type, supported);
+    }
+    return supported;
+}
+
+const pad2$1 = (n) => String(n).padStart(2, '0');
+/**
+ * The value as the native input and the hidden form input carry it:
+ * `YYYY-MM-DD`, `YYYY-MM` or `YYYY`, the shapes `<input type="date">` and
+ * `<input type="month">` use. The year is padded to four digits, as those
+ * inputs require and as the `YYYY` token displays it.
+ */
+const toIsoValue = (d, granularity) => {
+    const year = String(d.getFullYear()).padStart(4, '0');
+    if (granularity === 'year')
+        return year;
+    const month = `${year}-${pad2$1(d.getMonth() + 1)}`;
+    return granularity === 'month' ? month : `${month}-${pad2$1(d.getDate())}`;
+};
+/** Read a native `type="date"` or `type="month"` value back into a Date. */
+const fromIsoValue = (s, granularity) => {
+    if (granularity === 'month') {
+        const m = /^(\d{4})-(\d{2})$/.exec(s);
+        return m ? makeDate(Number(m[1]), Number(m[2]) - 1) : null;
+    }
     const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
     if (!m)
         return null;
     return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
 };
+const DEFAULT_FORMATS = {
+    day: DEFAULT_DATE_FORMAT,
+    month: DEFAULT_MONTH_FORMAT,
+    year: DEFAULT_YEAR_FORMAT,
+};
+// Segments finer than the granularity render but are never edited.
+const SKIPPED_SEGMENTS = {
+    day: undefined,
+    month: ['day'],
+    year: ['month', 'day'],
+};
 /**
  * Raw DateInput — input + popover calendar without Field/Control wrapping.
  * Use `DateInput` for the convenience wrapper.
@@ -11800,8 +12921,10 @@ const fromIsoDate = (s) => {
  * @returns {JSX.Element}
  */
 const DateInputBase = forwardRef((props, ref) => {
-    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled, readOnly, placeholder, format, parse, locale, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = true, position = 'bottom-left', appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, firstDayOfWeek = 0, dayNames, monthNames, nearbyMonthDays = true, className, name, form, required, id, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon = true, triggerIconName = 'chevron-down', labels, ...rest } = props;
+    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled, readOnly, placeholder, granularity = 'day', format, parse, locale, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = true, position = 'bottom-left', appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, firstDayOfWeek = 0, dayNames, monthNames, nearbyMonthDays = true, className, name, form, required, id, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon = true, triggerIconName = 'chevron-down', labels, ...rest } = props;
     const t = mergeLabels(labels);
+    const isDayGranularity = granularity === 'day';
+    const resolvedFormat = format ?? DEFAULT_FORMATS[granularity];
     const isControlled = controlledValue !== undefined;
     const [internalValue, setInternalValue] = useState(defaultValue ?? null);
     const value = isControlled ? (controlledValue ?? null) : internalValue;
@@ -11816,7 +12939,7 @@ const DateInputBase = forwardRef((props, ref) => {
         setFocusedDate(prev => clampDate(prev, min, max));
     }, [min, max]);
     const [open, setOpenState] = useState(false);
-    const [text, setText] = useState(value ? formatDate(value, format, locale) : '');
+    const [text, setText] = useState(value ? formatDate(value, resolvedFormat, locale) : '');
     const inputRef = useRef(null);
     const containerRef = useRef(null);
     const reactId = useId();
@@ -11825,7 +12948,14 @@ const DateInputBase = forwardRef((props, ref) => {
     const { shouldUseNative } = useNativeMobilePicker({
         force: mobileNative === 'auto' ? undefined : mobileNative,
     });
-    const useNative = !inline && shouldUseNative;
+    // The day picker goes native as it always has. A month picker does only
+    // where the browser implements the month input, asked after hydration so
+    // the server and the first client render agree. HTML has no year input,
+    // so a year picker always renders the calendar.
+    const hydrated = useIsHydrated();
+    const hasNativeInput = isDayGranularity ||
+        (granularity === 'month' && hydrated && supportsInputType('month'));
+    const useNative = !inline && shouldUseNative && hasNativeInput;
     const inputClass = usePrefixedClassNames('input', {
         [`is-${color}`]: !!color,
         [`is-${size}`]: !!size,
@@ -11846,24 +12976,31 @@ const DateInputBase = forwardRef((props, ref) => {
     }, [onOpen, onClose]);
     // Sync displayed text with value when value changes externally.
     useEffect(() => {
-        setText(value ? formatDate(value, format, locale) : '');
-    }, [value, format, locale]);
+        setText(value ? formatDate(value, resolvedFormat, locale) : '');
+    }, [value, resolvedFormat, locale]);
     const commitValue = useCallback((next) => {
+        // A month or year value is its period's first day, however the
+        // calendar, typing or parsing arrived at it.
+        const committed = next && !isDayGranularity ? startOfPeriod(next, granularity) : next;
         if (!isControlled)
-            setInternalValue(next);
+            setInternalValue(committed);
         // Keep the calendar's focused cell tracking typed / parsed values.
-        if (next)
-            setFocusedDate(next);
-        onChange?.(next);
-    }, [isControlled, onChange]);
+        if (committed)
+            setFocusedDate(committed);
+        onChange?.(committed);
+    }, [isControlled, onChange, isDayGranularity, granularity]);
+    // At month or year granularity the bounds widen to the periods holding
+    // them, so the month or year containing `min` stays reachable.
+    const periodMin = useMemo(() => (min && !isDayGranularity ? startOfPeriod(min, granularity) : min), [min, isDayGranularity, granularity]);
+    const periodMax = useMemo(() => (max && !isDayGranularity ? endOfPeriod(max, granularity) : max), [max, isDayGranularity, granularity]);
     const handleSelect = useCallback((d) => {
-        if (!isWithin(d, min, max))
+        if (!isWithin(d, periodMin, periodMax))
             return;
         commitValue(d);
         setFocusedDate(d);
         if (closeOnSelect)
             setOpen(false);
-    }, [min, max, commitValue, closeOnSelect, setOpen]);
+    }, [periodMin, periodMax, commitValue, closeOnSelect, setOpen]);
     const tryParse = useCallback((s) => {
         const trimmed = s.trim();
         if (!trimmed)
@@ -11871,37 +13008,72 @@ const DateInputBase = forwardRef((props, ref) => {
         const fmt = typeof format === 'string' ? format : undefined;
         return parse
             ? parse(trimmed)
-            : parseDate(trimmed, fmt ?? DEFAULT_DATE_FORMAT);
-    }, [parse, format, locale]);
+            : parseDate(trimmed, fmt ?? DEFAULT_FORMATS[granularity]);
+    }, [parse, format, locale, granularity]);
     // The Date the user edits when starting without a current value (today at
-    // midnight; the hook clamps to min/max on commit).
+    // midnight, or the start of this month or year; the hook clamps to
+    // min/max on commit).
     const makeBaseDate = useCallback(() => {
         const d = new Date();
         d.setHours(0, 0, 0, 0);
-        return d;
-    }, []);
+        return isDayGranularity ? d : startOfPeriod(d, granularity);
+    }, [isDayGranularity, granularity]);
     const inputReadOnlyAttr = !!readOnly || !editable;
     const canOpen = !!popover && !disabled && !readOnly;
     // Blocking predicate for manual entry, matching the calendar's
-    // disabled-cell logic (shouldDisableDate + unselectableDates by day).
+    // disabled-cell logic (shouldDisableDate + unselectableDates by day, or
+    // every day of the month or year blocked at those granularities).
     const isBlocked = useMemo(() => {
+        if (!isDayGranularity) {
+            const constraints = { min, max, shouldDisableDate, unselectableDates };
+            return (d) => isPeriodUnselectable(d, granularity, constraints);
+        }
         if (!shouldDisableDate && !unselectableDates?.length)
             return undefined;
         return (d) => !!shouldDisableDate?.(d) ||
             !!unselectableDates?.some(u => isSameDay(u, d));
-    }, [shouldDisableDate, unselectableDates]);
-    const { inputHandlers } = useSegmentedEntry({
-        format: format ?? DEFAULT_DATE_FORMAT,
+    }, [
+        isDayGranularity,
+        granularity,
+        min,
+        max,
+        shouldDisableDate,
+        unselectableDates,
+    ]);
+    // Typing, and the re-parse on blur or Enter, that lands in the period the
+    // value already holds commits nothing, so a `value` elsewhere in its month
+    // or year isn't rewritten by focus passing through the field.
+    const commitTyped = useCallback((next) => {
+        if (next &&
+            value &&
+            !isDayGranularity &&
+            startOfPeriod(next, granularity).getTime() ===
+                startOfPeriod(value, granularity).getTime()) {
+            setText(formatDate(value, resolvedFormat, locale));
+            return;
+        }
+        commitValue(next);
+    }, [
         value,
+        isDayGranularity,
+        granularity,
+        resolvedFormat,
+        locale,
         commitValue,
+    ]);
+    const { inputHandlers } = useSegmentedEntry({
+        format: resolvedFormat,
+        skipKinds: SKIPPED_SEGMENTS[granularity],
+        value,
+        commitValue: commitTyped,
         formatFn: formatDate,
         tryParse,
         text,
         setText,
         makeBaseDate,
         locale,
-        min,
-        max,
+        min: periodMin,
+        max: periodMax,
         isBlocked,
         disabled,
         readOnly,
@@ -11928,21 +13100,31 @@ const DateInputBase = forwardRef((props, ref) => {
             ref.current =
                 node;
     }, [ref]);
-    // Native mobile path renders <input type="date">.
+    // Native mobile path renders <input type="date"> (type="month" for a
+    // month picker).
     if (useNative) {
-        return (jsx("input", { ...cleanRest, ref: combinedRef, type: "date", className: classNames(inputClass, bulmaHelperClasses, className), value: value ? toIsoDate(value) : '', onChange: e => {
-                const parsed = e.target.value ? fromIsoDate(e.target.value) : null;
+        return (jsx("input", { ...cleanRest, ref: combinedRef, type: isDayGranularity ? 'date' : 'month', className: classNames(inputClass, bulmaHelperClasses, className), value: value ? toIsoValue(value, granularity) : '', onChange: e => {
+                const parsed = e.target.value
+                    ? fromIsoValue(e.target.value, granularity)
+                    : null;
                 commitValue(parsed);
-            }, min: min ? toIsoDate(min) : undefined, max: max ? toIsoDate(max) : undefined, disabled: disabled, readOnly: readOnly, placeholder: placeholder, name: name, form: form, required: required, id: id }));
-    }
-    const calendar = (jsx(Calendar, { value: value, focusedDate: focusedDate, onSelect: handleSelect, onFocusedDateChange: setFocusedDate, min: min, max: max, shouldDisableDate: shouldDisableDate, unselectableDates: unselectableDates, firstDayOfWeek: firstDayOfWeek, locale: locale, dayNames: dayNames, monthNames: monthNames, nearbyMonthDays: nearbyMonthDays, color: color, size: size, id: popoverId, autoFocusCell: open, labels: labels }));
+            }, min: min ? toIsoValue(min, granularity) : undefined, max: max ? toIsoValue(max, granularity) : undefined, disabled: disabled, readOnly: readOnly, placeholder: placeholder, name: name, form: form, required: required, id: id }));
+    }
+    const chooseLabel = granularity === 'month'
+        ? t.chooseMonth
+        : granularity === 'year'
+            ? t.chooseYear
+            : t.chooseDate;
+    const calendar = (jsx(Calendar
+    // A new granularity starts the calendar over on its own view.
+    , { granularity: granularity, value: value, focusedDate: focusedDate, onSelect: handleSelect, onFocusedDateChange: setFocusedDate, min: min, max: max, shouldDisableDate: shouldDisableDate, unselectableDates: unselectableDates, firstDayOfWeek: firstDayOfWeek, locale: locale, dayNames: dayNames, monthNames: monthNames, nearbyMonthDays: nearbyMonthDays, color: color, size: size, id: popoverId, autoFocusCell: open, labels: labels }, granularity));
     if (inline) {
-        return (jsxs("div", { ...cleanRest, ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), children: [calendar, name && (jsx("input", { type: "hidden", name: name, form: form, value: value ? toIsoDate(value) : '', required: required }))] }));
+        return (jsxs("div", { ...cleanRest, ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), children: [calendar, name && (jsx("input", { type: "hidden", name: name, form: form, value: value ? toIsoValue(value, granularity) : '', required: required }))] }));
     }
     return (jsxs("div", { ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), ...cleanRest, children: [jsx("input", { ref: combinedRef, type: "text", role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": popoverId, autoComplete: "off", className: inputClass, value: text, placeholder: placeholder, disabled: disabled, readOnly: inputReadOnlyAttr, name: name, form: form, required: required, id: id, ...inputHandlers }), popover && triggerIcon && (jsx("button", { type: "button", className: triggerClass, onClick: () => {
                     if (canOpen)
                         setOpen(!open);
-                }, disabled: !canOpen, "aria-label": t.chooseDate, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsx(PickerPopover, { isOpen: open, onClose: handlePopoverClose, anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseDate, id: popoverId, children: calendar }))] }));
+                }, disabled: !canOpen, "aria-label": chooseLabel, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsx(PickerPopover, { isOpen: open, onClose: handlePopoverClose, anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: chooseLabel, id: popoverId, children: calendar }))] }));
 });
 DateInputBase.displayName = 'DateInputBase';
 
@@ -12915,6 +14097,9 @@ const TimeInputBase = forwardRef((props, ref) => {
     const mobileFooterClass = usePrefixedClassNames('timeinput-footer-mobile');
     const mobileFooterResetClass = usePrefixedClassNames('timeinput-footer-reset');
     const mobileFooterDoneClass = usePrefixedClassNames('timeinput-footer-done');
+    // Set from the moment the popover starts to close until the close has
+    // committed. See `setOpenFromInput`.
+    const closingRef = useRef(false);
     const setOpen = useCallback((next) => {
         setOpenState(prev => {
             if (prev === next)
@@ -12924,11 +14109,26 @@ const TimeInputBase = forwardRef((props, ref) => {
                 onOpen?.();
             }
             else {
+                closingRef.current = true;
                 onClose?.();
             }
             return next;
         });
     }, [onOpen, onClose, value]);
+    // React runs a commit's effect cleanups before any of its effects, so on a
+    // close this runs after the popover's focus trap has handed focus back.
+    useEffect(() => {
+        closingRef.current = false;
+    }, [open]);
+    // As the popover closes, its focus trap hands focus back to the input.
+    // That focus is not the user arriving, so under `openOnFocus` it must not
+    // open the popover again. The input asks to open only on focus, click or
+    // ArrowDown, so a request while a close commits can only be that one.
+    const setOpenFromInput = useCallback((next) => {
+        if (next && closingRef.current)
+            return;
+        setOpen(next);
+    }, [setOpen]);
     useEffect(() => {
         setText(value ? formatTime(value, defaultFormat, locale) : '');
     }, [value, defaultFormat, locale]);
@@ -12985,7 +14185,7 @@ const TimeInputBase = forwardRef((props, ref) => {
         openOnFocus,
         closeOnSelect,
         isOpen: open,
-        setOpen,
+        setOpen: setOpenFromInput,
         inputRef,
         containerRef,
         onFocus,
@@ -14663,5 +15863,5 @@ const Section = ({ size, className, children, color, bgColor, textColor, style,
     return (jsx("section", { className: sectionClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 
-export { Autocomplete, Avatar, Avatars, Badge, Block, Box, Breadcrumb, Button, Buttons, Card, Carousel, CarouselItem, Cell, Checkbox, Checkboxes, ClientOnly, Code, Collapse, Collapses, Column, Columns, ConfigProvider, Container, Content, Control, DateInput, DateInputBase, DateTimeInput, DateTimeInputBase, Delete, Dialog, DialogContainer, Divider, Dropdown, DropdownDivider, DropdownItem, Emphasis, Field, FieldBody, FieldLabel, Figure, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, InputBase, Level, LevelItem, LevelLeft, LevelRight, Link, LinkButton, ListItem, Loader, Loading, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarLink, NavbarMenu, NavbarStart, Notification, NotificationContainer, NumberInput, Numberinput, OrderedList, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Paragraph, Pre, Progress, Radio, Radios, Rate, Reveal, Section, Select, SelectBase, Sidebar, Skeleton, Slider, Span, Step, Steps, Strong, SubTitle, Switch, Tab, TabContentItem, TabItem, TabList, Table, Tabs, TabsContent, Tag, TagInput, Taginput, Tags, Tbody, Td, TextArea, TextAreaBase, Tfoot, Th, Thead, Theme, TimeInput, TimeInputBase, Title, Toast, ToastContainer, Tooltip, Tr, UnorderedList, checkboxColors, checkboxSizes, classNames, createPrefixedClassNames, dialog, isBrowser$1 as isBrowser, mergeBulmaStyles, notification, prefixedClassNames, radioColors, radioSizes, switchColors, switchSizes, toast, useBulmaClasses, useClassPrefix, useColorClasses, useColorStyles, useConfig, useFlexboxClasses, useIconLibrary, useInsideControl, useInsideField, useIsHydrated, useOtherClasses, usePrefixedClass, usePrefixedClassNames, useSpacingClasses, useTypographyClasses, useVisibilityClasses, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validAspectRatios, validAxisOverflows, validColorShades, validColors, validCursors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFloats, validFontFamilies, validInteractions, validJustifyContents, validOverflows, validPositions, validRadii, validResponsives, validSchemeColors, validShadows, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
+export { Autocomplete, Avatar, Avatars, Badge, Block, Box, Breadcrumb, Button, Buttons, Card, Carousel, CarouselItem, Cell, Checkbox, Checkboxes, ClientOnly, Code, Collapse, Collapses, Column, Columns, ConfigProvider, Container, Content, Control, DateInput, DateInputBase, DateTimeInput, DateTimeInputBase, Delete, Dialog, DialogContainer, Divider, Dropdown, DropdownDivider, DropdownItem, Emphasis, Field, FieldBody, FieldLabel, Figure, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, InputBase, Level, LevelItem, LevelLeft, LevelRight, Link, LinkButton, ListItem, Loader, Loading, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarLink, NavbarMenu, NavbarStart, Notification, NotificationContainer, NumberInput, Numberinput, OrderedList, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Paragraph, Popover, PopoverBody, PopoverClose, PopoverFooter, PopoverHeader, Portal, Pre, Progress, Radio, Radios, Rate, Reveal, Section, Select, SelectBase, Sidebar, Skeleton, Slider, Span, Step, Steps, Strong, SubTitle, Switch, Tab, TabContentItem, TabItem, TabList, Table, Tabs, TabsContent, Tag, TagInput, Taginput, Tags, Tbody, Td, TextArea, TextAreaBase, Tfoot, Th, Thead, Theme, TimeInput, TimeInputBase, Title, Toast, ToastContainer, Tooltip, Tr, UnorderedList, checkboxColors, checkboxSizes, classNames, createPrefixedClassNames, dialog, isBrowser$1 as isBrowser, mergeBulmaStyles, notification, prefixedClassNames, radioColors, radioSizes, switchColors, switchSizes, toast, useBulmaClasses, useClassPrefix, useColorClasses, useColorStyles, useConfig, useFlexboxClasses, useFocusTrap, useIconLibrary, useInsideControl, useInsideField, useIsHydrated, useOtherClasses, usePrefixedClass, usePrefixedClassNames, useSpacingClasses, useTypographyClasses, useVisibilityClasses, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validAspectRatios, validAxisOverflows, validColorShades, validColors, validCursors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFloats, validFontFamilies, validInteractions, validJustifyContents, validOverflows, validPositions, validRadii, validResponsives, validSchemeColors, validShadows, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
 //# sourceMappingURL=index.esm.js.map