@mkbabb/glass-ui 4.2.0 → 5.0.0

package/dist/styles/utilities/base-misc.css

@@ -1,307 +1 @@
-/* utilities/base-misc.css
-   The @layer components FORM/INTERACTION TAIL — status-dot, depth-text,
-   preserve-3d, ios input fix, fading-scroll (scroll-state-driven edge fade) +
-   the @supports (animation-timeline: scroll()) native path, deferred-section,
-   card-scroll-host, gold-shimmer, kbd.
-   BB.W-CARVE3 carved this off utilities/base.css (the post-tap-squish tail) so
-   each partial stays under the no-god-module 500-line bound. @import-ed by
-   utilities.css IMMEDIATELY AFTER base.css — two adjacent same-`@layer
-   components` blocks compose identically, so the dist is byte-isomorphic. The
-   @property --fade-start/--fade-end registrations the .fading-scroll rules read
-   stay in base.css (source-order BEFORE this partial). See
-   docs/precepts/design-idioms.md §cohesion-aware partials. */
-
-@layer components {
-    /* ── Status dot indicator ── */
-    .status-dot {
-        display: inline-block;
-        width: 0.5rem;
-        height: 0.5rem;
-        border-radius: var(--radius-pill);
-        flex-shrink: 0;
-        transition:
-            color var(--duration-fast) var(--ease-standard),
-            background var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard);
-    }
-    /* ── Depth text (layered offset stamp) ──
-       AW.W26 — composes the `--text-shadow-depth` @theme identity token (the
-       hard offset stack + soft ambient tail) instead of a hand-rolled multi-stop
-       literal. The token holds the stack inside the `@theme` defs (gate 4) and
-       re-tints under `.dark` via `--shadow`/`--shadow-color` BY CONSTRUCTION. */
-    .depth-text {
-        --depth-color-primary: var(--primary);
-
-        color: var(--depth-color-primary);
-        text-shadow: var(--text-shadow-depth);
-    }
-
-    /* ── 3D preserve ── */
-    .preserve-3d {
-        transform-style: preserve-3d;
-    }
-
-    /* ── iOS input font-size fix (prevent auto-zoom) ── */
-    .ios input,
-    .ios select,
-    .ios textarea,
-    .ios [contenteditable] {
-        font-size: max(1rem, 1em);
-    }
-
-    /* ── Fading scroll — the scroll-STATE-driven edge fade (BA.W-FADING-SCROLL) ──
-       `<FadingScroll>`'s recipe. 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).
-       `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
-       scroll-overflow ancestor (typically the `<Card>` itself OR a wrapper
-       inside it that carries `overflow-y: auto`).
-
-       `contain: layout style paint` isolates the named timeline so child
-       animations respond to THIS host's scroll only — not to portal-
-       triggered layout shifts in ancestor containers (the load-bearing
-       isolation guarantee the value.js `PaneHeader.vue:18-29` comment
-       called out and the AI.W1 spec §1.2 ratified as canon).
-
-       Disambiguated from `.fading-scroll` (the `<FadingScroll>` mask-image
-       edge fade at the container's leading/trailing edge) — `.card-scroll-host`
-       does NOT paint any visual; it only emits the timeline. */
-    .card-scroll-host {
-        contain: layout style paint;
-        scroll-timeline: --card-scroll block;
-    }
-
-    /* ── Stable scroll gutter — the no-shift discipline for overlay-hosting
-       route scrollers (BC.W-DROPDOWN-FIX) ──────────────────────────────────
-       An app-shell route scroller that hosts portaled picker/menu overlays
-       (Select / DropdownMenu / any reka overlay that locks body scroll on open)
-       RESERVES a stable scrollbar gutter so the lock-induced scrollbar removal
-       removes no layout space — the centred content does not reflow and the
-       trigger does not twitch left/right (USER-DEFECTS §F, the classic
-       space-taking-scrollbar reflow).
-
-       PRESETS-IN-CONSUMERS: the library ships the named discipline; the CONSUMER
-       app-shell opts its OWN route scroller in (the demo `.demo-main-scroller`
-       is the reference adoption). glass-ui does not force `scrollbar-gutter` on
-       every consumer's scroller — it provides this utility + the canon note.
-
-       Baseline-newly-available: Chrome 94+, Firefox 97+, Safari 18.2+ — a
-       non-supporting engine ignores the property (the gutter just isn't
-       reserved, the legacy behaviour). */
-    .scroll-gutter-stable {
-        scrollbar-gutter: stable;
-    }
-
-    /* ── Shimmer text effects ──
-       BB.W-METAL-SHIMMER — the gold-only `gold-shimmer-slide` is RETIRED (clean
-       break, no alias); `.gold-shimmer` re-points onto the metal-PARAMETERIZED
-       `metal-shimmer-sweep` keyframe with `--metal-shimmer-color: gold`. The gold
-       gradient stops + the `background-size`/`background-clip` + the PRM bracket are
-       byte-PRESERVED — the gold READ is unchanged; only the keyframe NAME generalizes.
-       The text-fill + background-clip composition is load-bearing visual (the gold
-       gradient itself); only the `animation:` line is wrapped in the PRM no-preference
-       bracket so PRM users see the static gradient without the slide. */
-    .gold-shimmer {
-        --metal-shimmer-color: gold;
-        background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold), var(--color-gold-light), var(--color-gold-dark));
-        background-size: 250% 100%;
-        background-clip: text;
-        -webkit-background-clip: text;
-        color: transparent;
-    }
-    @media (prefers-reduced-motion: no-preference) {
-        .gold-shimmer {
-            animation: metal-shimmer-sweep var(--duration-shimmer) linear infinite;
-        }
-    }
-
-    /* ── Keyboard key ── */
-    .kbd {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-height: 1.5rem;
-        min-width: 1.5rem;
-        padding: 0 0.375rem;
-        font-family: var(--font-mono);
-        font-size: var(--type-micro);
-        background: var(--muted);
-        border: 1px solid var(--border);
-        border-radius: var(--radius-sm);
-        box-shadow: 0 1px 0 1px color-mix(in srgb, var(--border) 30%, transparent);
-        line-height: 1;
-    }
-
-}
-
-/* ── @utility ghost-slot (BC.W-GHOST-DASHED) ────────────────────────────────
-   The ONE dashed-outline placeholder register: everywhere a slot is empty / a
-   thing is a placeholder / an affordance is "add something here", the surface
-   reads this — a dashed-outline plate, consistently rounded (--radius-card),
-   calm-muted, that reads unmistakably "this is a placeholder, not a filled
-   surface." The 6 ad-hoc `rounded-{md,2xl,card} border border-dashed
-   border-border bg-{card,background}` forks (three radii, three hosts, three
-   pads) COLLAPSE onto this ONE register: ONE radius, ONE faint-wash host, ONE
-   muted ink, ONE warm dashed hairline.
-
-   WARM-NOT-GREY (BA.W-NO-GRAY): the dashed hairline is the warm-ink at 22%
-   (a color-mix off --foreground, the warm identity), NEVER a grey
-   `border-border` — the ghost must read warm-material, not grey.
-
-   GLASS-ADJACENT, not opaque: the host is a faint glass-wash (the rebuilt W55
-   material reads THROUGH it), NOT a flat opaque `bg-card` slab — so the ghost
-   reads "empty," not "filled," and the D1 grey-plate regression cannot re-enter
-   through the placeholder.
-
-   THE FENCE (binding both ways): this is the RECTANGULAR-placeholder register.
-   The `WatercolorDot variant="ghost"` (the seeded-blob SILHOUETTE traced as a
-   dashed stroke — the empty-PALETTE-slot affordance) is a DISTINCT register;
-   neither forks the other. .ghost-slot is never applied to a blob-silhouette
-   slot, and the watercolor ghost never adopts this rectangle recipe. */
-@utility ghost-slot {
-    border: 1px dashed color-mix(in srgb, var(--foreground) 22%, transparent);
-    border-radius: var(--radius-card);
-    background: color-mix(in oklab, var(--glass-bg-wash), transparent 40%);
-    color: var(--muted-foreground);
-}
+@layer components { .status-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill); flex-shrink: 0; transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .depth-text { --depth-color-primary: var(--primary); color: var(--depth-color-primary); text-shadow: var(--text-shadow-depth); } .preserve-3d { transform-style: preserve-3d; } .ios input, .ios select, .ios textarea, .ios [contenteditable] { font-size: max(1rem, 1em); } .fading-scroll { 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% ); } @supports (animation-timeline: scroll()) { @keyframes gl-fade-start-in { from { --fade-start: 0px; } to { --fade-start: var(--fade-scroll-width); } } @keyframes gl-fade-end-out { from { --fade-end: var(--fade-scroll-width); } to { --fade-end: 0px; } } .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%; } .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%; } .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 { 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-host { contain: layout style paint; scroll-timeline: --card-scroll block; } .scroll-gutter-stable { scrollbar-gutter: stable; } .gold-shimmer { --metal-shimmer-color: gold; background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold), var(--color-gold-light), var(--color-gold-dark)); background-size: 250% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; } @media (prefers-reduced-motion: no-preference) { .gold-shimmer { animation: metal-shimmer-sweep var(--duration-shimmer) linear infinite; } } .kbd { display: inline-flex; align-items: center; justify-content: center; min-height: 1.5rem; min-width: 1.5rem; padding: 0 0.375rem; font-family: var(--font-mono); font-size: var(--type-micro); background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 1px 0 1px color-mix(in srgb, var(--border) 30%, transparent); line-height: 1; } } @utility ghost-slot { border: 1px dashed color-mix(in srgb, var(--foreground) 22%, transparent); border-radius: var(--radius-card); background: color-mix(in oklab, var(--glass-bg-wash), transparent 40%); color: var(--muted-foreground); }

package/dist/styles/utilities/base.css

@@ -1,327 +1 @@
-/* utilities/base.css
-   The @layer components FORM/INTERACTION half — the @property fade pair (read by
-   the .fading-scroll rules in base-misc.css), section-description, labeled-field
-   (incl. the width-contract + error region), popover-content, scrollbar,
-   focus-ring, hairline-accent, interactive-item, tap-squish.
-   BB.W-CARVE3 carved the post-tap-squish tail (status-dot → kbd, incl. the
-   fading-scroll recipe) into the adjacent base-misc.css partial so each stays
-   under the no-god-module 500-line bound. The two adjacent same-`@layer
-   components` blocks compose identically — the dist is byte-isomorphic.
-   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
-       paragraph. Composes the body type + muted-foreground color in
-       one declaration so consumers don't fight twMerge's
-       typography-class collapse. */
-    .section-description {
-        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) ────────────────────
-       Canonical recipe for `<LabeledField>`'s tooltip-wrapped label
-       layer. Four sibling wrappers (LabeledInput, LabeledSelect,
-       LabeledSlider, LabeledSwitch) used to repeat this literal across
-       their templates; promoting it to a utility lets the parent SFC
-       own one canonical declaration. */
-    .labeled-field-label {
-        font-family: var(--font-display);
-        font-size: var(--type-body);
-        /* 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);
-        /* 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 {
-        --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.).
-       Covers radius + outline + popover-foreground; consumers compose
-       this with `.glass-floating` (bg + blur + border + shadow), with
-       `.glass-reveal` (the spring-clocked data-state LIQUID-ENTER —
-       BB.W-LIQUID-REVEAL, off the retired `popover-animate`), and with the
-       per-host z-rung. The floating-tier shadow comes from
-       `--glass-shadow-floating` via `.glass-floating`, replacing the
-       `shadow-md`/`shadow-lg` literals that bypassed the canonical
-       cascade. */
-    .popover-content {
-        border-radius: var(--radius-panel);
-        color: var(--popover-foreground);
-        outline: none;
-    }
-
-    /* ── Scrollbar ── */
-    .scrollbar-hidden {
-        scrollbar-width: none;
-    }
-    .scrollbar-hidden::-webkit-scrollbar {
-        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: 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 ── */
-    .focus-ring:focus-visible {
-        outline: none;
-        border-radius: var(--radius-pill);
-        box-shadow: var(--focus-ring-shadow);
-    }
-
-    /* ── Hairline-accent — 0.5px catch-light + under-shadow pair ──
-       Composes the canonical `--border-hairline` token (tokens.css §
-       Glass-decorative). Adopt at any surface that wants the canonical
-       2-stop hairline (dock surfaces, instrument-chassis). Auto-mirrors
-       in dark via the .dark token override. */
-    .hairline-accent {
-        box-shadow: var(--border-hairline);
-    }
-
-    /* ── 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:
-            background-color var(--duration-fast) var(--ease-standard),
-            color var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard),
-            box-shadow 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);
-    }
-    .interactive-item:focus-visible {
-        outline: none;
-        box-shadow: var(--focus-ring-shadow);
-    }
-    .interactive-item:active {
-        /* AW.W31.a — fold the residual literal press scale onto the canonical
-           `--scale-press*` cohort (the prior `0.98` was the sole per-atom press
-           literal surviving the W2/W3/W25 sweeps). `--scale-press-sm` (0.97) is
-           the soft press rung the button + slider recipes consume — ONE press
-           vocabulary, no per-atom literal. The 0.98→0.97 delta is sub-perceptual. */
-        scale: var(--scale-press-sm);
-    }
-    .interactive-item:disabled,
-    .interactive-item[data-disabled] {
-        pointer-events: none;
-        opacity: var(--opacity-disabled);
-        cursor: not-allowed;
-    }
-
-    /* ── Tap-squish — universal press-state choreography ──
-       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). 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
-       press. */
-    .tap-squish {
-        /* AQ.W3 §W3.2 identity base */
-        scale: 1;
-        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 {
-        scale: var(--scale-press);
-    }
-    @media (prefers-reduced-motion: reduce) {
-        .tap-squish:active {
-            /* Reset to the longhand identity (not `transform: none`) so the
-               press scale is neutralized under PRM. */
-            scale: 1;
-        }
-    }
-
-    /* ── Glass-press — the interactive press register (BB.W-PRESS-UNIFY) ──
-       The CSS half of the `<Card :pressable>` / interactive-glass press. Two
-       coupled legs on ONE `--card-press-t` drive (the `useLiquidPress` writes the
-       JS-driven value; the CSS `:active` is the no-JS / SSR floor):
-
-         • The SCALE leg is the co-composed `.tap-squish` (the Card binds both
-           classes), so the no-JS press already scales to `--scale-press` on the
-           `--spring-smooth` clock and the JS reciprocal squish wins while engaged.
-         • The BRIGHTNESS leg reads the `--card-press-t` drive directly — a sub-
-           perceptual `filter: brightness()` lift so the glass reads as DEFORMING +
-           catching light under the press, not just shrinking (the W-MOTION-CANON P3
-           coupling — fade/brightness coupled WITH the transform on the same drive).
-           `filter` is compositor-safe (the P5 ban targets layout props only —
-           `proof:no-layout-animation` greens it), so the lift never re-layouts.
-
-       The brightness leg rides the `--card-press-t` VALUE (the typed press drive),
-       NOT a CSS transition — it tracks the JS spring frame-for-frame and degrades to
-       the resting 0 (no lift) when JS is off. The press surface is INTERACTIVE: the
-       cursor + a WCAG-2.5.5 touch floor (`min-block-size`) read here, not on the
-       static-card register. The interruptibility + the PRM-instant snap are the JS
-       driver's (`useLiquidPress` → the kf `SpringProgress` re-seat + the PRM policy);
-       this is the CSS floor the JS enhances. */
-    .glass-press {
-        cursor: pointer;
-        min-block-size: max(0px, var(--control-floor, 0px));
-        /* The coupled brightness lift on the press drive (rest 0 → ~4% at full
-           press). The drive is the JS-written `--card-press-t`; with JS off it stays
-           the `@property` 0 initial so the filter is a no-op (`brightness(1)`). */
-        filter: brightness(calc(1 + var(--card-press-t, 0) * 0.04));
-    }
-    /* The press-drive typed registration so a downstream `calc()` interpolates the
-       VALUE (number) and an unwired/SSR card is the static rest frame. */
-    @property --card-press-t {
-        syntax: "<number>";
-        inherits: true;
-        initial-value: 0;
-    }
-
-}
+@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 { font-size: var(--type-body); color: var(--muted-foreground); line-height: 1.5; text-wrap: pretty; } .labeled-field-label { font-family: var(--font-display); font-size: var(--type-body); color: var(--field-label-color, var(--muted-foreground)); cursor: help; } .labeled-field { --field-label-color: var(--muted-foreground); display: flex; flex-direction: column; inline-size: 100%; min-inline-size: 0; } .labeled-field:has(:user-invalid), .labeled-field.has-error { --field-label-color: var(--destructive); } .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; } .labeled-field:has(:user-valid) .labeled-field-error, .labeled-field.has-valid .labeled-field-error { display: none; } .popover-content { border-radius: var(--radius-panel); color: var(--popover-foreground); outline: none; } .scrollbar-hidden { scrollbar-width: none; } .scrollbar-hidden::-webkit-scrollbar { display: none; } .scrollbar-thin { scrollbar-width: thin; 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:focus-visible { outline: none; border-radius: var(--radius-pill); box-shadow: var(--focus-ring-shadow); } .hairline-accent { box-shadow: var(--border-hairline); } .interactive-item { scale: 1; border-radius: var(--radius-lg); user-select: none; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), scale var(--duration-fast) var(--transition-liquid-spatial); } .interactive-item:hover { background-color: color-mix(in srgb, var(--accent) 50%, transparent); } .interactive-item:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); } .interactive-item:active { scale: var(--scale-press-sm); } .interactive-item:disabled, .interactive-item[data-disabled] { pointer-events: none; opacity: var(--opacity-disabled); cursor: not-allowed; } .tap-squish { scale: 1; 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(--transition-liquid-spatial); transform-origin: center center; } .tap-squish:active { scale: var(--scale-press); } @media (prefers-reduced-motion: reduce) { .tap-squish:active { scale: 1; } } .glass-press { cursor: pointer; min-block-size: max(0px, var(--control-floor, 0px)); filter: brightness(calc(1 + var(--card-press-t, 0) * 0.04)); } @property --card-press-t { syntax: "<number>"; inherits: true; initial-value: 0; } }