@mkbabb/glass-ui 3.1.1 → 3.3.0

package/dist/styles/typography.css

@@ -1,10 +1,10 @@
 /*
- * typography.css — Computer Modern body + Fraunces display + Fira Code mono
- *                + Plus Jakarta Sans (brand display fallback face, OFL 1.1)
+ * typography.css — Fraunces serif/display + Plus Jakarta Sans + Fira Code mono
+ *                (all three OFL faces self-hosted via fonts.css)
  *
- * Golden-ratio scale (√φ ≈ 1.272). Computer Modern is primary for body,
- * headings, prose, and math. Fraunces is reserved for ornamental display
- * with WONK=1 / SOFT=0. Fira Code for mono.
+ * Golden-ratio scale (√φ ≈ 1.272). Fraunces carries the serif register —
+ * body, headings, prose, and math — and the ornamental display register
+ * with WONK=1 / SOFT=0. Plus Jakarta Sans is the brand sans; Fira Code is mono.
  *
  * Semantic type classes expose both Tailwind-friendly utility names
  * (`.text-display-*`, `.text-body`, `.text-admin-label`) and feature
@@ -265,7 +265,7 @@ body {
 }
 
 /* ═══════════════════════════════════════════════
-   HEADINGS / BODY — Computer Modern
+   HEADINGS / BODY — Fraunces serif register
    ═══════════════════════════════════════════════ */
 @utility text-title {
     font-family: var(--font-serif);
@@ -358,7 +358,7 @@ body {
 }
 
 /* ═══════════════════════════════════════════════
-   MATH — Computer Modern italic
+   MATH — Fraunces serif italic
    ═══════════════════════════════════════════════ */
 @utility text-math {
     font-family: var(--font-serif);
@@ -444,7 +444,13 @@ body {
         font-variation-settings: var(--font-display-variation-settings);
     }
 
-    @media (min-width: 640px) {
+    /* AV.W16 TW3 — the pane title scales off its PANE's box, not the viewport.
+       An unnamed @container query resolves to the nearest ancestor container,
+       so the title grows once its pane clears 40rem (≈ 640px) regardless of the
+       viewport. Contract: the consuming pane sets `container-type: inline-size`
+       (the dock/chassis pattern); without a container ancestor the compact base
+       holds. */
+    @container (min-width: 40rem) {
         .text-pane-title {
             font-size: var(--type-display-3);
         }

package/dist/styles/utilities.css

@@ -189,9 +189,11 @@
        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 outliers I leave alone are button `0.97` and
-       dock control `0.92`, which consume their own scale tokens
-       directly.
+       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).
 
        Under PRM I retire the press transform entirely and lean on the
        consumer's own hover/active bg-tint cascade to acknowledge the
@@ -256,25 +258,28 @@
         font-size: max(1rem, 1em);
     }
 
-    /* ── Scroll fade masks ── */
+    /* ── Scroll fade masks ──
+       Single-source `mask-image` (AV.W16 TW7): the `-webkit-` companion is
+       dropped — Tailwind v4's Lightning CSS build pipeline auto-prefixes per
+       the browserslist targets, mirroring the glass ladder's single-source
+       `backdrop-filter` (glass.css). NOTE: this is the consistency cut; it
+       does NOT conflict with W15's `@supports`-gated older-Safari mask
+       fallback (that fallback is the distinct case where the companion is
+       genuinely needed and W15 gates it). */
     .scroll-fade-mask {
         mask-image: linear-gradient(to right, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
-        -webkit-mask-image: linear-gradient(to right, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
     }
 
     .scroll-fade-top {
         mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width));
-        -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width));
     }
 
     .scroll-fade-bottom {
         mask-image: linear-gradient(to bottom, black calc(100% - var(--mask-fade-width)), transparent);
-        -webkit-mask-image: linear-gradient(to bottom, black calc(100% - var(--mask-fade-width)), transparent);
     }
 
     .scroll-fade-y {
         mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
-        -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
     }
 
     /* ── Deferred section — render-skip an offscreen subtree (AQ.W3 §5) ──────
@@ -480,6 +485,40 @@
         --metric-badge-padding-inline: 0.5rem;
     }
 
+    /* AS.W4 — @container style(--density) companion. A pill nested under a host
+       that sets `--density: comfortable | spacious` on a wrapping element picks
+       up the matching padding register with no `data-density` markup contract;
+       the attribute rules above stay the SOLE fallback (inv 47).
+       The inner `.metric-pill.metric-badge--label-stacked` selector (0,2,0) sits
+       just BELOW the `.metric-pill[data-density]…` attribute rules (0,3,0) — so a
+       pill carrying BOTH the attribute and a `--density` ancestor lands on the
+       attribute rule (same tokens, identical paint), while a pill with only the
+       ancestor token still resolves the right register (no competing rule sets
+       these padding custom props at higher weight in that case).
+
+       No `@supports` wrapper: unlike the sibling scroll-state recipe (which
+       probes `@supports (container-type: scroll-state)` — a probeable
+       container-type VALUE), style queries introduce no new `container-type`
+       value (every element is a style container by default), so there is no
+       clean declaration test for style-query support. This relies on
+       `@container style()`'s own graceful degradation: an engine without
+       style-query support parses the unknown at-rule as invalid, drops the
+       block, and keeps the `[data-density]` attribute base. (The earlier
+       `@supports (container-type: inline-size)` wrapper was wrong — it probed
+       SIZE-query support, a distinct feature with a distinct support timeline.) */
+    @container style(--density: spacious) {
+        .metric-pill.metric-badge--label-stacked {
+            --metric-badge-padding-block-stacked: 0.5rem;
+            --metric-badge-padding-inline: 0.75rem;
+        }
+    }
+    @container style(--density: comfortable) {
+        .metric-pill.metric-badge--label-stacked {
+            --metric-badge-padding-block-stacked: 0.25rem;
+            --metric-badge-padding-inline: 0.5rem;
+        }
+    }
+
     .metric-badge__label {
         letter-spacing: 0.18em;
         line-height: 1;
@@ -649,6 +688,29 @@
     }
 }
 
+/* ── Control transition recipe (AU.W8b.4) ───────────────────────────────
+   Shared compound transition for interactive controls that animate their
+   surface (background-color/color/box-shadow/border-color) on the four-state
+   contract. Replaces the per-site
+   `transition-[background-color,color,box-shadow,border-color] duration-[var(--duration-fast)] ease-[var(--ease-standard)]`
+   arbitrary wraps at ≥2 sites (TabsTrigger, SelectTrigger, Toggle `card`
+   variant). Binds the canonical --duration-fast + --ease-standard tokens. */
+@utility transition-control {
+    transition-property: background-color, color, box-shadow, border-color;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+}
+
+/* ── Collapse transition recipe (AU.W8b.4) ──────────────────────────────
+   Shared height+opacity transition for reka-ui collapse surfaces (Accordion
+   content, Collapsible content). Replaces the per-site `transition-[height,opacity]`
+   wrap at ≥2 sites. The duration/easing rides the data-state
+   `animate-accordion-*`/`animate-collapsible-*` keyframes (this only declares
+   WHICH properties transition; the keyframes own the timing). */
+@utility transition-collapse {
+    transition-property: height, opacity;
+}
+
 /* ── Sheet/drawer slide-out animation grammar ──
    Mirror of `.popover-animate` for sheet/drawer panels. Pairs with
    `slide-in-from-{top,right,bottom,left}-N` to compose side-keyed entries.
@@ -894,6 +956,28 @@
     );
 }
 
+/* ── Text-highlight paint (CSS Custom Highlight API) ─────────────────────
+   The default `::highlight()` paint for the `useTextHighlight` composable
+   (composables/dom). A named `Highlight` registered in `CSS.highlights`
+   under one of these keys paints its `Range` set without a `<mark>` wrapper.
+   Token-bridged: the search mark reads the canonical pastel-yellow rainbow
+   token at a soft alpha; the equation/variable mark reads `--primary`. Both
+   axes are overridable via the `--text-highlight-*` custom properties. */
+::highlight(glass-search-mark) {
+    background-color: var(
+        --text-highlight-search-bg,
+        color-mix(in srgb, var(--rainbow-pastel-yellow) 55%, transparent)
+    );
+    color: var(--text-highlight-search-fg, inherit);
+}
+::highlight(glass-mark) {
+    background-color: var(
+        --text-highlight-bg,
+        color-mix(in srgb, var(--primary) 18%, transparent)
+    );
+    color: var(--text-highlight-fg, inherit);
+}
+
 /* ── Interactive-button four-state recipe ────────────────────────────────
    `.btn-interactive` carries the canonical "Button-with-spring-hover"
    four-state contract — transition + hover-scale (`--scale-hover`) +

package/dist/styles/view-transition.css

@@ -36,7 +36,7 @@
  * each tracked element plus a unique `view-transition-name` per element. */
 ::view-transition-group(.gl-list-item) {
     animation-duration: var(--vt-duration, var(--duration-normal));
-    animation-timing-function: var(--vt-ease, var(--ease-apple-spring));
+    animation-timing-function: var(--vt-ease, var(--spring-bouncy));
 }
 
 /* Added / removed members — the `:only-child` trick from the group guide: a
@@ -48,11 +48,17 @@
  * and `<DockLayerGroup>` (.dock-layer-stack) carry `view-transition-class:
  * gl-dock-layer` + a page-unique `view-transition-name` on a View-Transitions
  * engine, so the collapsed↔expanded width + the layer-pane swap morph as a VT
- * group instead of the JS FLIP. The `--dock-motion-resize` spring maps here to
- * `--vt-ease`; both default to the apple-spring. PRM zeroes the animation above. */
+ * group instead of the JS FLIP.
+ *
+ * AT.W6-dock-c / AU.W8 — VT/FLIP timing PARITY. The timing-function is
+ * `--dock-resize-spring` (= the `--spring-dock` linear(), AU.W8) — the SAME
+ * source the FLIP fallback consumes via `--dock-motion-resize` (`dock.css`), so
+ * the identical curve drives both engines. Retires the AQ.W6 fork (this group
+ * ran `--vt-ease`, the apple-spring overshoot). `--vt-ease` still governs the
+ * other recipes (`.gl-list-item`). PRM zeroes the animation above. */
 ::view-transition-group(.gl-dock-layer) {
     animation-duration: var(--vt-duration, var(--duration-normal));
-    animation-timing-function: var(--vt-ease, var(--ease-apple-spring));
+    animation-timing-function: var(--dock-resize-spring, var(--spring-dock));
 }
 
 @keyframes gl-vt-slide-in  { from { opacity: 0; translate: 0 var(--vt-rise, 8px); } }

package/dist/switch.js

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

package/dist/tabs.js

@@ -1,22 +1,72 @@
 import { t as e } from "./cn-DJXf4yaB.js";
-import { t } from "./_plugin-vue_export-helper-Dq1MygBL.js";
-import { i as n, n as r, r as i, t as a } from "./TooltipProvider-DE78vbEP.js";
-import { t as o } from "./UnderlineTabs-DAWMLmJG.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, nextTick as g, normalizeClass as _, normalizeStyle as v, onMounted as y, onUnmounted as b, openBlock as x, ref as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, watch as D, withCtx as O } from "vue";
+import { t } from "./_plugin-vue_export-helper-C1je1s0u.js";
+import { i as n, n as r, r as i, t as a } from "./TooltipProvider-D-JrSqDu.js";
+import { t as o } from "./UnderlineTabs-Cq_AD03t.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({
+		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 = {
+			width: `${t.offsetWidth}px`,
+			transform: `translateX(${t.offsetLeft}px)`,
+			opacity: "1"
+		};
+	}
+	let d = C({});
+	function f() {
+		if (!a.value) return;
+		let e = {};
+		for (let t of c.value) {
+			let i = r.value.findIndex((e) => e.value === t), a = n.value[i];
+			a && (e[t] = {
+				width: `${a.offsetWidth}px`,
+				transform: `translateX(${a.offsetLeft}px)`,
+				opacity: "1"
+			});
+		}
+		d.value = e;
+	}
+	function p() {
+		a.value ? f() : u();
+	}
+	k(() => i.value, () => {
+		s.value && _(p);
+	}, { deep: !0 }), k(() => r.value, () => {
+		s.value && _(p);
+	}, { deep: !0 });
+	let m = null;
+	return b(() => {
+		s.value && (_(p), t.value && (m = new ResizeObserver(() => p()), m.observe(t.value)));
+	}), x(() => {
+		m?.disconnect();
+	}), {
+		singleSliderStyle: l,
+		multiSliderStyles: d
+	};
+}
+//#endregion
 //#region src/components/custom/tabs/BouncyToggle.vue?vue&type=script&setup=true&lang.ts
-var k = [
+var M = [
 	"aria-pressed",
 	"disabled",
 	"onClick"
-], A = [
+], N = [
 	"aria-pressed",
 	"disabled",
 	"onClick"
-], j = /* @__PURE__ */ t(/* @__PURE__ */ h({
+], P = /* @__PURE__ */ t(/* @__PURE__ */ h({
 	__name: "BouncyToggle",
-	props: {
+	props: /* @__PURE__ */ g({
 		options: {},
-		modelValue: {},
 		multiSelect: {
 			type: Boolean,
 			default: !1
@@ -30,49 +80,32 @@ var k = [
 			Object,
 			Array
 		] }
-	},
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
 	emits: ["update:modelValue"],
-	setup(t, { emit: o }) {
-		function h(e, t) {
+	setup(t) {
+		function o(e, t) {
 			return typeof document > "u" ? t : getComputedStyle(document.documentElement).getPropertyValue(e).trim() || t;
 		}
-		let j = t, M = o, N = S(null), P = S([]), F = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("position-anchor", "--x"), I = c(() => j.variant === "pill"), L = c(() => j.overflow === "scroll"), R = c(() => j.overflow === "auto"), z = c(() => j.multiSelect && Array.isArray(j.modelValue) ? j.modelValue : [j.modelValue]), B = (e) => z.value.includes(e), V = c(() => !j.multiSelect && !F), H = c(() => j.multiSelect || !F), U = S({
-			width: "0px",
-			transform: "translateX(0px)",
-			opacity: "0"
+		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
 		});
-		function W() {
-			if (j.multiSelect || F) return;
-			let e = j.options.findIndex((e) => e.value === j.modelValue);
-			if (e < 0 || !P.value[e]) return;
-			let t = P.value[e];
-			U.value = {
-				width: `${t.offsetWidth}px`,
-				transform: `translateX(${t.offsetLeft}px)`,
-				opacity: "1"
-			};
-		}
-		let G = S({});
-		function K() {
-			if (!j.multiSelect) return;
-			let e = {};
-			for (let t of z.value) {
-				let n = j.options.findIndex((e) => e.value === t), r = P.value[n];
-				r && (e[t] = {
-					width: `${r.offsetWidth}px`,
-					transform: `translateX(${r.offsetLeft}px)`,
-					opacity: "1"
-				});
-			}
-			G.value = e;
-		}
-		function q() {
-			j.multiSelect ? K() : W();
-		}
-		function J(e) {
+		function W(e) {
 			if (typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
 			e.getAnimations().forEach((e) => e.cancel());
-			let t = h("--ease-apple-spring", "cubic-bezier(0.175, 0.885, 0.32, 1.275)"), n = h("--scale-press", "0.95"), r = h("--scale-hover", "1.08");
+			let t = o("--ease-apple-spring", "cubic-bezier(0.175, 0.885, 0.32, 1.275)"), n = o("--scale-press", "0.95"), r = o("--scale-hover", "1.08");
 			e.animate([
 				{ transform: "scale(1)" },
 				{
@@ -89,90 +122,96 @@ var k = [
 				easing: t
 			});
 		}
-		function Y(e, t) {
-			if (j.options[t]?.disabled) return;
-			let n = P.value[t];
-			if (n && J(n), j.multiSelect) {
-				let t = [...z.value], n = t.indexOf(e);
-				n > -1 ? t.length > 1 && t.splice(n, 1) : t.push(e), M("update:modelValue", t);
-			} else M("update:modelValue", e);
+		function G(e) {
+			if (!I.value && !L.value) return;
+			let t = k.value[e];
+			if (!t) return;
+			let n = typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+			t.scrollIntoView({
+				inline: "nearest",
+				block: "nearest",
+				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);
 		}
-		D(() => j.modelValue, () => {
-			H.value && g(q);
-		}, { deep: !0 }), D(() => j.options, () => {
-			H.value && g(q);
-		}, { deep: !0 });
-		let X = null;
-		return y(() => {
-			H.value && (g(q), N.value && (X = new ResizeObserver(() => q()), X.observe(N.value)));
-		}), b(() => {
-			X?.disconnect();
-		}), (o, c) => (x(), d("div", {
+		return b(() => {
+			_(() => {
+				let e = h.options.findIndex((e) => z(e.value));
+				e >= 0 && G(e);
+			});
+		}), (o, c) => (S(), d("div", {
 			ref_key: "containerRef",
-			ref: N,
-			class: _(E(e)(I.value ? "bouncy-toggle bouncy-toggle--pill" : "bouncy-toggle", L.value && "bouncy-toggle--scroll scroll-fade-mask scrollbar-hidden", R.value && "bouncy-toggle--auto scrollbar-hidden", j.class))
+			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))
 		}, [
-			t.multiSelect ? u("", !0) : (x(), d("div", {
+			t.multiSelect ? u("", !0) : (S(), d("div", {
 				key: 0,
-				class: _([I.value ? "bouncy-slider bouncy-slider--pill" : "bouncy-slider", V.value ? "bouncy-slider--js" : "bouncy-slider--anchor"]),
-				style: v(V.value ? U.value : void 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 ? (x(!0), d(s, { key: 1 }, C(z.value, (e) => (x(), d("div", {
+			t.multiSelect ? (S(!0), d(s, { key: 1 }, w(R.value, (e) => (S(), d("div", {
 				key: "slider-" + e,
-				class: _([I.value ? "bouncy-slider bouncy-slider--pill" : "bouncy-slider", "bouncy-slider--js"]),
-				style: v(G.value[e] ?? { opacity: "0" })
+				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),
-			(x(!0), d(s, null, C(t.options, (e, t) => (x(), d(s, { key: e.value }, [e.tooltip ? (x(), l(E(a), {
+			(S(!0), d(s, null, w(t.options, (e, t) => (S(), d(s, { key: e.value }, [e.tooltip ? (S(), l(D(a), {
 				key: 0,
 				"delay-duration": 200
 			}, {
-				default: O(() => [m(E(n), null, {
-					default: O(() => [m(E(r), { "as-child": "" }, {
-						default: O(() => [f("button", {
+				default: A(() => [m(D(n), null, {
+					default: A(() => [m(D(r), { "as-child": "" }, {
+						default: A(() => [f("button", {
 							ref_for: !0,
 							ref: (e) => {
-								e && (P.value[t] = e);
+								e && (k.value[t] = e);
 							},
-							class: _([I.value ? "bouncy-btn bouncy-btn--pill" : "bouncy-btn", e.disabled && "is-disabled"]),
-							"aria-pressed": B(e.value) ? "true" : "false",
+							class: v([F.value ? "bouncy-btn bouncy-btn--pill" : "bouncy-btn", e.disabled && "is-disabled"]),
+							"aria-pressed": z(e.value) ? "true" : "false",
 							disabled: e.disabled,
-							onClick: (n) => Y(e.value, t)
-						}, [w(o.$slots, "option", {
+							onClick: (n) => K(e.value, t)
+						}, [T(o.$slots, "option", {
 							option: e,
-							active: B(e.value)
-						}, () => [p(T(e.label), 1)], !0)], 10, k)]),
+							active: z(e.value)
+						}, () => [p(E(e.label), 1)], !0)], 10, M)]),
 						_: 2
-					}, 1024), m(E(i), {
+					}, 1024), m(D(i), {
 						side: "bottom",
 						"side-offset": 8
 					}, {
-						default: O(() => [p(T(e.tooltip), 1)]),
+						default: A(() => [p(E(e.tooltip), 1)]),
 						_: 2
 					}, 1024)]),
 					_: 2
 				}, 1024)]),
 				_: 2
-			}, 1024)) : (x(), d("button", {
+			}, 1024)) : (S(), d("button", {
 				key: 1,
 				ref_for: !0,
 				ref: (e) => {
-					e && (P.value[t] = e);
+					e && (k.value[t] = e);
 				},
-				class: _([I.value ? "bouncy-btn bouncy-btn--pill" : "bouncy-btn", e.disabled && "is-disabled"]),
-				"aria-pressed": B(e.value) ? "true" : "false",
+				class: v([F.value ? "bouncy-btn bouncy-btn--pill" : "bouncy-btn", e.disabled && "is-disabled"]),
+				"aria-pressed": z(e.value) ? "true" : "false",
 				disabled: e.disabled,
-				onClick: (n) => Y(e.value, t)
-			}, [w(o.$slots, "option", {
+				onClick: (n) => K(e.value, t)
+			}, [T(o.$slots, "option", {
 				option: e,
-				active: B(e.value)
-			}, () => [p(T(e.label), 1)], !0)], 10, A))], 64))), 128))
+				active: z(e.value)
+			}, () => [p(E(e.label), 1)], !0)], 10, N))], 64))), 128))
 		], 2));
 	}
-}), [["__scopeId", "data-v-25e9946f"]]), M = /* @__PURE__ */ h({
+}), [["__scopeId", "data-v-9b5076ed"]]), F = /* @__PURE__ */ h({
 	__name: "BouncyTabs",
-	props: {
+	props: /* @__PURE__ */ g({
 		options: {},
-		modelValue: {},
 		variant: { default: "default" },
 		overflow: { default: "none" },
 		class: { type: [
@@ -182,21 +221,24 @@ var k = [
 			Object,
 			Array
 		] }
-	},
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
 	emits: ["update:modelValue"],
-	setup(e, { emit: t }) {
-		let n = e, r = t;
-		function i(e) {
-			r("update:modelValue", e);
+	setup(e) {
+		let t = e, n = O(e, "modelValue");
+		function r(e) {
+			n.value = e;
 		}
-		return (t, r) => (x(), l(j, {
+		return (i, a) => (S(), l(P, {
 			options: e.options,
-			"model-value": e.modelValue,
+			"model-value": n.value,
 			variant: e.variant,
 			overflow: e.overflow,
-			class: _(n.class),
+			class: v(t.class),
 			"multi-select": !1,
-			"onUpdate:modelValue": i
+			"onUpdate:modelValue": r
 		}, null, 8, [
 			"options",
 			"model-value",
@@ -207,4 +249,4 @@ var k = [
 	}
 });
 //#endregion
-export { M as BouncyTabs, j as BouncyToggle, o as UnderlineTabs };
+export { F as BouncyTabs, P as BouncyToggle, o as UnderlineTabs };