photon-grid-core 2.0.1 → 2.0.5

package/styles/base/column-chooser.css.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Photon Grid base styles — column-chooser section.
+ *
+ * Auto-split from base-styles.ts. Concatenated back (in order) by
+ * base-styles.ts; edit here, not there. Order is preserved because CSS
+ * cascade depends on it.
+ *
+ * Every value is a theme variable (with a sensible fallback) so the dialog
+ * re-themes with the rest of the grid — light, dark, and custom themes — with
+ * no inline styles anywhere in the component.
+ */
+export declare const columnChooserCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Column Chooser \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Positioning layer only \u2014 no backdrop scrim/blur, and transparent to pointer\n   events so the grid behind stays visible and interactive. The dialog itself\n   re-enables pointer events; outside presses are handled by a document-level\n   listener in the component. */\n.pg-col-chooser__overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  pointer-events: none;\n  font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n}\n\n.pg-col-chooser {\n  pointer-events: auto;\n  display: flex;\n  flex-direction: column;\n  width: 320px;\n  max-width: calc(100vw - 32px);\n  max-height: min(70vh, 560px);\n  background: var(--pg-colors-surface, #ffffff);\n  color: var(--pg-colors-text-primary, #0f172a);\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-lg, 10px);\n  box-shadow: var(--pg-shadows-dialog, var(--pg-shadows-dropdown, 0 12px 32px rgba(15, 23, 42, 0.18)));\n  font-size: var(--pg-typography-font-size-sm, 13px);\n  overflow: hidden;\n}\n\n/* \u2500\u2500 Header \u2500\u2500 */\n.pg-col-chooser__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 12px 14px;\n  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n}\n.pg-col-chooser__title {\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  font-size: var(--pg-typography-font-size-md, 14px);\n}\n.pg-col-chooser__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  padding: 0;\n  border: none;\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: transparent;\n  color: var(--pg-colors-text-secondary, #64748b);\n  cursor: pointer;\n  transition: background var(--pg-transitions-fast, 80ms ease), color var(--pg-transitions-fast, 80ms ease);\n}\n.pg-col-chooser__close:hover {\n  background: var(--pg-colors-background-alt, #f1f5f9);\n  color: var(--pg-colors-text-primary, #0f172a);\n}\n\n/* \u2500\u2500 Search \u2500\u2500 */\n.pg-col-chooser__search {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 10px 14px;\n}\n.pg-col-chooser__search-icon {\n  position: absolute;\n  left: 24px;\n  display: inline-flex;\n  color: var(--pg-colors-text-secondary, #94a3b8);\n  pointer-events: none;\n}\n.pg-col-chooser__search-input {\n  width: 100%;\n  padding: 7px 10px 7px 30px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-md, 6px);\n  background: var(--pg-colors-background, #ffffff);\n  color: var(--pg-colors-text-primary, #0f172a);\n  font-family: inherit;\n  font-size: inherit;\n  outline: none;\n  transition: border-color var(--pg-transitions-fast, 80ms ease), box-shadow var(--pg-transitions-fast, 80ms ease);\n}\n.pg-col-chooser__search-input:focus {\n  border-color: var(--pg-colors-primary, #2563eb);\n  box-shadow: 0 0 0 2px var(--pg-colors-primary-soft, rgba(37, 99, 235, 0.16));\n}\n.pg-col-chooser__search-input::placeholder {\n  color: var(--pg-colors-text-secondary, #94a3b8);\n}\n\n/* \u2500\u2500 Body / tree \u2500\u2500 */\n.pg-col-chooser__body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 6px 8px 10px;\n}\n.pg-col-chooser__tree {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Nested indentation \u2014 one step per level, so depth needs no inline geometry. */\n.pg-col-chooser__children {\n  display: flex;\n  flex-direction: column;\n  padding-left: var(--pg-spacing-md, 16px);\n}\n\n.pg-col-chooser__row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 32px;\n  padding: 2px 6px;\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  cursor: pointer;\n  user-select: none;\n  transition: background var(--pg-transitions-fast, 80ms ease);\n}\n.pg-col-chooser__row:hover {\n  background: var(--pg-colors-background-alt, #f1f5f9);\n}\n.pg-col-chooser__row--group {\n  font-weight: var(--pg-typography-font-weight-medium, 500);\n}\n\n/* Expand/collapse chevron (groups) \u2014 spacer variant keeps leaves aligned. */\n.pg-col-chooser__toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  flex-shrink: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--pg-colors-text-secondary, #64748b);\n  cursor: pointer;\n  border-radius: var(--pg-borders-radius-sm, 4px);\n}\n.pg-col-chooser__toggle:hover {\n  color: var(--pg-colors-text-primary, #0f172a);\n}\n.pg-col-chooser__toggle--spacer {\n  cursor: default;\n  pointer-events: none;\n}\n\n/* Themed tri-state checkbox. */\n.pg-col-chooser__checkbox {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n  border: 1.5px solid var(--pg-colors-border-strong, var(--pg-colors-border, #cbd5e1));\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-background, #ffffff);\n  color: transparent;\n  cursor: pointer;\n  transition: background var(--pg-transitions-fast, 80ms ease), border-color var(--pg-transitions-fast, 80ms ease);\n}\n.pg-col-chooser__checkbox > .pg-icon,\n.pg-col-chooser__checkbox > svg {\n  width: 12px;\n  height: 12px;\n  opacity: 0;\n  transition: opacity var(--pg-transitions-fast, 80ms ease);\n}\n.pg-col-chooser__checkbox--checked {\n  background: var(--pg-colors-primary, #2563eb);\n  border-color: var(--pg-colors-primary, #2563eb);\n  color: var(--pg-colors-on-primary, #ffffff);\n}\n.pg-col-chooser__checkbox--checked > .pg-icon,\n.pg-col-chooser__checkbox--checked > svg {\n  opacity: 1;\n}\n/* Indeterminate (some children visible) \u2014 a dash rather than a tick. */\n.pg-col-chooser__checkbox--indeterminate {\n  background: var(--pg-colors-primary, #2563eb);\n  border-color: var(--pg-colors-primary, #2563eb);\n}\n.pg-col-chooser__checkbox--indeterminate::after {\n  content: \"\";\n  width: 8px;\n  height: 2px;\n  border-radius: 1px;\n  background: var(--pg-colors-on-primary, #ffffff);\n}\n.pg-col-chooser__checkbox--indeterminate > .pg-icon,\n.pg-col-chooser__checkbox--indeterminate > svg {\n  display: none;\n}\n.pg-col-chooser__checkbox--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.pg-col-chooser__checkbox:focus-visible {\n  outline: 2px solid var(--pg-colors-primary, #2563eb);\n  outline-offset: 1px;\n}\n\n.pg-col-chooser__label {\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pg-col-chooser__empty {\n  padding: 16px 8px;\n  text-align: center;\n  color: var(--pg-colors-text-secondary, #94a3b8);\n}\n";
+//# sourceMappingURL=column-chooser.css.d.ts.map

package/styles/base/column-chooser.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-chooser.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/column-chooser.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB,q1NAoO5B,CAAC"}

package/styles/base/column-chooser.css.js

@@ -0,0 +1,241 @@
+/**
+ * Photon Grid base styles — column-chooser section.
+ *
+ * Auto-split from base-styles.ts. Concatenated back (in order) by
+ * base-styles.ts; edit here, not there. Order is preserved because CSS
+ * cascade depends on it.
+ *
+ * Every value is a theme variable (with a sensible fallback) so the dialog
+ * re-themes with the rest of the grid — light, dark, and custom themes — with
+ * no inline styles anywhere in the component.
+ */
+export const columnChooserCss = `/* ──────────────────── Column Chooser ──────────────────── */
+
+/* Positioning layer only — no backdrop scrim/blur, and transparent to pointer
+   events so the grid behind stays visible and interactive. The dialog itself
+   re-enables pointer events; outside presses are handled by a document-level
+   listener in the component. */
+.pg-col-chooser__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  pointer-events: none;
+  font-family: var(--pg-typography-font-family, system-ui, sans-serif);
+}
+
+.pg-col-chooser {
+  pointer-events: auto;
+  display: flex;
+  flex-direction: column;
+  width: 320px;
+  max-width: calc(100vw - 32px);
+  max-height: min(70vh, 560px);
+  background: var(--pg-colors-surface, #ffffff);
+  color: var(--pg-colors-text-primary, #0f172a);
+  border: 1px solid var(--pg-colors-border, #e2e8f0);
+  border-radius: var(--pg-borders-radius-lg, 10px);
+  box-shadow: var(--pg-shadows-dialog, var(--pg-shadows-dropdown, 0 12px 32px rgba(15, 23, 42, 0.18)));
+  font-size: var(--pg-typography-font-size-sm, 13px);
+  overflow: hidden;
+}
+
+/* ── Header ── */
+.pg-col-chooser__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);
+}
+.pg-col-chooser__title {
+  font-weight: var(--pg-typography-font-weight-semi-bold, 600);
+  font-size: var(--pg-typography-font-size-md, 14px);
+}
+.pg-col-chooser__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: none;
+  border-radius: var(--pg-borders-radius-sm, 4px);
+  background: transparent;
+  color: var(--pg-colors-text-secondary, #64748b);
+  cursor: pointer;
+  transition: background var(--pg-transitions-fast, 80ms ease), color var(--pg-transitions-fast, 80ms ease);
+}
+.pg-col-chooser__close:hover {
+  background: var(--pg-colors-background-alt, #f1f5f9);
+  color: var(--pg-colors-text-primary, #0f172a);
+}
+
+/* ── Search ── */
+.pg-col-chooser__search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 10px 14px;
+}
+.pg-col-chooser__search-icon {
+  position: absolute;
+  left: 24px;
+  display: inline-flex;
+  color: var(--pg-colors-text-secondary, #94a3b8);
+  pointer-events: none;
+}
+.pg-col-chooser__search-input {
+  width: 100%;
+  padding: 7px 10px 7px 30px;
+  border: 1px solid var(--pg-colors-border, #e2e8f0);
+  border-radius: var(--pg-borders-radius-md, 6px);
+  background: var(--pg-colors-background, #ffffff);
+  color: var(--pg-colors-text-primary, #0f172a);
+  font-family: inherit;
+  font-size: inherit;
+  outline: none;
+  transition: border-color var(--pg-transitions-fast, 80ms ease), box-shadow var(--pg-transitions-fast, 80ms ease);
+}
+.pg-col-chooser__search-input:focus {
+  border-color: var(--pg-colors-primary, #2563eb);
+  box-shadow: 0 0 0 2px var(--pg-colors-primary-soft, rgba(37, 99, 235, 0.16));
+}
+.pg-col-chooser__search-input::placeholder {
+  color: var(--pg-colors-text-secondary, #94a3b8);
+}
+
+/* ── Body / tree ── */
+.pg-col-chooser__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 6px 8px 10px;
+}
+.pg-col-chooser__tree {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Nested indentation — one step per level, so depth needs no inline geometry. */
+.pg-col-chooser__children {
+  display: flex;
+  flex-direction: column;
+  padding-left: var(--pg-spacing-md, 16px);
+}
+
+.pg-col-chooser__row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+  padding: 2px 6px;
+  border-radius: var(--pg-borders-radius-sm, 4px);
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--pg-transitions-fast, 80ms ease);
+}
+.pg-col-chooser__row:hover {
+  background: var(--pg-colors-background-alt, #f1f5f9);
+}
+.pg-col-chooser__row--group {
+  font-weight: var(--pg-typography-font-weight-medium, 500);
+}
+
+/* Expand/collapse chevron (groups) — spacer variant keeps leaves aligned. */
+.pg-col-chooser__toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--pg-colors-text-secondary, #64748b);
+  cursor: pointer;
+  border-radius: var(--pg-borders-radius-sm, 4px);
+}
+.pg-col-chooser__toggle:hover {
+  color: var(--pg-colors-text-primary, #0f172a);
+}
+.pg-col-chooser__toggle--spacer {
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Themed tri-state checkbox. */
+.pg-col-chooser__checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  border: 1.5px solid var(--pg-colors-border-strong, var(--pg-colors-border, #cbd5e1));
+  border-radius: var(--pg-borders-radius-sm, 4px);
+  background: var(--pg-colors-background, #ffffff);
+  color: transparent;
+  cursor: pointer;
+  transition: background var(--pg-transitions-fast, 80ms ease), border-color var(--pg-transitions-fast, 80ms ease);
+}
+.pg-col-chooser__checkbox > .pg-icon,
+.pg-col-chooser__checkbox > svg {
+  width: 12px;
+  height: 12px;
+  opacity: 0;
+  transition: opacity var(--pg-transitions-fast, 80ms ease);
+}
+.pg-col-chooser__checkbox--checked {
+  background: var(--pg-colors-primary, #2563eb);
+  border-color: var(--pg-colors-primary, #2563eb);
+  color: var(--pg-colors-on-primary, #ffffff);
+}
+.pg-col-chooser__checkbox--checked > .pg-icon,
+.pg-col-chooser__checkbox--checked > svg {
+  opacity: 1;
+}
+/* Indeterminate (some children visible) — a dash rather than a tick. */
+.pg-col-chooser__checkbox--indeterminate {
+  background: var(--pg-colors-primary, #2563eb);
+  border-color: var(--pg-colors-primary, #2563eb);
+}
+.pg-col-chooser__checkbox--indeterminate::after {
+  content: "";
+  width: 8px;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--pg-colors-on-primary, #ffffff);
+}
+.pg-col-chooser__checkbox--indeterminate > .pg-icon,
+.pg-col-chooser__checkbox--indeterminate > svg {
+  display: none;
+}
+.pg-col-chooser__checkbox--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.pg-col-chooser__checkbox:focus-visible {
+  outline: 2px solid var(--pg-colors-primary, #2563eb);
+  outline-offset: 1px;
+}
+
+.pg-col-chooser__label {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pg-col-chooser__empty {
+  padding: 16px 8px;
+  text-align: center;
+  color: var(--pg-colors-text-secondary, #94a3b8);
+}
+`;
+//# sourceMappingURL=column-chooser.css.js.map

package/styles/base/column-chooser.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-chooser.css.js","sourceRoot":"","sources":["../../../src/styles/base/column-chooser.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoO/B,CAAC"}

package/styles/base/column-context-menu.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 columnContextMenuCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Column Context Menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Menu container \u2014 fixed-position dropdown attached to document.body.\n   Height is capped so the menu never grows into the viewport's top/bottom\n   200px; content beyond that scrolls internally via overflow-y instead of\n   being clipped. Fly-out submenus (.pg-col-ctx-menu__submenu) are portaled to\n   document.body while open rather than nested here, so this container's\n   scroll clipping never cuts them off on the X axis. */\n.pg-col-ctx-menu {\n  position: fixed;\n  z-index: 9999;\n  min-width: 220px;\n  max-width: 300px;\n  max-height: calc(100% - 200px);\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 4px;\n  background: var(--pg-colors-surface, #ffffff);\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(15, 23, 42, 0.12));\n  font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n  font-size: var(--pg-typography-font-size-sm, 13px);\n  color: var(--pg-colors-text-primary, #0f172a);\n  user-select: none;\n  outline: none;\n}\n\n/* Horizontal divider between section groups */\n.pg-col-ctx-menu__separator {\n  border-top: 1px solid var(--pg-colors-border-col-ctxt-menu, #e2e8f0);\n  background: var(--pg-colors-border, #e2e8f0);\n  margin: 4px 0;\n}\n\n/* \u2500\u2500 Menu items \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\u2500\u2500 */\n\n/* Base item \u2014 covers both leaf items and parent (submenu-trigger) items */\n.pg-col-ctx-menu__item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 10px;\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  cursor: pointer;\n  transition: background var(--pg-transitions-fast, 80ms ease);\n  outline: none;\n  white-space: nowrap;\n}\n\n.pg-col-ctx-menu__item:hover,\n.pg-col-ctx-menu__item:focus-visible {\n  background: var(--pg-colors-background-alt, #f1f5f9);\n}\n\n/* Highlighted / \"currently applied\" item (e.g. active sort direction) */\n.pg-col-ctx-menu__item--active {\n  color: var(--pg-colors-primary, #2563eb);\n  font-weight: 600;\n}\n\n/* Disabled item \u2014 rendered but not interactive */\n.pg-col-ctx-menu__item--disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Item anatomy \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\u2500 */\n\n/* Leading icon */\n.pg-col-ctx-menu__item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 16px;\n  height: 16px;\n  opacity: 0.6;\n}\n\n.pg-col-ctx-menu__item--active .pg-col-ctx-menu__item-icon {\n  opacity: 1;\n}\n\n/* Text label \u2014 fills remaining space */\n.pg-col-ctx-menu__item-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Trailing chevron indicating a fly-out submenu */\n.pg-col-ctx-menu__item-chevron {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n  opacity: 0.4;\n  margin-left: 4px;\n  transition: opacity var(--pg-transitions-fast, 80ms ease);\n}\n\n.pg-col-ctx-menu__item--has-submenu:hover .pg-col-ctx-menu__item-chevron {\n  opacity: 0.75;\n}\n\n/* \u2500\u2500 Fly-out submenu \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\n/* Hidden by default; shown when JS adds --open. Positioned fixed rather than\n   absolute-within-parent because it is portaled to document.body while open\n   (see ColumnMenu.openSubmenu) \u2014 left/top are set inline in viewport\n   coordinates by adjustSubmenuPosition. */\n.pg-col-ctx-menu__submenu {\n  display: none;\n  position: fixed;\n  min-width: 180px;\n  padding: 4px;\n  background: var(--pg-colors-surface, #ffffff);\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(15, 23, 42, 0.12));\n  z-index: 10000;\n}\n\n/* JS-controlled open state */\n.pg-col-ctx-menu__submenu--open {\n  display: block;\n}\n\n/* Invisible hover bridge \u2014 prevents flicker when mouse crosses from\n   parent item edge into the submenu. Extends 6px to the left of the submenu. */\n.pg-col-ctx-menu__submenu--open::before {\n  content: '';\n  position: absolute;\n  right: 100%;\n  top: 0;\n  width: 8px;\n  height: 100%;\n}\n\n";
+export declare const columnContextMenuCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Column Context Menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Menu container \u2014 fixed-position dropdown attached to document.body.\n   Height is capped so the menu never grows into the viewport's top/bottom\n   200px; content beyond that scrolls internally via overflow-y instead of\n   being clipped. Fly-out submenus (.pg-col-ctx-menu__submenu) are portaled to\n   document.body while open rather than nested here, so this container's\n   scroll clipping never cuts them off on the X axis. */\n.pg-col-ctx-menu {\n  position: fixed;\n  z-index: 9999;\n  min-width: 220px;\n  max-width: 300px;\n  max-height: calc(100% - 200px);\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 4px;\n  background: var(--pg-colors-surface, #ffffff);\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(15, 23, 42, 0.12));\n  font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n  font-size: var(--pg-typography-font-size-sm, 13px);\n  color: var(--pg-colors-text-primary, #0f172a);\n  user-select: none;\n  outline: none;\n  /* Theme the internal overflow scrollbar so it matches the surface in dark\n     mode too (the menu is portaled to <body>, outside the grid's own\n     scrollbar styling \u2014 these tokens are mirrored onto :root by ThemeManager). */\n  scrollbar-width: thin;\n  scrollbar-color: var(--pg-colors-scrollbar-thumb, #cbd5e1) var(--pg-colors-scrollbar-track, #f1f5f9);\n}\n\n/* Horizontal divider between section groups.\n   Uses the themed border token \u2014 a non-existent token here would fall back to\n   a hardcoded light value and paint a bright line in dark mode. */\n.pg-col-ctx-menu__separator {\n  height: 1px;\n  background: var(--pg-colors-border, #e2e8f0);\n  margin: 4px 0;\n}\n\n/* \u2500\u2500 Menu items \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\u2500\u2500 */\n\n/* Base item \u2014 covers both leaf items and parent (submenu-trigger) items */\n.pg-col-ctx-menu__item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 10px;\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  cursor: pointer;\n  transition: background var(--pg-transitions-duration-fast, 80ms) ease;\n  outline: none;\n  white-space: nowrap;\n}\n\n/* Hover / keyboard-focus background. Uses header-hover (distinct from the menu\n   surface in both light and dark themes) rather than background-alt, which\n   collapses to the surface colour in dark mode and leaves hover invisible. */\n.pg-col-ctx-menu__item:hover,\n.pg-col-ctx-menu__item:focus-visible {\n  background: var(--pg-colors-header-hover, #f1f5f9);\n}\n\n/* Highlighted / \"currently applied\" item (e.g. active sort direction) */\n.pg-col-ctx-menu__item--active {\n  color: var(--pg-colors-primary, #2563eb);\n  font-weight: 600;\n}\n\n/* Trailing check mark for a currently-selected leaf (e.g. the chosen aggregate). */\n.pg-col-ctx-menu__item-check {\n  margin-left: auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 12px;\n  color: var(--pg-colors-primary, #2563eb);\n}\n\n/* Disabled item \u2014 rendered but not interactive */\n.pg-col-ctx-menu__item--disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Item anatomy \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\u2500 */\n\n/* Leading icon */\n.pg-col-ctx-menu__item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 16px;\n  height: 16px;\n  opacity: 0.6;\n}\n\n.pg-col-ctx-menu__item--active .pg-col-ctx-menu__item-icon {\n  opacity: 1;\n}\n\n/* Text label \u2014 fills remaining space */\n.pg-col-ctx-menu__item-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Trailing chevron indicating a fly-out submenu */\n.pg-col-ctx-menu__item-chevron {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n  opacity: 0.4;\n  margin-left: 4px;\n  transition: opacity var(--pg-transitions-duration-fast, 80ms) ease;\n}\n\n.pg-col-ctx-menu__item--has-submenu:hover .pg-col-ctx-menu__item-chevron {\n  opacity: 0.75;\n}\n\n/* \u2500\u2500 Fly-out submenu \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\n/* Hidden by default; shown when JS adds --open. Positioned fixed rather than\n   absolute-within-parent because it is portaled to document.body while open\n   (see ColumnMenu.openSubmenu) \u2014 left/top are set inline in viewport\n   coordinates by adjustSubmenuPosition. */\n.pg-col-ctx-menu__submenu {\n  display: none;\n  position: fixed;\n  min-width: 180px;\n  padding: 4px;\n  background: var(--pg-colors-surface, #ffffff);\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(15, 23, 42, 0.12));\n  /* Portaled to <body>, so it no longer inherits the parent menu's text color\n     (set on .pg-column-context-menu) \u2014 declare it explicitly, or items fall\n     back to the browser default black and are unreadable in dark mode. */\n  color: var(--pg-colors-text-primary, #0f172a);\n  z-index: 10000;\n}\n\n/* JS-controlled open state */\n.pg-col-ctx-menu__submenu--open {\n  display: block;\n}\n\n/* Invisible hover bridge \u2014 prevents flicker when mouse crosses from\n   parent item edge into the submenu. Extends 6px to the left of the submenu. */\n.pg-col-ctx-menu__submenu--open::before {\n  content: '';\n  position: absolute;\n  right: 100%;\n  top: 0;\n  width: 8px;\n  height: 100%;\n}\n\n";
 //# sourceMappingURL=column-context-menu.css.d.ts.map

package/styles/base/column-context-menu.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"column-context-menu.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/column-context-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,gpKAgJhC,CAAC"}
+{"version":3,"file":"column-context-menu.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/column-context-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,i6MAwKhC,CAAC"}

package/styles/base/column-context-menu.css.js

@@ -31,11 +31,18 @@ export const columnContextMenuCss = `/* ─────────────
   color: var(--pg-colors-text-primary, #0f172a);
   user-select: none;
   outline: none;
+  /* Theme the internal overflow scrollbar so it matches the surface in dark
+     mode too (the menu is portaled to <body>, outside the grid's own
+     scrollbar styling — these tokens are mirrored onto :root by ThemeManager). */
+  scrollbar-width: thin;
+  scrollbar-color: var(--pg-colors-scrollbar-thumb, #cbd5e1) var(--pg-colors-scrollbar-track, #f1f5f9);
 }
 
-/* Horizontal divider between section groups */
+/* Horizontal divider between section groups.
+   Uses the themed border token — a non-existent token here would fall back to
+   a hardcoded light value and paint a bright line in dark mode. */
 .pg-col-ctx-menu__separator {
-  border-top: 1px solid var(--pg-colors-border-col-ctxt-menu, #e2e8f0);
+  height: 1px;
   background: var(--pg-colors-border, #e2e8f0);
   margin: 4px 0;
 }
@@ -51,14 +58,17 @@ export const columnContextMenuCss = `/* ─────────────
   padding: 7px 10px;
   border-radius: var(--pg-borders-radius-sm, 4px);
   cursor: pointer;
-  transition: background var(--pg-transitions-fast, 80ms ease);
+  transition: background var(--pg-transitions-duration-fast, 80ms) ease;
   outline: none;
   white-space: nowrap;
 }
 
+/* Hover / keyboard-focus background. Uses header-hover (distinct from the menu
+   surface in both light and dark themes) rather than background-alt, which
+   collapses to the surface colour in dark mode and leaves hover invisible. */
 .pg-col-ctx-menu__item:hover,
 .pg-col-ctx-menu__item:focus-visible {
-  background: var(--pg-colors-background-alt, #f1f5f9);
+  background: var(--pg-colors-header-hover, #f1f5f9);
 }
 
 /* Highlighted / "currently applied" item (e.g. active sort direction) */
@@ -67,6 +77,16 @@ export const columnContextMenuCss = `/* ─────────────
   font-weight: 600;
 }
 
+/* Trailing check mark for a currently-selected leaf (e.g. the chosen aggregate). */
+.pg-col-ctx-menu__item-check {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 12px;
+  color: var(--pg-colors-primary, #2563eb);
+}
+
 /* Disabled item — rendered but not interactive */
 .pg-col-ctx-menu__item--disabled {
   opacity: 0.38;
@@ -108,7 +128,7 @@ export const columnContextMenuCss = `/* ─────────────
   height: 14px;
   opacity: 0.4;
   margin-left: 4px;
-  transition: opacity var(--pg-transitions-fast, 80ms ease);
+  transition: opacity var(--pg-transitions-duration-fast, 80ms) ease;
 }
 
 .pg-col-ctx-menu__item--has-submenu:hover .pg-col-ctx-menu__item-chevron {
@@ -130,6 +150,10 @@ export const columnContextMenuCss = `/* ─────────────
   border: 1px solid var(--pg-colors-border, #e2e8f0);
   border-radius: var(--pg-borders-radius-md, 6px);
   box-shadow: var(--pg-shadows-dropdown, 0 8px 24px rgba(15, 23, 42, 0.12));
+  /* Portaled to <body>, so it no longer inherits the parent menu's text color
+     (set on .pg-column-context-menu) — declare it explicitly, or items fall
+     back to the browser default black and are unreadable in dark mode. */
+  color: var(--pg-colors-text-primary, #0f172a);
   z-index: 10000;
 }
 

package/styles/base/column-context-menu.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-context-menu.css.js","sourceRoot":"","sources":["../../../src/styles/base/column-context-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgJnC,CAAC"}
+{"version":3,"file":"column-context-menu.css.js","sourceRoot":"","sources":["../../../src/styles/base/column-context-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwKnC,CAAC"}

package/styles/base/column-group-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 columnGroupHeaderCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Column group 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-group-row {\n  position: relative;\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}\n.pg-th--group {\n  position: absolute;\n  top: 0;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  background: var(--pg-colors-header-background, #f8fafc);\n  cursor: pointer;\n  outline: none;\n  transition: background var(--pg-transitions-duration-fast, 100ms);\n  font-weight: var(--pg-typography-header-font-weight, 600);\n  font-size: var(--pg-typography-font-size-sm, 13px);\n  color: var(--pg-colors-text-primary, #1e293b);\n  user-select: none;\n}\n.pg-th--group:hover,\n.pg-th--group:focus-visible { background: var(--pg-colors-header-hover, #f1f5f9); }\n.pg-th--group--collapsed {\n  background: var(--pg-colors-background-alt, #f1f5f9);\n  justify-content: center;\n}\n// .pg-th--group--collapsed .pg-th__label { display: none; }\n.pg-th__collapse-btn {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  margin-right: 4px;\n  border-radius: var(--pg-sizing-border-radius, 4px);\n  color: var(--pg-colors-text-secondary, #475569);\n  transition: background var(--pg-transitions-duration-fast, 100ms),\n              color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-th--group:hover .pg-th__collapse-btn,\n.pg-th--group:focus-visible .pg-th__collapse-btn {\n  background: var(--pg-colors-background-alt, #f1f5f9);\n  color: var(--pg-colors-primary, #2563eb);\n}\n.pg-th__resize-handle--group {\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: 6px;\n  height: 100%;\n  cursor: col-resize;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  color: var(--pg-colors-resize-handle-color, #e2e8f0);\n  z-index: 6;\n  transition: opacity var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-th--group:hover .pg-th__resize-handle--group { opacity: 1; }\n\n/* \u2500\u2500 Flat columns alongside grouped headers \u2500\u2500 */\n/* A flat (ungrouped) leaf column in a grid that has grouped columns must span\n   the full header height (group rows + leaf row) so it does not appear as a\n   short stub next to taller group header cells.\n   Strategy: keep the cell in normal flex flow (preserves horizontal layout),\n   give it the combined height, and translateY it upward so its visual top\n   aligns with the top of the header area.  The panel header overflow:hidden\n   clips exactly at the combined height, so nothing leaks outside the header.\n   --pg-group-rows-count is set in JS by HeaderRenderer. */\n.pg-th--no-group {\n  align-self: flex-start;\n  position: relative;\n  z-index: 2;\n  height: calc((var(--pg-group-rows-count, 0) + 1) * var(--pg-header-row-height, 44px));\n  transform: translate(var(--pg-drag-x, 0px), calc(var(--pg-group-rows-count, 0) * -1 * var(--pg-header-row-height, 44px)));\n}\n\n.pg-group-drop-indicator {\n  position: absolute;\n  top: 0;\n  width: 2px;\n  height: var(--pg-header-row-height, 44px);\n  background: var(--pg-colors-primary, #2563eb);\n  z-index: 20;\n  pointer-events: none;\n  border-radius: 1px;\n}\n.pg-th-group-filler { position: absolute; top: 0; height: 100%; }\n.pg-th--standalone-filler {\n  position: absolute;\n  top: 0;\n  height: 100%;\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  pointer-events: none;\n  cursor: default;\n}\n/* Filler cell in a group row for columns with no ancestor group at this depth.\n   Blends with the header background \u2014 makes flat/shallow columns appear to span\n   the full header height.  No interactive elements, no bottom border. */\n.pg-th--depth-filler {\n  position: absolute;\n  top: 0;\n  height: 100%;\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  pointer-events: none;\n  cursor: default;\n  z-index: 0;\n}\n\n@keyframes pg-drag-indicator-in { from { opacity: 0; } to { opacity: 1; } }\n\n/* Smooth column-shift animation \u2014 enabled ONLY while actively dragging a column */\n.pg-grid--col-dragging .pg-th[data-col-id],\n.pg-grid--col-dragging .pg-cell[data-col-id] {\n  transform: translateX(var(--pg-drag-x, 0px));\n  transition: transform 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  will-change: transform;\n}\n.pg-grid--col-dragging .pg-th--no-group[data-col-id] {\n  transform: translate(var(--pg-drag-x, 0px), calc(var(--pg-group-rows-count, 0) * -1 * var(--pg-header-row-height, 44px)));\n}\n\n/* During header auto-scroll the transforms update every RAF tick \u2014 disable the\n   transition so cells snap instantly rather than endlessly chasing a moving target */\n.pg-grid--col-autoscrolling .pg-th[data-col-id],\n.pg-grid--col-autoscrolling .pg-cell[data-col-id] {\n  transition: none;\n}\n/* Live-preview path (store mutations during drag): suppress all transitions */\n.pg-grid--drag-preview-sync .pg-th[data-col-id],\n.pg-grid--drag-preview-sync .pg-cell[data-col-id] {\n  transition: none !important;\n}\n\n/* \u2500\u2500 Group-header CSS-transform drag \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 * Cells shift via --pg-drag-x.  The --pg-drag-transition variable is 0ms for\n * the actively-dragged group (injected by display-group-drag-handler.ts) and\n * falls back to the default 180ms for displaced neighbours \u2014 giving AG Grid-\n * style smooth animation for everything except the grabbed group itself.\n * body cells use the same variable so leaf columns and data rows stay in sync.\n */\n.pg-grid--group-dragging .pg-th--group {\n  transform: translateX(var(--pg-drag-x, 0px));\n  transition: transform var(--pg-drag-transition, 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94));\n  will-change: transform;\n}\n.pg-grid--group-dragging .pg-th[data-col-id] {\n  transform: translateX(var(--pg-drag-x, 0px));\n  transition: transform var(--pg-drag-transition, 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94));\n}\n.pg-grid--group-dragging .pg-cell[data-col-id] {\n  transform: translateX(var(--pg-drag-x, 0px));\n  transition: transform var(--pg-drag-transition, 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94));\n}\n.pg-grid--group-dragging .pg-th--depth-filler {\n  transform: translateX(var(--pg-drag-x, 0px));\n}\n.pg-grid--group-dragging .pg-th--no-group[data-col-id] {\n  transform: translate(var(--pg-drag-x, 0px), calc(var(--pg-group-rows-count, 0) * -1 * var(--pg-header-row-height, 44px)));\n  transition: transform var(--pg-drag-transition, 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94));\n}\n\n/* Column drag ghost (floating preview chip that follows the cursor) */\n.pg-col-drag-ghost {\n  position: fixed;\n  pointer-events: none;\n  z-index: 9999;\n  display: flex;\n  align-items: center;\n  gap: var(--pg-drag-ghost-gap, 8px);\n  padding: 5px 12px 5px 10px;\n  background: var(--pg-colors-drag-ghost-background, #fff);\n  border: 1.5px solid var(--pg-colors-primary, #2563eb);\n  border-radius: var(--pg-borders-radius-md, 6px);\n  box-shadow: 0 6px 24px rgba(0,0,0,0.13), 0 2px 8px rgba(37, 99, 235, 0.12);\n  font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  color: var(--pg-colors-header-text, #374151);\n  white-space: nowrap;\n  user-select: none;\n  transform: translateY(-50%);\n  transition:\n    border-color var(--pg-transitions-duration-fast, 100ms),\n    box-shadow var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-col-drag-ghost__icon {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--pg-colors-primary, #2563eb);\n  opacity: 0.7;\n}\n.pg-col-drag-ghost__label {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Default icon visibility */\n.pg-col-drag-ghost__icon--move        { display: inline-flex; }\n.pg-col-drag-ghost__icon--ban         { display: none; }\n.pg-col-drag-ghost__icon--arrow-left  { display: none; }\n.pg-col-drag-ghost__icon--arrow-right { display: none; }\n\n/* Hide-column state: amber ghost + eyeOff icon */\n.pg-col-drag-ghost__icon--hide { display: none; }\n.pg-col-drag-ghost--hide .pg-col-drag-ghost__icon--move { display: none; }\n.pg-col-drag-ghost--hide .pg-col-drag-ghost__icon--hide { display: inline-flex; color: var(--pg-colors-warning, #f59e0b); }\n.pg-col-drag-ghost--hide {\n  border-color: var(--pg-colors-warning, #f59e0b);\n  box-shadow: 0 6px 24px rgba(245,158,11,0.13), 0 2px 8px rgba(245,158,11,0.12);\n  color: var(--pg-colors-warning, #f59e0b);\n}\n\n/* No-drop state: red ghost + ban icon */\n.pg-col-drag-ghost--no-drop {\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-col-drag-ghost--no-drop .pg-col-drag-ghost__icon { color: var(--pg-colors-danger, #ef4444); }\n.pg-col-drag-ghost--no-drop .pg-col-drag-ghost__icon--move { display: none; }\n.pg-col-drag-ghost--no-drop .pg-col-drag-ghost__icon--ban  { display: inline-flex; }\n\n/* Outside-grid drop state: red ghost signals \"drop = hide all columns in group\" */\n.pg-col-drag-ghost--outside {\n  border-color: var(--pg-colors-danger, #ef4444);\n  box-shadow: 0 6px 24px rgba(239,68,68,0.18), 0 2px 8px rgba(239,68,68,0.14);\n  color: var(--pg-colors-danger, #ef4444);\n  opacity: 0.85;\n}\n.pg-col-drag-ghost--outside .pg-col-drag-ghost__label::after {\n  content: ' (hide)';\n  font-size: 10px;\n  opacity: 0.7;\n}\n\n/* Auto-scroll state: directional arrow replaces move icon */\n@keyframes pg-scroll-arrow-left  { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }\n@keyframes pg-scroll-arrow-right { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }\n\n.pg-col-drag-ghost--scroll-left .pg-col-drag-ghost__icon--move,\n.pg-col-drag-ghost--scroll-right .pg-col-drag-ghost__icon--move { display: none; }\n.pg-col-drag-ghost--scroll-left .pg-col-drag-ghost__icon--arrow-left {\n  display: inline-flex;\n  animation: pg-scroll-arrow-left 700ms ease-in-out infinite;\n}\n.pg-col-drag-ghost--scroll-right .pg-col-drag-ghost__icon--arrow-right {\n  display: inline-flex;\n  animation: pg-scroll-arrow-right 700ms ease-in-out infinite;\n}\n\n";
+export declare const columnGroupHeaderCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Column group 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-group-row {\n  position: relative;\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}\n.pg-th--group {\n  position: absolute;\n  top: 0;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  background: var(--pg-colors-header-background, #f8fafc);\n  cursor: pointer;\n  outline: none;\n  transition: background var(--pg-transitions-duration-fast, 100ms);\n  font-weight: var(--pg-typography-header-font-weight, 600);\n  font-size: var(--pg-typography-font-size-sm, 13px);\n  color: var(--pg-colors-text-primary, #1e293b);\n  user-select: none;\n}\n.pg-th--group:hover,\n.pg-th--group:focus-visible { background: var(--pg-colors-header-hover, #f1f5f9); }\n.pg-th--group--collapsed {\n  background: var(--pg-colors-background-alt, #f1f5f9);\n  justify-content: center;\n}\n// .pg-th--group--collapsed .pg-th__label { display: none; }\n.pg-th__collapse-btn {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  margin-right: 4px;\n  border-radius: var(--pg-sizing-border-radius, 4px);\n  color: var(--pg-colors-text-secondary, #475569);\n  transition: background var(--pg-transitions-duration-fast, 100ms),\n              color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-th--group:hover .pg-th__collapse-btn,\n.pg-th--group:focus-visible .pg-th__collapse-btn {\n  background: var(--pg-colors-background-alt, #f1f5f9);\n  color: var(--pg-colors-primary, #2563eb);\n}\n.pg-th__resize-handle--group {\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: 6px;\n  height: 100%;\n  cursor: col-resize;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  color: var(--pg-colors-resize-handle-color, #e2e8f0);\n  z-index: 6;\n  transition: opacity var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-th--group:hover .pg-th__resize-handle--group { opacity: 1; }\n\n/* \u2500\u2500 Flat columns alongside grouped headers \u2500\u2500 */\n/* A flat (ungrouped) leaf column in a grid that has grouped columns must span\n   the full header height (group rows + leaf row) so it does not appear as a\n   short stub next to taller group header cells.\n   Strategy: keep the cell in normal flex flow (preserves horizontal layout),\n   give it the combined height, and translateY it upward so its visual top\n   aligns with the top of the header area.  The panel header overflow:hidden\n   clips exactly at the combined height, so nothing leaks outside the header.\n   --pg-group-rows-count is set in JS by HeaderRenderer. */\n.pg-th--no-group {\n  align-self: flex-start;\n  position: relative;\n  z-index: 2;\n  height: calc((var(--pg-group-rows-count, 0) + 1) * var(--pg-header-row-height, 44px));\n  transform: translate(var(--pg-drag-x, 0px), calc(var(--pg-group-rows-count, 0) * -1 * var(--pg-header-row-height, 44px)));\n}\n\n.pg-group-drop-indicator {\n  position: absolute;\n  top: 0;\n  width: 2px;\n  height: var(--pg-header-row-height, 44px);\n  background: var(--pg-colors-primary, #2563eb);\n  z-index: 20;\n  pointer-events: none;\n  border-radius: 1px;\n}\n.pg-th-group-filler { position: absolute; top: 0; height: 100%; }\n.pg-th--standalone-filler {\n  position: absolute;\n  top: 0;\n  height: 100%;\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  pointer-events: none;\n  cursor: default;\n}\n/* Filler cell in a group row for columns with no ancestor group at this depth.\n   Blends with the header background \u2014 makes flat/shallow columns appear to span\n   the full header height.  No interactive elements, no bottom border. */\n.pg-th--depth-filler {\n  position: absolute;\n  top: 0;\n  height: 100%;\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  pointer-events: none;\n  cursor: default;\n  z-index: 0;\n}\n\n@keyframes pg-drag-indicator-in { from { opacity: 0; } to { opacity: 1; } }\n\n/* Smooth column-shift animation \u2014 enabled ONLY while actively dragging a column */\n.pg-grid--col-dragging .pg-th[data-col-id],\n.pg-grid--col-dragging .pg-cell[data-col-id] {\n  transform: translateX(var(--pg-drag-x, 0px));\n  transition: transform 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  will-change: transform;\n}\n.pg-grid--col-dragging .pg-th--no-group[data-col-id] {\n  transform: translate(var(--pg-drag-x, 0px), calc(var(--pg-group-rows-count, 0) * -1 * var(--pg-header-row-height, 44px)));\n}\n\n/* During header auto-scroll the transforms update every RAF tick \u2014 disable the\n   transition so cells snap instantly rather than endlessly chasing a moving target */\n.pg-grid--col-autoscrolling .pg-th[data-col-id],\n.pg-grid--col-autoscrolling .pg-cell[data-col-id] {\n  transition: none;\n}\n/* Live-preview path (store mutations during drag): suppress all transitions */\n.pg-grid--drag-preview-sync .pg-th[data-col-id],\n.pg-grid--drag-preview-sync .pg-cell[data-col-id] {\n  transition: none !important;\n}\n\n/* \u2500\u2500 Group-header CSS-transform drag \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 * Cells shift via --pg-drag-x.  The --pg-drag-transition variable is 0ms for\n * the actively-dragged group (injected by display-group-drag-handler.ts) and\n * falls back to the default 180ms for displaced neighbours \u2014 giving AG Grid-\n * style smooth animation for everything except the grabbed group itself.\n * body cells use the same variable so leaf columns and data rows stay in sync.\n */\n.pg-grid--group-dragging .pg-th--group {\n  transform: translateX(var(--pg-drag-x, 0px));\n  transition: transform var(--pg-drag-transition, 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94));\n  will-change: transform;\n}\n.pg-grid--group-dragging .pg-th[data-col-id] {\n  transform: translateX(var(--pg-drag-x, 0px));\n  transition: transform var(--pg-drag-transition, 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94));\n}\n.pg-grid--group-dragging .pg-cell[data-col-id] {\n  transform: translateX(var(--pg-drag-x, 0px));\n  transition: transform var(--pg-drag-transition, 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94));\n}\n.pg-grid--group-dragging .pg-th--depth-filler {\n  transform: translateX(var(--pg-drag-x, 0px));\n}\n.pg-grid--group-dragging .pg-th--no-group[data-col-id] {\n  transform: translate(var(--pg-drag-x, 0px), calc(var(--pg-group-rows-count, 0) * -1 * var(--pg-header-row-height, 44px)));\n  transition: transform var(--pg-drag-transition, 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94));\n}\n\n/* Column drag ghost (floating preview chip that follows the cursor) */\n.pg-col-drag-ghost {\n  position: fixed;\n  pointer-events: none;\n  z-index: 9999;\n  display: flex;\n  align-items: center;\n  gap: var(--pg-drag-ghost-gap, 8px);\n  padding: 5px 12px 5px 10px;\n  background: var(--pg-colors-drag-ghost-background, var(--pg-colors-drag-preview-background, var(--pg-colors-surface, #fff)));\n  border: 1.5px solid var(--pg-colors-primary, #2563eb);\n  border-radius: var(--pg-borders-radius-md, 6px);\n  box-shadow: 0 6px 24px rgba(0,0,0,0.13), 0 2px 8px rgba(37, 99, 235, 0.12);\n  font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  color: var(--pg-colors-header-text, #374151);\n  white-space: nowrap;\n  user-select: none;\n  transform: translateY(-50%);\n  transition:\n    border-color var(--pg-transitions-duration-fast, 100ms),\n    box-shadow var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-col-drag-ghost__icon {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--pg-colors-primary, #2563eb);\n  opacity: 0.7;\n}\n.pg-col-drag-ghost__label {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Default icon visibility */\n.pg-col-drag-ghost__icon--move        { display: inline-flex; }\n.pg-col-drag-ghost__icon--ban         { display: none; }\n.pg-col-drag-ghost__icon--arrow-left  { display: none; }\n.pg-col-drag-ghost__icon--arrow-right { display: none; }\n\n/* Hide-column state: amber ghost + eyeOff icon */\n.pg-col-drag-ghost__icon--hide { display: none; }\n.pg-col-drag-ghost--hide .pg-col-drag-ghost__icon--move { display: none; }\n.pg-col-drag-ghost--hide .pg-col-drag-ghost__icon--hide { display: inline-flex; color: var(--pg-colors-warning, #f59e0b); }\n.pg-col-drag-ghost--hide {\n  border-color: var(--pg-colors-warning, #f59e0b);\n  box-shadow: 0 6px 24px rgba(245,158,11,0.13), 0 2px 8px rgba(245,158,11,0.12);\n  color: var(--pg-colors-warning, #f59e0b);\n}\n\n/* No-drop state: red ghost + ban icon */\n.pg-col-drag-ghost--no-drop {\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-col-drag-ghost--no-drop .pg-col-drag-ghost__icon { color: var(--pg-colors-danger, #ef4444); }\n.pg-col-drag-ghost--no-drop .pg-col-drag-ghost__icon--move { display: none; }\n.pg-col-drag-ghost--no-drop .pg-col-drag-ghost__icon--ban  { display: inline-flex; }\n\n/* Outside-grid drop state: red ghost signals \"drop = hide all columns in group\" */\n.pg-col-drag-ghost--outside {\n  border-color: var(--pg-colors-danger, #ef4444);\n  box-shadow: 0 6px 24px rgba(239,68,68,0.18), 0 2px 8px rgba(239,68,68,0.14);\n  color: var(--pg-colors-danger, #ef4444);\n  opacity: 0.85;\n}\n.pg-col-drag-ghost--outside .pg-col-drag-ghost__label::after {\n  content: ' (hide)';\n  font-size: 10px;\n  opacity: 0.7;\n}\n\n/* Auto-scroll state: directional arrow replaces move icon */\n@keyframes pg-scroll-arrow-left  { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }\n@keyframes pg-scroll-arrow-right { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }\n\n.pg-col-drag-ghost--scroll-left .pg-col-drag-ghost__icon--move,\n.pg-col-drag-ghost--scroll-right .pg-col-drag-ghost__icon--move { display: none; }\n.pg-col-drag-ghost--scroll-left .pg-col-drag-ghost__icon--arrow-left {\n  display: inline-flex;\n  animation: pg-scroll-arrow-left 700ms ease-in-out infinite;\n}\n.pg-col-drag-ghost--scroll-right .pg-col-drag-ghost__icon--arrow-right {\n  display: inline-flex;\n  animation: pg-scroll-arrow-right 700ms ease-in-out infinite;\n}\n\n";
 //# sourceMappingURL=column-group-header.css.d.ts.map

package/styles/base/column-group-header.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"column-group-header.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/column-group-header.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,0sVAqQhC,CAAC"}
+{"version":3,"file":"column-group-header.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/column-group-header.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,8wVAqQhC,CAAC"}

package/styles/base/column-group-header.css.js

@@ -185,7 +185,7 @@ export const columnGroupHeaderCss = `/* ─────────────
   align-items: center;
   gap: var(--pg-drag-ghost-gap, 8px);
   padding: 5px 12px 5px 10px;
-  background: var(--pg-colors-drag-ghost-background, #fff);
+  background: var(--pg-colors-drag-ghost-background, var(--pg-colors-drag-preview-background, var(--pg-colors-surface, #fff)));
   border: 1.5px solid var(--pg-colors-primary, #2563eb);
   border-radius: var(--pg-borders-radius-md, 6px);
   box-shadow: 0 6px 24px rgba(0,0,0,0.13), 0 2px 8px rgba(37, 99, 235, 0.12);

package/styles/base/context-menu.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 contextMenuCss = "/* \u2500\u2500\u2500 Context menu \u2500\u2500\u2500 */\n.pg-context-menu {\n  position: fixed;\n  z-index: 999999;\n  display: none;\n  min-width: 192px;\n  padding: 4px 0;\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), 0 2px 6px rgba(0,0,0,0.07));\n  font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n  font-size: var(--pg-typography-font-size-md, 13px);\n}\n.pg-context-menu--visible { display: block; }\n.pg-context-menu__item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 7px 14px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  text-align: left;\n  color: var(--pg-colors-text-primary, #0f172a);\n  gap: 0;\n  transition: background 80ms;\n}\n.pg-context-menu__item:hover { background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-context-menu__item:active { background: var(--pg-colors-border, #e2e8f0); }\n.pg-context-menu__label { flex: 1; }\n.pg-context-menu__kbd {\n  font-size: var(--pg-typography-font-size-sm, 11px);\n  color: var(--pg-colors-text-disabled, #94a3b8);\n  letter-spacing: 0.01em;\n}\n.pg-context-menu__sep {\n  margin: 4px 0;\n  border-top: 1px solid var(--pg-colors-border-ctxt-menu, #e2e8f0);\n  background: var(--pg-colors-border, #e2e8f0);\n}\n\n.pg-cell__inner {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  padding: 0 12px;\n  overflow: hidden;\n}\n.pg-cell__value {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: var(--pg-typography-line-height-base, 1.5);\n}\n.pg-cell--checkbox {\n  width: 44px;\n  min-width: 44px;\n  max-width: 44px;\n  justify-content: center;\n  flex-shrink: 0;\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n}\n.pg-cell--serial {\n  width: 52px;\n  min-width: 52px;\n  max-width: 52px;\n  justify-content: center;\n  flex-shrink: 0;\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  color: var(--pg-colors-text-secondary, #475569);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n}\n.pg-cell__serial { font-variant-numeric: tabular-nums; }\n.pg-cell--bool-true { color: var(--pg-colors-success, #16a34a); }\n.pg-cell--bool-false { color: var(--pg-colors-text-disabled, #94a3b8); }\n.pg-cell__image { border-radius: var(--pg-borders-radius-sm, 4px); object-fit: cover; }\n.pg-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border-radius: var(--pg-borders-radius-pill, 9999px);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  font-weight: var(--pg-typography-font-weight-medium, 500);\n  white-space: nowrap;\n}\n.pg-cell--range-selected { background: var(--pg-colors-selection-background, rgba(37,99,235,0.08)); }\n.pg-cell--editing { padding: 0;border-radius: 4px }\n.pg-cell--editing .pg-cell__inner { padding: 0; overflow: visible; }\n.pg-selection-canvas { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 10; }\n\n";
+export declare const contextMenuCss = "/* \u2500\u2500\u2500 Context menu \u2500\u2500\u2500 */\n.pg-context-menu {\n  position: fixed;\n  z-index: 999999;\n  display: none;\n  min-width: 192px;\n  padding: 4px 0;\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), 0 2px 6px rgba(0,0,0,0.07));\n  font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n  font-size: var(--pg-typography-font-size-md, 13px);\n}\n.pg-context-menu--visible { display: block; }\n.pg-context-menu__item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 7px 14px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  text-align: left;\n  color: var(--pg-colors-text-primary, #0f172a);\n  gap: 0;\n  transition: background 80ms;\n}\n.pg-context-menu__item:hover { background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-context-menu__item:active { background: var(--pg-colors-border, #e2e8f0); }\n.pg-context-menu__label { flex: 1; }\n.pg-context-menu__kbd {\n  font-size: var(--pg-typography-font-size-sm, 11px);\n  color: var(--pg-colors-text-disabled, #94a3b8);\n  letter-spacing: 0.01em;\n}\n.pg-context-menu__sep {\n  margin: 4px 0;\n  border-top: 1px solid var(--pg-colors-border-ctxt-menu, #e2e8f0);\n  background: var(--pg-colors-border, #e2e8f0);\n}\n\n.pg-cell__inner {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  padding: 0 12px;\n  overflow: hidden;\n}\n.pg-cell__value {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: var(--pg-typography-line-height-base, 1.5);\n}\n.pg-cell--checkbox {\n  width: 44px;\n  min-width: 44px;\n  max-width: 44px;\n  justify-content: center;\n  flex-shrink: 0;\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n}\n.pg-cell--serial {\n  width: 52px;\n  min-width: 52px;\n  max-width: 52px;\n  justify-content: center;\n  flex-shrink: 0;\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  color: var(--pg-colors-text-secondary, #475569);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n}\n.pg-cell__serial { font-variant-numeric: tabular-nums; }\n/* Dark mode: tint the serial (row-number) column with the header/footer chrome\n   background (which sits above the darker data-row background in dark themes) so\n   the number gutter reads as grid chrome \u2014 matching the header and footer\n   surfaces \u2014 rather than as data. Scoped to dark mode per design; variants that\n   define their own serial-column chrome (e.g. quartz) still win via source order. */\n[data-pg-mode=\"dark\"] .pg-cell--serial {\n  background: var(--pg-colors-header-background, var(--pg-colors-footer-background, #1e293b));\n}\n.pg-cell--bool-true { color: var(--pg-colors-success, #16a34a); }\n.pg-cell--bool-false { color: var(--pg-colors-text-disabled, #94a3b8); }\n.pg-cell__image { border-radius: var(--pg-borders-radius-sm, 4px); object-fit: cover; }\n.pg-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border-radius: var(--pg-borders-radius-pill, 9999px);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  font-weight: var(--pg-typography-font-weight-medium, 500);\n  white-space: nowrap;\n}\n.pg-cell--range-selected { background: var(--pg-colors-selection-background, rgba(37,99,235,0.08)); }\n.pg-cell--editing { padding: 0;border-radius: 4px }\n.pg-cell--editing .pg-cell__inner { padding: 0; overflow: visible; }\n.pg-selection-canvas { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 10; }\n\n";
 //# sourceMappingURL=context-menu.css.d.ts.map

package/styles/base/context-menu.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/context-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,kkGA8F1B,CAAC"}
+{"version":3,"file":"context-menu.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/context-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,onHAsG1B,CAAC"}

package/styles/base/context-menu.css.js

@@ -82,6 +82,14 @@ export const contextMenuCss = `/* ─── Context menu ─── */
   font-size: var(--pg-typography-font-size-sm, 12px);
 }
 .pg-cell__serial { font-variant-numeric: tabular-nums; }
+/* Dark mode: tint the serial (row-number) column with the header/footer chrome
+   background (which sits above the darker data-row background in dark themes) so
+   the number gutter reads as grid chrome — matching the header and footer
+   surfaces — rather than as data. Scoped to dark mode per design; variants that
+   define their own serial-column chrome (e.g. quartz) still win via source order. */
+[data-pg-mode="dark"] .pg-cell--serial {
+  background: var(--pg-colors-header-background, var(--pg-colors-footer-background, #1e293b));
+}
 .pg-cell--bool-true { color: var(--pg-colors-success, #16a34a); }
 .pg-cell--bool-false { color: var(--pg-colors-text-disabled, #94a3b8); }
 .pg-cell__image { border-radius: var(--pg-borders-radius-sm, 4px); object-fit: cover; }

package/styles/base/context-menu.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.css.js","sourceRoot":"","sources":["../../../src/styles/base/context-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8F7B,CAAC"}
+{"version":3,"file":"context-menu.css.js","sourceRoot":"","sources":["../../../src/styles/base/context-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsG7B,CAAC"}

package/styles/base/filter.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 filterCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Filter Row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-drag-preview {\n  position: fixed;\n  pointer-events: none;\n  z-index: 99999;\n  display: flex;\n  align-items: center;\n  gap: var(--pg-drag-preview-gap, 8px);\n  padding: var(--pg-drag-preview-padding, 6px 12px);\n  border-radius: var(--pg-borders-radius-md, 6px);\n  box-shadow: var(--pg-shadows-drag-preview, 0 4px 16px rgba(0,0,0,0.18));\n  font-size: var(--pg-typography-font-size-md, 13px);\n  font-weight: var(--pg-typography-font-weight-medium, 500);\n  white-space: nowrap;\n  will-change: transform;\n  background: var(--pg-colors-drag-preview-background, var(--pg-drag-preview-bg, #fff));\n  border: 1px solid var(--pg-colors-drag-preview-border, var(--pg-drag-preview-border, #e0e0e0));\n  color: var(--pg-colors-text-primary, var(--pg-text-primary, #222));\n  top: 0;\n  left: 0;\n  transform: translate(-9999px, -9999px);\n}\n.pg-drag-preview__avatar {\n  width: var(--pg-drag-preview-avatar-size, 24px);\n  height: var(--pg-drag-preview-avatar-size, 24px);\n  background: var(--pg-colors-primary, var(--pg-primary, #2563eb));\n  overflow: hidden;\n  flex-shrink: 0;\n}\n.pg-drag-preview__avatar--circle { border-radius: 50%; }\n.pg-drag-preview__avatar--square { border-radius: var(--pg-borders-radius-sm, 4px); }\n.pg-drag-preview__avatar-img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.pg-drag-preview__label {\n  flex: 1;\n  min-width: 0;\n}\n.pg-drag-preview__badge {\n  background: var(--pg-colors-primary, var(--pg-primary, #2563eb));\n  color: var(--pg-colors-primary-contrast, #fff);\n  border-radius: var(--pg-borders-radius-pill, 999px);\n  padding: 1px 7px;\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  min-width: 20px;\n  text-align: center;\n}\n\n.pg-filter-cell {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  padding: 0 6px;\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n}\n.pg-filter-cell:last-child { border-right: none; }\n.pg-filter-cell--checkbox {\n  width: 44px;\n  min-width: 44px;\n  max-width: 44px;\n  flex-shrink: 0;\n}\n.pg-filter-cell--serial {\n  width: 52px;\n  min-width: 52px;\n  max-width: 52px;\n  flex-shrink: 0;\n}\n.pg-filter-input {\n  width: 100%;\n  height: 24px;\n  padding: 0 8px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-family: inherit;\n  background: var(--pg-colors-surface, #fff);\n  color: inherit;\n  outline: none;\n  transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Filter Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-filter-panel {\n  position: absolute;\n  z-index: var(--pg-z-index-filter-panel, 200);\n  min-width: 270px;\n  max-width: 320px;\n  width: max-content;\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-lg, 0 8px 24px rgba(0,0,0,.12));\n  overflow: hidden;\n  font-size: var(--pg-typography-font-size-sm, 13px);\n  color: var(--pg-colors-text, #1e293b);\n  user-select: none;\n}\n\n/* \u2500\u2500 Condition filter \u2500\u2500 */\n.pg-filter-cond-wrap { padding: 10px; display: flex; flex-direction: column; gap: 6px; }\n\n.pg-filter-cond__row { display: flex; flex-direction: column; gap: 4px; }\n.pg-filter-cond__row--hidden { display: none; }\n\n.pg-filter-cond__select {\n  width: 100%;\n  height: 30px;\n  padding: 0 8px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-text, #1e293b);\n  font-size: inherit;\n  font-family: inherit;\n  cursor: pointer;\n  outline: none;\n  transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-cond__select:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n\n.pg-filter-cond__inputs { display: flex; align-items: center; gap: 4px; }\n.pg-filter-cond__inputs--hidden { display: none; }\n/* Stack inputs vertically in range (Between) mode so the panel never overflows horizontally */\n.pg-filter-cond__inputs--range { flex-direction: column; align-items: stretch; gap: 4px; }\n.pg-filter-cond__inputs--range .pg-filter-cond__range-sep {\n  text-align: center;\n  padding: 2px 0;\n  color: var(--pg-colors-text-secondary, #64748b);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  font-weight: 500;\n}\n\n.pg-filter-cond__input {\n  flex: 1;\n  height: 30px;\n  padding: 0 8px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-text, #1e293b);\n  font-size: inherit;\n  font-family: inherit;\n  outline: none;\n  padding: 6px;\n  transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-cond__input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n.pg-filter-cond__input--hidden { display: none; }\n\n.pg-filter-cond__range-sep {\n  flex-shrink: 0;\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  color: var(--pg-colors-text-secondary, #475569);\n  padding: 0 2px;\n}\n.pg-filter-cond__range-sep--hidden { display: none; }\n\n/* \u2500\u2500 Logic toggle row (AND / OR / None) \u2500\u2500 */\n.pg-filter-logic {\n  display: flex;\n  gap: 4px;\n  padding: 4px 0 2px;\n}\n.pg-filter-logic--hidden { display: none; }\n\n.pg-filter-logic__btn {\n  flex: 1;\n  height: 26px;\n  padding: 0 6px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-text-secondary, #475569);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  font-family: inherit;\n  font-weight: 500;\n  cursor: pointer;\n  text-align: center;\n  transition: background var(--pg-transitions-duration-fast, 100ms),\n              color var(--pg-transitions-duration-fast, 100ms),\n              border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-logic__btn:hover { background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-filter-logic__btn--active {\n  background: var(--pg-colors-primary, #2563eb);\n  color: #fff;\n  border-color: var(--pg-colors-primary, #2563eb);\n}\n\n/* \u2500\u2500 Set filter (dropdown / array) \u2500\u2500 */\n.pg-filter-set { display: flex; flex-direction: column; }\n\n.pg-filter-set__search {\n  padding: 8px 10px 4px;\n}\n.pg-filter-set__search-input {\n  width: 100%;\n  height: 30px;\n  padding: 0 10px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-text, #1e293b);\n  font-size: inherit;\n  font-family: inherit;\n  box-sizing: border-box;\n  outline: none;\n  transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-set__search-input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n\n.pg-filter-set__divider {\n  height: 1px;\n  background: var(--pg-colors-border, #e2e8f0);\n  margin: 2px 0;\n}\n\n/* Select All item */\n.pg-filter-set__item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 28px;\n  padding: 0 10px;\n  cursor: pointer;\n  transition: background var(--pg-transitions-duration-fast, 100ms);\n  box-sizing: border-box;\n  position: absolute;\n  left: 0;\n  right: 0;\n}\n.pg-filter-set__item:hover { background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-filter-set__item--select-all {\n  position: static;\n  font-weight: 500;\n  color: var(--pg-colors-text, #1e293b);\n}\n.pg-filter-set__item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.pg-filter-set__item-label--blank { color: var(--pg-colors-text-disabled, #94a3b8); font-style: italic; }\n\n.pg-filter-set__checkbox {\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n  cursor: pointer;\n  accent-color: var(--pg-colors-primary, #2563eb);\n}\n\n/* Virtual scroll containers */\n.pg-filter-set__list {\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: relative;\n  scrollbar-width: thin;\n  scrollbar-color: var(--pg-colors-border, #e2e8f0) transparent;\n}\n.pg-filter-set__list::-webkit-scrollbar { width: 6px; }\n.pg-filter-set__list::-webkit-scrollbar-track { background: transparent; }\n.pg-filter-set__list::-webkit-scrollbar-thumb {\n  background: var(--pg-colors-border, #e2e8f0);\n  border-radius: 3px;\n}\n.pg-filter-set__list-inner { position: relative; width: 100%; }\n\n/* \u2500\u2500 Panel footer \u2500\u2500 */\n.pg-filter-panel__footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 8px 10px;\n  // border-top: 1px solid var(--pg-colors-border, #e2e8f0);\n  // background: var(--pg-colors-background, #f8fafc);\n}\n\n.pg-filter-panel__clear-btn {\n  height: 28px;\n  padding: 0 14px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-text-secondary, #475569);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-family: inherit;\n  cursor: pointer;\n  transition: background var(--pg-transitions-duration-fast, 100ms),\n              border-color var(--pg-transitions-duration-fast, 100ms),\n              color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-panel__clear-btn:hover {\n  background: var(--pg-colors-background-alt, #f1f5f9);\n  border-color: var(--pg-colors-text-secondary, #475569);\n  color: var(--pg-colors-text, #1e293b);\n}\n\n";
+export declare const filterCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Filter Row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-drag-preview {\n  position: fixed;\n  pointer-events: none;\n  z-index: 99999;\n  display: flex;\n  align-items: center;\n  gap: var(--pg-drag-preview-gap, 8px);\n  padding: var(--pg-drag-preview-padding, 6px 12px);\n  border-radius: var(--pg-borders-radius-md, 6px);\n  box-shadow: var(--pg-shadows-drag-preview, 0 4px 16px rgba(0,0,0,0.18));\n  font-size: var(--pg-typography-font-size-md, 13px);\n  font-weight: var(--pg-typography-font-weight-medium, 500);\n  white-space: nowrap;\n  will-change: transform;\n  background: var(--pg-colors-drag-preview-background, var(--pg-drag-preview-bg, #fff));\n  border: 1px solid var(--pg-colors-drag-preview-border, var(--pg-drag-preview-border, #e0e0e0));\n  color: var(--pg-colors-text-primary, var(--pg-text-primary, #222));\n  top: 0;\n  left: 0;\n  transform: translate(-9999px, -9999px);\n}\n.pg-drag-preview__avatar {\n  width: var(--pg-drag-preview-avatar-size, 24px);\n  height: var(--pg-drag-preview-avatar-size, 24px);\n  background: var(--pg-colors-primary, var(--pg-primary, #2563eb));\n  overflow: hidden;\n  flex-shrink: 0;\n}\n.pg-drag-preview__avatar--circle { border-radius: 50%; }\n.pg-drag-preview__avatar--square { border-radius: var(--pg-borders-radius-sm, 4px); }\n.pg-drag-preview__avatar-img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.pg-drag-preview__label {\n  flex: 1;\n  min-width: 0;\n}\n.pg-drag-preview__badge {\n  background: var(--pg-colors-primary, var(--pg-primary, #2563eb));\n  color: var(--pg-colors-primary-contrast, #fff);\n  border-radius: var(--pg-borders-radius-pill, 999px);\n  padding: 1px 7px;\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  min-width: 20px;\n  text-align: center;\n}\n\n.pg-filter-cell {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  padding: 0 6px;\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n}\n.pg-filter-cell:last-child { border-right: none; }\n.pg-filter-cell--checkbox {\n  width: 44px;\n  min-width: 44px;\n  max-width: 44px;\n  flex-shrink: 0;\n}\n.pg-filter-cell--serial {\n  width: 52px;\n  min-width: 52px;\n  max-width: 52px;\n  flex-shrink: 0;\n}\n.pg-filter-input {\n  width: 100%;\n  height: 24px;\n  padding: 0 8px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-family: inherit;\n  background: var(--pg-colors-surface, #fff);\n  color: inherit;\n  outline: none;\n  transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Filter Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-filter-panel {\n  position: absolute;\n  z-index: var(--pg-z-index-filter-panel, 200);\n  min-width: 230px;\n  max-width: 320px;\n  width: max-content;\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-lg, 0 8px 24px rgba(0,0,0,.12));\n  overflow: hidden;\n  font-size: var(--pg-typography-font-size-sm, 13px);\n  color: var(--pg-colors-text-primary, #1e293b);\n  user-select: none;\n}\n\n/* \u2500\u2500 Condition filter \u2500\u2500 */\n.pg-filter-cond-wrap { padding: 10px; display: flex; flex-direction: column; gap: 6px; }\n\n.pg-filter-cond__row { display: flex; flex-direction: column; gap: 4px; }\n.pg-filter-cond__row--hidden { display: none; }\n\n.pg-filter-cond__select {\n  width: 100%;\n  height: 30px;\n  padding: 0 8px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-text-primary, #1e293b);\n  font-size: inherit;\n  font-family: inherit;\n  cursor: pointer;\n  outline: none;\n  transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-cond__select:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n\n.pg-filter-cond__inputs { display: flex; align-items: center; gap: 4px; }\n.pg-filter-cond__inputs--hidden { display: none; }\n/* Stack inputs vertically in range (Between) mode so the panel never overflows horizontally */\n.pg-filter-cond__inputs--range { flex-direction: column; align-items: stretch; gap: 4px; }\n.pg-filter-cond__inputs--range .pg-filter-cond__range-sep {\n  text-align: center;\n  padding: 2px 0;\n  color: var(--pg-colors-text-secondary, #64748b);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  font-weight: 500;\n}\n\n.pg-filter-cond__input {\n  flex: 1;\n  height: 30px;\n  padding: 0 8px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-text-primary, #1e293b);\n  font-size: inherit;\n  font-family: inherit;\n  outline: none;\n  padding: 6px;\n  transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-cond__input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n.pg-filter-cond__input--hidden { display: none; }\n\n.pg-filter-cond__range-sep {\n  flex-shrink: 0;\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  color: var(--pg-colors-text-secondary, #475569);\n  padding: 0 2px;\n}\n.pg-filter-cond__range-sep--hidden { display: none; }\n\n/* \u2500\u2500 Logic toggle row (AND / OR / None) \u2500\u2500 */\n.pg-filter-logic {\n  display: flex;\n  gap: 4px;\n  padding: 4px 0 2px;\n}\n.pg-filter-logic--hidden { display: none; }\n\n.pg-filter-logic__btn {\n  flex: 1;\n  height: 26px;\n  padding: 0 6px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-text-secondary, #475569);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  font-family: inherit;\n  font-weight: 500;\n  cursor: pointer;\n  text-align: center;\n  transition: background var(--pg-transitions-duration-fast, 100ms),\n              color var(--pg-transitions-duration-fast, 100ms),\n              border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-logic__btn:hover { background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-filter-logic__btn--active {\n  background: var(--pg-colors-primary, #2563eb);\n  color: #fff;\n  border-color: var(--pg-colors-primary, #2563eb);\n}\n\n/* \u2500\u2500 Set filter (dropdown / array) \u2500\u2500 */\n.pg-filter-set { display: flex; flex-direction: column; }\n\n.pg-filter-set__search {\n  padding: 8px 10px 4px;\n}\n.pg-filter-set__search-input {\n  width: 100%;\n  height: 30px;\n  padding: 0 10px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-text-primary, #1e293b);\n  font-size: inherit;\n  font-family: inherit;\n  box-sizing: border-box;\n  outline: none;\n  transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-set__search-input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n\n.pg-filter-set__divider {\n  height: 1px;\n  background: var(--pg-colors-border, #e2e8f0);\n  margin: 2px 0;\n}\n\n/* Select All item */\n.pg-filter-set__item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 28px;\n  padding: 0 10px;\n  cursor: pointer;\n  transition: background var(--pg-transitions-duration-fast, 100ms);\n  box-sizing: border-box;\n  position: absolute;\n  left: 0;\n  right: 0;\n}\n.pg-filter-set__item:hover { background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-filter-set__item--select-all {\n  position: static;\n  font-weight: 500;\n  color: var(--pg-colors-text-primary, #1e293b);\n}\n.pg-filter-set__item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.pg-filter-set__item-label--blank { color: var(--pg-colors-text-disabled, #94a3b8); font-style: italic; }\n\n.pg-filter-set__checkbox {\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n  cursor: pointer;\n  accent-color: var(--pg-colors-primary, #2563eb);\n}\n\n/* Virtual scroll containers */\n.pg-filter-set__list {\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: relative;\n  scrollbar-width: thin;\n  scrollbar-color: var(--pg-colors-border, #e2e8f0) transparent;\n}\n.pg-filter-set__list::-webkit-scrollbar { width: 6px; }\n.pg-filter-set__list::-webkit-scrollbar-track { background: transparent; }\n.pg-filter-set__list::-webkit-scrollbar-thumb {\n  background: var(--pg-colors-border, #e2e8f0);\n  border-radius: 3px;\n}\n.pg-filter-set__list-inner { position: relative; width: 100%; }\n\n/* \u2500\u2500 Panel footer \u2500\u2500 */\n.pg-filter-panel__footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 8px 10px;\n  // border-top: 1px solid var(--pg-colors-border, #e2e8f0);\n  // background: var(--pg-colors-background, #f8fafc);\n}\n\n.pg-filter-panel__clear-btn {\n  height: 28px;\n  padding: 0 14px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-text-secondary, #475569);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-family: inherit;\n  cursor: pointer;\n  transition: background var(--pg-transitions-duration-fast, 100ms),\n              border-color var(--pg-transitions-duration-fast, 100ms),\n              color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-panel__clear-btn:hover {\n  background: var(--pg-colors-background-alt, #f1f5f9);\n  border-color: var(--pg-colors-text-secondary, #475569);\n  color: var(--pg-colors-text-primary, #1e293b);\n}\n\n";
 //# sourceMappingURL=filter.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"filter.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/filter.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,8kUA+SrB,CAAC"}
+{"version":3,"file":"filter.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/filter.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,8nUA+SrB,CAAC"}

package/styles/base/filter.css.js

@@ -95,7 +95,7 @@ export const filterCss = `/* ─────────────────
 .pg-filter-panel {
   position: absolute;
   z-index: var(--pg-z-index-filter-panel, 200);
-  min-width: 270px;
+  min-width: 230px;
   max-width: 320px;
   width: max-content;
   background: var(--pg-colors-surface, #fff);
@@ -104,7 +104,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 +121,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 +149,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 +212,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 +245,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 +305,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);
 }
 
 `;