@mkbabb/glass-ui 3.0.0 → 3.1.0

package/src/styles/utilities.css

@@ -33,6 +33,7 @@
         font-size: var(--type-body);
         color: var(--muted-foreground);
         line-height: 1.5;
+        text-wrap: pretty; /* AQ.W3 §W3.3 — prose-register orphan/river fix */
     }
 
     /* ── Labeled-field label (V.W3.T5 / A5 §5.5) ────────────────────
@@ -44,10 +45,49 @@
     .labeled-field-label {
         font-family: var(--font-display);
         font-size: var(--type-body);
-        color: var(--muted-foreground);
+        /* AQ.W4 §W3.1c — the label color reads the group-state variable so the
+           `:has(:user-invalid)` rule below reddens it (one source of the
+           override value, shared with the `.has-error` fallback class). */
+        color: var(--field-label-color, var(--muted-foreground));
         cursor: help;
     }
 
+    /* AQ.W4 §W3.1c — LabeledField group error highlight. When any descendant
+       control is `:user-invalid`, the whole field group marks (the label
+       reddens via `--field-label-color`, the error region reveals). Scoped to
+       `.labeled-field` — never `body`, never a bare element. `:has()` Baseline
+       Widely; the `.has-error` / `.has-valid` fallback classes (toggled by the
+       `useUserInvalidAria` fallback path) are the SOLE degradation for engines
+       without `:has()`/`:user-invalid` (not a live+dead alias). */
+    .labeled-field {
+        --field-label-color: var(--muted-foreground);
+    }
+    .labeled-field:has(:user-invalid),
+    .labeled-field.has-error {
+        --field-label-color: var(--destructive);
+    }
+
+    /* The error region: hidden at rest, revealed once a descendant is
+       `:user-invalid` (or the `.has-error` fallback class is set). Non-color
+       reinforcement for the validity tint — the error TEXT is the primary
+       cue, the border/bg shift the supplement (forms guide: never color
+       alone). */
+    .labeled-field-error {
+        display: none;
+        font-size: var(--type-small);
+        color: var(--destructive);
+        margin-block-start: 0.25rem;
+    }
+    .labeled-field:has(:user-invalid) .labeled-field-error,
+    .labeled-field.has-error .labeled-field-error {
+        display: block;
+    }
+    /* Hide the error text once the field reads valid (the user corrected it). */
+    .labeled-field:has(:user-valid) .labeled-field-error,
+    .labeled-field.has-valid .labeled-field-error {
+        display: none;
+    }
+
     /* ── Popover-content recipe (V.W3.T3 / A5 §3.2) ─────────────────
        Canonical recipe for floating-tier portal containers
        (PopoverContent, DropdownMenuContent, SelectContent, etc.).
@@ -72,9 +112,28 @@
         display: none;
     }
 
+    /* AQ.W3 §W3.4 — tokenized thin scrollbar. Standard `scrollbar-width` +
+       `scrollbar-color` (Baseline Widely, Chromium 121+) is the primary path,
+       reading `--scrollbar-{thumb,track}` (auto-dark via `--muted-foreground`).
+       The legacy `::-webkit-scrollbar` family is the SOLE fallback for older
+       WebKit/Blink, gated on `@supports not (scrollbar-color: auto)` so modern
+       engines never paint it — not a live+dead alias. */
     .scrollbar-thin {
         scrollbar-width: thin;
-        scrollbar-color: color-mix(in srgb, var(--muted-foreground) 25%, transparent) transparent;
+        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+    }
+    @supports not (scrollbar-color: auto) {
+        .scrollbar-thin::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        .scrollbar-thin::-webkit-scrollbar-track {
+            background: var(--scrollbar-track);
+        }
+        .scrollbar-thin::-webkit-scrollbar-thumb {
+            background: var(--scrollbar-thumb);
+            border-radius: var(--radius-pill);
+        }
     }
 
     /* ── Focus ring — auto-activates on :focus-visible ── */
@@ -95,6 +154,8 @@
 
     /* ── Interactive item (hover bg + focus ring + active scale) ── */
     .interactive-item {
+        /* AQ.W3 §W3.2 identity base */
+        scale: 1;
         border-radius: var(--radius-lg);
         user-select: none;
         transition:
@@ -102,7 +163,7 @@
             color var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard),
-            transform var(--duration-fast) var(--ease-standard);
+            scale var(--duration-fast) var(--ease-standard);
     }
     .interactive-item:hover {
         background-color: color-mix(in srgb, var(--accent) 50%, transparent);
@@ -112,7 +173,7 @@
         box-shadow: var(--focus-ring-shadow);
     }
     .interactive-item:active {
-        transform: scale(0.98);
+        scale: 0.98;
     }
     .interactive-item:disabled,
     .interactive-item[data-disabled] {
@@ -136,15 +197,19 @@
        consumer's own hover/active bg-tint cascade to acknowledge the
        press. */
     .tap-squish {
-        transition: transform var(--duration-fast) var(--spring-snappy);
+        /* AQ.W3 §W3.2 identity base */
+        scale: 1;
+        transition: scale var(--duration-fast) var(--spring-snappy);
         transform-origin: center center;
     }
     .tap-squish:active {
-        transform: scale(var(--scale-press));
+        scale: var(--scale-press);
     }
     @media (prefers-reduced-motion: reduce) {
         .tap-squish:active {
-            transform: none;
+            /* Reset to the longhand identity (not `transform: none`) so the
+               press scale is neutralized under PRM. */
+            scale: 1;
         }
     }
 
@@ -212,6 +277,29 @@
         -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) ──────
+       `content-visibility: auto` skips layout/paint/style of an offscreen
+       subtree — the INP-under-load lever (fourier γ, muster, speedtest, words).
+       `contain-intrinsic-size: auto <estimate>` is measurement-safe: the `auto`
+       prefix makes the engine REMEMBER the last-rendered size (no scroll-jump on
+       re-entry); plain `<estimate>` freezes the section + thrashes the scrollbar
+       — the trap this closes. Estimate is token-driven (`--deferred-section-
+       size`, default 30rem). `.deferred-section--cached` →
+       `content-visibility: hidden` (always skipped, state CACHED — cheaper to
+       re-show than `display:none`). Baseline Widely; unsupporting engines render
+       normally. JS HOOK: the engine fires `contentvisibilityautostatechange`
+       { skipped } at the render-skip boundary — pair with `useRAFLoop`
+       pause/resume: `el.addEventListener('contentvisibilityautostatechange',
+       e => e.skipped ? loop.pause() : loop.resume())`. */
+    .deferred-section {
+        content-visibility: auto;
+        contain-intrinsic-size: auto var(--deferred-section-size, 30rem);
+    }
+    .deferred-section--cached {
+        content-visibility: hidden;
+        contain-intrinsic-size: auto var(--deferred-section-size, 30rem);
+    }
+
     /* ── Card scroll-timeline host (AI.W1-α) ───────────────────────────────
        Canonical scroll-overflow host that emits the `--card-scroll` named
        scroll-timeline consumed by `<CardHeader shrink>`. Apply to the
@@ -273,6 +361,8 @@
         align-items: center;
         justify-content: center;
         text-align: center;
+        /* AQ.W3 §W3.2 identity base */
+        scale: 1;
         gap: var(--metric-badge-gap, 0.125rem);
         max-width: var(--metric-badge-max-width, 8rem);
         min-height: var(--metric-badge-min-height, 1.5rem);
@@ -297,7 +387,7 @@
             background var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard),
-            transform var(--duration-fast) var(--ease-standard);
+            scale var(--duration-fast) var(--ease-standard);
     }
 
     .metric-badge > span {
@@ -310,11 +400,11 @@
         border-color: var(--metric-badge-hover-border, var(--glass-border-resting));
         background: var(--metric-badge-hover-bg, var(--glass-bg-resting));
         box-shadow: var(--metric-badge-hover-shadow, 0 2px 10px color-mix(in srgb, var(--shadow-color) 12%, transparent), var(--glass-highlight));
-        transform: scale(var(--metric-badge-hover-scale, 1.02));
+        scale: var(--metric-badge-hover-scale, 1.02);
     }
 
     .metric-badge:active {
-        transform: scale(var(--metric-badge-press-scale, 0.96));
+        scale: var(--metric-badge-press-scale, 0.96);
     }
 
     .metric-badge:focus-visible {
@@ -464,20 +554,24 @@
        The shared transition is expressed once over the family; the three
        :hover rules carry the per-level translate + shadow. */
     :where(.hover-lift, .hover-lift-md, .hover-lift-lg) {
-        transition-property: transform, box-shadow;
+        /* Individual-transform identity base (AQ.W3 §W3.2) — `translate: 0` at
+           rest mints the stacking context once so the hover lift does not
+           flicker it into being. */
+        translate: 0;
+        transition-property: translate, box-shadow;
         transition-duration: var(--duration-normal);
         transition-timing-function: var(--ease-standard);
     }
     .hover-lift:hover:not(:disabled):not([aria-disabled='true']) {
-        transform: translateY(var(--lift-sm));
+        translate: 0 var(--lift-sm);
         box-shadow: var(--shadow-md);
     }
     .hover-lift-md:hover:not(:disabled):not([aria-disabled='true']) {
-        transform: translateY(var(--lift-md));
+        translate: 0 var(--lift-md);
         box-shadow: var(--shadow-md);
     }
     .hover-lift-lg:hover:not(:disabled):not([aria-disabled='true']) {
-        transform: translateY(var(--lift-lg));
+        translate: 0 var(--lift-lg);
         box-shadow: var(--shadow-lg);
     }
 
@@ -494,17 +588,20 @@
     :where(.shadow-cartoon-sm, .shadow-cartoon-md, .shadow-cartoon-lg) {
         border: 2px solid var(--border);
     }
+    /* Static cartoon-stamp lift (AQ.W3 §W3.2). NOT state-driven, so the
+       identity base is not strictly required, but the `translate:` longhand
+       keeps the family uniform with the state-driven sites above. */
     .shadow-cartoon-sm {
         box-shadow: var(--shadow-cartoon-sm);
-        transform: translateY(-1px);
+        translate: 0 -1px;
     }
     .shadow-cartoon-md {
         box-shadow: var(--shadow-cartoon-md);
-        transform: translateY(-1px);
+        translate: 0 -1px;
     }
     .shadow-cartoon-lg {
         box-shadow: var(--shadow-cartoon-lg);
-        transform: translateY(-2px);
+        translate: 0 -2px;
     }
 
     /* ── Divider utilities ── */
@@ -542,10 +639,13 @@
    `class="scale-on-hover"`; transition + easing bind to the canonical
    `--duration-fast` + `--ease-standard` tokens. */
 @utility scale-on-hover {
-    @apply transition-transform duration-fast ease-standard;
+    /* Individual-transform identity base (AQ.W3 §W3.2). Transition the `scale`
+       longhand (not `transform`) so the migrated hover scale animates. */
+    scale: 1;
+    transition: scale var(--duration-fast) var(--ease-standard);
 
     &:hover {
-        transform: scale(var(--scale-hover));
+        scale: var(--scale-hover);
     }
 }
 
@@ -802,18 +902,20 @@
    this is the canonical opt-in that adds the spring-hover lift. Consumed by
    keyframes.js at 7 sites. */
 @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),
-        transform var(--duration-fast) var(--ease-standard),
+        scale var(--duration-fast) var(--ease-standard),
         opacity var(--duration-fast) var(--ease-standard);
 
     &:hover {
-        transform: scale(var(--scale-hover));
+        scale: var(--scale-hover);
     }
 
     &:active {
-        transform: scale(var(--scale-press));
+        scale: var(--scale-press);
     }
 
     &:disabled {
@@ -829,7 +931,7 @@
         transition:
             background-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
-            transform var(--duration-fast) var(--ease-standard),
+            scale var(--duration-fast) var(--ease-standard),
             opacity var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard);
     }
@@ -856,3 +958,54 @@ html.no-transition *::before,
 html.no-transition *::after {
     transition-duration: 0s !important;
 }
+
+/* ── Forced-colors restoration (AQ.W2 §5) ──────────────────────────────
+   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. */
+@media (forced-colors: active) {
+    .focus-ring:focus-visible,
+    .glass-btn:focus-visible,
+    .interactive-item: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. */
+    .hairline-accent,
+    .glass-dock,
+    .glass-card {
+        border: 1px solid CanvasText;
+    }
+}
+
+/* ── Coarse-pointer touch-target floor (AQ.W3 §7) ───────────────────────────
+   General-surface companion to the dock-scoped R0G-6 floor (dock.css). On
+   coarse pointers the small icon-button/trigger surfaces OUTSIDE the dock lift
+   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.
+   `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 {
+        min-block-size: var(--touch-target, 2.75rem);
+        min-inline-size: var(--touch-target, 2.75rem);
+    }
+}

package/src/styles/view-transition.css

@@ -0,0 +1,62 @@
+/*
+ * view-transition.css — the View-Transitions CSS substrate (AQ.W5 §Design 3b).
+ *
+ * Cascade rung after scroll-driven.css. Token-first shared-class recipes for the
+ * group-transition case — the substrate the `useViewTransition` helper
+ * (`@mkbabb/glass-ui/motion-core`) pairs with. The helper wraps the DOM
+ * mutation; this CSS owns the LOOK of the cross-fade/slide. The consumer adds
+ * `view-transition-class: gl-list-item` plus a UNIQUE `view-transition-name`
+ * per tracked element (the runtime MANDATORY — ≤ 1 element per name per state,
+ * else the transition is skipped silently).
+ *
+ * Consumed across the AQ↔muster J seam: J.W5's verdict re-rank tags each row
+ * `view-transition-class: gl-list-item; view-transition-name: row-<id>` and
+ * calls `startViewTransition(() => render())`; the dock layer swap (W6) reuses
+ * the same group recipe.
+ *
+ * Baseline: same-document `view-transitions` + `view-transition-class` = Newly
+ * Available. The helper's instant-update fallback (calls `mutate()` synchronously
+ * when `document.startViewTransition` is absent) is the ≤ 20-LOC feature-detected
+ * fallback — no CSS counterpart is needed because a non-supporting engine simply
+ * never generates the `::view-transition*` pseudo tree.
+ *
+ * Reduced-motion: `animation: none` on every VT pseudo. The native swap still
+ * runs (state mutates instantly), just without motion — the correct PRM degrade.
+ */
+
+@media (prefers-reduced-motion: reduce) {
+    ::view-transition-group(*),
+    ::view-transition-old(*),
+    ::view-transition-new(*) {
+        animation: none !important;
+    }
+}
+
+/* Shared group class — consumers add `view-transition-class: gl-list-item` on
+ * 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));
+}
+
+/* Added / removed members — the `:only-child` trick from the group guide: a
+ * member present in only ONE of the old/new states slides instead of cross-fades. */
+::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; }
+
+/* AQ.W6 §Design 7 — the dock layer group recipe. `<GlassDock>` (.dock-layers)
+ * 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. */
+::view-transition-group(.gl-dock-layer) {
+    animation-duration: var(--vt-duration, var(--duration-normal));
+    animation-timing-function: var(--vt-ease, var(--ease-apple-spring));
+}
+
+@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); } }
+
+/* Keep the non-transitioned UI interactive while the snapshot animates. */
+::view-transition { pointer-events: none; }

package/dist/HoverPopover-Btv4RQfv.js

@@ -1,80 +0,0 @@
-import { t as e } from "./cn-DJXf4yaB.js";
-import { i as t } from "./dockContext-BDGSrwsV.js";
-import { computed as n, createBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, mergeProps as s, openBlock as c, ref as l, renderSlot as u, toDisplayString as d, unref as f, watch as p, withCtx as m } from "vue";
-import { HoverCardContent as h, HoverCardPortal as g, HoverCardRoot as _, HoverCardTrigger as v } from "reka-ui";
-//#region src/components/custom/hover-popover/HoverPopover.vue?vue&type=script&setup=true&lang.ts
-var y = { class: "hover-popover-label" }, b = /* @__PURE__ */ o({
-	__name: "HoverPopover",
-	props: {
-		content: {},
-		open: { type: Boolean },
-		side: { default: "top" },
-		align: { default: "center" },
-		hoverOpenDelay: { default: 250 },
-		closeDelay: { default: 150 },
-		sideOffset: { default: 6 },
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] },
-		keepDockOpen: {
-			type: Boolean,
-			default: !1
-		}
-	},
-	emits: ["update:open"],
-	setup(o, { emit: b }) {
-		let x = b, S = o, C = n(() => e("z-popover hover-popover-panel popover-animate", S.class)), w = l(S.open ?? !1);
-		p(() => S.open, (e) => {
-			typeof e == "boolean" && e !== w.value && (w.value = e);
-		}), p(w, (e) => {
-			x("update:open", e);
-		});
-		let T = t(), E = !1;
-		p(w, (e) => {
-			S.keepDockOpen && (e && !E ? (T?.keepOpen(), E = !0) : !e && E && (T?.release(), E = !1));
-		});
-		let D = n(() => S.keepDockOpen && T?.id ? {
-			"data-glass-dock-portal": "",
-			"data-glass-dock-owner": T.id
-		} : {});
-		return (e, t) => (c(), r(f(_), {
-			open: w.value,
-			"onUpdate:open": t[0] ||= (e) => w.value = e,
-			"open-delay": o.hoverOpenDelay,
-			"close-delay": o.closeDelay
-		}, {
-			default: m(() => [a(f(v), { "as-child": "" }, {
-				default: m(() => [u(e.$slots, "trigger", {}, () => [u(e.$slots, "default")])]),
-				_: 3
-			}), a(f(g), null, {
-				default: m(() => [a(f(h), s({
-					side: o.side,
-					align: o.align,
-					"side-offset": o.sideOffset,
-					"avoid-collisions": !0,
-					class: C.value
-				}, D.value), {
-					default: m(() => [u(e.$slots, "content", {}, () => [i("span", y, d(o.content), 1)])]),
-					_: 3
-				}, 16, [
-					"side",
-					"align",
-					"side-offset",
-					"class"
-				])]),
-				_: 3
-			})]),
-			_: 3
-		}, 8, [
-			"open",
-			"open-delay",
-			"close-delay"
-		]));
-	}
-});
-//#endregion
-export { b as t };

package/dist/Label-C8QMJSsf.js

@@ -1,32 +0,0 @@
-import { t as e } from "./cn-DJXf4yaB.js";
-import { computed as t, createBlock as n, defineComponent as r, mergeProps as i, openBlock as a, renderSlot as o, unref as s, withCtx as c } from "vue";
-import { Label as l } from "reka-ui";
-//#endregion
-//#region src/components/ui/label/Label.vue
-var u = /* @__PURE__ */ r({
-	__name: "Label",
-	props: {
-		for: {},
-		asChild: { type: Boolean },
-		as: {},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	setup(r) {
-		let u = r, d = t(() => {
-			let { class: e, ...t } = u;
-			return t;
-		});
-		return (t, r) => (a(), n(s(l), i(d.value, { class: s(e)("text-small font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", u.class) }), {
-			default: c(() => [o(t.$slots, "default")]),
-			_: 3
-		}, 16, ["class"]));
-	}
-});
-//#endregion
-export { u as t };

package/dist/UnderlineTabs-BtrUcXn-.js

@@ -1,64 +0,0 @@
-import { t as e } from "./cn-DJXf4yaB.js";
-import { t } from "./_plugin-vue_export-helper-n-_DRHWS.js";
-import { Fragment as n, createElementBlock as r, createElementVNode as i, defineComponent as a, nextTick as o, normalizeClass as s, normalizeStyle as c, onMounted as l, onUnmounted as u, openBlock as d, ref as f, renderList as p, toDisplayString as m, unref as h, watch as g } from "vue";
-//#region src/components/custom/tabs/UnderlineTabs.vue?vue&type=script&setup=true&lang.ts
-var _ = ["aria-selected", "onClick"], v = /* @__PURE__ */ t(/* @__PURE__ */ a({
-	__name: "UnderlineTabs",
-	props: {
-		options: {},
-		modelValue: {},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	emits: ["update:modelValue"],
-	setup(t, { emit: a }) {
-		let v = t, y = a, b = f(null), x = f([]), S = f({
-			width: "0px",
-			transform: "translateX(0px)"
-		});
-		function C() {
-			let e = v.options.findIndex((e) => e.value === v.modelValue);
-			if (e < 0 || !x.value[e]) return;
-			let t = x.value[e];
-			S.value = {
-				width: `${t.offsetWidth}px`,
-				transform: `translateX(${t.offsetLeft}px)`
-			};
-		}
-		function w(e) {
-			y("update:modelValue", e);
-		}
-		g(() => v.modelValue, () => o(C)), g(() => v.options, () => o(C), { deep: !0 });
-		let T = null;
-		return l(() => {
-			o(C), b.value && (T = new ResizeObserver(() => C()), T.observe(b.value));
-		}), u(() => {
-			T?.disconnect();
-		}), (a, o) => (d(), r("div", {
-			ref_key: "containerRef",
-			ref: b,
-			role: "tablist",
-			class: s(h(e)("underline-tabs", v.class))
-		}, [i("div", {
-			class: "underline-indicator",
-			style: c(S.value)
-		}, null, 4), (d(!0), r(n, null, p(t.options, (e, n) => (d(), r("button", {
-			key: e.value,
-			ref_for: !0,
-			ref: (e) => {
-				e && (x.value[n] = e);
-			},
-			class: "underline-tab",
-			role: "tab",
-			"aria-selected": t.modelValue === e.value ? "true" : "false",
-			onClick: (t) => w(e.value)
-		}, m(e.label), 9, _))), 128))], 2));
-	}
-}), [["__scopeId", "data-v-b77ed368"]]);
-//#endregion
-export { v as t };