@orangesk/orange-design-system 2.0.0-beta.40 → 2.0.0-beta.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-beta.40",
+  "version": "2.0.0-beta.42",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -55,7 +55,7 @@
     "@cloudfour/transition-hidden-element": "^2.0.2",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "16.2.2",
+    "@next/mdx": "16.2.3",
     "@orangesk/accessible-autocomplete": "3.2.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.13",
@@ -63,19 +63,19 @@
     "classnames": "^2.5.1",
     "daypickr": "^0.3.4",
     "diff2html": "^3.4.56",
-    "dompurify": "^3.3.3",
-    "html-react-parser": "^5.2.17",
+    "dompurify": "^3.4.0",
+    "html-react-parser": "6.0.1",
     "lorem-ipsum": "^2.0.8",
     "minisearch": "7.2.0",
-    "next": "16.2.2",
+    "next": "16.2.3",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "prism-react-renderer": "^2.4.1",
     "query-string": "^9.3.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "react-element-to-jsx-string": "^17.0.1",
-    "react-is": "^19.2.4",
+    "react-is": "^19.2.5",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "remark-gemoji": "^8.0.0",
@@ -104,35 +104,35 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "25.5.0",
+    "@types/node": "25.6.0",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@types/wnumb": "^1.2.3",
     "@vitejs/plugin-react": "6.0.1",
-    "@vitest/browser": "^4.1.2",
-    "@vitest/browser-playwright": "^4.1.2",
-    "@vitest/coverage-v8": "^4.1.2",
-    "@vitest/ui": "^4.1.2",
+    "@vitest/browser": "^4.1.4",
+    "@vitest/browser-playwright": "^4.1.4",
+    "@vitest/coverage-v8": "^4.1.4",
+    "@vitest/ui": "^4.1.4",
     "canvas": "^3.2.3",
     "fs-extra": "^11.3.4",
     "glob": "13.0.6",
-    "html-validate": "10.11.2",
+    "html-validate": "10.12.1",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
-    "jsdom": "29.0.1",
+    "jsdom": "29.0.2",
     "lint-staged": "16.4.0",
-    "playwright": "^1.59.0",
-    "prettier": "^3.8.1",
+    "playwright": "^1.59.1",
+    "prettier": "^3.8.2",
     "rollup": "^4.60.1",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.4.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.98.0",
+    "sass": "^1.99.0",
     "svg-sprite": "^2.0.4",
     "typescript": "6.0.2",
-    "vitest": "^4.1.2",
+    "vitest": "^4.1.4",
     "vitest-axe": "^0.1.0",
-    "vitest-browser-react": "^2.1.0"
+    "vitest-browser-react": "^2.2.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,json,css}": "biome check --write --no-errors-on-unmatched",

package/src/assets/icons/youtube.svg

@@ -1 +1,3 @@
-<svg width="80" height="80" viewbox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path d="M63.275 30.05S62.8 26.625 61.4 25.1c-1.825-1.975-3.85-2-4.75-2.1-6.7-.5-16.65-.5-16.65-.5s-10 0-16.625.5c-.925.125-2.95.125-4.75 2.1-1.425 1.5-1.9 4.95-1.9 4.95s-.475 4.025-.475 8.05v3.775c0 4.025.475 8.05.475 8.05s.475 3.425 1.875 4.95c1.825 2 4.2 1.925 5.25 2.125 3.8.375 16.15.5 16.15.5s10 0 16.625-.5c.925-.15 2.95-.15 4.75-2.125 1.425-1.5 1.9-4.95 1.9-4.95s.475-4 .475-8.05v-3.75c0-4.05-.475-8.075-.475-8.075ZM36.25 47.5v-15l12.5 7.525-12.5 7.475Z" /></svg>
+<svg viewBox="0 0 80 80" id="youtube">
+  <path xmlns="http://www.w3.org/2000/svg" d="M63.275 30.05S62.8 26.625 61.4 25.1c-1.825-1.975-3.85-2-4.75-2.1-6.7-.5-16.65-.5-16.65-.5s-10 0-16.625.5c-.925.125-2.95.125-4.75 2.1-1.425 1.5-1.9 4.95-1.9 4.95s-.475 4.025-.475 8.05v3.775c0 4.025.475 8.05.475 8.05s.475 3.425 1.875 4.95c1.825 2 4.2 1.925 5.25 2.125 3.8.375 16.15.5 16.15.5s10 0 16.625-.5c.925-.15 2.95-.15 4.75-2.125 1.425-1.5 1.9-4.95 1.9-4.95s.475-4 .475-8.05v-3.75c0-4.05-.475-8.075-.475-8.075ZM36.25 47.5v-15l12.5 7.525-12.5 7.475Z"></path>
+</svg>

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

@@ -4,6 +4,8 @@ export default class AnchorNavigation {
   private static readonly DRAG_START_THRESHOLD = 6;
   private static readonly SCROLL_END_DEBOUNCE_MS = 150;
   private static readonly SCROLL_EDGE_TOLERANCE = 1;
+  private static readonly SCROLL_ALIGNMENT_TOLERANCE = 1;
+  private static readonly MAX_SCROLL_CORRECTIONS = 2;
 
   private element: HTMLElement;
   private contentLeftElement: HTMLElement | null;
@@ -16,6 +18,7 @@ export default class AnchorNavigation {
   private scrollEndHandler: () => void;
   private scrollEndFallbackHandler: () => void;
   private resizeHandler: () => void;
+  private mouseDownHandler: (event: MouseEvent) => void;
   private dragStartHandler: (event: MouseEvent) => void;
   private dragMoveHandler: (event: MouseEvent) => void;
   private dragEndHandler: () => void;
@@ -33,6 +36,9 @@ export default class AnchorNavigation {
   private sections: HTMLElement[] = [];
   private currentPath: string;
   private lastActiveIndex: number = 0;
+  private autoScrollTargetId: string | null = null;
+  private autoScrollCorrectionCount: number = 0;
+  private lastStickyOffset: number = 0;
 
   constructor(element: HTMLElement) {
     this.element = element;
@@ -50,6 +56,7 @@ export default class AnchorNavigation {
     this.scrollEndHandler = this.handleScrollEnd.bind(this);
     this.scrollEndFallbackHandler = this.handleScrollEndFallback.bind(this);
     this.resizeHandler = this.handleResize.bind(this);
+    this.mouseDownHandler = this.handleMouseDown.bind(this);
     this.dragStartHandler = this.handleDragStart.bind(this);
     this.dragMoveHandler = this.handleDragMove.bind(this);
     this.dragEndHandler = this.handleDragEnd.bind(this);
@@ -76,13 +83,35 @@ export default class AnchorNavigation {
 
   private updateStickyPosition(): void {
     if (!this.megamenuElement) return;
-    this.element.style.top = `${this.megamenuElement.offsetHeight}px`;
+
+    const stickyOffset = this.megamenuElement.offsetHeight;
+    const hasStickyOffsetChanged = stickyOffset !== this.lastStickyOffset;
+
+    this.lastStickyOffset = stickyOffset;
+    this.element.style.top = `${stickyOffset}px`;
+
+    if (
+      !hasStickyOffsetChanged ||
+      !this.isAutoScrolling ||
+      !this.autoScrollTargetId ||
+      this.autoScrollCorrectionCount >= AnchorNavigation.MAX_SCROLL_CORRECTIONS
+    ) {
+      return;
+    }
+
+    const targetElement = document.getElementById(this.autoScrollTargetId);
+    if (!targetElement) return;
+
+    // Re-target smoothly as soon as sticky offset changes to avoid a visible snap at scroll end.
+    this.autoScrollCorrectionCount += 1;
+    this.scrollToSection(targetElement, "smooth");
   }
 
   private setupMegamenuObserver(): void {
     this.megamenuElement = this.findMegamenuElement();
 
     if (!this.megamenuElement) {
+      this.lastStickyOffset = 0;
       this.element.style.top = "0px";
       return;
     }
@@ -116,6 +145,7 @@ export default class AnchorNavigation {
     this.teardownScrollSpyListeners();
 
     this.element.addEventListener("click", this.anchorClickHandler);
+    this.element.addEventListener("mousedown", this.mouseDownHandler);
     window.addEventListener("scroll", this.scrollSpyHandler, { passive: true });
 
     if (this.supportsScrollEnd) {
@@ -129,10 +159,12 @@ export default class AnchorNavigation {
     window.addEventListener("resize", this.resizeHandler);
 
     this.initScrollSpy();
+    this.alignInitialHashIfNeeded();
   }
 
   private teardownScrollSpyListeners(): void {
     this.element.removeEventListener("click", this.anchorClickHandler);
+    this.element.removeEventListener("mousedown", this.mouseDownHandler);
     window.removeEventListener("scroll", this.scrollSpyHandler);
     window.removeEventListener("resize", this.resizeHandler);
 
@@ -148,20 +180,35 @@ export default class AnchorNavigation {
     }
   }
 
-  private handleAnchorClick(event: Event): void {
+  private handleMouseDown(event: MouseEvent): void {
+    if (event.button !== 0) return;
+
     const target = event.target as HTMLElement | null;
-    const anchor = target?.closest(
-      ".anchor-navigation__item",
-    ) as HTMLAnchorElement | null;
+    if (!target || !this.element.contains(target)) return;
 
-    if (!anchor || !this.element.contains(anchor)) return;
+    const interactiveSelector =
+      "a, button, input, select, textarea, label, [role='button'], [contenteditable='true']";
+    if (target.closest(interactiveSelector)) return;
 
+    // Prevent native text-selection drag from triggering page autoscroll.
+    event.preventDefault();
+  }
+
+  private handleAnchorClick(event: Event): void {
     if (this.suppressClick) {
       event.preventDefault();
+      event.stopPropagation();
       this.suppressClick = false;
       return;
     }
 
+    const target = event.target as HTMLElement | null;
+    const anchor = target?.closest(
+      ".anchor-navigation__item",
+    ) as HTMLAnchorElement | null;
+
+    if (!anchor || !this.element.contains(anchor)) return;
+
     event.preventDefault();
 
     const href = anchor.getAttribute("href");
@@ -171,27 +218,108 @@ export default class AnchorNavigation {
     const targetElement = document.getElementById(targetId);
     if (!targetElement) return;
 
-    this.isAutoScrolling = true;
+    this.startAutoScroll(targetId);
     anchor.blur();
 
+    this.scrollToSection(targetElement, "smooth");
+
+    const nextUrl = `${window.location.pathname}${window.location.search}#${targetId}`;
+    window.history.pushState(null, "", nextUrl);
+    this.initScrollSpy(targetId);
+  }
+
+  private getHashSectionId(): string | null {
+    const hash = window.location.hash;
+    if (!hash || hash.length <= 1) return null;
+
+    let hashId = hash.slice(1);
+    try {
+      hashId = decodeURIComponent(hashId);
+    } catch {
+      // Keep raw hash when decoding fails.
+    }
+
+    return hashId || null;
+  }
+
+  private startAutoScroll(sectionId: string): void {
+    this.isAutoScrolling = true;
+    this.autoScrollTargetId = sectionId;
+    this.autoScrollCorrectionCount = 0;
+  }
+
+  private resetAutoScrollState(): void {
+    this.isAutoScrolling = false;
+    this.autoScrollTargetId = null;
+    this.autoScrollCorrectionCount = 0;
+  }
+
+  private tryCorrectAutoScrollAlignment(): boolean {
+    if (!this.autoScrollTargetId) return true;
+
+    const targetElement = document.getElementById(this.autoScrollTargetId);
+    if (!targetElement) return true;
+
+    const targetTop = this.getTargetTop(targetElement);
+    const distance = Math.abs(window.scrollY - targetTop);
+    if (distance <= AnchorNavigation.SCROLL_ALIGNMENT_TOLERANCE) {
+      return true;
+    }
+
+    if (
+      this.autoScrollCorrectionCount >= AnchorNavigation.MAX_SCROLL_CORRECTIONS
+    ) {
+      return true;
+    }
+
+    this.autoScrollCorrectionCount += 1;
+    const correctionBehavior: ScrollBehavior =
+      this.autoScrollCorrectionCount === 1 ? "smooth" : "auto";
+    this.scrollToSection(targetElement, correctionBehavior);
+    return false;
+  }
+
+  private getTotalStickyOffset(): number {
     const scrollOffset = this.megamenuElement
       ? this.megamenuElement.offsetHeight
       : 0;
-    const additionalOffset = this.element.offsetHeight;
+    const anchorNavOffset = this.element.offsetHeight;
+    return scrollOffset + anchorNavOffset;
+  }
+
+  private getTargetTop(targetElement: HTMLElement): number {
     const targetTop =
       targetElement.getBoundingClientRect().top +
       window.scrollY -
-      scrollOffset -
-      additionalOffset;
+      this.getTotalStickyOffset();
+    return Math.max(0, targetTop);
+  }
 
+  private scrollToSection(
+    targetElement: HTMLElement,
+    behavior: ScrollBehavior,
+  ): void {
     window.scrollTo({
-      top: Math.max(0, targetTop),
-      behavior: "smooth",
+      top: this.getTargetTop(targetElement),
+      behavior,
     });
+  }
 
-    const nextUrl = `${window.location.pathname}${window.location.search}#${targetId}`;
-    window.history.pushState(null, "", nextUrl);
-    this.initScrollSpy(targetId);
+  private alignInitialHashIfNeeded(): void {
+    const hashId = this.getHashSectionId();
+    if (!hashId) return;
+
+    const targetElement = document.getElementById(hashId);
+    if (!targetElement) return;
+
+    this.startAutoScroll(hashId);
+
+    requestAnimationFrame(() => {
+      this.scrollToSection(targetElement, "auto");
+      requestAnimationFrame(() => {
+        this.handleScrollEnd();
+      });
+    });
   }
 
   private initScrollSpy(forcedSectionId: string | null = null): void {
@@ -300,18 +428,30 @@ export default class AnchorNavigation {
     activeLink: HTMLElement,
     forceCenter: boolean = false,
   ): void {
-    const itemLeft = activeLink.offsetLeft;
-    const itemRight = itemLeft + activeLink.clientWidth;
-    const viewportLeft = contentLeft.scrollLeft;
-    const viewportRight = viewportLeft + contentLeft.clientWidth;
-    const isVisible = itemLeft >= viewportLeft && itemRight <= viewportRight;
-
-    if (!forceCenter && isVisible) return;
-
+    const maxScrollLeft = Math.max(
+      0,
+      contentLeft.scrollWidth - contentLeft.clientWidth,
+    );
+    const contentRect = contentLeft.getBoundingClientRect();
+    const itemRect = activeLink.getBoundingClientRect();
+    const itemCenterWithinContent =
+      itemRect.left -
+      contentRect.left +
+      contentLeft.scrollLeft +
+      itemRect.width / 2;
     const targetScrollLeft =
-      itemLeft - contentLeft.clientWidth / 2 + activeLink.clientWidth / 2;
+      itemCenterWithinContent - contentLeft.clientWidth / 2;
+
     const behavior = window.innerWidth < 768 ? "auto" : "smooth";
-    const nextScrollLeft = Math.max(0, targetScrollLeft);
+    const nextScrollLeft = Math.min(
+      maxScrollLeft,
+      Math.max(0, targetScrollLeft),
+    );
+
+    const isAlreadyAligned =
+      Math.abs(contentLeft.scrollLeft - nextScrollLeft) <=
+      AnchorNavigation.SCROLL_ALIGNMENT_TOLERANCE;
+    if (!forceCenter && isAlreadyAligned) return;
 
     if (typeof contentLeft.scrollTo === "function") {
       contentLeft.scrollTo({
@@ -525,9 +665,7 @@ export default class AnchorNavigation {
 
       // Set a timeout to detect when scrolling has ended
       this.scrollTimeout = setTimeout(() => {
-        this.isAutoScrolling = false;
-        this.scrollTimeout = null;
-        this.initScrollSpy();
+        this.handleScrollEnd();
       }, AnchorNavigation.SCROLL_END_DEBOUNCE_MS);
     } else {
       this.initScrollSpy();
@@ -539,7 +677,12 @@ export default class AnchorNavigation {
       clearTimeout(this.scrollTimeout);
       this.scrollTimeout = null;
     }
-    this.isAutoScrolling = false;
+
+    if (!this.tryCorrectAutoScrollAlignment()) {
+      return;
+    }
+
+    this.resetAutoScrollState();
     this.initScrollSpy();
   }
 
@@ -566,9 +709,12 @@ export default class AnchorNavigation {
 
     this.element.style.top = "";
     this.megamenuElement = null;
+    this.lastStickyOffset = 0;
     this.navLinks = null;
     this.sections = [];
     this.lastActiveIndex = 0;
+    this.autoScrollTargetId = null;
+    this.autoScrollCorrectionCount = 0;
     (this.element as any).ODS_AnchorNavigation = null;
   }
 
@@ -588,9 +734,12 @@ export default class AnchorNavigation {
     }
 
     this.megamenuElement = null;
+    this.lastStickyOffset = 0;
     this.navLinks = null;
     this.sections = [];
     this.lastActiveIndex = 0;
+    this.autoScrollTargetId = null;
+    this.autoScrollCorrectionCount = 0;
 
     this.init();
   }

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

@@ -44,19 +44,27 @@
   }
 
   @include breakpoint.get("sm", "down") {
-    margin-right: space.get("medium") !important;
+    margin-right: convert.to-rem(10px) !important;
     padding: convert.to-rem(15px) 0 !important;
   }
 
-  &:hover,
   &:focus-visible,
-  &:active,
   &.is-active {
     box-shadow: megamenuConfig.$active-line;
     color: inherit;
     text-decoration: none !important;
     outline: none;
   }
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover,
+    &:active {
+      box-shadow: megamenuConfig.$active-line;
+      color: inherit;
+      text-decoration: none !important;
+      outline: none;
+    }
+  }
 }
 
 @mixin anchor-navigation-content() {
@@ -134,6 +142,7 @@
   display: flex;
   flex: 1 1 auto;
   min-width: 0;
+  scroll-snap-type: none !important;
 
   &.is-draggable {
     user-select: none;