@mkbabb/glass-ui 3.12.0 → 3.13.0

package/src/styles/index.css

@@ -40,7 +40,20 @@
  * above it via CSS custom properties or selector cascade; reordering breaks
  * fallbacks. Documented at L.W2 Lane B per Rε §B.5.1.
  *
- *   1. tokens.css            — CSS custom properties (color, easing, glass,
+ * WHERE each idiom LIVES (the localized design-idiom home, complementing the
+ * load-ORDER below): see docs/precepts/design-idioms.md — @theme aliases live
+ * in theme.css, @utility recipes in their cohesion-domain file, the
+ * cohesion-aware @import-partial carve rule, and the var-in-arbitrary syntax.
+ * tokens.css / glass.css / utilities.css are thin @import ROOTS over cohesive
+ * tokens/* · glass/* · utilities/* partials (each < 500 lines, in cascade order
+ * — the dock.css precedent, AX.W06; generalized AY.W-CSS1). The carve is
+ * cascade-isomorphic: the partials @import in the recorded cascade order so this
+ * load order is preserved bit-for-bit.
+ *
+ *   1. tokens.css            — thin @import root over tokens/{scheme-motion,
+ *                              color-radius,shadow,glass,offsets-sizing,
+ *                              scale-paper,light-dark,dark-arm,property-regs}.css.
+ *                              CSS custom properties (color, easing, glass,
  *                              paper, shadow, surface-tint rungs). Source-of-
  *                              record for every visual axis.
  *   2. typography.css        — golden-ratio scale (√φ); semantic type classes.
@@ -48,7 +61,9 @@
  *   3. theme.css             — @theme block (Tailwind aliases). Reads tokens
  *                              from (1) so MUST come after them; defines the
  *                              `dark` variant selector consumed by the cascade.
- *   4. glass.css             — .glass-{wash,quiet,resting,floating,overlay}
+ *   4. glass.css             — thin @import root over glass/{material,ladder,
+ *                              surfaces,progress-rail,squircle,a11y-fallback}.css.
+ *                              .glass-{wash,quiet,resting,floating,overlay}
  *                              5-rung ladder + .glass-card / -pill / -btn.
  *                              Consumes tokens (1) + theme aliases (3).
  *  4a. glass-specular-track.css — the pointer-anchored MOVING specular rung
@@ -93,22 +108,20 @@
  *  10b. view-transition.css  — the `.gl-list-item` View-Transitions group
  *                              recipe + `--vt-*` axes (AQ.W5; the
  *                              `useViewTransition` substrate's CSS half).
- *  11. utilities.css         — focus-ring, btn-audacious + btn-interactive
- *                              (press cluster; K W6 + Q.W3 Lane E),
- *                              rainbow-vivid + rainbow-pastel. Consumes earlier
- *                              animations + tokens.
+ *  11. utilities.css         — thin @import root over utilities/{animate,base,
+ *                              components,btn,a11y-overrides}.css. focus-ring,
+ *                              btn-audacious + btn-interactive (press cluster;
+ *                              K W6 + Q.W3 Lane E), rainbow-vivid +
+ *                              rainbow-pastel. Consumes earlier animations +
+ *                              tokens.
  *  12. instrument-chassis.css — P-tranche component CSS (chassis bezel +
  *                              groove dividers). Loaded after utilities so
  *                              component-local recipes can override.
- *  13. instrument-rail.css   — AK-W2-α cockpit-ratio rail (flex-basis 1/φ²
- *                              binding + bezel hairlines + sibling divider
- *                              rule). Composes alongside instrument-chassis;
- *                              shares the bezel-line twin-pixel idiom.
- *  14. hover-popover.css     — V.W3 popover-animation grammar.
- *  15. drawer.css            — AN.W3 detented bottom-sheet grammar (glass
+ *  13. hover-popover.css     — V.W3 popover-animation grammar.
+ *  14. drawer.css            — AN.W3 detented bottom-sheet grammar (glass
  *                             sheet surface + peek handle + snap-stop rules).
  *
- * Per-package component CSS lives at (12)-(15) (loaded after utilities so
+ * Per-package component CSS lives at (12)-(14) (loaded after utilities so
  * component-local recipes can override). New per-package CSS files append
  * to that tail.
  */
@@ -128,10 +141,11 @@
 @import "./scroll-driven.css";
 @import "./view-transition.css";
 @import "./utilities.css";
+@import "./configurator.css";
 @import "./instrument-chassis.css";
-@import "./instrument-rail.css";
 @import "./hover-popover.css";
 @import "./drawer.css";
+@import "./segmented-tabs.css";
 
 /* Ensure consumer's Tailwind scans glass-ui components for utility classes
    (e.g. CVA button variants like text-destructive-foreground) */

package/src/styles/paper.css

@@ -7,54 +7,8 @@
  *
  * Texture: feTurbulence baseFrequency 0.65, 4 octaves, desaturated via
  * feColorMatrix, blended multiply (light) / soft-light (dark). Tiles ~60px.
- *
- * ── THE GRAIN RUNGS (D6.c M5 — the printed-paper tooth, FELT not seen) ─────────
- * The warm-paper grain must be FELT at rest — a premium editorial stock has a
- * felt depth, and the measured finding (ds2-medium M5 / fd-usf-gallery §F) is
- * that the shipped `--glass-grain-opacity: 0.025` floor reads as NOTHING. This
- * file lifts the grain off that floor and mints a SECOND rung for chart plates:
- *
- *   --glass-grain-opacity        — the PAGE grain. Lifted here to a perceptible-
- *                                  but-deft 0.038 default (the local floor below).
- *                                  Numeric justification: the kitsch line is
- *                                  ~0.05 (above it the grain reads as screen-noise
- *                                  / a dirty monitor, ds2-medium M5); 0.025 is
- *                                  sub-perceptual ("felt as nothing"). 0.038 is
- *                                  the calibrated MIDPOINT — ~1.5× the dead floor,
- *                                  ~0.76× the kitsch ceiling — felt at rest, never
- *                                  seen AS grain. (The canonical token still lives
- *                                  in tokens.css; this utility reads it with the
- *                                  lifted fallback so a no-override mount is felt.)
- *   --glass-grain-opacity-plate  — the PLATE grain (NEW rung). A chart plate is
- *                                  the FIGURE's "paper", so it wants slightly more
- *                                  tooth than the page (M5): 0.045 — still below
- *                                  the 0.05 kitsch ceiling, distinctly felt so the
- *                                  plate reads as PRINTED on the same stock as the
- *                                  page, not pasted onto it.
- *
- * THE DATA-REGION MASK CONTRACT (M5, non-negotiable). Grain on the FRAME, never
- * under the FIGURE — a fleck over a choropleth reads as a data artifact; on the
- * plate margin it reads as paper. `paper-grain-overlay` exposes a custom-property
- * MASK SLOT (`--paper-grain-mask`) so a consumer can carve the data viewport out
- * of the grain ::after: set it to a gradient/`url()` that is transparent over the
- * data region and opaque over the frame, and the grain is masked off the figure.
- * Default `none` (the whole surface is grained — the page/card case, no data to
- * fence). The plate rung is opt-in via `[data-grain="plate"]`.
  */
 
-/* The grain rung DEFAULTS — lifted off the tokens.css floor (D6.c M5). These are
-   plain custom-property fallbacks the utilities read; a consumer/tokens.css value
-   still wins (`var(--glass-grain-opacity, <floor>)`), so this only sets the floor
-   a no-override mount inherits. The plate rung is minted here (no canonical
-   tokens.css home is touched in this lane — D6.b owns tokens.css). */
-@layer components {
-    :root {
-        /* The PLATE grain rung — distinct from the page rung; the figure's paper
-           wants more tooth. Minted in this lane; a consumer overrides at :root. */
-        --glass-grain-opacity-plate: 0.045;
-    }
-}
-
 @utility paper-underpaint {
     position: fixed;
     inset: 0;
@@ -63,8 +17,7 @@
     background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeBlend mode='multiply' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
     background-repeat: repeat;
     background-size: 60px 60px;
-    /* Lifted floor — the page grain is FELT at rest (0.038), not the dead 0.025. */
-    opacity: var(--glass-grain-opacity, 0.038);
+    opacity: var(--glass-grain-opacity);
     mix-blend-mode: multiply;
 }
 
@@ -86,27 +39,8 @@
         background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeBlend mode='multiply' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
         background-repeat: repeat;
         background-size: 60px 60px;
-        /* Lifted floor — felt on the frame at rest (0.038). */
-        opacity: var(--glass-grain-opacity, 0.038);
+        opacity: var(--glass-grain-opacity);
         mix-blend-mode: overlay;
-        /* THE DATA-REGION MASK SLOT (M5). Default `none` = the whole surface is
-           grained (page/card — no data to fence). A consumer that grains a chart
-           plate sets `--paper-grain-mask` to a gradient/url() transparent over the
-           data viewport + opaque over the frame, carving the figure out of the
-           grain so no fleck lands on a tier fill. `mask` is Baseline; a
-           non-supporting engine ignores it and keeps the full-surface grain (the
-           page case is unaffected — the mask only matters when a consumer fences
-           the data region). */
-        mask: var(--paper-grain-mask, none);
-        -webkit-mask: var(--paper-grain-mask, none);
-    }
-
-    /* The PLATE rung — a chart plate opts in via `[data-grain="plate"]` to the
-       higher-tooth `--glass-grain-opacity-plate` (the figure's paper reads as the
-       same stock as the page, with a touch more tooth). Pair with the mask slot to
-       fence the data viewport. */
-    &[data-grain="plate"]::after {
-        opacity: var(--glass-grain-opacity-plate, 0.045);
     }
 }
 

package/src/styles/segmented-tabs.css

@@ -0,0 +1,271 @@
+/* ════════════════════════════════════════════════════════════════════════
+   The unified SegmentedTabs grammar. ONE indicator body across three variants
+   (segmented / pill / underline), gliding on the CONTROL register
+   (`--spring-snappy`) with the volume-preserving travel-squish.
+
+   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).
+   ════════════════════════════════════════════════════════════════════════ */
+
+.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);
+    /* AX.W54 — the track rides the glass wash tier (the flagship surface),
+       not an opaque --muted-medium plate. */
+    background: var(--glass-bg-wash);
+    backdrop-filter: var(--glass-blur-wash);
+}
+
+@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 ── */
+.segmented-indicator {
+    position: absolute;
+    /* AX.W54 — the active indicator rides the glass quiet tier so it reads
+       FORWARD of the wash track (the keyframes-dock-selected model). */
+    background: var(--glass-bg-quiet);
+    backdrop-filter: var(--glass-blur-quiet);
+    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));
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .segmented-indicator {
+        /* The squish releases on the same clock as the glide (the snappy
+           settle). Under PRM the scale stays 1 (the JS write early-returns). */
+        transition: scale var(--duration-normal) var(--spring-snappy);
+    }
+}
+
+/* Fallback (JS-measured) path — the indicator is moved by inline
+   `transform`/`width` writes; animate those alongside the squish scale. */
+.segmented-indicator--js {
+    transition:
+        transform var(--duration-normal) var(--spring-snappy),
+        width var(--duration-normal) var(--spring-snappy),
+        scale var(--duration-normal) 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 snappy clock. */
+@supports (position-anchor: --x) {
+    .segmented-indicator--anchor {
+        position-anchor: --gl-tab-active;
+        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);
+        inset-block: auto;
+        opacity: 1;
+    }
+    @media (prefers-reduced-motion: no-preference) {
+        .segmented-indicator--anchor {
+            transition:
+                inset var(--duration-normal) var(--spring-snappy),
+                scale var(--duration-normal) var(--spring-snappy);
+        }
+    }
+    .segmented-tabs:not(.segmented-tabs--underline) .segmented-tab[aria-pressed="true"] {
+        anchor-name: --gl-tab-active;
+    }
+}
+
+@media (min-width: 640px) {
+    .segmented-indicator {
+        inset-block: 0.25rem;
+        border-radius: 0.375rem;
+    }
+    @supports (position-anchor: --x) {
+        .segmented-indicator--anchor {
+            inset-block-start: calc(anchor(top) + 0.25rem);
+            inset-block-end: calc(anchor(bottom) + 0.25rem);
+            inset-block: auto;
+        }
+    }
+}
+
+/* ── 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);
+}
+
+/* ── Pill variant ── */
+.segmented-tabs--pill {
+    border-radius: var(--radius-pill);
+    background: var(--surface-tint-6);
+    padding: 0.125rem;
+    gap: 0.125rem;
+}
+
+.segmented-tabs--pill .segmented-indicator {
+    border-radius: var(--radius-pill);
+    background: var(--foreground);
+    box-shadow: none;
+    inset-block: 0.125rem;
+}
+
+.segmented-tabs--pill .segmented-tab {
+    border-radius: var(--radius-pill);
+    padding: 0.125rem 0.625rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+.segmented-tabs--pill .segmented-tab[aria-pressed="true"] {
+    color: var(--background);
+}
+
+/* ── Underline variant ── (the panel-nav `role=tablist` strip) */
+.segmented-tabs--underline {
+    display: flex;
+    grid-auto-flow: unset;
+    grid-auto-columns: unset;
+    gap: 0.25rem;
+    padding: 0;
+    background: none;
+    border-radius: 0;
+}
+
+/* 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, 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;
+    inset-block-start: calc(anchor(bottom) - 2px);
+    inset-inline-start: anchor(left);
+    inset-inline-end: anchor(right);
+    block-size: 2px;
+    background: var(--foreground);
+    border-radius: var(--radius-sm);
+    transform-origin: center;
+    scale: var(--stretch) 1;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .segmented-tabs--underline::before {
+        /* control register — the glide + the squish on one snappy clock. */
+        transition:
+            inset var(--duration-normal) var(--spring-snappy),
+            scale var(--duration-normal) 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: 2px solid var(--foreground);
+    }
+}
+
+.segmented-tabs--underline .segmented-tab {
+    padding: 0.375rem 0.75rem;
+    font-size: inherit;
+    border-radius: 0.25rem;
+    transition: color var(--duration-normal) var(--ease-standard);
+}
+
+.segmented-tabs--underline .segmented-tab:hover {
+    color: var(--surface-tint-70);
+}
+
+/* ── Overflow variants ──
+ * `--scroll`/`--auto` swap the inline-grid for a flex row with intrinsic-width
+ * tracks so tab text never clips; the container scrolls horizontally.
+ */
+.segmented-tabs--scroll,
+.segmented-tabs--auto {
+    display: flex;
+    grid-auto-flow: unset;
+    grid-auto-columns: unset;
+    overflow-x: auto;
+    overflow-y: hidden;
+    width: 100%;
+}
+
+.segmented-tabs--scroll {
+    --mask-fade-width: 0.5rem;
+    padding-inline-end: calc(0.125rem + var(--mask-fade-width));
+    scroll-padding-inline: var(--mask-fade-width);
+}