@allxsmith/bestax-bulma 5.66.2 → 5.67.1

package/dist/index.cjs

@@ -3187,6 +3187,12 @@ const DropdownComponent = React.forwardRef(function DropdownComponent({ label, c
     const menuRef = React.useRef(null);
     const menuKeys = useMenuKeys();
     const pendingFocusRef = React.useRef(null);
+    // The trigger names the menu and the menu is what it controls, so both
+    // need an id whether or not the Dropdown has one.
+    const generatedId = React.useId();
+    const baseId = id || generatedId;
+    const triggerId = `${baseId}-trigger`;
+    const menuId = `${baseId}-menu`;
     // Cleanup returned by a consumer's callback ref on attach, held until detach.
     const consumerCleanupRef = React.useRef(null);
     const setRefs = React.useCallback((node) => {
@@ -3376,7 +3382,7 @@ const DropdownComponent = React.forwardRef(function DropdownComponent({ label, c
         menuKeys.onKeyDown(e);
     };
     const dropdownClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsxs("div", { className: dropdownClasses, ref: setRefs, id: id, "data-testid": "dropdown-root", ...rest, children: [jsxRuntime.jsx("div", { className: usePrefixedClassNames('dropdown-trigger'), children: jsxRuntime.jsxs("button", { ref: triggerRef, className: buttonClass, "aria-haspopup": "true", "aria-controls": id ? `${id}-menu` : undefined, "aria-expanded": active, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, disabled: disabled, type: "button", children: [jsxRuntime.jsx("span", { children: label }), jsxRuntime.jsx("span", { className: usePrefixedClassNames('icon', 'is-small'), "aria-hidden": "true", children: jsxRuntime.jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('dropdown-menu'), menuClassName), id: id ? `${id}-menu` : undefined, ref: menuRef, role: "menu", "data-testid": "dropdown-menu", onKeyDown: handleMenuKeyDown, 
+    return (jsxRuntime.jsxs("div", { className: dropdownClasses, ref: setRefs, id: id, "data-testid": "dropdown-root", ...rest, children: [jsxRuntime.jsx("div", { className: usePrefixedClassNames('dropdown-trigger'), children: jsxRuntime.jsxs("button", { ref: triggerRef, id: triggerId, className: buttonClass, "aria-haspopup": "true", "aria-controls": menuId, "aria-expanded": active, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, disabled: disabled, type: "button", children: [jsxRuntime.jsx("span", { children: label }), jsxRuntime.jsx("span", { className: usePrefixedClassNames('icon', 'is-small'), "aria-hidden": "true", children: jsxRuntime.jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('dropdown-menu'), menuClassName), id: menuId, ref: menuRef, role: "menu", "aria-labelledby": triggerId, "data-testid": "dropdown-menu", onKeyDown: handleMenuKeyDown, 
                 // The menu, not its content, takes focus from a click between items,
                 // so the menu owns nothing focusable but its items.
                 tabIndex: -1, children: jsxRuntime.jsx("div", { className: usePrefixedClassNames('dropdown-content'), onClick: handleMenuClick, children: children }) })] }));
@@ -5250,19 +5256,55 @@ const Message = withSubComponents(MessageComponent, {
 }, 'Message');
 
 // Ref-counted across every caller (e.g. a Dialog rendering its own Modal)
-// so overlapping/nested locks don't fight over which one restores `overflow`.
-// Every overlay that locks body scroll — Modal, Dialog, Sidebar, Loading —
-// goes through here; a component setting `document.body.style.overflow`
+// so overlapping/nested locks don't fight over which one restores the page.
+// Every overlay that locks the page (Modal, Dialog, Sidebar, Loading,
+// AppFrame's drawer) goes through here; a component setting these styles
 // itself would clear a lock another overlay still needs.
 let lockCount = 0;
-let originalOverflow = '';
+let unlock = null;
+/**
+ * Locks the page's scrolling and pads it by the room the scrollbar took, so
+ * its content stays put as the scrollbar goes. It locks `<html>` rather than
+ * `<body>`: the viewport takes `<body>`'s overflow only while `<html>`'s is
+ * `visible`, and Bulma's isn't. The side to pad is measured rather than read
+ * from the text direction, since an engine can keep the page's scrollbar on
+ * the right under right-to-left text. With an overlay scrollbar, or a gutter
+ * `scrollbar-gutter` keeps, nothing moves and nothing is padded. An element
+ * fixed to the window is placed against the viewport, not `<html>`, so the
+ * padding doesn't reach it.
+ *
+ * @returns A function that puts back the styles it changed.
+ */
+function lockPage() {
+    const root = document.documentElement;
+    const { overflow, paddingLeft, paddingRight } = root.style;
+    const before = root.getBoundingClientRect();
+    root.style.overflow = 'hidden';
+    const after = root.getBoundingClientRect();
+    const left = before.left - after.left;
+    const right = after.right - before.right;
+    if (left > 0 || right > 0) {
+        // The computed padding is in pixels, whatever unit set it.
+        const style = getComputedStyle(root);
+        const add = (padding, room) => `${(parseFloat(padding) || 0) + room}px`;
+        if (left > 0)
+            root.style.paddingLeft = add(style.paddingLeft, left);
+        if (right > 0)
+            root.style.paddingRight = add(style.paddingRight, right);
+    }
+    return () => {
+        root.style.overflow = overflow;
+        root.style.paddingLeft = paddingLeft;
+        root.style.paddingRight = paddingRight;
+    };
+}
 /**
- * Locks (and ref-counted-ly unlocks) `document.body` scrolling while `active`
- * is true. Safe to call from multiple components at once — the body scroll
- * is only restored once every active caller has released its lock.
+ * Locks (and ref-counted-ly unlocks) the page's scrolling while `active` is
+ * true. Safe to call from multiple components at once: the page is only
+ * given back once every active caller has released its lock.
  *
  * @function useScrollLock
- * @param active - Whether this caller wants the body scroll locked.
+ * @param active - Whether this caller wants the page's scrolling locked.
  */
 function useScrollLock(active) {
     React.useEffect(() => {
@@ -5270,13 +5312,13 @@ function useScrollLock(active) {
             return undefined;
         lockCount++;
         if (lockCount === 1) {
-            originalOverflow = document.body.style.overflow;
-            document.body.style.overflow = 'hidden';
+            unlock = lockPage();
         }
         return () => {
             lockCount--;
             if (lockCount === 0) {
-                document.body.style.overflow = originalOverflow;
+                unlock?.();
+                unlock = null;
             }
         };
     }, [active]);
@@ -7589,9 +7631,9 @@ const Loading = ({ active = false, isFullPage = false, size, color, canCancel =
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, [active, canCancel, hasOnCancel, onCancelRef, isTopmost]);
-    // Prevent body scroll when full page loading is active. Ref-counted through
-    // the shared helper so an overlapping Modal/Dialog/Sidebar doesn't have its
-    // lock cleared when this one releases.
+    // Lock the page's scrolling when full page loading is active. Ref-counted
+    // through the shared helper so an overlapping Modal/Dialog/Sidebar doesn't
+    // have its lock cleared when this one releases.
     useScrollLock(isFullPage && active);
     if (!active) {
         return null;
@@ -8516,14 +8558,16 @@ const samePosition = (a, b) => a.position === b.position &&
 /**
  * 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, and with `followContent` after each render too. A measurement that
- * changes nothing doesn't render again.
+ * measures again on resize, on any scroll of the anchor's window (an
+ * iframe's, when the anchor renders into one), and when the panel or the
+ * anchor changes size, so a fixed panel follows its anchor and its own
+ * content. Those measure once in the next frame, however many arrive before
+ * it. With `followContent` it also measures after each render. 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.
+ * The first measurement 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.
@@ -8580,12 +8624,34 @@ function useAnchoredPosition(anchorRef, panelRef, { active, position, fixed, off
         };
         updateRef.current = update;
         update();
-        view.addEventListener('resize', update, { passive: true });
-        view.addEventListener('scroll', update, { passive: true, capture: true });
+        // A scroll, a resize or a change in size measures in the next frame,
+        // once however many of them ask.
+        let frame = 0;
+        const schedule = () => {
+            if (frame)
+                return;
+            frame = view.requestAnimationFrame(() => {
+                frame = 0;
+                update();
+            });
+        };
+        view.addEventListener('resize', schedule, { passive: true });
+        view.addEventListener('scroll', schedule, { passive: true, capture: true });
+        // The panel's content can change size without the component holding the
+        // hook rendering, as an image loading or a child's own state does, and
+        // so can the anchor.
+        const Observer = view.ResizeObserver;
+        const resizes = typeof Observer === 'undefined' ? null : new Observer(schedule);
+        for (const element of [anchorRef.current, panelRef.current]) {
+            if (element)
+                resizes?.observe(element);
+        }
         return () => {
             updateRef.current = null;
-            view.removeEventListener('resize', update);
-            view.removeEventListener('scroll', update, { capture: true });
+            view.cancelAnimationFrame(frame);
+            resizes?.disconnect();
+            view.removeEventListener('resize', schedule);
+            view.removeEventListener('scroll', schedule, { capture: true });
         };
     }, [
         active,
@@ -9758,11 +9824,11 @@ function useOverlayFocus(ref, open, { modal, remountKey, restore }) {
  */
 const SidebarComponent = React.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 resolveContainer = usePortalContainer();
-    const { portalContainer } = useConfig();
-    // Where the configured default puts the sidebar. An `inline` one doesn't
-    // portal, so a change to the default moves nothing.
-    const defaultTarget = inline ? undefined : portalContainer;
+    // A portal has no server-rendered counterpart, so the sidebar renders in
+    // place on the server and while hydrating, and moves into its portal once
+    // the client takes over, as Modal's `portal` does. An `inline` one stays
+    // in place, so a change to the configured default moves nothing.
+    const { isPortaled, defaultTarget } = usePortalProp(!inline);
     const sidebarRef = React.useRef(null);
     // Cleanup returned by a consumer's callback ref on attach, held until detach.
     const consumerCleanupRef = React.useRef(null);
@@ -9805,21 +9871,23 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
             return undefined;
         return trapTab(() => sidebarRef.current, window, () => isTopmost('modal'));
     }, [isOpen, overlay, isTopmost]);
-    // Prevent body scroll when sidebar is open. Ref-counted through the shared
-    // helper so an overlapping Modal/Dialog/Loading doesn't unlock underneath.
+    // Lock the page's scrolling when sidebar is open. Ref-counted through the
+    // shared helper so an overlapping Modal/Dialog/Loading doesn't unlock
+    // underneath.
     useScrollLock(isOpen && overlay);
     // Move focus into the sidebar on open, to the first stop Tab wraps to or
-    // the sidebar itself, and hand it back on close, as `Modal` does. A
-    // different `defaultTarget` remounts the portaled sidebar: focus is handed
-    // back from the old nodes and moved into the new ones. Whether it takes
-    // focus is decided as it opens, so `overlay` changing while it's open
-    // leaves focus where the user has it. Without an overlay the sidebar holds
-    // no Tab, so with a modal overlay open under it, it leaves focus alone:
-    // the first Tab would take focus back there and leave the sidebar's other
-    // controls out of reach.
+    // the sidebar itself, and hand it back on close, as `Modal` does. Moving
+    // into the portal after hydration, or to a different `defaultTarget`,
+    // remounts the sidebar: focus is handed back from the old nodes and moved
+    // into the new ones. Whether it takes focus is decided as it opens, so
+    // `overlay` changing while it's open leaves focus where the user has it.
+    // Without an overlay the sidebar holds no Tab, so with a modal overlay
+    // open under it, it leaves focus alone: the first Tab would take focus
+    // back there and leave the sidebar's other controls out of reach.
     useOverlayFocus(sidebarRef, isOpen, {
         modal: overlay,
-        remountKey: defaultTarget,
+        // In place it's `false`, which no portal target is.
+        remountKey: isPortaled ? defaultTarget : false,
     });
     // Use combined ref
     const combinedRef = React.useCallback((node) => {
@@ -9870,15 +9938,8 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
         '--bulma-sidebar-width': resolvedFullwidth ? '100%' : width,
     };
     const sidebarContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [overlay && (jsxRuntime.jsx("div", { className: backgroundClass, onClick: handleOverlayClick, "aria-hidden": "true" })), jsxRuntime.jsx("aside", { ref: combinedRef, className: combinedClasses, style: sidebarStyle, role: "dialog", "aria-modal": overlay ? 'true' : undefined, "aria-hidden": !isOpen, ...inertProps(!isOpen), tabIndex: -1, ...rest, children: jsxRuntime.jsx("div", { className: contentClass, children: children }) })] }));
-    if (inline) {
-        return sidebarContent;
-    }
-    // Render to portal for proper stacking
-    if (typeof document !== 'undefined') {
-        const target = resolveContainer();
-        return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, children: sidebarContent }), target);
-    }
-    return null;
+    // In a portal for proper stacking.
+    return jsxRuntime.jsx(Portal, { disabled: !isPortaled, children: sidebarContent });
 });
 /**
  * Container for the sidebar header.
@@ -10004,7 +10065,10 @@ function groupIntoPositionStacks(items, positionOf, containerPosition, order) {
  */
 const Toast = React.forwardRef(({ message, type = 'default', actionType, position = 'top-right', duration = 2000, indefinite = false, dismissible = true, closable = false, rounded = false, pauseOnHover = false, cancelable = true, actionText, cancelText, onAction, onClose, container, inline = false, className, ...props }, ref) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const resolveContainer = usePortalContainer();
+    // A portal has no server-rendered counterpart, so the toast renders in
+    // place on the server and while hydrating, and moves into its portal
+    // once the client takes over, as Modal's `portal` does.
+    const portal = usePortalProp(container || true);
     const [isVisible, setIsVisible] = React.useState(true);
     const [isPaused, setIsPaused] = React.useState(false);
     const toastRef = React.useRef(null);
@@ -10139,12 +10203,7 @@ const Toast = React.forwardRef(({ message, type = 'default', actionType, positio
     if (inline) {
         return toastElement;
     }
-    const toastContent = jsxRuntime.jsx("div", { className: containerClasses, children: toastElement });
-    if (typeof document !== 'undefined') {
-        const target = resolveContainer(container);
-        return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, children: toastContent }), target);
-    }
-    return null;
+    return (jsxRuntime.jsx(Portal, { disabled: !portal.isPortaled, container: portal.container, children: jsxRuntime.jsx("div", { className: containerClasses, children: toastElement }) }));
 });
 Toast.displayName = 'Toast';
 let toastId = 0;
@@ -13939,8 +13998,6 @@ const allowedColors = [...validColors, 'inherit', 'current'];
 const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isLoading, isExpanded, size, textColor, bgColor, iconLeft, iconRight, iconLeftName, iconLeftSize, iconRightName, iconRightSize, className, children, ...props }, ref) => {
     const Component = (as === 'p' ? 'p' : 'div');
     const { classPrefix } = useConfig();
-    // Remove textColor/bgColor from props before spreading
-    const { textColor: _ignoredTextColor, bgColor: _ignoredBgColor, ...restProps } = props;
     const safeTextColor = allowedColors.includes(textColor)
         ? textColor
         : undefined;
@@ -13950,7 +14007,7 @@ const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isL
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: safeTextColor,
         backgroundColor: safeBgColor,
-        ...restProps,
+        ...props,
     });
     // Prepare icon props for the shortcut. A truthiness test (not `!== undefined`)
     // so a falsy node from the idiomatic `iconLeft={cond && <Node/>}` / `iconLeft={maybe ?? null}`
@@ -13979,8 +14036,7 @@ const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isL
         [`is-${size}`]: !!size,
     });
     const controlClass = classNames(mainClass, bulmaHelperClasses, className);
-    // --- FIX: Spread both restProps (for data-testid, etc) AND rest (from useBulmaClasses) ---
-    return (jsxRuntime.jsx(ControlProvider, { value: true, children: jsxRuntime.jsxs(Component, { className: controlClass, ref: ref, ...restProps, ...rest, children: [jsxRuntime.jsx(ControlLoadingProvider, { value: !!isLoading, children: children }), leftIconValue &&
+    return (jsxRuntime.jsx(ControlProvider, { value: true, children: jsxRuntime.jsxs(Component, { className: controlClass, ref: ref, ...rest, children: [jsxRuntime.jsx(ControlLoadingProvider, { value: !!isLoading, children: children }), leftIconValue &&
                     (isIconProps(leftIconValue) ? (jsxRuntime.jsx(Icon, { ...leftIconValue, className: prefixedClassNames(classPrefix, 'is-left') })) : (jsxRuntime.jsx(Icon, { className: prefixedClassNames(classPrefix, 'is-left'), children: leftIconValue }))), rightIconValue &&
                     (isIconProps(rightIconValue) ? (jsxRuntime.jsx(Icon, { ...rightIconValue, className: prefixedClassNames(classPrefix, 'is-right') })) : (jsxRuntime.jsx(Icon, { className: prefixedClassNames(classPrefix, 'is-right'), children: rightIconValue })))] }) }));
 });
@@ -14018,8 +14074,7 @@ const FieldLabel = ({ size, textColor, bgColor, className, children, ...props })
         [`is-${size}`]: !!size,
     });
     const fieldLabelClass = classNames(mainClass, bulmaHelperClasses, className);
-    // Spread ...props and ...rest so custom props like data-testid are included
-    return (jsxRuntime.jsx("div", { className: fieldLabelClass, ...props, ...rest, children: children }));
+    return (jsxRuntime.jsx("div", { className: fieldLabelClass, ...rest, children: children }));
 };
 /**
  * FieldBody component for rendering Bulma field body.
@@ -14039,8 +14094,7 @@ const FieldBody = ({ textColor, bgColor, className, children, ...props }) => {
     });
     const mainClass = usePrefixedClassNames('field-body');
     const fieldBodyClass = classNames(mainClass, bulmaHelperClasses, className);
-    // Spread ...props and ...rest so custom props like data-testid are included
-    return (jsxRuntime.jsx("div", { className: fieldBodyClass, ...props, ...rest, children: children }));
+    return (jsxRuntime.jsx("div", { className: fieldBodyClass, ...rest, children: children }));
 };
 /**
  * The `Field` component is a Bulma-styled form field container.
@@ -21244,6 +21298,10 @@ const isBrowser = typeof window !== 'undefined';
 const PickerPopover = ({ isOpen, onClose, anchorRef, children, position, appendToBody = false, className, trapFocus = true, closeOnClickOutside = true, closeOnEscape = true, ariaLabel, ariaLabelledBy, role = 'dialog', id, restoreFocusRef, initialFocusSelector, localeScope, matchWidth = false, followContent = false, }) => {
     const panelRef = React.useRef(null);
     const resolveContainer = usePortalContainer();
+    // A portal has no server-rendered counterpart, so a panel open on the first
+    // render stays in place on the server and while hydrating, and moves into
+    // its portal once the client takes over, as Modal's `portal` does.
+    const { isPortaled } = usePortalProp(appendToBody);
     // Read as the trap turns on, once the panel's content has rendered.
     const initialFocusRef = React.useMemo(() => initialFocusSelector === undefined
         ? undefined
@@ -21345,7 +21403,7 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position, appendT
             if (closeOnEscape && e.key === 'Escape')
                 e.preventDefault();
         }, children: children }));
-    if (appendToBody && isBrowser) {
+    if (isPortaled) {
         const target = resolveContainer();
         return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, scope: localeScope, children: panel }), target);
     }
@@ -24952,8 +25010,13 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
     const monthsRowClass = usePrefixedClassNames('dateinput-months-row');
     const yearsGridClass = usePrefixedClassNames('dateinput-years-grid');
     const focusedYear = focusedDate.getFullYear();
-    const today = new Date();
-    const todayYear = today.getFullYear();
+    // Today is the reader's, so it's marked only once the page has hydrated: a
+    // server render and the render hydrating it mark no day, month or year,
+    // and the commit after marks the browser's own. A calendar mounted after
+    // hydration marks it from its first render.
+    const hydrated = useIsHydrated();
+    const today = hydrated ? new Date() : null;
+    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. A step is off once the
     // month or year on show holds the bound or lies past it, as picking a year
@@ -25190,6 +25253,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
                                     .join(' ') || undefined
                                 : undefined;
                             const isFocused = isSameDay(cell.date, tabStopDay);
+                            const isToday = hydrated && cell.isToday;
                             const otherMonth = !cell.inCurrentMonth;
                             const cellClass = prefixedClassNames(classPrefix, 'dateinput-cell', {
                                 'is-selected': isFilled,
@@ -25197,12 +25261,12 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
                                 'is-range-end': isEnd,
                                 'is-in-range': inRange,
                                 'is-preview': isPreview,
-                                'is-today': cell.isToday,
+                                'is-today': isToday,
                                 'is-disabled': disabled,
                                 'is-other-month': otherMonth,
                             });
                             const display = !otherMonth || nearbyMonthDays;
-                            return (jsxRuntime.jsx("button", { type: "button", role: "gridcell", tabIndex: isFocused ? 0 : -1, "aria-selected": isSelected, "aria-disabled": disabled, "aria-current": cell.isToday ? 'date' : undefined, "aria-describedby": describedBy, "data-focused": isFocused ? 'true' : undefined, disabled: disabled || !display, className: cellClass, onFocus: () => {
+                            return (jsxRuntime.jsx("button", { type: "button", role: "gridcell", tabIndex: isFocused ? 0 : -1, "aria-selected": isSelected, "aria-disabled": disabled, "aria-current": isToday ? 'date' : undefined, "aria-describedby": describedBy, "data-focused": isFocused ? 'true' : undefined, disabled: disabled || !display, className: cellClass, onFocus: () => {
                                     // Reached by Tab while the focused day is disabled, or
                                     // by pointer: keys move on from here. A nearby month's
                                     // day waits for its click, which turns the grid.
@@ -25227,7 +25291,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
                         const disabled = disabledMonths[month];
                         const isSelected = !!value && isSameMonth(value, date);
                         const isFocused = month === tabStopMonth;
-                        const isCurrent = isSameMonth(date, today);
+                        const isCurrent = !!today && isSameMonth(date, today);
                         const cellClass = prefixedClassNames(classPrefix, 'dateinput-month-cell', {
                             'is-selected': isSelected,
                             'is-today': isCurrent,
@@ -30462,7 +30526,7 @@ const Hero = withSubComponents(HeroComponent, {
  * @returns {JSX.Element} The rendered level.
  * @see {@link https://bulma.io/documentation/layout/level/ | Bulma Level documentation}
  */
-const LevelComponent = ({ isMobile, className, children, color, bgColor, textColor, ...props }) => {
+const LevelComponent = ({ as: Tag = 'nav', isMobile, className, children, color, bgColor, textColor, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor ?? color,
         backgroundColor: bgColor,
@@ -30472,7 +30536,7 @@ const LevelComponent = ({ isMobile, className, children, color, bgColor, textCol
         'is-mobile': isMobile,
     });
     const levelClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("nav", { className: levelClasses, ...rest, children: children }));
+    return (jsxRuntime.jsx(Tag, { className: levelClasses, ...rest, children: children }));
 };
 /**
  * Left-aligned content.