@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/styles/segmented-tabs.css

@@ -1,413 +1 @@
-/* ════════════════════════════════════════════════════════════════════════
-   The standardized SegmentedTabs grammar (BA.W-TABS). ONE indicator engine,
-   TWO materials, ONE orientation axis.
-
-     · PILL    (DEFAULT) — THE GLASS MATERIAL. The track rides `--glass-bg-quiet`
-                 + a hairline edge; the active indicator is the selected-reads-as-
-                 glass plate (`--glass-bg-floating`, the W-REGISTER-IOS tier — a
-                 glass tint FORWARD of the track, NEVER a saturated hue, never an
-                 opaque `bg-card`). It GLIDES + SQUISHES. Absorbs the retired
-                 `segmented` value (one register — the user kept it by name).
-     · UNDERLINE — THE PAPER MATERIAL. NO plate, NO blur, NO track surface — the
-                 2px `--foreground` ink hairline riding the shared `.paper-ink-mark`
-                 register (W-SURFACE-AXIS mints it; CONSUMED here, never re-minted).
-                 The engine drives the hairline's inline position/width only. It
-                 SLIDES (no squish — a hairline does not deform).
-
-   ORIENTATION is axis-derived (horizontal default · vertical). The vertical
-   indicator tracks the BLOCK axis (the R10-2 horizontal-only-utilities slab class
-   is structurally impossible — the engine keys off a computed `dim`). Vertical
-   underline = the leading-edge ink rail (the math-paper `border-l` read).
-
-   Carved out of the SFC `<style scoped>` into a styles/ partial (the drawer.css
-   precedent), `@import`-ed into styles/index.css in cascade order. Every selector
-   is class/attribute-based (no Vue `data-v-*` scope hash), so the rules paint
-   un-scoped — the `.segmented-tabs`-family classes the template emits carry them.
-
-   `--bouncy-track-trim` is the token the track padding, the indicator
-   `inset-block`, AND the `anchor()` offset all read so they cannot drift (the W20
-   magic-number lock). `--stretch` is the JS-written travel-squish scalar (1 at
-   rest); the indicator pairs it reciprocally (stretch X, compress Y →
-   volume-preserving). The glide + squish read ONE clock — `--tab-indicator-duration`
-   (= `--spring-snappy-duration`, the W-GLASS-CAL calibrated snappy settle, ~0.34s)
-   — so the channels cannot desync and the generic-300ms sub-pixel tail is gone.
-   ════════════════════════════════════════════════════════════════════════ */
-
-/* ── The PILL track (the glass material — DEFAULT) ── */
-.segmented-tabs {
-    --bouncy-track-trim: 0.1875rem;
-    /* BC.W-TABS-IOS — the iOS-27 stadium register. The pill reads the role-bearing
-       `--radius-tab` (= --radius-pill = 9999px) — on a short pill box this clamps to
-       half-height → a TRUE stadium end-cap (not the squared `0.3125rem` rounded-rect
-       the HEAD shipped). The TRACK corner is CONCENTRIC with the pill (Apple's
-       `.containerConcentric`): the pill radius + the trim inset, so a stadium pill
-       sits inside a near-stadium track. No breakpoint radius bump — a stadium does
-       not change radius across viewports (clean break, the 640px radius lines gone). */
-    --bouncy-slider-radius: var(--radius-tab);
-    --bouncy-track-radius: calc(var(--bouncy-slider-radius) + var(--bouncy-track-trim));
-    /* The travel-squish axis — 1 at rest; useTabIndicator writes it transiently
-       on selection, the indicator pairs it volume-preserving. */
-    --stretch: 1;
-    position: relative;
-    display: inline-grid;
-    grid-auto-flow: column;
-    grid-auto-columns: 1fr;
-    padding: var(--bouncy-track-trim);
-    border-radius: var(--bouncy-track-radius);
-    /* BA.W-TABS — the pill track rides the glass quiet tier (the warm glass
-       material, the no-gray register) + a hairline edge. NOT a `--surface-tint`
-       gray plate (the R10-5 no-gray cut). */
-    background: var(--glass-bg-quiet);
-    -webkit-backdrop-filter: var(--glass-blur-quiet);
-
-    backdrop-filter: var(--glass-blur-quiet);
-    -webkit-backdrop-filter: var(--glass-blur-quiet);
-    /* BC.W-TABS-IOS — the track hairline re-points off the `--border` ring (which read
-       dark over the cream plate — the D2 "black bar" on the strip top edge) onto the
-       BC.W-BLACK-BAR directional rim register: a bright top catch-light + a faint warm
-       under-shadow. The track is a thin warm-glass quiet capsule with a lit top edge,
-       never a dark hairline. The pill (above) carries the SAME rim plus the lift shadow
-       so it reads FORWARD; the track carries only the rim. */
-    box-shadow: var(--glass-rim-top), var(--glass-rim-bottom);
-}
-
-/* ── The vertical orientation axis (the block stack) ── */
-.segmented-tabs--vertical {
-    display: inline-flex;
-    flex-direction: column;
-    grid-auto-flow: unset;
-    grid-auto-columns: unset;
-    align-items: stretch;
-}
-
-@media (min-width: 640px) {
-    .segmented-tabs {
-        /* BC.W-TABS-IOS — only the trim (pad) axis bumps at the wider breakpoint; the
-           radius is the viewport-invariant stadium (--radius-tab), so the corner
-           track-radius re-resolves concentric off the bigger trim by construction. */
-        --bouncy-track-trim: 0.25rem;
-    }
-}
-
-/* ── The shared indicator body (the PILL plate) ── */
-.segmented-indicator {
-    position: absolute;
-    /* BC.W-TABS-IOS — the active pill is the iOS-27 / value.js DISTINCT LIFTED PLATE,
-       not a +30%-α same-hue brightness step. The fill reads the SHARED element-level
-       oklab-tinted floating pair (surfaces.css `:where(.btn-glass, .segmented-indicator)`)
-       — over a bright field it darkens-to-legible, over a calm field it stays
-       warm-cream/near-white (the W55 adaptive register reaching the pill, the "raised
-       near-white plate" the user pinned). The FORWARD-ness comes from the rim + lift
-       below, NOT from cranking the same-hue alpha. */
-    background: var(--glass-bg-floating-tinted);
-    -webkit-backdrop-filter: var(--glass-blur-floating);
-
-    backdrop-filter: var(--glass-blur-floating);
-    -webkit-backdrop-filter: var(--glass-blur-floating);
-    z-index: 0;
-    inset-block: var(--bouncy-track-trim);
-    border-radius: var(--bouncy-slider-radius);
-    /* BC.W-TABS-IOS — the lifted-plate composite: the BC.W-BLACK-BAR directional rim
-       (bright top catch-light `--glass-rim-top` + warm bottom under-shadow
-       `--glass-rim-bottom` — the iOS-27 top-light/bottom-shadow thickness the track does
-       NOT carry, the FORWARD-ness device, NEVER the dark D2 hairline) PLUS a real layered
-       glass under-shadow (`--glass-shadow-floating`) lifting the plate ~2-3px off the
-       quiet track. Replaces the HEAD weak `0 1px 3px rgba(0,0,0,0.08)` + the 30%-border
-       dark ring (the same-hue low-contrast plate that read "not glassy"). */
-    box-shadow:
-        var(--glass-rim-top),
-        var(--glass-rim-bottom),
-        var(--glass-shadow-floating);
-    /* The volume-preserving travel-squish: stretch along X, compress Y in
-       inverse proportion. `transform-origin: center` → a symmetric width-flex
-       as it travels (the indicator grows wider mid-travel, settles to fit). */
-    transform-origin: center;
-    scale: var(--stretch) calc(1 / var(--stretch));
-}
-
-/* Vertical: the indicator deforms on the BLOCK axis (compress X / stretch Y) and
-   pads on the inline axis instead. */
-.segmented-tabs--vertical .segmented-indicator {
-    inset-block: auto;
-    inset-inline: var(--bouncy-track-trim);
-    scale: calc(1 / var(--stretch)) var(--stretch);
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    .segmented-indicator {
-        /* ONE composited transform pair (translate+scale) on ONE calibrated
-           clock — the glide + the squish share `--tab-indicator-duration` so they
-           cannot desync (the R10-2 multi-property-desync class collapsed). */
-        transition: scale var(--tab-indicator-duration) var(--spring-snappy);
-    }
-}
-
-/* Fallback (JS-measured) path — the indicator is moved by inline
-   `transform`/`width` writes; animate those alongside the squish scale on the ONE
-   calibrated clock. */
-.segmented-indicator--js {
-    transition:
-        transform var(--tab-indicator-duration) var(--spring-snappy),
-        width var(--tab-indicator-duration) var(--spring-snappy),
-        height var(--tab-indicator-duration) var(--spring-snappy),
-        scale var(--tab-indicator-duration) var(--spring-snappy),
-        opacity var(--duration-fast) ease;
-}
-
-/* Anchor path — the indicator tethers to the active button's `anchor-name`.
-   `inset` reads the anchor's edges; the browser interpolates `inset` between
-   buttons on selection (the glide), and the JS `--stretch` write deforms it
-   (the squish) on the SAME calibrated clock. */
-@supports (position-anchor: --x) {
-    .segmented-indicator--anchor {
-        position-anchor: --gl-tab-active;
-        /* The four edge longhands tether to the active button's anchor edges (the
-           inline-trimmed band over the full anchor block extent). NO `inset-block:
-           auto` shorthand here — it would reset the block longhands above it to auto
-           and collapse the indicator to height 0 (the live-found clobber). */
-        inset-block-start: calc(anchor(top) + 0.1875rem);
-        inset-block-end: calc(anchor(bottom) + 0.1875rem);
-        inset-inline-start: anchor(left);
-        inset-inline-end: anchor(right);
-        opacity: 1;
-    }
-    /* Vertical: the anchor band runs the FULL block extent of the active button
-       (the indicator tracks the column, not the row) with the inline axis trimmed. */
-    .segmented-tabs--vertical .segmented-indicator--anchor {
-        inset-block-start: anchor(top);
-        inset-block-end: anchor(bottom);
-        inset-inline-start: calc(anchor(left) + 0.1875rem);
-        inset-inline-end: calc(anchor(right) + 0.1875rem);
-    }
-    @media (prefers-reduced-motion: no-preference) {
-        .segmented-indicator--anchor {
-            transition:
-                inset var(--tab-indicator-duration) var(--spring-snappy),
-                scale var(--tab-indicator-duration) var(--spring-snappy);
-        }
-    }
-    .segmented-tabs:not(.segmented-tabs--underline) .segmented-tab[aria-pressed="true"],
-    .segmented-tabs:not(.segmented-tabs--underline) .segmented-tab[aria-selected="true"] {
-        anchor-name: --gl-tab-active;
-    }
-}
-
-@media (min-width: 640px) {
-    .segmented-indicator {
-        /* BC.W-TABS-IOS — only the inset (trim) axis bumps; the radius stays the
-           viewport-invariant stadium (`--bouncy-slider-radius` = --radius-tab). The
-           HEAD `border-radius: 0.375rem` px-literal that squared the pill is GONE. */
-        inset-block: 0.25rem;
-    }
-    .segmented-tabs--vertical .segmented-indicator {
-        inset-block: auto;
-        inset-inline: 0.25rem;
-    }
-    @supports (position-anchor: --x) {
-        .segmented-indicator--anchor {
-            inset-block-start: calc(anchor(top) + 0.25rem);
-            inset-block-end: calc(anchor(bottom) + 0.25rem);
-        }
-        .segmented-tabs--vertical .segmented-indicator--anchor {
-            inset-block-start: anchor(top);
-            inset-block-end: anchor(bottom);
-            inset-inline-start: calc(anchor(left) + 0.25rem);
-            inset-inline-end: calc(anchor(right) + 0.25rem);
-        }
-    }
-}
-
-/* ── The tab buttons ── */
-.segmented-tab {
-    position: relative;
-    z-index: 10;
-    border: none;
-    background: none;
-    font-weight: 500;
-    cursor: pointer;
-    white-space: nowrap;
-    padding: 0.25rem 0.625rem;
-    border-radius: 0.3125rem;
-    font: inherit;
-    font-size: 0.8125rem;
-    color: var(--muted-foreground);
-    transition: color var(--duration-fast) ease;
-    /* AQ.W3 identity base — keep `scale:1; translate:0` so a hover/press
-       transform never mints a stacking context that severs `anchor()`
-       resolution (the WAAPI press writes `transform` transiently — harmless). */
-    scale: 1;
-    translate: 0;
-}
-
-@media (min-width: 640px) {
-    .segmented-tab {
-        padding: 0.3125rem 0.75rem;
-        font-size: 0.875rem;
-    }
-}
-
-.segmented-tab[aria-pressed="true"],
-.segmented-tab[aria-selected="true"] {
-    color: var(--foreground);
-}
-
-.segmented-tab.is-disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-    pointer-events: none;
-    filter: blur(0.5px);
-}
-
-/* ── Underline variant ── (THE PAPER MATERIAL — the panel-nav `role=tablist` strip)
-   NO plate, NO blur, NO track surface — only the ink hairline paints. */
-.segmented-tabs--underline {
-    display: flex;
-    grid-auto-flow: unset;
-    grid-auto-columns: unset;
-    gap: 0.25rem;
-    padding: 0;
-    background: none;
-    -webkit-backdrop-filter: none;
-
-    backdrop-filter: none;
-    -webkit-backdrop-filter: none;
-    box-shadow: none;
-    border-radius: 0;
-    /* BA.W-SURFACE-AXIS scope 8 — the underline indicator COMPOSES the shared
-       `.paper-ink-mark` PAPER ink-hairline register (the 2px --foreground ink mark
-       on a paper surface — no plate, no blur, no glass). The register tokens are
-       declared here on the host; the `::before` pseudo reads them. ≥2 consumers
-       with the math-paper section rail (a HORIZONTAL underline here, a VERTICAL
-       left-edge rail there — the SAME mark register, parameterized weight/color).
-       The register itself lives in glass/surface-axis.css (CONSUMED, never
-       re-minted — a shape gap triumvirates at the minting wave). */
-    --paper-ink-mark-weight: 2px;
-    --paper-ink-mark-color: var(--foreground);
-}
-
-/* Vertical underline = the leading-edge ink rail (the math-paper `border-l` read).
-   The hairline runs the block extent of the active tab on its inline-start edge. */
-.segmented-tabs--underline.segmented-tabs--vertical {
-    flex-direction: column;
-    align-items: stretch;
-}
-
-/* The active tab is the anchor the underline rule tethers to. */
-.segmented-tabs--underline .segmented-tab[aria-selected="true"] {
-    anchor-name: --gl-tab-active;
-}
-
-/* The underline indicator pseudo, position-anchored to the active tab; the
-   browser interpolates `inset` between anchors on selection on the ONE calibrated
-   clock, and the `scale` reads the same `--stretch` squish the slider does (one
-   indicator grammar). */
-.segmented-tabs--underline::before {
-    content: "";
-    position: absolute;
-    position-anchor: --gl-tab-active;
-    /* BA.W-SURFACE-AXIS scope 8 — the 2px ink mark reads the shared
-       `.paper-ink-mark` register (weight + --foreground ink) the host declares. */
-    inset-block-start: calc(anchor(bottom) - var(--paper-ink-mark-weight, 2px));
-    inset-inline-start: anchor(left);
-    inset-inline-end: anchor(right);
-    block-size: var(--paper-ink-mark-weight, 2px);
-    background: var(--paper-ink-mark-color, var(--foreground));
-    border-radius: var(--radius-sm);
-    transform-origin: center;
-    scale: var(--stretch) 1;
-}
-
-/* Vertical underline pseudo — the ink mark is a VERTICAL leading-edge rail (the
-   `border-l` read): a 2px-wide column on the active tab's inline-start edge,
-   running its full block extent. */
-.segmented-tabs--underline.segmented-tabs--vertical::before {
-    inset-block-start: anchor(top);
-    inset-block-end: anchor(bottom);
-    inset-inline-start: calc(anchor(left) - var(--paper-ink-mark-weight, 2px));
-    inset-inline-end: auto;
-    block-size: auto;
-    inline-size: var(--paper-ink-mark-weight, 2px);
-    scale: 1 var(--stretch);
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    .segmented-tabs--underline::before {
-        /* control register — the glide + the squish on the ONE calibrated clock. */
-        transition:
-            inset var(--tab-indicator-duration) var(--spring-snappy),
-            scale var(--tab-indicator-duration) var(--spring-snappy);
-    }
-}
-
-/* Fallback — static underline when anchor positioning is absent. */
-@supports not (position-anchor: --x) {
-    .segmented-tabs--underline::before {
-        display: none;
-    }
-    .segmented-tabs--underline .segmented-tab[aria-selected="true"] {
-        border-bottom: var(--paper-ink-mark-weight, 2px) solid var(--foreground);
-    }
-    .segmented-tabs--underline.segmented-tabs--vertical .segmented-tab[aria-selected="true"] {
-        border-bottom: none;
-        border-inline-start: var(--paper-ink-mark-weight, 2px) solid var(--foreground);
-    }
-}
-
-.segmented-tabs--underline .segmented-tab {
-    padding: 0.375rem 0.75rem;
-    /* BC.W-UNDERLINE-TUNE — the audacious editorial label voice. The underline is
-       the PAPER/editorial material (BA.W-TABS), so its labels carry the √φ display
-       register, NOT the small 0.8125rem control size the PILL labels keep (the
-       two-voice fence — the pill is a compact control, the underline is an editorial
-       nav head). `--type-subheading` (1.272rem / 20.4px, the √φ rung) + the Apple
-       display tracking `--type-tracking-display` (−1.5%) are the BB.W-DISPLAY-TRACKING
-       ladder rungs CONSUMED here (never re-minted), the same pairing the semantic
-       display rungs ride. A confident editorial strip, not a default Tailwind row. */
-    font-size: var(--type-subheading);
-    letter-spacing: var(--type-tracking-display);
-    border-radius: 0.25rem;
-    /* The tab-text colour cross-fade rides the fast generic clock (the §6 doctrine
-       — a colour shift is a bezier ease, never a spring), matching the pill tab
-       buttons. The INDICATOR glide is the only channel on the calibrated spring
-       clock. */
-    transition: color var(--duration-fast) ease;
-}
-
-.segmented-tabs--underline.segmented-tabs--vertical .segmented-tab {
-    text-align: start;
-}
-
-.segmented-tabs--underline .segmented-tab:hover {
-    color: color-mix(in oklab, var(--foreground) 70%, transparent);
-}
-
-/* ════════════════════════════════════════════════════════════════════════
-   BB.W-DRAG-MORPH — the `.glass-drag-lift` decoration (the pull affordance).
-
-   The `useDragMorph` consumer adds this class to the morph element while
-   `dragging` is true (the SegmentedTabs `:draggable` indicator; the
-   DockLayerGroup pull rail). It is the visual "this is grabbable + grabbed"
-   affordance — the GRAB cursor + a sub-perceptual `--glass-specular` catch-light
-   lift + the `will-change: transform` compositor hint that promotes the lozenge
-   to its own layer for the 1:1 follow. It carries NO transform itself (the
-   translate + squish are the primitive's own `translate`/`--stretch` writes, the
-   §6 compositor channels); this class only paints the affordance + the hint.
-
-   The grab cursor sits on the morph element AT REST too (a draggable indicator
-   reads grabbable before the grab), so `.glass-drag-grabbable` marks the rest
-   affordance and `.glass-drag-lift` adds the grabbing state. PRM does not gate
-   the cursor/hint (they are not motion); the lift is a static specular nudge. */
-.glass-drag-grabbable {
-    cursor: grab;
-    touch-action: none;
-}
-
-.glass-drag-lift {
-    cursor: grabbing;
-    /* Promote to its own compositor layer for the 1:1 follow (the translate write
-       is compositor-only; the hint keeps the plate off the main-thread paint). */
-    will-change: transform;
-    /* Sub-perceptual catch-light lift — the grabbed lozenge reads a hair brighter
-       at its specular edge (the W-GLASS-CAL specular register, disco-FREE). */
-    --glass-specular: 0.1;
-}
+.segmented-tabs { --bouncy-track-trim: 0.1875rem; --bouncy-slider-radius: var(--radius-tab); --bouncy-track-radius: calc(var(--bouncy-slider-radius) + var(--bouncy-track-trim)); --stretch: 1; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: var(--bouncy-track-trim); border-radius: var(--bouncy-track-radius); } .segmented-tabs--vertical { display: inline-flex; flex-direction: column; grid-auto-flow: unset; grid-auto-columns: unset; align-items: stretch; --bouncy-slider-radius: var(--radius-strip); --radius-ctx: var(--bouncy-track-radius); --radius-inset: var(--bouncy-track-trim); } .segmented-tabs--vertical .segmented-indicator { border-radius: max( var(--radius-floor), calc(var(--radius-ctx) - var(--radius-inset)) ); } @media (min-width: 640px) { .segmented-tabs { --bouncy-track-trim: 0.25rem; } } .segmented-indicator { position: absolute; z-index: 0; inset-block: var(--bouncy-track-trim); border-radius: var(--bouncy-slider-radius); transform-origin: center; scale: calc(var(--tab-blob, 1) * var(--stretch)) calc(var(--tab-blob, 1) / var(--stretch)); } .segmented-indicator__plate { position: absolute; inset: 0; border-radius: inherit; transform-origin: center; transform: scaleY(var(--eyeglass-y, 1)); } .segmented-indicator { isolation: isolate; } @supports (mix-blend-mode: plus-lighter) { .segmented-indicator::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient( 120% 140% at 50% 50%, color-mix(in srgb, var(--glass-accent, transparent) 55%, transparent), transparent 70% ); mix-blend-mode: plus-lighter; opacity: var(--tab-flood-t, 0); } } .segmented-tabs--vertical .segmented-indicator { inset-block: auto; inset-inline: var(--bouncy-track-trim); scale: calc(var(--tab-blob, 1) / var(--stretch)) calc(var(--tab-blob, 1) * var(--stretch)); } @media (prefers-reduced-motion: no-preference) { .segmented-indicator { transition: scale var(--tab-indicator-duration) var(--ease-cartoon-punch); } } .segmented-indicator--js { transition: transform var(--tab-indicator-duration) var(--spring-eyeglass), width var(--tab-indicator-duration) var(--spring-eyeglass), height var(--tab-indicator-duration) var(--spring-eyeglass), scale var(--tab-indicator-duration) var(--spring-eyeglass), opacity var(--duration-fast) ease; } @media (min-width: 640px) { .segmented-indicator { inset-block: 0.25rem; } .segmented-tabs--vertical .segmented-indicator { inset-block: auto; inset-inline: 0.25rem; } } .segmented-tab { position: relative; z-index: 10; border: none; background: none; font-weight: 500; cursor: pointer; white-space: nowrap; padding: 0.25rem 0.625rem; border-radius: 0.3125rem; font: inherit; font-size: 0.8125rem; color: var(--muted-foreground); transition: color var(--duration-fast) ease, scale var(--spring-snappy-duration) var(--spring-snappy) 60ms; scale: 1; translate: 0; } @media (min-width: 640px) { .segmented-tab { padding: 0.3125rem 0.75rem; font-size: 0.875rem; } } .segmented-tab[aria-pressed="true"], .segmented-tab[aria-selected="true"] { color: var(--foreground); } .segmented-tabs:not(.segmented-tabs--underline) .segmented-tab[aria-pressed="true"] { scale: calc(1 + 0.06 * var(--motion-weight)); } .segmented-tab.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; filter: blur(0.5px); } .segmented-tabs--underline { display: flex; grid-auto-flow: unset; grid-auto-columns: unset; gap: 0.25rem; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-radius: 0; --paper-ink-mark-weight: 2px; --paper-ink-mark-color: var(--foreground); } .segmented-tabs--underline.segmented-tabs--vertical { flex-direction: column; align-items: stretch; } .segmented-tabs--underline .segmented-tab[aria-selected="true"] { anchor-name: --gl-tab-active; } .segmented-tabs--underline::before { content: ""; position: absolute; position-anchor: --gl-tab-active; inset-block-start: calc(anchor(bottom) - var(--paper-ink-mark-weight, 2px)); inset-inline-start: anchor(left); inset-inline-end: anchor(right); block-size: var(--paper-ink-mark-weight, 2px); background: var(--paper-ink-mark-color, var(--foreground)); border-radius: var(--radius-sm); transform-origin: center; scale: var(--stretch) 1; } .segmented-tabs--underline.segmented-tabs--vertical::before { inset-block-start: anchor(top); inset-block-end: anchor(bottom); inset-inline-start: calc(anchor(left) - var(--paper-ink-mark-weight, 2px)); inset-inline-end: auto; block-size: auto; inline-size: var(--paper-ink-mark-weight, 2px); scale: 1 var(--stretch); } @media (prefers-reduced-motion: no-preference) { .segmented-tabs--underline::before { transition: inset var(--tab-indicator-duration) var(--spring-snappy), scale var(--tab-indicator-duration) var(--spring-snappy); } } @supports not (position-anchor: --x) { .segmented-tabs--underline::before { display: none; } .segmented-tabs--underline .segmented-tab[aria-selected="true"] { border-bottom: var(--paper-ink-mark-weight, 2px) solid var(--foreground); } .segmented-tabs--underline.segmented-tabs--vertical .segmented-tab[aria-selected="true"] { border-bottom: none; border-inline-start: var(--paper-ink-mark-weight, 2px) solid var(--foreground); } } .segmented-tabs--underline .segmented-tab { padding: 0.375rem 0.75rem; font-size: var(--type-subheading); letter-spacing: var(--type-tracking-display); border-radius: 0.25rem; transition: color var(--duration-fast) ease; } .segmented-tabs--underline.segmented-tabs--vertical .segmented-tab { text-align: start; } .segmented-tabs--underline .segmented-tab:hover { color: color-mix(in oklab, var(--foreground) 70%, transparent); }

package/dist/styles/select.css

@@ -1,50 +1 @@
-/*
- * select.css — the Select content collision-bound, pre-compiled (BA.W-EMISSION).
- *
- * THE DEFECT (BA-VJS-A2-WO1 / valuejs-fold A-2): SelectContent.vue authored its
- * collision-bound as a Tailwind ARBITRARY-BRACKET utility
- *   [max-height:var(--reka-popper-available-height,60dvh)]
- * which is correct in SOURCE but compiles ONLY into a `dist/*.js` render-function
- * chunk no consumer content-scan reaches (and the P9 emitComponentUtilities
- * safelist rejects fully-arbitrary bracket tokens by construction). So in every
- * consumer the bound NEVER painted — `getComputedStyle(content).maxHeight === "none"`
- * — and a 16-item dropdown rendered 745px tall, overflowing a 900px viewport by
- * 125px (the value.js U-DROPDOWN capture, the binding RED evidence).
- *
- * THE FIX: move the bound to a PRECOMPILED rule that ships in `dist/glass-ui.css`
- * regardless of consumer JIT reach — it is a plain attribute-selector rule, not a
- * Tailwind utility, so it always emits. The cap is the kf donor's default
- * `min(24rem, 60dvh)` (kf design-idioms.css `--easing-dropdown-max-h`; the U8
- * bounded-scroll reference), TIGHTENED by reka's measured
- * `--reka-popper-available-height` on a short viewport via the inner `min()`.
- * `overflow-y: auto` (already on the content via the CVA base) gives the inner
- * scroll. The behaviour is identical to the authored class — it now SHIPS.
- *
- * --select-content-max-h is the ONE retint knob (a consumer widens/narrows the cap
- * by overriding it on any ancestor). The default folds reka's available-height in:
- * when reka reports a height (popper measured), the bound is the MIN of that and
- * the 24rem/60dvh ceiling, so the panel never exceeds the viewport AND never grows
- * past the comfortable ceiling.
- */
-
-:root {
-    /* The comfortable ceiling — the kf donor default. */
-    --select-content-max-h: min(24rem, 60dvh);
-}
-
-[data-slot="select-content"] {
-    /* The collision-bound: the comfortable ceiling, tightened by reka's measured
-       available height on a short viewport. `--reka-popper-available-height` is
-       written by reka-ui's popper-positioner; on a tall viewport it exceeds the
-       ceiling (so the ceiling wins) and on a short one it clamps the panel to the
-       space below the trigger (so the panel bottoms inside the viewport). When reka
-       has not yet measured, the fallback is the ceiling alone. */
-    max-height: min(
-        var(--select-content-max-h),
-        var(--reka-popper-available-height, var(--select-content-max-h))
-    );
-    /* The inner-scroll affordance ships with the bound (the CVA base also sets
-       overflow-y-auto; restated here so the bound + scroll travel together as one
-       precompiled contract). */
-    overflow-y: auto;
-}
+:root { --select-content-max-h: min(24rem, 60dvh); } [data-slot="select-content"] { max-height: min( var(--select-content-max-h), var(--reka-popper-available-height, var(--select-content-max-h)) ); overflow-y: auto; } @layer components { .glass-control-edge { box-shadow: var(--glass-rim-top), var(--glass-rim-bottom); } [data-slot="select-content"], [data-slot="combobox-list"] { --select-plate-alpha: 0.90; background: color-mix( in oklab, color-mix( in oklab, var(--glass-bg-floating-tinted, var(--glass-bg-floating)), var(--glass-capsule-warm) var(--glass-capsule-warm-floor) ), transparent calc((1 - var(--select-plate-alpha)) * 100%) ); box-shadow: var(--glass-material-rim), var(--glass-under-shadow-vivid), var(--glass-shadow-floating), var(--shadow-cartoon-lg); } .dark [data-slot="select-content"], .dark [data-slot="combobox-list"] { --select-plate-alpha: 0.94; } .glass-field-portal { position: relative; } .glass-field-portal::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient(70% 60% at 24% 22%, oklch(0.92 0.08 var(--field-h, 48) / 0.55), transparent 72%), radial-gradient(64% 58% at 82% 80%, oklch(0.88 0.07 calc(var(--field-h, 48) + 18) / 0.50), transparent 70%), radial-gradient(60% 62% at 60% 40%, oklch(0.90 0.06 calc(var(--field-h, 48) - 14) / 0.48), transparent 74%); } .dark .glass-field-portal::before { background: radial-gradient(70% 60% at 24% 22%, oklch(0.30 0.10 var(--field-h, 48) / 0.55), transparent 72%), radial-gradient(64% 58% at 82% 80%, oklch(0.26 0.09 calc(var(--field-h, 48) + 18) / 0.50), transparent 70%), radial-gradient(60% 62% at 60% 40%, oklch(0.28 0.08 calc(var(--field-h, 48) - 14) / 0.48), transparent 74%); } @supports not (color: oklch(0.9 0.08 48)) { .glass-field-portal::before { background: radial-gradient(70% 60% at 24% 22%, hsl(var(--field-h, 48) 60% 88% / 0.5), transparent 72%); } .dark .glass-field-portal::before { background: radial-gradient(70% 60% at 24% 22%, hsl(var(--field-h, 48) 45% 26% / 0.55), transparent 72%); } } }

package/dist/styles/tabs/segmented-tabs-drag.css

@@ -0,0 +1 @@
+.glass-drag-grabbable { cursor: grab; touch-action: none; } .glass-drag-lift { cursor: grabbing; will-change: transform; } .segmented-tabs:not(.segmented-tabs--underline):has( .segmented-indicator.glass-drag-grabbable ) .segmented-tab[aria-pressed="true"] { pointer-events: none; } .segmented-indicator.glass-drag-lift { z-index: 30; } .segmented-tabs[data-eyeglass] { --eyeglass-settled: 0.84; --eyeglass-proud: 1.12; --eyeglass-track-blur: var(--glass-blur-floating); backdrop-filter: var(--eyeglass-track-blur); -webkit-backdrop-filter: var(--eyeglass-track-blur); } .segmented-tabs[data-eyeglass] .segmented-indicator__plate { --eyeglass-y: calc( var(--eyeglass-settled) + var(--eyeglass-live-t) * (var(--eyeglass-proud) - var(--eyeglass-settled)) ); } @media (prefers-reduced-motion: reduce) { .segmented-tabs[data-eyeglass] .segmented-indicator__plate { --eyeglass-y: 1; } } @supports (backdrop-filter: url("#glass-refract")) { .segmented-tabs[data-eyeglass] .segmented-indicator__plate.glass-lens { backdrop-filter: var(--glass-blur-floating) var(--glass-refract-filter); } } .segmented-tabs[data-eyeglass] .segmented-tab[aria-pressed="true"] svg { color: var(--tab-selected-ink, var(--foreground)); }