@mkbabb/glass-ui 4.1.0 → 4.2.0

package/dist/tabs.js

@@ -1,27 +1,28 @@
 import { t as e } from "./cn-DJXf4yaB.js";
-import { t } from "./useLiquidFlex-UmA6LMZu.js";
-import { a as n, i as r, o as i, r as a, s as o } from "./SelectScrollDownButton-DAKCBEdW.js";
-import { i as s, n as c, r as l, t as u } from "./TooltipProvider-BJ_Y5EGX.js";
-import { t as d } from "./useDragMorph-BUgAC-zK.js";
-import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as y, defineComponent as b, mergeModels as x, mergeProps as S, nextTick as C, normalizeClass as w, normalizeStyle as ee, onBeforeUnmount as te, onMounted as T, onUnmounted as E, openBlock as D, ref as O, renderList as k, renderSlot as A, toDisplayString as j, unref as M, useModel as ne, watch as N, withCtx as P } from "vue";
+import { t } from "./useLiquidFlex-Cc6PjVJD.js";
+import { n, r } from "./writeVelocityWeight-Bh83xZfs.js";
+import { a as i, i as a, o, r as s, s as c } from "./SelectScrollDownButton-3mFHX_R-.js";
+import { i as l, n as u, r as d, t as f } from "./TooltipProvider-QQVM_80r.js";
+import { t as p } from "./useDragMorph-DGLSewwB.js";
+import { Fragment as m, computed as h, createBlock as g, createCommentVNode as _, createElementBlock as v, createElementVNode as y, createTextVNode as b, createVNode as x, defineComponent as S, mergeModels as C, mergeProps as w, nextTick as T, normalizeClass as E, normalizeStyle as D, onBeforeUnmount as ee, onMounted as O, onUnmounted as k, openBlock as A, ref as j, renderList as M, renderSlot as N, toDisplayString as P, unref as F, useModel as te, watch as I, withCtx as L } from "vue";
 //#region src/components/custom/tabs/constants.ts
-var F = 1.15, I = .82;
+var R = 1.11, z = 1.045, B = .82;
 //#endregion
 //#region src/components/custom/tabs/composables/useTabIndicator.ts
-function re(e) {
-	let { containerRef: n, indicatorRef: r, buttonRefs: i, options: a, model: o, anchorSupported: s, jsSliderActive: c, activeValues: l, vertical: u } = e, d = O({
+function ne(e) {
+	let { containerRef: i, indicatorRef: a, buttonRefs: o, options: s, model: c, anchorSupported: l, jsSliderActive: u, activeValues: d, vertical: f } = e, p = j({
 		width: "0px",
 		transform: "translateX(0px)",
 		opacity: "0"
 	});
-	function f() {
-		if (s) return;
-		let e = a.value.findIndex((e) => e.value === o.value);
-		if (e < 0 || !i.value[e]) return;
-		let t = i.value[e];
-		if (u.value) {
+	function m() {
+		if (l) return;
+		let e = s.value.findIndex((e) => e.value === c.value);
+		if (e < 0 || !o.value[e]) return;
+		let t = o.value[e];
+		if (f.value) {
 			let e = t.offsetHeight, n = t.offsetTop + e / 2;
-			d.value = {
+			p.value = {
 				height: `${e}px`,
 				width: "",
 				transform: `translateY(${n - e / 2}px)`,
@@ -29,7 +30,7 @@ function re(e) {
 			};
 		} else {
 			let e = t.offsetWidth, n = t.offsetLeft + e / 2;
-			d.value = {
+			p.value = {
 				width: `${e}px`,
 				height: "",
 				transform: `translateX(${n - e / 2}px)`,
@@ -37,116 +38,127 @@ function re(e) {
 			};
 		}
 	}
-	function p() {
-		f();
+	function h() {
+		m();
 	}
-	let m = -1, h = null, g = F, _ = t({
+	let g = -1, _ = null, v = R, y = t({
 		from: 0,
 		to: 0,
 		axis: "width",
 		squishLaw: "linear",
-		maxStretch: () => g
+		maxStretch: () => v
+	}), b = z, x = t({
+		from: 1,
+		to: () => b,
+		axis: "width",
+		squishLaw: "linear"
 	});
-	function v() {
+	function S() {
 		return typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 	}
-	function y(e) {
+	function C(e) {
 		let t = getComputedStyle(e).getPropertyValue("--tab-indicator-duration").trim();
 		return t ? t.endsWith("ms") ? Number.parseFloat(t) || 340 : t.endsWith("s") ? (Number.parseFloat(t) || .34) * 1e3 : Number.parseFloat(t) || 340 : 340;
 	}
-	function b(e) {
-		let t = r.value;
+	function w(e) {
+		let t = a.value;
 		if (!t) {
-			m = e;
+			g = e;
 			return;
 		}
-		if (v()) {
-			m = e;
+		if (S()) {
+			g = e;
 			return;
 		}
-		let a = i.value[m], o = i.value[e];
-		if (m = e, !a || !o) return;
-		let s = u.value ? n.value?.offsetHeight || o.offsetParent?.offsetHeight || 1 : n.value?.offsetWidth || o.offsetParent?.offsetWidth || 1, c = u.value ? Math.abs(o.offsetTop - a.offsetTop) : Math.abs(o.offsetLeft - a.offsetLeft), l = s > 0 ? Math.min(c / s, 1) : 0, d = getComputedStyle(t).getPropertyValue("--tab-indicator-max-stretch").trim();
-		g = Number(d) || 1.15, _.squish(l), h && clearTimeout(h), t.style.setProperty("--stretch", String(_.stretch.value));
-		let f = y(t) * I;
-		h = setTimeout(() => {
-			_.squish(0), t.style.setProperty("--stretch", String(_.stretch.value)), h = null;
-		}, f);
+		let s = o.value[g], c = o.value[e];
+		if (g = e, !s || !c) return;
+		let l = f.value ? i.value?.offsetHeight || c.offsetParent?.offsetHeight || 1 : i.value?.offsetWidth || c.offsetParent?.offsetWidth || 1, u = f.value ? Math.abs(c.offsetTop - s.offsetTop) : Math.abs(c.offsetLeft - s.offsetLeft), d = l > 0 ? Math.min(u / l, 1) : 0, p = getComputedStyle(t), m = p.getPropertyValue("--tab-indicator-max-stretch").trim();
+		v = n(t, Number(m) || 1.11), y.squish(d);
+		let h = p.getPropertyValue("--tab-indicator-blob-max").trim(), w = Number(h) || 1.045, T = Math.sqrt(1.14), E = n(t, w);
+		b = E > T ? T : E, r(t, y.flexVel.value), _ && clearTimeout(_), t.style.setProperty("--stretch", String(y.stretch.value)), x.drive(1), t.style.setProperty("--tab-blob", String(x.size.value));
+		let D = C(t) * B;
+		_ = setTimeout(() => {
+			y.squish(0), t.style.setProperty("--stretch", String(y.stretch.value)), x.drive(0), t.style.setProperty("--tab-blob", String(x.size.value)), r(t, 0), _ = null;
+		}, D);
 	}
-	N(() => o.value, () => {
-		c.value && C(p);
-	}), N(() => a.value, () => {
-		c.value && C(p);
-	}, { deep: !0 }), N(() => u.value, () => {
-		c.value && C(p);
+	I(() => c.value, () => {
+		u.value && T(h);
+	}), I(() => s.value, () => {
+		u.value && T(h);
+	}, { deep: !0 }), I(() => f.value, () => {
+		u.value && T(h);
 	});
-	let x = null;
-	return T(() => {
-		m = a.value.findIndex((e) => l.value.includes(e.value)), c.value && (C(p), n.value && (x = new ResizeObserver(() => p()), x.observe(n.value)));
-	}), E(() => {
-		x?.disconnect(), h && clearTimeout(h);
+	let E = null;
+	return O(() => {
+		g = s.value.findIndex((e) => d.value.includes(e.value)), u.value && (T(h), i.value && (E = new ResizeObserver(() => h()), E.observe(i.value)));
+	}), k(() => {
+		E?.disconnect(), _ && clearTimeout(_);
 	}), {
-		singleSliderStyle: d,
-		squishOnTravel: b
+		singleSliderStyle: p,
+		squishOnTravel: w
 	};
 }
 //#endregion
 //#region src/components/custom/tabs/composables/useTabDragMorph.ts
-function ie(e) {
-	let { indicatorRef: t, isVertical: n, isUnderline: r, draggable: i, stripOptions: a, buttonRefs: o, model: s } = e, c = p(() => i() && !r.value);
-	function l() {
+function re(e) {
+	let { indicatorRef: t, isVertical: i, isUnderline: a, draggable: o, stripOptions: s, buttonRefs: c, model: l } = e, u = h(() => o() && !a.value);
+	function d() {
 		let e = t.value;
-		if (!e) return F;
-		let n = getComputedStyle(e).getPropertyValue("--tab-indicator-max-stretch").trim();
-		return Number(n) || 1.15;
+		if (!e) return R;
+		let r = getComputedStyle(e).getPropertyValue("--tab-indicator-max-stretch").trim();
+		return n(e, Number(r) || 1.11);
 	}
-	function u() {
-		return a.value.map((e, t) => {
-			let r = o.value[t]?.getBoundingClientRect(), i = r ? n.value ? r.top + r.height / 2 : r.left + r.width / 2 : 0;
+	function f() {
+		return s.value.map((e, t) => {
+			let n = c.value[t]?.getBoundingClientRect(), r = n ? i.value ? n.top + n.height / 2 : n.left + n.width / 2 : 0;
 			return {
 				value: e.value,
-				center: i
+				center: r
 			};
 		});
 	}
-	let f = d({
+	let m = p({
 		el: t,
-		axis: () => n.value ? "y" : "x",
-		snapTargets: u,
-		maxStretch: l,
+		axis: () => i.value ? "y" : "x",
+		snapTargets: f,
+		maxStretch: d,
 		onSnap: (e) => {
-			s.value !== e && (s.value = e);
+			l.value !== e && (l.value = e);
 		}
 	});
-	return N(() => [f.dragging.value, f.stretch.value], ([e, n]) => {
-		let r = t.value;
-		!r || !c.value || (e ? r.style.setProperty("--stretch", String(n)) : r.style.removeProperty("--stretch"));
-	}), N(() => [
-		a.value.length,
-		n.value,
-		c.value
+	return I(() => [m.dragging.value, m.stretch.value], ([e, n]) => {
+		let i = t.value;
+		if (!(!i || !u.value)) if (e) {
+			i.style.setProperty("--stretch", String(n));
+			let e = d();
+			r(i, e > 1 ? (n - 1) / (e - 1) : 0);
+		} else i.style.removeProperty("--stretch"), r(i, 0);
+	}), I(() => [
+		s.value.length,
+		i.value,
+		u.value
 	], () => {
-		c.value && C(() => f.refresh());
+		u.value && T(() => m.refresh());
 	}), {
-		dragEnabled: c,
-		drag: f
+		dragEnabled: u,
+		drag: m
 	};
 }
 //#endregion
 //#region src/components/custom/tabs/SegmentedTabs.vue?vue&type=script&setup=true&lang.ts
-var ae = ["role", "aria-orientation"], oe = [
+var ie = ["role", "aria-orientation"], ae = [
 	"role",
 	"tabindex",
 	"disabled",
 	"onClick"
-], se = [
+], oe = [
 	"role",
 	"tabindex",
 	"disabled",
 	"onClick"
-], L = /* @__PURE__ */ b({
+], V = /* @__PURE__ */ S({
 	__name: "SegmentedTabs",
-	props: /* @__PURE__ */ x({
+	props: /* @__PURE__ */ C({
 		options: {},
 		variant: { default: "pill" },
 		orientation: { default: "horizontal" },
@@ -171,44 +183,48 @@ var ae = ["role", "aria-orientation"], oe = [
 	}),
 	emits: ["update:modelValue"],
 	setup(t) {
-		function d(e, t) {
+		function n(e, t) {
 			return typeof document > "u" ? t : getComputedStyle(document.documentElement).getPropertyValue(e).trim() || t;
 		}
-		let b = t, x = ne(t, "modelValue"), C = O(null), E = O(null), N = O([]), F = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("position-anchor", "--x"), I = p(() => b.variant === "underline"), L = p(() => b.orientation === "vertical"), R = p(() => x.value == null ? [] : [x.value]), z = (e) => R.value.includes(e), B = p(() => !F && !I.value), V = B, H = p(() => b.responsive === !1 ? null : b.responsive === !0 ? {} : b.responsive), ce = p(() => H.value?.breakpoint ?? "640px"), U = p(() => H.value?.desktopOptions ?? b.options), W = O(!0), G = null;
-		function K(e) {
-			W.value = e.matches;
+		let r = t, p = te(t, "modelValue"), S = j(null), C = j(null), T = j([]), k = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("position-anchor", "--x"), I = h(() => r.variant === "underline"), R = h(() => r.orientation === "vertical"), z = h(() => p.value == null ? [] : [p.value]), B = (e) => z.value.includes(e);
+		function V(e) {
+			return !I.value && !B(e.value) && !e.disabled && "glass-capsule-hover";
 		}
-		let q = p(() => {
-			if (!H.value) return x.value;
-			let e = U.value;
-			return e.some((e) => e.value === x.value) ? x.value : e[0]?.value ?? x.value;
-		}), J = p(() => H.value ? U.value : b.options), le = p(() => H.value?.ariaLabel ?? b.options.find((e) => e.value === x.value)?.label ?? "Select"), ue = p(() => !!H.value && !W.value), { singleSliderStyle: Y, squishOnTravel: de } = re({
-			containerRef: C,
-			indicatorRef: E,
-			buttonRefs: N,
-			options: J,
-			model: p(() => q.value),
-			anchorSupported: F,
-			jsSliderActive: B,
-			activeValues: R,
-			vertical: L
-		}), { dragEnabled: X, drag: Z } = ie({
-			indicatorRef: E,
-			isVertical: L,
+		let H = h(() => !k && !I.value), U = H, W = h(() => r.responsive === !1 ? null : r.responsive === !0 ? {} : r.responsive), se = h(() => W.value?.breakpoint ?? "640px"), G = h(() => W.value?.desktopOptions ?? r.options), K = j(!0), q = null;
+		function J(e) {
+			K.value = e.matches;
+		}
+		let Y = h(() => {
+			if (!W.value) return p.value;
+			let e = G.value;
+			return e.some((e) => e.value === p.value) ? p.value : e[0]?.value ?? p.value;
+		}), X = h(() => W.value ? G.value : r.options), ce = h(() => W.value?.ariaLabel ?? r.options.find((e) => e.value === p.value)?.label ?? "Select"), le = h(() => !!W.value && !K.value), { singleSliderStyle: Z, squishOnTravel: ue } = ne({
+			containerRef: S,
+			indicatorRef: C,
+			buttonRefs: T,
+			options: X,
+			model: h(() => Y.value),
+			anchorSupported: k,
+			jsSliderActive: H,
+			activeValues: z,
+			vertical: R
+		}), { dragEnabled: Q, drag: de } = re({
+			indicatorRef: C,
+			isVertical: R,
 			isUnderline: I,
-			draggable: () => b.draggable,
-			stripOptions: J,
-			buttonRefs: N,
-			model: x
+			draggable: () => r.draggable,
+			stripOptions: X,
+			buttonRefs: T,
+			model: p
 		});
 		function fe(e) {
 			if (typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
 			e.getAnimations().forEach((e) => e.cancel());
-			let t = d("--spring-snappy", "ease"), n = d("--scale-press-btn", "0.97");
+			let t = n("--spring-snappy", "ease"), r = n("--scale-press-btn", "0.97");
 			e.animate([
 				{ transform: "scale(1)" },
 				{
-					transform: `scale(${n})`,
+					transform: `scale(${r})`,
 					offset: .4
 				},
 				{ transform: "scale(1)" }
@@ -217,160 +233,161 @@ var ae = ["role", "aria-orientation"], oe = [
 				easing: t
 			});
 		}
-		function Q(e, t) {
-			if (J.value[t]?.disabled) return;
-			let n = N.value[t];
-			n && fe(n), de(t), x.value = e;
+		function $(e, t) {
+			if (X.value[t]?.disabled) return;
+			let n = T.value[t];
+			n && fe(n), ue(t), p.value = e;
 		}
 		function pe(e) {
-			typeof e == "string" && (x.value = e);
+			typeof e == "string" && (p.value = e);
 		}
-		let $ = p(() => {
-			let e = J.value.findIndex((e) => e.value === q.value);
+		let me = h(() => {
+			let e = X.value.findIndex((e) => e.value === Y.value);
 			return e >= 0 ? e : 0;
 		});
-		function me(e) {
-			return e === $.value ? 0 : -1;
+		function he(e) {
+			return e === me.value ? 0 : -1;
 		}
-		function he(e, t) {
-			let n = J.value.length;
+		function ge(e, t) {
+			let n = X.value.length;
 			if (n !== 0) for (let r = 1; r <= n; r++) {
-				let i = (e + t * r + n * r) % n, a = J.value[i];
+				let i = (e + t * r + n * r) % n, a = X.value[i];
 				if (a && !a.disabled) {
-					N.value[i]?.focus(), Q(a.value, i);
+					T.value[i]?.focus(), $(a.value, i);
 					return;
 				}
 			}
 		}
-		function ge(e) {
-			let t = J.value.length, n = e === "first" ? Array.from({ length: t }, (e, t) => t) : Array.from({ length: t }, (e, n) => t - 1 - n);
+		function _e(e) {
+			let t = X.value.length, n = e === "first" ? Array.from({ length: t }, (e, t) => t) : Array.from({ length: t }, (e, n) => t - 1 - n);
 			for (let e of n) {
-				let t = J.value[e];
+				let t = X.value[e];
 				if (t && !t.disabled) {
-					N.value[e]?.focus(), Q(t.value, e);
+					T.value[e]?.focus(), $(t.value, e);
 					return;
 				}
 			}
 		}
-		function _e(e) {
-			let t = $.value, n = L.value ? "ArrowDown" : "ArrowRight", r = L.value ? "ArrowUp" : "ArrowLeft";
+		function ve(e) {
+			let t = me.value, n = R.value ? "ArrowDown" : "ArrowRight", r = R.value ? "ArrowUp" : "ArrowLeft";
 			switch (e.key) {
 				case n:
-					e.preventDefault(), he(t, 1);
+					e.preventDefault(), ge(t, 1);
 					break;
 				case r:
-					e.preventDefault(), he(t, -1);
+					e.preventDefault(), ge(t, -1);
 					break;
 				case "Home":
-					e.preventDefault(), ge("first");
+					e.preventDefault(), _e("first");
 					break;
 				case "End":
-					e.preventDefault(), ge("last");
+					e.preventDefault(), _e("last");
 					break;
 				default: break;
 			}
 		}
-		return T(() => {
-			H.value && typeof window < "u" && window.matchMedia && (G = window.matchMedia(`(min-width: ${ce.value})`), W.value = G.matches, G.addEventListener("change", K));
-		}), te(() => {
-			G?.removeEventListener("change", K), G = null;
-		}), (d, p) => ue.value ? (D(), g("div", {
+		return O(() => {
+			W.value && typeof window < "u" && window.matchMedia && (q = window.matchMedia(`(min-width: ${se.value})`), K.value = q.matches, q.addEventListener("change", J));
+		}), ee(() => {
+			q?.removeEventListener("change", J), q = null;
+		}), (n, h) => le.value ? (A(), v("div", {
 			key: 0,
-			class: w(M(e)("segmented-tabs__mobile w-fit", b.class))
-		}, [y(M(o), {
-			"model-value": x.value,
+			class: E(F(e)("segmented-tabs__mobile w-fit", r.class))
+		}, [x(F(c), {
+			"model-value": p.value,
 			"onUpdate:modelValue": pe
 		}, {
-			default: P(() => [y(M(n), {
-				"aria-label": le.value,
-				class: w(M(e)("segmented-tabs__trigger text-small w-auto min-w-input-sm", H.value?.triggerClass))
+			default: L(() => [x(F(i), {
+				"aria-label": ce.value,
+				class: E(F(e)("segmented-tabs__trigger text-small w-auto min-w-input-sm", W.value?.triggerClass))
 			}, {
-				default: P(() => [y(M(i))]),
+				default: L(() => [x(F(o))]),
 				_: 1
-			}, 8, ["aria-label", "class"]), y(M(r), null, {
-				default: P(() => [(D(!0), g(f, null, k(t.options, (e) => (D(), m(M(a), {
+			}, 8, ["aria-label", "class"]), x(F(a), null, {
+				default: L(() => [(A(!0), v(m, null, M(t.options, (e) => (A(), g(F(s), {
 					key: e.value,
 					value: e.value
 				}, {
-					default: P(() => [v(j(e.label), 1)]),
+					default: L(() => [b(P(e.label), 1)]),
 					_: 2
 				}, 1032, ["value"]))), 128))]),
 				_: 1
 			})]),
 			_: 1
-		}, 8, ["model-value"])], 2)) : (D(), g("div", {
+		}, 8, ["model-value"])], 2)) : (A(), v("div", {
 			key: 1,
 			ref_key: "containerRef",
-			ref: C,
+			ref: S,
 			role: I.value ? "tablist" : "group",
-			"aria-orientation": L.value ? "vertical" : "horizontal",
-			class: w(M(e)("segmented-tabs", `segmented-tabs--${t.variant}`, L.value && "segmented-tabs--vertical", b.class)),
-			onKeydown: _e
-		}, [I.value ? h("", !0) : (D(), g("div", {
+			"aria-orientation": I.value ? R.value ? "vertical" : "horizontal" : void 0,
+			class: E(F(e)("segmented-tabs", `segmented-tabs--${t.variant}`, R.value && "segmented-tabs--vertical", !I.value && "glass-capsule-track", r.class)),
+			onKeydown: ve
+		}, [I.value ? _("", !0) : (A(), v("div", {
 			key: 0,
 			ref_key: "indicatorRef",
-			ref: E,
-			class: w([
+			ref: C,
+			class: E([
 				"segmented-indicator",
-				M(V) ? "segmented-indicator--js" : "segmented-indicator--anchor",
-				M(X) && "glass-drag-grabbable",
-				M(X) && M(Z).dragging.value && "glass-drag-lift"
+				"glass-capsule",
+				F(U) ? "segmented-indicator--js" : "segmented-indicator--anchor",
+				F(Q) && "glass-drag-grabbable",
+				F(Q) && F(de).dragging.value && "glass-drag-lift"
 			]),
-			style: ee(M(X) ? {
-				...M(V) ? M(Y) : {},
-				...M(Z).dragStyle.value
-			} : M(V) ? M(Y) : void 0)
-		}, null, 6)), (D(!0), g(f, null, k(J.value, (e, t) => (D(), g(f, { key: e.value }, [e.tooltip ? (D(), m(M(u), {
+			style: D(F(Q) ? {
+				...F(U) ? F(Z) : {},
+				...F(de).dragStyle.value
+			} : F(U) ? F(Z) : void 0)
+		}, null, 6)), (A(!0), v(m, null, M(X.value, (e, t) => (A(), v(m, { key: e.value }, [e.tooltip ? (A(), g(F(f), {
 			key: 0,
 			"delay-duration": 200
 		}, {
-			default: P(() => [y(M(s), null, {
-				default: P(() => [y(M(c), { "as-child": "" }, {
-					default: P(() => [_("button", S({
+			default: L(() => [x(F(l), null, {
+				default: L(() => [x(F(u), { "as-child": "" }, {
+					default: L(() => [y("button", w({
 						ref_for: !0,
 						ref: (e) => {
-							e && (N.value[t] = e);
+							e && (T.value[t] = e);
 						},
 						class: "segmented-tab",
 						role: I.value ? "tab" : void 0,
-						tabindex: me(t)
-					}, { ref_for: !0 }, I.value ? { "aria-selected": z(e.value) ? "true" : "false" } : { "aria-pressed": z(e.value) ? "true" : "false" }, {
+						tabindex: he(t)
+					}, { ref_for: !0 }, I.value ? { "aria-selected": B(e.value) ? "true" : "false" } : { "aria-pressed": B(e.value) ? "true" : "false" }, {
 						disabled: e.disabled,
-						class: e.disabled && "is-disabled",
-						onClick: (n) => Q(e.value, t)
-					}), [A(d.$slots, "option", {
+						class: [e.disabled && "is-disabled", V(e)],
+						onClick: (n) => $(e.value, t)
+					}), [N(n.$slots, "option", {
 						option: e,
-						active: z(e.value)
-					}, () => [v(j(e.label), 1)])], 16, oe)]),
+						active: B(e.value)
+					}, () => [b(P(e.label), 1)])], 16, ae)]),
 					_: 2
-				}, 1024), y(M(l), {
+				}, 1024), x(F(d), {
 					side: "bottom",
 					"side-offset": 8
 				}, {
-					default: P(() => [v(j(e.tooltip), 1)]),
+					default: L(() => [b(P(e.tooltip), 1)]),
 					_: 2
 				}, 1024)]),
 				_: 2
 			}, 1024)]),
 			_: 2
-		}, 1024)) : (D(), g("button", S({
+		}, 1024)) : (A(), v("button", w({
 			key: 1,
 			ref_for: !0,
 			ref: (e) => {
-				e && (N.value[t] = e);
+				e && (T.value[t] = e);
 			},
 			class: "segmented-tab",
 			role: I.value ? "tab" : void 0,
-			tabindex: me(t)
-		}, { ref_for: !0 }, I.value ? { "aria-selected": z(e.value) ? "true" : "false" } : { "aria-pressed": z(e.value) ? "true" : "false" }, {
+			tabindex: he(t)
+		}, { ref_for: !0 }, I.value ? { "aria-selected": B(e.value) ? "true" : "false" } : { "aria-pressed": B(e.value) ? "true" : "false" }, {
 			disabled: e.disabled,
-			class: e.disabled && "is-disabled",
-			onClick: (n) => Q(e.value, t)
-		}), [A(d.$slots, "option", {
+			class: [e.disabled && "is-disabled", V(e)],
+			onClick: (n) => $(e.value, t)
+		}), [N(n.$slots, "option", {
 			option: e,
-			active: z(e.value)
-		}, () => [v(j(e.label), 1)])], 16, se))], 64))), 128))], 42, ae));
+			active: B(e.value)
+		}, () => [b(P(e.label), 1)])], 16, oe))], 64))), 128))], 42, ie));
 	}
 });
 //#endregion
-export { L as SegmentedTabs };
+export { V as SegmentedTabs };