@moneyforward/mfui-components 3.28.1 → 3.29.1

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

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

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

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

package/dist/src/Disclosure/Disclosure.js

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

package/dist/src/MultipleSelectBox/MultipleSelectBox.js

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

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

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

package/dist/src/MultipleSelectBox/hooks/useInitialFocusOnOptionPanelOpen.js

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { getDeepActiveElement } from '../utils/getDeepActiveElement';
 import { isSelectableOption } from '../utils/isSelectableOption';
 /**
  * Control the focus when the option panel is opened.
@@ -9,7 +10,7 @@ export const useInitialFocusOnOptionPanelOpen = ({ isOptionPanelOpen, selectAllB
         if (!isOptionPanelOpen)
             return;
         // Check if the active element is one of the all options control buttons
-        const { activeElement } = document;
+        const activeElement = getDeepActiveElement();
         // If an all options control button is focused, don't change focus
         if (activeElement === selectAllButtonRef.current || activeElement === clearAllButtonRef.current) {
             return;
@@ -17,7 +18,7 @@ export const useInitialFocusOnOptionPanelOpen = ({ isOptionPanelOpen, selectAllB
         // Focus the search input when the select is searchable and the value is empty.
         if (enableSearchOptions) {
             // If it is already focused, return.
-            if (searchInputRef.current === document.activeElement)
+            if (searchInputRef.current === activeElement)
                 return;
             // Otherwise, focus the search input
             if (localSelectedValuesSet.size === 0) {
@@ -57,10 +58,6 @@ export const useInitialFocusOnOptionPanelOpen = ({ isOptionPanelOpen, selectAllB
             if (focusIndexInOptions === -1)
                 focusIndexInOptions = 0;
         }
-        else {
-            // Default to the first focusable option
-            focusIndexInOptions = 0;
-        }
         const optionNode = optionPanelRef.current?.querySelectorAll('[role="option"][data-focusable="true"]');
         if (optionNode && optionNode.length > 0) {
             optionNode[focusIndexInOptions]?.focus({ preventScroll: true });

package/dist/src/MultipleSelectBox/utils/getDeepActiveElement.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Returns the truly focused element, traversing into shadow roots recursively.
+ *
+ * `document.activeElement` stops at the shadow host when focus is inside a Shadow DOM.
+ * This function follows the chain of `shadowRoot.activeElement` until the deepest focused element is found.
+ *
+ * @param root - The root to start from (defaults to `document`)
+ *
+ * @returns The deepest active element, or `null` if nothing is focused
+ */
+export declare const getDeepActiveElement: (root?: Document | ShadowRoot) => Element | null;

package/dist/src/MultipleSelectBox/utils/getDeepActiveElement.js

@@ -0,0 +1,17 @@
+/**
+ * Returns the truly focused element, traversing into shadow roots recursively.
+ *
+ * `document.activeElement` stops at the shadow host when focus is inside a Shadow DOM.
+ * This function follows the chain of `shadowRoot.activeElement` until the deepest focused element is found.
+ *
+ * @param root - The root to start from (defaults to `document`)
+ *
+ * @returns The deepest active element, or `null` if nothing is focused
+ */
+export const getDeepActiveElement = (root = document) => {
+    const active = root.activeElement;
+    if (active?.shadowRoot) {
+        return getDeepActiveElement(active.shadowRoot) ?? active;
+    }
+    return active;
+};

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

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

package/dist/src/SearchBox/SearchBox.js

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

package/dist/src/SelectBox/SelectBox.js

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

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

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

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

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

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

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

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

@@ -6083,6 +6083,18 @@ const tokens = {
         "value": "#bad4f7ff",
         "variable": "var(--mfui-colors-mfui\\.color\\.primary\\.sub-background\\.pressed)"
     },
+    "colors.mfui.color.primary.text-on-sub-background.none": {
+        "value": "#165cb7ff",
+        "variable": "var(--mfui-colors-mfui\\.color\\.primary\\.text-on-sub-background\\.none)"
+    },
+    "colors.mfui.color.primary.text-on-sub-background.hovered": {
+        "value": "#004396ff",
+        "variable": "var(--mfui-colors-mfui\\.color\\.primary\\.text-on-sub-background\\.hovered)"
+    },
+    "colors.mfui.color.primary.text-on-sub-background.pressed": {
+        "value": "#072977ff",
+        "variable": "var(--mfui-colors-mfui\\.color\\.primary\\.text-on-sub-background\\.pressed)"
+    },
     "colors.mfui.color.readonly.content": {
         "value": "#262626ff",
         "variable": "var(--mfui-colors-mfui\\.color\\.readonly\\.content)"
@@ -6179,6 +6191,18 @@ const tokens = {
         "value": "#003e90ff",
         "variable": "var(--mfui-colors-mfui\\.color\\.selected\\.border\\.pressed)"
     },
+    "colors.mfui.color.selected.text-on-background.none": {
+        "value": "#165cb7ff",
+        "variable": "var(--mfui-colors-mfui\\.color\\.selected\\.text-on-background\\.none)"
+    },
+    "colors.mfui.color.selected.text-on-background.hovered": {
+        "value": "#004396ff",
+        "variable": "var(--mfui-colors-mfui\\.color\\.selected\\.text-on-background\\.hovered)"
+    },
+    "colors.mfui.color.selected.text-on-background.pressed": {
+        "value": "#072977ff",
+        "variable": "var(--mfui-colors-mfui\\.color\\.selected\\.text-on-background\\.pressed)"
+    },
     "colors.mfui.color.shadow.elevation-plus-1-shadow-1.none": {
         "value": "#00000033",
         "variable": "var(--mfui-colors-mfui\\.color\\.shadow\\.elevation-plus-1-shadow-1\\.none)"
@@ -6243,6 +6267,18 @@ const tokens = {
         "value": "#9ee1afff",
         "variable": "var(--mfui-colors-mfui\\.color\\.signal-green\\.sub-background\\.pressed)"
     },
+    "colors.mfui.color.signal-green.text-on-sub-background.none": {
+        "value": "#006d36ff",
+        "variable": "var(--mfui-colors-mfui\\.color\\.signal-green\\.text-on-sub-background\\.none)"
+    },
+    "colors.mfui.color.signal-green.text-on-sub-background.hovered": {
+        "value": "#005227ff",
+        "variable": "var(--mfui-colors-mfui\\.color\\.signal-green\\.text-on-sub-background\\.hovered)"
+    },
+    "colors.mfui.color.signal-green.text-on-sub-background.pressed": {
+        "value": "#003919ff",
+        "variable": "var(--mfui-colors-mfui\\.color\\.signal-green\\.text-on-sub-background\\.pressed)"
+    },
     "colors.mfui.color.signal-neutral.sub-background.none": {
         "value": "#f3f3f3ff",
         "variable": "var(--mfui-colors-mfui\\.color\\.signal-neutral\\.sub-background\\.none)"
@@ -6303,6 +6339,18 @@ const tokens = {
         "value": "#ffc3baff",
         "variable": "var(--mfui-colors-mfui\\.color\\.signal-red\\.sub-background\\.pressed)"
     },
+    "colors.mfui.color.signal-red.text-on-sub-background.none": {
+        "value": "#ba1828ff",
+        "variable": "var(--mfui-colors-mfui\\.color\\.signal-red\\.text-on-sub-background\\.none)"
+    },
+    "colors.mfui.color.signal-red.text-on-sub-background.hovered": {
+        "value": "#93001aff",
+        "variable": "var(--mfui-colors-mfui\\.color\\.signal-red\\.text-on-sub-background\\.hovered)"
+    },
+    "colors.mfui.color.signal-red.text-on-sub-background.pressed": {
+        "value": "#68000fff",
+        "variable": "var(--mfui-colors-mfui\\.color\\.signal-red\\.text-on-sub-background\\.pressed)"
+    },
     "colors.mfui.color.signal-yellow.content.none": {
         "value": "#8b7200ff",
         "variable": "var(--mfui-colors-mfui\\.color\\.signal-yellow\\.content\\.none)"
@@ -6351,6 +6399,18 @@ const tokens = {
         "value": "#eecf79ff",
         "variable": "var(--mfui-colors-mfui\\.color\\.signal-yellow\\.sub-background\\.pressed)"
     },
+    "colors.mfui.color.signal-yellow.text-on-sub-background.none": {
+        "value": "#775a01ff",
+        "variable": "var(--mfui-colors-mfui\\.color\\.signal-yellow\\.text-on-sub-background\\.none)"
+    },
+    "colors.mfui.color.signal-yellow.text-on-sub-background.hovered": {
+        "value": "#604100ff",
+        "variable": "var(--mfui-colors-mfui\\.color\\.signal-yellow\\.text-on-sub-background\\.hovered)"
+    },
+    "colors.mfui.color.signal-yellow.text-on-sub-background.pressed": {
+        "value": "#462a00ff",
+        "variable": "var(--mfui-colors-mfui\\.color\\.signal-yellow\\.text-on-sub-background\\.pressed)"
+    },
     "shadows.mfui.elevation.plus-1.shadow-1": {
         "value": "0px 1px 1px 1px #00000033",
         "variable": "var(--mfui-shadows-mfui\\.elevation\\.plus-1\\.shadow-1)"