@vaadin/grid 24.3.0-alpha1 → 24.3.0-alpha11

package/src/vaadin-grid.js

@@ -4,13 +4,15 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid-column.js';
-import './vaadin-grid-styles.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { GridMixin } from './vaadin-grid-mixin.js';
+import { gridStyles } from './vaadin-grid-styles.js';
+
+registerStyles('vaadin-grid', gridStyles, { moduleId: 'vaadin-grid-styles' });
 
 /**
  * `<vaadin-grid>` is a free, high quality data grid / data table Web Component. The content of the
@@ -154,6 +156,8 @@ import { GridMixin } from './vaadin-grid-mixin.js';
  * Part name                  | Description
  * ---------------------------|----------------
  * `row`                      | Row in the internal table
+ * `body-row`                 | Body row in the internal table
+ * `collapsed-row`            | Collapsed row
  * `expanded-row`             | Expanded row
  * `selected-row`             | Selected row
  * `details-opened-row`       | Row with details open
@@ -183,6 +187,7 @@ import { GridMixin } from './vaadin-grid-mixin.js';
  * `last-footer-row-cell`     | Cell in the last footer row
  * `loading-row-cell`         | Cell in a row that is waiting for data from data provider
  * `selected-row-cell`        | Cell in a selected row
+ * `collapsed-row-cell`       | Cell in a collapsed row
  * `expanded-row-cell`        | Cell in an expanded row
  * `details-opened-row-cell`  | Cell in an row with details open
  * `dragstart-row-cell`       | Cell in a row that user started to drag (set for one frame)

package/src/vaadin-lit-grid-column-group.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { GridColumnGroupMixin } from './vaadin-grid-column-group-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-grid-column-group>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class GridColumnGroup extends GridColumnGroupMixin(PolylitMixin(LitElement)) {
+  static get is() {
+    return 'vaadin-grid-column-group';
+  }
+}
+
+defineCustomElement(GridColumnGroup);
+
+export { GridColumnGroup };

package/src/vaadin-lit-grid-column.js

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { GridColumnMixin } from './vaadin-grid-column-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-grid-column>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class GridColumn extends GridColumnMixin(PolylitMixin(LitElement)) {
+  static get is() {
+    return 'vaadin-grid-column';
+  }
+}
+
+defineCustomElement(GridColumn);
+
+export { GridColumn };
+
+export { ColumnBaseMixin } from './vaadin-grid-column-mixin.js';

package/src/vaadin-lit-grid-filter-column.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './vaadin-lit-grid-filter.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { GridFilterColumnMixin } from './vaadin-grid-filter-column-mixin.js';
+import { GridColumn } from './vaadin-lit-grid-column.js';
+
+/**
+ * LitElement based version of `<vaadin-grid-filter-column>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class GridFilterColumn extends GridFilterColumnMixin(GridColumn) {
+  static get is() {
+    return 'vaadin-grid-filter-column';
+  }
+}
+
+defineCustomElement(GridFilterColumn);
+
+export { GridFilterColumn };

package/src/vaadin-lit-grid-filter.js

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/text-field/src/vaadin-lit-text-field.js';
+import { html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
+import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-grid-filter>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class GridFilter extends GridFilterElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
+  static get is() {
+    return 'vaadin-grid-filter';
+  }
+
+  /** @protected */
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+defineCustomElement(GridFilter);
+
+export { GridFilter };

package/src/vaadin-lit-grid-selection-column.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/checkbox/src/vaadin-lit-checkbox.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { GridSelectionColumnMixin } from './vaadin-grid-selection-column-mixin.js';
+import { GridColumn } from './vaadin-lit-grid-column.js';
+
+/**
+ * LitElement based version of `<vaadin-grid-selection-column>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class GridSelectionColumn extends GridSelectionColumnMixin(GridColumn) {
+  static get is() {
+    return 'vaadin-grid-selection-column';
+  }
+}
+
+defineCustomElement(GridSelectionColumn);
+
+export { GridSelectionColumn };

package/src/vaadin-lit-grid-sort-column.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './vaadin-lit-grid-sorter.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { GridSortColumnMixin } from './vaadin-grid-sort-column-mixin.js';
+import { GridColumn } from './vaadin-lit-grid-column.js';
+
+/**
+ * LitElement based version of `<vaadin-grid-sort-column>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class GridSortColumn extends GridSortColumnMixin(GridColumn) {
+  static get is() {
+    return 'vaadin-grid-sort-column';
+  }
+}
+
+defineCustomElement(GridSortColumn);
+
+export { GridSortColumn };

package/src/vaadin-lit-grid-sorter.js

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
+import { GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-grid-sorter>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class GridSorter extends GridSorterMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-grid-sorter';
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div part="content">
+        <slot></slot>
+      </div>
+      <div part="indicators">
+        <span part="order">${this._getDisplayOrder(this._order)}</span>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(GridSorter);
+
+export { GridSorter };

package/src/vaadin-lit-grid-tree-column.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './vaadin-lit-grid-tree-toggle.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { GridTreeColumnMixin } from './vaadin-grid-tree-column-mixin.js';
+import { GridColumn } from './vaadin-lit-grid-column.js';
+
+/**
+ * LitElement based version of `<vaadin-grid-tree-column>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class GridTreeColumn extends GridTreeColumnMixin(GridColumn) {
+  static get is() {
+    return 'vaadin-grid-tree-column';
+  }
+}
+
+defineCustomElement(GridTreeColumn);
+
+export { GridTreeColumn };

package/src/vaadin-lit-grid-tree-toggle.js

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
+import { GridTreeToggleMixin } from './vaadin-grid-tree-toggle-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-grid-tree-toggle>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class GridTreeToggle extends GridTreeToggleMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-grid-tree-toggle';
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <span id="level-spacer"></span>
+      <span part="toggle"></span>
+      <slot></slot>
+    `;
+  }
+}
+
+defineCustomElement(GridTreeToggle);
+
+export { GridTreeToggle };

package/src/vaadin-lit-grid.js

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './vaadin-lit-grid-column.js';
+import { html, LitElement } from 'lit';
+import { isIOS, isSafari } from '@vaadin/component-base/src/browser-utils.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { GridMixin } from './vaadin-grid-mixin.js';
+import { gridStyles } from './vaadin-grid-styles.js';
+
+/**
+ * LitElement based version of `<vaadin-grid>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class Grid extends GridMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-grid';
+  }
+
+  static get styles() {
+    return gridStyles;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div
+        id="scroller"
+        safari="${isSafari}"
+        ios="${isIOS}"
+        ?loading="${this.loading}"
+        column-reordering-allowed="${this.columnReorderingAllowed}"
+      >
+        <table id="table" role="treegrid" aria-multiselectable="true" tabindex="0">
+          <caption id="sizer" part="row"></caption>
+          <thead id="header" role="rowgroup"></thead>
+          <tbody id="items" role="rowgroup"></tbody>
+          <tfoot id="footer" role="rowgroup"></tfoot>
+        </table>
+
+        <div part="reorder-ghost"></div>
+      </div>
+
+      <slot name="tooltip"></slot>
+
+      <div id="focusexit" tabindex="0"></div>
+    `;
+  }
+}
+
+defineCustomElement(Grid);
+
+export { Grid };

package/theme/lumo/lit-all-imports.js

@@ -0,0 +1,11 @@
+import './vaadin-lit-grid-column-group.js';
+import './vaadin-lit-grid-column.js';
+import './vaadin-lit-grid-filter.js';
+import './vaadin-lit-grid-filter-column.js';
+import './vaadin-lit-grid-selection-column.js';
+import './vaadin-lit-grid-sorter.js';
+import './vaadin-lit-grid-sort-column.js';
+import './vaadin-lit-grid-tree-toggle.js';
+import './vaadin-lit-grid-tree-column.js';
+import './vaadin-lit-grid.js';
+import '../../src/lit-all-imports.js';

package/theme/lumo/vaadin-grid-sorter-styles.js

@@ -34,7 +34,7 @@ registerStyles(
     }
 
     :host([direction]) {
-      color: var(--lumo-primary-text-color);
+      color: var(--vaadin-selection-color-text, var(--lumo-primary-text-color));
     }
 
     [part='order'] {

package/theme/lumo/vaadin-grid-styles.js

@@ -4,7 +4,7 @@ import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
-import '@vaadin/checkbox/theme/lumo/vaadin-checkbox.js';
+import '@vaadin/checkbox/theme/lumo/vaadin-checkbox-styles.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
@@ -21,7 +21,8 @@ registerStyles(
       -webkit-tap-highlight-color: transparent;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
-
+      --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+      --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
       /* For internal use only */
       --_lumo-grid-border-color: var(--lumo-contrast-20pct);
       --_lumo-grid-secondary-border-color: var(--lumo-contrast-10pct);
@@ -43,12 +44,15 @@ registerStyles(
 
     [part~='cell'] {
       min-height: var(--lumo-size-m);
-      background-color: var(--lumo-base-color);
+      background-color: var(--vaadin-grid-cell-background, var(--lumo-base-color));
+      cursor: default;
+      --_cell-padding: var(--vaadin-grid-cell-padding, var(--_cell-default-padding));
+      --_cell-default-padding: var(--lumo-space-xs) var(--lumo-space-m);
     }
 
     [part~='cell'] ::slotted(vaadin-grid-cell-content) {
-      cursor: default;
-      padding: var(--lumo-space-xs) var(--lumo-space-m);
+      cursor: inherit;
+      padding: var(--_cell-padding);
     }
 
     /* Apply row borders by default and introduce the "no-row-borders" variant */
@@ -79,7 +83,7 @@ registerStyles(
       position: absolute;
       inset: 0;
       pointer-events: none;
-      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
+      box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
     }
 
     :host([navigating]) [part~='row']:focus::before {
@@ -94,7 +98,7 @@ registerStyles(
       z-index: 100;
       inset: 0;
       pointer-events: none;
-      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
+      box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
     }
 
     [part~='row'][dragover] {
@@ -187,14 +191,14 @@ registerStyles(
 
     /* Headers and footers */
 
-    [part~='header-cell'] ::slotted(vaadin-grid-cell-content),
-    [part~='footer-cell'] ::slotted(vaadin-grid-cell-content),
+    [part~='header-cell'],
+    [part~='footer-cell'],
     [part~='reorder-ghost'] {
       font-size: var(--lumo-font-size-s);
       font-weight: 500;
     }
 
-    [part~='footer-cell'] ::slotted(vaadin-grid-cell-content) {
+    [part~='footer-cell'] {
       font-weight: 400;
     }
 
@@ -331,16 +335,13 @@ registerStyles(
 
     :host([theme~='compact']) [part~='cell'] {
       min-height: var(--lumo-size-s);
+      --_cell-default-padding: var(--lumo-space-xs) var(--lumo-space-s);
     }
 
     :host([theme~='compact']) [part~='first-row'] [part~='cell']:not([part~='details-cell']) {
       min-height: calc(var(--lumo-size-s) - var(--_lumo-grid-border-width));
     }
 
-    :host([theme~='compact']) [part~='cell'] ::slotted(vaadin-grid-cell-content) {
-      padding: var(--lumo-space-xs) var(--lumo-space-s);
-    }
-
     /* Wrap cell contents */
 
     :host([theme~='wrap-cell-content']) [part~='cell'] ::slotted(vaadin-grid-cell-content) {

package/theme/lumo/vaadin-lit-grid-column-group.js

@@ -0,0 +1 @@
+import '../../src/vaadin-lit-grid-column-group.js';

package/theme/lumo/vaadin-lit-grid-column.js

@@ -0,0 +1 @@
+import '../../src/vaadin-lit-grid-column.js';

package/theme/lumo/vaadin-lit-grid-filter-column.js

@@ -0,0 +1,2 @@
+import './vaadin-lit-grid-filter.js';
+import '../../src/vaadin-lit-grid-filter-column.js';

package/theme/lumo/vaadin-lit-grid-filter.js

@@ -0,0 +1,3 @@
+import '@vaadin/text-field/theme/lumo/vaadin-text-field-styles.js';
+import '@vaadin/input-container/theme/lumo/vaadin-input-container-styles.js';
+import '../../src/vaadin-lit-grid-filter.js';

package/theme/lumo/vaadin-lit-grid-selection-column.js

@@ -0,0 +1,2 @@
+import '@vaadin/checkbox/theme/lumo/vaadin-checkbox-styles.js';
+import '../../src/vaadin-lit-grid-selection-column.js';

package/theme/lumo/vaadin-lit-grid-sort-column.js

@@ -0,0 +1,2 @@
+import './vaadin-lit-grid-sorter.js';
+import '../../src/vaadin-lit-grid-sort-column.js';

package/theme/lumo/vaadin-lit-grid-sorter.js

@@ -0,0 +1,2 @@
+import './vaadin-grid-sorter-styles.js';
+import '../../src/vaadin-lit-grid-sorter.js';

package/theme/lumo/vaadin-lit-grid-tree-column.js

@@ -0,0 +1,2 @@
+import './vaadin-lit-grid-tree-toggle.js';
+import '../../src/vaadin-lit-grid-tree-column.js';

package/theme/lumo/vaadin-lit-grid-tree-toggle.js

@@ -0,0 +1,2 @@
+import './vaadin-grid-tree-toggle-styles.js';
+import '../../src/vaadin-lit-grid-tree-toggle.js';

package/theme/lumo/vaadin-lit-grid.js

@@ -0,0 +1,2 @@
+import './vaadin-grid-styles.js';
+import '../../src/vaadin-lit-grid.js';

package/theme/material/lit-all-imports.js

@@ -0,0 +1,11 @@
+import './vaadin-lit-grid-column-group.js';
+import './vaadin-lit-grid-column.js';
+import './vaadin-lit-grid-filter.js';
+import './vaadin-lit-grid-filter-column.js';
+import './vaadin-lit-grid-selection-column.js';
+import './vaadin-lit-grid-sorter.js';
+import './vaadin-lit-grid-sort-column.js';
+import './vaadin-lit-grid-tree-toggle.js';
+import './vaadin-lit-grid-tree-column.js';
+import './vaadin-lit-grid.js';
+import '../../src/lit-all-imports.js';

package/theme/material/vaadin-grid-styles.js

@@ -20,19 +20,21 @@ registerStyles(
     [part~='cell'] {
       min-height: 48px;
       -webkit-tap-highlight-color: transparent;
+      --_cell-padding: var(--vaadin-grid-cell-padding, var(--_cell-default-padding));
+      --_cell-default-padding: 8px 16px;
     }
 
     [part~='cell'] ::slotted(vaadin-grid-cell-content) {
-      padding: 8px 16px;
+      padding: var(--_cell-padding);
     }
 
-    [part~='details-cell'] ::slotted(vaadin-grid-cell-content) {
-      padding: 14px 16px;
+    [part~='details-cell'] {
+      --_cell-default-padding: 14px 16px;
     }
 
     [part~='header-cell'],
     [part~='footer-cell'] {
-      background-color: var(--material-background-color);
+      background-color: var(--vaadin-grid-cell-background, var(--material-background-color));
       color: var(--material-secondary-text-color);
       font-size: var(--material-caption-font-size);
       font-weight: 500;
@@ -53,15 +55,18 @@ registerStyles(
     /* Body rows/cells */
 
     [part~='body-cell'] {
-      background-color: var(--material-background-color);
+      background-color: var(--vaadin-grid-cell-background, var(--material-background-color));
     }
 
     [part~='row']:hover > [part~='body-cell'] {
-      background: linear-gradient(
-          var(--_material-grid-row-hover-background-color, rgba(0, 0, 0, 0.04)),
-          var(--_material-grid-row-hover-background-color, rgba(0, 0, 0, 0.04))
-        )
-        var(--material-background-color);
+      background: var(
+        --vaadin-grid-cell-background,
+        linear-gradient(
+            var(--_material-grid-row-hover-background-color, rgba(0, 0, 0, 0.04)),
+            var(--_material-grid-row-hover-background-color, rgba(0, 0, 0, 0.04))
+          )
+          var(--material-background-color)
+      );
     }
 
     @media (hover: none) {

package/theme/material/vaadin-lit-grid-column-group.js

@@ -0,0 +1 @@
+import '../../src/vaadin-lit-grid-column-group.js';

package/theme/material/vaadin-lit-grid-column.js

@@ -0,0 +1 @@
+import '../../src/vaadin-lit-grid-column.js';

package/theme/material/vaadin-lit-grid-filter-column.js

@@ -0,0 +1,2 @@
+import './vaadin-lit-grid-filter.js';
+import '../../src/vaadin-lit-grid-filter-column.js';

package/theme/material/vaadin-lit-grid-filter.js

@@ -0,0 +1,3 @@
+import '@vaadin/text-field/theme/material/vaadin-text-field-styles.js';
+import '@vaadin/input-container/theme/material/vaadin-input-container-styles.js';
+import '../../src/vaadin-lit-grid-filter.js';

package/theme/material/vaadin-lit-grid-selection-column.js

@@ -0,0 +1,2 @@
+import '@vaadin/checkbox/theme/material/vaadin-checkbox-styles.js';
+import '../../src/vaadin-lit-grid-selection-column.js';

package/theme/material/vaadin-lit-grid-sort-column.js

@@ -0,0 +1,2 @@
+import './vaadin-lit-grid-sorter.js';
+import '../../src/vaadin-lit-grid-sort-column.js';

package/theme/material/vaadin-lit-grid-sorter.js

@@ -0,0 +1,2 @@
+import './vaadin-grid-sorter-styles.js';
+import '../../src/vaadin-lit-grid-sorter.js';

package/theme/material/vaadin-lit-grid-tree-column.js

@@ -0,0 +1,2 @@
+import './vaadin-lit-grid-tree-toggle.js';
+import '../../src/vaadin-lit-grid-tree-column.js';

package/theme/material/vaadin-lit-grid-tree-toggle.js

@@ -0,0 +1,2 @@
+import './vaadin-grid-tree-toggle-styles.js';
+import '../../src/vaadin-lit-grid-tree-toggle.js';

package/theme/material/vaadin-lit-grid.js

@@ -0,0 +1,2 @@
+import './vaadin-grid-styles.js';
+import '../../src/vaadin-lit-grid.js';