@nswds/app 1.118.0 → 1.119.1

package/dist/index.cjs

@@ -14407,9 +14407,20 @@ function CodeDemoContent({ data, showCode = true, controls = defaultControls })
   React5__namespace.default.useEffect(() => {
     const frame2 = iframeRef.current;
     if (!frame2) return;
+    const getTargetOrigin = () => {
+      const src = frame2.getAttribute("src");
+      if (!src || src === "about:blank") {
+        return window.location.origin;
+      }
+      try {
+        return new URL(src, window.location.href).origin;
+      } catch {
+        return window.location.origin;
+      }
+    };
     const send = () => {
       const msg = { type: "nswds-theme", payload: themeValues };
-      frame2.contentWindow?.postMessage(msg, "*");
+      frame2.contentWindow?.postMessage(msg, getTargetOrigin());
     };
     send();
     frame2.addEventListener("load", send);
@@ -18310,82 +18321,155 @@ var expandableSearchButtonVariants = classVarianceAuthority.cva("", {
     variant: "default"
   }
 });
-var ExpandableSearchContext = React5__namespace.createContext(null);
-var ExpandableSearch = React5__namespace.forwardRef(({ className, onAction, defaultValue = "", variant = "default", ...props }, ref) => {
-  const [value, setValue] = React5__namespace.useState(defaultValue);
-  const formRef = React5__namespace.useRef(null);
-  const resolvedVariant = variant ?? "default";
-  const handleAction = (e) => {
-    e.preventDefault();
-    if (onAction) {
-      onAction(value);
+var expandableSearchFocusVariants = classVarianceAuthority.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"
     }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ExpandableSearchContext.Provider,
-    {
-      value: { value, setValue, formRef, variant: resolvedVariant },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "form",
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var ExpandableSearchContext = React5__namespace.createContext(null);
+var ExpandableSearch = React5__namespace.forwardRef(
+  ({
+    className,
+    onAction,
+    defaultValue = "",
+    onSubmit,
+    onFocusCapture,
+    onBlurCapture,
+    variant = "default",
+    ...props
+  }, ref) => {
+    const [value, setValue] = React5__namespace.useState(defaultValue);
+    const [formHasFocusWithin, setFormHasFocusWithin] = React5__namespace.useState(false);
+    const resolvedVariant = variant ?? "default";
+    const handleSubmit = (e) => {
+      onSubmit?.(e);
+      if (e.defaultPrevented) {
+        return;
+      }
+      e.preventDefault();
+      onAction?.(value);
+    };
+    const handleFocusCapture = (e) => {
+      setFormHasFocusWithin(true);
+      onFocusCapture?.(e);
+    };
+    const handleBlurCapture = (e) => {
+      const nextFocusedElement = e.relatedTarget;
+      if (!e.currentTarget.contains(nextFocusedElement)) {
+        setFormHasFocusWithin(false);
+      }
+      onBlurCapture?.(e);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ExpandableSearchContext.Provider,
+      {
+        value: { value, setValue, formHasFocusWithin, variant: resolvedVariant },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "form",
+          {
+            ref,
+            className: cn("group relative inline-block select-none", className),
+            onBlurCapture: handleBlurCapture,
+            onFocusCapture: handleFocusCapture,
+            onSubmit: handleSubmit,
+            ...props
+          }
+        )
+      }
+    );
+  }
+);
+ExpandableSearch.displayName = "ExpandableSearch";
+var ExpandableSearchField = React5__namespace.forwardRef(
+  ({ className, id: id3, buttonLabel = "Search", buttonProps, ...props }, ref) => {
+    const context = React5__namespace.useContext(ExpandableSearchContext);
+    if (!context) throw new Error("ExpandableSearchField must be used within ExpandableSearch");
+    const generatedId = React5__namespace.useId();
+    const {
+      className: buttonClassName,
+      children: buttonChildren,
+      "aria-label": buttonAriaLabel,
+      ...restButtonProps
+    } = buttonProps ?? {};
+    const isActive = context.value.length > 0 || context.formHasFocusWithin;
+    const variant = context.variant;
+    const inputId = id3 ?? generatedId;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "sr-only", htmlFor: inputId, children: "Search" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
         {
           ref,
-          className: cn("relative inline-block select-none", className),
-          onSubmit: handleAction,
+          id: inputId,
+          value: context.value,
+          onChange: (e) => context.setValue(e.target.value),
+          className: cn(
+            "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-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
+            {
+              "p-0": !isActive,
+              "w-96 cursor-auto pt-0 pr-12 pb-0 pl-4 outline-none select-auto": isActive
+            },
+            isActive && expandableSearchSurfaceVariants({ variant }),
+            isActive && (variant === "default" ? "placeholder:text-grey-700 placeholder:opacity-100" : "placeholder:text-current placeholder:opacity-70"),
+            className
+          ),
           ...props
         }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          "aria-label": buttonAriaLabel ?? buttonLabel,
+          type: "submit",
+          className: cn(
+            "absolute top-0 right-0 z-10 flex h-12 w-12 rounded-sm transition-[background-color,box-shadow] duration-200",
+            "ring-offset-white focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+            expandableSearchButtonVariants({ variant }),
+            expandableSearchFocusVariants({ variant }),
+            {
+              "pointer-events-none": !isActive,
+              "pointer-events-auto": isActive
+            },
+            buttonClassName
+          ),
+          ...restButtonProps,
+          children: buttonChildren ?? /* @__PURE__ */ jsxRuntime.jsx(
+            Icons.search,
+            {
+              "aria-hidden": "true",
+              className: "m-auto block h-8 w-8 shrink-0 fill-current leading-none"
+            }
+          )
+        }
       )
-    }
-  );
-});
-ExpandableSearch.displayName = "ExpandableSearch";
-var ExpandableSearchField = React5__namespace.forwardRef(({ className, ...props }, ref) => {
-  const context = React5__namespace.useContext(ExpandableSearchContext);
-  if (!context) throw new Error("ExpandableSearchField must be used within ExpandableSearch");
-  const [isFocused, setIsFocused] = React5__namespace.useState(false);
-  const isActive = context.value.length > 0 || isFocused;
-  const variant = context.variant;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("label", { className: "sr-only", htmlFor: "expandable-search", children: "Search" }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        ref,
-        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",
-          "transition-[width,box-shadow,background-color] duration-300 ease-in-out",
-          "placeholder:text-transparent placeholder:opacity-0",
-          "expandable-search__input",
-          expandableSearchCollapsedVariants({ variant }),
-          // Conditionally apply classes based on active state
-          {
-            "p-0": !isActive,
-            "w-96 cursor-auto pt-0 pr-12 pb-0 pl-4 outline-none select-auto": isActive
-          },
-          isActive && expandableSearchSurfaceVariants({ variant }),
-          isActive && (variant === "default" ? "placeholder:text-grey-700 placeholder:opacity-100" : "placeholder:text-current placeholder:opacity-70"),
-          className
-        ),
-        ...props
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className: cn(
-          "pointer-events-none absolute top-0 right-0 z-10 flex h-12 w-12 rounded-sm transition-colors duration-200 peer-focus:pointer-events-auto",
-          expandableSearchButtonVariants({ variant })
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Icons.search, { className: "m-auto block h-8 w-8 shrink-0 fill-current leading-none" })
-      }
-    )
-  ] });
-});
+    ] });
+  }
+);
 ExpandableSearchField.displayName = "ExpandableSearchField";
 function Fieldset2({
   className,
@@ -18914,7 +18998,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.117.0"};
+  version: "1.119.0"};
 var SluggerContext = React5__namespace.default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";
@@ -29873,20 +29957,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 = {
@@ -29895,7 +29983,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"
   }),
@@ -29904,7 +29991,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"
   }),
@@ -29913,7 +29999,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"
   }),
@@ -29922,7 +30007,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"
   }),
@@ -29931,7 +30015,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"
   }),
@@ -29940,7 +30023,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"
   }),
@@ -29949,7 +30031,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"
   }),
@@ -29958,7 +30039,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"
   }),
@@ -29967,7 +30047,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"
   }),
@@ -29976,7 +30055,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"
   }),
@@ -29985,7 +30063,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"
   }),
@@ -29994,7 +30071,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"
   }),
@@ -30003,7 +30079,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"
   })
@@ -30013,10 +30088,8 @@ function TopLevelItem({
   href = "#",
   title,
   variant,
-  syncBorderToSurface,
   triggerClassName,
-  triggerActiveClassName,
-  triggerActiveBorderClassName
+  triggerActiveClassName
 }) {
   const styles5 = navigationMenuMainNavigationVariantStyles[variant];
   return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -30028,10 +30101,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__ */ jsxRuntime.jsx(Link14__default.default, { href, children: title })
     }
@@ -30087,14 +30157,13 @@ function SectionLink({
 function MegaNavigationItem({
   section,
   variant,
+  shadow,
   fullBleed,
   panelMetrics,
   onOpenIntent,
   dropdownBackgroundClassName,
-  syncBorderToSurface,
   triggerClassName,
   triggerActiveClassName,
-  triggerActiveBorderClassName,
   featuredLinkClassName,
   sectionLinkClassName,
   sectionLinkTitleClassName
@@ -30107,10 +30176,8 @@ function MegaNavigationItem({
         href: section.href,
         title: section.title,
         variant,
-        syncBorderToSurface,
         triggerClassName,
-        triggerActiveClassName,
-        triggerActiveBorderClassName
+        triggerActiveClassName
       }
     );
   }
@@ -30124,10 +30191,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
@@ -30137,45 +30201,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__ */ jsxRuntime.jsx("div", { className: cn("w-full shadow", styles5.dropdownSurface, dropdownBackgroundClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
+        children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "grid w-full",
-            style: fullBleed && panelMetrics ? {
-              width: `${panelMetrics.width}px`,
-              marginLeft: "auto",
-              marginRight: "auto"
-            } : void 0,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                FeaturedSectionLink,
-                {
-                  href: section.href,
-                  title: section.title,
-                  variant,
-                  className: featuredLinkClassName
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "grid w-full",
+                style: fullBleed && panelMetrics ? {
+                  width: `${panelMetrics.width}px`,
+                  marginLeft: "auto",
+                  marginRight: "auto"
+                } : void 0,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FeaturedSectionLink,
+                    {
+                      href: section.href,
+                      title: section.title,
+                      variant,
+                      className: featuredLinkClassName
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                    SectionLink,
+                    {
+                      link,
+                      variant,
+                      className: sectionLinkClassName,
+                      titleClassName: sectionLinkTitleClassName
+                    },
+                    `${link.title}-${link.href}-${index}`
+                  )) })
+                ]
+              }
+            )
           }
-        ) })
+        )
       }
     )
   ] });
@@ -30185,6 +30260,7 @@ function NavigationMenuMainNavigation({
   id: id3 = "nsw-main-navigation",
   variant = "white",
   borderPosition = "none",
+  shadow = true,
   className,
   responsive = true,
   sticky = true,
@@ -30194,7 +30270,6 @@ function NavigationMenuMainNavigation({
   borderClassName,
   triggerClassName,
   triggerActiveClassName,
-  triggerActiveBorderClassName,
   featuredLinkClassName,
   sectionLinkClassName,
   sectionLinkTitleClassName,
@@ -30210,7 +30285,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__namespace.useState({
     left: 0,
     width: 0,
@@ -30277,7 +30351,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,
@@ -30307,14 +30382,13 @@ function NavigationMenuMainNavigation({
             {
               section,
               variant,
+              shadow,
               fullBleed,
               panelMetrics,
               onOpenIntent: cancelCloseTimer,
               dropdownBackgroundClassName,
-              syncBorderToSurface,
               triggerClassName,
               triggerActiveClassName,
-              triggerActiveBorderClassName,
               featuredLinkClassName,
               sectionLinkClassName,
               sectionLinkTitleClassName
@@ -31351,7 +31425,13 @@ function SidebarProvider({
       } else {
         _setOpen(openState);
       }
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      document.cookie = [
+        `${SIDEBAR_COOKIE_NAME}=${encodeURIComponent(String(openState))}`,
+        "path=/",
+        `max-age=${SIDEBAR_COOKIE_MAX_AGE}`,
+        "SameSite=Lax",
+        "Secure"
+      ].join("; ");
     },
     [setOpenProp, open]
   );