@orangesk/orange-design-system 3.11.0 → 3.12.0

package/package.json

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

@@ -40,6 +40,9 @@ 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

@@ -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,102 @@
+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",
+  },
+])("$name pointer interactions with real Swiper", ({ Module, prefix }) => {
+  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 });
+    }
+    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 = "";
+  });
+
+  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"])(
+    "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);
+    },
+  );
+
+  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);
+
+    const click = new MouseEvent("click", { bubbles: true, cancelable: true });
+    icon.dispatchEvent(click);
+    expect(onIconClick).toHaveBeenCalledOnce();
+    expect(onClick).toHaveBeenCalledOnce();
+    expect(click.defaultPrevented).toBe(true);
+  });
+});

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

@@ -27,6 +27,9 @@ 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,6 +22,9 @@ 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/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 {