@orangesk/orange-design-system 2.0.0-beta.42 → 2.0.0-beta.44

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

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

@@ -603,6 +603,78 @@ 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();
 

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/BodyBanner/styles/mixins.scss

@@ -42,7 +42,7 @@
   width: 100%;
   display: flex;
   padding: space.get("large");
-  gap: convert.to-rem(30px);
+  gap: convert.to-rem(60px);
 
   > div:not(.body-banner__button) {
     flex: 1;
@@ -56,6 +56,7 @@
   @include breakpoint.get("lg", "down") {
     display: flex;
     flex-direction: column;
+    gap: convert.to-rem(30px);
   }
 
   @include breakpoint.get("sm", "down") {
@@ -82,13 +83,7 @@
 @mixin button {
   display: flex;
   align-items: center;
-  padding: 0 0 0 space.get("xlarge");
   margin: 0 !important;
-
-  @include breakpoint.get("lg", "down") {
-    padding: 0;
-    margin-top: space.get("small") !important;
-  }
 }
 
 @mixin large {
@@ -113,9 +108,4 @@
       display: block;
     }
   }
-
-  .body-banner__button {
-    padding: 0;
-    margin-top: space.get("small") !important;
-  }
 }

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

@@ -54,12 +54,14 @@ export const defaultConfig: SwiperOptions = {
     hide: false,
   },
   slidesPerView: 1.2,
+  spaceBetween: 20,
   mousewheel: {
     forceToAxis: true,
     sensitivity: 1,
   },
   a11y: {
     enabled: true,
+    scrollOnFocus: false,
     prevSlideMessage: "Predchádzajúci snímok",
     nextSlideMessage: "Nasledujúci snímok",
     paginationBulletMessage: "Prejsť na snímok {index}",
@@ -96,6 +98,76 @@ export default class Carousel {
   private resizeRafId?: number;
   private boundWindowResizeHandler: () => void;
   private bleedResizeHandler?: () => void;
+  private static readonly OVERFLOW_EPSILON_PX = 1;
+
+  private getViewportWrapper(): HTMLElement | null {
+    return this.element.querySelector(
+      `.${CLASS_VIEWPORT_WRAPPER}`,
+    ) as HTMLElement | null;
+  }
+
+  private getSlidesPerView(): number {
+    return Number(this.instance?.params?.slidesPerView) || 1;
+  }
+
+  private setScrollbarVisible(visible: boolean): void {
+    const scrollbarEl = this.element.querySelector(
+      SELECTOR_SCROLLBAR,
+    ) as HTMLElement | null;
+    if (scrollbarEl) {
+      scrollbarEl.style.display = visible ? "" : "none";
+    }
+  }
+
+  private getSlidesContentWidth(): number {
+    if (!this.instance) {
+      return this.track?.scrollWidth || 0;
+    }
+
+    const slides = Array.from(this.instance.slides) as HTMLElement[];
+    const widthsSum = slides.reduce((sum, slide) => sum + slide.offsetWidth, 0);
+    const spaceBetween = Number(this.instance.params?.spaceBetween) || 0;
+    const gaps = Math.max(slides.length - 1, 0) * spaceBetween;
+    const measuredWidth = widthsSum + gaps;
+
+    // Fallback for early lifecycle/test DOM where slides can report 0 width.
+    if (widthsSum <= 0 || measuredWidth <= 0) {
+      return this.track?.scrollWidth || 0;
+    }
+
+    return measuredWidth;
+  }
+
+  private getOverflowWidth(viewportWrapper?: HTMLElement): number {
+    const isBleedRight = this.element.classList.contains(CLASS_BLEED_RIGHT);
+    const containerWidth = isBleedRight
+      ? viewportWrapper?.clientWidth || 0
+      : this.viewport?.clientWidth || 0;
+
+    if (containerWidth <= 0) {
+      return 0;
+    }
+
+    const contentWidth = this.getSlidesContentWidth();
+
+    return contentWidth - containerWidth;
+  }
+
+  private hasScrollableContent(viewportWrapper?: HTMLElement): boolean {
+    if (!this.instance || !this.instance.params) {
+      return false;
+    }
+
+    const overflowWidth = this.getOverflowWidth(viewportWrapper);
+    if (overflowWidth !== 0) {
+      return overflowWidth > Carousel.OVERFLOW_EPSILON_PX;
+    }
+
+    // Fallback for hidden/zero-width initialization.
+    const slidesCount = this.instance.slides.length;
+    const slidesPerView = this.getSlidesPerView();
+    return slidesCount > slidesPerView;
+  }
 
   constructor(element: HTMLElement, config?: Partial<SwiperOptions>) {
     this.element = element;
@@ -130,8 +202,12 @@ export default class Carousel {
       this.getCustomOptions();
     }
 
+    const isBleedRight = this.element.classList.contains(CLASS_BLEED_RIGHT);
+
     this.instance = new Swiper(this.viewport, {
       ...this.config,
+      // Swiper watchOverflow can mis-detect with slides offsets; manage bleed-right overflow ourselves.
+      watchOverflow: isBleedRight ? false : this.config.watchOverflow,
       enabled: false,
       modules: [Navigation, Pagination, Scrollbar, A11y, Keyboard, Mousewheel],
       on: {
@@ -236,9 +312,7 @@ export default class Carousel {
    */
   fixBleedRightScrollbar() {
     const updateScrollbar = () => {
-      const viewportWrapper = this.element.querySelector(
-        `.${CLASS_VIEWPORT_WRAPPER}`,
-      ) as HTMLElement;
+      const viewportWrapper = this.getViewportWrapper();
       const scrollbar = this.instance?.scrollbar;
       const swiper = this.instance;
 
@@ -246,26 +320,18 @@ export default class Carousel {
         return;
       }
 
-      const minTranslate = swiper.minTranslate();
-      const maxTranslate = swiper.maxTranslate();
-      const translateRange = Math.abs(maxTranslate - minTranslate);
+      const hasScrollableContent = this.hasScrollableContent(viewportWrapper);
 
-      if (translateRange <= 1 || !swiper.enabled) {
-        if (scrollbar.el) {
-          scrollbar.el.style.display = "none";
-        }
+      if (!hasScrollableContent) {
+        this.setScrollbarVisible(false);
         return;
       }
 
-      if (scrollbar.el) {
-        scrollbar.el.style.display = "";
-      }
+      this.setScrollbarVisible(true);
 
       const scrollbarWidth = scrollbar.el.offsetWidth;
       const viewportWidth = viewportWrapper.clientWidth;
-      const offsetBefore = Number(swiper.params.slidesOffsetBefore) || 0;
-      const offsetAfter = Number(swiper.params.slidesOffsetAfter) || 0;
-      const contentWidth = this.track.scrollWidth + offsetBefore + offsetAfter;
+      const contentWidth = this.getSlidesContentWidth();
 
       const visibleRatio =
         contentWidth > 0 ? Math.min(viewportWidth / contentWidth, 1) : 1;
@@ -347,40 +413,18 @@ export default class Carousel {
   private updateCarouselEnabledState(): void {
     if (!this.instance || !this.instance.params) return;
 
-    const slidesCount = this.instance.slides.length;
-    const slidesPerView = Number(this.instance.params.slidesPerView) || 1;
+    const viewportWrapper = this.getViewportWrapper();
+    const hasScrollableContent = this.hasScrollableContent(
+      viewportWrapper || undefined,
+    );
 
-    if (slidesCount > slidesPerView) {
+    if (hasScrollableContent) {
       this.instance.enable();
     } else {
       this.instance.disable();
     }
 
-    const scrollbarEl = this.element.querySelector(
-      SELECTOR_SCROLLBAR,
-    ) as HTMLElement | null;
-    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");
-    }
+    this.setScrollbarVisible(this.instance.enabled);
   }
 
   private applyBleedInsets(viewportWrapper: HTMLElement): void {
@@ -388,42 +432,34 @@ export default class Carousel {
       return;
     }
 
-    const viewportWidth =
-      document.documentElement.clientWidth ||
-      window.visualViewport?.width ||
-      window.innerWidth;
-
-    const rect = viewportWrapper.getBoundingClientRect();
-    const insetLeft = Math.max(Math.round(rect.left), 0);
-    const trailingSlidePadding = 20;
-    const insetAfter = Math.max(insetLeft - trailingSlidePadding, 0);
-
-    const slidesPerView = Number(this.instance.params.slidesPerView) || 1;
+    const projectedContentWidth = this.getSlidesContentWidth();
+    const projectedOverflowWidth =
+      projectedContentWidth - viewportWrapper.clientWidth;
+    const slidesPerView = this.getSlidesPerView();
     const slidesCount = this.instance.slides.length;
-    const shouldDisableBleed =
-      viewportWidth >= 2560 || slidesCount <= slidesPerView;
+    const hasIntrinsicOverflow =
+      projectedContentWidth > 0
+        ? projectedOverflowWidth > Carousel.OVERFLOW_EPSILON_PX
+        : slidesCount > slidesPerView;
+    const shouldDisableBleed = !hasIntrinsicOverflow;
 
     this.element.classList.toggle(CLASS_BLEED_RIGHT, !shouldDisableBleed);
 
-    if (shouldDisableBleed) {
-      this.instance.params.slidesOffsetBefore = 0;
-      this.instance.params.slidesOffsetAfter = 0;
-      this.element.style.setProperty("--carousel-bleed-viewport-width", "100%");
-      this.element.style.setProperty("--carousel-bleed-margin-left", "0px");
-    } else {
-      this.instance.params.slidesOffsetBefore = insetLeft;
-      this.instance.params.slidesOffsetAfter = insetAfter;
-      this.element.style.setProperty(
-        "--carousel-bleed-viewport-width",
-        "100dvw",
-      );
-      this.element.style.setProperty(
-        "--carousel-bleed-margin-left",
-        "calc(50% - 50dvw)",
-      );
+    const baseWidth = shouldDisableBleed
+      ? undefined
+      : viewportWrapper.clientWidth;
+    this.instance.params.width = baseWidth;
+    if (this.instance.originalParams) {
+      this.instance.originalParams.width = baseWidth;
     }
 
+    this.instance.params.slidesOffsetBefore = 0;
+    this.instance.params.slidesOffsetAfter = 0;
+    this.element.style.setProperty("--carousel-bleed-viewport-width", "100%");
+    this.element.style.setProperty("--carousel-bleed-margin-left", "0px");
+
     this.instance.update();
+    this.updateCarouselEnabledState();
   }
 
   /**
@@ -436,16 +472,11 @@ export default class Carousel {
     requestAnimationFrame(() => {
       if (!this.instance) return;
 
-      const viewportWrapper = this.element.querySelector(
-        `.${CLASS_VIEWPORT_WRAPPER}`,
-      ) as HTMLElement;
+      const viewportWrapper = this.getViewportWrapper();
       if (!viewportWrapper) return;
 
       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;
 
   > * {
@@ -225,6 +225,6 @@
     max-width: var(--carousel-bleed-viewport-width, 100%);
     margin-right: 0;
     margin-left: var(--carousel-bleed-margin-left, 0) !important;
-    overflow: hidden !important;
+    overflow: visible !important;
   }
 }

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

@@ -124,6 +124,12 @@ describe("Carousel Static - External Controls", () => {
   });
 
   describe("External Controls Initialization", () => {
+    it("should disable a11y scrollOnFocus to prevent focus-triggered slide jumps", () => {
+      const swiperConfig = Swiper.mock.calls[0]?.[1];
+
+      expect(swiperConfig?.a11y?.scrollOnFocus).toBe(false);
+    });
+
     it("should find and initialize external controls", () => {
       const prevButton = document.getElementById("prev-btn");
       const nextButton = document.getElementById("next-btn");
@@ -644,5 +650,202 @@ 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 disable bleed-right when slides fit wrapper despite right inset", () => {
+      const originalInnerWidth = window.innerWidth;
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: 1200,
+      });
+
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = 2;
+
+      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>
+            </div>
+          </div>
+          <div class="carousel__pagination"></div>
+        </div>
+      `;
+
+      carouselElement = document.querySelector(".carousel");
+      const viewportWrapper = carouselElement.querySelector(
+        ".carousel__viewport-wrapper",
+      );
+      const track = carouselElement.querySelector(".carousel__track");
+
+      Object.defineProperty(viewportWrapper, "clientWidth", {
+        configurable: true,
+        value: 900,
+      });
+      Object.defineProperty(track, "scrollWidth", {
+        configurable: true,
+        value: 900,
+      });
+      Object.defineProperty(viewportWrapper, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 0,
+          right: 1000,
+          bottom: 200,
+          left: 100,
+          width: 900,
+          height: 200,
+          x: 100,
+          y: 0,
+          toJSON: () => ({}),
+        }),
+      });
+
+      carouselInstance = new Carousel(carouselElement);
+
+      expect(mockSwiperInstance.params.slidesOffsetBefore).toBe(0);
+      expect(mockSwiperInstance.params.slidesOffsetAfter).toBe(0);
+
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: originalInnerWidth,
+      });
+    });
+
+    it("should keep wrapper-based bleed geometry without offsets", () => {
+      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",
+      );
+      const track = carouselElement.querySelector(".carousel__track");
+
+      Object.defineProperty(viewportWrapper, "clientWidth", {
+        configurable: true,
+        value: 800,
+      });
+      Object.defineProperty(track, "scrollWidth", {
+        configurable: true,
+        value: 1200,
+      });
+
+      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(0);
+      expect(mockSwiperInstance.params.slidesOffsetAfter).toBe(0);
+      expect(mockSwiperInstance.params.width).toBe(800);
+      expect(
+        carouselElement.style.getPropertyValue(
+          "--carousel-bleed-viewport-width",
+        ),
+      ).toBe("100%");
+      expect(
+        carouselElement.style.getPropertyValue("--carousel-bleed-margin-left"),
+      ).toBe("0px");
+
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: originalInnerWidth,
+      });
+    });
   });
 });

package/src/components/Expander/Expander.tsx

@@ -25,6 +25,8 @@ interface ExpanderProps {
   children?: React.ReactNode;
   /** Expander takes full width of its container */
   isFullWidth?: boolean;
+  /** Position of trigger relative to content when opened */
+  placement?: "top" | "bottom";
   /** Group identifier for syncing multiple expanders together */
   toggleGroup?: string;
   /** Initial open state */
@@ -40,6 +42,7 @@ export const Expander: React.FC<ExpanderProps> = (props) => {
     renderSummary,
     renderSummaryOpened,
     isFullWidth,
+    placement = "bottom",
     toggleGroup,
     ...other
   } = props;
@@ -49,6 +52,7 @@ export const Expander: React.FC<ExpanderProps> = (props) => {
     CLASS_ROOT,
     {
       [`${CLASS_ROOT}--fullwidth`]: isFullWidth,
+      [`${CLASS_ROOT}--placement-top`]: placement === "top",
     },
     className,
   );