@allxsmith/bestax-bulma 5.26.2 → 5.26.4

package/dist/index.cjs

@@ -2941,7 +2941,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.
@@ -5197,12 +5198,20 @@ 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.
- *
- * 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.
+ * 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 trap looks at `containerRef` again each time the component calling it
+ * renders. A container that mounts after the trap turns on, such as a panel
+ * waiting for a `Portal` target held in state, has it attach once that
+ * component renders with the container in the DOM. When the container leaves
+ * or is replaced, the trap lets go of it as it would turning off, handing
+ * focus back, and attaches to the next one.
+ * A child that mounts the container in a render of its own (from its own
+ * state, or as a `Suspense` boundary resolves) goes unseen until the
+ * component calling the hook renders again. The trap waits for hydration, so
+ * that component renders again when the page hydrates, and portaled content,
+ * which first appears then, is found.
  *
  * @function useFocusTrap
  * @param containerRef - Ref to the element focus stays inside.
@@ -5222,12 +5231,18 @@ function useFocusTrap(containerRef, options = {}) {
     // Portaled content has no server-rendered counterpart, so a portaled
     // container only exists from the commit after hydration.
     const hydrated = useIsHydrated();
+    // The container the trap is attached to, or `null` while it has none.
+    const heldRef = React.useRef(null);
+    // Bumped to run the trap again when the container in the ref changes.
+    const [refChanges, setRefChanges] = React.useState(0);
     React.useEffect(() => {
+        heldRef.current = null;
         if (!active || !hydrated)
             return undefined;
         const container = containerRef.current;
         if (!container)
             return undefined;
+        heldRef.current = container;
         const doc = container.ownerDocument;
         const opener = focusedElement(doc);
         // `initialFocusRef` counts only when focusing it puts focus inside. Focus
@@ -5302,7 +5317,28 @@ function useFocusTrap(containerRef, options = {}) {
                 target.focus();
             }
         };
-    }, [active, hydrated, containerRef, initialFocusRef, restoreFocus]);
+    }, [
+        active,
+        hydrated,
+        containerRef,
+        initialFocusRef,
+        restoreFocus,
+        refChanges,
+    ]);
+    // Nothing says when a ref is set, so after every render, a ref that no
+    // longer matches what the trap holds (a container that mounted, left or was
+    // replaced) runs it again. Effects run in order, so whenever the effect
+    // above ran in this commit, it read the ref just before this does, and a
+    // mismatch means the ref changed in a render it didn't run for. The render
+    // a bump asks for runs it, so the two match and the trap settles. An empty
+    // ref matches a trap holding nothing, so a container that never mounts
+    // costs no render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- after every render on purpose
+    React.useEffect(() => {
+        if (active && hydrated && containerRef.current !== heldRef.current) {
+            setRefChanges(n => n + 1);
+        }
+    });
 }
 
 // INTERNAL: deliberately not exported from src/index.ts.
@@ -5314,6 +5350,15 @@ function useFocusTrap(containerRef, options = {}) {
 const useClientLayoutEffect = typeof document === 'undefined' ? React.useEffect : React.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.
@@ -5538,15 +5583,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.
  *
@@ -5598,7 +5634,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.
@@ -8735,6 +8771,56 @@ const useInsideControl = () => React.useContext(ControlContext);
 const FieldProvider = FieldContext.Provider;
 /** Provider for Control context — used internally by Control component. */
 const ControlProvider = ControlContext.Provider;
+// Each Field-shaping prop, with what takes its place on a `Field` the caller
+// wraps around the `Control`. `message` needs nothing there, because the
+// wrapper still renders it inside `Field > Control`. The other Field-level
+// props (`labelSize`, `labelProps`, `messageColor`) change nothing unless a
+// `label` or `message` renders, so on their own they keep no `Field`.
+// `bare-control.test.tsx` holds this list to what each wrapper hands its
+// `Field` and to which props change its markup, so a new Field-level prop
+// fails there until it is sorted into one group or the other.
+const FIELD_SHAPING = [
+    ['label', 'label'],
+    ['message', undefined],
+    ['horizontal', 'horizontal'],
+    ['fieldClassName', 'className (for fieldClassName)'],
+];
+/** `a`, `a and b`, `a, b and c`. */
+const listOf = (items) => items.length > 1
+    ? `${items.slice(0, -1).join(', ')} and ${items[items.length - 1]}`
+    : items[0];
+/**
+ * Whether a convenience form wrapper renders a `Field` of its own (#905).
+ * Never inside an outer `Field`. Inside a `Control` with no `Field` around
+ * it, a `Field` of its own would put a `.field` inside the `.control`, where
+ * Bulma's control styles break (its icon rules are sibling selectors on the
+ * input). So it renders one there only when a prop that shapes the `Field`'s
+ * markup is set (`label`, `message`, `horizontal`, `fieldClassName`), keeping
+ * the markup it always had, and warns in development that the fix is a
+ * `Field` around that `Control`. A prop counts when it is truthy, the same
+ * test that decides whether it changes the `Field`'s output.
+ * Internal; not part of the public API.
+ */
+const rendersOwnField = (component, options) => {
+    if (options.insideField)
+        return false;
+    if (!options.insideControl)
+        return true;
+    const held = FIELD_SHAPING.filter(([prop]) => options[prop]);
+    if (held.length === 0)
+        return false;
+    const names = held.map(([prop]) => prop);
+    const moved = held
+        .map(([, onField]) => onField)
+        .filter((onField) => onField !== undefined);
+    warnOnce(`${component}:Field-in-bare-Control:${names.join('+')}`, `[bestax-bulma] <${component} ${names.join(' ')}> inside a <Control> ` +
+        `with no <Field> around it renders its own <Field> for ` +
+        `${names.length > 1 ? 'those props' : 'that prop'}, which puts a ` +
+        `.field inside the .control, a nesting Bulma's styles are not ` +
+        `written for. Wrap the <Control> in a <Field> instead` +
+        (moved.length > 0 ? `, and set ${listOf(moved)} on that <Field>.` : '.'));
+    return true;
+};
 const FieldLabelIdContext = React.createContext(undefined);
 /**
  * The id a labeled Field wants its single composed control to adopt (#495).
@@ -8865,6 +8951,18 @@ const Checkbox = React.forwardRef(({ color, size, className, children, textColor
 });
 Checkbox.displayName = 'Checkbox';
 
+// Whether the nearest enclosing `Control` shows its `isLoading` spinner. The
+// picker bases read it so their right-side launcher gives way to that
+// spinner, which sits at the same edge, whether the `Control` is the one a
+// convenience input renders or one the caller wrapped around the input.
+// Kept apart from `FormContext`, whose contexts only report whether a `Field`
+// or `Control` is present. Internal; not part of the public API.
+const ControlLoadingContext = React.createContext(false);
+/** Provider for the loading state, used internally by `Control`. */
+const ControlLoadingProvider = ControlLoadingContext.Provider;
+/** Whether the nearest enclosing `Control` is loading; `false` outside one. */
+const useControlLoading = () => React.useContext(ControlLoadingContext);
+
 const allowedColors = [...validColors, 'inherit', 'current'];
 /**
  * The `Control` component is a Bulma-styled wrapper for form controls (`Input`, `Select`, `TextArea`, etc.), supporting icons (left/right), loading state, expansion, size, and Bulma helper props for layout and color.
@@ -8924,7 +9022,7 @@ const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isL
     });
     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: [children, leftIconValue &&
+    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 &&
                     (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 })))] }) }));
 });
@@ -9149,10 +9247,18 @@ function useAutoLabelledBy({ label, labelProps, rendersLabel, }) {
 const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, name, value, defaultValue, onChange, children, className, ...props }) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const ownField = rendersOwnField('Checkboxes', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
     const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({
         label,
         labelProps,
-        rendersLabel: !insideField,
+        rendersLabel: ownField,
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
@@ -9181,7 +9287,7 @@ const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message
     if (!insideControl) {
         content = jsxRuntime.jsx(Control, { children: content });
     }
-    if (!insideField) {
+    if (ownField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
@@ -9200,11 +9306,20 @@ const File = React.forwardRef(({
 // Field props
 label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, color, size, isBoxed, isFullwidth, isFullWidth, isRight, isCentered, hasName, buttonLabel, iconLeft, iconRight, className, inputClassName, fileName, ...props }, ref) => {
     const insideField = useInsideField();
+    const insideControl = useInsideControl();
+    const ownField = rendersOwnField('File', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
     const { controlId, fieldLabelProps } = useAutoLabelId({
         label,
         id: props.id,
         labelProps,
-        rendersLabel: !insideField,
+        rendersLabel: ownField,
     });
     const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -9236,7 +9351,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     });
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
     const fileElement = (jsxRuntime.jsx("div", { className: fileClass, children: jsxRuntime.jsxs("label", { className: usePrefixedClassNames('file-label'), children: [jsxRuntime.jsx("input", { ref: ref, className: classNames(usePrefixedClassNames('file-input'), inputClassName), type: "file", id: controlId, ...rest }), jsxRuntime.jsxs("span", { className: usePrefixedClassNames('file-cta'), children: [iconLeft && (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'file-icon'), children: iconLeft })), jsxRuntime.jsx("span", { className: usePrefixedClassNames('file-label'), children: buttonLabel || 'Choose a file\u2026' }), iconRight && (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'file-icon'), children: iconRight }))] }), hasName && fileName && (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'file-name'), children: fileName }))] }) }));
-    if (!insideField) {
+    if (ownField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [fileElement, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [fileElement, messageEl] }));
@@ -9369,10 +9484,18 @@ Radio.displayName = 'Radio';
 const RadiosComponent = ({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, name, value, defaultValue, onChange, children, className, ...props }) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const ownField = rendersOwnField('Radios', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
     const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({
         label,
         labelProps,
-        rendersLabel: !insideField,
+        rendersLabel: ownField,
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
@@ -9404,7 +9527,7 @@ const RadiosComponent = ({ label, labelSize, labelProps, horizontal, message, me
     if (!insideControl) {
         content = jsxRuntime.jsx(Control, { children: content });
     }
-    if (!insideField) {
+    if (ownField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
@@ -9584,6 +9707,14 @@ const Slider = React.forwardRef((props, ref) => {
     range: _range, value: _value, defaultValue: _defaultValue, onChange: _onChange, ariaLabel: _ariaLabel, minDistance: _minDistance, nameLow: _nameLow, nameHigh: _nameHigh, ...restProps } = props;
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const ownField = rendersOwnField('Slider', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
     const { bulmaHelperClasses, rest } = useBulmaClasses(restProps);
     // In range mode the low thumb carries `rest` (and any user id), so the
     // label targets it; each thumb keeps its own aria-label for AT.
@@ -9591,7 +9722,7 @@ const Slider = React.forwardRef((props, ref) => {
         label,
         id: restProps.id,
         labelProps,
-        rendersLabel: !insideField,
+        rendersLabel: ownField,
     });
     // Resolve tooltip mode: explicit tooltip prop takes precedence, else showOutput maps to 'auto'
     const tooltipMode = tooltip ?? (showOutput ? 'auto' : 'hidden');
@@ -9930,7 +10061,7 @@ const Slider = React.forwardRef((props, ref) => {
     if (!insideControl) {
         content = jsxRuntime.jsx(Control, { children: content });
     }
-    if (!insideField) {
+    if (ownField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
@@ -10160,10 +10291,18 @@ function getFillPercent(iconIndex, value) {
 const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = 0, max = 5, size, disabled = false, showScore = false, showText = false, texts, onChange, customIcon, spaced = false, rtl = false, iconName, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, precision = 1, customText, name, form, className, ...props }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const ownField = rendersOwnField('Rate', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
     const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({
         label,
         labelProps,
-        rendersLabel: !insideField,
+        rendersLabel: ownField,
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const [internalValue, setInternalValue] = React.useState(defaultValue);
@@ -10366,7 +10505,7 @@ const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, messa
     if (!insideControl) {
         content = jsxRuntime.jsx(Control, { children: content });
     }
-    if (!insideField) {
+    if (ownField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
@@ -10647,6 +10786,15 @@ const Taginput = React.forwardRef(({
 // Field props
 label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = [], data = [], placeholder, field = 'label', allowNew = true, allowDuplicates = false, openOnFocus = false, removeOnKeys = true, confirmKeys = ['Enter', ','], closable = true, attached = false, maxTags, maxlength, disabled = false, readonly = false, rounded = false, ellipsis = false, hasCounter = true, onPasteSeparators = [','], beforeAdding, createTag, keepFirst = false, keepOpen = true, loading = false, ariaCloseLabel, icon, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, tagColor, size, onChange, onAdd, onRemove, onTyping, tagTemplate, name, form, id, className, ...props }, ref) => {
     const insideField = useInsideField();
+    const insideControl = useInsideControl();
+    const ownField = rendersOwnField('Taginput', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const { classPrefix } = useConfig();
     const defaultIconLibrary = useIconLibrary();
@@ -10668,7 +10816,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         label,
         id,
         labelProps,
-        rendersLabel: !insideField && !isMaxReached,
+        rendersLabel: ownField && !isMaxReached,
     });
     // Get display value from tag
     const getDisplayValue = (tag) => {
@@ -10940,7 +11088,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
                             'is-active': index === highlightedIndex,
                         }), onClick: () => addTag(item), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": index === highlightedIndex, children: item }, index))) }) })), showCounter && jsxRuntime.jsx("small", { className: counterClasses, children: counterText }), name &&
                 tags.map((tag, i) => (jsxRuntime.jsx("input", { type: "hidden", name: name, value: getDisplayValue(tag), form: form }, `tag-input-${i}`)))] }));
-    if (!insideField) {
+    if (ownField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [taginputElement, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [taginputElement, messageEl] }));
@@ -11062,7 +11210,7 @@ const TextAreaBase = React.forwardRef(({ color, size, isRounded, isStatic, isHov
 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.
@@ -11093,11 +11241,19 @@ fieldClassName, controlClassName,
 ...inputProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const ownField = rendersOwnField('Input', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
     const { controlId, fieldLabelProps } = useAutoLabelId({
         label,
         id: inputProps.id,
         labelProps,
-        rendersLabel: !insideField,
+        rendersLabel: ownField,
     });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
@@ -11107,7 +11263,7 @@ fieldClassName, controlClassName,
         content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
-    if (!insideField) {
+    if (ownField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
@@ -11143,11 +11299,19 @@ fieldClassName, controlClassName,
 ...selectProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const ownField = rendersOwnField('Select', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
     const { controlId, fieldLabelProps } = useAutoLabelId({
         label,
         id: selectProps.id,
         labelProps,
-        rendersLabel: !insideField,
+        rendersLabel: ownField,
     });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
@@ -11157,7 +11321,7 @@ fieldClassName, controlClassName,
         content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconLeftName: iconLeftName, iconLeftSize: iconLeftSize, hasIconsLeft: hasIconsLeft, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
-    if (!insideField) {
+    if (ownField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
@@ -11165,7 +11329,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.
@@ -11194,11 +11358,19 @@ fieldClassName, controlClassName,
 ...textAreaProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const ownField = rendersOwnField('TextArea', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
     const { controlId, fieldLabelProps } = useAutoLabelId({
         label,
         id: textAreaProps.id,
         labelProps,
-        rendersLabel: !insideField,
+        rendersLabel: ownField,
     });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
@@ -11208,7 +11380,7 @@ fieldClassName, controlClassName,
         content = (jsxRuntime.jsx(Control, { isLoading: controlIsLoading, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
-    if (!insideField) {
+    if (ownField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
@@ -11251,355 +11423,90 @@ const mergeLabels = (overrides) => ({
     ...(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';
-const pad = (n, width = 2) => String(n).padStart(width, '0');
-const TOKEN_RE = /YYYY|YY|MM|M|DD|D|HH|H|hh|h|mm|m|ss|s|A|a/g;
-function formatToken(d, token) {
-    switch (token) {
-        case 'YYYY':
-            // Zero-pad to a fixed 4 chars so the rendered width matches the
-            // segment-map width during digit-by-digit keyboard entry (and to match
-            // ISO 8601). Years >9999 keep their natural width.
-            return pad(d.getFullYear(), 4);
-        case 'YY':
-            return pad(d.getFullYear() % 100);
-        case 'MM':
-            return pad(d.getMonth() + 1);
-        case 'M':
-            return String(d.getMonth() + 1);
-        case 'DD':
-            return pad(d.getDate());
-        case 'D':
-            return String(d.getDate());
-        case 'HH':
-            return pad(d.getHours());
-        case 'H':
-            return String(d.getHours());
-        case 'hh': {
-            const h12 = d.getHours() % 12 || 12;
-            return pad(h12);
-        }
-        case 'h': {
-            const h12 = d.getHours() % 12 || 12;
-            return String(h12);
-        }
-        case 'mm':
-            return pad(d.getMinutes());
-        case 'm':
-            return String(d.getMinutes());
-        case 'ss':
-            return pad(d.getSeconds());
-        case 's':
-            return String(d.getSeconds());
-        case 'A':
-            return d.getHours() < 12 ? 'AM' : 'PM';
-        case 'a':
-            return d.getHours() < 12 ? 'am' : 'pm';
-        default:
-            return token;
-    }
+function isSameDay(a, b) {
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
 }
-function formatTokenString(d, fmt) {
-    return fmt.replace(TOKEN_RE, t => formatToken(d, t));
+function isSameMonth(a, b) {
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
 }
-function formatWithIntl(d, options, locale) {
-    return new Intl.DateTimeFormat(locale, options).format(d);
+function isBefore(a, b) {
+    return a.getTime() < b.getTime();
 }
-function formatDate(d, fmt, locale) {
-    const f = fmt ?? DEFAULT_DATE_FORMAT;
-    if (typeof f === 'string')
-        return formatTokenString(d, f);
-    return formatWithIntl(d, f, locale);
+function isAfter(a, b) {
+    return a.getTime() > b.getTime();
 }
-function formatTime(d, fmt, locale) {
-    const f = fmt ?? DEFAULT_TIME_FORMAT_24;
-    if (typeof f === 'string')
-        return formatTokenString(d, f);
-    return formatWithIntl(d, f, locale);
+function isWithin(d, min, max) {
+    if (min && isBefore(d, min))
+        return false;
+    if (max && isAfter(d, max))
+        return false;
+    return true;
 }
-function formatDateTime(d, fmt, locale) {
-    const f = fmt ?? DEFAULT_DATETIME_FORMAT;
-    if (typeof f === 'string')
-        return formatTokenString(d, f);
-    return formatWithIntl(d, f, locale);
+// 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());
 }
 /**
- * Derive the hour cycle (`'12'` or `'24'`) a display format will render, from
- * its first hour token: `h`/`hh` → 12-hour with meridiem, `H`/`HH` → 24-hour.
- *
- * Returns `null` when the cycle can't be read from the format — it's an
- * `Intl.DateTimeFormat` options object (no token string), `undefined`, or has
- * no hour token — so callers fall back to the raw `hourFormat` prop. Scans with
- * the same {@link TOKEN_RE} grammar the input renders with, so the derived cycle
- * always agrees with what the field actually displays.
+ * 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 hourCycleFromFormat(fmt) {
-    if (typeof fmt !== 'string')
-        return null;
-    for (const [token] of fmt.matchAll(TOKEN_RE)) {
-        if (token === 'H' || token === 'HH')
-            return '24';
-        if (token === 'h' || token === 'hh')
-            return '12';
-    }
-    return null;
+function makeDate(year, month = 0, day = 1) {
+    const d = new Date(2000, 0, 1);
+    d.setFullYear(year, month, day);
+    return d;
 }
 /**
- * Parse a date string against a token format. Returns null on mismatch.
- * For Intl-options formats parsing is the consumer's responsibility — pass
- * a custom `parse` prop on the picker.
+ * The earliest year the pickers accept. HTML's date, month and datetime-local
+ * inputs hold no year below 1, so the calendar, typing and parsing stop there
+ * too.
  */
-function parseDate(s, fmt, 
-// locale arg accepted for symmetry; locale-aware parsing is not supported.
-_locale) {
-    if (!s)
-        return null;
-    const format = fmt ?? DEFAULT_DATE_FORMAT;
-    const parts = parseTokens(s, format);
-    if (!parts)
-        return null;
-    const year = parts.year ?? new Date().getFullYear();
-    const month = (parts.month ?? 1) - 1;
-    const day = parts.day ?? 1;
-    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);
-    if (d.getFullYear() !== year ||
-        d.getMonth() !== month ||
-        d.getDate() !== day) {
-        return null;
-    }
-    return d;
+const FIRST_YEAR = 1;
+/**
+ * The lower bound a picker applies: `min`, raised to local midnight on
+ * 1 January of {@link FIRST_YEAR} when it is earlier or absent. A `min` in
+ * range comes back as the same object.
+ */
+function floorMin(min) {
+    const floor = makeDate(FIRST_YEAR);
+    return min && min.getTime() >= floor.getTime() ? min : floor;
 }
-function parseTime(s, fmt) {
-    if (!s)
-        return null;
-    const format = fmt ?? DEFAULT_TIME_FORMAT_24;
-    const parts = parseTokens(s, format);
-    if (!parts)
-        return null;
-    const today = new Date();
-    return new Date(today.getFullYear(), today.getMonth(), today.getDate(), parts.hours ?? 0, parts.minutes ?? 0, parts.seconds ?? 0, 0);
+/**
+ * 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;
 }
-function escapeRegExp(s) {
-    return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-function parseTokens(input, fmt) {
-    const tokenOrder = [];
-    let regex = '';
-    let i = 0;
-    while (i < fmt.length) {
-        const four = fmt.slice(i, i + 4);
-        const two = fmt.slice(i, i + 2);
-        const one = fmt[i];
-        let token = null;
-        if (four === 'YYYY')
-            token = 'YYYY';
-        else if (two === 'YY' ||
-            two === 'MM' ||
-            two === 'DD' ||
-            two === 'HH' ||
-            two === 'hh' ||
-            two === 'mm' ||
-            two === 'ss')
-            token = two;
-        else if (one === 'M' ||
-            one === 'D' ||
-            one === 'H' ||
-            one === 'h' ||
-            one === 'm' ||
-            one === 's' ||
-            one === 'A' ||
-            one === 'a')
-            token = one;
-        if (token) {
-            tokenOrder.push(token);
-            switch (token) {
-                case 'YYYY':
-                    regex += '(\\d{4})';
-                    break;
-                case 'YY':
-                    regex += '(\\d{2})';
-                    break;
-                case 'MM':
-                case 'DD':
-                case 'HH':
-                case 'hh':
-                case 'mm':
-                case 'ss':
-                    regex += '(\\d{1,2})';
-                    break;
-                case 'M':
-                case 'D':
-                case 'H':
-                case 'h':
-                case 'm':
-                case 's':
-                    regex += '(\\d{1,2})';
-                    break;
-                case 'A':
-                    regex += '(AM|PM)';
-                    break;
-                case 'a':
-                    regex += '(am|pm)';
-                    break;
-            }
-            i += token.length;
-        }
-        else {
-            regex += escapeRegExp(one);
-            i += 1;
-        }
-    }
-    const m = new RegExp('^' + regex + '$').exec(input);
-    if (!m)
-        return null;
-    const out = {};
-    tokenOrder.forEach((token, idx) => {
-        const v = m[idx + 1];
-        switch (token) {
-            case 'YYYY':
-                out.year = Number(v);
-                break;
-            case 'YY':
-                out.year = 2000 + Number(v);
-                break;
-            case 'MM':
-            case 'M':
-                out.month = Number(v);
-                break;
-            case 'DD':
-            case 'D':
-                out.day = Number(v);
-                break;
-            case 'HH':
-            case 'H':
-                out.hours = Number(v);
-                break;
-            case 'hh':
-            case 'h':
-                out.hours = Number(v);
-                break;
-            case 'mm':
-            case 'm':
-                out.minutes = Number(v);
-                break;
-            case 'ss':
-            case 's':
-                out.seconds = Number(v);
-                break;
-            case 'A':
-                out.meridiem = v.toLowerCase() === 'am' ? 'am' : 'pm';
-                break;
-            case 'a':
-                out.meridiem = v === 'am' ? 'am' : 'pm';
-                break;
-        }
-    });
-    if (out.meridiem !== undefined && out.hours !== undefined) {
-        if (out.meridiem === 'pm' && out.hours < 12)
-            out.hours += 12;
-        if (out.meridiem === 'am' && out.hours === 12)
-            out.hours = 0;
-    }
-    return out;
-}
-/**
- * Locale-aware day name labels in calendar order (Sunday → Saturday).
- * Caller rotates by `firstDayOfWeek`.
- */
-function getDayNames(locale, length = 'short') {
-    const fmt = new Intl.DateTimeFormat(locale, { weekday: length });
-    // 2021-01-03 was a Sunday; use it as the anchor.
-    const sunday = new Date(2021, 0, 3);
-    const out = [];
-    for (let i = 0; i < 7; i++) {
-        const d = new Date(sunday);
-        d.setDate(sunday.getDate() + i);
-        out.push(fmt.format(d));
-    }
-    return out;
-}
-function getMonthNames(locale, length = 'long') {
-    const fmt = new Intl.DateTimeFormat(locale, { month: length });
-    const out = [];
-    for (let i = 0; i < 12; i++) {
-        out.push(fmt.format(new Date(2021, i, 1)));
-    }
-    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;
+/** 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
@@ -11651,7 +11558,7 @@ function addMonths(d, n) {
     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();
+    const lastDay = makeDate(r.getFullYear(), r.getMonth() + 1, 0).getDate();
     r.setDate(Math.min(day, lastDay));
     return r;
 }
@@ -11668,12 +11575,14 @@ function setTimeOfDay(d, parts) {
         r.setSeconds(parts.seconds);
     return r;
 }
+/**
+ * A copy of `d` moved into `[min, max]`. When `min` is after `max` nothing is
+ * in range and `min` wins, so clamping twice gives the same date and a
+ * picker's focus stays off the years before 1 under a `max` before then.
+ */
 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);
+    const capped = max && isAfter(d, max) ? max : d;
+    return new Date(min && isBefore(capped, min) ? min : capped);
 }
 /**
  * Snap a Date's time-of-day to the nearest grid defined by the given
@@ -11695,44 +11604,337 @@ function snapTimeToIncrement(d, opts = {}) {
             s -= 60;
             m += 1;
         }
-    }
-    if (incrementMinutes > 1) {
-        m = Math.round(m / incrementMinutes) * incrementMinutes;
-        if (m >= 60) {
-            m -= 60;
-            h += 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';
+const DEFAULT_TIME_FORMAT_24 = 'HH:mm';
+const DEFAULT_TIME_FORMAT_12 = 'hh:mm A';
+const DEFAULT_DATETIME_FORMAT = 'YYYY-MM-DD HH:mm';
+const pad = (n, width = 2) => String(n).padStart(width, '0');
+const TOKEN_RE = /YYYY|YY|MM|M|DD|D|HH|H|hh|h|mm|m|ss|s|A|a/g;
+function formatToken(d, token) {
+    switch (token) {
+        case 'YYYY':
+            // Zero-pad to a fixed 4 chars so the rendered width matches the
+            // segment-map width during digit-by-digit keyboard entry (and to match
+            // ISO 8601), so year 19 shows as `0019`. Years >9999 keep their natural
+            // width. The pickers commit no year below 1, so a minus sign reaches
+            // this only from a `value` passed in.
+            return pad(d.getFullYear(), 4);
+        case 'YY':
+            return pad(d.getFullYear() % 100);
+        case 'MM':
+            return pad(d.getMonth() + 1);
+        case 'M':
+            return String(d.getMonth() + 1);
+        case 'DD':
+            return pad(d.getDate());
+        case 'D':
+            return String(d.getDate());
+        case 'HH':
+            return pad(d.getHours());
+        case 'H':
+            return String(d.getHours());
+        case 'hh': {
+            const h12 = d.getHours() % 12 || 12;
+            return pad(h12);
+        }
+        case 'h': {
+            const h12 = d.getHours() % 12 || 12;
+            return String(h12);
+        }
+        case 'mm':
+            return pad(d.getMinutes());
+        case 'm':
+            return String(d.getMinutes());
+        case 'ss':
+            return pad(d.getSeconds());
+        case 's':
+            return String(d.getSeconds());
+        case 'A':
+            return d.getHours() < 12 ? 'AM' : 'PM';
+        case 'a':
+            return d.getHours() < 12 ? 'am' : 'pm';
+        default:
+            return token;
+    }
+}
+function formatTokenString(d, fmt) {
+    return fmt.replace(TOKEN_RE, t => formatToken(d, t));
+}
+function formatWithIntl(d, options, locale) {
+    return new Intl.DateTimeFormat(locale, options).format(d);
+}
+function formatDate(d, fmt, locale) {
+    const f = fmt ?? DEFAULT_DATE_FORMAT;
+    if (typeof f === 'string')
+        return formatTokenString(d, f);
+    return formatWithIntl(d, f, locale);
+}
+function formatTime(d, fmt, locale) {
+    const f = fmt ?? DEFAULT_TIME_FORMAT_24;
+    if (typeof f === 'string')
+        return formatTokenString(d, f);
+    return formatWithIntl(d, f, locale);
+}
+function formatDateTime(d, fmt, locale) {
+    const f = fmt ?? DEFAULT_DATETIME_FORMAT;
+    if (typeof f === 'string')
+        return formatTokenString(d, f);
+    return formatWithIntl(d, f, locale);
+}
+/**
+ * Derive the hour cycle (`'12'` or `'24'`) a display format will render, from
+ * its first hour token: `h`/`hh` → 12-hour with meridiem, `H`/`HH` → 24-hour.
+ *
+ * Returns `null` when the cycle can't be read from the format — it's an
+ * `Intl.DateTimeFormat` options object (no token string), `undefined`, or has
+ * no hour token — so callers fall back to the raw `hourFormat` prop. Scans with
+ * the same {@link TOKEN_RE} grammar the input renders with, so the derived cycle
+ * always agrees with what the field actually displays.
+ */
+function hourCycleFromFormat(fmt) {
+    if (typeof fmt !== 'string')
+        return null;
+    for (const [token] of fmt.matchAll(TOKEN_RE)) {
+        if (token === 'H' || token === 'HH')
+            return '24';
+        if (token === 'h' || token === 'hh')
+            return '12';
+    }
+    return null;
+}
+/**
+ * Parse a date string against a token format. Returns null on mismatch.
+ * For Intl-options formats parsing is the consumer's responsibility — pass
+ * a custom `parse` prop on the picker.
+ */
+function parseDate(s, fmt, 
+// locale arg accepted for symmetry; locale-aware parsing is not supported.
+_locale) {
+    if (!s)
+        return null;
+    const format = fmt ?? DEFAULT_DATE_FORMAT;
+    const parts = parseTokens(s, format);
+    if (!parts)
+        return null;
+    const year = parts.year ?? new Date().getFullYear();
+    const month = (parts.month ?? 1) - 1;
+    const day = parts.day ?? 1;
+    const hours = parts.hours ?? 0;
+    const minutes = parts.minutes ?? 0;
+    const seconds = parts.seconds ?? 0;
+    const d = makeDate(year, month, day);
+    d.setHours(hours, minutes, seconds, 0);
+    if (d.getFullYear() !== year ||
+        d.getMonth() !== month ||
+        d.getDate() !== day) {
+        return null;
+    }
+    return d;
+}
+function parseTime(s, fmt) {
+    if (!s)
+        return null;
+    const format = fmt ?? DEFAULT_TIME_FORMAT_24;
+    const parts = parseTokens(s, format);
+    if (!parts)
+        return null;
+    const today = new Date();
+    return new Date(today.getFullYear(), today.getMonth(), today.getDate(), parts.hours ?? 0, parts.minutes ?? 0, parts.seconds ?? 0, 0);
+}
+function escapeRegExp(s) {
+    return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function parseTokens(input, fmt) {
+    const tokenOrder = [];
+    let regex = '';
+    let i = 0;
+    while (i < fmt.length) {
+        const four = fmt.slice(i, i + 4);
+        const two = fmt.slice(i, i + 2);
+        const one = fmt[i];
+        let token = null;
+        if (four === 'YYYY')
+            token = 'YYYY';
+        else if (two === 'YY' ||
+            two === 'MM' ||
+            two === 'DD' ||
+            two === 'HH' ||
+            two === 'hh' ||
+            two === 'mm' ||
+            two === 'ss')
+            token = two;
+        else if (one === 'M' ||
+            one === 'D' ||
+            one === 'H' ||
+            one === 'h' ||
+            one === 'm' ||
+            one === 's' ||
+            one === 'A' ||
+            one === 'a')
+            token = one;
+        if (token) {
+            tokenOrder.push(token);
+            switch (token) {
+                case 'YYYY':
+                    regex += '(\\d{4})';
+                    break;
+                case 'YY':
+                    regex += '(\\d{2})';
+                    break;
+                case 'MM':
+                case 'DD':
+                case 'HH':
+                case 'hh':
+                case 'mm':
+                case 'ss':
+                    regex += '(\\d{1,2})';
+                    break;
+                case 'M':
+                case 'D':
+                case 'H':
+                case 'h':
+                case 'm':
+                case 's':
+                    regex += '(\\d{1,2})';
+                    break;
+                case 'A':
+                    regex += '(AM|PM)';
+                    break;
+                case 'a':
+                    regex += '(am|pm)';
+                    break;
+            }
+            i += token.length;
+        }
+        else {
+            regex += escapeRegExp(one);
+            i += 1;
         }
     }
-    if (incrementHours > 1) {
-        h = Math.round(h / incrementHours) * incrementHours;
-        // setHours handles 24+ overflow naturally (rolls forward into next day).
+    const m = new RegExp('^' + regex + '$').exec(input);
+    if (!m)
+        return null;
+    const out = {};
+    tokenOrder.forEach((token, idx) => {
+        const v = m[idx + 1];
+        switch (token) {
+            case 'YYYY':
+                out.year = Number(v);
+                break;
+            case 'YY':
+                out.year = 2000 + Number(v);
+                break;
+            case 'MM':
+            case 'M':
+                out.month = Number(v);
+                break;
+            case 'DD':
+            case 'D':
+                out.day = Number(v);
+                break;
+            case 'HH':
+            case 'H':
+                out.hours = Number(v);
+                break;
+            case 'hh':
+            case 'h':
+                out.hours = Number(v);
+                break;
+            case 'mm':
+            case 'm':
+                out.minutes = Number(v);
+                break;
+            case 'ss':
+            case 's':
+                out.seconds = Number(v);
+                break;
+            case 'A':
+                out.meridiem = v.toLowerCase() === 'am' ? 'am' : 'pm';
+                break;
+            case 'a':
+                out.meridiem = v === 'am' ? 'am' : 'pm';
+                break;
+        }
+    });
+    if (out.meridiem !== undefined && out.hours !== undefined) {
+        if (out.meridiem === 'pm' && out.hours < 12)
+            out.hours += 12;
+        if (out.meridiem === 'am' && out.hours === 12)
+            out.hours = 0;
     }
-    r.setHours(h, m, s, 0);
-    return r;
+    return out;
 }
 /**
- * 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`.
+ * Locale-aware day name labels in calendar order (Sunday → Saturday).
+ * Caller rotates by `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),
-        });
+function getDayNames(locale, length = 'short') {
+    const fmt = new Intl.DateTimeFormat(locale, { weekday: length });
+    // 2021-01-03 was a Sunday; use it as the anchor.
+    const sunday = new Date(2021, 0, 3);
+    const out = [];
+    for (let i = 0; i < 7; i++) {
+        const d = new Date(sunday);
+        d.setDate(sunday.getDate() + i);
+        out.push(fmt.format(d));
     }
-    return cells;
+    return out;
+}
+function getMonthNames(locale, length = 'long') {
+    const fmt = new Intl.DateTimeFormat(locale, { month: length });
+    const out = [];
+    for (let i = 0; i < 12; i++) {
+        out.push(fmt.format(new Date(2021, i, 1)));
+    }
+    return out;
 }
 
+/**
+ * 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. It runs
+ * against the whole panel, so it matches only inside the grid or the list.
+ */
+const CALENDAR_FOCUSED_CELL = '[role="grid"] [data-focused="true"], [role="listbox"] [data-focused-year="true"]';
 const BASE_VIEW = {
     day: 'days',
     month: 'months',
@@ -11778,20 +11980,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 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 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 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
@@ -11817,7 +12031,7 @@ function yearStep(key, focusedYear, years) {
             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 Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minProp, max, shouldDisableDate, unselectableDates, firstDayOfWeek = 0, locale, dayNames, monthNames, nearbyMonthDays = true, color, size, className, id, autoFocusCell = false, labels, yearsRange, granularity = 'day', }) => {
     const gridRef = React.useRef(null);
     const monthGridRef = React.useRef(null);
     const yearGridRef = React.useRef(null);
@@ -11827,6 +12041,8 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
     const isDayGranularity = granularity === 'day';
     const isYearGranularity = granularity === 'year';
     const [view, setView] = React.useState(baseView);
+    // Nothing before year 1 can be picked or reached, as in HTML's date inputs.
+    const min = React.useMemo(() => floorMin(minProp), [minProp]);
     const computedDayNames = React.useMemo(() => {
         if (dayNames && dayNames.length === 7)
             return dayNames;
@@ -11863,6 +12079,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 = React.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 = React.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
@@ -11870,7 +12113,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
     const moveFocus = React.useCallback((next, direction) => {
         let candidate = next;
         for (let i = 0; i < 366; i++) {
-            if (min && candidate.getTime() < startOfDay(min).getTime())
+            if (candidate.getTime() < startOfDay(min).getTime())
                 return;
             if (max && candidate.getTime() > startOfDay(max).getTime())
                 return;
@@ -11936,7 +12179,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
         let candidate = next;
         for (let i = 0; i < 120; i++) {
             const month = startOfMonth(candidate).getTime();
-            if (min && month < startOfMonth(min).getTime())
+            if (month < startOfMonth(min).getTime())
                 return;
             if (max && month > startOfMonth(max).getTime())
                 return;
@@ -11984,25 +12227,22 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
     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);
+    // 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
+    // from the list can leave it.
     const prevAnchor = isDayGranularity
-        ? prevMonthAnchor
+        ? addMonths(focusedDate, -1)
         : clampDate(addYears(focusedDate, -1), min, max);
     const nextAnchor = isDayGranularity
-        ? nextMonthAnchor
+        ? addMonths(focusedDate, 1)
         : clampDate(addYears(focusedDate, 1), min, max);
+    const focusedMonth = startOfMonth(focusedDate).getTime();
     const prevDisabled = isDayGranularity
-        ? !!(min &&
-            prevMonthAnchor.getTime() < startOfDay(min).getTime() &&
-            isSameMonth(focusedDate, min))
-        : !!(min && focusedYear <= min.getFullYear());
+        ? focusedMonth <= startOfMonth(min).getTime()
+        : focusedYear <= min.getFullYear();
     const nextDisabled = isDayGranularity
-        ? !!(max &&
-            nextMonthAnchor.getTime() > startOfDay(max).getTime() &&
-            isSameMonth(focusedDate, max))
-        : !!(max && focusedYear >= max.getFullYear());
+        ? !!max && focusedMonth >= startOfMonth(max).getTime()
+        : !!max && focusedYear >= max.getFullYear();
     const labelId = id ? `${id}-label` : undefined;
     const monthLabel = isDayGranularity
         ? `${computedMonthNames[focusedDate.getMonth()]} ${focusedYear}`
@@ -12013,7 +12253,9 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
     const [mountYear] = React.useState(focusedYear);
     const windowYear = isYearGranularity ? mountYear : focusedYear;
     const yearList = React.useMemo(() => {
-        const minYear = min ? min.getFullYear() : windowYear - 100;
+        const minYear = minProp
+            ? min.getFullYear()
+            : Math.max(FIRST_YEAR, windowYear - 100);
         const maxYear = max ? max.getFullYear() : windowYear + 100;
         const [lo, hi] = yearsRange ?? [minYear, maxYear];
         const start = Math.max(lo, minYear);
@@ -12022,10 +12264,25 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
         for (let y = start; y <= end; y++)
             out.push(y);
         return out;
-    }, [windowYear, min, max, yearsRange]);
+    }, [windowYear, minProp, min, max, yearsRange]);
     // Only the selection surface disables years; as navigation every listed
     // year can be visited.
     const disabledYears = React.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. As the selection surface a
+    // year outside a non-empty list starts from the end it fell past, so the
+    // list keeps a stop. As navigation the stop marks the current year, so a
+    // year outside the list marks no option.
+    const tabStopYear = React.useMemo(() => {
+        let i = yearList.indexOf(focusedYear);
+        if (i < 0) {
+            if (!isYearGranularity || yearList.length === 0)
+                return focusedYear;
+            i = focusedYear < yearList[0] ? 0 : yearList.length - 1;
+        }
+        return yearList[nearestEnabled(i, yearList.map(y => disabledYears.has(y)))];
+    }, [yearList, focusedYear, disabledYears, isYearGranularity]);
     // Which of the focused year's months have no selectable day.
     const disabledMonths = React.useMemo(() => granularity === 'month'
         ? Array.from({ length: 12 }, (_, m) => isMonthUnselectable(makeDate(focusedYear, m)))
@@ -12033,7 +12290,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 = React.useCallback((year) => {
         const next = new Date(focusedDate);
         next.setFullYear(year);
@@ -12075,24 +12332,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.
+    React.useEffect(() => {
+        if (!autoFocusCell)
+            return;
+        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();
     React.useEffect(() => {
-        if (view !== 'days')
+        const grid = gridRef.current;
+        if (view !== 'days' || !grid)
             return;
-        if (!autoFocusCell || !gridRef.current)
+        if (!focusFollows(grid, gridHeldFocusRef.current))
             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.
+        grid.querySelector('[data-focused="true"]')?.focus();
+    }, [tabStopDayTime, view]);
     React.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.
     React.useEffect(() => {
@@ -12126,15 +12396,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) => (jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "14", height: "14", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: d, fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-    return (jsxRuntime.jsxs("div", { className: classNames(calendarClass, className), id: id, children: [jsxRuntime.jsxs("div", { className: headerClass, children: [isYearGranularity ? (jsxRuntime.jsx("span", { className: monthLabelClass, id: labelId, children: monthLabel })) : (jsxRuntime.jsxs("button", { type: "button", className: monthTriggerClass, "aria-haspopup": "listbox", "aria-expanded": view === 'years', onClick: () => setView(v => (v === 'years' ? baseView : 'years')), children: [jsxRuntime.jsx("span", { className: monthLabelClass, id: labelId, "aria-live": "polite", children: monthLabel }), jsxRuntime.jsx("svg", { className: monthCaretClass, viewBox: "0 0 12 12", width: "10", height: "10", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M2 4l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })] })), !isYearGranularity && (jsxRuntime.jsxs("div", { className: navGroupClass, children: [jsxRuntime.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') }), jsxRuntime.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' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: dayNamesRowClass, "aria-hidden": "true", children: computedDayNames.map((name, i) => (jsxRuntime.jsx("div", { className: dayNameClass, children: name }, i))) }), jsxRuntime.jsx("div", { ref: gridRef, role: "grid", "aria-labelledby": labelId, className: gridClass, onKeyDown: handleKeyDown, children: cells.map(cell => {
+    return (jsxRuntime.jsxs("div", { className: classNames(calendarClass, className), id: id, children: [jsxRuntime.jsxs("div", { className: headerClass, children: [isYearGranularity ? (jsxRuntime.jsx("span", { className: monthLabelClass, id: labelId, children: monthLabel })) : (jsxRuntime.jsxs("button", { type: "button", className: monthTriggerClass, "aria-haspopup": "listbox", "aria-expanded": view === 'years', onClick: () => setView(v => (v === 'years' ? baseView : 'years')), children: [jsxRuntime.jsx("span", { className: monthLabelClass, id: labelId, "aria-live": "polite", children: monthLabel }), jsxRuntime.jsx("svg", { className: monthCaretClass, viewBox: "0 0 12 12", width: "10", height: "10", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M2 4l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })] })), !isYearGranularity && (jsxRuntime.jsxs("div", { className: navGroupClass, children: [jsxRuntime.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') }), jsxRuntime.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' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: dayNamesRowClass, "aria-hidden": "true", children: computedDayNames.map((name, i) => (jsxRuntime.jsx("div", { className: dayNameClass, children: name }, i))) }), jsxRuntime.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,
@@ -12143,13 +12413,20 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
                                 '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, "data-focused": isFocused ? 'true' : undefined, disabled: disabled || !display, className: cellClass, onClick: () => {
+                            return (jsxRuntime.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' && (jsxRuntime.jsx("div", { ref: monthGridRef, role: "grid", "aria-labelledby": labelId, className: monthsGridClass, onKeyDown: handleMonthKeyDown, children: MONTH_ROWS.map(row => (jsxRuntime.jsx("div", { role: "row", className: monthsRowClass, children: row.map(month => {
+                        }) })] })), view === 'months' && (jsxRuntime.jsx("div", { ref: monthGridRef, role: "grid", "aria-labelledby": labelId, className: monthsGridClass, onKeyDown: handleMonthKeyDown, ...gridFocusHandlers, children: MONTH_ROWS.map(row => (jsxRuntime.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);
@@ -12171,7 +12448,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
                                 onSelect(date);
                             }, children: monthCellNames[month] }, month));
                     }) }, row[0]))) })), view === 'years' && (jsxRuntime.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.
@@ -12184,7 +12461,13 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
                         'is-today': isToday,
                         'is-disabled': disabled,
                     });
-                    return (jsxRuntime.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 (jsxRuntime.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));
                 }) }))] }));
@@ -12192,12 +12475,25 @@ 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 = React.useRef(null);
+    // Read as the trap turns on, once the panel's content has rendered.
+    const initialFocusRef = React.useMemo(() => initialFocusSelector === undefined
+        ? undefined
+        : {
+            get current() {
+                return (panelRef.current?.querySelector(initialFocusSelector) ?? null);
+            },
+        }, [initialFocusSelector]);
     const resolved = useAnchoredPosition(anchorRef, panelRef, {
         active: isOpen,
         position,
         fixed: appendToBody,
+        // The gap comes from `--bulma-picker-popover-offset` as a margin, in place
+        // or portaled, so the coordinates leave it out and `auto` reads it off
+        // the panel.
+        offset: 0,
+        styledGap: marginGap,
     });
     React.useEffect(() => {
         if (!isOpen || !closeOnClickOutside || !isBrowser)
@@ -12231,6 +12527,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', {
@@ -12410,8 +12707,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
@@ -12638,33 +12938,35 @@ function useSegmentedEntry(params) {
     // within the same event tick.
     const typedDigitsRef = React.useRef('');
     // The text focus seeded an empty picker with, until the user edits it or
-    // leaves. While the text still matches it, nothing has been typed.
+    // leaves.
     const seedRef = React.useRef(null);
-    // Whether the input's current focus is the one a closing popover handed
-    // back, until focus leaves the picker.
-    const handedBackRef = React.useRef(false);
+    // Whether the text is still what the picker put there, so nothing in it was
+    // typed: the value's display, or an empty picker's seed until an edit drops
+    // it. Against a value it compares text alone, so typing that ends back on
+    // the display counts as untouched.
+    const isUntouched = React.useCallback((s) => value
+        ? s === formatFn(value, format, locale)
+        : seedRef.current !== null && s === seedRef.current, [value, formatFn, format, locale]);
     // A seed the popover never turned into a value closes with it, wherever
     // focus goes, so a dismissed empty field stays empty.
     //
     // As the popover closes, its focus trap hands focus back to the input. That
     // focus is not the user arriving: it must not open the popover again under
-    // `openOnFocus`, or seed an empty picker that leaving would then commit.
-    // `closingRef` is set in the layout phase of the commit that closes it and
-    // cleared by that commit's effects, and React runs a commit's effect
-    // cleanups, the trap's among them, before any of its effects, so a focus
-    // in between is the one handed back.
+    // `openOnFocus`, or seed an empty picker. `closingRef` is set in the layout
+    // phase of the commit that closes it and cleared by that commit's effects,
+    // and React runs a commit's effect cleanups, the trap's among them, before
+    // any of its effects, so a focus in between is the one handed back.
     const closingRef = React.useRef(false);
     const wasOpenRef = React.useRef(isOpen);
     React.useLayoutEffect(() => {
         if (wasOpenRef.current && !isOpen) {
             closingRef.current = true;
-            if (!value && seedRef.current !== null && text === seedRef.current) {
+            if (!value && isUntouched(text))
                 setText('');
-            }
             seedRef.current = null;
         }
         wasOpenRef.current = isOpen;
-    }, [isOpen, value, text, setText]);
+    }, [isOpen, value, isUntouched, text, setText]);
     React.useEffect(() => {
         closingRef.current = false;
     }, [isOpen]);
@@ -12742,13 +13044,18 @@ function useSegmentedEntry(params) {
         }
         setActiveSegmentIdx(null);
         typedDigitsRef.current = '';
-        seedRef.current = null;
-        const handedBack = handedBackRef.current;
-        handedBackRef.current = false;
-        // Leaving after a dismiss commits only what was typed since. Text that
-        // still shows the value wasn't, and re-parsing it could drop what the
-        // format leaves out, such as seconds.
-        if (handedBack && value && text === formatFn(value, format, locale)) {
+        // Leaving commits only what was typed. Re-parsing the value's display
+        // could drop what the format leaves out, such as seconds, and a seed
+        // nobody typed over is not the user's date.
+        const untouched = isUntouched(text);
+        // An open popover keeps an unused seed until it closes, so one portaled
+        // outside the picker, whose focus reads as leaving, keeps it as one
+        // inside does.
+        if (!isOpen)
+            seedRef.current = null;
+        if (untouched) {
+            if (!value && !isOpen)
+                setText('');
             onBlur?.(e);
             return;
         }
@@ -12762,6 +13069,8 @@ function useSegmentedEntry(params) {
         onBlur?.(e);
     }, [
         containerRef,
+        isUntouched,
+        isOpen,
         tryParse,
         text,
         isAllowed,
@@ -12775,7 +13084,6 @@ function useSegmentedEntry(params) {
     ]);
     const handleFocus = React.useCallback((e) => {
         const handedBack = closingRef.current;
-        handedBackRef.current = handedBack;
         if (!handedBack && openOnFocus && popover && !disabled && !readOnly) {
             setOpen(true);
         }
@@ -12943,12 +13251,20 @@ function useSegmentedEntry(params) {
         }
         if (e.key === 'Enter') {
             e.preventDefault();
-            const parsed = tryParse(text);
-            if (parsed && isAllowed(parsed)) {
-                commitValue(parsed);
+            // Untouched text has nothing to commit, as on leaving, but Enter
+            // still confirms what the field shows.
+            if (isUntouched(text)) {
                 if (closeOnSelect)
                     setOpen(false);
             }
+            else {
+                const parsed = tryParse(text);
+                if (parsed && isAllowed(parsed)) {
+                    commitValue(parsed);
+                    if (closeOnSelect)
+                        setOpen(false);
+                }
+            }
         }
         onKeyDown?.(e);
     }, [
@@ -12962,6 +13278,7 @@ function useSegmentedEntry(params) {
         setOpen,
         closeOnSelect,
         popover,
+        isUntouched,
         tryParse,
         text,
         isAllowed,
@@ -13010,25 +13327,31 @@ 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.
+ * inputs require and as the `YYYY` token displays it. HTML has no such shape
+ * for a year before 1, so a date then is empty, as those inputs would make it.
  */
 const toIsoValue = (d, granularity) => {
+    if (d.getFullYear() < FIRST_YEAR)
+        return '';
     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. */
+/**
+ * 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,
@@ -13050,14 +13373,19 @@ const SKIPPED_SEGMENTS = {
  * @returns {JSX.Element}
  */
 const DateInputBase = React.forwardRef((props, ref) => {
-    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 { 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: triggerIconProp, triggerIconName = 'chevron-down', labels, ...rest } = props;
+    // The launcher gives way to the loading spinner of a Control this sits in.
+    const controlLoading = useControlLoading();
+    const triggerIcon = triggerIconProp ?? !controlLoading;
     const t = mergeLabels(labels);
     const isDayGranularity = granularity === 'day';
     const resolvedFormat = format ?? DEFAULT_FORMATS[granularity];
     const isControlled = controlledValue !== undefined;
     const [internalValue, setInternalValue] = React.useState(defaultValue ?? null);
     const value = isControlled ? (controlledValue ?? null) : internalValue;
-    const initialFocused = React.useMemo(() => clampDate(value ?? new Date(), min, max), 
+    // Nothing before year 1 is in range, as in HTML's date inputs.
+    const lowerBound = React.useMemo(() => floorMin(min), [min]);
+    const initialFocused = React.useMemo(() => clampDate(value ?? new Date(), lowerBound, max), 
     // intentionally only on mount: keep focusedDate stable until value/open change
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
@@ -13065,8 +13393,8 @@ const DateInputBase = React.forwardRef((props, ref) => {
     // Re-clamp focusedDate if min/max change after mount so the focused cell
     // never disappears outside the displayable range.
     React.useEffect(() => {
-        setFocusedDate(prev => clampDate(prev, min, max));
-    }, [min, max]);
+        setFocusedDate(prev => clampDate(prev, lowerBound, max));
+    }, [lowerBound, max]);
     const [open, setOpenState] = React.useState(false);
     const [text, setText] = React.useState(value ? formatDate(value, resolvedFormat, locale) : '');
     const inputRef = React.useRef(null);
@@ -13092,16 +13420,20 @@ const DateInputBase = React.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 = React.useRef(false);
     const setOpen = React.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.
     React.useEffect(() => {
@@ -13120,7 +13452,7 @@ const DateInputBase = React.forwardRef((props, ref) => {
     }, [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 = React.useMemo(() => (min && !isDayGranularity ? startOfPeriod(min, granularity) : min), [min, isDayGranularity, granularity]);
+    const periodMin = React.useMemo(() => isDayGranularity ? lowerBound : startOfPeriod(lowerBound, granularity), [lowerBound, isDayGranularity, granularity]);
     const periodMax = React.useMemo(() => (max && !isDayGranularity ? endOfPeriod(max, granularity) : max), [max, isDayGranularity, granularity]);
     const handleSelect = React.useCallback((d) => {
         if (!isWithin(d, periodMin, periodMax))
@@ -13171,7 +13503,7 @@ const DateInputBase = React.forwardRef((props, ref) => {
     ]);
     // 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.
+    // or year changes only when the user picks or types a different period.
     const commitTyped = React.useCallback((next) => {
         if (next &&
             value &&
@@ -13237,7 +13569,7 @@ const DateInputBase = React.forwardRef((props, ref) => {
                     ? fromIsoValue(e.target.value, granularity)
                     : null;
                 commitValue(parsed);
-            }, 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 }));
+            }, min: min ? toIsoValue(lowerBound, 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
@@ -13246,14 +13578,18 @@ const DateInputBase = React.forwardRef((props, ref) => {
             : t.chooseDate;
     const calendar = (jsxRuntime.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, 
+        // The popover panel takes `popoverId`, so the calendar inside it
+        // takes one of its own. Inline there is no panel, and the calendar
+        // keeps the id it released with.
+        id: inline ? popoverId : `${popoverId}-cal`, autoFocusCell: open, labels: labels }, granularity));
     if (inline) {
         return (jsxRuntime.jsxs("div", { ...cleanRest, ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), children: [calendar, name && (jsxRuntime.jsx("input", { type: "hidden", name: name, form: form, value: value ? toIsoValue(value, granularity) : '', required: required }))] }));
     }
     return (jsxRuntime.jsxs("div", { ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), ...cleanRest, children: [jsxRuntime.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 && (jsxRuntime.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: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.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: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.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';
 
@@ -13277,26 +13613,34 @@ DateInputBase.displayName = 'DateInputBase';
 const DateInput = React.forwardRef(({ label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'calendar', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const ownField = rendersOwnField('DateInput', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
     const { controlId, fieldLabelProps } = useAutoLabelId({
         label,
         id: baseProps.id,
         labelProps,
         // Inline mode renders a bare calendar with no input to label.
-        rendersLabel: !insideField && !baseProps.inline,
+        rendersLabel: ownField && !baseProps.inline,
     });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
-    // The right-side launcher is on by default; suppress it while the Control
-    // shows its loading spinner (also on the right) unless explicitly set.
-    let content = (jsxRuntime.jsx(DateInputBase, { ref: ref, id: controlId, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
+    // The base hides its launcher while the Control it sits in is loading,
+    // whether that is the one rendered below or an enclosing one.
+    let content = (jsxRuntime.jsx(DateInputBase, { ref: ref, id: controlId, ...baseProps }));
     // Inline mode renders a bare calendar with no input, so the Control's
     // icon-left container has nothing to anchor to. Skip the Control wrap.
     if (!insideControl && !baseProps.inline) {
         content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
-    if (!insideField) {
+    if (ownField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
@@ -14170,7 +14514,10 @@ const fromIsoTime = (s) => {
  * @returns {JSX.Element}
  */
 const TimeInputBase = React.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 = false, position = 'bottom-left', appendToBody = false, color, size, isRounded, hourFormat = '24', enableSeconds = false, incrementHours = 1, incrementMinutes = 1, incrementSeconds = 1, unselectableTimes, className, name, form, required, id, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon = true, triggerIconName = 'chevron-down', labels, audioTick = false, haptics = false, ...rest } = props;
+    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 = false, position = 'bottom-left', appendToBody = false, color, size, isRounded, hourFormat = '24', enableSeconds = false, incrementHours = 1, incrementMinutes = 1, incrementSeconds = 1, unselectableTimes, className, name, form, required, id, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, audioTick = false, haptics = false, ...rest } = props;
+    // The launcher gives way to the loading spinner of a Control this sits in.
+    const controlLoading = useControlLoading();
+    const triggerIcon = triggerIconProp ?? !controlLoading;
     // Platform-appropriate feedback routing: when `haptics` is opted in and
     // the runtime has no Vibration API (notably iOS Safari), enable the
     // audio thunk so the user still gets *some* tactile cue. When vibrate
@@ -14226,23 +14573,29 @@ const TimeInputBase = React.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 = React.useRef(false);
     const setOpen = React.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]);
     React.useEffect(() => {
         setText(value ? formatTime(value, defaultFormat, locale) : '');
     }, [value, defaultFormat, locale]);
+    // A value's date before year 1 is out of range, as in the date pickers.
+    const lowerBound = React.useMemo(() => floorMin(min), [min]);
     const commitValue = React.useCallback((next) => {
         if (!isControlled)
             setInternalValue(next);
@@ -14251,10 +14604,10 @@ const TimeInputBase = React.forwardRef((props, ref) => {
     const handleSpinnerChange = React.useCallback((parts) => {
         const base = value ?? new Date();
         const next = setTimeOfDay(base, parts);
-        if (!isWithin(next, min, max))
+        if (!isWithin(next, lowerBound, max))
             return;
         commitValue(next);
-    }, [value, min, max, commitValue]);
+    }, [value, lowerBound, max, commitValue]);
     const tryParse = React.useCallback((s) => {
         const trimmed = s.trim();
         if (!trimmed)
@@ -14286,7 +14639,7 @@ const TimeInputBase = React.forwardRef((props, ref) => {
         setText,
         makeBaseDate,
         locale,
-        min,
+        min: lowerBound,
         max,
         isBlocked: unselectableTimes,
         disabled,
@@ -14368,34 +14721,47 @@ TimeInputBase.displayName = 'TimeInputBase';
 const TimeInput = React.forwardRef(({ label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'clock', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const ownField = rendersOwnField('TimeInput', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
     const { controlId, fieldLabelProps } = useAutoLabelId({
         label,
         id: baseProps.id,
         labelProps,
         // Inline mode renders a bare panel with no input to label.
-        rendersLabel: !insideField && !baseProps.inline,
+        rendersLabel: ownField && !baseProps.inline,
     });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
-    // The right-side launcher is on by default; suppress it while the Control
-    // shows its loading spinner (also on the right) unless explicitly set.
-    let content = (jsxRuntime.jsx(TimeInputBase, { ref: ref, id: controlId, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
+    // The base hides its launcher while the Control it sits in is loading,
+    // whether that is the one rendered below or an enclosing one.
+    let content = (jsxRuntime.jsx(TimeInputBase, { ref: ref, id: controlId, ...baseProps }));
     // Inline mode renders a bare panel with no input, so the Control's
     // icon-left container has nothing to anchor to. Skip the Control wrap.
     if (!insideControl && !baseProps.inline) {
         content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
-    if (!insideField) {
+    if (ownField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
 });
 TimeInput.displayName = 'TimeInput';
 
+// The year is padded to four digits, as `datetime-local` requires. HTML has
+// no such shape for a year before 1, so a date then is empty, as that input
+// would make it.
 const toIsoDateTime = (d, withSeconds) => {
-    const yyyy = d.getFullYear();
+    if (d.getFullYear() < FIRST_YEAR)
+        return '';
+    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');
@@ -14408,10 +14774,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
@@ -14424,7 +14793,10 @@ const fromIsoDateTime = (s) => {
 const DateTimeInputBase = React.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 = false, position = 'bottom-left', appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, firstDayOfWeek = 0, dayNames, monthNames, nearbyMonthDays = true, hourFormat = '24', enableSeconds = false, incrementHours = 1, 
     // Step between visible wheel values; 1 gives the iOS-style every-minute wheel.
-    incrementMinutes = 1, incrementSeconds = 1, unselectableTimes, className, name, form, required, id, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon = true, triggerIconName = 'chevron-down', audioTick = false, haptics = false, labels, ...rest } = props;
+    incrementMinutes = 1, incrementSeconds = 1, unselectableTimes, className, name, form, required, id, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', audioTick = false, haptics = false, labels, ...rest } = props;
+    // The launcher gives way to the loading spinner of a Control this sits in.
+    const controlLoading = useControlLoading();
+    const triggerIcon = triggerIconProp ?? !controlLoading;
     const t = mergeLabels(labels);
     // Platform-appropriate feedback routing for the time wheel: on iOS (no
     // navigator.vibrate) the audio thunk fills in; on Android the real haptic
@@ -14434,14 +14806,16 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
     const isControlled = controlledValue !== undefined;
     const [internalValue, setInternalValue] = React.useState(defaultValue ?? null);
     const value = isControlled ? (controlledValue ?? null) : internalValue;
-    const initialFocused = React.useMemo(() => clampDate(value ?? new Date(), min, max), 
+    // Nothing before year 1 is in range, as in HTML's date inputs.
+    const lowerBound = React.useMemo(() => floorMin(min), [min]);
+    const initialFocused = React.useMemo(() => clampDate(value ?? new Date(), lowerBound, max), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     const [focusedDate, setFocusedDate] = React.useState(initialFocused);
     // Re-clamp focusedDate when min/max change so the focused cell stays valid.
     React.useEffect(() => {
-        setFocusedDate(prev => clampDate(prev, min, max));
-    }, [min, max]);
+        setFocusedDate(prev => clampDate(prev, lowerBound, max));
+    }, [lowerBound, max]);
     const defaultFormat = format ??
         (hourFormat === '12'
             ? enableSeconds
@@ -14498,19 +14872,23 @@ const DateTimeInputBase = React.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 = React.useRef(false);
     const setOpen = React.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]);
     React.useEffect(() => {
         setText(value ? formatDateTime(value, defaultFormat, locale) : '');
@@ -14534,18 +14912,18 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
             minutes: value?.getMinutes() ?? 0,
             seconds: enableSeconds ? (value?.getSeconds() ?? 0) : undefined,
         });
-        if (!isWithin(merged, min, max))
+        if (!isWithin(merged, lowerBound, max))
             return;
         commitValue(merged);
         setFocusedDate(d);
-    }, [value, enableSeconds, min, max, commitValue]);
+    }, [value, enableSeconds, lowerBound, max, commitValue]);
     const handleTimeChange = React.useCallback((parts) => {
         const base = value ?? focusedDate;
         const next = setTimeOfDay(base, parts);
-        if (!isWithin(next, min, max))
+        if (!isWithin(next, lowerBound, max))
             return;
         commitValue(next);
-    }, [value, focusedDate, min, max, commitValue]);
+    }, [value, focusedDate, lowerBound, max, commitValue]);
     const tryParse = React.useCallback((s) => {
         const trimmed = s.trim();
         if (!trimmed)
@@ -14580,7 +14958,7 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
         setText,
         makeBaseDate,
         locale,
-        min,
+        min: lowerBound,
         max,
         isBlocked,
         disabled,
@@ -14613,7 +14991,7 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
                     ? fromIsoDateTime(e.target.value)
                     : null;
                 commitValue(parsed);
-            }, min: min ? toIsoDateTime(min, enableSeconds) : undefined, max: max ? toIsoDateTime(max, enableSeconds) : undefined, disabled: disabled, readOnly: readOnly, placeholder: placeholder, name: name, form: form, required: required, id: id }));
+            }, min: min ? toIsoDateTime(lowerBound, enableSeconds) : undefined, max: max ? toIsoDateTime(max, enableSeconds) : undefined, disabled: disabled, readOnly: readOnly, placeholder: placeholder, name: name, form: form, required: required, id: id }));
     }
     const spinnerValue = {
         hours: value?.getHours() ?? 0,
@@ -14640,7 +15018,7 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
     return (jsxRuntime.jsxs("div", { ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), ...cleanRest, children: [jsxRuntime.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 && (jsxRuntime.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: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.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: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.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';
 
@@ -14664,26 +15042,34 @@ DateTimeInputBase.displayName = 'DateTimeInputBase';
 const DateTimeInput = React.forwardRef(({ label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'calendar-alt', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const ownField = rendersOwnField('DateTimeInput', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
     const { controlId, fieldLabelProps } = useAutoLabelId({
         label,
         id: baseProps.id,
         labelProps,
         // Inline mode renders a bare picker with no input to label.
-        rendersLabel: !insideField && !baseProps.inline,
+        rendersLabel: ownField && !baseProps.inline,
     });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
-    // The right-side launcher is on by default; suppress it while the Control
-    // shows its loading spinner (also on the right) unless explicitly set.
-    let content = (jsxRuntime.jsx(DateTimeInputBase, { ref: ref, id: controlId, ...baseProps, triggerIcon: baseProps.triggerIcon ?? !isLoading }));
+    // The base hides its launcher while the Control it sits in is loading,
+    // whether that is the one rendered below or an enclosing one.
+    let content = (jsxRuntime.jsx(DateTimeInputBase, { ref: ref, id: controlId, ...baseProps }));
     // Inline mode renders a bare picker with no input, so the Control's
     // icon-left container has nothing to anchor to. Skip the Control wrap.
     if (!insideControl && !baseProps.inline) {
         content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
-    if (!insideField) {
+    if (ownField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
@@ -15622,31 +16008,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.
     React.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.
     React.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 = React.useMemo(() => {
         if (isRoot) {