@moneyforward/mfui-components 3.3.0 → 3.5.0

package/dist/src/DropdownMenu/DropdownMenuItem/DropdownMenuItem.d.ts

@@ -12,4 +12,4 @@ import { type DropdownMenuItemProps } from './DropdownMenuItem.types';
  *
  * Otherwise, it will be rendered as a div element.
  */
-export declare function DropdownMenuItem({ children, className, href, target, customLinkComponent, onClick, 'aria-labelledby': ariaLabelledby, ...rest }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuItem({ children, className, href, target, customLinkComponent, onClick, disabled, 'aria-labelledby': ariaLabelledby, ...rest }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DropdownMenu/DropdownMenuItem/DropdownMenuItem.js

@@ -20,7 +20,7 @@ import { useDropdownMenuContext } from '../DropdownMenuContext';
  *
  * Otherwise, it will be rendered as a div element.
  */
-export function DropdownMenuItem({ children, className, href, target, customLinkComponent, onClick, 'aria-labelledby': ariaLabelledby, ...rest }) {
+export function DropdownMenuItem({ children, className, href, target, customLinkComponent, onClick, disabled, 'aria-labelledby': ariaLabelledby, ...rest }) {
     const classes = dropdownMenuItemSlotRecipe();
     const { closeMenuPopover } = useDropdownMenuContext();
     const id = useId();
@@ -48,11 +48,13 @@ export function DropdownMenuItem({ children, className, href, target, customLink
         }
     }, []);
     const handleClick = useCallback((event) => {
+        if (disabled)
+            return;
         if (onClick) {
             onClick(event);
             closeMenuPopover?.();
         }
-    }, [onClick, closeMenuPopover]);
+    }, [disabled, onClick, closeMenuPopover]);
     const isButton = useMemo(() => onClick && !href, [onClick, href]);
     const Tag = useMemo(() => {
         if (href) {
@@ -66,6 +68,16 @@ export function DropdownMenuItem({ children, className, href, target, customLink
     // If the href is provided, it should be an anchor element and focusable.
     // If the href is undefined and onClick is provided, it should be a button element and focusable.
     // If both are undefined, it should be a div element and not focusable.
-    const isFocusable = !!href || !!onClick;
-    return (_jsx(FocusIndicator, { position: "inside", children: _jsx(Tag, { ...rest, ref: itemRef, ...(ariaLabelledby && { id }), "data-mfui-menu-item": true, role: "menuitem", className: cx(classes.root, 'mfui-DropdownMenuItem__root', className), tabIndex: -1, href: href, target: target, "data-mfui-focusable": isFocusable, type: onClick ? 'button' : undefined, "aria-labelledby": ariaLabelledby ? `${ariaLabelledby} ${id}` : undefined, onKeyDown: handleKeyDown, onClick: isButton ? handleClick : undefined, children: typeof children === 'string' ? _jsx(Typography, { variant: "body", children: children }) : children }) }));
+    // If disabled is true, the menu item is not focusable.
+    const isFocusable = (!!href || !!onClick) && !disabled;
+    // Anchor navigation is suppressed when disabled to prevent unintended navigation.
+    const resolvedHref = isButton || disabled ? undefined : href;
+    // For button elements, use the native disabled attribute for full browser semantics.
+    // For anchor and div elements, use aria-disabled and data-disabled since they have no native disabled support.
+    const disabledProps = isButton
+        ? { disabled }
+        : disabled
+            ? { 'aria-disabled': true, 'data-disabled': '' }
+            : {};
+    return (_jsx(FocusIndicator, { position: "inside", children: _jsx(Tag, { ...rest, ref: itemRef, ...(ariaLabelledby && { id }), "data-mfui-menu-item": true, role: "menuitem", className: cx(classes.root, 'mfui-DropdownMenuItem__root', className), tabIndex: -1, href: resolvedHref, target: target, "data-mfui-focusable": isFocusable, type: onClick ? 'button' : undefined, "aria-labelledby": ariaLabelledby ? `${ariaLabelledby} ${id}` : undefined, ...disabledProps, onKeyDown: handleKeyDown, onClick: isButton ? handleClick : undefined, children: typeof children === 'string' ? _jsx(Typography, { variant: "body", children: children }) : children }) }));
 }

package/dist/src/DropdownMenu/DropdownMenuItem/DropdownMenuItem.types.d.ts

@@ -16,6 +16,10 @@ type AnchorProps = {
      * This property is ignored if the href property is provided.
      */
     onClick?: undefined;
+    /**
+     * When true, the menu item is disabled and not interactive.
+     */
+    disabled?: boolean;
 };
 type DivProps = {
     /**
@@ -34,6 +38,10 @@ type DivProps = {
      * If not provided and the href prop is not provided, the menu item will be rendered as a div element.
      */
     onClick?: undefined;
+    /**
+     * When true, the menu item is disabled and not interactive.
+     */
+    disabled?: boolean;
 };
 type ButtonProps = {
     /**
@@ -52,6 +60,10 @@ type ButtonProps = {
      * The handler to call when the menu item is clicked or the Enter key is pressed.
      */
     onClick?: ComponentPropsWithoutRef<'button'>['onClick'];
+    /**
+     * When true, the menu item is disabled and not interactive.
+     */
+    disabled?: boolean;
 };
 /**
  * The props for the MenuItem component.

package/dist/src/HelpMessage/HelpMessage.d.ts

@@ -1,6 +1,10 @@
 /**
- * The HelpMessage component
- * This component switches the variants of looks depends on the props: messageType.
+ * The HelpMessage component displays contextual messages with an icon and color
+ * that reflect the message's intent. Supports four variants via `messageType`:
+ * - `neutral` (default): informational, uses IconInfo. Icon is hidden by default; opt in with `showIcon`. No ARIA role.
+ * - `error`: validation or system error, uses IconError. Sets `role="alert"` — announces immediately to screen readers.
+ * - `caution`: warning or advisory, uses IconCaution. No ARIA role by default — add `role="status"` or `aria-live="polite"` when rendered dynamically.
+ * - `success`: confirmation or positive feedback, uses IconApproval. Sets `role="status"` — announces politely when the user is idle.
  *
  * Also extends the props of the `<div>` element.
  *
@@ -8,6 +12,7 @@
  */
 export declare const HelpMessage: import("react").ForwardRefExoticComponent<{
     messageType?: import("../../styled-system/recipes").HelpMessageRecipeVariant["messageType"];
+    showIcon?: boolean;
     messageAlign?: "left" | "center";
     children?: import("..").TypographyProps["children"];
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/HelpMessage/HelpMessage.js

@@ -1,20 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId } from 'react';
-import { Error } from '@moneyforward/mfui-icons-react';
+import { Approval, Caution, Error, Info } from '@moneyforward/mfui-icons-react';
 import { cx } from '../../styled-system/css';
 import { helpMessageRecipe } from '../../styled-system/recipes';
 import { Typography } from '../Typography';
+const messageTypeRoleMap = {
+    neutral: undefined,
+    error: 'alert',
+    caution: undefined,
+    success: 'status',
+};
+const messageTypeIconMap = {
+    neutral: Info,
+    error: Error,
+    caution: Caution,
+    success: Approval,
+};
 /**
- * The HelpMessage component
- * This component switches the variants of looks depends on the props: messageType.
+ * The HelpMessage component displays contextual messages with an icon and color
+ * that reflect the message's intent. Supports four variants via `messageType`:
+ * - `neutral` (default): informational, uses IconInfo. Icon is hidden by default; opt in with `showIcon`. No ARIA role.
+ * - `error`: validation or system error, uses IconError. Sets `role="alert"` — announces immediately to screen readers.
+ * - `caution`: warning or advisory, uses IconCaution. No ARIA role by default — add `role="status"` or `aria-live="polite"` when rendered dynamically.
+ * - `success`: confirmation or positive feedback, uses IconApproval. Sets `role="status"` — announces politely when the user is idle.
  *
  * Also extends the props of the `<div>` element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
  */
-export const HelpMessage = forwardRef(({ messageType = 'neutral', messageAlign = 'left', children, className, ...props }, ref) => {
+export const HelpMessage = forwardRef(({ messageType = 'neutral', messageAlign = 'left', showIcon, children, className, ...props }, ref) => {
     const classes = helpMessageRecipe({ messageType, messageAlign });
     const id = useId();
     const ariaLabelledByContentId = `help-message-content-${id}`;
-    return (_jsxs("div", { ref: ref, role: messageType === 'error' ? 'alert' : undefined, "aria-labelledby": ariaLabelledByContentId, ...props, className: cx(classes.root, 'mfui-HelpMessage__root', className), children: [messageType === 'error' ? _jsx(Error, { "aria-hidden": true, className: cx(classes.icon, 'mfui-HelpMessage__icon') }) : null, _jsx(Typography, { id: ariaLabelledByContentId, variant: "helpMessage", className: cx(classes.message, 'mfui-HelpMessage__message'), children: children })] }));
+    const shouldShowIcon = showIcon ?? messageType !== 'neutral';
+    const Icon = messageTypeIconMap[messageType];
+    return (_jsxs("div", { ref: ref, role: messageTypeRoleMap[messageType], "aria-labelledby": ariaLabelledByContentId, ...props, className: cx(classes.root, 'mfui-HelpMessage__root', className), children: [shouldShowIcon ? _jsx(Icon, { "aria-hidden": true, className: cx(classes.icon, 'mfui-HelpMessage__icon') }) : null, _jsx(Typography, { id: ariaLabelledByContentId, variant: "helpMessage", className: cx(classes.message, 'mfui-HelpMessage__message'), children: children })] }));
 });

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

@@ -6,13 +6,20 @@ import { type TypographyProps } from '../Typography';
  */
 export type HelpMessageProps = {
     /**
-     * The type of message to display.
-     * The color of the message will change based on this value.
-     * The error icon will be displayed next to the message if this value is 'error'.
+     * The intent of the message. Controls the icon and color.
+     * - `neutral`: informational (IconInfo)
+     * - `error`: validation or system error (IconError). Sets `role="alert"` for screen readers.
+     * - `caution`: warning or advisory (IconCaution). No ARIA role is set by default — add `role="status"` or `aria-live="polite"` when rendering dynamically.
+     * - `success`: confirmation or positive feedback (IconApproval)
      *
      * @default 'neutral'
      */
     messageType?: HelpMessageRecipeVariant['messageType'];
+    /**
+     * Whether to display the icon next to the message.
+     * Defaults to `false` for `neutral` (for backward compatibility) and `true` for all other types.
+     */
+    showIcon?: boolean;
     /**
      * The alignment of the message.
      *

package/dist/src/MainNavigation/BaseMainNavigation.js

@@ -37,7 +37,7 @@ export function BaseMainNavigation({ className, featureShortcut, navigationItems
                                 else {
                                     setOpenPopoverIndex(null);
                                 }
-                            } })) : (_jsxs("details", { open: hasCurrentNavigationInChildren(navigation.children), className: cx(classes.parentDetails, 'mfui-BaseMainNavigation__parentDetails'), children: [_jsx(FocusIndicator, { position: "inside", children: _jsxs("summary", { className: cx(classes.parentSummary, 'mfui-BaseMainNavigation__parentSummary'), children: [_jsx("div", { className: cx(classes.parentSummaryIcon, 'mfui-BaseMainNavigation__parentSummaryIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label }), _jsx(DisclosureBasicCollapsed, { className: "mfui-BaseMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), _jsx(DisclosureBasicExpanded, { className: "mfui-BaseMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), _jsx("ul", { className: cx(classes.childrenList, 'mfui-BaseMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-BaseMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-BaseMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] }))) : (_jsx(Tooltip, { className: cx(classes.listItemTooltip, 'mfui-BaseMainNavigation__listItemTooltip'), content: navigation.label, disabled: !isCollapsed, placement: "right", children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: cx(classes.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "aria-label": isCollapsed ? navigation.label : undefined, "aria-current": navigation.isCurrent ? 'page' : undefined, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-BaseMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-BaseMainNavigation__iconAndLabel'), children: [_jsx("div", { className: cx(classes.listItemAnchorIcon, 'mfui-BaseMainNavigation__listItemAnchorIcon'), children: navigation.icon }), isCollapsed ? null : _jsx(Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-BaseMainNavigation__lockIcon'), "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, !isCollapsed && navigation.statusSlot && navigation.locked !== true
+                            } })) : (_jsxs("details", { open: navigation.isOpenByDefault || hasCurrentNavigationInChildren(navigation.children), className: cx(classes.parentDetails, 'mfui-BaseMainNavigation__parentDetails'), children: [_jsx(FocusIndicator, { position: "inside", children: _jsxs("summary", { className: cx(classes.parentSummary, 'mfui-BaseMainNavigation__parentSummary'), children: [_jsx("div", { className: cx(classes.parentSummaryIcon, 'mfui-BaseMainNavigation__parentSummaryIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label }), _jsx(DisclosureBasicCollapsed, { className: "mfui-BaseMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), _jsx(DisclosureBasicExpanded, { className: "mfui-BaseMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), _jsx("ul", { className: cx(classes.childrenList, 'mfui-BaseMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-BaseMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-BaseMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] }))) : (_jsx(Tooltip, { className: cx(classes.listItemTooltip, 'mfui-BaseMainNavigation__listItemTooltip'), content: navigation.label, disabled: !isCollapsed, placement: "right", children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: cx(classes.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "aria-label": isCollapsed ? navigation.label : undefined, "aria-current": navigation.isCurrent ? 'page' : undefined, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-BaseMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-BaseMainNavigation__iconAndLabel'), children: [_jsx("div", { className: cx(classes.listItemAnchorIcon, 'mfui-BaseMainNavigation__listItemAnchorIcon'), children: navigation.icon }), isCollapsed ? null : _jsx(Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-BaseMainNavigation__lockIcon'), "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, !isCollapsed && navigation.statusSlot && navigation.locked !== true
                                                 ? navigation.statusSlot
                                                 : null] }) }) }) })) }, index))) }) }), enableCollapsible ? (_jsx("div", { className: cx(classes.footer, 'mfui-BaseMainNavigation__footer'), children: _jsx(Tooltip, { content: toggleButtonLabel, placement: "right", children: _jsx(ToggleButton, { className: cx(classes.toggleButton, 'mfui-BaseMainNavigation__toggleButton'), iconClassName: cx(classes.toggleButtonIcon, 'mfui-BaseMainNavigation__toggleButtonIcon'), isCollapsed: isCollapsed, "aria-label": toggleButtonLabel, targetId: navId, handleClickToggleButton: handleClickToggleButton }) }) })) : null] }));
 }

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

@@ -81,6 +81,14 @@ type ParentNavigationItem = {
      * This property is not allowed for the parent navigation items.
      */
     isCurrent?: undefined;
+    /**
+     * Whether the nested navigation is open by default.
+     * When set to true, the parent navigation item is expanded on initial render,
+     * regardless of whether any child has `isCurrent: true`.
+     *
+     * @default false
+     */
+    isOpenByDefault?: boolean;
     /**
      * Nested navigation items.
      *

package/dist/src/MainNavigation/NarrowViewportMainNavigation.js

@@ -47,5 +47,5 @@ export const NarrowViewportMainNavigation = forwardRef(({ className, featureShor
     }
     return (_jsx(Portal, { children: _jsxs("div", { ref: dialogRef, role: "dialog", className: cx(classes.root, 'mfui-NarrowViewportMainNavigation__root', className), tabIndex: -1, onKeyDown: handleOnKeyDown, children: [_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-NarrowViewportMainNavigation__backdrop'), onClick: handleCloseMainNavigation }), _jsxs("div", { "data-mfui-content": "inside", className: cx(classes.container, 'mfui-NarrowViewportMainNavigation__container'), onClick: (event) => {
                         event.stopPropagation();
-                    }, children: [featureShortcut ? (_jsx("div", { className: cx(classes.featureShortcut, 'mfui-NarrowViewportMainNavigation__featureShortcut'), children: _jsx(FocusIndicator, { children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: cx(classes.featureShortcutAnchor, 'mfui-NarrowViewportMainNavigation__featureShortcutAnchor'), onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, _jsx("nav", { className: cx(classes.nav, 'mfui-NarrowViewportMainNavigation__nav'), children: _jsx("ul", { className: cx(classes.list, 'mfui-NarrowViewportMainNavigation__list'), children: navigationItems.map((navigation, index) => (_jsx("li", { className: cx(classes.listItem, 'mfui-NarrowViewportMainNavigation__listItem'), children: navigation.children ? (_jsxs("details", { open: hasCurrentNavigationInChildren(navigation.children), className: cx(classes.parentDetails, 'mfui-NarrowViewportMainNavigation__parentDetails'), children: [_jsx(FocusIndicator, { position: "inside", children: _jsxs("summary", { className: cx(classes.parentSummary, 'mfui-NarrowViewportMainNavigation__parentSummary'), children: [_jsx("div", { className: cx(classes.parentSummaryIcon, 'mfui-NarrowViewportMainNavigation__parentSummaryIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label }), _jsx(DisclosureBasicCollapsed, { className: "mfui-NarrowViewportMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), _jsx(DisclosureBasicExpanded, { className: "mfui-NarrowViewportMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), _jsx("ul", { className: cx(classes.childrenList, 'mfui-NarrowViewportMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-NarrowViewportMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-NarrowViewportMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] })) : (_jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: cx(classes.listItemAnchor, 'mfui-NarrowViewportMainNavigation__listItemAnchor'), "aria-current": navigation.isCurrent ? 'page' : undefined, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-NarrowViewportMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-NarrowViewportMainNavigation__iconAndLabel'), children: [_jsx("div", { className: cx(classes.listItemAnchorIcon, 'mfui-NarrowViewportMainNavigation__listItemAnchorIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-NarrowViewportMainNavigation__lockIcon'), "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null] }) }) })) }, index))) }) })] })] }) }));
+                    }, children: [featureShortcut ? (_jsx("div", { className: cx(classes.featureShortcut, 'mfui-NarrowViewportMainNavigation__featureShortcut'), children: _jsx(FocusIndicator, { children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: cx(classes.featureShortcutAnchor, 'mfui-NarrowViewportMainNavigation__featureShortcutAnchor'), onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, _jsx("nav", { className: cx(classes.nav, 'mfui-NarrowViewportMainNavigation__nav'), children: _jsx("ul", { className: cx(classes.list, 'mfui-NarrowViewportMainNavigation__list'), children: navigationItems.map((navigation, index) => (_jsx("li", { className: cx(classes.listItem, 'mfui-NarrowViewportMainNavigation__listItem'), children: navigation.children ? (_jsxs("details", { open: navigation.isOpenByDefault || hasCurrentNavigationInChildren(navigation.children), className: cx(classes.parentDetails, 'mfui-NarrowViewportMainNavigation__parentDetails'), children: [_jsx(FocusIndicator, { position: "inside", children: _jsxs("summary", { className: cx(classes.parentSummary, 'mfui-NarrowViewportMainNavigation__parentSummary'), children: [_jsx("div", { className: cx(classes.parentSummaryIcon, 'mfui-NarrowViewportMainNavigation__parentSummaryIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label }), _jsx(DisclosureBasicCollapsed, { className: "mfui-NarrowViewportMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), _jsx(DisclosureBasicExpanded, { className: "mfui-NarrowViewportMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), _jsx("ul", { className: cx(classes.childrenList, 'mfui-NarrowViewportMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-NarrowViewportMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-NarrowViewportMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] })) : (_jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: cx(classes.listItemAnchor, 'mfui-NarrowViewportMainNavigation__listItemAnchor'), "aria-current": navigation.isCurrent ? 'page' : undefined, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-NarrowViewportMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-NarrowViewportMainNavigation__iconAndLabel'), children: [_jsx("div", { className: cx(classes.listItemAnchorIcon, 'mfui-NarrowViewportMainNavigation__listItemAnchorIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-NarrowViewportMainNavigation__lockIcon'), "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null] }) }) })) }, index))) }) })] })] }) }));
 });

package/dist/src/SubNavigation/SubNavigation.js

@@ -65,6 +65,12 @@ function NavigationLabelGroup({ label, labelIcon, locked, lockIconProps, statusS
  */
 function NavigationLink({ navigationItem, customLinkComponent, classes, }) {
     const { label, href, isCurrent, isExternal, labelIcon, statusSlot, locked, lockIconProps } = navigationItem;
+    if (navigationItem.children === undefined && navigationItem.onClick) {
+        const { onClick } = navigationItem;
+        return (_jsx(FocusIndicator, { children: _jsx("button", { type: "button", className: cx(classes.link, 'mfui-SubNavigation__link'), "aria-current": isCurrent ? 'page' : undefined, onClick: () => {
+                    onClick(navigationItem.href);
+                }, children: _jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes }) }) }));
+    }
     if (customLinkComponent && !isExternal) {
         const Tag = customLinkComponent;
         return (_jsx(FocusIndicator, { children: _jsx(Tag, { href: href, className: cx(classes.link, 'mfui-SubNavigation__link'), "aria-current": isCurrent ? 'page' : undefined, children: _jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes }) }) }));

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

@@ -68,6 +68,14 @@ type ChildlessNavigationItem = BaseNavigationItem & {
      * The path or URL to the linked page.
      */
     href: string;
+    /**
+     * If provided, the item is rendered as a button instead of a link.
+     * The handler is called with the item's `href` value as an argument.
+     *
+     * Use this for state-based navigation patterns where you want to update
+     * application state on click without performing browser navigation.
+     */
+    onClick?: (href: string) => void;
 };
 /**
  * The navigation item that has nested children.

package/dist/styled-system/recipes/help-message-recipe.d.ts

@@ -4,7 +4,7 @@ import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface HelpMessageRecipeVariant {
   messageAlign: "left" | "center"
-messageType: "neutral" | "error"
+messageType: "neutral" | "error" | "caution" | "success"
 }
 
 type HelpMessageRecipeVariantMap = {

package/dist/styled-system/recipes/help-message-recipe.js

@@ -38,7 +38,9 @@ export const helpMessageRecipe = /* @__PURE__ */ Object.assign(helpMessageRecipe
         ],
         "messageType": [
             "neutral",
-            "error"
+            "error",
+            "caution",
+            "success"
         ]
     },
     splitVariantProps(props) {

package/dist/styles.css

@@ -720,17 +720,17 @@
   min-height: var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.comfort);
 }
 
+.mfui-DYOKU:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+  color: var(--mfui-colors-mfui\.color\.disabled\.content);
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
+}
+
 .mfui-DYOKU[data-mfui-focusable=true]:is(:focus-visible, [data-focus-visible]) {
   color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
   z-index: 1;
 }
 
-.mfui-DYOKU[data-mfui-focusable=true]:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
-  color: var(--mfui-colors-mfui\.color\.disabled\.content);
-  background-color: var(--mfui-colors-mfui\.color\.base\.background\.pressed);
-}
-
 .mfui-DYOKU[data-mfui-focusable=true]:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]) {
   color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
@@ -2947,13 +2947,18 @@
 }
 
 .mfui-ljuOJV {
+  border: none;
   text-decoration: none;
   padding-block: var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.vertical\.comfort);
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.horizontal\.comfort);
   border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
+  background-color: transparent;
+  cursor: pointer;
+  text-align: left;
   display: flex;
   align-items: flex-start;
   color: var(--mfui-colors-mfui\.color\.base\.content\.none);
+  width: 100%;
 }
 
 .mfui-ljuOJV[aria-current=page] {
@@ -5596,6 +5601,14 @@
   color: var(--mfui-colors-mfui\.color\.signal-red\.content\.none);
 }
 
+.mfui-LuZio {
+  color: var(--mfui-colors-mfui\.color\.signal-yellow\.content\.none);
+}
+
+.mfui-foXPig {
+  color: var(--mfui-colors-mfui\.color\.signal-green\.content\.none);
+}
+
 .mfui-dTaPGi {
   display: inline-flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneyforward/mfui-components",
-  "version": "3.3.0",
+  "version": "3.5.0",
   "description": "React UI Component Library for all Money Forward products",
   "repository": {
     "type": "git",