@mkbabb/glass-ui 5.0.0 → 7.0.0

package/dist/styles/utilities/responsive.css

@@ -0,0 +1 @@
+@media (pointer: coarse) { [data-control-target] { min-block-size: var(--touch-target, 2.75rem); min-inline-size: var(--touch-target, 2.75rem); } }

package/dist/styles/utilities.css

@@ -1 +1 @@
-@import "./utilities/animate.css"; @import "./utilities/base.css"; @import "./utilities/base-misc.css"; @import "./utilities/metal.css"; @import "./utilities/components.css"; @import "./utilities/btn.css"; @import "./utilities/a11y-overrides.css";
+@import "./utilities/base.css"; @import "./utilities/base-misc.css"; @import "./utilities/metal.css"; @import "./utilities/components.css"; @import "./utilities/btn.css";

package/dist/styles/view-transition.css

@@ -1 +1 @@
-@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } ::view-transition-group(.gl-list-item) { animation-duration: var(--vt-duration, var(--spring-bouncy-duration)); animation-timing-function: var(--vt-ease, var(--spring-bouncy)); } ::view-transition-new(.gl-list-item):only-child { animation-name: gl-vt-slide-in; } ::view-transition-old(.gl-list-item):only-child { animation-name: gl-vt-slide-out; } @keyframes gl-vt-slide-in { from { opacity: 0; translate: 0 var(--vt-rise, 8px); } } @keyframes gl-vt-slide-out { to { opacity: 0; translate: 0 var(--vt-rise, 8px); } } ::view-transition { pointer-events: none; }
+@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } ::view-transition-group(.gl-list-item) { animation-duration: var(--vt-duration, var(--spring-bouncy-duration)); animation-timing-function: var(--vt-ease, var(--spring-bouncy)); } html:active-view-transition-type(route)::view-transition-old(root), html:active-view-transition-type(route)::view-transition-new(root) { animation-duration: var(--spring-snappy-duration); animation-timing-function: var(--spring-snappy); } html:active-view-transition-type(route)::view-transition-old(root) { animation-name: gl-vt-route-out; } html:active-view-transition-type(route)::view-transition-new(root) { animation-name: gl-vt-route-in; } ::view-transition-new(.gl-list-item):only-child { animation-name: gl-vt-slide-in; } ::view-transition-old(.gl-list-item):only-child { animation-name: gl-vt-slide-out; } @keyframes gl-vt-slide-in { from { opacity: 0; translate: 0 var(--vt-rise, 8px); } } @keyframes gl-vt-slide-out { to { opacity: 0; translate: 0 var(--vt-rise, 8px); } } @keyframes gl-vt-route-in { from { opacity: 0; translate: 0 var(--vt-rise, 8px); } } @keyframes gl-vt-route-out { to { opacity: 0; } } ::view-transition { pointer-events: none; }

package/dist/{supportsCssTimeline-Ie4xJFbD.js → supportsCssTimeline-C2zyWpl8.js}

@@ -1,4 +1,4 @@
-//#region src/composables/motion/supportsCssTimeline.ts
+//#region src/composables/motion/scroll/supportsCssTimeline.ts
 function e(e, t) {
 	return typeof CSS > "u" || typeof CSS.supports != "function" ? !1 : CSS.supports("animation-timeline", e) && !CSS.supports("animation-timeline", t);
 }

package/dist/surface.js

@@ -1,3 +1,2 @@
-import { n as e, t } from "./useSurfaceAxis-DudiZVOR.js";
-import { t as n } from "./Surface-BWRfwyn8.js";
-export { n as Surface, t as decorationClass, e as surfaceClass };
+import { t as e } from "./Surface-kFQeYrYv.js";
+export { e as Surface };

package/dist/switch-DZjQuFLa.js

@@ -0,0 +1,54 @@
+import { t as e } from "./class-names-Cpy5eaBk.js";
+import { computed as t, createBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, mergeProps as o, openBlock as s, unref as c, withCtx as l } from "vue";
+import { SwitchRoot as u, SwitchThumb as d, useForwardPropsEmits as f } from "reka-ui";
+//#region src/components/switch/Switch.vue?vue&type=script&setup=true&lang.ts
+var p = {
+	class: "switch__track glass-wash",
+	"aria-hidden": "true"
+}, m = /* @__PURE__ */ a({
+	__name: "Switch",
+	props: {
+		modelValue: { type: [Boolean, null] },
+		defaultValue: { type: Boolean },
+		disabled: { type: Boolean },
+		id: {},
+		value: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		size: { default: "md" },
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		name: {},
+		required: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(a, { emit: m }) {
+		let h = a, g = m, _ = f(t(() => {
+			let { class: e, size: t, invalid: n, ...r } = h;
+			return r;
+		}), g);
+		return (t, a) => (s(), n(c(u), o({ "data-slot": "switch" }, c(_), {
+			class: c(e)("switch tap-squish", h.class),
+			"data-size": h.size,
+			"data-invalid": h.invalid || void 0,
+			"aria-invalid": h.invalid || void 0
+		}), {
+			default: l(() => [r("span", p, [i(c(d), { class: "switch__thumb" })])]),
+			_: 1
+		}, 16, [
+			"class",
+			"data-size",
+			"data-invalid",
+			"aria-invalid"
+		]));
+	}
+});
+//#endregion
+export { m as t };

package/dist/switch.js

@@ -1,2 +1,2 @@
-import { t as e } from "./Switch-BPBfhMU3.js";
+import { t as e } from "./switch-DZjQuFLa.js";
 export { e as Switch };

package/dist/tabs.js

@@ -1,21 +1,19 @@
-import { t as e } from "./class-names-5jotTFzp.js";
-import { n as t } from "./springPresets-h5VKJQqG.js";
-import { n, r } from "./writeVelocityWeight-D1rvdxJu.js";
-import { t as i } from "./useMotionAxis-DCCXMC-i.js";
-import { a, i as o, o as s, r as c, s as l } from "./SelectScrollDownButton-CDtwaWkZ.js";
-import { i as u, n as d, r as f, t as p } from "./TooltipProvider-GtfYdSVf.js";
-import { t as m } from "./useLeadTrail-DOH4XkL1.js";
-import { t as h } from "./useDragMorph-65ihHePq.js";
-import { a as ee, r as g, t as te } from "./useTabRovingFocus-CG1H1k1J.js";
-import { Fragment as _, computed as v, createBlock as y, createCommentVNode as ne, createElementBlock as b, createElementVNode as x, createTextVNode as S, createVNode as C, defineComponent as w, mergeModels as T, mergeProps as E, nextTick as D, normalizeClass as O, normalizeStyle as k, onBeforeUnmount as A, onMounted as j, onScopeDispose as M, openBlock as N, ref as P, renderList as F, renderSlot as I, toDisplayString as L, unref as R, useModel as re, watch as z, withCtx as B } from "vue";
+import { t as e } from "./class-names-Cpy5eaBk.js";
+import { n as t, r as n } from "./writeVelocityWeight-DoGOCW3e.js";
+import { t as r } from "./useMotionAxis-D-rtIhca.js";
+import { a as i, c as a, o, r as s, s as c } from "./select-BcBAyLXA.js";
+import { i as l, n as u, r as d, t as f } from "./tooltip-Drx5qnw_.js";
+import { t as p } from "./useDragMorph-BogSV_nv.js";
+import { a as m, r as h, t as g } from "./useTabRovingFocus-YnWh-Ytr.js";
+import { Fragment as _, computed as v, createBlock as y, createCommentVNode as ee, createElementBlock as b, createElementVNode as x, createTextVNode as S, createVNode as C, defineComponent as w, mergeModels as T, mergeProps as E, nextTick as D, normalizeClass as O, normalizeStyle as k, onBeforeUnmount as A, onBeforeUpdate as j, onMounted as M, openBlock as N, ref as P, renderList as F, renderSlot as I, toDisplayString as L, unref as R, useModel as z, watch as B, withCtx as V } from "vue";
 //#region src/components/tabs/composables/useTabDragMorph.ts
-function ie(e) {
-	let { indicatorRef: t, isVertical: i, isUnderline: a, draggable: o, stripOptions: s, buttonRefs: c, model: l } = e, u = v(() => o() && !a.value);
+function H(e) {
+	let { indicatorRef: r, isVertical: i, isUnderline: a, draggable: o, stripOptions: s, buttonRefs: c, model: l } = e, u = v(() => o() && !a.value);
 	function d() {
-		let e = t.value;
-		if (!e) return g;
-		let r = getComputedStyle(e).getPropertyValue("--tab-indicator-max-stretch").trim();
-		return n(e, Number(r) || 1.11);
+		let e = r.value;
+		if (!e) return h;
+		let n = getComputedStyle(e).getPropertyValue("--tab-indicator-max-stretch").trim();
+		return t(e, Number(n) || 1.11);
 	}
 	function f() {
 		return s.value.map((e, t) => {
@@ -26,8 +24,8 @@ function ie(e) {
 			};
 		});
 	}
-	let p = h({
-		el: t,
+	let m = p({
+		handle: r,
 		axis: () => i.value ? "y" : "x",
 		snapTargets: f,
 		maxStretch: d,
@@ -35,44 +33,51 @@ function ie(e) {
 			l.value !== e && (l.value = e);
 		}
 	});
-	return z(() => [p.dragging.value, p.stretch.value], ([e, n]) => {
-		let i = t.value;
+	return B(() => [m.dragging.value, m.stretch.value], ([e, t]) => {
+		let i = r.value;
 		if (!(!i || !u.value)) if (e) {
-			i.style.setProperty("--stretch", String(n));
+			i.style.setProperty("--stretch", String(t));
 			let e = d();
-			r(i, e > 1 ? (n - 1) / (e - 1) : 0);
-		} else i.style.removeProperty("--stretch"), r(i, 0);
-	}), z(() => [
-		t.value,
+			n(i, e > 1 ? (t - 1) / (e - 1) : 0);
+		} else i.style.removeProperty("--stretch"), n(i, 0);
+	}), B(() => [
+		r.value,
 		s.value.length,
 		i.value,
 		u.value
 	], () => {
-		u.value && t.value && D(() => p.refresh());
+		u.value && r.value && D(() => m.refresh());
 	}, { immediate: !0 }), {
 		dragEnabled: u,
-		drag: p
+		drag: m
 	};
 }
 //#endregion
 //#region src/components/tabs/composables/useTabResponsive.ts
-function ae(e) {
+function U(e) {
 	let { responsive: t, options: n, model: r } = e, i = v(() => {
 		let e = t();
 		return e === !1 ? null : e === !0 ? {} : e;
 	}), a = v(() => i.value?.breakpoint ?? "640px"), o = v(() => i.value?.desktopOptions ?? n.value), s = P(!0), c = null;
 	function l(e) {
-		s.value = e.matches;
+		"currentTarget" in e && e.currentTarget && e.currentTarget !== c || (s.value = e.matches);
 	}
 	let u = v(() => {
 		if (!i.value) return r.value;
 		let e = o.value;
-		return e.some((e) => e.value === r.value) ? r.value : e[0]?.value ?? r.value;
-	}), d = v(() => i.value ? o.value : n.value), f = v(() => i.value?.ariaLabel ?? n.value.find((e) => e.value === r.value)?.label ?? "Select"), p = v(() => !!i.value && !s.value);
-	return j(() => {
-		i.value && typeof window < "u" && window.matchMedia && (c = window.matchMedia(`(min-width: ${a.value})`), s.value = c.matches, c.addEventListener("change", l));
+		return e.some((e) => e.value === r.value) ? r.value : e.find((e) => !e.disabled)?.value;
+	}), d = v(() => i.value ? o.value : n.value), f = v(() => i.value?.ariaLabel ?? n.value.find((e) => e.value === r.value)?.label ?? "Select"), p = v(() => !!i.value && !s.value), m = !1;
+	function h() {
+		if (c?.removeEventListener("change", l), c = null, !m || !i.value || typeof window > "u" || !window.matchMedia) {
+			s.value = !0;
+			return;
+		}
+		c = window.matchMedia(`(min-width: ${a.value})`), s.value = c.matches, c.addEventListener("change", l);
+	}
+	return B([i, a], h), M(() => {
+		m = !0, h();
 	}), A(() => {
-		c?.removeEventListener("change", l), c = null;
+		m = !1, c?.removeEventListener("change", l), c = null;
 	}), {
 		responsiveCfg: i,
 		breakpoint: a,
@@ -85,60 +90,30 @@ function ae(e) {
 	};
 }
 //#endregion
-//#region src/components/tabs/composables/useEyeglassLive.ts
-var V = t("eyeglass"), H = 320, U = .27, W = 1, G = 0;
-function oe(e) {
-	let { indicatorRef: t, enabled: n } = e, r = null, i = m({
-		response: V.response,
-		damping: V.dampingFraction,
-		trailTau: U,
-		onFrame({ hi: e }) {
-			let n = t.value;
-			n && n.style.setProperty("--eyeglass-live-t", String(e));
-		}
-	});
-	function a() {
-		r &&= (clearTimeout(r), null);
-	}
-	function o() {
-		n.value && (a(), i.drive(W), r = setTimeout(() => {
-			i.drive(G), r = null;
-		}, H));
-	}
-	function s() {
-		a(), i.seat(G);
-	}
-	return j(() => s()), z(n, (e) => {
-		e || s();
-	}), M(() => {
-		a(), i.dispose();
-	}), {
-		energize: o,
-		settle: s
-	};
-}
-//#endregion
 //#region src/components/tabs/SegmentedTabs.vue?vue&type=script&setup=true&lang.ts
-var se = [
+var te = [
 	"role",
+	"aria-label",
 	"aria-orientation",
-	"data-motion",
-	"data-eyeglass"
-], ce = [
+	"data-motion"
+], ne = [
 	"role",
 	"tabindex",
 	"disabled",
 	"onClick"
-], le = [
+], re = [
 	"role",
 	"tabindex",
 	"disabled",
 	"onClick"
-], K = /* @__PURE__ */ w({
+], W = /* @__PURE__ */ w({
 	__name: "SegmentedTabs",
-	props: /* @__PURE__ */ T({
+	props: /*@__PURE__*/ T({
 		options: {},
+		ariaLabel: {},
 		variant: { default: "pill" },
+		semantics: {},
+		activation: { default: "automatic" },
 		orientation: { default: "horizontal" },
 		responsive: {
 			type: [Boolean, Object],
@@ -161,35 +136,36 @@ var se = [
 		function n(e, t) {
 			return typeof document > "u" ? t : getComputedStyle(document.documentElement).getPropertyValue(e).trim() || t;
 		}
-		let r = t, m = i(() => r.motion), h = re(t, "modelValue"), g = P(null), w = P(null), T = P([]), D = v(() => r.variant === "underline"), A = v(() => r.orientation === "vertical"), j = v(() => !D.value), M = v(() => h.value == null ? [] : [h.value]), z = (e) => M.value.includes(e);
-		function V(e) {
-			return !D.value && !z(e.value) && !e.disabled && "glass-capsule-hover";
+		let p = t, h = r(() => p.motion), w = z(t, "modelValue"), T = P(null), D = P(null), A = P([]), M = v(() => p.variant === "underline"), B = v(() => p.orientation === "vertical"), W = v(() => p.semantics === "tabs" || !p.semantics && M.value);
+		function G(e) {
+			return !M.value && !Y(e.value) && !e.disabled && "glass-capsule-hover";
 		}
-		let { responsiveCfg: H, stripValue: U, stripOptions: W, mobileAriaLabel: G, showMobileSelect: K } = ae({
-			responsive: () => r.responsive,
-			options: v(() => r.options),
-			model: h
-		}), { singleSliderStyle: q, squishOnTravel: ue } = ee({
-			containerRef: g,
-			indicatorRef: w,
-			buttonRefs: T,
-			options: W,
-			model: v(() => U.value),
-			activeValues: M,
-			vertical: A
-		}), J = oe({
-			indicatorRef: w,
-			enabled: j
-		}), { dragEnabled: Y, drag: X } = ie({
-			indicatorRef: w,
-			isVertical: A,
-			isUnderline: D,
-			draggable: () => m.armed.value,
-			stripOptions: W,
-			buttonRefs: T,
-			model: h
+		let { responsiveCfg: ie, stripValue: K, stripOptions: q, mobileAriaLabel: ae, showMobileSelect: oe } = U({
+			responsive: () => p.responsive,
+			options: v(() => p.options),
+			model: w
+		}), J = v(() => K.value == null ? [] : [K.value]), Y = (e) => J.value.includes(e);
+		j(() => {
+			A.value = [];
 		});
-		function de(e) {
+		let { singleSliderStyle: se, squishOnTravel: ce } = m({
+			containerRef: T,
+			indicatorRef: D,
+			buttonRefs: A,
+			options: q,
+			model: v(() => K.value),
+			activeValues: J,
+			vertical: B
+		}), { dragEnabled: X, drag: le } = H({
+			indicatorRef: D,
+			isVertical: B,
+			isUnderline: M,
+			draggable: () => h.armed.value,
+			stripOptions: q,
+			buttonRefs: A,
+			model: w
+		});
+		function ue(e) {
 			if (typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
 			e.getAnimations().forEach((e) => e.cancel());
 			let t = n("--spring-snappy", "ease"), r = n("--scale-press-btn", "0.97");
@@ -206,105 +182,103 @@ var se = [
 			});
 		}
 		function Z(e, t) {
-			if (W.value[t]?.disabled) return;
-			let n = T.value[t];
-			n && de(n), ue(t), J.energize(), h.value = e;
-		}
-		function fe() {
-			J.energize();
+			if (q.value[t]?.disabled) return;
+			let n = A.value[t];
+			n && ue(n), ce(t), w.value = e;
 		}
-		function pe(e) {
-			typeof e == "string" && (h.value = e);
+		function de(e) {
+			typeof e == "string" && (w.value = e);
 		}
-		let { rovingTabindex: Q, onStripKeydown: $ } = te({
-			stripOptions: W,
-			stripValue: U,
-			isVertical: A,
-			buttonRefs: T,
+		let { rovingTabindex: Q, onStripKeydown: $ } = g({
+			stripOptions: q,
+			stripValue: K,
+			isVertical: B,
+			activation: v(() => p.activation),
+			buttonRefs: A,
 			select: Z
 		});
-		return (n, i) => R(K) ? (N(), b("div", {
+		return (n, r) => R(oe) ? (N(), b("div", {
 			key: 0,
-			class: O(R(e)("segmented-tabs__mobile w-fit", r.class))
-		}, [C(R(l), {
-			"model-value": h.value,
-			"onUpdate:modelValue": pe
+			class: O(R(e)("segmented-tabs__mobile w-fit", p.class))
+		}, [C(R(a), {
+			"model-value": w.value,
+			"onUpdate:modelValue": de
 		}, {
-			default: B(() => [C(R(a), {
-				"aria-label": R(G),
-				class: O(R(e)("segmented-tabs__trigger text-small w-auto min-w-input-sm", R(H)?.triggerClass))
+			default: V(() => [C(R(o), {
+				"aria-label": p.ariaLabel ?? R(ae),
+				"data-control-target": "",
+				class: O(R(e)("segmented-tabs__trigger text-small w-auto min-w-input-sm", R(ie)?.triggerClass))
 			}, {
-				default: B(() => [C(R(s))]),
+				default: V(() => [C(R(c))]),
 				_: 1
-			}, 8, ["aria-label", "class"]), C(R(o), null, {
-				default: B(() => [(N(!0), b(_, null, F(t.options, (e) => (N(), y(R(c), {
+			}, 8, ["aria-label", "class"]), C(R(i), null, {
+				default: V(() => [(N(!0), b(_, null, F(t.options, (e) => (N(), y(R(s), {
 					key: e.value,
-					value: e.value
+					value: e.value,
+					disabled: e.disabled
 				}, {
-					default: B(() => [S(L(e.label), 1)]),
+					default: V(() => [S(L(e.label), 1)]),
 					_: 2
-				}, 1032, ["value"]))), 128))]),
+				}, 1032, ["value", "disabled"]))), 128))]),
 				_: 1
 			})]),
 			_: 1
 		}, 8, ["model-value"])], 2)) : (N(), b("div", {
 			key: 1,
 			ref_key: "containerRef",
-			ref: g,
-			role: D.value ? "tablist" : "group",
-			"aria-orientation": D.value ? A.value ? "vertical" : "horizontal" : void 0,
-			"data-motion": R(m).dataMotion.value,
-			"data-eyeglass": j.value ? "" : void 0,
-			style: k(R(m).hostStyle.value),
-			class: O(R(e)("segmented-tabs", `segmented-tabs--${t.variant}`, A.value && "segmented-tabs--vertical", !D.value && "glass-capsule-track", r.class)),
-			onKeydown: i[0] ||= (...e) => R($) && R($)(...e),
-			onPointerdown: fe
-		}, [D.value ? ne("", !0) : (N(), b("div", {
+			ref: T,
+			role: W.value ? "tablist" : "group",
+			"aria-label": p.ariaLabel,
+			"aria-orientation": W.value ? B.value ? "vertical" : "horizontal" : void 0,
+			"data-motion": R(h).dataMotion.value,
+			style: k(R(h).hostStyle.value),
+			class: O(R(e)("segmented-tabs", `segmented-tabs--${t.variant}`, B.value && "segmented-tabs--vertical", !M.value && "glass-capsule-track", p.class)),
+			onKeydown: r[0] ||= (...e) => R($) && R($)(...e)
+		}, [M.value ? ee("", !0) : (N(), b("div", {
 			key: 0,
 			ref_key: "indicatorRef",
-			ref: w,
+			ref: D,
 			class: O([
 				"segmented-indicator",
 				"segmented-indicator--js",
-				R(Y) && "glass-drag-grabbable",
-				R(Y) && R(X).dragging.value && "glass-drag-lift"
+				"glass-capsule",
+				"glass-lens",
+				R(X) && "glass-drag-grabbable",
+				R(X) && R(le).dragging.value && "glass-drag-lift"
 			]),
-			style: k(R(Y) ? {
-				...R(q),
-				...R(X).dragStyle.value
-			} : R(q))
-		}, [x("div", { class: O([
-			"segmented-indicator__plate",
-			"glass-capsule",
-			j.value && "glass-lens"
-		]) }, null, 2)], 6)), (N(!0), b(_, null, F(R(W), (e, t) => (N(), b(_, { key: e.value }, [e.tooltip ? (N(), y(R(p), {
+			style: k(R(se))
+		}, null, 6)), (N(!0), b(_, null, F(R(q), (e, t) => (N(), b(_, { key: e.value }, [e.tooltip ? (N(), y(R(f), {
 			key: 0,
 			"delay-duration": 200
 		}, {
-			default: B(() => [C(R(u), null, {
-				default: B(() => [C(R(d), { "as-child": "" }, {
-					default: B(() => [x("button", E({
+			default: V(() => [C(R(l), null, {
+				default: V(() => [C(R(u), { "as-child": "" }, {
+					default: V(() => [x("button", E({
+						type: "button",
 						ref_for: !0,
 						ref: (e) => {
-							e && (T.value[t] = e);
+							e && (A.value[t] = e);
 						},
 						class: "segmented-tab",
-						role: D.value ? "tab" : void 0,
+						role: W.value ? "tab" : void 0,
 						tabindex: R(Q)(t)
-					}, { ref_for: !0 }, D.value ? { "aria-selected": z(e.value) ? "true" : "false" } : { "aria-pressed": z(e.value) ? "true" : "false" }, {
+					}, { ref_for: !0 }, W.value ? {
+						"aria-selected": Y(e.value) ? "true" : "false",
+						"aria-controls": e.controls || void 0
+					} : { "aria-pressed": Y(e.value) ? "true" : "false" }, {
 						disabled: e.disabled,
-						class: [e.disabled && "is-disabled", V(e)],
+						class: [e.disabled && "is-disabled", G(e)],
 						onClick: (n) => Z(e.value, t)
 					}), [I(n.$slots, "option", {
 						option: e,
-						active: z(e.value)
-					}, () => [S(L(e.label), 1)])], 16, ce)]),
+						active: Y(e.value)
+					}, () => [S(L(e.label), 1)])], 16, ne)]),
 					_: 2
-				}, 1024), C(R(f), {
+				}, 1024), C(R(d), {
 					side: "bottom",
 					"side-offset": 8
 				}, {
-					default: B(() => [S(L(e.tooltip), 1)]),
+					default: V(() => [S(L(e.tooltip), 1)]),
 					_: 2
 				}, 1024)]),
 				_: 2
@@ -312,22 +286,26 @@ var se = [
 			_: 2
 		}, 1024)) : (N(), b("button", E({
 			key: 1,
+			type: "button",
 			ref_for: !0,
 			ref: (e) => {
-				e && (T.value[t] = e);
+				e && (A.value[t] = e);
 			},
 			class: "segmented-tab",
-			role: D.value ? "tab" : void 0,
+			role: W.value ? "tab" : void 0,
 			tabindex: R(Q)(t)
-		}, { ref_for: !0 }, D.value ? { "aria-selected": z(e.value) ? "true" : "false" } : { "aria-pressed": z(e.value) ? "true" : "false" }, {
+		}, { ref_for: !0 }, W.value ? {
+			"aria-selected": Y(e.value) ? "true" : "false",
+			"aria-controls": e.controls || void 0
+		} : { "aria-pressed": Y(e.value) ? "true" : "false" }, {
 			disabled: e.disabled,
-			class: [e.disabled && "is-disabled", V(e)],
+			class: [e.disabled && "is-disabled", G(e)],
 			onClick: (n) => Z(e.value, t)
 		}), [I(n.$slots, "option", {
 			option: e,
-			active: z(e.value)
-		}, () => [S(L(e.label), 1)])], 16, le))], 64))), 128))], 46, se));
+			active: Y(e.value)
+		}, () => [S(L(e.label), 1)])], 16, re))], 64))), 128))], 46, te));
 	}
 });
 //#endregion
-export { K as SegmentedTabs };
+export { W as SegmentedTabs };