@orangesk/orange-design-system 2.0.0-beta.41 → 2.0.0-beta.43

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

@@ -32,6 +32,7 @@
   margin-bottom: 0 !important;
   padding: convert.to-rem(25px) 0 !important;
   white-space: nowrap;
+  color: inherit;
   text-decoration: none !important;
   display: inline-block;
   cursor: pointer;
@@ -39,6 +40,13 @@
   line-height: convert.to-rem(20px) !important;
   font-weight: 700 !important;
 
+  &:link,
+  &:visited,
+  &:active {
+    color: inherit;
+    text-decoration: none !important;
+  }
+
   &:last-child {
     margin-right: 0;
   }
@@ -48,15 +56,23 @@
     padding: convert.to-rem(15px) 0 !important;
   }
 
-  &:hover,
   &:focus-visible,
-  &:active,
   &.is-active {
     box-shadow: megamenuConfig.$active-line;
     color: inherit;
     text-decoration: none !important;
     outline: none;
   }
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover,
+    &:active {
+      box-shadow: megamenuConfig.$active-line;
+      color: inherit;
+      text-decoration: none !important;
+      outline: none;
+    }
+  }
 }
 
 @mixin anchor-navigation-content() {

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

@@ -362,13 +362,33 @@ describe("rendering AnchorNavigation", () => {
         value: 0,
         writable: true,
       });
-      Object.defineProperty(activeLink, "offsetLeft", {
+      Object.defineProperty(contentLeft, "getBoundingClientRect", {
         configurable: true,
-        value: 220,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 180,
+          width: 180,
+          height: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => ({}),
+        }),
       });
-      Object.defineProperty(activeLink, "clientWidth", {
+      Object.defineProperty(activeLink, "getBoundingClientRect", {
         configurable: true,
-        value: 80,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 220,
+          right: 300,
+          width: 80,
+          height: 0,
+          x: 220,
+          y: 0,
+          toJSON: () => ({}),
+        }),
       });
       contentLeft.scrollTo = scrollToSpy;
 
@@ -412,13 +432,33 @@ describe("rendering AnchorNavigation", () => {
         value: 180,
         writable: true,
       });
-      Object.defineProperty(activeLink, "offsetLeft", {
+      Object.defineProperty(contentLeft, "getBoundingClientRect", {
         configurable: true,
-        value: 220,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 200,
+          width: 200,
+          height: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => ({}),
+        }),
       });
-      Object.defineProperty(activeLink, "clientWidth", {
+      Object.defineProperty(activeLink, "getBoundingClientRect", {
         configurable: true,
-        value: 80,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 40,
+          right: 120,
+          width: 80,
+          height: 0,
+          x: 40,
+          y: 0,
+          toJSON: () => ({}),
+        }),
       });
       contentLeft.scrollTo = scrollToSpy;
 
@@ -433,6 +473,71 @@ describe("rendering AnchorNavigation", () => {
       section.remove();
     });
 
+    it("centers scroll-spy active item even when it is already visible", () => {
+      const { container } = render(<AnchorNavigation items={basicItems} />);
+      const anchorNavigationElement = initializeAnchorNavigation(container);
+      const anchorNavigation = AnchorNavigationStatic.getInstance(
+        anchorNavigationElement,
+      );
+      const contentLeft = container.querySelector(
+        ".anchor-navigation__content-left",
+      );
+      const activeLink = container.querySelector('a[href="#pricing"]');
+      const scrollToSpy = vi.fn();
+
+      Object.defineProperty(contentLeft, "clientWidth", {
+        configurable: true,
+        value: 200,
+      });
+      Object.defineProperty(contentLeft, "scrollWidth", {
+        configurable: true,
+        value: 600,
+      });
+      Object.defineProperty(contentLeft, "scrollLeft", {
+        configurable: true,
+        value: 180,
+        writable: true,
+      });
+      Object.defineProperty(contentLeft, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 200,
+          width: 200,
+          height: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => ({}),
+        }),
+      });
+      Object.defineProperty(activeLink, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 40,
+          right: 120,
+          width: 80,
+          height: 0,
+          x: 40,
+          y: 0,
+          toJSON: () => ({}),
+        }),
+      });
+      contentLeft.scrollTo = scrollToSpy;
+
+      anchorNavigation.scrollActiveLinkIntoView(contentLeft, activeLink, false);
+
+      expect(scrollToSpy).toHaveBeenCalledWith({
+        left: 160,
+        behavior: "smooth",
+      });
+
+      anchorNavigation?.destroy();
+    });
+
     it("does not duplicate anchor click handling after update", () => {
       const section = document.createElement("section");
       section.id = "features";
@@ -498,6 +603,159 @@ describe("rendering AnchorNavigation", () => {
       section.remove();
     });
 
+    it("prefers document scroll-padding-top over internal sticky offset", () => {
+      const section = document.createElement("section");
+      section.id = "pricing";
+      Object.defineProperty(section, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 600 - window.scrollY,
+          bottom: 700 - window.scrollY,
+          left: 0,
+          right: 0,
+          width: 0,
+          height: 100,
+          x: 0,
+          y: 600,
+          toJSON: () => ({}),
+        }),
+      });
+      document.body.appendChild(section);
+
+      const megamenu = document.createElement("div");
+      megamenu.setAttribute("data-megamenu", "");
+      Object.defineProperty(megamenu, "offsetHeight", {
+        configurable: true,
+        value: 120,
+      });
+      document.body.appendChild(megamenu);
+
+      Object.defineProperty(window, "scrollY", {
+        configurable: true,
+        value: 0,
+        writable: true,
+      });
+
+      const previousScrollPaddingTop =
+        document.documentElement.style.scrollPaddingTop;
+      document.documentElement.style.scrollPaddingTop = "210px";
+
+      const scrollToSpy = vi
+        .spyOn(window, "scrollTo")
+        .mockImplementation((options) => {
+          if (typeof options === "object" && typeof options.top === "number") {
+            window.scrollY = options.top;
+          }
+        });
+
+      const { container } = render(<AnchorNavigation items={basicItems} />);
+      const anchorNavigationElement = initializeAnchorNavigation(container);
+      const anchorNavigation = AnchorNavigationStatic.getInstance(
+        anchorNavigationElement,
+      );
+      const pricingLink = container.querySelector('a[href="#pricing"]');
+
+      Object.defineProperty(anchorNavigationElement, "offsetHeight", {
+        configurable: true,
+        value: 50,
+      });
+
+      fireEvent.click(pricingLink);
+
+      expect(scrollToSpy).toHaveBeenNthCalledWith(1, {
+        top: 390,
+        behavior: "smooth",
+      });
+
+      anchorNavigation?.destroy();
+      scrollToSpy.mockRestore();
+      document.documentElement.style.scrollPaddingTop =
+        previousScrollPaddingTop;
+      megamenu.remove();
+      section.remove();
+    });
+
+    it("realigns anchor after sticky offset changes during smooth scroll", () => {
+      vi.useFakeTimers();
+
+      const section = document.createElement("section");
+      section.id = "pricing";
+      Object.defineProperty(section, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 600 - window.scrollY,
+          bottom: 700 - window.scrollY,
+          left: 0,
+          right: 0,
+          width: 0,
+          height: 100,
+          x: 0,
+          y: 600,
+          toJSON: () => ({}),
+        }),
+      });
+      document.body.appendChild(section);
+
+      const megamenu = document.createElement("div");
+      megamenu.setAttribute("data-megamenu", "");
+      let megamenuHeight = 120;
+      Object.defineProperty(megamenu, "offsetHeight", {
+        configurable: true,
+        get: () => megamenuHeight,
+      });
+      document.body.appendChild(megamenu);
+
+      Object.defineProperty(window, "scrollY", {
+        configurable: true,
+        value: 0,
+        writable: true,
+      });
+
+      const scrollToSpy = vi
+        .spyOn(window, "scrollTo")
+        .mockImplementation((options) => {
+          if (typeof options === "object" && typeof options.top === "number") {
+            window.scrollY = options.top;
+          }
+        });
+
+      const { container } = render(<AnchorNavigation items={basicItems} />);
+      const anchorNavigationElement = initializeAnchorNavigation(container);
+      const anchorNavigation = AnchorNavigationStatic.getInstance(
+        anchorNavigationElement,
+      );
+      const pricingLink = container.querySelector('a[href="#pricing"]');
+
+      Object.defineProperty(anchorNavigationElement, "offsetHeight", {
+        configurable: true,
+        value: 50,
+      });
+
+      fireEvent.click(pricingLink);
+
+      expect(scrollToSpy).toHaveBeenNthCalledWith(1, {
+        top: 430,
+        behavior: "smooth",
+      });
+
+      megamenuHeight = 80;
+      fireEvent.scroll(window);
+      vi.advanceTimersByTime(
+        AnchorNavigationStatic.SCROLL_END_DEBOUNCE_MS + 20,
+      );
+
+      expect(scrollToSpy).toHaveBeenNthCalledWith(2, {
+        top: 470,
+        behavior: "smooth",
+      });
+
+      anchorNavigation?.destroy();
+      scrollToSpy.mockRestore();
+      megamenu.remove();
+      section.remove();
+      vi.useRealTimers();
+    });
+
     it("toggles left and right overflow classes based on scroll position", () => {
       const { container } = render(<AnchorNavigation items={moreItems} />);
       const anchorNavigationElement = initializeAnchorNavigation(container);

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

@@ -28,5 +28,5 @@
 
 @mixin border {
   outline: 2px solid var(--color-border-accent);
-  outline-offset: -1px;
+  outline-offset: -2px;
 }

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

@@ -9,31 +9,26 @@
 ) {
   display: flex;
   flex-flow: row wrap;
-  max-width: calc(100% - #{$spacing});
-  margin: ($spacing * -1) ($spacing * -1) space.get("large") 0;
+  gap: $spacing;
+  margin: 0 0 space.get("large") 0;
 
   #{$button-selector},
-  #{$button-selector}:last-child,
   #{$link-selector},
-  #{$link-selector}:last-child,
-  button#{$link-selector},
-  button#{$link-selector}:last-child {
-    margin: $spacing $spacing 0 0;
+  button#{$link-selector} {
+    margin: 0;
   }
 }
 
 @mixin stack-on-xs($spacing: config.$spacing, $button-selector: ".btn") {
   @include breakpoint.get("xs", "down") {
     flex-flow: column;
+    gap: $spacing;
     max-width: 100%;
     margin: 0 0 $spacing 0;
 
-    #{$button-selector}:not(:last-child),
-    #{$button-selector}:last-child,
-    button.link:not(:last-child),
-    button.link:last-child {
-      margin-right: 0;
-      margin-bottom: 0;
+    #{$button-selector},
+    button.link {
+      margin: 0;
     }
   }
 }

package/src/components/Carousel/Carousel.static.ts

@@ -54,6 +54,7 @@ export const defaultConfig: SwiperOptions = {
     hide: false,
   },
   slidesPerView: 1.2,
+  spaceBetween: 20,
   mousewheel: {
     forceToAxis: true,
     sensitivity: 1,
@@ -362,25 +363,6 @@ export default class Carousel {
     if (scrollbarEl) {
       scrollbarEl.style.display = this.instance.enabled ? "" : "none";
     }
-
-    this.applyTrackMarginCompensation();
-  }
-
-  /**
-   * Apply negative margin-right to carousel track when all slides fit on screen.
-   * This compensates for the 20px padding-right on each slide, ensuring proper grid alignment.
-   */
-  private applyTrackMarginCompensation(): void {
-    if (!this.instance || !this.instance.params || !this.viewport) return;
-
-    const slidesPerView = Number(this.instance.params.slidesPerView) || 1;
-    const slidesCount = this.instance.slides.length;
-
-    if (slidesCount <= slidesPerView) {
-      this.viewport.style.setProperty("margin-right", "-20px", "important");
-    } else {
-      this.viewport.style.removeProperty("margin-right");
-    }
   }
 
   private applyBleedInsets(viewportWrapper: HTMLElement): void {
@@ -395,8 +377,8 @@ export default class Carousel {
 
     const rect = viewportWrapper.getBoundingClientRect();
     const insetLeft = Math.max(Math.round(rect.left), 0);
-    const trailingSlidePadding = 20;
-    const insetAfter = Math.max(insetLeft - trailingSlidePadding, 0);
+    const insetRight = Math.max(Math.round(viewportWidth - rect.right), 0);
+    const insetAfter = insetRight;
 
     const slidesPerView = Number(this.instance.params.slidesPerView) || 1;
     const slidesCount = this.instance.slides.length;
@@ -415,11 +397,11 @@ export default class Carousel {
       this.instance.params.slidesOffsetAfter = insetAfter;
       this.element.style.setProperty(
         "--carousel-bleed-viewport-width",
-        "100dvw",
+        `${Math.round(viewportWidth)}px`,
       );
       this.element.style.setProperty(
         "--carousel-bleed-margin-left",
-        "calc(50% - 50dvw)",
+        `${-insetLeft}px`,
       );
     }
 
@@ -443,9 +425,6 @@ export default class Carousel {
 
       const updateBleedState = () => {
         this.applyBleedInsets(viewportWrapper);
-
-        // Update margin compensation on resize
-        this.applyTrackMarginCompensation();
       };
 
       this.bleedResizeHandler = updateBleedState;

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

@@ -105,7 +105,7 @@
   flex-direction: column;
   max-width: 100%;
   flex: 0 0 auto;
-  padding: 0 convert.to-rem(20px) 0 0;
+  padding: 0;
   user-select: none;
 
   > * {

package/src/components/Carousel/tests/Carousel.static.test.jsx

@@ -644,5 +644,122 @@ describe("Carousel Static - Auto-Disable Feature", () => {
         carouselInstance.updateCarouselEnabledState();
       }).not.toThrow();
     });
+
+    it("should not apply negative viewport margin on mobile when slides fit", () => {
+      const originalInnerWidth = window.innerWidth;
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: 375,
+      });
+
+      mockSwiperInstance.slides = [document.createElement("div")];
+      mockSwiperInstance.params.slidesPerView = 1;
+
+      carouselInstance = new Carousel(carouselElement);
+
+      const viewport = carouselElement.querySelector(".carousel__viewport");
+      expect(viewport.style.getPropertyValue("margin-right")).toBe("");
+
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: originalInnerWidth,
+      });
+    });
+
+    it("should not apply negative viewport margin on desktop when slides fit", () => {
+      const originalInnerWidth = window.innerWidth;
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: 1240,
+      });
+
+      mockSwiperInstance.slides = [document.createElement("div")];
+      mockSwiperInstance.params.slidesPerView = 1;
+
+      carouselInstance = new Carousel(carouselElement);
+
+      const viewport = carouselElement.querySelector(".carousel__viewport");
+      expect(viewport.style.getPropertyValue("margin-right")).toBe("");
+
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: originalInnerWidth,
+      });
+    });
+
+    it("should use right inset for bleed-right trailing offset", () => {
+      const originalInnerWidth = window.innerWidth;
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: 1000,
+      });
+
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = 1.2;
+      mockSwiperInstance.params.spaceBetween = 20;
+
+      document.body.innerHTML = `
+        <div class="carousel carousel--bleed-right" data-carousel-id="test-carousel" id="test-carousel">
+          <div class="carousel__viewport-wrapper">
+            <div class="carousel__viewport">
+              <div class="carousel__track">
+                <div class="carousel__slide">Slide 1</div>
+                <div class="carousel__slide">Slide 2</div>
+                <div class="carousel__slide">Slide 3</div>
+              </div>
+            </div>
+          </div>
+          <div class="carousel__pagination"></div>
+        </div>
+      `;
+
+      carouselElement = document.querySelector(".carousel");
+      const viewportWrapper = carouselElement.querySelector(
+        ".carousel__viewport-wrapper",
+      );
+
+      Object.defineProperty(viewportWrapper, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 0,
+          right: 920,
+          bottom: 200,
+          left: 120,
+          width: 800,
+          height: 200,
+          x: 120,
+          y: 0,
+          toJSON: () => ({}),
+        }),
+      });
+
+      carouselInstance = new Carousel(carouselElement);
+
+      expect(mockSwiperInstance.params.slidesOffsetBefore).toBe(120);
+      expect(mockSwiperInstance.params.slidesOffsetAfter).toBe(80);
+      expect(
+        carouselElement.style.getPropertyValue(
+          "--carousel-bleed-viewport-width",
+        ),
+      ).toBe("1000px");
+      expect(
+        carouselElement.style.getPropertyValue("--carousel-bleed-margin-left"),
+      ).toBe("-120px");
+
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: originalInnerWidth,
+      });
+    });
   });
 });

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

@@ -23,11 +23,15 @@
   }
 }
 
-@mixin grid-column-gap($size: "default", $column-gap: config.$column-gap) {
+@mixin grid-column-gap(
+  $size: "default",
+  $column-gap: config.$column-gap,
+  $force-important: false
+) {
   $gap: map.get($column-gap, $size);
 
   @if ($size == "default" or $size == "small") {
-    @if ($size == "default") {
+    @if ($size == "default" and not $force-important) {
       margin-left: -$gap;
       margin-right: -$gap;
     } @else {
@@ -46,7 +50,7 @@
   $size: "default",
   $column-gap: config.$column-gap
 ) {
-  @include grid-column-gap($size, $column-gap);
+  @include grid-column-gap($size, $column-gap, true);
 }
 
 @mixin grid-with-equal-height-content(
@@ -89,10 +93,14 @@
   max-width: 100%;
 }
 
-@mixin grid-col-column-gap($size: "default", $column-gap: config.$column-gap) {
+@mixin grid-col-column-gap(
+  $size: "default",
+  $column-gap: config.$column-gap,
+  $force-important: false
+) {
   $gap: map.get($column-gap, $size);
 
-  @if ($size == "default") {
+  @if ($size == "default" and not $force-important) {
     padding-left: $gap;
     padding-right: $gap;
   } @else if ($size == "small") {
@@ -110,7 +118,7 @@
   $size: "default",
   $column-gap: config.$column-gap
 ) {
-  @include grid-col-column-gap($size, $column-gap);
+  @include grid-col-column-gap($size, $column-gap, true);
 }
 
 @mixin column-size($width: config.$grid-base, $grid-base: config.$grid-base) {

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

@@ -27,7 +27,6 @@
 
 @mixin icon {
   vertical-align: middle;
-  transform: translateY(-4%);
 }
 
 @mixin icon-left {