@moneyforward/mfui-components 3.34.0 → 3.36.0

package/dist/src/DateTimeSelection/MonthRangePicker/MonthRangePickerMonthCell/constants.d.ts

@@ -1,17 +1,9 @@
+import { type BasePickerProps } from '../../shared/BasePicker/BasePicker.types';
+type CalendarLocale = NonNullable<BasePickerProps['calendarLocale']>;
+type MonthRangePickerA11yLabelKey = 'SELECTED' | 'IN_RANGE' | 'UNAVAILABLE' | 'RANGE_START' | 'RANGE_END';
 /**
- * Default Japanese accessibility labels for MonthRangePicker
- * These constants provide consistent Japanese text for screen readers.
- * Matches the DateRangePicker labels for consistency.
+ * Accessibility labels for MonthRangePicker, keyed by calendar locale.
+ * These constants provide consistent text for screen readers.
  */
-export declare const MONTH_RANGE_PICKER_A11Y_LABELS: {
-    /** Label for selected months */
-    readonly SELECTED: '選択済み';
-    /** Label for months in the selected range */
-    readonly IN_RANGE: '選択範囲内';
-    /** Label for unavailable/disabled months */
-    readonly UNAVAILABLE: '無効';
-    /** Label for range start months */
-    readonly RANGE_START: '範囲開始';
-    /** Label for range end months */
-    readonly RANGE_END: '範囲終了';
-};
+export declare const MONTH_RANGE_PICKER_A11Y_LABELS: Record<CalendarLocale, Record<MonthRangePickerA11yLabelKey, string>>;
+export {};

package/dist/src/DateTimeSelection/MonthRangePicker/MonthRangePickerMonthCell/constants.js

@@ -1,17 +1,30 @@
 /**
- * Default Japanese accessibility labels for MonthRangePicker
- * These constants provide consistent Japanese text for screen readers.
- * Matches the DateRangePicker labels for consistency.
+ * Accessibility labels for MonthRangePicker, keyed by calendar locale.
+ * These constants provide consistent text for screen readers.
  */
 export const MONTH_RANGE_PICKER_A11Y_LABELS = {
-    /** Label for selected months */
-    SELECTED: '選択済み',
-    /** Label for months in the selected range */
-    IN_RANGE: '選択範囲内',
-    /** Label for unavailable/disabled months */
-    UNAVAILABLE: '無効',
-    /** Label for range start months */
-    RANGE_START: '範囲開始',
-    /** Label for range end months */
-    RANGE_END: '範囲終了',
+    ja: {
+        /** Label for selected months */
+        SELECTED: '選択済み',
+        /** Label for months in the selected range */
+        IN_RANGE: '選択範囲内',
+        /** Label for unavailable/disabled months */
+        UNAVAILABLE: '無効',
+        /** Label for range start months */
+        RANGE_START: '範囲開始',
+        /** Label for range end months */
+        RANGE_END: '範囲終了',
+    },
+    en: {
+        /** Label for selected months */
+        SELECTED: 'Selected',
+        /** Label for months in the selected range */
+        IN_RANGE: 'In range',
+        /** Label for unavailable/disabled months */
+        UNAVAILABLE: 'Unavailable',
+        /** Label for range start months */
+        RANGE_START: 'Start month',
+        /** Label for range end months */
+        RANGE_END: 'End month',
+    },
 };

package/dist/src/DateTimeSelection/TimePicker/TimePicker.d.ts

@@ -29,6 +29,7 @@ export declare const TimePicker: import("react").ForwardRefExoticComponent<Omit<
     format?: 'HH:mm' | 'HH:mm:ss';
     size?: 'small' | 'medium' | 'large';
     invalid?: boolean;
+    caution?: boolean;
     onClear?: (event: import("react").MouseEvent<HTMLButtonElement>) => void;
     enableClearButton?: boolean;
     clearButtonProps?: Pick<import("../..").IconButtonProps, 'aria-label'>;
@@ -38,6 +39,7 @@ export declare const TimePicker: import("react").ForwardRefExoticComponent<Omit<
     format?: 'HH:mm' | 'HH:mm:ss';
     size?: 'small' | 'medium' | 'large';
     invalid?: boolean;
+    caution?: boolean;
     onClear?: (event: import("react").MouseEvent<HTMLButtonElement>) => void;
     enableClearButton?: boolean;
     clearButtonProps?: Pick<import("../..").IconButtonProps, 'aria-label'>;

package/dist/src/DateTimeSelection/TimePicker/TimePicker.js

@@ -35,7 +35,7 @@ import { getTimePickerLabel } from './constants';
  * // With seconds
  * <TimePicker format="HH:mm:ss" />
  */
-export const TimePicker = forwardRef(({ value, defaultValue, onChange, format = 'HH:mm', size = 'medium', disabled = false, invalid = false, step, onClear, enableClearButton = false, clearButtonProps, pickerIndicatorIconButtonProps, className, ...inputProps }, ref) => {
+export const TimePicker = forwardRef(({ value, defaultValue, onChange, format = 'HH:mm', size = 'medium', disabled = false, invalid = false, caution = false, step, onClear, enableClearButton = false, clearButtonProps, pickerIndicatorIconButtonProps, className, ...inputProps }, ref) => {
     const inputRef = useRef(null);
     const mergedInputRef = mergeRefs(ref, inputRef);
     // Track the live value internally so the clear button can read it whether
@@ -43,7 +43,8 @@ export const TimePicker = forwardRef(({ value, defaultValue, onChange, format =
     const [internalValue, setInternalValue] = useState(value ?? defaultValue ?? '');
     const effectiveValue = value === undefined ? internalValue : value;
     const hasValue = effectiveValue !== '';
-    const classes = timePickerSlotRecipe({ size, disabled, invalid });
+    // The error state takes precedence over the caution state
+    const classes = timePickerSlotRecipe({ size, disabled, invalid, caution: caution && !invalid });
     const pickerLabel = pickerIndicatorIconButtonProps?.['aria-label'] ?? getTimePickerLabel('ja', 'openPicker');
     const resolvedStep = step ?? (format === 'HH:mm:ss' ? 1 : undefined);
     const handleClear = useCallback((event) => {

package/dist/src/DateTimeSelection/TimePicker/TimePicker.types.d.ts

@@ -35,6 +35,33 @@ type TimePickerOwnProps = {
      * @default false
      */
     invalid?: boolean;
+    /**
+     * Whether the input needs the user's attention while still being submittable.
+     * Use it when the time is valid but is worth double-checking.
+     *
+     * Unlike `invalid`, this does not set `aria-invalid` — the state is advisory, not an error.
+     * It changes the border color only, so you must also render an adjacent
+     * `<HelpMessage messageType="caution">` describing the concern — color alone does not
+     * convey the state (WCAG 2.2 1.4.1).
+     *
+     * Associate that `HelpMessage` with the input via `aria-describedby` so screen readers
+     * announce it on focus, and give it `role="status"` so it is also announced the moment it
+     * appears while focus is already inside the input.
+     *
+     * ```tsx
+     * const cautionMessageId = useId();
+     *
+     * <TimePicker caution aria-describedby={cautionMessageId} />
+     * <HelpMessage id={cautionMessageId} role="status" messageType="caution">
+     *   所定労働時間外の時刻が入力されています。
+     * </HelpMessage>
+     * ```
+     *
+     * Ignored while `invalid` is `true`, because the error state takes precedence.
+     *
+     * @default false
+     */
+    caution?: boolean;
     /**
      * Callback fired when the clear button is clicked.
      */

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

@@ -76,7 +76,10 @@ export function BasePicker({ targetDOMNode, enableAutoUnmount = true, open = fal
         }
         openPopover(event);
     }, [textBoxProps.wrapperProps, textBoxRef]);
-    return (_jsx(BasePickerProvider, { initialViewingValue: value ?? defaultValue ?? initialViewingDate, value: value, internalValue: inputValueProps.value, format: format, baseFormat: baseFormat, children: _jsx(InternalPopover, { renderTrigger: ({ setTriggerRef, togglePopover, openPopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsx(TextBox, { ref: textBoxRef, ...inputValueProps, touchDeviceReadOnly: true, suffixSlot: _jsx(IconButton, { size: textBoxProps.textBoxSize === 'small' ? 'small' : 'default', "aria-label": calendarIconButtonProps?.['aria-label'] ?? calendarIconLabel, "data-active": shouldCalendarIconActive, "data-mfui-content": "calendar-icon-button", disabled: disabled, onClick: togglePopover, onBlur: handleTriggerBlur, children: _jsx(Calendar, {}) }), disabled: disabled, ...textBoxProps, wrapperProps: {
+    return (_jsx(BasePickerProvider, { initialViewingValue: value ?? defaultValue ?? initialViewingDate, value: value, internalValue: inputValueProps.value, format: format, baseFormat: baseFormat, children: _jsx(InternalPopover, { renderTrigger: ({ setTriggerRef, togglePopover, openPopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsx(TextBox, { ref: textBoxRef, ...inputValueProps, touchDeviceReadOnly: true, suffixSlot: _jsx(IconButton, { size: textBoxProps.textBoxSize === 'small' ? 'small' : 'default', "aria-label": calendarIconButtonProps?.['aria-label'] ?? calendarIconLabel, "data-active": shouldCalendarIconActive, "data-mfui-content": "calendar-icon-button", disabled: disabled, onClick: togglePopover, onBlur: handleTriggerBlur, children: _jsx(Calendar, {}) }), disabled: disabled, ...textBoxProps, clearButtonProps: {
+                    'aria-label': getBasePickerLabel('CLEAR_VALUE', calendarLocale),
+                    ...textBoxProps.clearButtonProps,
+                }, wrapperProps: {
                     ...textBoxProps.wrapperProps,
                     ref: mergeRefs(setTriggerRef, triggerRef, textBoxProps.wrapperProps?.ref),
                     onKeyDown: (event) => {

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

@@ -8,7 +8,7 @@ export declare const LABEL_SELECT_MONTH = "\u6708\u3092\u9078\u629E";
 export declare const LABEL_OPEN_CALENDAR = "\u30AB\u30EC\u30F3\u30C0\u30FC\u3092\u958B\u304F";
 export declare const LABEL_CLOSE_CALENDAR = "\u30AB\u30EC\u30F3\u30C0\u30FC\u3092\u9589\u3058\u308B";
 export declare const LABEL_TODAY = "\u4ECA\u65E5";
-type LabelKey = 'GO_TO_PREV_MONTH' | 'GO_TO_NEXT_MONTH' | 'GO_TO_PREV_YEAR' | 'GO_TO_NEXT_YEAR' | 'SELECT_MONTH' | 'SELECT_YEAR' | 'OPEN_CALENDAR' | 'CLOSE_CALENDAR' | 'TODAY';
+type LabelKey = 'GO_TO_PREV_MONTH' | 'GO_TO_NEXT_MONTH' | 'GO_TO_PREV_YEAR' | 'GO_TO_NEXT_YEAR' | 'SELECT_MONTH' | 'SELECT_YEAR' | 'OPEN_CALENDAR' | 'CLOSE_CALENDAR' | 'TODAY' | 'CLEAR_VALUE';
 export declare const BASE_PICKER_LABELS: Record<NonNullable<BasePickerProps['calendarLocale']>, Record<LabelKey, string>>;
 export declare const DAY_ABBREVIATIONS: Record<NonNullable<BasePickerProps['calendarLocale']>, string[]>;
 export declare const DAY_FULL_NAMES: Record<NonNullable<BasePickerProps['calendarLocale']>, string[]>;

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

@@ -18,6 +18,7 @@ export const BASE_PICKER_LABELS = {
         OPEN_CALENDAR: 'カレンダーを開く',
         CLOSE_CALENDAR: 'カレンダーを閉じる',
         TODAY: '今日',
+        CLEAR_VALUE: '値をクリアする',
     },
     en: {
         GO_TO_PREV_MONTH: 'Previous month',
@@ -29,6 +30,7 @@ export const BASE_PICKER_LABELS = {
         OPEN_CALENDAR: 'Open calendar',
         CLOSE_CALENDAR: 'Close calendar',
         TODAY: 'Today',
+        CLEAR_VALUE: 'Clear value',
     },
 };
 export const DAY_ABBREVIATIONS = {

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, 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, 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

@@ -9,7 +9,7 @@ import { dayjs } from '../../../utilities/date/dayjs';
 /**
  * Internal component that has access to BaseRangePickerContext
  */
-function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid, format, enableClearButton, clearButtonProps, targetDOMNode, onBlur, isOpen, open, close, onOpenStateChanged, enableAutoUnmount, allowedPlacements, enableViewportConstraint, minWidth, renderPopoverContent, startInputProps = {}, endInputProps = {}, calendarLocale = 'ja', pendingFocusDayjsFormat = 'YYYY-MM-DD', }) {
+function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid, caution, format, enableClearButton, clearButtonProps, targetDOMNode, onBlur, isOpen, open, close, onOpenStateChanged, enableAutoUnmount, allowedPlacements, enableViewportConstraint, minWidth, renderPopoverContent, startInputProps = {}, endInputProps = {}, calendarLocale = 'ja', pendingFocusDayjsFormat = 'YYYY-MM-DD', }) {
     const { setPendingFocusDate, temporaryStart, temporaryEnd, startDate, endDate, viewingMonth, setViewingMonth } = useBaseRangePickerContext();
     // Custom onOpen handler to prevent auto-focus when clicking on input elements
     // and implement smart focus management for calendar dates
@@ -65,7 +65,7 @@ function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid
         open,
         pendingFocusDayjsFormat,
     ]);
-    return (_jsx(Popover, { enableAutomaticPortalTargetResolution: true, open: isOpen, allowedPlacements: allowedPlacements, enableViewportConstraint: enableViewportConstraint, minWidth: minWidth, renderTrigger: ({ setTriggerRef, handleTriggerBlur, handleTriggerKeyDown, openPopover }) => (_jsx(BaseRangePickerTrigger, { ref: setTriggerRef, disabled: disabled, invalid: invalid, format: format, enableClearValue: enableClearButton, clearButtonProps: clearButtonProps, startInputRef: startInputRef, endInputRef: endInputRef, startInputProps: startInputProps, endInputProps: endInputProps, popoverOpenFunction: openPopover, calendarLocale: calendarLocale, onBlur: handleTriggerBlur, onKeyDown: handleTriggerKeyDown })), renderContent: () => renderPopoverContent({
+    return (_jsx(Popover, { enableAutomaticPortalTargetResolution: true, open: isOpen, allowedPlacements: allowedPlacements, enableViewportConstraint: enableViewportConstraint, minWidth: minWidth, renderTrigger: ({ setTriggerRef, handleTriggerBlur, handleTriggerKeyDown, openPopover }) => (_jsx(BaseRangePickerTrigger, { ref: setTriggerRef, disabled: disabled, invalid: invalid, caution: caution, format: format, enableClearValue: enableClearButton, clearButtonProps: clearButtonProps, startInputRef: startInputRef, endInputRef: endInputRef, startInputProps: startInputProps, endInputProps: endInputProps, popoverOpenFunction: openPopover, calendarLocale: calendarLocale, onBlur: handleTriggerBlur, onKeyDown: handleTriggerKeyDown })), renderContent: () => renderPopoverContent({
             viewingValue: viewingMonth,
             setViewingValue: setViewingMonth,
             value: [temporaryStart, temporaryEnd],
@@ -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, 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, 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, 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, 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

@@ -65,6 +65,37 @@ export type BaseRangePickerProps = {
      * @default false
      */
     invalid?: boolean;
+    /**
+     * Whether the inputs need the user's attention while still being submittable.
+     * Use it when the range passes validation but is worth double-checking.
+     *
+     * This changes the border color only, so you must also render an adjacent
+     * `<HelpMessage messageType="caution">` describing the concern — color alone does not
+     * convey the state (WCAG 2.2 1.4.1).
+     *
+     * Associate that `HelpMessage` with both inputs via `startInputProps['aria-describedby']`
+     * and `endInputProps['aria-describedby']` so screen readers announce it on focus, and give
+     * it `role="status"` so it is also announced the moment it appears while focus is already
+     * inside one of the inputs.
+     *
+     * ```tsx
+     * const cautionMessageId = useId();
+     *
+     * <DateRangePicker
+     *   caution
+     *   startInputProps={{ 'aria-describedby': cautionMessageId }}
+     *   endInputProps={{ 'aria-describedby': cautionMessageId }}
+     * />
+     * <HelpMessage id={cautionMessageId} role="status" messageType="caution">
+     *   前会計年度をまたぐ期間が選択されています。
+     * </HelpMessage>
+     * ```
+     *
+     * Ignored while `invalid` is `true`, because the error state takes precedence.
+     *
+     * @default false
+     */
+    caution?: boolean;
     /**
      * The DOM node to attach the popover to
      */
@@ -148,7 +179,8 @@ export type BaseRangePickerProps = {
      * The properties for the clear button.
      * If this prop is not passed, the default values for each property will be applied.
      *
-     * @property aria-label - The alternative text for the clear button. Default is '値をクリアする'.
+     * @property aria-label - The alternative text for the clear button.
+     *   Default follows `calendarLocale` ('値をクリアする' for 'ja', 'Clear value' for 'en').
      */
     clearButtonProps?: Pick<React.ComponentPropsWithoutRef<'button'>, 'aria-label'>;
     /**

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerPopover/BaseRangePickerCalendar/BaseRangePickerDateCell.d.ts

@@ -6,7 +6,7 @@ export type BaseRangePickerDateCellProps = DateCellProps & {
     isRangeEnd?: boolean;
 };
 /**
- * BaseRangePicker-specific DateCell component with enhanced accessibility
- * for Japanese users. Provides configurable labels and range-specific context.
+ * BaseRangePicker-specific DateCell component with enhanced accessibility.
+ * Provides locale-aware labels and range-specific context.
  */
 export declare function BaseRangePickerDateCell({ date, selected, inRange, disabled, isRangeStart, isRangeEnd, ...rest }: BaseRangePickerDateCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerPopover/BaseRangePickerCalendar/BaseRangePickerDateCell.js

@@ -1,42 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import dayjs from 'dayjs';
-import { DATE_RANGE_PICKER_A11Y_LABELS } from './constants';
 import { DateCell } from '../../../DateCell';
+import { useCalendarLocale } from '../../../CalendarLocale/CalendarLocaleContext';
+import { getDateAriaAttributes } from '../../../accessibility';
 /**
- * BaseRangePicker-specific DateCell component with enhanced accessibility
- * for Japanese users. Provides configurable labels and range-specific context.
+ * BaseRangePicker-specific DateCell component with enhanced accessibility.
+ * Provides locale-aware labels and range-specific context.
  */
 export function BaseRangePickerDateCell({ date, selected, inRange, disabled, isRangeStart, isRangeEnd, ...rest }) {
-    const accessibleLabel = useMemo(() => {
-        const today = new Date();
-        const isToday = date.getFullYear() === today.getFullYear() &&
-            date.getMonth() === today.getMonth() &&
-            date.getDate() === today.getDate();
-        // Create a comprehensive accessible label
-        const dateText = dayjs(date).format('D MMMM YYYY');
-        const statusParts = [];
-        if (isToday) {
-            statusParts.push(DATE_RANGE_PICKER_A11Y_LABELS.TODAY);
-        }
-        if (disabled) {
-            statusParts.push(DATE_RANGE_PICKER_A11Y_LABELS.UNAVAILABLE);
-        }
-        else if (selected) {
-            if (isRangeStart) {
-                statusParts.push(DATE_RANGE_PICKER_A11Y_LABELS.RANGE_START);
-            }
-            else if (isRangeEnd) {
-                statusParts.push(DATE_RANGE_PICKER_A11Y_LABELS.RANGE_END);
-            }
-            else {
-                statusParts.push(DATE_RANGE_PICKER_A11Y_LABELS.SELECTED);
-            }
-        }
-        else if (inRange) {
-            statusParts.push(DATE_RANGE_PICKER_A11Y_LABELS.IN_RANGE);
-        }
-        return statusParts.length > 0 ? `${dateText}, ${statusParts.join(', ')}` : dateText;
-    }, [date, selected, inRange, disabled, isRangeStart, isRangeEnd]);
-    return (_jsx(DateCell, { ...rest, date: date, selected: selected, inRange: inRange, disabled: disabled, "aria-label": accessibleLabel, "aria-pressed": selected ? 'true' : undefined }));
+    const calendarLocale = useCalendarLocale();
+    const ariaAttributes = getDateAriaAttributes({
+        date,
+        selected,
+        inRange,
+        disabled,
+        isRangeStart,
+        isRangeEnd,
+        locale: calendarLocale,
+    });
+    return (_jsx(DateCell, { ...rest, date: date, selected: selected, inRange: inRange, disabled: disabled, ...ariaAttributes }));
 }

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerPopover/BaseRangePickerCalendar/index.d.ts

@@ -1,4 +1,3 @@
 export { BaseRangePickerCalendar } from './BaseRangePickerCalendar';
 export { BaseRangePickerDateCell } from './BaseRangePickerDateCell';
 export type { BaseRangePickerDateCellProps } from './BaseRangePickerDateCell';
-export { DATE_RANGE_PICKER_A11Y_LABELS } from './constants';

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerPopover/BaseRangePickerCalendar/index.js

@@ -1,3 +1,2 @@
 export { BaseRangePickerCalendar } from './BaseRangePickerCalendar';
 export { BaseRangePickerDateCell } from './BaseRangePickerDateCell';
-export { DATE_RANGE_PICKER_A11Y_LABELS } from './constants';

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

@@ -6,6 +6,7 @@ import { cx } from '../../../../../styled-system/css';
 import { dateRangePickerPopoverSlotRecipe } from '../../../../../styled-system/recipes';
 import { BaseRangePickerFooter } from './BaseRangePickerFooter';
 import { BaseRangePickerCalendar } from './BaseRangePickerCalendar';
+import { CalendarLocaleProvider } from '../../CalendarLocale/CalendarLocaleContext';
 import { dayjs } from '../../../../utilities/date/dayjs';
 import { IconButton } from '../../../../IconButton';
 import { Typography } from '../../../../Typography';
@@ -131,5 +132,5 @@ export function BaseRangePickerPopover({ wrapperProps, calendarLocale, }) {
                                     if (!isNextMonthDisabled()) {
                                         setViewingMonth(addMonths(viewingMonth, 1));
                                     }
-                                }, children: _jsx(PickerAfter, {}) })] })] }), _jsxs("div", { className: cx(classNames.calendars, 'mfui-BaseRangePickerPopover__calendars'), children: [_jsx(BaseRangePickerCalendar, { viewingMonth: viewingMonth, handleKeyboardNavigation: handleKeyboardNavigation }), _jsx(BaseRangePickerCalendar, { viewingMonth: rightViewingMonth, handleKeyboardNavigation: handleKeyboardNavigation })] }), _jsx(BaseRangePickerFooter, { calendarLocale: calendarLocale })] }));
+                                }, children: _jsx(PickerAfter, {}) })] })] }), _jsx("div", { className: cx(classNames.calendars, 'mfui-BaseRangePickerPopover__calendars'), children: _jsxs(CalendarLocaleProvider, { value: calendarLocale, children: [_jsx(BaseRangePickerCalendar, { viewingMonth: viewingMonth, handleKeyboardNavigation: handleKeyboardNavigation }), _jsx(BaseRangePickerCalendar, { viewingMonth: rightViewingMonth, handleKeyboardNavigation: handleKeyboardNavigation })] }) }), _jsx(BaseRangePickerFooter, { calendarLocale: calendarLocale })] }));
 }

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

@@ -17,7 +17,7 @@ import { useDateRangeTriggerInputClick } from './hooks/useDateRangeTriggerInputC
  * Trigger component for BaseRangePicker
  * Handles the display and interaction of the date range input field
  */
-export const BaseRangePickerTrigger = forwardRef(({ enableClearValue = false, invalid = false, size = 'medium', disabled = false, wrapperProps = {}, clearButtonProps = {}, startInputProps = {}, endInputProps = {}, calendarButtonProps = {}, startInputRef, endInputRef, popoverOpenFunction, format = 'YYYY-MM-DD', calendarLocale = 'ja', ...props }, ref) => {
+export const BaseRangePickerTrigger = forwardRef(({ enableClearValue = false, invalid = false, caution = false, size = 'medium', disabled = false, wrapperProps = {}, clearButtonProps = {}, startInputProps = {}, endInputProps = {}, calendarButtonProps = {}, startInputRef, endInputRef, popoverOpenFunction, format = 'YYYY-MM-DD', calendarLocale = 'ja', ...props }, ref) => {
     const isTouchDevice = useIsTouchDevice();
     const { toggle, disableAutoOpen, isOpen } = useBaseRangePickerContext();
     const { handleInputClick } = useDateRangeTriggerInputClick(disableAutoOpen ?? false, popoverOpenFunction);
@@ -40,7 +40,8 @@ export const BaseRangePickerTrigger = forwardRef(({ enableClearValue = false, in
     const finalStartPlaceholder = startInputPlaceholder ?? getBaseRangePickerTriggerLabel('START_DATE_PLACEHOLDER', calendarLocale);
     const finalEndPlaceholder = endInputPlaceholder ?? getBaseRangePickerTriggerLabel('END_DATE_PLACEHOLDER', calendarLocale);
     const shouldShowClearButton = enableClearValue && (enhancedStartInputProps.value || enhancedEndInputProps.value);
-    const classes = baseRangePickerTriggerSlotRecipe({ invalid, disabled, size });
+    // The error state takes precedence over the caution state
+    const classes = baseRangePickerTriggerSlotRecipe({ invalid, caution: caution && !invalid, disabled, size });
     // Popover open: mark calendar icon active. Use `undefined` when closed — `data-active="false"` is still truthy in CSS.
     const shouldCalendarIconActive = isOpen ? true : undefined;
     const handleClickClearButton = useCallback((event) => {

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

@@ -12,6 +12,23 @@ export type BaseRangePickerTriggerProps = {
      * @default false
      */
     invalid?: boolean;
+    /**
+     * Whether the inputs need the user's attention while still being submittable.
+     *
+     * This changes the border color only, so you must also render an adjacent
+     * `<HelpMessage messageType="caution">` describing the concern — color alone does not
+     * convey the state (WCAG 2.2 1.4.1).
+     *
+     * Associate that `HelpMessage` with both inputs via `startInputProps['aria-describedby']`
+     * and `endInputProps['aria-describedby']` so screen readers announce it on focus, and give
+     * it `role="status"` so it is also announced the moment it appears while focus is already
+     * inside one of the inputs.
+     *
+     * Ignored while `invalid` is `true`, because the error state takes precedence.
+     *
+     * @default false
+     */
+    caution?: boolean;
     /**
      * Whether to enable the clear functionality
      *

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

@@ -1,18 +1,9 @@
+import { type BasePickerProps } from '../BasePicker/BasePicker.types';
+type CalendarLocale = NonNullable<BasePickerProps['calendarLocale']>;
+type DatePickerA11yLabelKey = 'TODAY' | 'SELECTED' | 'IN_RANGE' | 'UNAVAILABLE' | 'RANGE_START' | 'RANGE_END';
 /**
- * Shared Japanese accessibility labels for date picker components
- * These constants provide consistent Japanese text for screen readers.
+ * Shared accessibility labels for date picker components, keyed by calendar locale.
+ * These constants provide consistent text for screen readers.
  */
-export declare const DATE_PICKER_A11Y_LABELS: {
-    /** Label for today's date */
-    readonly TODAY: '今日';
-    /** Label for selected dates */
-    readonly SELECTED: '選択済み';
-    /** Label for dates in the selected range */
-    readonly IN_RANGE: '選択範囲内';
-    /** Label for unavailable/disabled dates */
-    readonly UNAVAILABLE: '選択不可';
-    /** Label for range start dates */
-    readonly RANGE_START: '開始日';
-    /** Label for range end dates */
-    readonly RANGE_END: '終了日';
-};
+export declare const DATE_PICKER_A11Y_LABELS: Record<CalendarLocale, Record<DatePickerA11yLabelKey, string>>;
+export {};

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

@@ -1,18 +1,34 @@
 /**
- * Shared Japanese accessibility labels for date picker components
- * These constants provide consistent Japanese text for screen readers.
+ * Shared accessibility labels for date picker components, keyed by calendar locale.
+ * These constants provide consistent text for screen readers.
  */
 export const DATE_PICKER_A11Y_LABELS = {
-    /** Label for today's date */
-    TODAY: '今日',
-    /** Label for selected dates */
-    SELECTED: '選択済み',
-    /** Label for dates in the selected range */
-    IN_RANGE: '選択範囲内',
-    /** Label for unavailable/disabled dates */
-    UNAVAILABLE: '選択不可',
-    /** Label for range start dates */
-    RANGE_START: '開始日',
-    /** Label for range end dates */
-    RANGE_END: '終了日',
+    ja: {
+        /** Label for today's date */
+        TODAY: '今日',
+        /** Label for selected dates */
+        SELECTED: '選択済み',
+        /** Label for dates in the selected range */
+        IN_RANGE: '選択範囲内',
+        /** Label for unavailable/disabled dates */
+        UNAVAILABLE: '選択不可',
+        /** Label for range start dates */
+        RANGE_START: '開始日',
+        /** Label for range end dates */
+        RANGE_END: '終了日',
+    },
+    en: {
+        /** Label for today's date */
+        TODAY: 'Today',
+        /** Label for selected dates */
+        SELECTED: 'Selected',
+        /** Label for dates in the selected range */
+        IN_RANGE: 'In range',
+        /** Label for unavailable/disabled dates */
+        UNAVAILABLE: 'Unavailable',
+        /** Label for range start dates */
+        RANGE_START: 'Start date',
+        /** Label for range end dates */
+        RANGE_END: 'End date',
+    },
 };

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

@@ -1,3 +1,6 @@
+import 'dayjs/locale/en';
+import 'dayjs/locale/ja';
+import { type BasePickerProps } from '../BasePicker/BasePicker.types';
 export type DateLabelOptions = {
     /** The date to generate a label for */
     date: Date;
@@ -11,6 +14,8 @@ export type DateLabelOptions = {
     isRangeStart?: boolean;
     /** Whether this date is the end of a range */
     isRangeEnd?: boolean;
+    /** The calendar locale used for the label text. Default is 'ja'. */
+    locale?: NonNullable<BasePickerProps['calendarLocale']>;
 };
 /**
  * Generates an accessible label for a date cell with status information
@@ -19,4 +24,4 @@ export type DateLabelOptions = {
  *
  * @returns Formatted accessible label string
  */
-export declare function generateAccessibleDateLabel({ date, selected, inRange, disabled, isRangeStart, isRangeEnd, }: DateLabelOptions): string;
+export declare function generateAccessibleDateLabel({ date, selected, inRange, disabled, isRangeStart, isRangeEnd, locale, }: DateLabelOptions): string;

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

@@ -1,4 +1,6 @@
 import dayjs from 'dayjs';
+import 'dayjs/locale/en';
+import 'dayjs/locale/ja';
 import { DATE_PICKER_A11Y_LABELS } from './constants';
 /**
  * Generates an accessible label for a date cell with status information
@@ -7,33 +9,37 @@ import { DATE_PICKER_A11Y_LABELS } from './constants';
  *
  * @returns Formatted accessible label string
  */
-export function generateAccessibleDateLabel({ date, selected = false, inRange = false, disabled = false, isRangeStart = false, isRangeEnd = false, }) {
+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];
     // Create a comprehensive accessible label
-    const dateText = dayjs(date).format('D MMMM YYYY');
+    // 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(DATE_PICKER_A11Y_LABELS.TODAY);
+        statusParts.push(labels.TODAY);
     }
     if (disabled) {
-        statusParts.push(DATE_PICKER_A11Y_LABELS.UNAVAILABLE);
+        statusParts.push(labels.UNAVAILABLE);
     }
     else if (selected) {
         if (isRangeStart) {
-            statusParts.push(DATE_PICKER_A11Y_LABELS.RANGE_START);
+            statusParts.push(labels.RANGE_START);
         }
         else if (isRangeEnd) {
-            statusParts.push(DATE_PICKER_A11Y_LABELS.RANGE_END);
+            statusParts.push(labels.RANGE_END);
         }
         else {
-            statusParts.push(DATE_PICKER_A11Y_LABELS.SELECTED);
+            statusParts.push(labels.SELECTED);
         }
     }
     else if (inRange) {
-        statusParts.push(DATE_PICKER_A11Y_LABELS.IN_RANGE);
+        statusParts.push(labels.IN_RANGE);
     }
     return statusParts.length > 0 ? `${dateText}, ${statusParts.join(', ')}` : dateText;
 }

package/dist/src/DeterminateProgressIndicator/DeterminateProgressIndicator.d.ts

@@ -0,0 +1,18 @@
+/**
+ * A UI that displays the loading progress as a horizontal bar.
+ *
+ * Use this component when the progress rate is known. For animations that do not
+ * represent a progress rate, use `ProgressIndicator` instead.
+ *
+ * Also extends the props of the `<div>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+export declare const DeterminateProgressIndicator: import("react").ForwardRefExoticComponent<{
+    value: number;
+    showValueText?: boolean;
+    valueTextPosition?: 'right' | 'top';
+    unit?: string;
+    'aria-label'?: string;
+    className?: string;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "role"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/DeterminateProgressIndicator/DeterminateProgressIndicator.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../../styled-system/css';
+import { determinateProgressIndicatorSlotRecipe } from '../../styled-system/recipes';
+import { Typography } from '../Typography';
+/**
+ * A UI that displays the loading progress as a horizontal bar.
+ *
+ * Use this component when the progress rate is known. For animations that do not
+ * represent a progress rate, use `ProgressIndicator` instead.
+ *
+ * Also extends the props of the `<div>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+export const DeterminateProgressIndicator = forwardRef(({ value, showValueText = true, valueTextPosition = 'right', unit = '%', className, ...props }, ref) => {
+    const classes = determinateProgressIndicatorSlotRecipe({ valueTextPosition });
+    const clampedValue = Math.min(Math.max(value, 0), 100);
+    return (_jsxs("div", { ref: ref, role: "progressbar", "aria-valuenow": clampedValue, "aria-valuemin": 0, "aria-valuemax": 100, className: cx(classes.root, 'mfui-DeterminateProgressIndicator__root', className), ...props, children: [_jsx("div", { className: cx(classes.progressIndicator, 'mfui-DeterminateProgressIndicator__progressIndicator'), children: _jsx("div", { className: cx(classes.track, 'mfui-DeterminateProgressIndicator__track'), children: _jsx("div", { className: cx(classes.progress, 'mfui-DeterminateProgressIndicator__progress'), style: { width: `${clampedValue.toString()}%` } }) }) }), showValueText ? (_jsxs(Typography, { as: "div", variant: "amount", className: cx(classes.valueText, 'mfui-DeterminateProgressIndicator__valueText'), children: [_jsx("span", { className: cx(classes.value, 'mfui-DeterminateProgressIndicator__value'), children: clampedValue }), unit ? _jsx("span", { className: cx(classes.unit, 'mfui-DeterminateProgressIndicator__unit'), children: unit }) : null] })) : null] }));
+});