@indielayer/ui 2.0.0 → 2.1.0

package/lib/components/tab/Tab.vue_vue_type_script_setup_true_lang.js

@@ -6,32 +6,82 @@ import { useCommon as i } from "../../composables/useCommon.js";
 import a from "../icon/Icon.js";
 import { closeIcon as o } from "../../common/icons.js";
 import s from "../link/Link.js";
-import { useMutationObserver as c } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.34_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
-import { Teleport as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, defineComponent as h, inject as g, normalizeClass as _, normalizeStyle as v, onMounted as y, openBlock as b, reactive as x, ref as S, renderSlot as C, resolveDynamicComponent as w, toDisplayString as T, unref as E, withCtx as D } from "vue";
+import c from "../tooltip/Tooltip.js";
+import { useMutationObserver as l } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.34_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import { Teleport as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createSlots as g, createTextVNode as _, defineComponent as v, inject as y, normalizeClass as b, normalizeStyle as x, onBeforeUnmount as S, onMounted as C, openBlock as w, reactive as T, ref as E, renderSlot as D, resolveDynamicComponent as O, toDisplayString as k, unref as A, withCtx as j } from "vue";
 //#region src/components/tab/Tab.vue?vue&type=script&setup=true&lang.ts
-var O = {
+var M = {
 	...i.props(),
-	value: { type: [String, Number] },
+	size: {
+		type: String,
+		validator: (e) => i.validators().size.includes(e),
+		description: "Tab size. Falls back to the parent tab group size when omitted."
+	},
+	value: {
+		type: [String, Number],
+		description: "Value used to select this tab in the group."
+	},
 	tag: {
 		type: String,
-		default: "button"
+		default: "button",
+		description: "Root element tag when not using `to`."
 	},
-	to: [String, Object],
-	label: String,
-	icon: String,
-	disabled: Boolean,
-	exact: Boolean,
-	removable: r()
-}, k = /* @__PURE__ */ h({
+	to: {
+		type: [String, Object],
+		description: "Vue Router location; renders as a link when set."
+	},
+	label: {
+		type: String,
+		description: "Visible label. Defaults to `value` when omitted."
+	},
+	icon: {
+		type: String,
+		description: "Icon name shown before the label."
+	},
+	tooltip: {
+		type: String,
+		description: "Tooltip text. Prefer the tooltip slot for custom content."
+	},
+	tooltipPosition: {
+		type: String,
+		default: "top",
+		description: "Tooltip placement relative to the tab."
+	},
+	disabled: {
+		type: Boolean,
+		description: "Prevents selecting this tab."
+	},
+	exact: {
+		type: Boolean,
+		description: "Requires exact route match when using `to`."
+	},
+	removable: r("Shows a remove control that emits `remove`.")
+}, N = /* @__PURE__ */ v({
 	name: "XTab",
 	validators: { ...i.validators() },
-	props: O,
+	docs: {
+		slots: {
+			default: "Tab panel content shown when this tab is selected.",
+			tab: "Custom tab trigger content. Slot props: label, value, size, icon.",
+			tooltip: "Custom tooltip content; overrides the `tooltip` prop."
+		},
+		emits: { remove: "Emitted when the remove control is clicked." }
+	},
+	props: M,
 	emits: ["remove"],
 	setup(r) {
-		let i = r, h = t("Tab", i), O = u(() => j.value?.$el?.href || i.value), k = u(() => i.label || i.value), A = S(null), j = S(null), M = g(e, {
-			tabsContentRef: S(null),
+		let i = r, v = t("Tab", i), M = d(() => L.value?.$el?.href || i.value), N = d(() => !(i.icon && (i.label === void 0 || i.label === ""))), P = d(() => i.label || i.value), F = d(() => {
+			if (!N.value) {
+				if (i.tooltip) return i.tooltip;
+				if (i.label) return i.label;
+				if (M.value !== void 0 && M.value !== null) return String(M.value);
+			}
+		}), I = E(null), L = E(null), R = y(e, {
+			tabsContentRef: E(null),
 			activateTab: () => {},
-			state: x({
+			registerTab: () => {},
+			unregisterTab: () => {},
+			state: T({
 				active: void 0,
 				variant: "line",
 				ghost: !1,
@@ -40,100 +90,121 @@ var O = {
 				size: "md",
 				color: "primary"
 			})
-		}), N = u(() => M.state.exact || i.exact), P = u(() => i.size || M.state.size);
-		y(() => {
-			A.value = M.tabsContentRef.value, i.to && j.value && (F(), c(j.value.$el, F, {
+		}), z = d(() => R.state.exact || i.exact), B = d(() => i.size ?? R.state.size ?? "md");
+		C(() => {
+			I.value = R.tabsContentRef.value, M.value !== void 0 && R.registerTab(M.value), i.to && L.value && (V(), l(L.value.$el, V, {
 				attributes: !0,
 				attributeFilter: ["class"]
 			}));
+		}), S(() => {
+			M.value !== void 0 && R.unregisterTab(M.value);
 		});
-		function F() {
-			j.value && j.value.$el && i.to && j.value.$el.classList.contains(N.value ? "router-link-exact-active" : "router-link-active") && M.activateTab(O.value);
+		function V() {
+			L.value && L.value.$el && i.to && L.value.$el.classList.contains(z.value ? "router-link-exact-active" : "router-link-active") && R.activateTab(M.value);
 		}
-		let I = u(() => M.state.active === O.value), L = u(() => M.state.color);
-		function R(e) {
+		let H = d(() => R.state.active === M.value), U = d(() => R.state.color);
+		function W(e) {
 			if (i.disabled) {
 				e.preventDefault(), e.stopPropagation();
 				return;
 			}
-			!i.to && O.value !== void 0 && M.activateTab(O.value);
+			!i.to && M.value !== void 0 && R.activateTab(M.value);
 		}
-		let { styles: z, classes: B, className: V } = n("Tab", {}, S({
+		let G = d(() => R.state.variant === "block" || R.state.variant === "compact"), { styles: K, classes: q, className: J } = n("Tab", {}, d(() => ({
 			...i,
-			size: P.value,
-			exact: N.value
-		}), {
-			...M.state,
-			selected: I
+			size: B.value,
+			exact: z.value
+		})), {
+			...R.state,
+			selected: H,
+			showLabel: N
 		});
-		return (e, t) => (b(), d(w(e.to ? s : e.tag), {
-			ref_key: "elRef",
-			ref: j,
-			type: e.tag === "button" ? "button" : void 0,
-			"data-value": O.value,
-			to: e.to,
-			color: I.value ? L.value : void 0,
-			style: v([E(z), e.to && I.value && E(M).state.variant === "block" ? "--x-link-text: var(--x-tab-group-text); --x-link-text-hover: var(--x-tab-group-text);" : ""]),
-			class: _([
-				E(V),
-				E(B).wrapper,
-				"shrink-0",
-				{
-					"flex-1": E(M).state.grow,
-					"text-[color:var(--x-tab-group-text)] dark:text-[color:var(--x-tab-group-dark-text)]": I.value,
-					"cursor-pointer": !e.disabled,
-					"cursor-not-allowed": e.disabled,
-					"cursor-not-allowed text-secondary-500": e.disabled && !I.value
-				}
-			]),
-			"aria-disabled": e.disabled ? "true" : void 0,
-			"aria-selected": I.value ? "true" : "false",
-			onClick: R
-		}, {
-			default: D(() => [C(e.$slots, "tab", {
-				label: e.label,
-				value: e.value,
-				size: P.value,
-				icon: e.icon
-			}, () => [m("div", { class: _(E(B).content) }, [
-				e.icon ? (b(), d(a, {
+		return (e, t) => (w(), f(c, {
+			position: e.tooltipPosition,
+			"data-value": M.value,
+			class: b(["shrink-0", { "flex-1": A(R).state.grow }])
+		}, g({
+			default: j(() => [(w(), f(O(e.to ? s : e.tag), {
+				ref_key: "elRef",
+				ref: L,
+				type: e.tag === "button" ? "button" : void 0,
+				to: e.to,
+				color: H.value ? U.value : void 0,
+				style: x([A(K), e.to && H.value && G.value ? "--x-link-text: var(--x-tab-group-text); --x-link-text-hover: var(--x-tab-group-text);" : ""]),
+				class: b([
+					A(J),
+					A(q).wrapper,
+					"flex items-center justify-center",
+					{
+						"w-full": A(R).state.grow,
+						"text-[color:var(--x-tab-group-text)] dark:text-[color:var(--x-tab-group-dark-text)]": H.value,
+						"cursor-pointer": !e.disabled,
+						"cursor-not-allowed": e.disabled,
+						"cursor-not-allowed text-secondary-500": e.disabled && !H.value
+					}
+				]),
+				"aria-label": F.value,
+				"aria-disabled": e.disabled ? "true" : void 0,
+				"aria-selected": H.value ? "true" : "false",
+				onClick: W
+			}, {
+				default: j(() => [D(e.$slots, "tab", {
+					label: e.label,
+					value: e.value,
+					size: B.value,
+					icon: e.icon
+				}, () => [h("div", { class: b(A(q).content) }, [
+					e.icon ? (w(), f(a, {
+						key: 0,
+						icon: e.icon,
+						size: B.value,
+						class: b(A(q).icon)
+					}, null, 8, [
+						"icon",
+						"size",
+						"class"
+					])) : p("", !0),
+					N.value ? (w(), m("div", {
+						key: 1,
+						class: b(A(q).label)
+					}, k(P.value), 3)) : p("", !0),
+					A(v).removable ? (w(), f(a, {
+						key: 2,
+						size: "sm",
+						icon: A(o),
+						class: "ml-2 cursor-pointer hover:text-secondary-700 dark:hover:text-secondary-500 transition-colors duration-150",
+						onClick: t[0] ||= (t) => e.$emit("remove", t)
+					}, null, 8, ["icon"])) : p("", !0)
+				], 2)]), H.value && I.value ? (w(), f(u, {
+					key: 0,
+					to: I.value
+				}, [e.$slots.default ? (w(), m("div", {
 					key: 0,
-					icon: e.icon,
-					size: P.value,
-					class: _(E(B).icon)
-				}, null, 8, [
-					"icon",
-					"size",
-					"class"
-				])) : f("", !0),
-				m("div", { class: _(E(B).label) }, T(k.value), 3),
-				E(h).removable ? (b(), d(a, {
-					key: 1,
-					size: "sm",
-					icon: E(o),
-					class: "ml-2 cursor-pointer hover:text-secondary-700 dark:hover:text-secondary-500 transition-colors duration-150",
-					onClick: t[0] ||= (t) => e.$emit("remove", t)
-				}, null, 8, ["icon"])) : f("", !0)
-			], 2)]), I.value && A.value ? (b(), d(l, {
-				key: 0,
-				to: A.value
-			}, [e.$slots.default ? (b(), p("div", {
-				key: 0,
-				role: "tabpanel",
-				class: _(E(B).tabpanel)
-			}, [C(e.$slots, "default")], 2)) : f("", !0)], 8, ["to"])) : f("", !0)]),
-			_: 3
-		}, 8, [
-			"type",
+					role: "tabpanel",
+					class: b(A(q).tabpanel)
+				}, [D(e.$slots, "default")], 2)) : p("", !0)], 8, ["to"])) : p("", !0)]),
+				_: 3
+			}, 8, [
+				"type",
+				"to",
+				"color",
+				"style",
+				"class",
+				"aria-label",
+				"aria-disabled",
+				"aria-selected"
+			]))]),
+			_: 2
+		}, [e.$slots.tooltip || e.tooltip ? {
+			name: "tooltip",
+			fn: j(() => [D(e.$slots, "tooltip", {}, () => [_(k(e.tooltip), 1)])]),
+			key: "0"
+		} : void 0]), 1032, [
+			"position",
 			"data-value",
-			"to",
-			"color",
-			"style",
-			"class",
-			"aria-disabled",
-			"aria-selected"
+			"class"
 		]));
 	}
 });
 //#endregion
-export { k as default };
+export { N as default };

package/lib/components/tab/TabGroup.vue.d.ts

@@ -2,40 +2,53 @@ import { type PropType, type ExtractPublicPropTypes, type Ref } from 'vue';
 import { type Size } from '../../composables/useCommon';
 import { type ThemeComponent } from '../../composables/useTheme';
 declare const validators: {
-    variant: readonly ["line", "block"];
+    variant: readonly ["line", "block", "compact"];
     align: readonly ["left", "center", "right"];
     size: string[];
 };
 declare const tabGroupProps: {
-    modelValue: (StringConstructor | NumberConstructor)[];
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        description: string;
+    };
     variant: {
-        type: PropType<"block" | "line">;
+        type: PropType<"block" | "line" | "compact">;
         default: string;
+        description: string;
     };
     align: {
         type: PropType<"left" | "right" | "center">;
         default: string;
+        description: string;
     };
     ghost: import("vue").Prop<boolean | undefined>;
     grow: import("vue").Prop<boolean | undefined>;
-    exact: BooleanConstructor;
+    exact: {
+        type: BooleanConstructor;
+        description: string;
+    };
     fullWidth: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
     };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
     size: {
         readonly type: PropType<Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 };
 export type TabGroupInjection = {
     tabsContentRef: Ref<HTMLElement | null>;
-    activateTab: (tab: string | number) => void;
+    activateTab: (tab: string | number | null) => void;
+    registerTab: (tab: string | number) => void;
+    unregisterTab: (tab: string | number) => void;
     state: {
         active: string | number | undefined;
         variant: TabGroupVariant;
@@ -53,56 +66,78 @@ type InternalClasses = 'wrapper' | 'list' | 'tracker' | 'scroller';
 export interface TabGroupTheme extends ThemeComponent<TabGroupProps, InternalClasses> {
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    modelValue: (StringConstructor | NumberConstructor)[];
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        description: string;
+    };
     variant: {
-        type: PropType<"block" | "line">;
+        type: PropType<"block" | "line" | "compact">;
         default: string;
+        description: string;
     };
     align: {
         type: PropType<"left" | "right" | "center">;
         default: string;
+        description: string;
     };
     ghost: import("vue").Prop<boolean | undefined>;
     grow: import("vue").Prop<boolean | undefined>;
-    exact: BooleanConstructor;
+    exact: {
+        type: BooleanConstructor;
+        description: string;
+    };
     fullWidth: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
     };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
     size: {
         readonly type: PropType<Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: (StringConstructor | NumberConstructor)[];
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        description: string;
+    };
     variant: {
-        type: PropType<"block" | "line">;
+        type: PropType<"block" | "line" | "compact">;
         default: string;
+        description: string;
     };
     align: {
         type: PropType<"left" | "right" | "center">;
         default: string;
+        description: string;
     };
     ghost: import("vue").Prop<boolean | undefined>;
     grow: import("vue").Prop<boolean | undefined>;
-    exact: BooleanConstructor;
+    exact: {
+        type: BooleanConstructor;
+        description: string;
+    };
     fullWidth: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
     };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
     size: {
         readonly type: PropType<Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -111,7 +146,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     size: Size;
     align: "left" | "right" | "center";
     exact: boolean;
-    variant: "block" | "line";
+    variant: "block" | "line" | "compact";
     fullWidth: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;

package/lib/components/tab/TabGroup.vue_vue_type_script_setup_true_lang.js

@@ -9,114 +9,158 @@ import { useMutationObserver as s, useResizeObserver as c } from "../../node_mod
 import l from "../scroll/Scroll.js";
 import { computed as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, nextTick as h, normalizeClass as g, normalizeStyle as _, onMounted as v, openBlock as y, provide as b, reactive as x, ref as S, renderSlot as C, unref as w, vShow as T, watch as E, watchEffect as D, withCtx as O, withDirectives as k } from "vue";
 //#region src/components/tab/TabGroup.vue?vue&type=script&setup=true&lang.ts
-var A = /* @__PURE__ */ m({
+var A = { class: "relative overflow-x-clip" }, j = /* @__PURE__ */ m({
 	name: "XTabGroup",
 	validators: {
 		...a.validators(),
-		variant: ["line", "block"],
+		variant: [
+			"line",
+			"block",
+			"compact"
+		],
 		align: [
 			"left",
 			"center",
 			"right"
 		]
 	},
+	docs: {
+		slots: { default: "Tab triggers (typically x-tab children)." },
+		emits: { "update:modelValue": "Emitted when the active tab changes (v-model)." }
+	},
 	props: {
 		...a.props(),
 		...n.props("primary"),
-		modelValue: [String, Number],
+		modelValue: {
+			type: [String, Number],
+			description: "Active tab value (v-model)."
+		},
 		variant: {
 			type: String,
-			default: "line"
+			default: "line",
+			description: "Visual style of the tab list (line, block, or compact)."
 		},
 		align: {
 			type: String,
-			default: "left"
+			default: "left",
+			description: "Horizontal alignment of tabs in the list."
+		},
+		ghost: i("Subtle styling with less background emphasis."),
+		grow: i("Stretches tabs to fill the list width."),
+		exact: {
+			type: Boolean,
+			description: "Default exact route matching for linked tabs."
 		},
-		ghost: i(),
-		grow: i(),
-		exact: Boolean,
 		fullWidth: {
 			type: Boolean,
-			default: !0
+			default: !0,
+			description: "Stretches the tab list to the container width."
 		}
 	},
 	emits: ["update:modelValue"],
 	setup(n, { emit: i }) {
-		let a = n, m = t("TabGroup", a), A = i, j = S(null), M = S(null), N = S(null), P = S(null), F = S(null), I = S();
+		let a = n, m = t("TabGroup", a), j = i, M = S(null), N = S(null), P = S(null), F = S(null), I = S(null), L = S();
 		D(() => {
-			I.value = a.modelValue;
+			L.value = a.modelValue;
 		});
-		let L = x({
-			active: u(() => I.value),
+		let R = x({
+			active: u(() => L.value),
 			variant: u(() => a.variant),
 			ghost: u(() => m.value.ghost ?? !1),
 			grow: u(() => m.value.grow ?? !1),
 			exact: u(() => a.exact),
 			size: u(() => a.size),
 			color: u(() => a.color)
-		});
-		function R(e) {
-			I.value = e, A("update:modelValue", e);
+		}), z = S(!0), B = [];
+		function V(e) {
+			L.value = e, j("update:modelValue", e);
+		}
+		function H(e) {
+			B.includes(e) || B.push(e);
+		}
+		function U(e) {
+			let t = B.indexOf(e);
+			if (t === -1 || (B.splice(t, 1), L.value !== e)) return;
+			let n = B[Math.min(t, B.length - 1)];
+			n === void 0 ? (V(null), z.value = !1) : V(n);
 		}
 		b(e, {
-			tabsContentRef: F,
-			activateTab: R,
-			state: L
+			tabsContentRef: I,
+			activateTab: V,
+			registerTab: H,
+			unregisterTab: U,
+			state: R
 		});
-		let z = o(async (e) => {
-			if (e === void 0) return;
+		let W = o(async (e) => {
+			if (e == null) {
+				z.value = !1;
+				return;
+			}
 			await h();
-			let t = P.value?.querySelector(`[data-value="${e}"]`);
-			if (!t || !N.value || (N.value.style.left = `${t.offsetLeft}px`, N.value.style.width = `${t.offsetWidth}px`, !P.value || !j.value)) return;
-			let n = t.offsetLeft - (P.value.getBoundingClientRect().width - t.getBoundingClientRect().width) / 2;
-			j.value.scrollEl && j.value.scrollEl.scrollTo({
-				left: n,
+			let t = F.value?.querySelector(`[data-value="${e}"]`);
+			if (!t || !P.value) {
+				z.value = !1;
+				return;
+			}
+			if (z.value = !0, P.value.style.left = `${t.offsetLeft}px`, P.value.style.width = `${t.offsetWidth}px`, !F.value || !M.value?.scrollEl) return;
+			let n = M.value.scrollEl, r = Math.max(0, F.value.scrollWidth - n.clientWidth), i = n.scrollLeft, a = i + n.clientWidth, o = t.offsetLeft, s = o + t.offsetWidth, c = o >= i && s <= a;
+			if (r <= 0) {
+				n.scrollLeft !== 0 && n.scrollTo({ left: 0 }), n.dispatchEvent(new CustomEvent("scroll"));
+				return;
+			}
+			if (c) {
+				n.dispatchEvent(new CustomEvent("scroll"));
+				return;
+			}
+			let l = i;
+			o < i ? l = o : s > a && (l = s - n.clientWidth), l = Math.max(0, Math.min(l, r)), l === i ? n.dispatchEvent(new CustomEvent("scroll")) : n.scrollTo({
+				left: l,
 				behavior: "smooth"
 			});
-		}, 100, !0), B = S(!0);
-		function V() {
-			P.value?.querySelector(".router-link-active") ? B.value = !0 : (R(null), B.value = !1);
+		}, 100, !0);
+		function G() {
+			F.value?.querySelector(".router-link-active") ? z.value = !0 : (V(null), z.value = !1);
 		}
-		E(() => I.value, (e) => {
-			z(e);
+		E(() => L.value, (e) => {
+			W(e);
 		}), v(() => {
-			P.value?.querySelector(".x-link") && s(P.value, V, {
+			F.value?.querySelector(".x-link") && s(F.value, G, {
 				attributes: !0,
 				subtree: !0,
 				attributeFilter: ["class"]
-			}), z(I.value);
-		}), c(P, () => {
-			z(I.value);
+			}), W(L.value);
+		}), c(F, () => {
+			W(L.value);
 		});
-		let { styles: H, classes: U, className: W } = r("TabGroup", {}, a);
+		let { styles: K, classes: q, className: J } = r("TabGroup", {}, a);
 		return (e, t) => (y(), d("div", null, [f("div", {
 			ref_key: "wrapperRef",
-			ref: M,
-			class: g(["relative", [w(W), w(U).wrapper]]),
-			style: _(w(H))
+			ref: N,
+			class: g(["relative", [w(J), w(q).wrapper]]),
+			style: _(w(K))
 		}, [p(l, {
 			ref_key: "scrollRef",
-			ref: j,
+			ref: M,
 			scrollbar: !1,
 			horizontal: "",
 			mousewheel: "",
-			class: g(w(U).scroller)
+			class: g(w(q).scroller)
 		}, {
-			default: O(() => [f("div", {
+			default: O(() => [f("div", A, [f("div", {
 				ref_key: "tabsRef",
-				ref: P,
-				class: g(["relative", w(U).list])
+				ref: F,
+				class: g(["relative", w(q).list])
 			}, [C(e.$slots, "default")], 2), k(f("div", {
 				ref_key: "trackerRef",
-				ref: N,
-				class: g(w(U).tracker)
-			}, null, 2), [[T, B.value]])]),
+				ref: P,
+				class: g(["pointer-events-none", w(q).tracker])
+			}, null, 2), [[T, z.value]])])]),
 			_: 3
 		}, 8, ["class"])], 6), f("div", {
 			ref_key: "tabsContentRef",
-			ref: F
+			ref: I
 		}, null, 512)]));
 	}
 });
 //#endregion
-export { A as default };
+export { j as default };