photon-grid-core 2.0.4 → 2.0.6

package/styles/base/filter.css.js

@@ -58,9 +58,13 @@ export const filterCss = `/* ─────────────────
 
 .pg-filter-cell {
   display: flex;
+  gap: 6px;
   align-items: center;
   flex-shrink: 0;
   padding: 0 6px;
+  /* Column divider — themed, and gated by showVerticalBorders (removed under
+     .pg-grid--no-v-borders, same as .pg-th/.pg-cell) so the filter row's
+     vertical lines stay continuous with the header and body columns. */
   border-right: 1px solid var(--pg-colors-border, #e2e8f0);
 }
 .pg-filter-cell:last-child { border-right: none; }
@@ -77,8 +81,11 @@ export const filterCss = `/* ─────────────────
   flex-shrink: 0;
 }
 .pg-filter-input {
-  width: 100%;
-  height: 24px;
+  /* Grow to fill the cell but yield room for the trailing filter icon. */
+  flex: 1 1 auto;
+  width: auto !important;
+  min-width: 0 !important;
+  height: 70%;
   padding: 0 8px;
   border: 1px solid var(--pg-colors-border, #e2e8f0);
   border-radius: var(--pg-borders-radius-sm, 4px);
@@ -91,6 +98,40 @@ export const filterCss = `/* ─────────────────
 }
 .pg-filter-input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }
 
+/* Set-type columns (object / array / dropdown): read-only input that looks
+   disabled and opens the checkbox filter dropdown on click. */
+.pg-filter-input--set {
+  cursor: pointer;
+  color: var(--pg-colors-text-secondary, #64748b);
+  background: var(--pg-colors-background-alt, #f1f5f9);
+}
+.pg-filter-input--set::placeholder { color: var(--pg-colors-text-secondary, #64748b); }
+
+/* Trailing filter icon inside each filter cell — opens the filter panel. */
+.pg-filter-cell__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: var(--pg-borders-radius-sm, 4px);
+  color: var(--pg-colors-text-secondary, #64748b);
+  cursor: pointer;
+  transition: background var(--pg-transitions-duration-fast, 100ms),
+              color var(--pg-transitions-duration-fast, 100ms);
+}
+.pg-filter-cell__icon:hover {
+  background: var(--pg-colors-background-alt, #f1f5f9);
+  color: var(--pg-colors-text-primary, #1e293b);
+}
+.pg-filter-cell__icon:focus-visible {
+  outline: 2px solid var(--pg-colors-border-focus, #2563eb);
+  outline-offset: -1px;
+}
+.pg-filter-cell__icon svg { display: block; }
+.pg-filter-cell__icon--active { color: var(--pg-colors-primary, #2563eb); }
+
 /* ──────────────────── Filter Panel ──────────────────── */
 .pg-filter-panel {
   position: absolute;
@@ -104,7 +145,7 @@ export const filterCss = `/* ─────────────────
   box-shadow: var(--pg-shadows-lg, 0 8px 24px rgba(0,0,0,.12));
   overflow: hidden;
   font-size: var(--pg-typography-font-size-sm, 13px);
-  color: var(--pg-colors-text, #1e293b);
+  color: var(--pg-colors-text-primary, #1e293b);
   user-select: none;
 }
 
@@ -121,7 +162,7 @@ export const filterCss = `/* ─────────────────
   border: 1px solid var(--pg-colors-border, #e2e8f0);
   border-radius: var(--pg-borders-radius-sm, 4px);
   background: var(--pg-colors-surface, #fff);
-  color: var(--pg-colors-text, #1e293b);
+  color: var(--pg-colors-text-primary, #1e293b);
   font-size: inherit;
   font-family: inherit;
   cursor: pointer;
@@ -149,7 +190,7 @@ export const filterCss = `/* ─────────────────
   border: 1px solid var(--pg-colors-border, #e2e8f0);
   border-radius: var(--pg-borders-radius-sm, 4px);
   background: var(--pg-colors-surface, #fff);
-  color: var(--pg-colors-text, #1e293b);
+  color: var(--pg-colors-text-primary, #1e293b);
   font-size: inherit;
   font-family: inherit;
   outline: none;
@@ -212,7 +253,7 @@ export const filterCss = `/* ─────────────────
   border: 1px solid var(--pg-colors-border, #e2e8f0);
   border-radius: var(--pg-borders-radius-sm, 4px);
   background: var(--pg-colors-surface, #fff);
-  color: var(--pg-colors-text, #1e293b);
+  color: var(--pg-colors-text-primary, #1e293b);
   font-size: inherit;
   font-family: inherit;
   box-sizing: border-box;
@@ -245,7 +286,7 @@ export const filterCss = `/* ─────────────────
 .pg-filter-set__item--select-all {
   position: static;
   font-weight: 500;
-  color: var(--pg-colors-text, #1e293b);
+  color: var(--pg-colors-text-primary, #1e293b);
 }
 .pg-filter-set__item-label {
   overflow: hidden;
@@ -305,7 +346,7 @@ export const filterCss = `/* ─────────────────
 .pg-filter-panel__clear-btn:hover {
   background: var(--pg-colors-background-alt, #f1f5f9);
   border-color: var(--pg-colors-text-secondary, #475569);
-  color: var(--pg-colors-text, #1e293b);
+  color: var(--pg-colors-text-primary, #1e293b);
 }
 
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"filter.css.js","sourceRoot":"","sources":["../../../src/styles/base/filter.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+SxB,CAAC"}
+{"version":3,"file":"filter.css.js","sourceRoot":"","sources":["../../../src/styles/base/filter.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwVxB,CAAC"}

package/styles/base/group-drop-zone.css.d.ts

@@ -5,5 +5,5 @@
  * base-styles.ts; edit here, not there. Order is preserved because CSS
  * cascade depends on it.
  */
-export declare const groupDropZoneCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Group drop zone \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-group-drop-zone--top {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  flex-shrink: 0;\n  height: var(--pg-header-row-height, 44px);\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n  overflow: hidden;\n}\n.pg-group-drop-zone--left {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  width: 160px;\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  overflow: hidden;\n  position: relative;\n}\n.pg-group-drop-zone--right {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  width: 160px;\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-left: 1px solid var(--pg-colors-border, #e2e8f0);\n  overflow: hidden;\n  position: relative;\n}\n\n/* Zone header row (grip + \"Groups\" label) */\n.pg-group-zone-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px 4px 8px;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n  user-select: none;\n}\n.pg-group-zone-grip {\n  display: flex;\n  align-items: center;\n  cursor: grab;\n  opacity: 0.45;\n  padding: 2px 3px;\n  border-radius: 3px;\n  color: var(--pg-colors-text-secondary, #64748b);\n  flex-shrink: 0;\n  transition: opacity 100ms, background 100ms;\n}\n.pg-group-zone-grip:hover { opacity: 0.85; background: rgba(0,0,0,0.06); }\n.pg-group-zone-grip:active { cursor: grabbing; }\n.pg-group-zone-label {\n  flex: 1;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--pg-colors-text-secondary, #64748b);\n  user-select: none;\n}\n\n/* Chips area (the actual drop target) */\n.pg-group-zone-chips {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 6px 10px;\n  min-height: 38px;\n  flex: 1;\n  overflow: auto;\n}\n.pg-group-drop-zone--left .pg-group-zone-chips,\n.pg-group-drop-zone--right .pg-group-zone-chips {\n  flex-direction: column;\n  align-items: flex-start;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.pg-group-zone-chips--over {\n  background: var(--pg-colors-group-zone-over, #eff6ff);\n  outline: 1px dashed var(--pg-colors-primary, #2563eb);\n  outline-offset: -2px;\n}\n\n/* Resize handle */\n.pg-group-drop-zone--top .pg-group-zone-resize {\n  height: 4px;\n  flex-shrink: 0;\n  cursor: ns-resize;\n  background: transparent;\n  transition: background 100ms;\n}\n.pg-group-drop-zone--top .pg-group-zone-resize:hover { background: var(--pg-colors-primary, #2563eb); opacity: 0.35; }\n.pg-group-drop-zone--left .pg-group-zone-resize {\n  position: absolute;\n  top: 0; right: 0; bottom: 0;\n  width: 4px;\n  cursor: ew-resize;\n  background: transparent;\n  transition: background 100ms;\n}\n.pg-group-drop-zone--right .pg-group-zone-resize {\n  position: absolute;\n  top: 0; left: 0; bottom: 0;\n  width: 4px;\n  cursor: ew-resize;\n  background: transparent;\n  transition: background 100ms;\n}\n.pg-group-drop-zone--left .pg-group-zone-resize:hover,\n.pg-group-drop-zone--right .pg-group-zone-resize:hover { background: var(--pg-colors-primary, #2563eb); opacity: 0.35; }\n\n/* Hint text */\n.pg-group-drop-zone__hint {\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  color: var(--pg-colors-text-disabled, #94a3b8);\n  pointer-events: none;\n  user-select: none;\n}\n\n/* Chips */\n.pg-group-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 3px 6px 3px 10px;\n  border-radius: var(--pg-borders-radius-pill, 9999px);\n  background: var(--pg-colors-chip-background, #e0e7ff);\n  color: var(--pg-colors-chip-text, #1e40af);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-weight: var(--pg-typography-font-weight-medium, 500);\n  user-select: none;\n  white-space: nowrap;\n  transition: opacity 120ms;\n}\n.pg-group-chip--ghost {\n  cursor: grabbing;\n}\n.pg-group-chip__label { line-height: 1.2; }\n.pg-group-chip__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  cursor: pointer;\n  opacity: 0.55;\n  transition: opacity 100ms, background 100ms;\n  flex-shrink: 0;\n}\n.pg-group-chip__close:hover { opacity: 1; background: rgba(30,64,175,0.18); }\n.pg-group-chip__sep {\n  display: inline-flex;\n  align-items: center;\n  color: var(--pg-colors-text-disabled, #94a3b8);\n  flex-shrink: 0;\n}\n\n";
+export declare const groupDropZoneCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Group drop zone \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-group-drop-zone--top {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  flex-shrink: 0;\n  height: var(--pg-header-row-height, 44px);\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n  overflow: hidden;\n}\n.pg-group-drop-zone--left {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  width: 160px;\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  overflow: hidden;\n  position: relative;\n}\n.pg-group-drop-zone--right {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  width: 160px;\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-left: 1px solid var(--pg-colors-border, #e2e8f0);\n  overflow: hidden;\n  position: relative;\n}\n\n/* Zone header row (grip + \"Groups\" label) */\n.pg-group-zone-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px 4px 8px;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n  user-select: none;\n}\n.pg-group-zone-grip {\n  display: flex;\n  align-items: center;\n  cursor: grab;\n  opacity: 0.45;\n  padding: 2px 3px;\n  border-radius: 3px;\n  color: var(--pg-colors-text-secondary, #64748b);\n  flex-shrink: 0;\n  transition: opacity 100ms, background 100ms;\n}\n.pg-group-zone-grip:hover { opacity: 0.85; background: rgba(0,0,0,0.06); }\n.pg-group-zone-grip:active { cursor: grabbing; }\n.pg-group-zone-label {\n  flex: 1;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--pg-colors-text-secondary, #64748b);\n  user-select: none;\n}\n\n/* Chips area (the actual drop target) */\n.pg-group-zone-chips {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 6px 10px;\n  min-height: 38px;\n  flex: 1;\n  overflow: auto;\n}\n.pg-group-drop-zone--left .pg-group-zone-chips,\n.pg-group-drop-zone--right .pg-group-zone-chips {\n  flex-direction: column;\n  align-items: flex-start;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.pg-group-zone-chips--over {\n  background: var(--pg-colors-group-zone-over, var(--pg-colors-selection-background, #eff6ff));\n  outline: 1px dashed var(--pg-colors-primary, #2563eb);\n  outline-offset: -2px;\n}\n\n/* Resize handle */\n.pg-group-drop-zone--top .pg-group-zone-resize {\n  height: 4px;\n  flex-shrink: 0;\n  cursor: ns-resize;\n  background: transparent;\n  transition: background 100ms;\n}\n.pg-group-drop-zone--top .pg-group-zone-resize:hover { background: var(--pg-colors-primary, #2563eb); opacity: 0.35; }\n.pg-group-drop-zone--left .pg-group-zone-resize {\n  position: absolute;\n  top: 0; right: 0; bottom: 0;\n  width: 4px;\n  cursor: ew-resize;\n  background: transparent;\n  transition: background 100ms;\n}\n.pg-group-drop-zone--right .pg-group-zone-resize {\n  position: absolute;\n  top: 0; left: 0; bottom: 0;\n  width: 4px;\n  cursor: ew-resize;\n  background: transparent;\n  transition: background 100ms;\n}\n.pg-group-drop-zone--left .pg-group-zone-resize:hover,\n.pg-group-drop-zone--right .pg-group-zone-resize:hover { background: var(--pg-colors-primary, #2563eb); opacity: 0.35; }\n\n/* Hint text */\n.pg-group-drop-zone__hint {\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  color: var(--pg-colors-text-disabled, #94a3b8);\n  pointer-events: none;\n  user-select: none;\n}\n\n/* Chips */\n.pg-group-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 3px 6px 3px 10px;\n  border-radius: var(--pg-borders-radius-pill, 9999px);\n  background: var(--pg-colors-chip-background, var(--pg-colors-badge-background, #e0e7ff));\n  color: var(--pg-colors-chip-text, var(--pg-colors-badge-text, #1e40af));\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-weight: var(--pg-typography-font-weight-medium, 500);\n  user-select: none;\n  white-space: nowrap;\n  transition: opacity 120ms;\n}\n.pg-group-chip--ghost {\n  cursor: grabbing;\n}\n.pg-group-chip__label { line-height: 1.2; }\n.pg-group-chip__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  cursor: pointer;\n  opacity: 0.55;\n  transition: opacity 100ms, background 100ms;\n  flex-shrink: 0;\n}\n.pg-group-chip__close:hover { opacity: 1; background: rgba(30,64,175,0.18); }\n.pg-group-chip__sep {\n  display: inline-flex;\n  align-items: center;\n  color: var(--pg-colors-text-disabled, #94a3b8);\n  flex-shrink: 0;\n}\n\n";
 //# sourceMappingURL=group-drop-zone.css.d.ts.map

package/styles/base/group-drop-zone.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"group-drop-zone.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/group-drop-zone.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,yqJAoK5B,CAAC"}
+{"version":3,"file":"group-drop-zone.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/group-drop-zone.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,gxJAoK5B,CAAC"}

package/styles/base/group-drop-zone.css.js

@@ -89,7 +89,7 @@ export const groupDropZoneCss = `/* ──────────────
   overflow-x: hidden;
 }
 .pg-group-zone-chips--over {
-  background: var(--pg-colors-group-zone-over, #eff6ff);
+  background: var(--pg-colors-group-zone-over, var(--pg-colors-selection-background, #eff6ff));
   outline: 1px dashed var(--pg-colors-primary, #2563eb);
   outline-offset: -2px;
 }
@@ -137,8 +137,8 @@ export const groupDropZoneCss = `/* ──────────────
   gap: 5px;
   padding: 3px 6px 3px 10px;
   border-radius: var(--pg-borders-radius-pill, 9999px);
-  background: var(--pg-colors-chip-background, #e0e7ff);
-  color: var(--pg-colors-chip-text, #1e40af);
+  background: var(--pg-colors-chip-background, var(--pg-colors-badge-background, #e0e7ff));
+  color: var(--pg-colors-chip-text, var(--pg-colors-badge-text, #1e40af));
   font-size: var(--pg-typography-font-size-sm, 12px);
   font-weight: var(--pg-typography-font-weight-medium, 500);
   user-select: none;

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

@@ -5,5 +5,5 @@
  * base-styles.ts; edit here, not there. Order is preserved because CSS
  * cascade depends on it.
  */
-export declare const headerCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Header rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-header-row, .pg-filter-row {\n  display: flex;\n  align-items: stretch;\n}\n.pg-header-row { height: var(--pg-header-row-height, 44px); }\n.pg-filter-row {\n  height: var(--pg-filter-row-height, 36px);\n  border-top: 1px solid var(--pg-colors-border, #e2e8f0);\n  background: var(--pg-colors-filter-background, #fff);\n}\n.pg-th {\n  display: flex;\n  align-items: center;\n  position: relative;\n  flex-shrink: 0;\n  padding: 0;\n  color: var(--pg-colors-header-text, #374151);\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  letter-spacing: var(--pg-typography-letter-spacing-wide, 0.025em);\n  text-transform: uppercase;\n  border-right: 1px solid var(--pg-colors-header-border, #e2e8f0);\n  user-select: none;\n  cursor: default;\n  transition: background var(--pg-transitions-duration-fast, 100ms);\n  overflow: hidden;\n  min-width: var(--pg-sizing-column-min-width, 40px);\n}\n.pg-th:last-child { border-right: none; }\n.pg-th--sortable { cursor: pointer; }\n// .pg-th:hover, .pg-th.pg-th--sortable:hover { background: var(--pg-colors-header-hover, #f1f5f9); }\n// .pg-th.pg-th--sorted { background: var(--pg-colors-header-hover, #f1f5f9); }\n.pg-th.pg-th--sort-asc .pg-th__sort-icon,\n.pg-th.pg-th--sort-desc .pg-th__sort-icon { color: var(--pg-colors-primary, #2563eb); }\n.pg-th.pg-th--filter-active .pg-th__label { color: var(--pg-colors-primary, #2563eb); }\n.pg-th--checkbox {\n  width: 44px;\n  min-width: 44px;\n  max-width: 44px;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.pg-th--serial {\n  width: 52px;\n  min-width: 52px;\n  max-width: 52px;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.pg-th--auto-group {\n  flex-shrink: 0;\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--pg-colors-text-secondary, #64748b);\n}\n.pg-cell--auto-group-spacer {\n  flex-shrink: 0;\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  background: transparent;\n}\n.pg-th__content {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex: 1;\n  min-width: 0;\n  padding: 0 10px 0 12px;\n  height: 100%;\n}\n.pg-th__label {\n  flex: 0 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.pg-th__sort-icon { flex-shrink: 0; opacity: 0; color: var(--pg-colors-text-secondary, #475569); }\n/* Aligned column headers */\n.pg-th--align-right .pg-th__label  { text-align: right; }\n.pg-th--align-center .pg-th__label { text-align: center; }\n.pg-th--align-center .pg-th__content,\n.pg-th--no-group .pg-th__content {\n  justify-content: center;\n}\n.pg-th--no-group .pg-th__label {\n  text-align: center;\n}\n/* Reversed header layout for numeric/currency columns: icons LEFT, text RIGHT */\n.pg-th--reverse { flex-direction: row-reverse; }\n.pg-th--reverse .pg-th__content { flex-direction: row-reverse; padding: 0 12px 0 10px; }\n.pg-th--reverse .pg-th__label { flex: 1 1 auto; }\n.pg-th--reverse .pg-th__filter-btn { margin-right: 0; margin-left: 2px; }\n.pg-th--reverse .pg-th__menu-btn { margin-right: 0; margin-left: 4px; }\n.pg-th--sort-asc .pg-th__sort-icon,\n.pg-th--sort-desc .pg-th__sort-icon { opacity: 1; color: var(--pg-colors-primary, #2563eb); }\n/* \u2500\u2500\u2500 Column header filter button \u2500\u2500\u2500 */\n.pg-th__filter-btn {\n  flex-shrink: 0;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 4px;\n  margin-right: 2px;\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  color: var(--pg-colors-text-secondary, #475569);\n  opacity: 0.7;\n  transition: opacity var(--pg-transitions-duration-fast, 100ms),\n              color var(--pg-transitions-duration-fast, 100ms),\n              background var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-th:hover .pg-th__filter-btn,\n.pg-th__filter-btn--active { display: flex; }\n.pg-th__filter-btn:hover { opacity: 1; background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-th__filter-btn--active {\n  opacity: 1;\n  color: var(--pg-colors-primary, #2563eb);\n}\n.pg-th__filter-icon { flex-shrink: 0; color: var(--pg-colors-primary, #2563eb); }\n.pg-th__menu-btn {\n  flex-shrink: 0;\n  display: none;\n  cursor: pointer;\n  padding: 6px;\n  margin-right: 4px;\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  color: var(--pg-colors-text-secondary, #475569);\n  opacity: 0.6;\n  transition: opacity var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-th:hover .pg-th__menu-btn,\n.pg-th__menu-btn--active { display: flex; }\n.pg-th__menu-btn:hover { opacity: 1; background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-th__menu-btn--active { opacity: 1; background: var(--pg-colors-border, #e2e8f0); }\n.pg-th__resize-handle {\n position: absolute;\n    right: -1px;\n    top: 0;\n    width: 6px;\n    height: 50%;\n    top: 25%;\n    cursor: ew-resize;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--pg-colors-resize-handle-color, #d9d9db);\n    background: transparent;\n    transition: background var(--pg-transitions-duration-fast, 100ms);\n    z-index: 5;\n    font-size: 10px;\n    user-select: none;\n    background: #d6d6d6;\n    width: 2px;\n}\n/* Right-pinned columns anchor their right edge to the grid border, so the\n   resize handle lives on the inner (left) edge \u2014 the edge free to move. */\n.pg-th--pinned-right .pg-th__resize-handle {\n  right: auto;\n  left: -1px;\n}\n.pg-th__resize-handle:hover,\n.pg-th.pg-resizing .pg-th__resize-handle,\n.pg-th--resizing .pg-th__resize-handle {\n  // background: var(--pg-colors-resize-handle-active-color, #2563eb);\n}\n\n/* No vertical-borders mode: completely remove the 1px border slot from both headers and cells */\n.pg-grid--no-v-borders .pg-th { border-right: none; }\n.pg-grid--no-v-borders .pg-cell { border-right: none; }\n// .pg-grid--no-v-borders .pg-th__resize-handle {\n//   background: var(--pg-colors-resize-handle-color, #e2e8f0);\n// }\n.pg-grid--no-v-borders .pg-th__resize-handle:hover,\n.pg-grid--no-v-borders .pg-th.pg-resizing .pg-th__resize-handle,\n.pg-grid--no-v-borders .pg-th--resizing .pg-th__resize-handle {\n  // background: var(--pg-colors-resize-handle-active-color, #2563eb);\n}\n.pg-th__drag-handle {\n  position: absolute;\n  left: 2px;\n  top: 50%;\n  transform: translateY(-50%);\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 24px;\n  cursor: grab;\n  color: var(--pg-colors-text-secondary, #475569);\n  z-index: 2;\n  border-radius: 3px;\n}\n.pg-th:hover .pg-th__drag-handle { display: flex; opacity: 0.5; }\n.pg-th__drag-handle:hover { opacity: 1 !important; background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-th--dragging { opacity: 0.72; cursor: grabbing !important; }\n.pg-th__serial-label { font-size: 11px; opacity: 0.45; }\n.pg-header-checkbox { cursor: pointer; width: 16px; height: 16px; }\n\n/* Inline column-header rename input (column menu \u2192 Rename). */\n.pg-th__rename-input {\n  flex: 1 1 auto;\n  min-width: 0;\n  width: 100%;\n  box-sizing: border-box;\n  padding: 2px 6px;\n  margin: 0 4px;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  color: var(--pg-colors-text-primary, #0f172a);\n  background: var(--pg-colors-background, #ffffff);\n  border: 1px solid var(--pg-colors-primary, #2563eb);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  outline: none;\n  box-shadow: 0 0 0 2px var(--pg-colors-primary-soft, rgba(37, 99, 235, 0.16));\n}\n\n";
+export declare const headerCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Header rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-header-row, .pg-filter-row {\n  display: flex;\n  align-items: stretch;\n}\n.pg-header-row { height: var(--pg-header-row-height, 44px); }\n.pg-filter-row {\n  height: var(--pg-filter-row-height, 36px);\n  border-top: 1px solid var(--pg-colors-border, #e2e8f0);\n  /* Filter row shares the header surface so it reads as one chrome band across\n     every mode/variant. A theme may still override via --pg-colors-filter-background. */\n  background: var(--pg-colors-filter-background, var(--pg-colors-header-background, #f8fafc));\n}\n.pg-th {\n  display: flex;\n  align-items: center;\n  position: relative;\n  flex-shrink: 0;\n  padding: 0;\n  color: var(--pg-colors-header-text, #374151);\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  letter-spacing: var(--pg-typography-letter-spacing-wide, 0.025em);\n  text-transform: uppercase;\n  border-right: 1px solid var(--pg-colors-header-border, #e2e8f0);\n  user-select: none;\n  cursor: default;\n  transition: background var(--pg-transitions-duration-fast, 100ms);\n  overflow: hidden;\n  min-width: var(--pg-sizing-column-min-width, 40px);\n}\n.pg-th:last-child { border-right: none; }\n.pg-th--sortable { cursor: pointer; }\n// .pg-th:hover, .pg-th.pg-th--sortable:hover { background: var(--pg-colors-header-hover, #f1f5f9); }\n// .pg-th.pg-th--sorted { background: var(--pg-colors-header-hover, #f1f5f9); }\n.pg-th.pg-th--sort-asc .pg-th__sort-icon,\n.pg-th.pg-th--sort-desc .pg-th__sort-icon { color: var(--pg-colors-primary, #2563eb); }\n.pg-th.pg-th--filter-active .pg-th__label { color: var(--pg-colors-primary, #2563eb); }\n.pg-th--checkbox {\n  width: 44px;\n  min-width: 44px;\n  max-width: 44px;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.pg-th--serial {\n  width: 52px;\n  min-width: 52px;\n  max-width: 52px;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.pg-th--auto-group {\n  flex-shrink: 0;\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--pg-colors-text-secondary, #64748b);\n}\n.pg-cell--auto-group-spacer {\n  flex-shrink: 0;\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  background: transparent;\n}\n.pg-th__content {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex: 1;\n  min-width: 0;\n  padding: 0 10px 0 12px;\n  height: 100%;\n}\n.pg-th__label {\n  flex: 0 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.pg-th__sort-icon { flex-shrink: 0; opacity: 0; color: var(--pg-colors-text-secondary, #475569); }\n/* Aligned column headers */\n.pg-th--align-right .pg-th__label  { text-align: right; }\n.pg-th--align-center .pg-th__label { text-align: center; }\n.pg-th--align-center .pg-th__content,\n.pg-th--no-group .pg-th__content {\n  justify-content: center;\n}\n.pg-th--no-group .pg-th__label {\n  text-align: center;\n}\n/* Reversed header layout for numeric/currency columns: icons LEFT, text RIGHT */\n.pg-th--reverse { flex-direction: row-reverse; }\n.pg-th--reverse .pg-th__content { flex-direction: row-reverse; padding: 0 12px 0 10px; }\n.pg-th--reverse .pg-th__label { flex: 1 1 auto; }\n.pg-th--reverse .pg-th__filter-btn { margin-right: 0; margin-left: 2px; }\n.pg-th--reverse .pg-th__menu-btn { margin-right: 0; margin-left: 4px; }\n.pg-th--sort-asc .pg-th__sort-icon,\n.pg-th--sort-desc .pg-th__sort-icon { opacity: 1; color: var(--pg-colors-primary, #2563eb); }\n/* \u2500\u2500\u2500 Column header filter button \u2500\u2500\u2500 */\n.pg-th__filter-btn {\n  flex-shrink: 0;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 4px;\n  margin-right: 2px;\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  color: var(--pg-colors-text-secondary, #475569);\n  opacity: 0.7;\n  transition: opacity var(--pg-transitions-duration-fast, 100ms),\n              color var(--pg-transitions-duration-fast, 100ms),\n              background var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-th:hover .pg-th__filter-btn,\n.pg-th__filter-btn--active { display: flex; }\n/* Always-visible mode \u2014 opt in via headerIcons.filter / ColumnDef.filterIconDisplay */\n.pg-th__filter-btn--always { display: flex; }\n.pg-th__filter-btn:hover { opacity: 1; background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-th__filter-btn--active {\n  opacity: 1;\n  color: var(--pg-colors-primary, #2563eb);\n}\n.pg-th__filter-icon { flex-shrink: 0; color: var(--pg-colors-primary, #2563eb); }\n.pg-th__menu-btn {\n  flex-shrink: 0;\n  display: none;\n  cursor: pointer;\n  padding: 6px;\n  margin-right: 4px;\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  color: var(--pg-colors-text-secondary, #475569);\n  opacity: 0.6;\n  transition: opacity var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-th:hover .pg-th__menu-btn,\n.pg-th__menu-btn--active { display: flex; }\n/* Always-visible mode \u2014 opt in via headerIcons.menu / ColumnDef.menuIconDisplay */\n.pg-th__menu-btn--always { display: flex; }\n.pg-th__menu-btn:hover { opacity: 1; background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-th__menu-btn--active { opacity: 1; background: var(--pg-colors-border, #e2e8f0); }\n.pg-th__resize-handle {\n position: absolute;\n    right: -1px;\n    top: 0;\n    width: 6px;\n    height: 50%;\n    top: 25%;\n    cursor: ew-resize;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--pg-colors-resize-handle-color, #d9d9db);\n    background: transparent;\n    transition: background var(--pg-transitions-duration-fast, 100ms);\n    z-index: 5;\n    font-size: 10px;\n    user-select: none;\n    background: #d6d6d6;\n    width: 2px;\n}\n/* Right-pinned columns anchor their right edge to the grid border, so the\n   resize handle lives on the inner (left) edge \u2014 the edge free to move. */\n.pg-th--pinned-right .pg-th__resize-handle {\n  right: auto;\n  left: -1px;\n}\n.pg-th__resize-handle:hover,\n.pg-th.pg-resizing .pg-th__resize-handle,\n.pg-th--resizing .pg-th__resize-handle {\n  // background: var(--pg-colors-resize-handle-active-color, #2563eb);\n}\n\n/* No vertical-borders mode: completely remove the 1px border slot from both headers and cells */\n.pg-grid--no-v-borders .pg-th { border-right: none; }\n.pg-grid--no-v-borders .pg-filter-cell { border-right: none; }\n.pg-grid--no-v-borders .pg-cell { border-right: none; }\n// .pg-grid--no-v-borders .pg-th__resize-handle {\n//   background: var(--pg-colors-resize-handle-color, #e2e8f0);\n// }\n.pg-grid--no-v-borders .pg-th__resize-handle:hover,\n.pg-grid--no-v-borders .pg-th.pg-resizing .pg-th__resize-handle,\n.pg-grid--no-v-borders .pg-th--resizing .pg-th__resize-handle {\n  // background: var(--pg-colors-resize-handle-active-color, #2563eb);\n}\n.pg-th__drag-handle {\n  position: absolute;\n  left: 2px;\n  top: 50%;\n  transform: translateY(-50%);\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 24px;\n  cursor: grab;\n  color: var(--pg-colors-text-secondary, #475569);\n  z-index: 2;\n  border-radius: 3px;\n}\n.pg-th:hover .pg-th__drag-handle { display: flex; opacity: 0.5; }\n.pg-th__drag-handle:hover { opacity: 1 !important; background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-th--dragging { opacity: 0.72; cursor: grabbing !important; }\n.pg-th__serial-label { font-size: 11px; opacity: 0.45; }\n.pg-header-checkbox { cursor: pointer; width: 16px; height: 16px; }\n\n/* Inline column-header rename input (column menu \u2192 Rename). */\n.pg-th__rename-input {\n  flex: 1 1 auto;\n  min-width: 0;\n  width: 100%;\n  box-sizing: border-box;\n  padding: 2px 6px;\n  margin: 0 4px;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  color: var(--pg-colors-text-primary, #0f172a);\n  background: var(--pg-colors-background, #ffffff);\n  border: 1px solid var(--pg-colors-primary, #2563eb);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  outline: none;\n  box-shadow: 0 0 0 2px var(--pg-colors-primary-soft, rgba(37, 99, 235, 0.16));\n}\n\n";
 //# sourceMappingURL=header.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"header.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/header.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,+2PA8NrB,CAAC"}
+{"version":3,"file":"header.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/header.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,s5QAqOrB,CAAC"}

package/styles/base/header.css.js

@@ -14,7 +14,9 @@ export const headerCss = `/* ─────────────────
 .pg-filter-row {
   height: var(--pg-filter-row-height, 36px);
   border-top: 1px solid var(--pg-colors-border, #e2e8f0);
-  background: var(--pg-colors-filter-background, #fff);
+  /* Filter row shares the header surface so it reads as one chrome band across
+     every mode/variant. A theme may still override via --pg-colors-filter-background. */
+  background: var(--pg-colors-filter-background, var(--pg-colors-header-background, #f8fafc));
 }
 .pg-th {
   display: flex;
@@ -123,6 +125,8 @@ export const headerCss = `/* ─────────────────
 }
 .pg-th:hover .pg-th__filter-btn,
 .pg-th__filter-btn--active { display: flex; }
+/* Always-visible mode — opt in via headerIcons.filter / ColumnDef.filterIconDisplay */
+.pg-th__filter-btn--always { display: flex; }
 .pg-th__filter-btn:hover { opacity: 1; background: var(--pg-colors-background-alt, #f1f5f9); }
 .pg-th__filter-btn--active {
   opacity: 1;
@@ -142,6 +146,8 @@ export const headerCss = `/* ─────────────────
 }
 .pg-th:hover .pg-th__menu-btn,
 .pg-th__menu-btn--active { display: flex; }
+/* Always-visible mode — opt in via headerIcons.menu / ColumnDef.menuIconDisplay */
+.pg-th__menu-btn--always { display: flex; }
 .pg-th__menu-btn:hover { opacity: 1; background: var(--pg-colors-background-alt, #f1f5f9); }
 .pg-th__menu-btn--active { opacity: 1; background: var(--pg-colors-border, #e2e8f0); }
 .pg-th__resize-handle {
@@ -178,6 +184,7 @@ export const headerCss = `/* ─────────────────
 
 /* No vertical-borders mode: completely remove the 1px border slot from both headers and cells */
 .pg-grid--no-v-borders .pg-th { border-right: none; }
+.pg-grid--no-v-borders .pg-filter-cell { border-right: none; }
 .pg-grid--no-v-borders .pg-cell { border-right: none; }
 // .pg-grid--no-v-borders .pg-th__resize-handle {
 //   background: var(--pg-colors-resize-handle-color, #e2e8f0);

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

@@ -1 +1 @@
-{"version":3,"file":"header.css.js","sourceRoot":"","sources":["../../../src/styles/base/header.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8NxB,CAAC"}
+{"version":3,"file":"header.css.js","sourceRoot":"","sources":["../../../src/styles/base/header.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqOxB,CAAC"}

package/styles/base/row-drag.css.d.ts

@@ -5,5 +5,5 @@
  * base-styles.ts; edit here, not there. Order is preserved because CSS
  * cascade depends on it.
  */
-export declare const rowDragCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Row Drag \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-grid__body { position: relative; }\n\n.pg-row-drag-handle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 100%;\n  flex-shrink: 0;\n  cursor: grab;\n  opacity: 0.35;\n  color: var(--pg-colors-text-secondary, #475569);\n  margin-right: 4px;\n}\n.pg-row-drag-handle:hover { opacity: 0.7; }\n.pg-row-drag-handle:active { cursor: grabbing; }\n\n.pg-row-drag-ghost {\n  position: fixed;\n  pointer-events: none;\n  z-index: 9999;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 10px;\n  border-radius: var(--pg-borders-radius-md, 6px);\n  border: 1.5px solid var(--pg-colors-primary, #2563eb);\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-primary, #2563eb);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-weight: 500;\n  box-shadow: 0 6px 24px rgba(37,99,235,0.13), 0 2px 8px rgba(37,99,235,0.12);\n  transform: translate(12px, -50%);\n  white-space: nowrap;\n  max-width: 240px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.pg-row-drag-ghost__icon { display: inline-flex; align-items: center; opacity: 0.8; }\n.pg-row-drag-ghost__icon--block { display: none; }\n.pg-row-drag-ghost__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n\n.pg-row-drag-ghost--outside {\n  border-color: var(--pg-colors-danger, #ef4444);\n  box-shadow: 0 6px 24px rgba(239,68,68,0.13), 0 2px 8px rgba(239,68,68,0.12);\n  color: var(--pg-colors-danger, #ef4444);\n}\n.pg-row-drag-ghost--outside .pg-row-drag-ghost__icon--drag { display: none; }\n.pg-row-drag-ghost--outside .pg-row-drag-ghost__icon--block { display: inline-flex; }\n\n.pg-row-drop-indicator {\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 2px;\n  background: var(--pg-colors-primary, #2563eb);\n  pointer-events: none;\n  z-index: 100;\n  border-radius: 1px;\n}\n.pg-row-drop-indicator::before {\n  content: '';\n  position: absolute;\n  left: -3px;\n  top: -3px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--pg-colors-primary, #2563eb);\n}\n\n/* The dragged row: semi-transparent, moves to virtual landing position */\n.pg-row--row-dragging { opacity: 0.4; }\n\n/* During row drag: kill hover/click on all rows; animate top changes.\n   Uses top (not transform) so rows stay within panel overflow:hidden bounds. */\n.pg-grid--row-dragging .pg-row {\n  pointer-events: none;\n  will-change: top;\n  transition: background var(--pg-transitions-duration-fast, 100ms),\n              top 130ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n";
+export declare const rowDragCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Row Drag \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-grid__body { position: relative; transform: translateZ(10px);}\n\n.pg-row-drag-handle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 100%;\n  flex-shrink: 0;\n  cursor: grab;\n  opacity: 0.35;\n  color: var(--pg-colors-text-secondary, #475569);\n  margin-right: 4px;\n}\n.pg-row-drag-handle:hover { opacity: 0.7; }\n.pg-row-drag-handle:active { cursor: grabbing; }\n\n.pg-row-drag-ghost {\n  position: fixed;\n  pointer-events: none;\n  z-index: 9999;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 10px;\n  border-radius: var(--pg-borders-radius-md, 6px);\n  border: 1.5px solid var(--pg-colors-primary, #2563eb);\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-primary, #2563eb);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-weight: 500;\n  box-shadow: 0 6px 24px rgba(37,99,235,0.13), 0 2px 8px rgba(37,99,235,0.12);\n  transform: translate(12px, -50%);\n  white-space: nowrap;\n  max-width: 240px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.pg-row-drag-ghost__icon { display: inline-flex; align-items: center; opacity: 0.8; }\n.pg-row-drag-ghost__icon--block { display: none; }\n.pg-row-drag-ghost__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n\n.pg-row-drag-ghost--outside {\n  border-color: var(--pg-colors-danger, #ef4444);\n  box-shadow: 0 6px 24px rgba(239,68,68,0.13), 0 2px 8px rgba(239,68,68,0.12);\n  color: var(--pg-colors-danger, #ef4444);\n}\n.pg-row-drag-ghost--outside .pg-row-drag-ghost__icon--drag { display: none; }\n.pg-row-drag-ghost--outside .pg-row-drag-ghost__icon--block { display: inline-flex; }\n\n.pg-row-drop-indicator {\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 2px;\n  background: var(--pg-colors-primary, #2563eb);\n  pointer-events: none;\n  z-index: 100;\n  border-radius: 1px;\n}\n.pg-row-drop-indicator::before {\n  content: '';\n  position: absolute;\n  left: -3px;\n  top: -3px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--pg-colors-primary, #2563eb);\n}\n\n/* The dragged row: semi-transparent, moves to virtual landing position */\n.pg-row--row-dragging { opacity: 0.4; }\n\n/* During row drag: kill hover/click on all rows; animate top changes.\n   Uses top (not transform) so rows stay within panel overflow:hidden bounds. */\n.pg-grid--row-dragging .pg-row {\n  pointer-events: none;\n  will-change: top;\n  transition: background var(--pg-transitions-duration-fast, 100ms),\n              top 130ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n";
 //# sourceMappingURL=row-drag.css.d.ts.map

package/styles/base/row-drag.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"row-drag.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/row-drag.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,0xFAoFtB,CAAC"}
+{"version":3,"file":"row-drag.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/row-drag.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,szFAoFtB,CAAC"}

package/styles/base/row-drag.css.js

@@ -6,7 +6,7 @@
  * cascade depends on it.
  */
 export const rowDragCss = `/* ──────────────────── Row Drag ──────────────────── */
-.pg-grid__body { position: relative; }
+.pg-grid__body { position: relative; transform: translateZ(10px);}
 
 .pg-row-drag-handle {
   display: inline-flex;

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

@@ -5,5 +5,5 @@
  * base-styles.ts; edit here, not there. Order is preserved because CSS
  * cascade depends on it.
  */
-export declare const rowsCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-row {\n  display: flex;\n  align-items: stretch;\n  position: absolute;\n  left: 0;\n  width: 100%;\n  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n  background: var(--pg-colors-row-background, #fff);\n  transition: background var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-row--hover { background: var(--pg-colors-row-hover, #f0f7ff) !important; }\n.pg-row--alt { background: var(--pg-colors-row-background-alt, #f8fafc); }\n.pg-row--selected {\n  background: var(--pg-colors-row-selected, #eff6ff) !important;\n  outline: none;\n}\n.pg-row--selected .pg-cell { color: inherit; }\n.pg-row--group {\n  background: var(--pg-colors-group-row-background, #f8fafc);\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  // border-left: var(--pg-group-row-border-width, 3px) solid var(--pg-colors-primary, #2563eb);\n  cursor: pointer;\n}\n.pg-row--group:hover,\n.pg-row--group.pg-row--hover {\n  background: var(--pg-colors-group-row-hover, #eff2ff) !important;\n}\n.pg-row--group:hover .pg-row-group__toggle,\n.pg-row--group.pg-row--hover .pg-row-group__toggle {\n  background: var(--pg-colors-group-toggle-hover, rgba(37, 99, 235, 0.1));\n  color: var(--pg-colors-primary, #2563eb);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Group footer row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/*\n * Appears below the last leaf child of each expanded group.\n * Shows the same aggregate values as the group header row (AG Grid groupIncludeFooter).\n * Cells are fully selectable and copyable; editing is blocked because values are computed.\n */\n.pg-row--group-footer {\n  background: var(--pg-colors-group-footer-background, #eef2fa);\n  font-style: italic;\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  border-bottom: 2px solid var(--pg-colors-primary-light, #bfdbfe);\n  cursor: default;\n}\n.pg-row--group-footer:hover,\n.pg-row--group-footer.pg-row--hover {\n  background: var(--pg-colors-group-footer-hover, #e0e9f8) !important;\n}\n/* Level-based indentation mirrors the group header rules */\n.pg-row--group-footer[data-level=\"0\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-0, 8px); }\n.pg-row--group-footer[data-level=\"1\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-1, 28px); }\n.pg-row--group-footer[data-level=\"2\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-2, 48px); }\n.pg-row--group-footer[data-level=\"3\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-3, 68px); }\n.pg-row--group-footer[data-level=\"4\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-4, 88px); }\n.pg-row--group-footer[data-level=\"5\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-5, 108px); }\n.pg-row--group-footer .pg-row-group__label {\n  color: var(--pg-colors-text-secondary, #475569);\n}\n/* Dark-mode overrides */\n.pg-grid[data-theme=\"dark\"] .pg-row--group-footer {\n  background: var(--pg-colors-group-footer-background, rgba(37, 99, 235, 0.06));\n  border-bottom-color: rgba(96, 165, 250, 0.28);\n}\n.pg-grid[data-theme=\"dark\"] .pg-row--group-footer:hover,\n.pg-grid[data-theme=\"dark\"] .pg-row--group-footer.pg-row--hover {\n  background: var(--pg-colors-group-footer-hover, rgba(37, 99, 235, 0.11)) !important;\n}\n.pg-grid[data-theme=\"dark\"] .pg-row--group-footer .pg-row-group__label {\n  color: var(--pg-colors-text-secondary, #94a3b8);\n}\n\n";
+export declare const rowsCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-row {\n  display: flex;\n  align-items: stretch;\n  position: absolute;\n  left: 0;\n  width: 100%;\n  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n  background: var(--pg-colors-row-background, #fff);\n  transition: background var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-row--hover { background: var(--pg-colors-row-hover, #f0f7ff) !important; }\n.pg-row--alt { background: var(--pg-colors-row-background-alt, #f8fafc); }\n.pg-row--selected {\n  background: var(--pg-colors-row-selected, #eff6ff) !important;\n  outline: none;\n}\n.pg-row--selected .pg-cell { color: inherit; }\n\n/* Row-selection outline \u2014 a thin primary-coloured border drawn around the\n   whole selected block, mirroring the cell-range selection border. Edges are\n   drawn via ::after so corners connect cleanly; JS (BodyRenderer.refreshRow-\n   SelectionEdges) adds the edge classes only on the block's outer rows/parts\n   (top of a run, bottom of a run, leftmost part, rightmost part) so interior\n   boundaries between adjacent selected rows carry no line. */\n.pg-row--selected::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border: 0 solid var(--pg-colors-primary, #2563eb);\n  pointer-events: none;\n  z-index: 3;\n}\n.pg-row--sel-top::after        { border-top-width:    1px; }\n.pg-row--sel-bottom::after     { border-bottom-width: 1px; }\n.pg-row--sel-edge-left::after  { border-left-width:   1px; }\n.pg-row--sel-edge-right::after { border-right-width:  1px; }\n.pg-row--group {\n  background: var(--pg-colors-group-row-background, #f8fafc);\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  // border-left: var(--pg-group-row-border-width, 3px) solid var(--pg-colors-primary, #2563eb);\n  cursor: pointer;\n}\n.pg-row--group:hover,\n.pg-row--group.pg-row--hover {\n  background: var(--pg-colors-group-row-hover, var(--pg-colors-row-hover, #eff2ff)) !important;\n}\n.pg-row--group:hover .pg-row-group__toggle,\n.pg-row--group.pg-row--hover .pg-row-group__toggle {\n  background: var(--pg-colors-group-toggle-hover, rgba(37, 99, 235, 0.1));\n  color: var(--pg-colors-primary, #2563eb);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Group footer row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/*\n * Appears below the last leaf child of each expanded group.\n * Shows the same aggregate values as the group header row (AG Grid groupIncludeFooter).\n * Cells are fully selectable and copyable; editing is blocked because values are computed.\n */\n.pg-row--group-footer {\n  background: var(--pg-colors-group-footer-background, var(--pg-colors-background-alt, #eef2fa));\n  font-style: italic;\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  border-bottom: 2px solid var(--pg-colors-primary-light, var(--pg-colors-border-strong, #bfdbfe));\n  cursor: default;\n}\n.pg-row--group-footer:hover,\n.pg-row--group-footer.pg-row--hover {\n  background: var(--pg-colors-group-footer-hover, var(--pg-colors-row-hover, #e0e9f8)) !important;\n}\n/* Level-based indentation mirrors the group header rules */\n.pg-row--group-footer[data-level=\"0\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-0, 8px); }\n.pg-row--group-footer[data-level=\"1\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-1, 28px); }\n.pg-row--group-footer[data-level=\"2\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-2, 48px); }\n.pg-row--group-footer[data-level=\"3\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-3, 68px); }\n.pg-row--group-footer[data-level=\"4\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-4, 88px); }\n.pg-row--group-footer[data-level=\"5\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-5, 108px); }\n.pg-row--group-footer .pg-row-group__label {\n  color: var(--pg-colors-text-secondary, #475569);\n}\n\n";
 //# sourceMappingURL=rows.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"rows.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/rows.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,0uHA0EnB,CAAC"}
+{"version":3,"file":"rows.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/rows.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,mqIAiFnB,CAAC"}

package/styles/base/rows.css.js

@@ -23,6 +23,25 @@ export const rowsCss = `/* ─────────────────
   outline: none;
 }
 .pg-row--selected .pg-cell { color: inherit; }
+
+/* Row-selection outline — a thin primary-coloured border drawn around the
+   whole selected block, mirroring the cell-range selection border. Edges are
+   drawn via ::after so corners connect cleanly; JS (BodyRenderer.refreshRow-
+   SelectionEdges) adds the edge classes only on the block's outer rows/parts
+   (top of a run, bottom of a run, leftmost part, rightmost part) so interior
+   boundaries between adjacent selected rows carry no line. */
+.pg-row--selected::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 0 solid var(--pg-colors-primary, #2563eb);
+  pointer-events: none;
+  z-index: 3;
+}
+.pg-row--sel-top::after        { border-top-width:    1px; }
+.pg-row--sel-bottom::after     { border-bottom-width: 1px; }
+.pg-row--sel-edge-left::after  { border-left-width:   1px; }
+.pg-row--sel-edge-right::after { border-right-width:  1px; }
 .pg-row--group {
   background: var(--pg-colors-group-row-background, #f8fafc);
   font-weight: var(--pg-typography-font-weight-semi-bold, 600);
@@ -31,7 +50,7 @@ export const rowsCss = `/* ─────────────────
 }
 .pg-row--group:hover,
 .pg-row--group.pg-row--hover {
-  background: var(--pg-colors-group-row-hover, #eff2ff) !important;
+  background: var(--pg-colors-group-row-hover, var(--pg-colors-row-hover, #eff2ff)) !important;
 }
 .pg-row--group:hover .pg-row-group__toggle,
 .pg-row--group.pg-row--hover .pg-row-group__toggle {
@@ -46,15 +65,15 @@ export const rowsCss = `/* ─────────────────
  * Cells are fully selectable and copyable; editing is blocked because values are computed.
  */
 .pg-row--group-footer {
-  background: var(--pg-colors-group-footer-background, #eef2fa);
+  background: var(--pg-colors-group-footer-background, var(--pg-colors-background-alt, #eef2fa));
   font-style: italic;
   font-weight: var(--pg-typography-font-weight-semi-bold, 600);
-  border-bottom: 2px solid var(--pg-colors-primary-light, #bfdbfe);
+  border-bottom: 2px solid var(--pg-colors-primary-light, var(--pg-colors-border-strong, #bfdbfe));
   cursor: default;
 }
 .pg-row--group-footer:hover,
 .pg-row--group-footer.pg-row--hover {
-  background: var(--pg-colors-group-footer-hover, #e0e9f8) !important;
+  background: var(--pg-colors-group-footer-hover, var(--pg-colors-row-hover, #e0e9f8)) !important;
 }
 /* Level-based indentation mirrors the group header rules */
 .pg-row--group-footer[data-level="0"] .pg-row-group__cell { padding-left: var(--pg-group-indent-0, 8px); }
@@ -66,18 +85,6 @@ export const rowsCss = `/* ─────────────────
 .pg-row--group-footer .pg-row-group__label {
   color: var(--pg-colors-text-secondary, #475569);
 }
-/* Dark-mode overrides */
-.pg-grid[data-theme="dark"] .pg-row--group-footer {
-  background: var(--pg-colors-group-footer-background, rgba(37, 99, 235, 0.06));
-  border-bottom-color: rgba(96, 165, 250, 0.28);
-}
-.pg-grid[data-theme="dark"] .pg-row--group-footer:hover,
-.pg-grid[data-theme="dark"] .pg-row--group-footer.pg-row--hover {
-  background: var(--pg-colors-group-footer-hover, rgba(37, 99, 235, 0.11)) !important;
-}
-.pg-grid[data-theme="dark"] .pg-row--group-footer .pg-row-group__label {
-  color: var(--pg-colors-text-secondary, #94a3b8);
-}
 
 `;
 //# sourceMappingURL=rows.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"rows.css.js","sourceRoot":"","sources":["../../../src/styles/base/rows.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EtB,CAAC"}
+{"version":3,"file":"rows.css.js","sourceRoot":"","sources":["../../../src/styles/base/rows.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFtB,CAAC"}

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

@@ -5,5 +5,5 @@
  * base-styles.ts; edit here, not there. Order is preserved because CSS
  * cascade depends on it.
  */
-export declare const scrollbarsCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Scrollbars \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Native vertical scrollbar \u2014 flex item that lives beside the center panel.\n   It is NOT absolutely positioned so it never overlaps cell content; the center\n   panel shrinks to make room for it, keeping every cell border fully visible. */\n.pg-scrollbar-v-native {\n  flex-shrink: 0;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n.pg-scrollbar-v-spacer {\n  width: 1px;\n  pointer-events: none;\n}\n/* Horizontal row: sits below the body */\n.pg-scrollbar-h-row {\n  display: flex;\n  flex-direction: row;\n  flex-shrink: 0;\n  border-top: 1px solid var(--pg-colors-border, #e2e8f0);\n}\n.pg-scrollbar-h-spacer { flex-shrink: 0; background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc)); }\n.pg-scrollbar-h-spacer--left  { width: var(--pg-left-panel-width, 0px); overflow: scroll; }\n.pg-scrollbar-h-spacer--right { width: var(--pg-right-panel-width, 0px); overflow: scroll; }\n/* Aligns the h-scroll track with the narrowed center panel (which is now\n   offset by the vertical scrollbar width captured in --pg-scrollbar-v-width). */\n.pg-scrollbar-h-spacer--vscroll {\n  flex-shrink: 0;\n  width: 0px;\n  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n/* Native horizontal scrollbar container */\n.pg-scrollbar-h-native {\n  flex: 1 1 0;\n  min-width: 0;\n  overflow-x: scroll;\n  overflow-y: hidden;\n  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n.pg-scrollbar-h-content {\n  height: 1px;\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Themed native scrollbar (track + thumb) \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   Without these the browser paints its default (light) scrollbar, so dark\n   themes showed white bars. Colours come from theme tokens with light-theme\n   fallbacks, so every theme \u2014 including custom ones \u2014 themes automatically.\n   Firefox uses scrollbar-color; Chromium/Safari use the ::-webkit pseudos. */\n.pg-scrollbar-v-native,\n.pg-scrollbar-h-native,\n.pg-scrollbar-h-spacer--left,\n.pg-scrollbar-h-spacer--right {\n  // scrollbar-width: thin;\n  scrollbar-color: var(--pg-colors-scrollbar-thumb, #ffffff) var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n.pg-scrollbar-v-native::-webkit-scrollbar,\n.pg-scrollbar-h-native::-webkit-scrollbar,\n.pg-scrollbar-h-spacer--left::-webkit-scrollbar,\n.pg-scrollbar-h-spacer--right::-webkit-scrollbar {\n  // width: var(--pg-scrollbar-v-width, 12px);\n  // height: var(--pg-scrollbar-h-height, 12px);\n  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n.pg-scrollbar-v-native::-webkit-scrollbar-track,\n.pg-scrollbar-h-native::-webkit-scrollbar-track,\n.pg-scrollbar-h-spacer--left::-webkit-scrollbar-track,\n.pg-scrollbar-h-spacer--right::-webkit-scrollbar-track {\n  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n.pg-scrollbar-v-native::-webkit-scrollbar-thumb,\n.pg-scrollbar-h-native::-webkit-scrollbar-thumb,\n.pg-scrollbar-h-spacer--left::-webkit-scrollbar-thumb,\n.pg-scrollbar-h-spacer--right::-webkit-scrollbar-thumb {\n  background: var(--pg-colors-scrollbar-thumb, #cbd5e1);\n  // border-radius: 8px;\n  // border: 3px solid var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n.pg-scrollbar-v-native::-webkit-scrollbar-thumb:hover,\n.pg-scrollbar-h-native::-webkit-scrollbar-thumb:hover,\n.pg-scrollbar-h-spacer--left::-webkit-scrollbar-thumb:hover,\n.pg-scrollbar-h-spacer--right::-webkit-scrollbar-thumb:hover {\n  background: var(--pg-colors-scrollbar-thumb-hover, #94a3b8);\n}\n.pg-scrollbar-v-native::-webkit-scrollbar-corner,\n.pg-scrollbar-h-native::-webkit-scrollbar-corner {\n  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n\n/* Hidden state \u2014 applied to wraps */\n.pg-scrollbar--hidden { display: none; }\n\n";
+export declare const scrollbarsCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Scrollbars \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Native vertical scrollbar \u2014 flex item that lives beside the center panel.\n   It is NOT absolutely positioned so it never overlaps cell content; the center\n   panel shrinks to make room for it, keeping every cell border fully visible. */\n.pg-scrollbar-v-native {\n  flex-shrink: 0;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n.pg-scrollbar-v-spacer {\n  width: 1px;\n  pointer-events: none;\n}\n/* Horizontal row: sits below the body */\n.pg-scrollbar-h-row {\n  display: flex;\n  flex-direction: row;\n  flex-shrink: 0;\n  border-top: 1px solid var(--pg-colors-border, #e2e8f0);\n}\n.pg-scrollbar-h-spacer { flex-shrink: 0; background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc)); }\n.pg-scrollbar-h-spacer--left  { width: var(--pg-left-panel-width, 0px); overflow: scroll; }\n.pg-scrollbar-h-spacer--right { width: var(--pg-right-panel-width, 0px); overflow: scroll; }\n/* Aligns the h-scroll track with the narrowed center panel: reserves exactly\n   the vertical scrollbar's *current* width (0 when hidden) so the native\n   h-scroll container's client width equals the center viewport \u2014 otherwise the\n   track is wider than the panel and the body scrolls short by the scrollbar\n   width, leaving the last column partly hidden. */\n.pg-scrollbar-h-spacer--vscroll {\n  flex-shrink: 0;\n  width: var(--pg-scrollbar-v-live-width, 0px);\n  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n/* Native horizontal scrollbar container */\n.pg-scrollbar-h-native {\n  flex: 1 1 0;\n  min-width: 0;\n  overflow-x: scroll;\n  overflow-y: hidden;\n  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n.pg-scrollbar-h-content {\n  height: 1px;\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Themed native scrollbar (track + thumb) \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   Without these the browser paints its default (light) scrollbar, so dark\n   themes showed white bars. Colours come from theme tokens with light-theme\n   fallbacks, so every theme \u2014 including custom ones \u2014 themes automatically.\n   Firefox uses scrollbar-color; Chromium/Safari use the ::-webkit pseudos. */\n.pg-scrollbar-v-native,\n.pg-scrollbar-h-native,\n.pg-scrollbar-h-spacer--left,\n.pg-scrollbar-h-spacer--right {\n  // scrollbar-width: thin;\n  scrollbar-color: var(--pg-colors-scrollbar-thumb, #ffffff) var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n.pg-scrollbar-v-native::-webkit-scrollbar,\n.pg-scrollbar-h-native::-webkit-scrollbar,\n.pg-scrollbar-h-spacer--left::-webkit-scrollbar,\n.pg-scrollbar-h-spacer--right::-webkit-scrollbar {\n  // width: var(--pg-scrollbar-v-width, 12px);\n  // height: var(--pg-scrollbar-h-height, 12px);\n  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n.pg-scrollbar-v-native::-webkit-scrollbar-track,\n.pg-scrollbar-h-native::-webkit-scrollbar-track,\n.pg-scrollbar-h-spacer--left::-webkit-scrollbar-track,\n.pg-scrollbar-h-spacer--right::-webkit-scrollbar-track {\n  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n.pg-scrollbar-v-native::-webkit-scrollbar-thumb,\n.pg-scrollbar-h-native::-webkit-scrollbar-thumb,\n.pg-scrollbar-h-spacer--left::-webkit-scrollbar-thumb,\n.pg-scrollbar-h-spacer--right::-webkit-scrollbar-thumb {\n  background: var(--pg-colors-scrollbar-thumb, #cbd5e1);\n  // border-radius: 8px;\n  // border: 3px solid var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n.pg-scrollbar-v-native::-webkit-scrollbar-thumb:hover,\n.pg-scrollbar-h-native::-webkit-scrollbar-thumb:hover,\n.pg-scrollbar-h-spacer--left::-webkit-scrollbar-thumb:hover,\n.pg-scrollbar-h-spacer--right::-webkit-scrollbar-thumb:hover {\n  background: var(--pg-colors-scrollbar-thumb-hover, #94a3b8);\n}\n.pg-scrollbar-v-native::-webkit-scrollbar-corner,\n.pg-scrollbar-h-native::-webkit-scrollbar-corner {\n  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n\n/* Hidden state \u2014 applied to wraps */\n.pg-scrollbar--hidden { display: none; }\n\n";
 //# sourceMappingURL=scrollbars.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"scrollbars.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/scrollbars.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,g2IA6FzB,CAAC"}
+{"version":3,"file":"scrollbars.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/scrollbars.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,ulJAgGzB,CAAC"}

package/styles/base/scrollbars.css.js

@@ -30,11 +30,14 @@ export const scrollbarsCss = `/* ───────────────
 .pg-scrollbar-h-spacer { flex-shrink: 0; background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc)); }
 .pg-scrollbar-h-spacer--left  { width: var(--pg-left-panel-width, 0px); overflow: scroll; }
 .pg-scrollbar-h-spacer--right { width: var(--pg-right-panel-width, 0px); overflow: scroll; }
-/* Aligns the h-scroll track with the narrowed center panel (which is now
-   offset by the vertical scrollbar width captured in --pg-scrollbar-v-width). */
+/* Aligns the h-scroll track with the narrowed center panel: reserves exactly
+   the vertical scrollbar's *current* width (0 when hidden) so the native
+   h-scroll container's client width equals the center viewport — otherwise the
+   track is wider than the panel and the body scrolls short by the scrollbar
+   width, leaving the last column partly hidden. */
 .pg-scrollbar-h-spacer--vscroll {
   flex-shrink: 0;
-  width: 0px;
+  width: var(--pg-scrollbar-v-live-width, 0px);
   background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));
 }
 /* Native horizontal scrollbar container */

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

@@ -1 +1 @@
-{"version":3,"file":"scrollbars.css.js","sourceRoot":"","sources":["../../../src/styles/base/scrollbars.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6F5B,CAAC"}
+{"version":3,"file":"scrollbars.css.js","sourceRoot":"","sources":["../../../src/styles/base/scrollbars.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgG5B,CAAC"}

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

@@ -5,5 +5,5 @@
  * base-styles.ts; edit here, not there. Order is preserved because CSS
  * cascade depends on it.
  */
-export declare const sparklineCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Context menu submenu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-context-menu__item { display: flex; align-items: center; gap: 8px; }\n.pg-context-menu__item--has-sub { position: relative; padding-right: 28px; max-width: stretch; }\n.pg-context-menu__item--has-sub > .pg-context-menu__sub { display: none; }\n.pg-context-menu__item--has-sub:hover > .pg-context-menu__sub { display: block; }\n.pg-context-menu__sub {\n  position: absolute; left: 100%; top: -4px; z-index: 10001;\n  background: var(--pg-colors-surface,#fff);\n  border: 1px solid var(--pg-colors-border,#e2e8f0);\n  border-radius: var(--pg-borders-radius-md,6px);\n  box-shadow: var(--pg-shadows-dropdown,0 8px 24px rgba(0,0,0,0.12));\n  min-width: 175px; padding: 4px;\n  white-space: nowrap;\n}\n.pg-context-menu__item--has-sub::after {\n  content: '\u203A'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);\n  font-size: 16px; color: var(--pg-colors-text-secondary,#64748b); line-height: 1;\n}\n.pg-context-menu__icon {\n  display: inline-flex; align-items: center; width: 16px; flex-shrink: 0;\n  color: var(--pg-colors-text-secondary,#64748b);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Sparkline cell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Cell value wrapper \u2014 fills the inner cell area as a flex row */\n.pg-cell__value--sparkline {\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n  height: 100%;\n  padding: 0;\n}\n\n/* Wrapper div that stretches canvas to fill the cell */\n.pg-sparkline-wrapper {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n}\n\n/* Canvas element \u2014 fills wrapper, no border or background */\n.pg-sparkline {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  cursor: crosshair;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Sparkline tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Singleton floating tooltip attached to document.body */\n.pg-sparkline-tooltip {\n  position: fixed;\n  z-index: 99999;\n  pointer-events: none;\n  background: var(--pg-colors-surface, #fff);\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-md, 6px);\n  box-shadow: var(--pg-shadows-tooltip, 0 4px 14px rgba(0,0,0,0.12));\n  padding: 6px 10px;\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n  color: var(--pg-colors-text-primary, #0f172a);\n  white-space: nowrap;\n  line-height: 1.5;\n  min-width: 60px;\n}\n.pg-sparkline-tooltip--hidden {\n  display: none;\n}\n\n/* x-axis label row (shown when data is an object array with xKey) */\n.pg-sparkline-tooltip__label {\n  color: var(--pg-colors-text-secondary, #64748b);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  margin-bottom: 2px;\n}\n\n/* Numeric value row */\n.pg-sparkline-tooltip__value {\n  font-weight: 600;\n  color: var(--pg-colors-text-primary, #0f172a);\n}\n\n/* OHLC four-row layout */\n.pg-sparkline-tooltip__ohlc-row {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n}\n.pg-sparkline-tooltip__ohlc-key {\n  color: var(--pg-colors-text-secondary, #64748b);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  min-width: 12px;\n}\n\n";
+export declare const sparklineCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Context menu submenu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-context-menu__item { display: flex; align-items: center; gap: 8px; }\n.pg-context-menu__item--has-sub { position: relative; padding-right: 28px; max-width: stretch; }\n.pg-context-menu__item--has-sub > .pg-context-menu__sub { display: none; }\n.pg-context-menu__item--has-sub:hover > .pg-context-menu__sub { display: block; }\n.pg-context-menu__sub {\n  position: absolute; left: 100%; top: -4px; z-index: 10001;\n  background: var(--pg-colors-surface,#fff);\n  border: 1px solid var(--pg-colors-border,#e2e8f0);\n  border-radius: var(--pg-borders-radius-md,6px);\n  box-shadow: var(--pg-shadows-dropdown,0 8px 24px rgba(0,0,0,0.12));\n  min-width: 175px; padding: 4px;\n  white-space: nowrap;\n}\n/* Viewport-aware flip: when a submenu near the right edge would overflow,\n   JS (positionSubmenu) adds --sub-left so the flyout opens to the left\n   instead. Works at any nesting depth since every wrapper shares the class. */\n.pg-context-menu__item--has-sub.pg-context-menu__item--sub-left > .pg-context-menu__sub {\n  left: auto; right: 100%;\n}\n.pg-context-menu__item--has-sub::after {\n  content: '\u203A'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);\n  font-size: 16px; color: var(--pg-colors-text-secondary,#64748b); line-height: 1;\n}\n.pg-context-menu__icon {\n  display: inline-flex; align-items: center; width: 16px; flex-shrink: 0;\n  color: var(--pg-colors-text-secondary,#64748b);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Sparkline cell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Cell value wrapper \u2014 fills the inner cell area as a flex row */\n.pg-cell__value--sparkline {\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n  height: 100%;\n  padding: 0;\n}\n\n/* Wrapper div that stretches canvas to fill the cell */\n.pg-sparkline-wrapper {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n}\n\n/* Canvas element \u2014 fills wrapper, no border or background */\n.pg-sparkline {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  cursor: crosshair;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Sparkline tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Singleton floating tooltip attached to document.body */\n.pg-sparkline-tooltip {\n  position: fixed;\n  z-index: 99999;\n  pointer-events: none;\n  background: var(--pg-colors-surface, #fff);\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-md, 6px);\n  box-shadow: var(--pg-shadows-tooltip, 0 4px 14px rgba(0,0,0,0.12));\n  padding: 6px 10px;\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n  color: var(--pg-colors-text-primary, #0f172a);\n  white-space: nowrap;\n  line-height: 1.5;\n  min-width: 60px;\n}\n.pg-sparkline-tooltip--hidden {\n  display: none;\n}\n\n/* x-axis label row (shown when data is an object array with xKey) */\n.pg-sparkline-tooltip__label {\n  color: var(--pg-colors-text-secondary, #64748b);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  margin-bottom: 2px;\n}\n\n/* Numeric value row */\n.pg-sparkline-tooltip__value {\n  font-weight: 600;\n  color: var(--pg-colors-text-primary, #0f172a);\n}\n\n/* OHLC four-row layout */\n.pg-sparkline-tooltip__ohlc-row {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n}\n.pg-sparkline-tooltip__ohlc-key {\n  color: var(--pg-colors-text-secondary, #64748b);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  min-width: 12px;\n}\n\n";
 //# sourceMappingURL=sparkline.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sparkline.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/sparkline.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,6uHAoGxB,CAAC"}
+{"version":3,"file":"sparkline.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/sparkline.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,6kIA0GxB,CAAC"}

package/styles/base/sparkline.css.js

@@ -19,6 +19,12 @@ export const sparklineCss = `/* ────────────────
   min-width: 175px; padding: 4px;
   white-space: nowrap;
 }
+/* Viewport-aware flip: when a submenu near the right edge would overflow,
+   JS (positionSubmenu) adds --sub-left so the flyout opens to the left
+   instead. Works at any nesting depth since every wrapper shares the class. */
+.pg-context-menu__item--has-sub.pg-context-menu__item--sub-left > .pg-context-menu__sub {
+  left: auto; right: 100%;
+}
 .pg-context-menu__item--has-sub::after {
   content: '›'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
   font-size: 16px; color: var(--pg-colors-text-secondary,#64748b); line-height: 1;

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

@@ -1 +1 @@
-{"version":3,"file":"sparkline.css.js","sourceRoot":"","sources":["../../../src/styles/base/sparkline.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoG3B,CAAC"}
+{"version":3,"file":"sparkline.css.js","sourceRoot":"","sources":["../../../src/styles/base/sparkline.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0G3B,CAAC"}

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

@@ -5,5 +5,5 @@
  * base-styles.ts; edit here, not there. Order is preserved because CSS
  * cascade depends on it.
  */
-export declare const tooltipCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Custom cell tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Only mounted/shown for columns with renderer.tooltip \u2014 plain columns keep\n * using the free native title attribute. Positioned via a transform set\n * in JS relative to .pg-grid__body so it never affects grid layout. */\n.pg-tooltip {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: var(--pg-z-index-tooltip, 150);\n  max-width: 320px;\n  padding: var(--pg-spacing-xs, 6px) var(--pg-spacing-sm, 10px);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-tooltip-bg, #1f2937);\n  color: var(--pg-colors-tooltip-text, #ffffff);\n  font-family: var(--pg-typography-font-family, sans-serif);\n  font-size: var(--pg-typography-font-size-xs, 12px);\n  line-height: 1.4;\n  box-shadow: var(--pg-shadows-dropdown, 0 4px 12px rgba(0, 0, 0, 0.15));\n  pointer-events: none;\n  opacity: 0;\n  visibility: hidden;\n  transition:\n    opacity var(--pg-transitions-duration-fast, 100ms),\n    visibility var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-tooltip--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n";
+export declare const tooltipCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Custom cell tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Only mounted/shown for columns with renderer.tooltip \u2014 plain columns keep\n * using the free native title attribute. Positioned via a transform set\n * in JS relative to .pg-grid__body so it never affects grid layout. */\n.pg-tooltip {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: var(--pg-z-index-tooltip, 150);\n  max-width: 320px;\n  padding: var(--pg-spacing-xs, 6px) var(--pg-spacing-sm, 10px);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-tooltip-background, #1f2937);\n  color: var(--pg-colors-tooltip-text, #ffffff);\n  font-family: var(--pg-typography-font-family, sans-serif);\n  font-size: var(--pg-typography-font-size-xs, 12px);\n  line-height: 1.4;\n  box-shadow: var(--pg-shadows-dropdown, 0 4px 12px rgba(0, 0, 0, 0.15));\n  pointer-events: none;\n  opacity: 0;\n  visibility: hidden;\n  transition:\n    opacity var(--pg-transitions-duration-fast, 100ms),\n    visibility var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-tooltip--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n";
 //# sourceMappingURL=tooltip.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,+yCA8BtB,CAAC"}
+{"version":3,"file":"tooltip.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,uzCA8BtB,CAAC"}

package/styles/base/tooltip.css.js

@@ -17,7 +17,7 @@ export const tooltipCss = `/* ────────────────
   max-width: 320px;
   padding: var(--pg-spacing-xs, 6px) var(--pg-spacing-sm, 10px);
   border-radius: var(--pg-borders-radius-sm, 4px);
-  background: var(--pg-colors-tooltip-bg, #1f2937);
+  background: var(--pg-colors-tooltip-background, #1f2937);
   color: var(--pg-colors-tooltip-text, #ffffff);
   font-family: var(--pg-typography-font-family, sans-serif);
   font-size: var(--pg-typography-font-size-xs, 12px);

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":"AA4EA,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
@@ -68,7 +67,11 @@ const baseCss = [
     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":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAQ,uBAAuB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAQ,uBAAuB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAQ,uBAAuB,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,4EAA4E;AAC5E,+EAA+E;AAC/E,4EAA4E;AAC5E,+EAA+E;AAC/E,sEAAsE;AACtE,OAAO,EAAE,OAAO,EAAE,MAAmB,iBAAiB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAU,4BAA4B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAS,6BAA6B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAiB,mBAAmB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAiB,mBAAmB,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAiB,mBAAmB,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,MAAmB,iBAAiB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAkB,kBAAkB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAY,yBAAyB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAe,sBAAsB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAmB,iBAAiB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAa,uBAAuB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAgB,oBAAoB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAiB,mBAAmB,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,MAAmB,iBAAiB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAgB,qBAAqB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAa,wBAAwB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAc,sBAAsB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAW,0BAA0B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAe,sBAAsB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAgB,oBAAoB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAY,yBAAyB,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAU,2BAA2B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAU,2BAA2B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAkB,kBAAkB,CAAC;AAExD,MAAM,QAAQ,GAAG,yBAAyB,CAAC;AAE3C,4EAA4E;AAC5E,wEAAwE;AACxE,6BAA6B;AAC7B,MAAM,OAAO,GAAG;IACd,OAAO;IACP,gBAAgB;IAChB,iBAAiB;IACjB,SAAS;IACT,SAAS;IACT,oBAAoB;IACpB,SAAS;IACT,OAAO;IACP,QAAQ;IACR,cAAc;IACd,WAAW;IACX,OAAO;IACP,aAAa;IACb,UAAU;IACV,SAAS;IACT,OAAO;IACP,UAAU;IACV,aAAa;IACb,YAAY;IACZ,oBAAoB;IACpB,eAAe;IACf,WAAW;IACX,UAAU;IACV,cAAc;IACd,gBAAgB;IAChB,gBAAgB;IAChB,QAAQ;CACT,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEX,4EAA4E;AAC5E,6EAA6E;AAC7E,6EAA6E;AAC7E,+CAA+C;AAC/C,MAAM,GAAG,GAAG,CAAC,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,gBAAgB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEnG,MAAM,UAAU,gBAAgB;IAC9B,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE,OAAO;IAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC;IACxB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACnC,CAAC;AAED,MAAM,UAAU,gBAAgB;IAC9B,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;AAC9C,CAAC"}