@bryntum/grid-thin-trial 7.1.1

package/lib/view/Header.css

@@ -0,0 +1,320 @@
+/* Vars apply also for dragged column headers = in float root */
+:root, :host {
+    /**
+     * Grid header font size
+     */
+    --b-grid-header-font-size                : inherit;
+
+    /**
+     * Grid header font weight
+     */
+    --b-grid-header-font-weight              : 500;
+
+    /**
+     * Grid header padding. By default uses grid cells inline padding value (for both block & inline)
+     */
+    --b-grid-header-padding                  : var(--b-grid-cell-padding-inline);
+
+    /**
+     * Grid header text transform
+     */
+    --b-grid-header-text-transform           : none;
+
+    /**
+     * Grid header text align
+     */
+    --b-grid-header-text-align               : start;
+
+    /**
+     * Grid header inner gap
+     */
+    --b-grid-header-gap                      : 0.5em;
+
+    /**
+     * Grid header icon font size
+     */
+    --b-grid-header-icon-font-size           : 1em;
+
+    /**
+     * Grid header border width (for header "cells"). By default same as cell border width
+     */
+    --b-grid-header-border-width             : var(--b-grid-cell-border-width);
+
+    /**
+     * Grid header container border width (the entire header)
+     */
+    --b-grid-header-container-border-width   : 1px;
+
+    /**
+     * Grid header z-index
+     */
+    --b-grid-header-zindex                   : 1;
+
+    /**
+     * Grid header icon transition duration (for example when fading icons in/out on hover)
+     */
+    --b-grid-header-icon-transition-duration : var(--b-default-transition-duration);
+
+    /**
+     * Grid header background color
+     */
+    --b-grid-header-background               : var(--b-neutral-100);
+
+    /**
+     * Grid header box-shadow
+     */
+    --b-grid-header-box-shadow               : var(--b-elevation-0);
+
+    /**
+     * Grid header text color
+     */
+    --b-grid-header-color                    : var(--b-widget-color);
+
+    /**
+     * Grid header icon color
+     */
+    --b-grid-header-icon-color               : var(--b-grid-header-color);
+
+    /**
+     * Grid header border color
+     */
+    --b-grid-header-border-color             : var(--b-grid-cell-border-color);
+
+    /**
+     * Grid header text color when hovered
+     * @state Hovered
+     */
+    --b-grid-header-hover-color              : var(--b-widget-color);
+}
+
+/* .b-bryntum { */
+    /**
+     * Background color for the header when hovered
+     * @state Hovered
+     */
+    /*--b-grid-header-hover-background : var(--b-primary-98);*/
+/* } */
+
+.b-grid-headers,
+.b-grid-footers {
+    contain : paint style layout;
+    flex    : 1 1 auto;
+
+    z-index : var(--b-grid-header-zindex);
+}
+
+/* Using tag name to increase specificity, otherwise rule gets overridden by salesforce styles */
+div.b-grid-header-container,
+.b-grid-footer-container {
+    display : flex;
+    z-index : var(--b-grid-header-zindex);
+}
+
+div.b-grid-header-container {
+    /* Clipped out of visibility, but still present foy A11Y purposes when hideHeaders is used*/
+    &.b-hidden {
+        /* Make zero height */
+        clip-path     : inset(0 0 100% 0);
+        contain       : strict;
+        border-bottom : none;
+    }
+
+    .b-yscroll-pad {
+        border-bottom : var(--b-grid-header-container-border-width) solid var(--b-grid-header-border-color);
+    }
+}
+
+.b-grid-header-scroller {
+    display    : flex;
+    position   : relative;
+    overflow   : clip;
+    min-width  : 0;
+
+    box-shadow : var(--b-grid-header-box-shadow);
+}
+
+.b-grid-headers {
+    display     : flex;
+    flex-flow   : row nowrap;
+    align-items : stretch;
+    overflow    : clip;
+    /* In case page uses its own line-height, it would break our rendering potentially */
+    line-height : initial;
+    /* If position is specified absolutely positioned elements inside the header in Firefox pick wrong parent as offsetParent */
+    position    : relative;
+}
+
+.b-grid-header {
+    position                           : relative;
+    display                            : flex;
+    user-select                        : none;
+    -webkit-user-select                : none;
+    flex-direction                     : column;
+    flex-shrink                        : 0;
+    align-items                        : stretch;
+    justify-content                    : center;
+    overflow                           : clip;
+    transition                         : background-color var(--b-default-transition-duration), border var(--b-default-transition-duration);
+    contain                            : style;
+
+    /* Allows manipulating header-background & header-hover-background separately in HorizontalTimeAxis.css */
+    --b-grid-header-applied-background : var(--b-grid-header-background);
+
+    background                         : var(--b-grid-header-applied-background);
+    border-inline-end                  : var(--b-grid-header-border-width) solid var(--b-grid-header-border-color);
+    color                              : var(--b-grid-header-color);
+    font-size                          : var(--b-grid-header-font-size);
+    font-weight                        : var(--b-grid-header-font-weight);
+    text-transform                     : var(--b-grid-header-text-transform);
+
+    &.b-depth-0:hover {
+        /* Not setting the var here on purpose, makes it easier to handle in HorizontalTimeAxis */
+        color                              : var(--b-grid-header-hover-color);
+
+        --b-grid-header-applied-background : var(--b-grid-header-hover-background, var(--b-primary-98));
+        --b-grid-header-icon-color         : var(--b-grid-header-hover-color);
+    }
+
+    &.b-focused:focus-visible {
+        outline        : var(--b-grid-cell-focused-outline-width) solid var(--b-grid-cell-focused-outline-color);
+        outline-offset : calc(var(--b-grid-cell-focused-outline-width) * -1);
+    }
+
+    &.b-depth-0 {
+        width            : 0; /* Flex trick to get small widths correct */
+
+        padding-inline   : var(--b-grid-header-padding);
+        border-block-end : var(--b-grid-header-container-border-width) solid var(--b-grid-header-border-color);
+    }
+
+    .b-fill-last-column &.b-last-leaf:not(.b-drop-placeholder) {
+        border-inline-end : none;
+    }
+
+    /* Hide empty text content element if we have a widget, to not get additional gap */
+    &:has(.b-widget) .b-grid-header-text-content:empty {
+        display : none;
+    }
+}
+
+.b-grid-header-parent {
+    border-inline-end : none;
+    flex-basis        : auto;
+    padding-inline    : 0;
+
+    > .b-grid-header-text {
+        flex    : 1 1 auto;
+
+        padding : var(--b-grid-header-padding);
+    }
+
+    &:where(:not(.b-last-parent)) > .b-grid-header-text {
+        transition        : background-color var(--b-default-transition-duration), border var(--b-default-transition-duration);
+
+        border-inline-end : var(--b-grid-header-border-width) solid var(--b-grid-header-border-color);
+    }
+}
+
+/* When not a leaf, there's a top border */
+/* and the child columns are arranged in a row. */
+.b-grid-header-children {
+    display    : flex;
+    flex-flow  : row nowrap;
+    flex       : 1 1 auto;
+    transition : border var(--b-default-transition-duration);
+
+    border-top : var(--b-grid-header-border-width) solid var(--b-grid-header-border-color);
+
+    /* Allow the column flexbox to width the children */
+    > * {
+        width : inherit;
+    }
+}
+
+.b-grid-header-text {
+    display       : flex;
+    align-items   : center;
+
+    padding-block : var(--b-grid-header-padding);
+
+    &:has(.b-widget) {
+        /* Some air around header widgets if present */
+        gap : var(--b-grid-header-gap);
+    }
+}
+
+.b-grid-header-text-content {
+    flex          : 1;
+    overflow      : clip;
+    text-overflow : ellipsis;
+    white-space   : nowrap;
+    width         : 0;
+
+    text-align    : var(--b-grid-header-text-align);
+
+    &.b-has-text > * {
+        margin-inline-end : var(--b-grid-header-gap);
+    }
+}
+
+/* Use start and end to be LTR/RTL neutral */
+.b-grid-header-align-right,
+.b-grid-header-align-end {
+    --b-grid-header-text-align : end;
+}
+
+.b-grid-header-align-center {
+    --b-grid-header-text-align : center;
+}
+
+.b-writing-mode-sideways-lr,
+.b-writing-mode-sideways-rl,
+.b-writing-mode-vertical-lr,
+.b-writing-mode-vertical-rl {
+    .b-grid-header-text-content {
+        display     : flex;
+        text-align  : start;
+        align-items : var(--b-grid-header-text-align);
+    }
+}
+
+.b-writing-mode-sideways-lr .b-grid-header-text-content {
+    writing-mode : sideways-lr;
+}
+
+.b-writing-mode-sideways-rl .b-grid-header-text-content {
+    writing-mode : sideways-rl;
+}
+
+.b-writing-mode-horizontal-tb .b-grid-header-text-content {
+    writing-mode : horizontal-tb;
+}
+
+.b-writing-mode-vertical-lr .b-grid-header-text-content {
+    writing-mode : vertical-lr;
+}
+
+.b-writing-mode-vertical-rl .b-grid-header-text-content {
+    writing-mode : vertical-rl;
+}
+
+/* region Collapsing */
+
+/* Make collapse button fit and be positioned nicely */
+.b-grid-header.b-collapsible > .b-grid-header-text {
+    /* padding-block      : calc(var(--b-grid-header-padding) / 2); */
+    /* padding-inline-end : 0; */
+}
+
+.b-grid-header-collapse-button {
+    background                 : transparent;
+
+    --b-button-height          : 1em;
+    --b-button-type-text-color : var(--b-neutral-60);
+
+    &:hover {
+        --b-button-color : var(--b-grid-header-color);
+    }
+}
+
+/* endregion */

package/lib/view/Header.js

@@ -0,0 +1 @@
+function _gra(){const R=['getColumnConfig','collapsible','depth','b-grid-header','sideways-rl','innerHTML','355266qInSPy','setLength','visibleColumns','encodeConfig','columns','removeResizeListener','encodeHtml','call','tabIndex','traverse','bind','asap','isReactElement','initClass','columnReorder','2369814IWqhcf','b-grid-header-parent','1LBCTAl','-column-','icon','observe','contentElement','11dgNogu','getHeader','removeElement','<i\x20class=\x22','internalOnWidthChanged','headerRenderer','forEach','headersElement','column','5426112DpUvzT','@bryntum/grid-thin/lib/view/Header.css','cachePositions','columnheader','focusedCell','className','getBarCellElement','left','firstElementChild','unobserve','4625406fYRNyE','headerWidgets','render','construct','subGrid','rowIndex','grid','126855HeYelF','24AVEFar','children','getBoundingClientRect','length','handleColumnResize','14495330ABUYzY','initDepths','width','headerWritingMode','4SIUGrs','type','refreshColumn','fixHeaderWidths','region','ion','refreshContent','vertical-rl','maxDepth','b-grid-headers-','$hasChangedColumns','map','isDestroyed','changeElement','headerWidgetMap','doColumnResize','filter','Header','935015OGJHDp','flex','thisObj','sync','horizontal-tb','hasVerticalText','owner','gridheader','_subGrid','b-grid-header-resize-handle','b-level-','$name','topColumns','loadStylesheet','columnsDetacher','chainedFilterFn','meta','14UJMjcN'];_gra=function(){return R;};return _gra();}function _gru(a,b){return _grb(b-0x1ae,a);}(function(a,b){const c=a();function t(a,b){return _grb(a-0x16,b);}while(!![]){try{const d=parseInt(t(0x1e6,0x1cc))/0x1*(parseInt(t(0x1e4,0x1ee))/0x2)+-parseInt(t(0x1fe,0x1e2))/0x3*(-parseInt(t(0x20f,0x205))/0x4)+-parseInt(t(0x221,0x23c))/0x5+-parseInt(t(0x1d5,0x1d6))/0x6*(-parseInt(t(0x232,0x21f))/0x7)+-parseInt(t(0x206,0x227))/0x8*(-parseInt(t(0x205,0x215))/0x9)+-parseInt(t(0x20b,0x230))/0xa*(parseInt(t(0x1eb,0x1e4))/0xb)+-parseInt(t(0x1f4,0x1e4))/0xc;if(d===b){break;}else{c['push'](c['shift']());}}catch(e){c['push'](c['shift']());}}}(_gra,0xc2ff0));import _grc from'./Bar.js';import _grd from'@bryntum/core-thin/lib/helper/StringHelper.js';import _gre from'@bryntum/core-thin/lib/helper/DomSync.js';import _grf from'@bryntum/core-thin/lib/widget/Tooltip.js';import _grg from'@bryntum/core-thin/lib/helper/DomHelper.js';import _grh from'@bryntum/core-thin/lib/helper/ResizeMonitor.js';function _grb(a,b){const c=_gra();_grb=function(d,e){d=d-0x1bc;let f=c[d];return f;};return _grb(a,b);}_grg[_gru(0x3dc,0x3c6)](_gru(0x377,0x38d));export default class Header extends _grc{static [_gru(0x3d7,0x3c4)]=_gru(0x3b9,0x3b8);static [_gru(0x3be,0x3a8)]=_gru(0x3d9,0x3c0);['construct'](...a){function v(a,b){return _gru(b,a- -0x23b);}this[v(0x167,0x191)]=this['handleColumnResize'][v(0x13c,0x142)](this);super[v(0x15e,0x16f)](...a);}static ['delayable']={'doColumnResize':_gru(0x3a5,0x378)};[_gru(0x391,0x3a2)](a,b,c){var d;function w(a,b){return _gru(a,b- -0x1d9);}const {grid:e}=this[w(0x1c3,0x1c1)]||{};if(!this[w(0x1f1,0x1da)]&&e&&(!b||c['width']!==b['width'])&&!((d=e['features'][w(0x177,0x1a2)])!==null&&d!==void 0x0&&d['isReordering'])){this[w(0x1c4,0x1d8)]=!![];this[w(0x1c5,0x1dd)]();}}['doColumnResize'](){function x(a,b){return _gru(a,b- -0x5e);}if(this[x(0x344,0x353)]){var a;this[x(0x311,0x330)]();(a=this[x(0x333,0x33c)])===null||a===void 0x0||a[x(0x332,0x33e)]['rowManager']['positionCells']();this[x(0x345,0x353)]=![];}}[_gru(0x386,0x38e)](){function y(a,b){return _gru(b,a- -0x279);}const a=this,{rtl:b,contentElement:c}=a,d=c[y(0x127,0x147)](),{scrollLeft:e}=c;for(const g of a[y(0xf8,0xdb)][y(0xf6,0x10d)]){const h=a['getHeader'](g['id']);if(h){const i=h['getBoundingClientRect'](),j=i[y(0x12c,0x11b)],k=g[y(0x150,0x14e)][y(0x12c,0x131)];let l=i[y(0x11a,0x13b)]-d['left']+e;if(b){l=d[y(0x12c,0x125)]-l-j;}g[y(0x150,0x12d)]['width']=j;g['meta']['x']=l;if(k!==j){var f;(f=g[y(0x10e,0xf6)])===null||f===void 0x0||f[y(0xfb,0x124)](g,{'width':j,'oldWidth':k});}}}}[_gru(0x39f,0x381)](a){function z(a,b){return _gru(a,b-0xb5);}_grh['addResizeListener'](a,this[z(0x472,0x457)]);}[_gru(0x39e,0x395)](a){function A(a,b){return _gru(a,b- -0x355);}_grh[A(0xa,0x1d)](a,this[A(0x6f,0x4d)]);}get[_gru(0x3b7,0x39a)](){function B(a,b){return _gru(a,b- -0x2ec);}return this[B(0xf7,0xd5)];}set[_gru(0x3ba,0x39a)](a){function C(a,b){return _gru(b,a- -0x431);}this[C(-0x70,-0xa0)]=this[C(-0x72,-0x44)]=a;}get[_gru(0x37e,0x3ab)](){function D(a,b){return _gru(b,a- -0x472);}var a;return(a=this[D(-0xd8,-0xc2)])===null||a===void 0x0?void 0x0:a[D(-0xc7,-0xe4)];}[_gru(0x3af,0x3b4)](a,b){const {region:c}=this;function E(a,b){return _gru(a,b- -0x258);}this['getConfig'](E(0x124,0x119));return super[E(0x12f,0x15c)]({'className':{'b-grid-header-scroller':0x1,['b-grid-header-scroller-'+c]:c},'role':null,'children':[{'reference':'headersElement','className':{'b-grid-headers':0x1,[E(0x161,0x158)+c]:c},'dataset':{'region':c,'reference':E(0x140,0x132),'maxDepth':this['maxDepth']}}]},b);}get['overflowElement'](){function F(a,b){return _gru(b,a- -0x2db);}return this[F(0xaf,0xac)];}['getColumnConfig'](a){function G(a,b){return _gru(b,a-0x172);}if(a['isVisible']){var b;const {id:c,align:d,resizable:e,isLeaf:f,isParent:g,isLastInSubGrid:h,cls:i,childLevel:j,field:k,tooltip:l,children:m,isFocusable:n,grid:o}=a,p=o===null||o===void 0x0?void 0x0:o[G(0x502,0x509)],q=(p===null||p===void 0x0?void 0x0:p[G(0x50d,0x522)])===-0x1&&(p===null||p===void 0x0?void 0x0:p[G(0x4fd,0x529)])===a,r={};if(a[G(0x52c,0x53d)]){r[G(0x52c,0x55d)]=a[G(0x52c,0x55b)];}else if(a['width']){r['width']=_grg[G(0x4e0,0x4f2)](a[G(0x517,0x4ee)]);}return{'style':r,'className':{'b-grid-header':0x1,'b-grid-header-parent':g,[G(0x535,0x55e)+j]:0x1,['b-depth-'+(a[G(0x53b,0x545)][G(0x53f,0x54e)]??0x0)]:0x1,['b-grid-header-align-'+d]:d,'b-grid-header-resizable':e&&f,[i]:i,'b-collapsible':a[G(0x53e,0x516)],'b-last-parent':g&&h,'b-last-leaf':f&&h,'b-header-widgets':(b=a[G(0x509,0x52e)])===null||b===void 0x0?void 0x0:b[G(0x513,0x538)],'b-writing-mode-horizontal-tb':a[G(0x518,0x523)]===G(0x52f,0x53e),'b-writing-mode-vertical-rl':a['headerWritingMode']===G(0x520,0x54a),'b-writing-mode-vertical-lr':a[G(0x518,0x503)]==='vertical-lr','b-writing-mode-sideways-rl':a[G(0x518,0x51f)]===G(0x4dd,0x4b6),'b-writing-mode-sideways-lr':a['headerWritingMode']==='sideways-lr'},'role':n?G(0x501,0x4dc):null,'aria-sort':'none','aria-label':a['ariaLabel'],[n?G(0x4e7,0x511):'']:q?0x0:-0x1,'dataset':{..._grf[G(0x4e2,0x4c3)](l),'columnId':c,[k?G(0x4fd,0x4ed):'']:k},'children':[{'className':'b-grid-header-text','role':null,'children':[{[o&&n?'id':'']:(o===null||o===void 0x0?void 0x0:o['id'])+G(0x4f1,0x4cb)+a['id'],'className':{'b-grid-header-text-content':0x1,'b-has-text':Boolean(a['text']),'b-vertical-text':a[G(0x530,0x556)]}}]},m?{'className':'b-grid-header-children','children':m[G(0x524,0x50e)](s=>this[G(0x53d,0x510)](s)),'syncOptions':{'syncIdField':'columnId'}}:null,{'className':G(0x534,0x516)}]};}}[_gru(0x396,0x3aa)](){this['fixCellWidths']();}['refreshHeaders'](){const a=this;a[H(0x10d,0x109)][H(0x100,0x10e)](b=>a[H(0x156,0x141)](b));function H(a,b){return _gru(a,b- -0x268);}a[H(0x147,0x142)]();a[H(0x124,0x126)]();}[_gru(0x392,0x3a9)](a){const b=this,c=b[I(0x62,0x94)](a['id']);function I(a,b){return _gru(b,a- -0x330);}if(c){let d=a['headerText'];if(a[I(0x58,0x67)]){d=a[I(0x58,0x39)][I(0x44,0x49)](a[I(0x8b,0xb5)]||b,{'column':a,'headerElement':c});if(_grg[I(0x49,0x3d)](d)){return _grg['handleReactHeaderElement'](a,c,d);}}if(a[I(0x85,0x81)]){Object['values'](a[I(0x85,0xa4)])[I(0x59,0x6f)](f=>{function J(a,b){return I(b-0x29,a);}f[J(0x7a,0x91)](a['textWrapper']);});}if(a[I(0x50,0x58)]){d=I(0x56,0x4f)+_grd[I(0x43,0x65)](a[I(0x50,0x7a)])+'\x22></i>'+(d||'');}const e=c['querySelector']('.b-grid-header-text-content');if(e){e[I(0x3c,0x30)]=d||'';}}}get[_gru(0x348,0x371)](){const a=this,b=super[K(-0x1c1,-0x1b4)];if(!a[K(-0x16b,-0x198)]){a[K(-0x16b,-0x16b)]=b[K(-0x186,-0x168)]({'change'(){a['initDepths']();},'thisObj':a});a[K(-0x18e,-0x15c)]();}function K(a,b){return _gru(b,a- -0x532);}return b;}set[_gru(0x352,0x371)](a){super['columns']=a;}['initDepths'](a=this[_gru(0x35e,0x371)]['topColumns'],b=null){const c=this;function L(a,b){return _gru(a,b- -0x1e8);}let d=0x0;if(b!==null&&b!==void 0x0&&b[L(0x1ce,0x1e1)]){b[L(0x1f2,0x1e1)][L(0x1fc,0x1e5)]++;}for(const e of a){const {meta:f}=e;f[L(0x1ed,0x1e5)]=0x0;if(e[L(0x1a9,0x1b7)]){c['initDepths'](e[L(0x191,0x1b7)][L(0x1f5,0x1cf)](c[L(0x17c,0x189)][L(0x202,0x1e0)]),e);if(f['depth']&&b){b[L(0x20c,0x1e1)][L(0x1ed,0x1e5)]+=f[L(0x1ba,0x1e5)];}}if(f[L(0x20d,0x1e5)]>d){d=f['depth'];}}if(!b){c[L(0x1c1,0x1c7)]=d;}return d;}[_gru(0x37d,0x384)](a){function M(a,b){return _gru(a,b- -0x49);}return this[M(0x330,0x349)](a);}get[_gru(0x389,0x382)](){function N(a,b){return _gru(b,a- -0x596);}return this['element'][N(-0x202,-0x209)];}[_gru(0x3cc,0x3ad)](){const a=this;function O(a,b){return _gru(a,b- -0x400);}_gre[O(-0x4d,-0x44)]({'domConfig':{'children':a['columns'][O(-0x58,-0x3b)]['map'](b=>a['getColumnConfig'](b)),'onlyChildren':!![]},'targetElement':a[O(-0xa3,-0x7e)],'strict':!![],'syncIdField':'columnId','releaseThreshold':0x0,'callback'({action:b,targetElement:c,domConfig:d}){var e;function P(a,b){return O(b,a-0x197);}if(d!==null&&d!==void 0x0&&(e=d[P(0x128,0x150)])!==null&&e!==void 0x0&&e[P(0x101,0xe8)]&&!d[P(0x128,0x139)][P(0x114,0xf5)]){if(b==='newElement'){a[P(0x118,0x135)](c);}else if(b===P(0x11c,0x117)){a['unobserve'](c);}}}});a['refreshHeaders']();}['onInternalPaint']({firstPaint:a}){function Q(a,b){return _gru(a,b- -0x325);}if(a){this[Q(0xa8,0x88)]();}}}Header[_gru(0x34b,0x37a)]();

package/lib/view/SubGrid.css

@@ -0,0 +1,325 @@
+:root {
+    --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-no-column-lines,
+.b-no-column-lines .b-grid-sub-grid {
+    --b-grid-cell-border-width   : 0;
+    --b-grid-header-border-width : 0;
+}
+
+.b-no-row-lines {
+    --b-grid-row-border-width : 0;
+}
+
+.b-grid-sub-grid {
+    position : relative;
+
+    &.b-hidden {
+        display : none;
+    }
+}
+
+.b-grid-sub-grid-collapsed {
+    width     : 0;
+    min-width : 0 !important; /* Needs to override min-width in style */
+    overflow  : hidden !important;
+}
+
+.b-animating {
+    .b-grid-header-scroller,
+    .b-grid-sub-grid {
+        transition-property : width, flex, min-width;
+        transition-duration : .3s;
+    }
+}
+
+.b-grid-row {
+    position           : absolute;
+    display            : flex;
+    flex-direction     : row;
+    align-items        : stretch;
+    inset-inline-start : 0;
+    overflow           : clip;
+    /* Blink-only right now. Layouts triggered inside the row won't cause document layout. */
+    /* Must be "layout", not "strict", otherwise the cell won't "stretch" the row. */
+    contain            : layout;
+
+    /* Default row height, will be read during initial render, but after that rows set height in style */
+    height             : var(--b-grid-row-height);
+    z-index            : var(--b-grid-row-zindex);
+    /* width              : var(--bi-total-column-width); */
+
+    .b-grid-sub-grid & {
+        min-width : 100%;
+    }
+
+    /* If the column widths overflow, we have to ensure that the row expands to show them all. */
+    /* it will not stretch to accommodate cells size with flex-basis. */
+    /* .b-grid-sub-grid.b-horizontal-overflow & { */
+    /*     min-width : max(var(--bi-total-column-width, 100%), 100%); */
+    /* } */
+
+    &.b-hover .b-grid-cell {
+        --b-grid-cell-applied-background : var(--b-grid-cell-hover-background, var(--b-primary-98));
+        --b-grid-cell-color              : var(--b-grid-cell-selected-color);
+        --b-grid-link-color              : var(--b-grid-row-hover-link-color, var(--b-primary-30));
+    }
+
+    .b-grid-cell {
+        .b-selected &, &.b-selected {
+            --b-grid-cell-applied-background : var(--b-grid-cell-selected-background, var(--b-primary-96));
+            --b-grid-cell-color              : var(--b-grid-cell-selected-color);
+            --b-grid-link-color              : var(--b-grid-row-hover-link-color, var(--b-primary-30));
+            transition                       : background-color var(--b-default-transition-duration), color var(--bi-grid-cell-selected-color-transition-duration, var(--b-default-transition-duration));
+        }
+    }
+
+    &.b-hover.b-selected .b-grid-cell {
+        --b-grid-cell-applied-background : var(--b-grid-cell-hover-selected-background, var(--b-primary-94));
+    }
+
+    /* TimeRanges for example use `cls: '.fa .fa-xx'` to apply an icon. If that range is used as a row of a grid, */
+    /* the fa rule will mess up the row */
+    &.fa {
+        display : flex;
+
+        &::before {
+            /* Ditch icon */
+            content : none;
+        }
+    }
+
+    &.b-row-placeholder {
+        .b-grid-cell {
+            color     : transparent; /* Could be overridden by style */
+            clip-path : inset(1em 1em 1em 1em); /* Need to match trbl positions below*/
+
+            > *:not(.b-editor) {
+                display : none;
+            }
+
+            &::after {
+                content       : '';
+                position      : absolute;
+                inset         : 1em;
+                border-radius : 5px;
+
+                background    : var(--b-grid-row-placeholder-color);
+            }
+        }
+    }
+}
+
+.b-hide-row-hover {
+    /* No hover & selection styling */
+    --b-grid-cell-hover-background          : var(--b-grid-cell-background);
+    --b-grid-cell-selected-background       : var(--b-grid-cell-background);
+    --b-grid-cell-hover-selected-background : var(--b-grid-cell-background);
+}
+
+/* No border on last row if we have scroll, to avoid double borders at bottom */
+.b-grid-body-container.b-vertical-overflow .b-grid-row.b-last .b-grid-cell {
+    --b-grid-row-border-color : transparent;
+}
+
+.b-grid-cell {
+    position          : absolute;
+    display           : flex;
+    flex-shrink       : 0;
+    contain           : strict;
+    align-items       : center;
+    white-space       : nowrap;
+    height            : 100%;
+
+    background        : var(--b-grid-cell-applied-background, var(--b-grid-cell-background));
+    color             : var(--b-grid-cell-color);
+    border-inline-end : var(--b-grid-cell-border-width) solid var(--b-grid-cell-border-color);
+    border-bottom     : var(--b-grid-row-border-width) solid var(--b-grid-row-border-color);
+    font-size         : var(--b-grid-cell-font-size);
+    font-weight       : var(--b-grid-cell-font-weight);
+    gap               : var(--b-grid-cell-gap);
+    overflow          : var(--bi-grid-cell-overflow);
+    padding-inline    : var(--b-grid-cell-padding-inline);
+    padding-block     : var(--b-grid-cell-padding-block);
+
+    /* Prevent transitions for content by default */
+    &:not(.b-focused) {
+        *, *::before, *::after {
+            transition : none;
+        }
+    }
+
+    .b-theme-transition & {
+        transition : background-color var(--b-default-transition-duration), border var(--b-default-transition-duration);
+    }
+
+    .b-windows & {
+        /* Subpixel rendering issues on windows with `strict`, column lines get overlapped by cells */
+        contain : layout;
+    }
+
+    &.b-focused:focus-visible {
+        outline        : var(--b-grid-cell-focused-outline-width) solid var(--b-grid-cell-focused-outline-color);
+        outline-offset : var(--b-grid-cell-focused-outline-offset, calc(var(--b-grid-cell-focused-outline-width) * -1));
+    }
+
+    &.b-hover {
+        --b-grid-cell-applied-background : var(--b-grid-cell-hover-background, var(--b-primary-98));
+        --b-grid-cell-color              : var(--b-grid-cell-selected-color);
+    }
+
+    &.b-selected {
+        --b-grid-cell-applied-background : var(--b-grid-cell-selected-background, var(--b-primary-96));
+        --b-grid-cell-color              : var(--b-grid-cell-selected-color);
+    }
+
+    &.b-auto-height {
+        white-space : normal;
+
+        &:not(.b-tree-cell) {
+            --b-grid-cell-padding-block : var(--b-grid-cell-auto-height-padding-block);
+        }
+    }
+
+    &.b-measuring-auto-height {
+        contain    : paint style layout; /* Replaces strict, cannot use size since we want it to grow */
+        align-self : baseline;
+        height     : auto; /* Absolute positioned with 100% height to fill row by default */
+    }
+
+    .b-grid-no-text-selection & {
+        user-select         : none;
+        -webkit-user-select : none;
+    }
+
+    a {
+        color : var(--b-grid-link-color, var(--b-primary-30));
+    }
+}
+
+/* Support for cell / header ellipsis when text overflows */
+.b-supports-has.b-use-ellipsis:not(.b-grid-measuring) {
+    .b-grid-row {
+        height : var(--b-grid-row-height);
+
+        .b-grid-cell:not(.b-auto-height, .b-row-reorder-grip, :has(*)) {
+            display       : block;
+            text-overflow : ellipsis;
+
+            line-height   : var(--b-grid-row-height);
+        }
+    }
+}
+
+/* Use start and end to be LTR/RTL neutral */
+.b-grid-cell-align-right,
+.b-grid-cell-align-end {
+    justify-content : flex-end;
+    text-align      : end;
+}
+
+.b-grid-cell-align-center {
+    justify-content : center;
+    text-align      : center;
+}
+
+.b-rtl {
+    --bi-grid-cell-dirty-indicator-clip-path : var(--bi-grid-cell-dirty-indicator-clip-path-rtl)
+}
+
+.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;
+
+    background-color   : var(--b-grid-cell-dirty-color);
+    clip-path          : var(--bi-grid-cell-dirty-indicator-clip-path);
+}
+
+.b-grid-splitter {
+    transition : background var(--b-default-transition-duration);
+
+    background : var(--b-grid-splitter-color, var(--b-grid-splitter-narrow-color));
+    /* When not a draggable splitter, it's just a narrow line. */
+    flex       : 0 0 var(--b-grid-splitter-width);
+
+    .b-grid-splitter-inner {
+        /* When not a draggable splitter, it's just a narrow line with no internal structure. */
+        display : none;
+    }
+}
+
+/* region Virtual scrollers */
+
+.b-virtual-scrollers {
+    /* Must be above footer element */
+    z-index        : 3;
+
+    display        : flex;
+    flex-direction : row;
+    contain        : paint style layout;
+
+    .b-firefox & {
+        contain : paint layout;
+    }
+
+    /* Horizontal scrollbar should remain reachable in FireFox on Windows */
+    .b-overlay-scrollbar.b-firefox.b-windows & {
+        pointer-events : auto;
+
+        .b-virtual-scroller {
+            pointer-events : auto;
+        }
+    }
+
+    /* If it's an overlaying scrollbar, make it absolutely positioned, docked to */
+    /* the bottom of the grid. */
+    /* */
+    /* If it's an overlaying scrollbar, it should not interact with pointers. */
+    /* The "wheel" event will go directly to the scrollable content, and mouseovers */
+    /* should go through to the grid content. */
+    /* */
+    /* We need to force a height if the platform is using overlaying scrollbars */
+    /* and therefore will not "stretch" the overflowing element with a permanent scrollbar. */
+    .b-overlay-scrollbar & {
+        position       : absolute;
+        left           : 0;
+        right          : 0;
+        bottom         : 0;
+        pointer-events : none;
+
+        .b-virtual-scroller {
+            height         : 16px;
+            pointer-events : none;
+        }
+    }
+
+    .b-virtual-scroller {
+        overflow-x : scroll;
+        overflow-y : hidden;
+    }
+
+    .b-virtual-width {
+        height : 1px;
+    }
+}
+
+/* Overlaid scrollbars are interactive when scrolling */
+.b-overlay-scrollbar {
+    .b-virtual-scroller:hover,
+    .b-virtual-scroller.b-show-virtual-scroller {
+        pointer-events : all;
+        opacity        : 1;
+        transition     : opacity .5s;
+    }
+}
+
+/* endregion */