impact-nova 2.1.0-alpha.4 → 2.1.0-alpha.6

package/dist/impact-nova-components.css

@@ -141,12 +141,37 @@
 }
 /* Custom AG Grid Styles — plain CSS (no SCSS nesting). */
 
-.ag-pinned-left-cols-container,
-.ag-pinned-right-cols-container,
-.ag-pinned-left-header,
-.ag-pinned-right-header {
+/* ponytail: Quartz theme sets transition:all on header cells. Column virtualization updates
+   `left` every horizontal-scroll frame — transitioning `all` makes headers lag behind the body.
+   Preserve AG Grid's column-move / auto-size animations via :not() guards. */
+.ag-root-wrapper:not(.ag-column-moving):not(.ag-animate-autosize) .ag-header-cell,
+.ag-root-wrapper:not(.ag-column-moving):not(.ag-animate-autosize) .ag-header-group-cell {
+  transition: none;
+}
+
+/* Pinned column depth — header: boundary cell. Body: row container (parent overflow:hidden clips cell shadow). */
+.ag-header-cell-last-left-pinned {
+  box-shadow: 1px 0px 12px 0px color-mix(in srgb, var(--color-primary) 12%, transparent);
+  clip-path: inset(0 -12px 0 0);
+  z-index: 2;
+}
+
+.ag-grid-scrolling-rows .ag-grid-pinned-left-cells {
   box-shadow: 1px 0px 12px 0px color-mix(in srgb, var(--color-primary) 12%, transparent);
-  z-index: 1;
+  clip-path: inset(0 -12px 0 0);
+  z-index: 2;
+}
+
+.ag-header-cell-first-right-pinned {
+  box-shadow: -1px 0px 12px 0px color-mix(in srgb, var(--color-primary) 12%, transparent);
+  clip-path: inset(0 0 0 -12px);
+  z-index: 2;
+}
+
+.ag-grid-scrolling-rows .ag-grid-pinned-right-cells {
+  box-shadow: -1px 0px 12px 0px color-mix(in srgb, var(--color-primary) 12%, transparent);
+  clip-path: inset(0 0 0 -12px);
+  z-index: 2;
 }
 
 /* Multi-tier column groups reserve empty header rows in pinned regions for spanning
@@ -168,6 +193,55 @@
   padding-right: 0;
 }
 
+/* Row selection + custom checkbox renderers — zero padding, center in cell.
+   Default ag-cell rules clip 16px checkboxes and leave wrapper left-aligned. */
+.ag-cell:not(.ag-cell-no-padding):not(.ag-cell-renderer-full-control):has(.ag-selection-checkbox),
+.ag-cell:not(.ag-cell-no-padding):not(.ag-cell-renderer-full-control):has([role="checkbox"].ag-cell-inner-padding) {
+  --ag-cell-horizontal-padding: 0;
+  padding-left: 0;
+  padding-right: 0;
+  justify-content: center;
+  align-items: center;
+  overflow: visible;
+}
+
+.ag-cell:not(.ag-cell-renderer-full-control):not(.ag-cell-no-padding):has(.ag-selection-checkbox) > .ag-cell-wrapper,
+.ag-cell:not(.ag-cell-renderer-full-control):not(.ag-cell-no-padding):has([role="checkbox"].ag-cell-inner-padding) > .ag-cell-wrapper {
+  width: 100%;
+  min-width: 0;
+  flex: 1 1 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: visible;
+}
+
+/* AG Grid keeps an empty .ag-cell-value sibling beside the selection checkbox. */
+.ag-cell:not(.ag-cell-renderer-full-control):has(.ag-selection-checkbox) > .ag-cell-wrapper > .ag-cell-value {
+  display: none;
+}
+
+.ag-cell:not(.ag-cell-renderer-full-control):has(.ag-selection-checkbox) .ag-selection-checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  height: auto;
+  margin: 0;
+  line-height: normal;
+}
+
+.ag-header-cell:has(.ag-header-select-all) {
+  --ag-header-cell-horizontal-padding: 0;
+  padding-left: 0;
+  padding-right: 0;
+  justify-content: center;
+}
+
+.ag-header-cell:has(.ag-header-select-all) .ag-header-cell-comp-wrapper {
+  display: none;
+}
+
 .ag-header-group-cell-with-group {
   border-bottom-width: 2px;
   border-bottom-style: solid;
@@ -182,11 +256,15 @@
 }
 
 .ag-root-wrapper .ag-row.ag-row-pinned-manual,
-.ag-root-wrapper .ag-floating-top .ag-row.ag-row-pinned,
-.ag-root-wrapper .ag-floating-bottom .ag-row.ag-row-pinned {
+.ag-root-wrapper .ag-grid-pinned-top-rows .ag-row.ag-row-pinned,
+.ag-root-wrapper .ag-grid-pinned-bottom-rows .ag-row.ag-row-pinned {
   background-color: var(--color-grid-pinned-row-background);
 }
 
+.ag-grid-pinned-bottom-rows, .ag-grid-pinned-top-rows {
+  background-color: var(--ag-header-background-color);
+}
+
 .ag-root-wrapper .ag-row.ag-row-pinned-source {
   background-color: var(--color-grid-pinned-row-background);
 }
@@ -364,3 +442,31 @@
   outline: 2px solid Highlight !important;
   outline-offset: -2px !important;
 }
+
+.ag-tooltip {
+  display: block;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: var(--ag-tooltip-background-color, #1f2b4d);
+  color: var(--ag-tooltip-text-color, #ffffff);
+  font: 400 14px/20px;
+  font-weight: 400;
+  font-family: 'Manrope', sans-serif !important;
+  animation: iv-ag-tooltip-enter 0.15s ease-out
+}
+
+@keyframes iv-ag-tooltip-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ag-tooltip:not(.ag-cell-editor-tooltip):not(.ag-cell-formula-tooltip).ag-tooltip-animate {
+    animation: none;
+    transition: none;
+  }
+}

package/dist/impact-nova-tokens.scss

@@ -16,6 +16,7 @@
     --color-surface-tint-blue: #eff2fa;
     --color-surface-accordion: #b3bdf8;
     --color-surface-selection-tint: #eceefd;
+    --color-surface-subtle: #f8f9fb;
 
     /* —— Brand & interactive —— */
     /* #4259EE */
@@ -176,10 +177,6 @@
 
     --radius: 0.5rem;
 
-    /* Overlay stacking — shell (sheet/dialog) at 50; floating menus above at 100 */
-    --z-overlay-shell: 50;
-    --z-overlay-floating: 100;
-
     /* —— Alert elevation (emphasis) —— */
     --shadow-alert-elevated: 0 0 16px 5px rgb(0 0 0 / 0.12);
   }
@@ -201,6 +198,7 @@
     --color-surface-tint-blue: #1b294b;
     --color-surface-accordion: #29399f;
     --color-surface-selection-tint: #1f2b4d;
+    --color-surface-subtle: #141f38;
 
     /* —— Brand & interactive —— */
     --color-primary: #5267f4;