@mkbabb/glass-ui 3.10.1 → 3.11.0

package/dist/styles/hover-popover.css

@@ -19,8 +19,6 @@
         padding-inline: 0.625rem;
         border-radius: var(--radius-lg, 0.5rem);
         background: var(--glass-bg-floating, var(--popover, white));
-        -webkit-backdrop-filter: var(--glass-blur-floating);
-
         backdrop-filter: var(--glass-blur-floating);
         border: 1px solid var(--glass-border-floating, var(--border, transparent));
         color: var(--popover-foreground, var(--foreground));

package/dist/styles/index.css

@@ -40,20 +40,7 @@
  * above it via CSS custom properties or selector cascade; reordering breaks
  * fallbacks. Documented at L.W2 Lane B per Rε §B.5.1.
  *
- * 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,
+ *   1. tokens.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.
@@ -61,9 +48,7 @@
  *   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             — thin @import root over glass/{material,ladder,
- *                              surfaces,progress-rail,squircle,a11y-fallback}.css.
- *                              .glass-{wash,quiet,resting,floating,overlay}
+ *   4. glass.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
@@ -108,12 +93,10 @@
  *  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         — 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.
+ *  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.
  *  12. instrument-chassis.css — P-tranche component CSS (chassis bezel +
  *                              groove dividers). Loaded after utilities so
  *                              component-local recipes can override.
@@ -149,7 +132,6 @@
 @import "./instrument-rail.css";
 @import "./hover-popover.css";
 @import "./drawer.css";
-@import "../components/custom/tabs/segmented-tabs.css";
 
 /* Ensure consumer's Tailwind scans glass-ui components for utility classes
    (e.g. CVA button variants like text-destructive-foreground) */

package/dist/styles/instrument-chassis.css

@@ -44,8 +44,6 @@
         transition: --phase-tint-amount
             var(--motion-duration-phase-handoff, 600ms)
             var(--motion-ease-standard);
-        -webkit-backdrop-filter: var(--glass-blur-quiet);
-
         backdrop-filter: var(--glass-blur-quiet);
         /* AK-FD1 §2.4 — glass-variant outer border softened one rung down the
            foreground-tinted border ladder (quiet 10% → wash 8%) so it reads at
@@ -135,8 +133,6 @@
        ───────────────────────────────────────────────────────────── */
     .instrument-chassis[data-variant="spine"] {
         background: var(--glass-spine-vignette);
-        -webkit-backdrop-filter: none;
-
         backdrop-filter: none;
         border: 1px solid var(--glass-spine-border);
         box-shadow: var(--glass-under-shadow-spine);

package/dist/styles/paper.css

@@ -7,8 +7,54 @@
  *
  * 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;
@@ -17,7 +63,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;
-    opacity: var(--glass-grain-opacity);
+    /* Lifted floor — the page grain is FELT at rest (0.038), not the dead 0.025. */
+    opacity: var(--glass-grain-opacity, 0.038);
     mix-blend-mode: multiply;
 }
 
@@ -39,8 +86,27 @@
         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;
-        opacity: var(--glass-grain-opacity);
+        /* Lifted floor — felt on the frame at rest (0.038). */
+        opacity: var(--glass-grain-opacity, 0.038);
         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/dist/styles/theme.css

@@ -82,24 +82,25 @@
     --corner-k-soft:     1.7; /* gentler, between round and squircle — n≈3.4       */
     --corner-k-sharp:    2.4; /* crisper square-bias for large surfaces — n≈4.8    */
 
-    /* Semantic per-surface SHAPE aliases — the rounded-vs-squircle POLICY (a
-       RADIUS-THRESHOLD policy: the superellipse only READS at a LARGE radius
-       ~--radius-xl/12px and up). ROUND set = card, pill (small controls + data
-       cards + stadium pills — the superellipse is imperceptible, dropping it is
-       free). SQUIRCLE set = bigdock, dialog, sheet, panel, hero (the large-radius
-       glass overlays where the iOS-26 silhouette reads — the blur halo + cartoon
-       under-shadow follow the shape). ALL ride the ONE --corner-k-squircle vocab.
-       W56b (USER-DECISION R1) extended the family off big-dock-only onto the large
-       glass overlays; @supports-gated in glass/squircle.css over the `border-radius`
-       round CONTRACT. A consumer dials any surface back to round (or opts one in) by
-       re-pointing its `--corner-shape-<surface>` alias. */
+    /* Semantic per-surface SHAPE aliases — the rounded-vs-squircle POLICY.
+       Cards, pills/buttons, small docks, and panels stay ROUND (the superellipse is
+       imperceptible at a 16px card radius or a stadium pill — dropping it there is
+       visually free). The big-dock card shell (the large --radius-dock-card / 24px
+       surface) is the one site where the squircle READS — the iOS-26 idiom the dock
+       wants. A consumer opts an additional large-radius surface in by re-pointing its
+       `--corner-shape-<surface>` at `superellipse(var(--corner-k-squircle))`. */
     --corner-shape-card:    round;
     --corner-shape-pill:    round;
+    --corner-shape-panel:   round;
     --corner-shape-bigdock: superellipse(var(--corner-k-squircle));
+    /* AX.W56(R1) — the overlay-band glass surfaces W54 makes glass-default
+       (Dialog + Sheet content) ride the squircle alongside the big-dock. They
+       sit at the large `--radius-dialog` (16px) modal radius where the
+       superellipse READS — the same iOS-26 idiom. @supports-gated in glass.css
+       over the `border-radius` round CONTRACT; a consumer dials either back to
+       round by re-pointing the alias. */
     --corner-shape-dialog:  superellipse(var(--corner-k-squircle));
     --corner-shape-sheet:   superellipse(var(--corner-k-squircle));
-    --corner-shape-panel:   superellipse(var(--corner-k-squircle));
-    --corner-shape-hero:    superellipse(var(--corner-k-squircle));
     /* AX.W59 — the spectrum slider's track-height thumb reads as a SQUIRCLE
        (the iOS color-picker idiom). It rides the same --corner-k-squircle
        vocabulary; @supports-gated in Slider.vue over a --radius-* round
@@ -308,6 +309,12 @@
     --color-gold-light: var(--gold-light);
     --color-gold-dark: var(--gold-dark);
     --color-gold-deep: var(--gold-deep);
+    /* D6.b — the gilt family: the rim (gilt edge) + the legible gold ink. The
+       `@theme` bridge surfaces `text-gold-ink` / `border-gold-rim` utilities
+       beside the existing gold quad. `--gold-ink` clears cream-law ② on `--card`
+       in both arms (proof:gold-ink-contrast). */
+    --color-gold-rim: var(--gold-rim);
+    --color-gold-ink: var(--gold-ink);
 
     --color-rainbow-red:    var(--rainbow-red);
     --color-rainbow-orange: var(--rainbow-orange);