wip

Author: vursen

packages/grid/src/styles/vaadin-grid-base-styles.js

@@ -175,7 +175,7 @@ export const gridStyles = css`
   }
 
   :host([overflow~='bottom']) #table[has-footer] #footer::before,
-  :host(:not([overflow~='top']):not([overflow~='bottom'])) #table[has-footer] #footer::before {
+  :host(:not([overflow~='top'])) #table[has-footer] #footer::before {
     content: '';
     inset-block-start: calc(var(--_row-border-width) * -1);
   }
@@ -203,8 +203,9 @@ export const gridStyles = css`
   }
 
   #table[has-footer] [part~='last-row-cell'],
-  #table[has-footer] [part~='last-row-cell'] + [part~='details-cell'],
-  :host(:not([overflow~='bottom']):not([overflow~='top'])) [part~='last-row-cell'] {
+  #table[has-footer] [part~='last-row'] [part~='details-cell'],
+  :host(:not([overflow~='bottom']):not([overflow~='top'])) [part~='last-row-cell'],
+  :host(:not([overflow~='bottom']):not([overflow~='top'])) [part~='last-row'] [part~='details-cell'] {
     border-block-end-style: solid;
   }
 
@@ -249,9 +250,13 @@ export const gridStyles = css`
   }
 
   /* Raise highlighted rows above others */
-  [part~='row']:focus,
-  [part~='row']:focus-within {
-    z-index: 3;
+  [part~='row'],
+  [part~='frozen-cell'],
+  [part~='frozen-to-end-cell'] {
+    &:focus,
+    &:focus-within {
+      z-index: 3;
+    }
   }
 
   /* Row hover */
@@ -461,7 +466,7 @@ export const gridStyles = css`
     inset-block: calc(var(--_row-border-width) * -1);
   }
 
-  [part~='body-cell']::after {
+  [part~='cell']:where(:not([part~='details-cell']))::after {
     inset-inline: calc(var(--_column-border-width) * -1);
   }
 
@@ -478,22 +483,26 @@ export const gridStyles = css`
     transform: translateX(var(--_grid-horizontal-scroll-position));
   }
 
-  [part~='first-row']::after,
-  #header [part~='row']:first-child::after,
-  #header [part~='row']:first-child [part~='cell']::after,
+  [part~='first-header-row-cell']::after,
   #table:not([has-header]) [part~='first-row-cell']::after {
     inset-block-start: 0;
   }
 
+  [part~='first-footer-row']::after {
+    inset-block-start: calc(var(--_row-border-width) * -1);
+  }
+
   [part~='last-row']::after,
-  #footer [part~='row']:last-child::after,
-  #footer [part~='row']:last-child [part~='cell']::after,
-  :host([overflow~='top']) #table:not([has-footer]) [part~='last-row-cell']::after {
+  [part~='last-footer-row']::after,
+  [part~='last-footer-row-cell']::after {
     inset-block-end: 0;
   }
 
-  #footer [part~='row']:first-child::after {
-    inset-block-start: calc(var(--_row-border-width) * -1);
+  :host([overflow~='top']) #table:not([has-footer]) {
+    [part~='last-row'] [part~='details-cell']::after,
+    [part~='last-row']:not([part~='details-opened-row']) [part~='last-row-cell']::after {
+      inset-block-end: 0;
+    }
   }
 
   :host([navigating]) [part~='row']:focus,

packages/grid/src/vaadin-grid-mixin.js

@@ -710,13 +710,13 @@ export const GridMixin = (superClass) =>
 
       while (this.$.header.children.length < columnTree.length) {
         const headerRow = document.createElement('tr');
-        headerRow.setAttribute('part', 'row');
+        headerRow.setAttribute('part', 'row header-row');
         headerRow.setAttribute('role', 'row');
         headerRow.setAttribute('tabindex', '-1');
         this.$.header.appendChild(headerRow);
 
         const footerRow = document.createElement('tr');
-        footerRow.setAttribute('part', 'row');
+        footerRow.setAttribute('part', 'row footer-row');
         footerRow.setAttribute('role', 'row');
         footerRow.setAttribute('tabindex', '-1');
         this.$.footer.appendChild(footerRow);
@@ -729,17 +729,19 @@ export const GridMixin = (superClass) =>
       iterateChildren(this.$.header, (headerRow, index, rows) => {
         this.__initRow(headerRow, columnTree[index], 'header', index === columnTree.length - 1);
 
-        const cells = getBodyRowCells(headerRow);
-        updateCellsPart(cells, 'first-header-row-cell', index === 0);
-        updateCellsPart(cells, 'last-header-row-cell', index === rows.length - 1);
+        updateBooleanRowStates(headerRow, {
+          'first-header': index === 0,
+          'last-header': index === rows.length - 1,
+        });
       });
 
       iterateChildren(this.$.footer, (footerRow, index, rows) => {
         this.__initRow(footerRow, columnTree[columnTree.length - 1 - index], 'footer', index === 0);
 
-        const cells = getBodyRowCells(footerRow);
-        updateCellsPart(cells, 'first-footer-row-cell', index === 0);
-        updateCellsPart(cells, 'last-footer-row-cell', index === rows.length - 1);
+        updateBooleanRowStates(footerRow, {
+          'first-footer': index === 0,
+          'last-footer': index === rows.length - 1,
+        });
       });
 
       // Sizer rows