@allxsmith/bestax-bulma 5.26.5 → 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
@@ -7691,7 +7845,8 @@ const noAnnouncementsYet = {
 // the accessibility tree. The declarations match the `extras-sr-only` mixin,
 // plus `clip-path`, which replaces the deprecated `clip`. The negative margin
 // pulls the 1px box back inside the page, so it doesn't add scrollable
-// overflow.
+// overflow. Exported for other live regions that must work without a
+// stylesheet, such as a range calendar's.
 const visuallyHidden = {
     position: 'absolute',
     width: '1px',
@@ -8849,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) => {
@@ -8859,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);
@@ -9357,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', {
@@ -9403,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] }));
     }
@@ -10142,7 +10348,11 @@ const Numberinput = React.forwardRef(({
 // Field props
 label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue, min, max, step = 1, size, color, inputColor, controlsPosition = 'both', controlsRounded = false, compact = false, bare, variant = 'plusminus', disabled = false, editable = true, isLoading = false, exponential = false, onChange, className, ...props }, ref) => {
     const insideField = useInsideField();
-    const effectiveBare = bare ?? insideField;
+    // Bare controls join their parent's row, which a `.control` does not lay
+    // out. `useInsideControl()` is true anywhere below a `Control`, even past
+    // a `Field` nested in it, so there they keep their own row as well.
+    const insideControl = useInsideControl();
+    const effectiveBare = bare ?? (insideField && !insideControl);
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const [internalValue, setInternalValue] = React.useState(defaultValue);
     const inputRef = React.useRef(null);
@@ -11476,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',
@@ -11484,6 +11700,11 @@ const DEFAULT_PICKER_LABELS = {
     chooseDate: 'Choose date',
     chooseMonth: 'Choose month',
     chooseYear: 'Choose year',
+    rangeStart: 'Start date',
+    rangeEnd: 'End date',
+    rangePreviewEnd: 'Choose as end date',
+    rangeSeparator: '–',
+    chooseDateRange: 'Choose date range',
     hours: 'hours',
     minutes: 'minutes',
     seconds: 'seconds',
@@ -11636,6 +11857,43 @@ function isPeriodUnselectable(d, granularity, c) {
     }
     return true;
 }
+/**
+ * The most days {@link canCloseRange} walks between a range's ends, about
+ * eleven years. A span it would have to walk further is refused, so the check
+ * stays cheap enough to run on every pointer move over the calendar.
+ */
+const RANGE_WALK_LIMIT = 4000;
+/**
+ * Whether `end` can close a range that opens on `start`: it falls on `start`'s
+ * day or later, and, unless `allowDisabled`, no day between the two is one
+ * that `shouldDisableDate` or `unselectableDates` disables. Checking that
+ * walks the days between, so with either rule set and `allowDisabled` off,
+ * an `end` more than {@link RANGE_WALK_LIMIT} days after `start` is refused.
+ * The ends' own constraints, `min` and `max` among them, are the caller's to
+ * check. Bounds can't fall between two days inside them, so they are not
+ * walked.
+ */
+function canCloseRange(start, end, c, allowDisabled = false) {
+    const first = startOfDay(start);
+    const last = startOfDay(end).getTime();
+    if (last < first.getTime())
+        return false;
+    if (allowDisabled)
+        return true;
+    const blocks = {
+        shouldDisableDate: c.shouldDisableDate,
+        unselectableDates: c.unselectableDates,
+    };
+    if (!blocks.shouldDisableDate && !blocks.unselectableDates?.length) {
+        return true;
+    }
+    for (let d = addDays(first, 1), walked = 1; d.getTime() < last; d = addDays(d, 1), walked++) {
+        if (walked >= RANGE_WALK_LIMIT || isDayUnselectable(d, blocks)) {
+            return false;
+        }
+    }
+    return true;
+}
 function addDays(d, n) {
     const r = new Date(d);
     r.setDate(r.getDate() + n);
@@ -11654,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)
@@ -11662,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;
 }
 /**
@@ -11810,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.
@@ -12096,6 +12392,28 @@ function nearestEnabled(i, disabled) {
     }
     return i;
 }
+/** The long, spoken form of a date in a range's announcement. */
+const LONG_DATE = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+};
+/** A range's pending start: its start, when it has no end. */
+const pendingStartOf = (range) => range?.[0] && !range[1] ? startOfDay(range[0]) : null;
+/**
+ * The day grid's cells in rows of a week. A grid owns rows and rows own
+ * cells, so assistive technology can walk the grid, and the selection it
+ * reports, row by row.
+ */
+const inWeeks = (days, className) => {
+    const rows = [];
+    for (let i = 0; i < days.length; i += 7) {
+        rows.push(jsxRuntime.jsx("div", { role: "row", className: className, children: days.slice(i, i + 7) }, i));
+    }
+    return rows;
+};
+/** A date's time, or `null` for none, for comparing ranges by value. */
+const timeOf = (d) => d ? d.getTime() : null;
 /**
  * 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
@@ -12121,7 +12439,7 @@ function yearStep(key, focusedYear, years) {
             return null;
     }
 }
-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 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', range, onRangeSelect, allowDisabledInRange = false, }) => {
     const gridRef = React.useRef(null);
     const monthGridRef = React.useRef(null);
     const yearGridRef = React.useRef(null);
@@ -12178,6 +12496,80 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
         const i = nearestEnabled(focusedDate.getDate() - 1, days.map(isDateUnselectable));
         return days[i];
     }, [cells, focusedDate, isDateUnselectable]);
+    // ----- Range mode -----
+    // Range props come only with the day grid.
+    const rangeMode = !!range;
+    const valuePending = pendingStartOf(range);
+    // The start of a range being picked, which nothing outside the calendar
+    // sees until its end is picked too. It starts as the range's own pending
+    // start, and starts there again whenever the range changes from outside.
+    const [anchor, setAnchor] = React.useState(valuePending);
+    const rangeKey = `${timeOf(range?.[0])}|${timeOf(range?.[1])}`;
+    const [anchorRangeKey, setAnchorRangeKey] = React.useState(rangeKey);
+    if (anchorRangeKey !== rangeKey) {
+        setAnchorRangeKey(rangeKey);
+        setAnchor(valuePending);
+    }
+    // The day under the pointer while a start is pending, which the preview
+    // runs to ahead of the focused day.
+    const [hoverDate, setHoverDate] = React.useState(null);
+    // Whether `day` can end a range that starts on `start`. The start is
+    // checked as well as the end: one the range brought, or one picked before
+    // the bounds or the disabled days changed, can rule itself out.
+    const canEndAt = React.useCallback((start, day) => !isDateUnselectable(start) &&
+        !isDateUnselectable(day) &&
+        canCloseRange(start, day, { shouldDisableDate, unselectableDates }, allowDisabledInRange), [
+        isDateUnselectable,
+        shouldDisableDate,
+        unselectableDates,
+        allowDisabledInRange,
+    ]);
+    // A pick in range mode: the end of the pending range when it can be one,
+    // and otherwise the start of a new one.
+    const pickRangeDay = React.useCallback((picked) => {
+        const day = startOfDay(picked);
+        // The pointer is on the picked day, which the focused day now is too.
+        setHoverDate(null);
+        if (anchor && canEndAt(anchor, day)) {
+            setAnchor(null);
+            onRangeSelect?.(anchor, day);
+        }
+        else {
+            setAnchor(day);
+        }
+    }, [anchor, canEndAt, onRangeSelect]);
+    // What the grid shows: while a start is pending, the range from it to the
+    // hovered or focused day, when that day can end it; otherwise the
+    // committed range.
+    let shownStart;
+    let shownEnd;
+    if (anchor) {
+        shownStart = anchor;
+        const previewEnd = startOfDay(hoverDate ?? focusedDate);
+        shownEnd = canEndAt(anchor, previewEnd) ? previewEnd : null;
+    }
+    else {
+        shownStart = range?.[0] ? startOfDay(range[0]) : null;
+        shownEnd = range?.[1] ? startOfDay(range[1]) : null;
+    }
+    const previewing = !!anchor;
+    // Ids for the words that name a range's ends and state the whole range.
+    const reactId = React.useId();
+    const rangeIdBase = id ?? `calendar-${reactId}`;
+    const rangeStartId = `${rangeIdBase}-range-start`;
+    const rangeEndId = `${rangeIdBase}-range-end`;
+    const rangePreviewEndId = `${rangeIdBase}-range-preview-end`;
+    const rangeSummaryId = `${rangeIdBase}-range-summary`;
+    // The selection in words: the pending start alone, or the committed ends.
+    const selectedEnd = previewing ? null : shownEnd;
+    const rangeSummary = [
+        shownStart &&
+            `${t.rangeStart}: ${formatDate(shownStart, LONG_DATE, locale)}`,
+        selectedEnd &&
+            `${t.rangeEnd}: ${formatDate(selectedEnd, LONG_DATE, locale)}`,
+    ]
+        .filter(Boolean)
+        .join(', ');
     // Whether the grid on show holds focus, or held it last before focus went
     // nowhere: the cell that had it left the page or became disabled. A blur
     // that takes focus out of the grid, to nowhere included, is the user
@@ -12215,6 +12607,10 @@ 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) {
             case 'ArrowLeft':
                 e.preventDefault();
@@ -12257,11 +12653,35 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
             case 'Enter':
             case ' ':
                 e.preventDefault();
-                if (!isDateUnselectable(focusedDate))
-                    onSelect(focusedDate);
+                if (isDateUnselectable(focusedDate))
+                    break;
+                if (rangeMode)
+                    pickRangeDay(focusedDate);
+                else
+                    onSelect?.(focusedDate);
+                break;
+            case 'Escape':
+                // A pending pick is taken back, and the key stops there so a
+                // popover around the calendar stays open. The range's own pending
+                // start is no pick, so Escape goes on to close the popover.
+                if (anchor && !(valuePending && isSameDay(anchor, valuePending))) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setAnchor(valuePending);
+                }
                 break;
         }
-    }, [focusedDate, firstDayOfWeek, isDateUnselectable, moveFocus, onSelect]);
+    }, [
+        focusedDate,
+        firstDayOfWeek,
+        isDateUnselectable,
+        moveFocus,
+        onSelect,
+        rangeMode,
+        pickRangeDay,
+        anchor,
+        valuePending,
+    ]);
     // The month grid's counterpart to `moveFocus`: step by `direction` months
     // until a month with a selectable day turns up, stopping at the min/max
     // months. The cap guards against a range with nothing selectable.
@@ -12281,10 +12701,12 @@ 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)) {
-                onSelect(startOfMonth(focusedDate));
+                onSelect?.(startOfMonth(focusedDate));
             }
             return;
         }
@@ -12310,6 +12732,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
     const dayNamesRowClass = usePrefixedClassNames('dateinput-day-names');
     const dayNameClass = usePrefixedClassNames('dateinput-day-name');
     const gridClass = usePrefixedClassNames('dateinput-grid');
+    const weekClass = usePrefixedClassNames('dateinput-week');
     const monthsGridClass = usePrefixedClassNames('dateinput-months-grid');
     const monthsRowClass = usePrefixedClassNames('dateinput-months-row');
     const yearsGridClass = usePrefixedClassNames('dateinput-years-grid');
@@ -12399,7 +12822,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
     // pick and `onSelect` gets the year's first day.
     const handleYearPick = React.useCallback((year) => {
         onFocusedDateChange(clampDate(makeDate(year), min, max));
-        onSelect(makeDate(year));
+        onSelect?.(makeDate(year));
     }, [min, max, onFocusedDateChange, onSelect]);
     // Step through the listed years from `year` by `direction`, skipping
     // disabled ones, and focus the first selectable year found.
@@ -12414,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)
@@ -12520,32 +12945,69 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
     return (jsxRuntime.jsxs("div", { className: classNames(calendarClass, className), id: id, children: [jsxRuntime.jsxs("div", { className: headerClass, children: [isYearGranularity ? (jsxRuntime.jsx("span", { className: monthLabelClass, id: labelId, children: monthLabel })) : (jsxRuntime.jsxs("button", { type: "button", className: monthTriggerClass, "aria-haspopup": "listbox", "aria-expanded": view === 'years', onClick: () => {
                             setNavYear(null);
                             setView(v => (v === 'years' ? baseView : 'years'));
-                        }, children: [jsxRuntime.jsx("span", { className: monthLabelClass, id: labelId, "aria-live": "polite", children: monthLabel }), jsxRuntime.jsx("svg", { className: monthCaretClass, viewBox: "0 0 12 12", width: "10", height: "10", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M2 4l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })] })), !isYearGranularity && (jsxRuntime.jsxs("div", { className: navGroupClass, children: [jsxRuntime.jsx("button", { type: "button", className: navPrevClass, "aria-label": isDayGranularity ? t.prevMonth : t.prevYear, disabled: prevDisabled || view !== baseView, onClick: () => onFocusedDateChange(prevAnchor), children: navArrow('M10 3l-5 5 5 5') }), jsxRuntime.jsx("button", { type: "button", className: navNextClass, "aria-label": isDayGranularity ? t.nextMonth : t.nextYear, disabled: nextDisabled || view !== baseView, onClick: () => onFocusedDateChange(nextAnchor), children: navArrow('M6 3l5 5-5 5') })] }))] }), view === 'days' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: dayNamesRowClass, "aria-hidden": "true", children: computedDayNames.map((name, i) => (jsxRuntime.jsx("div", { className: dayNameClass, children: name }, i))) }), jsxRuntime.jsx("div", { ref: gridRef, role: "grid", "aria-labelledby": labelId, className: gridClass, onKeyDown: handleKeyDown, ...gridFocusHandlers, children: cells.map(cell => {
+                        }, children: [jsxRuntime.jsx("span", { className: monthLabelClass, id: labelId, "aria-live": "polite", children: monthLabel }), jsxRuntime.jsx("svg", { className: monthCaretClass, viewBox: "0 0 12 12", width: "10", height: "10", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M2 4l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })] })), !isYearGranularity && (jsxRuntime.jsxs("div", { className: navGroupClass, children: [jsxRuntime.jsx("button", { type: "button", className: navPrevClass, "aria-label": isDayGranularity ? t.prevMonth : t.prevYear, disabled: prevDisabled || view !== baseView, onClick: () => onFocusedDateChange(prevAnchor), children: navArrow('M10 3l-5 5 5 5') }), jsxRuntime.jsx("button", { type: "button", className: navNextClass, "aria-label": isDayGranularity ? t.nextMonth : t.nextYear, disabled: nextDisabled || view !== baseView, onClick: () => onFocusedDateChange(nextAnchor), children: navArrow('M6 3l5 5-5 5') })] }))] }), view === 'days' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: dayNamesRowClass, "aria-hidden": "true", children: computedDayNames.map((name, i) => (jsxRuntime.jsx("div", { className: dayNameClass, children: name }, i))) }), jsxRuntime.jsx("div", { ref: gridRef, role: "grid", "aria-labelledby": labelId, "aria-multiselectable": rangeMode || undefined, "aria-describedby": rangeMode ? rangeSummaryId : undefined, className: gridClass, onKeyDown: handleKeyDown, onMouseLeave: anchor ? () => setHoverDate(null) : undefined, ...gridFocusHandlers, children: inWeeks(cells.map(cell => {
                             const disabled = isDateUnselectable(cell.date);
-                            const isSelected = !!value && isSameDay(value, cell.date);
+                            const time = cell.date.getTime();
+                            // Range mode. The range on show has its ends filled. Every day
+                            // of a committed range is selected, and of a preview only the
+                            // start.
+                            const isStart = time === timeOf(shownStart);
+                            const isEnd = time === timeOf(shownEnd);
+                            const inRange = !!shownStart &&
+                                !!shownEnd &&
+                                time > shownStart.getTime() &&
+                                time < shownEnd.getTime();
+                            // The day a pending range would end on, which isn't picked
+                            // yet, so its description says what picking it does.
+                            const isPreviewEnd = previewing && isEnd && !isStart;
+                            const isPreview = (previewing && inRange) || isPreviewEnd;
+                            const isFilled = rangeMode
+                                ? isStart || (isEnd && !previewing)
+                                : !!value && isSameDay(value, cell.date);
+                            const isSelected = isFilled || (rangeMode && !previewing && inRange);
+                            const describedBy = rangeMode
+                                ? [
+                                    isStart && rangeStartId,
+                                    isEnd && !previewing && rangeEndId,
+                                    isPreviewEnd && rangePreviewEndId,
+                                ]
+                                    .filter(Boolean)
+                                    .join(' ') || undefined
+                                : undefined;
                             const isFocused = isSameDay(cell.date, tabStopDay);
                             const otherMonth = !cell.inCurrentMonth;
                             const cellClass = prefixedClassNames(classPrefix, 'dateinput-cell', {
-                                'is-selected': isSelected,
+                                'is-selected': isFilled,
+                                'is-range-start': isStart,
+                                'is-range-end': isEnd,
+                                'is-in-range': inRange,
+                                'is-preview': isPreview,
                                 'is-today': cell.isToday,
                                 'is-disabled': disabled,
                                 'is-other-month': otherMonth,
                             });
                             const display = !otherMonth || nearbyMonthDays;
-                            return (jsxRuntime.jsx("button", { type: "button", role: "gridcell", tabIndex: isFocused ? 0 : -1, "aria-selected": isSelected, "aria-disabled": disabled, "aria-current": cell.isToday ? 'date' : undefined, "data-focused": isFocused ? 'true' : undefined, disabled: disabled || !display, className: cellClass, onFocus: () => {
+                            return (jsxRuntime.jsx("button", { type: "button", role: "gridcell", tabIndex: isFocused ? 0 : -1, "aria-selected": isSelected, "aria-disabled": disabled, "aria-current": cell.isToday ? 'date' : undefined, "aria-describedby": describedBy, "data-focused": isFocused ? 'true' : undefined, disabled: disabled || !display, className: cellClass, onFocus: () => {
                                     // Reached by Tab while the focused day is disabled, or
                                     // by pointer: keys move on from here. A nearby month's
                                     // day waits for its click, which turns the grid.
                                     if (!otherMonth && !isSameDay(cell.date, focusedDate)) {
                                         onFocusedDateChange(cell.date);
                                     }
-                                }, onClick: () => {
+                                }, 
+                                // Mouseover rather than mouseenter: browsers send it to a
+                                // disabled day as well, where React holds mouseenter back,
+                                // so the preview leaves the last enabled day behind.
+                                onMouseOver: anchor ? () => setHoverDate(cell.date) : undefined, onClick: () => {
                                     if (disabled)
                                         return;
                                     onFocusedDateChange(cell.date);
-                                    onSelect(cell.date);
+                                    if (rangeMode)
+                                        pickRangeDay(cell.date);
+                                    else
+                                        onSelect?.(cell.date);
                                 }, style: !display ? { visibility: 'hidden' } : undefined, children: cell.date.getDate() }, cell.date.toISOString()));
-                        }) })] })), view === 'months' && (jsxRuntime.jsx("div", { ref: monthGridRef, role: "grid", "aria-labelledby": labelId, className: monthsGridClass, onKeyDown: handleMonthKeyDown, ...gridFocusHandlers, children: MONTH_ROWS.map(row => (jsxRuntime.jsx("div", { role: "row", className: monthsRowClass, children: row.map(month => {
+                        }), weekClass) })] })), view === 'months' && (jsxRuntime.jsx("div", { ref: monthGridRef, role: "grid", "aria-labelledby": labelId, className: monthsGridClass, onKeyDown: handleMonthKeyDown, ...gridFocusHandlers, children: MONTH_ROWS.map(row => (jsxRuntime.jsx("div", { role: "row", className: monthsRowClass, children: row.map(month => {
                         const date = makeDate(focusedYear, month);
                         const disabled = disabledMonths[month];
                         const isSelected = !!value && isSameMonth(value, date);
@@ -12564,7 +13026,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
                                 }
                             }, onClick: () => {
                                 onFocusedDateChange(clampDate(date, min, max));
-                                onSelect(date);
+                                onSelect?.(date);
                             }, children: monthCellNames[month] }, month));
                     }) }, row[0]))) })), view === 'years' && (jsxRuntime.jsx("div", { ref: yearGridRef, className: yearsGridClass, role: "listbox", "aria-label": isYearGranularity ? t.chooseYear : monthLabel, onKeyDown: handleYearListKeyDown, children: yearList.map(year => {
                     const isFocused = year === tabStopYear;
@@ -12595,7 +13057,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
                         }, onClick: () => isYearGranularity
                             ? handleYearPick(year)
                             : handleYearSelect(year), children: year }, year));
-                }) }))] }));
+                }) })), rangeMode && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { id: rangeStartId, hidden: true, children: t.rangeStart }), jsxRuntime.jsx("span", { id: rangeEndId, hidden: true, children: t.rangeEnd }), jsxRuntime.jsx("span", { id: rangePreviewEndId, hidden: true, children: t.rangePreviewEnd }), jsxRuntime.jsx("div", { id: rangeSummaryId, "aria-live": "polite", style: visuallyHidden, children: rangeSummary })] }))] }));
 };
 Calendar.displayName = 'Calendar';
 
@@ -12638,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;
@@ -12646,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);
@@ -13049,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)
@@ -13245,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) {
@@ -13281,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();
@@ -13354,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 = '';
@@ -13364,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);
@@ -13398,11 +13890,14 @@ function useSegmentedEntry(params) {
         activeSegmentIdx,
         segmentBaseDate,
         applyDateFromSegment,
+        isUnfinishedBlocked,
         moveSegment,
         isOpen,
         setOpen,
         closeOnSelect,
         popover,
+        disabled,
+        readOnly,
         isUntouched,
         tryParse,
         text,
@@ -13447,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,
@@ -13579,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);
@@ -13751,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,
@@ -14147,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();
@@ -14480,6 +14954,7 @@ const TimeWheels = ({ value, onChange, hourFormat = '24', enableSeconds = false,
             hours: h,
             minutes: m,
             seconds: s,
+            milliseconds: 0,
         });
         return !unselectableTimes(probe);
     }, [unselectableTimes]);
@@ -14746,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);
@@ -14879,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,
@@ -15063,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);
@@ -15071,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);
@@ -15098,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
@@ -15163,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 }))] }));
     }
@@ -15220,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,
@@ -15261,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.
  *
@@ -16667,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;