vlite3 1.4.31 → 1.4.33

package/components/Tabes/Tabes.vue2.js

@@ -1,11 +1,12 @@
-import { defineComponent as fe, ref as g, computed as f, watch as p, onMounted as me, openBlock as m, createElementBlock as k, normalizeClass as o, withDirectives as C, createVNode as h, vShow as z, createElementVNode as c, normalizeStyle as ve, createCommentVNode as O, Fragment as W, renderList as ge, unref as K, createBlock as B, withCtx as P, toDisplayString as F, resolveDynamicComponent as be, mergeProps as pe, nextTick as he } from "vue";
-import { useResizeObserver as G } from "@vueuse/core";
-import { getActiveMarkerKey as xe, isMenuTab as H, isTabActive as q } from "./tabes.utils.js";
-import x from "../Icon.vue.js";
-import J from "../FadeOverlay/FadeOverlay.vue.js";
-import we from "../Dropdown/Dropdown.vue.js";
-import { $t as ye } from "../../utils/i18n.js";
-const ke = ["dir"], Ce = ["data-variant"], ze = ["aria-selected", "aria-expanded", "disabled"], Le = /* @__PURE__ */ fe({
+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({
   __name: "Tabes",
   props: {
     options: {},
@@ -19,105 +20,126 @@ const ke = ["dir"], Ce = ["data-variant"], ze = ["aria-selected", "aria-expanded
     direction: { default: "ltr" }
   },
   emits: ["update:modelValue", "change", "menu-select", "menu-open", "menu-close"],
-  setup(l, { emit: Q }) {
-    const n = l, v = Q, w = g(null), u = g(null), y = g(/* @__PURE__ */ new Map()), S = g(!1), $ = g(!1), i = () => {
+  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: t, scrollWidth: a, clientWidth: e } = u.value;
-      S.value = t > 1, $.value = Math.ceil(t + e) < a - 1;
-    }, M = (t) => {
-      u.value && u.value.scrollBy({ left: t, behavior: "smooth" });
-    }, L = f(() => xe(n.options, n.modelValue)), I = () => {
-      if (!u.value || !w.value) return;
-      const t = L.value;
-      if (t === void 0) return;
-      const a = y.value.get(t);
-      if (!a) return;
-      const e = u.value, r = a.getBoundingClientRect(), s = e.getBoundingClientRect(), b = 40;
-      r.left < s.left + b ? e.scrollBy({
-        left: r.left - s.left - b,
+      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();
+      }));
+    }, 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;
+      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(
+          t,
+          a.left - o.left - g
+        ),
         behavior: "smooth"
-      }) : r.right > s.right - b && e.scrollBy({
-        left: r.right - s.right + b,
+      }) : a.right > o.right - g && t.scrollBy({
+        left: ne(
+          t,
+          a.right - o.right + g
+        ),
         behavior: "smooth"
       });
-    };
-    G(u, i);
-    const T = (t, a) => {
-      t ? y.value.set(a, t) : y.value.delete(a);
-    }, R = g({
+    }, 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({
       width: "0px",
       height: "0px",
       transform: "translate(0px, 0px)",
       opacity: 0
-    }), V = g(!1), d = async () => {
-      await he();
-      const t = w.value, a = L.value, e = a !== void 0 ? y.value.get(a) : void 0;
-      if (!t || !e) {
-        R.value.opacity = 0;
+    }), F = h(!1), P = () => {
+      b.value.opacity !== 0 && (b.value = {
+        ...b.value,
+        opacity: 0
+      });
+    }, le = async () => {
+      await Ae();
+      const e = k.value, r = D.value, t = r !== void 0 ? v.get(r) : void 0;
+      if (!e || !t) {
+        P();
         return;
       }
-      const r = t.getBoundingClientRect(), s = e.getBoundingClientRect(), b = s.left - r.left, ce = s.top - r.top, ue = s.width, de = s.height;
-      R.value = {
-        width: `${ue}px`,
-        height: `${de}px`,
-        transform: `translate(${b}px, ${ce}px)`,
+      if (e.offsetWidth <= 0 || t.offsetWidth <= 0) {
+        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)`,
         opacity: 1
-      }, V.value || setTimeout(() => {
-        V.value = !0;
-      }, 50);
+      }, 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;
+      })));
+    };
+    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 });
+      }));
     };
-    G(w, () => {
-      d(), i();
-    }), p(
+    _(u, () => i()), _(k, () => i()), p(
       () => n.modelValue,
-      async () => {
-        await d(), I();
-      }
+      () => i({ ensureVisible: !0 })
     ), p(
       () => n.options,
-      async () => {
-        await d(), i();
-      },
-      { deep: !0 }
+      () => i()
     ), p(
       () => n.size,
-      async () => {
-        await d(), i();
-      }
+      () => i()
     ), p(
       () => n.block,
-      async () => {
-        await d(), i();
-      }
+      () => i()
     ), p(
       () => n.wrap,
-      async () => {
-        await d(), i();
-      }
-    ), me(async () => {
-      await d(), i(), setTimeout(i, 100), setTimeout(I, 100);
+      () => i()
+    ), p(
+      () => n.variant,
+      () => i()
+    ), Ve(() => {
+      H({ ensureVisible: !0 });
+    }), ze(() => {
+      cancelAnimationFrame(O), cancelAnimationFrame(T), cancelAnimationFrame(R), z = !1, S = !1, v.clear();
     });
-    const U = f(() => {
-      const t = n.variant === "line";
-      return n.block || t ? "flex w-full relative" : "inline-flex max-w-full relative";
-    }), j = f(() => [
+    const ie = d(() => {
+      const e = n.variant === "line";
+      return n.block || e ? "flex w-full relative" : "inline-flex max-w-full relative";
+    }), N = d(() => [
       "absolute top-0 bottom-0 z-20 flex items-center pointer-events-none transition-opacity duration-200",
       n.variant === "line" ? "pb-[10px]" : ""
-    ]), X = (t) => {
-      t.disabled || H(t) || (v("update:modelValue", t.value), v("change", t.value));
-    }, Y = (t, a) => {
-      if (t.disabled) return;
-      const e = a.value;
-      e != null && (v("update:modelValue", e), v("change", e), v("menu-select", { value: e, option: a.option, tab: t }));
-    }, Z = (t) => {
-      v("menu-open", t);
-    }, _ = (t) => {
-      v("menu-close", t), d();
-    }, ee = f(() => {
-      const t = n.variant === "line";
-      return (n.block || n.wrap) && !t ? "flex-1 min-w-max" : "shrink-0";
-    }), te = (t) => t.dropdown?.direction ?? n.direction, ne = f(() => {
-      const t = n.variant === "line", a = {
+    ]), ce = (e) => {
+      e.disabled || ee(e) || (m("update:modelValue", e.value), m("change", e.value));
+    }, ue = (e, r) => {
+      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 = {
         surface: "bg-secondary/80 p-1",
         primary: "bg-secondary p-1",
         secondary: "bg-secondary p-1",
@@ -125,52 +147,52 @@ const ke = ["dir"], Ce = ["data-variant"], ze = ["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"
-      }, e = n.wrap && !t ? "flex-wrap" : "";
-      return [`${n.block || t ? "flex min-w-full w-max" : "inline-flex"} rounded-lg relative isolate ${e}`, a[n.variant]];
-    }), A = f(() => 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)"), D = {
+      }, 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 = {
       sm: "text-xs px-2.5 py-1",
       md: "-text-fs-2 px-3 py-1",
       lg: "-text-fs-1 px-4 py-1"
-    }, re = f(() => {
-      const t = n.variant === "line", a = t ? "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", e = (n.block || n.wrap) && !t ? "flex-1" : "";
-      return [a, e];
-    }), E = (t) => {
-      const a = q(t, n.modelValue), e = n.variant === "line";
-      let r = "";
-      if (a)
-        if (e)
-          r = n.wrap ? "text-primary !border-primary" : "text-primary";
+    }, 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)
+        if (t)
+          a = n.wrap ? "text-primary !border-primary" : "text-primary";
         else
           switch (n.variant) {
             case "surface":
-              r = n.wrap ? "text-foreground bg-[#ffff] dark:bg-[#0B0B0B] shadow-sm" : "text-foreground";
+              a = n.wrap ? "text-foreground bg-[#ffff] dark:bg-[#0B0B0B] shadow-sm" : "text-foreground";
               break;
             case "primary":
-              r = n.wrap ? "text-primary-foreground bg-primary" : "text-primary-foreground";
+              a = n.wrap ? "text-primary-foreground bg-primary" : "text-primary-foreground";
               break;
             case "secondary":
-              r = n.wrap ? "text-secondary bg-secondary-foreground" : "text-secondary";
+              a = n.wrap ? "text-secondary bg-secondary-foreground" : "text-secondary";
               break;
             case "danger":
-              r = n.wrap ? "text-danger-fg bg-danger" : "text-danger-fg";
+              a = n.wrap ? "text-danger-fg bg-danger" : "text-danger-fg";
               break;
             case "success":
-              r = n.wrap ? "text-success-fg bg-success" : "text-success-fg";
+              a = n.wrap ? "text-success-fg bg-success" : "text-success-fg";
               break;
             case "outline":
-              r = n.wrap ? "text-accent-foreground bg-accent/50 ring-1 ring-border" : "text-accent-foreground";
+              a = n.wrap ? "text-accent-foreground bg-accent/50 ring-1 ring-border" : "text-accent-foreground";
               break;
             default:
-              r = "text-foreground";
+              a = "text-foreground";
           }
       else
-        r = e ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
-      const s = t.disabled ? "opacity-50 cursor-not-allowed" : "";
-      return [re.value, r, n?.tabClass, s].join(" ");
-    }, ae = f(() => {
-      const a = `absolute left-0 top-0 z-0 pointer-events-none ${V.value ? "transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)]" : ""}`;
-      return n.variant === "line" ? `${a} !h-[2px] !top-auto bottom-0` : `${a} rounded-md shadow-sm`;
-    }), se = () => ({
+        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 = () => ({
       surface: "bg-[#ffff] dark:bg-[#0B0B0B]",
       primary: "bg-primary",
       secondary: "bg-secondary-foreground",
@@ -178,175 +200,175 @@ const ke = ["dir"], Ce = ["data-variant"], ze = ["aria-selected", "aria-expanded
       success: "bg-success",
       outline: "bg-accent/50 ring-1 ring-border",
       line: "bg-primary"
-    })[n.variant], N = (t) => t.labelI18n ? ye(t.labelI18n) : t.label, oe = (t) => t.to ? "router-link" : t.href ? "a" : "button", le = (t) => t.to ? { to: t.to } : t.href ? { href: t.href, target: "_blank", rel: "noopener noreferrer" } : { type: "button" }, ie = (t) => [
+    })[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",
       "opacity-70 shrink-0 transition-transform duration-200",
-      t ? "rotate-180" : ""
+      e ? "rotate-180" : ""
     ].join(" ");
-    return (t, a) => (m(), k("div", {
-      class: o([U.value, "group"]),
-      dir: l.direction
+    return (e, r) => (f(), $("div", {
+      class: l([ie.value, "group"]),
+      dir: s.direction
     }, [
-      C(h(J, {
+      M(y(re, {
         direction: "left",
-        color: A.value,
+        color: G.value,
         coverage: "100px",
         blur: "40px",
         easing: "smooth",
         tintOpacity: 1,
-        class: o(["z-10 pointer-events-none", n.variant === "line" ? "" : "rounded-l-lg"])
+        class: l(["z-10 pointer-events-none", n.variant === "line" ? "" : "rounded-l-lg"])
       }, null, 8, ["color", "class"]), [
-        [z, S.value]
+        [L, C.value]
       ]),
-      C(c("div", {
-        class: o(["left-0 pl-1", j.value])
+      M(c("div", {
+        class: l(["left-0 pl-1", N.value])
       }, [
         c("button", {
-          onClick: a[0] || (a[0] = (e) => M(-200)),
+          onClick: r[0] || (r[0] = (t) => q(-200)),
           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"
         }, [
-          h(x, {
+          y(w, {
             icon: "lucide:chevron-left",
             class: "w-5 h-5"
           })
         ])
       ], 2), [
-        [z, S.value]
+        [L, C.value]
       ]),
       c("div", {
         ref_key: "scrollRef",
         ref: u,
-        class: "flex-1 min-w-0 max-w-full overflow-x-auto scrollbar-hide scroll-smooth",
-        onScroll: i
+        class: "tabes-scroll flex-1 min-w-0 max-w-full overflow-x-auto scrollbar-hide scroll-smooth",
+        onScroll: se
       }, [
         c("div", {
           ref_key: "containerRef",
-          ref: w,
-          class: o([ne.value, "tabes-container"]),
+          ref: k,
+          class: l([be.value, "tabes-container"]),
           role: "tablist",
           "data-variant": n.variant,
           "data-tabes": ""
         }, [
-          l.modelValue !== void 0 && !l.wrap ? (m(), k("div", {
+          s.modelValue !== void 0 && !s.wrap ? (f(), $("div", {
             key: 0,
-            class: o([ae.value, se()]),
-            style: ve(R.value)
-          }, null, 6)) : O("", !0),
-          (m(!0), k(W, null, ge(l.options, (e) => (m(), k(W, {
-            key: e.value
+            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, {
+            key: t.value
           }, [
-            K(H)(e) ? (m(), B(we, {
+            X(ee)(t) ? (f(), A(Fe, {
               key: 0,
-              options: e.menu,
-              selected: l.modelValue,
-              disabled: e.disabled,
-              direction: te(e),
-              position: e.dropdown?.position,
-              offset: e.dropdown?.offset ?? [0, 8],
-              searchable: e.dropdown?.searchable ?? !1,
-              "close-on-select": e.dropdown?.closeOnSelect ?? !0,
-              "max-height": e.dropdown?.maxHeight ?? "300px",
-              "min-width": e.dropdown?.minWidth ?? "160px",
-              width: e.dropdown?.width,
-              "menu-id": e.dropdown?.menuId ?? `tabes-menu-${e.value}`,
-              teleport: e.dropdown?.teleport ?? !0,
+              options: t.menu,
+              selected: s.modelValue,
+              disabled: t.disabled,
+              direction: ve(t),
+              position: t.dropdown?.position,
+              offset: t.dropdown?.offset ?? [0, 8],
+              searchable: t.dropdown?.searchable ?? !1,
+              "close-on-select": t.dropdown?.closeOnSelect ?? !0,
+              "max-height": t.dropdown?.maxHeight ?? "300px",
+              "min-width": t.dropdown?.minWidth ?? "160px",
+              width: t.dropdown?.width,
+              "menu-id": t.dropdown?.menuId ?? `tabes-menu-${t.value}`,
+              teleport: t.dropdown?.teleport ?? !0,
               "show-selected-label": !1,
               "show-selected-icon": !1,
               "toggle-selection": !1,
               selectable: !0,
-              class: o(["tabes-menu", "inline-flex!", ee.value]),
-              onOnSelect: (r) => Y(e, r),
-              onOnOpen: () => Z(e),
-              onOnClose: () => _(e)
+              class: l(["tabes-menu", "inline-flex!", me.value]),
+              onOnSelect: (a) => ue(t, a),
+              onOnOpen: () => de(t),
+              onOnClose: () => fe(t)
             }, {
-              trigger: P(({ isOpen: r }) => [
+              trigger: Y(({ isOpen: a }) => [
                 c("button", {
                   ref_for: !0,
-                  ref: (s) => T(s, e.value),
+                  ref: (o) => W(o, t.value),
                   type: "button",
                   role: "tab",
                   "data-tabes-item": "",
                   "data-tabes-menu-trigger": "",
-                  "aria-selected": K(q)(e, l.modelValue),
+                  "aria-selected": X(te)(t, s.modelValue),
                   "aria-haspopup": !0,
-                  "aria-expanded": r,
-                  disabled: e.disabled,
-                  class: o([E(e), D[n.size], "w-full"])
+                  "aria-expanded": a,
+                  disabled: t.disabled,
+                  class: l([Q(t), K[n.size], "w-full"])
                 }, [
-                  e.icon ? (m(), B(x, {
+                  t.icon ? (f(), A(w, {
                     key: 0,
-                    icon: e.icon,
-                    class: o(l.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
-                  }, null, 8, ["icon", "class"])) : O("", !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: o(["whitespace-nowrap z-20 relative", l.textClass])
-                  }, F(N(e)), 3),
-                  h(x, {
+                    class: l(["whitespace-nowrap z-20 relative", s.textClass])
+                  }, Z(U(t)), 3),
+                  y(w, {
                     icon: "lucide:chevron-down",
-                    class: o(ie(r)),
+                    class: l(we(a)),
                     "aria-hidden": "true"
                   }, null, 8, ["class"])
-                ], 10, ze)
+                ], 10, je)
               ]),
               _: 2
-            }, 1032, ["options", "selected", "disabled", "direction", "position", "offset", "searchable", "close-on-select", "max-height", "min-width", "width", "menu-id", "teleport", "class", "onOnSelect", "onOnOpen", "onOnClose"])) : (m(), B(be(oe(e)), pe({
+            }, 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({
               key: 1,
               ref_for: !0,
-              ref: (r) => T(r?.$el || r, e.value),
+              ref: (a) => W(a, t.value),
               role: "tab",
               "data-tabes-item": "",
-              "aria-selected": l.modelValue === e.value,
-              disabled: e.disabled,
-              class: [E(e), D[n.size]]
-            }, { ref_for: !0 }, le(e), {
-              onClick: (r) => X(e)
+              "aria-selected": s.modelValue === t.value,
+              disabled: t.disabled,
+              class: [Q(t), K[n.size]]
+            }, { ref_for: !0 }, ye(t), {
+              onClick: (a) => ce(t)
             }), {
-              default: P(() => [
-                e.icon ? (m(), B(x, {
+              default: Y(() => [
+                t.icon ? (f(), A(w, {
                   key: 0,
-                  icon: e.icon,
-                  class: o(l.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
-                }, null, 8, ["icon", "class"])) : O("", !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: o(["whitespace-nowrap z-20 relative", l.textClass])
-                }, F(N(e)), 3)
+                  class: l(["whitespace-nowrap z-20 relative", s.textClass])
+                }, Z(U(t)), 3)
               ]),
               _: 2
-            }, 1040, ["aria-selected", "disabled", "class", "onClick"]))
+            }, 1040, ["aria-selected", "disabled", "class", "onClick"])), r, 1)
           ], 64))), 128))
-        ], 10, Ce)
+        ], 10, Te)
       ], 544),
-      C(h(J, {
+      M(y(re, {
         direction: "right",
-        color: A.value,
+        color: G.value,
         coverage: "100px",
         blur: "40",
         easing: "smooth",
         tintOpacity: 1,
-        class: o(["z-10 pointer-events-none", n.variant === "line" ? "" : "rounded-r-lg"])
+        class: l(["z-10 pointer-events-none", n.variant === "line" ? "" : "rounded-r-lg"])
       }, null, 8, ["color", "class"]), [
-        [z, $.value]
+        [L, V.value]
       ]),
-      C(c("div", {
-        class: o(["right-0 pr-1", j.value])
+      M(c("div", {
+        class: l(["right-0 pr-1", N.value])
       }, [
         c("button", {
-          onClick: a[1] || (a[1] = (e) => M(200)),
+          onClick: r[2] || (r[2] = (t) => q(200)),
           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"
         }, [
-          h(x, {
+          y(w, {
             icon: "lucide:chevron-right",
             class: "w-5 h-5"
           })
         ])
       ], 2), [
-        [z, $.value]
+        [L, V.value]
       ])
-    ], 10, ke));
+    ], 10, Ee));
   }
 });
 export {
-  Le as default
+  Qe as default
 };

package/components/Tabes/TabesMarkerGeometry.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Local-coordinate geometry helpers for the Tabes active marker.
+ *
+ * Ancestor CSS transforms (e.g. ScaleGenerator's `transform: scale(...)`)
+ * affect `getBoundingClientRect()` but not layout sizes (`offsetWidth`).
+ * Feeding visual rect sizes into local CSS `width` / `translate` would
+ * double-apply the scale. These helpers normalize measurements into the
+ * container's own CSS pixel space.
+ */
+export interface TabesMarkerGeometry {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+}
+/**
+ * Returns the horizontal transform scale currently applied to `element`
+ * (visual width ÷ layout width). `1` when unscaled or zero-sized.
+ */
+export declare const getTabesElementScaleX: (element: HTMLElement) => number;
+/**
+ * Returns the vertical transform scale currently applied to `element`.
+ */
+export declare const getTabesElementScaleY: (element: HTMLElement) => number;
+/**
+ * Measure active-tab marker geometry in `container`'s local CSS coordinates.
+ * Width/height use layout sizes; left/top normalize visual deltas by scale.
+ */
+export declare const measureTabesMarkerGeometry: (container: HTMLElement, activeElement: HTMLElement) => TabesMarkerGeometry;
+/**
+ * Convert a visual (viewport) horizontal delta into a local `scrollLeft` delta
+ * for `scrollContainer`, accounting for ancestor CSS scale transforms.
+ */
+export declare const toTabesLocalScrollDelta: (scrollContainer: HTMLElement, visualDelta: number) => number;

package/components/Tabes/TabesMarkerGeometry.js

@@ -0,0 +1,21 @@
+const s = (t, e) => {
+  if (e <= 0) return 1;
+  const o = t / e;
+  return o > 1e-3 ? o : 1;
+}, i = (t) => {
+  const e = t.getBoundingClientRect();
+  return s(e.width, t.offsetWidth);
+}, r = (t, e) => {
+  const o = t.getBoundingClientRect(), c = e.getBoundingClientRect(), n = s(o.width, t.offsetWidth), f = s(o.height, t.offsetHeight);
+  return {
+    width: e.offsetWidth,
+    height: e.offsetHeight,
+    left: (c.left - o.left) / n,
+    top: (c.top - o.top) / f
+  };
+}, h = (t, e) => e / i(t);
+export {
+  i as getTabesElementScaleX,
+  r as measureTabesMarkerGeometry,
+  h as toTabesLocalScrollDelta
+};

package/components/ThemeProvider/ThemeProvider.vue.d.ts

@@ -14,8 +14,10 @@ declare const __VLS_component: import('vue').DefineComponent<ThemeProviderProps,
     borderRadius: number;
     bgColor: string;
     primaryColor: string;
+    surfaceColor: string;
     footerBgColor: string;
     baseFontSize: number;
+    scaleSpacingWithBaseFontSize: boolean;
     headingScale: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;