photon-grid-core 2.0.1 → 2.0.5

package/styles/base/touch.css.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Photon Grid base styles — touch / coarse-pointer section.
+ *
+ * Auto-split style module (see base-styles.ts). Everything here supports touch
+ * input:
+ *
+ *  1. `touch-action` declarations that let the JS pointer handlers own their
+ *     gestures instead of the browser's native scroll/zoom. The grid scrolls via
+ *     transform (not native overflow), so finger panning is synthesized in
+ *     `ScrollController`; `touch-action: none` on the scroll surfaces stops the
+ *     browser from hijacking the drag and cancelling the pointer stream.
+ *  2. `@media (pointer: coarse)` overrides that grow the resize / drag / fill
+ *     handles from mouse-sized (2–6px) targets to finger-sized ones.
+ *
+ * `touch-action` is intentionally scoped to the header and the cell panel bodies
+ * (`.pg-panel__body`) — NOT the whole `.pg-grid__body`. Overlay children that
+ * scroll natively (the AI panel, editor dropdowns) are siblings of the panels,
+ * so this leaves their native scrolling intact.
+ *
+ * All colors come from theme tokens; no hardcoded palette values.
+ */
+export declare const touchCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Touch / coarse pointer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Scroll surfaces: suppress native pan/zoom so JS panning owns the gesture. */\n.pg-grid__header,\n.pg-panel__body { touch-action: none; }\n\n/* Interactive handles own their own drag \u2014 never let a touch on them scroll. */\n.pg-th__resize-handle,\n.pg-th__resize-handle--group,\n[data-row-drag],\n[data-detail-resize-handle],\n.pg-fill-handle { touch-action: none; }\n\n/* Column header \"picked up\" via long-press (touch reorder). */\n.pg-th--drag-armed {\n  background: var(--pg-colors-row-selected, rgba(37, 99, 235, 0.08));\n  cursor: grabbing;\n}\n\n/* \u2500\u2500 Finger-sized hit targets \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Coarse pointers (touch) get enlarged, transparent hit areas; the visible\n   affordance (a thin line / small square) is preserved via ::after or the\n   existing box so the look is unchanged on desktop. */\n@media (pointer: coarse) {\n  /* Column resize handle: widen the invisible grab zone, keep a thin visual line. */\n  .pg-th__resize-handle {\n    width: 18px;\n    right: -9px;\n    background: transparent;\n  }\n  .pg-th--pinned-right .pg-th__resize-handle {\n    left: -9px;\n    right: auto;\n  }\n  .pg-th__resize-handle::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 50%;\n    width: 2px;\n    transform: translateX(-50%);\n    background: var(--pg-colors-resize-handle-color, #d9d9db);\n  }\n\n  /* Row drag handle: larger and more visible for fingers. */\n  .pg-row-drag-handle {\n    width: 32px;\n    opacity: 0.6;\n  }\n\n  /* Fill handle: grow the corner target so it can be grabbed with a finger. */\n  .pg-fill-handle {\n    width: 14px;\n    height: 14px;\n  }\n\n  /* Master/Detail bottom-edge resize handle: taller grab strip. */\n  [data-detail-resize-handle] {\n    min-height: 16px;\n  }\n}\n";
+//# sourceMappingURL=touch.css.d.ts.map

package/styles/base/touch.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"touch.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/touch.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,QAAQ,gxEA8DpB,CAAC"}

package/styles/base/touch.css.js

@@ -0,0 +1,85 @@
+/**
+ * Photon Grid base styles — touch / coarse-pointer section.
+ *
+ * Auto-split style module (see base-styles.ts). Everything here supports touch
+ * input:
+ *
+ *  1. `touch-action` declarations that let the JS pointer handlers own their
+ *     gestures instead of the browser's native scroll/zoom. The grid scrolls via
+ *     transform (not native overflow), so finger panning is synthesized in
+ *     `ScrollController`; `touch-action: none` on the scroll surfaces stops the
+ *     browser from hijacking the drag and cancelling the pointer stream.
+ *  2. `@media (pointer: coarse)` overrides that grow the resize / drag / fill
+ *     handles from mouse-sized (2–6px) targets to finger-sized ones.
+ *
+ * `touch-action` is intentionally scoped to the header and the cell panel bodies
+ * (`.pg-panel__body`) — NOT the whole `.pg-grid__body`. Overlay children that
+ * scroll natively (the AI panel, editor dropdowns) are siblings of the panels,
+ * so this leaves their native scrolling intact.
+ *
+ * All colors come from theme tokens; no hardcoded palette values.
+ */
+export const touchCss = `/* ──────────────────── Touch / coarse pointer ──────────────────── */
+
+/* Scroll surfaces: suppress native pan/zoom so JS panning owns the gesture. */
+.pg-grid__header,
+.pg-panel__body { touch-action: none; }
+
+/* Interactive handles own their own drag — never let a touch on them scroll. */
+.pg-th__resize-handle,
+.pg-th__resize-handle--group,
+[data-row-drag],
+[data-detail-resize-handle],
+.pg-fill-handle { touch-action: none; }
+
+/* Column header "picked up" via long-press (touch reorder). */
+.pg-th--drag-armed {
+  background: var(--pg-colors-row-selected, rgba(37, 99, 235, 0.08));
+  cursor: grabbing;
+}
+
+/* ── Finger-sized hit targets ─────────────────────────────────────────────
+   Coarse pointers (touch) get enlarged, transparent hit areas; the visible
+   affordance (a thin line / small square) is preserved via ::after or the
+   existing box so the look is unchanged on desktop. */
+@media (pointer: coarse) {
+  /* Column resize handle: widen the invisible grab zone, keep a thin visual line. */
+  .pg-th__resize-handle {
+    width: 18px;
+    right: -9px;
+    background: transparent;
+  }
+  .pg-th--pinned-right .pg-th__resize-handle {
+    left: -9px;
+    right: auto;
+  }
+  .pg-th__resize-handle::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: 2px;
+    transform: translateX(-50%);
+    background: var(--pg-colors-resize-handle-color, #d9d9db);
+  }
+
+  /* Row drag handle: larger and more visible for fingers. */
+  .pg-row-drag-handle {
+    width: 32px;
+    opacity: 0.6;
+  }
+
+  /* Fill handle: grow the corner target so it can be grabbed with a finger. */
+  .pg-fill-handle {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* Master/Detail bottom-edge resize handle: taller grab strip. */
+  [data-detail-resize-handle] {
+    min-height: 16px;
+  }
+}
+`;
+//# sourceMappingURL=touch.css.js.map

package/styles/base/touch.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"touch.css.js","sourceRoot":"","sources":["../../../src/styles/base/touch.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DvB,CAAC"}

package/styles/base-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-styles.d.ts","sourceRoot":"","sources":["../../src/styles/base-styles.ts"],"names":[],"mappings":"AAwEA,wBAAgB,gBAAgB,IAAI,IAAI,CAMvC;AAED,wBAAgB,gBAAgB,IAAI,IAAI,CAEvC"}
+{"version":3,"file":"base-styles.d.ts","sourceRoot":"","sources":["../../src/styles/base-styles.ts"],"names":[],"mappings":"AA+EA,wBAAgB,gBAAgB,IAAI,IAAI,CAMvC;AAED,wBAAgB,gBAAgB,IAAI,IAAI,CAEvC"}

package/styles/base-styles.js

@@ -2,7 +2,6 @@ import { themeQuartzCss } from './themes/theme-quartz';
 import { themeAlpineCss } from './themes/theme-alpine';
 import { themeBalhamCss } from './themes/theme-balham';
 import { themeMaterialCss } from './themes/theme-material';
-import { themeDarkCss } from './themes/theme-dark';
 // Base styles are authored as focused per-feature modules under ./base/ for
 // maintainability, then concatenated here in a FIXED order. The order matters:
 // CSS cascade resolves same-specificity conflicts by source order, so these
@@ -33,6 +32,8 @@ import { photonAiCss } from './base/photon-ai.css';
 import { tooltipCss } from './base/tooltip.css';
 import { chartConfigCss } from './base/chart-config.css';
 import { chartControlsCss } from './base/chart-controls.css';
+import { columnChooserCss } from './base/column-chooser.css';
+import { touchCss } from './base/touch.css';
 const STYLE_ID = 'photon-grid-base-styles';
 // Joined with '' (not '\n') so the output is byte-identical to the original
 // single template: each module already carries its own leading/trailing
@@ -63,8 +64,14 @@ const baseCss = [
     tooltipCss,
     chartConfigCss,
     chartControlsCss,
+    columnChooserCss,
+    touchCss,
 ].join('');
-const css = [baseCss, themeQuartzCss, themeAlpineCss, themeBalhamCss, themeMaterialCss, themeDarkCss].join('\n');
+// Variant skins are appended after the base rules. Each is a cosmetic layer
+// (density, radii, typography, accent) that composes with either color mode;
+// the light/dark palettes themselves are injected as tokens by ThemeManager,
+// so no class-based dark skin is bundled here.
+const css = [baseCss, themeQuartzCss, themeAlpineCss, themeBalhamCss, themeMaterialCss].join('\n');
 export function injectBaseStyles() {
     if (document.getElementById(STYLE_ID))
         return;

package/styles/base-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-styles.js","sourceRoot":"","sources":["../../src/styles/base-styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"base-styles.js","sourceRoot":"","sources":["../../src/styles/base-styles.ts"],"names":[],"mappings":"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"}

package/styles/themes/theme-alpine.d.ts

@@ -1,2 +1,10 @@
-export declare const themeAlpineCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-alpine-theme variables \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-alpine-theme .pg-grid {\n  --pg-colors-border: #e5e7eb;\n  --pg-colors-header-background: #ffffff;\n  --pg-colors-header-border: #e5e7eb;\n  --pg-colors-header-text: #374151;\n  --pg-colors-row-background: #ffffff;\n  --pg-colors-row-alt-background: #fafafa;\n  --pg-colors-row-hover: #f0fdf4;\n  --pg-colors-row-selected: #dcfce7;\n  --pg-colors-row-selected-hover: #bbf7d0;\n  --pg-colors-text-primary: #111827;\n  --pg-colors-text-secondary: #6b7280;\n  --pg-colors-text-muted: #9ca3af;\n  --pg-colors-text-disabled: #d1d5db;\n  --pg-colors-primary: #16a34a;\n  --pg-colors-filter-background: #ffffff;\n  --pg-colors-scrollbar-bg: #f9fafb;\n  --pg-colors-badge-background: #dcfce7;\n  --pg-colors-badge-text: #166534;\n  --pg-colors-resize-handle-color: #d1d5db;\n\n  --pg-typography-font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;\n  --pg-typography-font-size-md: 0.8rem;\n  --pg-typography-font-size-sm: 12px;\n  --pg-typography-font-size-xs: 11px;\n  --pg-typography-font-weight-medium: 400;\n  --pg-typography-font-weight-semi-bold: 600;\n  --pg-typography-letter-spacing-wide: 0em;\n\n  --pg-header-row-height: 42px;\n  --pg-row-height: 40px;\n  --pg-borders-radius-md: 4px;\n  --pg-borders-radius-sm: 2px;\n  --pg-borders-radius-pill: 9999px;\n  --pg-transitions-duration-fast: 100ms;\n  --pg-sizing-checkbox-size: 15px;\n}\n\n/* Alpine header \u2014 no uppercase, clean weight */\n.pg-alpine-theme .pg-th {\n  text-transform: none;\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: 0em;\n  color: #374151;\n}\n.pg-alpine-theme .pg-th--sorted { color: #16a34a; }\n.pg-alpine-theme .pg-grid__header { border-bottom: 2px solid #e5e7eb; }\n\n/* Alpine rows \u2014 thin full-width divider */\n.pg-alpine-theme .pg-row { border-bottom: 1px solid #f3f4f6; }\n\n/* Alpine icon tones */\n.pg-alpine-theme .pg-icon { color: #6b7280; }\n.pg-alpine-theme .pg-th--sorted .pg-icon { color: #16a34a; }\n.pg-alpine-theme .pg-row-drag-handle { color: #9ca3af; }\n\n/* Alpine checkbox \u2014 15px, 2px-radius, slim green outline \u2192 fill */\n.pg-alpine-theme .pg-checkbox {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 15px;\n  height: 15px;\n  border: 1.5px solid #d1d5db;\n  border-radius: 2px;\n  background: #fff;\n  cursor: pointer;\n  position: relative;\n  flex-shrink: 0;\n  transition: background 100ms linear, border-color 100ms linear;\n}\n.pg-alpine-theme .pg-checkbox:hover { border-color: #16a34a; }\n.pg-alpine-theme .pg-checkbox:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px rgba(22,163,74,0.3);\n}\n.pg-alpine-theme .pg-checkbox:checked {\n  background: #16a34a;\n  border-color: #16a34a;\n}\n.pg-alpine-theme .pg-checkbox:checked::after {\n  content: '';\n  position: absolute;\n  left: 3px;\n  top: 1px;\n  width: 5px;\n  height: 8px;\n  border: 1.5px solid #fff;\n  border-top: none;\n  border-left: none;\n  transform: rotate(45deg);\n}\n.pg-alpine-theme .pg-checkbox:indeterminate {\n  background: #16a34a;\n  border-color: #16a34a;\n}\n.pg-alpine-theme .pg-checkbox:indeterminate::after {\n  content: '';\n  position: absolute;\n  left: 2px;\n  top: 50%;\n  width: 7px;\n  height: 1.5px;\n  background: #fff;\n  transform: translateY(-50%);\n}\n\n/* Alpine selection \u2014 clean green underline */\n.pg-alpine-theme .pg-row--selected { box-shadow: inset 2px 0 0 #16a34a; }\n\n/* Alpine row-drag animation \u2014 snappy, fast linear */\n.pg-alpine-theme .pg-grid--row-dragging .pg-row {\n  transition: background 100ms linear, top 100ms ease-out;\n}\n";
+/**
+ * pg-alpine-theme — clean, minimal (emerald accent).
+ *
+ * Cosmetic variant layered on the active mode (light/dark). Overrides only
+ * density, radii, typography, accent and motion; base colors come from the
+ * mode tokens so it works in both light and dark. See {@link themeQuartzCss}
+ * for the shared design rationale.
+ */
+export declare const themeAlpineCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-alpine-theme: structural + accent tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-alpine-theme .pg-grid {\n  --pg-colors-primary: #16a34a;\n\n  --pg-typography-font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;\n  --pg-typography-font-size-md: 0.8rem;\n  --pg-typography-font-size-sm: 12px;\n  --pg-typography-font-size-xs: 11px;\n  --pg-typography-font-weight-medium: 400;\n  --pg-typography-font-weight-semi-bold: 600;\n  --pg-typography-letter-spacing-wide: 0em;\n\n  --pg-header-row-height: 42px;\n  --pg-row-height: 40px;\n\n  --pg-borders-radius-md: 4px;\n  --pg-borders-radius-sm: 2px;\n  --pg-borders-radius-pill: 9999px;\n  --pg-sizing-checkbox-size: 15px;\n\n  --pg-transitions-duration-fast: 100ms;\n}\n\n/* Alpine header \u2014 no uppercase, clean weight; color follows the mode. */\n.pg-alpine-theme .pg-th {\n  text-transform: none;\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: 0em;\n  color: var(--pg-colors-header-text);\n}\n.pg-alpine-theme .pg-th--sorted { color: var(--pg-colors-primary); }\n.pg-alpine-theme .pg-grid__header { border-bottom: 2px solid var(--pg-colors-header-border); }\n\n/* Alpine rows \u2014 thin full-width divider */\n.pg-alpine-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }\n\n/* Alpine icon tones \u2014 mode-aware */\n.pg-alpine-theme .pg-icon { color: var(--pg-colors-text-secondary); }\n.pg-alpine-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }\n.pg-alpine-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }\n\n/* Alpine checkbox \u2014 15px, 2px-radius, slim accent outline \u2192 fill */\n.pg-alpine-theme .pg-checkbox {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 15px;\n  height: 15px;\n  border: 1.5px solid var(--pg-colors-checkbox-border);\n  border-radius: 2px;\n  background: var(--pg-colors-checkbox-background);\n  cursor: pointer;\n  position: relative;\n  flex-shrink: 0;\n  transition: background 100ms linear, border-color 100ms linear;\n}\n.pg-alpine-theme .pg-checkbox:hover { border-color: var(--pg-colors-primary); }\n.pg-alpine-theme .pg-checkbox:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pg-colors-primary) 30%, transparent);\n}\n.pg-alpine-theme .pg-checkbox:checked {\n  background: var(--pg-colors-primary);\n  border-color: var(--pg-colors-primary);\n}\n.pg-alpine-theme .pg-checkbox:checked::after {\n  content: '';\n  position: absolute;\n  left: 3px;\n  top: 1px;\n  width: 5px;\n  height: 8px;\n  border: 1.5px solid var(--pg-colors-primary-text);\n  border-top: none;\n  border-left: none;\n  transform: rotate(45deg);\n}\n.pg-alpine-theme .pg-checkbox:indeterminate {\n  background: var(--pg-colors-primary);\n  border-color: var(--pg-colors-primary);\n}\n.pg-alpine-theme .pg-checkbox:indeterminate::after {\n  content: '';\n  position: absolute;\n  left: 2px;\n  top: 50%;\n  width: 7px;\n  height: 1.5px;\n  background: var(--pg-colors-primary-text);\n  transform: translateY(-50%);\n}\n\n/* Alpine selection \u2014 clean accent left bar */\n.pg-alpine-theme .pg-row--selected { box-shadow: inset 2px 0 0 var(--pg-colors-primary); }\n\n/* Alpine row-drag animation \u2014 snappy, fast linear */\n.pg-alpine-theme .pg-grid--row-dragging .pg-row {\n  transition: background 100ms linear, top 100ms ease-out;\n}\n";
 //# sourceMappingURL=theme-alpine.d.ts.map

package/styles/themes/theme-alpine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-alpine.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-alpine.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,cAAc,opHAqH1B,CAAC"}
+{"version":3,"file":"theme-alpine.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-alpine.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,y5GAqG1B,CAAC"}

package/styles/themes/theme-alpine.js

@@ -1,27 +1,16 @@
-/* pg-alpine-theme — clean, minimal, emerald green */
+/**
+ * pg-alpine-theme — clean, minimal (emerald accent).
+ *
+ * Cosmetic variant layered on the active mode (light/dark). Overrides only
+ * density, radii, typography, accent and motion; base colors come from the
+ * mode tokens so it works in both light and dark. See {@link themeQuartzCss}
+ * for the shared design rationale.
+ */
 export const themeAlpineCss = `
 
-/* ──────────── pg-alpine-theme variables ──────────── */
+/* ──────────── pg-alpine-theme: structural + accent tokens ──────────── */
 .pg-alpine-theme .pg-grid {
-  --pg-colors-border: #e5e7eb;
-  --pg-colors-header-background: #ffffff;
-  --pg-colors-header-border: #e5e7eb;
-  --pg-colors-header-text: #374151;
-  --pg-colors-row-background: #ffffff;
-  --pg-colors-row-alt-background: #fafafa;
-  --pg-colors-row-hover: #f0fdf4;
-  --pg-colors-row-selected: #dcfce7;
-  --pg-colors-row-selected-hover: #bbf7d0;
-  --pg-colors-text-primary: #111827;
-  --pg-colors-text-secondary: #6b7280;
-  --pg-colors-text-muted: #9ca3af;
-  --pg-colors-text-disabled: #d1d5db;
   --pg-colors-primary: #16a34a;
-  --pg-colors-filter-background: #ffffff;
-  --pg-colors-scrollbar-bg: #f9fafb;
-  --pg-colors-badge-background: #dcfce7;
-  --pg-colors-badge-text: #166534;
-  --pg-colors-resize-handle-color: #d1d5db;
 
   --pg-typography-font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
   --pg-typography-font-size-md: 0.8rem;
@@ -33,54 +22,56 @@ export const themeAlpineCss = `
 
   --pg-header-row-height: 42px;
   --pg-row-height: 40px;
+
   --pg-borders-radius-md: 4px;
   --pg-borders-radius-sm: 2px;
   --pg-borders-radius-pill: 9999px;
-  --pg-transitions-duration-fast: 100ms;
   --pg-sizing-checkbox-size: 15px;
+
+  --pg-transitions-duration-fast: 100ms;
 }
 
-/* Alpine header — no uppercase, clean weight */
+/* Alpine header — no uppercase, clean weight; color follows the mode. */
 .pg-alpine-theme .pg-th {
   text-transform: none;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0em;
-  color: #374151;
+  color: var(--pg-colors-header-text);
 }
-.pg-alpine-theme .pg-th--sorted { color: #16a34a; }
-.pg-alpine-theme .pg-grid__header { border-bottom: 2px solid #e5e7eb; }
+.pg-alpine-theme .pg-th--sorted { color: var(--pg-colors-primary); }
+.pg-alpine-theme .pg-grid__header { border-bottom: 2px solid var(--pg-colors-header-border); }
 
 /* Alpine rows — thin full-width divider */
-.pg-alpine-theme .pg-row { border-bottom: 1px solid #f3f4f6; }
+.pg-alpine-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }
 
-/* Alpine icon tones */
-.pg-alpine-theme .pg-icon { color: #6b7280; }
-.pg-alpine-theme .pg-th--sorted .pg-icon { color: #16a34a; }
-.pg-alpine-theme .pg-row-drag-handle { color: #9ca3af; }
+/* Alpine icon tones — mode-aware */
+.pg-alpine-theme .pg-icon { color: var(--pg-colors-text-secondary); }
+.pg-alpine-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }
+.pg-alpine-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }
 
-/* Alpine checkbox — 15px, 2px-radius, slim green outline → fill */
+/* Alpine checkbox — 15px, 2px-radius, slim accent outline → fill */
 .pg-alpine-theme .pg-checkbox {
   appearance: none;
   -webkit-appearance: none;
   width: 15px;
   height: 15px;
-  border: 1.5px solid #d1d5db;
+  border: 1.5px solid var(--pg-colors-checkbox-border);
   border-radius: 2px;
-  background: #fff;
+  background: var(--pg-colors-checkbox-background);
   cursor: pointer;
   position: relative;
   flex-shrink: 0;
   transition: background 100ms linear, border-color 100ms linear;
 }
-.pg-alpine-theme .pg-checkbox:hover { border-color: #16a34a; }
+.pg-alpine-theme .pg-checkbox:hover { border-color: var(--pg-colors-primary); }
 .pg-alpine-theme .pg-checkbox:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(22,163,74,0.3);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pg-colors-primary) 30%, transparent);
 }
 .pg-alpine-theme .pg-checkbox:checked {
-  background: #16a34a;
-  border-color: #16a34a;
+  background: var(--pg-colors-primary);
+  border-color: var(--pg-colors-primary);
 }
 .pg-alpine-theme .pg-checkbox:checked::after {
   content: '';
@@ -89,14 +80,14 @@ export const themeAlpineCss = `
   top: 1px;
   width: 5px;
   height: 8px;
-  border: 1.5px solid #fff;
+  border: 1.5px solid var(--pg-colors-primary-text);
   border-top: none;
   border-left: none;
   transform: rotate(45deg);
 }
 .pg-alpine-theme .pg-checkbox:indeterminate {
-  background: #16a34a;
-  border-color: #16a34a;
+  background: var(--pg-colors-primary);
+  border-color: var(--pg-colors-primary);
 }
 .pg-alpine-theme .pg-checkbox:indeterminate::after {
   content: '';
@@ -105,12 +96,12 @@ export const themeAlpineCss = `
   top: 50%;
   width: 7px;
   height: 1.5px;
-  background: #fff;
+  background: var(--pg-colors-primary-text);
   transform: translateY(-50%);
 }
 
-/* Alpine selection — clean green underline */
-.pg-alpine-theme .pg-row--selected { box-shadow: inset 2px 0 0 #16a34a; }
+/* Alpine selection — clean accent left bar */
+.pg-alpine-theme .pg-row--selected { box-shadow: inset 2px 0 0 var(--pg-colors-primary); }
 
 /* Alpine row-drag animation — snappy, fast linear */
 .pg-alpine-theme .pg-grid--row-dragging .pg-row {

package/styles/themes/theme-alpine.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-alpine.js","sourceRoot":"","sources":["../../../src/styles/themes/theme-alpine.ts"],"names":[],"mappings":"AAAA,qDAAqD;AACrD,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqH7B,CAAC"}
+{"version":3,"file":"theme-alpine.js","sourceRoot":"","sources":["../../../src/styles/themes/theme-alpine.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqG7B,CAAC"}

package/styles/themes/theme-balham.d.ts

@@ -1,2 +1,10 @@
-export declare const themeBalhamCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-balham-theme variables \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-balham-theme .pg-grid {\n  --pg-colors-border: #d1d5db;\n  --pg-colors-header-background: #f3f4f6;\n  --pg-colors-header-border: #d1d5db;\n  --pg-colors-header-text: #374151;\n  --pg-colors-row-background: #ffffff;\n  --pg-colors-row-alt-background: #f9fafb;\n  --pg-colors-row-hover: #fef3c7;\n  --pg-colors-row-selected: #fffbeb;\n  --pg-colors-row-selected-hover: #fef08a;\n  --pg-colors-text-primary: #111827;\n  --pg-colors-text-secondary: #6b7280;\n  --pg-colors-text-muted: #9ca3af;\n  --pg-colors-text-disabled: #d1d5db;\n  --pg-colors-primary: #d97706;\n  --pg-colors-filter-background: #ffffff;\n  --pg-colors-scrollbar-bg: #f3f4f6;\n  --pg-colors-badge-background: #fef3c7;\n  --pg-colors-badge-text: #92400e;\n  --pg-colors-resize-handle-color: #d1d5db;\n\n  --pg-typography-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n  --pg-typography-font-size-sm: 11px;\n  --pg-typography-font-size-xs: 10px;\n  --pg-typography-font-weight-medium: 400;\n  --pg-typography-font-weight-semi-bold: 600;\n  --pg-typography-letter-spacing-wide: 0.04em;\n\n  --pg-header-row-height: 36px;\n  --pg-row-height: 32px;\n  --pg-borders-radius-md: 2px;\n  --pg-borders-radius-sm: 0px;\n  --pg-borders-radius-pill: 2px;\n  --pg-transitions-duration-fast: 80ms;\n  --pg-sizing-checkbox-size: 14px;\n}\n\n/* Balham header \u2014 dense, uppercase, pronounced border */\n.pg-balham-theme .pg-th {\n  text-transform: uppercase;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  color: #374151;\n}\n.pg-balham-theme .pg-th--sorted { color: #d97706; }\n.pg-balham-theme .pg-grid__header { border-bottom: 2px solid #d1d5db; }\n\n/* Balham rows \u2014 full row border, classic spreadsheet look */\n.pg-balham-theme .pg-row { border-bottom: 1px solid #e5e7eb; }\n\n/* Balham icon tones \u2014 warmer grays */\n.pg-balham-theme .pg-icon { color: #6b7280; }\n.pg-balham-theme .pg-th--sorted .pg-icon { color: #d97706; }\n.pg-balham-theme .pg-row-drag-handle { color: #9ca3af; }\n\n/* Balham checkbox \u2014 14px, square (0 radius), flat amber fill */\n.pg-balham-theme .pg-checkbox {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 14px;\n  height: 14px;\n  border: 1px solid #9ca3af;\n  border-radius: 0px;\n  background: #fff;\n  cursor: pointer;\n  position: relative;\n  flex-shrink: 0;\n  transition: background 80ms linear, border-color 80ms linear;\n}\n.pg-balham-theme .pg-checkbox:hover { border-color: #d97706; }\n.pg-balham-theme .pg-checkbox:focus-visible {\n  outline: 1px solid #d97706;\n  outline-offset: 1px;\n}\n.pg-balham-theme .pg-checkbox:checked {\n  background: #d97706;\n  border-color: #d97706;\n}\n.pg-balham-theme .pg-checkbox:checked::after {\n  content: '';\n  position: absolute;\n  left: 3px;\n  top: 1px;\n  width: 5px;\n  height: 8px;\n  border: 2px solid #fff;\n  border-top: none;\n  border-left: none;\n  transform: rotate(45deg);\n}\n.pg-balham-theme .pg-checkbox:indeterminate {\n  background: #d97706;\n  border-color: #d97706;\n}\n.pg-balham-theme .pg-checkbox:indeterminate::after {\n  content: '';\n  position: absolute;\n  left: 2px;\n  top: 50%;\n  width: 8px;\n  height: 2px;\n  background: #fff;\n  transform: translateY(-50%);\n}\n\n/* Balham selection \u2014 amber left accent bar */\n.pg-balham-theme .pg-row--selected { box-shadow: inset 3px 0 0 #d97706; }\n\n/* Balham row-drag \u2014 very fast, minimal */\n.pg-balham-theme .pg-grid--row-dragging .pg-row {\n  transition: background 80ms linear, top 80ms linear;\n}\n";
+/**
+ * pg-balham-theme — compact, professional (amber accent).
+ *
+ * Cosmetic variant layered on the active mode (light/dark). Overrides only
+ * density, radii, typography, accent and motion; base colors come from the
+ * mode tokens so it works in both light and dark. See {@link themeQuartzCss}
+ * for the shared design rationale.
+ */
+export declare const themeBalhamCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-balham-theme: structural + accent tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-balham-theme .pg-grid {\n  --pg-colors-primary: #d97706;\n\n  --pg-typography-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n  --pg-typography-font-size-sm: 11px;\n  --pg-typography-font-size-xs: 10px;\n  --pg-typography-font-weight-medium: 400;\n  --pg-typography-font-weight-semi-bold: 600;\n  --pg-typography-letter-spacing-wide: 0.04em;\n\n  --pg-header-row-height: 36px;\n  --pg-row-height: 32px;\n\n  --pg-borders-radius-md: 2px;\n  --pg-borders-radius-sm: 0px;\n  --pg-borders-radius-pill: 2px;\n  --pg-sizing-checkbox-size: 14px;\n\n  --pg-transitions-duration-fast: 80ms;\n}\n\n/* Balham header \u2014 dense, uppercase, pronounced border; color follows the mode. */\n.pg-balham-theme .pg-th {\n  text-transform: uppercase;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  color: var(--pg-colors-header-text);\n}\n.pg-balham-theme .pg-th--sorted { color: var(--pg-colors-primary); }\n.pg-balham-theme .pg-grid__header { border-bottom: 2px solid var(--pg-colors-header-border); }\n\n/* Balham rows \u2014 full row border, classic spreadsheet look */\n.pg-balham-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }\n\n/* Balham icon tones \u2014 mode-aware */\n.pg-balham-theme .pg-icon { color: var(--pg-colors-text-secondary); }\n.pg-balham-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }\n.pg-balham-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }\n\n/* Balham checkbox \u2014 14px, square (0 radius), flat accent fill */\n.pg-balham-theme .pg-checkbox {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 14px;\n  height: 14px;\n  border: 1px solid var(--pg-colors-checkbox-border);\n  border-radius: 0px;\n  background: var(--pg-colors-checkbox-background);\n  cursor: pointer;\n  position: relative;\n  flex-shrink: 0;\n  transition: background 80ms linear, border-color 80ms linear;\n}\n.pg-balham-theme .pg-checkbox:hover { border-color: var(--pg-colors-primary); }\n.pg-balham-theme .pg-checkbox:focus-visible {\n  outline: 1px solid var(--pg-colors-primary);\n  outline-offset: 1px;\n}\n.pg-balham-theme .pg-checkbox:checked {\n  background: var(--pg-colors-primary);\n  border-color: var(--pg-colors-primary);\n}\n.pg-balham-theme .pg-checkbox:checked::after {\n  content: '';\n  position: absolute;\n  left: 3px;\n  top: 1px;\n  width: 5px;\n  height: 8px;\n  border: 2px solid var(--pg-colors-primary-text);\n  border-top: none;\n  border-left: none;\n  transform: rotate(45deg);\n}\n.pg-balham-theme .pg-checkbox:indeterminate {\n  background: var(--pg-colors-primary);\n  border-color: var(--pg-colors-primary);\n}\n.pg-balham-theme .pg-checkbox:indeterminate::after {\n  content: '';\n  position: absolute;\n  left: 2px;\n  top: 50%;\n  width: 8px;\n  height: 2px;\n  background: var(--pg-colors-primary-text);\n  transform: translateY(-50%);\n}\n\n/* Balham selection \u2014 amber left accent bar */\n.pg-balham-theme .pg-row--selected { box-shadow: inset 3px 0 0 var(--pg-colors-primary); }\n\n/* Balham row-drag \u2014 very fast, minimal */\n.pg-balham-theme .pg-grid--row-dragging .pg-row {\n  transition: background 80ms linear, top 80ms linear;\n}\n";
 //# sourceMappingURL=theme-balham.d.ts.map

package/styles/themes/theme-balham.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-balham.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-balham.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,cAAc,umHAoH1B,CAAC"}
+{"version":3,"file":"theme-balham.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-balham.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,+zGAoG1B,CAAC"}

package/styles/themes/theme-balham.js

@@ -1,27 +1,16 @@
-/* pg-balham-theme — compact, professional, amber accent */
+/**
+ * pg-balham-theme — compact, professional (amber accent).
+ *
+ * Cosmetic variant layered on the active mode (light/dark). Overrides only
+ * density, radii, typography, accent and motion; base colors come from the
+ * mode tokens so it works in both light and dark. See {@link themeQuartzCss}
+ * for the shared design rationale.
+ */
 export const themeBalhamCss = `
 
-/* ──────────── pg-balham-theme variables ──────────── */
+/* ──────────── pg-balham-theme: structural + accent tokens ──────────── */
 .pg-balham-theme .pg-grid {
-  --pg-colors-border: #d1d5db;
-  --pg-colors-header-background: #f3f4f6;
-  --pg-colors-header-border: #d1d5db;
-  --pg-colors-header-text: #374151;
-  --pg-colors-row-background: #ffffff;
-  --pg-colors-row-alt-background: #f9fafb;
-  --pg-colors-row-hover: #fef3c7;
-  --pg-colors-row-selected: #fffbeb;
-  --pg-colors-row-selected-hover: #fef08a;
-  --pg-colors-text-primary: #111827;
-  --pg-colors-text-secondary: #6b7280;
-  --pg-colors-text-muted: #9ca3af;
-  --pg-colors-text-disabled: #d1d5db;
   --pg-colors-primary: #d97706;
-  --pg-colors-filter-background: #ffffff;
-  --pg-colors-scrollbar-bg: #f3f4f6;
-  --pg-colors-badge-background: #fef3c7;
-  --pg-colors-badge-text: #92400e;
-  --pg-colors-resize-handle-color: #d1d5db;
 
   --pg-typography-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
   --pg-typography-font-size-sm: 11px;
@@ -32,54 +21,56 @@ export const themeBalhamCss = `
 
   --pg-header-row-height: 36px;
   --pg-row-height: 32px;
+
   --pg-borders-radius-md: 2px;
   --pg-borders-radius-sm: 0px;
   --pg-borders-radius-pill: 2px;
-  --pg-transitions-duration-fast: 80ms;
   --pg-sizing-checkbox-size: 14px;
+
+  --pg-transitions-duration-fast: 80ms;
 }
 
-/* Balham header — dense, uppercase, pronounced border */
+/* Balham header — dense, uppercase, pronounced border; color follows the mode. */
 .pg-balham-theme .pg-th {
   text-transform: uppercase;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.06em;
-  color: #374151;
+  color: var(--pg-colors-header-text);
 }
-.pg-balham-theme .pg-th--sorted { color: #d97706; }
-.pg-balham-theme .pg-grid__header { border-bottom: 2px solid #d1d5db; }
+.pg-balham-theme .pg-th--sorted { color: var(--pg-colors-primary); }
+.pg-balham-theme .pg-grid__header { border-bottom: 2px solid var(--pg-colors-header-border); }
 
 /* Balham rows — full row border, classic spreadsheet look */
-.pg-balham-theme .pg-row { border-bottom: 1px solid #e5e7eb; }
+.pg-balham-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }
 
-/* Balham icon tones — warmer grays */
-.pg-balham-theme .pg-icon { color: #6b7280; }
-.pg-balham-theme .pg-th--sorted .pg-icon { color: #d97706; }
-.pg-balham-theme .pg-row-drag-handle { color: #9ca3af; }
+/* Balham icon tones — mode-aware */
+.pg-balham-theme .pg-icon { color: var(--pg-colors-text-secondary); }
+.pg-balham-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }
+.pg-balham-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }
 
-/* Balham checkbox — 14px, square (0 radius), flat amber fill */
+/* Balham checkbox — 14px, square (0 radius), flat accent fill */
 .pg-balham-theme .pg-checkbox {
   appearance: none;
   -webkit-appearance: none;
   width: 14px;
   height: 14px;
-  border: 1px solid #9ca3af;
+  border: 1px solid var(--pg-colors-checkbox-border);
   border-radius: 0px;
-  background: #fff;
+  background: var(--pg-colors-checkbox-background);
   cursor: pointer;
   position: relative;
   flex-shrink: 0;
   transition: background 80ms linear, border-color 80ms linear;
 }
-.pg-balham-theme .pg-checkbox:hover { border-color: #d97706; }
+.pg-balham-theme .pg-checkbox:hover { border-color: var(--pg-colors-primary); }
 .pg-balham-theme .pg-checkbox:focus-visible {
-  outline: 1px solid #d97706;
+  outline: 1px solid var(--pg-colors-primary);
   outline-offset: 1px;
 }
 .pg-balham-theme .pg-checkbox:checked {
-  background: #d97706;
-  border-color: #d97706;
+  background: var(--pg-colors-primary);
+  border-color: var(--pg-colors-primary);
 }
 .pg-balham-theme .pg-checkbox:checked::after {
   content: '';
@@ -88,14 +79,14 @@ export const themeBalhamCss = `
   top: 1px;
   width: 5px;
   height: 8px;
-  border: 2px solid #fff;
+  border: 2px solid var(--pg-colors-primary-text);
   border-top: none;
   border-left: none;
   transform: rotate(45deg);
 }
 .pg-balham-theme .pg-checkbox:indeterminate {
-  background: #d97706;
-  border-color: #d97706;
+  background: var(--pg-colors-primary);
+  border-color: var(--pg-colors-primary);
 }
 .pg-balham-theme .pg-checkbox:indeterminate::after {
   content: '';
@@ -104,12 +95,12 @@ export const themeBalhamCss = `
   top: 50%;
   width: 8px;
   height: 2px;
-  background: #fff;
+  background: var(--pg-colors-primary-text);
   transform: translateY(-50%);
 }
 
 /* Balham selection — amber left accent bar */
-.pg-balham-theme .pg-row--selected { box-shadow: inset 3px 0 0 #d97706; }
+.pg-balham-theme .pg-row--selected { box-shadow: inset 3px 0 0 var(--pg-colors-primary); }
 
 /* Balham row-drag — very fast, minimal */
 .pg-balham-theme .pg-grid--row-dragging .pg-row {

package/styles/themes/theme-balham.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-balham.js","sourceRoot":"","sources":["../../../src/styles/themes/theme-balham.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoH7B,CAAC"}
+{"version":3,"file":"theme-balham.js","sourceRoot":"","sources":["../../../src/styles/themes/theme-balham.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoG7B,CAAC"}

package/styles/themes/theme-material.d.ts

@@ -1,2 +1,10 @@
-export declare const themeMaterialCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-material-theme variables \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-material-theme .pg-grid {\n  border-radius: 4px;\n  border-color: transparent;\n  box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);\n\n  --pg-colors-border: rgba(0,0,0,.12);\n  --pg-colors-header-background: #ffffff;\n  --pg-colors-header-border: transparent;\n  --pg-colors-header-text: rgba(0,0,0,.54);\n  --pg-colors-row-background: #ffffff;\n  --pg-colors-row-alt-background: #fafafa;\n  --pg-colors-row-hover: rgba(0,0,0,.04);\n  --pg-colors-row-selected: rgba(25,118,210,.10);\n  --pg-colors-row-selected-hover: rgba(25,118,210,.16);\n  --pg-colors-text-primary: rgba(0,0,0,.87);\n  --pg-colors-text-secondary: rgba(0,0,0,.54);\n  --pg-colors-text-muted: rgba(0,0,0,.38);\n  --pg-colors-text-disabled: rgba(0,0,0,.26);\n  --pg-colors-primary: #1976d2;\n  --pg-colors-filter-background: #ffffff;\n  --pg-colors-scrollbar-bg: #fafafa;\n  --pg-colors-badge-background: #e3f2fd;\n  --pg-colors-badge-text: #0d47a1;\n  --pg-colors-resize-handle-color: rgba(0,0,0,.20);\n\n  --pg-typography-font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;\n  --pg-typography-font-size-sm: 12px;\n  --pg-typography-font-size-xs: 11px;\n  --pg-typography-font-weight-medium: 400;\n  --pg-typography-font-weight-semi-bold: 500;\n  --pg-typography-letter-spacing-wide: 0.04em;\n\n  --pg-header-row-height: 56px;\n  --pg-row-height: 52px;\n  --pg-borders-radius-md: 4px;\n  --pg-borders-radius-sm: 2px;\n  --pg-borders-radius-pill: 4px;\n  --pg-transitions-duration-fast: 200ms;\n  --pg-sizing-checkbox-size: 18px;\n}\n\n/* Material header \u2014 no uppercase, medium weight, subdued */\n.pg-material-theme .pg-th {\n  text-transform: none;\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 0.04em;\n  color: rgba(0,0,0,.54);\n}\n.pg-material-theme .pg-th--sorted { color: #1976d2; }\n.pg-material-theme .pg-grid__header { border-bottom: 1px solid rgba(0,0,0,.12); }\n\n/* Material rows \u2014 thin divider lines */\n.pg-material-theme .pg-row { border-bottom: 1px solid rgba(0,0,0,.06); }\n.pg-material-theme .pg-cell--v-border { border-right-color: rgba(0,0,0,.06); }\n\n/* Material filter row */\n.pg-material-theme .pg-filter-row { border-top-color: rgba(0,0,0,.08); }\n\n/* Material icon tones */\n.pg-material-theme .pg-icon { color: rgba(0,0,0,.54); }\n.pg-material-theme .pg-th--sorted .pg-icon { color: #1976d2; }\n.pg-material-theme .pg-row-drag-handle { color: rgba(0,0,0,.38); }\n\n/* Material checkbox \u2014 18px, 2px radius, blue, Material motion */\n.pg-material-theme .pg-checkbox {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 18px;\n  height: 18px;\n  border: 2px solid rgba(0,0,0,.38);\n  border-radius: 2px;\n  background: transparent;\n  cursor: pointer;\n  position: relative;\n  flex-shrink: 0;\n  transition: background 200ms cubic-bezier(0.4,0,0.2,1),\n              border-color 200ms cubic-bezier(0.4,0,0.2,1),\n              box-shadow 200ms cubic-bezier(0.4,0,0.2,1);\n}\n.pg-material-theme .pg-checkbox:hover {\n  border-color: #1976d2;\n  box-shadow: 0 0 0 8px rgba(25,118,210,.1);\n}\n.pg-material-theme .pg-checkbox:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 8px rgba(25,118,210,.2);\n}\n.pg-material-theme .pg-checkbox:checked {\n  background: #1976d2;\n  border-color: #1976d2;\n}\n.pg-material-theme .pg-checkbox:checked::after {\n  content: '';\n  position: absolute;\n  left: 4px;\n  top: 1px;\n  width: 7px;\n  height: 11px;\n  border: 2px solid #fff;\n  border-top: none;\n  border-left: none;\n  transform: rotate(45deg);\n}\n.pg-material-theme .pg-checkbox:indeterminate {\n  background: #1976d2;\n  border-color: #1976d2;\n}\n.pg-material-theme .pg-checkbox:indeterminate::after {\n  content: '';\n  position: absolute;\n  left: 2px;\n  top: 50%;\n  width: 10px;\n  height: 2px;\n  background: #fff;\n  transform: translateY(-50%);\n}\n\n/* Material selection \u2014 no left bar, full-row tint only */\n.pg-material-theme .pg-row--selected { box-shadow: none; }\n\n/* Material row-drag animation \u2014 Material motion curve */\n.pg-material-theme .pg-grid--row-dragging .pg-row {\n  transition: background 200ms cubic-bezier(0.4,0,0.2,1),\n              top 200ms cubic-bezier(0.4,0,0.2,1);\n}\n";
+/**
+ * pg-material-theme — Material Design 3 (indigo accent).
+ *
+ * Cosmetic variant layered on the active mode (light/dark). Overrides only
+ * density, radii, typography, accent, elevation and motion; base colors come
+ * from the mode tokens so it works in both light and dark. See
+ * {@link themeQuartzCss} for the shared design rationale.
+ */
+export declare const themeMaterialCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-material-theme: structural + accent tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-material-theme .pg-grid {\n  /* Material uses elevation instead of a hard border. */\n  border-radius: 4px;\n  border-color: transparent;\n  box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);\n\n  --pg-colors-primary: #1976d2;\n\n  --pg-typography-font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;\n  --pg-typography-font-size-sm: 12px;\n  --pg-typography-font-size-xs: 11px;\n  --pg-typography-font-weight-medium: 400;\n  --pg-typography-font-weight-semi-bold: 500;\n  --pg-typography-letter-spacing-wide: 0.04em;\n\n  --pg-header-row-height: 56px;\n  --pg-row-height: 52px;\n\n  --pg-borders-radius-md: 4px;\n  --pg-borders-radius-sm: 2px;\n  --pg-borders-radius-pill: 4px;\n  --pg-sizing-checkbox-size: 18px;\n\n  --pg-transitions-duration-fast: 200ms;\n}\n\n/* Material header \u2014 no uppercase, medium weight; color follows the mode. */\n.pg-material-theme .pg-th {\n  text-transform: none;\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 0.04em;\n  color: var(--pg-colors-header-text);\n}\n.pg-material-theme .pg-th--sorted { color: var(--pg-colors-primary); }\n.pg-material-theme .pg-grid__header { border-bottom: 1px solid var(--pg-colors-header-border); }\n\n/* Material rows \u2014 thin divider lines */\n.pg-material-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }\n.pg-material-theme .pg-cell--v-border { border-right-color: var(--pg-colors-border); }\n\n/* Material filter row */\n.pg-material-theme .pg-filter-row { border-top-color: var(--pg-colors-border); }\n\n/* Material icon tones \u2014 mode-aware */\n.pg-material-theme .pg-icon { color: var(--pg-colors-text-secondary); }\n.pg-material-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }\n.pg-material-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }\n\n/* Material checkbox \u2014 18px, 2px radius, accent, Material motion + ripple */\n.pg-material-theme .pg-checkbox {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 18px;\n  height: 18px;\n  border: 2px solid var(--pg-colors-checkbox-border);\n  border-radius: 2px;\n  background: transparent;\n  cursor: pointer;\n  position: relative;\n  flex-shrink: 0;\n  transition: background 200ms cubic-bezier(0.4,0,0.2,1),\n              border-color 200ms cubic-bezier(0.4,0,0.2,1),\n              box-shadow 200ms cubic-bezier(0.4,0,0.2,1);\n}\n.pg-material-theme .pg-checkbox:hover {\n  border-color: var(--pg-colors-primary);\n  box-shadow: 0 0 0 8px color-mix(in srgb, var(--pg-colors-primary) 10%, transparent);\n}\n.pg-material-theme .pg-checkbox:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 8px color-mix(in srgb, var(--pg-colors-primary) 20%, transparent);\n}\n.pg-material-theme .pg-checkbox:checked {\n  background: var(--pg-colors-primary);\n  border-color: var(--pg-colors-primary);\n}\n.pg-material-theme .pg-checkbox:checked::after {\n  content: '';\n  position: absolute;\n  left: 4px;\n  top: 1px;\n  width: 7px;\n  height: 11px;\n  border: 2px solid var(--pg-colors-primary-text);\n  border-top: none;\n  border-left: none;\n  transform: rotate(45deg);\n}\n.pg-material-theme .pg-checkbox:indeterminate {\n  background: var(--pg-colors-primary);\n  border-color: var(--pg-colors-primary);\n}\n.pg-material-theme .pg-checkbox:indeterminate::after {\n  content: '';\n  position: absolute;\n  left: 2px;\n  top: 50%;\n  width: 10px;\n  height: 2px;\n  background: var(--pg-colors-primary-text);\n  transform: translateY(-50%);\n}\n\n/* Material selection \u2014 no left bar, full-row tint only */\n.pg-material-theme .pg-row--selected { box-shadow: none; }\n\n/* Material row-drag animation \u2014 Material motion curve */\n.pg-material-theme .pg-grid--row-dragging .pg-row {\n  transition: background 200ms cubic-bezier(0.4,0,0.2,1),\n              top 200ms cubic-bezier(0.4,0,0.2,1);\n}\n";
 //# sourceMappingURL=theme-material.d.ts.map

package/styles/themes/theme-material.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-material.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-material.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,gBAAgB,0zIAkI5B,CAAC"}
+{"version":3,"file":"theme-material.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-material.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,s/HAmH5B,CAAC"}