@muraldevkit/ui-toolkit 4.65.3-dev-IWCo.1 → 4.66.0-dev-avUr.1

package/dist/cjs/components/menu/hooks/useMenuScroll.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuScroll = void 0;
+const react_1 = require("react");
+const SCREEN_OFFSET = 16;
+const DEFAULT_SCROLL_STATE = {
+    isScrolling: false,
+    maxHeight: undefined
+};
+/**
+ * useMenuScroll hook
+ *
+ * Detects when a menu cannot fit on screen in either its preferred or flipped position,
+ * and constrains its height to enable internal scrolling.
+ *
+ * Behavior by position:
+ * - **top/bottom**: If the menu doesn't fit in the preferred direction AND doesn't fit
+ *   in the opposite direction (flip), it reverts to the original position and constrains
+ *   the height to the space between the trigger edge and the viewport edge.
+ * - **left/right**: Only checks vertical overflow. If the menu is taller than the viewport,
+ *   it constrains the height to the available vertical space.
+ *
+ * Uses `scrollHeight` on the list element to determine the natural (unconstrained) content
+ * height. This value remains stable even when `maxHeight` is applied, preventing feedback
+ * loops with external positioning hooks that use ResizeObserver.
+ *
+ * Uses `useLayoutEffect` for the initial calculation so that `maxHeight` is applied
+ * synchronously before the browser paints. This prevents visible flicker when the menu
+ * opens in a constrained space, because the positioning hook (useTriggerPosition) will
+ * see the already-constrained height on its first measurement via requestAnimationFrame.
+ *
+ * @param triggerRef - Reference to the trigger element that opens the menu
+ * @param listRef - Reference to the ul element inside the menu (the scrollable container)
+ * @param position - The preferred menu position relative to the trigger
+ * @param menuOffset - The gap between the trigger and the menu in pixels
+ * @param isOpen - Whether the menu is currently open
+ * @param disable - Whether to disable the hook entirely
+ * @returns An object with `maxHeight` (inline style value) and `isScrolling` (class toggle)
+ */
+const useMenuScroll = (triggerRef, listRef, position, menuOffset, isOpen, disable) => {
+    const [scrollState, setScrollState] = (0, react_1.useState)(DEFAULT_SCROLL_STATE);
+    const calculateScroll = (0, react_1.useCallback)(() => {
+        // Reset scroll constraints when the menu closes or refs aren't available.
+        if (!isOpen || disable || !(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) || !listRef.current) {
+            setScrollState((prev) => {
+                if (prev.maxHeight === undefined && !prev.isScrolling)
+                    return prev;
+                return DEFAULT_SCROLL_STATE;
+            });
+            return;
+        }
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const naturalHeight = listRef.current.scrollHeight;
+        const viewportHeight = window.innerHeight;
+        let maxHeight;
+        let isScrolling = false;
+        switch (position) {
+            case 'bottom': {
+                const availableBelow = viewportHeight - triggerRect.bottom - menuOffset - SCREEN_OFFSET;
+                const availableAbove = triggerRect.top - menuOffset - SCREEN_OFFSET;
+                if (naturalHeight > availableBelow && naturalHeight > availableAbove) {
+                    isScrolling = true;
+                    maxHeight = availableBelow;
+                }
+                break;
+            }
+            case 'top': {
+                const availableAbove = triggerRect.top - menuOffset - SCREEN_OFFSET;
+                const availableBelow = viewportHeight - triggerRect.bottom - menuOffset - SCREEN_OFFSET;
+                if (naturalHeight > availableAbove && naturalHeight > availableBelow) {
+                    isScrolling = true;
+                    maxHeight = availableAbove;
+                }
+                break;
+            }
+            case 'left':
+            case 'right': {
+                const availableVertical = viewportHeight - 2 * SCREEN_OFFSET;
+                if (naturalHeight > availableVertical) {
+                    isScrolling = true;
+                    maxHeight = availableVertical;
+                }
+                break;
+            }
+        }
+        /**
+         * Floor the maxHeight and subtract 1px to avoid sub-pixel rounding that can
+         * cause the element being positioned to flip between flipped/unflipped states.
+         */
+        const safeMaxHeight = maxHeight !== undefined ? Math.floor(maxHeight) - 1 : undefined;
+        setScrollState((prev) => {
+            if (prev.maxHeight === safeMaxHeight && prev.isScrolling === isScrolling)
+                return prev;
+            return { isScrolling, maxHeight: safeMaxHeight };
+        });
+    }, [isOpen, disable, triggerRef, listRef, position, menuOffset]);
+    /**
+     * Calculate synchronously before paint to prevent flicker.
+     * This ensures maxHeight is applied to the DOM before useTriggerPosition's
+     * requestAnimationFrame fires, so it measures the constrained height on its first pass.
+     */
+    (0, react_1.useLayoutEffect)(() => {
+        if (isOpen && !disable) {
+            calculateScroll();
+        }
+    }, [isOpen, disable, calculateScroll]);
+    /**
+     * Respond to window resize and content size changes (e.g. images loading,
+     * lazy content, dynamically added items).
+     */
+    (0, react_1.useEffect)(() => {
+        if (!isOpen || disable)
+            return;
+        window.addEventListener('resize', calculateScroll);
+        const listElement = listRef.current;
+        let resizeObserver;
+        if (listElement) {
+            resizeObserver = new ResizeObserver(calculateScroll);
+            resizeObserver.observe(listElement);
+        }
+        return () => {
+            window.removeEventListener('resize', calculateScroll);
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+        };
+    }, [isOpen, disable, calculateScroll, listRef]);
+    return scrollState;
+};
+exports.useMenuScroll = useMenuScroll;

package/dist/cjs/components/menu/hooks/useSubMenuElementPosition.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSubMenuElementPosition = void 0;
+const react_1 = require("react");
+const utilities_1 = require("../MrlMenu/utilities");
+/**
+ * Calculates the position of the sub menu element
+ *
+ * @param triggerRef - The trigger element ref
+ * @param menuRef - The menu element ref
+ * @param isSubMenu - Is the menu a sub menu
+ * @param isOpen - Is the element visible
+ * @param originalMenuRect - The menu element rect
+ * @param disable - Should the menu be disabled
+ * @returns The sub menu position
+ */
+const useSubMenuElementPosition = (triggerRef, menuRef, isSubMenu, isOpen, originalMenuRect, disable) => {
+    const [subMenuPosition, setSubMenuPosition] = (0, react_1.useState)({
+        left: 'calc(100% - 5px)',
+        top: ''
+    });
+    const [menuRect, setMenuRect] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!disable && isOpen && menuRef.current && !originalMenuRect) {
+            setMenuRect(menuRef.current.getBoundingClientRect());
+        }
+    }, [
+        disable,
+        isOpen,
+        menuRef,
+        originalMenuRect
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (disable ||
+            !(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) ||
+            !menuRef.current ||
+            !isSubMenu ||
+            !isOpen ||
+            !menuRect ||
+            !isSubMenu)
+            return;
+        const parentMenu = (0, utilities_1.findClosestMenuParent)(triggerRef.current);
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        if (!(parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.parentElement))
+            return;
+        const parentMenuRect = parentMenu.getBoundingClientRect();
+        const menuHeight = menuRef.current.getBoundingClientRect().height;
+        const overlapsRight = window.innerWidth < menuRect.right;
+        const overlapsLeft = triggerRect.left - menuRect.width < menuRect.width;
+        const newLeft = (0, utilities_1.calculateLeftPosition)(overlapsRight, overlapsLeft, menuRect, triggerRef);
+        let newTop = (0, utilities_1.calculateTopPosition)(overlapsRight, overlapsLeft, triggerRef, menuRect, parentMenu, triggerRect);
+        // if the submenu height is smaller than the menu height, we want to top align the submenu so it doesn't go off
+        // of the top of the screen
+        if (menuHeight > parentMenuRect.height) {
+            newTop = `0px`;
+        }
+        setSubMenuPosition({ left: newLeft, top: newTop });
+    }, [
+        disable,
+        triggerRef,
+        menuRef,
+        menuRect,
+        isSubMenu,
+        isOpen
+    ]);
+    return subMenuPosition;
+};
+exports.useSubMenuElementPosition = useSubMenuElementPosition;

package/dist/cjs/components/menu/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlMenu"), exports);
+__exportStar(require("./MrlMenuItem"), exports);
+__exportStar(require("./MrlMenuItemLink"), exports);
+__exportStar(require("./MrlMenuGroup"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./utilities"), exports);

package/dist/cjs/components/menu/utilities/flip-position.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flipPosition = void 0;
+/**
+ * Flips the given position to its opposite.
+ *
+ * @param pos - The position to flip. Can be 'left', 'right', 'top', or 'bottom'.
+ * @returns The flipped position. Will be 'right' for 'left', 'left' for 'right', 'bottom' for 'top', and 'top' for 'bottom'.
+ */
+const flipPosition = (pos) => {
+    switch (pos) {
+        case 'left':
+            return 'right';
+        case 'right':
+            return 'left';
+        case 'top':
+            return 'bottom';
+        case 'bottom':
+            return 'top';
+    }
+    return pos;
+};
+exports.flipPosition = flipPosition;

package/dist/cjs/components/menu/utilities/get-scrollable-parent.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getScrollableParent = void 0;
+/**
+ * Returns the closest scrollable parent of the provided element.
+ *
+ * @param element - The element to start from
+ * @returns The closest scrollable ancestor or the document's scrolling element
+ */
+function getScrollableParent(element) {
+    if (!element)
+        return window;
+    let current = element;
+    while (current && current !== document.body) {
+        const overflowY = window.getComputedStyle(current).overflowY;
+        const isScrollable = ['auto', 'scroll', 'overlay'].includes(overflowY);
+        if (isScrollable && current.scrollHeight > current.clientHeight) {
+            return current;
+        }
+        current = current.parentElement;
+    }
+    return window;
+}
+exports.getScrollableParent = getScrollableParent;

package/dist/cjs/components/menu/utilities/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./flip-position"), exports);
+__exportStar(require("./get-scrollable-parent"), exports);

package/dist/cjs/components/modal/MrlModal/MrlModal.global.css

@@ -0,0 +1,338 @@
+:root {
+  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton);
+  --mrl-button-border-radius: var(--mrl-border-radius-functional);
+}
+
+.mrl-u-preHydrateSkeleton mrl-button:not(.hydrated),
+.mrl-u-preHydrateSkeleton mrl-icon-button:not(.hydrated),
+.mrl-u-preHydrateSkeleton mrl-shadow-button:not(.hydrated) {
+  min-height: var(--mrl-spacing-09);
+  min-width: var(--mrl-spacing-09);
+  background: var(--mrl-button-background-color-skeleton);
+  border-radius: var(--mrl-button-border-radius);
+  box-shadow: none;
+  color: transparent;
+  display: inline-flex;
+  font-family: var(--mrl-body-font);
+  pointer-events: none;
+  visibility: inherit;
+}
+.mrl-u-preHydrateSkeleton mrl-button[kind=inverse]:not(.hydrated),
+.mrl-u-preHydrateSkeleton mrl-button[kind=ghost-inverse]:not(.hydrated),
+.mrl-u-preHydrateSkeleton mrl-icon-button[kind=inverse]:not(.hydrated),
+.mrl-u-preHydrateSkeleton mrl-icon-button[kind=ghost-inverse]:not(.hydrated),
+.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=inverse]:not(.hydrated),
+.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=ghost-inverse]:not(.hydrated) {
+  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
+}
+
+mrl-button[size=small],
+mrl-shadow-button[size=small] {
+  min-height: var(--mrl-spacing-08);
+}
+
+mrl-icon-button[size=small] {
+  min-height: var(--mrl-spacing-08);
+  min-width: var(--mrl-spacing-08);
+}
+
+mrl-button[size=large],
+mrl-shadow-button[size=large] {
+  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+}
+
+mrl-icon-button[size=large] {
+  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+  min-width: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+}
+
+mrl-icon-button[size=xsmall][kind=ghost],
+mrl-icon-button[size=xsmall][kind=ghost-inverse] {
+  min-height: var(--mrl-spacing-07);
+  min-width: var(--mrl-spacing-07);
+}
+
+.mrlIconButton,
+.mrlButton {
+  --mrl-button-background-color: var(--mrl-color-background);
+  --mrl-button-background-color-active: rgba(var(--mrl-gray-20), 1);
+  --mrl-button-background-color-disabled: var(--mrl-color-background);
+  --mrl-button-background-color-hover: rgba(var(--mrl-gray-10), 1);
+  --mrl-button-border-color: rgba(var(--mrl-gray-30), 1);
+  --mrl-button-border-color-active: rgba(var(--mrl-gray-50), 1);
+  --mrl-button-border-color-disabled: rgba(var(--mrl-gray-20), 1);
+  --mrl-button-border-color-hover: rgba(var(--mrl-gray-40), 1);
+  --mrl-button-border-width: var(--mrl-line-width-border);
+  --mrl-button-icon-size: var(--mrl-spacing-07);
+  --mrl-button-text-color: rgba(var(--mrl-gray-80), 1);
+  --mrl-button-text-color-active: rgba(var(--mrl-black), 1);
+  --mrl-button-text-color-disabled: var(--mrl-color-text-disabled);
+  --mrl-button-text-color-hover: rgba(var(--mrl-gray-90), 1);
+  --mrl-button-inset-vertical: 0;
+  --mrl-button-inset-horizontal: var(--mrl-space-inset-control-large);
+  --mrl-button-icon-margin-right: var(--mrl-space-inline-related);
+}
+.mrlIconButton--small,
+.mrlButton--small {
+  min-height: var(--mrl-spacing-08);
+  --mrl-button-icon-size: var(--mrl-spacing-06);
+  --mrl-button-inset-horizontal: var(--mrl-spacing-04);
+}
+.mrlIconButton.mrlIconButton--xsmall,
+.mrlButton.mrlIconButton--xsmall {
+  --mrl-button-icon-size: var(--mrl-spacing-06);
+}
+.mrlIconButton.mrlButton--xsmall,
+.mrlButton.mrlButton--xsmall {
+  --mrl-button-icon-size: var(--mrl-spacing-05);
+}
+.mrlIconButton.mrlIconButton--small,
+.mrlButton.mrlIconButton--small {
+  min-height: var(--mrl-spacing-08);
+  min-width: var(--mrl-spacing-08);
+}
+.mrlIconButton.mrlIconButton--small + .mrl-tooltip-content,
+.mrlButton.mrlIconButton--small + .mrl-tooltip-content {
+  --mrl-tooltip-arrow-spacing: calc(
+  	(var(--mrl-spacing-08) - var(--mrl-tooltip-arrow-size)) / 2
+  );
+}
+.mrlIconButton--large,
+.mrlButton--large {
+  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+  --mrl-button-inset-horizontal: var(--mrl-spacing-05);
+}
+.mrlIconButton.mrlIconButton--large,
+.mrlButton.mrlIconButton--large {
+  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+  min-width: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+}
+.mrlIconButton.mrlButton--primary, .mrlIconButton.mrlButton--ghost, .mrlIconButton.mrlButton--ghost-inverse, .mrlIconButton.mrlIconButton--primary, .mrlIconButton.mrlIconButton--ghost, .mrlIconButton.mrlIconButton--ghost-inverse,
+.mrlButton.mrlButton--primary,
+.mrlButton.mrlButton--ghost,
+.mrlButton.mrlButton--ghost-inverse,
+.mrlButton.mrlIconButton--primary,
+.mrlButton.mrlIconButton--ghost,
+.mrlButton.mrlIconButton--ghost-inverse {
+  --mrl-button-border-color: transparent;
+  --mrl-button-border-color-active: transparent;
+  --mrl-button-border-color-hover: transparent;
+  --mrl-button-border-color-disabled: transparent;
+}
+.mrlIconButton--secondary-native,
+.mrlButton--secondary-native {
+  --mrl-button-border-color: transparent;
+  --mrl-button-border-color-active: transparent;
+  --mrl-button-border-color-hover: transparent;
+  --mrl-button-border-color-disabled: transparent;
+}
+.mrlIconButton--primary,
+.mrlButton--primary {
+  --mrl-button-background-color: var(--mrl-color-brand);
+  --mrl-button-background-color-active: var(--mrl-color-brand-active);
+  --mrl-button-background-color-disabled: var(--mrl-color-background-disabled);
+  --mrl-button-background-color-hover: var(--mrl-color-brand-hover);
+  --mrl-button-text-color: var(--mrl-color-text-inverse);
+  --mrl-button-text-color-active: var(--mrl-color-text-inverse);
+  --mrl-button-text-color-disabled: var(--mrl-color-text-inverse);
+  --mrl-button-text-color-hover: var(--mrl-color-text-inverse);
+}
+.mrlIconButton--primary-native,
+.mrlButton--primary-native {
+  --mrl-button-background-color: transparent;
+  --mrl-button-background-color-active: var(--mrl-black-opacity-01);
+  --mrl-button-background-color-disabled: transparent;
+  --mrl-button-background-color-hover: var(--mrl-black-opacity-00);
+  --mrl-button-border-color: transparent;
+  --mrl-button-border-color-active: transparent;
+  --mrl-button-border-color-hover: transparent;
+  --mrl-button-border-color-disabled: transparent;
+  --mrl-button-text-color: rgba(var(--mrl-blue-70), 1);
+  --mrl-button-text-color-active: rgba(var(--mrl-blue-70), 1);
+  --mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
+  --mrl-button-text-color-hover: rgba(var(--mrl-blue-70), 1);
+}
+.mrlIconButton--ghost,
+.mrlButton--ghost {
+  --mrl-button-background-color: transparent;
+  --mrl-button-background-color-active: var(--mrl-black-opacity-01);
+  --mrl-button-background-color-hover: var(--mrl-black-opacity-00);
+  --mrl-button-background-color-disabled: transparent;
+  --mrl-button-text-color: rgba(var(--mrl-gray-100), 1);
+  --mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);
+  --mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
+  --mrl-button-text-color-hover: rgba(var(--mrl-gray-100), 1);
+  --mrl-button-inset-horizontal: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+  --mrl-button-icon-margin-right: var(--mrl-spacing-02);
+}
+.mrlIconButton--ghost[aria-pressed=true], .mrlIconButton--ghost[aria-checked=true], .mrlIconButton--ghost[aria-expanded=true], .mrlIconButton--ghost[aria-selected=true],
+.mrlButton--ghost[aria-pressed=true],
+.mrlButton--ghost[aria-checked=true],
+.mrlButton--ghost[aria-expanded=true],
+.mrlButton--ghost[aria-selected=true] {
+  --mrl-button-background-color: var(--mrl-color-background-inverse);
+  --mrl-button-text-color: var(--mrl-color-text-inverse);
+}
+.mrlIconButton--ghost-inverse,
+.mrlButton--ghost-inverse {
+  --mrl-button-background-color: transparent;
+  --mrl-button-background-color-active: var(--mrl-white-opacity-04);
+  --mrl-button-background-color-hover: var(--mrl-white-opacity-02);
+  --mrl-button-background-color-disabled: transparent;
+  --mrl-button-text-color: var(--mrl-color-text-inverse);
+  --mrl-button-text-color-active: var(--mrl-color-text-inverse);
+  --mrl-button-text-color-hover: var(--mrl-color-text-inverse);
+  --mrl-button-text-color-disabled: var(--mrl-white-opacity-04);
+  --mrl-button-inset-horizontal: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+  --mrl-button-icon-margin-right: var(--mrl-spacing-02);
+}
+.mrlIconButton--ghost-inverse.mrlButton--skeleton,
+.mrlButton--ghost-inverse.mrlButton--skeleton {
+  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
+}
+.mrlIconButton--ghost-inverse.toggleStyle--default[aria-pressed=true], .mrlIconButton--ghost-inverse.toggleStyle--default[aria-checked=true], .mrlIconButton--ghost-inverse.toggleStyle--default[aria-expanded=true], .mrlIconButton--ghost-inverse.toggleStyle--default[aria-selected=true],
+.mrlButton--ghost-inverse.toggleStyle--default[aria-pressed=true],
+.mrlButton--ghost-inverse.toggleStyle--default[aria-checked=true],
+.mrlButton--ghost-inverse.toggleStyle--default[aria-expanded=true],
+.mrlButton--ghost-inverse.toggleStyle--default[aria-selected=true] {
+  --mrl-button-background-color: var(--mrl-color-background);
+  --mrl-button-text-color: var(--mrl-color-text);
+}
+.mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-pressed=true], .mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-checked=true], .mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-expanded=true], .mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-selected=true],
+.mrlButton--ghost-inverse.toggleStyle--secondary[aria-pressed=true],
+.mrlButton--ghost-inverse.toggleStyle--secondary[aria-checked=true],
+.mrlButton--ghost-inverse.toggleStyle--secondary[aria-expanded=true],
+.mrlButton--ghost-inverse.toggleStyle--secondary[aria-selected=true] {
+  --mrl-button-background-color: var(--mrl-color-accent);
+  --mrl-button-text-color: var(--mrl-color-text-inverse);
+}
+.mrlIconButton--ghost-inverse[aria-disabled=true][aria-pressed=true], .mrlIconButton--ghost-inverse[aria-disabled=true][aria-checked=true], .mrlIconButton--ghost-inverse[aria-disabled=true][aria-expanded=true], .mrlIconButton--ghost-inverse[aria-disabled=true][aria-selected=true],
+.mrlButton--ghost-inverse[aria-disabled=true][aria-pressed=true],
+.mrlButton--ghost-inverse[aria-disabled=true][aria-checked=true],
+.mrlButton--ghost-inverse[aria-disabled=true][aria-expanded=true],
+.mrlButton--ghost-inverse[aria-disabled=true][aria-selected=true] {
+  --mrl-button-background-color-disabled: var(--mrl-white-opacity-03);
+  --mrl-button-text-color-disabled: var(--mrl-white-opacity-04);
+}
+.mrlIconButton--inverse,
+.mrlButton--inverse {
+  --mrl-button-background-color: var(--mrl-color-background);
+  --mrl-button-background-color-active: var(--mrl-white-opacity-06);
+  --mrl-button-background-color-hover: var(--mrl-white-opacity-08);
+  --mrl-button-background-color-disabled: var(--mrl-white-opacity-03);
+  --mrl-button-border-color: transparent;
+  --mrl-button-border-color-active: transparent;
+  --mrl-button-border-color-hover: transparent;
+  --mrl-button-border-color-disabled: transparent;
+  --mrl-button-text-color: rgba(var(--mrl-gray-100), 1);
+  --mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);
+  --mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
+}
+.mrlIconButton--inverse.mrlButton--skeleton,
+.mrlButton--inverse.mrlButton--skeleton {
+  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
+}
+.mrlIconButton[aria-disabled=true][aria-pressed=true], .mrlIconButton[aria-disabled=true][aria-checked=true], .mrlIconButton[aria-disabled=true][aria-expanded=true], .mrlIconButton[aria-disabled=true][aria-selected=true],
+.mrlButton[aria-disabled=true][aria-pressed=true],
+.mrlButton[aria-disabled=true][aria-checked=true],
+.mrlButton[aria-disabled=true][aria-expanded=true],
+.mrlButton[aria-disabled=true][aria-selected=true] {
+  --mrl-button-background-color-disabled: var(--mrl-black-opacity-03);
+  --mrl-button-text-color-disabled: var(--mrl-color-text-inverse);
+}
+
+.mrl-modal {
+  --mrl-modal-header-text-color: rgba(var(--mrl-gray-100), 1);
+  --mrl-modal-padding-vertical: var(--mrl-spacing-07);
+  --mrl-modal-padding-vertical-bottom: var(--mrl-spacing-06);
+  --mrl-modal-padding-vertical-top: var(--mrl-spacing-07);
+  --mrl-modal-padding-vertical-footer: var(--mrl-spacing-07);
+  --mrl-modal-padding-vertical-content: var(--mrl-spacing-02);
+  --mrl-modal-padding-horizontal: var(--mrl-spacing-07);
+  --mrl-modal-close-inline-margin: var(--mrl-space-inline-related);
+  --mrl-modal-close-offset: var(--mrl-spacing-06);
+}
+
+@media screen and (min-width: 37.5rem) {
+  .mrl-modal,
+  .mrl-modal .footer.slotted .mrl-modal-footer,
+  .mrl-modal .header.slotted .mrl-modal-header {
+    --mrl-modal-padding-horizontal: var(--mrl-spacing-08);
+  }
+  .mrl-modal--large,
+  .mrl-modal--large .footer.slotted .mrl-modal-footer,
+  .mrl-modal--large .header.slotted .mrl-modal-header {
+    --mrl-modal-padding-horizontal: var(--mrl-spacing-09);
+  }
+}
+.mrl-native-modal,
+.mrl-display-modal {
+  --mrl-modal-padding-horizontal: var(--mrl-spacing-05);
+}
+
+.mrl-modal-backdrop {
+  --mrl-modal-backdrop-background: var(--mrl-black-opacity-05);
+}
+
+.mrl-modal {
+  --mrl-modal-size: 600px;
+  --mrl-modal-border-radius: var(--mrl-radii-05);
+  --mrl-modal-background: var(--mrl-color-background);
+  --mrl-modal-max-height: 95vh;
+}
+
+@media screen and (min-width: 37.5rem) {
+  .mrl-modal--small {
+    --mrl-modal-size: 400px;
+  }
+  .mrl-modal--large {
+    --mrl-modal-size: 800px;
+  }
+}
+.mrl-native-modal,
+.mrl-display-modal {
+  --mrl-modal-border-radius: var(--mrl-radii-04);
+  --mrl-modal-size: 600px;
+  --mrl-modal-max-height: 642px;
+}
+
+@media screen and (min-width: 37.5rem) {
+  .mrl-modal {
+    border-radius: var(--mrl-modal-border-radius);
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--mrl-shadow-03);
+    height: auto;
+    margin: var(--mrl-spacing-08);
+    max-height: var(--mrl-modal-max-height);
+    max-width: var(--mrl-modal-size);
+  }
+  .mrl-native-modal,
+  .mrl-display-modal {
+    height: min(var(--mrl-modal-max-height), 100vh - var(--mrl-spacing-09) - var(--mrl-spacing-08));
+    margin-bottom: initial;
+    max-height: initial;
+  }
+}
+.mrl-native-modal,
+.mrl-display-modal {
+  border-radius: var(--mrl-modal-border-radius) var(--mrl-modal-border-radius) 0 0;
+}
+@media screen and (min-width: 37.5rem) {
+  .mrl-native-modal,
+  .mrl-display-modal {
+    border-radius: var(--mrl-modal-border-radius);
+  }
+}
+.mrl-native-modal .mrl-modal-close,
+.mrl-display-modal .mrl-modal-close {
+  display: none;
+}
+.mrl-native-modal .mrl-modal-header,
+.mrl-display-modal .mrl-modal-header {
+  position: relative;
+  text-align: center;
+}
+.mrl-native-modal .mrl-modal-header .mrl-text-heading,
+.mrl-display-modal .mrl-modal-header .mrl-text-heading {
+  text-align: center;
+  width: 100%;
+}