vlite3 1.4.40 → 1.5.0

package/components/Tabes/Tabes.vue2.js

@@ -1,12 +1,15 @@
-import { defineComponent as Ce, ref as h, computed as d, watch as p, onMounted as Ve, onBeforeUnmount as ze, openBlock as f, createElementBlock as $, normalizeClass as l, withDirectives as M, createVNode as y, vShow as L, createElementVNode as c, normalizeStyle as Se, createCommentVNode as E, Fragment as J, renderList as Be, unref as X, createBlock as A, withCtx as Y, toDisplayString as Z, withMemo as $e, resolveDynamicComponent as Me, mergeProps as Le, nextTick as Ae } from "vue";
-import { useResizeObserver as _ } from "@vueuse/core";
-import { getActiveMarkerKey as Oe, isMenuTab as ee, isTabActive as te } from "./tabes.utils.js";
-import { measureTabesMarkerGeometry as Re, toTabesLocalScrollDelta as ne } from "./TabesMarkerGeometry.js";
-import w from "../Icon.vue.js";
-import re from "../FadeOverlay/FadeOverlay.vue.js";
-import Fe from "../Dropdown/Dropdown.vue.js";
-import { $t as Ie } from "../../utils/i18n.js";
-const Ee = ["dir"], Te = ["data-variant"], je = ["aria-selected", "aria-expanded", "disabled"], Qe = /* @__PURE__ */ Ce({
+import { defineComponent as qe, ref as d, computed as l, watch as b, onMounted as Ke, onBeforeUnmount as Ne, openBlock as h, createElementBlock as M, normalizeClass as i, withDirectives as D, createVNode as C, vShow as A, createElementVNode as g, normalizeStyle as He, createCommentVNode as N, Fragment as ne, renderList as We, unref as se, createBlock as F, withCtx as oe, toDisplayString as le, withMemo as Ge, resolveDynamicComponent as Qe, mergeProps as Ue, nextTick as Je } from "vue";
+import { useResizeObserver as ie } from "@vueuse/core";
+import { useDraggable as Xe } from "vue-draggable-plus";
+import { hashTabesValues as Ye, getActiveMarkerKey as Ze, isMenuTab as ce, isTabActive as ue, scrollTabesStrip as de, getTabesScrollOverflow as _e } from "./tabes.utils.js";
+import { measureTabesMarkerGeometry as et, toTabesLocalScrollDelta as fe } from "./TabesMarkerGeometry.js";
+import S from "../Icon.vue.js";
+import me from "../FadeOverlay/FadeOverlay.vue.js";
+import tt from "../Dropdown/Dropdown.vue.js";
+import { $t as rt } from "../../utils/i18n.js";
+import { useRtl as at, resolveDirFromAncestors as nt } from "../../composables/useRtl.js";
+import { usePersistentState as st } from "../../utils/usePersistentState.js";
+const ot = ["dir"], lt = ["data-variant"], it = ["aria-selected", "aria-expanded", "disabled"], ve = 200, yt = /* @__PURE__ */ qe({
   __name: "Tabes",
   props: {
     options: {},
@@ -17,57 +20,89 @@ const Ee = ["dir"], Te = ["data-variant"], je = ["aria-selected", "aria-expanded
     textClass: {},
     wrap: { type: Boolean, default: !1 },
     tabClass: {},
-    direction: { default: "ltr" }
+    direction: { default: "auto" },
+    sortable: { type: Boolean, default: !1 },
+    storageKey: {}
   },
-  emits: ["update:modelValue", "change", "menu-select", "menu-open", "menu-close"],
-  setup(s, { emit: ae }) {
-    const n = s, m = ae, k = h(null), u = h(null), v = /* @__PURE__ */ new Map(), C = h(!1), V = h(!1);
-    let O = 0, T = 0, z = !1, S = !1, R = 0;
-    const j = () => {
-      if (!u.value) return;
-      const { scrollLeft: e, scrollWidth: r, clientWidth: t } = u.value, a = e > 1, o = Math.ceil(e + t) < r - 1;
-      C.value !== a && (C.value = a), V.value !== o && (V.value = o);
-    }, se = () => {
-      S || (S = !0, T = requestAnimationFrame(() => {
-        S = !1, j();
+  emits: ["update:modelValue", "change", "menu-select", "menu-open", "menu-close", "reorder", "update:options"],
+  setup(o, { emit: be }) {
+    const r = o, f = be, H = d(null), k = d(null), p = d(null), y = /* @__PURE__ */ new Map(), W = at(), E = d(null), V = l(() => r.direction === "rtl" ? "rtl" : r.direction === "ltr" ? "ltr" : E.value ? E.value : W.value ? "rtl" : "ltr"), z = l(() => V.value === "rtl"), G = () => {
+      E.value = nt(H.value);
+    }, Q = r.sortable ? st(
+      `tabes-order-${r.storageKey ?? `auto-${Ye(r.options)}`}`,
+      [],
+      { writeDefaults: !1 }
+    ) : d([]), L = (e) => {
+      if (!r.sortable) return [...e];
+      const a = Q.value;
+      if (!a?.length) return [...e];
+      const t = new Map(e.map((s) => [s.value, s])), n = [];
+      for (const s of a) {
+        const u = t.get(s);
+        u && (n.push(u), t.delete(s));
+      }
+      for (const s of e) t.has(s.value) && n.push(s);
+      return n;
+    }, m = d(L(r.options)), ge = () => {
+      const e = m.value.map((a) => a.value);
+      Q.value = e, f("reorder", { options: [...m.value], order: e }), f("update:options", [...m.value]), c({ ensureVisible: !0 });
+    }, pe = (e) => {
+      const { item: a, from: t, oldIndex: n, oldDraggableIndex: s, newDraggableIndex: u } = e;
+      a.parentNode?.removeChild(a);
+      const K = typeof n == "number" ? t.children[n] ?? null : null;
+      if (t.insertBefore(a, K), s == null || u == null || s === u)
+        return;
+      const v = [...m.value], [x] = v.splice(s, 1);
+      x && (v.splice(u, 0, x), m.value = v, ge());
+    }, B = d(!1), $ = d(!1);
+    let T = 0, U = 0, R = !1, O = !1, I = 0;
+    const J = () => {
+      if (!p.value) return;
+      const { canScrollStart: e, canScrollEnd: a } = _e(
+        p.value
+      );
+      B.value !== e && (B.value = e), $.value !== a && ($.value = a);
+    }, he = () => {
+      O || (O = !0, U = requestAnimationFrame(() => {
+        O = !1, J();
       }));
-    }, q = (e) => {
-      u.value && u.value.scrollBy({ left: e, behavior: "smooth" });
-    }, D = d(() => Oe(n.options, n.modelValue)), oe = () => {
-      if (!u.value || !k.value) return;
-      const e = D.value;
+    }, xe = () => de(p.value, "start", ve), ye = () => de(p.value, "end", ve), X = l(() => Ze(r.options, r.modelValue)), we = () => {
+      if (!p.value || !k.value) return;
+      const e = X.value;
       if (e === void 0) return;
-      const r = v.get(e);
-      if (!r) return;
-      const t = u.value, a = r.getBoundingClientRect(), o = t.getBoundingClientRect(), g = 40;
-      a.left < o.left + g ? t.scrollBy({
-        left: ne(
+      const a = y.get(e);
+      if (!a) return;
+      const t = p.value, n = a.getBoundingClientRect(), s = t.getBoundingClientRect(), u = 40;
+      n.left < s.left + u ? t.scrollBy({
+        left: fe(
           t,
-          a.left - o.left - g
+          n.left - s.left - u
         ),
         behavior: "smooth"
-      }) : a.right > o.right - g && t.scrollBy({
-        left: ne(
+      }) : n.right > s.right - u && t.scrollBy({
+        left: fe(
           t,
-          a.right - o.right + g
+          n.right - s.right + u
         ),
         behavior: "smooth"
       });
-    }, W = (e, r) => {
-      e instanceof HTMLElement ? v.set(r, e) : e && typeof e == "object" && "$el" in e && e.$el instanceof HTMLElement ? v.set(r, e.$el) : v.delete(r);
-    }, b = h({
+    }, Y = (e, a) => {
+      e instanceof HTMLElement ? y.set(a, e) : e && typeof e == "object" && "$el" in e && e.$el instanceof HTMLElement ? y.set(a, e.$el) : y.delete(a);
+    }, w = d({
       width: "0px",
       height: "0px",
+      left: "0px",
+      top: "0px",
       transform: "translate(0px, 0px)",
       opacity: 0
-    }), F = h(!1), P = () => {
-      b.value.opacity !== 0 && (b.value = {
-        ...b.value,
+    }), j = d(!1), P = () => {
+      w.value.opacity !== 0 && (w.value = {
+        ...w.value,
         opacity: 0
       });
-    }, le = async () => {
-      await Ae();
-      const e = k.value, r = D.value, t = r !== void 0 ? v.get(r) : void 0;
+    }, ke = async () => {
+      await Je();
+      const e = k.value, a = X.value, t = a !== void 0 ? y.get(a) : void 0;
       if (!e || !t) {
         P();
         return;
@@ -76,70 +111,92 @@ const Ee = ["dir"], Te = ["data-variant"], je = ["aria-selected", "aria-expanded
         P();
         return;
       }
-      const { width: a, height: o, left: g, top: ke } = Re(e, t), x = {
-        width: `${a}px`,
-        height: `${o}px`,
-        transform: `translate(${g}px, ${ke}px)`,
+      const { width: n, height: s, left: u, top: K } = et(e, t), v = {
+        width: `${n}px`,
+        height: `${s}px`,
+        left: "0px",
+        top: "0px",
+        transform: `translate(${u}px, ${K}px)`,
         opacity: 1
-      }, B = b.value;
-      B.width === x.width && B.height === x.height && B.transform === x.transform && B.opacity === x.opacity || (b.value = x, F.value || (cancelAnimationFrame(R), R = requestAnimationFrame(() => {
-        F.value = !0;
+      }, x = w.value;
+      x.width === v.width && x.height === v.height && x.transform === v.transform && x.opacity === v.opacity || (w.value = v, j.value || (cancelAnimationFrame(I), I = requestAnimationFrame(() => {
+        j.value = !0;
       })));
     };
-    let I = !1;
-    const H = async (e) => {
-      await le(), j(), e?.ensureVisible && oe();
-    }, i = (e) => {
-      e?.ensureVisible && (I = !0), !z && (z = !0, cancelAnimationFrame(O), O = requestAnimationFrame(() => {
-        z = !1;
-        const r = I;
-        I = !1, H({ ensureVisible: r });
+    let q = !1;
+    const Z = async (e) => {
+      await ke(), J(), e?.ensureVisible && we();
+    }, c = (e) => {
+      e?.ensureVisible && (q = !0), !R && (R = !0, cancelAnimationFrame(T), T = requestAnimationFrame(() => {
+        R = !1;
+        const a = q;
+        q = !1, Z({ ensureVisible: a });
       }));
     };
-    _(u, () => i()), _(k, () => i()), p(
-      () => n.modelValue,
-      () => i({ ensureVisible: !0 })
-    ), p(
-      () => n.options,
-      () => i()
-    ), p(
-      () => n.size,
-      () => i()
-    ), p(
-      () => n.block,
-      () => i()
-    ), p(
-      () => n.wrap,
-      () => i()
-    ), p(
-      () => n.variant,
-      () => i()
-    ), Ve(() => {
-      H({ ensureVisible: !0 });
-    }), ze(() => {
-      cancelAnimationFrame(O), cancelAnimationFrame(T), cancelAnimationFrame(R), z = !1, S = !1, v.clear();
+    ie(p, () => c()), ie(k, () => c()), b(
+      () => r.modelValue,
+      () => c({ ensureVisible: !0 })
+    ), b(
+      () => r.options,
+      (e) => {
+        m.value = L(e), c();
+      }
+    ), b(
+      () => r.sortable,
+      () => {
+        m.value = L(r.options), c();
+      }
+    ), b(
+      () => r.size,
+      () => c()
+    ), b(
+      () => r.block,
+      () => c()
+    ), b(
+      () => r.wrap,
+      () => c()
+    ), b(
+      () => r.variant,
+      () => c()
+    ), b(W, () => G()), b(V, () => c({ ensureVisible: !0 })), r.sortable && Xe(k, m, {
+      animation: 150,
+      draggable: "[data-tabes-sortable]",
+      filter: "[data-tabes-disabled]",
+      ghostClass: "tabes-drag-ghost",
+      chosenClass: "tabes-drag-chosen",
+      dragClass: "tabes-drag-active",
+      // Hide the marker while dragging (it can't track a moving target), then
+      // re-measure on drop so it lands on the active tab's new position.
+      onStart: () => P(),
+      onEnd: () => c(),
+      // Own the reorder so the marker child can't skew the list indices.
+      customUpdate: (e) => pe(e)
+    }), Ke(() => {
+      G(), Z({ ensureVisible: !0 });
+    }), Ne(() => {
+      cancelAnimationFrame(T), cancelAnimationFrame(U), cancelAnimationFrame(I), R = !1, O = !1, y.clear();
     });
-    const ie = d(() => {
-      const e = n.variant === "line";
-      return n.block || e ? "flex w-full relative" : "inline-flex max-w-full relative";
-    }), N = d(() => [
+    const Ce = l(() => {
+      const e = r.variant === "line";
+      return r.block || e ? "flex w-full relative" : "inline-flex max-w-full relative";
+    }), _ = l(() => [
       "absolute top-0 bottom-0 z-20 flex items-center pointer-events-none transition-opacity duration-200",
-      n.variant === "line" ? "pb-[10px]" : ""
-    ]), ce = (e) => {
-      e.disabled || ee(e) || (m("update:modelValue", e.value), m("change", e.value));
-    }, ue = (e, r) => {
+      r.variant === "line" ? "pb-[10px]" : ""
+    ]), Se = (e) => {
+      e.disabled || ce(e) || (f("update:modelValue", e.value), f("change", e.value));
+    }, Ve = (e, a) => {
       if (e.disabled) return;
-      const t = r.value;
-      t != null && (m("update:modelValue", t), m("change", t), m("menu-select", { value: t, option: r.option, tab: e }));
-    }, de = (e) => {
-      m("menu-open", e);
-    }, fe = (e) => {
-      m("menu-close", e), i();
-    }, me = d(() => {
-      const e = n.variant === "line";
-      return (n.block || n.wrap) && !e ? "flex-1 min-w-max" : "shrink-0";
-    }), ve = (e) => e.dropdown?.direction ?? n.direction, be = d(() => {
-      const e = n.variant === "line", r = {
+      const t = a.value;
+      t != null && (f("update:modelValue", t), f("change", t), f("menu-select", { value: t, option: a.option, tab: e }));
+    }, ze = (e) => {
+      f("menu-open", e);
+    }, Be = (e) => {
+      f("menu-close", e), c();
+    }, $e = l(() => {
+      const e = r.variant === "line";
+      return (r.block || r.wrap) && !e ? "flex-1 min-w-max" : "shrink-0";
+    }), Re = (e) => e.dropdown?.direction ?? V.value, Oe = l(() => z.value ? "right" : "left"), Me = l(() => z.value ? "left" : "right"), De = l(() => z.value ? "lucide:chevron-right" : "lucide:chevron-left"), Ae = l(() => z.value ? "lucide:chevron-left" : "lucide:chevron-right"), Fe = l(() => {
+      const e = r.variant === "line", a = {
         surface: "bg-secondary/80 p-1",
         primary: "bg-secondary p-1",
         secondary: "bg-secondary p-1",
@@ -147,52 +204,52 @@ const Ee = ["dir"], Te = ["data-variant"], je = ["aria-selected", "aria-expanded
         success: "bg-success/10 p-1",
         outline: "bg-transparent border border-border p-1",
         line: "bg-transparent gap-6 rounded-none p-0 border-b border-border"
-      }, t = n.wrap && !e ? "flex-wrap" : "";
-      return [`${n.block || e ? "flex min-w-full w-max" : "inline-flex"} rounded-lg relative isolate ${t}`, r[n.variant]];
-    }), G = d(() => n.variant === "surface" || n.variant === "primary" || n.variant === "secondary" ? "var(--color-secondary)" : n.variant === "danger" ? "color-mix(in srgb, var(--color-danger) 10%, transparent)" : n.variant === "success" ? "color-mix(in srgb, var(--color-success) 10%, transparent)" : "var(--color-background)"), K = {
+      }, t = r.wrap && !e ? "flex-wrap" : "";
+      return [`${r.block || e ? "flex min-w-full w-max" : "inline-flex"} rounded-lg relative isolate ${t}`, a[r.variant], r.sortable ? "is-sortable" : ""];
+    }), ee = l(() => r.variant === "surface" || r.variant === "primary" || r.variant === "secondary" ? "var(--color-secondary)" : r.variant === "danger" ? "color-mix(in srgb, var(--color-danger) 10%, transparent)" : r.variant === "success" ? "color-mix(in srgb, var(--color-success) 10%, transparent)" : "var(--color-background)"), te = {
       sm: "text-xs px-2.5 py-1",
       md: "-text-fs-2 px-3 py-1",
       lg: "-text-fs-1 px-4 py-1"
-    }, ge = d(() => {
-      const e = n.variant === "line", r = e ? "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none outline-none pb-3 border-b-2 border-transparent hover:text-foreground shrink-0" : "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none rounded-md outline-none shrink-0", t = (n.block || n.wrap) && !e ? "flex-1" : "";
-      return [r, t];
-    }), Q = (e) => {
-      const r = te(e, n.modelValue), t = n.variant === "line";
-      let a = "";
-      if (r)
+    }, Ee = l(() => {
+      const e = r.variant === "line", a = e ? "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none outline-none pb-3 border-b-2 border-transparent hover:text-foreground shrink-0" : "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none rounded-md outline-none shrink-0", t = (r.block || r.wrap) && !e ? "flex-1" : "";
+      return [a, t];
+    }), re = (e) => {
+      const a = ue(e, r.modelValue), t = r.variant === "line";
+      let n = "";
+      if (a)
         if (t)
-          a = n.wrap ? "text-primary !border-primary" : "text-primary";
+          n = r.wrap ? "text-primary !border-primary" : "text-primary";
         else
-          switch (n.variant) {
+          switch (r.variant) {
             case "surface":
-              a = n.wrap ? "text-foreground bg-[#ffff] dark:bg-[#0B0B0B] shadow-sm" : "text-foreground";
+              n = r.wrap ? "text-foreground bg-[#ffff] dark:bg-[#0B0B0B] shadow-sm" : "text-foreground";
               break;
             case "primary":
-              a = n.wrap ? "text-primary-foreground bg-primary" : "text-primary-foreground";
+              n = r.wrap ? "text-primary-foreground bg-primary" : "text-primary-foreground";
               break;
             case "secondary":
-              a = n.wrap ? "text-secondary bg-secondary-foreground" : "text-secondary";
+              n = r.wrap ? "text-secondary bg-secondary-foreground" : "text-secondary";
               break;
             case "danger":
-              a = n.wrap ? "text-danger-fg bg-danger" : "text-danger-fg";
+              n = r.wrap ? "text-danger-fg bg-danger" : "text-danger-fg";
               break;
             case "success":
-              a = n.wrap ? "text-success-fg bg-success" : "text-success-fg";
+              n = r.wrap ? "text-success-fg bg-success" : "text-success-fg";
               break;
             case "outline":
-              a = n.wrap ? "text-accent-foreground bg-accent/50 ring-1 ring-border" : "text-accent-foreground";
+              n = r.wrap ? "text-accent-foreground bg-accent/50 ring-1 ring-border" : "text-accent-foreground";
               break;
             default:
-              a = "text-foreground";
+              n = "text-foreground";
           }
       else
-        a = t ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
-      const o = e.disabled ? "opacity-50 cursor-not-allowed" : "";
-      return [ge.value, a, n?.tabClass, o].join(" ");
-    }, he = d(() => {
-      const r = `absolute left-0 top-0 z-0 pointer-events-none ${F.value ? "transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)]" : ""}`;
-      return n.variant === "line" ? `${r} !h-[2px] !top-auto bottom-0` : `${r} rounded-md shadow-sm`;
-    }), pe = () => ({
+        n = t ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
+      const s = e.disabled ? "opacity-50 cursor-not-allowed" : "";
+      return [Ee.value, n, r?.tabClass, s].join(" ");
+    }, Le = l(() => {
+      const a = `absolute z-0 pointer-events-none ${j.value ? "transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)]" : ""}`;
+      return r.variant === "line" ? `${a} !h-[2px] !top-auto bottom-0` : `${a} rounded-md shadow-sm`;
+    }), Te = () => ({
       surface: "bg-[#ffff] dark:bg-[#0B0B0B]",
       primary: "bg-primary",
       secondary: "bg-secondary-foreground",
@@ -200,70 +257,74 @@ const Ee = ["dir"], Te = ["data-variant"], je = ["aria-selected", "aria-expanded
       success: "bg-success",
       outline: "bg-accent/50 ring-1 ring-border",
       line: "bg-primary"
-    })[n.variant], U = (e) => e.labelI18n ? Ie(e.labelI18n) : e.label, xe = (e) => e.to ? "router-link" : e.href ? "a" : "button", ye = (e) => e.to ? { to: e.to } : e.href ? { href: e.href, target: "_blank", rel: "noopener noreferrer" } : { type: "button" }, we = (e) => [
-      n.size === "sm" ? "w-3 h-3" : "w-3.5 h-3.5",
+    })[r.variant], ae = (e) => e.labelI18n ? rt(e.labelI18n) : e.label, Ie = (e) => e.to ? "router-link" : e.href ? "a" : "button", je = (e) => e.to ? { to: e.to } : e.href ? { href: e.href, target: "_blank", rel: "noopener noreferrer" } : { type: "button" }, Pe = (e) => [
+      r.size === "sm" ? "w-3 h-3" : "w-3.5 h-3.5",
       "opacity-70 shrink-0 transition-transform duration-200",
       e ? "rotate-180" : ""
     ].join(" ");
-    return (e, r) => (f(), $("div", {
-      class: l([ie.value, "group"]),
-      dir: s.direction
+    return (e, a) => (h(), M("div", {
+      ref_key: "rootRef",
+      ref: H,
+      class: i([Ce.value, "group"]),
+      dir: V.value
     }, [
-      M(y(re, {
-        direction: "left",
-        color: G.value,
+      D(C(me, {
+        direction: Oe.value,
+        color: ee.value,
         coverage: "100px",
         blur: "40px",
         easing: "smooth",
         tintOpacity: 1,
-        class: l(["z-10 pointer-events-none", n.variant === "line" ? "" : "rounded-l-lg"])
-      }, null, 8, ["color", "class"]), [
-        [L, C.value]
+        class: i(["z-10 pointer-events-none", r.variant === "line" ? "" : "rounded-s-lg"])
+      }, null, 8, ["direction", "color", "class"]), [
+        [A, B.value]
       ]),
-      M(c("div", {
-        class: l(["left-0 pl-1", N.value])
+      D(g("div", {
+        class: i(["start-0 ps-1", _.value])
       }, [
-        c("button", {
-          onClick: r[0] || (r[0] = (t) => q(-200)),
+        g("button", {
+          onClick: xe,
           class: "pointer-events-auto h-full px-1 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors focus:outline-none",
-          "aria-label": "Scroll left"
+          "aria-label": "Scroll backward"
         }, [
-          y(w, {
-            icon: "lucide:chevron-left",
+          C(S, {
+            icon: De.value,
             class: "w-5 h-5"
-          })
+          }, null, 8, ["icon"])
         ])
       ], 2), [
-        [L, C.value]
+        [A, B.value]
       ]),
-      c("div", {
+      g("div", {
         ref_key: "scrollRef",
-        ref: u,
+        ref: p,
         class: "tabes-scroll flex-1 min-w-0 max-w-full overflow-x-auto scrollbar-hide scroll-smooth",
-        onScroll: se
+        onScroll: he
       }, [
-        c("div", {
+        g("div", {
           ref_key: "containerRef",
           ref: k,
-          class: l([be.value, "tabes-container"]),
+          class: i([Fe.value, "tabes-container"]),
           role: "tablist",
-          "data-variant": n.variant,
+          "data-variant": r.variant,
           "data-tabes": ""
         }, [
-          s.modelValue !== void 0 && !s.wrap ? (f(), $("div", {
+          o.modelValue !== void 0 && !o.wrap ? (h(), M("div", {
             key: 0,
-            class: l(["tabes-marker", [he.value, pe()]]),
-            style: Se(b.value)
-          }, null, 6)) : E("", !0),
-          (f(!0), $(J, null, Be(s.options, (t) => (f(), $(J, {
+            class: i(["tabes-marker", [Le.value, Te()]]),
+            style: He(w.value)
+          }, null, 6)) : N("", !0),
+          (h(!0), M(ne, null, We(m.value, (t) => (h(), M(ne, {
             key: t.value
           }, [
-            X(ee)(t) ? (f(), A(Fe, {
+            se(ce)(t) ? (h(), F(tt, {
               key: 0,
               options: t.menu,
-              selected: s.modelValue,
+              selected: o.modelValue,
               disabled: t.disabled,
-              direction: ve(t),
+              "data-tabes-sortable": "",
+              "data-tabes-disabled": t.disabled || void 0,
+              direction: Re(t),
               position: t.dropdown?.position,
               offset: t.dropdown?.offset ?? [0, 8],
               searchable: t.dropdown?.searchable ?? !1,
@@ -277,98 +338,100 @@ const Ee = ["dir"], Te = ["data-variant"], je = ["aria-selected", "aria-expanded
               "show-selected-icon": !1,
               "toggle-selection": !1,
               selectable: !0,
-              class: l(["tabes-menu", "inline-flex!", me.value]),
-              onOnSelect: (a) => ue(t, a),
-              onOnOpen: () => de(t),
-              onOnClose: () => fe(t)
+              class: i(["tabes-menu", "inline-flex!", $e.value]),
+              onOnSelect: (n) => Ve(t, n),
+              onOnOpen: () => ze(t),
+              onOnClose: () => Be(t)
             }, {
-              trigger: Y(({ isOpen: a }) => [
-                c("button", {
+              trigger: oe(({ isOpen: n }) => [
+                g("button", {
                   ref_for: !0,
-                  ref: (o) => W(o, t.value),
+                  ref: (s) => Y(s, t.value),
                   type: "button",
                   role: "tab",
                   "data-tabes-item": "",
                   "data-tabes-menu-trigger": "",
-                  "aria-selected": X(te)(t, s.modelValue),
+                  "aria-selected": se(ue)(t, o.modelValue),
                   "aria-haspopup": !0,
-                  "aria-expanded": a,
+                  "aria-expanded": n,
                   disabled: t.disabled,
-                  class: l([Q(t), K[n.size], "w-full"])
+                  class: i([re(t), te[r.size], "w-full"])
                 }, [
-                  t.icon ? (f(), A(w, {
+                  t.icon ? (h(), F(S, {
                     key: 0,
                     icon: t.icon,
-                    class: l(s.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
-                  }, null, 8, ["icon", "class"])) : E("", !0),
-                  c("span", {
-                    class: l(["whitespace-nowrap z-20 relative", s.textClass])
-                  }, Z(U(t)), 3),
-                  y(w, {
+                    class: i(o.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
+                  }, null, 8, ["icon", "class"])) : N("", !0),
+                  g("span", {
+                    class: i(["whitespace-nowrap z-20 relative", o.textClass])
+                  }, le(ae(t)), 3),
+                  C(S, {
                     icon: "lucide:chevron-down",
-                    class: l(we(a)),
+                    class: i(Pe(n)),
                     "aria-hidden": "true"
                   }, null, 8, ["class"])
-                ], 10, je)
+                ], 10, it)
               ]),
               _: 2
-            }, 1032, ["options", "selected", "disabled", "direction", "position", "offset", "searchable", "close-on-select", "max-height", "min-width", "width", "menu-id", "teleport", "class", "onOnSelect", "onOnOpen", "onOnClose"])) : $e([t, s.modelValue === t.value, s.size, s.variant, s.block, s.wrap, s.tabClass, s.textClass], () => (f(), A(Me(xe(t)), Le({
+            }, 1032, ["options", "selected", "disabled", "data-tabes-disabled", "direction", "position", "offset", "searchable", "close-on-select", "max-height", "min-width", "width", "menu-id", "teleport", "class", "onOnSelect", "onOnOpen", "onOnClose"])) : Ge([t, o.modelValue === t.value, o.size, o.variant, o.block, o.wrap, o.tabClass, o.textClass, o.sortable], () => (h(), F(Qe(Ie(t)), Ue({
               key: 1,
               ref_for: !0,
-              ref: (a) => W(a, t.value),
+              ref: (n) => Y(n, t.value),
               role: "tab",
               "data-tabes-item": "",
-              "aria-selected": s.modelValue === t.value,
+              "data-tabes-sortable": "",
+              "data-tabes-disabled": t.disabled || void 0,
+              "aria-selected": o.modelValue === t.value,
               disabled: t.disabled,
-              class: [Q(t), K[n.size]]
-            }, { ref_for: !0 }, ye(t), {
-              onClick: (a) => ce(t)
+              class: [re(t), te[r.size]]
+            }, { ref_for: !0 }, je(t), {
+              onClick: (n) => Se(t)
             }), {
-              default: Y(() => [
-                t.icon ? (f(), A(w, {
+              default: oe(() => [
+                t.icon ? (h(), F(S, {
                   key: 0,
                   icon: t.icon,
-                  class: l(s.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
-                }, null, 8, ["icon", "class"])) : E("", !0),
-                c("span", {
-                  class: l(["whitespace-nowrap z-20 relative", s.textClass])
-                }, Z(U(t)), 3)
+                  class: i(o.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
+                }, null, 8, ["icon", "class"])) : N("", !0),
+                g("span", {
+                  class: i(["whitespace-nowrap z-20 relative", o.textClass])
+                }, le(ae(t)), 3)
               ]),
               _: 2
-            }, 1040, ["aria-selected", "disabled", "class", "onClick"])), r, 1)
+            }, 1040, ["data-tabes-disabled", "aria-selected", "disabled", "class", "onClick"])), a, 0)
           ], 64))), 128))
-        ], 10, Te)
+        ], 10, lt)
       ], 544),
-      M(y(re, {
-        direction: "right",
-        color: G.value,
+      D(C(me, {
+        direction: Me.value,
+        color: ee.value,
         coverage: "100px",
         blur: "40",
         easing: "smooth",
         tintOpacity: 1,
-        class: l(["z-10 pointer-events-none", n.variant === "line" ? "" : "rounded-r-lg"])
-      }, null, 8, ["color", "class"]), [
-        [L, V.value]
+        class: i(["z-10 pointer-events-none", r.variant === "line" ? "" : "rounded-e-lg"])
+      }, null, 8, ["direction", "color", "class"]), [
+        [A, $.value]
       ]),
-      M(c("div", {
-        class: l(["right-0 pr-1", N.value])
+      D(g("div", {
+        class: i(["end-0 pe-1", _.value])
       }, [
-        c("button", {
-          onClick: r[2] || (r[2] = (t) => q(200)),
+        g("button", {
+          onClick: ye,
           class: "pointer-events-auto h-full px-1 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors focus:outline-none",
-          "aria-label": "Scroll right"
+          "aria-label": "Scroll forward"
         }, [
-          y(w, {
-            icon: "lucide:chevron-right",
+          C(S, {
+            icon: Ae.value,
             class: "w-5 h-5"
-          })
+          }, null, 8, ["icon"])
         ])
       ], 2), [
-        [L, V.value]
+        [A, $.value]
       ])
-    ], 10, Ee));
+    ], 10, ot));
   }
 });
 export {
-  Qe as default
+  yt as default
 };