@moneyforward/mfui-components 3.28.0 → 3.29.0

package/dist/src/Dialog/Dialog.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useId } from 'react';
+import { useCallback, useId, useState } from 'react';
 import { Close } from '@moneyforward/mfui-icons-react';
 import { cx } from '../../styled-system/css';
 import { dialogSlotRecipe } from '../../styled-system/recipes';
@@ -12,7 +12,9 @@ import { compatibleForwardRef } from '../utilities/react/compatibleForwardRef';
 import { Portal, TargetDomNodeProvider, useAutomaticTargetDomNode } from '../Portal';
 /**
  * The general purpose Dialog 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"` are set on the inner dialog window element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
  */
@@ -21,11 +23,13 @@ export const Dialog = compatibleForwardRef(({ open, title, onClose, className, a
     const titleId = `mfui-dialog-title-${id}`;
     const contentId = `mfui-dialog-content-${id}`;
     const classes = dialogSlotRecipe({ size });
+    const [insideElement, setInsideElement] = useState(null);
     const { localOpen, closeDialog, handleStopCloseDialog, dialogElement, setDialogElement } = useDialogStateController({
         open,
         onClose,
         forwardedRef: ref,
         customFocusElement,
+        insideElement,
     });
     const handleKeyDown = useCallback((event) => {
         if (event.key === 'Escape') {
@@ -47,8 +51,8 @@ export const Dialog = compatibleForwardRef(({ open, title, onClose, className, a
     });
     const targetElement = useAutomaticTargetDomNode(targetDOMNode, dialogElement);
     const shouldRenderContent = enableAutoUnmount ? localOpen : true;
-    return (_jsx(TargetDomNodeProvider, { targetDomNode: dialogElement, children: shouldRenderContent ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setDialogElement, role: "dialog", ...dialogProps, className: cx(classes.root, 'mfui-Dialog__root', className), "aria-labelledby": titleId, "aria-describedby": contentId, tabIndex: -1, style: {
+    return (_jsx(TargetDomNodeProvider, { targetDomNode: dialogElement, children: shouldRenderContent ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setDialogElement, ...dialogProps, className: cx(classes.root, 'mfui-Dialog__root', className), style: {
                     ...dialogProps.style,
                     ...(!enableAutoUnmount && !localOpen && { display: 'none' }),
-                }, onKeyDown: handleOnKeyDown, children: [_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-Dialog__backdrop'), onClick: handleBackdropClick }), _jsxs("div", { "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-Dialog__inside'), onClick: handleStopCloseDialog, children: [_jsx("header", { className: cx(classes.header, 'mfui-Dialog__header'), children: _jsxs("div", { className: cx(classes.headerContent, 'mfui-Dialog__headerContent'), children: [_jsx(Heading, { id: titleId, variant: "pageHeading2", tag: "h2", className: cx(classes.title, 'mfui-Dialog__title'), children: title }), !hideCloseButton ? (_jsx("div", { className: cx(classes.closeButtonWrapper, 'mfui-Dialog__closeButtonWrapper'), children: _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: closeDialog, children: _jsx(Close, {}) }) })) : null] }) }), _jsx("main", { id: contentId, className: cx(classes.content, 'mfui-Dialog__content'), children: children }), _jsx("footer", { className: cx(classes.footer, 'mfui-Dialog__footer'), children: actionSlot })] })] }) })) : null }));
+                }, onKeyDown: handleOnKeyDown, children: [_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-Dialog__backdrop'), onClick: handleBackdropClick }), _jsxs("div", { ref: setInsideElement, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": contentId, tabIndex: -1, "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-Dialog__inside'), onClick: handleStopCloseDialog, children: [_jsx("header", { className: cx(classes.header, 'mfui-Dialog__header'), children: _jsxs("div", { className: cx(classes.headerContent, 'mfui-Dialog__headerContent'), children: [_jsx(Heading, { id: titleId, variant: "pageHeading2", tag: "h2", className: cx(classes.title, 'mfui-Dialog__title'), children: title }), !hideCloseButton ? (_jsx("div", { className: cx(classes.closeButtonWrapper, 'mfui-Dialog__closeButtonWrapper'), children: _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: closeDialog, children: _jsx(Close, {}) }) })) : null] }) }), _jsx("main", { id: contentId, className: cx(classes.content, 'mfui-Dialog__content'), children: children }), _jsx("footer", { className: cx(classes.footer, 'mfui-Dialog__footer'), children: actionSlot })] })] }) })) : null }));
 });

package/dist/src/Dialog/hooks/useDialogStateController.d.ts

@@ -4,6 +4,7 @@ type UseDialogStateControllerOptions = {
     onClose?: () => void;
     forwardedRef: ForwardedRef<HTMLDivElement | null>;
     customFocusElement?: RefObject<HTMLElement | null> | HTMLElement | null;
+    insideElement?: HTMLElement | null;
 };
 /**
  * Custom hook to control the open/close state of a dialog.
@@ -23,9 +24,12 @@ type UseDialogStateControllerOptions = {
  * @param options.customFocusElement - Optional custom element to focus when the dialog opens.
  * When provided, this element receives focus instead of the dialog container.
  *
+ * @param options.insideElement - The dialog window element with `role="dialog"`. It receives
+ * default focus when the dialog opens, keeping focus inside the `aria-modal` boundary.
+ *
  * @returns Object containing functions to handle closing the dialog and stopping the dialog from closing.
  */
-export declare const useDialogStateController: ({ open, forwardedRef, onClose, customFocusElement, }: UseDialogStateControllerOptions) => {
+export declare const useDialogStateController: ({ open, forwardedRef, onClose, customFocusElement, insideElement, }: UseDialogStateControllerOptions) => {
     localOpen: boolean | undefined;
     closeDialog: () => void;
     handleStopCloseDialog: (event: React.MouseEvent<HTMLDivElement>) => void;

package/dist/src/Dialog/hooks/useDialogStateController.js

@@ -19,9 +19,12 @@ import { useUpdateEffect } from '../../utilities/effect/useUpdateEffect';
  * @param options.customFocusElement - Optional custom element to focus when the dialog opens.
  * When provided, this element receives focus instead of the dialog container.
  *
+ * @param options.insideElement - The dialog window element with `role="dialog"`. It receives
+ * default focus when the dialog opens, keeping focus inside the `aria-modal` boundary.
+ *
  * @returns Object containing functions to handle closing the dialog and stopping the dialog from closing.
  */
-export const useDialogStateController = ({ open, forwardedRef, onClose, customFocusElement, }) => {
+export const useDialogStateController = ({ open, forwardedRef, onClose, customFocusElement, insideElement, }) => {
     const [dialogElement, setDialogElement] = useState(null);
     const [localOpen, setLocalOpen] = useState(open);
     // Whenever the `open` prop changes, update the local state.
@@ -67,9 +70,9 @@ export const useDialogStateController = ({ open, forwardedRef, onClose, customFo
             customFocusElement.focus();
             return;
         }
-        // Default behavior: focus the dialog container
-        dialogElement?.focus();
-    }, [localOpen, dialogElement, customFocusElement]);
+        // Default behavior: focus the dialog window (`role="dialog"` element)
+        (insideElement ?? dialogElement)?.focus();
+    }, [localOpen, dialogElement, insideElement, customFocusElement]);
     return {
         localOpen,
         closeDialog,

package/dist/src/Disclosure/Disclosure.js

@@ -47,7 +47,7 @@ const Trigger = forwardRef(({ targetId, children, className, onClick, ...props }
         toggle();
         onClick?.(event);
     }, [onClick, toggle]);
-    return (_jsx(FocusIndicator, { children: _jsxs("button", { ref: ref, className: cx(classes.trigger, 'mfui-Disclosure__trigger', className), "aria-expanded": isOpen, "aria-controls": targetId, onClick: handleClick, ...props, children: [_jsx(Typography, { variant: "controlLabel", children: children }), isOpen ? _jsx(DisclosureBasicExpanded, {}) : _jsx(DisclosureBasicCollapsed, {})] }) }));
+    return (_jsx(FocusIndicator, { children: _jsxs("button", { ref: ref, className: cx(classes.trigger, 'mfui-Disclosure__trigger', className), "aria-expanded": isOpen, "aria-controls": targetId, type: "button", onClick: handleClick, ...props, children: [_jsx(Typography, { variant: "controlLabel", children: children }), isOpen ? _jsx(DisclosureBasicExpanded, { "aria-hidden": "true" }) : _jsx(DisclosureBasicCollapsed, { "aria-hidden": "true" })] }) }));
 });
 /**
  * The target component for the Disclosure.

package/dist/src/FilterTrigger/FilterTrigger.js

@@ -13,6 +13,6 @@ import { filterTriggerSlotRecipe } from '../../styled-system/recipes';
 export const FilterTrigger = forwardRef(({ label, value, inputProps, className, enableClearButton = false, clearButtonProps, ...props }, ref) => {
     const classes = filterTriggerSlotRecipe();
     const displayContent = value ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-trigger-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-trigger-value", children: value })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-trigger-label", children: label }) }));
-    return (_jsxs("div", { className: cx(classes.wrapper, 'mfui-FilterTrigger__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: ref, type: "button", className: cx(classes.trigger, 'mfui-FilterTrigger__trigger', className), "data-selected": !!value, "data-mfui-has-clear-button": enableClearButton ? !!value : false, ...props, children: [_jsx("span", { className: cx(classes.content, 'mfui-FilterTrigger__content'), "data-mfui-content": "filter-trigger-display-value", children: displayContent }), _jsx("span", { className: cx(classes.dropdownIcon, 'mfui-FilterTrigger__dropdownIcon'), children: _jsx(DropdownIcon, {}) })] }) }), _jsx("input", { type: "hidden", ...inputProps, value: value }), enableClearButton && value ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterTrigger__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "filter-trigger-clear-button", onClick: clearButtonProps?.onClick }) })) : null] }));
+    return (_jsxs("div", { className: cx(classes.wrapper, 'mfui-FilterTrigger__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: ref, type: "button", className: cx(classes.trigger, 'mfui-FilterTrigger__trigger', className), "data-selected": !!value, "data-mfui-has-clear-button": enableClearButton ? !!value : false, ...props, children: [_jsx("span", { className: cx(classes.content, 'mfui-FilterTrigger__content'), "data-mfui-content": "filter-trigger-display-value", children: displayContent }), _jsx("span", { className: cx(classes.dropdownIcon, 'mfui-FilterTrigger__dropdownIcon'), children: _jsx(DropdownIcon, { "aria-hidden": "true" }) })] }) }), _jsx("input", { type: "hidden", ...inputProps, value: value }), enableClearButton && value ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterTrigger__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "filter-trigger-clear-button", onClick: clearButtonProps?.onClick }) })) : null] }));
 });
 FilterTrigger.displayName = 'FilterTrigger';

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

@@ -8,8 +8,12 @@ type IconButtonCommonProps = {
      */
     outlined?: IconButtonSlotRecipeVariant['outlined'];
     /**
-     * Icon element to be rendered inside the button
-     * Only one element allowed
+     * Icon element to be rendered inside the button.
+     * Only one element (typically an SVG icon) is expected.
+     *
+     * The icon is not hidden from assistive technologies automatically.
+     * If the icon is decorative, hide it yourself (e.g. `aria-hidden="true"`)
+     * and provide an `aria-label` on IconButton itself to expose the accessible name.
      */
     children: React.ReactNode;
     /**

package/dist/src/MainNavigation/BaseMainNavigation.js

@@ -38,7 +38,7 @@ export function BaseMainNavigation({ className, featureShortcut, navigationItems
                             if (navigation.children) {
                                 return (_jsx(NestedNavigationItemRenderer, { navigation: navigation, originalIndex: index, classes: classes, InternalLinkTag: InternalLinkTag, isCollapsed: isCollapsed, openPopoverIndex: openPopoverIndex, setOpenPopoverIndex: setOpenPopoverIndex }, index));
                             }
-                            return (_jsx("li", { className: cx(classes.listItem, 'mfui-BaseMainNavigation__listItem'), children: _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
+                            return (_jsx("li", { className: cx(classes.listItem, 'mfui-BaseMainNavigation__listItem'), children: _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", { "aria-hidden": "true", 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));
                         }) }), navigationItems.some((navigation) => 'isGroupMenu' in navigation && navigation.isGroupMenu) && (_jsx("ul", { className: cx(classes.groupMenuList, 'mfui-BaseMainNavigation__groupMenuList'), children: navigationItems.map((navigation, index) => {
@@ -53,7 +53,7 @@ export function BaseMainNavigation({ className, featureShortcut, navigationItems
                                 return null;
                             }
                             const groupLabelId = `${navId}-group-label-${String(index)}`;
-                            return (_jsxs("div", { className: cx(classes.groupLabelSection, 'mfui-BaseMainNavigation__groupLabelSection'), children: [_jsx("div", { className: cx(classes.groupLabel, 'mfui-BaseMainNavigation__groupLabel'), children: _jsx(Typography, { id: groupLabelId, variant: "condensedControlLabel", className: cx(classes.groupLabelText, 'mfui-BaseMainNavigation__groupLabelText'), children: navigation.label }) }), _jsx("ul", { "aria-labelledby": groupLabelId, 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.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "aria-current": child.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: child.icon }), _jsx(Typography, { variant: "controlLabel", children: child.label })] }), child.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-BaseMainNavigation__lockIcon'), "aria-label": child.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, child.statusSlot && child.locked !== true ? child.statusSlot : null] }) }) }) }, childIndex))) })] }, index));
+                            return (_jsxs("div", { className: cx(classes.groupLabelSection, 'mfui-BaseMainNavigation__groupLabelSection'), children: [_jsx("div", { className: cx(classes.groupLabel, 'mfui-BaseMainNavigation__groupLabel'), children: _jsx(Typography, { id: groupLabelId, variant: "condensedControlLabel", className: cx(classes.groupLabelText, 'mfui-BaseMainNavigation__groupLabelText'), children: navigation.label }) }), _jsx("ul", { "aria-labelledby": groupLabelId, 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.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "aria-current": child.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", { "aria-hidden": "true", className: cx(classes.listItemAnchorIcon, 'mfui-BaseMainNavigation__listItemAnchorIcon'), children: child.icon }), _jsx(Typography, { variant: "controlLabel", children: child.label })] }), child.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-BaseMainNavigation__lockIcon'), "aria-label": child.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, child.statusSlot && child.locked !== true ? child.statusSlot : null] }) }) }) }, childIndex))) })] }, 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] }));
 }
 /**
@@ -66,7 +66,7 @@ function NestedNavigationItemRenderer({ navigation, originalIndex, classes, Inte
     const hasCurrentChildren = navigation.children.some((child) => child.isCurrent);
     return (_jsx("li", { className: cx(classes.listItem, 'mfui-BaseMainNavigation__listItem'), "data-mfui-popover-portal-target-id": popoverPortalTargetId, children: isCollapsed ? (_jsx(CollapsedNestedNavigationItem, { navigation: navigation, classes: classes, InternalLinkTag: InternalLinkTag, hasCurrentChildren: hasCurrentChildren, popoverPortalTargetId: popoverPortalTargetId, isOpen: openPopoverIndex === originalIndex, onOpenChange: (isOpen) => {
                 setOpenPopoverIndex(isOpen ? originalIndex : null);
-            } })) : (_jsxs("details", { open: ('isOpenByDefault' in navigation && navigation.isOpenByDefault) || hasCurrentChildren, 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))) })] })) }));
+            } })) : (_jsxs("details", { open: ('isOpenByDefault' in navigation && navigation.isOpenByDefault) || hasCurrentChildren, 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", { "aria-hidden": "true", 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))) })] })) }));
 }
 /**
  * The component for displaying nested navigation in collapsed state with popover.
@@ -87,7 +87,7 @@ function CollapsedNestedNavigationItem({ navigation, classes, InternalLinkTag, h
     };
     return (_jsx(Popover, { enableAutoFocusOnPopover: false, enableAutoFocusOnTrigger: false, open: isOpen, targetDOMNode: document.querySelector(`[data-mfui-popover-portal-target-id="${popoverPortalTargetId}"]`), allowedPlacements: ['right-start', 'right', 'right-end'], contentProps: {
             tabIndex: -1,
-        }, renderTrigger: ({ setTriggerRef }) => (_jsx(Tooltip, { className: cx(classes.listItemTooltip, 'mfui-BaseMainNavigation__listItemTooltip'), content: navigation.label, disabled: isOpen, placement: "right", children: _jsx(FocusIndicator, { position: "inside", children: _jsx("button", { ref: setTriggerRef, type: "button", className: cx(classes.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "data-mfui-current": hasCurrentChildren ? 'page' : undefined, "aria-current": hasCurrentChildren ? true : undefined, "aria-label": navigation.label, onClick: handleClick, onKeyDown: handleKeyDown, children: _jsx("div", { className: cx(classes.labelGroup, 'mfui-BaseMainNavigation__labelGroup'), children: _jsx("div", { className: cx(classes.iconAndLabel, 'mfui-BaseMainNavigation__iconAndLabel'), children: _jsx("div", { className: cx(classes.listItemAnchorIcon, 'mfui-BaseMainNavigation__listItemAnchorIcon'), children: navigation.icon }) }) }) }) }) })), renderContent: () => (_jsx("div", { ref: popoverContentRef, className: cx(classes.popoverChildrenList, 'mfui-BaseMainNavigation__popoverChildrenList'), tabIndex: -1, children: navigation.children.map((child, childIndex) => (_jsx("div", { 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, onClick: () => {
+        }, renderTrigger: ({ setTriggerRef }) => (_jsx(Tooltip, { className: cx(classes.listItemTooltip, 'mfui-BaseMainNavigation__listItemTooltip'), content: navigation.label, disabled: isOpen, placement: "right", children: _jsx(FocusIndicator, { position: "inside", children: _jsx("button", { ref: setTriggerRef, type: "button", className: cx(classes.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "data-mfui-current": hasCurrentChildren ? 'page' : undefined, "aria-current": hasCurrentChildren ? true : undefined, "aria-label": navigation.label, onClick: handleClick, onKeyDown: handleKeyDown, children: _jsx("div", { className: cx(classes.labelGroup, 'mfui-BaseMainNavigation__labelGroup'), children: _jsx("div", { className: cx(classes.iconAndLabel, 'mfui-BaseMainNavigation__iconAndLabel'), children: _jsx("div", { "aria-hidden": "true", className: cx(classes.listItemAnchorIcon, 'mfui-BaseMainNavigation__listItemAnchorIcon'), children: navigation.icon }) }) }) }) }) })), renderContent: () => (_jsx("div", { ref: popoverContentRef, className: cx(classes.popoverChildrenList, 'mfui-BaseMainNavigation__popoverChildrenList'), tabIndex: -1, children: navigation.children.map((child, childIndex) => (_jsx("div", { 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, onClick: () => {
                             onOpenChange(false);
                         }, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })), onOpenStateChanged: onOpenChange }));
 }

package/dist/src/MainNavigation/NarrowViewportMainNavigation.js

@@ -54,13 +54,13 @@ export const NarrowViewportMainNavigation = forwardRef(({ className, featureShor
                                             return null;
                                         }
                                         return (_jsx("li", { className: cx(classes.listItem, 'mfui-NarrowViewportMainNavigation__listItem'), children: navigation.children ? (_jsxs("details", { open: ('isOpenByDefault' in navigation && 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, onClick: handleCloseMainNavigation, 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));
+                                                    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", { "aria-hidden": "true", 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, onClick: handleCloseMainNavigation, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-NarrowViewportMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-NarrowViewportMainNavigation__iconAndLabel'), children: [_jsx("div", { "aria-hidden": "true", 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));
                                     }) }), navigationItems.map((navigation, index) => {
                                     const isGroupLabel = navigation.children && 'isGroupLabel' in navigation && navigation.isGroupLabel;
                                     if (!isGroupLabel) {
                                         return null;
                                     }
                                     const groupLabelId = `${navId}-group-label-${String(index)}`;
-                                    return (_jsxs("div", { className: cx(classes.groupLabelSection, 'mfui-NarrowViewportMainNavigation__groupLabelSection'), children: [_jsx("div", { className: cx(classes.groupLabel, 'mfui-NarrowViewportMainNavigation__groupLabel'), children: _jsx(Typography, { id: groupLabelId, variant: "condensedControlLabel", className: cx(classes.groupLabelText, 'mfui-NarrowViewportMainNavigation__groupLabelText'), children: navigation.label }) }), _jsx("ul", { "aria-labelledby": groupLabelId, 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.listItemAnchor, 'mfui-NarrowViewportMainNavigation__listItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, 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: child.icon }), _jsx(Typography, { variant: "controlLabel", children: child.label })] }), child.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-NarrowViewportMainNavigation__lockIcon'), "aria-label": child.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, child.statusSlot && child.locked !== true ? child.statusSlot : null] }) }) }) }, childIndex))) })] }, index));
+                                    return (_jsxs("div", { className: cx(classes.groupLabelSection, 'mfui-NarrowViewportMainNavigation__groupLabelSection'), children: [_jsx("div", { className: cx(classes.groupLabel, 'mfui-NarrowViewportMainNavigation__groupLabel'), children: _jsx(Typography, { id: groupLabelId, variant: "condensedControlLabel", className: cx(classes.groupLabelText, 'mfui-NarrowViewportMainNavigation__groupLabelText'), children: navigation.label }) }), _jsx("ul", { "aria-labelledby": groupLabelId, 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.listItemAnchor, 'mfui-NarrowViewportMainNavigation__listItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-NarrowViewportMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-NarrowViewportMainNavigation__iconAndLabel'), children: [_jsx("div", { "aria-hidden": "true", className: cx(classes.listItemAnchorIcon, 'mfui-NarrowViewportMainNavigation__listItemAnchorIcon'), children: child.icon }), _jsx(Typography, { variant: "controlLabel", children: child.label })] }), child.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-NarrowViewportMainNavigation__lockIcon'), "aria-label": child.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, child.statusSlot && child.locked !== true ? child.statusSlot : null] }) }) }) }, childIndex))) })] }, index));
                                 })] })] })] }) }));
 });

package/dist/src/MultipleSelectBox/MultipleSelectBox.js

@@ -315,13 +315,14 @@ placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, val
     ]);
     // Render infinite scroll loading indicator
     const renderInfiniteScrollLoading = useCallback(() => isInfiniteScrollLoading && enableInfiniteScroll ? (_jsx("div", { className: cx(classes.infiniteScrollLoading, 'mfui-MultipleSelectBox__infiniteScrollLoading'), children: _jsx(ProgressIndicator, {}) })) : null, [isInfiniteScrollLoading, enableInfiniteScroll, classes.infiniteScrollLoading]);
-    const searchNode = enableSearchOptions ? (_jsx(SearchBox, { ref: searchInputRef, enableClearButton: true, value: searchText, textBoxSize: "small", autoComplete: "off", onChange: onSearchTextChange, ...searchBoxProps })) : null;
+    const searchNode = enableSearchOptions ? (_jsx(SearchBox, { ref: searchInputRef, enableClearButton: true, value: searchText, textBoxSize: "small", autoComplete: "off", "aria-label": "\u691C\u7D22\u3059\u308B", onChange: onSearchTextChange, ...searchBoxProps })) : null;
     const allOptionsControlsNode = enableAllOptionsControls ? (_jsxs(HStack, { justifyContent: "space-between", children: [_jsx(Button, { ref: selectAllButtonRef, size: "small", onClick: handleSelectAll, children: selectAllButtonProps?.label ?? 'すべて選択' }), _jsx(Button, { ref: clearAllButtonRef, size: "small", onClick: handleClearAll, children: clearAllButtonProps?.label ?? 'すべて解除' })] })) : null;
     const selectedCountNode = enableApplyControls || showSelectedCount ? (_jsx(Typography, { variant: "body", color: "neutral.600", children: enableApplyControls
             ? (selectedCountProps?.render?.(temporaryValues.size) ?? `${String(temporaryValues.size)}件選択中`)
             : (selectedCountProps?.render?.(localSelectedValuesSet.size) ??
                 `${String(localSelectedValuesSet.size)}件選択中`) })) : null;
     const applyControlsNode = enableApplyControls ? (_jsxs(HStack, { gap: "horizontal.0-1of2", children: [_jsx(Button, { ref: cancelButtonRef, size: "small", priority: "secondary", onClick: handleCancelButtonClick, children: cancelButtonProps?.label ?? 'キャンセル' }), _jsx(Button, { ref: applyButtonRef, size: "small", priority: "primary", onClick: handleApplyButtonClick, children: applyButtonProps?.label ?? '適用' })] })) : null;
+    const resolvedNotFoundMessage = typeof notFoundMessage === 'function' ? notFoundMessage(searchText.trim()) : notFoundMessage;
     const optionsNode = (_jsxs("div", { ref: scrollWrapperRef, className: cx(classes.scrollWrapper, 'mfui-MultipleSelectBox__scrollWrapper'), onScroll: enableInfiniteScroll ? handleInfiniteScroll : undefined, children: [_jsx("ul", { ref: listBoxRef, role: "listbox", id: listBoxId, className: cx(classes.listBox, 'mfui-MultipleSelectBox__listBox'), tabIndex: -1, style: isVirtualized && totalSize > 0
                     ? {
                         height: `${String(totalSize)}px`,
@@ -338,10 +339,10 @@ placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, val
                                 !isVirtualized && renderInfiniteScrollError(),
                             ].filter(Boolean)
                             : [
-                                _jsx("li", { className: cx(classes.emptyMessage, 'mfui-MultipleSelectBox__emptyMessage'), children: _jsx(Typography, { variant: "body", children: enableSearchOptions && searchText && notFoundMessage
-                                            ? notFoundMessage
+                                _jsx("li", { className: cx(classes.emptyMessage, 'mfui-MultipleSelectBox__emptyMessage'), children: _jsx(Typography, { variant: "body", children: enableSearchOptions && searchText && resolvedNotFoundMessage
+                                            ? resolvedNotFoundMessage
                                             : options.length > 0
-                                                ? notFoundMessage
+                                                ? resolvedNotFoundMessage
                                                 : emptyMessage }) }, "empty"),
                                 !isVirtualized && renderInfiniteScrollError(),
                             ].filter(Boolean) }), isVirtualized ? renderInfiniteScrollLoading() : null, isVirtualized ? renderInfiniteScrollError('div') : null] }));

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

@@ -398,12 +398,23 @@ export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, Additio
     enableSearchOptions?: boolean;
     /**
      * The message to be displayed when the options are not found.
+     *
+     * Pass a function to include the current search text in the message,
+     * as recommended by the design guidelines.
+     *
+     * @example
+     * ```tsx
+     * <MultipleSelectBox notFoundMessage={(searchText) => `${searchText}を含むオプションがありません。`} />
+     * ```
      */
-    notFoundMessage?: string;
+    notFoundMessage?: string | ((searchText: string) => React.ReactNode);
     /**
      * The properties for the SearchBox component.
+     *
+     * Pass `aria-label` to override the search input's default
+     * accessible name (`検索する`).
      */
-    searchBoxProps?: Pick<SearchBoxProps, 'clearButtonProps' | 'placeholder' | 'invalid'>;
+    searchBoxProps?: Pick<SearchBoxProps, 'clearButtonProps' | 'placeholder' | 'invalid' | 'aria-label'>;
     /**
      * The properties for the option panel element.
      *

package/dist/src/MultipleSelectBox/MultipleSelectBoxTrigger/MultipleSelectBoxTrigger.js

@@ -48,6 +48,6 @@ placeholder, renderDisplayValue, updateSelectedValues, clearButtonProps, disable
         .map((option) => option.value)
         .filter((v) => v != null)
         .map(String);
-    return (_jsx(FocusIndicator, { children: _jsxs("div", { ref: wrapperRef, className: cx(classes.wrapper, 'mfui-MultipleSelectBoxTrigger__wrapper', triggerWrapperProps?.className), children: [_jsx("button", { ref: mergeRefs(ref, triggerRef), type: "button", role: "combobox", "aria-controls": listBoxId, "aria-expanded": isOptionPanelOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, value: selectedValues, disabled: disabled, onKeyDown: onKeyDown, onBlur: onBlur, ...rest, ...triggerProps, className: cx(classes.trigger, 'mfui-MultipleSelectBoxTrigger__trigger', triggerProps?.className) }), _jsx("input", { type: "hidden", name: name, value: selectedValues }), _jsx("div", { className: cx(classes.displayValues, 'mfui-MultipleSelectBoxTrigger__displayValues'), "data-mfui-content": "multiple-select-box-trigger-display-values", children: renderer() }), selectedOptions.length > 0 && !disabled && !disableClearButton ? (_jsx("div", { className: cx(classes.clearButtonContainer, 'mfui-MultipleSelectBoxTrigger__clearButtonContainer'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', className: cx(classes.clearButton, 'mfui-MultipleSelectBoxTrigger__clearButton'), "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "multiple-select-box-clear-button", onClick: handleClearValue }) })) : null, _jsx("div", { className: cx(classes.dropdownIconContainer, 'mfui-MultipleSelectBoxTrigger__dropdownIconContainer'), children: _jsx(DropdownIcon, { className: cx(classes.dropdownIcon, 'mfui-MultipleSelectBoxTrigger__dropdownIcon') }) })] }) }));
+    return (_jsx(FocusIndicator, { children: _jsxs("div", { ref: wrapperRef, className: cx(classes.wrapper, 'mfui-MultipleSelectBoxTrigger__wrapper', triggerWrapperProps?.className), children: [_jsx("button", { ref: mergeRefs(ref, triggerRef), type: "button", role: "combobox", "aria-controls": listBoxId, "aria-expanded": isOptionPanelOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, value: selectedValues, disabled: disabled, onKeyDown: onKeyDown, onBlur: onBlur, ...rest, ...triggerProps, className: cx(classes.trigger, 'mfui-MultipleSelectBoxTrigger__trigger', triggerProps?.className) }), _jsx("input", { type: "hidden", name: name, value: selectedValues }), _jsx("div", { className: cx(classes.displayValues, 'mfui-MultipleSelectBoxTrigger__displayValues'), "data-mfui-content": "multiple-select-box-trigger-display-values", children: renderer() }), selectedOptions.length > 0 && !disabled && !disableClearButton ? (_jsx("div", { className: cx(classes.clearButtonContainer, 'mfui-MultipleSelectBoxTrigger__clearButtonContainer'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', className: cx(classes.clearButton, 'mfui-MultipleSelectBoxTrigger__clearButton'), "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "multiple-select-box-clear-button", onClick: handleClearValue }) })) : null, _jsx("div", { className: cx(classes.dropdownIconContainer, 'mfui-MultipleSelectBoxTrigger__dropdownIconContainer'), children: _jsx(DropdownIcon, { "aria-hidden": "true", className: cx(classes.dropdownIcon, 'mfui-MultipleSelectBoxTrigger__dropdownIcon') }) })] }) }));
 }
 export const MultipleSelectBoxTrigger = forwardRef(MultipleSelectBoxTriggerInner);

package/dist/src/Pagination/PagePicker/PagePicker.js

@@ -12,7 +12,7 @@ export function PagePicker({ currentPageNumber, totalPages, prevButtonProps, pag
     const classes = pagePickerSlotRecipe();
     return (_jsxs("div", { className: cx(classes.root, 'mfui-PagePicker__root'), children: [_jsx(IconButton, { className: cx(classes.prevButton, 'mfui-PagePicker__prevButton'), disabled: currentPageNumber === 1, "aria-label": prevButtonProps?.['aria-label'] ?? '前のページへ戻る', onClick: () => {
                     onPageChange?.(currentPageNumber - 1);
-                }, children: _jsx(PickerBefore, {}) }), _jsx("div", { className: cx(classes.pageSelect, 'mfui-PagePicker__pageSelect'), children: _jsx(SelectBox, { size: "small", triggerProps: {
+                }, children: _jsx(PickerBefore, { "aria-hidden": "true" }) }), _jsx("div", { className: cx(classes.pageSelect, 'mfui-PagePicker__pageSelect'), children: _jsx(SelectBox, { size: "small", triggerProps: {
                         'aria-label': pageSelectBoxProps?.['aria-label'] ?? 'ページを選択する',
                     }, value: { value: currentPageNumber.toString(), label: currentPageNumber.toString() }, options: Array.from({ length: totalPages }).map((_, index) => ({
                         value: (index + 1).toString(),
@@ -21,5 +21,5 @@ export function PagePicker({ currentPageNumber, totalPages, prevButtonProps, pag
                         onPageChange?.(Number(option?.value));
                     } }) }), _jsx(Typography, { className: cx(classes.separator, 'mfui-PagePicker__separator'), children: "/" }), _jsxs(Typography, { className: cx(classes.totalPages, 'mfui-PagePicker__totalPages'), children: [totalPages, pageSuffixLabel] }), _jsx(IconButton, { className: cx(classes.nextButton, 'mfui-PagePicker__nextButton'), "aria-label": nextButtonProps?.['aria-label'] ?? '次のページへ進む', disabled: currentPageNumber === totalPages, onClick: () => {
                     onPageChange?.(currentPageNumber + 1);
-                }, children: _jsx(PickerAfter, {}) })] }));
+                }, children: _jsx(PickerAfter, { "aria-hidden": "true" }) })] }));
 }

package/dist/src/SearchBox/SearchBox.d.ts

@@ -1,6 +1,9 @@
 /**
  * The component wrapped the TextBox component with Search icon.
  * Some props in the TextBox component are not supported.
+ *
+ * The input has no default accessible name. Provide one with `aria-label`
+ * or associate an external label with `aria-labelledby`.
  */
 export declare const SearchBox: import("react").ForwardRefExoticComponent<Omit<import("..").TextBoxProps, "prefixSlot" | "suffixSlot"> & {
     normalizeFullWidth?: boolean;

package/dist/src/SearchBox/SearchBox.js

@@ -7,6 +7,9 @@ import { normalizeFullWidth } from '../utilities/string/normalizeFullWidth';
 /**
  * The component wrapped the TextBox component with Search icon.
  * Some props in the TextBox component are not supported.
+ *
+ * The input has no default accessible name. Provide one with `aria-label`
+ * or associate an external label with `aria-labelledby`.
  */
 export const SearchBox = forwardRef(({ className, normalizeFullWidth: shouldNormalizeFullWidth = false, onChange, ...rest }, ref) => {
     const handleChange = useCallback((event) => {
@@ -18,5 +21,5 @@ export const SearchBox = forwardRef(({ className, normalizeFullWidth: shouldNorm
         }
         onChange?.(event);
     }, [shouldNormalizeFullWidth, onChange]);
-    return (_jsx(TextBox, { ref: ref, prefixSlot: _jsx(Search, {}), className: cx('mfui-SearchBox__root', className), onChange: handleChange, ...rest }));
+    return (_jsx(TextBox, { ref: ref, prefixSlot: _jsx(Search, { "aria-hidden": "true" }), className: cx('mfui-SearchBox__root', className), onChange: handleChange, ...rest }));
 });

package/dist/src/SelectBox/SelectBox.js

@@ -208,7 +208,7 @@ export const SelectBox = forwardRef((props, ref) => {
         }
         return (_jsx(Typography, { variant: "controlLabel", className: cx(classes.placeholder, 'mfui-SelectBox__placeholder'), children: placeholder }));
     };
-    const searchNode = enableSearchOptions ? (_jsx("div", { className: cx(classes.menuHeader, 'mfui-SelectBox__menuHeader'), children: _jsx(SearchBox, { ref: searchInputRef, enableClearButton: true, value: searchText, textBoxSize: "small", autoComplete: "off", onChange: onSearchTextChange, ...searchBoxProps }) })) : null;
+    const searchNode = enableSearchOptions ? (_jsx("div", { className: cx(classes.menuHeader, 'mfui-SelectBox__menuHeader'), children: _jsx(SearchBox, { ref: searchInputRef, enableClearButton: true, value: searchText, textBoxSize: "small", autoComplete: "off", "aria-label": "\u691C\u7D22\u3059\u308B", onChange: onSearchTextChange, ...searchBoxProps }) })) : null;
     // Render virtualized items - extracted for better maintainability
     const renderVirtualizedItems = useCallback(() => virtualItems.map((virtualItem) => {
         const virtualizedItem = virtualizedItems[virtualItem.index];
@@ -278,11 +278,14 @@ export const SelectBox = forwardRef((props, ref) => {
         createKeyDownHandler,
     ]);
     // Render empty message - extracted for better maintainability
-    const renderEmptyMessage = useCallback(() => (_jsx("li", { className: cx(classes.emptyMessage, 'mfui-SelectBox__emptyMessage'), children: _jsx(Typography, { variant: "body", children: enableSearchOptions && searchText && notFoundMessage
-                ? notFoundMessage
-                : options.length > 0
-                    ? notFoundMessage
-                    : emptyMessage }) }, "empty-message")), [classes.emptyMessage, enableSearchOptions, searchText, notFoundMessage, options.length, emptyMessage]);
+    const renderEmptyMessage = useCallback(() => {
+        const resolvedNotFoundMessage = typeof notFoundMessage === 'function' ? notFoundMessage(searchText.trim()) : notFoundMessage;
+        return (_jsx("li", { className: cx(classes.emptyMessage, 'mfui-SelectBox__emptyMessage'), children: _jsx(Typography, { variant: "body", children: enableSearchOptions && searchText && resolvedNotFoundMessage
+                    ? resolvedNotFoundMessage
+                    : options.length > 0
+                        ? resolvedNotFoundMessage
+                        : emptyMessage }) }, "empty-message"));
+    }, [classes.emptyMessage, enableSearchOptions, searchText, notFoundMessage, options.length, emptyMessage]);
     // Render infinite scroll error message with retry button
     const renderInfiniteScrollError = useCallback((as = 'li') => {
         if (!infiniteScrollError)

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

@@ -334,12 +334,23 @@ export type SelectBoxProps<T extends AllowedValueTypes = string, AdditionalProps
     enableSearchOptions?: boolean;
     /**
      * The message to be displayed when the options are not found.
+     *
+     * Pass a function to include the current search text in the message,
+     * as recommended by the design guidelines.
+     *
+     * @example
+     * ```tsx
+     * <SelectBox notFoundMessage={(searchText) => `${searchText}を含むオプションがありません。`} />
+     * ```
      */
-    notFoundMessage?: string;
+    notFoundMessage?: string | ((searchText: string) => React.ReactNode);
     /**
      * The properties for the SearchBox component.
+     *
+     * Pass `aria-label` to override the search input's default
+     * accessible name (`検索する`).
      */
-    searchBoxProps?: Pick<SearchBoxProps, 'clearButtonProps' | 'placeholder'>;
+    searchBoxProps?: Pick<SearchBoxProps, 'clearButtonProps' | 'placeholder' | 'aria-label'>;
     /**
      * Flag to indicate loading state of the options.
      * When true, the SelectBox will display skeleton placeholders

package/dist/src/Sidebar/Sidebar.d.ts

@@ -17,7 +17,7 @@ declare function SidebarBase({ className, logoSlot, mainNavigationItems, extraNa
  * The following composition components are provided as sub-components:
  * - `Sidebar.NavigationItem` — a single navigation item; `mainNavigationItems` renders these for you,
  *   but it can also be used directly inside `extraNavigationSlot`.
- * - `Sidebar.ServiceMenu` — the footer service menu trigger, intended to wrap a list of services.
+ * - `Sidebar.ServiceMenu` — the header service menu trigger, intended to wrap a list of services.
  * - `Sidebar.TenantMenu` — the footer tenant (business) name and its menu.
  * - `Sidebar.UserMenu` — the footer user (account) name and its menu.
  *

package/dist/src/Sidebar/Sidebar.js

@@ -15,12 +15,12 @@ function SidebarBase({ className, logoSlot, mainNavigationItems, extraNavigation
         defaultWidth,
         onWidthChange,
     });
-    return (_jsxs("div", { ref: rootRef, className: cx(classes.root, 'mfui-Sidebar__root', className), style: { width: `${String(width)}px` }, "data-mfui-dragging": isDragging ? true : undefined, children: [_jsx("header", { className: cx(classes.header, 'mfui-Sidebar__header'), children: _jsx("div", { className: cx(classes.leftPane, 'mfui-Sidebar__leftPane'), children: _jsx("div", { className: cx(classes.logo, 'mfui-Sidebar__logo'), children: logoSlot }) }) }), _jsxs("div", { className: cx(classes.navigationWrapper, 'mfui-Sidebar__navigationWrapper'), children: [mainNavigationItems && mainNavigationItems.length > 0 ? (_jsx("nav", { "aria-label": mainNavigationLabel, className: cx(classes.mainNavigation, 'mfui-Sidebar__mainNavigation'), children: _jsx("ul", { className: cx(classes.navigationList, 'mfui-Sidebar__navigationList'), children: mainNavigationItems.map((item, index) => {
+    return (_jsxs("div", { ref: rootRef, className: cx(classes.root, 'mfui-Sidebar__root', className), style: { width: `${String(width)}px` }, "data-mfui-dragging": isDragging ? true : undefined, children: [_jsx("header", { className: cx(classes.header, 'mfui-Sidebar__header'), children: _jsxs("div", { className: cx(classes.leftPane, 'mfui-Sidebar__leftPane'), children: [serviceMenuSlot ? (_jsx("div", { className: cx(classes.serviceMenu, 'mfui-Sidebar__serviceMenu'), children: serviceMenuSlot })) : null, _jsx("div", { className: cx(classes.logo, 'mfui-Sidebar__logo'), children: logoSlot })] }) }), _jsxs("div", { className: cx(classes.navigationWrapper, 'mfui-Sidebar__navigationWrapper'), children: [mainNavigationItems && mainNavigationItems.length > 0 ? (_jsx("nav", { "aria-label": mainNavigationLabel, className: cx(classes.mainNavigation, 'mfui-Sidebar__mainNavigation'), children: _jsx("ul", { className: cx(classes.navigationList, 'mfui-Sidebar__navigationList'), children: mainNavigationItems.map((item, index) => {
                                 if ('type' in item) {
                                     return (_jsx("li", { "aria-hidden": "true", className: cx(classes.navigationDivider, 'mfui-Sidebar__navigationDivider') }, index));
                                 }
                                 return _jsx(SidebarNavigationItem, { ...item }, index);
-                            }) }) })) : null, extraNavigationSlot ? (_jsx("nav", { "aria-label": extraNavigationLabel, className: cx(classes.extraNavigation, 'mfui-Sidebar__extraNavigation'), children: extraNavigationSlot })) : null] }), _jsxs("div", { className: cx(classes.footer, 'mfui-Sidebar__footer'), children: [footerSlot ? _jsx("div", { className: cx(classes.footerSlot, 'mfui-Sidebar__footerSlot'), children: footerSlot }) : null, serviceMenuSlot ? (_jsx("div", { className: cx(classes.serviceMenu, 'mfui-Sidebar__serviceMenu'), children: serviceMenuSlot })) : null, _jsx("div", { className: cx(classes.footerIconMenu, 'mfui-Sidebar__footerIconMenu'), children: footerIconMenuSlot }), tenantSlot || userSlot ? (_jsxs("div", { className: cx(classes.footerUserIdMenu, 'mfui-Sidebar__footerUserIdMenu'), children: [tenantSlot ? (_jsx("div", { className: cx(classes.footerUserIdMenuItem, 'mfui-Sidebar__footerUserIdMenuItem'), children: tenantSlot })) : null, userSlot ? (_jsx("div", { className: cx(classes.footerUserIdMenuItem, 'mfui-Sidebar__footerUserIdMenuItem'), children: userSlot })) : null] })) : null] }), _jsx("div", { "data-mfui-handle": true, "data-mfui-dragging": isDragging ? true : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": resizeHandleLabel, "aria-valuenow": width, "aria-valuemin": resolvedMinWidth, "aria-valuemax": resolvedMaxWidth, 
+                            }) }) })) : null, extraNavigationSlot ? (_jsx("nav", { "aria-label": extraNavigationLabel, className: cx(classes.extraNavigation, 'mfui-Sidebar__extraNavigation'), children: extraNavigationSlot })) : null] }), _jsxs("div", { className: cx(classes.footer, 'mfui-Sidebar__footer'), children: [footerSlot ? _jsx("div", { className: cx(classes.footerSlot, 'mfui-Sidebar__footerSlot'), children: footerSlot }) : null, _jsx("div", { className: cx(classes.footerIconMenu, 'mfui-Sidebar__footerIconMenu'), children: footerIconMenuSlot }), tenantSlot || userSlot ? (_jsxs("div", { className: cx(classes.footerUserIdMenu, 'mfui-Sidebar__footerUserIdMenu'), children: [tenantSlot ? (_jsx("div", { className: cx(classes.footerUserIdMenuItem, 'mfui-Sidebar__footerUserIdMenuItem'), children: tenantSlot })) : null, userSlot ? (_jsx("div", { className: cx(classes.footerUserIdMenuItem, 'mfui-Sidebar__footerUserIdMenuItem'), children: userSlot })) : null] })) : null] }), _jsx("div", { "data-mfui-handle": true, "data-mfui-dragging": isDragging ? true : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": resizeHandleLabel, "aria-valuenow": width, "aria-valuemin": resolvedMinWidth, "aria-valuemax": resolvedMaxWidth, 
                 // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
                 tabIndex: 0, className: cx(classes.handle, 'mfui-Sidebar__handle'), onPointerDown: handlePointerDown, onKeyDown: handleKeyDown })] }));
 }
@@ -37,7 +37,7 @@ function SidebarBase({ className, logoSlot, mainNavigationItems, extraNavigation
  * The following composition components are provided as sub-components:
  * - `Sidebar.NavigationItem` — a single navigation item; `mainNavigationItems` renders these for you,
  *   but it can also be used directly inside `extraNavigationSlot`.
- * - `Sidebar.ServiceMenu` — the footer service menu trigger, intended to wrap a list of services.
+ * - `Sidebar.ServiceMenu` — the header service menu trigger, intended to wrap a list of services.
  * - `Sidebar.TenantMenu` — the footer tenant (business) name and its menu.
  * - `Sidebar.UserMenu` — the footer user (account) name and its menu.
  *

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

@@ -74,12 +74,12 @@ export type SidebarProps = {
      */
     extraNavigationSlot?: ReactNode;
     /**
-     * Elements to be displayed above the service menu in the footer.
+     * Elements to be displayed above the footer icon menu.
      * This slot accepts any content.
      */
     footerSlot?: ReactNode;
     /**
-     * Elements to be displayed as the service menu in the footer.
+     * Elements to be displayed as the service menu in the header, to the left of the logo.
      * Intended for a dropdown menu listing available services.
      */
     serviceMenuSlot: ReactNode;

package/dist/src/Sidebar/SidebarServiceMenu.d.ts

@@ -14,10 +14,9 @@ export type SidebarServiceMenuProps = {
     children: ReactNode;
 };
 /**
- * The service switcher menu shown in the Sidebar footer.
+ * The service switcher menu shown in the Sidebar header.
  *
- * It renders a navigation-link styled trigger (matching the sidebar navigation items) that opens a
- * dropdown of services. The trigger design and accessibility are fixed; pass the label, icon, and
- * menu items only.
+ * It renders an icon-only trigger with a tooltip that opens a dropdown of services.
+ * The trigger design and accessibility are fixed; pass the label, icon, and menu items only.
  */
 export declare function SidebarServiceMenu({ label, icon, children }: SidebarServiceMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/Sidebar/SidebarServiceMenu.js

@@ -1,20 +1,13 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DropdownMenu } from '../DropdownMenu';
+import { Tooltip } from '../Tooltip';
 /**
- * The service switcher menu shown in the Sidebar footer.
+ * The service switcher menu shown in the Sidebar header.
  *
- * It renders a navigation-link styled trigger (matching the sidebar navigation items) that opens a
- * dropdown of services. The trigger design and accessibility are fixed; pass the label, icon, and
- * menu items only.
+ * It renders an icon-only trigger with a tooltip that opens a dropdown of services.
+ * The trigger design and accessibility are fixed; pass the label, icon, and menu items only.
  */
 export function SidebarServiceMenu({ label, icon, children }) {
-    return (_jsx(DropdownMenu, { label: label, triggerProps: {
-            priority: 'tertiary',
-            size: 'small',
-            isDropdownTrigger: false,
-            leftIcon: icon,
-            // Styled via the `serviceMenu` slot's `& .mfui-Sidebar__serviceTrigger` descendant selector.
-            className: 'mfui-Sidebar__serviceTrigger',
-        }, menuPopoverProps: { allowedPlacements: ['top-start'] }, children: children }));
+    return (_jsx(Tooltip, { content: label, placement: "bottom", children: _jsx(DropdownMenu, { label: label, icon: icon, menuPopoverProps: { allowedPlacements: ['bottom-start'] }, children: children }) }));
 }

package/dist/src/SubNavigation/SubNavigation.js

@@ -42,7 +42,7 @@ const renderNavigationItem = (navigationItem, customLinkComponent, classes, nest
         return (_jsxs(_Fragment, { children: [_jsx(NavigationLink, { navigationItem: navigationItem, customLinkComponent: customLinkComponent, classes: classes, renderNavigationLabel: renderNavigationLabel }), _jsx(NestedNavigationList, { summarySlot: _jsx("div", { "data-mfui-content": "sub-navigation-disclosure-icon", className: cx(classes.disclosureIcon, 'mfui-SubNavigation__disclosureIcon'), children: _jsx(DisclosureBasicCollapsed, { "aria-label": label }) }), nestedNavigationItems: children, customLinkComponent: customLinkComponent, classes: classes, nestLevel: nestLevel + 1, renderNavigationLabel: renderNavigationLabel })] }));
     }
     // The the parent item will be rendered as a disclosure button with an icon.
-    return (_jsx(NestedNavigationList, { summarySlot: _jsxs(_Fragment, { children: [_jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes, renderNavigationLabel }), _jsx("div", { "data-mfui-content": "sub-navigation-disclosure-icon", className: cx(classes.disclosureIcon, 'mfui-SubNavigation__disclosureIcon'), children: _jsx(DisclosureBasicCollapsed, { "aria-label": "" }) })] }), nestedNavigationItems: children, customLinkComponent: customLinkComponent, classes: classes, nestLevel: nestLevel + 1, renderNavigationLabel: renderNavigationLabel }));
+    return (_jsx(NestedNavigationList, { summarySlot: _jsxs(_Fragment, { children: [_jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes, renderNavigationLabel }), _jsx("div", { "data-mfui-content": "sub-navigation-disclosure-icon", className: cx(classes.disclosureIcon, 'mfui-SubNavigation__disclosureIcon'), children: _jsx(DisclosureBasicCollapsed, { "aria-hidden": "true" }) })] }), nestedNavigationItems: children, customLinkComponent: customLinkComponent, classes: classes, nestLevel: nestLevel + 1, renderNavigationLabel: renderNavigationLabel }));
 };
 /**
  * This is a group of a text label, an optional icon, and a status.
@@ -59,7 +59,7 @@ function NavigationLabelGroup({ label, labelIcon, locked, lockIconProps, statusS
         }
         return null;
     };
-    return (_jsxs(_Fragment, { children: [labelIcon ? _jsx("div", { className: cx(classes.labelIcon, 'mfui-SubNavigation__labelIcon'), children: labelIcon }) : null, renderNavigationLabel ? (renderNavigationLabel(label)) : (_jsx(Typography, { variant: "strongControlLabel", className: cx(classes.label, 'mfui-SubNavigation__label'), children: label })), renderStatus()] }));
+    return (_jsxs(_Fragment, { children: [labelIcon ? (_jsx("div", { "aria-hidden": "true", className: cx(classes.labelIcon, 'mfui-SubNavigation__labelIcon'), children: labelIcon })) : null, renderNavigationLabel ? (renderNavigationLabel(label)) : (_jsx(Typography, { variant: "strongControlLabel", className: cx(classes.label, 'mfui-SubNavigation__label'), children: label })), renderStatus()] }));
 }
 /**
  * This is a link that has NavigationLabelGroup.

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

@@ -10,7 +10,7 @@ type DayCellSlotRecipeVariantMap = {
   [key in keyof DayCellSlotRecipeVariant]: Array<DayCellSlotRecipeVariant[key]>
 }
 
-type DayCellSlotRecipeSlot = "root" | "label"
+type DayCellSlotRecipeSlot = "root" | "label" | "srOnlyLabel"
 
 export type DayCellSlotRecipeVariantProps = {
   [key in keyof DayCellSlotRecipeVariant]?: ConditionalValue<DayCellSlotRecipeVariant[key]> | undefined

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

@@ -10,6 +10,10 @@ const dayCellSlotRecipeSlotNames = [
     [
         "label",
         "DayCell__label"
+    ],
+    [
+        "srOnlyLabel",
+        "DayCell__srOnlyLabel"
     ]
 ];
 const dayCellSlotRecipeSlotFns = /* @__PURE__ */ dayCellSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dayCellSlotRecipeDefaultVariants, getSlotCompoundVariant(dayCellSlotRecipeCompoundVariants, slotName))]);