@dnanpm/ui-components 0.9.0 → 0.10.0

package/dist/components/MainNavigation/MainNavigation.d.ts

@@ -1,3 +1,3 @@
 import { MainNavigationProps } from './MainNavigation.types';
-export declare const MainNavigation: ({ organizations, items, loginLabel, logoHref, languages, renderLanguageLink, searchLabel, cartLabel, cartCounter, cartCounterLabel, defaultCartOpen, cartOpen, onCartOpenChange, defaultOpenDropdown, onSearchOpenChange, onLanguageOpenChange, onLoginOpenChange, searchDropdownContent, loginDropdownContent, cartContent, mobileMenuOpenAriaLabel, mobileMenuCloseAriaLabel, organizationStripAriaLabel, logoAriaLabel, mobilePrimaryNavigationAriaLabel, externalLinkAriaLabel, defaultMobileMenuOpen, defaultOpenItemIndex, currentPathname, overflowCategoryLabel, onMobileMenuToggle, onDesktopItemToggle, renderLink, className, "aria-label": ariaLabel, ref, ...props }: MainNavigationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MainNavigation: ({ organizations, items, loginLabel, logoHref, languages, renderLanguageLink, searchLabel, cartLabel, cartCounter, cartCounterLabel, cartOpen, onCartOpenChange, onSearchOpenChange, onLanguageOpenChange, onLoginOpenChange, searchDropdownContent, loginDropdownContent, cartContent, mobileMenuOpenAriaLabel, mobileMenuCloseAriaLabel, organizationStripAriaLabel, logoAriaLabel, mobilePrimaryNavigationAriaLabel, externalLinkAriaLabel, currentPathname, overflowCategoryLabel, onMobileMenuToggle, onDesktopItemToggle, renderLink, className, "aria-label": ariaLabel, ref, ...props }: MainNavigationProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MainNavigation.d.ts.map

package/dist/components/MainNavigation/MainNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MainNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/MainNavigation/MainNavigation.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAMR,mBAAmB,EAEtB,MAAM,wBAAwB,CAAC;AAehC,eAAO,MAAM,cAAc,GAAI,mpBAsC5B,mBAAmB,4CA8sDrB,CAAC"}
+{"version":3,"file":"MainNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/MainNavigation/MainNavigation.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAMR,mBAAmB,EAEtB,MAAM,wBAAwB,CAAC;AAchC,eAAO,MAAM,cAAc,GAAI,gkBAkC5B,mBAAmB,4CA8zDrB,CAAC"}

package/dist/components/MainNavigation/MainNavigation.js

@@ -1,12 +1,9 @@
 import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
-import { useState, useRef, useId, useCallback, useEffect, Fragment } from "react";
+import { useState, useId, useRef, useCallback, useEffect, Fragment } from "react";
 import { Globe, Search, Cart, Close, Menu, ChevronRight, Open, ArrowRight } from "@dnanpm/icons";
-import focusStyles from "../../styles/utils/focus.module.css.js";
-import overlayStyles from "../../styles/utils/overlay.module.css.js";
-import elevationStyles from "../../styles/utils/elevation.module.css.js";
-import textDecorationStyles from "../../styles/utils/text-decoration.module.css.js";
+import { focusStyles, textDecorationStyles, elevationStyles, overlayStyles } from "../../styles/utils/index.js";
 import styles from "./MainNavigation.module.css.js";
-import { assignRef, isMobileViewportByEnvironment, isMobileIosDeviceByEnvironment, isDesktopViewportByEnvironment, getLinkTarget, getLinkRel, toNavigableHref, isExternalLink, getLanguageToggleAnnouncements, languageLinkAriaLabels, isItemInCurrentPath, isExternalTarget, isLinkInCurrentPage } from "./MainNavigation.utils.js";
+import { assignRef, desktopMinWidthMediaQuery, isMobileViewportByEnvironment, isMobileIosDeviceByEnvironment, isDesktopViewportByEnvironment, getLinkTarget, getLinkRel, toNavigableHref, isExternalLink, getLanguageToggleAnnouncements, languageLinkAriaLabels, isItemInCurrentPath, isExternalTarget, isLinkInCurrentPath, isLinkInCurrentPage } from "./MainNavigation.utils.js";
 import { cn } from "../../utils/cn/cn.js";
 import { Button } from "../Button/Button.js";
 import { Drawer } from "../Drawer/Drawer.js";
@@ -18,7 +15,6 @@ const defaultLogoSrc = `data:image/svg+xml,${encodeURIComponent(defaultLogoSvg)}
 const mobilePanelAnimationDurationMs = 200;
 const mobileBodyScrollLockClass = "dds-un-scrollable";
 const defaultOverflowCategoryLabel = "Muut kategoriat";
-const desktopMinWidthMediaQuery = "(min-width: 1024px)";
 const defaultRenderLink = (props) => /* @__PURE__ */ jsx("a", { ...props });
 const defaultRenderLanguageLink = (props) => /* @__PURE__ */ jsx("a", { ...props });
 const MainNavigation = ({
@@ -32,10 +28,8 @@ const MainNavigation = ({
   cartLabel = "Ostoskori",
   cartCounter,
   cartCounterLabel = "tuotetta ostoskorissa",
-  defaultCartOpen = false,
   cartOpen,
   onCartOpenChange,
-  defaultOpenDropdown,
   onSearchOpenChange,
   onLanguageOpenChange,
   onLoginOpenChange,
@@ -48,8 +42,6 @@ const MainNavigation = ({
   logoAriaLabel = "Siirry etusivulle",
   mobilePrimaryNavigationAriaLabel = "Päävalikko",
   externalLinkAriaLabel = "avautuu uuteen välilehteen",
-  defaultMobileMenuOpen = false,
-  defaultOpenItemIndex = null,
   currentPathname,
   overflowCategoryLabel = defaultOverflowCategoryLabel,
   onMobileMenuToggle,
@@ -60,19 +52,21 @@ const MainNavigation = ({
   ref,
   ...props
 }) => {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(defaultMobileMenuOpen);
+  const isCartControlled = cartOpen !== void 0;
+  const showSearch = searchDropdownContent != null && typeof searchDropdownContent !== "boolean";
+  const showLogin = loginDropdownContent != null && typeof loginDropdownContent !== "boolean";
+  const showCart = cartContent != null && typeof cartContent !== "boolean";
+  const currentLanguage = languages?.find((language) => language.current) ?? languages?.[0];
+  const alternativeLanguages = currentLanguage != null ? (languages ?? []).filter((language) => language.code !== currentLanguage.code) : [];
+  const showLanguage = currentLanguage != null && alternativeLanguages.length > 0;
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [isMobileMenuClosing, setIsMobileMenuClosing] = useState(false);
-  const [openTopLevelItemIndex, setOpenTopLevelItemIndex] = useState(
-    defaultOpenItemIndex
-  );
+  const [openTopLevelItemIndex, setOpenTopLevelItemIndex] = useState(null);
   const [isHeaderOpen, setIsHeaderOpen] = useState(true);
   const [mobileActiveCategoryIndex, setMobileActiveCategoryIndex] = useState(null);
-  const [internalCartOpen, setInternalCartOpen] = useState(defaultCartOpen);
-  const isCartControlled = cartOpen !== void 0;
+  const [internalCartOpen, setInternalCartOpen] = useState(false);
   const isCartOpen = cartOpen ?? internalCartOpen;
-  const hasInitialNavigationSurface = (cartOpen ?? defaultCartOpen) || defaultMobileMenuOpen || defaultOpenItemIndex != null && items[defaultOpenItemIndex]?.panel != null;
-  const [openUtilityDropdown, setOpenUtilityDropdown] = useState(hasInitialNavigationSurface ? null : defaultOpenDropdown ?? null);
-  const openUtilityDropdownRef = useRef(openUtilityDropdown);
+  const [openUtilityDropdown, setOpenUtilityDropdown] = useState(null);
   const searchDropdownId = useId();
   const languageDropdownId = useId();
   const loginDropdownId = useId();
@@ -107,10 +101,14 @@ const MainNavigation = ({
   const focusReturnToMobileCategoryTimeoutRef = useRef(
     null
   );
-  const mobileMenuOpenRef = useRef(mobileMenuOpen);
-  const openTopLevelItemIndexRef = useRef(openTopLevelItemIndex);
-  const lastAppliedViewportModeRef = useRef(null);
-  const internalCartOpenRef = useRef(internalCartOpen);
+  const notifyRef = useRef({
+    mobileMenu: false,
+    desktopItem: null,
+    search: false,
+    language: false,
+    login: false,
+    cart: false
+  });
   const setHeaderRef = useCallback(
     (node) => {
       headerElementRef.current = node;
@@ -253,12 +251,7 @@ const MainNavigation = ({
       return;
     }
     const desktopQuery = window.matchMedia(desktopMinWidthMediaQuery);
-    const applyViewportModeChange = ({ matches: isDesktopViewport2 }) => {
-      const viewportMode = isDesktopViewport2 ? "desktop" : "mobile";
-      if (lastAppliedViewportModeRef.current === viewportMode) {
-        return;
-      }
-      lastAppliedViewportModeRef.current = viewportMode;
+    const handleViewportModeChange = ({ matches: isDesktopViewport2 }) => {
       if (isDesktopViewport2) {
         clearTimeout(mobileSecondPanelCloseTimeoutRef.current ?? void 0);
         mobileSecondPanelCloseTimeoutRef.current = null;
@@ -266,9 +259,8 @@ const MainNavigation = ({
         mobileThirdPanelCloseTimeoutRef.current = null;
         clearTimeout(resetMobileThirdPanelScrollTimeoutRef.current ?? void 0);
         resetMobileThirdPanelScrollTimeoutRef.current = null;
-        const wasMobileMenuOpen = mobileMenuOpenRef.current;
-        mobileMenuOpenRef.current = false;
-        if (wasMobileMenuOpen) {
+        if (notifyRef.current.mobileMenu) {
+          notifyRef.current.mobileMenu = false;
           onMobileMenuToggle?.(false);
         }
         setMobileMenuOpen(false);
@@ -277,21 +269,18 @@ const MainNavigation = ({
         setIsMobileThirdPanelClosing(false);
         return;
       }
-      const hadOpenDesktopItem = openTopLevelItemIndexRef.current !== null;
-      openTopLevelItemIndexRef.current = null;
-      if (hadOpenDesktopItem) {
+      if (notifyRef.current.desktopItem !== null) {
+        notifyRef.current.desktopItem = null;
         onDesktopItemToggle?.(null);
       }
       setOpenTopLevelItemIndex(null);
     };
-    applyViewportModeChange(desktopQuery);
-    desktopQuery.addEventListener("change", applyViewportModeChange);
+    desktopQuery.addEventListener("change", handleViewportModeChange);
     return () => {
-      desktopQuery.removeEventListener("change", applyViewportModeChange);
+      desktopQuery.removeEventListener("change", handleViewportModeChange);
     };
   }, [onDesktopItemToggle, onMobileMenuToggle]);
   const resetMobilePanelState = useCallback(() => {
-    openTopLevelItemIndexRef.current = null;
     setOpenTopLevelItemIndex(null);
     setMobileActiveCategoryIndex(null);
     setIsMobileSecondPanelClosing(false);
@@ -308,14 +297,12 @@ const MainNavigation = ({
       return;
     }
     const shouldAnimateMobileClose = mobileMenuOpen;
-    const wasMobileMenuOpen = mobileMenuOpenRef.current;
-    const openDesktopItemIndex = openTopLevelItemIndexRef.current;
-    mobileMenuOpenRef.current = false;
-    openTopLevelItemIndexRef.current = null;
-    if (wasMobileMenuOpen) {
+    if (mobileMenuOpen) {
+      notifyRef.current.mobileMenu = false;
       onMobileMenuToggle?.(false);
     }
-    if (openDesktopItemIndex !== null) {
+    if (openTopLevelItemIndex !== null) {
+      notifyRef.current.desktopItem = null;
       onDesktopItemToggle?.(null);
     }
     clearTimeout(mobileMenuCloseResetTimeoutRef.current ?? void 0);
@@ -345,7 +332,7 @@ const MainNavigation = ({
       return;
     }
     closeUtilityDropdown();
-    mobileMenuOpenRef.current = true;
+    notifyRef.current.mobileMenu = true;
     setMobileMenuOpen(true);
     setIsMobileMenuClosing(false);
     onMobileMenuToggle?.(true);
@@ -353,7 +340,7 @@ const MainNavigation = ({
   const toggleTopLevelItem = (index) => {
     closeUtilityDropdown();
     const next = openTopLevelItemIndex === index ? null : index;
-    openTopLevelItemIndexRef.current = next;
+    notifyRef.current.desktopItem = next;
     setOpenTopLevelItemIndex(next);
     setMobileActiveCategoryIndex(null);
     setIsMobileSecondPanelClosing(false);
@@ -483,9 +470,9 @@ const MainNavigation = ({
     [onLanguageOpenChange, onLoginOpenChange, onSearchOpenChange]
   );
   const closeUtilityDropdown = useCallback(() => {
-    const openDropdown = openUtilityDropdownRef.current;
+    const openDropdown = notifyRef.current.search ? "search" : notifyRef.current.language ? "language" : notifyRef.current.login ? "login" : null;
     if (openDropdown != null) {
-      openUtilityDropdownRef.current = null;
+      notifyRef.current[openDropdown] = false;
       notifyUtilityOpenChange(openDropdown, false);
     }
     setOpenUtilityDropdown(null);
@@ -497,17 +484,19 @@ const MainNavigation = ({
     mobileThirdPanelCloseTimeoutRef.current = null;
     clearTimeout(focusMobileSecondPanelTimeoutRef.current ?? void 0);
     focusMobileSecondPanelTimeoutRef.current = null;
+    focusMobilePanelBackOnOpenRef.current = false;
     clearTimeout(focusMobileThirdPanelTimeoutRef.current ?? void 0);
     focusMobileThirdPanelTimeoutRef.current = null;
+    focusMobileThirdPanelBackOnOpenRef.current = false;
     clearTimeout(resetMobileThirdPanelScrollTimeoutRef.current ?? void 0);
     resetMobileThirdPanelScrollTimeoutRef.current = null;
     clearTimeout(focusReturnToMobileTopLevelItemTimeoutRef.current ?? void 0);
     focusReturnToMobileTopLevelItemTimeoutRef.current = null;
     clearTimeout(focusReturnToMobileCategoryTimeoutRef.current ?? void 0);
     focusReturnToMobileCategoryTimeoutRef.current = null;
-    const openDropdown = openUtilityDropdownRef.current;
+    const openDropdown = notifyRef.current.search ? "search" : notifyRef.current.language ? "language" : notifyRef.current.login ? "login" : null;
     if (openDropdown != null) {
-      openUtilityDropdownRef.current = null;
+      notifyRef.current[openDropdown] = false;
       notifyUtilityOpenChange(openDropdown, false);
     }
     setOpenUtilityDropdown(null);
@@ -562,13 +551,7 @@ const MainNavigation = ({
   const openPanel = openItem?.panel;
   const isMobilePanelClosingOut = isMobileMenuClosing && !mobileMenuOpen;
   const isOverlayClosingOut = isMobilePanelClosingOut && openPanel == null;
-  const showSearch = searchDropdownContent != null && typeof searchDropdownContent !== "boolean";
-  const showLogin = loginDropdownContent != null && typeof loginDropdownContent !== "boolean";
-  const showCart = cartContent != null && typeof cartContent !== "boolean";
   const cartAccessibleLabel = cartCounter != null ? `${cartLabel} ${cartCounter} ${cartCounterLabel}` : cartLabel;
-  const currentLanguage = languages?.find((language) => language.current) ?? languages?.[0];
-  const alternativeLanguages = currentLanguage != null ? (languages ?? []).filter((language) => language.code !== currentLanguage.code) : [];
-  const showLanguage = currentLanguage != null && alternativeLanguages.length > 0;
   const languageAnnouncements = currentLanguage != null ? getLanguageToggleAnnouncements(
     (languages ?? []).map((language) => language.code),
     currentLanguage.code
@@ -577,25 +560,27 @@ const MainNavigation = ({
   const isSearchOpen = activeUtilityDropdown === "search";
   const isLanguageOpen = activeUtilityDropdown === "language";
   const isLoginOpen = activeUtilityDropdown === "login";
+  const effectiveCartOpen = isCartOpen && showCart;
   const showPageOverlay = mobileMenuOpen || openPanel != null || isMobilePanelClosingOut || activeUtilityDropdown != null;
   const toggleUtilityDropdown = (kind) => {
     const previous = openUtilityDropdown;
     const next = previous === kind ? null : kind;
     if (previous != null && previous !== next) {
+      notifyRef.current[previous] = false;
       notifyUtilityOpenChange(previous, false);
     }
     if (next != null) {
+      notifyRef.current[next] = true;
       notifyUtilityOpenChange(next, true);
       closeMobileMenu();
       if (isCartOpen) {
         if (!isCartControlled) {
-          internalCartOpenRef.current = false;
+          notifyRef.current.cart = false;
           setInternalCartOpen(false);
         }
         onCartOpenChange?.(false);
       }
     }
-    openUtilityDropdownRef.current = next;
     setOpenUtilityDropdown(next);
   };
   const handleLanguageClick = () => {
@@ -613,35 +598,85 @@ const MainNavigation = ({
       closeMenus();
     }
     if (!isCartControlled) {
-      internalCartOpenRef.current = next;
+      notifyRef.current.cart = next && showCart;
       setInternalCartOpen(next);
     }
     onCartOpenChange?.(next);
   };
   const handleCartOpenChange = (open) => {
     if (!isCartControlled) {
-      internalCartOpenRef.current = open;
+      notifyRef.current.cart = open && showCart;
       setInternalCartOpen(open);
     }
     onCartOpenChange?.(open);
   };
-  useEffect(() => {
-    if (isCartOpen) {
-      closeMenus();
+  if (effectiveCartOpen) {
+    if (openUtilityDropdown !== null) {
+      setOpenUtilityDropdown(null);
+    }
+    if (mobileMenuOpen) {
+      setMobileMenuOpen(false);
+    }
+    if (isMobileMenuClosing) {
+      setIsMobileMenuClosing(false);
+    }
+    if (openTopLevelItemIndex !== null || mobileActiveCategoryIndex !== null || isMobileSecondPanelClosing || isMobileThirdPanelClosing) {
+      resetMobilePanelState();
     }
-  }, [closeMenus, isCartOpen]);
+  } else if (openUtilityDropdown !== null && activeUtilityDropdown === null) {
+    setOpenUtilityDropdown(null);
+  }
+  if (!isCartControlled && internalCartOpen && !showCart) {
+    setInternalCartOpen(false);
+  }
   useEffect(() => {
-    if (openUtilityDropdown != null && activeUtilityDropdown == null) {
-      closeUtilityDropdown();
+    const lastNotified = notifyRef.current;
+    if (mobileMenuOpen !== lastNotified.mobileMenu) {
+      lastNotified.mobileMenu = mobileMenuOpen;
+      onMobileMenuToggle?.(mobileMenuOpen);
+    }
+    if (openTopLevelItemIndex !== lastNotified.desktopItem) {
+      lastNotified.desktopItem = openTopLevelItemIndex;
+      onDesktopItemToggle?.(openTopLevelItemIndex);
     }
-  }, [activeUtilityDropdown, closeUtilityDropdown, openUtilityDropdown]);
+    ["search", "language", "login"].forEach((kind) => {
+      const open = activeUtilityDropdown === kind;
+      if (open !== lastNotified[kind]) {
+        lastNotified[kind] = open;
+        notifyUtilityOpenChange(kind, open);
+      }
+    });
+    if (!isCartControlled) {
+      const open = internalCartOpen && showCart;
+      if (open !== lastNotified.cart) {
+        lastNotified.cart = open;
+        onCartOpenChange?.(open);
+      }
+    }
+  });
   useEffect(() => {
-    if (!showCart && !isCartControlled && internalCartOpen && internalCartOpenRef.current) {
-      internalCartOpenRef.current = false;
-      setInternalCartOpen(false);
-      onCartOpenChange?.(false);
+    if (!effectiveCartOpen) {
+      return;
     }
-  }, [internalCartOpen, isCartControlled, onCartOpenChange, showCart]);
+    clearTimeout(mobileSecondPanelCloseTimeoutRef.current ?? void 0);
+    mobileSecondPanelCloseTimeoutRef.current = null;
+    clearTimeout(mobileThirdPanelCloseTimeoutRef.current ?? void 0);
+    mobileThirdPanelCloseTimeoutRef.current = null;
+    clearTimeout(mobileMenuCloseResetTimeoutRef.current ?? void 0);
+    mobileMenuCloseResetTimeoutRef.current = null;
+    clearTimeout(focusMobileSecondPanelTimeoutRef.current ?? void 0);
+    focusMobileSecondPanelTimeoutRef.current = null;
+    focusMobilePanelBackOnOpenRef.current = false;
+    clearTimeout(focusMobileThirdPanelTimeoutRef.current ?? void 0);
+    focusMobileThirdPanelTimeoutRef.current = null;
+    focusMobileThirdPanelBackOnOpenRef.current = false;
+    clearTimeout(resetMobileThirdPanelScrollTimeoutRef.current ?? void 0);
+    resetMobileThirdPanelScrollTimeoutRef.current = null;
+    clearTimeout(focusReturnToMobileTopLevelItemTimeoutRef.current ?? void 0);
+    focusReturnToMobileTopLevelItemTimeoutRef.current = null;
+    clearTimeout(focusReturnToMobileCategoryTimeoutRef.current ?? void 0);
+    focusReturnToMobileCategoryTimeoutRef.current = null;
+  }, [effectiveCartOpen]);
   useEffect(() => {
     if (!showPageOverlay) {
       return;
@@ -749,7 +784,7 @@ const MainNavigation = ({
                   closeTimeoutRef: mobileSecondPanelCloseTimeoutRef,
                   onClosed: () => {
                     const closedTopLevelItemIndex = openTopLevelItemIndex;
-                    openTopLevelItemIndexRef.current = null;
+                    notifyRef.current.desktopItem = null;
                     setOpenTopLevelItemIndex(null);
                     setMobileActiveCategoryIndex(null);
                     onDesktopItemToggle?.(null);
@@ -823,39 +858,49 @@ const MainNavigation = ({
               {
                 className: styles["main-navigation__mobile-level-2-category-list"],
                 "aria-hidden": shouldHideLevelTwoFromAssistiveTech || void 0,
-                children: mobilePanelColumns.map((column, index) => /* @__PURE__ */ jsx(
-                  "li",
-                  {
-                    className: styles["main-navigation__mobile-level-2-category-item"],
-                    children: /* @__PURE__ */ jsxs(
-                      "button",
-                      {
-                        ref: (node) => {
-                          mobileLevelTwoCategoryButtonRefs.current[index] = node;
-                        },
-                        type: "button",
-                        className: cn(
-                          styles["main-navigation__mobile-level-2-category-button"],
-                          focusStyles.focusableInset
-                        ),
-                        onClick: () => openMobileCategoryPanel(index),
-                        onKeyDown: (event) => {
-                          if (event.key !== "Enter" || isDesktopViewport()) {
-                            return;
-                          }
-                          event.preventDefault();
-                          focusMobileThirdPanelBackOnOpenRef.current = true;
-                          openMobileCategoryPanel(index);
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx("span", { children: getColumnHeading(column.heading, column.overflow) }),
-                          /* @__PURE__ */ jsx(ChevronRight, {})
-                        ]
-                      }
-                    )
-                  },
-                  `mobile-category-${column.heading}-${index}`
-                ))
+                children: mobilePanelColumns.map((column, index) => {
+                  const isInCurrentPath = column.links.some(
+                    (link) => isLinkInCurrentPath(link, currentPathname)
+                  );
+                  return /* @__PURE__ */ jsx(
+                    "li",
+                    {
+                      className: styles["main-navigation__mobile-level-2-category-item"],
+                      children: /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          ref: (node) => {
+                            mobileLevelTwoCategoryButtonRefs.current[index] = node;
+                          },
+                          type: "button",
+                          className: cn(
+                            styles["main-navigation__mobile-level-2-category-button"],
+                            isInCurrentPath && styles["main-navigation__mobile-level-2-category-button--current"],
+                            focusStyles.focusableInset
+                          ),
+                          "aria-current": isInCurrentPath ? "true" : void 0,
+                          onClick: () => openMobileCategoryPanel(index),
+                          onKeyDown: (event) => {
+                            if (event.key !== "Enter" || isDesktopViewport()) {
+                              return;
+                            }
+                            event.preventDefault();
+                            focusMobileThirdPanelBackOnOpenRef.current = true;
+                            openMobileCategoryPanel(index);
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx("span", { children: getColumnHeading(
+                              column.heading,
+                              column.overflow
+                            ) }),
+                            /* @__PURE__ */ jsx(ChevronRight, {})
+                          ]
+                        }
+                      )
+                    },
+                    `mobile-category-${column.heading}-${index}`
+                  );
+                })
               }
             ),
             /* @__PURE__ */ jsx(
@@ -910,21 +955,29 @@ const MainNavigation = ({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx("ul", { className: styles["main-navigation__mobile-level-3-list"], children: selectedColumn.links.map((link, index) => /* @__PURE__ */ jsx(
-                    "li",
-                    {
-                      className: styles["main-navigation__mobile-level-3-item"],
-                      children: renderNavigationLink({
-                        link,
-                        className: cn(
-                          styles["main-navigation__mobile-level-3-link"],
-                          focusStyles.focusableInset
-                        ),
-                        children: link.label
-                      })
-                    },
-                    `${selectedColumn.heading}-${index}`
-                  )) })
+                  /* @__PURE__ */ jsx("ul", { className: styles["main-navigation__mobile-level-3-list"], children: selectedColumn.links.map((link, index) => {
+                    const isInCurrentPage = isLinkInCurrentPage(
+                      link,
+                      currentPathname
+                    );
+                    return /* @__PURE__ */ jsx(
+                      "li",
+                      {
+                        className: styles["main-navigation__mobile-level-3-item"],
+                        children: renderNavigationLink({
+                          link,
+                          className: cn(
+                            styles["main-navigation__mobile-level-3-link"],
+                            isInCurrentPage && styles["main-navigation__mobile-level-3-link--current"],
+                            focusStyles.focusableInset
+                          ),
+                          ariaCurrent: isInCurrentPage ? "page" : void 0,
+                          children: link.label
+                        })
+                      },
+                      `${selectedColumn.heading}-${index}`
+                    );
+                  }) })
                 ] })
               }
             )
@@ -1051,6 +1104,7 @@ const MainNavigation = ({
           isCurrentPathItem && styles["main-navigation__item-toggle--current"],
           isOpen && styles["main-navigation__item-toggle--open"]
         ),
+        "aria-current": isCurrentPathItem ? "true" : void 0,
         "aria-expanded": isOpen,
         onClick: () => toggleTopLevelItem(index),
         onKeyDown: (event) => {