@vaadin/grid 25.3.0-dev.1fa5a51482 → 25.3.0-rc1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/custom-elements.json +20 -20
  2. package/package.json +12 -12
  3. package/src/directives/cell-content-directive.js +2 -1
  4. package/src/vaadin-grid-a11y-mixin.js +15 -19
  5. package/src/vaadin-grid-active-item-mixin.js +1 -1
  6. package/src/vaadin-grid-column-auto-width-mixin.js +3 -8
  7. package/src/vaadin-grid-column-group-mixin.js +2 -6
  8. package/src/vaadin-grid-column-mixin.d.ts +3 -3
  9. package/src/vaadin-grid-column-mixin.js +35 -84
  10. package/src/vaadin-grid-column-reordering-mixin.js +1 -1
  11. package/src/vaadin-grid-column-resizing-mixin.js +4 -0
  12. package/src/vaadin-grid-data-provider-mixin.js +2 -2
  13. package/src/vaadin-grid-drag-and-drop-mixin.js +2 -5
  14. package/src/vaadin-grid-filter-column-mixin.js +1 -1
  15. package/src/vaadin-grid-filter-element-mixin.js +1 -3
  16. package/src/vaadin-grid-header-footer-rendering-mixin.js +43 -12
  17. package/src/vaadin-grid-keyboard-navigation-mixin.js +3 -7
  18. package/src/vaadin-grid-mixin.js +3 -27
  19. package/src/vaadin-grid-row-details-mixin.js +1 -1
  20. package/src/vaadin-grid-scroll-mixin.js +7 -32
  21. package/src/vaadin-grid-selection-column-base-mixin.js +3 -3
  22. package/src/vaadin-grid-sorter-mixin.js +3 -7
  23. package/src/vaadin-grid-tree-toggle.d.ts +5 -3
  24. package/src/vaadin-grid-tree-toggle.js +5 -3
  25. package/src/vaadin-grid.d.ts +23 -0
  26. package/src/vaadin-grid.js +23 -0
  27. package/web-types.json +17 -17
  28. package/web-types.lit.json +11 -11
package/src/vaadin-grid-scroll-mixin.js CHANGED
@@ -6,6 +6,7 @@
6
6
  import { microTask, timeOut } from '@vaadin/component-base/src/async.js';
7
7
  import { Debouncer } from '@vaadin/component-base/src/debounce.js';
8
8
  import { getNormalizedScrollLeft } from '@vaadin/component-base/src/dir-utils.js';
9
+ import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
9
10
  import { OverflowController } from '@vaadin/component-base/src/overflow-controller.js';
10
11
 
11
12
  const timeouts = {
@@ -88,19 +89,6 @@ export const ScrollMixin = (superClass) =>
88
89
  return this.$.table.scrollLeft;
89
90
  }
90
91
 
91
- /** @private */
92
- get _scrollTop() {
93
- return this.$.table.scrollTop;
94
- }
95
-
96
- /**
97
- * Override (from iron-scroll-target-behavior) to avoid document scroll
98
- * @private
99
- */
100
- set _scrollTop(top) {
101
- this.$.table.scrollTop = top;
102
- }
103
-
104
92
  /** @protected */
105
93
  get _lazyColumns() {
106
94
  return this.columnRendering === 'lazy';
@@ -123,24 +111,20 @@ export const ScrollMixin = (superClass) =>
123
111
  // is inside the viewport. If the whole row fits into the viewport, then scroll
124
112
  // the row into view. This ensures that labels, helper texts and other related
125
113
  // elements of focusable elements within cells also become visible. When the row
126
- // is larger than the viewport, scroll the focus event target into the viewport.
114
+ // is larger than the viewport, scroll the actually focused element into the viewport.
127
115
  // This works better when focusing elements within cells, which could otherwise
128
116
  // still be outside the viewport when scrolling to the top or bottom of the row.
117
+ // The composed path is used instead of the event target, which would be
118
+ // retargeted to the host element when focus lands inside a nested shadow root.
129
119
  const tableHeight = this.$.table.clientHeight;
130
120
  const headerHeight = this.$.header.clientHeight;
131
121
  const footerHeight = this.$.footer.clientHeight;
132
122
  const viewportHeight = tableHeight - headerHeight - footerHeight;
133
123
  const isRowLargerThanViewport = row.clientHeight > viewportHeight;
134
- const scrollTarget = isRowLargerThanViewport ? e.target : row;
124
+ const scrollTarget = isRowLargerThanViewport ? composedPath[0] : row;
135
125
 
136
126
  this.__scrollIntoViewport(scrollTarget);
137
127
  }
138
-
139
- if (!this.$.table.contains(e.relatedTarget)) {
140
- // Virtualizer can't catch the event because if orginates from the light DOM.
141
- // Dispatch a virtualizer-element-focused event for virtualizer to catch.
142
- this.$.table.dispatchEvent(new CustomEvent('virtualizer-element-focused', { detail: { element: row } }));
143
- }
144
128
  }
145
129
  });
146
130
 
@@ -244,13 +228,8 @@ export const ScrollMixin = (superClass) =>
244
228
 
245
229
  /** @private */
246
230
  _scheduleScrolling() {
247
- if (!this._scrollingFrame) {
248
- // Defer setting state attributes to avoid Edge hiccups
249
- this._scrollingFrame = requestAnimationFrame(() => this.$.scroller.toggleAttribute('scrolling', true));
250
- }
231
+ this.$.scroller.toggleAttribute('scrolling', true);
251
232
  this._debounceScrolling = Debouncer.debounce(this._debounceScrolling, timeOut.after(timeouts.SCROLLING), () => {
252
- cancelAnimationFrame(this._scrollingFrame);
253
- delete this._scrollingFrame;
254
233
  this.$.scroller.toggleAttribute('scrolling', false);
255
234
  });
256
235
  }
@@ -377,11 +356,7 @@ export const ScrollMixin = (superClass) =>
377
356
 
378
357
  /** @private */
379
358
  __columnRenderingChanged(_columnTree, columnRendering) {
380
- if (columnRendering === 'eager') {
381
- this.$.scroller.removeAttribute('column-rendering');
382
- } else {
383
- this.$.scroller.setAttribute('column-rendering', columnRendering);
384
- }
359
+ setOrRemoveAttribute(this.$.scroller, 'column-rendering', columnRendering !== 'eager' && columnRendering);
385
360
 
386
361
  this.__updateColumnsBodyContentHidden();
387
362
  }
package/src/vaadin-grid-selection-column-base-mixin.js CHANGED
@@ -174,8 +174,8 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
174
174
  this._headerCell.appendChild(label);
175
175
  }
176
176
  label.textContent = selectAllUnavailable;
177
- } else if (label) {
178
- label.remove();
177
+ } else {
178
+ label?.remove();
179
179
  }
180
180
  }
181
181
 
@@ -383,7 +383,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
383
383
 
384
384
  // Get the index of the row being hovered over or the first/last
385
385
  // visible row if hovering outside the grid
386
- let hoveredIndex = hoveredRow ? hoveredRow.index : undefined;
386
+ let hoveredIndex = hoveredRow?.index;
387
387
  const scrollableArea = this.__getScrollableArea();
388
388
  if (this.__dragCurrentY < scrollableArea.top) {
389
389
  hoveredIndex = this._grid._firstVisibleIndex;
package/src/vaadin-grid-sorter-mixin.js CHANGED
@@ -3,6 +3,7 @@
3
3
  * Copyright (c) 2016 - 2026 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
+ import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
6
7
  import { getClosestCell } from './vaadin-grid-helpers.js';
7
8
 
8
9
  /**
@@ -97,11 +98,7 @@ export const GridSorterMixin = (superClass) =>
97
98
  }
98
99
 
99
100
  const ariaLabel = grid.__effectiveI18n.sorter?.replace('{column}', this.textContent.trim());
100
- if (ariaLabel) {
101
- this.setAttribute('aria-label', ariaLabel);
102
- } else {
103
- this.removeAttribute('aria-label');
104
- }
101
+ setOrRemoveAttribute(this, 'aria-label', ariaLabel);
105
102
  }
106
103
 
107
104
  /** @private */
@@ -134,8 +131,7 @@ export const GridSorterMixin = (superClass) =>
134
131
  return;
135
132
  }
136
133
 
137
- const activeElement = this.getRootNode().activeElement;
138
- if (this !== activeElement && this.contains(activeElement)) {
134
+ if (this.matches(':focus-within') && !this.matches(':focus')) {
139
135
  // Some focusable content inside the sorter was clicked, do nothing.
140
136
  return;
141
137
  }
package/src/vaadin-grid-tree-toggle.d.ts CHANGED
@@ -51,9 +51,11 @@ export * from './vaadin-grid-tree-toggle-mixin.js';
51
51
  *
52
52
  * The following custom CSS properties are available for styling:
53
53
  *
54
- * Custom CSS property | Description | Default
55
- * ---|---|---
56
- * `--vaadin-grid-tree-toggle-level-offset` | Visual offset step for each tree sublevel | `1em`
54
+ * Custom CSS property |
55
+ * :--------------------------------------------|
56
+ * | `--vaadin-grid-tree-toggle-level-offset` |
57
+ *
58
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
57
59
  *
58
60
  * @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.
59
61
  */
package/src/vaadin-grid-tree-toggle.js CHANGED
@@ -53,9 +53,11 @@ import { GridTreeToggleMixin } from './vaadin-grid-tree-toggle-mixin.js';
53
53
  *
54
54
  * The following custom CSS properties are available for styling:
55
55
  *
56
- * Custom CSS property | Description | Default
57
- * ---|---|---
58
- * `--vaadin-grid-tree-toggle-level-offset` | Visual offset step for each tree sublevel | `1em`
56
+ * Custom CSS property |
57
+ * :--------------------------------------------|
58
+ * | `--vaadin-grid-tree-toggle-level-offset` |
59
+ *
60
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
59
61
  *
60
62
  * @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.
61
63
  *
package/src/vaadin-grid.d.ts CHANGED
@@ -276,6 +276,29 @@ export interface GridI18n {
276
276
  * `drag-disabled` | Set to a row that isn't available for dragging | row
277
277
  * `drop-disabled` | Set to a row that can't be dropped on top of | row
278
278
  *
279
+ * The following custom CSS properties are available for styling:
280
+ *
281
+ * Custom CSS property |
282
+ * :--------------------------------------------------|
283
+ * | `--vaadin-grid-background` |
284
+ * | `--vaadin-grid-border-color` |
285
+ * | `--vaadin-grid-border-radius` |
286
+ * | `--vaadin-grid-border-width` |
287
+ * | `--vaadin-grid-cell-background-color` |
288
+ * | `--vaadin-grid-cell-padding` |
289
+ * | `--vaadin-grid-cell-text-overflow` |
290
+ * | `--vaadin-grid-column-border-width` |
291
+ * | `--vaadin-grid-column-resize-handle-color` |
292
+ * | `--vaadin-grid-header-font-size` |
293
+ * | `--vaadin-grid-header-font-weight` |
294
+ * | `--vaadin-grid-header-text-color` |
295
+ * | `--vaadin-grid-row-background-color` |
296
+ * | `--vaadin-grid-row-border-width` |
297
+ * | `--vaadin-grid-row-highlight-background-color` |
298
+ * | `--vaadin-grid-row-hover-background-color` |
299
+ * | `--vaadin-grid-row-odd-background-color` |
300
+ * | `--vaadin-grid-row-selected-background-color` |
301
+ *
279
302
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
280
303
  *
281
304
  * @fires {CustomEvent} active-item-changed - Fired when the `activeItem` property changes.
package/src/vaadin-grid.js CHANGED
@@ -257,6 +257,29 @@ const DEFAULT_I18N = {
257
257
  * `drag-disabled` | Set to a row that isn't available for dragging | row
258
258
  * `drop-disabled` | Set to a row that can't be dropped on top of | row
259
259
  *
260
+ * The following custom CSS properties are available for styling:
261
+ *
262
+ * Custom CSS property |
263
+ * :--------------------------------------------------|
264
+ * | `--vaadin-grid-background` |
265
+ * | `--vaadin-grid-border-color` |
266
+ * | `--vaadin-grid-border-radius` |
267
+ * | `--vaadin-grid-border-width` |
268
+ * | `--vaadin-grid-cell-background-color` |
269
+ * | `--vaadin-grid-cell-padding` |
270
+ * | `--vaadin-grid-cell-text-overflow` |
271
+ * | `--vaadin-grid-column-border-width` |
272
+ * | `--vaadin-grid-column-resize-handle-color` |
273
+ * | `--vaadin-grid-header-font-size` |
274
+ * | `--vaadin-grid-header-font-weight` |
275
+ * | `--vaadin-grid-header-text-color` |
276
+ * | `--vaadin-grid-row-background-color` |
277
+ * | `--vaadin-grid-row-border-width` |
278
+ * | `--vaadin-grid-row-highlight-background-color` |
279
+ * | `--vaadin-grid-row-hover-background-color` |
280
+ * | `--vaadin-grid-row-odd-background-color` |
281
+ * | `--vaadin-grid-row-selected-background-color` |
282
+ *
260
283
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
261
284
  *
262
285
  * @fires {CustomEvent} active-item-changed - Fired when the `activeItem` property changes.
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/grid",
4
- "version": "25.3.0-dev.1fa5a51482",
4
+ "version": "25.3.0-rc1",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -84,7 +84,7 @@
84
84
  },
85
85
  {
86
86
  "name": "text-align",
87
- "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
87
+ "description": "Aligns the columns cell content horizontally.",
88
88
  "value": {
89
89
  "type": [
90
90
  "string"
@@ -190,7 +190,7 @@
190
190
  },
191
191
  {
192
192
  "name": "textAlign",
193
- "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
193
+ "description": "Aligns the columns cell content horizontally.",
194
194
  "value": {
195
195
  "type": [
196
196
  "string"
@@ -203,7 +203,7 @@
203
203
  },
204
204
  {
205
205
  "name": "vaadin-grid-column",
206
- "description": "A `<vaadin-grid-column>` is used to configure how a column in `<vaadin-grid>`\nshould look like.\n\nSee [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid) documentation for instructions on how\nto configure the `<vaadin-grid-column>`.",
206
+ "description": "A `<vaadin-grid-column>` is used to configure how a column in `<vaadin-grid>`\nshould look like.\n\nSee [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid) documentation for instructions on how\nto configure the `<vaadin-grid-column>`.",
207
207
  "attributes": [
208
208
  {
209
209
  "name": "auto-width",
@@ -306,7 +306,7 @@
306
306
  },
307
307
  {
308
308
  "name": "text-align",
309
- "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
309
+ "description": "Aligns the columns cell content horizontally.",
310
310
  "value": {
311
311
  "type": [
312
312
  "string"
@@ -459,7 +459,7 @@
459
459
  },
460
460
  {
461
461
  "name": "textAlign",
462
- "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
462
+ "description": "Aligns the columns cell content horizontally.",
463
463
  "value": {
464
464
  "type": [
465
465
  "string"
@@ -584,7 +584,7 @@
584
584
  },
585
585
  {
586
586
  "name": "text-align",
587
- "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
587
+ "description": "Aligns the columns cell content horizontally.",
588
588
  "value": {
589
589
  "type": [
590
590
  "string"
@@ -737,7 +737,7 @@
737
737
  },
738
738
  {
739
739
  "name": "textAlign",
740
- "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
740
+ "description": "Aligns the columns cell content horizontally.",
741
741
  "value": {
742
742
  "type": [
743
743
  "string"
@@ -820,7 +820,7 @@
820
820
  },
821
821
  {
822
822
  "name": "vaadin-grid-selection-column",
823
- "description": "`<vaadin-grid-selection-column>` is a helper element for the `<vaadin-grid>`\nthat provides default renderers and functionality for item selection.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-selection-column frozen auto-select></vaadin-grid-selection-column>\n\n <vaadin-grid-column>\n ...\n```\n\nBy default the selection column displays `<vaadin-checkbox>` elements in the\ncolumn cells. The checkboxes in the body rows toggle selection of the corresponding row items.\n\nWhen the grid data is provided as an array of [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid#property-items),\nthe column header gets an additional checkbox that can be used for toggling\nselection for all the items at once.\n\n__The default content can also be overridden__",
823
+ "description": "`<vaadin-grid-selection-column>` is a helper element for the `<vaadin-grid>`\nthat provides default renderers and functionality for item selection.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-selection-column frozen auto-select></vaadin-grid-selection-column>\n\n <vaadin-grid-column>\n ...\n```\n\nBy default the selection column displays `<vaadin-checkbox>` elements in the\ncolumn cells. The checkboxes in the body rows toggle selection of the corresponding row items.\n\nWhen the grid data is provided as an array of [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid#property-items),\nthe column header gets an additional checkbox that can be used for toggling\nselection for all the items at once.\n\n__The default content can also be overridden__",
824
824
  "attributes": [
825
825
  {
826
826
  "name": "auto-select",
@@ -950,7 +950,7 @@
950
950
  },
951
951
  {
952
952
  "name": "text-align",
953
- "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
953
+ "description": "Aligns the columns cell content horizontally.",
954
954
  "value": {
955
955
  "type": [
956
956
  "string"
@@ -1130,7 +1130,7 @@
1130
1130
  },
1131
1131
  {
1132
1132
  "name": "textAlign",
1133
- "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
1133
+ "description": "Aligns the columns cell content horizontally.",
1134
1134
  "value": {
1135
1135
  "type": [
1136
1136
  "string"
@@ -1269,7 +1269,7 @@
1269
1269
  },
1270
1270
  {
1271
1271
  "name": "text-align",
1272
- "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
1272
+ "description": "Aligns the columns cell content horizontally.",
1273
1273
  "value": {
1274
1274
  "type": [
1275
1275
  "string"
@@ -1431,7 +1431,7 @@
1431
1431
  },
1432
1432
  {
1433
1433
  "name": "textAlign",
1434
- "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
1434
+ "description": "Aligns the columns cell content horizontally.",
1435
1435
  "value": {
1436
1436
  "type": [
1437
1437
  "string"
@@ -1626,7 +1626,7 @@
1626
1626
  },
1627
1627
  {
1628
1628
  "name": "text-align",
1629
- "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
1629
+ "description": "Aligns the columns cell content horizontally.",
1630
1630
  "value": {
1631
1631
  "type": [
1632
1632
  "string"
@@ -1779,7 +1779,7 @@
1779
1779
  },
1780
1780
  {
1781
1781
  "name": "textAlign",
1782
- "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
1782
+ "description": "Aligns the columns cell content horizontally.",
1783
1783
  "value": {
1784
1784
  "type": [
1785
1785
  "string"
@@ -1801,7 +1801,7 @@
1801
1801
  },
1802
1802
  {
1803
1803
  "name": "vaadin-grid-tree-toggle",
1804
- "description": "`<vaadin-grid-tree-toggle>` is a helper element for the `<vaadin-grid>`\nthat provides toggle and level display functionality for the item tree.\n\n#### Example:\n```html\n<vaadin-grid-column id=\"column\"></vaadin-grid-column>\n```\n```js\nconst column = document.querySelector('#column');\ncolumn.renderer = (root, column, model) => {\n let treeToggle = root.firstElementChild;\n if (!treeToggle) {\n treeToggle = document.createElement('vaadin-grid-tree-toggle');\n treeToggle.addEventListener('expanded-changed', () => { ... });\n root.appendChild(treeToggle);\n }\n treeToggle.leaf = !model.item.hasChildren;\n treeToggle.level = level;\n treeToggle.expanded = expanded;\n treeToggle.textContent = model.item.name;\n};\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---|---\n`toggle` | The tree toggle icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------|-------------------------------------\n`expanded` | When present, the toggle is expanded\n`leaf` | When present, the toggle is not expandable, i. e., the current item is a leaf\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property | Description | Default\n---|---|---\n`--vaadin-grid-tree-toggle-level-offset` | Visual offset step for each tree sublevel | `1em`",
1804
+ "description": "`<vaadin-grid-tree-toggle>` is a helper element for the `<vaadin-grid>`\nthat provides toggle and level display functionality for the item tree.\n\n#### Example:\n```html\n<vaadin-grid-column id=\"column\"></vaadin-grid-column>\n```\n```js\nconst column = document.querySelector('#column');\ncolumn.renderer = (root, column, model) => {\n let treeToggle = root.firstElementChild;\n if (!treeToggle) {\n treeToggle = document.createElement('vaadin-grid-tree-toggle');\n treeToggle.addEventListener('expanded-changed', () => { ... });\n root.appendChild(treeToggle);\n }\n treeToggle.leaf = !model.item.hasChildren;\n treeToggle.level = level;\n treeToggle.expanded = expanded;\n treeToggle.textContent = model.item.name;\n};\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---|---\n`toggle` | The tree toggle icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------|-------------------------------------\n`expanded` | When present, the toggle is expanded\n`leaf` | When present, the toggle is not expandable, i. e., the current item is a leaf\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n| `--vaadin-grid-tree-toggle-level-offset` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
1805
1805
  "attributes": [
1806
1806
  {
1807
1807
  "name": "expanded",
@@ -1880,7 +1880,7 @@
1880
1880
  },
1881
1881
  {
1882
1882
  "name": "vaadin-grid",
1883
- "description": "`<vaadin-grid>` is a free, high quality data grid / data table Web Component. The content of the\nthe grid can be populated by using renderer callback function.\n\n### Quick Start\n\nStart with an assigning an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid#property-items) property to visualize your data.\n\nUse the [`<vaadin-grid-column>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid-column) element to configure the grid columns. Set `path` and `header`\nshorthand properties for the columns to define what gets rendered in the cells of the column.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-column path=\"name.first\" header=\"First name\"></vaadin-grid-column>\n <vaadin-grid-column path=\"name.last\" header=\"Last name\"></vaadin-grid-column>\n <vaadin-grid-column path=\"email\"></vaadin-grid-column>\n</vaadin-grid>\n```\n\nFor custom content `vaadin-grid-column` element provides you with three types of `renderer` callback functions: `headerRenderer`,\n`renderer` and `footerRenderer`.\n\nEach of those renderer functions provides `root`, `column`, `model` arguments when applicable.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `column`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\nRenderers are called on initialization of new column cells and each time the\nrelated row model is updated. DOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-column></vaadin-grid-column>\n <vaadin-grid-column></vaadin-grid-column>\n <vaadin-grid-column></vaadin-grid-column>\n</vaadin-grid>\n```\n```js\nconst grid = document.querySelector('vaadin-grid');\ngrid.items = [{'name': 'John', 'surname': 'Lennon', 'role': 'singer'},\n {'name': 'Ringo', 'surname': 'Starr', 'role': 'drums'}];\n\nconst columns = grid.querySelectorAll('vaadin-grid-column');\n\ncolumns[0].headerRenderer = function(root) {\n root.textContent = 'Name';\n};\ncolumns[0].renderer = function(root, column, model) {\n root.textContent = model.item.name;\n};\n\ncolumns[1].headerRenderer = function(root) {\n root.textContent = 'Surname';\n};\ncolumns[1].renderer = function(root, column, model) {\n root.textContent = model.item.surname;\n};\n\ncolumns[2].headerRenderer = function(root) {\n root.textContent = 'Role';\n};\ncolumns[2].renderer = function(root, column, model) {\n root.textContent = model.item.role;\n};\n```\n\nThe following properties are available in the `model` argument:\n\nProperty name | Type | Description\n--------------|------|------------\n`index`| Number | The index of the item.\n`item` | String or Object | The item.\n`level` | Number | Number of the item's tree sublevel, starts from 0.\n`expanded` | Boolean | True if the item's tree sublevel is expanded.\n`selected` | Boolean | True if the item is selected.\n`detailsOpened` | Boolean | True if the item's row details are open.\n`hasChildren` | Boolean | True if the item has children\n\nThe following helper elements can be used for further customization:\n- [`<vaadin-grid-column-group>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid-column-group)\n- [`<vaadin-grid-filter>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid-filter)\n- [`<vaadin-grid-sorter>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid-sorter)\n- [`<vaadin-grid-selection-column>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid-selection-column)\n- [`<vaadin-grid-tree-toggle>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid-tree-toggle)\n\n__Note that the helper elements must be explicitly imported.__\nIf you want to import everything at once you can use the `all-imports.js` entrypoint.\n\n### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively\nprovide the `<vaadin-grid>` data through the\n[`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid#property-dataProvider) function property.\nThe `<vaadin-grid>` calls this function lazily, only when it needs more data\nto be displayed.\n\nSee the [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid#property-dataProvider) property\ndocumentation for the detailed data provider arguments description.\n\n__Note that expanding the tree grid's item will trigger a call to the `dataProvider`.__\n\n__Also, note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```javascript\ngrid.dataProvider = ({page, pageSize}, callback) => {\n // page: the requested page index\n // pageSize: number of items on one page\n const url = `https://api.example/data?page=${page}&per_page=${pageSize}`;\n\n fetch(url)\n .then((res) => res.json())\n .then(({ employees, totalSize }) => {\n callback(employees, totalSize);\n });\n};\n```\n\n__Alternatively, you can use the `size` property to set the total number of items:__\n\n```javascript\ngrid.size = 200; // The total number of items\ngrid.dataProvider = ({page, pageSize}, callback) => {\n const url = `https://api.example/data?page=${page}&per_page=${pageSize}`;\n\n fetch(url)\n .then((res) => res.json())\n .then((resJson) => callback(resJson.employees));\n};\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------------|----------------\n`row` | Row in the internal table\n`body-row` | Body row in the internal table\n`header-row` | Header row in the internal table\n`footer-row` | Footer row in the internal table\n`collapsed-row` | Collapsed row\n`expanded-row` | Expanded row\n`selected-row` | Selected row\n`nonselectable-row` | Row that the user may not select or deselect\n`details-opened-row` | Row with details open\n`odd-row` | Odd row\n`even-row` | Even row\n`first-row` | The first body row\n`first-header-row` | The first header row\n`first-footer-row` | The first footer row\n`last-row` | The last body row\n`last-header-row` | The last header row\n`last-footer-row` | The last footer row\n`dragstart-row` | Set on the row for one frame when drag is starting.\n`dragover-above-row` | Set on the row when the a row is dragged over above\n`dragover-below-row` | Set on the row when the a row is dragged over below\n`dragover-on-top-row` | Set on the row when the a row is dragged over on top\n`drag-disabled-row` | Set to a row that isn't available for dragging\n`drop-disabled-row` | Set to a row that can't be dropped on top of\n`cell` | Cell in the internal table\n`header-cell` | Header cell in the internal table\n`body-cell` | Body cell in the internal table\n`footer-cell` | Footer cell in the internal table\n`details-cell` | Row details cell in the internal table\n`focused-cell` | Focused cell in the internal table\n`odd-row-cell` | Cell in an odd row\n`even-row-cell` | Cell in an even row\n`first-row-cell` | Cell in the first body row\n`last-row-cell` | Cell in the last body row\n`first-header-row-cell` | Cell in the first header row\n`first-footer-row-cell` | Cell in the first footer row\n`last-header-row-cell` | Cell in the last header row\n`last-footer-row-cell` | Cell in the last footer row\n`loading-row-cell` | Cell in a row that is waiting for data from data provider\n`selected-row-cell` | Cell in a selected row\n`nonselectable-row-cell` | Cell in a row that the user may not select or deselect\n`collapsed-row-cell` | Cell in a collapsed row\n`expanded-row-cell` | Cell in an expanded row\n`details-opened-row-cell` | Cell in an row with details open\n`dragstart-row-cell` | Cell in the ghost image row, but not in a source row\n`drag-source-row-cell` | Cell in a source row, but not in the ghost image\n`dragover-above-row-cell` | Cell in a row that has another row dragged over above\n`dragover-below-row-cell` | Cell in a row that has another row dragged over below\n`dragover-on-top-row-cell` | Cell in a row that has another row dragged over on top\n`drag-disabled-row-cell` | Cell in a row that isn't available for dragging\n`drop-disabled-row-cell` | Cell in a row that can't be dropped on top of\n`frozen-cell` | Frozen cell in the internal table\n`frozen-to-end-cell` | Frozen to end cell in the internal table\n`last-frozen-cell` | Last frozen cell\n`first-frozen-to-end-cell` | First cell frozen to end\n`first-column-cell` | First visible cell on a row\n`last-column-cell` | Last visible cell on a row\n`reorder-allowed-cell` | Cell in a column where another column can be reordered\n`reorder-dragging-cell` | Cell in a column currently being reordered\n`resize-handle` | Handle for resizing the columns\n`empty-state` | The container for the content to be displayed when there are no body rows to show\n`reorder-ghost` | Ghost element of the header cell being dragged\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n----------------------|---------------------------------------------------------------------------------------------------|-----------\n`loading` | Set when the grid is loading data from data provider | :host\n`interacting` | Keyboard navigation in interaction mode | :host\n`navigating` | Keyboard navigation in navigation mode | :host\n`overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host\n`reordering` | Set when the grid's columns are being reordered | :host\n`dragover` | Set when the grid (not a specific row) is dragged over | :host\n`dragging-rows` | Set when grid rows are dragged | :host\n`reorder-status` | Reflects the status of a cell while columns are being reordered | cell\n`frozen` | Frozen cell | cell\n`frozen-to-end` | Cell frozen to end | cell\n`last-frozen` | Last frozen cell | cell\n`first-frozen-to-end` | First cell frozen to end | cell\n`first-column` | First visible cell on a row | cell\n`last-column` | Last visible cell on a row | cell\n`selected` | Selected row | row\n`expanded` | Expanded row | row\n`details-opened` | Row with details open | row\n`loading` | Row that is waiting for data from data provider | row\n`odd` | Odd row | row\n`first` | The first body row | row\n`last` | The last body row | row\n`dragstart` | Set for one frame when starting to drag a row. The value is a number when dragging multiple rows | row\n`dragover` | Set when the row is dragged over | row\n`drag-disabled` | Set to a row that isn't available for dragging | row\n`drop-disabled` | Set to a row that can't be dropped on top of | row\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
1883
+ "description": "`<vaadin-grid>` is a free, high quality data grid / data table Web Component. The content of the\nthe grid can be populated by using renderer callback function.\n\n### Quick Start\n\nStart with an assigning an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid#property-items) property to visualize your data.\n\nUse the [`<vaadin-grid-column>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid-column) element to configure the grid columns. Set `path` and `header`\nshorthand properties for the columns to define what gets rendered in the cells of the column.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-column path=\"name.first\" header=\"First name\"></vaadin-grid-column>\n <vaadin-grid-column path=\"name.last\" header=\"Last name\"></vaadin-grid-column>\n <vaadin-grid-column path=\"email\"></vaadin-grid-column>\n</vaadin-grid>\n```\n\nFor custom content `vaadin-grid-column` element provides you with three types of `renderer` callback functions: `headerRenderer`,\n`renderer` and `footerRenderer`.\n\nEach of those renderer functions provides `root`, `column`, `model` arguments when applicable.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `column`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\nRenderers are called on initialization of new column cells and each time the\nrelated row model is updated. DOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-column></vaadin-grid-column>\n <vaadin-grid-column></vaadin-grid-column>\n <vaadin-grid-column></vaadin-grid-column>\n</vaadin-grid>\n```\n```js\nconst grid = document.querySelector('vaadin-grid');\ngrid.items = [{'name': 'John', 'surname': 'Lennon', 'role': 'singer'},\n {'name': 'Ringo', 'surname': 'Starr', 'role': 'drums'}];\n\nconst columns = grid.querySelectorAll('vaadin-grid-column');\n\ncolumns[0].headerRenderer = function(root) {\n root.textContent = 'Name';\n};\ncolumns[0].renderer = function(root, column, model) {\n root.textContent = model.item.name;\n};\n\ncolumns[1].headerRenderer = function(root) {\n root.textContent = 'Surname';\n};\ncolumns[1].renderer = function(root, column, model) {\n root.textContent = model.item.surname;\n};\n\ncolumns[2].headerRenderer = function(root) {\n root.textContent = 'Role';\n};\ncolumns[2].renderer = function(root, column, model) {\n root.textContent = model.item.role;\n};\n```\n\nThe following properties are available in the `model` argument:\n\nProperty name | Type | Description\n--------------|------|------------\n`index`| Number | The index of the item.\n`item` | String or Object | The item.\n`level` | Number | Number of the item's tree sublevel, starts from 0.\n`expanded` | Boolean | True if the item's tree sublevel is expanded.\n`selected` | Boolean | True if the item is selected.\n`detailsOpened` | Boolean | True if the item's row details are open.\n`hasChildren` | Boolean | True if the item has children\n\nThe following helper elements can be used for further customization:\n- [`<vaadin-grid-column-group>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid-column-group)\n- [`<vaadin-grid-filter>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid-filter)\n- [`<vaadin-grid-sorter>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid-sorter)\n- [`<vaadin-grid-selection-column>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid-selection-column)\n- [`<vaadin-grid-tree-toggle>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid-tree-toggle)\n\n__Note that the helper elements must be explicitly imported.__\nIf you want to import everything at once you can use the `all-imports.js` entrypoint.\n\n### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively\nprovide the `<vaadin-grid>` data through the\n[`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid#property-dataProvider) function property.\nThe `<vaadin-grid>` calls this function lazily, only when it needs more data\nto be displayed.\n\nSee the [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid#property-dataProvider) property\ndocumentation for the detailed data provider arguments description.\n\n__Note that expanding the tree grid's item will trigger a call to the `dataProvider`.__\n\n__Also, note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```javascript\ngrid.dataProvider = ({page, pageSize}, callback) => {\n // page: the requested page index\n // pageSize: number of items on one page\n const url = `https://api.example/data?page=${page}&per_page=${pageSize}`;\n\n fetch(url)\n .then((res) => res.json())\n .then(({ employees, totalSize }) => {\n callback(employees, totalSize);\n });\n};\n```\n\n__Alternatively, you can use the `size` property to set the total number of items:__\n\n```javascript\ngrid.size = 200; // The total number of items\ngrid.dataProvider = ({page, pageSize}, callback) => {\n const url = `https://api.example/data?page=${page}&per_page=${pageSize}`;\n\n fetch(url)\n .then((res) => res.json())\n .then((resJson) => callback(resJson.employees));\n};\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------------|----------------\n`row` | Row in the internal table\n`body-row` | Body row in the internal table\n`header-row` | Header row in the internal table\n`footer-row` | Footer row in the internal table\n`collapsed-row` | Collapsed row\n`expanded-row` | Expanded row\n`selected-row` | Selected row\n`nonselectable-row` | Row that the user may not select or deselect\n`details-opened-row` | Row with details open\n`odd-row` | Odd row\n`even-row` | Even row\n`first-row` | The first body row\n`first-header-row` | The first header row\n`first-footer-row` | The first footer row\n`last-row` | The last body row\n`last-header-row` | The last header row\n`last-footer-row` | The last footer row\n`dragstart-row` | Set on the row for one frame when drag is starting.\n`dragover-above-row` | Set on the row when the a row is dragged over above\n`dragover-below-row` | Set on the row when the a row is dragged over below\n`dragover-on-top-row` | Set on the row when the a row is dragged over on top\n`drag-disabled-row` | Set to a row that isn't available for dragging\n`drop-disabled-row` | Set to a row that can't be dropped on top of\n`cell` | Cell in the internal table\n`header-cell` | Header cell in the internal table\n`body-cell` | Body cell in the internal table\n`footer-cell` | Footer cell in the internal table\n`details-cell` | Row details cell in the internal table\n`focused-cell` | Focused cell in the internal table\n`odd-row-cell` | Cell in an odd row\n`even-row-cell` | Cell in an even row\n`first-row-cell` | Cell in the first body row\n`last-row-cell` | Cell in the last body row\n`first-header-row-cell` | Cell in the first header row\n`first-footer-row-cell` | Cell in the first footer row\n`last-header-row-cell` | Cell in the last header row\n`last-footer-row-cell` | Cell in the last footer row\n`loading-row-cell` | Cell in a row that is waiting for data from data provider\n`selected-row-cell` | Cell in a selected row\n`nonselectable-row-cell` | Cell in a row that the user may not select or deselect\n`collapsed-row-cell` | Cell in a collapsed row\n`expanded-row-cell` | Cell in an expanded row\n`details-opened-row-cell` | Cell in an row with details open\n`dragstart-row-cell` | Cell in the ghost image row, but not in a source row\n`drag-source-row-cell` | Cell in a source row, but not in the ghost image\n`dragover-above-row-cell` | Cell in a row that has another row dragged over above\n`dragover-below-row-cell` | Cell in a row that has another row dragged over below\n`dragover-on-top-row-cell` | Cell in a row that has another row dragged over on top\n`drag-disabled-row-cell` | Cell in a row that isn't available for dragging\n`drop-disabled-row-cell` | Cell in a row that can't be dropped on top of\n`frozen-cell` | Frozen cell in the internal table\n`frozen-to-end-cell` | Frozen to end cell in the internal table\n`last-frozen-cell` | Last frozen cell\n`first-frozen-to-end-cell` | First cell frozen to end\n`first-column-cell` | First visible cell on a row\n`last-column-cell` | Last visible cell on a row\n`reorder-allowed-cell` | Cell in a column where another column can be reordered\n`reorder-dragging-cell` | Cell in a column currently being reordered\n`resize-handle` | Handle for resizing the columns\n`empty-state` | The container for the content to be displayed when there are no body rows to show\n`reorder-ghost` | Ghost element of the header cell being dragged\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n----------------------|---------------------------------------------------------------------------------------------------|-----------\n`loading` | Set when the grid is loading data from data provider | :host\n`interacting` | Keyboard navigation in interaction mode | :host\n`navigating` | Keyboard navigation in navigation mode | :host\n`overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host\n`reordering` | Set when the grid's columns are being reordered | :host\n`dragover` | Set when the grid (not a specific row) is dragged over | :host\n`dragging-rows` | Set when grid rows are dragged | :host\n`reorder-status` | Reflects the status of a cell while columns are being reordered | cell\n`frozen` | Frozen cell | cell\n`frozen-to-end` | Cell frozen to end | cell\n`last-frozen` | Last frozen cell | cell\n`first-frozen-to-end` | First cell frozen to end | cell\n`first-column` | First visible cell on a row | cell\n`last-column` | Last visible cell on a row | cell\n`selected` | Selected row | row\n`expanded` | Expanded row | row\n`details-opened` | Row with details open | row\n`loading` | Row that is waiting for data from data provider | row\n`odd` | Odd row | row\n`first` | The first body row | row\n`last` | The last body row | row\n`dragstart` | Set for one frame when starting to drag a row. The value is a number when dragging multiple rows | row\n`dragover` | Set when the row is dragged over | row\n`drag-disabled` | Set to a row that isn't available for dragging | row\n`drop-disabled` | Set to a row that can't be dropped on top of | row\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-grid-background` |\n| `--vaadin-grid-border-color` |\n| `--vaadin-grid-border-radius` |\n| `--vaadin-grid-border-width` |\n| `--vaadin-grid-cell-background-color` |\n| `--vaadin-grid-cell-padding` |\n| `--vaadin-grid-cell-text-overflow` |\n| `--vaadin-grid-column-border-width` |\n| `--vaadin-grid-column-resize-handle-color` |\n| `--vaadin-grid-header-font-size` |\n| `--vaadin-grid-header-font-weight` |\n| `--vaadin-grid-header-text-color` |\n| `--vaadin-grid-row-background-color` |\n| `--vaadin-grid-row-border-width` |\n| `--vaadin-grid-row-highlight-background-color` |\n| `--vaadin-grid-row-hover-background-color` |\n| `--vaadin-grid-row-odd-background-color` |\n| `--vaadin-grid-row-selected-background-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
1884
1884
  "attributes": [
1885
1885
  {
1886
1886
  "name": "accessible-name",
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/grid",
4
- "version": "25.3.0-dev.1fa5a51482",
4
+ "version": "25.3.0-rc1",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -91,7 +91,7 @@
91
91
  },
92
92
  {
93
93
  "name": ".textAlign",
94
- "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
94
+ "description": "Aligns the columns cell content horizontally.",
95
95
  "value": {
96
96
  "kind": "expression"
97
97
  }
@@ -100,7 +100,7 @@
100
100
  },
101
101
  {
102
102
  "name": "vaadin-grid-column",
103
- "description": "A `<vaadin-grid-column>` is used to configure how a column in `<vaadin-grid>`\nshould look like.\n\nSee [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid) documentation for instructions on how\nto configure the `<vaadin-grid-column>`.",
103
+ "description": "A `<vaadin-grid-column>` is used to configure how a column in `<vaadin-grid>`\nshould look like.\n\nSee [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid) documentation for instructions on how\nto configure the `<vaadin-grid-column>`.",
104
104
  "extension": true,
105
105
  "attributes": [
106
106
  {
@@ -203,7 +203,7 @@
203
203
  },
204
204
  {
205
205
  "name": ".textAlign",
206
- "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
206
+ "description": "Aligns the columns cell content horizontally.",
207
207
  "value": {
208
208
  "kind": "expression"
209
209
  }
@@ -322,7 +322,7 @@
322
322
  },
323
323
  {
324
324
  "name": ".textAlign",
325
- "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
325
+ "description": "Aligns the columns cell content horizontally.",
326
326
  "value": {
327
327
  "kind": "expression"
328
328
  }
@@ -366,7 +366,7 @@
366
366
  },
367
367
  {
368
368
  "name": "vaadin-grid-selection-column",
369
- "description": "`<vaadin-grid-selection-column>` is a helper element for the `<vaadin-grid>`\nthat provides default renderers and functionality for item selection.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-selection-column frozen auto-select></vaadin-grid-selection-column>\n\n <vaadin-grid-column>\n ...\n```\n\nBy default the selection column displays `<vaadin-checkbox>` elements in the\ncolumn cells. The checkboxes in the body rows toggle selection of the corresponding row items.\n\nWhen the grid data is provided as an array of [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid#property-items),\nthe column header gets an additional checkbox that can be used for toggling\nselection for all the items at once.\n\n__The default content can also be overridden__",
369
+ "description": "`<vaadin-grid-selection-column>` is a helper element for the `<vaadin-grid>`\nthat provides default renderers and functionality for item selection.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-selection-column frozen auto-select></vaadin-grid-selection-column>\n\n <vaadin-grid-column>\n ...\n```\n\nBy default the selection column displays `<vaadin-checkbox>` elements in the\ncolumn cells. The checkboxes in the body rows toggle selection of the corresponding row items.\n\nWhen the grid data is provided as an array of [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid#property-items),\nthe column header gets an additional checkbox that can be used for toggling\nselection for all the items at once.\n\n__The default content can also be overridden__",
370
370
  "extension": true,
371
371
  "attributes": [
372
372
  {
@@ -490,7 +490,7 @@
490
490
  },
491
491
  {
492
492
  "name": ".textAlign",
493
- "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
493
+ "description": "Aligns the columns cell content horizontally.",
494
494
  "value": {
495
495
  "kind": "expression"
496
496
  }
@@ -623,7 +623,7 @@
623
623
  },
624
624
  {
625
625
  "name": ".textAlign",
626
- "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
626
+ "description": "Aligns the columns cell content horizontally.",
627
627
  "value": {
628
628
  "kind": "expression"
629
629
  }
@@ -784,7 +784,7 @@
784
784
  },
785
785
  {
786
786
  "name": ".textAlign",
787
- "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
787
+ "description": "Aligns the columns cell content horizontally.",
788
788
  "value": {
789
789
  "kind": "expression"
790
790
  }
@@ -800,7 +800,7 @@
800
800
  },
801
801
  {
802
802
  "name": "vaadin-grid-tree-toggle",
803
- "description": "`<vaadin-grid-tree-toggle>` is a helper element for the `<vaadin-grid>`\nthat provides toggle and level display functionality for the item tree.\n\n#### Example:\n```html\n<vaadin-grid-column id=\"column\"></vaadin-grid-column>\n```\n```js\nconst column = document.querySelector('#column');\ncolumn.renderer = (root, column, model) => {\n let treeToggle = root.firstElementChild;\n if (!treeToggle) {\n treeToggle = document.createElement('vaadin-grid-tree-toggle');\n treeToggle.addEventListener('expanded-changed', () => { ... });\n root.appendChild(treeToggle);\n }\n treeToggle.leaf = !model.item.hasChildren;\n treeToggle.level = level;\n treeToggle.expanded = expanded;\n treeToggle.textContent = model.item.name;\n};\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---|---\n`toggle` | The tree toggle icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------|-------------------------------------\n`expanded` | When present, the toggle is expanded\n`leaf` | When present, the toggle is not expandable, i. e., the current item is a leaf\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property | Description | Default\n---|---|---\n`--vaadin-grid-tree-toggle-level-offset` | Visual offset step for each tree sublevel | `1em`",
803
+ "description": "`<vaadin-grid-tree-toggle>` is a helper element for the `<vaadin-grid>`\nthat provides toggle and level display functionality for the item tree.\n\n#### Example:\n```html\n<vaadin-grid-column id=\"column\"></vaadin-grid-column>\n```\n```js\nconst column = document.querySelector('#column');\ncolumn.renderer = (root, column, model) => {\n let treeToggle = root.firstElementChild;\n if (!treeToggle) {\n treeToggle = document.createElement('vaadin-grid-tree-toggle');\n treeToggle.addEventListener('expanded-changed', () => { ... });\n root.appendChild(treeToggle);\n }\n treeToggle.leaf = !model.item.hasChildren;\n treeToggle.level = level;\n treeToggle.expanded = expanded;\n treeToggle.textContent = model.item.name;\n};\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---|---\n`toggle` | The tree toggle icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------|-------------------------------------\n`expanded` | When present, the toggle is expanded\n`leaf` | When present, the toggle is not expandable, i. e., the current item is a leaf\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n| `--vaadin-grid-tree-toggle-level-offset` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
804
804
  "extension": true,
805
805
  "attributes": [
806
806
  {
@@ -835,7 +835,7 @@
835
835
  },
836
836
  {
837
837
  "name": "vaadin-grid",
838
- "description": "`<vaadin-grid>` is a free, high quality data grid / data table Web Component. The content of the\nthe grid can be populated by using renderer callback function.\n\n### Quick Start\n\nStart with an assigning an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid#property-items) property to visualize your data.\n\nUse the [`<vaadin-grid-column>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid-column) element to configure the grid columns. Set `path` and `header`\nshorthand properties for the columns to define what gets rendered in the cells of the column.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-column path=\"name.first\" header=\"First name\"></vaadin-grid-column>\n <vaadin-grid-column path=\"name.last\" header=\"Last name\"></vaadin-grid-column>\n <vaadin-grid-column path=\"email\"></vaadin-grid-column>\n</vaadin-grid>\n```\n\nFor custom content `vaadin-grid-column` element provides you with three types of `renderer` callback functions: `headerRenderer`,\n`renderer` and `footerRenderer`.\n\nEach of those renderer functions provides `root`, `column`, `model` arguments when applicable.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `column`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\nRenderers are called on initialization of new column cells and each time the\nrelated row model is updated. DOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-column></vaadin-grid-column>\n <vaadin-grid-column></vaadin-grid-column>\n <vaadin-grid-column></vaadin-grid-column>\n</vaadin-grid>\n```\n```js\nconst grid = document.querySelector('vaadin-grid');\ngrid.items = [{'name': 'John', 'surname': 'Lennon', 'role': 'singer'},\n {'name': 'Ringo', 'surname': 'Starr', 'role': 'drums'}];\n\nconst columns = grid.querySelectorAll('vaadin-grid-column');\n\ncolumns[0].headerRenderer = function(root) {\n root.textContent = 'Name';\n};\ncolumns[0].renderer = function(root, column, model) {\n root.textContent = model.item.name;\n};\n\ncolumns[1].headerRenderer = function(root) {\n root.textContent = 'Surname';\n};\ncolumns[1].renderer = function(root, column, model) {\n root.textContent = model.item.surname;\n};\n\ncolumns[2].headerRenderer = function(root) {\n root.textContent = 'Role';\n};\ncolumns[2].renderer = function(root, column, model) {\n root.textContent = model.item.role;\n};\n```\n\nThe following properties are available in the `model` argument:\n\nProperty name | Type | Description\n--------------|------|------------\n`index`| Number | The index of the item.\n`item` | String or Object | The item.\n`level` | Number | Number of the item's tree sublevel, starts from 0.\n`expanded` | Boolean | True if the item's tree sublevel is expanded.\n`selected` | Boolean | True if the item is selected.\n`detailsOpened` | Boolean | True if the item's row details are open.\n`hasChildren` | Boolean | True if the item has children\n\nThe following helper elements can be used for further customization:\n- [`<vaadin-grid-column-group>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid-column-group)\n- [`<vaadin-grid-filter>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid-filter)\n- [`<vaadin-grid-sorter>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid-sorter)\n- [`<vaadin-grid-selection-column>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid-selection-column)\n- [`<vaadin-grid-tree-toggle>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid-tree-toggle)\n\n__Note that the helper elements must be explicitly imported.__\nIf you want to import everything at once you can use the `all-imports.js` entrypoint.\n\n### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively\nprovide the `<vaadin-grid>` data through the\n[`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid#property-dataProvider) function property.\nThe `<vaadin-grid>` calls this function lazily, only when it needs more data\nto be displayed.\n\nSee the [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-dev.1fa5a51482/#/elements/vaadin-grid#property-dataProvider) property\ndocumentation for the detailed data provider arguments description.\n\n__Note that expanding the tree grid's item will trigger a call to the `dataProvider`.__\n\n__Also, note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```javascript\ngrid.dataProvider = ({page, pageSize}, callback) => {\n // page: the requested page index\n // pageSize: number of items on one page\n const url = `https://api.example/data?page=${page}&per_page=${pageSize}`;\n\n fetch(url)\n .then((res) => res.json())\n .then(({ employees, totalSize }) => {\n callback(employees, totalSize);\n });\n};\n```\n\n__Alternatively, you can use the `size` property to set the total number of items:__\n\n```javascript\ngrid.size = 200; // The total number of items\ngrid.dataProvider = ({page, pageSize}, callback) => {\n const url = `https://api.example/data?page=${page}&per_page=${pageSize}`;\n\n fetch(url)\n .then((res) => res.json())\n .then((resJson) => callback(resJson.employees));\n};\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------------|----------------\n`row` | Row in the internal table\n`body-row` | Body row in the internal table\n`header-row` | Header row in the internal table\n`footer-row` | Footer row in the internal table\n`collapsed-row` | Collapsed row\n`expanded-row` | Expanded row\n`selected-row` | Selected row\n`nonselectable-row` | Row that the user may not select or deselect\n`details-opened-row` | Row with details open\n`odd-row` | Odd row\n`even-row` | Even row\n`first-row` | The first body row\n`first-header-row` | The first header row\n`first-footer-row` | The first footer row\n`last-row` | The last body row\n`last-header-row` | The last header row\n`last-footer-row` | The last footer row\n`dragstart-row` | Set on the row for one frame when drag is starting.\n`dragover-above-row` | Set on the row when the a row is dragged over above\n`dragover-below-row` | Set on the row when the a row is dragged over below\n`dragover-on-top-row` | Set on the row when the a row is dragged over on top\n`drag-disabled-row` | Set to a row that isn't available for dragging\n`drop-disabled-row` | Set to a row that can't be dropped on top of\n`cell` | Cell in the internal table\n`header-cell` | Header cell in the internal table\n`body-cell` | Body cell in the internal table\n`footer-cell` | Footer cell in the internal table\n`details-cell` | Row details cell in the internal table\n`focused-cell` | Focused cell in the internal table\n`odd-row-cell` | Cell in an odd row\n`even-row-cell` | Cell in an even row\n`first-row-cell` | Cell in the first body row\n`last-row-cell` | Cell in the last body row\n`first-header-row-cell` | Cell in the first header row\n`first-footer-row-cell` | Cell in the first footer row\n`last-header-row-cell` | Cell in the last header row\n`last-footer-row-cell` | Cell in the last footer row\n`loading-row-cell` | Cell in a row that is waiting for data from data provider\n`selected-row-cell` | Cell in a selected row\n`nonselectable-row-cell` | Cell in a row that the user may not select or deselect\n`collapsed-row-cell` | Cell in a collapsed row\n`expanded-row-cell` | Cell in an expanded row\n`details-opened-row-cell` | Cell in an row with details open\n`dragstart-row-cell` | Cell in the ghost image row, but not in a source row\n`drag-source-row-cell` | Cell in a source row, but not in the ghost image\n`dragover-above-row-cell` | Cell in a row that has another row dragged over above\n`dragover-below-row-cell` | Cell in a row that has another row dragged over below\n`dragover-on-top-row-cell` | Cell in a row that has another row dragged over on top\n`drag-disabled-row-cell` | Cell in a row that isn't available for dragging\n`drop-disabled-row-cell` | Cell in a row that can't be dropped on top of\n`frozen-cell` | Frozen cell in the internal table\n`frozen-to-end-cell` | Frozen to end cell in the internal table\n`last-frozen-cell` | Last frozen cell\n`first-frozen-to-end-cell` | First cell frozen to end\n`first-column-cell` | First visible cell on a row\n`last-column-cell` | Last visible cell on a row\n`reorder-allowed-cell` | Cell in a column where another column can be reordered\n`reorder-dragging-cell` | Cell in a column currently being reordered\n`resize-handle` | Handle for resizing the columns\n`empty-state` | The container for the content to be displayed when there are no body rows to show\n`reorder-ghost` | Ghost element of the header cell being dragged\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n----------------------|---------------------------------------------------------------------------------------------------|-----------\n`loading` | Set when the grid is loading data from data provider | :host\n`interacting` | Keyboard navigation in interaction mode | :host\n`navigating` | Keyboard navigation in navigation mode | :host\n`overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host\n`reordering` | Set when the grid's columns are being reordered | :host\n`dragover` | Set when the grid (not a specific row) is dragged over | :host\n`dragging-rows` | Set when grid rows are dragged | :host\n`reorder-status` | Reflects the status of a cell while columns are being reordered | cell\n`frozen` | Frozen cell | cell\n`frozen-to-end` | Cell frozen to end | cell\n`last-frozen` | Last frozen cell | cell\n`first-frozen-to-end` | First cell frozen to end | cell\n`first-column` | First visible cell on a row | cell\n`last-column` | Last visible cell on a row | cell\n`selected` | Selected row | row\n`expanded` | Expanded row | row\n`details-opened` | Row with details open | row\n`loading` | Row that is waiting for data from data provider | row\n`odd` | Odd row | row\n`first` | The first body row | row\n`last` | The last body row | row\n`dragstart` | Set for one frame when starting to drag a row. The value is a number when dragging multiple rows | row\n`dragover` | Set when the row is dragged over | row\n`drag-disabled` | Set to a row that isn't available for dragging | row\n`drop-disabled` | Set to a row that can't be dropped on top of | row\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
838
+ "description": "`<vaadin-grid>` is a free, high quality data grid / data table Web Component. The content of the\nthe grid can be populated by using renderer callback function.\n\n### Quick Start\n\nStart with an assigning an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid#property-items) property to visualize your data.\n\nUse the [`<vaadin-grid-column>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid-column) element to configure the grid columns. Set `path` and `header`\nshorthand properties for the columns to define what gets rendered in the cells of the column.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-column path=\"name.first\" header=\"First name\"></vaadin-grid-column>\n <vaadin-grid-column path=\"name.last\" header=\"Last name\"></vaadin-grid-column>\n <vaadin-grid-column path=\"email\"></vaadin-grid-column>\n</vaadin-grid>\n```\n\nFor custom content `vaadin-grid-column` element provides you with three types of `renderer` callback functions: `headerRenderer`,\n`renderer` and `footerRenderer`.\n\nEach of those renderer functions provides `root`, `column`, `model` arguments when applicable.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `column`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\nRenderers are called on initialization of new column cells and each time the\nrelated row model is updated. DOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n#### Example:\n```html\n<vaadin-grid>\n <vaadin-grid-column></vaadin-grid-column>\n <vaadin-grid-column></vaadin-grid-column>\n <vaadin-grid-column></vaadin-grid-column>\n</vaadin-grid>\n```\n```js\nconst grid = document.querySelector('vaadin-grid');\ngrid.items = [{'name': 'John', 'surname': 'Lennon', 'role': 'singer'},\n {'name': 'Ringo', 'surname': 'Starr', 'role': 'drums'}];\n\nconst columns = grid.querySelectorAll('vaadin-grid-column');\n\ncolumns[0].headerRenderer = function(root) {\n root.textContent = 'Name';\n};\ncolumns[0].renderer = function(root, column, model) {\n root.textContent = model.item.name;\n};\n\ncolumns[1].headerRenderer = function(root) {\n root.textContent = 'Surname';\n};\ncolumns[1].renderer = function(root, column, model) {\n root.textContent = model.item.surname;\n};\n\ncolumns[2].headerRenderer = function(root) {\n root.textContent = 'Role';\n};\ncolumns[2].renderer = function(root, column, model) {\n root.textContent = model.item.role;\n};\n```\n\nThe following properties are available in the `model` argument:\n\nProperty name | Type | Description\n--------------|------|------------\n`index`| Number | The index of the item.\n`item` | String or Object | The item.\n`level` | Number | Number of the item's tree sublevel, starts from 0.\n`expanded` | Boolean | True if the item's tree sublevel is expanded.\n`selected` | Boolean | True if the item is selected.\n`detailsOpened` | Boolean | True if the item's row details are open.\n`hasChildren` | Boolean | True if the item has children\n\nThe following helper elements can be used for further customization:\n- [`<vaadin-grid-column-group>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid-column-group)\n- [`<vaadin-grid-filter>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid-filter)\n- [`<vaadin-grid-sorter>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid-sorter)\n- [`<vaadin-grid-selection-column>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid-selection-column)\n- [`<vaadin-grid-tree-toggle>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid-tree-toggle)\n\n__Note that the helper elements must be explicitly imported.__\nIf you want to import everything at once you can use the `all-imports.js` entrypoint.\n\n### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively\nprovide the `<vaadin-grid>` data through the\n[`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid#property-dataProvider) function property.\nThe `<vaadin-grid>` calls this function lazily, only when it needs more data\nto be displayed.\n\nSee the [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-grid#property-dataProvider) property\ndocumentation for the detailed data provider arguments description.\n\n__Note that expanding the tree grid's item will trigger a call to the `dataProvider`.__\n\n__Also, note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```javascript\ngrid.dataProvider = ({page, pageSize}, callback) => {\n // page: the requested page index\n // pageSize: number of items on one page\n const url = `https://api.example/data?page=${page}&per_page=${pageSize}`;\n\n fetch(url)\n .then((res) => res.json())\n .then(({ employees, totalSize }) => {\n callback(employees, totalSize);\n });\n};\n```\n\n__Alternatively, you can use the `size` property to set the total number of items:__\n\n```javascript\ngrid.size = 200; // The total number of items\ngrid.dataProvider = ({page, pageSize}, callback) => {\n const url = `https://api.example/data?page=${page}&per_page=${pageSize}`;\n\n fetch(url)\n .then((res) => res.json())\n .then((resJson) => callback(resJson.employees));\n};\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------------|----------------\n`row` | Row in the internal table\n`body-row` | Body row in the internal table\n`header-row` | Header row in the internal table\n`footer-row` | Footer row in the internal table\n`collapsed-row` | Collapsed row\n`expanded-row` | Expanded row\n`selected-row` | Selected row\n`nonselectable-row` | Row that the user may not select or deselect\n`details-opened-row` | Row with details open\n`odd-row` | Odd row\n`even-row` | Even row\n`first-row` | The first body row\n`first-header-row` | The first header row\n`first-footer-row` | The first footer row\n`last-row` | The last body row\n`last-header-row` | The last header row\n`last-footer-row` | The last footer row\n`dragstart-row` | Set on the row for one frame when drag is starting.\n`dragover-above-row` | Set on the row when the a row is dragged over above\n`dragover-below-row` | Set on the row when the a row is dragged over below\n`dragover-on-top-row` | Set on the row when the a row is dragged over on top\n`drag-disabled-row` | Set to a row that isn't available for dragging\n`drop-disabled-row` | Set to a row that can't be dropped on top of\n`cell` | Cell in the internal table\n`header-cell` | Header cell in the internal table\n`body-cell` | Body cell in the internal table\n`footer-cell` | Footer cell in the internal table\n`details-cell` | Row details cell in the internal table\n`focused-cell` | Focused cell in the internal table\n`odd-row-cell` | Cell in an odd row\n`even-row-cell` | Cell in an even row\n`first-row-cell` | Cell in the first body row\n`last-row-cell` | Cell in the last body row\n`first-header-row-cell` | Cell in the first header row\n`first-footer-row-cell` | Cell in the first footer row\n`last-header-row-cell` | Cell in the last header row\n`last-footer-row-cell` | Cell in the last footer row\n`loading-row-cell` | Cell in a row that is waiting for data from data provider\n`selected-row-cell` | Cell in a selected row\n`nonselectable-row-cell` | Cell in a row that the user may not select or deselect\n`collapsed-row-cell` | Cell in a collapsed row\n`expanded-row-cell` | Cell in an expanded row\n`details-opened-row-cell` | Cell in an row with details open\n`dragstart-row-cell` | Cell in the ghost image row, but not in a source row\n`drag-source-row-cell` | Cell in a source row, but not in the ghost image\n`dragover-above-row-cell` | Cell in a row that has another row dragged over above\n`dragover-below-row-cell` | Cell in a row that has another row dragged over below\n`dragover-on-top-row-cell` | Cell in a row that has another row dragged over on top\n`drag-disabled-row-cell` | Cell in a row that isn't available for dragging\n`drop-disabled-row-cell` | Cell in a row that can't be dropped on top of\n`frozen-cell` | Frozen cell in the internal table\n`frozen-to-end-cell` | Frozen to end cell in the internal table\n`last-frozen-cell` | Last frozen cell\n`first-frozen-to-end-cell` | First cell frozen to end\n`first-column-cell` | First visible cell on a row\n`last-column-cell` | Last visible cell on a row\n`reorder-allowed-cell` | Cell in a column where another column can be reordered\n`reorder-dragging-cell` | Cell in a column currently being reordered\n`resize-handle` | Handle for resizing the columns\n`empty-state` | The container for the content to be displayed when there are no body rows to show\n`reorder-ghost` | Ghost element of the header cell being dragged\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n----------------------|---------------------------------------------------------------------------------------------------|-----------\n`loading` | Set when the grid is loading data from data provider | :host\n`interacting` | Keyboard navigation in interaction mode | :host\n`navigating` | Keyboard navigation in navigation mode | :host\n`overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host\n`reordering` | Set when the grid's columns are being reordered | :host\n`dragover` | Set when the grid (not a specific row) is dragged over | :host\n`dragging-rows` | Set when grid rows are dragged | :host\n`reorder-status` | Reflects the status of a cell while columns are being reordered | cell\n`frozen` | Frozen cell | cell\n`frozen-to-end` | Cell frozen to end | cell\n`last-frozen` | Last frozen cell | cell\n`first-frozen-to-end` | First cell frozen to end | cell\n`first-column` | First visible cell on a row | cell\n`last-column` | Last visible cell on a row | cell\n`selected` | Selected row | row\n`expanded` | Expanded row | row\n`details-opened` | Row with details open | row\n`loading` | Row that is waiting for data from data provider | row\n`odd` | Odd row | row\n`first` | The first body row | row\n`last` | The last body row | row\n`dragstart` | Set for one frame when starting to drag a row. The value is a number when dragging multiple rows | row\n`dragover` | Set when the row is dragged over | row\n`drag-disabled` | Set to a row that isn't available for dragging | row\n`drop-disabled` | Set to a row that can't be dropped on top of | row\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-grid-background` |\n| `--vaadin-grid-border-color` |\n| `--vaadin-grid-border-radius` |\n| `--vaadin-grid-border-width` |\n| `--vaadin-grid-cell-background-color` |\n| `--vaadin-grid-cell-padding` |\n| `--vaadin-grid-cell-text-overflow` |\n| `--vaadin-grid-column-border-width` |\n| `--vaadin-grid-column-resize-handle-color` |\n| `--vaadin-grid-header-font-size` |\n| `--vaadin-grid-header-font-weight` |\n| `--vaadin-grid-header-text-color` |\n| `--vaadin-grid-row-background-color` |\n| `--vaadin-grid-row-border-width` |\n| `--vaadin-grid-row-highlight-background-color` |\n| `--vaadin-grid-row-hover-background-color` |\n| `--vaadin-grid-row-odd-background-color` |\n| `--vaadin-grid-row-selected-background-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
839
839
  "extension": true,
840
840
  "attributes": [
841
841
  {