@orangesk/orange-design-system 3.13.0 → 4.0.0

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "3.13.0",
+  "version": "4.0.0",
   "private": false,
   "engines": {
     "node": ">=20.x"
   },
   "files": [
     "build/",
+    "!build/images/**",
+    "!build/files/**",
     "public/fonts/",
     "public/footer-sprite-*.svg",
     "src/components/",
@@ -35,7 +37,6 @@
     "a11y-dialog": "^8.1.5",
     "classnames": "^2.5.1",
     "daypickr": "^0.3.4",
-    "diff2html": "^3.4.56",
     "dompurify": "^3.4.17",
     "html-react-parser": "6.1.9",
     "lorem-ipsum": "3.0.0",
@@ -58,7 +59,7 @@
     "wnumb": "^1.2.0"
   },
   "devDependencies": {
-    "@babel/core": "8.0.9",
+    "@babel/core": "8.0.10",
     "@babel/preset-env": "8.0.7",
     "@babel/preset-react": "8.0.1",
     "@babel/preset-typescript": "8.0.7",
@@ -71,32 +72,28 @@
     "@rollup/plugin-terser": "1.0.2",
     "@rollup/plugin-typescript": "^12.3.1",
     "@rollup/plugin-url": "^8.0.2",
-    "@rollup/rollup-darwin-arm64": "^4.65.0",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "7.0.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.8",
-    "@types/node": "26.6.5",
+    "@types/node": "26.6.6",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@types/wnumb": "^1.2.3",
-    "@vitejs/plugin-react": "6.1.2",
     "@vitest/coverage-v8": "5.0.5",
     "@vitest/ui": "5.0.5",
     "canvas": "^3.2.3",
-    "fs-extra": "^11.4.1",
-    "glob": "13.0.6",
+    "glob": "14.0.3",
     "html-validate": "11.17.0",
     "husky": "^9.1.7",
-    "identity-obj-proxy": "^3.0.0",
     "jsdom": "30.1.3",
     "lint-staged": "17.6.0",
     "prettier": "^3.9.10",
-    "rollup": "^4.65.0",
+    "rollup": "^4.66.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.5.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.106.1",
+    "sass": "^1.107.0",
     "svg-sprite": "^2.0.4",
     "typescript": "6.0.3",
     "vitest": "5.0.5",
@@ -109,11 +106,12 @@
   "scripts": {
     "dev": "npm run sprite && npm run build:search-index && npm run build:preview-iframe && next dev",
     "build": "npm run sprite && npm run build:search-index && npm run build:preview-iframe && next build",
-    "build:bundle": "pnpm run sprite && pnpm exec rollup -c && pnpm exec rollup -c rollup.megamenu.config.mjs && pnpm exec rollup -c rollup.footer.config.mjs && pnpm run verify:production-bundle",
+    "build:bundle": "pnpm run sprite && pnpm exec rollup -c && pnpm exec rollup -c rollup.megamenu.config.mjs && pnpm exec rollup -c rollup.footer.config.mjs && pnpm run verify:production-bundle && pnpm run verify:standalone-bundles",
     "build:preview-iframe": "node scripts/build-preview-iframe-bundle.mjs",
     "build:megamenu": "pnpm run sprite && pnpm exec rollup -c rollup.megamenu.config.mjs",
     "build:footer": "pnpm run build:scss-exports && node scripts/build-footer-sprites.mjs && pnpm exec rollup -c rollup.footer.config.mjs",
     "verify:production-bundle": "node scripts/verify-production-bundle.mjs",
+    "verify:standalone-bundles": "node scripts/verify-standalone-bundles.mjs",
     "dev:footer": "npm run build:scss-exports && node scripts/build-footer-sprites.mjs && pnpm exec rollup -c rollup.footer.config.mjs --watch",
     "build:scss-exports": "node scripts/build-scss-exports.js",
     "build:search-index": "node scripts/mdx-search-index.js",

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

@@ -99,7 +99,8 @@ export default class AnchorNavigation {
   }
 
   private getMegamenuOffsetHeight(): number {
-    return this.megamenuElement?.offsetHeight || 0;
+    // offsetHeight rounds fractional CSS pixels and can leave a visible seam.
+    return this.megamenuElement?.getBoundingClientRect().height || 0;
   }
 
   private updateStickyPosition(): void {
@@ -304,9 +305,7 @@ export default class AnchorNavigation {
   }
 
   private getTotalStickyOffset(): number {
-    const scrollOffset = this.megamenuElement
-      ? this.megamenuElement.offsetHeight
-      : 0;
+    const scrollOffset = this.getMegamenuOffsetHeight();
     const anchorNavOffset = this.element.offsetHeight;
     return scrollOffset + anchorNavOffset;
   }

package/src/components/AnchorNavigation/tests/AnchorNavigation.megamenu.unit.test.ts

@@ -0,0 +1,74 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import AnchorNavigation from "../AnchorNavigation.static";
+
+describe("AnchorNavigation fractional Megamenu height", () => {
+  let instance: AnchorNavigation;
+  let menu: HTMLElement;
+  let anchor: HTMLElement;
+  let height: number;
+
+  beforeEach(() => {
+    height = 80.5;
+    menu = document.createElement("nav");
+    menu.setAttribute("data-megamenu", "");
+    // jsdom has no layout; represent the browser's fractional and rounded APIs.
+    vi.spyOn(menu, "getBoundingClientRect").mockImplementation(
+      () => ({ height }) as DOMRect,
+    );
+    Object.defineProperty(menu, "offsetHeight", {
+      get: () => Math.round(height),
+    });
+    anchor = document.createElement("nav");
+    anchor.innerHTML = '<ul class="anchor-navigation__content-left"></ul>';
+    document.body.append(menu, anchor);
+    instance = new AnchorNavigation(anchor);
+  });
+
+  afterEach(() => {
+    instance.destroy();
+    menu.remove();
+    anchor.remove();
+    vi.restoreAllMocks();
+  });
+
+  it("places the navigation at the fractional menu edge on initialization", () => {
+    expect(anchor.style.top).toBe("80.5px");
+  });
+
+  it("follows fractional animation heights through its ResizeObserver", () => {
+    height = 113.625;
+    const observer = (instance as any).resizeObserver;
+    observer.callback([], observer);
+    expect(anchor.style.top).toBe("113.625px");
+  });
+
+  it("keeps the fractional menu offset when scrolling to a section", () => {
+    const section = document.createElement("section");
+    section.id = "fractional-section";
+    vi.spyOn(section, "getBoundingClientRect").mockReturnValue({
+      top: 600,
+    } as DOMRect);
+    document.body.append(section);
+    Object.defineProperty(anchor, "offsetHeight", { value: 50 });
+    const previousScrollY = window.scrollY;
+    Object.defineProperty(window, "scrollY", { configurable: true, value: 0 });
+    const scroll = vi.spyOn(window, "scrollTo").mockImplementation(() => {});
+    const link = document.createElement("a");
+    link.className = "anchor-navigation__item";
+    link.href = "#fractional-section";
+    anchor.append(link);
+
+    try {
+      link.click();
+      expect(scroll).toHaveBeenCalledWith({ top: 469.5, behavior: "smooth" });
+    } finally {
+      Object.defineProperty(window, "scrollY", {
+        configurable: true,
+        value: previousScrollY,
+        writable: true,
+      });
+      section.remove();
+    }
+  });
+});

package/src/components/AnchorNavigation/tests/AnchorNavigation.unit.test.jsx

@@ -628,6 +628,9 @@ describe("rendering AnchorNavigation", () => {
         configurable: true,
         value: 120,
       });
+      vi.spyOn(megamenu, "getBoundingClientRect").mockReturnValue({
+        height: 120,
+      });
       document.body.appendChild(megamenu);
 
       Object.defineProperty(window, "scrollY", {
@@ -703,6 +706,9 @@ describe("rendering AnchorNavigation", () => {
         configurable: true,
         get: () => megamenuHeight,
       });
+      vi.spyOn(megamenu, "getBoundingClientRect").mockImplementation(() => ({
+        height: megamenuHeight,
+      }));
       document.body.appendChild(megamenu);
 
       Object.defineProperty(window, "scrollY", {

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

@@ -24,6 +24,7 @@
 }
 
 @mixin container {
+  @include typoMixins.list-unstyled;
   @include container.base;
 
   font-size: 0;
@@ -111,6 +112,11 @@
   text-decoration: none;
   display: inline;
 
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+
   &:hover {
     color: var(--color-text-default);
     text-decoration: underline;

package/src/components/Breadcrumbs/styles/rules.scss

@@ -0,0 +1,30 @@
+@use "./mixins";
+
+// Shared selectors for the layered ODS and unlayered standalone outputs.
+@mixin styles {
+  .osk-breadcrumbs {
+    @include mixins.base;
+
+    &__container {
+      @include mixins.container;
+    }
+  }
+
+  .osk-breadcrumbs__item {
+    @include mixins.item;
+  }
+
+  .background-contrast .osk-breadcrumbs__item,
+  .surface-contrast .osk-breadcrumbs__item,
+  .is-dark .osk-breadcrumbs__item {
+    @include mixins.item-dark;
+  }
+
+  .osk-breadcrumbs__link {
+    @include mixins.link;
+
+    &[aria-current="page"] {
+      @include mixins.link-current;
+    }
+  }
+}

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

@@ -1,29 +1,5 @@
-@use "./mixins";
+@use "./rules";
 
 @layer components {
-  .osk-breadcrumbs {
-    @include mixins.base;
-
-    &__container {
-      @include mixins.container;
-    }
-  }
-
-  .osk-breadcrumbs__item {
-    @include mixins.item;
-
-    .background-contrast &,
-    .surface-contrast &,
-    .is-dark & {
-      @include mixins.item-dark;
-    }
-  }
-
-  .osk-breadcrumbs__link {
-    @include mixins.link;
-
-    &[aria-current="page"] {
-      @include mixins.link-current;
-    }
-  }
+  @include rules.styles;
 }

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

@@ -106,10 +106,6 @@
     top: 50%;
     transform: translate(50%, -50%);
   }
-
-  @include breakpoint.get("md", "down") {
-    width: var(--carousel-side-arrows-width, 100%);
-  }
 }
 
 @mixin centered-mobile-variant {

package/src/components/Footer/classic.ts

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

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

@@ -16,10 +16,33 @@
     @include visibility.visually-hidden;
   }
 
-  a {
+  :where(button, input, select, textarea) {
+    font: inherit;
+    color: inherit;
+  }
+
+  :where(h3, strong, b) {
+    font-family: inherit;
+  }
+
+  :where(strong, b) {
+    font-weight: 700;
+  }
+
+  li {
+    font-size: inherit;
+    line-height: inherit;
+    font-weight: inherit;
+  }
+
+  :where(a) {
     color: var(--color-text-default);
     text-decoration: none;
+    font-family: inherit;
+    font-weight: inherit;
     font-size: inherit;
+    background-color: transparent;
+    box-shadow: none;
 
     &:hover,
     &:focus,
@@ -27,6 +50,8 @@
       text-decoration: underline;
       text-underline-offset: convert.to-rem(2px);
       text-decoration-thickness: auto;
+      background-color: transparent;
+      box-shadow: none;
     }
 
     &:focus-visible {
@@ -46,6 +71,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;
+    }
   }
 
   *,
@@ -74,6 +104,7 @@
 
 @mixin base {
   font-size: 1rem;
+  font-weight: 400;
   letter-spacing: convert.to-rem(-0.1px);
   line-height: convert.to-rem(18px);
   color: var(--color-text-default);

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

@@ -7,7 +7,8 @@
 @use "../../SocialButton/styles/mixins" as socialButtonMixins;
 @use "../../Icon/styles/mixins" as iconMixins;
 
-#{config.$class-root} {
+// Keep specificity equal in document and shadow trees, above legacy link rules.
+:is(:root, :host) #{config.$class-root} {
   @include mixins.globals;
 }
 
@@ -22,7 +23,7 @@
   @include megamenuMixins.dark-vars;
 }
 
-#{config.$class-root} {
+:is(:root, :host) #{config.$class-root} {
   @include mixins.base;
 
   &__container {
@@ -62,11 +63,13 @@
     }
   }
 
-  [data-footer-toggle][aria-expanded="false"] > &__accordion-icon {
+  [data-footer-toggle][aria-expanded="false"]
+    > #{config.$class-root}__accordion-icon {
     transform: rotate(0deg);
   }
 
-  [data-footer-toggle][aria-expanded="true"] > &__accordion-icon {
+  [data-footer-toggle][aria-expanded="true"]
+    > #{config.$class-root}__accordion-icon {
     transform: rotate(180deg);
   }
 
@@ -91,7 +94,7 @@
     }
   }
 
-  &__menu-section > &__list {
+  &__menu-section > #{config.$class-root}__list {
     @include mixins.accordion-list;
   }
 

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";