@allxsmith/bestax-bulma 5.26.6 → 5.27.0

package/dist/index.cjs

@@ -4141,9 +4141,65 @@ const TabsContext = React.createContext(null);
 function useTabsContext() {
     return React.useContext(TabsContext);
 }
+/**
+ * The tabs and panels currently mounted under one `Tabs`. Each registers from
+ * an effect and removes itself on cleanup, so the links between them only
+ * ever name elements that exist, wherever in the tree the panels sit.
+ */
+function useRegistry() {
+    const [records, setRecords] = React.useState([]);
+    const register = React.useCallback((record) => {
+        setRecords(prev => [...prev, record]);
+        return () => setRecords(prev => prev.filter(r => r !== record));
+    }, []);
+    return [records, register];
+}
+/**
+ * The list a tab belongs to: its `role="tablist"` ancestor, so an element
+ * wrapped around a tab doesn't cut it off from the others, or its parent when
+ * it sits outside a tab list.
+ */
+function tabListOf(tab) {
+    return (tab.closest('[role="tablist"]') ?? tab.parentElement);
+}
+/**
+ * The tab a key press moves focus to, found among the tabs of the same list
+ * in DOM order, skipping disabled ones and wrapping at either end.
+ * `undefined` for a key the tab list does not handle, or when no enabled tab
+ * is left to go to.
+ */
+function findTargetTab(current, key, vertical) {
+    const tabs = Array.from(tabListOf(current).querySelectorAll('[role="tab"]'));
+    const isEnabled = (el) => el.getAttribute('aria-disabled') !== 'true';
+    if (key === 'Home')
+        return tabs.find(isEnabled);
+    if (key === 'End')
+        return [...tabs].reverse().find(isEnabled);
+    let step;
+    if (key === 'ArrowRight' || (vertical && key === 'ArrowDown'))
+        step = 1;
+    else if (key === 'ArrowLeft' || (vertical && key === 'ArrowUp'))
+        step = -1;
+    else
+        return undefined;
+    const start = tabs.indexOf(current);
+    for (let i = 1; i <= tabs.length; i++) {
+        const candidate = tabs[(((start + step * i) % tabs.length) + tabs.length) % tabs.length];
+        if (isEnabled(candidate))
+            return candidate;
+    }
+    return undefined;
+}
 /**
  * The `Tabs` component provides flexible and fully-featured Bulma tab navigation for your Bulma React UI.
  *
+ * Built from `Tabs.Tab`, the tabs follow the WAI-ARIA tabs pattern with
+ * manual activation: the tab list is a single tab stop, the arrow keys, Home
+ * and End move focus between tabs (skipping disabled ones), and Enter or
+ * Space activates the focused tab. Each tab names its `Tabs.Content.Item` in
+ * `aria-controls`, and each panel names its tab in `aria-labelledby`. Built
+ * from `Tabs.Item` with links inside, the tabs stay plain Bulma navigation.
+ *
  * @function
  * @param {TabsProps} props - Props for the Tabs component.
  * @returns {JSX.Element} The rendered tabs component.
@@ -4175,7 +4231,45 @@ const TabsComponent = ({ align, size, isFullwidth, isFullWidth, fullwidth, boxed
         }
         onChange?.(index);
     }, [isControlled, onChange]);
-    const contextValue = { activeTab, setActiveTab };
+    const baseId = React.useId();
+    const [tabs, registerTab] = useRegistry();
+    const [panels, registerPanel] = useRegistry();
+    const [focusedTab, setFocusedTab] = React.useState(null);
+    // One tab stop for the whole list (roving tabindex). While focus is inside
+    // the list the stop follows it, so Tab and Shift+Tab leave the list from
+    // whichever tab has focus; once focus leaves, the stop is the selected tab
+    // again. A disabled tab never holds it, and when the selected tab is
+    // disabled or missing the enabled tab with the lowest index does, so the
+    // list can always be reached. Before the tabs register (the server render
+    // and the first client render), the selected tab holds it. The registry is
+    // in the order the tabs last registered, which a tab changing its
+    // `disabled` or `id` reshuffles, hence the sort.
+    const enabledTabs = tabs
+        .filter(t => !t.disabled)
+        .sort((a, b) => a.index - b.index);
+    const canHoldStop = (index) => enabledTabs.some(t => t.index === index);
+    let tabStop;
+    if (canHoldStop(focusedTab))
+        tabStop = focusedTab;
+    else if (tabs.length === 0 || canHoldStop(activeTab))
+        tabStop = activeTab;
+    else
+        tabStop = enabledTabs.length > 0 ? enabledTabs[0].index : null;
+    // Check if children include TabsContent
+    const childArray = React.Children.toArray(children);
+    const hasContent = childArray.some(child => React.isValidElement(child) && child.type === TabsContent);
+    const contextValue = {
+        activeTab,
+        setActiveTab,
+        baseId,
+        tabStop,
+        setFocusedTab,
+        tabId: index => tabs.find(t => t.index === index)?.id,
+        panelId: index => panels.find(p => p.index === index)?.id,
+        registerTab,
+        registerPanel,
+        orientation: hasContent && vertical ? 'vertical' : 'horizontal',
+    };
     // Build classes for the .tabs div
     const tabsClasses = usePrefixedClassNames('tabs', {
         [`is-${align}`]: align,
@@ -4186,9 +4280,6 @@ const TabsComponent = ({ align, size, isFullwidth, isFullWidth, fullwidth, boxed
         'is-toggle': toggle,
         'is-toggle-rounded': rounded,
     });
-    // Check if children include TabsContent
-    const childArray = React.Children.toArray(children);
-    const hasContent = childArray.some(child => React.isValidElement(child) && child.type === TabsContent);
     // Hoisted unconditionally to respect rules-of-hooks. Modifiers gate themselves
     // via their truthy values — `tabs-root` is always prefixed, modifiers only
     // apply in the vertical-with-content branch.
@@ -4237,26 +4328,82 @@ const TabsComponent = ({ align, size, isFullwidth, isFullWidth, fullwidth, boxed
  * @param {TabListProps} props - Props for the TabList component.
  * @returns {JSX.Element} The rendered tab list.
  */
-const TabList = ({ className, children, ...props }) => (jsxRuntime.jsx("ul", { role: "tablist", className: classNames(className) || undefined, ...props, children: children }));
+const TabList = ({ className, children, ...props }) => {
+    const ctx = useTabsContext();
+    return (jsxRuntime.jsx("ul", { role: "tablist", "aria-orientation": ctx?.orientation === 'vertical' ? 'vertical' : undefined, className: classNames(className) || undefined, ...props, children: children }));
+};
 /**
  * Individual tab button. Consumes Tabs context for active state management.
  * Renders `<a>` internally — consumers provide only the label text/children.
+ * Inside a `Tabs` it takes part in the tab list's keyboard support and links
+ * to the `Tabs.Content.Item` with the same `index`.
  *
  * @function
  * @param {TabProps} props - Props for the Tab component.
  * @returns {JSX.Element} The rendered tab.
  */
-const Tab = ({ index, disabled, icon, iconLibrary, iconVariant, iconSize = 'small', iconFeatures, className, children, ...props }) => {
+const Tab = ({ index, disabled, icon, iconLibrary, iconVariant, iconSize = 'small', iconFeatures, className, children, id, onKeyDown, onFocus, onBlur, ...props }) => {
     const ctx = useTabsContext();
     const isActive = ctx ? ctx.activeTab === index : false;
+    const anchorRef = React.useRef(null);
     const activeClass = usePrefixedClassNames({ 'is-active': isActive });
+    const tabId = id ?? (ctx ? `${ctx.baseId}-tab-${index}` : undefined);
+    const registerTab = ctx?.registerTab;
+    React.useEffect(() => {
+        if (!registerTab || tabId === undefined)
+            return undefined;
+        return registerTab({ index, id: tabId, disabled: !!disabled });
+    }, [registerTab, index, tabId, disabled]);
+    // Outside a Tabs there is no list to rove, so every enabled tab stays in
+    // the page tab order, as it always did.
+    let tabIndex;
+    if (disabled)
+        tabIndex = -1;
+    else if (ctx)
+        tabIndex = ctx.tabStop === index ? 0 : -1;
+    else
+        tabIndex = 0;
     const handleClick = React.useCallback((e) => {
         e.preventDefault();
         if (!disabled && ctx) {
             ctx.setActiveTab(index);
         }
     }, [disabled, ctx, index]);
-    return (jsxRuntime.jsx("li", { className: classNames(activeClass, className) || undefined, role: "tab", "aria-selected": isActive, tabIndex: disabled ? -1 : 0, ...props, children: jsxRuntime.jsxs("a", { onClick: handleClick, "aria-disabled": disabled || undefined, children: [icon && (jsxRuntime.jsx(Icon, { name: icon, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })), children && jsxRuntime.jsx("span", { children: children })] }) }));
+    const handleKeyDown = (e) => {
+        onKeyDown?.(e);
+        // A key on something inside the tab is that element's to answer.
+        if (e.defaultPrevented ||
+            e.target !== e.currentTarget ||
+            e.altKey ||
+            e.ctrlKey ||
+            e.metaKey) {
+            return;
+        }
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            // Activate through a click on the inner <a>, the element a pointer
+            // clicks, so click listeners see keyboard activation the way they see
+            // a native button's.
+            anchorRef.current.click();
+            return;
+        }
+        const target = findTargetTab(e.currentTarget, e.key, ctx?.orientation === 'vertical');
+        if (target) {
+            e.preventDefault();
+            target.focus();
+        }
+    };
+    const handleFocus = (e) => {
+        onFocus?.(e);
+        ctx?.setFocusedTab(index);
+    };
+    const handleBlur = (e) => {
+        onBlur?.(e);
+        if (!tabListOf(e.currentTarget).contains(e.relatedTarget)) {
+            ctx?.setFocusedTab(null);
+        }
+    };
+    return (jsxRuntime.jsx("li", { className: classNames(activeClass, className) || undefined, role: "tab", id: tabId, "aria-selected": isActive, "aria-controls": ctx?.panelId(index), "aria-disabled": disabled || undefined, tabIndex: tabIndex, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, ...props, children: jsxRuntime.jsxs("a", { ref: anchorRef, onClick: handleClick, "aria-disabled": disabled || undefined, children: [icon && (jsxRuntime.jsx(Icon, { name: icon, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })), children && jsxRuntime.jsx("span", { children: children })] }) }));
 };
 /**
  * Each tab; accepts `active`, `onClick`, etc.
@@ -4286,13 +4433,20 @@ const TabsContentComponent = ({ className, children, ...props }) => {
  * @param {TabContentItemProps} props - Props for the TabContentItem component.
  * @returns {JSX.Element} The rendered tab content panel.
  */
-const TabContentItem = ({ index, className, children, ...props }) => {
+const TabContentItem = ({ index, className, children, id, ...props }) => {
     const ctx = useTabsContext();
     const isActive = ctx ? ctx.activeTab === index : false;
     const itemClass = usePrefixedClassNames('tabs-content-item', {
         'is-active': isActive,
     });
-    return (jsxRuntime.jsx("div", { className: classNames(itemClass, className), role: "tabpanel", "aria-hidden": !isActive, ...props, children: children }));
+    const panelId = id ?? (ctx ? `${ctx.baseId}-panel-${index}` : undefined);
+    const registerPanel = ctx?.registerPanel;
+    React.useEffect(() => {
+        if (!registerPanel || panelId === undefined)
+            return undefined;
+        return registerPanel({ index, id: panelId });
+    }, [registerPanel, index, panelId]);
+    return (jsxRuntime.jsx("div", { className: classNames(itemClass, className), role: "tabpanel", id: panelId, "aria-labelledby": ctx?.tabId(index), "aria-hidden": !isActive, ...props, children: children }));
 };
 // ---------------------------------------------------------------------------
 // Static property attachment
@@ -8850,6 +9004,10 @@ const ON_CONTROL = {
  * 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.
+ * `iconLeftSize` and `hasIconsLeft` show nothing on a `Control` without a
+ * glyph, so when they move and the caller chose no left icon, the advice
+ * names the wrapper's default glyph too, and following it draws what the
+ * wrapper's own `Control` did.
  * Internal; not part of the public API.
  */
 const rendersOwnControl = (component, options) => {
@@ -8860,18 +9018,32 @@ const rendersOwnControl = (component, options) => {
         return false;
     const names = held.join(' ');
     const doNothing = held.length > 1 ? 'those props do' : 'that prop does';
+    let message;
     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.`);
+        message =
+            `[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.`);
+        const toSet = held.map(prop => ON_CONTROL[prop]);
+        const needsGlyph = (options.iconLeftSize || options.hasIconsLeft) &&
+            !options.iconLeft &&
+            options.iconLeftName === undefined &&
+            options.defaultIconLeftName;
+        if (needsGlyph) {
+            toSet.push(`iconLeftName="${options.defaultIconLeftName}" (its default icon)`);
+        }
+        message =
+            `[bestax-bulma] <${component} ${names}> inside a <Control> renders ` +
+                `no <Control> of its own, so ${doNothing} nothing there. Set ` +
+                `${listOf(toSet)} on that <Control> instead.`;
     }
+    // Keyed by the message itself: the props named do not settle the advice
+    // (an empty `iconLeftName` and an unset one name the same props), so two
+    // calls that would advise differently must not share a key.
+    warnOnce(message, message);
     return false;
 };
 const FieldLabelIdContext = React.createContext(undefined);
@@ -9358,7 +9530,40 @@ const Checkboxes = withSubComponents(CheckboxesComponent, { Checkbox }, 'Checkbo
  */
 const File = React.forwardRef(({ 
 // Field props
-label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, color, size, isBoxed, isFullwidth, isFullWidth, isRight, isCentered, hasName, buttonLabel, iconLeft, iconRight, className, inputClassName, fileName, ...props }, ref) => {
+label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, color, size, isBoxed, isFullwidth, isFullWidth, isRight, isCentered, hasName, buttonLabel, iconLeft, iconRight, className, inputClassName, fileName, pickedFilesLabel, onChange, ...props }, ref) => {
+    // What the user last picked, and the form a reset of which clears it.
+    const [picked, setPicked] = React.useState();
+    const pickedForm = picked?.form;
+    React.useEffect(() => {
+        if (!pickedForm)
+            return;
+        let timer;
+        // The reset event fires before the form resets, and a listener after this one can still
+        // cancel it, so the name is cleared a task later, and only if the reset went ahead.
+        const onReset = (event) => {
+            timer = setTimeout(() => {
+                if (!event.defaultPrevented)
+                    setPicked(undefined);
+            });
+        };
+        pickedForm.addEventListener('reset', onReset);
+        return () => {
+            pickedForm.removeEventListener('reset', onReset);
+            clearTimeout(timer);
+        };
+    }, [pickedForm]);
+    const handleChange = (event) => {
+        const { files, form } = event.target;
+        setPicked(files?.length
+            ? { count: files.length, firstName: files[0].name, form }
+            : undefined);
+        onChange?.(event);
+    };
+    const pickedText = picked &&
+        (picked.count === 1
+            ? picked.firstName
+            : (pickedFilesLabel?.(picked.count) ?? `${picked.count} files`));
+    const shownName = fileName ?? pickedText;
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('File', {
@@ -9404,7 +9609,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         [`is-${messageColor}`]: !!messageColor,
     });
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
-    const fileElement = (jsxRuntime.jsx("div", { className: fileClass, children: jsxRuntime.jsxs("label", { className: usePrefixedClassNames('file-label'), children: [jsxRuntime.jsx("input", { ref: ref, className: classNames(usePrefixedClassNames('file-input'), inputClassName), type: "file", id: controlId, ...rest }), jsxRuntime.jsxs("span", { className: usePrefixedClassNames('file-cta'), children: [iconLeft && (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'file-icon'), children: iconLeft })), jsxRuntime.jsx("span", { className: usePrefixedClassNames('file-label'), children: buttonLabel || 'Choose a file\u2026' }), iconRight && (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'file-icon'), children: iconRight }))] }), hasName && fileName && (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'file-name'), children: fileName }))] }) }));
+    const fileElement = (jsxRuntime.jsx("div", { className: fileClass, children: jsxRuntime.jsxs("label", { className: usePrefixedClassNames('file-label'), children: [jsxRuntime.jsx("input", { ref: ref, className: classNames(usePrefixedClassNames('file-input'), inputClassName), type: "file", id: controlId, onChange: handleChange, ...rest }), jsxRuntime.jsxs("span", { className: usePrefixedClassNames('file-cta'), children: [iconLeft && (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'file-icon'), children: iconLeft })), jsxRuntime.jsx("span", { className: usePrefixedClassNames('file-label'), children: buttonLabel || 'Choose a file\u2026' }), iconRight && (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'file-icon'), children: iconRight }))] }), hasName && shownName && (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'file-name'), children: shownName }))] }) }));
     if (ownField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [fileElement, messageEl] }));
     }
@@ -11481,6 +11686,12 @@ fieldClassName, controlClassName,
 });
 TextArea.displayName = 'TextArea';
 
+/**
+ * Whether a key is Alt+ArrowDown or Alt+ArrowUp, which open and close a
+ * picker's popover. The calendar and the time wheels leave both to it rather
+ * than reading them as plain arrows.
+ */
+const isPopoverToggleKey = (e) => e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp');
 const DEFAULT_PICKER_LABELS = {
     prevMonth: 'Previous month',
     nextMonth: 'Next month',
@@ -11492,6 +11703,8 @@ const DEFAULT_PICKER_LABELS = {
     rangeStart: 'Start date',
     rangeEnd: 'End date',
     rangePreviewEnd: 'Choose as end date',
+    rangeSeparator: '–',
+    chooseDateRange: 'Choose date range',
     hours: 'hours',
     minutes: 'minutes',
     seconds: 'seconds',
@@ -11699,6 +11912,12 @@ function addMonths(d, n) {
 function addYears(d, n) {
     return addMonths(d, n * 12);
 }
+/**
+ * A copy of `d` with the given parts of its time of day set and the rest
+ * left as they are. A time started from the clock rather than from a value
+ * should pass the seconds its picker does not show, and the milliseconds,
+ * as `0`, or it keeps the ones the clock had.
+ */
 function setTimeOfDay(d, parts) {
     const r = new Date(d);
     if (parts.hours !== undefined)
@@ -11707,6 +11926,8 @@ function setTimeOfDay(d, parts) {
         r.setMinutes(parts.minutes);
     if (parts.seconds !== undefined)
         r.setSeconds(parts.seconds);
+    if (parts.milliseconds !== undefined)
+        r.setMilliseconds(parts.milliseconds);
     return r;
 }
 /**
@@ -11855,6 +12076,36 @@ function formatDateTime(d, fmt, locale) {
         return formatTokenString(d, f);
     return formatWithIntl(d, f, locale);
 }
+/**
+ * The value as a native input and a 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. HTML has no such shape
+ * for a year before 1, so a date then is empty, as those inputs would make it.
+ */
+function toIsoValue(d, granularity) {
+    if (d.getFullYear() < FIRST_YEAR)
+        return '';
+    const year = pad(d.getFullYear(), 4);
+    if (granularity === 'year')
+        return year;
+    const month = `${year}-${pad(d.getMonth() + 1)}`;
+    return granularity === 'month' ? month : `${month}-${pad(d.getDate())}`;
+}
+/**
+ * Read a native `type="date"` or `type="month"` value back into a Date. HTML
+ * allows a year of four or more digits, as `toIsoValue` writes one past 9999.
+ */
+function fromIsoValue(s, granularity) {
+    if (granularity === 'month') {
+        const m = /^(\d{4,})-(\d{2})$/.exec(s);
+        return m ? makeDate(Number(m[1]), Number(m[2]) - 1) : null;
+    }
+    const m = /^(\d{4,})-(\d{2})-(\d{2})$/.exec(s);
+    if (!m)
+        return null;
+    return makeDate(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+}
 /**
  * Derive the hour cycle (`'12'` or `'24'`) a display format will render, from
  * its first hour token: `h`/`hh` → 12-hour with meridiem, `H`/`HH` → 24-hour.
@@ -12356,6 +12607,8 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
         }
     }, [min, max, isDateUnselectable, onFocusedDateChange]);
     const handleKeyDown = React.useCallback((e) => {
+        if (isPopoverToggleKey(e))
+            return;
         // A key takes the range preview back from the pointer.
         setHoverDate(null);
         switch (e.key) {
@@ -12448,6 +12701,8 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
         }
     }, [min, max, isMonthUnselectable, onFocusedDateChange]);
     const handleMonthKeyDown = React.useCallback((e) => {
+        if (isPopoverToggleKey(e))
+            return;
         if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
             if (!isMonthUnselectable(focusedDate)) {
@@ -12582,6 +12837,8 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
         }
     }, [yearList, disabledYears, onFocusedDateChange, min, max]);
     const handleYearListKeyDown = React.useCallback((e) => {
+        if (isPopoverToggleKey(e))
+            return;
         if (isYearGranularity) {
             const step = yearStep(e.key, focusedYear, yearList);
             if (!step)
@@ -12843,6 +13100,8 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
         document.addEventListener('pointerdown', handler);
         return () => document.removeEventListener('pointerdown', handler);
     }, [isOpen, closeOnClickOutside, anchorRef, onClose]);
+    // Escape closes it, and so does Alt+ArrowUp, the combobox's key for it,
+    // which the calendar and the time wheels inside leave to it.
     React.useEffect(() => {
         if (!isOpen || !closeOnEscape || !isBrowser)
             return undefined;
@@ -12851,6 +13110,11 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
                 e.stopPropagation();
                 onClose();
             }
+            else if (e.altKey && e.key === 'ArrowUp') {
+                e.preventDefault();
+                e.stopPropagation();
+                onClose();
+            }
         };
         document.addEventListener('keydown', handler);
         return () => document.removeEventListener('keydown', handler);
@@ -13254,7 +13518,7 @@ const SEPARATOR_RE = /[/:\-.\s]/;
  * null and the input transparently falls back to free-form text entry.
  */
 function useSegmentedEntry(params) {
-    const { format, skipKinds, value, commitValue, formatFn, tryParse, text, setText, makeBaseDate, locale, min, max, isBlocked, disabled, readOnly, editable = true, popover = true, openOnFocus = true, closeOnSelect = false, isOpen, setOpen, inputRef, containerRef, onFocus, onClick, onKeyDown, onBlur, } = params;
+    const { format, skipKinds, value, commitValue, formatFn, tryParse, text, setText, makeBaseDate, locale, min, max, isBlocked, isUnfinishedBlocked, disabled, readOnly, editable = true, popover = true, openOnFocus = true, closeOnSelect = false, isOpen, setOpen, inputRef, containerRef, onFocus, onClick, onKeyDown, onBlur, } = params;
     const segmentMap = React.useMemo(() => {
         const map = typeof format === 'string' ? buildSegmentMap(format) : null;
         if (!map || !skipKinds)
@@ -13450,7 +13714,7 @@ function useSegmentedEntry(params) {
         // Clicking the field opens the popover only when `openOnFocus` is on —
         // a click is just a focus. With `openOnFocus={false}` (manual-entry
         // mode) the click positions the caret for typing and the popover is
-        // opened explicitly via the right launcher button (or ArrowDown).
+        // opened explicitly via the right launcher button (or Alt+ArrowDown).
         if (openOnFocus && popover && !disabled && !readOnly)
             setOpen(true);
         if (segmentEditable && segmentMap && inputRef.current) {
@@ -13486,14 +13750,23 @@ function useSegmentedEntry(params) {
             const isPm = base.getHours() >= 12;
             switch (e.key) {
                 case 'ArrowUp':
-                    e.preventDefault();
-                    typedDigitsRef.current = '';
-                    applyDateFromSegment(incrementSegmentValue(seg, base, 1, isPm));
-                    return;
                 case 'ArrowDown':
                     e.preventDefault();
+                    // The plain arrows step the segment, so the popover opens on
+                    // Alt+ArrowDown and closes on Alt+ArrowUp, as a combobox's does,
+                    // and neither steps it.
+                    if (e.altKey) {
+                        if (e.key === 'ArrowUp') {
+                            if (isOpen)
+                                setOpen(false);
+                        }
+                        else if (!isOpen && popover) {
+                            setOpen(true);
+                        }
+                        return;
+                    }
                     typedDigitsRef.current = '';
-                    applyDateFromSegment(incrementSegmentValue(seg, base, -1, isPm));
+                    applyDateFromSegment(incrementSegmentValue(seg, base, e.key === 'ArrowUp' ? 1 : -1, isPm));
                     return;
                 case 'ArrowRight':
                     e.preventDefault();
@@ -13559,6 +13832,8 @@ function useSegmentedEntry(params) {
                         const nextBuffer = typedDigitsRef.current + e.key;
                         typedDigitsRef.current = nextBuffer;
                         const { date, advance } = setSegmentValue(seg, base, nextBuffer, isPm);
+                        if (!advance && isUnfinishedBlocked?.(date))
+                            return;
                         applyDateFromSegment(date);
                         if (advance) {
                             typedDigitsRef.current = '';
@@ -13569,11 +13844,23 @@ function useSegmentedEntry(params) {
             }
         }
         // ----- free-form / popover key handling -----
-        if (e.key === 'ArrowDown' && !isOpen && popover) {
+        // With no segment to step, ArrowDown opens the popover with or without
+        // Alt, unless the field is read-only or disabled, as focus and the
+        // launcher don't open it then either. Alt+ArrowUp closes it.
+        if (e.key === 'ArrowDown' &&
+            !isOpen &&
+            popover &&
+            !disabled &&
+            !readOnly) {
             e.preventDefault();
             setOpen(true);
             return;
         }
+        if (e.key === 'ArrowUp' && e.altKey && isOpen) {
+            e.preventDefault();
+            setOpen(false);
+            return;
+        }
         if (e.key === 'Escape' && isOpen) {
             e.preventDefault();
             setOpen(false);
@@ -13603,11 +13890,14 @@ function useSegmentedEntry(params) {
         activeSegmentIdx,
         segmentBaseDate,
         applyDateFromSegment,
+        isUnfinishedBlocked,
         moveSegment,
         isOpen,
         setOpen,
         closeOnSelect,
         popover,
+        disabled,
+        readOnly,
         isUntouched,
         tryParse,
         text,
@@ -13652,37 +13942,6 @@ function supportsInputType(type) {
     return supported;
 }
 
-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. HTML has no such shape
- * for a year before 1, so a date then is empty, as those inputs would make it.
- */
-const toIsoValue = (d, granularity) => {
-    if (d.getFullYear() < FIRST_YEAR)
-        return '';
-    const year = String(d.getFullYear()).padStart(4, '0');
-    if (granularity === 'year')
-        return year;
-    const month = `${year}-${pad2$1(d.getMonth() + 1)}`;
-    return granularity === 'month' ? month : `${month}-${pad2$1(d.getDate())}`;
-};
-/**
- * Read a native `type="date"` or `type="month"` value back into a Date. HTML
- * allows a year of four or more digits, as `toIsoValue` writes one past 9999.
- */
-const fromIsoValue = (s, granularity) => {
-    if (granularity === 'month') {
-        const m = /^(\d{4,})-(\d{2})$/.exec(s);
-        return m ? makeDate(Number(m[1]), Number(m[2]) - 1) : null;
-    }
-    const m = /^(\d{4,})-(\d{2})-(\d{2})$/.exec(s);
-    if (!m)
-        return null;
-    return makeDate(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
-};
 const DEFAULT_FORMATS = {
     day: DEFAULT_DATE_FORMAT,
     month: DEFAULT_MONTH_FORMAT,
@@ -13784,7 +14043,11 @@ const DateInputBase = React.forwardRef((props, ref) => {
     // them, so the month or year containing `min` stays reachable.
     const periodMin = React.useMemo(() => isDayGranularity ? lowerBound : startOfPeriod(lowerBound, granularity), [lowerBound, isDayGranularity, granularity]);
     const periodMax = React.useMemo(() => (max && !isDayGranularity ? endOfPeriod(max, granularity) : max), [max, isDayGranularity, granularity]);
-    const handleSelect = React.useCallback((d) => {
+    // A pick is the day at midnight, as a click on its cell gives. Enter hands
+    // over the focused date, which can carry a time of day from the clock, a
+    // value or a bound, so its time is dropped here.
+    const handleSelect = React.useCallback((picked) => {
+        const d = startOfDay(picked);
         if (!isWithin(d, periodMin, periodMax))
             return;
         commitValue(d);
@@ -13956,13 +14219,14 @@ const DateInput = React.forwardRef((props, ref) => {
     // 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.
+    // prop the caller set, so it goes in only for the advice.
     const ownControl = rendersOwnControl('DateInput', {
         insideControl,
         inline: baseProps.inline,
         isLoading,
         iconLeft,
         iconLeftName: props.iconLeftName,
+        defaultIconLeftName: iconLeftName,
         iconLeftSize,
         iconRight,
         iconRightName,
@@ -14352,23 +14616,28 @@ const WheelInner = ({ values, index, onChange, formatLabel, formatAriaText, aria
         cancelRaf();
         commitPosition(Math.round(positionRef.current) + delta);
     }, [disabled, cancelRaf, commitPosition]);
+    // The keys are a spinbutton's: up raises the value and down lowers it. The
+    // values run down the wheel, so up brings the one below the band into it,
+    // the way a drag or a scroll that moves the items up does.
     const onKeyDown = React.useCallback((e) => {
+        if (isPopoverToggleKey(e))
+            return;
         switch (e.key) {
             case 'ArrowUp':
                 e.preventDefault();
-                moveBy(-1);
+                moveBy(1);
                 break;
             case 'ArrowDown':
                 e.preventDefault();
-                moveBy(1);
+                moveBy(-1);
                 break;
             case 'PageUp':
                 e.preventDefault();
-                moveBy(-5);
+                moveBy(5);
                 break;
             case 'PageDown':
                 e.preventDefault();
-                moveBy(5);
+                moveBy(-5);
                 break;
             case 'Home':
                 e.preventDefault();
@@ -14685,6 +14954,7 @@ const TimeWheels = ({ value, onChange, hourFormat = '24', enableSeconds = false,
             hours: h,
             minutes: m,
             seconds: s,
+            milliseconds: 0,
         });
         return !unselectableTimes(probe);
     }, [unselectableTimes]);
@@ -14951,9 +15221,16 @@ const TimeInputBase = React.forwardRef((props, ref) => {
             setInternalValue(next);
         onChange?.(next);
     }, [isControlled, onChange]);
+    // An empty field starts from today, at the whole minute or second the
+    // wheels show.
     const handleSpinnerChange = React.useCallback((parts) => {
-        const base = value ?? new Date();
-        const next = setTimeOfDay(base, parts);
+        const next = value
+            ? setTimeOfDay(value, parts)
+            : setTimeOfDay(new Date(), {
+                ...parts,
+                seconds: parts.seconds ?? 0,
+                milliseconds: 0,
+            });
         if (!isWithin(next, lowerBound, max))
             return;
         commitValue(next);
@@ -15084,13 +15361,14 @@ const TimeInput = React.forwardRef((props, ref) => {
     // 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.
+    // prop the caller set, so it goes in only for the advice.
     const ownControl = rendersOwnControl('TimeInput', {
         insideControl,
         inline: baseProps.inline,
         isLoading,
         iconLeft,
         iconLeftName: props.iconLeftName,
+        defaultIconLeftName: iconLeftName,
         iconLeftSize,
         iconRight,
         iconRightName,
@@ -15268,6 +15546,34 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
         if (!open)
             setTimeOpen(false);
     }, [open]);
+    // The footer's Time button opens the wheels, and the hours wheel takes
+    // focus so the keys turn it straight away. The calendar they cover is
+    // inert meanwhile, so no tab stop, pointer or screen reader reaches a day
+    // behind them; the attribute is set on the element, as React 18 has no
+    // `inert` prop. Closing the wheels hands focus back to the button: focus
+    // in them would fall to the page as they unmount, and a pointer press
+    // outside them has already dropped it on the panel or the page. Focus the
+    // keys moved on to the footer, such as Reset, stays there.
+    const panelRef = React.useRef(null);
+    const calendarRef = React.useRef(null);
+    const timeButtonRef = React.useRef(null);
+    const timeOverlayRef = React.useRef(null);
+    React.useEffect(() => {
+        calendarRef.current?.toggleAttribute('inert', timeOpen);
+        if (!timeOpen)
+            return;
+        timeOverlayRef.current
+            ?.querySelector('[role="spinbutton"]')
+            ?.focus();
+    }, [timeOpen]);
+    const closeTime = React.useCallback(() => {
+        const panel = panelRef.current;
+        const active = getActiveElementInTree(panel);
+        const movedOn = !!panel?.contains(active) && !timeOverlayRef.current?.contains(active);
+        if (!movedOn)
+            timeButtonRef.current?.focus();
+        setTimeOpen(false);
+    }, []);
     const commitValue = React.useCallback((next) => {
         if (!isControlled)
             setInternalValue(next);
@@ -15276,20 +15582,32 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
             setFocusedDate(next);
         onChange?.(next);
     }, [isControlled, onChange]);
+    // A picked day takes the value's whole time of day, seconds and all, or
+    // midnight in an empty field. The day handed over by the keyboard is the
+    // calendar's focused date, which can carry the time of the clock it
+    // started from, so none of its time is kept.
     const handleDateSelect = React.useCallback((d) => {
         const merged = setTimeOfDay(d, {
             hours: value?.getHours() ?? 0,
             minutes: value?.getMinutes() ?? 0,
-            seconds: enableSeconds ? (value?.getSeconds() ?? 0) : undefined,
+            seconds: value?.getSeconds() ?? 0,
+            milliseconds: value?.getMilliseconds() ?? 0,
         });
         if (!isWithin(merged, lowerBound, max))
             return;
         commitValue(merged);
         setFocusedDate(d);
-    }, [value, enableSeconds, lowerBound, max, commitValue]);
+    }, [value, lowerBound, max, commitValue]);
+    // The wheels set the value's time. An empty field starts from the focused
+    // day, at the whole minute or second the wheels show.
     const handleTimeChange = React.useCallback((parts) => {
-        const base = value ?? focusedDate;
-        const next = setTimeOfDay(base, parts);
+        const next = value
+            ? setTimeOfDay(value, parts)
+            : setTimeOfDay(focusedDate, {
+                ...parts,
+                seconds: parts.seconds ?? 0,
+                milliseconds: 0,
+            });
         if (!isWithin(next, lowerBound, max))
             return;
         commitValue(next);
@@ -15303,8 +15621,12 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
         const fmt = typeof defaultFormat === 'string' ? defaultFormat : undefined;
         return parseDate(trimmed, fmt ?? DEFAULT_DATETIME_FORMAT);
     }, [parse, defaultFormat, locale]);
-    // The Date the user edits when starting without a current value (now).
-    const makeBaseDate = React.useCallback(() => new Date(), []);
+    // The Date the user edits when starting without a current value: now, at
+    // the whole minute, or the whole second with `enableSeconds`.
+    const makeBaseDate = React.useCallback(() => setTimeOfDay(new Date(), {
+        seconds: enableSeconds ? undefined : 0,
+        milliseconds: 0,
+    }), [enableSeconds]);
     const inputReadOnlyAttr = !!readOnly || !editable;
     const canOpen = !!popover && !disabled && !readOnly;
     // Blocking predicate for manual entry, combining the calendar's
@@ -15368,20 +15690,20 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
         minutes: value?.getMinutes() ?? 0,
         seconds: enableSeconds ? (value?.getSeconds() ?? 0) : undefined,
     };
-    const panel = (jsxRuntime.jsxs("div", { className: panelClass, onKeyDown: e => {
+    const panel = (jsxRuntime.jsxs("div", { ref: panelRef, className: panelClass, onKeyDown: e => {
             // First Escape collapses the floating time wheels; the popover's own
             // Escape handler (which closes the whole panel) only sees the second.
             if (timeOpen && e.key === 'Escape') {
                 e.stopPropagation();
-                setTimeOpen(false);
+                closeTime();
             }
-        }, children: [jsxRuntime.jsxs("div", { className: calendarWrapClass, children: [jsxRuntime.jsx(Calendar, { value: value, focusedDate: focusedDate, onSelect: handleDateSelect, 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 }), timeOpen && (jsxRuntime.jsx("div", { className: timeOverlayClass, onClick: e => {
+        }, children: [jsxRuntime.jsxs("div", { className: calendarWrapClass, children: [jsxRuntime.jsx("div", { ref: calendarRef, children: jsxRuntime.jsx(Calendar, { value: value, focusedDate: focusedDate, onSelect: handleDateSelect, 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 }) }), timeOpen && (jsxRuntime.jsx("div", { ref: timeOverlayRef, className: timeOverlayClass, onClick: e => {
                             // Tap outside the wheel card (on the covered calendar area)
                             // collapses the wheels without selecting a date, matching the
                             // native behavior.
                             if (e.target === e.currentTarget)
-                                setTimeOpen(false);
-                        }, children: jsxRuntime.jsx("div", { className: timeCardClass, children: jsxRuntime.jsx(TimeWheels, { value: spinnerValue, onChange: handleTimeChange, hourFormat: effectiveHourFormat, enableSeconds: enableSeconds, incrementHours: incrementHours, incrementMinutes: incrementMinutes, incrementSeconds: incrementSeconds, unselectableTimes: unselectableTimes, color: color, size: size, disabled: disabled, id: `${popoverId}-time`, labels: labels, itemHeight: wheelItemHeight, audioTick: effectiveAudioTick, onCommit: () => setOpen(false) }) }) }))] }), jsxRuntime.jsxs("div", { className: footerClass, children: [jsxRuntime.jsxs("button", { type: "button", className: footerTimeClass, onClick: () => setTimeOpen(o => !o), "aria-expanded": timeOpen, disabled: disabled, children: [jsxRuntime.jsx("span", { children: t.time }), jsxRuntime.jsx("span", { className: footerTimePillClass, children: value ? formatTime(value, timeDisplayFormat, locale) : '—' })] }), jsxRuntime.jsxs("div", { className: footerActionsClass, children: [jsxRuntime.jsx("button", { type: "button", className: footerResetClass, onClick: () => commitValue(valueAtOpenRef.current), children: t.reset }), jsxRuntime.jsx("button", { type: "button", className: footerDoneClass, "aria-label": t.done, onClick: () => setOpen(false), children: jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M5 11l4 4 8-8", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] })] }));
+                                closeTime();
+                        }, children: jsxRuntime.jsx("div", { className: timeCardClass, children: jsxRuntime.jsx(TimeWheels, { value: spinnerValue, onChange: handleTimeChange, hourFormat: effectiveHourFormat, enableSeconds: enableSeconds, incrementHours: incrementHours, incrementMinutes: incrementMinutes, incrementSeconds: incrementSeconds, unselectableTimes: unselectableTimes, color: color, size: size, disabled: disabled, id: `${popoverId}-time`, labels: labels, itemHeight: wheelItemHeight, audioTick: effectiveAudioTick, onCommit: () => setOpen(false) }) }) }))] }), jsxRuntime.jsxs("div", { className: footerClass, children: [jsxRuntime.jsxs("button", { ref: timeButtonRef, type: "button", className: footerTimeClass, onClick: () => (timeOpen ? closeTime() : setTimeOpen(true)), "aria-expanded": timeOpen, disabled: disabled, children: [jsxRuntime.jsx("span", { children: t.time }), jsxRuntime.jsx("span", { className: footerTimePillClass, children: value ? formatTime(value, timeDisplayFormat, locale) : '—' })] }), jsxRuntime.jsxs("div", { className: footerActionsClass, children: [jsxRuntime.jsx("button", { type: "button", className: footerResetClass, onClick: () => commitValue(valueAtOpenRef.current), children: t.reset }), jsxRuntime.jsx("button", { type: "button", className: footerDoneClass, "aria-label": t.done, onClick: () => setOpen(false), children: jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M5 11l4 4 8-8", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] })] }));
     if (inline) {
         return (jsxRuntime.jsxs("div", { ...cleanRest, ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), children: [panel, name && (jsxRuntime.jsx("input", { type: "hidden", name: name, form: form, value: value ? toIsoDateTime(value, enableSeconds) : '', required: required }))] }));
     }
@@ -15425,13 +15747,14 @@ const DateTimeInput = React.forwardRef((props, ref) => {
     // 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.
+    // prop the caller set, so it goes in only for the advice.
     const ownControl = rendersOwnControl('DateTimeInput', {
         insideControl,
         inline: baseProps.inline,
         isLoading,
         iconLeft,
         iconLeftName: props.iconLeftName,
+        defaultIconLeftName: iconLeftName,
         iconLeftSize,
         iconRight,
         iconRightName,
@@ -15466,6 +15789,354 @@ const DateTimeInput = React.forwardRef((props, ref) => {
 });
 DateTimeInput.displayName = 'DateTimeInput';
 
+const EMPTY_RANGE = [null, null];
+/** A range's end as the form and the native inputs carry it. */
+const isoDay = (d) => (d ? toIsoValue(d, 'day') : '');
+/** Today at local midnight, where typing into an empty end starts. */
+const today = () => startOfDay(new Date());
+/**
+ * Raw DateRangeInput: the two inputs and the popover calendar without
+ * Field/Control wrapping. Use `DateRangeInput` for the convenience wrapper.
+ *
+ * @function
+ * @param {DateRangeInputBaseProps} props
+ * @returns {JSX.Element}
+ */
+const DateRangeInputBase = React.forwardRef((props, ref) => {
+    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled, readOnly, placeholder, format, parse, locale, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = true, position = 'bottom-left', appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, allowDisabledInRange = false, firstDayOfWeek = 0, dayNames, monthNames, nearbyMonthDays = true, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, name, startName, endName, form, required, id, className, onFocus, onFocusCapture, ...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 resolvedFormat = format ?? DEFAULT_DATE_FORMAT;
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? EMPTY_RANGE);
+    const range = isControlled ? controlledValue : internalValue;
+    const [start, end] = range;
+    // Nothing before year 1 is in range, as in HTML's date inputs.
+    const lowerBound = React.useMemo(() => floorMin(min), [min]);
+    const [focusedDate, setFocusedDate] = React.useState(() => clampDate(start ?? end ?? new Date(), lowerBound, max));
+    // Re-clamp the focused day if the bounds change after mount, so the
+    // calendar never shows a month outside them.
+    React.useEffect(() => {
+        setFocusedDate(prev => clampDate(prev, lowerBound, max));
+    }, [lowerBound, max]);
+    const [open, setOpenState] = React.useState(false);
+    const [startText, setStartText] = React.useState(() => start ? formatDate(start, resolvedFormat, locale) : '');
+    const [endText, setEndText] = React.useState(() => end ? formatDate(end, resolvedFormat, locale) : '');
+    // Each input shows its end of the range as it changes from outside.
+    React.useEffect(() => {
+        setStartText(start ? formatDate(start, resolvedFormat, locale) : '');
+    }, [start, resolvedFormat, locale]);
+    React.useEffect(() => {
+        setEndText(end ? formatDate(end, resolvedFormat, locale) : '');
+    }, [end, resolvedFormat, locale]);
+    const containerRef = React.useRef(null);
+    const startRef = React.useRef(null);
+    const endRef = React.useRef(null);
+    const reactId = React.useId();
+    const popoverId = id ? `${id}-popover` : `picker-${reactId}`;
+    const { bulmaHelperClasses, rest: cleanRest } = useBulmaClasses(rest);
+    const { shouldUseNative } = useNativeMobilePicker({
+        force: mobileNative === 'auto' ? undefined : mobileNative,
+    });
+    const useNative = !inline && shouldUseNative;
+    // The root borrows DateInput's container class, which places the launcher
+    // and sizes a Control's icons around the field.
+    const containerClass = usePrefixedClassNames('daterangeinput', 'dateinput-container');
+    const fieldClass = usePrefixedClassNames('input', 'daterangeinput-field', {
+        [`is-${color}`]: !!color,
+        [`is-${size}`]: !!size,
+        'is-rounded': isRounded,
+        'is-disabled': disabled,
+    });
+    const inputClass = usePrefixedClassNames('daterangeinput-input');
+    const separatorClass = usePrefixedClassNames('daterangeinput-separator');
+    const triggerClass = usePrefixedClassNames('dateinput-trigger');
+    // What the latest request asked for, so a second request in the same event
+    // sees it before React renders. The callbacks fire here rather than in a
+    // state updater, which StrictMode calls twice.
+    const requestedOpenRef = React.useRef(false);
+    const setOpen = React.useCallback((next) => {
+        if (requestedOpenRef.current === next)
+            return;
+        requestedOpenRef.current = next;
+        setOpenState(next);
+        if (next)
+            onOpen?.();
+        else
+            onClose?.();
+    }, [onOpen, onClose]);
+    // Focus that moves inside the field, from one input to the other or from
+    // the launcher, is not focus arriving, so it opens nothing. Set as the
+    // focus is captured on the way in, and cleared once the input has handled
+    // it, so a click that follows still opens the popover.
+    const focusFromInsideRef = React.useRef(false);
+    const handleFocusCapture = (e) => {
+        const from = e.relatedTarget;
+        focusFromInsideRef.current = !!from && e.currentTarget.contains(from);
+        onFocusCapture?.(e);
+    };
+    const handleFocus = (e) => {
+        focusFromInsideRef.current = false;
+        onFocus?.(e);
+    };
+    const requestOpen = React.useCallback((next) => {
+        if (next && focusFromInsideRef.current)
+            return;
+        setOpen(next);
+    }, [setOpen]);
+    const commitRange = React.useCallback((next) => {
+        if (!isControlled)
+            setInternalValue(next);
+        onChange?.(next);
+    }, [isControlled, onChange]);
+    const constraints = React.useMemo(() => ({ shouldDisableDate, unselectableDates }), [shouldDisableDate, unselectableDates]);
+    // A day the calendar disables: shouldDisableDate or unselectableDates.
+    // Typing and the native inputs check the bounds alongside it.
+    const isBlockedDay = React.useCallback((d) => !!shouldDisableDate?.(d) ||
+        !!unselectableDates?.some(u => isSameDay(u, d)), [shouldDisableDate, unselectableDates]);
+    // An end the range can take: it is not disabled, and it closes a range
+    // from the start, which it can't when it comes first or, unless allowed,
+    // reaches over a disabled day.
+    const isBlockedEnd = React.useCallback((d) => isBlockedDay(d) ||
+        (!!start && !canCloseRange(start, d, constraints, allowDisabledInRange)), [isBlockedDay, start, constraints, allowDisabledInRange]);
+    // A new start keeps the end only while the two still make a range, so a
+    // start moved past the end, or over a disabled day before it, clears it.
+    const commitStart = React.useCallback((next) => {
+        const keepsEnd = !next ||
+            !end ||
+            canCloseRange(next, end, constraints, allowDisabledInRange);
+        commitRange([next, keepsEnd ? end : null]);
+        if (next)
+            setFocusedDate(next);
+    }, [end, constraints, allowDisabledInRange, commitRange]);
+    // Every digit typed into the start commits, so a start passes through
+    // values on its way to the one being typed. The first digits of a year make
+    // a start centuries back, which can't keep the end once a disabled day may
+    // lie between. Such a value waits for the segment's next digit rather than
+    // clearing an end the finished start may keep.
+    const startCostsEnd = React.useCallback((d) => !!end && !canCloseRange(d, end, constraints, allowDisabledInRange), [end, constraints, allowDisabledInRange]);
+    const commitEnd = React.useCallback((next) => {
+        commitRange([start, next]);
+        if (next)
+            setFocusedDate(next);
+    }, [start, commitRange]);
+    const handleRangeSelect = React.useCallback((from, to) => {
+        commitRange([from, to]);
+        setFocusedDate(to);
+        if (closeOnSelect)
+            setOpen(false);
+    }, [commitRange, closeOnSelect, setOpen]);
+    const tryParse = React.useCallback((s) => {
+        const trimmed = s.trim();
+        if (!trimmed)
+            return null;
+        const fmt = typeof format === 'string' ? format : undefined;
+        return parse
+            ? parse(trimmed)
+            : parseDate(trimmed, fmt ?? DEFAULT_DATE_FORMAT);
+    }, [parse, format, locale]);
+    // Typing into an empty end starts from the start, so only what differs
+    // needs typing; an empty start starts from today.
+    const makeEndBase = React.useCallback(() => (start ? startOfDay(start) : today()), [start]);
+    // Where focus goes back as the popover closes: the input focused last,
+    // which is the one that opened it unless the launcher did, or the start
+    // input before either has had focus.
+    const openerRef = React.useRef(null);
+    const restoreFocusRef = React.useMemo(() => ({
+        get current() {
+            return openerRef.current ?? startRef.current;
+        },
+    }), []);
+    const shared = {
+        format: resolvedFormat,
+        formatFn: formatDate,
+        tryParse,
+        locale,
+        min: lowerBound,
+        max,
+        disabled,
+        readOnly,
+        editable,
+        popover,
+        openOnFocus,
+        closeOnSelect,
+        isOpen: open,
+        setOpen: requestOpen,
+    };
+    // Each input is its own picker field. Its blur counts focus leaving it,
+    // even for the other input, so text typed into one is read as focus moves
+    // to the other.
+    const { inputHandlers: startHandlers } = useSegmentedEntry({
+        ...shared,
+        value: start,
+        commitValue: commitStart,
+        text: startText,
+        setText: setStartText,
+        makeBaseDate: today,
+        isBlocked: isBlockedDay,
+        isUnfinishedBlocked: startCostsEnd,
+        inputRef: startRef,
+        containerRef: startRef,
+        onFocus: () => {
+            openerRef.current = startRef.current;
+        },
+    });
+    const { inputHandlers: endHandlers } = useSegmentedEntry({
+        ...shared,
+        value: end,
+        commitValue: commitEnd,
+        text: endText,
+        setText: setEndText,
+        makeBaseDate: makeEndBase,
+        isBlocked: isBlockedEnd,
+        inputRef: endRef,
+        containerRef: endRef,
+        onFocus: () => {
+            openerRef.current = endRef.current;
+        },
+    });
+    const combinedRef = React.useCallback((node) => {
+        startRef.current =
+            node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const handlePopoverClose = React.useCallback(() => setOpen(false), [setOpen]);
+    const startField = startName ?? (name ? `${name}[start]` : undefined);
+    const endField = endName ?? (name ? `${name}[end]` : undefined);
+    const hiddenInputs = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [startField && (jsxRuntime.jsx("input", { type: "hidden", name: startField, form: form, value: isoDay(start) })), endField && (jsxRuntime.jsx("input", { type: "hidden", name: endField, form: form, value: isoDay(end) }))] }));
+    const separator = (jsxRuntime.jsx("span", { className: separatorClass, "aria-hidden": "true", children: t.rangeSeparator }));
+    // Native mobile path: two <input type="date">s, held to the same rules as
+    // typing. A change the rules refuse leaves the input showing the range.
+    if (useNative) {
+        const nativeChange = (commit, isBlocked) => (e) => {
+            // An empty value is the end cleared. A date input gives nothing else
+            // that doesn't read as a date.
+            const parsed = fromIsoValue(e.target.value, 'day');
+            if (!parsed)
+                commit(null);
+            else if (isWithin(parsed, lowerBound, max) && !isBlocked(parsed)) {
+                commit(parsed);
+            }
+        };
+        const minIso = min ? isoDay(lowerBound) : undefined;
+        const maxIso = max ? isoDay(max) : undefined;
+        return (jsxRuntime.jsxs("div", { ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [jsxRuntime.jsxs("div", { className: fieldClass, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "date", id: id, "aria-label": t.rangeStart, className: inputClass, value: isoDay(start), onChange: nativeChange(commitStart, isBlockedDay), min: minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required }), separator, jsxRuntime.jsx("input", { ref: endRef, type: "date", id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, className: inputClass, value: isoDay(end), onChange: nativeChange(commitEnd, isBlockedEnd), min: start ? isoDay(start) : minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required })] }), hiddenInputs] }));
+    }
+    const calendar = (jsxRuntime.jsx(Calendar, { range: range, onRangeSelect: handleRangeSelect, allowDisabledInRange: allowDisabledInRange, focusedDate: focusedDate, 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.
+        id: inline ? popoverId : `${popoverId}-cal`, autoFocusCell: open, labels: labels }));
+    if (inline) {
+        return (jsxRuntime.jsxs("div", { ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [calendar, hiddenInputs] }));
+    }
+    const canOpen = !!popover && !disabled && !readOnly;
+    const inputReadOnly = !!readOnly || !editable;
+    // The field reads as one text box, so a press on it that misses both
+    // inputs, on its padding, the gap or the separator, goes to the nearer
+    // input and does what a press on that input does.
+    const handleFieldMouseDown = (e) => {
+        const startInput = startRef.current;
+        const endInput = endRef.current;
+        if (disabled || e.button !== 0)
+            return;
+        if (e.target === startInput || e.target === endInput)
+            return;
+        e.preventDefault();
+        const middle = (startInput.getBoundingClientRect().right +
+            endInput.getBoundingClientRect().left) /
+            2;
+        (e.clientX < middle ? startInput : endInput).focus();
+        if (openOnFocus && canOpen)
+            requestOpen(true);
+    };
+    const comboboxProps = {
+        type: 'text',
+        role: 'combobox',
+        'aria-haspopup': 'dialog',
+        'aria-expanded': open,
+        'aria-controls': popoverId,
+        autoComplete: 'off',
+        className: inputClass,
+        placeholder,
+        disabled,
+        readOnly: inputReadOnly,
+        required,
+    };
+    return (jsxRuntime.jsxs("div", { ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: handleFocus, onFocusCapture: handleFocusCapture, children: [jsxRuntime.jsxs("div", { className: fieldClass, onMouseDown: handleFieldMouseDown, children: [jsxRuntime.jsx("input", { ...comboboxProps, ref: combinedRef, id: id, "aria-label": t.rangeStart, value: startText, ...startHandlers }), separator, jsxRuntime.jsx("input", { ...comboboxProps, ref: endRef, id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, value: endText, ...endHandlers })] }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, 
+                // Disabled whenever the popover can't open, so a click can.
+                onClick: () => setOpen(!open), disabled: !canOpen, "aria-label": t.chooseDateRange, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { isOpen: open, onClose: handlePopoverClose, anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseDateRange, id: popoverId, restoreFocusRef: restoreFocusRef, initialFocusSelector: CALENDAR_FOCUSED_CELL, children: calendar })), hiddenInputs] }));
+});
+DateRangeInputBase.displayName = 'DateRangeInputBase';
+
+/**
+ * The `DateRangeInput` component is a form input for a start and end date, picked from one popover calendar or typed into two segmented inputs.
+ *
+ * @function
+ * @param {DateRangeInputProps} props - Props for the DateRangeInput.
+ * @returns {JSX.Element}
+ *
+ * @example
+ * <DateRangeInput label="Stay" name="stay" min={new Date()} />
+ */
+const DateRangeInput = React.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('DateRangeInput', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
+    // Inline mode renders a bare calendar with no input, so the Control's
+    // icon containers have 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, so it goes in only for the advice.
+    const ownControl = rendersOwnControl('DateRangeInput', {
+        insideControl,
+        inline: baseProps.inline,
+        isLoading,
+        iconLeft,
+        iconLeftName: props.iconLeftName,
+        defaultIconLeftName: iconLeftName,
+        iconLeftSize,
+        iconRight,
+        iconRightName,
+        iconRightSize,
+        hasIconsLeft,
+        hasIconsRight,
+        isExpanded,
+        controlSize,
+        controlClassName,
+    });
+    const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({
+        label,
+        labelProps,
+        rendersLabel: ownField,
+    });
+    const helpClass = usePrefixedClassNames('help', {
+        [`is-${messageColor}`]: !!messageColor,
+    });
+    let content = (jsxRuntime.jsx(DateRangeInputBase, { ref: ref, "aria-labelledby": ariaLabelledBy, ...baseProps }));
+    if (ownControl) {
+        content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
+    }
+    const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
+    if (ownField) {
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, messageEl] }));
+});
+DateRangeInput.displayName = 'DateRangeInput';
+
 /**
  * The `Cell` component provides a single Bulma grid cell for use inside the [`Grid`](./grid.md) component.
  *
@@ -16872,6 +17543,8 @@ exports.Content = Content;
 exports.Control = Control;
 exports.DateInput = DateInput;
 exports.DateInputBase = DateInputBase;
+exports.DateRangeInput = DateRangeInput;
+exports.DateRangeInputBase = DateRangeInputBase;
 exports.DateTimeInput = DateTimeInput;
 exports.DateTimeInputBase = DateTimeInputBase;
 exports.Delete = Delete;