@orangesk/orange-design-system 2.0.0-beta.11 → 2.0.0-beta.13

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-beta.11",
+  "version": "2.0.0-beta.13",
   "private": false,
   "engines": {
-    "node": ">=18.x"
+    "node": ">=20.x"
   },
   "files": [
     "build/",
@@ -34,7 +34,7 @@
     "@cloudfour/transition-hidden-element": "^2.0.2",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "^15.5.4",
+    "@next/mdx": "^15.5.6",
     "@orangesk/accessible-autocomplete": "^3.1.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.13",
@@ -42,11 +42,11 @@
     "classnames": "^2.5.1",
     "daypickr": "^0.3.4",
     "diff2html": "^3.4.52",
-    "dompurify": "^3.2.7",
-    "html-react-parser": "^5.2.6",
+    "dompurify": "^3.3.0",
+    "html-react-parser": "^5.2.7",
     "jest-environment-jsdom": "^30.2.0",
     "lorem-ipsum": "^2.0.8",
-    "next": "15.5.4",
+    "next": "15.5.6",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "pretty": "^2.0.0",
@@ -71,7 +71,7 @@
     "@eslint/eslintrc": "3.3.1",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.1.0",
-    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-commonjs": "^28.0.7",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
@@ -84,11 +84,11 @@
     "@types/node": "^24.7.2",
     "@types/pretty": "^2.0.3",
     "@types/react": "19.2.2",
-    "@types/react-dom": "19.2.1",
+    "@types/react-dom": "19.2.2",
     "@types/wnumb": "^1.2.3",
     "babel-jest": "30.2.0",
     "eslint": "latest",
-    "eslint-config-next": "^15.5.4",
+    "eslint-config-next": "^15.5.5",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-unused-imports": "^4.2.0",
     "fs-extra": "^11.3.2",

package/src/components/AnchorNavigation/AnchorNavigation.static.ts

@@ -93,6 +93,9 @@ export default class AnchorNavigation {
           if (targetElement) {
             this.isAutoScrolling = true;
 
+            // Remove focus from clicked element to prevent focus state persistence
+            anchor.blur();
+
             // Calculate scroll position
             const scrollOffset = this.megamenuElement
               ? this.megamenuElement.offsetHeight

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

@@ -63,7 +63,7 @@
   align-items: center;
   position: relative;
 
-  @include breakpoint.get("xs", "down") {
+  @include breakpoint.get("md", "down") {
     overflow: hidden;
     flex-direction: column;
   }
@@ -72,7 +72,7 @@
 @mixin anchor-navigation-content-left() {
   display: flex;
 
-  @include breakpoint.get("xs", "down") {
+  @include breakpoint.get("md", "down") {
     width: 100%;
   }
 }
@@ -83,7 +83,7 @@
   flex-shrink: 0;
   gap: space.get("medium");
   position: relative;
-  padding: 0 convert.to-rem(25px);
+  padding: 0 0 0 convert.to-rem(25px);
   z-index: 1;
 
   &:before {
@@ -102,7 +102,7 @@
     border-radius: inherit;
   }
 
-  @include breakpoint.get("xs", "down") {
+  @include breakpoint.get("md", "down") {
     &:before {
       display: none;
     }

package/src/components/Button/styles/config.scss

@@ -1,4 +1,5 @@
 @use "../../../styles/tokens/space";
+@use "../../../styles/tokens/color";
 @use "../../../styles/tools/convert";
 
 $base: (
@@ -46,7 +47,7 @@ $variants: (
       border-color: transparent,
     ),
     active: (
-      color: var(--color-text-inverse),
+      color: color.$white,
       background-color: var(--color-fill-tertiary),
       border-color: transparent,
     ),
@@ -58,7 +59,7 @@ $variants: (
   ),
   "primary": (
     default: (
-      color: var(--color-text-inverse),
+      color: color.$white,
       background-color: var(--color-fill-tertiary),
       border-color: transparent,
     ),
@@ -73,7 +74,7 @@ $variants: (
       border-color: var(--color-border-contrast),
     ),
     disabled: (
-      color: var(--color-text-inverse),
+      color: color.$white,
       background-color: var(--color-fill-disabled),
       border-color: var(--color-fill-disabled),
     ),
@@ -90,7 +91,7 @@ $variants: (
       border-color: var(--color-border-contrast),
     ),
     active: (
-      color: var(--color-text-inverse),
+      color: color.$white,
       background-color: var(--color-fill-tertiary),
       border-color: transparent,
     ),

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

@@ -84,6 +84,7 @@ export default class Carousel {
   viewport!: HTMLElement;
   track!: HTMLElement;
   instance!: Swiper;
+  carouselId?: string;
 
   constructor(element: HTMLElement, config?: Partial<SwiperOptions>) {
     this.element = element;
@@ -123,6 +124,10 @@ export default class Carousel {
       modules: [Navigation, Pagination, Scrollbar, A11y, Keyboard],
       on: {
         slideChange: this.handleSlideChange,
+        slideChangeTransitionEnd: () => {
+          // Update external controls after transition completes
+          this.updateExternalControlsState();
+        },
       },
     });
 
@@ -130,6 +135,9 @@ export default class Carousel {
     if (this.element.classList.contains(CLASS_BLEED_RIGHT)) {
       this.adjustConfigForBleedRight();
     }
+
+    // Initialize external controls
+    this.initExternalControls();
   }
 
   getElements() {
@@ -241,7 +249,7 @@ export default class Carousel {
   /**
    * Handles the slide change event on the carousel.
    * Updates the tooltip position for the active slide and hides tooltips for non-active slides.
-   * Also updates accessibility attributes for pagination buttons.
+   * Also updates accessibility attributes for pagination buttons and external controls state.
    */
   handleSlideChange() {
     const activeSlide = this.track.querySelector(SELECTOR_ACTIVE);
@@ -256,6 +264,9 @@ export default class Carousel {
     if (nonActiveSlides.length > 0) {
       this.hideAllTooltips(nonActiveSlides);
     }
+
+    // Update external controls state based on current position
+    this.updateExternalControlsState();
   }
 
   /**
@@ -309,7 +320,187 @@ export default class Carousel {
     });
   }
 
+  /**
+   * Initialize external controls that reference this carousel
+   */
+  initExternalControls() {
+    // Get carousel ID from data-carousel-id or element id
+    const carouselId = this.element.dataset.carouselId || this.element.id;
+
+    if (!carouselId) {
+      return; // No ID to reference, skip external controls
+    }
+
+    // Store carousel ID for later use
+    this.carouselId = carouselId;
+
+    // Find all elements with data-carousel-controls matching this carousel's ID
+    const controlElements = document.querySelectorAll(
+      `[data-carousel-controls="${carouselId}"]`,
+    );
+
+    controlElements.forEach((control) => {
+      const htmlControl = control as HTMLElement;
+
+      // Skip if already initialized to avoid duplicate event listeners
+      if (htmlControl.hasAttribute("data-carousel-initialized")) {
+        return;
+      }
+
+      // Remove any existing event listener first (just in case)
+      if ((htmlControl as any)._carouselClickHandler) {
+        htmlControl.removeEventListener(
+          "click",
+          (htmlControl as any)._carouselClickHandler,
+        );
+      }
+
+      const action = htmlControl.dataset.carouselAction;
+
+      // Create bound event handler to avoid multiple listeners
+      const clickHandler = (e: Event) => {
+        e.preventDefault();
+        if (htmlControl.hasAttribute("disabled")) {
+          return;
+        }
+        if (action === "next") {
+          this.slideNext();
+        } else if (action === "prev") {
+          this.slidePrev();
+        }
+      };
+
+      if (action === "next" || action === "prev") {
+        htmlControl.addEventListener("click", clickHandler);
+
+        // Add ARIA attributes for accessibility
+        htmlControl.setAttribute(
+          "aria-label",
+          action === "next"
+            ? this.config.a11y?.nextSlideMessage || "Nasledujúci snímok"
+            : this.config.a11y?.prevSlideMessage || "Predchádzajúci snímok",
+        );
+        htmlControl.setAttribute("type", "button");
+
+        // Store the handler reference for potential cleanup
+        (htmlControl as any)._carouselClickHandler = clickHandler;
+      }
+
+      // Mark as initialized to avoid duplicate event listeners
+      htmlControl.setAttribute("data-carousel-initialized", "true");
+    });
+
+    // Update initial state of external controls
+    this.updateExternalControlsState();
+  }
+
+  /**
+   * Update the disabled state of external controls based on current slide position
+   */
+  updateExternalControlsState() {
+    if (!this.carouselId || !this.instance) {
+      return;
+    }
+
+    const isAtStart = this.instance.isBeginning;
+    const isAtEnd = this.instance.isEnd;
+
+    // Find all prev controls for this carousel
+    const prevControls = document.querySelectorAll(
+      `[data-carousel-controls="${this.carouselId}"][data-carousel-action="prev"]`,
+    );
+
+    // Find all next controls for this carousel
+    const nextControls = document.querySelectorAll(
+      `[data-carousel-controls="${this.carouselId}"][data-carousel-action="next"]`,
+    );
+
+    // Update prev controls
+    prevControls.forEach((control) => {
+      const htmlControl = control as HTMLElement;
+      if (isAtStart) {
+        htmlControl.setAttribute("disabled", "true");
+        htmlControl.setAttribute("aria-disabled", "true");
+        htmlControl.style.cursor = "not-allowed";
+      } else {
+        htmlControl.removeAttribute("disabled");
+        htmlControl.setAttribute("aria-disabled", "false");
+        htmlControl.style.cursor = "pointer";
+      }
+    });
+
+    // Update next controls
+    nextControls.forEach((control) => {
+      const htmlControl = control as HTMLElement;
+      if (isAtEnd) {
+        htmlControl.setAttribute("disabled", "true");
+        htmlControl.setAttribute("aria-disabled", "true");
+        htmlControl.style.cursor = "not-allowed";
+      } else {
+        htmlControl.removeAttribute("disabled");
+        htmlControl.setAttribute("aria-disabled", "false");
+        htmlControl.style.cursor = "pointer";
+      }
+    });
+  }
+
+  /**
+   * Go to the next slide
+   */
+  slideNext() {
+    if (this.instance) {
+      this.instance.slideNext();
+    }
+  }
+
+  /**
+   * Go to the previous slide
+   */
+  slidePrev() {
+    if (this.instance) {
+      this.instance.slidePrev();
+    }
+  }
+
+  /**
+   * Get the current active slide index
+   * @returns {number} The current slide index
+   */
+  getActiveIndex(): number {
+    return this.instance ? this.instance.activeIndex : 0;
+  }
+
+  /**
+   * Add event listener for slide changes
+   * @param {Function} callback - Callback function to execute on slide change
+   */
+  onSlideChange(callback: (activeIndex: number) => void) {
+    if (this.instance) {
+      this.instance.on("slideChange", () => {
+        callback(this.instance.activeIndex);
+      });
+    }
+  }
+
   destroy() {
+    // Clean up external controls
+    if (this.carouselId) {
+      const controlElements = document.querySelectorAll(
+        `[data-carousel-controls="${this.carouselId}"]`,
+      );
+      controlElements.forEach((control) => {
+        const htmlControl = control as HTMLElement;
+        if ((htmlControl as any)._carouselClickHandler) {
+          htmlControl.removeEventListener(
+            "click",
+            (htmlControl as any)._carouselClickHandler,
+          );
+          delete (htmlControl as any)._carouselClickHandler;
+        }
+        htmlControl.removeAttribute("data-carousel-initialized");
+      });
+    }
+
     if (this.instance) {
       this.instance.destroy();
     }
@@ -324,4 +515,16 @@ export default class Carousel {
   static getInstance(el: HTMLElement): Carousel | null {
     return el && (el as any).ODS_Carousel ? (el as any).ODS_Carousel : null;
   }
+
+  /**
+   * Find carousel instance by ID or data attribute
+   * @param {string} carouselId - The ID or data attribute value of the carousel
+   * @returns {Carousel | null} The carousel instance or null
+   */
+  static getInstanceById(carouselId: string): Carousel | null {
+    const element =
+      document.querySelector(`[data-carousel-id="${carouselId}"]`) ||
+      document.getElementById(carouselId);
+    return element ? this.getInstance(element as HTMLElement) : null;
+  }
 }