@moneyforward/mfui-components 4.1.1 → 4.2.0

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, "aria-required": required || undefined, "data-mfui-caution": caution && !invalid ? true : undefined, 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') }) })] }) }));
+    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": isOptionPanelOpen ? listBoxId : undefined, "aria-expanded": isOptionPanelOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, "aria-required": required || undefined, "data-mfui-caution": caution && !invalid ? true : undefined, 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/SelectBox/SelectBox.js

@@ -377,7 +377,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-describedby": triggerProps?.['aria-describedby'], "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, "data-mfui-caution": caution && !invalid ? true : undefined, 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, 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, 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": isOptionPanelOpen ? listBoxId : undefined, "aria-describedby": triggerProps?.['aria-describedby'], "aria-expanded": isOptionPanelOpen, "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, "data-mfui-caution": caution && !invalid ? true : undefined, 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/SidePane/hooks/useSidePaneStateController.js

@@ -56,10 +56,14 @@ export function useSidePaneStateController({ open, onClose, ref, insideElement }
     // Autofocus to the pane window (`role="dialog"` element) when it opens.
     // Screen readers honor `aria-modal` only when focus is on the `role="dialog"`
     // element or its descendants, so the root wrapper must not be the focus target.
+    // `preventScroll` is required because the pane window starts outside its container
+    // (the slide-in animation begins at `right: -100%`). Without it the browser scrolls
+    // the container to reveal the pane, which shifts the surrounding content and hides
+    // the animation — `overflow: hidden` containers are still programmatically scrollable.
     useEffect(() => {
         if (!localOpen)
             return;
-        (insideElement ?? sidePaneElement)?.focus();
+        (insideElement ?? sidePaneElement)?.focus({ preventScroll: true });
     }, [insideElement, sidePaneElement, localOpen]);
     return {
         localOpen,

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

@@ -10,6 +10,9 @@ declare function SidebarBase({ className, logoSlot, mainNavigationItems, extraNa
  * A navigation layout component that combines a logo header, a navigation area,
  * and a footer with icon menu and user information.
  *
+ * `Sidebar` is a self-contained alternative to `GlobalHeader` and `MainNavigation`, since it
+ * already includes both header and navigation features.
+ *
  * The width is resizable via the drag handle on the right edge. See the `WidthPersistence` story for
  * an example of persisting the width across reloads via `onWidthChange` and `defaultWidth`.
  *

package/dist/src/Sidebar/Sidebar.js

@@ -51,6 +51,9 @@ function SidebarToggleButton({ isCollapsed, ariaLabel, navId, onClick, }) {
  * A navigation layout component that combines a logo header, a navigation area,
  * and a footer with icon menu and user information.
  *
+ * `Sidebar` is a self-contained alternative to `GlobalHeader` and `MainNavigation`, since it
+ * already includes both header and navigation features.
+ *
  * The width is resizable via the drag handle on the right edge. See the `WidthPersistence` story for
  * an example of persisting the width across reloads via `onWidthChange` and `defaultWidth`.
  *

package/dist/src/shared/Menu/MenuCloseContext.d.ts

@@ -0,0 +1,10 @@
+type MenuCloseContextValue = {
+    /**
+     * The function to close the menu popover.
+     * This function is provided by the menu component (e.g. `DropdownMenu`, `ApplicationMenu`).
+     */
+    closeMenuPopover?: () => void;
+};
+export declare const useMenuCloseContext: () => MenuCloseContextValue;
+export declare const MenuCloseProvider: import("react").Provider<MenuCloseContextValue>;
+export {};

package/dist/src/shared/Menu/MenuCloseContext.js

@@ -0,0 +1,7 @@
+'use client';
+import { createContext, useContext } from 'react';
+const MenuCloseContext = createContext({
+    closeMenuPopover: undefined,
+});
+export const useMenuCloseContext = () => useContext(MenuCloseContext);
+export const MenuCloseProvider = MenuCloseContext.Provider;

package/dist/src/shared/Menu/MenuContainer.d.ts

@@ -0,0 +1,10 @@
+import { type MenuContainerProps } from './MenuContainer.types';
+/**
+ * The shared root component for menu-button components (e.g. `DropdownMenu`, `ApplicationMenu`).
+ * Put focusable menu item components (marked with `data-mfui-menu-item` /
+ * `data-mfui-focusable="true"`) inside this component.
+ *
+ * Owns the roving focus of the menu items: Escape / Tab close the menu, ArrowDown / ArrowUp
+ * move the focus between the items.
+ */
+export declare const MenuContainer: import("react").ForwardRefExoticComponent<MenuContainerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/{DropdownMenu/DropdownMenuContainer/DropdownMenuContainer.js → shared/Menu/MenuContainer.js}

@@ -1,15 +1,16 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useRef } from 'react';
-import { cx } from '../../../styled-system/css';
 import { mergeRefs } from '../../utilities/dom/mergeRefs';
-import { dropdownMenuContainerSlotRecipe } from '../../../styled-system/recipes';
 /**
- * The root component for the dropdown menu.
- * Put the `DropdownMenuItem` or `DropdownMenuDivider` components inside this component.
+ * The shared root component for menu-button components (e.g. `DropdownMenu`, `ApplicationMenu`).
+ * Put focusable menu item components (marked with `data-mfui-menu-item` /
+ * `data-mfui-focusable="true"`) inside this component.
+ *
+ * Owns the roving focus of the menu items: Escape / Tab close the menu, ArrowDown / ArrowUp
+ * move the focus between the items.
  */
-export const DropdownMenuContainer = forwardRef(({ children, className, defaultFocusItem: defaultFocus = 'first', style, onClose }, ref) => {
-    const classes = dropdownMenuContainerSlotRecipe();
+export const MenuContainer = forwardRef(({ children, className, defaultFocusItem: defaultFocus = 'first', style, onClose }, ref) => {
     const menuContainerRef = useRef(null);
     const getFocusableItems = useCallback(() => menuContainerRef.current?.querySelectorAll('[data-mfui-menu-item]:is([data-mfui-focusable=true])'), []);
     useEffect(() => {
@@ -54,5 +55,5 @@ export const DropdownMenuContainer = forwardRef(({ children, className, defaultF
             }
         }
     }, [onClose, getFocusableItems]);
-    return (_jsx("div", { ref: mergeRefs(ref, menuContainerRef), "data-mfui-menu-container": true, role: "menu", className: cx(classes.root, 'mfui-DropdownMenuContainer__root', className), tabIndex: -1, style: style, onKeyDown: handleKeyDown, children: children }));
+    return (_jsx("div", { ref: mergeRefs(ref, menuContainerRef), "data-mfui-menu-container": true, role: "menu", className: className, tabIndex: -1, style: style, onKeyDown: handleKeyDown, children: children }));
 });

package/dist/src/{DropdownMenu/DropdownMenuContainer/DropdownMenuContainer.types.d.ts → shared/Menu/MenuContainer.types.d.ts}

@@ -1,12 +1,9 @@
-/**
- * The default focus position of the menu.
- */
-export type DropdownMenuDefaultFocusItem = 'first' | 'last' | 'none';
-export type DropdownMenuContainerProps = {
+import { type MenuDefaultFocusItem } from './useMenuTriggerActivation';
+export type MenuContainerProps = {
     /**
      * The content of the component.
      *
-     * It should be a collection of `DropdownMenuItem`, `DropdownMenuDivider` components.
+     * It should be a collection of menu item / divider / heading components.
      */
     children: React.ReactNode;
     /**
@@ -14,7 +11,7 @@ export type DropdownMenuContainerProps = {
      */
     className?: string;
     /**
-     * The default focus position of the dropdown menu.
+     * The default focus position of the menu.
      *
      * It should be either 'first', 'last' or 'none'.
      *
@@ -26,7 +23,7 @@ export type DropdownMenuContainerProps = {
      *
      * @default 'first'
      */
-    defaultFocusItem?: DropdownMenuDefaultFocusItem;
+    defaultFocusItem?: MenuDefaultFocusItem;
     /**
      * The style to apply to the component.
      * This prop is used to add custom styles to the component.
@@ -36,7 +33,7 @@ export type DropdownMenuContainerProps = {
      */
     style?: React.CSSProperties;
     /**
-     * The function to close the DropdownMenu.
+     * The function to close the menu.
      */
     onClose: () => void;
 };

package/dist/src/shared/Menu/MenuContainer.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/shared/Menu/index.d.ts

@@ -0,0 +1,5 @@
+export { MenuContainer } from './MenuContainer';
+export type { MenuContainerProps } from './MenuContainer.types';
+export { useMenuTriggerActivation } from './useMenuTriggerActivation';
+export type { MenuDefaultFocusItem } from './useMenuTriggerActivation';
+export { useMenuCloseContext, MenuCloseProvider } from './MenuCloseContext';

package/dist/src/shared/Menu/index.js

@@ -0,0 +1,3 @@
+export { MenuContainer } from './MenuContainer';
+export { useMenuTriggerActivation } from './useMenuTriggerActivation';
+export { useMenuCloseContext, MenuCloseProvider } from './MenuCloseContext';

package/dist/src/shared/Menu/useMenuTriggerActivation.d.ts

@@ -0,0 +1,35 @@
+import { type FocusEvent, type KeyboardEvent, type MouseEvent } from 'react';
+/**
+ * The default focus position of the menu.
+ */
+export type MenuDefaultFocusItem = 'first' | 'last' | 'none';
+/**
+ * Shared trigger-activation machinery for menu-button components (e.g. `DropdownMenu`,
+ * `ApplicationMenu`). Tracks whether the trigger was activated by keyboard so the menu focuses
+ * its first item on Enter / Space, and moves the default focus position on ArrowUp / ArrowDown.
+ *
+ * The returned handlers wrap the corresponding handler already provided by `Popover`'s
+ * `renderTrigger`, so callers compose them at the trigger call site:
+ *
+ * @example
+ * ```tsx
+ * const { menuDefaultFocusPosition, handleTriggerKeyDown, handleTriggerBlur, handleTriggerClick } =
+ *   useMenuTriggerActivation();
+ *
+ * <Popover
+ *   renderTrigger={({ togglePopover, handleTriggerKeyDown: popoverKeyDown, handleTriggerBlur: popoverBlur }) => (
+ *     <Button
+ *       onKeyDown={(event) => handleTriggerKeyDown(event, popoverKeyDown)}
+ *       onBlur={(event) => handleTriggerBlur(event, popoverBlur)}
+ *       onClick={(event) => handleTriggerClick(event, togglePopover)}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+export declare function useMenuTriggerActivation(): {
+    menuDefaultFocusPosition: MenuDefaultFocusItem;
+    handleTriggerKeyDown: (event: KeyboardEvent<HTMLElement>, next: (event: KeyboardEvent<HTMLElement>) => void) => void;
+    handleTriggerBlur: (event: FocusEvent<HTMLElement>, next: (event: FocusEvent<HTMLElement>) => void) => void;
+    handleTriggerClick: (event: MouseEvent<HTMLElement>, next: (event: MouseEvent<HTMLElement>) => void) => void;
+};

package/dist/src/shared/Menu/useMenuTriggerActivation.js

@@ -0,0 +1,69 @@
+'use client';
+import { useCallback, useRef, useState } from 'react';
+/**
+ * Shared trigger-activation machinery for menu-button components (e.g. `DropdownMenu`,
+ * `ApplicationMenu`). Tracks whether the trigger was activated by keyboard so the menu focuses
+ * its first item on Enter / Space, and moves the default focus position on ArrowUp / ArrowDown.
+ *
+ * The returned handlers wrap the corresponding handler already provided by `Popover`'s
+ * `renderTrigger`, so callers compose them at the trigger call site:
+ *
+ * @example
+ * ```tsx
+ * const { menuDefaultFocusPosition, handleTriggerKeyDown, handleTriggerBlur, handleTriggerClick } =
+ *   useMenuTriggerActivation();
+ *
+ * <Popover
+ *   renderTrigger={({ togglePopover, handleTriggerKeyDown: popoverKeyDown, handleTriggerBlur: popoverBlur }) => (
+ *     <Button
+ *       onKeyDown={(event) => handleTriggerKeyDown(event, popoverKeyDown)}
+ *       onBlur={(event) => handleTriggerBlur(event, popoverBlur)}
+ *       onClick={(event) => handleTriggerClick(event, togglePopover)}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+export function useMenuTriggerActivation() {
+    const [menuDefaultFocusPosition, setMenuDefaultFocusPosition] = useState('first');
+    // Tracks keyboard activation (Enter / Space) of the trigger. The resulting click event usually
+    // has `detail === 0`, but Safari reports keyboard-triggered clicks with `detail === 1`, so the
+    // keydown itself is recorded as the reliable signal.
+    const isTriggerActivatedByKeyboardRef = useRef(false);
+    const handleTriggerKeyDown = useCallback((event, next) => {
+        // The flag only survives from an Enter / Space keydown to its follow-up click; any other key
+        // invalidates the pending keyboard activation so the flag cannot linger when the click never
+        // fires.
+        isTriggerActivatedByKeyboardRef.current = event.key === 'Enter' || event.key === ' ';
+        switch (event.key) {
+            case 'ArrowDown':
+                event.stopPropagation();
+                event.preventDefault();
+                setMenuDefaultFocusPosition('first');
+                break;
+            case 'ArrowUp':
+                event.stopPropagation();
+                event.preventDefault();
+                setMenuDefaultFocusPosition('last');
+                break;
+        }
+        next(event);
+    }, []);
+    const handleTriggerBlur = useCallback((event, next) => {
+        // Focus leaving the trigger invalidates any pending keyboard activation (e.g. a Space
+        // keydown whose follow-up click never fired), so a later mouse click cannot be
+        // misclassified as keyboard activation.
+        isTriggerActivatedByKeyboardRef.current = false;
+        next(event);
+    }, []);
+    const handleTriggerClick = useCallback((event, next) => {
+        // Opening with the keyboard (Enter / Space) focuses the first item, following the
+        // WAI-ARIA menu button pattern. Opening with the mouse focuses no item; the menu
+        // container receives focus instead so that arrow keys still work.
+        const isKeyboardActivation = isTriggerActivatedByKeyboardRef.current || event.detail === 0;
+        isTriggerActivatedByKeyboardRef.current = false;
+        setMenuDefaultFocusPosition(isKeyboardActivation ? 'first' : 'none');
+        next(event);
+    }, []);
+    return { menuDefaultFocusPosition, handleTriggerKeyDown, handleTriggerBlur, handleTriggerClick };
+}

package/dist/styled-system/recipes/application-menu-divider-slot-recipe.d.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface ApplicationMenuDividerSlotRecipeVariant {
+  
+}
+
+type ApplicationMenuDividerSlotRecipeVariantMap = {
+  [key in keyof ApplicationMenuDividerSlotRecipeVariant]: Array<ApplicationMenuDividerSlotRecipeVariant[key]>
+}
+
+type ApplicationMenuDividerSlotRecipeSlot = "root" | "line"
+
+export type ApplicationMenuDividerSlotRecipeVariantProps = {
+  [key in keyof ApplicationMenuDividerSlotRecipeVariant]?: ConditionalValue<ApplicationMenuDividerSlotRecipeVariant[key]> | undefined
+}
+
+export interface ApplicationMenuDividerSlotRecipeRecipe {
+  __slot: ApplicationMenuDividerSlotRecipeSlot
+  __type: ApplicationMenuDividerSlotRecipeVariantProps
+  (props?: ApplicationMenuDividerSlotRecipeVariantProps): Pretty<Record<ApplicationMenuDividerSlotRecipeSlot, string>>
+  raw: (props?: ApplicationMenuDividerSlotRecipeVariantProps) => ApplicationMenuDividerSlotRecipeVariantProps
+  variantMap: ApplicationMenuDividerSlotRecipeVariantMap
+  variantKeys: Array<keyof ApplicationMenuDividerSlotRecipeVariant>
+  splitVariantProps<Props extends ApplicationMenuDividerSlotRecipeVariantProps>(props: Props): [ApplicationMenuDividerSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof ApplicationMenuDividerSlotRecipeVariantProps>>]
+  getVariantProps: (props?: ApplicationMenuDividerSlotRecipeVariantProps) => ApplicationMenuDividerSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI ApplicationMenuDivider component.
+ */
+export declare const applicationMenuDividerSlotRecipe: ApplicationMenuDividerSlotRecipeRecipe

package/dist/styled-system/recipes/application-menu-divider-slot-recipe.js

@@ -0,0 +1,32 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const applicationMenuDividerSlotRecipeDefaultVariants = {};
+const applicationMenuDividerSlotRecipeCompoundVariants = [];
+const applicationMenuDividerSlotRecipeSlotNames = [
+    [
+        "root",
+        "ApplicationMenuDivider__root"
+    ],
+    [
+        "line",
+        "ApplicationMenuDivider__line"
+    ]
+];
+const applicationMenuDividerSlotRecipeSlotFns = /* @__PURE__ */ applicationMenuDividerSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, applicationMenuDividerSlotRecipeDefaultVariants, getSlotCompoundVariant(applicationMenuDividerSlotRecipeCompoundVariants, slotName))]);
+const applicationMenuDividerSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(applicationMenuDividerSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const applicationMenuDividerSlotRecipeVariantKeys = [];
+const getVariantProps = (variants) => ({ ...applicationMenuDividerSlotRecipeDefaultVariants, ...compact(variants) });
+export const applicationMenuDividerSlotRecipe = /* @__PURE__ */ Object.assign(applicationMenuDividerSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'applicationMenuDividerSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: applicationMenuDividerSlotRecipeVariantKeys,
+    variantMap: {},
+    splitVariantProps(props) {
+        return splitProps(props, applicationMenuDividerSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

package/dist/styled-system/recipes/application-menu-group-slot-recipe.d.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface ApplicationMenuGroupSlotRecipeVariant {
+  
+}
+
+type ApplicationMenuGroupSlotRecipeVariantMap = {
+  [key in keyof ApplicationMenuGroupSlotRecipeVariant]: Array<ApplicationMenuGroupSlotRecipeVariant[key]>
+}
+
+type ApplicationMenuGroupSlotRecipeSlot = "root"
+
+export type ApplicationMenuGroupSlotRecipeVariantProps = {
+  [key in keyof ApplicationMenuGroupSlotRecipeVariant]?: ConditionalValue<ApplicationMenuGroupSlotRecipeVariant[key]> | undefined
+}
+
+export interface ApplicationMenuGroupSlotRecipeRecipe {
+  __slot: ApplicationMenuGroupSlotRecipeSlot
+  __type: ApplicationMenuGroupSlotRecipeVariantProps
+  (props?: ApplicationMenuGroupSlotRecipeVariantProps): Pretty<Record<ApplicationMenuGroupSlotRecipeSlot, string>>
+  raw: (props?: ApplicationMenuGroupSlotRecipeVariantProps) => ApplicationMenuGroupSlotRecipeVariantProps
+  variantMap: ApplicationMenuGroupSlotRecipeVariantMap
+  variantKeys: Array<keyof ApplicationMenuGroupSlotRecipeVariant>
+  splitVariantProps<Props extends ApplicationMenuGroupSlotRecipeVariantProps>(props: Props): [ApplicationMenuGroupSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof ApplicationMenuGroupSlotRecipeVariantProps>>]
+  getVariantProps: (props?: ApplicationMenuGroupSlotRecipeVariantProps) => ApplicationMenuGroupSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI ApplicationMenuGroup component.
+ */
+export declare const applicationMenuGroupSlotRecipe: ApplicationMenuGroupSlotRecipeRecipe

package/dist/styled-system/recipes/application-menu-group-slot-recipe.js

@@ -0,0 +1,28 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const applicationMenuGroupSlotRecipeDefaultVariants = {};
+const applicationMenuGroupSlotRecipeCompoundVariants = [];
+const applicationMenuGroupSlotRecipeSlotNames = [
+    [
+        "root",
+        "ApplicationMenuGroup__root"
+    ]
+];
+const applicationMenuGroupSlotRecipeSlotFns = /* @__PURE__ */ applicationMenuGroupSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, applicationMenuGroupSlotRecipeDefaultVariants, getSlotCompoundVariant(applicationMenuGroupSlotRecipeCompoundVariants, slotName))]);
+const applicationMenuGroupSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(applicationMenuGroupSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const applicationMenuGroupSlotRecipeVariantKeys = [];
+const getVariantProps = (variants) => ({ ...applicationMenuGroupSlotRecipeDefaultVariants, ...compact(variants) });
+export const applicationMenuGroupSlotRecipe = /* @__PURE__ */ Object.assign(applicationMenuGroupSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'applicationMenuGroupSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: applicationMenuGroupSlotRecipeVariantKeys,
+    variantMap: {},
+    splitVariantProps(props) {
+        return splitProps(props, applicationMenuGroupSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

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

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface ApplicationMenuItemSlotRecipeVariant {
+  
+}
+
+type ApplicationMenuItemSlotRecipeVariantMap = {
+  [key in keyof ApplicationMenuItemSlotRecipeVariant]: Array<ApplicationMenuItemSlotRecipeVariant[key]>
+}
+
+type ApplicationMenuItemSlotRecipeSlot = "root"
+
+export type ApplicationMenuItemSlotRecipeVariantProps = {
+  [key in keyof ApplicationMenuItemSlotRecipeVariant]?: ConditionalValue<ApplicationMenuItemSlotRecipeVariant[key]> | undefined
+}
+
+export interface ApplicationMenuItemSlotRecipeRecipe {
+  __slot: ApplicationMenuItemSlotRecipeSlot
+  __type: ApplicationMenuItemSlotRecipeVariantProps
+  (props?: ApplicationMenuItemSlotRecipeVariantProps): Pretty<Record<ApplicationMenuItemSlotRecipeSlot, string>>
+  raw: (props?: ApplicationMenuItemSlotRecipeVariantProps) => ApplicationMenuItemSlotRecipeVariantProps
+  variantMap: ApplicationMenuItemSlotRecipeVariantMap
+  variantKeys: Array<keyof ApplicationMenuItemSlotRecipeVariant>
+  splitVariantProps<Props extends ApplicationMenuItemSlotRecipeVariantProps>(props: Props): [ApplicationMenuItemSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof ApplicationMenuItemSlotRecipeVariantProps>>]
+  getVariantProps: (props?: ApplicationMenuItemSlotRecipeVariantProps) => ApplicationMenuItemSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI ApplicationMenuItem component.
+ */
+export declare const applicationMenuItemSlotRecipe: ApplicationMenuItemSlotRecipeRecipe

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

@@ -0,0 +1,28 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const applicationMenuItemSlotRecipeDefaultVariants = {};
+const applicationMenuItemSlotRecipeCompoundVariants = [];
+const applicationMenuItemSlotRecipeSlotNames = [
+    [
+        "root",
+        "ApplicationMenuItem__root"
+    ]
+];
+const applicationMenuItemSlotRecipeSlotFns = /* @__PURE__ */ applicationMenuItemSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, applicationMenuItemSlotRecipeDefaultVariants, getSlotCompoundVariant(applicationMenuItemSlotRecipeCompoundVariants, slotName))]);
+const applicationMenuItemSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(applicationMenuItemSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const applicationMenuItemSlotRecipeVariantKeys = [];
+const getVariantProps = (variants) => ({ ...applicationMenuItemSlotRecipeDefaultVariants, ...compact(variants) });
+export const applicationMenuItemSlotRecipe = /* @__PURE__ */ Object.assign(applicationMenuItemSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'applicationMenuItemSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: applicationMenuItemSlotRecipeVariantKeys,
+    variantMap: {},
+    splitVariantProps(props) {
+        return splitProps(props, applicationMenuItemSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

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

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface ApplicationMenuSlotRecipeVariant {
+  
+}
+
+type ApplicationMenuSlotRecipeVariantMap = {
+  [key in keyof ApplicationMenuSlotRecipeVariant]: Array<ApplicationMenuSlotRecipeVariant[key]>
+}
+
+type ApplicationMenuSlotRecipeSlot = "popover" | "menuContainer"
+
+export type ApplicationMenuSlotRecipeVariantProps = {
+  [key in keyof ApplicationMenuSlotRecipeVariant]?: ConditionalValue<ApplicationMenuSlotRecipeVariant[key]> | undefined
+}
+
+export interface ApplicationMenuSlotRecipeRecipe {
+  __slot: ApplicationMenuSlotRecipeSlot
+  __type: ApplicationMenuSlotRecipeVariantProps
+  (props?: ApplicationMenuSlotRecipeVariantProps): Pretty<Record<ApplicationMenuSlotRecipeSlot, string>>
+  raw: (props?: ApplicationMenuSlotRecipeVariantProps) => ApplicationMenuSlotRecipeVariantProps
+  variantMap: ApplicationMenuSlotRecipeVariantMap
+  variantKeys: Array<keyof ApplicationMenuSlotRecipeVariant>
+  splitVariantProps<Props extends ApplicationMenuSlotRecipeVariantProps>(props: Props): [ApplicationMenuSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof ApplicationMenuSlotRecipeVariantProps>>]
+  getVariantProps: (props?: ApplicationMenuSlotRecipeVariantProps) => ApplicationMenuSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI ApplicationMenu component.
+ */
+export declare const applicationMenuSlotRecipe: ApplicationMenuSlotRecipeRecipe

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

@@ -0,0 +1,32 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const applicationMenuSlotRecipeDefaultVariants = {};
+const applicationMenuSlotRecipeCompoundVariants = [];
+const applicationMenuSlotRecipeSlotNames = [
+    [
+        "popover",
+        "ApplicationMenu__popover"
+    ],
+    [
+        "menuContainer",
+        "ApplicationMenu__menuContainer"
+    ]
+];
+const applicationMenuSlotRecipeSlotFns = /* @__PURE__ */ applicationMenuSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, applicationMenuSlotRecipeDefaultVariants, getSlotCompoundVariant(applicationMenuSlotRecipeCompoundVariants, slotName))]);
+const applicationMenuSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(applicationMenuSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const applicationMenuSlotRecipeVariantKeys = [];
+const getVariantProps = (variants) => ({ ...applicationMenuSlotRecipeDefaultVariants, ...compact(variants) });
+export const applicationMenuSlotRecipe = /* @__PURE__ */ Object.assign(applicationMenuSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'applicationMenuSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: applicationMenuSlotRecipeVariantKeys,
+    variantMap: {},
+    splitVariantProps(props) {
+        return splitProps(props, applicationMenuSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

package/dist/styled-system/recipes/index.d.ts

@@ -1,4 +1,8 @@
 /* eslint-disable */
+export * from './application-menu-slot-recipe';
+export * from './application-menu-divider-slot-recipe';
+export * from './application-menu-item-slot-recipe';
+export * from './application-menu-group-slot-recipe';
 export * from './breadcrumbs-slot-recipe';
 export * from './icon-button-slot-recipe';
 export * from './focus-indicator-slot-recipe';

package/dist/styled-system/recipes/index.js

@@ -1,3 +1,7 @@
+export * from './application-menu-slot-recipe.js';
+export * from './application-menu-divider-slot-recipe.js';
+export * from './application-menu-item-slot-recipe.js';
+export * from './application-menu-group-slot-recipe.js';
 export * from './breadcrumbs-slot-recipe.js';
 export * from './icon-button-slot-recipe.js';
 export * from './focus-indicator-slot-recipe.js';

package/dist/styles.css

@@ -495,6 +495,53 @@
   --mfui-line-heights-mfui\.typography\.line-height\.condensed-input\.narrow: 21px;
         }
 
+.mfui-gXBBVr {
+  overflow-y: auto;
+}
+
+.mfui-iHuYNm {
+  padding-block: var(--mfui-spacing-mfui\.size\.padding\.container\.vertical\.comfort);
+  flex-direction: column;
+  word-break: break-word;
+}
+
+.mfui-iHuYNm,.mfui-bKxkVF {
+  padding-inline: 0px;
+  display: flex;
+  min-width: var(--mfui-sizes-mfui\.size\.target\.button\.comfort);
+}
+
+.mfui-bKxkVF {
+  gap: var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.comfort);
+  flex: 0 0 auto;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  height: 16px;
+  padding-top: 7px;
+  padding-bottom: 8px;
+}
+
+.mfui-bGpNIl {
+  border-top: 1px solid;
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
+  flex-shrink: 0;
+  align-self: stretch;
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
+  height: 1px;
+}
+
+.mfui-fnwQXl {
+  width: var(--mfui-application-menu-item-width, 168px);
+}
+
+.mfui-elhNev {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
 .mfui-dOaOSF {
   margin: 0;
   list-style: none;