@mkbabb/glass-ui 3.13.0 → 4.0.0

package/src/styles/utilities/base.css

@@ -1,7 +1,45 @@
 /* utilities/base.css
-   The @layer components base half — section-description, labeled-field, popover-content, scrollbar, focus-ring, hairline-accent, interactive-item, tap-squish, status-dot, depth-text, preserve-3d, ios input fix, scroll-fade masks, deferred-section, scroll-timeline host, shimmer text, keyboard key.
+   The @layer components base half — section-description, labeled-field, popover-content, scrollbar, focus-ring, hairline-accent, interactive-item, tap-squish, status-dot, depth-text, preserve-3d, ios input fix, scroll-fade masks, fading-scroll (scroll-state-driven edge fade), deferred-section, scroll-timeline host, shimmer text, keyboard key.
    Carved from the utilities.css cascade root; @import-ed by utilities.css in
    cascade order. See docs/precepts/design-idioms.md §cohesion-aware partials. */
+
+/* ═══════════════════════════════════════════════
+   §FADING-SCROLL — the per-edge mask-width interpolation customs (BA.W-FADING-SCROLL)
+
+   `<FadingScroll>`'s scroll-state-driven edge fade is a `mask-image` whose two
+   per-edge ramp widths are these registered `@property <length-percentage>`
+   customs. Registered (not bare custom props) so they INTERPOLATE smoothly off
+   the `scroll(self)` timeline below — an unregistered custom would jump between
+   the textual `0px` / `var(--fade-scroll-width)` endpoints rather than feathering.
+   `inherits: false`: each scroll port owns its own edge state (an ancestor must
+   never push a fade-width onto an unrelated descendant strip — mirrors the
+   `--progress-crescendo` / `--ripple-radius` non-inheriting registrations).
+   `initial-value: 0px` = the SHARP floor: an at-rest, no-overflow edge has NO
+   feather (the R8-08 "Shy" defect — the static `.scroll-fade-*` mask half-erased
+   the first card's chrome at rest — is structurally impossible because the
+   default is sharp and the timeline OPENS the feather only on real scroll).
+
+   These customs are INTERNAL (not a public token). The public knob is
+   `--fade-scroll-width` (offsets-sizing.css). Co-registered HERE (the consuming
+   CSS file) per the `@property --dock-morph-t` in dock.css precedent — a
+   component's typed property rides its own recipe file.
+
+   Co-written by the `useFadingScroll` JS fallback (the dual-path single writer):
+   the native `scroll(self)` timeline below owns these customs on a supporting
+   engine, the composable writes the SAME two customs when it is absent. Never
+   both — the composable feature-detect-gates OFF under timeline support.
+   ═══════════════════════════════════════════════ */
+@property --fade-start {
+    syntax: "<length-percentage>";
+    inherits: false;
+    initial-value: 0px;
+}
+@property --fade-end {
+    syntax: "<length-percentage>";
+    inherits: false;
+    initial-value: 0px;
+}
+
 @layer components {
     /* ── Section description (V.W3.T7) ──────────────────────────────
        Canonical recipe for the `<Section>` primitive's description
@@ -40,6 +78,23 @@
        without `:has()`/`:user-invalid` (not a live+dead alias). */
     .labeled-field {
         --field-label-color: var(--muted-foreground);
+        /* THE WIDTH CONTRACT (BA.W-CONFIG-CHASSIS.1, S1 / CFG-1). The
+           labeled-field root claims FULL inline width + lays its label/control
+           stack out as a column, so a slotted control (a Slider whose inner
+           `.glass-slider` resolves `width: 100%`) has a DEFINITE width to
+           resolve against — never the content-sized 0 the bare `display:block`
+           default produced inside the configurator row's flex slot. This is the
+           half that survives the `hide-label` register: with the visible label
+           rendered `sr-only`, the label was the only intrinsic width
+           contributor, so the field collapsed; `width:100%` makes the field own
+           its inline axis regardless of label visibility. `min-width:0` lets it
+           shrink below content min inside a constrained row. Standalone use is
+           unaffected (a `<LabeledField>` outside a flex parent fills its block
+           container exactly as the prior `display:block` did). */
+        display: flex;
+        flex-direction: column;
+        inline-size: 100%;
+        min-inline-size: 0;
     }
     .labeled-field:has(:user-invalid),
     .labeled-field.has-error {
@@ -284,6 +339,127 @@
         mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
     }
 
+    /* ── Fading scroll — the scroll-STATE-driven edge fade (BA.W-FADING-SCROLL) ──
+       `<FadingScroll>`'s recipe. SUPERSEDES the scroll-BLIND `.scroll-fade-*`
+       masks above (which feathered both edges unconditionally — the R8-08 "Shy"
+       defect). Here each edge's ramp width is a registered `--fade-start` /
+       `--fade-end` custom (above, default 0px = SHARP), driven by the
+       `scroll(self)` timeline so the start edge feathers only past `scroll > 0`
+       and the end edge only while trailing overflow remains.
+
+       The root IS the scroll port (the component sets overflow via the consumer's
+       utilities — `overflow-x-auto` / `overflow-y-auto` come from the class the
+       consumer passes; the axis floor below sets the OTHER axis). The 4-stop
+       mask reads the two customs; at rest both are 0px so the gradient is a flat
+       opaque pass-through (no feather). */
+    .fading-scroll {
+        /* The base mask is axis-specialized by the modifier classes below. The
+           default-x case uses the inline ramp; the y case the block ramp. */
+        mask-image: linear-gradient(
+            to right,
+            transparent 0,
+            black var(--fade-start),
+            black calc(100% - var(--fade-end)),
+            transparent 100%
+        );
+    }
+    .fading-scroll--x {
+        overflow-x: auto;
+        mask-image: linear-gradient(
+            to right,
+            transparent 0,
+            black var(--fade-start),
+            black calc(100% - var(--fade-end)),
+            transparent 100%
+        );
+    }
+    .fading-scroll--y {
+        overflow-y: auto;
+        mask-image: linear-gradient(
+            to bottom,
+            transparent 0,
+            black var(--fade-start),
+            black calc(100% - var(--fade-end)),
+            transparent 100%
+        );
+    }
+
+    /* The NATIVE primary path: drive the per-edge customs off a `scroll(self)`
+       timeline — ZERO JS on a supporting engine (the `scroll-driven.css` /
+       Baseline-Newly-Available bar). UNLIKE `scroll-driven.css` this is NOT
+       wrapped in `prefers-reduced-motion: no-preference` — the fade is a
+       LEGIBILITY cue, not motion, so it stays present under PRM (it merely stops
+       interpolating; the discrete overflow-edge presence stays correct, and the
+       registered customs make even the static endpoints land right). */
+    @supports (animation-timeline: scroll()) {
+        /* The start edge: from sharp (0) to feathered, completing within the
+           first `--fade-scroll-width` of scroll — so at `scroll = 0` the start is
+           SHARP and it ramps in only once the user genuinely scrolls past. */
+        @keyframes gl-fade-start-in {
+            from {
+                --fade-start: 0px;
+            }
+            to {
+                --fade-start: var(--fade-scroll-width);
+            }
+        }
+        /* The end edge: feathered while trailing overflow remains, ramping OUT to
+           sharp over the last `--fade-scroll-width` of scroll — so at the scroll
+           end (no trailing overflow) the end is SHARP. */
+        @keyframes gl-fade-end-out {
+            from {
+                --fade-end: var(--fade-scroll-width);
+            }
+            to {
+                --fade-end: 0px;
+            }
+        }
+        /* x axis — `scroll(self inline)`; two animations on the ONE element, each
+           gated by `animation-range` to the start / end sliver of the scroll
+           distance. `fadeStart`/`fadeEnd` props toggle their respective
+           animation off via the `[data-fade-*]` presence attrs. */
+        .fading-scroll--x[data-fade-start] {
+            animation: gl-fade-start-in linear both;
+            animation-timeline: scroll(self inline);
+            animation-range: 0 var(--fade-scroll-width);
+        }
+        .fading-scroll--x[data-fade-end] {
+            animation: gl-fade-end-out linear both;
+            animation-timeline: scroll(self inline);
+            animation-range: calc(100% - var(--fade-scroll-width)) 100%;
+        }
+        /* BOTH edges on one element compose as two named animations. */
+        .fading-scroll--x[data-fade-start][data-fade-end] {
+            animation:
+                gl-fade-start-in linear both,
+                gl-fade-end-out linear both;
+            animation-timeline: scroll(self inline), scroll(self inline);
+            animation-range:
+                0 var(--fade-scroll-width),
+                calc(100% - var(--fade-scroll-width)) 100%;
+        }
+        /* y axis — `scroll(self block)`. */
+        .fading-scroll--y[data-fade-start] {
+            animation: gl-fade-start-in linear both;
+            animation-timeline: scroll(self block);
+            animation-range: 0 var(--fade-scroll-width);
+        }
+        .fading-scroll--y[data-fade-end] {
+            animation: gl-fade-end-out linear both;
+            animation-timeline: scroll(self block);
+            animation-range: calc(100% - var(--fade-scroll-width)) 100%;
+        }
+        .fading-scroll--y[data-fade-start][data-fade-end] {
+            animation:
+                gl-fade-start-in linear both,
+                gl-fade-end-out linear both;
+            animation-timeline: scroll(self block), scroll(self block);
+            animation-range:
+                0 var(--fade-scroll-width),
+                calc(100% - var(--fade-scroll-width)) 100%;
+        }
+    }
+
     /* ── 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).

package/src/styles/utilities/btn.css

@@ -1,5 +1,5 @@
 /* utilities/btn.css
-   The interactive/button @utility cluster — scale-on-hover, twin-line-divider, transition-control/collapse, sheet-animate, btn-audacious + btn-audacious-gold (+ the btn-gold-bg-sweep keyframes), table-cell/head density, rainbow-vivid/pastel, the text-highlight paint, and btn-interactive.
+   The interactive/button @utility cluster — scale-on-hover, twin-line-divider, transition-control/collapse, sheet-animate, table-cell/head density, rainbow-vivid/pastel, the text-highlight paint, and btn-interactive. (The btn-audacious/btn-audacious-gold disco recipes + the btn-gold-bg-sweep keyframes were RETIRED at BA.W-GLASS-CAL.)
    Carved from the utilities.css cascade root; @import-ed by utilities.css in
    cascade order. See docs/precepts/design-idioms.md §cohesion-aware partials. */
 /* ── Hover scale (O.W6 Lane C) ──
@@ -18,7 +18,7 @@
        (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(--spring-smooth);
+    transition: scale var(--spring-smooth-duration) var(--spring-smooth);
 
     &:hover {
         scale: var(--scale-hover);
@@ -81,203 +81,20 @@
            data-[state=closed]:duration-[var(--duration-fast)];
 }
 
-/* ── Audacious primary CTA recipe ────────────────────────────────────────
-   Composes three at-rest marks (top-highlight via --glass-highlight, bottom
-   under-shadow via --border-hairline, baseline glass) with three disco accents
-   on hover (specular swap via --glass-specular, sparkle sweep via the ::after
-   star, disco-grain via --paper-clean-texture blended with a --primary radial).
-   Disco fires on hover only — at rest the button reads as a restrained glass
-   surface. Pair with `bg-primary text-primary-foreground`; the utility owns
-   the texture/highlight/sparkle composition only. */
-@utility btn-audacious {
-    position: relative;
-    isolation: isolate;
-    overflow: hidden;
-    border: 1px solid var(--glass-border-quiet);
-    box-shadow:
-        var(--border-hairline),
-        var(--glass-highlight);
-    transition:
-        background var(--duration-fast) var(--ease-standard),
-        color var(--duration-fast) var(--ease-standard),
-        transform var(--duration-fast) var(--ease-standard),
-        box-shadow var(--duration-fast) var(--ease-standard),
-        --ripple-radius var(--motion-duration-ripple, 340ms) var(--ease-out-expo);
-
-    /* Hover composition: paper-grain texture overlaid on a soft
-       --primary radial, with the specular catch-light replacing the
-       resting hairline highlight. The radial uses --primary at 18%
-       — same alpha rung the dock primary tier consumes for phase
-       tinting, just bound to the canonical CTA color instead. */
-    &:hover:not(:disabled) {
-        background-image:
-            var(--paper-clean-texture),
-            radial-gradient(
-                ellipse at 30% 30%,
-                color-mix(in srgb, var(--primary) 18%, transparent),
-                transparent 70%
-            );
-        background-blend-mode: overlay, normal;
-        background-size: var(--paper-texture-size), auto;
-        box-shadow:
-            var(--glass-specular),
-            0 0.5px 0 0 rgb(0 0 0 / 0.06);
-    }
-
-    /* AI.W4-M.2 (Q5 — G-AI-D27 ratified) — press-ripple via a typed
-       `--ripple-radius` length custom property. The `::before`
-       element paints a radial gradient whose stop radius equals the
-       typed length; the `:active` rule sets the length to the cap
-       (`--ripple-radius-max`, 12rem), and the host's transition
-       (above) interpolates the radius via the @property registration
-       (tokens.css §18). Release returns the length to its 0px initial
-       value and the ripple retires. The ripple paints at z-index 0
-       (above the host's background, below the slot content which sits
-       in the default 0 stacking context but with text inheriting the
-       slot's foreground colour). */
-    &::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        pointer-events: none;
-        z-index: 0;
-        border-radius: inherit;
-        background: radial-gradient(
-            circle at center,
-            color-mix(in srgb, var(--primary-foreground, hsl(0 0% 100%)) 35%, transparent) 0,
-            color-mix(in srgb, var(--primary-foreground, hsl(0 0% 100%)) 18%, transparent)
-                calc(var(--ripple-radius, 0px) * 0.55),
-            transparent var(--ripple-radius, 0px)
-        );
-        transition: inherit;
-        will-change: background;
-    }
-
-    &:active:not(:disabled) {
-        --ripple-radius: var(--ripple-radius-max, 12rem);
-    }
-
-    /* Sparkle glyph — hidden at rest, animated on hover. The star
-       sweeps diagonally from top-left to bottom-right per the canonical
-       sparkle-sweep keyframe (animations.css). */
-    &::after {
-        content: "✦";
-        position: absolute;
-        top: 0.25rem;
-        left: 0.5rem;
-        color: hsl(0 0% 100% / 0.7);
-        font-size: 0.75rem;
-        line-height: 1;
-        pointer-events: none;
-        opacity: 0;
-        will-change: transform, opacity;
-        z-index: 1;
-    }
-
-    @media (prefers-reduced-motion: no-preference) {
-        &:hover::after {
-            animation: sparkle-sweep var(--duration-sparkle) var(--ease-out-expo);
-        }
-    }
-
-    /* PRM bracket — the press-ripple retires; the press still reads
-       via the audacious recipe's transform/scale beat (the ripple is
-       affirmation atop affirmation). */
-    @media (prefers-reduced-motion: reduce) {
-        transition:
-            background var(--duration-fast) var(--ease-standard),
-            color var(--duration-fast) var(--ease-standard),
-            transform var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard);
-
-        &:active:not(:disabled) {
-            --ripple-radius: 0px;
-        }
-    }
-}
-
-/* ── Gold CTA shimmer modifier — AN.R0 D9 ───────────────────────────────
-   `btn-audacious-gold` extends `btn-audacious` with a gold sweep shimmer
-   on hover. Pair as `btn-audacious btn-audacious-gold` (or use the Button
-   `variant="gold-audacious"` which composes both). The hover shimmer is a
-   translucent linear-gradient sweep (low alpha — tasteful, not garish)
-   that slides left-to-right via the existing `gold-shimmer-slide` keyframe
-   (animations.css). The gold gradient uses the canonical `--color-gold-*`
-   token triad (tokens.css §13).
-
-   Design register:
-   • PRM no-preference: shimmer sweeps continuously at `--duration-shimmer`
-     rate; the sparkle-sweep (from btn-audacious) coexists on hover.
-   • PRM reduce: static gold tint shows on hover; no animation.
-   • The gold shimmer is a background-image layer ABOVE the existing
-     btn-audacious paper-grain + primary-radial layers, blended with
-     `overlay` so the glass substrate reads through at partial opacity.
-   • The `::before` ripple and `::after` sparkle from btn-audacious are
-     unchanged; this modifier only retunes the hover background layers.
-   • Consumer applies: `<Button variant="gold-audacious">Next →</Button>` */
-@utility btn-audacious-gold {
-    /* At rest: a faint warm gold tint over the glass surface reads as "warm
-       glass" without announcing the hover state prematurely. */
-    background-image:
-        linear-gradient(
-            135deg,
-            color-mix(in srgb, var(--color-gold) 8%, transparent),
-            color-mix(in srgb, var(--color-gold-light) 5%, transparent) 50%,
-            color-mix(in srgb, var(--color-gold) 8%, transparent)
-        );
-
-    /* Hover: deepen the plate to a SATURATED gold the white label clears (AW.W13
-       names a "saturated gold backplate"; the D1 fix). The bottom layer is the
-       OPAQUE fixed deep gold (`--color-gold-deep`, mode-INVARIANT) — a solid plate
-       at ~6.5:1 (light) / ~5.5:1 (dark) against white, well below the ~0.18
-       luminance floor white text needs for ≥4.5:1 (was a translucent 22-30% wash
-       over near-cream glass → 1.29:1 white-on-pale-gold). The plate is FIXED-dark
-       in both modes — deepening toward the mode-flipping `--foreground` brightened
-       the dark plate to a cream-gold; `--color-gold-deep` does not flip. The
-       shimmer sweep rides ABOVE as a LOW-alpha gold gradient (normal blend, ≤18% —
-       it textures the plate without brightening it past the floor), and the
-       paper-grain overlays for the disco facet. */
-    &:hover:not(:disabled) {
-        background-image:
-            var(--paper-clean-texture),
-            linear-gradient(
-                90deg,
-                transparent 0%,
-                color-mix(in srgb, var(--color-gold) 14%, transparent) 25%,
-                color-mix(in srgb, var(--color-gold) 18%, transparent) 50%,
-                color-mix(in srgb, var(--color-gold) 14%, transparent) 75%,
-                transparent 100%
-            ),
-            linear-gradient(
-                135deg,
-                var(--color-gold-deep),
-                color-mix(in srgb, var(--color-gold-deep), var(--color-gold-dark) 18%) 50%,
-                var(--color-gold-deep)
-            );
-        background-blend-mode: overlay, normal, normal;
-        background-size: var(--paper-texture-size), 250% 100%, 100% 100%;
-        background-position: 0 0, 100% 0, 0 0;
-        box-shadow:
-            var(--glass-specular),
-            0 0 0 1px color-mix(in srgb, var(--color-gold-dark) 40%, transparent),
-            0 0.5px 0 0 rgb(0 0 0 / 0.06);
-    }
-
-    @media (prefers-reduced-motion: no-preference) {
-        &:hover:not(:disabled) {
-            animation: btn-gold-bg-sweep var(--duration-shimmer) linear infinite;
-        }
-    }
-}
-
-/* Background-position sweep for the gold CTA hover shimmer.
-   Distinct from `gold-shimmer-slide` (which animates background-position for
-   a text-clip gradient). This variant sweeps the `background-position` of the
-   250% wide gradient across the button's bounding box. */
-@keyframes btn-gold-bg-sweep {
-    0%   { background-position: 0 0, 100% 0, 0 0; }
-    100% { background-position: 0 0, -100% 0, 0 0; }
-}
+/* ── Calm CTA register (BA.W-GLASS-CAL, H2a — the disco retired) ──────────
+   The `@utility btn-audacious` + `@utility btn-audacious-gold` recipes + the
+   `@keyframes btn-gold-bg-sweep` are RETIRED (clean break, no alias). The user
+   removed the "disco effect" wholesale: the sparkle `::after` glyph, the
+   disco-grain hover (`--paper-clean-texture` + `--primary`/gold radial), the
+   gold-sweep shimmer, and the typed `--ripple-radius` press-ripple are GONE.
+
+   The `primary-audacious`/`gold-audacious` Button variants (button/index.ts)
+   now collapse onto the calm glass-first register — the `glass-wash`/`btn-glass`
+   surface + the `--glass-specular` edge catch-light, hover/press on the §6
+   doctrine (surface→`--ease-standard`, scale→`--spring-smooth`). `gold-audacious`
+   keeps a STATIC warm-gold tint (no animated sweep). The fenced-out GOOD pops
+   (`.gold-shimmer` static text gradient, the specular gleam, the press-scale)
+   STAY — they were never disco. */
 
 /* ── Table density utilities — AN.R0 ─────────────────────────────────────
    `table-cell` and `table-head` replace the former Tailwind `p-4` / `h-12`
@@ -370,7 +187,7 @@
     transition:
         background-color var(--duration-fast) var(--ease-standard),
         color var(--duration-fast) var(--ease-standard),
-        scale var(--duration-fast) var(--spring-smooth),
+        scale var(--spring-smooth-duration) var(--spring-smooth),
         opacity var(--duration-fast) var(--ease-standard);
 
     &:hover {
@@ -394,7 +211,7 @@
         transition:
             background-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
-            scale var(--duration-fast) var(--spring-smooth),
+            scale var(--spring-smooth-duration) var(--spring-smooth),
             opacity var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard);
     }

package/src/styles/view-transition.css

@@ -35,7 +35,10 @@
 /* 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));
+    /* BA.W-GLASS-CAL Unit 3 — the duration fallback rides the bouncy spring's
+       OWN settle clock (`--spring-bouncy-duration`) so the default VT bounce
+       plays at its physical settle; a consumer still overrides via `--vt-duration`. */
+    animation-duration: var(--vt-duration, var(--spring-bouncy-duration));
     animation-timing-function: var(--vt-ease, var(--spring-bouncy));
 }
 

package/dist/CardAction-Cj2eycQ2.js

@@ -1,157 +0,0 @@
-import { t as e } from "./cn-DJXf4yaB.js";
-import { t } from "./useSpecularTracking-Bo5su68i.js";
-import { t as n } from "./_plugin-vue_export-helper-ok8pgSl5.js";
-import { computed as r, createBlock as i, createElementBlock as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, openBlock as l, renderSlot as u, unref as d, withCtx as f } from "vue";
-import { Primitive as p } from "reka-ui";
-var m = /* @__PURE__ */ o({
-	__name: "Card",
-	props: {
-		tier: { default: "resting" },
-		surface: { default: "glass" },
-		shadow: {
-			type: Boolean,
-			default: !0
-		},
-		grain: {
-			type: Boolean,
-			default: !0
-		},
-		specular: { default: "off" },
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] },
-		asChild: { type: Boolean },
-		as: { default: "div" }
-	},
-	setup(n) {
-		let a = n, { specularStyle: o, onPointerMove: m } = t(), h = r(() => a.surface === "glass" && a.specular !== "off"), g = r(() => a.specular === "full" ? {
-			"--glass-specular-intensity-rest": "0.04",
-			"--glass-specular-intensity-hover": "0.18",
-			"--glass-specular-intensity-active": "0.26"
-		} : {}), _ = r(() => h.value ? {
-			...g.value,
-			...o.value
-		} : void 0);
-		return (t, r) => (l(), i(d(p), {
-			"data-slot": "card",
-			"data-tier": n.tier,
-			"data-surface": n.surface,
-			"data-grain": n.grain,
-			as: n.as,
-			"as-child": n.asChild,
-			style: c(_.value),
-			onPointermove: r[0] ||= (e) => h.value && d(m)(e),
-			class: s(d(e)("rounded-card text-card-foreground scrollbar-hidden", "[--card-spacing:--spacing(6)] data-[size=sm]:[--card-spacing:--spacing(4)]", n.tier === "opaque" ? "glass-resting glass-opaque" : `glass-${n.tier}`, h.value && "glass-specular-track", n.surface === "cartoon" && "cartoon-surface", n.surface === "veil" && "veil-surface", n.shadow && n.surface === "glass" && "shadow-card", !n.grain && "[&::after]:hidden", a.class))
-		}, {
-			default: f(() => [u(t.$slots, "default")]),
-			_: 3
-		}, 8, [
-			"data-tier",
-			"data-surface",
-			"data-grain",
-			"as",
-			"as-child",
-			"style",
-			"class"
-		]));
-	}
-}), h = /* @__PURE__ */ n(/* @__PURE__ */ o({
-	__name: "CardHeader",
-	props: {
-		shrink: { type: Boolean },
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	setup(t) {
-		let n = t;
-		return (r, i) => (l(), a("div", {
-			"data-slot": "card-header",
-			class: s(d(e)("@container/card-header flex flex-col gap-y-1.5 p-(--card-spacing)", "has-data-[slot=card-action]:grid has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-action]:items-start", t.shrink && "card-header--shrink", n.class))
-		}, [u(r.$slots, "default", {}, void 0, !0)], 2));
-	}
-}), [["__scopeId", "data-v-835e5cc0"]]), g = /* @__PURE__ */ o({
-	__name: "CardTitle",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, r) => (l(), a("h3", {
-			"data-slot": "card-title",
-			class: s(d(e)("text-heading leading-none tracking-tight", n.class))
-		}, [u(t.$slots, "default")], 2));
-	}
-}), _ = /* @__PURE__ */ o({
-	__name: "CardDescription",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, r) => (l(), a("p", {
-			"data-slot": "card-description",
-			class: s(d(e)("text-sm text-muted-foreground-strong", n.class))
-		}, [u(t.$slots, "default")], 2));
-	}
-}), v = /* @__PURE__ */ o({
-	__name: "CardContent",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, r) => (l(), a("div", { class: s(d(e)("p-(--card-spacing)", n.class)) }, [u(t.$slots, "default")], 2));
-	}
-}), y = /* @__PURE__ */ o({
-	__name: "CardFooter",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, r) => (l(), a("div", { class: s(d(e)("flex items-center p-(--card-spacing) pt-0", n.class)) }, [u(t.$slots, "default")], 2));
-	}
-}), b = /* @__PURE__ */ o({
-	__name: "CardAction",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, r) => (l(), a("div", {
-			"data-slot": "card-action",
-			class: s(d(e)("col-start-2 row-span-2 row-start-1 self-start justify-self-end", n.class))
-		}, [u(t.$slots, "default")], 2));
-	}
-});
-//#endregion
-export { g as a, _ as i, y as n, h as o, v as r, m as s, b as t };