@moduix/react 2.5.1 → 2.6.0

package/dist/components/menu/Menu.js

@@ -1,11 +1,10 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { Menu, useMenu, useMenuContext, useMenuItemContext } from "@ark-ui/react/menu";
 import { clsx } from "clsx";
-import { Children, forwardRef, isValidElement } from "react";
+import { forwardRef } from "react";
 import { CheckIcon, ChevronDownIcon, ChevronRightIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
 import Menu_module from "./Menu.module.js";
 function MenuRoot({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }) {
@@ -35,7 +34,7 @@ const Menu_MenuTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className,
         ref: ref,
         "data-slot": "menu-trigger",
         asChild: asChild,
-        className: clsx(!asChild && Menu_module.trigger, normalizeClassName(className)),
+        className: clsx(!asChild && Menu_module.trigger, className),
         ...props
     });
 });
@@ -53,7 +52,7 @@ const Menu_MenuIndicator = /*#__PURE__*/ forwardRef(function({ className, childr
     return /*#__PURE__*/ jsx(Menu.Indicator, {
         ref: ref,
         "data-slot": "menu-indicator",
-        className: clsx(Menu_module.indicator, normalizeClassName(className)),
+        className: clsx(Menu_module.indicator, className),
         ...props,
         children: children ?? /*#__PURE__*/ jsx(ChevronDownIcon, {
             className: Menu_module.iconSvg
@@ -65,7 +64,7 @@ const Menu_MenuContextTrigger = /*#__PURE__*/ forwardRef(function({ asChild, cla
         ref: ref,
         "data-slot": "menu-context-trigger",
         asChild: asChild,
-        className: clsx(!asChild && Menu_module.contextTrigger, normalizeClassName(className)),
+        className: clsx(!asChild && Menu_module.contextTrigger, className),
         ...props
     });
 });
@@ -74,43 +73,36 @@ const Menu_MenuPositioner = /*#__PURE__*/ forwardRef(function({ className, ...pr
         children: /*#__PURE__*/ jsx(Menu.Positioner, {
             ref: ref,
             "data-slot": "menu-positioner",
-            className: clsx(Menu_module.positioner, normalizeClassName(className)),
+            className: clsx(Menu_module.positioner, className),
             ...props
         })
     });
 });
 const Menu_MenuContent = /*#__PURE__*/ forwardRef(function({ asChild, className, children, ...props }, ref) {
-    if (asChild) return /*#__PURE__*/ jsx(Menu.Content, {
+    return /*#__PURE__*/ jsx(Menu.Content, {
         ref: ref,
         "data-slot": "menu-content",
-        asChild: true,
-        className: clsx(Menu_module.content, normalizeClassName(className)),
+        asChild: asChild,
+        className: clsx(Menu_module.content, className),
         ...props,
         children: children
     });
-    const childrenArray = Children.toArray(children);
-    const arrows = childrenArray.filter((child)=>/*#__PURE__*/ isValidElement(child) && child.type === Menu_MenuArrow);
-    const content = childrenArray.filter((child)=>!/*#__PURE__*/ isValidElement(child) || child.type !== Menu_MenuArrow);
-    return /*#__PURE__*/ jsxs(Menu.Content, {
+});
+const Menu_MenuViewport = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-slot": "menu-content",
-        asChild: asChild,
-        className: clsx(Menu_module.content, normalizeClassName(className)),
-        ...props,
-        children: [
-            arrows,
-            /*#__PURE__*/ jsx("div", {
-                className: Menu_module.contentViewport,
-                children: content
-            })
-        ]
+        "data-scope": "menu",
+        "data-part": "viewport",
+        "data-slot": "menu-viewport",
+        className: clsx(Menu_module.viewport, className),
+        ...props
     });
 });
 const Menu_MenuArrow = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.Arrow, {
         ref: ref,
         "data-slot": "menu-arrow",
-        className: clsx(Menu_module.arrow, normalizeClassName(className)),
+        className: clsx(Menu_module.arrow, className),
         ...props,
         children: children ?? /*#__PURE__*/ jsx(Menu_MenuArrowTip, {})
     });
@@ -119,7 +111,7 @@ const Menu_MenuArrowTip = /*#__PURE__*/ forwardRef(function({ className, ...prop
     return /*#__PURE__*/ jsx(Menu.ArrowTip, {
         ref: ref,
         "data-slot": "menu-arrow-tip",
-        className: clsx(Menu_module.arrowTip, normalizeClassName(className)),
+        className: clsx(Menu_module.arrowTip, className),
         ...props
     });
 });
@@ -128,7 +120,7 @@ const Menu_MenuItem = /*#__PURE__*/ forwardRef(function({ className, tone = 'def
         ref: ref,
         "data-slot": "menu-item",
         "data-tone": tone,
-        className: clsx(Menu_module.item, normalizeClassName(className)),
+        className: clsx(Menu_module.item, className),
         ...props
     });
 });
@@ -136,7 +128,7 @@ const Menu_MenuTriggerItem = /*#__PURE__*/ forwardRef(function({ className, chil
     return /*#__PURE__*/ jsx(Menu.TriggerItem, {
         ref: ref,
         "data-slot": "menu-trigger-item",
-        className: clsx(Menu_module.triggerItem, normalizeClassName(className)),
+        className: clsx(Menu_module.triggerItem, className),
         ...props,
         children: children
     });
@@ -155,7 +147,7 @@ const Menu_MenuSeparator = /*#__PURE__*/ forwardRef(function({ className, ...pro
     return /*#__PURE__*/ jsx(Menu.Separator, {
         ref: ref,
         "data-slot": "menu-separator",
-        className: clsx(Menu_module.separator, normalizeClassName(className)),
+        className: clsx(Menu_module.separator, className),
         ...props
     });
 });
@@ -163,7 +155,7 @@ const Menu_MenuItemGroup = /*#__PURE__*/ forwardRef(function({ className, ...pro
     return /*#__PURE__*/ jsx(Menu.ItemGroup, {
         ref: ref,
         "data-slot": "menu-item-group",
-        className: clsx(Menu_module.itemGroup, normalizeClassName(className)),
+        className: clsx(Menu_module.itemGroup, className),
         ...props
     });
 });
@@ -171,7 +163,7 @@ const Menu_MenuItemGroupLabel = /*#__PURE__*/ forwardRef(function({ className, .
     return /*#__PURE__*/ jsx(Menu.ItemGroupLabel, {
         ref: ref,
         "data-slot": "menu-item-group-label",
-        className: clsx(Menu_module.itemGroupLabel, normalizeClassName(className)),
+        className: clsx(Menu_module.itemGroupLabel, className),
         ...props
     });
 });
@@ -179,7 +171,7 @@ const Menu_MenuRadioItemGroup = /*#__PURE__*/ forwardRef(function({ className, .
     return /*#__PURE__*/ jsx(Menu.RadioItemGroup, {
         ref: ref,
         "data-slot": "menu-radio-item-group",
-        className: clsx(Menu_module.radioItemGroup, normalizeClassName(className)),
+        className: clsx(Menu_module.radioItemGroup, className),
         ...props
     });
 });
@@ -188,7 +180,7 @@ const Menu_MenuRadioItem = /*#__PURE__*/ forwardRef(function({ className, indica
         ref: ref,
         "data-slot": "menu-radio-item",
         "data-indicator-position": indicator,
-        className: clsx(Menu_module.radioItem, normalizeClassName(className)),
+        className: clsx(Menu_module.radioItem, className),
         ...props
     });
 });
@@ -197,7 +189,7 @@ const Menu_MenuCheckboxItem = /*#__PURE__*/ forwardRef(function({ className, ind
         ref: ref,
         "data-slot": "menu-checkbox-item",
         "data-indicator-position": indicator,
-        className: clsx(Menu_module.checkboxItem, normalizeClassName(className)),
+        className: clsx(Menu_module.checkboxItem, className),
         ...props
     });
 });
@@ -205,7 +197,7 @@ const Menu_MenuItemIndicator = /*#__PURE__*/ forwardRef(function({ className, ch
     return /*#__PURE__*/ jsx(Menu.ItemIndicator, {
         ref: ref,
         "data-slot": "menu-item-indicator",
-        className: clsx(Menu_module.itemIndicator, normalizeClassName(className)),
+        className: clsx(Menu_module.itemIndicator, className),
         ...props,
         children: children ?? /*#__PURE__*/ jsx(CheckIcon, {
             className: Menu_module.itemIndicatorIcon
@@ -216,7 +208,7 @@ const Menu_MenuItemText = /*#__PURE__*/ forwardRef(function({ className, ...prop
     return /*#__PURE__*/ jsx(Menu.ItemText, {
         ref: ref,
         "data-slot": "menu-item-text",
-        className: clsx(Menu_module.itemText, normalizeClassName(className)),
+        className: clsx(Menu_module.itemText, className),
         ...props
     });
 });
@@ -224,7 +216,7 @@ const Menu_MenuItemTextContent = /*#__PURE__*/ forwardRef(function({ className,
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
         "data-slot": "menu-item-text-content",
-        className: clsx(Menu_module.itemTextContent, normalizeClassName(className)),
+        className: clsx(Menu_module.itemTextContent, className),
         ...props
     });
 });
@@ -232,7 +224,7 @@ const Menu_MenuItemTextIcon = /*#__PURE__*/ forwardRef(function({ className, ...
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
         "data-slot": "menu-item-text-icon",
-        className: clsx(Menu_module.itemTextIcon, normalizeClassName(className)),
+        className: clsx(Menu_module.itemTextIcon, className),
         ...props
     });
 });
@@ -240,7 +232,7 @@ const Menu_MenuItemTextLabel = /*#__PURE__*/ forwardRef(function({ className, ..
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
         "data-slot": "menu-item-text-label",
-        className: clsx(Menu_module.itemTextLabel, normalizeClassName(className)),
+        className: clsx(Menu_module.itemTextLabel, className),
         ...props
     });
 });
@@ -248,7 +240,7 @@ const Menu_MenuItemShortcut = /*#__PURE__*/ forwardRef(function({ className, ...
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
         "data-slot": "menu-item-shortcut",
-        className: clsx(Menu_module.itemShortcut, normalizeClassName(className)),
+        className: clsx(Menu_module.itemShortcut, className),
         ...props
     });
 });
@@ -262,6 +254,7 @@ const Menu_Menu = Object.assign(MenuRoot, {
     ContextTrigger: Menu_MenuContextTrigger,
     Positioner: Menu_MenuPositioner,
     Content: Menu_MenuContent,
+    Viewport: Menu_MenuViewport,
     Arrow: Menu_MenuArrow,
     ArrowTip: Menu_MenuArrowTip,
     Item: Menu_MenuItem,

package/dist/components/menu/Menu.module.js

@@ -8,8 +8,8 @@ const Menu_module = {
     positioner: "positioner-Dxj8G1",
     content: "content-yFF7GN",
     menuContentIn: "menuContentIn-XDpUnW",
-    contentViewport: "contentViewport-GpY3ZX",
     menuContentOut: "menuContentOut-Q7Drkj",
+    viewport: "viewport-aiGW8J",
     arrow: "arrow-sziCms",
     arrowTip: "arrowTip-h3KKa6",
     item: "item-DZSt0x",

package/dist/components/menu/Menu_module.css

@@ -44,7 +44,7 @@
           -1);
   }
 
-  :is(.trigger-GnJcCa, .contextTrigger-jyrQRV)[data-disabled], :is(.trigger-GnJcCa, .contextTrigger-jyrQRV):disabled {
+  :is(.trigger-GnJcCa, .contextTrigger-jyrQRV)[data-disabled] {
     pointer-events: none;
     opacity: var(--moduix-menu-disabled-opacity, var(--moduix-opacity-disabled));
   }
@@ -100,19 +100,19 @@
             var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
   }
 
-  .content-yFF7GN .contentViewport-GpY3ZX {
-    max-height: min(var(--moduix-menu-popup-max-height, 24rem), var(--available-height, 100dvh));
-    flex-direction: column;
-    display: flex;
-    overflow: auto;
-  }
-
   .content-yFF7GN[data-state="closed"] {
     animation: menuContentOut-Q7Drkj
         var(--moduix-menu-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
             var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
   }
 
+  .viewport-aiGW8J {
+    max-height: min(var(--moduix-menu-popup-max-height, 24rem), var(--available-height, 100dvh));
+    flex-direction: column;
+    display: flex;
+    overflow: auto;
+  }
+
   .arrow-sziCms {
     --arrow-background: var(--moduix-menu-popup-bg, var(--moduix-color-popover));
   }

package/dist/components/native-select/NativeSelect.js

@@ -3,7 +3,6 @@ import { Field } from "@ark-ui/react/field";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
 import { ChevronDownIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import NativeSelect_module from "./NativeSelect.module.js";
 const NativeSelect_NativeSelectRoot = /*#__PURE__*/ forwardRef(function({ className, controlProps, ...props }, ref) {
     return /*#__PURE__*/ jsxs("span", {
@@ -11,13 +10,13 @@ const NativeSelect_NativeSelectRoot = /*#__PURE__*/ forwardRef(function({ classN
         "data-scope": "native-select",
         "data-part": "control",
         "data-slot": "native-select-control",
-        className: clsx(NativeSelect_module.control, normalizeClassName(controlProps?.className)),
+        className: clsx(NativeSelect_module.control, controlProps?.className),
         children: [
             /*#__PURE__*/ jsx(Field.Select, {
                 ...props,
                 ref: ref,
                 "data-slot": "native-select-root",
-                className: clsx(NativeSelect_module.root, normalizeClassName(className))
+                className: clsx(NativeSelect_module.root, className)
             }),
             /*#__PURE__*/ jsx("span", {
                 "aria-hidden": "true",

package/dist/components/native-select/NativeSelect_module.css

@@ -1,6 +1,5 @@
 @layer moduix.components {
   .control-D7osAi {
-    width: -moz-fit-content;
     width: fit-content;
     min-width: 0;
     max-width: 100%;

package/dist/components/navigation-menu/NavigationMenu.js

@@ -1,15 +1,14 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { NavigationMenu, useNavigationMenu, useNavigationMenuContext } from "@ark-ui/react/navigation-menu";
 import { clsx } from "clsx";
-import { Children, forwardRef, isValidElement } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import { forwardRef } from "react";
 import NavigationMenu_module from "./NavigationMenu.module.js";
 const NavigationMenu_NavigationMenuRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(NavigationMenu.Root, {
         ref: ref,
         "data-slot": "navigation-menu-root",
-        className: clsx(NavigationMenu_module.root, normalizeClassName(className)),
+        className: clsx(NavigationMenu_module.root, className),
         ...props
     });
 });
@@ -17,7 +16,7 @@ const NavigationMenu_NavigationMenuRootProvider = /*#__PURE__*/ forwardRef(funct
     return /*#__PURE__*/ jsx(NavigationMenu.RootProvider, {
         ref: ref,
         "data-slot": "navigation-menu-root-provider",
-        className: clsx(NavigationMenu_module.root, normalizeClassName(className)),
+        className: clsx(NavigationMenu_module.root, className),
         ...props
     });
 });
@@ -25,7 +24,7 @@ const NavigationMenu_NavigationMenuList = /*#__PURE__*/ forwardRef(function({ cl
     return /*#__PURE__*/ jsx(NavigationMenu.List, {
         ref: ref,
         "data-slot": "navigation-menu-list",
-        className: clsx(NavigationMenu_module.list, normalizeClassName(className)),
+        className: clsx(NavigationMenu_module.list, className),
         ...props
     });
 });
@@ -33,7 +32,7 @@ const NavigationMenu_NavigationMenuItem = /*#__PURE__*/ forwardRef(function({ cl
     return /*#__PURE__*/ jsx(NavigationMenu.Item, {
         ref: ref,
         "data-slot": "navigation-menu-item",
-        className: clsx(NavigationMenu_module.item, normalizeClassName(className)),
+        className: clsx(NavigationMenu_module.item, className),
         ...props
     });
 });
@@ -42,41 +41,23 @@ const NavigationMenu_NavigationMenuTrigger = /*#__PURE__*/ forwardRef(function({
         ref: ref,
         asChild: asChild,
         "data-slot": "navigation-menu-trigger",
-        className: clsx(!asChild && NavigationMenu_module.trigger, normalizeClassName(className)),
+        className: clsx(!asChild && NavigationMenu_module.trigger, className),
         ...props
     });
 });
-const NavigationMenu_NavigationMenuContent = /*#__PURE__*/ forwardRef(function({ asChild, className, children, ...props }, ref) {
-    if (asChild) return /*#__PURE__*/ jsx(NavigationMenu.Content, {
+const NavigationMenu_NavigationMenuContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(NavigationMenu.Content, {
         ref: ref,
-        asChild: true,
         "data-slot": "navigation-menu-content",
-        className: clsx(NavigationMenu_module.content, normalizeClassName(className)),
-        ...props,
-        children: children
-    });
-    const childrenArray = Children.toArray(children);
-    const indicators = childrenArray.filter((child)=>/*#__PURE__*/ isValidElement(child) && child.type === NavigationMenu_NavigationMenuIndicator);
-    const content = childrenArray.filter((child)=>!/*#__PURE__*/ isValidElement(child) || child.type !== NavigationMenu_NavigationMenuIndicator);
-    return /*#__PURE__*/ jsxs(NavigationMenu.Content, {
-        ref: ref,
-        "data-slot": "navigation-menu-content",
-        className: clsx(NavigationMenu_module.content, normalizeClassName(className)),
-        ...props,
-        children: [
-            indicators,
-            /*#__PURE__*/ jsx("div", {
-                className: NavigationMenu_module.contentViewport,
-                children: content
-            })
-        ]
+        className: clsx(NavigationMenu_module.content, className),
+        ...props
     });
 });
 const NavigationMenu_NavigationMenuLink = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(NavigationMenu.Link, {
         ref: ref,
         "data-slot": "navigation-menu-link",
-        className: clsx(NavigationMenu_module.link, normalizeClassName(className)),
+        className: clsx(NavigationMenu_module.link, className),
         ...props
     });
 });
@@ -84,7 +65,7 @@ const NavigationMenu_NavigationMenuIndicator = /*#__PURE__*/ forwardRef(function
     return /*#__PURE__*/ jsx(NavigationMenu.Indicator, {
         ref: ref,
         "data-slot": "navigation-menu-indicator",
-        className: clsx(NavigationMenu_module.indicator, normalizeClassName(className)),
+        className: clsx(NavigationMenu_module.indicator, className),
         ...props
     });
 });
@@ -92,7 +73,7 @@ const NavigationMenu_NavigationMenuItemIndicator = /*#__PURE__*/ forwardRef(func
     return /*#__PURE__*/ jsx(NavigationMenu.ItemIndicator, {
         ref: ref,
         "data-slot": "navigation-menu-item-indicator",
-        className: clsx(NavigationMenu_module.itemIndicator, normalizeClassName(className)),
+        className: clsx(NavigationMenu_module.itemIndicator, className),
         ...props
     });
 });
@@ -100,7 +81,7 @@ const NavigationMenu_NavigationMenuArrow = /*#__PURE__*/ forwardRef(function({ c
     return /*#__PURE__*/ jsx(NavigationMenu.Arrow, {
         ref: ref,
         "data-slot": "navigation-menu-arrow",
-        className: clsx(NavigationMenu_module.arrow, normalizeClassName(className)),
+        className: clsx(NavigationMenu_module.arrow, className),
         ...props
     });
 });
@@ -108,7 +89,7 @@ const NavigationMenu_NavigationMenuViewportPositioner = /*#__PURE__*/ forwardRef
     return /*#__PURE__*/ jsx(NavigationMenu.ViewportPositioner, {
         ref: ref,
         "data-slot": "navigation-menu-viewport-positioner",
-        className: clsx(NavigationMenu_module.viewportPositioner, normalizeClassName(className)),
+        className: clsx(NavigationMenu_module.viewportPositioner, className),
         ...props
     });
 });
@@ -116,7 +97,7 @@ const NavigationMenu_NavigationMenuViewport = /*#__PURE__*/ forwardRef(function(
     return /*#__PURE__*/ jsx(NavigationMenu.Viewport, {
         ref: ref,
         "data-slot": "navigation-menu-viewport",
-        className: clsx(NavigationMenu_module.viewport, normalizeClassName(className)),
+        className: clsx(NavigationMenu_module.viewport, className),
         ...props
     });
 });

package/dist/components/navigation-menu/NavigationMenu.module.js

@@ -5,15 +5,14 @@ const NavigationMenu_module = {
     item: "item-LmKKOe",
     viewportPositioner: "viewportPositioner-hUgOWA",
     viewport: "viewport-Gtf85E",
+    indicator: "indicator-f9Famp",
+    content: "content-dvfEnJ",
     trigger: "trigger-Qt8Wrp",
     link: "link-HFA7O5",
-    content: "content-dvfEnJ",
     "navigation-menu-content-in": "navigation-menu-content-in-z6oz3S",
     navigationMenuContentIn: "navigation-menu-content-in-z6oz3S",
     "navigation-menu-content-out": "navigation-menu-content-out-PRe3xI",
     navigationMenuContentOut: "navigation-menu-content-out-PRe3xI",
-    contentViewport: "contentViewport-MCA9d7",
-    indicator: "indicator-f9Famp",
     "navigation-menu-indicator-in": "navigation-menu-indicator-in-CVxbn2",
     navigationMenuIndicatorIn: "navigation-menu-indicator-in-CVxbn2",
     "navigation-menu-indicator-out": "navigation-menu-indicator-out-rEIfTV",

package/dist/components/navigation-menu/NavigationMenu_module.css

@@ -1,7 +1,6 @@
 @layer moduix.components {
   .root-l1uCDR {
     box-sizing: border-box;
-    inline-size: -moz-fit-content;
     inline-size: fit-content;
     min-inline-size: 0;
     max-inline-size: 100%;
@@ -32,10 +31,14 @@
     position: relative;
   }
 
-  .root-l1uCDR:has( > .viewportPositioner-hUgOWA > .viewport-Gtf85E) .item-LmKKOe {
+  :is(.root-l1uCDR:has( > .viewportPositioner-hUgOWA > .viewport-Gtf85E) .item-LmKKOe, .list-vJ6fy3:has( > .indicator-f9Famp) .item-LmKKOe) {
     position: static;
   }
 
+  .list-vJ6fy3:has( > .indicator-f9Famp) .content-dvfEnJ[data-state="closed"] {
+    animation: none;
+  }
+
   .trigger-Qt8Wrp, .link-HFA7O5 {
     box-sizing: border-box;
     min-block-size: var(--moduix-navigation-menu-trigger-height, var(--moduix-size-md));
@@ -109,6 +112,8 @@
       calc(100vw - var(--moduix-spacing-6)));
     max-inline-size: min(var(--moduix-navigation-menu-content-max-width, 20rem),
       calc(100vw - var(--moduix-spacing-6)));
+    max-block-size: min(var(--moduix-navigation-menu-content-max-height, 24rem),
+      calc(100dvh - var(--moduix-spacing-6)));
     outline: var(--moduix-navigation-menu-content-border-width, var(--moduix-border-width-sm)) solid
       var(--moduix-navigation-menu-content-border-color, var(--moduix-color-border));
     border-radius: var(--moduix-navigation-menu-content-radius, var(--moduix-radius-md));
@@ -123,7 +128,7 @@
     position: absolute;
     inset-block-start: calc(100% + var(--moduix-navigation-menu-content-offset, var(--moduix-spacing-2)));
     inset-inline-start: 0;
-    overflow: visible;
+    overflow: auto;
   }
 
   .content-dvfEnJ[dir="rtl"] {
@@ -145,16 +150,6 @@
     pointer-events: none;
   }
 
-  .contentViewport-MCA9d7 {
-    z-index: 1;
-    max-block-size: min(var(--moduix-navigation-menu-content-max-height, 24rem),
-      calc(100dvh - var(--moduix-spacing-6)));
-    flex-direction: column;
-    display: flex;
-    position: relative;
-    overflow: auto;
-  }
-
   .content-dvfEnJ .link-HFA7O5 {
     margin-inline: var(--moduix-popup-highlight-inset-x, var(--moduix-spacing-1));
     border-radius: var(--moduix-navigation-menu-content-link-radius, var(--moduix-radius-sm));
@@ -187,13 +182,15 @@
   }
 
   .list-vJ6fy3 > .indicator-f9Famp {
+    z-index: calc(var(--moduix-navigation-menu-content-z-index, var(--moduix-z-popup)) + 1);
     inset-block-start: auto;
     inset-block-end: calc(-1 * var(--moduix-navigation-menu-indicator-size, var(--moduix-spacing-2-5)));
   }
 
   .arrow-oIu4Ws {
-    inline-size: var(--moduix-navigation-menu-arrow-size, var(--moduix-spacing-2-5));
-    block-size: var(--moduix-navigation-menu-arrow-size, var(--moduix-spacing-2-5));
+    --arrow-size: var(--moduix-navigation-menu-arrow-size, var(--moduix-spacing-2-5));
+    inline-size: var(--arrow-size);
+    block-size: var(--arrow-size);
     border-block-start: var(--moduix-navigation-menu-content-border-width, var(--moduix-border-width-sm))
       solid
       var(--moduix-navigation-menu-arrow-stroke-color, var(--moduix-navigation-menu-content-border-color, var(--moduix-color-border)));
@@ -230,17 +227,6 @@
     translate: 0;
   }
 
-  .viewportPositioner-hUgOWA > .indicator-f9Famp {
-    z-index: 1;
-    translate: calc(var(--trigger-x, 0px) - var(--viewport-x, 0px)) 0;
-    inset-block-start: calc(var(--moduix-navigation-menu-viewport-offset, var(--moduix-spacing-2)) -
-          var(--moduix-navigation-menu-indicator-size, var(--moduix-spacing-2-5)));
-  }
-
-  .viewportPositioner-hUgOWA[data-orientation="horizontal"] > .indicator-f9Famp {
-    overflow: hidden;
-  }
-
   .viewport-Gtf85E {
     box-sizing: border-box;
     inline-size: var(--viewport-width);
@@ -262,7 +248,7 @@
       block-size
         var(--moduix-navigation-menu-viewport-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
             var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
-    margin-block-start: var(--moduix-navigation-menu-viewport-offset, var(--moduix-spacing-2));
+    margin-block-start: var(--moduix-navigation-menu-viewport-offset, var(--moduix-navigation-menu-indicator-size, var(--moduix-spacing-2-5)));
     position: relative;
     overflow: hidden;
   }
@@ -288,6 +274,7 @@
   }
 
   .viewport-Gtf85E .content-dvfEnJ {
+    max-block-size: none;
     box-shadow: none;
     transform-origin: center;
     will-change: translate, opacity;
@@ -297,11 +284,7 @@
     margin: 0;
     position: absolute;
     inset: 0 auto auto 0;
-  }
-
-  .viewport-Gtf85E .contentViewport-MCA9d7 {
-    z-index: 2;
-    max-block-size: none;
+    overflow: visible;
   }
 
   .viewport-Gtf85E .content-dvfEnJ[data-state] {