@allxsmith/bestax-bulma 5.26.3 → 5.26.5

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,108 @@ 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;
+};
+// Each Control-level prop, with what takes its place on the `Control` the
+// caller wrapped around the wrapper. `bare-control.test.tsx` holds this to
+// what each wrapper hands its own `Control`, so a new Control-level prop
+// fails there until it is added here and passed to `rendersOwnControl`.
+const ON_CONTROL = {
+    isLoading: 'isLoading',
+    iconLeft: 'iconLeft',
+    iconLeftName: 'iconLeftName',
+    iconLeftSize: 'iconLeftSize',
+    iconRight: 'iconRight',
+    iconRightName: 'iconRightName',
+    iconRightSize: 'iconRightSize',
+    hasIconsLeft: 'hasIconsLeft',
+    hasIconsRight: 'hasIconsRight',
+    isExpanded: 'isExpanded',
+    controlSize: 'size (for controlSize)',
+    controlClassName: 'className (for controlClassName)',
+};
+/**
+ * Whether a convenience form wrapper renders a `Control` of its own (#921):
+ * only outside one. Inside a `Control` it renders none, so the props it
+ * would have handed its own do nothing there, and it warns in development,
+ * naming them and saying to set them on that `Control`. An `inline` picker
+ * renders none in either place, so it drops them inside a `Control` or not,
+ * and its warning says so without pointing at a `Control`. A wrapper passes
+ * only the props it hands its own `Control`, as the caller gave them, so a
+ * default the wrapper fills in itself never warns. A prop counts when it is
+ * truthy, since a falsy one would change nothing on a `Control` either.
+ * Internal; not part of the public API.
+ */
+const rendersOwnControl = (component, options) => {
+    if (!options.inline && !options.insideControl)
+        return true;
+    const held = Object.keys(ON_CONTROL).filter(prop => options[prop]);
+    if (held.length === 0)
+        return false;
+    const names = held.join(' ');
+    const doNothing = held.length > 1 ? 'those props do' : 'that prop does';
+    if (options.inline) {
+        warnOnce(`${component}:Control-props-inline:${held.join('+')}`, `[bestax-bulma] <${component} inline ${names}> renders no <Control> ` +
+            `in inline mode, inside a <Control> or not, so ${doNothing} ` +
+            `nothing. Leave ${held.length > 1 ? 'them' : 'it'} out of an ` +
+            `inline picker.`);
+    }
+    else {
+        warnOnce(`${component}:Control-props-in-Control:${held.join('+')}`, `[bestax-bulma] <${component} ${names}> inside a <Control> renders ` +
+            `no <Control> of its own, so ${doNothing} nothing there. Set ` +
+            `${listOf(held.map(prop => ON_CONTROL[prop]))} on that <Control> ` +
+            `instead.`);
+    }
+    return false;
+};
 const FieldLabelIdContext = createContext(undefined);
 /**
  * The id a labeled Field wants its single composed control to adopt (#495).
@@ -8865,6 +9001,19 @@ 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.
+// Autocomplete reads it for its clear button, which sits there too.
+// 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 +9073,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 +9298,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,
@@ -9178,10 +9335,10 @@ const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message
     }), [name, groupActive, currentValue, handleChange]);
     const checkboxesElement = (jsx("div", { className: wrapperClass, role: "group", "aria-labelledby": ariaLabelledBy, ...rest, children: jsx(CheckboxesProvider, { value: ctx, children: children }) }));
     let content = checkboxesElement;
-    if (!insideControl) {
+    if (rendersOwnControl('Checkboxes', { 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 +9357,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 +9402,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 +9535,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,
@@ -9401,10 +9575,10 @@ const RadiosComponent = ({ label, labelSize, labelProps, horizontal, message, me
     }), [name, groupActive, currentValue, handleChange]);
     const radiosElement = (jsx("div", { className: wrapperClass, role: "radiogroup", "aria-labelledby": ariaLabelledBy, ...rest, children: jsx(RadiosProvider, { value: ctx, children: children }) }));
     let content = radiosElement;
-    if (!insideControl) {
+    if (rendersOwnControl('Radios', { 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 +9758,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 +9773,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');
@@ -9927,10 +10109,10 @@ const Slider = forwardRef((props, ref) => {
                         '--slider-output-arrow-offset': `calc(50% - ${nudgeXHigh}px)`,
                     }, children: formatValue(currentRange[1]) })), renderTicks()] }));
     let content = sliderElement;
-    if (!insideControl) {
+    if (rendersOwnControl('Slider', { 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 +10342,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);
@@ -10363,10 +10553,10 @@ const Rate = forwardRef(({ label, labelSize, labelProps, horizontal, message, me
     const rateCustomTextClass = usePrefixedClassNames('rate-custom-text');
     const rateElement = (jsxs("div", { ref: ref, className: combinedClasses, role: "radiogroup", "aria-label": ariaLabelledBy ? undefined : 'Rating', "aria-labelledby": ariaLabelledBy, "aria-valuenow": currentValue, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuetext": ariaValueText, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, ...rest, children: [jsx("div", { className: rateItemsClass, children: renderIcons() }), showScore && (jsx("span", { className: rateScoreClass, children: getScoreDisplay() })), text && jsx("span", { className: rateTextClass, children: text }), customText && (jsx("span", { className: rateCustomTextClass, children: customText })), name && (jsx("input", { type: "hidden", name: name, value: currentValue, form: form }))] }));
     let content = rateElement;
-    if (!insideControl) {
+    if (rendersOwnControl('Rate', { 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] }));
@@ -10602,7 +10792,11 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         [`is-${messageColor}`]: !!messageColor,
     });
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
-    const autocompleteElement = (jsxs("div", { ref: containerRef, className: combinedClasses, ...rest, children: [jsxs("div", { className: controlClasses, children: [jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: placeholder, disabled: disabled, name: name, form: form, required: required, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, role: "combobox", "aria-expanded": isActive, "aria-haspopup": "listbox", "aria-autocomplete": "list", autoComplete: "off" }), clearable && inputValue && !disabled && (jsx("span", { className: iconRightClickableClass, onClick: handleClear, role: "button", "aria-label": "Clear", children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", children: [jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })), loading && (jsx("span", { className: iconRightClass, children: jsx("span", { className: loaderClass }) }))] }), isActive && (filteredData.length > 0 || empty) && (jsx("div", { className: dropdownMenuClasses, children: jsxs("div", { ref: dropdownRef, className: dropdownContentClass, style: { maxHeight: `${maxHeight}px`, overflowY: 'auto' }, role: "listbox", onScroll: handleDropdownScroll, children: [header && jsx("div", { className: dropdownHeaderClass, children: header }), filteredData.length > 0 ? (filteredData.map((item, index) => {
+    // The clear button gives way to a spinner at its spot: the `loading` one,
+    // or that of a loading Control this sits in.
+    const controlLoading = useControlLoading();
+    const showClear = clearable && !!inputValue && !disabled && !loading && !controlLoading;
+    const autocompleteElement = (jsxs("div", { ref: containerRef, className: combinedClasses, ...rest, children: [jsxs("div", { className: controlClasses, children: [jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: placeholder, disabled: disabled, name: name, form: form, required: required, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, role: "combobox", "aria-expanded": isActive, "aria-haspopup": "listbox", "aria-autocomplete": "list", autoComplete: "off" }), showClear && (jsx("button", { type: "button", className: iconRightClickableClass, onClick: handleClear, "aria-label": "Clear", children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", "aria-hidden": "true", children: [jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })), loading && (jsx("span", { className: iconRightClass, children: jsx("span", { className: loaderClass }) }))] }), isActive && (filteredData.length > 0 || empty) && (jsx("div", { className: dropdownMenuClasses, children: jsxs("div", { ref: dropdownRef, className: dropdownContentClass, style: { maxHeight: `${maxHeight}px`, overflowY: 'auto' }, role: "listbox", onScroll: handleDropdownScroll, children: [header && jsx("div", { className: dropdownHeaderClass, children: header }), filteredData.length > 0 ? (filteredData.map((item, index) => {
                             const isDisabled = typeof item !== 'string' && item.disabled;
                             const isHighlighted = index === highlightedIndex;
                             const itemClasses = prefixedClassNames(classPrefix, 'dropdown-item', {
@@ -10647,6 +10841,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 +10871,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 +11143,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,21 +11296,44 @@ fieldClassName, controlClassName,
 ...inputProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const ownField = rendersOwnField('Input', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
+    const ownControl = rendersOwnControl('Input', {
+        insideControl,
+        isLoading,
+        iconLeft,
+        iconLeftName,
+        iconLeftSize,
+        iconRight,
+        iconRightName,
+        iconRightSize,
+        hasIconsLeft,
+        hasIconsRight,
+        isExpanded,
+        controlSize,
+        controlClassName,
+    });
     const { controlId, fieldLabelProps } = useAutoLabelId({
         label,
         id: inputProps.id,
         labelProps,
-        rendersLabel: !insideField,
+        rendersLabel: ownField,
     });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
     let content = jsx(InputBase, { ref: ref, id: controlId, ...inputProps });
-    if (!insideControl) {
+    if (ownControl) {
         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,21 +11369,40 @@ fieldClassName, controlClassName,
 ...selectProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const ownField = rendersOwnField('Select', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
+    // Not isLoading, which the select draws itself and so keeps in a Control.
+    const ownControl = rendersOwnControl('Select', {
+        insideControl,
+        iconLeft,
+        iconLeftName,
+        iconLeftSize,
+        hasIconsLeft,
+        isExpanded,
+        controlSize,
+        controlClassName,
+    });
     const { controlId, fieldLabelProps } = useAutoLabelId({
         label,
         id: selectProps.id,
         labelProps,
-        rendersLabel: !insideField,
+        rendersLabel: ownField,
     });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
     let content = jsx(SelectBase, { ref: ref, id: controlId, ...selectProps });
-    if (!insideControl) {
+    if (ownControl) {
         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,21 +11439,35 @@ fieldClassName, controlClassName,
 ...textAreaProps }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const ownField = rendersOwnField('TextArea', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
+    const ownControl = rendersOwnControl('TextArea', {
+        insideControl,
+        isLoading: controlIsLoading,
+        controlSize,
+        controlClassName,
+    });
     const { controlId, fieldLabelProps } = useAutoLabelId({
         label,
         id: textAreaProps.id,
         labelProps,
-        rendersLabel: !insideField,
+        rendersLabel: ownField,
     });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
     let content = jsx(TextAreaBase, { ref: ref, id: controlId, ...textAreaProps });
-    if (!insideControl) {
+    if (ownControl) {
         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 +11554,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 +11662,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 +11742,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 +12018,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',
@@ -11816,10 +12095,11 @@ function nearestEnabled(i, disabled) {
     return i;
 }
 /**
- * The year list's keyboard when it is the selection surface: arrows move a
- * year or a row, Home/End go to the list's ends. Returns the year to start
- * from and the direction to search past disabled years, or `null` for a key
- * the list doesn't handle.
+ * The year list's keyboard, as the selection surface and as navigation:
+ * arrows move a year or a row, Home/End go to the list's ends. Returns the
+ * year to start from and the direction to search past disabled years, or
+ * `null` for a key the list doesn't handle. As navigation no year is
+ * disabled, so only the year is used.
  */
 function yearStep(key, focusedYear, years) {
     switch (key) {
@@ -11839,7 +12119,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 +12129,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 +12201,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 +12267,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 +12315,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 +12341,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 +12352,31 @@ 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 it marks the current year, so a year
+    // outside the list marks no option, and the stop itself follows focus.
     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]);
+    // As navigation the keys move focus and leave the focused year alone, so
+    // the tab stop goes to the year that last had focus while it is listed,
+    // and Tab leaves the list rather than landing on the current year. It
+    // starts over each time the list opens.
+    const [navYear, setNavYear] = useState(null);
+    const listTabStop = navYear !== null && yearList.includes(navYear) ? navYear : tabStopYear;
     // 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)))
@@ -12120,19 +12412,39 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
         }
     }, [yearList, disabledYears, onFocusedDateChange, min, max]);
     const handleYearListKeyDown = useCallback((e) => {
-        if (!isYearGranularity) {
-            // As navigation, Escape returns to the grid the list was opened from.
-            if (e.key === 'Escape') {
-                e.preventDefault();
-                setView(baseView);
-            }
+        if (isYearGranularity) {
+            const step = yearStep(e.key, focusedYear, yearList);
+            if (!step)
+                return;
+            e.preventDefault();
+            moveYearFocus(step[0], step[1]);
+            return;
+        }
+        // As navigation, Escape returns to the grid the list was opened from.
+        // It stops there, so a popover around the calendar stays open and only
+        // a second Escape closes it.
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            setView(baseView);
             return;
         }
-        const step = yearStep(e.key, focusedYear, yearList);
+        // The other keys move DOM focus from the year that has it and leave
+        // the focused date alone. The list is centred on that date, so moving
+        // it would reflow the list under the keyboard, and it would turn the
+        // grid behind the list before anything is picked. Enter or Space
+        // clicks the year with focus, which picks it.
+        const options = Array.from(e.currentTarget.querySelectorAll('[role="option"]'));
+        const from = options.indexOf(e.target);
+        if (from < 0)
+            return;
+        const step = yearStep(e.key, yearList[from], yearList);
         if (!step)
             return;
         e.preventDefault();
-        moveYearFocus(step[0], step[1]);
+        // The listed years run one apart, so a year's index is its distance
+        // from the first. A step past either end finds no option.
+        options[step[0] - yearList[0]]?.focus();
     }, [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.
@@ -12203,7 +12515,10 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
         list.querySelector('[data-focused-year="true"]')?.focus();
     }, [isYearGranularity, focusedYear]);
     const navArrow = (d) => (jsx("svg", { viewBox: "0 0 16 16", width: "14", height: "14", "aria-hidden": "true", children: jsx("path", { d: d, fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-    return (jsxs("div", { className: classNames(calendarClass, className), id: id, children: [jsxs("div", { className: headerClass, children: [isYearGranularity ? (jsx("span", { className: monthLabelClass, id: labelId, children: monthLabel })) : (jsxs("button", { type: "button", className: monthTriggerClass, "aria-haspopup": "listbox", "aria-expanded": view === 'years', onClick: () => setView(v => (v === 'years' ? baseView : 'years')), children: [jsx("span", { className: monthLabelClass, id: labelId, "aria-live": "polite", children: monthLabel }), jsx("svg", { className: monthCaretClass, viewBox: "0 0 12 12", width: "10", height: "10", "aria-hidden": "true", children: jsx("path", { d: "M2 4l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })] })), !isYearGranularity && (jsxs("div", { className: navGroupClass, children: [jsx("button", { type: "button", className: navPrevClass, "aria-label": isDayGranularity ? t.prevMonth : t.prevYear, disabled: prevDisabled || view !== baseView, onClick: () => onFocusedDateChange(prevAnchor), children: navArrow('M10 3l-5 5 5 5') }), jsx("button", { type: "button", className: navNextClass, "aria-label": isDayGranularity ? t.nextMonth : t.nextYear, disabled: nextDisabled || view !== baseView, onClick: () => onFocusedDateChange(nextAnchor), children: navArrow('M6 3l5 5-5 5') })] }))] }), view === 'days' && (jsxs(Fragment, { children: [jsx("div", { className: dayNamesRowClass, "aria-hidden": "true", children: computedDayNames.map((name, i) => (jsx("div", { className: dayNameClass, children: name }, i))) }), jsx("div", { ref: gridRef, role: "grid", "aria-labelledby": labelId, className: gridClass, onKeyDown: handleKeyDown, ...gridFocusHandlers, children: cells.map(cell => {
+    return (jsxs("div", { className: classNames(calendarClass, className), id: id, children: [jsxs("div", { className: headerClass, children: [isYearGranularity ? (jsx("span", { className: monthLabelClass, id: labelId, children: monthLabel })) : (jsxs("button", { type: "button", className: monthTriggerClass, "aria-haspopup": "listbox", "aria-expanded": view === 'years', onClick: () => {
+                            setNavYear(null);
+                            setView(v => (v === 'years' ? baseView : 'years'));
+                        }, children: [jsx("span", { className: monthLabelClass, id: labelId, "aria-live": "polite", children: monthLabel }), jsx("svg", { className: monthCaretClass, viewBox: "0 0 12 12", width: "10", height: "10", "aria-hidden": "true", children: jsx("path", { d: "M2 4l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })] })), !isYearGranularity && (jsxs("div", { className: navGroupClass, children: [jsx("button", { type: "button", className: navPrevClass, "aria-label": isDayGranularity ? t.prevMonth : t.prevYear, disabled: prevDisabled || view !== baseView, onClick: () => onFocusedDateChange(prevAnchor), children: navArrow('M10 3l-5 5 5 5') }), jsx("button", { type: "button", className: navNextClass, "aria-label": isDayGranularity ? t.nextMonth : t.nextYear, disabled: nextDisabled || view !== baseView, onClick: () => onFocusedDateChange(nextAnchor), children: navArrow('M6 3l5 5-5 5') })] }))] }), view === 'days' && (jsxs(Fragment, { children: [jsx("div", { className: dayNamesRowClass, "aria-hidden": "true", children: computedDayNames.map((name, i) => (jsx("div", { className: dayNameClass, children: name }, i))) }), jsx("div", { ref: gridRef, role: "grid", "aria-labelledby": labelId, className: gridClass, onKeyDown: handleKeyDown, ...gridFocusHandlers, children: cells.map(cell => {
                             const disabled = isDateUnselectable(cell.date);
                             const isSelected = !!value && isSameDay(value, cell.date);
                             const isFocused = isSameDay(cell.date, tabStopDay);
@@ -12263,10 +12578,16 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
                         'is-today': isToday,
                         'is-disabled': disabled,
                     });
-                    return (jsx("button", { type: "button", role: "option", "aria-selected": isSelected, "aria-disabled": isYearGranularity ? disabled : undefined, "aria-current": isYearGranularity && isToday ? 'date' : undefined, "data-focused-year": isFocused ? 'true' : undefined, tabIndex: isFocused ? 0 : -1, disabled: disabled, className: cellCls, onFocus: () => {
-                            // Reached by Tab while the focused year is disabled, or by
-                            // pointer: keys move on from here.
-                            if (isYearGranularity && year !== focusedYear) {
+                    return (jsx("button", { type: "button", role: "option", "aria-selected": isSelected, "aria-disabled": isYearGranularity ? disabled : undefined, "aria-current": isYearGranularity && isToday ? 'date' : undefined, "data-focused-year": isFocused ? 'true' : undefined, tabIndex: year === listTabStop ? 0 : -1, disabled: disabled, className: cellCls, onFocus: () => {
+                            // As navigation, focusing a year by key or pointer only
+                            // moves the tab stop: nothing is committed until a year is
+                            // picked. As the selection surface it is reached by Tab
+                            // while the focused year is disabled, or by pointer, and
+                            // keys move on from here.
+                            if (!isYearGranularity) {
+                                setNavYear(year);
+                            }
+                            else if (year !== focusedYear) {
                                 onFocusedDateChange(clampDate(makeDate(year), min, max));
                             }
                         }, onClick: () => isYearGranularity
@@ -12291,11 +12612,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 +13061,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 +13167,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 +13192,8 @@ function useSegmentedEntry(params) {
         onBlur?.(e);
     }, [
         containerRef,
+        isUntouched,
+        isOpen,
         tryParse,
         text,
         isAllowed,
@@ -12878,7 +13207,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 +13374,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 +13401,7 @@ function useSegmentedEntry(params) {
         setOpen,
         closeOnSelect,
         popover,
+        isUntouched,
         tryParse,
         text,
         isAllowed,
@@ -13113,9 +13450,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 +13496,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 +13516,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 +13575,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 +13626,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 +13692,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 +13701,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 }))] }));
     }
@@ -13384,29 +13733,57 @@ DateInputBase.displayName = 'DateInputBase';
  *   shouldDisableDate={d => d.getDay() === 0 || d.getDay() === 6}
  * />
  */
-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 DateInput = forwardRef((props, ref) => {
+    const { label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'calendar', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps } = props;
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const ownField = rendersOwnField('DateInput', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
+    // Inline mode renders a bare calendar with no input, so the Control's
+    // icon-left container has nothing to anchor to, and it renders no
+    // Control inside one or out. The left icon is checked as the caller
+    // passed it: the default glyph is this component's own choice, not a
+    // prop the caller set.
+    const ownControl = rendersOwnControl('DateInput', {
+        insideControl,
+        inline: baseProps.inline,
+        isLoading,
+        iconLeft,
+        iconLeftName: props.iconLeftName,
+        iconLeftSize,
+        iconRight,
+        iconRightName,
+        iconRightSize,
+        hasIconsLeft,
+        hasIconsRight,
+        isExpanded,
+        controlSize,
+        controlClassName,
+    });
     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 }));
-    // 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) {
+    // 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 }));
+    if (ownControl) {
         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 +14657,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 +14737,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 +14747,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 +14782,7 @@ const TimeInputBase = forwardRef((props, ref) => {
         setText,
         makeBaseDate,
         locale,
-        min,
+        min: lowerBound,
         max,
         isBlocked: unselectableTimes,
         disabled,
@@ -14479,37 +14861,69 @@ TimeInputBase.displayName = 'TimeInputBase';
  * @example
  * <TimeInput label="Slot" hourFormat="12" incrementMinutes={15} />
  */
-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 TimeInput = forwardRef((props, ref) => {
+    const { label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'clock', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps } = props;
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const ownField = rendersOwnField('TimeInput', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
+    // Inline mode renders a bare panel with no input, so the Control's
+    // icon-left container has nothing to anchor to, and it renders no
+    // Control inside one or out. The left icon is checked as the caller
+    // passed it: the default glyph is this component's own choice, not a
+    // prop the caller set.
+    const ownControl = rendersOwnControl('TimeInput', {
+        insideControl,
+        inline: baseProps.inline,
+        isLoading,
+        iconLeft,
+        iconLeftName: props.iconLeftName,
+        iconLeftSize,
+        iconRight,
+        iconRightName,
+        iconRightSize,
+        hasIconsLeft,
+        hasIconsRight,
+        isExpanded,
+        controlSize,
+        controlClassName,
+    });
     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 }));
-    // 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) {
+    // 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 }));
+    if (ownControl) {
         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 +14956,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 +14969,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 +15075,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 +15121,7 @@ const DateTimeInputBase = forwardRef((props, ref) => {
         setText,
         makeBaseDate,
         locale,
-        min,
+        min: lowerBound,
         max,
         isBlocked,
         disabled,
@@ -14735,7 +15154,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,
@@ -14783,29 +15202,57 @@ DateTimeInputBase.displayName = 'DateTimeInputBase';
  *   shouldDisableDate={d => d.getDay() === 0 || d.getDay() === 6}
  * />
  */
-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 DateTimeInput = forwardRef((props, ref) => {
+    const { label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'calendar-alt', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps } = props;
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const ownField = rendersOwnField('DateTimeInput', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
+    // Inline mode renders a bare picker with no input, so the Control's
+    // icon-left container has nothing to anchor to, and it renders no
+    // Control inside one or out. The left icon is checked as the caller
+    // passed it: the default glyph is this component's own choice, not a
+    // prop the caller set.
+    const ownControl = rendersOwnControl('DateTimeInput', {
+        insideControl,
+        inline: baseProps.inline,
+        isLoading,
+        iconLeft,
+        iconLeftName: props.iconLeftName,
+        iconLeftSize,
+        iconRight,
+        iconRightName,
+        iconRightSize,
+        hasIconsLeft,
+        hasIconsRight,
+        isExpanded,
+        controlSize,
+        controlClassName,
+    });
     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 }));
-    // 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) {
+    // 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 }));
+    if (ownControl) {
         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] }));