@abydahana/aksara-ui 1.2.2 → 1.2.4

package/dist/aksara.css

@@ -23681,7 +23681,8 @@ img,svg,video {
   background:var(--aksara-surface);
   border:1px solid var(--aksara-border-subtle);
   border-radius:var(--aksara-radius);
-  box-shadow:var(--aksara-shadow-md)
+  box-shadow:var(--aksara-shadow-md);
+  overscroll-behavior:contain
 }
 .dropdown-top .dropdown-menu,.dropdown-menu.dropdown-top {
   bottom:100%;
@@ -24270,6 +24271,28 @@ img,svg,video {
 .tab-panel {
   padding:1rem 0
 }
+.tabs-slider {
+  position:relative;
+  overflow:hidden;
+  width:100%
+}
+.tabs-slider-track {
+  display:flex;
+  flex-direction:row;
+  flex-wrap:nowrap;
+  width:100%;
+  will-change:transform;
+  touch-action:pan-y pinch-zoom;
+  transition:transform .3s cubic-bezier(.25,1,.5,1)
+}
+.tabs-slider-track > .tab-panel,.tabs-slider-track > .tab-pane {
+  flex:0 0 100%;
+  min-width:100%;
+  max-width:100%;
+  width:100%;
+  box-sizing:border-box;
+  display:block !important
+}
 .tab[aria-selected="true"] {
   background:var(--aksara-bg-subtle);
   color:var(--aksara-text-body)

package/dist/aksara.d.ts

@@ -114,7 +114,8 @@ export declare class Dropdown extends Component {
     isOpen: boolean;
     originalParent: Node | null;
     originalSibling: Node | null;
-    scrollHandler: (() => void) | null;
+    scrollHandler: ((event?: Event) => void) | null;
+    wheelHandler: ((event: WheelEvent) => void) | null;
     placement: string;
     container: string | HTMLElement;
     offset: number;
@@ -188,7 +189,9 @@ export declare class Tabs extends Component {
     constructor(element: HTMLElement, options?: TabsOptions);
     updateOptions(options?: TabsOptions): this;
     activateInitial(): void;
-    show(tab: HTMLElement): this;
+    getSliderTrack(): HTMLElement | null;
+    bindSliderGestures(): void;
+    show(tab: HTMLElement, animate?: boolean): this;
 }
 export declare class Toast extends Component {
     static componentName: string;

package/dist/aksara.esm.js

@@ -326,6 +326,7 @@ export class Dropdown extends Component {
     originalParent;
     originalSibling;
     scrollHandler;
+    wheelHandler;
     placement;
     container;
     offset;
@@ -372,6 +373,7 @@ export class Dropdown extends Component {
         this.originalParent = null;
         this.originalSibling = null;
         this.scrollHandler = null;
+        this.wheelHandler = null;
         this.updateOptions(options);
         if (this.trigger?.matches(".btn-sm, .input-sm, .form-control-sm, .form-select-sm") ||
             this.element.classList.contains("dropdown-sm")) {
@@ -427,9 +429,14 @@ export class Dropdown extends Component {
     position() {
         if (!this.menu || !this.isOpen || !this.trigger)
             return;
+        if (!this.trigger.isConnected || !document.body.contains(this.trigger)) {
+            this.hide();
+            return;
+        }
         this.menu.style.display = "block";
         this.menu.style.position = "absolute";
         this.menu.style.zIndex = "1000";
+        this.menu.style.overscrollBehavior = "contain";
         const triggerRect = this.trigger.getBoundingClientRect();
         if (this.trigger.classList.contains("form-select") ||
             this.element.classList.contains("variant-form-select") ||
@@ -441,10 +448,10 @@ export class Dropdown extends Component {
         const gap = this.offset;
         let top;
         let left;
+        const spaceBelow = window.innerHeight - triggerRect.bottom;
+        const spaceAbove = triggerRect.top;
         let placement = this.placement;
         if (placement === "auto") {
-            const spaceBelow = window.innerHeight - triggerRect.bottom;
-            const spaceAbove = triggerRect.top;
             placement = spaceBelow >= menuRect.height || spaceBelow >= spaceAbove ? "bottom" : "top";
         }
         this.menu.classList.remove("dropdown-top", "dropdown-bottom", "dropdown-start", "dropdown-end");
@@ -468,6 +475,11 @@ export class Dropdown extends Component {
         }
         const viewportWidth = window.innerWidth;
         left = Math.max(8, Math.min(left, viewportWidth - menuRect.width - 8));
+        const availableHeight = Math.max(120, Math.floor(placement === "top" ? spaceAbove - gap - 16 : spaceBelow - gap - 16));
+        if (this.menu.scrollHeight > availableHeight || availableHeight < 300) {
+            this.menu.style.maxHeight = `${availableHeight}px`;
+            this.menu.style.overflowY = "auto";
+        }
         this.menu.style.top = `${top + window.scrollY}px`;
         this.menu.style.left = `${left + window.scrollX}px`;
         this.menu.style.bottom = "auto";
@@ -490,9 +502,30 @@ export class Dropdown extends Component {
         this.menu.classList.add("dropdown-open");
         this.trigger?.setAttribute("aria-expanded", "true");
         this.position();
-        this.scrollHandler = () => this.position();
-        window.addEventListener("scroll", this.scrollHandler, { passive: true });
+        this.scrollHandler = (event) => {
+            if ((this.menu && (this.menu.matches(":hover") || this.menu.contains(document.activeElement))) ||
+                (this.trigger && this.trigger.matches(":hover")) ||
+                (event?.target && this.menu && (this.menu === event.target || this.menu.contains(event.target)))) {
+                return;
+            }
+            this.position();
+        };
+        window.addEventListener("scroll", this.scrollHandler, { passive: true, capture: true });
         window.addEventListener("resize", this.scrollHandler);
+        this.wheelHandler = (e) => {
+            if (!this.menu)
+                return;
+            const { deltaY } = e;
+            if (deltaY === 0)
+                return;
+            const atTop = this.menu.scrollTop <= 0;
+            const atBottom = this.menu.scrollTop + this.menu.clientHeight >= this.menu.scrollHeight - 1;
+            if ((deltaY < 0 && atTop) || (deltaY > 0 && atBottom) || this.menu.scrollHeight <= this.menu.clientHeight) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+        this.menu.addEventListener("wheel", this.wheelHandler, { passive: false });
         emit(this.element, "dropdown:show", { instance: this });
         return this;
     }
@@ -501,10 +534,14 @@ export class Dropdown extends Component {
             return this;
         this.isOpen = false;
         if (this.scrollHandler) {
-            window.removeEventListener("scroll", this.scrollHandler);
+            window.removeEventListener("scroll", this.scrollHandler, { capture: true });
             window.removeEventListener("resize", this.scrollHandler);
             this.scrollHandler = null;
         }
+        if (this.wheelHandler && this.menu) {
+            this.menu.removeEventListener("wheel", this.wheelHandler);
+            this.wheelHandler = null;
+        }
         this.menu.classList.remove("dropdown-open", "dropdown-top", "dropdown-bottom", "dropdown-start", "dropdown-end");
         this.trigger?.setAttribute("aria-expanded", "false");
         if (this.originalParent) {
@@ -953,6 +990,7 @@ export class Tabs extends Component {
                 this.show(next);
             }
         });
+        this.bindSliderGestures();
         this.activateInitial();
     }
     updateOptions(options = {}) {
@@ -992,29 +1030,128 @@ export class Tabs extends Component {
         if (initial)
             this.show(initial);
     }
-    show(tab) {
+    getSliderTrack() {
+        const wrapper = this.element.closest(".tabs-wrapper") ||
+            this.element.closest(".feed-main-col, main, .page-container, [data-tabs-wrapper]") ||
+            this.element.parentElement;
+        return (wrapper?.querySelector(".tabs-slider-track, [data-tabs-slider]") ||
+            document.querySelector(".tabs-slider-track, [data-tabs-slider]"));
+    }
+    bindSliderGestures() {
+        const track = this.getSliderTrack();
+        if (!track || track.__sliderGesturesBound)
+            return;
+        track.__sliderGesturesBound = true;
+        let startX = 0;
+        let startY = 0;
+        let deltaX = 0;
+        let deltaY = 0;
+        let isSwiping = false;
+        let isVertical = false;
+        track.addEventListener("touchstart", (e) => {
+            if (e.touches.length !== 1)
+                return;
+            const target = e.target;
+            if (target?.closest("input, textarea, select, [contenteditable='true'], video, audio, .carousel, .bento-carousel, .media-grid-scroll, .map-canvas-container, [data-prevent-swipe]")) {
+                return;
+            }
+            const touch = e.touches[0];
+            startX = touch.clientX;
+            startY = touch.clientY;
+            deltaX = 0;
+            deltaY = 0;
+            isSwiping = false;
+            isVertical = false;
+        }, { passive: true });
+        track.addEventListener("touchmove", (e) => {
+            if (e.touches.length !== 1 || isVertical)
+                return;
+            const touch = e.touches[0];
+            deltaX = touch.clientX - startX;
+            deltaY = touch.clientY - startY;
+            if (!isSwiping) {
+                if (Math.abs(deltaY) > 8 && Math.abs(deltaY) > Math.abs(deltaX)) {
+                    isVertical = true;
+                    return;
+                }
+                if (Math.abs(deltaX) > 8 && Math.abs(deltaX) > Math.abs(deltaY)) {
+                    isSwiping = true;
+                }
+            }
+            if (isSwiping) {
+                if (e.cancelable)
+                    e.preventDefault();
+                const tabs = Array.from(this.element.querySelectorAll(this.tabSelector));
+                const maxIdx = Math.max(0, tabs.length - 1);
+                let currentDelta = deltaX;
+                const currentIdx = tabs.findIndex((t) => t.classList.contains("active"));
+                const safeIdx = currentIdx >= 0 ? currentIdx : 0;
+                if ((safeIdx === 0 && currentDelta > 0) || (safeIdx === maxIdx && currentDelta < 0)) {
+                    currentDelta = currentDelta * 0.3;
+                }
+                track.style.transition = "none";
+                track.style.transform = `translate3d(calc(-${safeIdx * 100}% + ${currentDelta}px), 0, 0)`;
+            }
+        }, { passive: false });
+        const onTouchEnd = () => {
+            if (!isSwiping)
+                return;
+            isSwiping = false;
+            const tabs = Array.from(this.element.querySelectorAll(this.tabSelector));
+            const maxIdx = Math.max(0, tabs.length - 1);
+            const currentIdx = tabs.findIndex((t) => t.classList.contains("active"));
+            const safeIdx = currentIdx >= 0 ? currentIdx : 0;
+            track.style.transition = "transform 0.3s cubic-bezier(0.25, 1, 0.5, 1)";
+            if (deltaX < -50 && safeIdx < maxIdx) {
+                this.show(tabs[safeIdx + 1]);
+            }
+            else if (deltaX > 50 && safeIdx > 0) {
+                this.show(tabs[safeIdx - 1]);
+            }
+            else {
+                track.style.transform = `translate3d(-${safeIdx * 100}%, 0, 0)`;
+            }
+        };
+        track.addEventListener("touchend", onTouchEnd, { passive: true });
+        track.addEventListener("touchcancel", onTouchEnd, { passive: true });
+    }
+    show(tab, animate = true) {
         const selector = tab.getAttribute("data-tabs");
         const panel = selector ? document.querySelector(selector) : null;
         if (!panel)
             return this;
-        this.element.querySelectorAll(this.tabSelector).forEach((item) => {
+        const tabs = Array.from(this.element.querySelectorAll(this.tabSelector));
+        const targetIndex = tabs.indexOf(tab);
+        const track = this.getSliderTrack();
+        const isSlider = Boolean(track && track.contains(panel));
+        tabs.forEach((item) => {
             const selected = item === tab;
             item.setAttribute("role", item.getAttribute("role") || "tab");
             item.setAttribute("aria-selected", String(selected));
+            item.classList.toggle("active", selected);
             item.tabIndex = selected ? 0 : -1;
             const targetSelector = item.getAttribute("data-tabs");
             const target = targetSelector ? document.querySelector(targetSelector) : null;
-            if (target)
-                target.hidden = !selected;
+            if (target) {
+                target.classList.toggle("active", selected);
+                if (!isSlider) {
+                    target.hidden = !selected;
+                }
+            }
         });
-        if (this.panelSelector) {
+        if (this.panelSelector && !isSlider) {
             document.querySelectorAll(this.panelSelector).forEach((item) => {
                 if (item !== panel)
                     item.hidden = true;
             });
         }
         panel.setAttribute("role", panel.getAttribute("role") || "tabpanel");
-        emit(this.element, "tabs:show", { tab, panel, instance: this });
+        if (isSlider && track && targetIndex >= 0) {
+            track.style.transition = animate ? "transform 0.3s cubic-bezier(0.25, 1, 0.5, 1)" : "none";
+            track.style.transform = `translate3d(-${targetIndex * 100}%, 0, 0)`;
+        }
+        tab.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+        emit(this.element, "tabs:show", { tab, panel, index: targetIndex, instance: this });
         return this;
     }
 }

package/dist/aksara.js

@@ -327,6 +327,7 @@ class Dropdown extends Component {
     originalParent;
     originalSibling;
     scrollHandler;
+    wheelHandler;
     placement;
     container;
     offset;
@@ -373,6 +374,7 @@ class Dropdown extends Component {
         this.originalParent = null;
         this.originalSibling = null;
         this.scrollHandler = null;
+        this.wheelHandler = null;
         this.updateOptions(options);
         if (this.trigger?.matches(".btn-sm, .input-sm, .form-control-sm, .form-select-sm") ||
             this.element.classList.contains("dropdown-sm")) {
@@ -428,9 +430,14 @@ class Dropdown extends Component {
     position() {
         if (!this.menu || !this.isOpen || !this.trigger)
             return;
+        if (!this.trigger.isConnected || !document.body.contains(this.trigger)) {
+            this.hide();
+            return;
+        }
         this.menu.style.display = "block";
         this.menu.style.position = "absolute";
         this.menu.style.zIndex = "1000";
+        this.menu.style.overscrollBehavior = "contain";
         const triggerRect = this.trigger.getBoundingClientRect();
         if (this.trigger.classList.contains("form-select") ||
             this.element.classList.contains("variant-form-select") ||
@@ -442,10 +449,10 @@ class Dropdown extends Component {
         const gap = this.offset;
         let top;
         let left;
+        const spaceBelow = window.innerHeight - triggerRect.bottom;
+        const spaceAbove = triggerRect.top;
         let placement = this.placement;
         if (placement === "auto") {
-            const spaceBelow = window.innerHeight - triggerRect.bottom;
-            const spaceAbove = triggerRect.top;
             placement = spaceBelow >= menuRect.height || spaceBelow >= spaceAbove ? "bottom" : "top";
         }
         this.menu.classList.remove("dropdown-top", "dropdown-bottom", "dropdown-start", "dropdown-end");
@@ -469,6 +476,11 @@ class Dropdown extends Component {
         }
         const viewportWidth = window.innerWidth;
         left = Math.max(8, Math.min(left, viewportWidth - menuRect.width - 8));
+        const availableHeight = Math.max(120, Math.floor(placement === "top" ? spaceAbove - gap - 16 : spaceBelow - gap - 16));
+        if (this.menu.scrollHeight > availableHeight || availableHeight < 300) {
+            this.menu.style.maxHeight = `${availableHeight}px`;
+            this.menu.style.overflowY = "auto";
+        }
         this.menu.style.top = `${top + window.scrollY}px`;
         this.menu.style.left = `${left + window.scrollX}px`;
         this.menu.style.bottom = "auto";
@@ -491,9 +503,30 @@ class Dropdown extends Component {
         this.menu.classList.add("dropdown-open");
         this.trigger?.setAttribute("aria-expanded", "true");
         this.position();
-        this.scrollHandler = () => this.position();
-        window.addEventListener("scroll", this.scrollHandler, { passive: true });
+        this.scrollHandler = (event) => {
+            if ((this.menu && (this.menu.matches(":hover") || this.menu.contains(document.activeElement))) ||
+                (this.trigger && this.trigger.matches(":hover")) ||
+                (event?.target && this.menu && (this.menu === event.target || this.menu.contains(event.target)))) {
+                return;
+            }
+            this.position();
+        };
+        window.addEventListener("scroll", this.scrollHandler, { passive: true, capture: true });
         window.addEventListener("resize", this.scrollHandler);
+        this.wheelHandler = (e) => {
+            if (!this.menu)
+                return;
+            const { deltaY } = e;
+            if (deltaY === 0)
+                return;
+            const atTop = this.menu.scrollTop <= 0;
+            const atBottom = this.menu.scrollTop + this.menu.clientHeight >= this.menu.scrollHeight - 1;
+            if ((deltaY < 0 && atTop) || (deltaY > 0 && atBottom) || this.menu.scrollHeight <= this.menu.clientHeight) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+        this.menu.addEventListener("wheel", this.wheelHandler, { passive: false });
         emit(this.element, "dropdown:show", { instance: this });
         return this;
     }
@@ -502,10 +535,14 @@ class Dropdown extends Component {
             return this;
         this.isOpen = false;
         if (this.scrollHandler) {
-            window.removeEventListener("scroll", this.scrollHandler);
+            window.removeEventListener("scroll", this.scrollHandler, { capture: true });
             window.removeEventListener("resize", this.scrollHandler);
             this.scrollHandler = null;
         }
+        if (this.wheelHandler && this.menu) {
+            this.menu.removeEventListener("wheel", this.wheelHandler);
+            this.wheelHandler = null;
+        }
         this.menu.classList.remove("dropdown-open", "dropdown-top", "dropdown-bottom", "dropdown-start", "dropdown-end");
         this.trigger?.setAttribute("aria-expanded", "false");
         if (this.originalParent) {
@@ -954,6 +991,7 @@ class Tabs extends Component {
                 this.show(next);
             }
         });
+        this.bindSliderGestures();
         this.activateInitial();
     }
     updateOptions(options = {}) {
@@ -993,29 +1031,128 @@ class Tabs extends Component {
         if (initial)
             this.show(initial);
     }
-    show(tab) {
+    getSliderTrack() {
+        const wrapper = this.element.closest(".tabs-wrapper") ||
+            this.element.closest(".feed-main-col, main, .page-container, [data-tabs-wrapper]") ||
+            this.element.parentElement;
+        return (wrapper?.querySelector(".tabs-slider-track, [data-tabs-slider]") ||
+            document.querySelector(".tabs-slider-track, [data-tabs-slider]"));
+    }
+    bindSliderGestures() {
+        const track = this.getSliderTrack();
+        if (!track || track.__sliderGesturesBound)
+            return;
+        track.__sliderGesturesBound = true;
+        let startX = 0;
+        let startY = 0;
+        let deltaX = 0;
+        let deltaY = 0;
+        let isSwiping = false;
+        let isVertical = false;
+        track.addEventListener("touchstart", (e) => {
+            if (e.touches.length !== 1)
+                return;
+            const target = e.target;
+            if (target?.closest("input, textarea, select, [contenteditable='true'], video, audio, .carousel, .bento-carousel, .media-grid-scroll, .map-canvas-container, [data-prevent-swipe]")) {
+                return;
+            }
+            const touch = e.touches[0];
+            startX = touch.clientX;
+            startY = touch.clientY;
+            deltaX = 0;
+            deltaY = 0;
+            isSwiping = false;
+            isVertical = false;
+        }, { passive: true });
+        track.addEventListener("touchmove", (e) => {
+            if (e.touches.length !== 1 || isVertical)
+                return;
+            const touch = e.touches[0];
+            deltaX = touch.clientX - startX;
+            deltaY = touch.clientY - startY;
+            if (!isSwiping) {
+                if (Math.abs(deltaY) > 8 && Math.abs(deltaY) > Math.abs(deltaX)) {
+                    isVertical = true;
+                    return;
+                }
+                if (Math.abs(deltaX) > 8 && Math.abs(deltaX) > Math.abs(deltaY)) {
+                    isSwiping = true;
+                }
+            }
+            if (isSwiping) {
+                if (e.cancelable)
+                    e.preventDefault();
+                const tabs = Array.from(this.element.querySelectorAll(this.tabSelector));
+                const maxIdx = Math.max(0, tabs.length - 1);
+                let currentDelta = deltaX;
+                const currentIdx = tabs.findIndex((t) => t.classList.contains("active"));
+                const safeIdx = currentIdx >= 0 ? currentIdx : 0;
+                if ((safeIdx === 0 && currentDelta > 0) || (safeIdx === maxIdx && currentDelta < 0)) {
+                    currentDelta = currentDelta * 0.3;
+                }
+                track.style.transition = "none";
+                track.style.transform = `translate3d(calc(-${safeIdx * 100}% + ${currentDelta}px), 0, 0)`;
+            }
+        }, { passive: false });
+        const onTouchEnd = () => {
+            if (!isSwiping)
+                return;
+            isSwiping = false;
+            const tabs = Array.from(this.element.querySelectorAll(this.tabSelector));
+            const maxIdx = Math.max(0, tabs.length - 1);
+            const currentIdx = tabs.findIndex((t) => t.classList.contains("active"));
+            const safeIdx = currentIdx >= 0 ? currentIdx : 0;
+            track.style.transition = "transform 0.3s cubic-bezier(0.25, 1, 0.5, 1)";
+            if (deltaX < -50 && safeIdx < maxIdx) {
+                this.show(tabs[safeIdx + 1]);
+            }
+            else if (deltaX > 50 && safeIdx > 0) {
+                this.show(tabs[safeIdx - 1]);
+            }
+            else {
+                track.style.transform = `translate3d(-${safeIdx * 100}%, 0, 0)`;
+            }
+        };
+        track.addEventListener("touchend", onTouchEnd, { passive: true });
+        track.addEventListener("touchcancel", onTouchEnd, { passive: true });
+    }
+    show(tab, animate = true) {
         const selector = tab.getAttribute("data-tabs");
         const panel = selector ? document.querySelector(selector) : null;
         if (!panel)
             return this;
-        this.element.querySelectorAll(this.tabSelector).forEach((item) => {
+        const tabs = Array.from(this.element.querySelectorAll(this.tabSelector));
+        const targetIndex = tabs.indexOf(tab);
+        const track = this.getSliderTrack();
+        const isSlider = Boolean(track && track.contains(panel));
+        tabs.forEach((item) => {
             const selected = item === tab;
             item.setAttribute("role", item.getAttribute("role") || "tab");
             item.setAttribute("aria-selected", String(selected));
+            item.classList.toggle("active", selected);
             item.tabIndex = selected ? 0 : -1;
             const targetSelector = item.getAttribute("data-tabs");
             const target = targetSelector ? document.querySelector(targetSelector) : null;
-            if (target)
-                target.hidden = !selected;
+            if (target) {
+                target.classList.toggle("active", selected);
+                if (!isSlider) {
+                    target.hidden = !selected;
+                }
+            }
         });
-        if (this.panelSelector) {
+        if (this.panelSelector && !isSlider) {
             document.querySelectorAll(this.panelSelector).forEach((item) => {
                 if (item !== panel)
                     item.hidden = true;
             });
         }
         panel.setAttribute("role", panel.getAttribute("role") || "tabpanel");
-        emit(this.element, "tabs:show", { tab, panel, instance: this });
+        if (isSlider && track && targetIndex >= 0) {
+            track.style.transition = animate ? "transform 0.3s cubic-bezier(0.25, 1, 0.5, 1)" : "none";
+            track.style.transform = `translate3d(-${targetIndex * 100}%, 0, 0)`;
+        }
+        tab.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+        emit(this.element, "tabs:show", { tab, panel, index: targetIndex, instance: this });
         return this;
     }
 }