@bryntum/grid-thin-trial 7.2.2 → 7.2.4

package/grid.css

@@ -15,6 +15,7 @@
 }
 .b-grid-cell.b-editing {
   color: transparent;
+  outline: 0;
 }
 .b-grid-cell.b-editing:not(.b-tree-cell) > :not(.b-editor),
 .b-grid-cell.b-editing.b-tree-cell > .b-tree-cell-value {
@@ -48,12 +49,12 @@
   --b-column-drag-toolbar-button-background: transparent;
   --b-column-drag-toolbar-title-color: var(--b-neutral-20);
   --b-column-drag-toolbar-background: var(--b-neutral-100);
+  --b-column-drag-toolbar-z-index: 100;
 }
 .b-column-drag-toolbar {
   position: absolute;
   top: calc(100% - 3em);
   left: 50%;
-  z-index: 100;
   animation-name: b-anim-show-column-drag-toolbar;
   animation-duration: 0.2s;
   translate: -50%;
@@ -65,6 +66,7 @@
   transition: opacity 0.2s, top 0.2s;
   padding: 1em 1em 0.5em 1em;
   font-size: .8em;
+  z-index: var(--b-column-drag-toolbar-z-index);
   border: var(--b-popup-border);
   border-radius: var(--b-column-drag-toolbar-border-radius);
   background: var(--b-column-drag-toolbar-background);
@@ -241,6 +243,9 @@
   --b-column-resize-touch-handle-width: 1.5em;
   --b-column-resize-header-resizing-background: var(--b-grid-header-hover-background);
   --b-column-resize-touch-resizing-icon: "\f07e";
+  --b-column-resize-handle-z-index: 3;
+  --b-column-resize-touch-z-index: 100;
+  --b-column-resize-touch-icon-z-index: 1;
 }
 .b-column-resize .b-grid-header-parent {
   overflow: visible;
@@ -252,9 +257,9 @@
   position: absolute;
   inset-block: 0;
   background: transparent;
-  z-index: 3;
   cursor: col-resize;
   display: block;
+  z-index: var(--b-column-resize-handle-z-index);
   inset-inline-end: calc(-1 * var(--b-column-resize-handle-width) / 2);
   width: var(--b-column-resize-handle-width);
 }
@@ -263,7 +268,7 @@
 }
 .b-column-resize.b-touch .b-grid-header.b-resizing {
   overflow: visible;
-  z-index: 100;
+  z-index: var(--b-column-resize-touch-z-index);
 }
 .b-column-resize.b-touch .b-grid-header.b-resizing::before {
   position: absolute;
@@ -272,7 +277,7 @@
   translate: calc(50% * var(--b-rtl-negate)) -50%;
   border-radius: 50%;
   padding: 1em;
-  z-index: 1;
+  z-index: var(--b-column-resize-touch-icon-z-index);
   background: var(--b-neutral-90);
   content: var(--b-column-resize-touch-resizing-icon);
   font-family: var(--b-widget-icon-font-family);
@@ -286,15 +291,17 @@
 :root,
 :host {
   --b-fill-handle-handle-size: .8em;
+  --b-fill-handle-z-index: 200;
+  --b-fill-handle-selection-z-index: 2;
 }
 .b-fill-handle-handle {
   translate: -50% -50%;
   position: absolute;
   cursor: crosshair;
-  z-index: 200;
   background-clip: content-box;
   user-select: none;
   -webkit-user-select: none;
+  z-index: var(--b-fill-handle-z-index);
   background: var(--b-grid-cell-focused-outline-color);
   border: 1px solid var(--b-grid-cell-background);
   width: var(--b-fill-handle-handle-size);
@@ -309,9 +316,9 @@
   position: absolute;
   border-radius: .1em;
   pointer-events: none;
-  z-index: 2;
   user-select: none;
   -webkit-user-select: none;
+  z-index: var(--b-fill-handle-selection-z-index);
   border: var(--b-grid-cell-focused-outline-width) solid var(--b-grid-cell-focused-outline-color);
 }
 .b-indicate-crop {
@@ -483,6 +490,7 @@
   --b-group-header-border-width: var(--b-grid-row-border-width);
   --b-group-header-zindex: 5;
   --b-group-header-collapsing-zindex: 7;
+  --b-group-title-z-index: 1;
   --b-group-collapse-icon: "\f107";
   --b-group-header-icon: "\f5fd";
   --b-group-header-background: var(--b-neutral-100);
@@ -531,12 +539,12 @@
 }
 .b-grid-cell.b-group-title {
   contain: size layout style;
-  z-index: 1;
   justify-content: flex-start;
   text-align: start;
   --b-grid-cell-color: var(--b-group-header-color);
   --b-grid-cell-font-weight: var(--b-group-header-font-weight);
   --bi-grid-cell-overflow: visible;
+  z-index: var(--b-group-title-z-index);
   gap: var(--b-widget-gap);
 }
 .b-group-state-icon {
@@ -595,9 +603,10 @@
 :host {
   --b-locked-rows-separator-width: 1px;
   --b-locked-rows-separator-color: var(--b-grid-splitter-color, var(--b-grid-splitter-narrow-color));
+  --b-locked-rows-z-index: 1;
 }
 .b-locked-rows {
-  z-index: 1;
+  z-index: var(--b-locked-rows-z-index);
 }
 .b-locked-rows [aria-rowcount="1"] .b-virtual-scrollers {
   flex-basis: 0;
@@ -621,6 +630,10 @@
 }
 
 /* lib/Grid/feature/MergeCells.css */
+:root,
+:host {
+  --b-merged-cells-z-index: 2;
+}
 .b-merge-cells .b-single-child .b-grid-sub-grid:not(.b-grid-sub-grid-collapsed, .b-time-axis-sub-grid, .b-horizontal-overflow) {
   overflow: clip !important;
 }
@@ -638,17 +651,20 @@
 .b-grid-merged-cells {
   position: absolute;
   contain: strict;
-  z-index: 2;
   display: flex;
   align-items: flex-start;
   border-bottom: var(--b-grid-cell-border-width) solid var(--b-grid-cell-border-color);
   --b-grid-cell-background: transparent;
   --b-grid-row-border-color: transparent;
   --bi-grid-cell-overflow: visible;
+  z-index: var(--b-merged-cells-z-index);
 }
 .b-merge-cells-passthrough .b-grid-merged-cells {
   pointer-events: none;
 }
+.b-merge-cells-passthrough .b-grid-merged-cells [data-btip] {
+  pointer-events: auto;
+}
 .b-grid-merged-cells .b-grid-cell {
   position: sticky;
   top: 0;
@@ -665,6 +681,7 @@
   --b-quick-find-header-inset: 0;
   --b-quick-find-hit-padding: .2em 0;
   --b-quick-find-header-badge-color: var(--b-grid-header-color);
+  --b-quick-find-header-z-index: 1;
 }
 .b-quick-hit-cell {
   background: var(--b-quick-find-background, var(--b-primary-95));
@@ -681,9 +698,9 @@
 }
 .b-quick-hit-header {
   position: absolute;
-  z-index: 1;
   display: grid;
   place-items: center;
+  z-index: var(--b-quick-find-header-z-index);
   --b-primary: var(--b-quick-find-primary);
   inset: var(--b-quick-find-header-inset);
   background: var(--b-quick-find-background, var(--b-primary-95));
@@ -724,7 +741,7 @@
 .b-grid-base.b-split .b-grid-splitter:not(.b-disabled) {
   --b-grid-splitter-width: var(--b-region-resize-splitter-width);
 }
-@media (pointer : coarse) {
+@media (pointer: coarse) {
   .b-grid-base.b-split {
     --b-region-resize-splitter-width-hover: var(--b-region-resize-splitter-touch-width-hover);
   }
@@ -734,7 +751,7 @@
   pointer-events: var(--bi-grid-splitter-pointer-events, none);
   z-index: var(--b-grid-splitter-zindex);
 }
-@media (any-pointer : coarse) {
+@media (any-pointer: coarse) {
   .b-grid-splitter {
     --bi-grid-splitter-button-size: 1.3em;
   }
@@ -889,6 +906,7 @@
   --b-row-expander-font-weight: var(--b-grid-cell-font-weight);
   --b-row-expander-border-bottom-color: var(--b-grid-row-border-color);
   --b-row-expander-color: var(--b-grid-cell-color);
+  --b-row-expander-body-z-index: 100;
 }
 .b-row-expander-body {
   display: flex;
@@ -908,9 +926,9 @@
   outline-offset: calc(var(--b-widget-focus-outline-width) * -1);
 }
 .b-grid-vertical-scroller > .b-row-expander-body {
-  z-index: 100;
   transition: height .3s, top .3s;
   overflow: hidden;
+  z-index: var(--b-row-expander-body-z-index);
 }
 .b-row-expander-loading {
   justify-content: center;
@@ -962,6 +980,11 @@
   --b-row-reorder-box-shadow: var(--b-elevation-1);
   --b-row-reorder-invalid-background: color-mix(in oklab, var(--b-row-reorder-indicator-invalid-color), transparent 80%);
   --b-row-reorder-proxy-opacity: 0.5;
+  --b-row-reorder-drop-indicator-z-index: 2000;
+  --b-row-reorder-body-z-index: 4;
+  --b-row-reorder-target-z-index: 9999;
+  --b-row-reorder-proxy-z-index: 10000;
+  --b-row-reorder-copy-z-index: 20000;
 }
 .b-row-drop-indicator {
   display: none;
@@ -972,7 +995,7 @@
   display: block;
   left: 0;
   width: 100%;
-  z-index: 2000;
+  z-index: var(--b-row-reorder-drop-indicator-z-index);
   top: calc(var(--b-row-reorder-indicator-size) / -2);
   height: var(--b-row-reorder-indicator-size);
   background-color: var(--b-row-reorder-indicator-color);
@@ -981,7 +1004,7 @@
   --b-row-reorder-indicator-color: var(--b-row-reorder-indicator-invalid-color);
 }
 .b-row-reordering .b-grid-body-container {
-  z-index: 4;
+  z-index: var(--b-row-reorder-body-z-index);
 }
 .b-row-reordering .b-drag-original {
   opacity: 0.3;
@@ -990,7 +1013,7 @@
   --b-grid-cell-background: var(--b-grid-cell-hover-background);
 }
 .b-row-reordering .b-row-reordering-target {
-  z-index: 9999;
+  z-index: var(--b-row-reorder-target-z-index);
   box-shadow: 0 1px 0 0 var(--b-row-reorder-indicator-color) inset, 0 -1px 0 0 var(--b-row-reorder-indicator-color) inset;
 }
 .b-row-reorder-grip {
@@ -1029,8 +1052,8 @@
   flex-direction: column;
   width: auto !important;
   height: auto !important;
-  z-index: 10000;
   overflow: visible;
+  z-index: var(--b-row-reorder-proxy-z-index);
 }
 .b-row-reorder-proxy .b-grid-row {
   position: relative;
@@ -1049,7 +1072,7 @@
   top: -.5em;
   border-radius: 50%;
   padding: .75em;
-  z-index: 20000;
+  z-index: var(--b-row-reorder-copy-z-index);
   background: var(--b-panel-background);
   box-shadow: var(--b-row-reorder-box-shadow);
 }
@@ -1076,11 +1099,15 @@
 }
 
 /* lib/Grid/feature/RowResize.css */
+:root,
+:host {
+  --b-row-resize-z-index: 2;
+}
 .b-row-resize .b-grid-row.b-resize-handle {
   cursor: row-resize !important;
 }
 .b-row-resize .b-grid-row.b-resizing {
-  z-index: 2;
+  z-index: var(--b-row-resize-z-index);
 }
 .b-row-resize.b-row-resizing .b-grid-row {
   pointer-events: none;
@@ -1127,6 +1154,7 @@
   --bi-grid-sort-icon-opacity: 0;
   --bi-grid-sort-icon-size: 0;
   --bi-grid-sort-icon-margin-inline-start: 0;
+  --b-sort-index-z-index: 30;
 }
 .b-sort-hover-icon .b-grid-header.b-sortable {
   cursor: pointer;
@@ -1175,8 +1203,8 @@
   content: attr(data-sort-index);
   position: relative;
   top: 1em;
-  z-index: 30;
   order: 1;
+  z-index: var(--b-sort-index-z-index);
   color: var(--b-sort-header-index-color);
   font-size: var(--b-sort-header-index-font-size);
 }
@@ -1511,6 +1539,8 @@ html.b-print-root,
   --b-grid-row-height: 45px;
   --b-grid-row-border-width: 1px;
   --b-grid-row-zindex: 1;
+  --b-grid-empty-text-z-index: 10;
+  --b-grid-editing-z-index: 2;
   --b-grid-splitter-width: 1px;
   --b-grid-cell-border-color: var(--b-border-7);
   --b-grid-cell-background: var(--b-neutral-100);
@@ -1555,19 +1585,19 @@ html.b-print-root,
   position: relative;
   color: var(--b-grid-empty-color);
   padding: var(--b-grid-empty-padding);
-  z-index: 10;
+  z-index: var(--b-grid-empty-text-z-index);
 }
 .b-grid-base .b-editing {
   overflow: visible;
   contain: unset;
-  z-index: 2;
+  z-index: var(--b-grid-editing-z-index);
 }
 .b-grid-base.b-splicing-rows-toggle .b-grid-row:is(.b-adding, .b-removing, .b-repositioning),
 .b-grid-base.b-splicing-rows-remove .b-grid-row:is(.b-removing, .b-repositioning),
 .b-grid-base.b-splicing-rows-insert .b-grid-row:is(.b-adding, .b-repositioning) {
   transition: top var(--b-grid-row-transition-duration), left var(--b-grid-row-transition-duration);
-  z-index: calc(var(--b-grid-row-zindex) - 1);
   pointer-events: none;
+  z-index: calc(var(--b-grid-row-zindex) - 1);
 }
 .b-grid-base.b-collapsing-column .b-collapsing,
 .b-grid-base.b-collapsing-column .b-collapsing .b-grid-header:not(:first-child) {
@@ -1863,6 +1893,8 @@ div.b-grid-header-container .b-yscroll-pad {
   --bi-grid-cell-dirty-indicator-clip-path: polygon(0% 50%, 0% 0%, 50% 0%);
   --bi-grid-cell-dirty-indicator-clip-path-rtl: polygon(100% 50%, 50% 0%, 100% 0%);
   --b-grid-cell-auto-height-padding-block: var(--b-grid-cell-padding-inline);
+  --b-grid-dirty-indicator-z-index: 2;
+  --b-grid-virtual-scrollers-z-index: 3;
 }
 .b-no-column-lines,
 .b-no-column-lines .b-grid-sub-grid {
@@ -1928,7 +1960,6 @@ div.b-grid-header-container .b-yscroll-pad {
 }
 .b-grid-row.b-row-placeholder .b-grid-cell {
   color: transparent;
-  clip-path: inset(1em 1em 1em 1em);
 }
 .b-grid-row.b-row-placeholder .b-grid-cell > *:not(.b-editor) {
   display: none;
@@ -1936,8 +1967,8 @@ div.b-grid-header-container .b-yscroll-pad {
 .b-grid-row.b-row-placeholder .b-grid-cell::after {
   content: "";
   position: absolute;
-  inset: 1em;
-  border-radius: 5px;
+  inset: 1.2em var(--b-grid-cell-padding-inline);
+  border-radius: var(--b-widget-border-radius);
   background: var(--b-grid-row-placeholder-color);
 }
 .b-hide-row-hover {
@@ -1975,6 +2006,7 @@ div.b-grid-header-container .b-yscroll-pad {
 .b-theme-transition .b-grid-cell {
   transition: background-color var(--b-default-transition-duration), border var(--b-default-transition-duration);
 }
+.b-chrome .b-grid-cell,
 .b-windows .b-grid-cell {
   contain: layout;
 }
@@ -2031,12 +2063,12 @@ div.b-grid-header-container .b-yscroll-pad {
 .b-show-dirty .b-cell-dirty:not(.b-editing):after,
 .b-show-dirty-during-edit .b-cell-dirty:after {
   content: "";
-  z-index: 2;
   position: absolute;
   top: 0;
   inset-inline-start: 1px;
   width: 1.2em;
   height: 1.2em;
+  z-index: var(--b-grid-dirty-indicator-z-index);
   background-color: var(--b-grid-cell-dirty-color);
   clip-path: var(--bi-grid-cell-dirty-indicator-clip-path);
 }
@@ -2049,10 +2081,10 @@ div.b-grid-header-container .b-yscroll-pad {
   display: none;
 }
 .b-virtual-scrollers {
-  z-index: 3;
   display: flex;
   flex-direction: row;
   contain: paint style layout;
+  z-index: var(--b-grid-virtual-scrollers-z-index);
 }
 .b-firefox .b-virtual-scrollers {
   contain: paint layout;
@@ -2271,6 +2303,8 @@ div.b-grid-header-container .b-yscroll-pad {
   --b-percent-column-circle-background: var(--b-grid-cell-border-color);
   --b-percent-column-circle-label-color: var(--b-grid-cell-color);
   --bi-percent-column-transition: none;
+  --b-percent-column-bar-z-index: 1;
+  --b-percent-column-value-z-index: 1;
 }
 .b-percent-bar-outer {
   display: flex;
@@ -2291,7 +2325,7 @@ div.b-grid-header-container .b-yscroll-pad {
   --b-percent-column-value-color: var(--b-percent-column-zero-value-color);
 }
 .b-percent-bar-outer .b-percent-bar {
-  z-index: 1;
+  z-index: var(--b-percent-column-bar-z-index);
   background: var(--b-percent-column-fill-background, var(--b-primary-50));
   width: var(--bi-percent-bar-value);
   transition: var(--bi-percent-column-transition);
@@ -2304,7 +2338,7 @@ div.b-grid-header-container .b-yscroll-pad {
   font-size: 0.6em;
   container-name: percent-column-value;
   container-type: size;
-  z-index: 1;
+  z-index: var(--b-percent-column-value-z-index);
 }
 .b-percent-bar-value label {
   transition: translate .5s, color .5s;