vueless 1.4.12-beta.6 → 1.4.12-beta.8

package/composables/useUI.ts

@@ -228,6 +228,16 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
     const keysAttrs: KeysAttrs<T> = {};
     const attrsRefs: Record<string, Ref<KeyAttrs>> = {};
 
+    /**
+     * Structural signature per key. The watcher below fires on any config/prop/class
+     * change and would otherwise re-mint every key's attrs object — even keys whose
+     * classes are identical — invalidating downstream reactive readers (e.g. every
+     * body row of a table on an unrelated sticky toggle). We skip the `.value` write
+     * when the new object is structurally equal to the last one, so the ref keeps its
+     * identity and dependents are not re-rendered.
+     */
+    const attrsSignatures: Record<string, string> = {};
+
     for (const key in config.value) {
       if (isSystemKey(key)) continue;
 
@@ -266,12 +276,20 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
           /* Delete value key to prevent v-model overwrite. */
           delete commonAttrs.value;
 
-          attrsRefs[key].value = {
+          const nextValue: KeyAttrs = {
             ...commonAttrs,
             class: cx([...data.extendsClasses, classes, commonAttrs.class]),
             config: data.mergedNestedConfig,
             ...data.mergedDefaults,
           };
+
+          /* Keep the previous ref identity when nothing changed — see attrsSignatures. */
+          const signature = JSON.stringify(nextValue);
+
+          if (attrsSignatures[key] === signature) continue;
+
+          attrsSignatures[key] = signature;
+          attrsRefs[key].value = nextValue;
         }
       },
       { immediate: true },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.6",
+  "version": "1.4.12-beta.8",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.data-table/UTable.vue

@@ -1064,7 +1064,7 @@ const {
   skeletonCheckboxAttrs,
 } = useUI<Config>(defaultConfig, mutatedProps);
 
-/* Plain object — inner refs are already reactive. */
+/* Plain object — inner refs are already reactive and identity-stable (see useUI). */
 const tableRowAttrs = {
   bodyCellContentAttrs,
   bodyCellCheckboxAttrs,
@@ -1111,8 +1111,40 @@ function renderDateDividerRow(row: FlatRow, rowIndex: number): VNode | null {
   ]);
 }
 
+/**
+ * Per-row VNode memo cache. Toggling one checkbox invalidates the `selectedRowIds`
+ * computed, which re-runs the body render function. Without memoization every row's
+ * VNode would be rebuilt and diffed on each toggle (200+ rows → visible lag). We cache
+ * each row's VNode keyed by row id and only rebuild it when an input that actually
+ * affects that row changes — so an unrelated row keeps the same VNode reference and
+ * Vue skips it entirely during patch.
+ */
+const rowVNodeCache = new Map<RowId, { signature: string; row: FlatRow; vnode: VNode }>();
+
+function getRowSignature(row: FlatRow, rowIndex: number): string {
+  return [
+    rowIndex,
+    Number(isRowSelected(row)),
+    Number(expandedRowsSet.value.has(row.id)),
+    Number(isRowVisible(row)),
+    props.selectable ? 1 : 0,
+    props.search || "",
+    getRowActiveSearchMatchColumn(row) || "",
+    [...(getRowSearchMatchColumns(row) || [])].join(","),
+  ].join("|");
+}
+
 function renderTableRow(row: FlatRow, rowIndex: number): VNode {
-  return h(
+  const signature = getRowSignature(row, rowIndex);
+  const cached = rowVNodeCache.get(row.id);
+
+  // `row` identity guards against stale data: `flatTableRows` yields fresh row
+  // objects whenever `props.rows` changes, so a new reference means new cell data.
+  if (cached && cached.row === row && cached.signature === signature) {
+    return cached.vnode;
+  }
+
+  const vnode = h(
     UTableRow,
     {
       key: row.id,
@@ -1138,13 +1170,48 @@ function renderTableRow(row: FlatRow, rowIndex: number): VNode {
     } as unknown as UTableRowProps,
     slots,
   );
+
+  rowVNodeCache.set(row.id, { signature, row, vnode });
+
+  return vnode;
 }
 
+/* Column layout / config changes affect every row — invalidate the whole cache. */
+watch(
+  [
+    normalizedColumns,
+    config,
+    columnPositions,
+    () => props.textEllipsis,
+    () => props.emptyCellLabel,
+  ],
+  () => rowVNodeCache.clear(),
+);
+
+/* Drop cache entries for rows that no longer exist (filters, pagination reset). */
+watch(flatTableRows, (rows) => {
+  const liveIds = new Set(rows.map((row) => row.id));
+
+  for (const id of rowVNodeCache.keys()) {
+    if (!liveIds.has(id)) rowVNodeCache.delete(id);
+  }
+});
+
 function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
   return [renderDateDividerRow(row, rowIndex), renderTableRow(row, rowIndex)].filter(
     Boolean,
   ) as VNode[];
 }
+
+/**
+ * Stable functional component for the body rows. Defined once so its type
+ * identity never changes across parent re-renders — a previous inline `:is`
+ * arrow created a new type on every render, forcing Vue to unmount and rebuild
+ * the entire tbody (e.g. on a sticky-header toggle). Reading `renderedRows`
+ * through the closure keeps it reactive while row keys drive reconciliation.
+ */
+const BodyRows = () =>
+  renderedRows.value.map((row, rowIndex) => renderRowTemplate(row, rowIndex)).flat();
 </script>
 
 <template>
@@ -1362,9 +1429,7 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
             />
           </tr>
 
-          <component
-            :is="() => renderedRows.map((row, rowIndex) => renderRowTemplate(row, rowIndex)).flat()"
-          />
+          <component :is="BodyRows" />
 
           <tr v-if="props.virtualScroll && virtualScroll.bottomSpacerHeight.value > 0">
             <td

package/ui.navigation-tab/UTab.vue

@@ -13,12 +13,13 @@ import type { Props as UTabsProps, SetUTabsSelectedItem } from "../ui.navigation
 
 defineOptions({ inheritAttrs: false });
 
-const setUTabsSelectedItem = inject<SetUTabsSelectedItem>("setUTabsSelectedItem");
-const getUTabsSelectedItem = inject("getUTabsSelectedItem");
-const getUTabsScrollable = inject<UTabsProps["scrollable"]>("getUTabsScrollable");
-const getUTabsSquare = inject<UTabsProps["square"]>("getUTabsSquare");
-const getUTabsBlock = inject<UTabsProps["block"]>("getUTabsBlock");
+const setUTabsSelectedItem = inject<SetUTabsSelectedItem | null>("setUTabsSelectedItem", null);
+const getUTabsSelectedItem = inject("getUTabsSelectedItem", null);
+const getUTabsScrollable = inject<UTabsProps["scrollable"]>("getUTabsScrollable", false);
+const getUTabsSquare = inject<UTabsProps["square"]>("getUTabsSquare", false);
+const getUTabsBlock = inject<UTabsProps["block"]>("getUTabsBlock", false);
 const getUTabsSize = inject<UTabsProps["size"]>("getUTabsSize", "md");
+const getUTabsPreventTabClick = inject<() => boolean>("getUTabsPreventTabClick", () => false);
 
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
@@ -34,12 +35,16 @@ const size = computed(() => toValue(getUTabsSize));
 const block = computed(() => toValue(getUTabsBlock));
 const square = computed(() => toValue(getUTabsSquare));
 const scrollable = computed(() => toValue(getUTabsScrollable));
-const isActive = computed(() => toValue(getUTabsSelectedItem) === props.value);
+const isActive = computed(() => {
+  if (!setUTabsSelectedItem) return true;
+
+  return toValue(getUTabsSelectedItem) === props.value;
+});
 
 async function onClickSetValue() {
-  if (!props.disabled && setUTabsSelectedItem) {
-    setUTabsSelectedItem(props.value ?? "");
-  }
+  if (toValue(getUTabsPreventTabClick) || props.disabled || !setUTabsSelectedItem) return;
+
+  setUTabsSelectedItem(props.value ?? "");
 }
 
 defineExpose({

package/ui.navigation-tab/tests/UTab.test.ts

@@ -149,6 +149,20 @@ describe("UTab.vue", () => {
 
   // Active state tests
   describe("Active state", () => {
+    it("Active – applies active classes when rendered without UTabs", () => {
+      const expectedClass = "border-primary";
+
+      const component = mount(UTab, {
+        props: {
+          label: "Tab Item",
+        },
+      });
+
+      const button = component.findComponent(UButton);
+
+      expect(button.attributes("class")).toContain(expectedClass);
+    });
+
     it("Active – applies active classes when tab is selected", () => {
       const value = "tab1";
       const expectedClass = "border-primary";

package/ui.navigation-tabs/UTabs.vue

@@ -7,7 +7,7 @@ import { getDefaults } from "../utils/ui";
 import UTab from "../ui.navigation-tab/UTab.vue";
 import UButton from "../ui.button/UButton.vue";
 
-import { COMPONENT_NAME, SCROLL_OFFSET } from "./constants";
+import { COMPONENT_NAME, SCROLL_OFFSET, DRAG_THRESHOLD, DRAG_CLICK_SUPPRESS_MS } from "./constants";
 import defaultConfig from "./config";
 
 import type { Props, Config } from "./types";
@@ -37,6 +37,15 @@ const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const scrollContainerRef = useTemplateRef<HTMLDivElement | null>("scroll-container");
 const showLeftArrow = ref(false);
 const showRightArrow = ref(false);
+const isDragging = ref(false);
+const preventTabClick = ref(false);
+
+let isPointerDown = false;
+let dragAxis: "x" | "y" | null = null;
+let startX = 0;
+let startY = 0;
+let startScrollLeft = 0;
+let suppressClickTimer: ReturnType<typeof setTimeout> | null = null;
 
 function checkScroll() {
   if (!scrollContainerRef.value) return;
@@ -59,17 +68,148 @@ function scrollNext() {
   scrollContainerRef.value.scrollBy({ left: SCROLL_OFFSET, behavior: "smooth" });
 }
 
+function isScrollableOverflow() {
+  if (!scrollContainerRef.value) return false;
+
+  return scrollContainerRef.value.scrollWidth > scrollContainerRef.value.clientWidth;
+}
+
+function clearSuppressClickTimer() {
+  if (!suppressClickTimer) return;
+
+  clearTimeout(suppressClickTimer);
+  suppressClickTimer = null;
+}
+
+function stopDragListeners() {
+  document.removeEventListener("pointermove", onPointerMove);
+  document.removeEventListener("pointerup", onPointerUp);
+  document.removeEventListener("pointercancel", onPointerUp);
+}
+
+function resetDragState() {
+  isPointerDown = false;
+  dragAxis = null;
+  isDragging.value = false;
+  document.body.style.cursor = "";
+  document.body.style.userSelect = "";
+}
+
+function suppressTabClick() {
+  preventTabClick.value = true;
+  clearSuppressClickTimer();
+
+  suppressClickTimer = setTimeout(() => {
+    preventTabClick.value = false;
+    suppressClickTimer = null;
+  }, DRAG_CLICK_SUPPRESS_MS);
+}
+
+function onPointerDown(event: PointerEvent) {
+  if (!props.scrollable || event.button > 0 || !isScrollableOverflow()) return;
+
+  isPointerDown = true;
+  dragAxis = null;
+  startX = event.clientX;
+  startY = event.clientY;
+  startScrollLeft = scrollContainerRef.value?.scrollLeft ?? 0;
+
+  document.addEventListener("pointermove", onPointerMove, { passive: false });
+  document.addEventListener("pointerup", onPointerUp);
+  document.addEventListener("pointercancel", onPointerUp);
+}
+
+function onPointerMove(event: PointerEvent) {
+  if (!isPointerDown || !scrollContainerRef.value) return;
+
+  if (event.pointerType === "mouse" && event.buttons === 0) {
+    onPointerUp();
+
+    return;
+  }
+
+  const deltaX = event.clientX - startX;
+  const deltaY = event.clientY - startY;
+
+  if (!dragAxis) {
+    if (Math.abs(deltaX) < DRAG_THRESHOLD && Math.abs(deltaY) < DRAG_THRESHOLD) return;
+
+    dragAxis = Math.abs(deltaX) >= Math.abs(deltaY) ? "x" : "y";
+
+    if (dragAxis === "y") {
+      stopDragListeners();
+      resetDragState();
+
+      return;
+    }
+
+    isDragging.value = true;
+    document.body.style.cursor = "move";
+    document.body.style.userSelect = "none";
+  }
+
+  if (dragAxis !== "x") return;
+
+  event.preventDefault();
+  scrollContainerRef.value.scrollLeft = startScrollLeft - deltaX;
+}
+
+function onPointerUp() {
+  const wasDragging = isDragging.value;
+
+  stopDragListeners();
+  resetDragState();
+
+  if (wasDragging) {
+    suppressTabClick();
+  }
+}
+
+function onClickCapture(event: MouseEvent) {
+  if (!preventTabClick.value) return;
+
+  event.preventDefault();
+  event.stopPropagation();
+  preventTabClick.value = false;
+  clearSuppressClickTimer();
+}
+
+function getHorizontalWheelDelta(event: WheelEvent) {
+  if (Math.abs(event.deltaX) >= Math.abs(event.deltaY)) {
+    return event.deltaX;
+  }
+
+  return event.shiftKey ? event.deltaY : 0;
+}
+
+function onWheel(event: WheelEvent) {
+  if (!props.scrollable || !scrollContainerRef.value || !isScrollableOverflow()) return;
+
+  const deltaX = getHorizontalWheelDelta(event);
+
+  if (!deltaX) return;
+
+  event.preventDefault();
+  scrollContainerRef.value.scrollLeft += deltaX;
+}
+
 onMounted(() => {
   if (scrollContainerRef.value) {
     scrollContainerRef.value.addEventListener("scroll", checkScroll, { passive: true });
+    scrollContainerRef.value.addEventListener("wheel", onWheel, { passive: false });
 
     checkScroll();
   }
 });
 
 onUnmounted(() => {
+  stopDragListeners();
+  resetDragState();
+  clearSuppressClickTimer();
+
   if (scrollContainerRef.value) {
     scrollContainerRef.value.removeEventListener("scroll", checkScroll);
+    scrollContainerRef.value.removeEventListener("wheel", onWheel);
   }
 });
 
@@ -79,6 +219,7 @@ provide("getUTabsSquare", () => props.square);
 provide("getUTabsScrollable", () => props.scrollable);
 provide("getUTabsSelectedItem", () => selectedItem.value);
 provide("setUTabsSelectedItem", (value: string) => (selectedItem.value = value));
+provide("getUTabsPreventTabClick", () => preventTabClick.value);
 
 defineExpose({
   /**
@@ -97,6 +238,7 @@ const {
   config,
   wrapperAttrs,
   tabsAttrs,
+  dragAttrs,
   tabAttrs,
   prevAttrs,
   nextAttrs,
@@ -117,7 +259,15 @@ const {
       </slot>
     </div>
 
-    <div ref="scroll-container" v-bind="tabsAttrs" :data-test="getDataTest()" @scroll="checkScroll">
+    <div
+      ref="scroll-container"
+      v-bind="tabsAttrs"
+      :class="isDragging && dragAttrs.class"
+      :data-test="getDataTest()"
+      @scroll="checkScroll"
+      @pointerdown="onPointerDown"
+      @click.capture="onClickCapture"
+    >
       <!-- @slot Use it to add the UTab component. -->
       <slot>
         <UTab

package/ui.navigation-tabs/config.ts

@@ -4,10 +4,11 @@ export default /*tw*/ {
     base: "flex border-b border-default w-full",
     variants: {
       scrollable: {
-        true: "overflow-hidden flex-nowrap scroll-smooth",
+        true: "overflow-hidden flex-nowrap touch-pan-y select-none",
       },
     },
   },
+  drag: "icon-drag cursor-move scroll-auto! *:pointer-events-none",
   tab: "{UTab}",
   prev: "",
   next: "",

package/ui.navigation-tabs/constants.ts

@@ -5,3 +5,5 @@
 export const COMPONENT_NAME = "UTabs";
 
 export const SCROLL_OFFSET = 200;
+export const DRAG_THRESHOLD = 5;
+export const DRAG_CLICK_SUPPRESS_MS = 300;

package/ui.navigation-tabs/storybook/stories.ts

@@ -89,6 +89,14 @@ Scrollable.args = {
   options: getOptionsArray(),
   scrollable: true,
 };
+Scrollable.parameters = {
+  docs: {
+    description: {
+      story:
+        "Scroll overflowing tabs with the arrow buttons, by dragging the tab list, or with horizontal wheel.",
+    },
+  },
+};
 
 export const Block = DefaultTemplate.bind({});
 Block.args = { block: true };

package/ui.navigation-tabs/tests/UTabs.test.ts

@@ -1,3 +1,4 @@
+import { nextTick } from "vue";
 import { mount } from "@vue/test-utils";
 import { describe, it, expect } from "vitest";
 
@@ -7,6 +8,25 @@ import UButton from "../../ui.button/UButton.vue";
 
 import type { Props, UTabsOption } from "../types";
 
+function dispatchPointer(
+  target: EventTarget,
+  type: "pointerdown" | "pointermove" | "pointerup",
+  clientX: number,
+  extra: PointerEventInit = {},
+) {
+  target.dispatchEvent(
+    new PointerEvent(type, {
+      bubbles: true,
+      cancelable: true,
+      clientX,
+      clientY: 0,
+      pointerId: 1,
+      pointerType: "mouse",
+      ...extra,
+    }),
+  );
+}
+
 describe("UTabs.vue", () => {
   // Global options definition
   const options: UTabsOption[] = [
@@ -94,7 +114,7 @@ describe("UTabs.vue", () => {
       const tabsContainer = component.find(`[vl-key="tabs"]`);
 
       // Check that the container has the scrollable class
-      expect(tabsContainer.classes()).toContain("scroll-smooth");
+      expect(tabsContainer.classes()).toContain("overflow-hidden");
     });
 
     it("Scroll – shows scroll buttons when scrollable and content overflows", async () => {
@@ -134,6 +154,198 @@ describe("UTabs.vue", () => {
       expect(nextButton).toBeDefined();
     });
 
+    it("Scrollable – scrolls the tab list on pointer drag", async () => {
+      const manyOptions: UTabsOption[] = Array.from({ length: 10 }, (_, i) => ({
+        value: `tab${i}`,
+        label: `Tab ${i}`,
+      }));
+
+      const component = mount(UTabs, {
+        props: {
+          options: manyOptions,
+          scrollable: true,
+        },
+      });
+
+      const tabsContainer = component.find(`[vl-key="tabs"]`);
+      const element = tabsContainer.element;
+
+      let scrollLeft = 0;
+
+      Object.defineProperty(element, "scrollWidth", { configurable: true, value: 1000 });
+      Object.defineProperty(element, "clientWidth", { configurable: true, value: 300 });
+      Object.defineProperty(element, "scrollLeft", {
+        configurable: true,
+        get: () => scrollLeft,
+        set: (value: number) => {
+          scrollLeft = value;
+        },
+      });
+
+      dispatchPointer(element, "pointerdown", 200, { button: 0 });
+      dispatchPointer(document, "pointermove", 120, { buttons: 1 });
+
+      await nextTick();
+
+      expect(scrollLeft).toBe(80);
+      expect(tabsContainer.classes()).toContain("cursor-move");
+      expect(tabsContainer.classes()).toContain("icon-drag");
+
+      dispatchPointer(document, "pointerup", 120);
+    });
+
+    it("Scrollable – does not select a tab after a drag gesture", async () => {
+      const manyOptions: UTabsOption[] = Array.from({ length: 10 }, (_, i) => ({
+        value: `tab${i}`,
+        label: `Tab ${i}`,
+      }));
+
+      const component = mount(UTabs, {
+        props: {
+          options: manyOptions,
+          modelValue: "tab0",
+          scrollable: true,
+        },
+      });
+
+      const tabsContainer = component.find(`[vl-key="tabs"]`);
+      const element = tabsContainer.element;
+
+      Object.defineProperty(element, "scrollWidth", { configurable: true, value: 1000 });
+      Object.defineProperty(element, "clientWidth", { configurable: true, value: 300 });
+      Object.defineProperty(element, "scrollLeft", {
+        configurable: true,
+        writable: true,
+        value: 0,
+      });
+
+      dispatchPointer(element, "pointerdown", 200, { button: 0 });
+      dispatchPointer(document, "pointermove", 120, { buttons: 1 });
+      dispatchPointer(document, "pointerup", 120);
+
+      await component.findAllComponents(UTab)[1].trigger("click");
+
+      expect(component.emitted("update:modelValue")).toBeFalsy();
+    });
+
+    it("Scrollable – scrolls the tab list on horizontal wheel", () => {
+      const manyOptions: UTabsOption[] = Array.from({ length: 10 }, (_, i) => ({
+        value: `tab${i}`,
+        label: `Tab ${i}`,
+      }));
+
+      const component = mount(UTabs, {
+        props: {
+          options: manyOptions,
+          scrollable: true,
+        },
+      });
+
+      const element = component.find(`[vl-key="tabs"]`).element;
+
+      let scrollLeft = 0;
+
+      Object.defineProperty(element, "scrollWidth", { configurable: true, value: 1000 });
+      Object.defineProperty(element, "clientWidth", { configurable: true, value: 300 });
+      Object.defineProperty(element, "scrollLeft", {
+        configurable: true,
+        get: () => scrollLeft,
+        set: (value: number) => {
+          scrollLeft = value;
+        },
+      });
+
+      element.dispatchEvent(
+        new WheelEvent("wheel", {
+          deltaX: 40,
+          deltaY: 0,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+
+      expect(scrollLeft).toBe(40);
+    });
+
+    it("Scrollable – does not scroll the tab list on vertical wheel", () => {
+      const manyOptions: UTabsOption[] = Array.from({ length: 10 }, (_, i) => ({
+        value: `tab${i}`,
+        label: `Tab ${i}`,
+      }));
+
+      const component = mount(UTabs, {
+        props: {
+          options: manyOptions,
+          scrollable: true,
+        },
+      });
+
+      const element = component.find(`[vl-key="tabs"]`).element;
+
+      let scrollLeft = 0;
+
+      Object.defineProperty(element, "scrollWidth", { configurable: true, value: 1000 });
+      Object.defineProperty(element, "clientWidth", { configurable: true, value: 300 });
+      Object.defineProperty(element, "scrollLeft", {
+        configurable: true,
+        get: () => scrollLeft,
+        set: (value: number) => {
+          scrollLeft = value;
+        },
+      });
+
+      element.dispatchEvent(
+        new WheelEvent("wheel", {
+          deltaX: 0,
+          deltaY: 40,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+
+      expect(scrollLeft).toBe(0);
+    });
+
+    it("Scrollable – scrolls the tab list on shift+wheel", () => {
+      const manyOptions: UTabsOption[] = Array.from({ length: 10 }, (_, i) => ({
+        value: `tab${i}`,
+        label: `Tab ${i}`,
+      }));
+
+      const component = mount(UTabs, {
+        props: {
+          options: manyOptions,
+          scrollable: true,
+        },
+      });
+
+      const element = component.find(`[vl-key="tabs"]`).element;
+
+      let scrollLeft = 0;
+
+      Object.defineProperty(element, "scrollWidth", { configurable: true, value: 1000 });
+      Object.defineProperty(element, "clientWidth", { configurable: true, value: 300 });
+      Object.defineProperty(element, "scrollLeft", {
+        configurable: true,
+        get: () => scrollLeft,
+        set: (value: number) => {
+          scrollLeft = value;
+        },
+      });
+
+      element.dispatchEvent(
+        new WheelEvent("wheel", {
+          deltaX: 0,
+          deltaY: 40,
+          shiftKey: true,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+
+      expect(scrollLeft).toBe(40);
+    });
+
     it("Block – provides block value to tabs", () => {
       const block = true;
 

package/ui.navigation-tabs/types.ts

@@ -31,7 +31,7 @@ export interface Props {
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 
   /**
-   * Make the Tabs scrollable.
+   * Make the Tabs scrollable via arrow buttons, dragging, or horizontal wheel.
    */
   scrollable?: boolean;