@allxsmith/bestax-bulma 5.26.3 → 5.26.4

package/dist/index.esm.js

@@ -5199,10 +5199,17 @@ const focusedElement = (doc) => getDeepestActiveElement(doc) ?? doc.body;
  * container, or give them a trap of their own. To trap content a `Portal`
  * renders, pass a ref to the element inside the `Portal` as `containerRef`.
  *
- * The container has to be in the DOM when the trap turns on. The trap waits
- * for hydration, so a container that only appears once the page has
- * hydrated, the way portaled content does, still has it attach in the commit
- * where the container appears.
+ * 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 +5229,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 = useRef(null);
+    // Bumped to run the trap again when the container in the ref changes.
+    const [refChanges, setRefChanges] = useState(0);
     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 +5315,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
+    useEffect(() => {
+        if (active && hydrated && containerRef.current !== heldRef.current) {
+            setRefChanges(n => n + 1);
+        }
+    });
 }
 
 // INTERNAL: deliberately not exported from src/index.ts.
@@ -8735,6 +8769,56 @@ const useInsideControl = () => 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 = createContext(undefined);
 /**
  * The id a labeled Field wants its single composed control to adopt (#495).
@@ -8865,6 +8949,18 @@ const Checkbox = forwardRef(({ color, size, className, children, textColor, disa
 });
 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 = 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 = () => 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 +9020,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 (jsx(ControlProvider, { value: true, children: jsxs(Component, { className: controlClass, ref: ref, ...restProps, ...rest, children: [children, leftIconValue &&
+    return (jsx(ControlProvider, { value: true, children: jsxs(Component, { className: controlClass, ref: ref, ...restProps, ...rest, children: [jsx(ControlLoadingProvider, { value: !!isLoading, children: children }), leftIconValue &&
                     (isIconProps(leftIconValue) ? (jsx(Icon, { ...leftIconValue, className: prefixedClassNames(classPrefix, 'is-left') })) : (jsx(Icon, { className: prefixedClassNames(classPrefix, 'is-left'), children: leftIconValue }))), rightIconValue &&
                     (isIconProps(rightIconValue) ? (jsx(Icon, { ...rightIconValue, className: prefixedClassNames(classPrefix, 'is-right') })) : (jsx(Icon, { className: prefixedClassNames(classPrefix, 'is-right'), children: rightIconValue })))] }) }));
 });
@@ -9149,10 +9245,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 +9285,7 @@ const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message
     if (!insideControl) {
         content = jsx(Control, { children: content });
     }
-    if (!insideField) {
+    if (ownField) {
         return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
@@ -9200,11 +9304,20 @@ const File = 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 +9349,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     });
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
     const fileElement = (jsx("div", { className: fileClass, children: jsxs("label", { className: usePrefixedClassNames('file-label'), children: [jsx("input", { ref: ref, className: classNames(usePrefixedClassNames('file-input'), inputClassName), type: "file", id: controlId, ...rest }), jsxs("span", { className: usePrefixedClassNames('file-cta'), children: [iconLeft && (jsx("span", { className: prefixedClassNames(classPrefix, 'file-icon'), children: iconLeft })), jsx("span", { className: usePrefixedClassNames('file-label'), children: buttonLabel || 'Choose a file\u2026' }), iconRight && (jsx("span", { className: prefixedClassNames(classPrefix, 'file-icon'), children: iconRight }))] }), hasName && fileName && (jsx("span", { className: prefixedClassNames(classPrefix, 'file-name'), children: fileName }))] }) }));
-    if (!insideField) {
+    if (ownField) {
         return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [fileElement, messageEl] }));
     }
     return (jsxs(Fragment, { children: [fileElement, messageEl] }));
@@ -9369,10 +9482,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 +9525,7 @@ const RadiosComponent = ({ label, labelSize, labelProps, horizontal, message, me
     if (!insideControl) {
         content = jsx(Control, { children: content });
     }
-    if (!insideField) {
+    if (ownField) {
         return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
@@ -9584,6 +9705,14 @@ const Slider = 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 +9720,7 @@ const Slider = 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 +10059,7 @@ const Slider = forwardRef((props, ref) => {
     if (!insideControl) {
         content = jsx(Control, { children: content });
     }
-    if (!insideField) {
+    if (ownField) {
         return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
@@ -10160,10 +10289,18 @@ function getFillPercent(iconIndex, value) {
 const Rate = 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] = useState(defaultValue);
@@ -10366,7 +10503,7 @@ const Rate = forwardRef(({ label, labelSize, labelProps, horizontal, message, me
     if (!insideControl) {
         content = jsx(Control, { children: content });
     }
-    if (!insideField) {
+    if (ownField) {
         return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
@@ -10647,6 +10784,15 @@ const Taginput = 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 +10814,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 +11086,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 && jsx("small", { className: counterClasses, children: counterText }), name &&
                 tags.map((tag, i) => (jsx("input", { type: "hidden", name: name, value: getDisplayValue(tag), form: form }, `tag-input-${i}`)))] }));
-    if (!insideField) {
+    if (ownField) {
         return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [taginputElement, messageEl] }));
     }
     return (jsxs(Fragment, { children: [taginputElement, messageEl] }));
@@ -11093,11 +11239,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 +11261,7 @@ fieldClassName, controlClassName,
         content = (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 ? jsx("p", { className: helpClass, children: message }) : null;
-    if (!insideField) {
+    if (ownField) {
         return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
@@ -11143,11 +11297,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 +11319,7 @@ fieldClassName, controlClassName,
         content = (jsx(Control, { iconLeft: iconLeft, iconLeftName: iconLeftName, iconLeftSize: iconLeftSize, hasIconsLeft: hasIconsLeft, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
-    if (!insideField) {
+    if (ownField) {
         return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
@@ -11194,11 +11356,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 +11378,7 @@ fieldClassName, controlClassName,
         content = (jsx(Control, { isLoading: controlIsLoading, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
-    if (!insideField) {
+    if (ownField) {
         return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
@@ -11295,6 +11465,21 @@ function makeDate(year, month = 0, day = 1) {
     d.setFullYear(year, month, day);
     return d;
 }
+/**
+ * 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.
+ */
+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;
+}
 /**
  * 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
@@ -11388,12 +11573,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
@@ -11466,7 +11653,9 @@ function formatToken(d, 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.
+            // 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);
@@ -11740,9 +11929,10 @@ function getMonthNames(locale, length = 'long') {
 
 /**
  * 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.
+ * 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 = '[data-focused="true"], [data-focused-year="true"]';
+const CALENDAR_FOCUSED_CELL = '[role="grid"] [data-focused="true"], [role="listbox"] [data-focused-year="true"]';
 const BASE_VIEW = {
     day: 'days',
     month: 'months',
@@ -11839,7 +12029,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 = useRef(null);
     const monthGridRef = useRef(null);
     const yearGridRef = useRef(null);
@@ -11849,6 +12039,8 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
     const isDayGranularity = granularity === 'day';
     const isYearGranularity = granularity === 'year';
     const [view, setView] = useState(baseView);
+    // Nothing before year 1 can be picked or reached, as in HTML's date inputs.
+    const min = useMemo(() => floorMin(minProp), [minProp]);
     const computedDayNames = useMemo(() => {
         if (dayNames && dayNames.length === 7)
             return dayNames;
@@ -11919,7 +12111,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
     const moveFocus = 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;
@@ -11985,7 +12177,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;
@@ -12033,25 +12225,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}`
@@ -12062,7 +12251,9 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
     const [mountYear] = useState(focusedYear);
     const windowYear = isYearGranularity ? mountYear : focusedYear;
     const yearList = 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);
@@ -12071,20 +12262,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 = useMemo(() => new Set(isYearGranularity ? yearList.filter(y => isYearUnselectable(y)) : []), [isYearGranularity, yearList, isYearUnselectable]);
     // The year list's one tab stop, after the month grid's: when the focused
     // year is disabled the stop moves to the nearest enabled year in the list,
-    // and focusing it makes it the focused year. A year outside the list keeps
-    // the stop, which then marks no option.
+    // 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 = useMemo(() => {
-        const i = yearList.indexOf(focusedYear);
-        if (i < 0)
-            return focusedYear;
+        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]);
+    }, [yearList, focusedYear, disabledYears, isYearGranularity]);
     // Which of the focused year's months have no selectable day.
     const disabledMonths = useMemo(() => granularity === 'month'
         ? Array.from({ length: 12 }, (_, m) => isMonthUnselectable(makeDate(focusedYear, m)))
@@ -12291,11 +12487,10 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
         active: isOpen,
         position,
         fixed: appendToBody,
-        // A portaled panel takes its gap from `--bulma-picker-popover-offset` as
-        // a margin, so its coordinates leave the gap out and `auto` reads it off
-        // the panel. An in-place panel's gap is in its `top` or `bottom`, which
-        // `auto` cannot read, so it keeps the hook's default estimate.
-        offset: appendToBody ? 0 : undefined,
+        // 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,
     });
     useEffect(() => {
@@ -12741,33 +12936,35 @@ function useSegmentedEntry(params) {
     // within the same event tick.
     const typedDigitsRef = 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 = useRef(null);
-    // Whether the input's current focus is the one a closing popover handed
-    // back, until focus leaves the picker.
-    const handedBackRef = 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 = 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 = useRef(false);
     const wasOpenRef = useRef(isOpen);
     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]);
     useEffect(() => {
         closingRef.current = false;
     }, [isOpen]);
@@ -12845,13 +13042,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;
         }
@@ -12865,6 +13067,8 @@ function useSegmentedEntry(params) {
         onBlur?.(e);
     }, [
         containerRef,
+        isUntouched,
+        isOpen,
         tryParse,
         text,
         isAllowed,
@@ -12878,7 +13082,6 @@ function useSegmentedEntry(params) {
     ]);
     const handleFocus = useCallback((e) => {
         const handedBack = closingRef.current;
-        handedBackRef.current = handedBack;
         if (!handedBack && openOnFocus && popover && !disabled && !readOnly) {
             setOpen(true);
         }
@@ -13046,12 +13249,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);
     }, [
@@ -13065,6 +13276,7 @@ function useSegmentedEntry(params) {
         setOpen,
         closeOnSelect,
         popover,
+        isUntouched,
         tryParse,
         text,
         isAllowed,
@@ -13113,9 +13325,12 @@ 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;
@@ -13156,14 +13371,19 @@ const SKIPPED_SEGMENTS = {
  * @returns {JSX.Element}
  */
 const DateInputBase = 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] = useState(defaultValue ?? null);
     const value = isControlled ? (controlledValue ?? null) : internalValue;
-    const initialFocused = useMemo(() => clampDate(value ?? new Date(), min, max), 
+    // Nothing before year 1 is in range, as in HTML's date inputs.
+    const lowerBound = useMemo(() => floorMin(min), [min]);
+    const initialFocused = 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
     []);
@@ -13171,8 +13391,8 @@ const DateInputBase = forwardRef((props, ref) => {
     // Re-clamp focusedDate if min/max change after mount so the focused cell
     // never disappears outside the displayable range.
     useEffect(() => {
-        setFocusedDate(prev => clampDate(prev, min, max));
-    }, [min, max]);
+        setFocusedDate(prev => clampDate(prev, lowerBound, max));
+    }, [lowerBound, max]);
     const [open, setOpenState] = useState(false);
     const [text, setText] = useState(value ? formatDate(value, resolvedFormat, locale) : '');
     const inputRef = useRef(null);
@@ -13230,7 +13450,7 @@ const DateInputBase = 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 = useMemo(() => (min && !isDayGranularity ? startOfPeriod(min, granularity) : min), [min, isDayGranularity, granularity]);
+    const periodMin = useMemo(() => isDayGranularity ? lowerBound : startOfPeriod(lowerBound, granularity), [lowerBound, isDayGranularity, granularity]);
     const periodMax = useMemo(() => (max && !isDayGranularity ? endOfPeriod(max, granularity) : max), [max, isDayGranularity, granularity]);
     const handleSelect = useCallback((d) => {
         if (!isWithin(d, periodMin, periodMax))
@@ -13281,7 +13501,7 @@ const DateInputBase = 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 = useCallback((next) => {
         if (next &&
             value &&
@@ -13347,7 +13567,7 @@ const DateInputBase = 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
@@ -13356,7 +13576,11 @@ const DateInputBase = forwardRef((props, ref) => {
             : t.chooseDate;
     const calendar = (jsx(Calendar
     // A new granularity starts the calendar over on its own view.
-    , { granularity: granularity, value: value, focusedDate: focusedDate, onSelect: handleSelect, onFocusedDateChange: setFocusedDate, min: min, max: max, shouldDisableDate: shouldDisableDate, unselectableDates: unselectableDates, firstDayOfWeek: firstDayOfWeek, locale: locale, dayNames: dayNames, monthNames: monthNames, nearbyMonthDays: nearbyMonthDays, color: color, size: size, id: `${popoverId}-cal`, 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 (jsxs("div", { ...cleanRest, ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), children: [calendar, name && (jsx("input", { type: "hidden", name: name, form: form, value: value ? toIsoValue(value, granularity) : '', required: required }))] }));
     }
@@ -13387,26 +13611,34 @@ DateInputBase.displayName = 'DateInputBase';
 const DateInput = 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 = (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 = (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 = (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 ? jsx("p", { className: helpClass, children: message }) : null;
-    if (!insideField) {
+    if (ownField) {
         return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
@@ -14280,7 +14512,10 @@ const fromIsoTime = (s) => {
  * @returns {JSX.Element}
  */
 const TimeInputBase = 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
@@ -14357,6 +14592,8 @@ const TimeInputBase = forwardRef((props, ref) => {
     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 = useMemo(() => floorMin(min), [min]);
     const commitValue = useCallback((next) => {
         if (!isControlled)
             setInternalValue(next);
@@ -14365,10 +14602,10 @@ const TimeInputBase = forwardRef((props, ref) => {
     const handleSpinnerChange = 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 = useCallback((s) => {
         const trimmed = s.trim();
         if (!trimmed)
@@ -14400,7 +14637,7 @@ const TimeInputBase = forwardRef((props, ref) => {
         setText,
         makeBaseDate,
         locale,
-        min,
+        min: lowerBound,
         max,
         isBlocked: unselectableTimes,
         disabled,
@@ -14482,34 +14719,46 @@ TimeInputBase.displayName = 'TimeInputBase';
 const TimeInput = 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 = (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 = (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 = (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 ? jsx("p", { className: helpClass, children: message }) : null;
-    if (!insideField) {
+    if (ownField) {
         return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
 });
 TimeInput.displayName = 'TimeInput';
 
-// The year is padded to four digits, as `datetime-local` requires.
+// 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) => {
+    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');
@@ -14542,7 +14791,10 @@ const fromIsoDateTime = (s) => {
 const DateTimeInputBase = 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
@@ -14552,14 +14804,16 @@ const DateTimeInputBase = forwardRef((props, ref) => {
     const isControlled = controlledValue !== undefined;
     const [internalValue, setInternalValue] = useState(defaultValue ?? null);
     const value = isControlled ? (controlledValue ?? null) : internalValue;
-    const initialFocused = useMemo(() => clampDate(value ?? new Date(), min, max), 
+    // Nothing before year 1 is in range, as in HTML's date inputs.
+    const lowerBound = useMemo(() => floorMin(min), [min]);
+    const initialFocused = useMemo(() => clampDate(value ?? new Date(), lowerBound, max), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     const [focusedDate, setFocusedDate] = useState(initialFocused);
     // Re-clamp focusedDate when min/max change so the focused cell stays valid.
     useEffect(() => {
-        setFocusedDate(prev => clampDate(prev, min, max));
-    }, [min, max]);
+        setFocusedDate(prev => clampDate(prev, lowerBound, max));
+    }, [lowerBound, max]);
     const defaultFormat = format ??
         (hourFormat === '12'
             ? enableSeconds
@@ -14656,18 +14910,18 @@ const DateTimeInputBase = 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 = 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 = useCallback((s) => {
         const trimmed = s.trim();
         if (!trimmed)
@@ -14702,7 +14956,7 @@ const DateTimeInputBase = forwardRef((props, ref) => {
         setText,
         makeBaseDate,
         locale,
-        min,
+        min: lowerBound,
         max,
         isBlocked,
         disabled,
@@ -14735,7 +14989,7 @@ const DateTimeInputBase = 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,
@@ -14786,26 +15040,34 @@ DateTimeInputBase.displayName = 'DateTimeInputBase';
 const DateTimeInput = 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 = (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 = (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 = (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 ? jsx("p", { className: helpClass, children: message }) : null;
-    if (!insideField) {
+    if (ownField) {
         return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));