@orangesk/orange-design-system 3.6.2 → 3.8.0

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

@@ -241,6 +241,9 @@ export default class Carousel {
       modules: [Navigation, Pagination, Scrollbar, A11y, Keyboard, Mousewheel],
       on: {
         slideChange: this.handleSlideChange,
+        snapIndexChange: () => {
+          this.updateExternalControlsState();
+        },
         slideChangeTransitionEnd: () => {
           this.updateExternalControlsState();
         },
@@ -680,6 +683,9 @@ export default class Carousel {
     }
 
     this.carouselId = carouselId;
+    if (!this.element.id) {
+      this.element.id = carouselId;
+    }
 
     const controlElements = document.querySelectorAll(
       `[data-carousel-controls="${carouselId}"]`,
@@ -698,8 +704,22 @@ export default class Carousel {
           (htmlControl as any)._carouselClickHandler,
         );
       }
+      if ((htmlControl as any)._carouselKeydownHandler) {
+        htmlControl.removeEventListener(
+          "keydown",
+          (htmlControl as any)._carouselKeydownHandler,
+        );
+      }
 
       const action = htmlControl.dataset.carouselAction;
+      const slideIndexValue = htmlControl.dataset.carouselSlideIndex;
+      const slideIndex =
+        slideIndexValue !== undefined ? Number(slideIndexValue) : undefined;
+      const hasValidSlideIndex =
+        !action &&
+        slideIndex !== undefined &&
+        Number.isInteger(slideIndex) &&
+        slideIndex >= 0;
 
       const clickHandler = (e: Event) => {
         e.preventDefault();
@@ -710,23 +730,51 @@ export default class Carousel {
           this.slideNext();
         } else if (action === "prev") {
           this.slidePrev();
+        } else if (hasValidSlideIndex) {
+          this.goToSlide(slideIndex);
+        }
+      };
+
+      const keydownHandler = (e: KeyboardEvent) => {
+        if (e.key !== "Enter" && e.key !== " ") {
+          return;
         }
+
+        clickHandler(e);
       };
 
-      if (action === "next" || action === "prev") {
+      if (action === "next" || action === "prev" || hasValidSlideIndex) {
         htmlControl.addEventListener("click", clickHandler);
 
-        htmlControl.setAttribute(
-          "aria-label",
-          action === "next"
-            ? (typeof this.config.a11y === "object"
-                ? this.config.a11y?.nextSlideMessage
-                : undefined) || "Nasledujúci snímok"
-            : (typeof this.config.a11y === "object"
-                ? this.config.a11y?.prevSlideMessage
-                : undefined) || "Predchádzajúci snímok",
-        );
-        htmlControl.setAttribute("type", "button");
+        htmlControl.setAttribute("aria-controls", this.element.id);
+
+        if (action === "next" || action === "prev") {
+          if (!htmlControl.hasAttribute("aria-label")) {
+            htmlControl.setAttribute(
+              "aria-label",
+              action === "next"
+                ? (typeof this.config.a11y === "object"
+                    ? this.config.a11y?.nextSlideMessage
+                    : undefined) || "Nasledujúci snímok"
+                : (typeof this.config.a11y === "object"
+                    ? this.config.a11y?.prevSlideMessage
+                    : undefined) || "Predchádzajúci snímok",
+            );
+          }
+        }
+
+        if (htmlControl instanceof HTMLButtonElement) {
+          htmlControl.setAttribute("type", "button");
+        } else {
+          if (!htmlControl.hasAttribute("role")) {
+            htmlControl.setAttribute("role", "button");
+          }
+          if (!htmlControl.hasAttribute("tabindex")) {
+            htmlControl.setAttribute("tabindex", "0");
+          }
+          htmlControl.addEventListener("keydown", keydownHandler);
+          (htmlControl as any)._carouselKeydownHandler = keydownHandler;
+        }
 
         (htmlControl as any)._carouselClickHandler = clickHandler;
       }
@@ -773,6 +821,9 @@ export default class Carousel {
     const nextControls = document.querySelectorAll(
       `[data-carousel-controls="${this.carouselId}"][data-carousel-action="next"]`,
     );
+    const slideControls = document.querySelectorAll(
+      `[data-carousel-controls="${this.carouselId}"][data-carousel-slide-index]:not([data-carousel-action])`,
+    );
 
     prevControls.forEach((control) => {
       const htmlControl = control as HTMLElement;
@@ -799,6 +850,25 @@ export default class Carousel {
         htmlControl.style.cursor = "pointer";
       }
     });
+
+    const activeIndex = this.instance.params.loop
+      ? (this.instance.realIndex ?? this.instance.activeIndex ?? 0)
+      : (this.instance.snapIndex ?? this.instance.activeIndex ?? 0);
+    slideControls.forEach((control) => {
+      const htmlControl = control as HTMLElement;
+      const slideIndex = Number(htmlControl.dataset.carouselSlideIndex);
+      if (
+        !Number.isInteger(slideIndex) ||
+        slideIndex < 0 ||
+        slideIndex >= this.instance.slides.length
+      ) {
+        return;
+      }
+      const isActive = slideIndex === activeIndex;
+
+      htmlControl.classList.toggle(CLASS_ACTIVE, isActive);
+      htmlControl.setAttribute("aria-pressed", String(isActive));
+    });
   }
 
   /**
@@ -819,6 +889,27 @@ export default class Carousel {
     }
   }
 
+  /**
+   * Navigate to a specific slide index from an external control.
+   */
+  goToSlide(index: number) {
+    if (
+      !this.instance ||
+      !Number.isInteger(index) ||
+      index < 0 ||
+      index >= this.instance.slides.length
+    ) {
+      return;
+    }
+
+    if (this.instance.params.loop && this.instance.slideToLoop) {
+      this.instance.slideToLoop(index);
+      return;
+    }
+
+    this.instance.slideTo(index);
+  }
+
   /**
    * Get the current active slide index.
    */

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

@@ -12,6 +12,7 @@ vi.mock("swiper", () => ({
     return {
       slideNext: vi.fn(),
       slidePrev: vi.fn(),
+      slideTo: vi.fn(),
       destroy: vi.fn(),
       update: vi.fn(),
       on: vi.fn(),
@@ -64,6 +65,7 @@ describe("Carousel Static - External Controls", () => {
     mockSwiperInstance = {
       slideNext: vi.fn(),
       slidePrev: vi.fn(),
+      slideTo: vi.fn(),
       destroy: vi.fn(),
       update: vi.fn(),
       on: vi.fn(),
@@ -142,6 +144,21 @@ describe("Carousel Static - External Controls", () => {
       expect(nextButton.getAttribute("aria-label")).toBe("Nasledujúci snímok");
       expect(prevButton.getAttribute("type")).toBe("button");
       expect(nextButton.getAttribute("type")).toBe("button");
+      expect(prevButton.getAttribute("aria-controls")).toBe("test-carousel");
+      expect(nextButton.getAttribute("aria-controls")).toBe("test-carousel");
+    });
+
+    it("should preserve an explicit accessible label", () => {
+      const customNext = document.createElement("button");
+      customNext.dataset.carouselControls = "test-carousel";
+      customNext.dataset.carouselAction = "next";
+      customNext.setAttribute("aria-label", "Ďalší produkt");
+      document.body.appendChild(customNext);
+
+      carouselInstance.initExternalControls();
+
+      expect(customNext).toHaveAttribute("aria-label", "Ďalší produkt");
+      expect(customNext).toHaveAttribute("aria-controls", "test-carousel");
     });
 
     it("should not initialize controls without carousel ID", () => {
@@ -178,6 +195,123 @@ describe("Carousel Static - External Controls", () => {
   });
 
   describe("External Controls Navigation", () => {
+    it("should navigate by slide index and synchronize index controls", () => {
+      document.body.insertAdjacentHTML(
+        "beforeend",
+        `
+          <button data-carousel-controls="test-carousel" data-carousel-slide-index="0" id="slide-0">XL</button>
+          <button data-carousel-controls="test-carousel" data-carousel-slide-index="1" id="slide-1">M</button>
+        `,
+      );
+      carouselInstance.initExternalControls();
+
+      const firstControl = document.getElementById("slide-0");
+      const secondControl = document.getElementById("slide-1");
+      expect(firstControl).toHaveClass("is-active");
+      expect(firstControl).toHaveAttribute("aria-pressed", "true");
+      expect(secondControl).toHaveAttribute("aria-pressed", "false");
+
+      secondControl.click();
+      expect(mockSwiperInstance.slideTo).toHaveBeenCalledWith(1);
+
+      mockSwiperInstance.activeIndex = 1;
+      const swiperConfig = Swiper.mock.calls[0]?.[1];
+      swiperConfig?.on?.slideChange?.();
+
+      expect(firstControl).not.toHaveClass("is-active");
+      expect(firstControl).toHaveAttribute("aria-pressed", "false");
+      expect(secondControl).toHaveClass("is-active");
+      expect(secondControl).toHaveAttribute("aria-pressed", "true");
+    });
+
+    it("should make non-native index controls keyboard accessible", () => {
+      document.body.insertAdjacentHTML(
+        "beforeend",
+        `<span data-carousel-controls="test-carousel" data-carousel-slide-index="1" id="keyboard-slide">M</span>`,
+      );
+      carouselInstance.initExternalControls();
+
+      const control = document.getElementById("keyboard-slide");
+      expect(control).toHaveAttribute("role", "button");
+      expect(control).toHaveAttribute("tabindex", "0");
+      expect(control).toHaveAttribute("aria-controls", "test-carousel");
+
+      control.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
+      control.dispatchEvent(new KeyboardEvent("keydown", { key: " " }));
+
+      expect(mockSwiperInstance.slideTo).toHaveBeenCalledTimes(2);
+      expect(mockSwiperInstance.slideTo).toHaveBeenNthCalledWith(1, 1);
+      expect(mockSwiperInstance.slideTo).toHaveBeenNthCalledWith(2, 1);
+    });
+
+    it("should ignore index controls with an invalid slide index", () => {
+      document.body.insertAdjacentHTML(
+        "beforeend",
+        `<button data-carousel-controls="test-carousel" data-carousel-slide-index="nope" id="invalid-slide">Invalid</button>`,
+      );
+      carouselInstance.initExternalControls();
+
+      document.getElementById("invalid-slide").click();
+
+      expect(mockSwiperInstance.slideTo).not.toHaveBeenCalled();
+      expect(document.getElementById("invalid-slide")).not.toHaveAttribute(
+        "aria-pressed",
+      );
+    });
+
+    it("should highlight the last index control when the carousel reaches the end", () => {
+      document.body.insertAdjacentHTML(
+        "beforeend",
+        `
+          <button data-carousel-controls="test-carousel" data-carousel-slide-index="0" id="end-slide-0">XL</button>
+          <button data-carousel-controls="test-carousel" data-carousel-slide-index="1" id="end-slide-1">M</button>
+          <button data-carousel-controls="test-carousel" data-carousel-slide-index="2" id="end-slide-2">S</button>
+        `,
+      );
+      carouselInstance.initExternalControls();
+
+      mockSwiperInstance.activeIndex = 1;
+      mockSwiperInstance.realIndex = 1;
+      mockSwiperInstance.snapIndex = 2;
+      mockSwiperInstance.isEnd = true;
+      carouselInstance.updateExternalControlsState();
+
+      expect(document.getElementById("end-slide-2")).toHaveClass("is-active");
+      expect(document.getElementById("end-slide-2")).toHaveAttribute(
+        "aria-pressed",
+        "true",
+      );
+    });
+
+    it("should synchronize index controls when only the snap index changes", () => {
+      document.body.insertAdjacentHTML(
+        "beforeend",
+        `
+          <button data-carousel-controls="test-carousel" data-carousel-slide-index="0" id="snap-slide-0">XL</button>
+          <button data-carousel-controls="test-carousel" data-carousel-slide-index="1" id="snap-slide-1">M</button>
+          <button data-carousel-controls="test-carousel" data-carousel-slide-index="2" id="snap-slide-2">S</button>
+        `,
+      );
+      carouselInstance.initExternalControls();
+      const swiperConfig = Swiper.mock.calls[0]?.[1];
+
+      mockSwiperInstance.activeIndex = 1;
+      mockSwiperInstance.realIndex = 1;
+      mockSwiperInstance.snapIndex = 2;
+      mockSwiperInstance.isEnd = true;
+      swiperConfig?.on?.slideChange?.();
+      expect(document.getElementById("snap-slide-2")).toHaveClass("is-active");
+
+      mockSwiperInstance.snapIndex = 1;
+      mockSwiperInstance.isEnd = false;
+      swiperConfig?.on?.snapIndexChange?.();
+
+      expect(document.getElementById("snap-slide-1")).toHaveClass("is-active");
+      expect(document.getElementById("snap-slide-2")).not.toHaveClass(
+        "is-active",
+      );
+    });
+
     it("should call slideNext when next button is clicked", () => {
       const nextButton = document.getElementById("next-btn");
       nextButton.click();

package/src/components/DocumentationSidebar/DocumentationSidebar.tsx

@@ -9,13 +9,19 @@ import packageJson from "../../../package.json";
 import { TextInput } from "../Forms/TextInput";
 import { Icon } from "../Icon";
 import { Image } from "../Image";
+import type { TagColor } from "../Tag";
 import { Tag } from "../Tag";
 
+export interface DocumentationSidebarTag {
+  text: string;
+  color?: TagColor;
+}
+
 export interface DocumentationSidebarItem {
   label: string;
   href?: string;
   target?: React.HTMLAttributeAnchorTarget;
-  tag?: string;
+  tag?: DocumentationSidebarTag;
   items?: DocumentationSidebarItem[];
   content?: string; // Optional: MDX content for searching
 }
@@ -207,11 +213,11 @@ const SidebarItem: React.FC<{
               <span>{item.label}</span>
               {item.tag ? (
                 <Tag
-                  color="warning"
+                  color={item.tag.color || "warning"}
                   size="small"
                   className={`${CLASS_ROOT}__tag`}
                 >
-                  {item.tag}
+                  {item.tag.text}
                 </Tag>
               ) : null}
             </span>
@@ -392,7 +398,9 @@ export const DocumentationSidebar: React.FC<DocumentationSidebarProps> = (
         aria-label="Sidebar navigation"
         ref={sidebarRef}
       >
-        <Image src="/logo.svg" alt="logo" />
+        <Link href="/">
+          <Image src="/logo.svg" alt="logo" />
+        </Link>
 
         <div className="mb">
           <TextInput

package/src/components/Drawer/Drawer.static.ts

@@ -0,0 +1,281 @@
+import A11yDialog from "a11y-dialog";
+import Modal from "../Modal/Modal.static";
+
+interface DrawerConfig {
+  classDrawerIsOpen: string;
+  drawersRoot: string;
+  disablePortal?: boolean;
+}
+
+const defaultConfig = (): DrawerConfig => ({
+  classDrawerIsOpen: "is-active",
+  drawersRoot: "#root-drawers",
+});
+
+const SWIPE_DISTANCE = 80;
+const SWIPE_VELOCITY = 0.5;
+
+interface HTMLElementWithDrawer extends HTMLElement {
+  ODS_Drawer?: Drawer;
+}
+
+/** Accessible vanilla bottom-sheet drawer backed by a11y-dialog. */
+export default class Drawer {
+  element: HTMLElementWithDrawer;
+  config: DrawerConfig;
+  instance!: A11yDialog;
+  private gestureStart: { x: number; y: number; time: number } | null = null;
+  private gestureTarget: HTMLElement | null = null;
+  private useTouchGestures = false;
+
+  constructor(element: HTMLElement, config?: Partial<DrawerConfig>) {
+    this.element = element as HTMLElementWithDrawer;
+    this.config = { ...defaultConfig(), ...config };
+
+    this.handleShow = this.handleShow.bind(this);
+    this.handleHide = this.handleHide.bind(this);
+    this.show = this.show.bind(this);
+    this.hide = this.hide.bind(this);
+    this.handlePointerDown = this.handlePointerDown.bind(this);
+    this.handlePointerMove = this.handlePointerMove.bind(this);
+    this.handlePointerUp = this.handlePointerUp.bind(this);
+    this.handleTouchStart = this.handleTouchStart.bind(this);
+    this.handleTouchMove = this.handleTouchMove.bind(this);
+    this.handleTouchEnd = this.handleTouchEnd.bind(this);
+
+    this.element.ODS_Drawer = this;
+    this.init();
+  }
+
+  static getInstance(element: HTMLElement | null): Drawer | null {
+    if (!element) return null;
+    return (element as HTMLElementWithDrawer).ODS_Drawer || null;
+  }
+
+  handleShow(element: HTMLElement): void {
+    Modal.lockBody();
+    element.classList.add(this.config.classDrawerIsOpen);
+  }
+
+  handleHide(element: HTMLElement): void {
+    this.resetGesture();
+    Modal.unlockBody();
+    element.classList.remove(this.config.classDrawerIsOpen);
+  }
+
+  show(): void {
+    this.instance.show();
+  }
+
+  hide(): void {
+    this.instance.hide();
+  }
+
+  init(): void {
+    if (this.config.drawersRoot && !this.config.disablePortal) {
+      const container = document.querySelector(this.config.drawersRoot);
+      if (container) {
+        container.appendChild(this.element);
+      } else {
+        // biome-ignore lint/suspicious/noConsole: missing portal root is an integration diagnostic
+        console.warn(
+          `\`${this.config.drawersRoot}\` element is not present in DOM. Drawer will be placed inside its current parent. Please provide \`${this.config.drawersRoot}\` selector outside of the main content.`,
+        );
+      }
+    }
+
+    this.instance = new A11yDialog(this.element);
+    this.instance.on("show", (event: Event) => {
+      this.handleShow(event.currentTarget as HTMLElement);
+    });
+    this.instance.on("hide", (event: Event) => {
+      this.handleHide(event.currentTarget as HTMLElement);
+    });
+
+    const panel = this.element.querySelector<HTMLElement>(".drawer__panel");
+    const overlay = this.element.querySelector<HTMLElement>(".drawer__overlay");
+    this.useTouchGestures = navigator.maxTouchPoints > 0;
+    [panel, overlay].forEach((target) => {
+      if (this.useTouchGestures) {
+        target?.addEventListener("touchstart", this.handleTouchStart, {
+          passive: true,
+        });
+        target?.addEventListener("touchmove", this.handleTouchMove, {
+          passive: false,
+        });
+        target?.addEventListener("touchend", this.handleTouchEnd);
+        target?.addEventListener("touchcancel", this.handleTouchEnd);
+      } else {
+        target?.addEventListener("pointerdown", this.handlePointerDown);
+        target?.addEventListener("pointermove", this.handlePointerMove);
+        target?.addEventListener("pointerup", this.handlePointerUp);
+        target?.addEventListener("pointercancel", this.handlePointerUp);
+      }
+    });
+  }
+
+  private isDesktop(): boolean {
+    return window.innerWidth >= 768;
+  }
+
+  private handlePointerDown(event: PointerEvent): void {
+    if (event.isPrimary === false) return;
+    this.gestureStart = {
+      x: event.clientX,
+      y: event.clientY,
+      time: Date.now(),
+    };
+    this.gestureTarget = event.currentTarget as HTMLElement;
+    this.gestureTarget.setPointerCapture?.(event.pointerId);
+  }
+
+  private canStartTouchGesture(event: TouchEvent): boolean {
+    const touch = event.touches[0];
+    if (!touch) return false;
+
+    const body = this.element.querySelector<HTMLElement>(".drawer__body");
+    const target = event.target as Node | null;
+    if (body?.contains(target) && body.scrollTop > 0) return false;
+    return true;
+  }
+
+  private handleTouchStart(event: TouchEvent): void {
+    if (!this.canStartTouchGesture(event)) return;
+    const touch = event.touches[0];
+    this.gestureStart = {
+      x: touch.clientX,
+      y: touch.clientY,
+      time: Date.now(),
+    };
+  }
+
+  private handlePointerMove(event: PointerEvent): void {
+    if (!this.gestureStart) return;
+    const deltaX = event.clientX - this.gestureStart.x;
+    const deltaY = event.clientY - this.gestureStart.y;
+    const delta = this.isDesktop() ? deltaX : deltaY;
+    const crossAxisDelta = this.isDesktop() ? deltaY : deltaX;
+    if (delta <= 0 || Math.abs(crossAxisDelta) > Math.abs(delta)) {
+      this.resetGesture();
+      return;
+    }
+
+    event.preventDefault();
+    const property = this.isDesktop() ? "translateX" : "translateY";
+    const panel = this.element.querySelector<HTMLElement>(".drawer__panel");
+    if (panel) {
+      panel.style.transition = "none";
+      panel.style.transform = `${property}(${delta}px)`;
+    }
+  }
+
+  private handlePointerUp(event: PointerEvent): void {
+    if (!this.gestureStart) return;
+    const deltaX = event.clientX - this.gestureStart.x;
+    const deltaY = event.clientY - this.gestureStart.y;
+    const delta = this.isDesktop() ? deltaX : deltaY;
+    const crossAxisDelta = this.isDesktop() ? deltaY : deltaX;
+    const elapsed = Math.max(Date.now() - this.gestureStart.time, 1);
+    const velocity = delta / elapsed;
+    const shouldClose =
+      delta > 0 &&
+      Math.abs(crossAxisDelta) <= Math.abs(delta) &&
+      (delta >= SWIPE_DISTANCE || (delta >= 20 && velocity >= SWIPE_VELOCITY));
+
+    this.resetGesture();
+    if (shouldClose) this.hide();
+  }
+
+  private handleTouchMove(event: TouchEvent): void {
+    if (!this.gestureStart) return;
+    const touch = event.touches[0];
+    if (!touch) return;
+
+    const deltaX = touch.clientX - this.gestureStart.x;
+    const deltaY = touch.clientY - this.gestureStart.y;
+    const delta = this.isDesktop() ? deltaX : deltaY;
+    const crossAxisDelta = this.isDesktop() ? deltaY : deltaX;
+    if (delta <= 0 || Math.abs(crossAxisDelta) > Math.abs(delta)) {
+      this.resetGesture();
+      return;
+    }
+
+    event.preventDefault();
+    this.updateGestureTransform(delta);
+  }
+
+  private handleTouchEnd(event: TouchEvent): void {
+    if (!this.gestureStart) return;
+    const touch = event.changedTouches[0];
+    if (!touch) return;
+
+    this.finishGesture(touch.clientX, touch.clientY);
+  }
+
+  private updateGestureTransform(delta: number): void {
+    const property = this.isDesktop() ? "translateX" : "translateY";
+    const panel = this.element.querySelector<HTMLElement>(".drawer__panel");
+    if (panel) {
+      panel.style.transition = "none";
+      panel.style.transform = `${property}(${delta}px)`;
+    }
+  }
+
+  private finishGesture(clientX: number, clientY: number): void {
+    if (!this.gestureStart) return;
+    const deltaX = clientX - this.gestureStart.x;
+    const deltaY = clientY - this.gestureStart.y;
+    const delta = this.isDesktop() ? deltaX : deltaY;
+    const crossAxisDelta = this.isDesktop() ? deltaY : deltaX;
+    const elapsed = Math.max(Date.now() - this.gestureStart.time, 1);
+    const velocity = delta / elapsed;
+    const shouldClose =
+      delta > 0 &&
+      Math.abs(crossAxisDelta) <= Math.abs(delta) &&
+      (delta >= SWIPE_DISTANCE || (delta >= 20 && velocity >= SWIPE_VELOCITY));
+
+    this.resetGesture();
+    if (shouldClose) this.hide();
+  }
+
+  private resetGesture(): void {
+    const panel = this.element.querySelector<HTMLElement>(".drawer__panel");
+    if (panel) {
+      panel.style.transition = "";
+      panel.style.transform = "";
+    }
+    this.gestureStart = null;
+    this.gestureTarget = null;
+  }
+
+  destroy(): void {
+    if (!this.instance) return;
+
+    this.instance.hide();
+    const dialog = this.instance as any;
+    document.removeEventListener("click", dialog.handleTriggerClicks, true);
+    document.body.removeEventListener("focus", dialog.maintainFocus, true);
+    this.element.removeEventListener("keydown", dialog.bindKeypress, true);
+    const panel = this.element.querySelector<HTMLElement>(".drawer__panel");
+    const overlay = this.element.querySelector<HTMLElement>(".drawer__overlay");
+    [panel, overlay].forEach((target) => {
+      if (this.useTouchGestures) {
+        target?.removeEventListener("touchstart", this.handleTouchStart);
+        target?.removeEventListener("touchmove", this.handleTouchMove);
+        target?.removeEventListener("touchend", this.handleTouchEnd);
+        target?.removeEventListener("touchcancel", this.handleTouchEnd);
+      } else {
+        target?.removeEventListener("pointerdown", this.handlePointerDown);
+        target?.removeEventListener("pointermove", this.handlePointerMove);
+        target?.removeEventListener("pointerup", this.handlePointerUp);
+        target?.removeEventListener("pointercancel", this.handlePointerUp);
+      }
+    });
+    Modal.unlockBody();
+  }
+
+  update(): void {
+    this.destroy();
+    this.init();
+  }
+}