@orangesk/orange-design-system 3.11.0 → 3.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "3.11.0",
+  "version": "3.13.0",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -28,7 +28,7 @@
     "@cloudfour/transition-hidden-element": "^2.0.2",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "16.4.0",
+    "@next/mdx": "16.4.3",
     "@orangesk/accessible-autocomplete": "3.2.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.14",
@@ -37,42 +37,41 @@
     "daypickr": "^0.3.4",
     "diff2html": "^3.4.56",
     "dompurify": "^3.4.17",
-    "html-react-parser": "6.1.8",
+    "html-react-parser": "6.1.9",
     "lorem-ipsum": "3.0.0",
     "minisearch": "7.2.0",
-    "next": "16.4.0",
+    "next": "16.4.3",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "prism-react-renderer": "^2.4.1",
-    "query-string": "^9.5.1",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
     "react-element-to-jsx-string": "18.0.0",
-    "react-is": "^19.3.0",
+    "react-is": "^19.3.1",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "remark-gemoji": "^8.0.0",
     "remark-gfm": "^4.0.1",
     "swiper": "14.3.0",
-    "tabbable": "^6.5.0",
+    "tabbable": "^6.5.1",
     "unescape-html": "^1.1.0",
     "wnumb": "^1.2.0"
   },
   "devDependencies": {
-    "@babel/core": "8.0.7",
+    "@babel/core": "8.0.9",
     "@babel/preset-env": "8.0.7",
     "@babel/preset-react": "8.0.1",
     "@babel/preset-typescript": "8.0.7",
     "@biomejs/biome": "latest",
-    "@rollup/plugin-alias": "6.0.0",
+    "@rollup/plugin-alias": "6.0.1",
     "@rollup/plugin-babel": "7.1.0",
     "@rollup/plugin-commonjs": "29.0.3",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-terser": "1.0.0",
-    "@rollup/plugin-typescript": "^12.3.0",
+    "@rollup/plugin-terser": "1.0.2",
+    "@rollup/plugin-typescript": "^12.3.1",
     "@rollup/plugin-url": "^8.0.2",
-    "@rollup/rollup-darwin-arm64": "^4.64.6",
+    "@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",
@@ -82,25 +81,25 @@
     "@types/react-dom": "19.3.0",
     "@types/wnumb": "^1.2.3",
     "@vitejs/plugin-react": "6.1.2",
-    "@vitest/coverage-v8": "5.0.4",
-    "@vitest/ui": "5.0.4",
+    "@vitest/coverage-v8": "5.0.5",
+    "@vitest/ui": "5.0.5",
     "canvas": "^3.2.3",
     "fs-extra": "^11.4.1",
     "glob": "13.0.6",
-    "html-validate": "11.16.2",
+    "html-validate": "11.17.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
-    "jsdom": "30.1.2",
+    "jsdom": "30.1.3",
     "lint-staged": "17.6.0",
     "prettier": "^3.9.10",
-    "rollup": "^4.64.6",
+    "rollup": "^4.65.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.5.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.105.1",
+    "sass": "^1.106.1",
     "svg-sprite": "^2.0.4",
     "typescript": "6.0.3",
-    "vitest": "5.0.4",
+    "vitest": "5.0.5",
     "vitest-axe": "^0.1.0"
   },
   "lint-staged": {

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

@@ -35,13 +35,6 @@
   min-width: 0;
   width: 100%;
   max-width: 100%;
-  margin-bottom: convert.to-rem(30px);
-
-  .carousel--scrollbar & {
-    @include breakpoint.get("md", "down") {
-      margin-bottom: convert.to-rem(20px);
-    }
-  }
 
   &.is-draggable {
     user-select: none;
@@ -56,6 +49,7 @@
 }
 
 @mixin navigation {
+  margin-top: convert.to-rem(30px);
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
@@ -217,8 +211,15 @@
 }
 
 @mixin scrollbar-base {
+  margin-top: convert.to-rem(30px);
   position: relative;
   overflow: visible;
+
+  .carousel--scrollbar & {
+    @include breakpoint.get("md", "down") {
+      margin-top: convert.to-rem(20px);
+    }
+  }
 }
 
 @mixin scrollbar-horizontal {

package/src/components/Carousel/tests/Carousel.interactions.test.ts

@@ -0,0 +1,133 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+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",
+    },
+  ].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}>
+      <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 });
+      }
+      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);
+    });
+
+    afterEach(() => {
+      carousel?.destroy();
+      vi.clearAllTimers();
+      vi.useRealTimers();
+      document.body.innerHTML = "";
+    });
+
+    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("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).toHaveBeenCalledTimes(editorMode ? 1 : 0);
+      expect(onClick).toHaveBeenCalledTimes(editorMode ? 1 : 0);
+      expect(click.defaultPrevented).toBe(true);
+    });
+  },
+);

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

@@ -659,7 +659,9 @@
 
 @mixin subnav-item {
   display: flex;
+  flex-wrap: wrap;
   column-gap: convert.to-rem(10px);
+  row-gap: convert.to-rem(5px);
   margin-bottom: convert.to-rem(10px) !important;
 
   > #{config.$class-root}__tag {