@bryntum/grid-thin-trial 7.2.3 → 7.3.0

package/README.md

@@ -80,7 +80,6 @@ The **Thin package** contains only product-specific code and styling, making it
 * [Angular](https://angularjs.org/): `>= 9.0.0`
 * [React](https://react.dev/): `>= 16.0.0`
 * [Vue](https://vuejs.org/): `>= 3.0.0`
-* [Ionic](https://ionicframework.com/): `>= 5.0.0`
 * [Vite](https://vite.dev/): `>= 4.0.0`
 * [Webpack](https://webpack.js.org/): `>= 4.0.0`
 

package/fluent2-dark.css

@@ -147,6 +147,22 @@
 
     /* TaskBoard */
     --b-task-board-column-header-font-weight     : 600;
+
+    /* Heat map values ranging from lowest to highest intensity to create
+     * background colors to indicate how "hot" an element is, for example
+     * based on the number of events in a calendar cell.
+     */
+     /*
+      * Start color for the heatmap, representing the lowest intensity (e.g. 1 event in a calendar cell).
+      */
+    --b-heatmap-start          : oklab(0.53 -0.03 0.1);
+
+    /*
+     * End color for the heatmap, representing the highest intensity (e.g. 10 or more events in a calendar cell).
+     */
+    --b-heatmap-end            : oklab(0.38 0.13 0.03);
+
+    --b-heatmap-mix-blend-mode : hard-light;
 }
 
 /* Shades of primary color have to be specified per widget, for color-mix to work as intended */

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));
@@ -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);
 }
@@ -1208,27 +1236,19 @@
 }
 
 /* lib/Grid/feature/StickyCells.css */
-.b-sticky-cells .b-grid-sticky-row {
-  position: absolute;
-  top: 0;
-  left: 0;
-  min-width: auto;
-  border: 0 none;
-  padding: 0;
-  contain: initial;
+.b-sticky-cells {
+  --b-grid-cell-padding-block: var(--b-widget-padding);
 }
-.b-sticky-cells .b-grid-sticky-row .b-grid-cell {
-  width: min-content;
-  contain: initial;
-  padding: 0;
-  border: 0 none;
-}
-.b-sticky-cells .b-sticky-cells-current-top-row .b-sticky-content-el {
-  visibility: hidden;
+.b-sticky-cells .b-sticky-cell-content {
+  width: 100%;
+  will-change: transform;
+  align-items: center;
+  display: inherit;
+  text-align: inherit;
+  justify-content: inherit;
 }
-.b-sticky-cells .b-sticky-cells-current-top-row.b-not-enough-height .b-sticky-content-el {
-  visibility: visible;
-  align-self: flex-end;
+.b-sticky-cells .b-tree-cell .b-sticky-cell-content {
+  align-self: center;
 }
 
 /* lib/Grid/feature/Stripe.css */
@@ -1511,6 +1531,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 +1577,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) {
@@ -1636,12 +1658,6 @@ html.b-print-root,
 .b-grid-panel-body:not(.b-auto-height) > .b-grid-body-container > .b-grid-vertical-scroller {
   min-height: 100%;
 }
-.b-grid-base.b-enable-sticky .b-sticky-cell,
-.b-grid-base.b-enable-sticky .b-grid-sub-grid,
-.b-grid-base.b-enable-sticky .b-grid-vertical-scroller,
-.b-grid-base.b-enable-sticky .b-grid-row {
-  overflow: visible !important;
-}
 .b-grid-base > .b-panel-body-wrap {
   --b-toolbar-background: var(--b-grid-toolbar-background);
 }
@@ -1863,6 +1879,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 {
@@ -1974,6 +1992,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;
 }
@@ -2030,12 +2049,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);
 }
@@ -2048,10 +2067,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;
@@ -2270,6 +2289,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;
@@ -2290,11 +2311,14 @@ 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);
 }
+.b-sticky-cell-content .b-percent-bar-outer {
+  height: var(--b-percent-column-bar-max-height);
+}
 .b-percent-bar-value {
   display: flex;
   align-items: center;
@@ -2303,7 +2327,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;
@@ -2428,6 +2452,7 @@ div.b-grid-header-container .b-yscroll-pad {
   --b-tree-line-width: 2px;
   --b-tree-line-color: var(--b-neutral-85);
   --b-tree-line-offset: .45em;
+  --b-tree-empty-parent-icon-opacity: .5;
 }
 .b-internal {
   --b-tree-level: null;
@@ -2487,7 +2512,8 @@ div.b-grid-header-container .b-yscroll-pad {
   margin-inline-start: .1em;
 }
 :is(.b-icon-tree-expand, .b-icon-tree-collapse).b-empty-parent {
-  visibility: hidden;
+  pointer-events: none;
+  opacity: var(--b-tree-empty-parent-icon-opacity);
 }
 :is(.b-icon-tree-expand, .b-icon-tree-collapse):before {
   font-size: var(--b-tree-expander-icon-font-size);