@mkbabb/glass-ui 3.12.0 → 4.0.0

package/dist/styles/utilities/base.css

@@ -0,0 +1,541 @@
+/* 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, 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
+       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
+       `.popover-animate` (data-state animation), 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;
+        }
+    }
+
+    /* ── 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);
+    }
+
+    /* ── 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);
+    }
+
+    .scroll-fade-top {
+        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);
+    }
+
+    .scroll-fade-y {
+        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).
+       `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 `.scroll-fade-*` (mask-image fade gradient 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;
+    }
+
+    /* ── Shimmer text effects ──
+       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 animation. */
+    .gold-shimmer {
+        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: gold-shimmer-slide 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;
+    }
+
+}