@gradeui/ui 3.0.0 → 3.2.0

package/dist/{types-BxywIwvG.d.mts → types-B45Uirkp.d.mts}

@@ -7,6 +7,20 @@ import * as React from 'react';
  */
 type Coords = [lng: number, lat: number];
 type MapAppearance = "light" | "dark" | "satellite" | "auto";
+/**
+ * Which built-in map UI (zoom buttons today; compass/scale could join)
+ * renders on the map. `"auto"` (default) shows zoom buttons whenever the
+ * map is `interactive`; `"zoom"` forces them on regardless; `"none"`
+ * hides every tool. Attribution is NOT a tool — it's a license
+ * requirement and always renders.
+ */
+type MapTools = "auto" | "zoom" | "none";
+/**
+ * Corner the tools dock to. One vocabulary across providers — each
+ * adapter maps it to its native enum (Leaflet `topleft`, MapLibre/Mapbox
+ * `top-left`, Google `ControlPosition.*`).
+ */
+type MapToolsPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
 type MapErrorCode = "sdk-missing" | "api-key-missing" | "provider-init-failed" | "style-load-failed" | "tile-load-failed";
 type MapError = {
     code: MapErrorCode;
@@ -51,6 +65,13 @@ type MapBaseProps = {
     appearance?: MapAppearance;
     /** Default `true`. `false` disables pan/zoom/rotate (static display). */
     interactive?: boolean;
+    /** Which built-in map UI shows. Default `"auto"` — zoom buttons follow
+     *  `interactive`. `"none"` for chrome-free maps (hero backdrops,
+     *  posters); attribution always stays (license). */
+    tools?: MapTools;
+    /** Corner the tools dock to. Default `"top-left"`. Handy when the
+     *  layout puts a search bar or legend over the default corner. */
+    toolsPosition?: MapToolsPosition;
     /** Controlled hovered marker id — pairs with `onHoveredIdChange` for list↔map sync. */
     hoveredId?: string | null;
     onHoveredIdChange?: (id: string | null) => void;
@@ -116,6 +137,8 @@ type AdapterOpts = {
     bounds?: [Coords, Coords];
     appearance: "light" | "dark" | "satellite";
     interactive: boolean;
+    tools: MapTools;
+    toolsPosition: MapToolsPosition;
     styleUrl?: string;
     tilerKey?: string;
     accessToken?: string;

package/dist/{types-BxywIwvG.d.ts → types-B45Uirkp.d.ts}

@@ -7,6 +7,20 @@ import * as React from 'react';
  */
 type Coords = [lng: number, lat: number];
 type MapAppearance = "light" | "dark" | "satellite" | "auto";
+/**
+ * Which built-in map UI (zoom buttons today; compass/scale could join)
+ * renders on the map. `"auto"` (default) shows zoom buttons whenever the
+ * map is `interactive`; `"zoom"` forces them on regardless; `"none"`
+ * hides every tool. Attribution is NOT a tool — it's a license
+ * requirement and always renders.
+ */
+type MapTools = "auto" | "zoom" | "none";
+/**
+ * Corner the tools dock to. One vocabulary across providers — each
+ * adapter maps it to its native enum (Leaflet `topleft`, MapLibre/Mapbox
+ * `top-left`, Google `ControlPosition.*`).
+ */
+type MapToolsPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
 type MapErrorCode = "sdk-missing" | "api-key-missing" | "provider-init-failed" | "style-load-failed" | "tile-load-failed";
 type MapError = {
     code: MapErrorCode;
@@ -51,6 +65,13 @@ type MapBaseProps = {
     appearance?: MapAppearance;
     /** Default `true`. `false` disables pan/zoom/rotate (static display). */
     interactive?: boolean;
+    /** Which built-in map UI shows. Default `"auto"` — zoom buttons follow
+     *  `interactive`. `"none"` for chrome-free maps (hero backdrops,
+     *  posters); attribution always stays (license). */
+    tools?: MapTools;
+    /** Corner the tools dock to. Default `"top-left"`. Handy when the
+     *  layout puts a search bar or legend over the default corner. */
+    toolsPosition?: MapToolsPosition;
     /** Controlled hovered marker id — pairs with `onHoveredIdChange` for list↔map sync. */
     hoveredId?: string | null;
     onHoveredIdChange?: (id: string | null) => void;
@@ -116,6 +137,8 @@ type AdapterOpts = {
     bounds?: [Coords, Coords];
     appearance: "light" | "dark" | "satellite";
     interactive: boolean;
+    tools: MapTools;
+    toolsPosition: MapToolsPosition;
     styleUrl?: string;
     tilerKey?: string;
     accessToken?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradeui/ui",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "description": "Grade Design System — React components, theme engine, and design tokens",
   "license": "MIT",
   "author": {
@@ -146,6 +146,7 @@
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-table": "^8.20.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",

package/styles/globals.css

@@ -48,102 +48,108 @@
 @theme {
   --text-2xs: 0.6875rem;
   --text-2xs--line-height: 1rem;
+  /* Accent font role — gives a `font-accent` utility that references the
+     runtime --font-accent var (set by the theme generator / apply.ts).
+     Plain @theme (not inline) so the utility stays var-referencing and
+     re-skins live; falls back to the display/sans stack until a theme
+     sets one. */
+  --font-accent: var(--font-display, var(--font-sans));
 }
 
 @theme inline reference {
   /* -- Brand color ramps — values live in @gradeui/core as --gds-* vars. -- */
-  --color-rds-green: var(--gds-green);
-  --color-rds-green-50: var(--gds-green-50);
-  --color-rds-green-100: var(--gds-green-100);
-  --color-rds-green-200: var(--gds-green-200);
-  --color-rds-green-300: var(--gds-green-300);
-  --color-rds-green-400: var(--gds-green-400);
-  --color-rds-green-500: var(--gds-green-500);
-  --color-rds-green-600: var(--gds-green-600);
-  --color-rds-green-700: var(--gds-green-700);
-  --color-rds-green-800: var(--gds-green-800);
-  --color-rds-green-900: var(--gds-green-900);
-  --color-rds-green-950: var(--gds-green-950);
-  --color-rds-yellow: var(--gds-yellow);
-  --color-rds-yellow-50: var(--gds-yellow-50);
-  --color-rds-yellow-100: var(--gds-yellow-100);
-  --color-rds-yellow-200: var(--gds-yellow-200);
-  --color-rds-yellow-300: var(--gds-yellow-300);
-  --color-rds-yellow-400: var(--gds-yellow-400);
-  --color-rds-yellow-500: var(--gds-yellow-500);
-  --color-rds-yellow-600: var(--gds-yellow-600);
-  --color-rds-yellow-700: var(--gds-yellow-700);
-  --color-rds-yellow-800: var(--gds-yellow-800);
-  --color-rds-yellow-900: var(--gds-yellow-900);
-  --color-rds-orange: var(--gds-orange);
-  --color-rds-orange-50: var(--gds-orange-50);
-  --color-rds-orange-100: var(--gds-orange-100);
-  --color-rds-orange-200: var(--gds-orange-200);
-  --color-rds-orange-300: var(--gds-orange-300);
-  --color-rds-orange-400: var(--gds-orange-400);
-  --color-rds-orange-500: var(--gds-orange-500);
-  --color-rds-orange-600: var(--gds-orange-600);
-  --color-rds-orange-700: var(--gds-orange-700);
-  --color-rds-orange-800: var(--gds-orange-800);
-  --color-rds-orange-900: var(--gds-orange-900);
-  --color-rds-red: var(--gds-red);
-  --color-rds-red-50: var(--gds-red-50);
-  --color-rds-red-100: var(--gds-red-100);
-  --color-rds-red-200: var(--gds-red-200);
-  --color-rds-red-300: var(--gds-red-300);
-  --color-rds-red-400: var(--gds-red-400);
-  --color-rds-red-500: var(--gds-red-500);
-  --color-rds-red-600: var(--gds-red-600);
-  --color-rds-red-700: var(--gds-red-700);
-  --color-rds-red-800: var(--gds-red-800);
-  --color-rds-red-900: var(--gds-red-900);
-  --color-rds-teal: var(--gds-teal);
-  --color-rds-teal-50: var(--gds-teal-50);
-  --color-rds-teal-100: var(--gds-teal-100);
-  --color-rds-teal-200: var(--gds-teal-200);
-  --color-rds-teal-300: var(--gds-teal-300);
-  --color-rds-teal-400: var(--gds-teal-400);
-  --color-rds-teal-500: var(--gds-teal-500);
-  --color-rds-teal-600: var(--gds-teal-600);
-  --color-rds-teal-700: var(--gds-teal-700);
-  --color-rds-teal-800: var(--gds-teal-800);
-  --color-rds-teal-900: var(--gds-teal-900);
-  --color-rds-teal-950: var(--gds-teal-950);
-  --color-rds-navy: var(--gds-navy);
-  --color-rds-navy-50: var(--gds-navy-50);
-  --color-rds-navy-100: var(--gds-navy-100);
-  --color-rds-navy-200: var(--gds-navy-200);
-  --color-rds-navy-300: var(--gds-navy-300);
-  --color-rds-navy-400: var(--gds-navy-400);
-  --color-rds-navy-500: var(--gds-navy-500);
-  --color-rds-navy-600: var(--gds-navy-600);
-  --color-rds-navy-700: var(--gds-navy-700);
-  --color-rds-navy-800: var(--gds-navy-800);
-  --color-rds-navy-900: var(--gds-navy-900);
-  --color-rds-blue: var(--gds-blue);
-  --color-rds-blue-50: var(--gds-blue-50);
-  --color-rds-blue-100: var(--gds-blue-100);
-  --color-rds-blue-200: var(--gds-blue-200);
-  --color-rds-blue-300: var(--gds-blue-300);
-  --color-rds-blue-400: var(--gds-blue-400);
-  --color-rds-blue-500: var(--gds-blue-500);
-  --color-rds-blue-600: var(--gds-blue-600);
-  --color-rds-blue-700: var(--gds-blue-700);
-  --color-rds-blue-800: var(--gds-blue-800);
-  --color-rds-blue-900: var(--gds-blue-900);
-  --color-rds-gray-50: var(--gds-gray-50);
-  --color-rds-gray-100: var(--gds-gray-100);
-  --color-rds-gray-200: var(--gds-gray-200);
-  --color-rds-gray-300: var(--gds-gray-300);
-  --color-rds-gray-400: var(--gds-gray-400);
-  --color-rds-gray-500: var(--gds-gray-500);
-  --color-rds-gray-600: var(--gds-gray-600);
-  --color-rds-gray-700: var(--gds-gray-700);
-  --color-rds-gray-800: var(--gds-gray-800);
-  --color-rds-gray-900: var(--gds-gray-900);
-  --color-rds-gray-950: var(--gds-gray-950);
-  --color-rds-black: var(--gds-black);
-  --color-rds-white: var(--gds-white);
+  --color-gds-green: var(--gds-green);
+  --color-gds-green-50: var(--gds-green-50);
+  --color-gds-green-100: var(--gds-green-100);
+  --color-gds-green-200: var(--gds-green-200);
+  --color-gds-green-300: var(--gds-green-300);
+  --color-gds-green-400: var(--gds-green-400);
+  --color-gds-green-500: var(--gds-green-500);
+  --color-gds-green-600: var(--gds-green-600);
+  --color-gds-green-700: var(--gds-green-700);
+  --color-gds-green-800: var(--gds-green-800);
+  --color-gds-green-900: var(--gds-green-900);
+  --color-gds-green-950: var(--gds-green-950);
+  --color-gds-yellow: var(--gds-yellow);
+  --color-gds-yellow-50: var(--gds-yellow-50);
+  --color-gds-yellow-100: var(--gds-yellow-100);
+  --color-gds-yellow-200: var(--gds-yellow-200);
+  --color-gds-yellow-300: var(--gds-yellow-300);
+  --color-gds-yellow-400: var(--gds-yellow-400);
+  --color-gds-yellow-500: var(--gds-yellow-500);
+  --color-gds-yellow-600: var(--gds-yellow-600);
+  --color-gds-yellow-700: var(--gds-yellow-700);
+  --color-gds-yellow-800: var(--gds-yellow-800);
+  --color-gds-yellow-900: var(--gds-yellow-900);
+  --color-gds-orange: var(--gds-orange);
+  --color-gds-orange-50: var(--gds-orange-50);
+  --color-gds-orange-100: var(--gds-orange-100);
+  --color-gds-orange-200: var(--gds-orange-200);
+  --color-gds-orange-300: var(--gds-orange-300);
+  --color-gds-orange-400: var(--gds-orange-400);
+  --color-gds-orange-500: var(--gds-orange-500);
+  --color-gds-orange-600: var(--gds-orange-600);
+  --color-gds-orange-700: var(--gds-orange-700);
+  --color-gds-orange-800: var(--gds-orange-800);
+  --color-gds-orange-900: var(--gds-orange-900);
+  --color-gds-red: var(--gds-red);
+  --color-gds-red-50: var(--gds-red-50);
+  --color-gds-red-100: var(--gds-red-100);
+  --color-gds-red-200: var(--gds-red-200);
+  --color-gds-red-300: var(--gds-red-300);
+  --color-gds-red-400: var(--gds-red-400);
+  --color-gds-red-500: var(--gds-red-500);
+  --color-gds-red-600: var(--gds-red-600);
+  --color-gds-red-700: var(--gds-red-700);
+  --color-gds-red-800: var(--gds-red-800);
+  --color-gds-red-900: var(--gds-red-900);
+  --color-gds-teal: var(--gds-teal);
+  --color-gds-teal-50: var(--gds-teal-50);
+  --color-gds-teal-100: var(--gds-teal-100);
+  --color-gds-teal-200: var(--gds-teal-200);
+  --color-gds-teal-300: var(--gds-teal-300);
+  --color-gds-teal-400: var(--gds-teal-400);
+  --color-gds-teal-500: var(--gds-teal-500);
+  --color-gds-teal-600: var(--gds-teal-600);
+  --color-gds-teal-700: var(--gds-teal-700);
+  --color-gds-teal-800: var(--gds-teal-800);
+  --color-gds-teal-900: var(--gds-teal-900);
+  --color-gds-teal-950: var(--gds-teal-950);
+  --color-gds-navy: var(--gds-navy);
+  --color-gds-navy-50: var(--gds-navy-50);
+  --color-gds-navy-100: var(--gds-navy-100);
+  --color-gds-navy-200: var(--gds-navy-200);
+  --color-gds-navy-300: var(--gds-navy-300);
+  --color-gds-navy-400: var(--gds-navy-400);
+  --color-gds-navy-500: var(--gds-navy-500);
+  --color-gds-navy-600: var(--gds-navy-600);
+  --color-gds-navy-700: var(--gds-navy-700);
+  --color-gds-navy-800: var(--gds-navy-800);
+  --color-gds-navy-900: var(--gds-navy-900);
+  --color-gds-blue: var(--gds-blue);
+  --color-gds-blue-50: var(--gds-blue-50);
+  --color-gds-blue-100: var(--gds-blue-100);
+  --color-gds-blue-200: var(--gds-blue-200);
+  --color-gds-blue-300: var(--gds-blue-300);
+  --color-gds-blue-400: var(--gds-blue-400);
+  --color-gds-blue-500: var(--gds-blue-500);
+  --color-gds-blue-600: var(--gds-blue-600);
+  --color-gds-blue-700: var(--gds-blue-700);
+  --color-gds-blue-800: var(--gds-blue-800);
+  --color-gds-blue-900: var(--gds-blue-900);
+  --color-gds-gray-50: var(--gds-gray-50);
+  --color-gds-gray-100: var(--gds-gray-100);
+  --color-gds-gray-200: var(--gds-gray-200);
+  --color-gds-gray-300: var(--gds-gray-300);
+  --color-gds-gray-400: var(--gds-gray-400);
+  --color-gds-gray-500: var(--gds-gray-500);
+  --color-gds-gray-600: var(--gds-gray-600);
+  --color-gds-gray-700: var(--gds-gray-700);
+  --color-gds-gray-800: var(--gds-gray-800);
+  --color-gds-gray-900: var(--gds-gray-900);
+  --color-gds-gray-950: var(--gds-gray-950);
+  --color-gds-black: var(--gds-black);
+  --color-gds-white: var(--gds-white);
 
   /* -- Semantic roles — runtime vars hold bare "L C H" OKLCH triplets,
      wrapped with oklch() at use. Opacity shortcuts (bg-primary/50) come
@@ -830,6 +836,24 @@
   --gds-media-placeholder-bg: oklch(var(--muted));
   --gds-media-placeholder-fg: oklch(var(--muted-foreground));
 
+  /* Fidelity fade — how long a MediaSurface takes to cross-fade between
+     full imagery and the wireframe placeholder when `data-fidelity`
+     flips on an ancestor (Studio's toggle, an embed's `fidelity`
+     parameter). One knob, read by the "MediaSurface fidelity" rules
+     further down. */
+  --gds-media-fidelity-fade: 280ms;
+
+  /* Transparency checkerboard — the standard alpha backdrop drawn behind
+     image previews (Studio's inspector image well; anywhere else that
+     needs to say "these pixels are transparent"). Consumed as
+     `repeating-conic-gradient(var(--gds-media-checker-color) 0% 25%,
+     transparent 0% 50%)` sized by the size token. Mode-aware for free:
+     the colour rides on --muted-foreground at low alpha, so it reads as
+     grey/white in light mode and grey/dark in dark without a `.dark`
+     override. */
+  --gds-media-checker-color: oklch(var(--muted-foreground) / 0.16);
+  --gds-media-checker-size: 14px;
+
   /* Canvas fill — the standard backdrop behind a screen when it doesn't fill
      its frame: the letterbox bars in an embed/share, and the stage a
      `<ScreenAnimator>` reveals when it flies in or pulls below 1× zoom. One
@@ -840,6 +864,31 @@
      mode. Set it to `transparent` to let the host page show through. */
   --gds-canvas-fill: #e8e8ec;
 
+  /* Map marker chrome — the baseline "lift" every MapMarker child gets
+     so pin labels never melt into the tiles (see the map-marker rule
+     near the fidelity block). Map tiles are EXTERNAL imagery — they
+     don't ride the theme's surface tokens — so marker content needs
+     its own guaranteed separation in both modes: a 1px border + a soft
+     ambient shadow. Light mode: a slightly-darker-than---border line
+     reads against pale tiles. Dark mode override below flips to a
+     light hairline (a dark border on dark tiles lifts nothing). */
+  --gds-map-marker-border: oklch(var(--border));
+  --gds-map-marker-shadow: 0 1px 3px oklch(0 0 0 / 0.22),
+    0 0 0 1px oklch(0 0 0 / 0.05);
+  /* Halo behind floating map labels (the text-stroke that separates a
+     label from busy tiles). Mode-aware: a white halo reads on pale
+     light tiles; the dark-mode override flips it to near-black so a
+     light label on dark tiles isn't a white-on-white wash-out. Applied
+     via the `.gds-map-label` helper. */
+  --gds-map-label-halo: oklch(1 0 0);
+  /* Map canvas — the backing colour BEHIND the raster tiles. Leaflet's
+     default is `#dddddd`, so subpixel gaps between tiles flash light
+     "seams" over a dark basemap. Defaulting this to the tile base
+     colour (here, the CARTO voyager land tone) makes those gaps blend
+     away. Neutral on purpose: tint it and the seams come back as
+     coloured lines unless your tiles match. */
+  --gds-map-canvas: oklch(0.97 0.004 95);
+
   /* Sidebar knobs — the width pair drives the collapsed/expanded animation
      on `<Sidebar>` (compound nav primitive). Header height + section
      padding + per-section gap are exposed so consumers can retune density
@@ -851,6 +900,33 @@
   --gds-sidebar-section-px: 0.5rem;
   --gds-sidebar-section-gap: 0.125rem;
 
+  /* Property list knobs — <PropertyList> renders a single record as
+     label / value rows (a Table row transposed). The label column width
+     and the row/column rhythm are exposed so a dense inspector and an
+     airy settings page share one primitive. Read as
+     `var(--gds-property-list-* , <fallback>)` in the component, so a
+     missing stanza degrades gracefully. */
+  --gds-property-list-label-width: 8.5rem;
+  --gds-property-list-col-gap: 1rem;
+  --gds-property-list-row-gap: 0.625rem;
+  --gds-property-list-row-gap-compact: 0.375rem;
+  --gds-property-list-row-gap-relaxed: 1rem;
+  --gds-property-list-icon-size: 0.875rem;
+  --gds-property-list-label-color: oklch(var(--muted-foreground));
+  --gds-property-list-divider-color: oklch(var(--border));
+
+  /* Data view knobs — <DataView> draws one dataset as a table, cards, or a
+     grid. The card / grid tiles auto-fill, so these min column widths set
+     how many tiles sit per row at a given container width; the pinned and
+     header backgrounds back the sticky column / header so scrolled content
+     doesn't bleed through. */
+  --gds-data-view-card-min: 18rem;
+  --gds-data-view-grid-min: 11rem;
+  --gds-data-view-gap: 0.75rem;
+  --gds-data-view-pinned-bg: oklch(var(--background));
+  --gds-data-view-header-bg: oklch(var(--background));
+  --gds-data-view-table-max-h: 28rem; /* scroll height when stickyHeader is on */
+
   /* Carousel knobs — every visual dimension of <Carousel> is driven from
      this stanza so consumers can re-skin the slideshow (dot shape, arrow
      chrome, transition feel) without prop-drilling. The component reads
@@ -971,6 +1047,20 @@
      bars in embed/share/preview and the ScreenAnimator stage all match. */
   --gds-canvas-fill: #0b0b0e;
 
+  /* Map marker chrome — dark mode: a light hairline + deeper shadow.
+     Dark-mode pin surfaces (bg-card etc.) sit on dark tiles, so the
+     border has to be the bright element; the alpha keeps it a lift,
+     not a frame. */
+  --gds-map-marker-border: oklch(1 0 0 / 0.3);
+  --gds-map-marker-shadow: 0 1px 3px oklch(0 0 0 / 0.5),
+    0 0 0 1px oklch(0 0 0 / 0.4);
+  /* Dark-mode label halo — near-black so light labels stay legible on
+     dark tiles (mirror of the light-mode white halo above). */
+  --gds-map-label-halo: oklch(0.18 0 0);
+  /* Dark-mode map canvas — near-black to match the CARTO dark_all base,
+     so tile seams vanish on the dark basemap. */
+  --gds-map-canvas: oklch(0.17 0 0);
+
   /* Alert surface pairs — dark-mode variant: tint sits just above the dark
      background without going gray; deep text stays bright and readable. */
   --destructive-soft: 0.220 0.075 27;
@@ -1091,6 +1181,10 @@
     font-feature-settings: "rlig" 1, "calt" 1;
     font-size: var(--text-body);
     line-height: var(--text-body-line);
+    /* Theme-driven width cut (variable-font wdth axis). Inherits into
+       every span/component, so a theme set to e.g. 90% re-cuts ALL text;
+       per-element font-stretch-[…] utilities still override. */
+    font-stretch: var(--font-body-stretch, normal);
   }
 
   /* Theme-driven heading font.
@@ -1102,6 +1196,7 @@
     font-family: var(--font-display, var(--font-sans));
     font-weight: var(--font-heading-weight, 600);
     letter-spacing: var(--font-heading-tracking, -0.01em);
+    font-stretch: var(--font-display-stretch, var(--font-body-stretch, normal));
   }
 
   /* Link styles */
@@ -1221,9 +1316,6 @@
      style overrides like `style={{ "--btn-glow": "var(--warning)" }}`. */
   --btn-glow: var(--accent-glow, var(--selected-glow));
 
-  background-color: oklch(var(--secondary));
-  color: oklch(var(--secondary-foreground));
-
   box-shadow: var(--elevation-3);
 
   transition:
@@ -1232,6 +1324,17 @@
     background-color var(--gds-transition-base) var(--gds-ease-out);
 }
 
+/* Surface for the STANDALONE raised look. June 2026: raised became a
+   TRAIT (the `raised` prop on Button adds .gds-button-raised only, so
+   elevation + glow compose with ANY colour variant — raised primary,
+   raised outline). This companion class supplies the classic neutral
+   "key" surface and is applied only by the variant="raised" alias,
+   which is kept for back-compat. */
+.gds-button-raised-surface {
+  background-color: oklch(var(--secondary));
+  color: oklch(var(--secondary-foreground));
+}
+
 .gds-button-raised:hover {
   box-shadow: var(--elevation-hot);
 }
@@ -1578,6 +1681,114 @@
     0 0 var(--aura-ring-blur) 0 oklch(var(--aura-color) / calc(var(--aura-ring-alpha-max) * 0.4));
 }
 
+/* ============================================
+   MEDIASURFACE FIDELITY — data-fidelity on any ancestor
+   ============================================
+   The pure-CSS half of MediaSurface's filled/wireframe model. The
+   component keeps its tiered placeholder MOUNTED beneath a filled
+   image and stamps `data-filled` on it; these rules decide what's
+   visible. Flipping `data-fidelity="wireframe"` on ANY ancestor
+   (Studio's iframe root, an embed wrapper, a docs demo) cross-fades
+   imagery out and the placeholder back in — no React, so the toggle
+   works in static embeds and respects the data-motion="off" reset
+   above (transition collapses to 0.01ms).
+
+   Default (full fidelity): a filled slot hides its placeholder with
+   `visibility: hidden` — NOT unmount — so transparent imagery (logos
+   on alpha) never shows the glyph/`--gds-media-placeholder-bg`
+   through its pixels, while the layer stays in the DOM for this very
+   toggle. The `visibility` transition is delayed by the fade length
+   (the standard fade-then-hide pattern) so the placeholder finishes
+   fading before it stops hit-testing/painting. */
+[data-gds-part="media-surface-placeholder"][data-filled] {
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--gds-media-fidelity-fade, 280ms) ease,
+    visibility 0s linear var(--gds-media-fidelity-fade, 280ms);
+}
+[data-gds-part="media-surface-content"] {
+  transition: opacity var(--gds-media-fidelity-fade, 280ms) ease;
+}
+
+/* Wireframe: imagery fades out, placeholder fades back in. Content is
+   opacity-faded (not display-toggled) so the swap reads as a cross-fade;
+   pointer-events off so the invisible imagery can't intercept clicks. */
+[data-fidelity="wireframe"] [data-gds-part="media-surface-placeholder"][data-filled] {
+  opacity: 1;
+  visibility: visible;
+  transition-delay: 0s, 0s;
+}
+[data-fidelity="wireframe"] [data-gds-part="media-surface-content"] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* ============================================
+   MAP MARKER LIFT — every pin gets a border
+   ============================================
+   Map tiles are external imagery and don't follow the theme, so marker
+   content (Badge price pins, numbered markers, avatars) can melt into
+   them — illegible dark-on-dark pins were the symptom. Guarantee the
+   lift at the DS level: every DIRECT child of a MapMarker's content
+   wrapper gets a 1px border + ambient shadow from the mode-aware
+   `--gds-map-marker-*` pair (light hairline on dark tiles, dark line
+   on light). Being unlayered, this wins over a Badge's own
+   border-transparent utility — deliberate: the border is the floor,
+   not a suggestion. Backgrounds/text are NOT touched; content keeps
+   its own surface tokens. */
+[data-gds-part="map-marker-content"] > * {
+  border: 1px solid var(--gds-map-marker-border);
+  box-shadow: var(--gds-map-marker-shadow);
+}
+
+/* Floating map label halo — put this class on a text element inside a
+   MapMarker to give it a mode-aware outline (white on light tiles,
+   near-black on dark) instead of hard-coding a white text-stroke that
+   washes out in dark mode. Pairs with the `--gds-map-label-halo` token. */
+.gds-map-label {
+  -webkit-text-stroke: 1.5px var(--gds-map-label-halo);
+  paint-order: stroke;
+}
+
+/* Vendor font reset — Leaflet (`.leaflet-container`) and MapLibre
+   (`.maplibregl-map`) both hard-set `font-family` on their map
+   containers, which beats inheritance and strands marker content on
+   the vendor stack ("pins don't carry the custom font" — they can,
+   the vendor CSS was just in the way). Re-assert the theme stack at
+   the marker-content boundary so Badges/Cards inside pins type-match
+   the rest of the screen, including custom uploaded faces riding
+   `--font-sans`. */
+[data-gds-part="map-marker-content"] {
+  font-family: var(--font-sans);
+}
+
+/* Vendor z-index neutralizer — Leaflet's stylesheet sets `z-index: 200`
+   on every `<svg>` inside the map. That hijacks an inline SVG used as
+   marker content (e.g. a pin shield) and paints it ABOVE later sibling
+   DOM — so a count/label sitting on top of the shield vanishes behind
+   it. The Mapbox/MapLibre/Google adapters have no such rule, so the
+   same marker markup renders fine there; this made pins look provider-
+   dependent ("numbers show on Mapbox, not Leaflet"). Reset marker SVGs
+   to `z-index: auto` so author paint order (DOM order) holds on every
+   provider. `!important` to beat Leaflet's vendor selector. */
+[data-gds-part="map-marker-content"] svg {
+  z-index: auto !important;
+}
+
+/* Map canvas backing — sits behind the tiles so Leaflet's default
+   `#dddddd` no longer flashes through the subpixel gaps between raster
+   tiles ("seams"), most visible on a dark basemap. Harmless on the GL
+   providers (their opaque canvas covers it). Mode-aware via the token.
+   NB the selector is compounded with `[data-gds-part="map"]` on purpose:
+   Leaflet stamps `.leaflet-container` (which sets `background:#ddd`) onto
+   the SAME element, and its stylesheet loads after ours — a bare
+   `.gds-map` ties on specificity and loses. The data-part attribute
+   (present on every provider's root) lifts us above Leaflet's default. */
+.gds-map[data-gds-part="map"] {
+  background-color: var(--gds-map-canvas);
+}
+
 /* ============================================
    STREAM-IN — data-gds-streaming on <html>
    ============================================