@nswds/app 1.118.0 → 1.119.0

package/dist/index.d.cts

@@ -5421,6 +5421,7 @@ interface NavigationMenuMainNavigationProps {
     id?: string;
     variant?: NavigationMenuMainNavigationVariant;
     borderPosition?: NavigationMenuMainNavigationBorderPosition;
+    shadow?: boolean;
     className?: string;
     responsive?: boolean;
     sticky?: boolean;
@@ -5430,7 +5431,6 @@ interface NavigationMenuMainNavigationProps {
     borderClassName?: string;
     triggerClassName?: string;
     triggerActiveClassName?: string;
-    triggerActiveBorderClassName?: string;
     featuredLinkClassName?: string;
     sectionLinkClassName?: string;
     sectionLinkTitleClassName?: string;
@@ -5445,7 +5445,7 @@ interface NavigationMenuMainNavigationProps {
      */
     showBottomBorder?: boolean;
 }
-declare function NavigationMenuMainNavigation({ navigation, id, variant, borderPosition, className, responsive, sticky, fullBleed, backgroundClassName, dropdownBackgroundClassName, borderClassName, triggerClassName, triggerActiveClassName, triggerActiveBorderClassName, featuredLinkClassName, sectionLinkClassName, sectionLinkTitleClassName, showTopBorder, showBottomBorder, }: NavigationMenuMainNavigationProps): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuMainNavigation({ navigation, id, variant, borderPosition, shadow, className, responsive, sticky, fullBleed, backgroundClassName, dropdownBackgroundClassName, borderClassName, triggerClassName, triggerActiveClassName, featuredLinkClassName, sectionLinkClassName, sectionLinkTitleClassName, showTopBorder, showBottomBorder, }: NavigationMenuMainNavigationProps): react_jsx_runtime.JSX.Element;
 
 declare function NotFound(): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -5421,6 +5421,7 @@ interface NavigationMenuMainNavigationProps {
     id?: string;
     variant?: NavigationMenuMainNavigationVariant;
     borderPosition?: NavigationMenuMainNavigationBorderPosition;
+    shadow?: boolean;
     className?: string;
     responsive?: boolean;
     sticky?: boolean;
@@ -5430,7 +5431,6 @@ interface NavigationMenuMainNavigationProps {
     borderClassName?: string;
     triggerClassName?: string;
     triggerActiveClassName?: string;
-    triggerActiveBorderClassName?: string;
     featuredLinkClassName?: string;
     sectionLinkClassName?: string;
     sectionLinkTitleClassName?: string;
@@ -5445,7 +5445,7 @@ interface NavigationMenuMainNavigationProps {
      */
     showBottomBorder?: boolean;
 }
-declare function NavigationMenuMainNavigation({ navigation, id, variant, borderPosition, className, responsive, sticky, fullBleed, backgroundClassName, dropdownBackgroundClassName, borderClassName, triggerClassName, triggerActiveClassName, triggerActiveBorderClassName, featuredLinkClassName, sectionLinkClassName, sectionLinkTitleClassName, showTopBorder, showBottomBorder, }: NavigationMenuMainNavigationProps): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuMainNavigation({ navigation, id, variant, borderPosition, shadow, className, responsive, sticky, fullBleed, backgroundClassName, dropdownBackgroundClassName, borderClassName, triggerClassName, triggerActiveClassName, featuredLinkClassName, sectionLinkClassName, sectionLinkTitleClassName, showTopBorder, showBottomBorder, }: NavigationMenuMainNavigationProps): react_jsx_runtime.JSX.Element;
 
 declare function NotFound(): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -18254,6 +18254,29 @@ var expandableSearchButtonVariants = cva("", {
     variant: "default"
   }
 });
+var expandableSearchFocusVariants = cva("", {
+  variants: {
+    variant: {
+      default: "focus-visible:ring-grey-100",
+      "primary-800": "focus-visible:ring-primary-800",
+      "primary-600": "focus-visible:ring-primary-600",
+      "primary-400": "focus-visible:ring-primary-400",
+      "primary-200": "focus-visible:ring-primary-200",
+      "grey-800": "focus-visible:ring-grey-800",
+      "grey-600": "focus-visible:ring-grey-600",
+      "grey-400": "focus-visible:ring-grey-400",
+      "grey-200": "focus-visible:ring-grey-200",
+      "accent-800": "focus-visible:ring-accent-800",
+      "accent-600": "focus-visible:ring-accent-600",
+      "accent-400": "focus-visible:ring-accent-400",
+      "accent-200": "focus-visible:ring-accent-200",
+      white: "focus-visible:ring-white"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
 var ExpandableSearchContext = React5.createContext(null);
 var ExpandableSearch = React5.forwardRef(({ className, onAction, defaultValue = "", variant = "default", ...props }, ref) => {
   const [value, setValue] = React5.useState(defaultValue);
@@ -18282,28 +18305,32 @@ var ExpandableSearch = React5.forwardRef(({ className, onAction, defaultValue =
   );
 });
 ExpandableSearch.displayName = "ExpandableSearch";
-var ExpandableSearchField = React5.forwardRef(({ className, ...props }, ref) => {
+var ExpandableSearchField = React5.forwardRef(({ className, id: id3, ...props }, ref) => {
   const context = React5.useContext(ExpandableSearchContext);
   if (!context) throw new Error("ExpandableSearchField must be used within ExpandableSearch");
   const [isFocused, setIsFocused] = React5.useState(false);
+  const generatedId = React5.useId();
   const isActive = context.value.length > 0 || isFocused;
   const variant = context.variant;
+  const inputId = id3 ?? generatedId;
   return /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
-    /* @__PURE__ */ jsx("label", { className: "sr-only", htmlFor: "expandable-search", children: "Search" }),
+    /* @__PURE__ */ jsx("label", { className: "sr-only", htmlFor: inputId, children: "Search" }),
     /* @__PURE__ */ jsx(
       "input",
       {
         ref,
+        id: inputId,
         value: context.value,
         onChange: (e) => context.setValue(e.target.value),
         onFocus: () => setIsFocused(true),
         onBlur: () => setIsFocused(false),
         className: cn(
           "peer align-center flex h-12 w-12 cursor-pointer overflow-hidden rounded-sm border-0 text-transparent",
-          "ring-offset-white focus-visible:ring-2 focus-visible:ring-primary-650/70 focus-visible:ring-offset-2 focus-visible:outline-none",
+          "ring-offset-white focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
           "transition-[width,box-shadow,background-color] duration-300 ease-in-out",
           "placeholder:text-transparent placeholder:opacity-0",
           "expandable-search__input",
+          expandableSearchFocusVariants({ variant }),
           expandableSearchCollapsedVariants({ variant }),
           // Conditionally apply classes based on active state
           {
@@ -18858,7 +18885,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.117.0"};
+  version: "1.118.0"};
 var SluggerContext = React5__default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";
@@ -29817,20 +29844,24 @@ function createVariantStyles({
   border,
   triggerTone,
   triggerActive,
-  triggerEdge,
   featuredLink,
   sectionLink
 }) {
   return {
-    surface,
-    border,
-    triggerTone,
-    triggerActive,
-    triggerEdge,
-    dropdownSurface: "bg-white",
-    featuredLink,
-    sectionLink,
-    sectionLinkTitle: "text-grey-900"
+    surface: cn(surface, "dark:bg-grey-900 dark:text-white"),
+    border: cn(border, "dark:border-grey-700"),
+    triggerTone: cn(triggerTone, "dark:text-white"),
+    triggerActive: cn(
+      triggerActive,
+      "dark:hover:bg-grey-800 dark:hover:text-white dark:focus:bg-grey-800 dark:focus:text-white dark:data-[state=open]:bg-grey-800 dark:data-[state=open]:text-white"
+    ),
+    dropdownSurface: "bg-white dark:bg-grey-900",
+    featuredLink: cn(featuredLink, "dark:text-white dark:hover:bg-white/10"),
+    sectionLink: cn(
+      sectionLink,
+      "dark:border-grey-700 dark:bg-grey-900 dark:hover:bg-white/10 dark:hover:text-white"
+    ),
+    sectionLinkTitle: "text-grey-900 dark:text-white"
   };
 }
 var navigationMenuMainNavigationVariantStyles = {
@@ -29839,7 +29870,6 @@ var navigationMenuMainNavigationVariantStyles = {
     border: "border-primary-700",
     triggerTone: "text-white",
     triggerActive: "hover:bg-primary-700 hover:text-white focus:bg-primary-700 focus:text-white data-[state=open]:bg-primary-700 data-[state=open]:text-white",
-    triggerEdge: "hover:before:bg-primary-700 hover:after:bg-primary-700 focus:before:bg-primary-700 focus:after:bg-primary-700 data-[state=open]:before:bg-primary-700 data-[state=open]:after:bg-primary-700",
     featuredLink: "text-primary-800 hover:bg-primary-800/5",
     sectionLink: "border-grey-200 bg-white hover:bg-primary-800/5 hover:font-bold hover:text-primary-800"
   }),
@@ -29848,7 +29878,6 @@ var navigationMenuMainNavigationVariantStyles = {
     border: "border-primary-600",
     triggerTone: "text-white",
     triggerActive: "hover:bg-primary-700 hover:text-white focus:bg-primary-700 focus:text-white data-[state=open]:bg-primary-700 data-[state=open]:text-white",
-    triggerEdge: "hover:before:bg-primary-700 hover:after:bg-primary-700 focus:before:bg-primary-700 focus:after:bg-primary-700 data-[state=open]:before:bg-primary-700 data-[state=open]:after:bg-primary-700",
     featuredLink: "text-primary-800 hover:bg-primary-800/5",
     sectionLink: "border-grey-200 bg-white hover:bg-primary-800/5 hover:font-bold hover:text-primary-800"
   }),
@@ -29857,7 +29886,6 @@ var navigationMenuMainNavigationVariantStyles = {
     border: "border-primary-200",
     triggerTone: "text-primary-800",
     triggerActive: "hover:bg-primary-200 hover:text-primary-800 focus:bg-primary-200 focus:text-primary-800 data-[state=open]:bg-primary-200 data-[state=open]:text-primary-800",
-    triggerEdge: "hover:before:bg-primary-200 hover:after:bg-primary-200 focus:before:bg-primary-200 focus:after:bg-primary-200 data-[state=open]:before:bg-primary-200 data-[state=open]:after:bg-primary-200",
     featuredLink: "text-primary-800 hover:bg-primary-800/5",
     sectionLink: "border-grey-200 bg-white hover:bg-primary-800/5 hover:font-bold hover:text-primary-800"
   }),
@@ -29866,7 +29894,6 @@ var navigationMenuMainNavigationVariantStyles = {
     border: "border-primary-200",
     triggerTone: "text-primary-800",
     triggerActive: "hover:bg-primary-100 hover:text-primary-800 focus:bg-primary-100 focus:text-primary-800 data-[state=open]:bg-primary-100 data-[state=open]:text-primary-800",
-    triggerEdge: "hover:before:bg-primary-100 hover:after:bg-primary-100 focus:before:bg-primary-100 focus:after:bg-primary-100 data-[state=open]:before:bg-primary-100 data-[state=open]:after:bg-primary-100",
     featuredLink: "text-primary-800 hover:bg-primary-800/5",
     sectionLink: "border-grey-200 bg-white hover:bg-primary-800/5 hover:font-bold hover:text-primary-800"
   }),
@@ -29875,7 +29902,6 @@ var navigationMenuMainNavigationVariantStyles = {
     border: "border-grey-700",
     triggerTone: "text-white",
     triggerActive: "hover:bg-grey-700 hover:text-white focus:bg-grey-700 focus:text-white data-[state=open]:bg-grey-700 data-[state=open]:text-white",
-    triggerEdge: "hover:before:bg-grey-700 hover:after:bg-grey-700 focus:before:bg-grey-700 focus:after:bg-grey-700 data-[state=open]:before:bg-grey-700 data-[state=open]:after:bg-grey-700",
     featuredLink: "text-grey-800 hover:bg-grey-800/5",
     sectionLink: "border-grey-200 bg-white hover:bg-grey-800/5 hover:font-bold hover:text-grey-800"
   }),
@@ -29884,7 +29910,6 @@ var navigationMenuMainNavigationVariantStyles = {
     border: "border-grey-600",
     triggerTone: "text-white",
     triggerActive: "hover:bg-grey-700 hover:text-white focus:bg-grey-700 focus:text-white data-[state=open]:bg-grey-700 data-[state=open]:text-white",
-    triggerEdge: "hover:before:bg-grey-700 hover:after:bg-grey-700 focus:before:bg-grey-700 focus:after:bg-grey-700 data-[state=open]:before:bg-grey-700 data-[state=open]:after:bg-grey-700",
     featuredLink: "text-grey-800 hover:bg-grey-800/5",
     sectionLink: "border-grey-200 bg-white hover:bg-grey-800/5 hover:font-bold hover:text-grey-800"
   }),
@@ -29893,7 +29918,6 @@ var navigationMenuMainNavigationVariantStyles = {
     border: "border-grey-300",
     triggerTone: "text-grey-800",
     triggerActive: "hover:bg-grey-200 hover:text-grey-800 focus:bg-grey-200 focus:text-grey-800 data-[state=open]:bg-grey-200 data-[state=open]:text-grey-800",
-    triggerEdge: "hover:before:bg-grey-200 hover:after:bg-grey-200 focus:before:bg-grey-200 focus:after:bg-grey-200 data-[state=open]:before:bg-grey-200 data-[state=open]:after:bg-grey-200",
     featuredLink: "text-grey-800 hover:bg-grey-800/5",
     sectionLink: "border-grey-200 bg-white hover:bg-grey-800/5 hover:font-bold hover:text-grey-800"
   }),
@@ -29902,7 +29926,6 @@ var navigationMenuMainNavigationVariantStyles = {
     border: "border-grey-200",
     triggerTone: "text-grey-800",
     triggerActive: "hover:bg-grey-100 hover:text-grey-800 focus:bg-grey-100 focus:text-grey-800 data-[state=open]:bg-grey-100 data-[state=open]:text-grey-800",
-    triggerEdge: "hover:before:bg-grey-100 hover:after:bg-grey-100 focus:before:bg-grey-100 focus:after:bg-grey-100 data-[state=open]:before:bg-grey-100 data-[state=open]:after:bg-grey-100",
     featuredLink: "text-grey-800 hover:bg-grey-800/5",
     sectionLink: "border-grey-200 bg-white hover:bg-grey-800/5 hover:font-bold hover:text-grey-800"
   }),
@@ -29911,7 +29934,6 @@ var navigationMenuMainNavigationVariantStyles = {
     border: "border-accent-600",
     triggerTone: "text-white",
     triggerActive: "hover:bg-accent-600 hover:text-white focus:bg-accent-600 focus:text-white data-[state=open]:bg-accent-600 data-[state=open]:text-white",
-    triggerEdge: "hover:before:bg-accent-600 hover:after:bg-accent-600 focus:before:bg-accent-600 focus:after:bg-accent-600 data-[state=open]:before:bg-accent-600 data-[state=open]:after:bg-accent-600",
     featuredLink: "text-accent-800 hover:bg-accent-800/5",
     sectionLink: "border-grey-200 bg-white hover:bg-accent-800/5 hover:font-bold hover:text-accent-800"
   }),
@@ -29920,7 +29942,6 @@ var navigationMenuMainNavigationVariantStyles = {
     border: "border-accent-600",
     triggerTone: "text-white",
     triggerActive: "hover:bg-accent-800 hover:text-white focus:bg-accent-800 focus:text-white data-[state=open]:bg-accent-800 data-[state=open]:text-white",
-    triggerEdge: "hover:before:bg-accent-800 hover:after:bg-accent-800 focus:before:bg-accent-800 focus:after:bg-accent-800 data-[state=open]:before:bg-accent-800 data-[state=open]:after:bg-accent-800",
     featuredLink: "text-accent-800 hover:bg-accent-800/5",
     sectionLink: "border-grey-200 bg-white hover:bg-accent-800/5 hover:font-bold hover:text-accent-800"
   }),
@@ -29929,7 +29950,6 @@ var navigationMenuMainNavigationVariantStyles = {
     border: "border-accent-200",
     triggerTone: "text-accent-800",
     triggerActive: "hover:bg-accent-200 hover:text-accent-800 focus:bg-accent-200 focus:text-accent-800 data-[state=open]:bg-accent-200 data-[state=open]:text-accent-800",
-    triggerEdge: "hover:before:bg-accent-200 hover:after:bg-accent-200 focus:before:bg-accent-200 focus:after:bg-accent-200 data-[state=open]:before:bg-accent-200 data-[state=open]:after:bg-accent-200",
     featuredLink: "text-accent-800 hover:bg-accent-800/5",
     sectionLink: "border-grey-200 bg-white hover:bg-accent-800/5 hover:font-bold hover:text-accent-800"
   }),
@@ -29938,7 +29958,6 @@ var navigationMenuMainNavigationVariantStyles = {
     border: "border-accent-200",
     triggerTone: "text-accent-800",
     triggerActive: "hover:bg-accent-50 hover:text-accent-800 focus:bg-accent-50 focus:text-accent-800 data-[state=open]:bg-accent-50 data-[state=open]:text-accent-800",
-    triggerEdge: "hover:before:bg-accent-50 hover:after:bg-accent-50 focus:before:bg-accent-50 focus:after:bg-accent-50 data-[state=open]:before:bg-accent-50 data-[state=open]:after:bg-accent-50",
     featuredLink: "text-accent-800 hover:bg-accent-800/5",
     sectionLink: "border-grey-200 bg-white hover:bg-accent-800/5 hover:font-bold hover:text-accent-800"
   }),
@@ -29947,7 +29966,6 @@ var navigationMenuMainNavigationVariantStyles = {
     border: "border-grey-200",
     triggerTone: "text-grey-800",
     triggerActive: "hover:bg-grey-100 hover:text-grey-800 focus:bg-grey-100 focus:text-grey-800 data-[state=open]:bg-grey-100 data-[state=open]:text-grey-800",
-    triggerEdge: "hover:before:bg-grey-100 hover:after:bg-grey-100 focus:before:bg-grey-100 focus:after:bg-grey-100 data-[state=open]:before:bg-grey-100 data-[state=open]:after:bg-grey-100",
     featuredLink: "text-grey-800 hover:bg-grey-100",
     sectionLink: "border-grey-200 bg-white hover:bg-grey-50 hover:font-bold hover:text-grey-800"
   })
@@ -29957,10 +29975,8 @@ function TopLevelItem({
   href = "#",
   title,
   variant,
-  syncBorderToSurface,
   triggerClassName,
-  triggerActiveClassName,
-  triggerActiveBorderClassName
+  triggerActiveClassName
 }) {
   const styles5 = navigationMenuMainNavigationVariantStyles[variant];
   return /* @__PURE__ */ jsx(NavigationMenuItem, { className: "shrink-0", children: /* @__PURE__ */ jsx(
@@ -29972,10 +29988,7 @@ function TopLevelItem({
         styles5.triggerTone,
         styles5.triggerActive,
         triggerClassName,
-        triggerActiveClassName,
-        syncBorderToSurface && "before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-transparent after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-transparent",
-        syncBorderToSurface && styles5.triggerEdge,
-        syncBorderToSurface && triggerActiveBorderClassName
+        triggerActiveClassName
       ),
       children: /* @__PURE__ */ jsx(Link14, { href, children: title })
     }
@@ -30031,14 +30044,13 @@ function SectionLink({
 function MegaNavigationItem({
   section,
   variant,
+  shadow,
   fullBleed,
   panelMetrics,
   onOpenIntent,
   dropdownBackgroundClassName,
-  syncBorderToSurface,
   triggerClassName,
   triggerActiveClassName,
-  triggerActiveBorderClassName,
   featuredLinkClassName,
   sectionLinkClassName,
   sectionLinkTitleClassName
@@ -30051,10 +30063,8 @@ function MegaNavigationItem({
         href: section.href,
         title: section.title,
         variant,
-        syncBorderToSurface,
         triggerClassName,
-        triggerActiveClassName,
-        triggerActiveBorderClassName
+        triggerActiveClassName
       }
     );
   }
@@ -30068,10 +30078,7 @@ function MegaNavigationItem({
           styles5.triggerActive,
           triggerClassName,
           triggerActiveClassName,
-          "data-[state=open]:shadow-[inset_0_-4px_0_0_currentColor]",
-          syncBorderToSurface && "before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-transparent after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-transparent",
-          syncBorderToSurface && styles5.triggerEdge,
-          syncBorderToSurface && triggerActiveBorderClassName
+          "data-[state=open]:shadow-[inset_0_-4px_0_0_currentColor]"
         ),
         onPointerEnter: onOpenIntent,
         children: section.title
@@ -30081,45 +30088,56 @@ function MegaNavigationItem({
       NavigationMenuContent,
       {
         className: cn(
-          "left-0 w-full p-0 pr-0 whitespace-normal group-data-[viewport=false]/navigation-menu:mt-0 group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:border-0 group-data-[viewport=false]/navigation-menu:bg-transparent group-data-[viewport=false]/navigation-menu:shadow-none data-[motion=from-end]:[--tw-enter-translate-x:0] data-[motion=from-start]:[--tw-enter-translate-x:0] data-[motion=to-end]:[--tw-exit-translate-x:0] data-[motion=to-start]:[--tw-exit-translate-x:0] data-[motion^=from-]:!animate-none data-[motion^=from-]:[--tw-enter-opacity:1] data-[motion^=from-]:[--tw-enter-rotate:0] data-[motion^=from-]:[--tw-enter-scale:1] data-[motion^=from-]:[--tw-enter-translate-y:0] data-[motion^=to-]:!animate-none data-[motion^=to-]:[--tw-exit-opacity:1] data-[motion^=to-]:[--tw-exit-rotate:0] data-[motion^=to-]:[--tw-exit-scale:1] data-[motion^=to-]:[--tw-exit-translate-y:0] group-data-[viewport=false]/navigation-menu:data-[state=closed]:!animate-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:[--tw-exit-opacity:1] group-data-[viewport=false]/navigation-menu:data-[state=closed]:[--tw-exit-scale:1] group-data-[viewport=false]/navigation-menu:data-[state=open]:!animate-none group-data-[viewport=false]/navigation-menu:data-[state=open]:[--tw-enter-opacity:1] group-data-[viewport=false]/navigation-menu:data-[state=open]:[--tw-enter-scale:1] md:w-full"
+          "left-0 w-full p-0 pr-0 whitespace-normal group-data-[viewport=false]/navigation-menu:mt-0 group-data-[viewport=false]/navigation-menu:!overflow-visible group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:border-0 group-data-[viewport=false]/navigation-menu:bg-transparent group-data-[viewport=false]/navigation-menu:shadow-none data-[motion=from-end]:[--tw-enter-translate-x:0] data-[motion=from-start]:[--tw-enter-translate-x:0] data-[motion=to-end]:[--tw-exit-translate-x:0] data-[motion=to-start]:[--tw-exit-translate-x:0] data-[motion^=from-]:!animate-none data-[motion^=from-]:[--tw-enter-opacity:1] data-[motion^=from-]:[--tw-enter-rotate:0] data-[motion^=from-]:[--tw-enter-scale:1] data-[motion^=from-]:[--tw-enter-translate-y:0] data-[motion^=to-]:!animate-none data-[motion^=to-]:[--tw-exit-opacity:1] data-[motion^=to-]:[--tw-exit-rotate:0] data-[motion^=to-]:[--tw-exit-scale:1] data-[motion^=to-]:[--tw-exit-translate-y:0] group-data-[viewport=false]/navigation-menu:data-[state=closed]:!animate-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:[--tw-exit-opacity:1] group-data-[viewport=false]/navigation-menu:data-[state=closed]:[--tw-exit-scale:1] group-data-[viewport=false]/navigation-menu:data-[state=open]:!animate-none group-data-[viewport=false]/navigation-menu:data-[state=open]:[--tw-enter-opacity:1] group-data-[viewport=false]/navigation-menu:data-[state=open]:[--tw-enter-scale:1] md:w-full"
         ),
         style: fullBleed && panelMetrics ? {
           left: `${-panelMetrics.left}px`,
           width: `${panelMetrics.viewportWidth}px`
         } : void 0,
         onPointerEnter: onOpenIntent,
-        children: /* @__PURE__ */ jsx("div", { className: cn("w-full shadow", styles5.dropdownSurface, dropdownBackgroundClassName), children: /* @__PURE__ */ jsxs(
+        children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: "grid w-full",
-            style: fullBleed && panelMetrics ? {
-              width: `${panelMetrics.width}px`,
-              marginLeft: "auto",
-              marginRight: "auto"
-            } : void 0,
-            children: [
-              /* @__PURE__ */ jsx(
-                FeaturedSectionLink,
-                {
-                  href: section.href,
-                  title: section.title,
-                  variant,
-                  className: featuredLinkClassName
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 overflow-hidden px-4 pb-12 sm:grid-cols-2 lg:grid-cols-3", children: section.links.map((link, index) => /* @__PURE__ */ jsx(
-                SectionLink,
-                {
-                  link,
-                  variant,
-                  className: sectionLinkClassName,
-                  titleClassName: sectionLinkTitleClassName
-                },
-                `${link.title}-${link.href}-${index}`
-              )) })
-            ]
+            className: cn(
+              "relative z-10 w-full",
+              shadow && "shadow-md shadow-slate-900/5 dark:shadow-none",
+              styles5.dropdownSurface,
+              dropdownBackgroundClassName
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "grid w-full",
+                style: fullBleed && panelMetrics ? {
+                  width: `${panelMetrics.width}px`,
+                  marginLeft: "auto",
+                  marginRight: "auto"
+                } : void 0,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    FeaturedSectionLink,
+                    {
+                      href: section.href,
+                      title: section.title,
+                      variant,
+                      className: featuredLinkClassName
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 overflow-hidden px-4 pb-12 sm:grid-cols-2 lg:grid-cols-3", children: section.links.map((link, index) => /* @__PURE__ */ jsx(
+                    SectionLink,
+                    {
+                      link,
+                      variant,
+                      className: sectionLinkClassName,
+                      titleClassName: sectionLinkTitleClassName
+                    },
+                    `${link.title}-${link.href}-${index}`
+                  )) })
+                ]
+              }
+            )
           }
-        ) })
+        )
       }
     )
   ] });
@@ -30129,6 +30147,7 @@ function NavigationMenuMainNavigation({
   id: id3 = "nsw-main-navigation",
   variant = "white",
   borderPosition = "none",
+  shadow = true,
   className,
   responsive = true,
   sticky = true,
@@ -30138,7 +30157,6 @@ function NavigationMenuMainNavigation({
   borderClassName,
   triggerClassName,
   triggerActiveClassName,
-  triggerActiveBorderClassName,
   featuredLinkClassName,
   sectionLinkClassName,
   sectionLinkTitleClassName,
@@ -30154,7 +30172,6 @@ function NavigationMenuMainNavigation({
   const hasTopBorder = resolvedBorderPosition === "top" || resolvedBorderPosition === "both";
   const hasBottomBorder = resolvedBorderPosition === "bottom" || resolvedBorderPosition === "both";
   const hasBorder = hasTopBorder || hasBottomBorder;
-  const syncBorderToSurface = hasBorder;
   const [panelMetrics, setPanelMetrics] = React5.useState({
     left: 0,
     width: 0,
@@ -30221,7 +30238,8 @@ function NavigationMenuMainNavigation({
       role: "navigation",
       id: id3,
       className: cn(
-        "z-40 shadow-md shadow-grey-900/5 dark:shadow-none",
+        "z-40",
+        shadow && "shadow-md shadow-slate-900/5 dark:shadow-none",
         navigationMenuMainNavigationVariantStyles[variant].surface,
         backgroundClassName,
         hasBorder && navigationMenuMainNavigationVariantStyles[variant].border,
@@ -30251,14 +30269,13 @@ function NavigationMenuMainNavigation({
             {
               section,
               variant,
+              shadow,
               fullBleed,
               panelMetrics,
               onOpenIntent: cancelCloseTimer,
               dropdownBackgroundClassName,
-              syncBorderToSurface,
               triggerClassName,
               triggerActiveClassName,
-              triggerActiveBorderClassName,
               featuredLinkClassName,
               sectionLinkClassName,
               sectionLinkTitleClassName