vlite3 1.4.39 → 1.4.41

package/components/Tabes/Tabes.vue2.js

@@ -1,12 +1,13 @@
-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 Te, ref as f, computed as o, watch as m, onMounted as De, onBeforeUnmount as Ie, openBlock as v, createElementBlock as M, normalizeClass as l, withDirectives as A, createVNode as w, vShow as F, createElementVNode as u, normalizeStyle as je, createCommentVNode as j, Fragment as ee, renderList as qe, unref as te, createBlock as O, withCtx as re, toDisplayString as ne, withMemo as Pe, resolveDynamicComponent as He, mergeProps as Ne, nextTick as We } from "vue";
+import { useResizeObserver as ae } from "@vueuse/core";
+import { getActiveMarkerKey as Ge, isMenuTab as se, isTabActive as oe, scrollTabesStrip as le, getTabesScrollOverflow as Ke } from "./tabes.utils.js";
+import { measureTabesMarkerGeometry as Qe, toTabesLocalScrollDelta as ie } from "./TabesMarkerGeometry.js";
+import y from "../Icon.vue.js";
+import ce from "../FadeOverlay/FadeOverlay.vue.js";
+import Ue from "../Dropdown/Dropdown.vue.js";
+import { $t as Je } from "../../utils/i18n.js";
+import { useRtl as Xe, resolveDirFromAncestors as Ye } from "../../composables/useRtl.js";
+const Ze = ["dir"], _e = ["data-variant"], et = ["aria-selected", "aria-expanded", "disabled"], ue = 200, ut = /* @__PURE__ */ Te({
   __name: "Tabes",
   props: {
     options: {},
@@ -17,129 +18,135 @@ const Ee = ["dir"], Te = ["data-variant"], je = ["aria-selected", "aria-expanded
     textClass: {},
     wrap: { type: Boolean, default: !1 },
     tabClass: {},
-    direction: { default: "ltr" }
+    direction: { default: "auto" }
   },
   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();
+  setup(s, { emit: de }) {
+    const r = s, b = de, q = f(null), k = f(null), d = f(null), g = /* @__PURE__ */ new Map(), P = Xe(), L = f(null), C = o(() => r.direction === "rtl" ? "rtl" : r.direction === "ltr" ? "ltr" : L.value ? L.value : P.value ? "rtl" : "ltr"), S = o(() => C.value === "rtl"), H = () => {
+      L.value = Ye(q.value);
+    }, V = f(!1), z = f(!1);
+    let E = 0, N = 0, B = !1, $ = !1, T = 0;
+    const W = () => {
+      if (!d.value) return;
+      const { canScrollStart: e, canScrollEnd: n } = Ke(
+        d.value
+      );
+      V.value !== e && (V.value = e), z.value !== n && (z.value = n);
+    }, fe = () => {
+      $ || ($ = !0, N = requestAnimationFrame(() => {
+        $ = !1, W();
       }));
-    }, 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;
+    }, me = () => le(d.value, "start", ue), ve = () => le(d.value, "end", ue), G = o(() => Ge(r.options, r.modelValue)), be = () => {
+      if (!d.value || !k.value) return;
+      const e = G.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 n = g.get(e);
+      if (!n) return;
+      const t = d.value, a = n.getBoundingClientRect(), i = t.getBoundingClientRect(), p = 40;
+      a.left < i.left + p ? t.scrollBy({
+        left: ie(
           t,
-          a.left - o.left - g
+          a.left - i.left - p
         ),
         behavior: "smooth"
-      }) : a.right > o.right - g && t.scrollBy({
-        left: ne(
+      }) : a.right > i.right - p && t.scrollBy({
+        left: ie(
           t,
-          a.right - o.right + g
+          a.right - i.right + p
         ),
         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({
+    }, K = (e, n) => {
+      e instanceof HTMLElement ? g.set(n, e) : e && typeof e == "object" && "$el" in e && e.$el instanceof HTMLElement ? g.set(n, e.$el) : g.delete(n);
+    }, h = f({
       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,
+    }), D = f(!1), Q = () => {
+      h.value.opacity !== 0 && (h.value = {
+        ...h.value,
         opacity: 0
       });
-    }, le = async () => {
-      await Ae();
-      const e = k.value, r = D.value, t = r !== void 0 ? v.get(r) : void 0;
+    }, ge = async () => {
+      await We();
+      const e = k.value, n = G.value, t = n !== void 0 ? g.get(n) : void 0;
       if (!e || !t) {
-        P();
+        Q();
         return;
       }
       if (e.offsetWidth <= 0 || t.offsetWidth <= 0) {
-        P();
+        Q();
         return;
       }
-      const { width: a, height: o, left: g, top: ke } = Re(e, t), x = {
+      const { width: a, height: i, left: p, top: Ee } = Qe(e, t), x = {
         width: `${a}px`,
-        height: `${o}px`,
-        transform: `translate(${g}px, ${ke}px)`,
+        height: `${i}px`,
+        left: "0px",
+        top: "0px",
+        transform: `translate(${p}px, ${Ee}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;
+      }, R = h.value;
+      R.width === x.width && R.height === x.height && R.transform === x.transform && R.opacity === x.opacity || (h.value = x, D.value || (cancelAnimationFrame(T), T = requestAnimationFrame(() => {
+        D.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 });
+    const U = async (e) => {
+      await ge(), W(), e?.ensureVisible && be();
+    }, c = (e) => {
+      e?.ensureVisible && (I = !0), !B && (B = !0, cancelAnimationFrame(E), E = requestAnimationFrame(() => {
+        B = !1;
+        const n = I;
+        I = !1, U({ ensureVisible: n });
       }));
     };
-    _(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();
+    ae(d, () => c()), ae(k, () => c()), m(
+      () => r.modelValue,
+      () => c({ ensureVisible: !0 })
+    ), m(
+      () => r.options,
+      () => c()
+    ), m(
+      () => r.size,
+      () => c()
+    ), m(
+      () => r.block,
+      () => c()
+    ), m(
+      () => r.wrap,
+      () => c()
+    ), m(
+      () => r.variant,
+      () => c()
+    ), m(P, () => H()), m(C, () => c({ ensureVisible: !0 })), De(() => {
+      H(), U({ ensureVisible: !0 });
+    }), Ie(() => {
+      cancelAnimationFrame(E), cancelAnimationFrame(N), cancelAnimationFrame(T), B = !1, $ = !1, g.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 he = o(() => {
+      const e = r.variant === "line";
+      return r.block || e ? "flex w-full relative" : "inline-flex max-w-full relative";
+    }), J = o(() => [
       "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]" : ""
+    ]), pe = (e) => {
+      e.disabled || se(e) || (b("update:modelValue", e.value), b("change", e.value));
+    }, xe = (e, n) => {
       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 = n.value;
+      t != null && (b("update:modelValue", t), b("change", t), b("menu-select", { value: t, option: n.option, tab: e }));
+    }, we = (e) => {
+      b("menu-open", e);
+    }, ye = (e) => {
+      b("menu-close", e), c();
+    }, ke = o(() => {
+      const e = r.variant === "line";
+      return (r.block || r.wrap) && !e ? "flex-1 min-w-max" : "shrink-0";
+    }), Ce = (e) => e.dropdown?.direction ?? C.value, Se = o(() => S.value ? "right" : "left"), Ve = o(() => S.value ? "left" : "right"), ze = o(() => S.value ? "lucide:chevron-right" : "lucide:chevron-left"), Be = o(() => S.value ? "lucide:chevron-left" : "lucide:chevron-right"), $e = o(() => {
+      const e = r.variant === "line", n = {
         surface: "bg-secondary/80 p-1",
         primary: "bg-secondary p-1",
         secondary: "bg-secondary p-1",
@@ -147,52 +154,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}`, n[r.variant]];
+    }), X = o(() => 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)"), Y = {
       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";
+    }, Re = o(() => {
+      const e = r.variant === "line", n = 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 [n, t];
+    }), Z = (e) => {
+      const n = oe(e, r.modelValue), t = r.variant === "line";
       let a = "";
-      if (r)
+      if (n)
         if (t)
-          a = n.wrap ? "text-primary !border-primary" : "text-primary";
+          a = 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";
+              a = 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";
+              a = r.wrap ? "text-primary-foreground bg-primary" : "text-primary-foreground";
               break;
             case "secondary":
-              a = n.wrap ? "text-secondary bg-secondary-foreground" : "text-secondary";
+              a = r.wrap ? "text-secondary bg-secondary-foreground" : "text-secondary";
               break;
             case "danger":
-              a = n.wrap ? "text-danger-fg bg-danger" : "text-danger-fg";
+              a = r.wrap ? "text-danger-fg bg-danger" : "text-danger-fg";
               break;
             case "success":
-              a = n.wrap ? "text-success-fg bg-success" : "text-success-fg";
+              a = 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";
+              a = r.wrap ? "text-accent-foreground bg-accent/50 ring-1 ring-border" : "text-accent-foreground";
               break;
             default:
               a = "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 = () => ({
+      const i = e.disabled ? "opacity-50 cursor-not-allowed" : "";
+      return [Re.value, a, r?.tabClass, i].join(" ");
+    }, Me = o(() => {
+      const n = `absolute z-0 pointer-events-none ${D.value ? "transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)]" : ""}`;
+      return r.variant === "line" ? `${n} !h-[2px] !top-auto bottom-0` : `${n} rounded-md shadow-sm`;
+    }), Ae = () => ({
       surface: "bg-[#ffff] dark:bg-[#0B0B0B]",
       primary: "bg-primary",
       secondary: "bg-secondary-foreground",
@@ -200,70 +207,72 @@ 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], _ = (e) => e.labelI18n ? Je(e.labelI18n) : e.label, Fe = (e) => e.to ? "router-link" : e.href ? "a" : "button", Oe = (e) => e.to ? { to: e.to } : e.href ? { href: e.href, target: "_blank", rel: "noopener noreferrer" } : { type: "button" }, Le = (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, n) => (v(), M("div", {
+      ref_key: "rootRef",
+      ref: q,
+      class: l([he.value, "group"]),
+      dir: C.value
     }, [
-      M(y(re, {
-        direction: "left",
-        color: G.value,
+      A(w(ce, {
+        direction: Se.value,
+        color: X.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: l(["z-10 pointer-events-none", r.variant === "line" ? "" : "rounded-s-lg"])
+      }, null, 8, ["direction", "color", "class"]), [
+        [F, V.value]
       ]),
-      M(c("div", {
-        class: l(["left-0 pl-1", N.value])
+      A(u("div", {
+        class: l(["start-0 ps-1", J.value])
       }, [
-        c("button", {
-          onClick: r[0] || (r[0] = (t) => q(-200)),
+        u("button", {
+          onClick: me,
           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",
+          w(y, {
+            icon: ze.value,
             class: "w-5 h-5"
-          })
+          }, null, 8, ["icon"])
         ])
       ], 2), [
-        [L, C.value]
+        [F, V.value]
       ]),
-      c("div", {
+      u("div", {
         ref_key: "scrollRef",
-        ref: u,
+        ref: d,
         class: "tabes-scroll flex-1 min-w-0 max-w-full overflow-x-auto scrollbar-hide scroll-smooth",
-        onScroll: se
+        onScroll: fe
       }, [
-        c("div", {
+        u("div", {
           ref_key: "containerRef",
           ref: k,
-          class: l([be.value, "tabes-container"]),
+          class: l([$e.value, "tabes-container"]),
           role: "tablist",
-          "data-variant": n.variant,
+          "data-variant": r.variant,
           "data-tabes": ""
         }, [
-          s.modelValue !== void 0 && !s.wrap ? (f(), $("div", {
+          s.modelValue !== void 0 && !s.wrap ? (v(), 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: l(["tabes-marker", [Me.value, Ae()]]),
+            style: je(h.value)
+          }, null, 6)) : j("", !0),
+          (v(!0), M(ee, null, qe(s.options, (t) => (v(), M(ee, {
             key: t.value
           }, [
-            X(ee)(t) ? (f(), A(Fe, {
+            te(se)(t) ? (v(), O(Ue, {
               key: 0,
               options: t.menu,
               selected: s.modelValue,
               disabled: t.disabled,
-              direction: ve(t),
+              direction: Ce(t),
               position: t.dropdown?.position,
               offset: t.dropdown?.offset ?? [0, 8],
               searchable: t.dropdown?.searchable ?? !1,
@@ -277,98 +286,98 @@ 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: l(["tabes-menu", "inline-flex!", ke.value]),
+              onOnSelect: (a) => xe(t, a),
+              onOnOpen: () => we(t),
+              onOnClose: () => ye(t)
             }, {
-              trigger: Y(({ isOpen: a }) => [
-                c("button", {
+              trigger: re(({ isOpen: a }) => [
+                u("button", {
                   ref_for: !0,
-                  ref: (o) => W(o, t.value),
+                  ref: (i) => K(i, t.value),
                   type: "button",
                   role: "tab",
                   "data-tabes-item": "",
                   "data-tabes-menu-trigger": "",
-                  "aria-selected": X(te)(t, s.modelValue),
+                  "aria-selected": te(oe)(t, s.modelValue),
                   "aria-haspopup": !0,
                   "aria-expanded": a,
                   disabled: t.disabled,
-                  class: l([Q(t), K[n.size], "w-full"])
+                  class: l([Z(t), Y[r.size], "w-full"])
                 }, [
-                  t.icon ? (f(), A(w, {
+                  t.icon ? (v(), O(y, {
                     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", {
+                  }, null, 8, ["icon", "class"])) : j("", !0),
+                  u("span", {
                     class: l(["whitespace-nowrap z-20 relative", s.textClass])
-                  }, Z(U(t)), 3),
-                  y(w, {
+                  }, ne(_(t)), 3),
+                  w(y, {
                     icon: "lucide:chevron-down",
-                    class: l(we(a)),
+                    class: l(Le(a)),
                     "aria-hidden": "true"
                   }, null, 8, ["class"])
-                ], 10, je)
+                ], 10, et)
               ]),
               _: 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", "direction", "position", "offset", "searchable", "close-on-select", "max-height", "min-width", "width", "menu-id", "teleport", "class", "onOnSelect", "onOnOpen", "onOnClose"])) : Pe([t, s.modelValue === t.value, s.size, s.variant, s.block, s.wrap, s.tabClass, s.textClass], () => (v(), O(He(Fe(t)), Ne({
               key: 1,
               ref_for: !0,
-              ref: (a) => W(a, t.value),
+              ref: (a) => K(a, t.value),
               role: "tab",
               "data-tabes-item": "",
               "aria-selected": s.modelValue === t.value,
               disabled: t.disabled,
-              class: [Q(t), K[n.size]]
-            }, { ref_for: !0 }, ye(t), {
-              onClick: (a) => ce(t)
+              class: [Z(t), Y[r.size]]
+            }, { ref_for: !0 }, Oe(t), {
+              onClick: (a) => pe(t)
             }), {
-              default: Y(() => [
-                t.icon ? (f(), A(w, {
+              default: re(() => [
+                t.icon ? (v(), O(y, {
                   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", {
+                }, null, 8, ["icon", "class"])) : j("", !0),
+                u("span", {
                   class: l(["whitespace-nowrap z-20 relative", s.textClass])
-                }, Z(U(t)), 3)
+                }, ne(_(t)), 3)
               ]),
               _: 2
-            }, 1040, ["aria-selected", "disabled", "class", "onClick"])), r, 1)
+            }, 1040, ["aria-selected", "disabled", "class", "onClick"])), n, 0)
           ], 64))), 128))
-        ], 10, Te)
+        ], 10, _e)
       ], 544),
-      M(y(re, {
-        direction: "right",
-        color: G.value,
+      A(w(ce, {
+        direction: Ve.value,
+        color: X.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: l(["z-10 pointer-events-none", r.variant === "line" ? "" : "rounded-e-lg"])
+      }, null, 8, ["direction", "color", "class"]), [
+        [F, z.value]
       ]),
-      M(c("div", {
-        class: l(["right-0 pr-1", N.value])
+      A(u("div", {
+        class: l(["end-0 pe-1", J.value])
       }, [
-        c("button", {
-          onClick: r[2] || (r[2] = (t) => q(200)),
+        u("button", {
+          onClick: ve,
           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",
+          w(y, {
+            icon: Be.value,
             class: "w-5 h-5"
-          })
+          }, null, 8, ["icon"])
         ])
       ], 2), [
-        [L, V.value]
+        [F, z.value]
       ])
-    ], 10, Ee));
+    ], 10, Ze));
   }
 });
 export {
-  Qe as default
+  ut as default
 };

package/components/Tabes/tabes.utils.d.ts

@@ -12,3 +12,26 @@ export declare function isTabActive(option: TabesOption, modelValue: string | nu
  * For menu tabs, returns the parent tab's value when a child is selected.
  */
 export declare function getActiveMarkerKey(options: TabesOption[], modelValue: string | number): string | number | undefined;
+/** Start/end (inline-edge) scroll overflow of a horizontal tab strip. */
+export interface TabesScrollOverflow {
+    /** More content is hidden past the inline-start edge. */
+    canScrollStart: boolean;
+    /** More content is hidden past the inline-end edge. */
+    canScrollEnd: boolean;
+}
+/**
+ * Compute inline-start / inline-end scroll overflow for a horizontal tab strip,
+ * shared by `Tabes` and `NavbarTabs` so both track affordances identically.
+ *
+ * Direction-agnostic: modern engines report `scrollLeft` as ≤ 0 under RTL
+ * (start = 0, end grows negative), so the magnitude is the distance scrolled
+ * from the inline-start edge in either direction. `itemSelector` is an optional
+ * guard — with no matching items there is nothing to scroll.
+ */
+export declare function getTabesScrollOverflow(el: HTMLElement | null | undefined, itemSelector?: string): TabesScrollOverflow;
+/**
+ * Smoothly step a tab strip one page toward its inline-start / inline-end edge.
+ * `scrollBy({ left })` is physical, so the sign flips under RTL where
+ * inline-start sits on the physical right.
+ */
+export declare function scrollTabesStrip(el: HTMLElement | null | undefined, toward: 'start' | 'end', amount: number): void;