impact-nova 2.0.9 → 2.1.0-alpha.10

package/dist/impact-nova-components.css

@@ -125,92 +125,83 @@
   flex-wrap: wrap;
 }
 
-/* Keyframes for gradient animation */
-@keyframes gradient {
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
-}
-.impact-header-bot-container {
-  /* Fallback / Dark mode base */
-  background-color: #1f2937;
-  /* Main Gradient */
-  background: linear-gradient(-45deg, #2ac2aa, #6666ef, #f26922, #8863c0, #0f1937);
-  background-size: 400% 400%;
-  /* Animation */
-  animation: gradient 5s ease infinite;
-  /* Pseudo-element for border/glow effect */
-  /* This element is handled by ::before on the container itself in newer SCSS logic or Tailwind z-index layering */
-  /* We kept the ::before logic in the SCSS, but we need to ensure nesting is correct */
-  /* Hover state */
-}
-.impact-header-bot-container:hover:not(:disabled) {
-  background: linear-gradient(-45deg, #2ac2ee, #6962ef, #f26921);
+/* Header bot button — animated multi-stop gradient (tokens in impact-nova-tokens.scss) */
+.header-bot-button-gradient {
   background-size: 400% 400%;
-  animation: gradient 2s ease infinite;
-}
-.impact-header-bot-container:hover:not(:disabled)::before {
-  background: none;
-}
-
-/* Notification Indicator Styles - Moved OUTSIDE of bot container */
-.notification-indicator {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  width: 10px;
-  height: 10px;
-  pointer-events: none;
-  z-index: 10;
-}
-
-.notification-pulse {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 10px;
-  height: 10px;
-  background-color: var(--color-error-surface);
-  border-radius: 50%;
-  animation: notification-waves 1.5s ease-out infinite;
-}
-
-.notification-dot {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 8px; /* Updated to 8px as requested */
-  height: 8px; /* Updated to 8px as requested */
-  background-color: var(--color-destructive);
-  border-radius: 50%;
-}
-
-@keyframes notification-waves {
-  0% {
-    width: 8px;
-    height: 8px;
-  }
-  100% {
-    width: 16px;
-    height: 16px;
-  }
+  background-image: linear-gradient(-45deg, var(--color-header-bot-gradient-teal), var(--color-header-bot-gradient-indigo), var(--color-header-bot-gradient-orange), var(--color-header-bot-gradient-purple), var(--color-header-bot-gradient-navy));
+}
+
+.header-bot-button-gradient:hover {
+  background-image: linear-gradient(-45deg, var(--color-header-bot-gradient-teal-hover), var(--color-header-bot-gradient-indigo-hover), var(--color-header-bot-gradient-orange-hover));
+}
+
+/* Header title badge — violet → primary (Figma Violet/500 → Primary) */
+.header-badge-gradient {
+  background-image: linear-gradient(270deg, var(--color-header-badge-gradient-from) 0%, var(--color-header-badge-gradient-to) 100%);
+}
+
+[data-component=file-upload-dropzone][data-state=drag-over] {
+  background-image: var(--gradient-file-upload-drag);
+  box-shadow: var(--shadow-file-upload-drag);
+}
+
+[data-component=file-upload-dropzone][data-state=invalid-type] {
+  background-image: var(--gradient-file-upload-error);
+  box-shadow: var(--shadow-file-upload-error);
+}
+
+/* Data-table saved-views bar — subtle olive gradient (tokens in impact-nova-tokens.scss) */
+.saved-view-bar-gradient {
+  background-image: linear-gradient(83.74deg, var(--color-saved-view-surface-start) 72.68%, var(--color-saved-view-surface-end) 108.88%);
+}
+/* Custom AG Grid Styles — plain CSS (no SCSS nesting). */
+
+/* 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;
+}
+
+/* Spanning + pinned header cells must be opaque — center header tiers scroll beneath them. */
+.ag-header-cell.ag-header-span-height,
+.ag-header-group-cell,
+.ag-pinned-left-header .ag-header-cell,
+.ag-pinned-left-header .ag-header-group-cell,
+.ag-pinned-right-header .ag-header-cell,
+.ag-pinned-right-header .ag-header-group-cell {
+  background-color: var(--ag-header-background-color);
 }
-.ag-pinned-left-cols-container,
-.ag-pinned-right-cols-container,
-.ag-pinned-left-header,
-.ag-pinned-right-header {
+
+/* 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);
-  z-index: 1;
+  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);
+  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
+   leaf headers. AG Grid assigns role="row" without columnheader children — hide
+   those placeholder rows from layout and the accessibility tree (no JS reconcile). */
 .ag-header-row:not(:has(.ag-header-cell, .ag-header-group-cell)) {
   display: none;
 }
@@ -221,33 +212,107 @@
 }
 
 .ag-header-cell:has(.ag-header-cell-search-active),
-.ag-header-cell:has([data-selection-column=true]) {
+.ag-header-cell:has([data-selection-column="true"]) {
+  --ag-header-cell-horizontal-padding: 0;
+  padding-left: 0;
+  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;
+}
+
+/* innerHeaderGroupComponent mounts inside AG Grid's .ag-header-group-text shell.
+   Ellipsis on that shell only applies to direct text nodes — constrain the React
+   mount so inner truncation and overflow tooltips work. */
+.ag-header-group-cell-label > .ag-header-group-text:has(.ag-react-container) {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  max-width: 100%;
+}
+
+.ag-header-group-cell-label .ag-header-group-text .ag-react-container {
+  display: flex;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
 }
 
 .ag-header-group-cell-with-group {
   border-bottom-width: 2px;
   border-bottom-style: solid;
 }
+
 .ag-header-group-cell-with-group:nth-child(odd) {
   border-bottom-color: var(--color-border-grid-header-group-purple);
 }
+
 .ag-header-group-cell-with-group:nth-child(even) {
   border-bottom-color: var(--color-warning);
 }
 
 .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 {
-  background-color: #f4f1f9;
+.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: #f4f1f9;
+  background-color: var(--color-grid-pinned-row-background);
 }
-.ag-root-wrapper .ag-row-pinned,
-.ag-root-wrapper .ag-row-pinned .ag-cell {
+
+.ag-row-pinned,
+.ag-row-pinned .ag-cell {
   box-shadow: none;
   font-weight: 600;
 }
@@ -269,8 +334,14 @@
   height: 100%;
 }
 
-.ag-header-cell[aria-sort=ascending] .ag-sort-indicator-container,
-.ag-header-cell[aria-sort=descending] .ag-sort-indicator-container,
+@media (prefers-reduced-motion: reduce) {
+  .ag-header-cell .ag-sort-indicator-container {
+    transition: none;
+  }
+}
+
+.ag-header-cell[aria-sort="ascending"] .ag-sort-indicator-container,
+.ag-header-cell[aria-sort="descending"] .ag-sort-indicator-container,
 .ag-header-cell:hover .ag-sort-indicator-container {
   opacity: 1;
   width: auto;
@@ -288,23 +359,23 @@
   justify-content: center;
 }
 
-.ag-header-cell[aria-sort=ascending] .sort-asc-icon {
+.ag-header-cell[aria-sort="ascending"] .sort-asc-icon {
   display: inline-flex;
 }
 
-.ag-header-cell[aria-sort=descending] .sort-desc-icon {
+.ag-header-cell[aria-sort="descending"] .sort-desc-icon {
   display: inline-flex;
 }
 
-.ag-header-cell[aria-sort=none]:hover .sort-none-icon {
+.ag-header-cell[aria-sort="none"]:hover .sort-none-icon {
   display: inline-flex;
 }
 
-.ag-header-cell[aria-sort=ascending] .checkmark-asc {
+.ag-header-cell[aria-sort="ascending"] .checkmark-asc {
   display: inline-flex;
 }
 
-.ag-header-cell[aria-sort=descending] .checkmark-desc {
+.ag-header-cell[aria-sort="descending"] .checkmark-desc {
   display: inline-flex;
 }
 
@@ -315,6 +386,7 @@
   line-height: 1;
   height: 100%;
 }
+
 .ag-sort-indicator-icon svg {
   display: block;
 }
@@ -335,6 +407,102 @@
   padding-right: 6px;
 }
 
+/* Capture theme cell horizontal inset before per-cell `ag-cell-no-padding` zeros it. */
+.ag-root-wrapper {
+  --in-ag-cell-horizontal-inset: var(--ag-cell-horizontal-padding);
+}
+
+/* Tree auto-group column (treeData + autoGroupColumnDef → col-id ag-Grid-AutoColumn).
+   Body uses `ag-cell-no-padding` + link `ag-cell-inner-padding`. Restore theme horizontal
+   inset on the cell so body left/right spacing matches the header and standard columns
+   (e.g. Priority); inner renderer keeps vertical inset only. */
+.ag-cell[col-id="ag-Grid-AutoColumn"].ag-cell-no-padding {
+  --ag-cell-horizontal-padding: var(--in-ag-cell-horizontal-inset);
+  padding-left: var(--in-ag-cell-horizontal-inset);
+  padding-right: var(--in-ag-cell-horizontal-inset);
+}
+
+.ag-cell[col-id="ag-Grid-AutoColumn"] .ag-cell-inner-padding {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.table-with-loader[data-density] .ag-cell[col-id="ag-Grid-AutoColumn"] .ag-cell-inner-padding {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+/* Tree row-group layout (ellipsis, flex fill). */
+.ag-cell-wrapper.ag-row-group {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.ag-group-expanded,
+.ag-group-contracted,
+.ag-group-checkbox {
+  flex-shrink: 0;
+}
+
+/* Top-level leaf rows: agGroupCellRenderer reserves chevron width via
+   .ag-row-group-leaf-indent even when the row is not expandable. Drop the
+   placeholder at depth 0 so text aligns with the column header; nested leaves
+   keep indent so they stay aligned with parent row labels. */
+:where(.ag-ltr) .ag-row.ag-row-level-0 .ag-row-group-leaf-indent {
+  margin-left: 0;
+}
+
+:where(.ag-rtl) .ag-row.ag-row-level-0 .ag-row-group-leaf-indent {
+  margin-right: 0;
+}
+
+.ag-group-value {
+  flex: 1 1 0%;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ag-group-value > div {
+  min-width: 0;
+  max-width: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.ag-cell:has(.ag-cell-wrapper.ag-row-group) {
+  overflow: hidden;
+}
+
+.ag-cell-wrapper > .ag-cell-value {
+  flex: 1 1 auto;
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+}
+
+/* AG Grid v36 may mount renderers as direct flex children (no .ag-cell-wrapper). */
+.ag-cell.ag-cell-no-padding {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.ag-cell.ag-cell-no-padding > .ag-cell-wrapper {
+  flex: 1 1 0%;
+  min-width: 0;
+  max-width: 100%;
+  width: 100%;
+}
+
+.ag-cell.ag-cell-no-padding > div:first-child:not(.ag-cell-wrapper) {
+  flex: 1 1 0%;
+  min-width: 0;
+  width: 100%;
+}
+
 .ag-cell-renderer-full-control {
   --ag-cell-horizontal-padding: 0px;
   padding-left: 0;
@@ -344,6 +512,7 @@
   line-height: normal;
   overflow: visible;
 }
+
 .ag-cell-renderer-full-control .ag-cell-wrapper {
   padding: 0;
   overflow: visible;
@@ -365,6 +534,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
 .ag-cell:not(.ag-cell-no-padding):not(.ag-cell-renderer-full-control).ag-right-aligned-cell {
   justify-content: flex-end;
 }
@@ -374,6 +544,7 @@
   width: 100%;
   overflow: hidden;
 }
+
 .ag-cell:not(.ag-cell-renderer-full-control):not(.ag-cell-no-padding) > .ag-cell-wrapper > .ag-cell-value {
   min-width: 0;
   overflow: hidden;
@@ -381,16 +552,9 @@
   white-space: nowrap;
 }
 
-.ag-cell-focus,
-.ag-cell.ag-cell-focus {
-  border-color: transparent !important;
-  outline: 2px solid Highlight !important;
-  outline-offset: -2px !important;
-}
-
-.ag-cell.ag-cell-focus:not(:focus):not(:focus-within) {
-  outline: none !important;
-}
+/* Cell focus + range selection: use AG Grid theme defaults (border per
+   .ag-cell-range-selected / .ag-cell-range-single-cell), including ranges
+   that span pinned columns. Do not override with a custom outline here. */
 
 .ag-header-cell:focus,
 .ag-header-cell:focus-visible {
@@ -404,8 +568,30 @@
   outline-offset: -2px !important;
 }
 
-.ag-cell:focus,
-.ag-cell:focus-visible {
-  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, var(--color-foreground));
+  color: var(--ag-tooltip-text-color, var(--color-primary-foreground));
+  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;
+  }
 }