@moneyforward/mfui-components 4.9.0 → 4.10.0

package/dist/src/Badge/Badge.js

@@ -3,6 +3,7 @@ import { cloneElement, forwardRef, useId } from 'react';
 import { cx } from '../../styled-system/css';
 import { badgeSlotRecipe } from '../../styled-system/recipes';
 import { Typography } from '../Typography';
+import { VisuallyHidden } from '../VisuallyHidden';
 /**
  * The general-purpose Badge component.
  * This component switches the variants of looks depends on the props: dot, count and children:
@@ -30,5 +31,5 @@ export const Badge = forwardRef(({ dot, count: number, digit, className, childre
     // If the badge is not displayed, just return the children.
     if (!displayBadge)
         return children;
-    return (_jsxs("span", { ref: ref, className: cx(classes.root, 'mfui-Badge__root', className), ...props, children: [children ? cloneElement(children, { 'aria-describedby': labelId }) : null, _jsx("span", { className: cx(classes.indicator, 'mfui-Badge__indicator'), children: number !== undefined ? (_jsx(Typography, { "aria-hidden": true, variant: "condensedBody", children: displayContent })) : null }), _jsx("span", { id: labelId, className: cx(classes.srOnlyLabel, 'mfui-Badge__srOnlyLabel'), children: ariaLabel })] }));
+    return (_jsxs("span", { ref: ref, className: cx(classes.root, 'mfui-Badge__root', className), ...props, children: [children ? cloneElement(children, { 'aria-describedby': labelId }) : null, _jsx("span", { className: cx(classes.indicator, 'mfui-Badge__indicator'), children: number !== undefined ? (_jsx(Typography, { "aria-hidden": true, variant: "condensedBody", children: displayContent })) : null }), _jsx(VisuallyHidden, { id: labelId, className: "mfui-Badge__srOnlyLabel", children: ariaLabel })] }));
 });

package/dist/src/DataTable/DataTable.types.d.ts

@@ -144,6 +144,7 @@ export type DataTableProps = {
     /**
      * Whether the table is loading.
      * If `true`, four rows with the skeleton cell will be shown instead of the table content.
+     * Each skeleton row has one cell per column, including the selection column when `enableRowSelection` is set.
      *
      * @default false
      */

package/dist/src/DataTable/DataTableBody/DataTableBody.js

@@ -21,7 +21,7 @@ function getRowRef(element) {
     return element.props.ref ?? element.ref;
 }
 export const DataTableBody = forwardRef(({ className, children, enableVirtualization = false, virtualizationOptions, ...props }, ref) => {
-    const { numberColumns, loading, scrollElement, setVirtualizedRowCount, headerRowCount } = useDataTableContext();
+    const { numberColumns, loading, scrollElement, setVirtualizedRowCount, headerRowCount, enableRowSelection } = useDataTableContext();
     const classes = dataTableBodySlotRecipe();
     // The body is held in state so that its offset below the `<thead>` can be read while rendering.
     const [bodyElement, setBodyElement] = useState(null);
@@ -55,7 +55,10 @@ export const DataTableBody = forwardRef(({ className, children, enableVirtualiza
     const bodyClassName = cx(classes.root, 'mfui-DataTableBody__root', 
     /* TODO: Remove in v5.0.0 */ 'mfui-DataGridBody__root', className);
     if (loading) {
-        return (_jsx("tbody", { className: bodyClassName, ...props, ref: ref, children: Array.from({ length: NUMBER_OF_LOADING_ROWS }).map((_, rowIndex) => (_jsx(DataTableRow, { children: Array.from({ length: numberColumns }).map((_, colIndex) => (_jsx(DataTableCell, {}, colIndex))) }, rowIndex))) }));
+        // `numberColumns` counts the selection column, which `DataTableRow` renders itself, so only the
+        // consumer columns are filled in here — otherwise the skeleton row is one cell wider than the header.
+        const loadingCellCount = Math.max(numberColumns - (enableRowSelection ? 1 : 0), 0);
+        return (_jsx("tbody", { className: bodyClassName, ...props, ref: ref, children: Array.from({ length: NUMBER_OF_LOADING_ROWS }).map((_, rowIndex) => (_jsx(DataTableRow, { children: Array.from({ length: loadingCellCount }).map((_, colIndex) => (_jsx(DataTableCell, {}, colIndex))) }, rowIndex))) }));
     }
     if (!isVirtualized) {
         return (_jsx("tbody", { className: bodyClassName, ...props, ref: ref, children: children }));

package/dist/src/DataTable/DataTableFilterButton/DataTableFilterButton.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Filter, FilterOn } from '@moneyforward/mfui-icons-react';
-import { forwardRef, useCallback, useId, useRef } from 'react';
+import { forwardRef, useCallback, useId } from 'react';
 import { dataTableFilterButtonSlotRecipe } from '../../../styled-system/recipes';
 import { IconButton } from '../../IconButton';
 import { Popover } from '../../Popover';
@@ -11,7 +11,6 @@ import { cx } from '../../../styled-system/css';
 export const DataTableFilterButton = forwardRef(({ filtered = false, renderContent, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, popoverProps, onClick, onKeyDown, onBlur, className, ...props }, ref) => {
     const filteredDescriptionId = useId();
     const popoverContentId = useId();
-    const triggerRef = useRef(null);
     const triggerLabel = ariaLabel ?? '絞り込み';
     const dialogLabel = popoverProps?.['aria-label'] ?? '絞り込み条件';
     const describedBy = [ariaDescribedBy, filtered ? filteredDescriptionId : undefined].filter(Boolean).join(' ');
@@ -38,7 +37,7 @@ export const DataTableFilterButton = forwardRef(({ filtered = false, renderConte
     , { 
         // handleTriggerKeyDown is intentionally not wired: arrow-key opening belongs to
         // menu/listbox patterns, while this trigger opens a dialog.
-        renderTrigger: ({ setTriggerRef, togglePopover, closePopover, isPopoverOpen, handleTriggerBlur }) => (_jsxs(_Fragment, { children: [_jsx(IconButton, { ref: mergeRefs(ref, setTriggerRef, triggerRef), ...props, className: cx(classes.root, 'mfui-DataTableFilterButton__root', className), "aria-label": triggerLabel, "aria-describedby": describedBy || undefined, "aria-haspopup": "dialog", "aria-expanded": isPopoverOpen, "aria-controls": popoverContentId, onClick: (event) => {
+        renderTrigger: ({ setTriggerRef, togglePopover, closePopover, isPopoverOpen, handleTriggerBlur }) => (_jsxs(_Fragment, { children: [_jsx(IconButton, { ref: mergeRefs(ref, setTriggerRef), ...props, className: cx(classes.root, 'mfui-DataTableFilterButton__root', className), "aria-label": triggerLabel, "aria-describedby": describedBy || undefined, "aria-haspopup": "dialog", "aria-expanded": isPopoverOpen, "aria-controls": popoverContentId, onClick: (event) => {
                         togglePopover(event);
                         onClick?.(event);
                     }, onKeyDown: (event) => {
@@ -53,11 +52,6 @@ export const DataTableFilterButton = forwardRef(({ filtered = false, renderConte
                     }, onBlur: (event) => {
                         handleTriggerBlur(event);
                         onBlur?.(event);
-                    }, children: filtered ? _jsx(FilterOn, {}) : _jsx(Filter, {}) }), filtered ? (_jsx("span", { id: filteredDescriptionId, className: cx(classes.filteredDescription, 'mfui-DataTableFilterButton__filteredDescription'), children: "\u9069\u7528\u4E2D" })) : null] })), renderContent: (options) => (_jsx("div", { ref: focusInitialElement, role: "dialog", "aria-label": dialogLabel, "aria-labelledby": popoverProps?.['aria-labelledby'], tabIndex: -1, className: cx(classes.dialog, 'mfui-DataTableFilterButton__dialog'), onKeyDown: handleFocusTrapKeyDown, children: renderContent(options) })), contentProps: { id: popoverContentId }, enableAutoFocusOnPopover: false, onClose: (event) => {
-            // Keep Escape focus restoration scoped to the filter button instead of changing the shared Popover.
-            if (event && 'key' in event && event.key === 'Escape') {
-                triggerRef.current?.focus();
-            }
-        } }));
+                    }, children: filtered ? _jsx(FilterOn, {}) : _jsx(Filter, {}) }), filtered ? (_jsx("span", { id: filteredDescriptionId, className: cx(classes.filteredDescription, 'mfui-DataTableFilterButton__filteredDescription'), children: "\u9069\u7528\u4E2D" })) : null] })), renderContent: (options) => (_jsx("div", { ref: focusInitialElement, role: "dialog", "aria-label": dialogLabel, "aria-labelledby": popoverProps?.['aria-labelledby'], tabIndex: -1, className: cx(classes.dialog, 'mfui-DataTableFilterButton__dialog'), onKeyDown: handleFocusTrapKeyDown, children: renderContent(options) })), contentProps: { id: popoverContentId }, enableAutoFocusOnPopover: false }));
 });
 DataTableFilterButton.displayName = 'DataTableFilterButton';

package/dist/src/DataTable/DataTableHeaderCell/DataTableHeaderCell.js

@@ -28,17 +28,21 @@ export const DataTableHeaderCell = forwardRef(({ children, type = 'text', sortBu
     });
     const isCheckboxCell = enableRowSelection && columnIndex === 0;
     const isStringChild = typeof children === 'string';
+    // The current order is exposed by `aria-sort` on the `th`, so each icon label describes the order
+    // the next click applies instead. These defaults assume `onClick` cycles
+    // unsorted → ascending → descending → ascending; consumers with a different cycle override them
+    // through the `*IconProps`.
     const sortIcon = (() => {
         if (!sortOrder) {
             return (_jsx(SortUnsorted, { className: cx(classes.unsortedIcon, 'mfui-DataTableHeaderCell__unsortedIcon', 
-                /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__unsortedIcon'), role: "img", "aria-label": unsortedIconProps?.['aria-label'] ?? '並び替えを解除' }));
+                /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__unsortedIcon'), role: "img", "aria-label": unsortedIconProps?.['aria-label'] ?? '昇順で並び替え' }));
         }
         if (sortOrder === 'ascending') {
             return (_jsx(SortAscending, { className: cx(classes.sortIcon, 'mfui-DataTableHeaderCell__sortIcon', 
-                /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__sortIcon'), role: "img", "aria-label": ascendingIconProps?.['aria-label'] ?? '昇順で並び替え' }));
+                /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__sortIcon'), role: "img", "aria-label": ascendingIconProps?.['aria-label'] ?? '降順で並び替え' }));
         }
         return (_jsx(SortDescending, { className: cx(classes.sortIcon, 'mfui-DataTableHeaderCell__sortIcon', 
-            /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__sortIcon'), role: "img", "aria-label": descendingIconProps?.['aria-label'] ?? '降順で並び替え' }));
+            /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__sortIcon'), role: "img", "aria-label": descendingIconProps?.['aria-label'] ?? '昇順で並び替え' }));
     })();
     const handleClickSortButton = sortButtonProps?.onClick;
     const cellContent = (() => {

package/dist/src/DataTable/DataTableHeaderCell/DataTableHeaderCell.types.d.ts

@@ -28,24 +28,36 @@ export type DataTableHeaderCellProps = {
      */
     type?: CellDataType;
     /**
-     * The properties for the ascending icon.
+     * The properties for the icon shown while the column is sorted in ascending order.
      * If this prop is not passed, the default values for each property will be applied.
      *
-     * @property aria-label - The alternative text for the ascending icon. default is '昇順で並び替え'.
+     * The current order is exposed by `aria-sort`, so the label describes the order the next click applies,
+     * not the current one. The default assumes `sortButtonProps.onClick` cycles
+     * unsorted → ascending → descending → ascending; override it if your cycle differs.
+     *
+     * @property aria-label - The alternative text describing the next sort action. default is '降順で並び替え'.
      */
     ascendingIconProps?: Pick<ComponentPropsWithoutRef<'svg'>, 'aria-label'>;
     /**
-     * The properties for the descending icon.
+     * The properties for the icon shown while the column is sorted in descending order.
      * If this prop is not passed, the default values for each property will be applied.
      *
-     * @property aria-label - The alternative text for the descending icon. default is '降順で並び替え'.
+     * The current order is exposed by `aria-sort`, so the label describes the order the next click applies,
+     * not the current one. The default assumes `sortButtonProps.onClick` cycles
+     * unsorted → ascending → descending → ascending; override it if your cycle differs
+     * (e.g. descending → unsorted).
+     *
+     * @property aria-label - The alternative text describing the next sort action. default is '昇順で並び替え'.
      */
     descendingIconProps?: Pick<ComponentPropsWithoutRef<'svg'>, 'aria-label'>;
     /**
-     * The properties for the unsorted icon.
+     * The properties for the icon shown while the column is not sorted.
      * If this prop is not passed, the default values for each property will be applied.
      *
-     * @property aria-label - The alternative text for the unsorted icon. default is '並び替えを解除'.
+     * The label describes the order the next click applies. The default assumes
+     * `sortButtonProps.onClick` sorts an unsorted column in ascending order first; override it if your cycle differs.
+     *
+     * @property aria-label - The alternative text describing the next sort action. default is '昇順で並び替え'.
      */
     unsortedIconProps?: Pick<ComponentPropsWithoutRef<'svg'>, 'aria-label'>;
     /**

package/dist/src/DataTable/hooks/useVirtualizedColumns.js

@@ -1,5 +1,6 @@
 import { useMemo, useRef, useState } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
+import { isProduction } from '../../utilities/env/isProduction';
 import { useIsomorphicLayoutEffect } from '../../utilities/react/useIsomorphicLayoutEffect';
 import { DEFAULT_COLUMN_WIDTH } from '../utils/resolveColumnWidths';
 /**
@@ -57,7 +58,7 @@ export function useVirtualizedColumns({ enabled, scrollElement, tableRef, column
     // so a `<colgroup>` rendered by a consumer component ends up next to the table's without any error.
     useIsomorphicLayoutEffect(() => {
         const table = tableRef.current;
-        if (process.env['NODE_ENV'] === 'production' || !enabled || !table || hasWarnedDuplicateColgroup.current)
+        if (isProduction() || !enabled || !table || hasWarnedDuplicateColgroup.current)
             return;
         if (table.querySelectorAll(':scope > colgroup').length > 1) {
             hasWarnedDuplicateColgroup.current = true;

package/dist/src/DateTimeSelection/FilterDatePicker/CalendarPopover/CalendarPopover.js

@@ -42,5 +42,5 @@ export function InternalCalendarPopover({ currentValue, defaultValue, isCalendar
     }, [currentValue, defaultValue, setViewingValue, setPendingFocusDate]);
     return (_jsx(Popover, { open: isCalendarOpen, targetDOMNode: targetDOMNode, renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, "data-selected": hasValue, className: cx(classes.wrapper, 'mfui-FilterDatePicker__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, type: "button", disabled: disabled, className: cx(classes.trigger, 'mfui-FilterDatePicker__trigger', className), "data-selected": hasValue, "data-mfui-has-clear-button": enableClearButton ? hasValue : null, "aria-controls": dialogId, "aria-expanded": isCalendarOpen, "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur, children: [_jsx("span", { className: cx(classes.content, 'mfui-FilterDatePicker__content'), "data-mfui-content": "filter-date-picker-display-value", children: hasValue ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-date-picker-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-date-picker-value", children: formattedValue })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-date-picker-label", children: label }) })) }), _jsx("span", { className: cx(classes.calendarIcon, 'mfui-FilterDatePicker__calendarIcon'), children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), enableClearButton && hasValue ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterDatePicker__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "filter-date-picker-clear-button", disabled: disabled, onClick: handleClear }) })) : null] })), renderContent: () => (_jsx("div", { id: dialogId, role: "dialog", "aria-label": label, className: "mfui-FilterDatePicker__popoverWrapper", onKeyDown: handleOnKeyDown, children: _jsx(FirstDayOfWeekProvider, { value: firstDayOfWeek, children: _jsx(DatePickerPanel, { value: currentValue, checkDisabledDate: checkDisabledDate, minDate: minDate, maxDate: maxDate, prevMonthIconButtonProps: prevMonthIconButtonProps, nextMonthIconButtonProps: nextMonthIconButtonProps, todayButtonProps: todayButtonProps, onChange: (date) => {
                         handleValueChange(date);
-                    } }) }) })), minWidth: "min-content", onOpenStateChanged: toggleCalendar, onOpen: handlePopoverOpen }));
+                    } }) }) })), minWidth: "min-content", onOpenStateChanged: toggleCalendar, onOpen: handlePopoverOpen, returnFocusRef: triggerRef }));
 }

package/dist/src/DateTimeSelection/FilterDatePicker/FilterDatePicker.js

@@ -39,11 +39,9 @@ export function FilterDatePicker({ label, value, defaultValue, onChange, open, o
     const { isOpen: isCalendarOpen, toggle: toggleCalendar, close: closeCalendar, } = useDisclosure({
         // disabled takes precedence: never open the calendar when the trigger is disabled.
         value: disabled ? false : open,
-        // onToggle fires for Escape and outside-click (via toggleCalendar); focus trigger on close.
+        // onToggle fires for Escape, outside-click, and trigger click. Focus after Escape and trigger click
+        // is returned by the Popover through `returnFocusRef`, and not after outside-click (see the MEMO in Popover).
         onToggle: (nextOpen) => {
-            if (!nextOpen) {
-                triggerRef.current?.focus();
-            }
             onOpenStateChanged?.(nextOpen);
         },
         // onClose fires for programmatic close (date selection); focus trigger there too.

package/dist/src/DateTimeSelection/FilterDateRangePicker/DateRangePickerContent/DateRangePickerContent.js

@@ -32,5 +32,5 @@ export function InternalDateRangePickerContent({ classes, triggerRef, dialogId,
         setPendingFocusDate(dayjs(dateToFocus).format('YYYY-MM-DD'));
     }, [startDate, endDate, setPendingFocusDate]);
     return (_jsx(Popover, { open: isCalendarOpen, targetDOMNode: targetDOMNode, minWidth: "min-content", allowedPlacements: ['bottom-start', 'top-start'], renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, "data-selected": hasValue, className: cx(classes.wrapper, 'mfui-FilterDateRangePicker__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, type: "button", disabled: disabled, className: cx(classes.trigger, 'mfui-FilterDateRangePicker__trigger', className), "data-selected": hasValue, "data-mfui-has-clear-button": enableClearButton ? hasValue : null, "aria-controls": dialogId, "aria-expanded": isCalendarOpen, "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur, children: [_jsx("span", { className: cx(classes.content, 'mfui-FilterDateRangePicker__content'), "data-mfui-content": "filter-date-range-picker-display-value", children: hasValue ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-date-range-picker-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-date-range-picker-value", children: formattedValue })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-date-range-picker-label", children: label }) })) }), _jsx("span", { className: cx(classes.calendarIcon, 'mfui-FilterDateRangePicker__calendarIcon'), children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), enableClearButton && hasValue ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterDateRangePicker__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ??
-                            getBaseRangePickerTriggerLabel('CLEAR_BUTTON_LABEL', calendarLocale), "data-mfui-content": "filter-date-range-picker-clear-button", disabled: disabled, onClick: handleTriggerClear }) })) : null] })), renderContent: () => (_jsx("div", { id: dialogId, role: "dialog", "aria-label": label, className: cx(classes.popoverWrapper, 'mfui-FilterDateRangePicker__popoverWrapper'), children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(FirstDayOfWeekProvider, { value: firstDayOfWeek, children: _jsx(DateRangePickerPopover, {}) }) }) })), onOpenStateChanged: toggleCalendar, onOpen: handlePopoverOpen }));
+                            getBaseRangePickerTriggerLabel('CLEAR_BUTTON_LABEL', calendarLocale), "data-mfui-content": "filter-date-range-picker-clear-button", disabled: disabled, onClick: handleTriggerClear }) })) : null] })), renderContent: () => (_jsx("div", { id: dialogId, role: "dialog", "aria-label": label, className: cx(classes.popoverWrapper, 'mfui-FilterDateRangePicker__popoverWrapper'), children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(FirstDayOfWeekProvider, { value: firstDayOfWeek, children: _jsx(DateRangePickerPopover, {}) }) }) })), onOpenStateChanged: toggleCalendar, onOpen: handlePopoverOpen, returnFocusRef: triggerRef }));
 }

package/dist/src/DateTimeSelection/FilterDateRangePicker/FilterDateRangePicker.js

@@ -26,11 +26,9 @@ export function FilterDateRangePicker({ label, value, defaultValue, onChange, op
     const { isOpen: isCalendarOpen, open: openCalendar, close: closeCalendar, toggle: toggleCalendar, } = useDisclosure({
         // disabled takes precedence: never open the calendar when the trigger is disabled.
         value: disabled ? false : open,
-        // onToggle fires for Escape and outside-click; focus trigger on close.
+        // onToggle fires for Escape, outside-click, and trigger click. Focus after Escape and trigger click
+        // is returned by the Popover through `returnFocusRef`, and not after outside-click (see the MEMO in Popover).
         onToggle: (nextOpen) => {
-            if (!nextOpen) {
-                triggerRef.current?.focus();
-            }
             onOpenStateChanged?.(nextOpen);
         },
         // onClose fires for programmatic close (Apply/Cancel buttons); focus trigger there too.

package/dist/src/DateTimeSelection/FilterMonthPicker/FilterMonthPicker.js

@@ -38,11 +38,9 @@ export function FilterMonthPicker({ label, value, defaultValue, onChange, open,
     const { isOpen: isPickerOpen, toggle: togglePicker, close: closePicker, } = useDisclosure({
         // disabled takes precedence: never open the picker when the trigger is disabled.
         value: disabled ? false : open,
-        // onToggle fires for Escape and outside-click (via togglePicker); focus trigger on close.
+        // onToggle fires for Escape, outside-click, and trigger click. Focus after Escape and trigger click
+        // is returned by the Popover through `returnFocusRef`, and not after outside-click (see the MEMO in Popover).
         onToggle: (nextOpen) => {
-            if (!nextOpen) {
-                triggerRef.current?.focus();
-            }
             onOpenStateChanged?.(nextOpen);
         },
         // onClose fires for programmatic close (month selection); focus trigger there too.

package/dist/src/DateTimeSelection/FilterMonthPicker/MonthPickerPopover/MonthPickerPopover.js

@@ -42,5 +42,5 @@ export function InternalMonthPickerPopover({ currentValue, defaultValue, isPicke
     }, [currentValue, defaultValue, setViewingValue, setPendingFocusDate]);
     return (_jsx(Popover, { open: isPickerOpen, targetDOMNode: targetDOMNode, renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, "data-selected": hasValue, className: cx(classes.wrapper, 'mfui-FilterMonthPicker__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, type: "button", disabled: disabled, className: cx(classes.trigger, 'mfui-FilterMonthPicker__trigger', className), "data-selected": hasValue, "data-mfui-has-clear-button": enableClearButton ? hasValue : null, "aria-controls": dialogId, "aria-expanded": isPickerOpen, "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur, children: [_jsx("span", { className: cx(classes.content, 'mfui-FilterMonthPicker__content'), "data-mfui-content": "filter-month-picker-display-value", children: hasValue ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-month-picker-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-month-picker-value", children: formattedValue })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-month-picker-label", children: label }) })) }), _jsx("span", { className: cx(classes.calendarIcon, 'mfui-FilterMonthPicker__calendarIcon'), children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), enableClearButton && hasValue ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterMonthPicker__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ?? getBasePickerLabel('CLEAR_VALUE', calendarLocale), "data-mfui-content": "filter-month-picker-clear-button", disabled: disabled, onClick: handleClear }) })) : null] })), renderContent: () => (_jsx("div", { id: dialogId, role: "dialog", "aria-label": label, className: "mfui-FilterMonthPicker__popoverWrapper", onKeyDown: handleOnKeyDown, children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(MonthPickerPanel, { viewingValue: viewingValue, setViewingValue: setViewingValue, value: currentValue, minMonth: minMonth, maxMonth: maxMonth, checkDisabledMonth: checkDisabledMonth, onChange: (date) => {
                         handleValueChange(date);
-                    } }) }) })), minWidth: "min-content", allowedPlacements: ['bottom-start', 'top-start'], onOpenStateChanged: togglePicker, onOpen: handlePopoverOpen }));
+                    } }) }) })), minWidth: "min-content", allowedPlacements: ['bottom-start', 'top-start'], onOpenStateChanged: togglePicker, onOpen: handlePopoverOpen, returnFocusRef: triggerRef }));
 }

package/dist/src/DateTimeSelection/FilterMonthRangePicker/FilterMonthRangePicker.js

@@ -37,10 +37,9 @@ export function FilterMonthRangePicker({ label, value, defaultValue, onChange, o
     }, [value, defaultValue]);
     const { isOpen: isPickerOpen, toggle: togglePicker, close: closePicker, open: openPicker, } = useDisclosure({
         value: disabled ? false : open,
+        // onToggle fires for Escape, outside-click, and trigger click. Focus after Escape and trigger click
+        // is returned by the Popover through `returnFocusRef`, and not after outside-click (see the MEMO in Popover).
         onToggle: (nextOpen) => {
-            if (!nextOpen) {
-                triggerRef.current?.focus();
-            }
             onOpenStateChanged?.(nextOpen);
         },
         onClose: () => {

package/dist/src/DateTimeSelection/FilterMonthRangePicker/MonthRangePickerPopover/MonthRangePickerPopover.js

@@ -50,5 +50,5 @@ export function InternalMonthRangePickerPopover({ isPickerOpen, togglePicker, ha
         setViewingMonth(monthToFocus);
         setPendingFocusDate(dayjs(monthToFocus).format('YYYY-MM'));
     }, [temporaryStart, temporaryEnd, startDate, endDate, setViewingMonth, setPendingFocusDate]);
-    return (_jsx(Popover, { open: isPickerOpen, targetDOMNode: targetDOMNode, renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, "data-selected": hasValue, className: cx(classes.wrapper, 'mfui-FilterMonthRangePicker__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, type: "button", disabled: disabled, className: cx(classes.trigger, 'mfui-FilterMonthRangePicker__trigger', className), "data-selected": hasValue, "data-mfui-has-clear-button": enableClearButton ? hasValue : null, "aria-controls": dialogId, "aria-expanded": isPickerOpen, "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur, children: [_jsx("span", { className: cx(classes.content, 'mfui-FilterMonthRangePicker__content'), "data-mfui-content": "filter-month-range-picker-display-value", children: hasValue ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-month-range-picker-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-month-range-picker-value", children: formattedValue })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-month-range-picker-label", children: label }) })) }), _jsx("span", { className: cx(classes.calendarIcon, 'mfui-FilterMonthRangePicker__calendarIcon'), children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), enableClearButton && hasValue ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterMonthRangePicker__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "filter-month-range-picker-clear-button", disabled: disabled, onClick: handleClear }) })) : null] })), renderContent: () => (_jsx("div", { id: dialogId, role: "dialog", "aria-label": label, className: "mfui-FilterMonthRangePicker__popoverWrapper", onKeyDown: handleOnKeyDown, children: _jsx(MonthRangePickerPanel, { viewingValue: viewingMonth, setViewingValue: setViewingMonth, value: [temporaryStart, temporaryEnd], minMonth: minMonth, maxMonth: maxMonth }) })), minWidth: "min-content", allowedPlacements: ['bottom-start', 'top-start'], onOpenStateChanged: togglePicker, onOpen: handlePopoverOpen }));
+    return (_jsx(Popover, { open: isPickerOpen, targetDOMNode: targetDOMNode, renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, "data-selected": hasValue, className: cx(classes.wrapper, 'mfui-FilterMonthRangePicker__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, type: "button", disabled: disabled, className: cx(classes.trigger, 'mfui-FilterMonthRangePicker__trigger', className), "data-selected": hasValue, "data-mfui-has-clear-button": enableClearButton ? hasValue : null, "aria-controls": dialogId, "aria-expanded": isPickerOpen, "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur, children: [_jsx("span", { className: cx(classes.content, 'mfui-FilterMonthRangePicker__content'), "data-mfui-content": "filter-month-range-picker-display-value", children: hasValue ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-month-range-picker-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-month-range-picker-value", children: formattedValue })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-month-range-picker-label", children: label }) })) }), _jsx("span", { className: cx(classes.calendarIcon, 'mfui-FilterMonthRangePicker__calendarIcon'), children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), enableClearButton && hasValue ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterMonthRangePicker__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "filter-month-range-picker-clear-button", disabled: disabled, onClick: handleClear }) })) : null] })), renderContent: () => (_jsx("div", { id: dialogId, role: "dialog", "aria-label": label, className: "mfui-FilterMonthRangePicker__popoverWrapper", onKeyDown: handleOnKeyDown, children: _jsx(MonthRangePickerPanel, { viewingValue: viewingMonth, setViewingValue: setViewingMonth, value: [temporaryStart, temporaryEnd], minMonth: minMonth, maxMonth: maxMonth }) })), minWidth: "min-content", allowedPlacements: ['bottom-start', 'top-start'], onOpenStateChanged: togglePicker, onOpen: handlePopoverOpen, returnFocusRef: triggerRef }));
 }

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePicker.d.ts

@@ -3,4 +3,4 @@ import { type BaseRangePickerProps } from './BaseRangePicker.types';
  * BaseRangePicker component
  * A generic component for selecting a range of dates with configurable format
  */
-export declare function BaseRangePicker({ value, defaultValue, disabled, invalid, caution, targetDOMNode, onChange, format, onOpenStateChanged, disableAutoOpen, onBlur, allowedPlacements, enableViewportConstraint, enableClearButton, clearButtonProps, minDate, maxDate, enableAutoUnmount, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale, initialDisplayedMonths, initialViewingDate, customFormatValue, pendingFocusDayjsFormat, }: BaseRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function BaseRangePicker({ value, defaultValue, disabled, invalid, caution, targetDOMNode, onChange, format, onOpenStateChanged, disableAutoOpen, disableAutoSwap, onBlur, allowedPlacements, enableViewportConstraint, enableClearButton, clearButtonProps, minDate, maxDate, enableAutoUnmount, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale, initialDisplayedMonths, initialViewingDate, customFormatValue, pendingFocusDayjsFormat, }: BaseRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePicker.js

@@ -77,12 +77,12 @@ function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid
  * BaseRangePicker component
  * A generic component for selecting a range of dates with configurable format
  */
-export function BaseRangePicker({ value, defaultValue, disabled, invalid, caution, targetDOMNode, onChange, format = 'YYYY/MM/DD', onOpenStateChanged, disableAutoOpen = false, onBlur, allowedPlacements, enableViewportConstraint, enableClearButton = false, clearButtonProps, minDate, maxDate, enableAutoUnmount = true, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale = 'ja', initialDisplayedMonths, initialViewingDate, customFormatValue, pendingFocusDayjsFormat = 'YYYY-MM-DD', }) {
+export function BaseRangePicker({ value, defaultValue, disabled, invalid, caution, targetDOMNode, onChange, format = 'YYYY/MM/DD', onOpenStateChanged, disableAutoOpen = false, disableAutoSwap = false, onBlur, allowedPlacements, enableViewportConstraint, enableClearButton = false, clearButtonProps, minDate, maxDate, enableAutoUnmount = true, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale = 'ja', initialDisplayedMonths, initialViewingDate, customFormatValue, pendingFocusDayjsFormat = 'YYYY-MM-DD', }) {
     const { isOpen, open, close } = useDisclosure({ value: false });
     const startInputRef = useRef(null);
     const endInputRef = useRef(null);
     // Default renderPopoverContent implementation for backward compatibility
     const defaultRenderPopoverContent = useCallback(() => _jsx(BaseRangePickerPopover, { calendarLocale: calendarLocale }), [calendarLocale]);
     const finalRenderPopoverContent = renderPopoverContent ?? defaultRenderPopoverContent;
-    return (_jsx(BaseRangePickerProvider, { value: value, defaultValue: defaultValue, disabled: disabled, format: format, isOpen: isOpen, open: open, close: close, disableAutoOpen: disableAutoOpen, minDate: minDate, maxDate: maxDate, initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, customFormatValue: customFormatValue, pendingFocusDayjsFormat: pendingFocusDayjsFormat, onChange: onChange, children: _jsx(InternalBaseRangePicker, { startInputRef: startInputRef, endInputRef: endInputRef, disabled: disabled, invalid: invalid, caution: caution, format: format, enableClearButton: enableClearButton, clearButtonProps: clearButtonProps, targetDOMNode: targetDOMNode, allowedPlacements: allowedPlacements, enableViewportConstraint: enableViewportConstraint, enableAutoUnmount: enableAutoUnmount, minWidth: minWidth, startInputProps: startInputProps, endInputProps: endInputProps, isOpen: isOpen, open: open, close: close, renderPopoverContent: finalRenderPopoverContent, calendarLocale: calendarLocale, pendingFocusDayjsFormat: pendingFocusDayjsFormat, onBlur: onBlur, onOpenStateChanged: onOpenStateChanged }) }));
+    return (_jsx(BaseRangePickerProvider, { value: value, defaultValue: defaultValue, disabled: disabled, format: format, isOpen: isOpen, open: open, close: close, disableAutoOpen: disableAutoOpen, disableAutoSwap: disableAutoSwap, minDate: minDate, maxDate: maxDate, initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, customFormatValue: customFormatValue, pendingFocusDayjsFormat: pendingFocusDayjsFormat, onChange: onChange, children: _jsx(InternalBaseRangePicker, { startInputRef: startInputRef, endInputRef: endInputRef, disabled: disabled, invalid: invalid, caution: caution, format: format, enableClearButton: enableClearButton, clearButtonProps: clearButtonProps, targetDOMNode: targetDOMNode, allowedPlacements: allowedPlacements, enableViewportConstraint: enableViewportConstraint, enableAutoUnmount: enableAutoUnmount, minWidth: minWidth, startInputProps: startInputProps, endInputProps: endInputProps, isOpen: isOpen, open: open, close: close, renderPopoverContent: finalRenderPopoverContent, calendarLocale: calendarLocale, pendingFocusDayjsFormat: pendingFocusDayjsFormat, onBlur: onBlur, onOpenStateChanged: onOpenStateChanged }) }));
 }

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePicker.types.d.ts

@@ -119,6 +119,40 @@ export type BaseRangePickerProps = {
      * @default false - Automatically open the Popover when we click on the TextBox.
      */
     disableAutoOpen?: boolean;
+    /**
+     * Whether to keep a typed range as entered when the start date is later than the end date.
+     * By default, such a range is reordered before `onChange` is called, so the consumer never
+     * sees the reversed pair. When `true`, `onChange` receives the dates in the order the user typed,
+     * and the popover shows no selection while the range is reversed.
+     * Selecting dates on the calendar still produces an ordered range.
+     *
+     * Validate the range yourself and surface the error with `invalid` and an adjacent
+     * `<HelpMessage messageType="error">` associated with both inputs via
+     * `startInputProps['aria-describedby']` and `endInputProps['aria-describedby']` —
+     * color alone does not convey the state (WCAG 2.2 1.4.1).
+     *
+     * ```tsx
+     * const errorMessageId = useId();
+     * const isReversed = !!start && !!end && start > end;
+     *
+     * <DateRangePicker
+     *   disableAutoSwap
+     *   invalid={isReversed}
+     *   startInputProps={{ 'aria-describedby': errorMessageId }}
+     *   endInputProps={{ 'aria-describedby': errorMessageId }}
+     * />
+     * {isReversed && (
+     *   <HelpMessage id={errorMessageId} messageType="error">
+     *     開始日は終了日以前の日付を入力してください。
+     *   </HelpMessage>
+     * )}
+     * ```
+     *
+     * This behavior will become the default in the next major version.
+     *
+     * @default false
+     */
+    disableAutoSwap?: boolean;
     /**
      * Callback fired when the user blurs away from the trigger element or popover content.
      * This implements smart blur detection - only fires when focus leaves both the trigger and popover.

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerProvider/BaseRangePickerProvider.js

@@ -98,7 +98,7 @@ function autoCompletePartialRange(dates) {
     }
     return dates;
 }
-const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false, onChange, format = 'YYYY/MM/DD', isOpen = false, open = noop, close = noop, disableAutoOpen, minDate, maxDate, initialDisplayedMonths = 'currentAndNext', initialViewingDate, customFormatValue, pendingFocusDayjsFormat = 'YYYY-MM-DD', }) => {
+const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false, onChange, format = 'YYYY/MM/DD', isOpen = false, open = noop, close = noop, disableAutoOpen, disableAutoSwap = false, minDate, maxDate, initialDisplayedMonths = 'currentAndNext', initialViewingDate, customFormatValue, pendingFocusDayjsFormat = 'YYYY-MM-DD', }) => {
     const formatDate = useMemo(() => customFormatValue ?? ((d) => dayjs(d).format(format)), [customFormatValue, format]);
     const [dates, setDates] = useTransformedState(defaultValue ?? [undefined, undefined], normalizeToStartOfDay);
     const [dateStrings, setDateStrings] = useState(() => {
@@ -123,16 +123,15 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
     const [previewDate, setPreviewDate] = useState();
     // --- Focus Management ---
     const [pendingFocusDate, setPendingFocusDate] = useState(null);
+    // The committed range anchors the view on its start; the end is only a fallback
+    // for a range whose start has been cleared. Keeping this in one effect avoids the
+    // ordering hazard of two effects writing the same state in the same commit.
     useUpdateEffect(() => {
-        if (startDate) {
-            setViewingMonth(startDate);
+        const anchorDate = startDate ?? endDate;
+        if (anchorDate) {
+            setViewingMonth(anchorDate);
         }
-    }, [startDate]);
-    useUpdateEffect(() => {
-        if (endDate) {
-            setViewingMonth(endDate);
-        }
-    }, [endDate]);
+    }, [startDate, endDate]);
     useUpdateEffect(() => {
         if (value) {
             setDates(value);
@@ -141,15 +140,15 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
     }, [value, formatDate, setDates]);
     const handleChange = useCallback((newDates) => {
         let [newStartDate, newEndDate] = normalizeToStartOfDay(newDates);
-        // Swap dates if start date is after end date
-        if (newStartDate && newEndDate && dayjs(newStartDate).isAfter(newEndDate)) {
+        // Swap dates if start date is after end date, unless the consumer opted out to validate the typed order
+        if (!disableAutoSwap && newStartDate && newEndDate && dayjs(newStartDate).isAfter(newEndDate)) {
             [newStartDate, newEndDate] = [newEndDate, newStartDate];
         }
         setDates([newStartDate, newEndDate]);
         // In uncontrolled mode, update dateStrings for input display
         setDateStrings([newStartDate ? formatDate(newStartDate) : '', newEndDate ? formatDate(newEndDate) : '']);
         onChange?.([newStartDate, newEndDate]);
-    }, [onChange, formatDate, setDates]);
+    }, [onChange, formatDate, setDates, disableAutoSwap]);
     const handleStartDateChange = useCallback((date, nextEndDate) => {
         const proposedEndDate = nextEndDate ?? endDate;
         // Apply auto-completion behavior when start date is set and end date is missing
@@ -294,13 +293,15 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
         }
         return false;
     }, [selecting, temporaryStart, temporaryEnd, previewDate]);
-    const isRangeStart = useCallback((date) => !!temporaryStart && date.getTime() === temporaryStart.getTime(), [temporaryStart]);
-    const isRangeEnd = useCallback((date) => !!temporaryEnd && date.getTime() === temporaryEnd.getTime(), [temporaryEnd]);
+    // With auto-swap disabled, a reversed range is shown with no selection so it is not mistaken for a valid one
+    const isReversedRange = disableAutoSwap && !!temporaryStart && !!temporaryEnd && dayjs(temporaryStart).isAfter(temporaryEnd);
+    const isRangeStart = useCallback((date) => !isReversedRange && !!temporaryStart && date.getTime() === temporaryStart.getTime(), [isReversedRange, temporaryStart]);
+    const isRangeEnd = useCallback((date) => !isReversedRange && !!temporaryEnd && date.getTime() === temporaryEnd.getTime(), [isReversedRange, temporaryEnd]);
     // Add onApply handler for Apply button with auto-completion behavior
     const handleApply = useCallback(() => {
-        // Always swap if start > end
+        // Swap if start > end, unless the consumer opted out to validate the typed order
         let [newStart, newEnd] = [temporaryStart, temporaryEnd];
-        if (newStart && newEnd && dayjs(newStart).isAfter(newEnd)) {
+        if (!disableAutoSwap && newStart && newEnd && dayjs(newStart).isAfter(newEnd)) {
             [newStart, newEnd] = [newEnd, newStart];
         }
         // Validate dates against constraints before applying
@@ -317,7 +318,7 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
         handleChange(autoCompletedRange);
         // Do not setTemporaryStart/setTemporaryEnd here; the render-time adjustment above syncs them from startDate/endDate
         close();
-    }, [handleChange, close, temporaryStart, temporaryEnd, minDate, maxDate, format]);
+    }, [handleChange, close, temporaryStart, temporaryEnd, minDate, maxDate, format, disableAutoSwap]);
     const handleCancel = useCallback(() => {
         // Use flushSync to ensure all state updates happen synchronously
         flushSync(() => {

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerProvider/BaseRangePickerProvider.types.d.ts

@@ -63,6 +63,14 @@ export type BaseRangePickerProviderProps = {
      * @default false - Automatically open the Popover when we click on the TextBox.
      */
     disableAutoOpen?: boolean;
+    /**
+     * Whether to keep a typed range as entered when the start date is later than the end date.
+     * When true, the dates are not reordered before `onChange`, and no date is marked as selected
+     * while the range is reversed.
+     *
+     * @default false
+     */
+    disableAutoSwap?: boolean;
     /**
      * The minimum selectable date.
      * Dates before this date will be disabled and cannot be selected.

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/hooks/useDateRangeTriggerValueController.d.ts

@@ -16,7 +16,8 @@ type UseDateRangeTriggerValueControllerOptions = {
 };
 /**
  * Controller for the value of the BaseRangePicker component.
- * Automatically ensures dates are in chronological order by swapping them if needed on blur.
+ * Commits the typed dates on blur. Unless `disableAutoSwap` is set on the picker,
+ * a reversed range is reordered into chronological order.
  *
  * @param options - The options for the controller.
  *

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/hooks/useDateRangeTriggerValueController.js

@@ -33,7 +33,8 @@ const createInputProps = (baseProps, value, format, onStringChange, onDateChange
 });
 /**
  * Controller for the value of the BaseRangePicker component.
- * Automatically ensures dates are in chronological order by swapping them if needed on blur.
+ * Commits the typed dates on blur. Unless `disableAutoSwap` is set on the picker,
+ * a reversed range is reordered into chronological order.
  *
  * @param options - The options for the controller.
  *

package/dist/src/DateTimeSelection/shared/DayCell/DayCell.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../../../../styled-system/css';
 import { dayCellSlotRecipe } from '../../../../styled-system/recipes';
 import { Typography } from '../../../Typography';
+import { VisuallyHidden } from '../../../VisuallyHidden';
 import { DAY_ABBREVIATIONS, DAY_FULL_NAMES } from '../BasePicker/constants';
 import { useCalendarLocale } from '../CalendarLocale/CalendarLocaleContext';
 /**
@@ -12,5 +13,5 @@ export function DayCell({ day }) {
     const classNames = dayCellSlotRecipe();
     const abbreviation = DAY_ABBREVIATIONS[calendarLocale][day];
     const fullName = DAY_FULL_NAMES[calendarLocale][day];
-    return (_jsxs("div", { className: cx(classNames.root, 'mfui-DayCell__root'), children: [_jsx(Typography, { "aria-hidden": true, variant: "contentHeading", className: cx(classNames.label, 'mfui-DayCell__label'), children: abbreviation }), _jsx("span", { className: cx(classNames.srOnlyLabel, 'mfui-DayCell__srOnlyLabel'), children: fullName })] }));
+    return (_jsxs("div", { className: cx(classNames.root, 'mfui-DayCell__root'), children: [_jsx(Typography, { "aria-hidden": true, variant: "contentHeading", className: cx(classNames.label, 'mfui-DayCell__label'), children: abbreviation }), _jsx(VisuallyHidden, { className: "mfui-DayCell__srOnlyLabel", children: fullName })] }));
 }

package/dist/src/DateTimeSelection/shared/accessibility/constants.d.ts

@@ -1,6 +1,6 @@
 import { type BasePickerProps } from '../BasePicker/BasePicker.types';
 type CalendarLocale = NonNullable<BasePickerProps['calendarLocale']>;
-type DatePickerA11yLabelKey = 'TODAY' | 'SELECTED' | 'IN_RANGE' | 'UNAVAILABLE' | 'RANGE_START' | 'RANGE_END';
+type DatePickerA11yLabelKey = 'SELECTED' | 'IN_RANGE' | 'UNAVAILABLE' | 'RANGE_START' | 'RANGE_END';
 /**
  * Shared accessibility labels for date picker components, keyed by calendar locale.
  * These constants provide consistent text for screen readers.

package/dist/src/DateTimeSelection/shared/accessibility/constants.js

@@ -4,8 +4,6 @@
  */
 export const DATE_PICKER_A11Y_LABELS = {
     ja: {
-        /** Label for today's date */
-        TODAY: '今日',
         /** Label for selected dates */
         SELECTED: '選択済み',
         /** Label for dates in the selected range */
@@ -18,8 +16,6 @@ export const DATE_PICKER_A11Y_LABELS = {
         RANGE_END: '終了日',
     },
     en: {
-        /** Label for today's date */
-        TODAY: 'Today',
         /** Label for selected dates */
         SELECTED: 'Selected',
         /** Label for dates in the selected range */

package/dist/src/DateTimeSelection/shared/accessibility/generateDateLabel.d.ts

@@ -20,6 +20,10 @@ export type DateLabelOptions = {
 /**
  * Generates an accessible label for a date cell with status information
  *
+ * Today's date is intentionally not part of the label: `DateCell` already marks it with
+ * `aria-current="date"`, which screen readers announce on their own. Adding it here too
+ * would make today's cell announce the same fact twice.
+ *
  * @param options - Configuration options for the label
  *
  * @returns Formatted accessible label string

package/dist/src/DateTimeSelection/shared/accessibility/generateDateLabel.js

@@ -5,15 +5,15 @@ import { DATE_PICKER_A11Y_LABELS } from './constants';
 /**
  * Generates an accessible label for a date cell with status information
  *
+ * Today's date is intentionally not part of the label: `DateCell` already marks it with
+ * `aria-current="date"`, which screen readers announce on their own. Adding it here too
+ * would make today's cell announce the same fact twice.
+ *
  * @param options - Configuration options for the label
  *
  * @returns Formatted accessible label string
  */
 export function generateAccessibleDateLabel({ date, selected = false, inRange = false, disabled = false, isRangeStart = false, isRangeEnd = false, locale = 'ja', }) {
-    const today = new Date();
-    const isToday = date.getFullYear() === today.getFullYear() &&
-        date.getMonth() === today.getMonth() &&
-        date.getDate() === today.getDate();
     // Fall back to 'ja' so an unknown locale from untyped consumers cannot crash the calendar
     const safeLocale = locale in DATE_PICKER_A11Y_LABELS ? locale : 'ja';
     const labels = DATE_PICKER_A11Y_LABELS[safeLocale];
@@ -21,9 +21,6 @@ export function generateAccessibleDateLabel({ date, selected = false, inRange =
     // Pin the dayjs locale per call so the output does not depend on the global dayjs locale
     const dateText = dayjs(date).locale(safeLocale).format('D MMMM YYYY');
     const statusParts = [];
-    if (isToday) {
-        statusParts.push(labels.TODAY);
-    }
     if (disabled) {
         statusParts.push(labels.UNAVAILABLE);
     }

package/dist/src/Dialog/Dialog.types.d.ts

@@ -13,6 +13,23 @@ export type DialogProps = {
      * inline text, status indicators, or icons — because the dialog uses
      * `aria-labelledby` to announce the title and screen readers will read the
      * entire subtree. Avoid placing interactive controls inside `title`.
+     * Note that `<Skeleton />` is hidden from assistive technologies, so a
+     * Skeleton-only title contributes nothing to the dialog's accessible name.
+     * Pair it with `<VisuallyHidden>` text to give the dialog an accessible name.
+     *
+     * @example
+     * ```tsx
+     * <Dialog
+     *   title={
+     *     <>
+     *       <VisuallyHidden>Loading title</VisuallyHidden>
+     *       <span style={{ display: 'inline-block', width: '240px', height: '24px' }}>
+     *         <Skeleton />
+     *       </span>
+     *     </>
+     *   }
+     * />
+     * ```
      */
     title: ReactNode;
     /**