@moneyforward/mfui-components 3.27.2 → 3.28.1

package/dist/src/Button/Button.js

@@ -50,5 +50,5 @@ type = 'button', href, customLinkComponent, ...props }, ref) => {
             ...props,
         };
     }, [isButton, classes.root, className, href, isDisabled, type, props, ref]);
-    return (_jsx(FocusIndicator, { children: _jsxs(Tag, { ...tagProps, children: [leftIcon ? _jsx("div", { className: cx(classes.leftIcon, 'mfui-Button__leftIcon'), children: leftIcon }) : null, loading ? (_jsx(ProgressIndicator, { className: cx(classes.loadingIndicator, 'mfui-Button__loadingIndicator') })) : null, typeof children === 'string' ? _jsx(Typography, { variant: typographyVariant, children: children }) : children, rightIcon ? _jsx("div", { className: cx(classes.rightIcon, 'mfui-Button__rightIcon'), children: rightIcon }) : null, isDropdownTrigger ? _jsx(Dropdown, { className: cx(classes.dropdownIcon, 'mfui-Button__dropdownIcon') }) : null] }) }));
+    return (_jsx(FocusIndicator, { children: _jsxs(Tag, { ...tagProps, children: [leftIcon ? _jsx("div", { className: cx(classes.leftIcon, 'mfui-Button__leftIcon'), children: leftIcon }) : null, loading ? (_jsx(ProgressIndicator, { className: cx(classes.loadingIndicator, 'mfui-Button__loadingIndicator') })) : null, typeof children === 'string' ? _jsx(Typography, { variant: typographyVariant, children: children }) : children, rightIcon ? _jsx("div", { className: cx(classes.rightIcon, 'mfui-Button__rightIcon'), children: rightIcon }) : null, isDropdownTrigger ? (_jsx(Dropdown, { "aria-hidden": "true", className: cx(classes.dropdownIcon, 'mfui-Button__dropdownIcon') })) : null] }) }));
 });

package/dist/src/CheckboxGroup/CheckboxGroup.js

@@ -41,5 +41,5 @@ export const CheckboxGroup = forwardRef(({ className, defaultValues, values, dis
         values: values ?? localValues,
         onChange: handleOnChange,
     }), [disabled, handleOnChange, localValues, name, values]);
-    return (_jsx("div", { ref: ref, ...props, className: cx(classes.root, 'mfui-CheckboxGroup__root', className), children: _jsx(CheckboxGroupContext.Provider, { value: contextValue, children: children }) }));
+    return (_jsx("div", { ref: ref, ...props, className: cx(classes.root, 'mfui-CheckboxGroup__root', className), role: "group", children: _jsx(CheckboxGroupContext.Provider, { value: contextValue, children: children }) }));
 });

package/dist/src/DataTable/DataTableCell/DataTableCell.js

@@ -11,7 +11,7 @@ import { useFixedColumns } from '../../utilities/dom/useFixedColumns';
 import { handleCheckboxCellClick } from '../utils/handleCheckbox';
 import { mergeRefs } from '../../utilities/dom/mergeRefs';
 export const DataTableCell = forwardRef(({ onClickCell, children, type = 'text', className, isRowHighlighted, disabled = false, depth = 0, columnIndex, disclosureIconProps: nestingIconProps, style, ...props }, ref) => {
-    const { size, leftFixedColumnIndex, rightFixedColumnIndex, loading, enableRowSelection } = useDataTableContext();
+    const { size, leftFixedColumnIndex, rightFixedColumnIndex, loading, enableRowSelection, layout } = useDataTableContext();
     const { cellRef, isFixedColumn, isEdgeFixedColumn, fixedPositionStyles } = useFixedColumns({
         enableRowSelection,
         columnIndex,
@@ -25,6 +25,7 @@ export const DataTableCell = forwardRef(({ onClickCell, children, type = 'text',
         fixedColumn: isFixedColumn,
         edgeFixedColumn: isEdgeFixedColumn,
         isCheckboxCell: enableRowSelection && columnIndex === 0,
+        layout,
     });
     const handleClick = (event) => {
         onClickCell?.(event);
@@ -63,9 +64,9 @@ function DisclosureIcon({ disclosureIconProps, classes, }) {
     }
     const disclosureIcon = (() => {
         if (disclosureIconProps.type === 'basic') {
-            return disclosureIconProps.isOpen ? _jsx(DisclosureBasicExpanded, {}) : _jsx(DisclosureBasicCollapsed, {});
+            return disclosureIconProps.isOpen ? (_jsx(DisclosureBasicExpanded, { "aria-hidden": "true" })) : (_jsx(DisclosureBasicCollapsed, { "aria-hidden": "true" }));
         }
-        return disclosureIconProps.isOpen ? _jsx(DisclosureNestedExpanded, {}) : _jsx(DisclosureNestedCollapsed, {});
+        return disclosureIconProps.isOpen ? (_jsx(DisclosureNestedExpanded, { "aria-hidden": "true" })) : (_jsx(DisclosureNestedCollapsed, { "aria-hidden": "true" }));
     })();
     return (_jsx("div", { className: cx(classes.disclosureIconWrapper, 'mfui-DataTableCell__disclosureIconWrapper', 
         /* TODO: Remove in v5.0.0 */ 'mfui-DataGridCell__disclosureIconWrapper'), children: disclosureIcon }));

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, 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/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/Popover/Popover.js

@@ -236,7 +236,9 @@ export function Popover({ renderTrigger, renderContent, open, onOpenStateChanged
         const scrollableAncestors = getOverflowAncestors(referenceElement).filter((ancestor) => ancestor instanceof Element);
         const popoverElement = refs.floating.current;
         const preventScroll = (event) => {
-            if (popoverElement?.contains(event.target))
+            // `event.target` is retargeted at shadow boundaries, so use the composed path
+            // to detect events coming from inside the popover across Shadow DOM.
+            if (popoverElement && event.composedPath().includes(popoverElement))
                 return;
             event.preventDefault();
         };

package/dist/src/SearchBox/SearchBox.js

@@ -18,5 +18,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

@@ -38,7 +38,7 @@ const SKELETON_ITEM_COUNT = 4;
 export const SelectBox = forwardRef((props, ref) => {
     const { id, triggerProps, clearButtonProps, enableClearButton = false, size, options = [], defaultValue, 
     // eslint-disable-next-line @typescript-eslint/no-deprecated
-    placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, onBlur, value, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, renderDisplayValue, renderOption, renderPopoverContent, enableAutoScrollToSelectedOption, popoverContentProps, popoverWrapperProps, onOpenStateChanged, showGroupOptionDivider, triggerWrapperProps, enableAutoUnmount = true, enableConstrainedPopoverWidth = false, enableVirtualization = false, virtualizationOptions, infiniteScroll, } = props;
+    placeholder, emptyMessage, disabled, invalid, required, targetDOMNode, name, onChange, onBlur, value, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, renderDisplayValue, renderOption, renderPopoverContent, enableAutoScrollToSelectedOption, popoverContentProps, popoverWrapperProps, onOpenStateChanged, showGroupOptionDivider, triggerWrapperProps, enableAutoUnmount = true, enableConstrainedPopoverWidth = false, enableVirtualization = false, virtualizationOptions, infiniteScroll, } = props;
     const classes = selectBoxSlotRecipe({ size, showGroupOptionDivider });
     const triggerRef = useRef(null);
     const listBoxId = useId();
@@ -328,7 +328,7 @@ export const SelectBox = forwardRef((props, ref) => {
     const hasSelectedValue = value !== undefined || localSelectedOption !== null;
     const showClearButton = enableClearButton && hasSelectedValue;
     // Use Popover's centralized blur handling instead of custom logic
-    return (_jsx(Popover, { open: isOptionPanelOpen, targetDOMNode: targetDOMNode, minWidth: popoverContentProps?.minWidth, maxHeight: popoverWrapperProps?.maxHeight, allowedPlacements: popoverContentProps?.allowedPlacements, enableConstrainedContentWidth: enableConstrainedPopoverWidth, renderContent: () => (_jsx("div", { ref: optionPanelRef, id: listBoxId, className: cx(classes.optionPanel, 'mfui-SelectBox__optionPanel', popoverContentProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: renderPopoverContent ? (renderPopoverContent({ searchNode, optionsNode })) : (_jsxs(_Fragment, { children: [searchNode, optionsNode] })) })), renderTrigger: ({ setTriggerRef, togglePopover, isPopoverOpen, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, ...triggerWrapperProps, className: cx(classes.triggerWrapper, 'mfui-SelectBox__triggerWrapper', triggerWrapperProps?.className), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", disabled: disabled, "aria-label": triggerProps?.['aria-label'], "aria-controls": listBoxId, "aria-expanded": isPopoverOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, className: cx(classes.trigger, 'mfui-SelectBox__trigger', triggerProps?.className), "data-placeholder": !!placeholder && !localSelectedOption, "data-selected": !!localSelectedOption, "data-mfui-has-clear-button": showClearButton, onClick: togglePopover, onKeyDown: (event) => {
+    return (_jsx(Popover, { open: isOptionPanelOpen, targetDOMNode: targetDOMNode, minWidth: popoverContentProps?.minWidth, maxHeight: popoverWrapperProps?.maxHeight, allowedPlacements: popoverContentProps?.allowedPlacements, enableConstrainedContentWidth: enableConstrainedPopoverWidth, renderContent: () => (_jsx("div", { ref: optionPanelRef, id: listBoxId, className: cx(classes.optionPanel, 'mfui-SelectBox__optionPanel', popoverContentProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: renderPopoverContent ? (renderPopoverContent({ searchNode, optionsNode })) : (_jsxs(_Fragment, { children: [searchNode, optionsNode] })) })), renderTrigger: ({ setTriggerRef, togglePopover, isPopoverOpen, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, ...triggerWrapperProps, className: cx(classes.triggerWrapper, 'mfui-SelectBox__triggerWrapper', triggerWrapperProps?.className), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", disabled: disabled, "aria-label": triggerProps?.['aria-label'], "aria-controls": listBoxId, "aria-expanded": isPopoverOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, "aria-required": required, className: cx(classes.trigger, 'mfui-SelectBox__trigger', triggerProps?.className), "data-placeholder": !!placeholder && !localSelectedOption, "data-selected": !!localSelectedOption, "data-mfui-has-clear-button": showClearButton, onClick: togglePopover, onKeyDown: (event) => {
                             handleTypeAhead(event.nativeEvent);
                             handleTriggerKeyDown(event);
                         }, onBlur: handleTriggerBlur, children: [_jsx("span", { "data-mfui-content": "select-box-trigger-display-value", children: renderTriggerLabel() }), _jsx(DropdownIcon, { "aria-hidden": "true", focusable: false }), _jsx("input", { ref: ref, type: "hidden", value: localSelectedOption?.value ?? '', name: name, disabled: disabled })] }) }), showClearButton ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-SelectBox__clearButtonWrapper'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : size === 'large' ? 'large' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "select-box-clear-button", onClick: (event) => {

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

@@ -227,6 +227,12 @@ export type SelectBoxProps<T extends AllowedValueTypes = string, AdditionalProps
      * Whether the trigger is invalid.
      */
     invalid?: boolean;
+    /**
+     * Whether the trigger is required.
+     * When true, `aria-required="true"` is forwarded to the trigger so that
+     * assistive technologies announce the field as required.
+     */
+    required?: boolean;
     /**
      * Whether the popover width should be constrained to match the trigger element width.
      *

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/data-table-cell-slot-recipe.d.ts

@@ -8,6 +8,7 @@ isCheckboxCell: boolean
 rowHighlighted: boolean
 fixedColumn: boolean
 edgeFixedColumn: "left" | "right"
+layout: "default" | "edge-to-edge"
 type: "text" | "amount"
 }
 
@@ -18,7 +19,7 @@ type DataTableCellSlotRecipeVariantMap = {
 type DataTableCellSlotRecipeSlot = "root" | "defaultCell" | "interactiveCell" | "disclosureIconWrapper" | "disclosureSpacing" | "skeletonCell"
 
 export type DataTableCellSlotRecipeVariantProps = {
-  [key in keyof DataTableCellSlotRecipeVariant]?: ConditionalValue<DataTableCellSlotRecipeVariant[key]> | undefined
+  [key in keyof DataTableCellSlotRecipeVariant]?: DataTableCellSlotRecipeVariant[key] | undefined
 }
 
 export interface DataTableCellSlotRecipeRecipe {

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

@@ -1,7 +1,22 @@
 import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
 import { createRecipe } from './create-recipe.js';
 const dataTableCellSlotRecipeDefaultVariants = {};
-const dataTableCellSlotRecipeCompoundVariants = [];
+const dataTableCellSlotRecipeCompoundVariants = [
+    {
+        "edgeFixedColumn": [
+            "left",
+            "right"
+        ],
+        "layout": "default",
+        "css": {
+            "root": {
+                "tr:last-child > &::before": {
+                    "height": "[100%]"
+                }
+            }
+        }
+    }
+];
 const dataTableCellSlotRecipeSlotNames = [
     [
         "root",
@@ -38,6 +53,7 @@ const dataTableCellSlotRecipeVariantKeys = [
     "rowHighlighted",
     "fixedColumn",
     "edgeFixedColumn",
+    "layout",
     "type"
 ];
 const getVariantProps = (variants) => ({ ...dataTableCellSlotRecipeDefaultVariants, ...compact(variants) });
@@ -65,6 +81,10 @@ export const dataTableCellSlotRecipe = /* @__PURE__ */ Object.assign(dataTableCe
             "left",
             "right"
         ],
+        "layout": [
+            "default",
+            "edge-to-edge"
+        ],
         "type": [
             "text",
             "amount"

package/dist/styles.css

@@ -636,9 +636,10 @@
 .mfui-ipiOcH {
   display: inline-flex;
   align-items: center;
-  vertical-align: middle;
+  vertical-align: bottom;
   padding-right: var(--mfui-spacing-mfui\.size\.padding\.icon-inline\.horizontal\.comfort);
   padding-left: var(--mfui-spacing-mfui\.size\.padding\.icon-inline\.horizontal\.comfort);
+  height: 1lh;
 }
 
 .mfui-eBBgyo {
@@ -5936,9 +5937,19 @@ li:last-child > .mfui-cXGJls {
   justify-content: space-between;
 }
 
-.mfui-dXVlzk,.mfui-iaZfLW {
+.mfui-dXVlzk {
+  flex: 1 0 0;
+  gap: 7px;
+  display: inline-flex;
+  align-items: center;
+  min-width: 1px;
+}
+
+.mfui-iaZfLW {
+  overflow: hidden;
   display: inline-flex;
   align-items: center;
+  flex-shrink: 0;
 }
 
 .mfui-eCoQhk {
@@ -6082,56 +6093,9 @@ li:last-child > .mfui-cXGJls {
 }
 
 .mfui-dsYgTD {
-  padding-inline: 14px;
-  padding-block: 3px;
-}
-
-.mfui-dsYgTD.mfui-Sidebar__serviceMenu .mfui-Sidebar__serviceTrigger {
-  padding: 4px 7px;
-  margin: 0;
-  border: none;
-  gap: 7px;
-  border-radius: 6px;
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  justify-content: flex-start;
-  appearance: none;
-  -webkit-appearance: none;
-  text-align: start;
-  background-color: transparent;
-  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
-  width: 100%;
-  min-width: 0;
-  height: auto;
-}
-
-.mfui-dsYgTD.mfui-Sidebar__serviceMenu .mfui-Sidebar__serviceTrigger .mfui-Typography__root {
-  flex: 1 0 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 1px;
-}
-
-.mfui-dsYgTD.mfui-Sidebar__serviceMenu .mfui-Sidebar__serviceTrigger:is(:hover, [data-hover]),.mfui-dsYgTD.mfui-Sidebar__serviceMenu .mfui-Sidebar__serviceTrigger:is(:focus-visible, [data-focus-visible]) {
-  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.hovered);
-  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
-}
-
-.mfui-dsYgTD.mfui-Sidebar__serviceMenu .mfui-Sidebar__serviceTrigger:is(:active, [data-active]),.mfui-dsYgTD.mfui-Sidebar__serviceMenu .mfui-Sidebar__serviceTrigger:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) {
-  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.pressed);
-  color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
-}
-
-.mfui-dsYgTD.mfui-Sidebar__serviceMenu .mfui-Sidebar__serviceTrigger:is([aria-expanded=true], [data-expanded], [data-state="expanded"]):is(:hover, [data-hover]) {
-  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.hovered);
-  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
-}
-
-.mfui-dsYgTD.mfui-Sidebar__serviceMenu .mfui-Sidebar__serviceTrigger .mfui-Button__leftIcon {
-  font-size: 18px;
   flex-shrink: 0;
-  color: var(--mfui-colors-mfui\.color\.neutral\.content\.none);
 }
 
 .mfui-SeHWc {
@@ -8571,6 +8535,10 @@ li:last-child > .mfui-cXGJls {
   cursor: not-allowed;
 }
 
+tr:last-child > .mfui-gtOHny::before {
+  height: 100%;
+}
+
 .mfui-kSeSQV:is(:focus-visible, [data-focus-visible]),.mfui-dqyxbp:has(input:focus-visible, input[data-focus-visible=true], textarea:focus-visible, textarea[data-focus-visible=true]) {
   outline: 2px solid var(--mfui-colors-mfui\.color\.primary\.border\.none);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneyforward/mfui-components",
-  "version": "3.27.2",
+  "version": "3.28.1",
   "description": "React UI Component Library for all Money Forward products",
   "repository": {
     "type": "git",
@@ -64,7 +64,7 @@
     "@tanstack/react-virtual": "^3.13.18",
     "dayjs": "^1.11.13",
     "@moneyforward/mfui-design-tokens": "^3.2.1",
-    "@moneyforward/mfui-icons-react": "^3.5.0"
+    "@moneyforward/mfui-icons-react": "^3.6.0"
   },
   "scripts": {
     "prepare:panda": "panda codegen",