@orangesk/orange-design-system 3.12.0 → 4.0.0

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "3.12.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/Carousel.static.ts

@@ -40,9 +40,6 @@ interface ExternalControlsState {
 }
 
 export const defaultConfig: SwiperOptions = {
-  // Keep pointer selection and click handlers available to CMS editors and integrations.
-  touchStartPreventDefault: false,
-  preventClicksPropagation: false,
   navigation: {
     nextEl: SELECTOR_NEXT,
     prevEl: SELECTOR_PREV,

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/Carousel/tests/Carousel.interactions.test.ts

@@ -3,100 +3,131 @@ import CarouselHero from "../../CarouselHero/CarouselHero.static";
 import CarouselPromotions from "../../CarouselPromotions/CarouselPromotions.static";
 import Carousel from "../Carousel.static";
 
-describe.each([
-  { name: "Carousel", Module: Carousel, prefix: "carousel" },
-  { name: "CarouselHero", Module: CarouselHero, prefix: "carousel-hero" },
-  {
-    name: "CarouselPromotions",
-    Module: CarouselPromotions,
-    prefix: "carousel-promotions",
-  },
-])("$name pointer interactions with real Swiper", ({ Module, prefix }) => {
-  let carousel: Carousel | CarouselHero | CarouselPromotions;
-  let icon: SVGElement;
+describe.each(
+  [
+    { name: "Carousel", Module: Carousel, prefix: "carousel" },
+    { name: "CarouselHero", Module: CarouselHero, prefix: "carousel-hero" },
+    {
+      name: "CarouselPromotions",
+      Module: CarouselPromotions,
+      prefix: "carousel-promotions",
+    },
+  ].flatMap((component) =>
+    ["defaults", "data attribute", "constructor"].map((source) => ({
+      ...component,
+      source,
+      editorMode: source !== "defaults",
+    })),
+  ),
+)(
+  "$name pointer interactions with real Swiper ($source)",
+  ({ Module, prefix, source, editorMode }) => {
+    let carousel: Carousel | CarouselHero | CarouselPromotions;
+    let icon: SVGElement;
 
-  beforeEach(() => {
-    vi.useFakeTimers();
-    document.body.innerHTML = `<div class="${prefix}" data-${prefix}>
+    beforeEach(() => {
+      vi.useFakeTimers();
+      document.body.innerHTML = `<div class="${prefix}" data-${prefix}>
       <div class="${prefix}__viewport-wrapper"><div class="${prefix}__viewport"><div class="${prefix}__track">
         <div class="${prefix}__slide"><a href="#card"><svg><path d="M0 0h10v10z" /></svg></a></div>
         <div class="${prefix}__slide">Second</div><div class="${prefix}__slide">Third</div>
       </div></div></div>
     </div>`;
-    const element = document.body.firstElementChild as HTMLElement;
-    for (const node of [
-      element,
-      element.querySelector(`.${prefix}__viewport`)!,
-    ]) {
-      Object.defineProperty(node, "clientWidth", { value: 600 });
-      Object.defineProperty(node, "clientHeight", { value: 200 });
-    }
-    carousel = new Module(element, { loop: false, breakpoints: {} });
-    vi.advanceTimersByTime(100);
-    icon = element.querySelector("path")!;
-    expect(carousel.instance.enabled).toBe(true);
-  });
-
-  afterEach(() => {
-    carousel?.destroy();
-    vi.clearAllTimers();
-    vi.useRealTimers();
-    document.body.innerHTML = "";
-  });
+      const element = document.body.firstElementChild as HTMLElement;
+      for (const node of [
+        element,
+        element.querySelector(`.${prefix}__viewport`)!,
+      ]) {
+        Object.defineProperty(node, "clientWidth", { value: 600 });
+        Object.defineProperty(node, "clientHeight", { value: 200 });
+      }
+      const editorOptions = {
+        touchStartPreventDefault: false,
+        preventClicksPropagation: false,
+      };
+      if (source === "data attribute") {
+        element.setAttribute(
+          "data-swiper-options",
+          JSON.stringify(editorOptions),
+        );
+      }
+      carousel = new Module(element, {
+        loop: false,
+        breakpoints: {},
+        ...(source === "constructor" ? editorOptions : {}),
+      });
+      vi.advanceTimersByTime(100);
+      icon = element.querySelector("path")!;
+      expect(carousel.instance.enabled).toBe(true);
+    });
 
-  function pointer(type: string, x: number, pointerType = "mouse") {
-    const event = new MouseEvent(type, {
-      bubbles: true,
-      cancelable: true,
-      clientX: x,
-      clientY: 20,
-      button: 0,
+    afterEach(() => {
+      carousel?.destroy();
+      vi.clearAllTimers();
+      vi.useRealTimers();
+      document.body.innerHTML = "";
     });
-    Object.assign(event, { pointerId: 1, pointerType });
-    icon.dispatchEvent(event);
-    return event;
-  }
 
-  it.each(["mouse", "touch", "pen"])(
-    "allows SVG icon selection with %s without canceling pointerdown",
-    (pointerType) => {
-      const onPointerDown = vi.fn();
-      carousel.element.addEventListener("pointerdown", onPointerDown);
-      const event = pointer("pointerdown", 400, pointerType);
-      expect(onPointerDown).toHaveBeenCalledOnce();
-      expect(event.defaultPrevented).toBe(false);
-    },
-  );
+    function pointer(type: string, x: number, pointerType = "mouse") {
+      const event = new MouseEvent(type, {
+        bubbles: true,
+        cancelable: true,
+        clientX: x,
+        clientY: 20,
+        button: 0,
+      });
+      Object.assign(event, { pointerId: 1, pointerType });
+      icon.dispatchEvent(event);
+      return event;
+    }
+
+    it.each(["mouse", "touch", "pen"])(
+      "applies the configured pointerdown behavior for %s",
+      (pointerType) => {
+        const onPointerDown = vi.fn();
+        carousel.element.addEventListener("pointerdown", onPointerDown);
+        const event = pointer("pointerdown", 400, pointerType);
+        expect(onPointerDown).toHaveBeenCalledOnce();
+        expect(event.defaultPrevented).toBe(!editorMode);
+      },
+    );
 
-  it("delivers an ordinary icon click without canceling it", () => {
-    const onClick = vi.fn();
-    carousel.element.addEventListener("click", onClick);
-    pointer("pointerdown", 400);
-    pointer("pointerup", 400);
-    const click = new MouseEvent("click", { bubbles: true, cancelable: true });
-    icon.dispatchEvent(click);
-    expect(onClick).toHaveBeenCalledOnce();
-    expect(click.defaultPrevented).toBe(false);
-  });
+    it("delivers an ordinary icon click without canceling it", () => {
+      const onClick = vi.fn();
+      carousel.element.addEventListener("click", onClick);
+      pointer("pointerdown", 400);
+      pointer("pointerup", 400);
+      const click = new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true,
+      });
+      icon.dispatchEvent(click);
+      expect(onClick).toHaveBeenCalledOnce();
+      expect(click.defaultPrevented).toBe(false);
+    });
 
-  it("keeps swipe navigation and link protection while letting click handlers run", () => {
-    const onIconClick = vi.fn();
-    const onClick = vi.fn();
-    icon.addEventListener("click", onIconClick);
-    carousel.element.addEventListener("click", onClick);
-    // The initial translation is zero; jsdom cannot parse CSS transforms with DOMMatrixReadOnly.
-    carousel.instance.wrapperEl.style.transform = "none";
-    pointer("pointerdown", 400);
-    pointer("pointermove", 350);
-    pointer("pointermove", 100);
-    pointer("pointerup", 100);
-    expect(carousel.instance.activeIndex).toBe(1);
-    expect(carousel.instance.animating).toBe(true);
+    it("keeps swipe navigation and link protection with configured click propagation", () => {
+      const onIconClick = vi.fn();
+      const onClick = vi.fn();
+      icon.addEventListener("click", onIconClick);
+      carousel.element.addEventListener("click", onClick);
+      // The initial translation is zero; jsdom cannot parse CSS transforms with DOMMatrixReadOnly.
+      carousel.instance.wrapperEl.style.transform = "none";
+      pointer("pointerdown", 400);
+      pointer("pointermove", 350);
+      pointer("pointermove", 100);
+      pointer("pointerup", 100);
+      expect(carousel.instance.activeIndex).toBe(1);
+      expect(carousel.instance.animating).toBe(true);
 
-    const click = new MouseEvent("click", { bubbles: true, cancelable: true });
-    icon.dispatchEvent(click);
-    expect(onIconClick).toHaveBeenCalledOnce();
-    expect(onClick).toHaveBeenCalledOnce();
-    expect(click.defaultPrevented).toBe(true);
-  });
-});
+      const click = new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true,
+      });
+      icon.dispatchEvent(click);
+      expect(onIconClick).toHaveBeenCalledTimes(editorMode ? 1 : 0);
+      expect(onClick).toHaveBeenCalledTimes(editorMode ? 1 : 0);
+      expect(click.defaultPrevented).toBe(true);
+    });
+  },
+);

package/src/components/CarouselHero/CarouselHero.static.ts

@@ -27,9 +27,6 @@ import {
 } from "./constants";
 
 export const defaultConfig: SwiperOptions = {
-  // Keep pointer selection and click handlers available to CMS editors and integrations.
-  touchStartPreventDefault: false,
-  preventClicksPropagation: false,
   pagination: {
     clickable: true,
     bulletClass: CLASS_PAGINATION_ITEM,

package/src/components/CarouselPromotions/CarouselPromotions.static.ts

@@ -22,9 +22,6 @@ import {
 } from "./constants";
 
 export const defaultConfig: SwiperOptions = {
-  // Keep pointer selection and click handlers available to CMS editors and integrations.
-  touchStartPreventDefault: false,
-  preventClicksPropagation: false,
   pagination: {
     el: SELECTOR_DOTS,
     clickable: true,

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