@orangesk/orange-design-system 3.12.0 → 4.0.0

package/src/components/Footer/tests/Footer.styles.unit.test.jsx

@@ -21,7 +21,10 @@ describe("Footer standalone styles", () => {
   afterAll(() => stylesheet.remove());
 
   const styleFor = (selector) =>
-    rules.find((rule) => rule.selectorText === selector)?.style;
+    rules.find(
+      (rule) =>
+        rule.selectorText.replaceAll(":is(:root, :host) ", "") === selector,
+    )?.style;
 
   it("sizes social buttons and icons without global ODS styles", () => {
     expect(styleFor(".footer .social-button")?.display).toBe("inline-flex");
@@ -54,7 +57,9 @@ describe("Footer standalone styles", () => {
     );
     expect(componentRules.length).toBeGreaterThan(0);
     for (const rule of componentRules) {
-      for (const selector of rule.selectorText.split(",")) {
+      for (const selector of rule.selectorText
+        .replaceAll(":is(:root, :host) ", "")
+        .split(",")) {
         expect(selector.trim()).toMatch(/^\.footer /);
       }
     }

package/src/components/Megamenu/Megamenu.static.ts

@@ -47,6 +47,7 @@ export default class Megamenu {
   mousedownHandler!: () => void;
   touchstartHandler!: () => void;
   instanceName!: string;
+  private scrollFrameId: number | null = null;
 
   private isModalOpen(): boolean {
     return document.body.classList.contains(MODAL_OPEN_CLASS);
@@ -80,6 +81,7 @@ export default class Megamenu {
     this.handleToggleClick = this.handleToggleClick.bind(this);
     this.handleKeyPress = this.handleKeyPress.bind(this);
     this.handleScroll = this.handleScroll.bind(this);
+    this.scheduleScrollUpdate = this.scheduleScrollUpdate.bind(this);
     this.handleAccordionClick = this.handleAccordionClick.bind(this);
     this.handleArrowNavigation = this.handleArrowNavigation.bind(this);
     this.trapFocus = this.trapFocus.bind(this);
@@ -182,7 +184,9 @@ export default class Megamenu {
 
     // Add scoped event listeners to this element
     this.element.addEventListener("keydown", this.handleKeyPress);
-    window.addEventListener("scroll", this.handleScroll);
+    window.addEventListener("scroll", this.scheduleScrollUpdate, {
+      passive: true,
+    });
 
     // Track keyboard usage for proper focus management
     this.isKeyboardUser = false;
@@ -429,13 +433,21 @@ export default class Megamenu {
     }
   }
 
+  private scheduleScrollUpdate() {
+    if (this.scrollFrameId !== null) {
+      return;
+    }
+
+    this.scrollFrameId = window.requestAnimationFrame(() => {
+      this.scrollFrameId = null;
+      this.handleScroll();
+    });
+  }
+
   handleScroll() {
     const topElement = this.element.querySelector(
       '[data-hide-when-sticky="true"]',
     ) as HTMLElement;
-    const hasBrandMark = Boolean(
-      this.element.querySelector(BRAND_MARK_SELECTOR),
-    );
     const effectiveScrollY = this.getEffectiveScrollY();
     const hideThreshold = topElement?.offsetHeight || 15;
     const shouldHideTop = effectiveScrollY > hideThreshold;
@@ -449,7 +461,10 @@ export default class Megamenu {
         topElement.classList.remove("is-hidden");
         this.element.classList.remove("top-hidden");
       }
-    } else if (!this.element.classList.contains("non-sticky") && hasBrandMark) {
+    } else if (
+      !this.element.classList.contains("non-sticky") &&
+      this.element.querySelector(BRAND_MARK_SELECTOR)
+    ) {
       this.element.classList.toggle("top-hidden", shouldHideTop);
     }
   }
@@ -775,7 +790,11 @@ export default class Megamenu {
     });
 
     this.element.removeEventListener("keydown", this.handleKeyPress);
-    window.removeEventListener("scroll", this.handleScroll);
+    window.removeEventListener("scroll", this.scheduleScrollUpdate);
+    if (this.scrollFrameId !== null) {
+      window.cancelAnimationFrame(this.scrollFrameId);
+      this.scrollFrameId = null;
+    }
 
     // Remove keyboard tracking event listeners
     this.element.removeEventListener("keydown", this.keydownHandler);

package/src/components/Megamenu/classic.ts

@@ -0,0 +1,3 @@
+// The shared entry owns window.ODSMegamenu and auto-initialization.
+// No exports: Rollup emits a classic script without creating another global.
+import "./static";

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

@@ -18,6 +18,7 @@
 @use "../../Card/styles/mixins" as card;
 @use "../../../styles/typography/mixins" as typography;
 @use "../../../styles/tokens/overlay";
+@use "../../../styles/base/header-height-values" as headerHeights;
 
 @use "./config";
 
@@ -45,6 +46,34 @@
   ul {
     @include typography.list-unstyled();
     margin-bottom: convert.to-rem(30px);
+    font-weight: 400;
+
+    // Match ODS body lists without depending on its global typography sheet.
+    @each $breakpoint, $props in map.get(typographyConfig.$body-text, "default")
+    {
+      @include breakpoint.get($breakpoint) {
+        font-size: map.get($props, font-size);
+      }
+    }
+  }
+
+  li {
+    font-size: inherit;
+    line-height: inherit;
+    font-weight: inherit;
+  }
+
+  :where(h3, strong, b) {
+    font-family: inherit;
+  }
+
+  :where(strong, b) {
+    font-weight: 700;
+  }
+
+  :where(button, input, select, textarea) {
+    font: inherit;
+    color: inherit;
   }
 
   h3 {
@@ -55,18 +84,24 @@
     color: var(--color-text-default);
   }
 
-  a {
+  :where(a) {
     color: var(--color-text-default);
+    font-family: inherit;
     font-weight: 700;
     font-size: inherit;
     text-decoration: underline;
     text-underline-offset: convert.to-rem(2px);
     text-decoration-thickness: auto;
+    background-color: transparent;
+    box-shadow: none;
 
     &:hover,
     &:focus,
     &:active {
       color: var(--color-text-accent);
+      text-decoration: underline;
+      background-color: transparent;
+      box-shadow: none;
     }
 
     &:focus-visible {
@@ -86,6 +121,11 @@
   [tabindex]:not([tabindex="-1"]),
   [contentEditable="true"] {
     @include base.focusring;
+
+    &:focus-visible {
+      // Legacy ODS explicitly suppresses outlines with !important.
+      outline-width: base.$focusring-width !important;
+    }
   }
 
   hr {
@@ -141,13 +181,14 @@
 }
 
 @mixin base {
-  --megamenu-main-height: #{convert.to-rem(80px)};
+  --megamenu-main-height: #{convert.to-rem(headerHeights.$collapsed)};
 
   top: 0;
   left: 0;
   width: 100%;
   z-index: 11;
   font-size: 1rem;
+  font-weight: 400;
   color: var(--color-text-default);
   background-color: var(--color-surface-primary);
   box-sizing: border-box;
@@ -155,7 +196,7 @@
 
   @include breakpoint.get("lg") {
     &:has(.megamenu__nav-logo > [data-megamenu-brand-mark]):not(.top-hidden) {
-      --megamenu-main-height: #{convert.to-rem(107px)};
+      --megamenu-main-height: #{convert.to-rem(headerHeights.$brand-main)};
     }
   }
 
@@ -163,7 +204,7 @@
   &:not(.non-sticky) {
     position: fixed;
 
-    body.has-modal & {
+    @at-root body.has-modal .megamenu:not(.non-sticky) {
       padding-right: var(--ods-modal-scrollbar-width, 0px);
     }
 
@@ -177,9 +218,9 @@
     @include breakpoint.get("lg") {
       #{config.$class-root}__top[data-hide-when-sticky="true"] {
         transition:
-          height 0.2s ease-in-out,
-          transform 0.2s ease-in-out,
-          opacity 0.2s ease-in-out;
+          height var(--header-transition, #{headerHeights.$transition}),
+          transform var(--header-transition, #{headerHeights.$transition}),
+          opacity var(--header-transition, #{headerHeights.$transition});
 
         &.is-hidden {
           height: 0;
@@ -191,7 +232,8 @@
       }
 
       #{config.$class-root}__main {
-        transition: min-height 0.2s ease-in-out;
+        transition: min-height
+          var(--header-transition, #{headerHeights.$transition});
       }
     }
   }
@@ -333,34 +375,34 @@
   }
 
   @include breakpoint.get("lg") {
-    .megamenu:not(.top-hidden)
-      &
-      > [data-megamenu-brand-mark]
-      > [data-megamenu-logo-full] {
+    @at-root .megamenu:not(.top-hidden)
+        .megamenu__nav-logo
+        > [data-megamenu-brand-mark]
+        > [data-megamenu-logo-full] {
       visibility: visible;
       pointer-events: auto;
     }
 
-    .megamenu:not(.top-hidden)
-      &
-      > [data-megamenu-brand-mark]
-      > [data-megamenu-logo-compact] {
+    @at-root .megamenu:not(.top-hidden)
+        .megamenu__nav-logo
+        > [data-megamenu-brand-mark]
+        > [data-megamenu-logo-compact] {
       visibility: hidden;
       pointer-events: none;
     }
 
-    .megamenu.top-hidden
-      &
-      > [data-megamenu-brand-mark]
-      > [data-megamenu-logo-full] {
+    @at-root .megamenu.top-hidden
+        .megamenu__nav-logo
+        > [data-megamenu-brand-mark]
+        > [data-megamenu-logo-full] {
       visibility: hidden;
       pointer-events: none;
     }
 
-    .megamenu.top-hidden
-      &
-      > [data-megamenu-brand-mark]
-      > [data-megamenu-logo-compact] {
+    @at-root .megamenu.top-hidden
+        .megamenu__nav-logo
+        > [data-megamenu-brand-mark]
+        > [data-megamenu-logo-compact] {
       visibility: visible;
       pointer-events: auto;
     }
@@ -409,6 +451,7 @@
   &:active,
   &.is-active {
     color: var(--color-text-default) !important;
+    text-decoration: none;
     box-shadow: config.$active-line;
   }
 }
@@ -456,6 +499,7 @@
   &:active,
   &.is-active {
     color: var(--color-text-default) !important;
+    background-color: var(--color-surface-accent);
     outline: solid 2px var(--color-border-accent);
     outline-offset: -2px;
   }
@@ -520,6 +564,7 @@
   align-items: center;
   color: var(--color-text-default);
   background: none;
+  text-decoration: none;
   border: none;
   cursor: pointer;
   padding: 0;
@@ -529,6 +574,7 @@
   &:active,
   &.is-active {
     color: var(--color-text-default) !important;
+    text-decoration: none;
     box-shadow: config.$active-line;
   }
 
@@ -687,8 +733,10 @@
 
 @mixin top {
   display: flex;
-  border-bottom: 1px solid var(--color-border-subtle);
-  height: convert.to-rem(40px);
+  // Draw the divider without a border that keeps a zero-height top bar 1px tall.
+  border-bottom: 0;
+  box-shadow: inset 0 -1px 0 var(--color-border-subtle);
+  height: convert.to-rem(headerHeights.$top);
   overflow: hidden;
 }
 
@@ -698,7 +746,7 @@
   min-height: var(--megamenu-main-height);
 
   @include breakpoint.get("md", "down") {
-    min-height: convert.to-rem(60px);
+    min-height: convert.to-rem(headerHeights.$mobile-spacer);
   }
 }
 
@@ -1085,8 +1133,11 @@
   }
 
   &:hover,
-  &:focus-visible {
+  &:focus,
+  &:focus-visible,
+  &:active {
     text-decoration: none;
+    background-color: var(--color-fill-primary);
   }
 }
 
@@ -1146,30 +1197,38 @@
 
 @mixin spacer {
   height: 0;
-  transition: height 0.2s ease-in-out;
+  transition: height var(--header-transition, #{headerHeights.$transition});
 
-  .megamenu:not(.non-sticky) + & {
-    height: var(--header-height, #{convert.to-rem(118px)});
-  }
-
-  @include breakpoint.get("md", "down") {
-    .megamenu:not(.non-sticky) + & {
-      height: convert.to-rem(58px);
+  // A spacer belongs to its adjacent menu, including inside a shadow root.
+  @at-root :is(:root, :host) .megamenu:not(.non-sticky) {
+    + :is(.megamenu-spacer, .megamenu-spacer--small) {
+      height: convert.to-rem(headerHeights.$mobile-spacer);
     }
-  }
-}
 
-@mixin spacer-small {
-  height: 0;
-  transition: height 0.2s ease-in-out;
+    @include breakpoint.get("lg") {
+      + :is(.megamenu-spacer, .megamenu-spacer--small) {
+        height: headerHeights.$desktop;
+      }
 
-  .megamenu:not(.non-sticky) + & {
-    height: var(--header-height, #{convert.to-rem(78px)});
-  }
+      &:not(.top-hidden):has(.megamenu__nav-logo > [data-megamenu-brand-mark])
+        + :is(.megamenu-spacer, .megamenu-spacer--small) {
+        height: headerHeights.$brand;
+      }
 
-  @include breakpoint.get("md", "down") {
-    .megamenu:not(.non-sticky) + & {
-      height: convert.to-rem(58px);
+      &:not(.top-hidden):has(
+          .megamenu__nav-logo > [data-megamenu-brand-mark] + span
+        )
+        + :is(.megamenu-spacer, .megamenu-spacer--small) {
+        height: headerHeights.$brand-with-title;
+      }
+
+      &.top-hidden + :is(.megamenu-spacer, .megamenu-spacer--small) {
+        height: headerHeights.$collapsed;
+      }
+
+      + .megamenu-spacer--small {
+        height: headerHeights.$collapsed;
+      }
     }
   }
 }
@@ -1216,8 +1275,11 @@
   @include accordion.icon;
   transform: rotate(90deg);
 
-  [aria-expanded="true"] > &,
-  &.is-active {
+  @at-root :is(:root, :host)
+      .megamenu
+      [aria-expanded="true"]
+      > .megamenu__accordion-icon,
+    #{&}.is-active {
     @include accordion.icon-active;
     color: var(--color-text-default) !important;
     transform: rotate(270deg);
@@ -1337,17 +1399,17 @@
   }
 
   // Interactive styles for button and anchor tags
-  &:not(&--transparent):where(button) {
+  &:not(#{config.$class-root}__tag--transparent):where(button) {
     @include tag.button();
     z-index: 2;
   }
 
-  &:not(&--transparent):where(a) {
+  &:not(#{config.$class-root}__tag--transparent):where(a) {
     @include tag.button();
     z-index: 2;
   }
 
-  &:not(&--transparent) {
+  &:not(#{config.$class-root}__tag--transparent) {
     @include tag.buttton-disabled();
   }
 }

package/src/components/Megamenu/styles/style.scss

@@ -3,12 +3,14 @@
 @use "../../Tile/styles/mixins" as tile;
 @use "../../../styles/typography/mixins" as typography;
 @use "../../../styles/tools/convert";
+@use "../../../styles/base/header-height";
 
 @use "./mixins";
 @use "./config";
 
 // Modifiers global states and resets
-#{config.$class-root} {
+// Keep specificity equal in document and shadow trees, above legacy link rules.
+:is(:root, :host) #{config.$class-root} {
   @include mixins.globals;
 }
 
@@ -24,7 +26,7 @@
 }
 
 // Component
-#{config.$class-root} {
+:is(:root, :host) #{config.$class-root} {
   @include mixins.base;
 
   &__nav {
@@ -292,12 +294,9 @@
     @include mixins.overlay;
   }
 
-  &-spacer {
+  &-spacer,
+  &-spacer--small {
     @include mixins.spacer;
-
-    &--small {
-      @include mixins.spacer-small;
-    }
   }
 
   &__accordion {

package/src/components/Megamenu/tests/Megamenu.scroll.unit.test.ts

@@ -0,0 +1,185 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import Megamenu from "../Megamenu.static";
+
+describe("Megamenu scroll lifecycle", () => {
+  let frames: Map<number, FrameRequestCallback>;
+  let instances: Megamenu[];
+
+  const flushFrame = () => {
+    const callbacks = [...frames.values()];
+    frames.clear();
+    callbacks.forEach((callback) => callback(0));
+  };
+
+  const createMenu = (root: HTMLElement | ShadowRoot = document.body) => {
+    const element = document.createElement("nav");
+    element.setAttribute("data-megamenu", "");
+    element.innerHTML = '<div data-hide-when-sticky="true"></div>';
+    root.append(element);
+    const top = element.firstElementChild as HTMLElement;
+    Object.defineProperty(top, "offsetHeight", {
+      configurable: true,
+      value: 40,
+    });
+    const instance = new Megamenu(element);
+    instances.push(instance);
+    return { element, top, instance };
+  };
+
+  beforeEach(() => {
+    frames = new Map();
+    instances = [];
+    let nextId = 0;
+    vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => {
+      const id = nextId++;
+      frames.set(id, callback);
+      return id;
+    });
+    vi.stubGlobal("cancelAnimationFrame", (id: number) => frames.delete(id));
+    vi.stubGlobal("scrollY", 0);
+  });
+
+  afterEach(() => {
+    instances.forEach((instance) => instance.destroy());
+    document.body.replaceChildren();
+    document.body.classList.remove("has-modal");
+    document.body.removeAttribute("data-lock-scrolltop");
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("applies the initial scroll state synchronously", () => {
+    vi.stubGlobal("scrollY", 100);
+    const { element, top } = createMenu();
+
+    expect(element.classList.contains("top-hidden")).toBe(true);
+    expect(top.classList.contains("is-hidden")).toBe(true);
+    expect(frames.size).toBe(0);
+  });
+
+  it("batches a burst of scroll events into one DOM update using the latest position", () => {
+    const { element, top } = createMenu();
+    const query = vi.spyOn(element, "querySelector");
+
+    vi.stubGlobal("scrollY", 10);
+    window.dispatchEvent(new Event("scroll"));
+    vi.stubGlobal("scrollY", 100);
+    window.dispatchEvent(new Event("scroll"));
+    window.dispatchEvent(new Event("scroll"));
+
+    expect(query).not.toHaveBeenCalled();
+    expect(frames.size).toBe(1);
+    flushFrame();
+    expect(element.classList.contains("top-hidden")).toBe(true);
+    expect(top.classList.contains("is-hidden")).toBe(true);
+    expect(query).toHaveBeenCalledTimes(1);
+
+    vi.stubGlobal("scrollY", 0);
+    window.dispatchEvent(new Event("scroll"));
+    flushFrame();
+    expect(element.classList.contains("top-hidden")).toBe(false);
+    expect(top.classList.contains("is-hidden")).toBe(false);
+  });
+
+  it("cancels pending work and removes the scroll listener on destroy", () => {
+    const { element, instance } = createMenu();
+    vi.stubGlobal("scrollY", 100);
+    window.dispatchEvent(new Event("scroll"));
+    expect(frames.size).toBe(1);
+
+    instance.destroy();
+
+    expect(frames.size).toBe(0);
+    flushFrame();
+    window.dispatchEvent(new Event("scroll"));
+    expect(frames.size).toBe(0);
+    expect(element.classList.contains("top-hidden")).toBe(false);
+
+    instance.init();
+    expect(element.classList.contains("top-hidden")).toBe(true);
+    vi.stubGlobal("scrollY", 0);
+    window.dispatchEvent(new Event("scroll"));
+    flushFrame();
+    expect(element.classList.contains("top-hidden")).toBe(false);
+  });
+
+  it("uses replacement markup and its current height without reinitialization", () => {
+    const { element, top } = createMenu();
+    vi.stubGlobal("scrollY", 100);
+    window.dispatchEvent(new Event("scroll"));
+    const replacement = top.cloneNode() as HTMLElement;
+    Object.defineProperty(replacement, "offsetHeight", {
+      configurable: true,
+      value: 120,
+    });
+    top.replaceWith(replacement);
+    flushFrame();
+    expect(element.classList.contains("top-hidden")).toBe(false);
+
+    Object.defineProperty(replacement, "offsetHeight", {
+      configurable: true,
+      value: 60,
+    });
+    window.dispatchEvent(new Event("scroll"));
+    flushFrame();
+    expect(replacement.classList.contains("is-hidden")).toBe(true);
+  });
+
+  it("uses the locked scroll position while a modal is open", () => {
+    const { element } = createMenu();
+    document.body.classList.add("has-modal");
+    document.body.setAttribute("data-lock-scrolltop", "100");
+    vi.stubGlobal("scrollY", 0);
+    window.dispatchEvent(new Event("scroll"));
+    flushFrame();
+    expect(element.classList.contains("top-hidden")).toBe(true);
+
+    document.body.removeAttribute("data-lock-scrolltop");
+    window.dispatchEvent(new Event("scroll"));
+    flushFrame();
+    expect(element.classList.contains("top-hidden")).toBe(false);
+  });
+
+  it("preserves the brand-mark variant and non-sticky behavior with dynamic markup", () => {
+    const { element, top } = createMenu();
+    top.remove();
+    vi.stubGlobal("scrollY", 100);
+    window.dispatchEvent(new Event("scroll"));
+    flushFrame();
+    expect(element.classList.contains("top-hidden")).toBe(false);
+
+    element.innerHTML = "<span data-megamenu-brand-mark></span>";
+    window.dispatchEvent(new Event("scroll"));
+    flushFrame();
+    expect(element.classList.contains("top-hidden")).toBe(true);
+
+    vi.stubGlobal("scrollY", 0);
+    window.dispatchEvent(new Event("scroll"));
+    flushFrame();
+    element.classList.add("non-sticky");
+    vi.stubGlobal("scrollY", 100);
+    window.dispatchEvent(new Event("scroll"));
+    flushFrame();
+    expect(element.classList.contains("top-hidden")).toBe(false);
+  });
+
+  it.each(["open", "closed"] as const)(
+    "supports explicit initialization in a %s shadow root",
+    (mode) => {
+      const host = document.createElement("vendor-menu");
+      document.body.append(host);
+      const { element, top, instance } = createMenu(
+        host.attachShadow({ mode }),
+      );
+
+      expect(Megamenu.getInstance(element)).toBe(instance);
+      expect(new Megamenu(element)).toBe(instance);
+      vi.stubGlobal("scrollY", 100);
+      window.dispatchEvent(new Event("scroll"));
+      flushFrame();
+      expect(element.classList.contains("top-hidden")).toBe(true);
+      expect(top.classList.contains("is-hidden")).toBe(true);
+    },
+  );
+});