@mkbabb/glass-ui 3.12.0 → 4.0.0

package/src/styles/segmented-tabs.css

@@ -0,0 +1,340 @@
+/* ════════════════════════════════════════════════════════════════════════
+   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;
+    --bouncy-track-radius: 0.4375rem;
+    --bouncy-slider-radius: 0.3125rem;
+    /* 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);
+    backdrop-filter: var(--glass-blur-quiet);
+    -webkit-backdrop-filter: var(--glass-blur-quiet);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 24%, transparent);
+}
+
+/* ── 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 {
+        --bouncy-track-trim: 0.25rem;
+        --bouncy-track-radius: 0.5rem;
+        --bouncy-slider-radius: 0.375rem;
+    }
+}
+
+/* ── The shared indicator body (the PILL plate) ── */
+.segmented-indicator {
+    position: absolute;
+    /* BA.W-TABS — the active pill indicator rides the glass FLOATING tier (the
+       W-REGISTER-IOS "selected reads as glass" register), reading FORWARD of the
+       quiet-tier track. A glass tint, NEVER a saturated `--foreground` fill or an
+       opaque `bg-card`. */
+    background: var(--glass-bg-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);
+    box-shadow:
+        0 1px 3px rgba(0, 0, 0, 0.08),
+        0 0 0 1px color-mix(in srgb, var(--border) 30%, transparent);
+    /* 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 {
+        inset-block: 0.25rem;
+        border-radius: 0.375rem;
+    }
+    .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;
+    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;
+    font-size: inherit;
+    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);
+}

package/src/styles/select.css

@@ -0,0 +1,50 @@
+/*
+ * 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;
+}