impact-nova 2.1.0-alpha.9 → 2.2.0

package/dist/impact-nova-components.css

@@ -139,6 +139,21 @@
 .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
@@ -149,6 +164,16 @@
   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);
+}
+
 /* 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);
@@ -242,6 +267,23 @@
   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;
@@ -365,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;
@@ -414,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 {
@@ -437,12 +568,6 @@
   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;

package/dist/impact-nova-tokens.scss

@@ -99,12 +99,16 @@
     --color-pin-switch-track-bg: #f5f6fa;
     --color-pin-switch-track-border: #eff2fa;
     --color-pin-switch-track-hover: #ebedf5;
+    --color-saved-view-surface-end: #d7e5b2;
+    --color-saved-view-surface-start: #f5f9ec;
     --color-tab-active-border: #4259ee;
     --color-tab-active-foreground: #3649c6;
     --color-tab-active-surface: #f8f9fb;
     --color-tab-hover-border: #c6ccf1;
     --color-tab-hover-foreground: #7a83b8;
     --color-tab-hover-surface: #f2f3fd;
+    --gradient-file-upload-drag: radial-gradient(circle at center, #fafbff 0%, #f4f6ff 60%, #eef1ff 100%);
+    --gradient-file-upload-error: radial-gradient(circle at center, #ffffff 0%, #fffcfc 65%, #fdf5f4 100%);
 
     /* —— Status & feedback —— */
     --color-destructive: #e15554;
@@ -159,6 +163,8 @@
     --shadow-elevation-settings: 0px 0px 2px 0px rgb(0 0 0 / 25%);
     --shadow-elevation-toast: 0px 10px 30px 0px rgb(0 0 0 / 15%);
     --shadow-elevation-wizard-footer: 0 -4px 8px -6px rgb(13 21 44 / 8%);
+    --shadow-file-upload-drag: inset 0 0 96px 23px rgb(66 89 238 / 0.14);
+    --shadow-file-upload-error: inset 0 0 20px rgb(225 85 84 / 0.12);
 
     /* —— Overlay / scrim —— */
     --color-scrim: hsl(0 0% 0% / 0.4);
@@ -318,12 +324,16 @@
     --color-pin-switch-track-bg: #171717;
     --color-pin-switch-track-border: #282828;
     --color-pin-switch-track-hover: #404040;
+    --color-saved-view-surface-end: #2d3818;
+    --color-saved-view-surface-start: #1e2416;
     --color-tab-active-border: #fafafa;
     --color-tab-active-foreground: #fafafa;
     --color-tab-active-surface: #262626;
     --color-tab-hover-border: #737373;
     --color-tab-hover-foreground: #fafafa;
     --color-tab-hover-surface: #404040;
+    --gradient-file-upload-drag: radial-gradient(circle at center, #fafbff 0%, #f4f6ff 60%, #eef1ff 100%);
+    --gradient-file-upload-error: radial-gradient(circle at center, #ffffff 0%, #fffcfc 65%, #fdf5f4 100%);
 
     /* —— Status & feedback —— */
     --color-destructive: #ff6467;
@@ -378,6 +388,8 @@
     --shadow-elevation-settings: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
     --shadow-elevation-toast: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
     --shadow-elevation-wizard-footer: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+    --shadow-file-upload-drag: inset 0 0 96px 23px rgb(66 89 238 / 0.14);
+    --shadow-file-upload-error: inset 0 0 20px rgb(225 85 84 / 0.12);
 
     /* —— Overlay / scrim —— */
     --color-scrim: hsl(0 0% 0% / 0.55);