@mkbabb/glass-ui 4.2.0 → 5.0.0

package/dist/styles/segmented-tabs.css

@@ -1,447 +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);
-    /* BD.W-TAB-IOS-CAPSULE — the warm-glass quiet surface + the rim + the iOS-27
-       sunken recess now live in the SHARED `.glass-capsule-track` register (the SFC
-       composes it onto the pill track). The track is a thin warm-glass quiet capsule
-       with a lit top edge + a recessed well, never a dark hairline, never gray. The
-       indicator (`.glass-capsule`) reads FORWARD off the SAME rim + the lift shadow.
-       The underline material does NOT compose the track (paper, no surface). */
-}
-
-/* ── 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;
-    /* BD.W-TAB-IOS-CAPSULE — the active pill COMPOSES the shared `.glass-capsule`
-       (the SFC adds the class). The warm-floor fill (`--glass-bg-floating-tinted`
-       composed toward the warm-floor source, meanChroma ≥ 0.02 both modes — never
-       gray), the floating blur, the directional rim + the lift under-shadow ALL live
-       there now, ONE recipe ≥3 consumers. This block keeps only the position +
-       inset + the indicator-local stadium radius + the motion transform. */
-    z-index: 0;
-    inset-block: var(--bouncy-track-trim);
-    border-radius: var(--bouncy-slider-radius);
-    /* BD.W-TABS-LIQUID — the COMPOSED transform write: the area-inflation BLOB
-       (uniform, both axes, `--tab-blob` driven imperatively by the 2nd
-       `useLiquidFlex` channel — grow→overshoot→shrink) × the volume-preserving
-       travel-squish (`--stretch`, reciprocal). `transform-origin: center` → the blob
-       grows from center (the label stays put) and the squish stays center-pinned. */
-    transform-origin: center;
-    scale: calc(var(--tab-blob, 1) * var(--stretch))
-        calc(var(--tab-blob, 1) / var(--stretch));
-}
-
-/* BD.W-TABS-LIQUID — the COMMIT accent-flood (T4, opt-in). A momentary full-capsule
-   wash of `--glass-accent`, driven by `--tab-flood-t` (0→1→0), that TRAILS the
-   spatial glide a beat then clears (EFFECTS-after-SPATIAL). `isolation: isolate` on
-   the host so the `plus-lighter` blend composites the flood against the capsule
-   only (not the page); the gradient is `in srgb` (additive bloom, NOT oklab). The
-   accent is a CONSUMER accent — default `--glass-accent: transparent` → byte-
-   identical rest, provable no-op. The SAME register dock-tabs adopt (dormant at
-   `--tab-flood-t: 0`). */
-.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);
-    }
-}
-
-/* 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);
-    /* BD.W-TABS-LIQUID — the vertical arm mirrors the blob × squish: the block axis
-       carries the stretch, the inline axis its reciprocal, both uniformly inflated. */
-    scale: calc(var(--tab-blob, 1) / var(--stretch))
-        calc(var(--tab-blob, 1) * var(--stretch));
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    .segmented-indicator {
-        /* BD.W-TABS-LIQUID — the composed `scale` (`--tab-blob × --stretch`) rides the
-           DEPENDED `--ease-cartoon-punch` curve (the booked Band-0 token, CONSUMED
-           never minted) so the 5-beat blob anticipates (the curve's pre-dip < 0),
-           overshoots past the destination footprint (peaks > 1), then settles soft.
-           The discrete imperative `--tab-blob` writes (open/release) INTERPOLATE on
-           this clock via the `@property` registration — no snap-flicker. ONE clock,
-           ONE composited transform pair — the glide (inset) + the squish + the blob
-           cannot desync. The `--tab-flood-t` accent-flood trails a beat after. */
-        transition: scale var(--tab-indicator-duration) var(--ease-cartoon-punch);
-    }
-}
-
-/* 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);
-    /* BD.W-TABS-LIQUID — the glyph scale-pop (overlapping action / follow-through):
-       the label settles AFTER the capsule (the child trails the parent). The `scale`
-       channel rides the snappy spring with a 60ms delay so it OVERLAPS the capsule
-       arrival; the colour cross-fade stays on the fast bezier. */
-    transition:
-        color var(--duration-fast) ease,
-        scale var(--spring-snappy-duration) var(--spring-snappy) 60ms;
-    /* 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);
-}
-
-/* BD.W-TABS-LIQUID — the glyph scale-pop on the PILL selection. The live selection
-   model is `aria-pressed` (the pill is a ToggleGroup-shaped surface — verified in
-   SegmentedTabs.vue, NOT `aria-selected` which the underline paper material uses).
-   The pop magnitude DEPENDS `--motion-weight` (the booked Band-0 token, CONSUMED):
-   `calc(1 + 0.06 × --motion-weight)` → ~+3.7% at rest weight 0.618, and exactly 1
-   under PRM (`--motion-weight: 0`). The 60ms transition delay (above) settles it a
-   beat after the capsule arrives (overlapping action). The underline label does NOT
-   pop (paper ink, no inflation — the material fence). */
-.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);
-}
-
-/* ── 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;
-    /* BD.W-TAB-IOS-CAPSULE C7 — the grabbed-state catch-light COMPOSES the SHARED
-       specular-lift step declared ONCE in glass/glass-capsule.css (the
-       `.glass-capsule-hover:hover, .glass-drag-lift { --glass-specular }` group), NOT
-       a parallel `--glass-specular` fork. This block carries only the grabbing-distinct
-       bits (the grab cursor + the `will-change` hint). */
-}
+.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,201 +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;
-}
-
-/* ════════════════════════════════════════════════════════════════════════
-   BD.W-SELECT-WELL (P4 select-forms) — the welling WARM-GLASS listbox + the
-   keyed warm control EDGE. The Select is the REFERENCE consumer of the shared
-   field + capsule + accent + reveal union — every leg COMPOSES a shipped/sibling
-   register, ZERO new component, ZERO fork.
-
-   The three legs that live HERE (the consumer side):
-     · .glass-control-edge — the keyed two-stop warm rim every form control reads
-       so it has a DEFINED edge over the field (fixes the trigger box-shadow:none
-       cream-on-cream melt). Composes the SHIPPED `--glass-rim-top`/`--glass-rim-
-       bottom` keyed pair (the `--glass-key` upper-right cel key) — NOT a select-
-       private border, NOT a re-minted rim.
-     · the menu plate WARM FLOOR + α-drop — the menu reads the SHIPPED warm-capsule
-       floor (`--glass-capsule-warm` at `--glass-capsule-warm-floor`, the proven
-       meanChroma ≥ 0.02 source) so it is warm-cream even over a flat page, AND the
-       plate α drops so the warmed source + the portal field TRANSMIT.
-     · the portal warm FIELD — a clipped menu-local layer carrying the route's
-       `--field-h` (re-emitted on the portal root) so the menu transmits its route
-       identity even where the page field is faint behind the body plate.
-   ════════════════════════════════════════════════════════════════════════ */
-@layer components {
-    /* ── .glass-control-edge — the keyed warm control rim (the cream-on-cream fix) ──
-       The form controls read `.control-surface` / `.input-pill` (control-surfaces.css)
-       which carry a border + fill but `box-shadow: none` — so over a warm cream field
-       the trigger's 1.5px border melts and the control reads as a flat cream smudge.
-       This register adds the SHIPPED keyed two-stop directional rim (the bright top/
-       right catch-light + the faint warm bottom/left under-shadow, `--glass-key` upper-
-       right) so the control reads as a lifted glass plate with a defined warm edge over
-       the field. ONE register, ≥8 consumers (Select trigger + Input/Textarea/NumberField
-       pill + Checkbox/Radio + Switch track + Combobox anchor) — the DRY bar cleared by
-       construction. Composed (not re-declared): the rim is the SAME `--glass-rim-top`/
-       `--glass-rim-bottom` pair `.glass-capsule` reads, so `--glass-key` re-points BOTH
-       the capsule and the control edge from ONE handle (cel coherence). */
-    .glass-control-edge {
-        box-shadow:
-            var(--glass-rim-top),
-            var(--glass-rim-bottom);
-    }
-    /* Compose the keyed edge UNDER any control-owned ring/shadow: a control with its
-       OWN box-shadow (the Switch thumb, the focus ring on the pill) layers its shadow
-       FIRST, then the rim — the rim is the resting silhouette, the ring is the focus
-       overlay (the pill's `:focus-visible` box-shadow wins by source order + its own
-       rule). The rim travels with the control on the SHARED bezier (the pill/control-
-       surface already transition box-shadow on `--ease-standard`). */
-
-    /* ── The menu plate WARM FLOOR + α-drop (the un-gray amplifier) ──
-       The floating recipe (`.glass-floating`, ladder.css) composes
-       `color-mix(--glass-bg-floating, --glass-tint-source --glass-tint-strength)`,
-       and `--glass-tint-strength` floors at 0% at calm rest — so the menu plate is
-       near-gray-flat. RE-POINT the menu fill to compose the SHIPPED warm-capsule floor
-       (`--glass-capsule-warm` at `--glass-capsule-warm-floor`, the proven meanChroma
-       ≥ 0.02 source — the SAME token the tab capsule reads, DRY) ON TOP of the floating
-       tint, AND drop the plate α so the warmed source + the portal field TRANSMIT and
-       give real L-variance (the menu is warm GLASS, never an opaque cream slab). The
-       six-layer rim/blur/shadow composite is UNTOUCHED — only the FILL admit changes. */
-    [data-slot="select-content"],
-    [data-slot="combobox-list"] {
-        /* The α-drop seam: a consumer can re-solidify via `--select-plate-alpha: 1`.
-           Default 0.90 (light) drops the ~0.80α floating base to ~0.72 effective (the
-           amendment's transmit target) so the warmed source + the portal field show
-           through while the plate keeps body. The dark arm keeps more body (see .dark
-           below). The combobox list is the SAME overlay-family warm-glass plate
-           (DRY — one warm-floor register for both portalled pickers). */
-        --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%)
-        );
-        /* the cartoon weight — the SHIPPED `--shadow-cartoon-lg` warm cel stamp UNDER
-           the floating elevation so the panel reads as a physical card lifted off the
-           page. Composed onto the floating box-shadow stack via the plate's own rule
-           (the floating tier's `--glass-material-rim` + shadows stay; this ADDS the
-           cartoon under-stamp). Static, PRM-immune. */
-        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"] {
-        /* dark glass needs more body — the warm field reads as a glow band, not a wash
-           lost in near-black; keep the fill nearly solid so the dark menu has presence.
-           PLAIN per-mode arm (not a light-dark() fragment — the inset-shadow trap, and
-           the box-shadow above carries no inset leg but the discipline holds). */
-        --select-plate-alpha: 0.94;
-    }
-
-    /* ── .glass-field-portal — the portal-local warm field (route identity) ──
-       The menu portals to <body>, OUTSIDE the route's field, so its `backdrop-filter`
-       has nothing warm to transmit. A clipped menu-local layer BEHIND the plate (z -1,
-       NO backdrop-filter on it — glass-cannot-sample-glass avoided by construction)
-       paints a 3-stop warm spine keyed to the route's `--field-h` (re-emitted on the
-       portal root via `data-field-palette` → `--field-h`). `inset: 0` (clipped INSIDE
-       — the blur bends it THROUGH the plate as real L-variance, NOT an `inset:-20%`
-       halo leaking around the box). Defaults to `--field-h: 48` (forms terracotta)
-       when the route does not re-emit, so a bare Select still reads warm. */
-    .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 arm (PLAIN per-mode, not :global()/light-dark()) — the dark field stops lift
-       to a real glow band (oklch L ~0.22–0.30, higher chroma) so the field-thesis is met
-       in dark, not a wash lost in near-black. */
-    .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%);
-    }
-    /* honest-degraded arm — engines without oklch() get an hsl warm spine, never gray. */
-    @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%);
-        }
-    }
-}
-
-/* ── PRM is colour-static here — the field + floor + edge + cartoon shadow are PAINT,
-   not motion, so they REMAIN under `prefers-reduced-motion: reduce` (un-gray and
-   selection-legibility need no motion). The reveal/pour/chevron motion legs are
-   carved in their own home recipes (reveal.css / menu.css) — this consumer file
-   introduces no motion to gate. */
+: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)); }