@allxsmith/bestax-bulma 5.26.2 → 5.26.3

package/dist/index.esm.js

@@ -2939,7 +2939,8 @@ function resolvePortalContainer(container) {
  * 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.
+ * trapped element, or give them a trap of their own. To trap portaled
+ * content, put `useFocusTrap`'s ref on the element inside the `Portal`.
  *
  * @function
  * @param {PortalProps} props - Props for the Portal component.
@@ -5195,7 +5196,8 @@ const focusedElement = (doc) => getDeepestActiveElement(doc) ?? doc.body;
  * 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.
+ * container, or give them a trap of their own. To trap content a `Portal`
+ * renders, pass a ref to the element inside the `Portal` as `containerRef`.
  *
  * 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
@@ -5312,6 +5314,15 @@ function useFocusTrap(containerRef, options = {}) {
 const useClientLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect;
 
 // INTERNAL: deliberately not exported from src/index.ts.
+/**
+ * A `styledGap` for a panel whose stylesheet puts the gap in a margin on the
+ * side facing the anchor, negative on a portaled panel above it, so the
+ * larger magnitude is the gap. In pixels.
+ */
+function marginGap(panel) {
+    const { marginTop, marginBottom } = getComputedStyle(panel);
+    return Math.max(Math.abs(parseFloat(marginTop)) || 0, Math.abs(parseFloat(marginBottom)) || 0);
+}
 /**
  * The corner that keeps a panel of this size in the viewport, preferring
  * below the anchor and lined up with its left edge.
@@ -5536,15 +5547,6 @@ function nearestDialog(event) {
         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.
  *
@@ -5596,7 +5598,7 @@ const PopoverComponent = ({ trigger, children, open: controlledOpen, defaultOpen
         // 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,
+        styledGap: marginGap,
     });
     // The trigger renders first inside the wrapper. Read when needed rather
     // than held, so a trigger that remounted is still the one found.
@@ -11060,7 +11062,7 @@ const TextAreaBase = forwardRef(({ color, size, isRounded, isStatic, isHovered,
 TextAreaBase.displayName = 'TextAreaBase';
 
 /**
- * The `Input` component provides a Bulma-styled text input, supporting colors, sizes, rounded corners, static/read-only state, hover/focus/loading states, and all Bulma helper props.
+ * The `Input` component provides a Bulma-styled text input, supporting colors, sizes, rounded corners, static state, hover/focus/loading states, and all Bulma helper props.
  *
  * @function
  * @param {InputProps} props - Props for Input.
@@ -11163,7 +11165,7 @@ fieldClassName, controlClassName,
 Select.displayName = 'Select';
 
 /**
- * The `TextArea` component provides a Bulma-styled multi-line text input, supporting color, size, rounded corners, static/read-only state, hover/focus/loading states, fixed size, and all Bulma helper props.
+ * The `TextArea` component provides a Bulma-styled multi-line text input, supporting color, size, hover/focus/loading states, fixed size, and all Bulma helper props.
  *
  * @function
  * @param {TextAreaProps} props - Props for TextArea.
@@ -11249,6 +11251,208 @@ const mergeLabels = (overrides) => ({
     ...(overrides ?? {}),
 });
 
+function isSameDay(a, b) {
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+function isSameMonth(a, b) {
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+function isBefore(a, b) {
+    return a.getTime() < b.getTime();
+}
+function isAfter(a, b) {
+    return a.getTime() > b.getTime();
+}
+function isWithin(d, min, max) {
+    if (min && isBefore(d, min))
+        return false;
+    if (max && isAfter(d, max))
+        return false;
+    return true;
+}
+// The boundaries build on `makeDate` (below), so a date in years 0–99 keeps
+// its year.
+function startOfDay(d) {
+    return makeDate(d.getFullYear(), d.getMonth(), d.getDate());
+}
+function endOfDay(d) {
+    const r = makeDate(d.getFullYear(), d.getMonth(), d.getDate());
+    r.setHours(23, 59, 59, 999);
+    return r;
+}
+function startOfMonth(d) {
+    return makeDate(d.getFullYear(), d.getMonth());
+}
+/**
+ * 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);
+    return r;
+}
+function addMonths(d, n) {
+    const r = new Date(d);
+    const day = r.getDate();
+    r.setDate(1);
+    r.setMonth(r.getMonth() + n);
+    // Clamp day to last day of new month if original day is out of range.
+    const lastDay = makeDate(r.getFullYear(), r.getMonth() + 1, 0).getDate();
+    r.setDate(Math.min(day, lastDay));
+    return r;
+}
+function addYears(d, n) {
+    return addMonths(d, n * 12);
+}
+function setTimeOfDay(d, parts) {
+    const r = new Date(d);
+    if (parts.hours !== undefined)
+        r.setHours(parts.hours);
+    if (parts.minutes !== undefined)
+        r.setMinutes(parts.minutes);
+    if (parts.seconds !== undefined)
+        r.setSeconds(parts.seconds);
+    return r;
+}
+function clampDate(d, min, max) {
+    if (min && isBefore(d, min))
+        return new Date(min);
+    if (max && isAfter(d, max))
+        return new Date(max);
+    return new Date(d);
+}
+/**
+ * Snap a Date's time-of-day to the nearest grid defined by the given
+ * increment steps. Used by the "Now" button in pickers configured with
+ * non-1 hour / minute / second steps so the committed time always lands on
+ * a slot that exists on the wheel. Overflows roll up: e.g.
+ * 13:58 with step=15 → 14:00. Seconds are zeroed when `enableSeconds` is
+ * false, regardless of step.
+ */
+function snapTimeToIncrement(d, opts = {}) {
+    const { incrementHours = 1, incrementMinutes = 1, incrementSeconds = 1, enableSeconds = false, } = opts;
+    const r = new Date(d);
+    let h = r.getHours();
+    let m = r.getMinutes();
+    let s = enableSeconds ? r.getSeconds() : 0;
+    if (enableSeconds && incrementSeconds > 1) {
+        s = Math.round(s / incrementSeconds) * incrementSeconds;
+        if (s >= 60) {
+            s -= 60;
+            m += 1;
+        }
+    }
+    if (incrementMinutes > 1) {
+        m = Math.round(m / incrementMinutes) * incrementMinutes;
+        if (m >= 60) {
+            m -= 60;
+            h += 1;
+        }
+    }
+    if (incrementHours > 1) {
+        h = Math.round(h / incrementHours) * incrementHours;
+        // setHours handles 24+ overflow naturally (rolls forward into next day).
+    }
+    r.setHours(h, m, s, 0);
+    return r;
+}
+/**
+ * Build a 6-week × 7-day grid (42 cells) anchored on the month containing
+ * `monthAnchor`. The first cell is the start of the week containing the first
+ * of the month, where the week starts on `firstDayOfWeek`.
+ */
+function buildMonthGrid(monthAnchor, firstDayOfWeek = 0) {
+    const monthStart = startOfMonth(monthAnchor);
+    const firstWeekday = monthStart.getDay();
+    const offset = (firstWeekday - firstDayOfWeek + 7) % 7;
+    const gridStart = addDays(monthStart, -offset);
+    const today = startOfDay(new Date());
+    const cells = [];
+    for (let i = 0; i < 42; i++) {
+        const date = addDays(gridStart, i);
+        cells.push({
+            date,
+            inCurrentMonth: date.getMonth() === monthAnchor.getMonth(),
+            isToday: isSameDay(date, today),
+        });
+    }
+    return cells;
+}
+
 const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
 const DEFAULT_MONTH_FORMAT = 'YYYY-MM';
 const DEFAULT_YEAR_FORMAT = 'YYYY';
@@ -11367,7 +11571,8 @@ _locale) {
     const hours = parts.hours ?? 0;
     const minutes = parts.minutes ?? 0;
     const seconds = parts.seconds ?? 0;
-    const d = new Date(year, month, day, hours, minutes, seconds, 0);
+    const d = makeDate(year, month, day);
+    d.setHours(hours, minutes, seconds, 0);
     if (d.getFullYear() !== year ||
         d.getMonth() !== month ||
         d.getDate() !== day) {
@@ -11533,204 +11738,11 @@ function getMonthNames(locale, length = 'long') {
     return out;
 }
 
-function isSameDay(a, b) {
-    return (a.getFullYear() === b.getFullYear() &&
-        a.getMonth() === b.getMonth() &&
-        a.getDate() === b.getDate());
-}
-function isSameMonth(a, b) {
-    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
-}
-function isBefore(a, b) {
-    return a.getTime() < b.getTime();
-}
-function isAfter(a, b) {
-    return a.getTime() > b.getTime();
-}
-function isWithin(d, min, max) {
-    if (min && isBefore(d, min))
-        return false;
-    if (max && isAfter(d, max))
-        return false;
-    return true;
-}
-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);
-    return r;
-}
-function addMonths(d, n) {
-    const r = new Date(d);
-    const day = r.getDate();
-    r.setDate(1);
-    r.setMonth(r.getMonth() + n);
-    // Clamp day to last day of new month if original day is out of range.
-    const lastDay = new Date(r.getFullYear(), r.getMonth() + 1, 0).getDate();
-    r.setDate(Math.min(day, lastDay));
-    return r;
-}
-function addYears(d, n) {
-    return addMonths(d, n * 12);
-}
-function setTimeOfDay(d, parts) {
-    const r = new Date(d);
-    if (parts.hours !== undefined)
-        r.setHours(parts.hours);
-    if (parts.minutes !== undefined)
-        r.setMinutes(parts.minutes);
-    if (parts.seconds !== undefined)
-        r.setSeconds(parts.seconds);
-    return r;
-}
-function clampDate(d, min, max) {
-    if (min && isBefore(d, min))
-        return new Date(min);
-    if (max && isAfter(d, max))
-        return new Date(max);
-    return new Date(d);
-}
-/**
- * Snap a Date's time-of-day to the nearest grid defined by the given
- * increment steps. Used by the "Now" button in pickers configured with
- * non-1 hour / minute / second steps so the committed time always lands on
- * a slot that exists on the wheel. Overflows roll up: e.g.
- * 13:58 with step=15 → 14:00. Seconds are zeroed when `enableSeconds` is
- * false, regardless of step.
- */
-function snapTimeToIncrement(d, opts = {}) {
-    const { incrementHours = 1, incrementMinutes = 1, incrementSeconds = 1, enableSeconds = false, } = opts;
-    const r = new Date(d);
-    let h = r.getHours();
-    let m = r.getMinutes();
-    let s = enableSeconds ? r.getSeconds() : 0;
-    if (enableSeconds && incrementSeconds > 1) {
-        s = Math.round(s / incrementSeconds) * incrementSeconds;
-        if (s >= 60) {
-            s -= 60;
-            m += 1;
-        }
-    }
-    if (incrementMinutes > 1) {
-        m = Math.round(m / incrementMinutes) * incrementMinutes;
-        if (m >= 60) {
-            m -= 60;
-            h += 1;
-        }
-    }
-    if (incrementHours > 1) {
-        h = Math.round(h / incrementHours) * incrementHours;
-        // setHours handles 24+ overflow naturally (rolls forward into next day).
-    }
-    r.setHours(h, m, s, 0);
-    return r;
-}
 /**
- * Build a 6-week × 7-day grid (42 cells) anchored on the month containing
- * `monthAnchor`. The first cell is the start of the week containing the first
- * of the month, where the week starts on `firstDayOfWeek`.
+ * Selects the calendar's focused cell, the one tab stop of whichever grid or
+ * year list is on show, for a popover to put focus on as it opens.
  */
-function buildMonthGrid(monthAnchor, firstDayOfWeek = 0) {
-    const monthStart = startOfMonth(monthAnchor);
-    const firstWeekday = monthStart.getDay();
-    const offset = (firstWeekday - firstDayOfWeek + 7) % 7;
-    const gridStart = addDays(monthStart, -offset);
-    const today = startOfDay(new Date());
-    const cells = [];
-    for (let i = 0; i < 42; i++) {
-        const date = addDays(gridStart, i);
-        cells.push({
-            date,
-            inCurrentMonth: date.getMonth() === monthAnchor.getMonth(),
-            isToday: isSameDay(date, today),
-        });
-    }
-    return cells;
-}
-
+const CALENDAR_FOCUSED_CELL = '[data-focused="true"], [data-focused-year="true"]';
 const BASE_VIEW = {
     day: 'days',
     month: 'months',
@@ -11776,20 +11788,32 @@ function monthStep(key, col) {
     }
 }
 /**
- * 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.
+ * Whether DOM focus should follow a grid's tab stop as it moves: focus is in
+ * the grid, or fell to <body> while the grid held it last, as it does when
+ * the focused cell leaves the page or becomes disabled. Focus is read in the
+ * grid's own tree, so this holds inside a shadow root too.
+ */
+function focusFollows(grid, heldLast) {
+    const active = getActiveElementInTree(grid);
+    if (grid.contains(active))
+        return true;
+    return heldLast && active === grid.ownerDocument.body;
+}
+/**
+ * The cell nearest index `i` that `disabled` leaves enabled, `i` itself when
+ * it is. At equal distance the later cell wins. With every cell disabled it
+ * stays `i`, 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;
+function nearestEnabled(i, disabled) {
+    if (!disabled[i])
+        return i;
+    for (let d = 1; d < disabled.length; d++) {
+        if (i + d < disabled.length && !disabled[i + d])
+            return i + d;
+        if (i - d >= 0 && !disabled[i - d])
+            return i - d;
     }
-    return month;
+    return i;
 }
 /**
  * The year list's keyboard when it is the selection surface: arrows move a
@@ -11861,6 +11885,33 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
         shouldDisableDate,
         unselectableDates,
     }), [min, max, shouldDisableDate, unselectableDates]);
+    // The day grid's one tab stop. A disabled button can't take focus, so when
+    // the focused day is disabled the stop moves to the nearest enabled day of
+    // the month on show, and focusing it makes it the focused day. A nearby
+    // month's day is left out, as focusing it would turn the grid to its month.
+    const tabStopDay = useMemo(() => {
+        const days = cells.filter(c => c.inCurrentMonth).map(c => c.date);
+        const i = nearestEnabled(focusedDate.getDate() - 1, days.map(isDateUnselectable));
+        return days[i];
+    }, [cells, focusedDate, isDateUnselectable]);
+    // Whether the grid on show holds focus, or held it last before focus went
+    // nowhere: the cell that had it left the page or became disabled. A blur
+    // that takes focus out of the grid, to nowhere included, is the user
+    // leaving, so it clears this. A render that removes or disables the focused
+    // cell sends no blur here: browsers fire none, or fire it inside React's
+    // commit, where React delivers no events.
+    const gridHeldFocusRef = useRef(false);
+    const gridFocusHandlers = {
+        onFocus: () => {
+            gridHeldFocusRef.current = true;
+        },
+        onBlur: (e) => {
+            const next = e.relatedTarget;
+            if (!next || !e.currentTarget.contains(next)) {
+                gridHeldFocusRef.current = false;
+            }
+        },
+    };
     // 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
@@ -12024,6 +12075,16 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
     // 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]);
+    // The year list's one tab stop, after the month grid's: when the focused
+    // year is disabled the stop moves to the nearest enabled year in the list,
+    // and focusing it makes it the focused year. A year outside the list keeps
+    // the stop, which then marks no option.
+    const tabStopYear = useMemo(() => {
+        const i = yearList.indexOf(focusedYear);
+        if (i < 0)
+            return focusedYear;
+        return yearList[nearestEnabled(i, yearList.map(y => disabledYears.has(y)))];
+    }, [yearList, focusedYear, disabledYears]);
     // 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)))
@@ -12031,7 +12092,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
     // 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 tabStopMonth = nearestEnabled(focusedDate.getMonth(), disabledMonths);
     const handleYearSelect = useCallback((year) => {
         const next = new Date(focusedDate);
         next.setFullYear(year);
@@ -12073,24 +12134,37 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
         e.preventDefault();
         moveYearFocus(step[0], step[1]);
     }, [isYearGranularity, baseView, focusedYear, yearList, moveYearFocus]);
+    // The day or month grid takes focus as the popover opens on it, or comes
+    // back to it from the year list.
     useEffect(() => {
-        if (view !== 'days')
+        if (!autoFocusCell)
             return;
-        if (!autoFocusCell || !gridRef.current)
+        const grid = view === 'days'
+            ? gridRef.current
+            : view === 'months'
+                ? monthGridRef.current
+                : null;
+        grid?.querySelector('[data-focused="true"]')?.focus();
+    }, [autoFocusCell, view]);
+    // From then on focus follows the tab stop only while the grid has it, or
+    // has just lost it, so focus on a header button or a time wheel stays put.
+    const tabStopDayTime = tabStopDay.getTime();
+    useEffect(() => {
+        const grid = gridRef.current;
+        if (view !== 'days' || !grid)
             return;
-        const target = gridRef.current.querySelector('[data-focused="true"]');
-        target?.focus();
-    }, [autoFocusCell, focusedDate, 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.
+        if (!focusFollows(grid, gridHeldFocusRef.current))
+            return;
+        grid.querySelector('[data-focused="true"]')?.focus();
+    }, [tabStopDayTime, view]);
     useEffect(() => {
         const grid = monthGridRef.current;
         if (view !== 'months' || !grid)
             return;
-        if (!autoFocusCell && !grid.contains(document.activeElement))
+        if (!focusFollows(grid, gridHeldFocusRef.current))
             return;
         grid.querySelector('[data-focused="true"]')?.focus();
-    }, [autoFocusCell, focusedDate, view]);
+    }, [focusedYear, tabStopMonth, view]);
     // When the year view opens as navigation, scroll the focused year into
     // view.
     useEffect(() => {
@@ -12124,15 +12198,15 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
         const list = yearGridRef.current;
         if (!isYearGranularity || !list)
             return;
-        if (!list.contains(document.activeElement))
+        if (!list.contains(getActiveElementInTree(list)))
             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 => {
+    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, ...gridFocusHandlers, children: cells.map(cell => {
                             const disabled = isDateUnselectable(cell.date);
                             const isSelected = !!value && isSameDay(value, cell.date);
-                            const isFocused = isSameDay(cell.date, focusedDate);
+                            const isFocused = isSameDay(cell.date, tabStopDay);
                             const otherMonth = !cell.inCurrentMonth;
                             const cellClass = prefixedClassNames(classPrefix, 'dateinput-cell', {
                                 'is-selected': isSelected,
@@ -12141,13 +12215,20 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
                                 'is-other-month': otherMonth,
                             });
                             const display = !otherMonth || nearbyMonthDays;
-                            return (jsx("button", { type: "button", role: "gridcell", tabIndex: isFocused ? 0 : -1, "aria-selected": isSelected, "aria-disabled": disabled, "aria-current": cell.isToday ? 'date' : undefined, "data-focused": isFocused ? 'true' : undefined, disabled: disabled || !display, className: cellClass, onClick: () => {
+                            return (jsx("button", { type: "button", role: "gridcell", tabIndex: isFocused ? 0 : -1, "aria-selected": isSelected, "aria-disabled": disabled, "aria-current": cell.isToday ? 'date' : undefined, "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.
+                                    if (!otherMonth && !isSameDay(cell.date, focusedDate)) {
+                                        onFocusedDateChange(cell.date);
+                                    }
+                                }, onClick: () => {
                                     if (disabled)
                                         return;
                                     onFocusedDateChange(cell.date);
                                     onSelect(cell.date);
                                 }, style: !display ? { visibility: 'hidden' } : undefined, children: cell.date.getDate() }, cell.date.toISOString()));
-                        }) })] })), 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 => {
+                        }) })] })), view === 'months' && (jsx("div", { ref: monthGridRef, role: "grid", "aria-labelledby": labelId, className: monthsGridClass, onKeyDown: handleMonthKeyDown, ...gridFocusHandlers, 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);
@@ -12169,7 +12250,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, 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 isFocused = year === tabStopYear;
                     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.
@@ -12182,7 +12263,13 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
                         'is-today': isToday,
                         'is-disabled': disabled,
                     });
-                    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
+                    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, onFocus: () => {
+                            // Reached by Tab while the focused year is disabled, or by
+                            // pointer: keys move on from here.
+                            if (isYearGranularity && year !== focusedYear) {
+                                onFocusedDateChange(clampDate(makeDate(year), min, max));
+                            }
+                        }, onClick: () => isYearGranularity
                             ? handleYearPick(year)
                             : handleYearSelect(year), children: year }, year));
                 }) }))] }));
@@ -12190,12 +12277,26 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
 Calendar.displayName = 'Calendar';
 
 const isBrowser = typeof window !== 'undefined';
-const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'bottom-left', appendToBody = false, className, trapFocus = true, closeOnClickOutside = true, closeOnEscape = true, ariaLabel, ariaLabelledBy, role = 'dialog', id, restoreFocusRef, }) => {
+const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'bottom-left', appendToBody = false, className, trapFocus = true, closeOnClickOutside = true, closeOnEscape = true, ariaLabel, ariaLabelledBy, role = 'dialog', id, restoreFocusRef, initialFocusSelector, }) => {
     const panelRef = useRef(null);
+    // Read as the trap turns on, once the panel's content has rendered.
+    const initialFocusRef = useMemo(() => initialFocusSelector === undefined
+        ? undefined
+        : {
+            get current() {
+                return (panelRef.current?.querySelector(initialFocusSelector) ?? null);
+            },
+        }, [initialFocusSelector]);
     const resolved = useAnchoredPosition(anchorRef, panelRef, {
         active: isOpen,
         position,
         fixed: appendToBody,
+        // A portaled panel takes its gap from `--bulma-picker-popover-offset` as
+        // a margin, so its coordinates leave the gap out and `auto` reads it off
+        // the panel. An in-place panel's gap is in its `top` or `bottom`, which
+        // `auto` cannot read, so it keeps the hook's default estimate.
+        offset: appendToBody ? 0 : undefined,
+        styledGap: marginGap,
     });
     useEffect(() => {
         if (!isOpen || !closeOnClickOutside || !isBrowser)
@@ -12229,6 +12330,7 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
     }, [isOpen, closeOnEscape, onClose]);
     useFocusTrap(panelRef, {
         active: isOpen && trapFocus,
+        initialFocusRef,
         restoreFocus: restoreFocusRef ?? true,
     });
     const panelClass = usePrefixedClassNames('picker-popover', {
@@ -12408,8 +12510,11 @@ function buildSegmentMap(format) {
 // ---------------------------------------------------------------------------
 const wrap$1 = (n, max) => ((n % max) + max) % max;
 const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
-/** Number of days in the month of `d` (handles leap Februarys). */
-const daysInMonth = (d) => new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
+/**
+ * Number of days in the month of `d` (handles leap Februarys). Built on
+ * `makeDate`, so a year below 100 keeps its own leap rule.
+ */
+const daysInMonth = (d) => makeDate(d.getFullYear(), d.getMonth() + 1, 0).getDate();
 /**
  * Returns a new Date with the given segment incremented (`delta` = +1 or -1).
  * Wraps at segment boundaries: year is unbounded, month 0↔11 (in place, no
@@ -13017,16 +13122,19 @@ const toIsoValue = (d, granularity) => {
     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. */
+/**
+ * Read a native `type="date"` or `type="month"` value back into a Date. HTML
+ * allows a year of four or more digits, as `toIsoValue` writes one past 9999.
+ */
 const fromIsoValue = (s, granularity) => {
     if (granularity === 'month') {
-        const m = /^(\d{4})-(\d{2})$/.exec(s);
+        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);
+    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]));
+    return makeDate(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
 };
 const DEFAULT_FORMATS = {
     day: DEFAULT_DATE_FORMAT,
@@ -13090,16 +13198,20 @@ const DateInputBase = forwardRef((props, ref) => {
     });
     const containerClass = usePrefixedClassNames('dateinput-container');
     const triggerClass = usePrefixedClassNames('dateinput-trigger');
+    // What the latest request asked for, so a second request in the same
+    // event sees it before React renders. The callbacks fire here rather than
+    // in a state updater, which StrictMode calls twice, and after the state
+    // is set, so a request a callback makes is the one that lands last.
+    const requestedOpenRef = useRef(false);
     const setOpen = useCallback((next) => {
-        setOpenState(prev => {
-            if (prev === next)
-                return prev;
-            if (next)
-                onOpen?.();
-            else
-                onClose?.();
-            return next;
-        });
+        if (requestedOpenRef.current === next)
+            return;
+        requestedOpenRef.current = next;
+        setOpenState(next);
+        if (next)
+            onOpen?.();
+        else
+            onClose?.();
     }, [onOpen, onClose]);
     // Sync displayed text with value when value changes externally.
     useEffect(() => {
@@ -13244,14 +13356,14 @@ const DateInputBase = forwardRef((props, ref) => {
             : 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));
+    , { 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}-cal`, 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 ? 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": 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, restoreFocusRef: inputRef, 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, restoreFocusRef: inputRef, initialFocusSelector: CALENDAR_FOCUSED_CELL, children: calendar }))] }));
 });
 DateInputBase.displayName = 'DateInputBase';
 
@@ -14224,19 +14336,23 @@ const TimeInputBase = forwardRef((props, ref) => {
     const mobileFooterClass = usePrefixedClassNames('timeinput-footer-mobile');
     const mobileFooterResetClass = usePrefixedClassNames('timeinput-footer-reset');
     const mobileFooterDoneClass = usePrefixedClassNames('timeinput-footer-done');
+    // What the latest request asked for, so a second request in the same
+    // event sees it before React renders. The callbacks fire here rather than
+    // in a state updater, which StrictMode calls twice, and after the state
+    // is set, so a request a callback makes is the one that lands last.
+    const requestedOpenRef = useRef(false);
     const setOpen = useCallback((next) => {
-        setOpenState(prev => {
-            if (prev === next)
-                return prev;
-            if (next) {
-                valueAtOpenRef.current = value;
-                onOpen?.();
-            }
-            else {
-                onClose?.();
-            }
-            return next;
-        });
+        if (requestedOpenRef.current === next)
+            return;
+        requestedOpenRef.current = next;
+        setOpenState(next);
+        if (next) {
+            valueAtOpenRef.current = value;
+            onOpen?.();
+        }
+        else {
+            onClose?.();
+        }
     }, [onOpen, onClose, value]);
     useEffect(() => {
         setText(value ? formatTime(value, defaultFormat, locale) : '');
@@ -14392,8 +14508,9 @@ const TimeInput = forwardRef(({ label, labelSize, labelProps, horizontal, iconLe
 });
 TimeInput.displayName = 'TimeInput';
 
+// The year is padded to four digits, as `datetime-local` requires.
 const toIsoDateTime = (d, withSeconds) => {
-    const yyyy = d.getFullYear();
+    const yyyy = String(d.getFullYear()).padStart(4, '0');
     const mo = String(d.getMonth() + 1).padStart(2, '0');
     const dd = String(d.getDate()).padStart(2, '0');
     const hh = String(d.getHours()).padStart(2, '0');
@@ -14406,10 +14523,13 @@ const toIsoDateTime = (d, withSeconds) => {
 const fromIsoDateTime = (s) => {
     // The HTML datetime-local value may carry fractional seconds (the spec
     // allows them and some engines normalize to `:ss.sss`); accept and drop.
-    const m = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2})(?:\.\d{1,3})?)?$/.exec(s);
+    // Its year is four or more digits, as `toIsoDateTime` writes one past 9999.
+    const m = /^(\d{4,})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2})(?:\.\d{1,3})?)?$/.exec(s);
     if (!m)
         return null;
-    return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]), Number(m[4]), Number(m[5]), m[6] ? Number(m[6]) : 0, 0);
+    const d = makeDate(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+    d.setHours(Number(m[4]), Number(m[5]), m[6] ? Number(m[6]) : 0, 0);
+    return d;
 };
 /**
  * Raw DateTimeInput — combined input + calendar + time spinner without
@@ -14496,19 +14616,23 @@ const DateTimeInputBase = forwardRef((props, ref) => {
     const footerResetClass = usePrefixedClassNames('datetimeinput-footer-reset');
     const footerDoneClass = usePrefixedClassNames('datetimeinput-footer-done');
     const footerTimePillClass = usePrefixedClassNames('datetimeinput-footer-time-pill');
+    // What the latest request asked for, so a second request in the same event
+    // sees it before React renders. The callbacks fire here rather than in a
+    // state updater, which StrictMode calls twice, and after the state is set,
+    // so a request a callback makes is the one that lands last.
+    const requestedOpenRef = useRef(false);
     const setOpen = useCallback((next) => {
-        setOpenState(prev => {
-            if (prev === next)
-                return prev;
-            if (next) {
-                valueAtOpenRef.current = value;
-                onOpen?.();
-            }
-            else {
-                onClose?.();
-            }
-            return next;
-        });
+        if (requestedOpenRef.current === next)
+            return;
+        requestedOpenRef.current = next;
+        setOpenState(next);
+        if (next) {
+            valueAtOpenRef.current = value;
+            onOpen?.();
+        }
+        else {
+            onClose?.();
+        }
     }, [onOpen, onClose, value]);
     useEffect(() => {
         setText(value ? formatDateTime(value, defaultFormat, locale) : '');
@@ -14638,7 +14762,7 @@ const DateTimeInputBase = forwardRef((props, ref) => {
     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.chooseDateTime, "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: () => setOpen(false), anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseDateTime, id: popoverId, restoreFocusRef: inputRef, children: panel }))] }));
+                }, disabled: !canOpen, "aria-label": t.chooseDateTime, "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: () => setOpen(false), anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseDateTime, id: popoverId, restoreFocusRef: inputRef, initialFocusSelector: CALENDAR_FOCUSED_CELL, children: panel }))] }));
 });
 DateTimeInputBase.displayName = 'DateTimeInputBase';
 
@@ -15620,31 +15744,57 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode,
     // rewrites the shared element in place rather than removing and recreating
     // it between the cleanup and the next run.
     useEffect(() => () => setRootThemeRules(rootOrder, ''), [rootOrder]);
-    // Toggle Bulma's light/dark scheme by writing the `data-theme` attribute on
-    // the document root (<html>). This is always global, even on a scoped Theme.
-    // `'system'` removes the attribute so Bulma follows the OS preference.
+    // Bulma names its scheme attribute after the class prefix a stylesheet was
+    // built with (`data-<prefix>theme`), so the prefixed builds read
+    // `data-bestax-theme` and never `data-theme`.
+    const classPrefix = useClassPrefix();
+    // Toggle Bulma's light/dark scheme by writing the theme attribute on the
+    // document root (<html>). This is always global, even on a scoped Theme.
+    // Under a class prefix the prefixed attribute is written as well as
+    // `data-theme`, so whichever build is loaded sees it; with no prefix only
+    // `data-theme` is. `'system'` removes them so Bulma follows the OS
+    // preference.
     useEffect(() => {
         if (colorMode === undefined) {
             return;
         }
         const root = document.documentElement;
-        const previous = root.getAttribute('data-theme');
-        if (colorMode === 'system') {
-            root.removeAttribute('data-theme');
-        }
-        else {
-            root.setAttribute('data-theme', colorMode);
-        }
-        // Restore the previous value when colorMode changes or the component unmounts.
-        return () => {
-            if (previous === null) {
-                root.removeAttribute('data-theme');
+        const names = classPrefix
+            ? ['data-theme', `data-${classPrefix}theme`]
+            : ['data-theme'];
+        const previous = names.map(name => root.getAttribute(name));
+        for (const name of names) {
+            if (colorMode === 'system') {
+                root.removeAttribute(name);
+                continue;
             }
-            else {
-                root.setAttribute('data-theme', previous);
+            try {
+                root.setAttribute(name, colorMode);
+            }
+            catch {
+                // A class prefix can hold characters an attribute name cannot.
+                // `data-theme` is still written, as it was before the prefixed
+                // attribute existed, but a sheet built with that prefix keeps its
+                // scheme, so say so.
+                warnOnce('Theme:color-mode-prefix', `[bestax-bulma] <Theme colorMode="${colorMode}">: the class ` +
+                    `prefix "${classPrefix}" makes ${name} an invalid attribute ` +
+                    'name, so only data-theme is written, and a stylesheet built ' +
+                    'with that prefix keeps its scheme.');
             }
+        }
+        // Restore the previous values when colorMode changes or the component unmounts.
+        return () => {
+            names.forEach((name, i) => {
+                const value = previous[i];
+                if (value === null) {
+                    root.removeAttribute(name);
+                }
+                else {
+                    root.setAttribute(name, value);
+                }
+            });
         };
-    }, [colorMode]);
+    }, [colorMode, classPrefix]);
     // For local injection (when isRoot is false), prepare style object for CSS vars
     const style = useMemo(() => {
         if (isRoot) {