@mkbabb/glass-ui 3.8.0 → 3.9.0

package/dist/styles/utilities.css

@@ -191,14 +191,32 @@
        AL-W10 SLIM (X6 §M-1 + Y7 §3 + DESIGN.md §L3). I compose this
        class onto every interactive surface that wants the iOS tap-
        squish idiom; the press scales to `--scale-press` (0.96, the
-       canonical iOS `.regular` control rung) and the spring carries
-       the return via `--spring-snappy` (the §L3 release-spring
-       contract). I keep this as a single canonical rung — NOT a
-       3-rung ladder. The one outlier I leave alone is the button
-       `0.97` (`--scale-press-btn`), which consumes its own slightly-
-       softer token directly. The dock control now tracks the canonical
-       `--scale-press` (0.96) too (AT.W7-dock-b press canon — the prior
-       deeper `0.92` was retired to ONE source).
+       canonical iOS `.regular` control rung). I keep this as a single
+       canonical rung — NOT a 3-rung ladder. The one outlier I leave
+       alone is the button `0.97` (`--scale-press-btn`), which consumes
+       its own slightly-softer token directly. The dock control now
+       tracks the canonical `--scale-press` (0.96) too (AT.W7-dock-b
+       press canon — the prior deeper `0.92` was retired to ONE source).
+
+       AX.W52 §6 doctrine — the `scale` register is reconciled onto
+       `--spring-smooth` (was `--spring-snappy`), the ONE button/interactive
+       scale register the §6 easing doctrine records and the gate asserts
+       across `.btn-pill`/`.tap-squish`/`.glass-btn`/`btn-interactive`. At
+       ζ=0.86 `--spring-smooth` settles a press crisply with a sub-perceptual
+       (~0.5%) peak — no visible bounce — so press still reads alive while
+       hover reads as a smooth glide on the SAME spring.
+
+       The transition lists the SURFACE legs (bg/border/box-shadow/color/
+       opacity) on the bezier `--ease-standard` alongside the spring `scale`
+       leg — the SAME coherent set `.btn-pill` carries. This is load-bearing:
+       `.tap-squish` and `.btn-pill` are co-composed on the button base and
+       this `transition` shorthand would otherwise CLOBBER `.btn-pill`'s
+       surface legs down to a scale-only animation (the cascade bug that left
+       every button transitioning ONLY `scale` — the live-readback RED). With
+       both classes carrying the full set, whichever wins the surface cross-
+       fade survives. On a non-button press surface the extra legs are inert
+       unless that prop changes, in which case a smooth cross-fade is the
+       desired interactive read anyway.
 
        Under PRM I retire the press transform entirely and lean on the
        consumer's own hover/active bg-tint cascade to acknowledge the
@@ -206,7 +224,13 @@
     .tap-squish {
         /* AQ.W3 §W3.2 identity base */
         scale: 1;
-        transition: scale var(--duration-fast) var(--spring-snappy);
+        transition:
+            background-color var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard),
+            color var(--duration-fast) var(--ease-standard),
+            opacity var(--duration-fast) var(--ease-standard),
+            scale var(--duration-fast) var(--spring-smooth);
         transform-origin: center center;
     }
     .tap-squish:active {
@@ -683,9 +707,12 @@
    `--duration-fast` + `--ease-standard` tokens. */
 @utility scale-on-hover {
     /* Individual-transform identity base (AQ.W3 §W3.2). Transition the `scale`
-       longhand (not `transform`) so the migrated hover scale animates. */
+       longhand (not `transform`) so the migrated hover scale animates.
+       AX.W52 §6 doctrine — the `scale` transform leg rides `--spring-smooth`
+       (the settle register), NOT the bezier `--ease-standard` (a transform on a
+       bezier reads mechanical; springs read alive on transform). */
     scale: 1;
-    transition: scale var(--duration-fast) var(--ease-standard);
+    transition: scale var(--duration-fast) var(--spring-smooth);
 
     &:hover {
         scale: var(--scale-hover);
@@ -1005,22 +1032,28 @@
 
 /* ── Interactive-button four-state recipe ────────────────────────────────
    `.btn-interactive` carries the canonical "Button-with-spring-hover"
-   four-state contract — transition + hover-scale (`--scale-hover`) +
-   active-press (`--scale-press`) + disabled-opacity + focus-ring fade-in.
-   The Button primitive's variants emit the four states except `hover:scale-*`;
-   this is the canonical opt-in that adds the spring-hover lift. Consumed by
-   keyframes.js at 7 sites. */
+   four-state contract — transition + hover-scale + active-press + disabled-
+   opacity + focus-ring fade-in. The Button primitive's variants emit the four
+   states except `hover:scale-*`; this is the canonical opt-in that adds the
+   spring-hover lift. Consumed by keyframes.js at 7 sites.
+
+   AX.W52 §6 — the hover lift is the restrained `--scale-hover-btn` (1.035, NOT
+   the emphatic 1.08 `--scale-hover`) routed through `--spring-smooth` — the ONE
+   button scale register the §6 doctrine records and the gate asserts across
+   `.btn-pill`/`.tap-squish`/`.glass-btn`/`btn-interactive`. The surface legs
+   stay on the bezier `--ease-standard` (a colour cross-fade reads as a wobble
+   on a spring); only the `scale` transform leg springs. */
 @utility btn-interactive {
     /* AQ.W3 §W3.2 identity base */
     scale: 1;
     transition:
         background-color var(--duration-fast) var(--ease-standard),
         color var(--duration-fast) var(--ease-standard),
-        scale var(--duration-fast) var(--ease-standard),
+        scale var(--duration-fast) var(--spring-smooth),
         opacity var(--duration-fast) var(--ease-standard);
 
     &:hover {
-        scale: var(--scale-hover);
+        scale: var(--scale-hover-btn);
     }
 
     &:active {
@@ -1036,11 +1069,11 @@
         box-shadow: var(--focus-ring-shadow);
         outline: none;
         /* Fade in; base state has no box-shadow transition → instant
-           removal */
+           removal. The `scale` leg keeps the `--spring-smooth` register. */
         transition:
             background-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
-            scale var(--duration-fast) var(--ease-standard),
+            scale var(--duration-fast) var(--spring-smooth),
             opacity var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard);
     }
@@ -1068,36 +1101,52 @@ html.no-transition *::after {
     transition-duration: 0s !important;
 }
 
-/* ── Forced-colors restoration (AQ.W2 §5) ──────────────────────────────
+/* ── Forced-colors focus + silhouette rung (AQ.W2 §5 · generalized AX.W36) ────
    Windows High Contrast / forced-colors mode STRIPS `box-shadow` — so the
    glass focus rings (box-shadow + `outline: none`) vanish, leaving keyboard
-   users with no visible focus (a WCAG 2.4.7 failure forced-colors exposes).
-   Restore a real `outline` keyed to the system `Highlight` color (outline
-   survives forced-colors; box-shadow does not). The box-shadow ring stays the
-   primary in normal mode (it carries the glass aesthetic) — these two are
-   mutually exclusive by media query, NOT a parallel path.
-
-   `forced-color-adjust: none` is deliberately NOT used — glass-ui's
-   glassmorphic chrome is decorative and yields to the user's forced palette
-   (css forced-colors guidance). Baseline Widely Available; this IS the
-   fallback mechanism (it only activates under forced-colors), so no nested
-   guard. */
+   users with no visible focus. Restore a real `outline` keyed to the system
+   `Highlight` color (outline survives forced-colors; box-shadow does not). The
+   box-shadow ring stays the primary in normal mode (it carries the glass
+   aesthetic) — these two are mutually exclusive by media query, NOT a parallel
+   path.
+
+   AX.W36 — the focus-survival selector set is GENERALIZED to the broader
+   interactive surface: the dock CONTROLS (`.dock-icon-button` / `.dock-tab-button`
+   / `.dock-select-trigger` / `.dock-dropdown-trigger`) + the pill button base
+   (`.btn-pill`) all carry a box-shadow focus ring (dock.css / utilities.css) that
+   vanishes under WHC just like the original five. This is the SAME `Highlight`
+   outline rung extended to cover them — ONE block, ONE path (the glass-language
+   structure-survival skin for the tier panes / StatusDot / floating surfaces lives
+   co-located with the ladder it skins, in glass.css).
+
+   `forced-color-adjust: none` is deliberately NOT used — glass-ui's glassmorphic
+   chrome is decorative and yields to the user's forced palette (css forced-colors
+   guidance). Baseline Widely Available; this IS the fallback mechanism (it only
+   activates under forced-colors), so no nested guard. */
 @media (forced-colors: active) {
     .focus-ring:focus-visible,
     .glass-btn:focus-visible,
     .interactive-item:focus-visible,
+    .btn-pill:focus-visible,
+    .dock-icon-button:focus-visible,
+    .dock-tab-button:focus-visible,
+    .dock-select-trigger:focus-visible,
+    .dock-dropdown-trigger:focus-visible,
     .input-pill:focus,
     .input-pill:focus-visible {
         outline: 2px solid Highlight;
         outline-offset: 2px;
     }
 
-    /* Structural edges borne ONLY by box-shadow (the hairline catch-light /
-       glass pill edge / card plate) also vanish — restore a real border so
-       the silhouette survives. CanvasText is the system text/border color. */
+    /* Structural edges borne ONLY by box-shadow (the hairline catch-light + the
+       dock SHELL pill edge) also vanish — restore a real border so the silhouette
+       survives. CanvasText is the system text/border color. The `.glass-dock`
+       shell is OUT of the glass-material group BY DESIGN (it hand-rolls a parallel
+       surface — see glass.css), so it keeps its WHC edge HERE; the five-rung ladder
+       + `.glass-card` get their WHC border from the co-located glass-language skin
+       in glass.css (one source per surface family, no double-declaration). */
     .hairline-accent,
-    .glass-dock,
-    .glass-card {
+    .glass-dock {
         border: 1px solid CanvasText;
     }
 }
@@ -1108,12 +1157,13 @@ html.no-transition *::after {
    to the WCAG 2.5.5 (44px) minimum — ONE amendment retiring the per-consumer
    `min-h-[44px]` one-liners. Token-driven (`--touch-target`); fine-pointer
    byte-identical. Targets `Button size="icon"` (via the `data-size="icon"`
-   attr Button.vue reflects), ExpandableContainer + ResponsiveTabs triggers.
+   attr Button.vue reflects), ExpandableContainer + SegmentedTabs (responsive
+   mobile Select) triggers.
    `min-block/inline-size` only RAISES — a larger explicit size is never lost. */
 @media (pointer: coarse) {
     [data-size="icon"],
     .expandable-container__trigger,
-    .responsive-tabs__trigger {
+    .segmented-tabs__trigger {
         min-block-size: var(--touch-target, 2.75rem);
         min-inline-size: var(--touch-target, 2.75rem);
     }

package/dist/tabs.js

@@ -1,78 +1,104 @@
 import { t as e } from "./cn-DJXf4yaB.js";
 import { t } from "./_plugin-vue_export-helper-ok8pgSl5.js";
-import { i as n, n as r, r as i, t as a } from "./TooltipProvider-CmZzCuaG.js";
-import { t as o } from "./UnderlineTabs-Uxn-R3MT.js";
-import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, nextTick as _, normalizeClass as v, normalizeStyle as y, onMounted as b, onUnmounted as x, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useModel as O, watch as k, withCtx as A } from "vue";
-//#region src/components/custom/tabs/composables/useBouncySlider.ts
-function j(e) {
-	let { containerRef: t, buttonRefs: n, options: r, model: i, multiSelect: a, anchorSupported: o, jsSliderActive: s, activeValues: c } = e, l = C({
+import { a as n, i as r, o as i, r as a, s as o } from "./SelectScrollDownButton-T32cVFeM.js";
+import { i as s, n as c, r as l, t as u } from "./TooltipProvider-CmZzCuaG.js";
+import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, mergeModels as b, mergeProps as x, nextTick as S, normalizeClass as C, normalizeStyle as w, onBeforeUnmount as T, onMounted as E, onUnmounted as D, openBlock as O, ref as k, renderList as A, renderSlot as j, toDisplayString as M, unref as N, useModel as ee, watch as P, withCtx as F } from "vue";
+//#region src/components/custom/tabs/composables/useTabIndicator.ts
+function te(e) {
+	let { containerRef: t, indicatorRef: n, buttonRefs: r, options: i, model: a, multiSelect: o, anchorSupported: s, jsSliderActive: c, activeValues: l } = e, u = k({
 		width: "0px",
 		transform: "translateX(0px)",
 		opacity: "0"
 	});
-	function u() {
-		if (a.value || o) return;
-		let e = r.value.findIndex((e) => e.value === i.value);
-		if (e < 0 || !n.value[e]) return;
-		let t = n.value[e];
-		l.value = {
+	function d() {
+		if (o.value || s) return;
+		let e = i.value.findIndex((e) => e.value === a.value);
+		if (e < 0 || !r.value[e]) return;
+		let t = r.value[e];
+		u.value = {
 			width: `${t.offsetWidth}px`,
 			transform: `translateX(${t.offsetLeft}px)`,
 			opacity: "1"
 		};
 	}
-	let d = C({});
-	function f() {
-		if (!a.value) return;
+	let f = k({});
+	function p() {
+		if (!o.value) return;
 		let e = {};
-		for (let t of c.value) {
-			let i = r.value.findIndex((e) => e.value === t), a = n.value[i];
+		for (let t of l.value) {
+			let n = i.value.findIndex((e) => e.value === t), a = r.value[n];
 			a && (e[t] = {
 				width: `${a.offsetWidth}px`,
 				transform: `translateX(${a.offsetLeft}px)`,
 				opacity: "1"
 			});
 		}
-		d.value = e;
+		f.value = e;
 	}
-	function p() {
-		a.value ? f() : u();
+	function m() {
+		o.value ? p() : d();
+	}
+	let h = -1, g = null;
+	function _() {
+		return typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	}
+	function v(e) {
+		let i = n.value;
+		if (o.value || !i) {
+			h = e;
+			return;
+		}
+		if (_()) {
+			h = e;
+			return;
+		}
+		let a = r.value[h], s = r.value[e];
+		if (h = e, !a || !s) return;
+		let c = t.value?.offsetWidth || s.offsetParent?.offsetWidth || 1, l = Math.abs(s.offsetLeft - a.offsetLeft), u = c > 0 ? Math.min(l / c, 1) : 0, d = getComputedStyle(i).getPropertyValue("--tab-indicator-max-stretch").trim(), f = 1 + u * ((Number(d) || 1.08) - 1);
+		g && clearTimeout(g), i.style.setProperty("--stretch", String(f)), g = setTimeout(() => {
+			i.style.setProperty("--stretch", "1"), g = null;
+		}, 60);
 	}
-	k(() => i.value, () => {
-		s.value && _(p);
-	}, { deep: !0 }), k(() => r.value, () => {
-		s.value && _(p);
+	P(() => a.value, () => {
+		c.value && S(m);
+	}, { deep: !0 }), P(() => i.value, () => {
+		c.value && S(m);
 	}, { deep: !0 });
-	let m = null;
-	return b(() => {
-		s.value && (_(p), t.value && (m = new ResizeObserver(() => p()), m.observe(t.value)));
-	}), x(() => {
-		m?.disconnect();
+	let y = null;
+	return E(() => {
+		h = i.value.findIndex((e) => l.value.includes(e.value)), c.value && (S(m), t.value && (y = new ResizeObserver(() => m()), y.observe(t.value)));
+	}), D(() => {
+		y?.disconnect(), g && clearTimeout(g);
 	}), {
-		singleSliderStyle: l,
-		multiSliderStyles: d
+		singleSliderStyle: u,
+		multiSliderStyles: f,
+		squishOnTravel: v
 	};
 }
 //#endregion
-//#region src/components/custom/tabs/BouncyToggle.vue?vue&type=script&setup=true&lang.ts
-var M = [
-	"aria-pressed",
+//#region src/components/custom/tabs/SegmentedTabs.vue?vue&type=script&setup=true&lang.ts
+var ne = ["role"], re = [
+	"role",
 	"disabled",
 	"onClick"
-], N = [
-	"aria-pressed",
+], ie = [
+	"role",
 	"disabled",
 	"onClick"
-], P = /* @__PURE__ */ t(/* @__PURE__ */ h({
-	__name: "BouncyToggle",
-	props: /* @__PURE__ */ g({
+], I = /* @__PURE__ */ t(/* @__PURE__ */ y({
+	__name: "SegmentedTabs",
+	props: /* @__PURE__ */ b({
 		options: {},
+		variant: { default: "segmented" },
 		multiSelect: {
 			type: Boolean,
 			default: !1
 		},
-		variant: { default: "default" },
 		overflow: { default: "none" },
+		responsive: {
+			type: [Boolean, Object],
+			default: !1
+		},
 		class: { type: [
 			Boolean,
 			null,
@@ -86,45 +112,52 @@ var M = [
 	}),
 	emits: ["update:modelValue"],
 	setup(t) {
-		function o(e, t) {
+		function y(e, t) {
 			return typeof document > "u" ? t : getComputedStyle(document.documentElement).getPropertyValue(e).trim() || t;
 		}
-		let h = t, g = O(t, "modelValue"), x = C(null), k = C([]), P = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("position-anchor", "--x"), F = c(() => h.variant === "pill"), I = c(() => h.overflow === "scroll"), L = c(() => h.overflow === "auto"), R = c(() => {
-			let e = g.value;
-			return h.multiSelect && Array.isArray(e) ? e : e == null ? [] : [e];
-		}), z = (e) => R.value.includes(e), B = c(() => !h.multiSelect && !P), V = c(() => h.multiSelect || !P), { singleSliderStyle: H, multiSliderStyles: U } = j({
-			containerRef: x,
-			buttonRefs: k,
-			options: c(() => h.options),
-			model: g,
-			multiSelect: c(() => h.multiSelect),
-			anchorSupported: P,
-			jsSliderActive: V,
-			activeValues: R
+		let b = t, D = ee(t, "modelValue"), P = k(null), I = k(null), L = k([]), R = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("position-anchor", "--x"), z = f(() => b.variant === "underline");
+		f(() => b.variant === "pill"), f(() => b.variant === "segmented");
+		let B = f(() => b.overflow === "scroll"), V = f(() => b.overflow === "auto"), H = f(() => b.multiSelect && !z.value), U = f(() => {
+			let e = D.value;
+			return H.value && Array.isArray(e) ? e : e == null ? [] : [e];
+		}), W = (e) => U.value.includes(e), ae = f(() => (H.value || !R) && !z.value), G = f(() => !H.value && !R && !z.value), K = f(() => b.responsive === !1 ? null : b.responsive === !0 ? {} : b.responsive), oe = f(() => K.value?.breakpoint ?? "640px"), q = f(() => K.value?.desktopOptions ?? b.options), J = k(!0), Y = null;
+		function X(e) {
+			J.value = e.matches;
+		}
+		let se = f(() => {
+			if (!K.value) return D.value;
+			let e = q.value;
+			return e.some((e) => e.value === D.value) ? D.value : e[0]?.value ?? D.value;
+		}), Z = f(() => K.value ? q.value : b.options), ce = f(() => K.value?.ariaLabel ?? b.options.find((e) => e.value === D.value)?.label ?? "Select"), le = f(() => !!K.value && !J.value), { singleSliderStyle: ue, multiSliderStyles: de, squishOnTravel: fe } = te({
+			containerRef: P,
+			indicatorRef: I,
+			buttonRefs: L,
+			options: Z,
+			model: f(() => se.value),
+			multiSelect: H,
+			anchorSupported: R,
+			jsSliderActive: ae,
+			activeValues: U
 		});
-		function W(e) {
+		function pe(e) {
 			if (typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
 			e.getAnimations().forEach((e) => e.cancel());
-			let t = o("--spring-bouncy", "ease"), n = o("--scale-press", "0.95"), r = o("--scale-hover", "1.08");
+			let t = y("--spring-snappy", "ease"), n = y("--scale-press-btn", "0.97");
 			e.animate([
 				{ transform: "scale(1)" },
 				{
 					transform: `scale(${n})`,
-					offset: .25
-				},
-				{
-					transform: `scale(${r})`,
-					offset: .7
+					offset: .4
 				},
 				{ transform: "scale(1)" }
 			], {
-				duration: 200,
+				duration: 220,
 				easing: t
 			});
 		}
-		function G(e) {
-			if (!I.value && !L.value) return;
-			let t = k.value[e];
+		function Q(e) {
+			if (!B.value && !V.value) return;
+			let t = L.value[e];
 			if (!t) return;
 			let n = typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 			t.scrollIntoView({
@@ -133,120 +166,118 @@ var M = [
 				behavior: n ? "auto" : "smooth"
 			});
 		}
-		function K(e, t) {
-			if (h.options[t]?.disabled) return;
-			let n = k.value[t];
-			if (n && W(n), h.multiSelect) {
-				let t = [...R.value], n = t.indexOf(e);
-				n > -1 ? t.length > 1 && t.splice(n, 1) : t.push(e), g.value = t;
-			} else g.value = e;
-			G(t);
+		function $(e, t) {
+			if (Z.value[t]?.disabled) return;
+			let n = L.value[t];
+			if (n && pe(n), fe(t), H.value) {
+				let t = [...U.value], n = t.indexOf(e);
+				n > -1 ? t.length > 1 && t.splice(n, 1) : t.push(e), D.value = t;
+			} else D.value = e;
+			Q(t);
+		}
+		function me(e) {
+			typeof e == "string" && (D.value = e);
 		}
-		return b(() => {
-			_(() => {
-				let e = h.options.findIndex((e) => z(e.value));
-				e >= 0 && G(e);
+		return E(() => {
+			K.value && typeof window < "u" && window.matchMedia && (Y = window.matchMedia(`(min-width: ${oe.value})`), J.value = Y.matches, Y.addEventListener("change", X)), S(() => {
+				let e = Z.value.findIndex((e) => W(e.value));
+				e >= 0 && Q(e);
 			});
-		}), (o, c) => (S(), d("div", {
+		}), T(() => {
+			Y?.removeEventListener("change", X), Y = null;
+		}), (f, y) => le.value ? (O(), h("div", {
+			key: 0,
+			class: C(N(e)("segmented-tabs__mobile w-fit", b.class))
+		}, [v(N(o), {
+			"model-value": D.value,
+			"onUpdate:modelValue": me
+		}, {
+			default: F(() => [v(N(n), {
+				"aria-label": ce.value,
+				class: C(N(e)("segmented-tabs__trigger text-small w-auto min-w-input-sm", K.value?.triggerClass))
+			}, {
+				default: F(() => [v(N(i))]),
+				_: 1
+			}, 8, ["aria-label", "class"]), v(N(r), null, {
+				default: F(() => [(O(!0), h(d, null, A(t.options, (e) => (O(), p(N(a), {
+					key: e.value,
+					value: e.value
+				}, {
+					default: F(() => [_(M(e.label), 1)]),
+					_: 2
+				}, 1032, ["value"]))), 128))]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, ["model-value"])], 2)) : (O(), h("div", {
+			key: 1,
 			ref_key: "containerRef",
-			ref: x,
-			class: v(D(e)(F.value ? "bouncy-toggle bouncy-toggle--pill" : "bouncy-toggle", I.value && "bouncy-toggle--scroll scroll-fade-mask scrollbar-hidden", L.value && "bouncy-toggle--auto scrollbar-hidden", h.class))
+			ref: P,
+			role: z.value ? "tablist" : "group",
+			class: C(N(e)("segmented-tabs", `segmented-tabs--${t.variant}`, B.value && "segmented-tabs--scroll scroll-fade-mask scrollbar-hidden", V.value && "segmented-tabs--auto scrollbar-hidden", b.class))
 		}, [
-			t.multiSelect ? u("", !0) : (S(), d("div", {
+			!z.value && !H.value ? (O(), h("div", {
 				key: 0,
-				class: v([F.value ? "bouncy-slider bouncy-slider--pill" : "bouncy-slider", B.value ? "bouncy-slider--js" : "bouncy-slider--anchor"]),
-				style: y(B.value ? D(H) : void 0)
-			}, null, 6)),
-			t.multiSelect ? (S(!0), d(s, { key: 1 }, w(R.value, (e) => (S(), d("div", {
-				key: "slider-" + e,
-				class: v([F.value ? "bouncy-slider bouncy-slider--pill" : "bouncy-slider", "bouncy-slider--js"]),
-				style: y(D(U)[e] ?? { opacity: "0" })
-			}, null, 6))), 128)) : u("", !0),
-			(S(!0), d(s, null, w(t.options, (e, t) => (S(), d(s, { key: e.value }, [e.tooltip ? (S(), l(D(a), {
+				ref_key: "indicatorRef",
+				ref: I,
+				class: C(["segmented-indicator", G.value ? "segmented-indicator--js" : "segmented-indicator--anchor"]),
+				style: w(G.value ? N(ue) : void 0)
+			}, null, 6)) : m("", !0),
+			!z.value && H.value ? (O(!0), h(d, { key: 1 }, A(U.value, (e) => (O(), h("div", {
+				key: "indicator-" + e,
+				class: "segmented-indicator segmented-indicator--js",
+				style: w(N(de)[e] ?? { opacity: "0" })
+			}, null, 4))), 128)) : m("", !0),
+			(O(!0), h(d, null, A(Z.value, (e, t) => (O(), h(d, { key: e.value }, [e.tooltip ? (O(), p(N(u), {
 				key: 0,
 				"delay-duration": 200
 			}, {
-				default: A(() => [m(D(n), null, {
-					default: A(() => [m(D(r), { "as-child": "" }, {
-						default: A(() => [f("button", {
+				default: F(() => [v(N(s), null, {
+					default: F(() => [v(N(c), { "as-child": "" }, {
+						default: F(() => [g("button", x({
 							ref_for: !0,
 							ref: (e) => {
-								e && (k.value[t] = e);
+								e && (L.value[t] = e);
 							},
-							class: v([F.value ? "bouncy-btn bouncy-btn--pill" : "bouncy-btn", e.disabled && "is-disabled"]),
-							"aria-pressed": z(e.value) ? "true" : "false",
+							class: "segmented-tab",
+							role: z.value ? "tab" : void 0
+						}, { ref_for: !0 }, z.value ? { "aria-selected": W(e.value) ? "true" : "false" } : { "aria-pressed": W(e.value) ? "true" : "false" }, {
 							disabled: e.disabled,
-							onClick: (n) => K(e.value, t)
-						}, [T(o.$slots, "option", {
+							class: e.disabled && "is-disabled",
+							onClick: (n) => $(e.value, t)
+						}), [j(f.$slots, "option", {
 							option: e,
-							active: z(e.value)
-						}, () => [p(E(e.label), 1)], !0)], 10, M)]),
+							active: W(e.value)
+						}, () => [_(M(e.label), 1)], !0)], 16, re)]),
 						_: 2
-					}, 1024), m(D(i), {
+					}, 1024), v(N(l), {
 						side: "bottom",
 						"side-offset": 8
 					}, {
-						default: A(() => [p(E(e.tooltip), 1)]),
+						default: F(() => [_(M(e.tooltip), 1)]),
 						_: 2
 					}, 1024)]),
 					_: 2
 				}, 1024)]),
 				_: 2
-			}, 1024)) : (S(), d("button", {
+			}, 1024)) : (O(), h("button", x({
 				key: 1,
 				ref_for: !0,
 				ref: (e) => {
-					e && (k.value[t] = e);
+					e && (L.value[t] = e);
 				},
-				class: v([F.value ? "bouncy-btn bouncy-btn--pill" : "bouncy-btn", e.disabled && "is-disabled"]),
-				"aria-pressed": z(e.value) ? "true" : "false",
+				class: "segmented-tab",
+				role: z.value ? "tab" : void 0
+			}, { ref_for: !0 }, z.value ? { "aria-selected": W(e.value) ? "true" : "false" } : { "aria-pressed": W(e.value) ? "true" : "false" }, {
 				disabled: e.disabled,
-				onClick: (n) => K(e.value, t)
-			}, [T(o.$slots, "option", {
+				class: e.disabled && "is-disabled",
+				onClick: (n) => $(e.value, t)
+			}), [j(f.$slots, "option", {
 				option: e,
-				active: z(e.value)
-			}, () => [p(E(e.label), 1)], !0)], 10, N))], 64))), 128))
-		], 2));
-	}
-}), [["__scopeId", "data-v-795d5fdc"]]), F = /* @__PURE__ */ h({
-	__name: "BouncyTabs",
-	props: /* @__PURE__ */ g({
-		options: {},
-		variant: { default: "default" },
-		overflow: { default: "none" },
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	}, {
-		modelValue: { required: !0 },
-		modelModifiers: {}
-	}),
-	emits: ["update:modelValue"],
-	setup(e) {
-		let t = e, n = O(e, "modelValue");
-		function r(e) {
-			n.value = e;
-		}
-		return (i, a) => (S(), l(P, {
-			options: e.options,
-			"model-value": n.value,
-			variant: e.variant,
-			overflow: e.overflow,
-			class: v(t.class),
-			"multi-select": !1,
-			"onUpdate:modelValue": r
-		}, null, 8, [
-			"options",
-			"model-value",
-			"variant",
-			"overflow",
-			"class"
-		]));
+				active: W(e.value)
+			}, () => [_(M(e.label), 1)], !0)], 16, ie))], 64))), 128))
+		], 10, ne));
 	}
-});
+}), [["__scopeId", "data-v-dd84d37c"]]);
 //#endregion
-export { F as BouncyTabs, P as BouncyToggle, o as UnderlineTabs };
+export { I as SegmentedTabs };

package/dist/timeline.js

@@ -1,5 +1,5 @@
 import { t as e } from "./_plugin-vue_export-helper-ok8pgSl5.js";
-import { t } from "./HoverPopover-D56O6Ylp.js";
+import { t } from "./HoverPopover-2LOIW34a.js";
 import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createSlots as c, createVNode as l, defineComponent as u, guardReactiveProps as d, normalizeClass as f, normalizeProps as p, normalizeStyle as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
 //#region src/components/custom/timeline/geometry.ts
 function S(e) {