@orangesk/orange-design-system 2.0.0-beta.6 → 2.0.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.8",
   "private": false,
   "engines": {
     "node": ">=18.x"
@@ -34,7 +34,7 @@
     "@cloudfour/transition-hidden-element": "^2.0.2",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "^15.5.3",
+    "@next/mdx": "^15.5.4",
     "@orangesk/accessible-autocomplete": "^3.1.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.13",
@@ -44,9 +44,9 @@
     "diff2html": "^3.4.52",
     "dompurify": "^3.2.7",
     "html-react-parser": "^5.2.6",
-    "jest-environment-jsdom": "^30.1.2",
+    "jest-environment-jsdom": "^30.2.0",
     "lorem-ipsum": "^2.0.8",
-    "next": "15.5.3",
+    "next": "15.5.4",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "pretty": "^2.0.0",
@@ -78,17 +78,17 @@
     "@rollup/plugin-typescript": "^12.1.4",
     "@rollup/plugin-url": "^8.0.2",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/jest-dom": "^6.9.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.5.2",
+    "@types/node": "^24.6.1",
     "@types/pretty": "^2.0.3",
-    "@types/react": "19.1.13",
+    "@types/react": "19.1.16",
     "@types/react-dom": "19.1.9",
     "@types/wnumb": "^1.2.3",
-    "babel-jest": "30.1.2",
+    "babel-jest": "30.2.0",
     "eslint": "latest",
-    "eslint-config-next": "^15.5.3",
+    "eslint-config-next": "^15.5.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-unused-imports": "^4.2.0",
     "fs-extra": "^11.3.2",
@@ -96,16 +96,16 @@
     "html-validate": "10.0.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "30.1.3",
+    "jest": "30.2.0",
     "jest-axe": "10.0.0",
-    "jest-snapshot": "^30.1.2",
-    "lint-staged": "16.2.0",
+    "jest-snapshot": "^30.2.0",
+    "lint-staged": "16.2.3",
     "prettier": "^3.6.2",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.2.3",
     "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.93.2",
     "svg-sprite": "^2.0.4",
-    "typescript": "5.9.2"
+    "typescript": "5.9.3"
   }
 }

package/src/assets/icons/article.svg

@@ -1,7 +1,7 @@
 <svg width="80" height="80" viewBox="0 0 80 80" fill="none"
   xmlns="http://www.w3.org/2000/svg">
-  <path d="M55.1469 22.6034C56.5877 22.6034 57.7543 23.7749 57.7543 25.2157C57.7537 26.6558 56.5872 27.8231 55.1469 27.8231L37.7543 27.8231C36.3146 27.8224 35.1476 26.6554 35.1469 25.2157C35.1469 23.7754 36.3142 22.6041 37.7543 22.6034L55.1469 22.6034Z" fill="black"/>
-  <path d="M55.1469 34.774C56.5877 34.774 57.7543 35.9456 57.7543 37.3863C57.7537 38.8265 56.5872 39.9937 55.1469 39.9937L37.7543 39.9937C36.3146 39.993 35.1476 38.826 35.1469 37.3863C35.1469 35.946 36.3142 34.7747 37.7543 34.774L55.1469 34.774Z" fill="black"/>
-  <path d="M55.1469 46.9497C56.5877 46.9497 57.7543 48.1212 57.7543 49.562C57.7537 51.0021 56.5872 52.1694 55.1469 52.1694H37.7543C36.3146 52.1687 35.1476 51.0017 35.1469 49.562C35.1469 48.1217 36.3142 46.9504 37.7543 46.9497L55.1469 46.9497Z" fill="black"/>
-  <path d="M69.9268 60.8679C69.9261 65.6699 66.0325 69.5642 61.2305 69.5642H15.3613C11.9101 69.5633 9.07156 66.9393 8.73047 63.5779L8.69629 62.8992V29.5349H22.9736V8.69507H69.9268V60.8679ZM28.1885 60.8679L28.1445 61.7566C28.0515 62.6713 27.8104 63.5408 27.4561 64.3494H61.2305C63.1511 64.3494 64.7113 62.7884 64.7119 60.8679V13.9148H28.1885V60.8679ZM14.2773 60.8679C14.2785 62.7875 15.8343 64.3437 17.7539 64.3445H19.4922C21.4125 64.3445 22.9676 62.788 22.9688 60.8679V34.7839H14.2773V60.8679Z" fill="black"/>
+  <path d="M55.1469 22.6034C56.5877 22.6034 57.7543 23.7749 57.7543 25.2157C57.7537 26.6558 56.5872 27.8231 55.1469 27.8231L37.7543 27.8231C36.3146 27.8224 35.1476 26.6554 35.1469 25.2157C35.1469 23.7754 36.3142 22.6041 37.7543 22.6034L55.1469 22.6034Z" fill="currentColor"/>
+  <path d="M55.1469 34.774C56.5877 34.774 57.7543 35.9456 57.7543 37.3863C57.7537 38.8265 56.5872 39.9937 55.1469 39.9937L37.7543 39.9937C36.3146 39.993 35.1476 38.826 35.1469 37.3863C35.1469 35.946 36.3142 34.7747 37.7543 34.774L55.1469 34.774Z" fill="currentColor"/>
+  <path d="M55.1469 46.9497C56.5877 46.9497 57.7543 48.1212 57.7543 49.562C57.7537 51.0021 56.5872 52.1694 55.1469 52.1694H37.7543C36.3146 52.1687 35.1476 51.0017 35.1469 49.562C35.1469 48.1217 36.3142 46.9504 37.7543 46.9497L55.1469 46.9497Z" fill="currentColor"/>
+  <path d="M69.9268 60.8679C69.9261 65.6699 66.0325 69.5642 61.2305 69.5642H15.3613C11.9101 69.5633 9.07156 66.9393 8.73047 63.5779L8.69629 62.8992V29.5349H22.9736V8.69507H69.9268V60.8679ZM28.1885 60.8679L28.1445 61.7566C28.0515 62.6713 27.8104 63.5408 27.4561 64.3494H61.2305C63.1511 64.3494 64.7113 62.7884 64.7119 60.8679V13.9148H28.1885V60.8679ZM14.2773 60.8679C14.2785 62.7875 15.8343 64.3437 17.7539 64.3445H19.4922C21.4125 64.3445 22.9676 62.788 22.9688 60.8679V34.7839H14.2773V60.8679Z" fill="currentColor"/>
 </svg>

package/src/components/Accordion/styles/config.scss

@@ -1,8 +1,8 @@
-@use '../../../styles/tokens/space';
+@use "../../../styles/tools/convert";
 
 $spacing: (
-  default: space.get('small') 0,
-  large: space.get('medium') 0,
+  default: convert.to-rem(15px) 0,
+  large: convert.to-rem(20px) 0,
 );
 
-$enclosed-spacing: space.get('medium');
+$enclosed-spacing: convert.to-rem(20px);

package/src/components/Accordion/styles/mixins.scss

@@ -20,10 +20,10 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  border-top: 1px solid var(--color-border-strong);
+  border-bottom: 1px solid var(--color-border-strong);
 
   &:last-child {
-    border-bottom: 1px solid var(--color-border-strong);
+    border-bottom: 0px;
   }
 
   ul {

package/src/components/AnchorNavigation/AnchorNavigation.static.ts

@@ -1,29 +1,29 @@
-interface AnchorNavigationConfig {
-  itemSelector: string;
-}
-
-export const defaultConfig: AnchorNavigationConfig = {
-  itemSelector: '.anchor-navigation__item',
-};
-
-export const configDocs = {
-  itemSelector: "Anchor navigation item element selector",
-};
-
 export default class AnchorNavigation {
   private element: HTMLElement;
-  private config: AnchorNavigationConfig;
-  private items: HTMLElement[];
-  private activeItemIndex: number | null;
+  private megamenuElement: HTMLElement | null;
+  private resizeObserver: ResizeObserver | null;
+  private scrollHandler: () => void;
+  private scrollSpyHandler: () => void;
+  private scrollEndHandler: () => void;
+  private resizeHandler: () => void;
+  private isAutoScrolling: boolean = false;
+  private navLinks: NodeListOf<HTMLAnchorElement> | null = null;
+  private sections: HTMLElement[] = [];
+  private currentPath: string;
+  private lastActiveIndex: number = 0;
 
-  constructor(element: HTMLElement, config?: Partial<AnchorNavigationConfig>) {
+  constructor(element: HTMLElement) {
     this.element = element;
-    this.config = { ...defaultConfig, ...config };
 
-    this.items = [];
-    this.activeItemIndex = null;
+    this.megamenuElement = null;
+    this.resizeObserver = null;
+    this.isAutoScrolling = false;
+    this.currentPath = window.location.pathname;
 
-    this.handleClick = this.handleClick.bind(this);
+    this.scrollHandler = this.updateStickyPosition.bind(this);
+    this.scrollSpyHandler = this.handleScrollSpy.bind(this);
+    this.scrollEndHandler = this.handleScrollEnd.bind(this);
+    this.resizeHandler = this.initScrollSpy.bind(this);
 
     (this.element as any).ODS_AnchorNavigation = this;
 
@@ -33,83 +33,263 @@ export default class AnchorNavigation {
   }
 
   static getInstance(el: HTMLElement): AnchorNavigation | null {
-    return el && (el as any).ODS_AnchorNavigation ? (el as any).ODS_AnchorNavigation : null;
+    return el && (el as any).ODS_AnchorNavigation
+      ? (el as any).ODS_AnchorNavigation
+      : null;
   }
 
-  private init(): void {
-    this.items = Array.from(
-      this.element.querySelectorAll<HTMLElement>(this.config.itemSelector),
-    );
+  private findMegamenuElement(): HTMLElement | null {
+    return document.querySelector("[data-megamenu]") as HTMLElement | null;
+  }
 
-    this.items.forEach((item, index) => {
-      item.addEventListener("click", this.handleClick);
+  private updateStickyPosition(): void {
+    if (!this.megamenuElement) return;
+    this.element.style.top = `${this.megamenuElement.offsetHeight}px`;
+  }
 
-      if (this.isActive(item)) {
-        this.activeItemIndex = index;
-      }
-    });
+  private setupMegamenuObserver(): void {
+    this.megamenuElement = this.findMegamenuElement();
 
-    // Ak nie je žiadna položka aktívna, aktivuj prvú
-    if (this.activeItemIndex === null && this.items.length > 0) {
-      this.activateNthItem(0);
+    if (!this.megamenuElement) {
+      this.element.style.top = "0px";
+      return;
     }
+
+    this.updateStickyPosition();
+    window.addEventListener("scroll", this.scrollHandler, { passive: true });
+
+    this.resizeObserver = new ResizeObserver(
+      this.updateStickyPosition.bind(this),
+    );
+    this.resizeObserver.observe(this.megamenuElement);
   }
 
-  destroy(): void {
-    this.items.forEach((item) => {
-      item.removeEventListener("click", this.handleClick);
+  private setupScrollSpy(): void {
+    // Set dynamic scroll margin for CSS
+    document.documentElement.style.setProperty(
+      "--extra-scroll-margin",
+      this.element.offsetHeight + "px",
+    );
+
+    // Get all anchor navigation links
+    this.navLinks = this.element.querySelectorAll(".anchor-navigation__item");
+
+    // Get all sections that correspond to the navigation links
+    this.sections = Array.from(this.navLinks || [])
+      .map((link) => link.getAttribute("href"))
+      .filter((href) => href?.includes("#"))
+      .map((href) => document.getElementById(href!.split("#")[1]))
+      .filter(Boolean) as HTMLElement[];
+
+    // Add click listeners to anchor navigation items
+    this.navLinks.forEach((anchor) => {
+      anchor.addEventListener("click", (event) => {
+        event.preventDefault();
+        const href = anchor.getAttribute("href");
+        if (href && href.includes("#")) {
+          const targetId = href.split("#")[1];
+          const targetElement = document.getElementById(targetId);
+
+          if (targetElement) {
+            this.isAutoScrolling = true;
+
+            // Calculate scroll position
+            const scrollOffset = this.megamenuElement
+              ? this.megamenuElement.offsetHeight
+              : 0;
+            const additionalOffset = this.element.offsetHeight;
+            const targetTop =
+              targetElement.offsetTop - scrollOffset - additionalOffset;
+
+            // Smooth scroll to target
+            window.scrollTo({
+              top: Math.max(0, targetTop),
+              behavior: "smooth",
+            });
+
+            // Update active state
+            this.initScrollSpy(targetId);
+          }
+        }
+      });
     });
 
-    this.items = [];
-    (this.element as any).ODS_AnchorNavigation = null;
-  }
+    // Add scroll listeners
+    window.addEventListener("scroll", this.scrollSpyHandler, { passive: true });
 
-  update(): void {
-    this.destroy();
-    this.init();
+    // Add scrollend listener with fallback
+    try {
+      window.addEventListener("scrollend", this.scrollEndHandler);
+    } catch {
+      // Fallback for browsers that don't support scrollend
+      let scrollTimeout: ReturnType<typeof setTimeout>;
+      const scrollEndFallback = () => {
+        clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(() => {
+          this.handleScrollEnd();
+        }, 150);
+      };
+      window.addEventListener("scroll", scrollEndFallback, { passive: true });
+    }
+
+    window.addEventListener("resize", this.resizeHandler);
+
+    this.initScrollSpy();
   }
 
-  private isActive = (el: HTMLElement): boolean => {
-    return el.classList.contains('is-active');
-  };
+  private initScrollSpy(forcedSectionId: string | null = null): void {
+    if (!this.navLinks || !this.sections.length) return;
+
+    let targetSection: HTMLElement | undefined;
+    let targetIndex: number = -1;
+
+    // Remove active class from all links
+    this.navLinks.forEach((link) => link.classList.remove("is-active"));
+
+    if (forcedSectionId) {
+      targetSection = document.getElementById(forcedSectionId) || undefined;
+      if (targetSection) {
+        // Find the index of the forced section
+        targetIndex = this.sections.findIndex(
+          (section) => section.id === forcedSectionId,
+        );
+      }
+    } else {
+      // Calculate scroll offset from megamenu height and anchor nav height
+      const scrollOffset = this.megamenuElement
+        ? this.megamenuElement.offsetHeight
+        : 0;
+      const anchorNavOffset = this.element.offsetHeight;
+      const totalOffset = scrollOffset + anchorNavOffset;
+      const effectiveCenter = window.scrollY + totalOffset + 50; // Add some buffer
+
+      // Find the section that's currently in view
+      for (let i = 0; i < this.sections.length; i++) {
+        const section = this.sections[i];
+        const { top: sectionTopRaw, height: sectionHeight } =
+          section.getBoundingClientRect();
+        const sectionTop = sectionTopRaw + window.scrollY;
+        const sectionBottom = sectionTop + sectionHeight;
 
-  private handleClick(e: MouseEvent): void {
-    const clickedItem = e.currentTarget as HTMLElement;
+        if (effectiveCenter >= sectionTop && effectiveCenter < sectionBottom) {
+          targetSection = section;
+          targetIndex = i;
+          break;
+        }
+      }
+    }
 
-    // Najdi index kliknutej položky
-    const clickedIndex = this.items.findIndex(item => item === clickedItem);
-    
-    if (clickedIndex !== -1) {
-      this.activateNthItem(clickedIndex);
+    // Fallback logic: if no section is found, use fallback rules
+    if (!targetSection) {
+      // If we're at the very top, activate first item
+      if (window.scrollY <= 100) {
+        targetIndex = 0;
+        targetSection = this.sections[0];
+      } else {
+        // Keep the last active item
+        targetIndex = this.lastActiveIndex;
+        targetSection = this.sections[targetIndex];
+      }
     }
-  }
 
-  private toggleItem(el: HTMLElement, state: "on" | "off"): void {
-    const isActive = this.isActive(el);
+    // Update last active index if we found a valid target
+    if (targetIndex >= 0) {
+      this.lastActiveIndex = targetIndex;
+    }
+
+    if (targetSection) {
+      const id = targetSection.getAttribute("id");
 
-    if (state === "on" && !isActive) {
-      el.classList.add('is-active');
+      // Find the matching navigation link - try different href patterns
+      let activeLink = this.element.querySelector(
+        `.anchor-navigation__item[href="#${id}"]`,
+      ) as HTMLElement;
+
+      if (!activeLink) {
+        activeLink = this.element.querySelector(
+          `.anchor-navigation__item[href="${this.currentPath}#${id}"]`,
+        ) as HTMLElement;
+      }
+
+      if (!activeLink) {
+        // Try without current path for relative links
+        activeLink = Array.from(this.navLinks).find((link) => {
+          const href = link.getAttribute("href");
+          return href && href.endsWith(`#${id}`);
+        }) as HTMLElement;
+      }
+
+      if (activeLink) {
+        activeLink.classList.add("is-active");
+
+        // Smooth scroll the navigation to center the active link
+        const contentLeft = this.element.querySelector(
+          ".anchor-navigation__content-left",
+        ) as HTMLElement;
+        if (contentLeft) {
+          contentLeft.scrollTo({
+            left:
+              activeLink.offsetLeft -
+              this.element.clientWidth / 2 +
+              activeLink.clientWidth / 2,
+            behavior: "smooth",
+          });
+        }
+      }
     }
+  }
 
-    if (state === "off" && isActive) {
-      el.classList.remove('is-active');
+  private handleScrollSpy(): void {
+    if (!this.isAutoScrolling) {
+      this.initScrollSpy();
     }
   }
 
-  activateNthItem(index: number): void {
-    if (index < 0 || index >= this.items.length) return;
+  private handleScrollEnd(): void {
+    this.isAutoScrolling = false;
+    this.initScrollSpy();
+  }
 
-    this.items.forEach((item, i) => {
-      if (i === index) {
-        this.activeItemIndex = i;
-        this.toggleItem(item, "on");
-      } else {
-        this.toggleItem(item, "off");
-      }
-    });
+  private init(): void {
+    this.setupMegamenuObserver();
+    this.setupScrollSpy();
   }
 
-  getActiveItemIndex(): number | null {
-    return this.activeItemIndex;
+  destroy(): void {
+    window.removeEventListener("scroll", this.scrollHandler);
+    window.removeEventListener("scroll", this.scrollSpyHandler);
+    window.removeEventListener("scrollend", this.scrollEndHandler);
+    window.removeEventListener("resize", this.resizeHandler);
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+
+    this.element.style.top = "";
+    this.megamenuElement = null;
+    this.navLinks = null;
+    this.sections = [];
+    this.lastActiveIndex = 0;
+    (this.element as any).ODS_AnchorNavigation = null;
   }
-} 
+
+  update(): void {
+    window.removeEventListener("scroll", this.scrollHandler);
+    window.removeEventListener("scroll", this.scrollSpyHandler);
+    window.removeEventListener("scrollend", this.scrollEndHandler);
+    window.removeEventListener("resize", this.resizeHandler);
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+
+    this.megamenuElement = null;
+    this.navLinks = null;
+    this.sections = [];
+    this.lastActiveIndex = 0;
+
+    this.init();
+  }
+}

package/src/components/AnchorNavigation/AnchorNavigation.tsx

@@ -2,8 +2,8 @@
 
 import React from "react";
 import cx from "classnames";
-import { Grid, GridCol } from "../Grid";
 import { Link } from "../Link";
+import { Container } from "../Container";
 import { useStatic } from "../../utils/hooks";
 import AnchorNavigationStatic from "./AnchorNavigation.static";
 
@@ -27,6 +27,7 @@ const AnchorNavigation = ({
   className,
   colorScheme,
   children,
+  ...other
 }: AnchorNavigationProps) => {
   const classes = cx(
     CLASS_ROOT,
@@ -40,35 +41,38 @@ const AnchorNavigation = ({
   const [anchorNavRef] = useStatic(AnchorNavigationStatic);
 
   return (
-    <div className={classes} ref={anchorNavRef}>
-      <div className={`${CLASS_ROOT}__content`}>
-        <Grid
-          className={`list-unstyled list-inline horizontal-scroll mb-none ${CLASS_ROOT}__content-left`}
+    <nav
+      className={classes}
+      ref={anchorNavRef}
+      data-anchor-navigation
+      aria-label="Sekcie stránky"
+      {...other}
+    >
+      <Container className={`${CLASS_ROOT}__content`}>
+        <ul
+          className={cx(
+            "list-inline horizontal-scroll mb-none",
+            `${CLASS_ROOT}__content-left`,
+          )}
         >
           {items.map((item) => (
-            <GridCol
-              id={item.href.replace("#", "")}
-              size={"auto"}
-              key={item.href}
-              className="pr-none pl-none"
-            >
+            <li key={item.href}>
               <Link
                 href={item.href}
-                colorScheme={colorScheme}
                 className={cx(`${CLASS_ROOT}__item`, {
                   "is-active": item.isActive,
                 })}
               >
                 {item.label}
               </Link>
-            </GridCol>
+            </li>
           ))}
-        </Grid>
+        </ul>
         {children && (
           <div className={`${CLASS_ROOT}__content-right`}>{children}</div>
         )}
-      </div>
-    </div>
+      </Container>
+    </nav>
   );
 };
 

package/src/components/AnchorNavigation/styles/mixins.scss

@@ -4,16 +4,16 @@
 @use "./../../../styles/tools/generate";
 @use "./../../../styles/tools/convert";
 @use "./../../../styles/typography/config" as typography;
+@use "../../Megamenu/styles/config" as megamenuConfig;
 @use "sass:map" as sass-map;
 
 @mixin anchor-navigation() {
   position: sticky;
   top: 0;
-  z-index: 100;
+  z-index: 10;
   background-color: var(--color-background-primary) !important;
-  padding: space.get("large") 0;
+  border-bottom: 1px solid var(--color-border-strong);
 
-  // Štýly pre Grid s horizontal-scroll
   .horizontal-scroll {
     &::-webkit-scrollbar {
       display: none !important;
@@ -22,7 +22,6 @@
       background: transparent !important;
     }
 
-    // Pre Firefox
     scrollbar-width: none !important;
     -ms-overflow-style: none !important;
   }
@@ -30,22 +29,13 @@
 
 @mixin anchor-navigation-item() {
   margin-right: space.get("large") !important;
+  margin-bottom: 0 !important;
   padding: convert.to-rem(25px) 0 !important;
   white-space: nowrap;
-  border-bottom: 4px solid transparent;
   text-decoration: none !important;
   display: inline-block;
   cursor: pointer;
-
-  &:focus {
-    background-color: var(--color-background-primary) !important;
-    color: var(--color-text-default) !important;
-    outline: none !important;
-  }
-
-  &:hover {
-    text-decoration: none !important;
-  }
+  font-weight: 700 !important;
 
   &:last-child {
     margin-right: 0;
@@ -56,9 +46,14 @@
     padding: space.get("small") 0 !important;
   }
 
+  &:hover,
+  &:focus-visible,
+  &:active,
   &.is-active {
-    border-bottom-color: var(--color-border-accent);
-    font-weight: 600;
+    box-shadow: megamenuConfig.$active-line;
+    color: initial;
+    text-decoration: none !important;
+    outline: none;
   }
 }
 
@@ -67,24 +62,17 @@
   justify-content: space-between;
   align-items: center;
   position: relative;
-  border-bottom: 1px solid var(--color-border-subtle);
-  padding: 0 convert.to-rem(70px);
-
-  @include breakpoint.get("xl", "down") {
-    padding: 0 convert.to-rem(42px);
-  }
 
   @include breakpoint.get("xs", "down") {
-    padding: 0 convert.to-rem(10px);
-    border-bottom: none;
     overflow: hidden;
     flex-direction: column;
   }
 }
 
 @mixin anchor-navigation-content-left() {
+  display: flex;
+
   @include breakpoint.get("xs", "down") {
-    border-bottom: 1px solid var(--color-border-subtle);
     width: 100%;
   }
 }
@@ -119,7 +107,6 @@
       display: none;
     }
     padding: space.get("small") 0;
-    border-bottom: 1px solid var(--color-border-subtle);
     width: 100%;
     justify-content: space-between;
   }