@moneyforward/mfui-components 3.30.0 → 3.32.0

package/dist/src/NumberBox/NumberBox.js

@@ -1,15 +1,19 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useLayoutEffect, useRef, useState, useEffect } from 'react';
+import { forwardRef, useCallback, useEffect, useLayoutEffect, useReducer, useRef, useState } from 'react';
 import { cx } from '../../styled-system/css';
 import { mergeRefs } from '../utilities/dom/mergeRefs';
 import { TextBox } from '../TextBox';
 /**
- * Convert full-width digits, minus sign, and decimal point to half-width.
+ * Convert full-width digits, minus signs, and decimal points to half-width.
+ * Kana-mode IMEs can emit prolonged sound marks for the minus key.
  *
  * @param value - The string to convert.
  */
-const toHalfWidth = (value) => value.replaceAll(/[\uFF10-\uFF19\uFF0D\uFF0E]/g, (char) => String.fromCodePoint((char.codePointAt(0) ?? 0) - 0xfe_e0));
+const toHalfWidth = (value) => value
+    .replaceAll(/[\uFF10-\uFF19\uFF0D\uFF0E]/g, (char) => String.fromCodePoint((char.codePointAt(0) ?? 0) - 0xfe_e0))
+    .replaceAll(/[\u3002\uFF61]/g, '.')
+    .replaceAll(/[\u2212\u30FC\uFF70\u2015]/g, '-');
 /**
  * Sanitize input: convert full-width characters, then keep only valid numeric characters.
  * Allows: digits 0-9, a single leading minus, a single decimal point after a digit.
@@ -69,6 +73,35 @@ const formatWithCommas = (raw) => {
  * @param display - The formatted display string.
  */
 const stripFormatting = (display) => display.replaceAll(',', '');
+/**
+ * Map a display cursor position to the equivalent index in the raw numeric string.
+ *
+ * @param display - The formatted display string.
+ * @param displayCursor - The cursor position in the display string.
+ */
+const mapDisplayCursorToRaw = (display, displayCursor) => {
+    const commasBefore = (display.slice(0, displayCursor).match(/,/g) ?? []).length;
+    return displayCursor - commasBefore;
+};
+/**
+ * Map a raw numeric cursor position to the equivalent index in the formatted display string.
+ *
+ * @param formatted - The formatted display string.
+ * @param rawCursor - The cursor position in the raw numeric string.
+ */
+const mapRawCursorToDisplay = (formatted, rawCursor) => {
+    let rawCount = 0;
+    let index = 0;
+    for (const char of formatted) {
+        if (rawCount >= rawCursor) {
+            return index;
+        }
+        if (char !== ',')
+            rawCount += 1;
+        index += 1;
+    }
+    return formatted.length;
+};
 /**
  * NumberBox is a numeric input component that wraps TextBox.
  * It provides real-time comma formatting, full-width digit conversion,
@@ -79,6 +112,7 @@ const stripFormatting = (display) => display.replaceAll(',', '');
 export const NumberBox = forwardRef(({ onChange, value, defaultValue, textAlign = 'right', style, enableClearButton, ...rest }, ref) => {
     const inputRef = useRef(null);
     const pendingCursorRef = useRef(null);
+    const [cursorRestoreToken, requestCursorRestore] = useReducer((count) => count + 1, 0);
     const [displayValue, setDisplayValue] = useState(() => formatWithCommas(sanitizeInput(String(value ?? defaultValue ?? ''))));
     // Sync with controlled value
     useEffect(() => {
@@ -89,16 +123,22 @@ export const NumberBox = forwardRef(({ onChange, value, defaultValue, textAlign
     // Restore cursor position after display value update
     useLayoutEffect(() => {
         if (pendingCursorRef.current !== null && inputRef.current) {
-            inputRef.current.setSelectionRange(pendingCursorRef.current, pendingCursorRef.current);
+            const input = inputRef.current;
+            const cursor = pendingCursorRef.current;
             pendingCursorRef.current = null;
+            if (input.value !== displayValue) {
+                input.value = displayValue;
+            }
+            input.setSelectionRange(cursor, cursor);
         }
-    }, [displayValue]);
+    }, [displayValue, cursorRestoreToken]);
     const handleChange = useCallback((event) => {
+        const inputDisplay = event.target.value;
         const cursorPos = event.target.selectionStart ?? 0;
-        const rawInput = stripFormatting(toHalfWidth(event.target.value));
-        // Calculate cursor position accounting for comma changes
-        const commasBefore = (displayValue.slice(0, cursorPos).match(/,/g) ?? []).length;
-        let rawCursor = cursorPos - commasBefore;
+        const prevSanitized = stripFormatting(displayValue);
+        const rawInput = stripFormatting(toHalfWidth(inputDisplay));
+        // Use the current input value so comma positions match the cursor.
+        let rawCursor = mapDisplayCursorToRaw(inputDisplay, cursorPos);
         // When two dots appear, the user is moving the decimal point.
         // Keep the newly typed dot (at rawCursor - 1) and remove the old one.
         let processedRawInput = rawInput;
@@ -114,22 +154,29 @@ export const NumberBox = forwardRef(({ onChange, value, defaultValue, textAlign
                     rawCursor -= 1;
             }
         }
-        const sanitized = sanitizeInput(processedRawInput);
-        const formatted = formatWithCommas(sanitized);
-        let newCursor = formatted.length;
-        let rawCount = 0;
-        let index = 0;
-        for (const char of formatted) {
-            if (rawCount >= rawCursor) {
-                newCursor = index;
-                break;
+        let sanitized = sanitizeInput(processedRawInput);
+        // Backspace right after a comma deletes the digit before the comma.
+        const isBackspaceOnComma = sanitized === prevSanitized && cursorPos < displayValue.length && displayValue[cursorPos] === ',';
+        if (isBackspaceOnComma) {
+            const rawPos = mapDisplayCursorToRaw(displayValue, cursorPos);
+            if (rawPos > 0) {
+                sanitized = prevSanitized.slice(0, rawPos - 1) + prevSanitized.slice(rawPos);
+                rawCursor = rawPos - 1;
             }
-            if (char !== ',')
-                rawCount += 1;
-            index += 1;
+        }
+        const formatted = formatWithCommas(sanitized);
+        let newCursor = mapRawCursorToDisplay(formatted, rawCursor);
+        // Rejected characters keep the cursor before the ignored input.
+        const rejectedCharCount = rawInput.length - sanitized.length;
+        if (sanitized === prevSanitized && !isBackspaceOnComma && rejectedCharCount > 0) {
+            const rawBeforeCursor = mapDisplayCursorToRaw(inputDisplay, cursorPos);
+            newCursor = mapRawCursorToDisplay(formatted, rawBeforeCursor - rejectedCharCount);
         }
         pendingCursorRef.current = newCursor;
         setDisplayValue(formatted);
+        if (formatted === displayValue) {
+            requestCursorRestore();
+        }
         onChange?.(sanitized);
     }, [displayValue, onChange]);
     return (_jsx(TextBox, { ref: mergeRefs(ref, inputRef), ...rest, className: cx('mfui-NumberBox__root', rest.className), enableClearButton: Boolean(enableClearButton) && displayValue !== '', style: { textAlign, ...style }, value: displayValue, onChange: handleChange }));

package/dist/src/SearchBox/SearchBox.js

@@ -14,10 +14,24 @@ import { normalizeFullWidth } from '../utilities/string/normalizeFullWidth';
 export const SearchBox = forwardRef(({ className, normalizeFullWidth: shouldNormalizeFullWidth = false, onChange, ...rest }, ref) => {
     const handleChange = useCallback((event) => {
         if (shouldNormalizeFullWidth) {
-            // Rewrite the native input so the displayed value reflects the normalization
-            // and the consumer's onChange sees the canonical half-width / composed-kana form.
-            // eslint-disable-next-line no-param-reassign
-            event.target.value = normalizeFullWidth(event.target.value);
+            const { value, selectionStart } = event.target;
+            const normalizedValue = normalizeFullWidth(value);
+            // Only rewrite the native input when normalization actually changes the value.
+            // Assigning to `value` resets the caret to the end even when the string is
+            // unchanged, so skipping the no-op assignment keeps the caret in place while
+            // the user edits mid-string.
+            if (normalizedValue !== value) {
+                // Map the caret by normalizing only the text before it. This keeps the caret
+                // correct even when normalization changes the string length (e.g. `ﾊﾟ` -> `パ`).
+                const caretPosition = selectionStart === null
+                    ? normalizedValue.length
+                    : normalizeFullWidth(value.slice(0, selectionStart)).length;
+                // Rewrite the native input so the displayed value reflects the normalization
+                // and the consumer's onChange sees the canonical half-width / composed-kana form.
+                // eslint-disable-next-line no-param-reassign
+                event.target.value = normalizedValue;
+                event.target.setSelectionRange(caretPosition, caretPosition);
+            }
         }
         onChange?.(event);
     }, [shouldNormalizeFullWidth, onChange]);

package/dist/src/SidePane/SidePane.d.ts

@@ -1,6 +1,8 @@
 /**
  * The general purpose SidePane component.
- * This component extends the props of `<div>` element with `role="dialog"`.
+ * This component extends the props of `<div>` element. The extended props and `ref` are
+ * applied to the root overlay element covering the viewport, while `role="dialog"` (and
+ * `aria-modal="true"` when `enableModal` is set) are set on the inner pane window element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
  */

package/dist/src/SidePane/SidePane.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { Close, PaneExpansionToRight, PaneExpansionToLeft } from '@moneyforward/mfui-icons-react';
 import { cx } from '../../styled-system/css';
 import { Heading } from '../Heading';
@@ -13,16 +13,20 @@ import { Portal, TargetDomNodeProvider, useAutomaticTargetDomNode } from '../Por
 import { FormFooter } from '../FormFooter';
 /**
  * The general purpose SidePane component.
- * This component extends the props of `<div>` element with `role="dialog"`.
+ * This component extends the props of `<div>` element. The extended props and `ref` are
+ * applied to the root overlay element covering the viewport, while `role="dialog"` (and
+ * `aria-modal="true"` when `enableModal` is set) are set on the inner pane window element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
  */
 export const SidePane = compatibleForwardRef(({ open, title, renderHeading, onClose, className, children, actionSlot, formFooterProps, position = 'right', enableModal = false, enableAutoUnmount = true, disableBackdropClose = false, closeButtonProps, targetDOMNode, insideProps, ...props }, ref) => {
     const classes = sidePaneSlotRecipe({ position, nonModal: !enableModal });
+    const [insideElement, setInsideElement] = useState(null);
     const { localOpen, handleCloseSidePane, handleStopCloseSidePane, sidePaneElement, setSidePaneElement } = useSidePaneStateController({
         open,
         onClose,
         ref,
+        insideElement,
     });
     const handleBackdropClick = useCallback(() => {
         if (!disableBackdropClose) {
@@ -56,8 +60,8 @@ export const SidePane = compatibleForwardRef(({ open, title, renderHeading, onCl
     const shouldRenderContent = enableAutoUnmount ? localOpen : true;
     const resolvedFormFooterPosition = formFooterProps?.position ?? 'sticky';
     const headingNode = title ? (_jsx(Heading, { variant: "pageHeading2", tag: "h2", children: title })) : null;
-    return (_jsx(TargetDomNodeProvider, { targetDomNode: sidePaneElement, children: shouldRenderContent ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setSidePaneElement, role: "dialog", ...props, className: cx(classes.root, 'mfui-SidePane__root', className), tabIndex: -1, style: {
+    return (_jsx(TargetDomNodeProvider, { targetDomNode: sidePaneElement, children: shouldRenderContent ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setSidePaneElement, ...props, className: cx(classes.root, 'mfui-SidePane__root', className), style: {
                     ...props.style,
                     ...(!enableAutoUnmount && !localOpen && { display: 'none' }),
-                }, onKeyDown: handleOnKeyDown, children: [enableModal ? (_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-SidePane__backdrop'), onClick: handleBackdropClick })) : null, _jsxs("div", { "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-SidePane__inside', insideProps?.className), onClick: handleStopCloseSidePane, children: [_jsxs("header", { className: cx(classes.header, 'mfui-SidePane__header'), children: [renderHeading ? (renderHeading({ headingNode })) : (_jsx("div", { className: cx(classes.title, 'mfui-SidePane__title'), children: headingNode })), _jsxs("div", { className: cx(classes.actionSlotWrapper, 'mfui-SidePane__actionSlotWrapper'), children: [!!actionSlot && (_jsx("div", { className: cx(classes.actionSlot, 'mfui-SidePane__actionSlot'), children: actionSlot })), _jsx("div", { className: cx(classes.closeButtonWrapper, 'mfui-SidePane__closeButtonWrapper'), children: _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: handleCloseSidePane, children: closeButtonIcon }) })] })] }), _jsxs("main", { className: cx(classes.content, 'mfui-SidePane__content'), children: [_jsx("div", { className: cx(classes.contentBody, 'mfui-SidePane__contentBody'), children: children }), resolvedFormFooterPosition === 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] }), formFooterProps && resolvedFormFooterPosition !== 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] })] }) })) : null }));
+                }, onKeyDown: handleOnKeyDown, children: [enableModal ? (_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-SidePane__backdrop'), onClick: handleBackdropClick })) : null, _jsxs("div", { ref: setInsideElement, role: "dialog", "aria-modal": enableModal ? 'true' : undefined, tabIndex: -1, "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-SidePane__inside', insideProps?.className), onClick: handleStopCloseSidePane, children: [_jsxs("header", { className: cx(classes.header, 'mfui-SidePane__header'), children: [renderHeading ? (renderHeading({ headingNode })) : (_jsx("div", { className: cx(classes.title, 'mfui-SidePane__title'), children: headingNode })), _jsxs("div", { className: cx(classes.actionSlotWrapper, 'mfui-SidePane__actionSlotWrapper'), children: [!!actionSlot && (_jsx("div", { className: cx(classes.actionSlot, 'mfui-SidePane__actionSlot'), children: actionSlot })), _jsx("div", { className: cx(classes.closeButtonWrapper, 'mfui-SidePane__closeButtonWrapper'), children: _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: handleCloseSidePane, children: closeButtonIcon }) })] })] }), _jsxs("main", { className: cx(classes.content, 'mfui-SidePane__content'), children: [_jsx("div", { className: cx(classes.contentBody, 'mfui-SidePane__contentBody'), children: children }), resolvedFormFooterPosition === 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] }), formFooterProps && resolvedFormFooterPosition !== 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] })] }) })) : null }));
 });

package/dist/src/SidePane/hooks/useSidePaneStateController.d.ts

@@ -3,6 +3,7 @@ type UseSidePaneStateController = {
     open?: boolean;
     onClose?: () => void;
     ref?: ForwardedRef<HTMLDivElement | null>;
+    insideElement?: HTMLElement | null;
 };
 /**
  * Custom hook to control the open/close state of a SidePane.
@@ -15,9 +16,13 @@ type UseSidePaneStateController = {
  *
  * @param options.onClose - Callback function to execute when closing the SidePane.
  *
- * @returns Object containing functions to handle closing the SidePane and ref Object to attach Dialog element.
+ * @param options.insideElement - The pane window element with `role="dialog"`. It receives
+ * default focus when the SidePane opens, keeping focus inside the `aria-modal` boundary.
+ *
+ * @returns Object containing the local open state, close/click handlers, and a callback
+ * ref (`setSidePaneElement`) to attach to the root overlay element.
  */
-export declare function useSidePaneStateController({ open, onClose, ref }: UseSidePaneStateController): {
+export declare function useSidePaneStateController({ open, onClose, ref, insideElement }: UseSidePaneStateController): {
     localOpen: boolean | undefined;
     handleCloseSidePane: () => void;
     handleStopCloseSidePane: (event: React.MouseEvent<HTMLDivElement>) => void;

package/dist/src/SidePane/hooks/useSidePaneStateController.js

@@ -12,9 +12,13 @@ import { useSidePaneOpenStateWithAnimation } from './useSidePaneOpenStateWithAni
  *
  * @param options.onClose - Callback function to execute when closing the SidePane.
  *
- * @returns Object containing functions to handle closing the SidePane and ref Object to attach Dialog element.
+ * @param options.insideElement - The pane window element with `role="dialog"`. It receives
+ * default focus when the SidePane opens, keeping focus inside the `aria-modal` boundary.
+ *
+ * @returns Object containing the local open state, close/click handlers, and a callback
+ * ref (`setSidePaneElement`) to attach to the root overlay element.
  */
-export function useSidePaneStateController({ open, onClose, ref }) {
+export function useSidePaneStateController({ open, onClose, ref, insideElement }) {
     const [sidePaneElement, setSidePaneElement] = useState(null);
     const { localOpen, openSidePane, closeSidePane } = useSidePaneOpenStateWithAnimation({ open, sidePaneElement });
     const setSidePaneElementRef = useCallback((element) => {
@@ -49,12 +53,14 @@ export function useSidePaneStateController({ open, onClose, ref }) {
     const handleStopCloseSidePane = useCallback((event) => {
         event.stopPropagation();
     }, []);
-    // Autofocus to the SidePane itself when it opens
+    // Autofocus to the pane window (`role="dialog"` element) when it opens.
+    // Screen readers honor `aria-modal` only when focus is on the `role="dialog"`
+    // element or its descendants, so the root wrapper must not be the focus target.
     useEffect(() => {
         if (!localOpen)
             return;
-        sidePaneElement?.focus();
-    }, [sidePaneElement, localOpen]);
+        (insideElement ?? sidePaneElement)?.focus();
+    }, [insideElement, sidePaneElement, localOpen]);
     return {
         localOpen,
         handleCloseSidePane,

package/dist/src/Tag/Tag.d.ts

@@ -7,4 +7,4 @@ import { type TagProps } from './Tag.types';
  *  - If `disabled` is `true` and `onClick` is provided, the tag will be displayed as disabled button.
  *  - If `showCloseButton` is `true`, the tag will be displayed with a close button.
  */
-export declare function Tag({ label, onClick, href, customLinkComponent, disabled, onClose, target, rel, className, }: TagProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tag({ label, onClick, href, customLinkComponent, disabled, onClose, closeButtonProps, target, rel, className, }: TagProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/Tag/Tag.js

@@ -14,10 +14,10 @@ import { cx } from '../../styled-system/css';
  *  - If `disabled` is `true` and `onClick` is provided, the tag will be displayed as disabled button.
  *  - If `showCloseButton` is `true`, the tag will be displayed with a close button.
  */
-export function Tag({ label, onClick, href, customLinkComponent, disabled = false, onClose, target, rel, className, }) {
+export function Tag({ label, onClick, href, customLinkComponent, disabled = false, onClose, closeButtonProps, target, rel, className, }) {
     const isClickable = !!onClick || !!href;
     const classes = tagSlotRecipe({ interactable: isClickable, showCloseButton: !!onClose });
-    const closeButton = (_jsx(IconButton, { disabled: disabled, className: cx(classes.closeButton, 'mfui-Tag__closeButton'), "aria-label": `${label}を削除する`, onClick: onClose, children: _jsx(Close, {}) }));
+    const closeButton = (_jsx(IconButton, { disabled: disabled, className: cx(classes.closeButton, 'mfui-Tag__closeButton'), "aria-label": closeButtonProps?.['aria-label'] ?? `${label}を削除する`, onClick: onClose, children: _jsx(Close, {}) }));
     if (!isClickable) {
         return (_jsx(FocusIndicator, { children: _jsxs("span", { className: cx(classes.root, 'mfui-Tag__root', className), children: [_jsx(Typography, { variant: "condensedInput", children: label }), onClose ? closeButton : null] }) }));
     }

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

@@ -33,6 +33,13 @@ export type TagProps = {
      * The handler to close the tag. When this prop is provided, the close button will be shown
      */
     onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The properties for the close button.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the close button. default is '{label}を削除する'.
+     */
+    closeButtonProps?: Pick<ComponentPropsWithoutRef<'button'>, 'aria-label'>;
     /**
      * Class name to be applied to the wrapper element.
      */

package/dist/src/Tooltip/hooks/usePopoverController.js

@@ -71,6 +71,31 @@ export const usePopoverController = ({ placement, open, arrowRef }) => {
     });
     // Convert calculated placement back to original placement
     const originalPlacement = reversePlacementMapping[calculatedPlacement];
+    const isStartPlacement = originalPlacement.endsWith('Start');
+    const isEndPlacement = originalPlacement.endsWith('End');
+    const isVerticalPlacement = originalPlacement.startsWith('top') || originalPlacement.startsWith('bottom');
+    const arrowHorizontalPosition = (() => {
+        if (!isVerticalPlacement)
+            return;
+        if (isStartPlacement)
+            return { left: `${String(ARROW_PADDING)}px`, right: undefined };
+        if (isEndPlacement)
+            return { left: undefined, right: `${String(ARROW_PADDING)}px` };
+        return {
+            left: arrowData?.x ? `${String(arrowData.x)}px` : undefined,
+            right: undefined,
+        };
+    })();
+    const arrowVerticalPosition = (() => {
+        if (originalPlacement.startsWith('top'))
+            return { top: '100%', bottom: undefined };
+        if (originalPlacement.startsWith('bottom'))
+            return { top: undefined, bottom: '100%' };
+        return {
+            top: arrowData?.y ? `${String(arrowData.y)}px` : undefined,
+            bottom: undefined,
+        };
+    })();
     return {
         tooltip: {
             setReference: setFloating,
@@ -82,20 +107,10 @@ export const usePopoverController = ({ placement, open, arrowRef }) => {
         arrow: {
             style: {
                 position: 'absolute',
-                top: (() => {
-                    // When placement is top, the arrow should be at the bottom
-                    if (originalPlacement.startsWith('top'))
-                        return '100%';
-                    return arrowData?.y ? `${String(arrowData.y)}px` : undefined;
-                })(),
-                right: originalPlacement.startsWith('right') ? '100%' : undefined,
-                left: (() => {
-                    // When placement is left, the arrow should be at the right
-                    if (originalPlacement.startsWith('left'))
-                        return '100%';
-                    return arrowData?.x ? `${String(arrowData.x)}px` : undefined;
-                })(),
-                bottom: originalPlacement.startsWith('bottom') ? '100%' : undefined,
+                top: arrowVerticalPosition.top,
+                bottom: arrowVerticalPosition.bottom,
+                left: arrowHorizontalPosition?.left ?? (originalPlacement.startsWith('left') ? '100%' : undefined),
+                right: arrowHorizontalPosition?.right ?? (originalPlacement.startsWith('right') ? '100%' : undefined),
                 // Rotate the arrow if it's on the bottom or right
                 transform: `rotate(${originalPlacement.startsWith('bottom') || originalPlacement.startsWith('right') ? '180deg' : '0'})`,
             },

package/dist/styled-system/recipes/data-table-cell-slot-recipe.d.ts

@@ -7,6 +7,7 @@ interface DataTableCellSlotRecipeVariant {
 isCheckboxCell: boolean
 rowHighlighted: boolean
 fixedColumn: boolean
+verticalBorder: boolean
 edgeFixedColumn: "left" | "right"
 layout: "default" | "edge-to-edge"
 type: "text" | "amount"

package/dist/styled-system/recipes/data-table-cell-slot-recipe.js

@@ -52,6 +52,7 @@ const dataTableCellSlotRecipeVariantKeys = [
     "isCheckboxCell",
     "rowHighlighted",
     "fixedColumn",
+    "verticalBorder",
     "edgeFixedColumn",
     "layout",
     "type"
@@ -77,6 +78,9 @@ export const dataTableCellSlotRecipe = /* @__PURE__ */ Object.assign(dataTableCe
         "fixedColumn": [
             "true"
         ],
+        "verticalBorder": [
+            "true"
+        ],
         "edgeFixedColumn": [
             "left",
             "right"

package/dist/styled-system/recipes/data-table-header-cell-slot-recipe.d.ts

@@ -5,6 +5,7 @@ import type { DistributiveOmit, Pretty } from '../types/system-types';
 interface DataTableHeaderCellSlotRecipeVariant {
   size: "small" | "medium"
 fixedColumn: boolean
+verticalBorder: boolean
 edgeFixedColumn: "left" | "right"
 isCheckboxCell: boolean
 type: "text" | "amount"

package/dist/styled-system/recipes/data-table-header-cell-slot-recipe.js

@@ -35,6 +35,7 @@ const dataTableHeaderCellSlotRecipeFn = memo((props = {}) => {
 const dataTableHeaderCellSlotRecipeVariantKeys = [
     "size",
     "fixedColumn",
+    "verticalBorder",
     "edgeFixedColumn",
     "isCheckboxCell",
     "type"
@@ -54,6 +55,9 @@ export const dataTableHeaderCellSlotRecipe = /* @__PURE__ */ Object.assign(dataT
         "fixedColumn": [
             "true"
         ],
+        "verticalBorder": [
+            "true"
+        ],
         "edgeFixedColumn": [
             "left",
             "right"

package/dist/styled-system/recipes/dropdown-menu-item-slot-recipe.d.ts

@@ -10,7 +10,7 @@ type DropdownMenuItemSlotRecipeVariantMap = {
   [key in keyof DropdownMenuItemSlotRecipeVariant]: Array<DropdownMenuItemSlotRecipeVariant[key]>
 }
 
-type DropdownMenuItemSlotRecipeSlot = "root"
+type DropdownMenuItemSlotRecipeSlot = "root" | "content" | "disabledMessage" | "disabledMessageIcon"
 
 export type DropdownMenuItemSlotRecipeVariantProps = {
   [key in keyof DropdownMenuItemSlotRecipeVariant]?: ConditionalValue<DropdownMenuItemSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/dropdown-menu-item-slot-recipe.js

@@ -6,6 +6,18 @@ const dropdownMenuItemSlotRecipeSlotNames = [
     [
         "root",
         "DropdownMenuItem__root"
+    ],
+    [
+        "content",
+        "DropdownMenuItem__content"
+    ],
+    [
+        "disabledMessage",
+        "DropdownMenuItem__disabledMessage"
+    ],
+    [
+        "disabledMessageIcon",
+        "DropdownMenuItem__disabledMessageIcon"
     ]
 ];
 const dropdownMenuItemSlotRecipeSlotFns = /* @__PURE__ */ dropdownMenuItemSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dropdownMenuItemSlotRecipeDefaultVariants, getSlotCompoundVariant(dropdownMenuItemSlotRecipeCompoundVariants, slotName))]);

package/dist/styles.css

@@ -229,9 +229,13 @@
   --mfui-colors-mfui\.color\.selected\.border\.none: #2e72d8ff;
   --mfui-colors-mfui\.color\.selected\.border\.hovered: #0d57b1ff;
   --mfui-colors-mfui\.color\.selected\.border\.pressed: #003e90ff;
-                --mfui-colors-mfui\.color\.signal-green\.content\.none: #008644ff;
+  --mfui-colors-mfui\.color\.selected\.text-on-background\.none: #165cb7ff;
+  --mfui-colors-mfui\.color\.selected\.text-on-background\.hovered: #004396ff;
+  --mfui-colors-mfui\.color\.selected\.text-on-background\.pressed: #072977ff;
+          --mfui-colors-mfui\.color\.signal-green\.content\.none: #008644ff;
                   --mfui-colors-mfui\.color\.signal-green\.sub-background\.none: #b3eac0ff;
-            --mfui-colors-mfui\.color\.signal-neutral\.sub-background\.none: #f3f3f3ff;
+      --mfui-colors-mfui\.color\.signal-green\.text-on-sub-background\.none: #006d36ff;
+      --mfui-colors-mfui\.color\.signal-neutral\.sub-background\.none: #f3f3f3ff;
       --mfui-colors-mfui\.color\.signal-red\.content\.none: #d7383cff;
   --mfui-colors-mfui\.color\.signal-red\.content\.hovered: #b40d24ff;
   --mfui-colors-mfui\.color\.signal-red\.content\.pressed: #8a0017ff;
@@ -242,9 +246,11 @@
   --mfui-colors-mfui\.color\.signal-red\.background\.hovered: #b40d24ff;
   --mfui-colors-mfui\.color\.signal-red\.background\.pressed: #8a0017ff;
   --mfui-colors-mfui\.color\.signal-red\.sub-background\.none: #ffd3ccff;
-            --mfui-colors-mfui\.color\.signal-yellow\.content\.none: #8b7200ff;
+      --mfui-colors-mfui\.color\.signal-red\.text-on-sub-background\.none: #ba1828ff;
+      --mfui-colors-mfui\.color\.signal-yellow\.content\.none: #8b7200ff;
                   --mfui-colors-mfui\.color\.signal-yellow\.sub-background\.none: #f7da90ff;
-            --mfui-shadows-mfui\.elevation\.plus-1\.shadow-1: 0px 1px 1px 1px #00000033;
+      --mfui-colors-mfui\.color\.signal-yellow\.text-on-sub-background\.none: #775a01ff;
+      --mfui-shadows-mfui\.elevation\.plus-1\.shadow-1: 0px 1px 1px 1px #00000033;
   --mfui-shadows-mfui\.elevation\.plus-1\.shadow-2: 0px 2px 2px 1px #0000001a;
   --mfui-shadows-mfui\.elevation\.plus-2\.shadow-1: 0px 4px 8px 0px #00000040;
   --mfui-shadows-mfui\.elevation\.plus-2\.shadow-2: 0px 6px 16px 0px #00000033;
@@ -818,6 +824,28 @@
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.pressed);
 }
 
+.mfui-eMicFf {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.mfui-hsjcaJ {
+  gap: var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.comfort);
+  display: flex;
+  align-items: flex-start;
+  color: var(--mfui-colors-mfui\.color\.neutral\.content\.none);
+  overflow-wrap: break-word;
+}
+
+.mfui-imxNHe {
+  flex: 0 0 auto;
+  display: block;
+  width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.condensed);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.condensed);
+  margin-top: 2px;
+}
+
 .mfui-dHwbKW {
   gap: var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.comfort);
   display: inline-flex;
@@ -2331,6 +2359,8 @@
 .mfui-hveqnu {
   border: none;
   inset-inline: auto 0;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -2543,7 +2573,7 @@
 }
 
 .mfui-fhtZXM {
-  max-height: 160px;
+  max-height: 288px;
   width: fit-content;
 }
 
@@ -3067,7 +3097,7 @@
   border-color: var(--mfui-colors-mfui\.color\.selected\.border\.none);
   padding-block: calc(var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.vertical\.comfort) - 1px);
   padding-inline: calc(var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.horizontal\.comfort) - 1px);
-  color: var(--mfui-colors-mfui\.color\.selected\.sign\.none);
+  color: var(--mfui-colors-mfui\.color\.selected\.text-on-background\.none);
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.none);
 }
 
@@ -3081,7 +3111,7 @@
 
 .mfui-ljuOJV:is(:focus, [data-focus])[aria-current=page] {
   border-color: var(--mfui-colors-mfui\.color\.selected\.border\.hovered);
-  color: var(--mfui-colors-mfui\.color\.selected\.sign\.hovered);
+  color: var(--mfui-colors-mfui\.color\.selected\.text-on-background\.hovered);
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.hovered);
 }
 
@@ -3091,7 +3121,7 @@
 
 .mfui-ljuOJV:is(:hover, [data-hover])[aria-current=page] {
   border-color: var(--mfui-colors-mfui\.color\.selected\.border\.hovered);
-  color: var(--mfui-colors-mfui\.color\.selected\.sign\.hovered);
+  color: var(--mfui-colors-mfui\.color\.selected\.text-on-background\.hovered);
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.hovered);
 }
 
@@ -3101,7 +3131,7 @@
 
 .mfui-ljuOJV:is(:active, [data-active])[aria-current=page] {
   border-color: var(--mfui-colors-mfui\.color\.selected\.border\.pressed);
-  color: var(--mfui-colors-mfui\.color\.selected\.sign\.pressed);
+  color: var(--mfui-colors-mfui\.color\.selected\.text-on-background\.pressed);
   background-color: var(--mfui-colors-mfui\.color\.selected\.background\.pressed);
 }
 
@@ -7358,6 +7388,23 @@ li:last-child > .mfui-cXGJls {
   background-color: inherit;
 }
 
+.mfui-hGAWTy {
+  border-left-style: solid;
+  border-left-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
+  border-left-color: var(--mfui-colors-mfui\.color\.neutral\.thin-border\.none);
+  border-right-style: solid;
+  border-right-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
+  border-right-color: var(--mfui-colors-mfui\.color\.neutral\.thin-border\.none);
+}
+
+.mfui-hGAWTy:first-child {
+  border-left-width: 0;
+}
+
+.mfui-hGAWTy:last-child {
+  border-right-width: 0;
+}
+
 .mfui-izXzGC::before {
   border-right-width: var(--mfui-border-widths-mfui\.size\.border\.fixed-cell\.horizontal\.comfort);
   border-right-style: solid;
@@ -7433,6 +7480,23 @@ li:last-child > .mfui-cXGJls {
   position: sticky;
 }
 
+.mfui-haQzOt {
+  border-left-style: solid;
+  border-left-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
+  border-left-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
+  border-right-style: solid;
+  border-right-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
+  border-right-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
+}
+
+.mfui-haQzOt:first-child {
+  border-left-width: 0;
+}
+
+.mfui-haQzOt:last-child {
+  border-right-width: 0;
+}
+
 .mfui-fGBQCd::before {
   border-right-width: var(--mfui-border-widths-mfui\.size\.border\.fixed-cell\.horizontal\.comfort);
   border-right-style: solid;
@@ -7988,17 +8052,17 @@ li:last-child > .mfui-cXGJls {
 
 .mfui-cNbYAX {
   background-color: var(--mfui-colors-mfui\.color\.signal-green\.sub-background\.none);
-  color: var(--mfui-colors-mfui\.color\.signal-green\.content\.none);
+  color: var(--mfui-colors-mfui\.color\.signal-green\.text-on-sub-background\.none);
 }
 
 .mfui-bAfwQA {
   background-color: var(--mfui-colors-mfui\.color\.signal-red\.sub-background\.none);
-  color: var(--mfui-colors-mfui\.color\.signal-red\.content\.none);
+  color: var(--mfui-colors-mfui\.color\.signal-red\.text-on-sub-background\.none);
 }
 
 .mfui-dZGLHT {
   background-color: var(--mfui-colors-mfui\.color\.signal-yellow\.sub-background\.none);
-  color: var(--mfui-colors-mfui\.color\.signal-yellow\.content\.none);
+  color: var(--mfui-colors-mfui\.color\.signal-yellow\.text-on-sub-background\.none);
 }
 
 .mfui-bqPyQm {