@vaadin/dashboard 24.8.0-alpha9 → 25.0.0-alpha1

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 (25) hide show
  1. package/package.json +8 -9
  2. package/src/vaadin-dashboard-button.js +15 -2
  3. package/src/vaadin-dashboard-item-mixin.js +5 -5
  4. package/src/vaadin-dashboard-layout-mixin.js +29 -46
  5. package/src/vaadin-dashboard-section.js +13 -19
  6. package/src/vaadin-dashboard-widget.d.ts +11 -4
  7. package/src/vaadin-dashboard-widget.js +15 -8
  8. package/src/vaadin-dashboard.js +4 -4
  9. package/src/widget-resize-controller.js +5 -5
  10. package/theme/lumo/vaadin-dashboard-layout-styles.js +18 -2
  11. package/theme/lumo/vaadin-dashboard-section-styles.js +9 -6
  12. package/theme/lumo/vaadin-dashboard-styles.js +2 -2
  13. package/theme/lumo/vaadin-dashboard-widget-styles.js +54 -42
  14. package/theme/lumo/vaadin-dashboard.d.ts +1 -1
  15. package/theme/lumo/vaadin-dashboard.js +1 -1
  16. package/web-types.json +3 -3
  17. package/web-types.lit.json +3 -3
  18. package/theme/material/vaadin-dashboard-layout.d.ts +0 -1
  19. package/theme/material/vaadin-dashboard-layout.js +0 -1
  20. package/theme/material/vaadin-dashboard-section.d.ts +0 -1
  21. package/theme/material/vaadin-dashboard-section.js +0 -1
  22. package/theme/material/vaadin-dashboard-widget.d.ts +0 -1
  23. package/theme/material/vaadin-dashboard-widget.js +0 -1
  24. package/theme/material/vaadin-dashboard.d.ts +0 -3
  25. package/theme/material/vaadin-dashboard.js +0 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/dashboard",
3
- "version": "24.8.0-alpha9",
3
+ "version": "25.0.0-alpha1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -37,16 +37,15 @@
37
37
  ],
38
38
  "dependencies": {
39
39
  "@open-wc/dedupe-mixin": "^1.3.0",
40
- "@vaadin/button": "24.8.0-alpha9",
41
- "@vaadin/component-base": "24.8.0-alpha9",
42
- "@vaadin/vaadin-lumo-styles": "24.8.0-alpha9",
43
- "@vaadin/vaadin-material-styles": "24.8.0-alpha9",
44
- "@vaadin/vaadin-themable-mixin": "24.8.0-alpha9",
40
+ "@vaadin/button": "25.0.0-alpha1",
41
+ "@vaadin/component-base": "25.0.0-alpha1",
42
+ "@vaadin/vaadin-lumo-styles": "25.0.0-alpha1",
43
+ "@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
45
44
  "lit": "^3.0.0"
46
45
  },
47
46
  "devDependencies": {
48
- "@vaadin/chai-plugins": "24.8.0-alpha9",
49
- "@vaadin/test-runner-commands": "24.8.0-alpha9",
47
+ "@vaadin/chai-plugins": "25.0.0-alpha1",
48
+ "@vaadin/test-runner-commands": "25.0.0-alpha1",
50
49
  "@vaadin/testing-helpers": "^1.1.0"
51
50
  },
52
51
  "cvdlName": "vaadin-dashboard",
@@ -54,5 +53,5 @@
54
53
  "web-types.json",
55
54
  "web-types.lit.json"
56
55
  ],
57
- "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770"
56
+ "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
58
57
  }
package/src/vaadin-dashboard-button.js CHANGED
@@ -9,7 +9,7 @@
9
9
  * license.
10
10
  */
11
11
  import { html, LitElement } from 'lit';
12
- import { buttonStyles, buttonTemplate } from '@vaadin/button/src/vaadin-button-base.js';
12
+ import { buttonStyles } from '@vaadin/button/src/vaadin-button-core-styles.js';
13
13
  import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
14
14
  import { defineCustomElement } from '@vaadin/component-base/src/define.js';
15
15
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -32,7 +32,20 @@ class DashboardButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixi
32
32
 
33
33
  /** @protected */
34
34
  render() {
35
- return buttonTemplate(html);
35
+ return html`
36
+ <div class="vaadin-button-container">
37
+ <span part="prefix" aria-hidden="true">
38
+ <slot name="prefix"></slot>
39
+ </span>
40
+ <span part="label">
41
+ <slot></slot>
42
+ </span>
43
+ <span part="suffix" aria-hidden="true">
44
+ <slot name="suffix"></slot>
45
+ </span>
46
+ </div>
47
+ <slot name="tooltip"></slot>
48
+ `;
36
49
  }
37
50
 
38
51
  /** @protected */
package/src/vaadin-dashboard-item-mixin.js CHANGED
@@ -210,13 +210,13 @@ export const DashboardItemMixin = (superClass) =>
210
210
  /** @private */
211
211
  __renderResizeControls() {
212
212
  const style = getComputedStyle(this);
213
- const hasMinRowHeight = style.getPropertyValue('--_vaadin-dashboard-row-min-height') !== 'auto';
213
+ const hasMinRowHeight = style.getPropertyValue('--_row-min-height') !== 'auto';
214
214
 
215
- const effectiveColCount = style.getPropertyValue('--_vaadin-dashboard-col-count');
216
- const maxColCount = style.getPropertyValue('--_vaadin-dashboard-col-max-count');
215
+ const effectiveColCount = style.getPropertyValue('--_col-count');
216
+ const maxColCount = style.getPropertyValue('--_col-max-count');
217
217
  const colCount = Math.min(effectiveColCount, maxColCount);
218
- const colspan = style.getPropertyValue('--vaadin-dashboard-item-colspan') || 1;
219
- const rowspan = style.getPropertyValue('--vaadin-dashboard-item-rowspan') || 1;
218
+ const colspan = style.getPropertyValue('--vaadin-dashboard-widget-colspan') || 1;
219
+ const rowspan = style.getPropertyValue('--vaadin-dashboard-widget-rowspan') || 1;
220
220
  const canShrinkWidth = colspan > 1;
221
221
  const canShrinkHeight = rowspan > 1;
222
222
  const canGrowWidth = colspan < colCount;
package/src/vaadin-dashboard-layout-mixin.js CHANGED
@@ -23,7 +23,8 @@ export const DashboardLayoutMixin = (superClass) =>
23
23
  return css`
24
24
  :host {
25
25
  display: block;
26
- overflow: hidden;
26
+ overflow: auto;
27
+ box-sizing: border-box;
27
28
  width: 100%;
28
29
  }
29
30
 
@@ -39,76 +40,58 @@ export const DashboardLayoutMixin = (superClass) =>
39
40
  box-sizing: border-box;
40
41
 
41
42
  /* Padding around dashboard edges */
42
- --_vaadin-dashboard-default-padding: 1rem;
43
- --_vaadin-dashboard-padding: max(
44
- 0px,
45
- var(--vaadin-dashboard-padding, var(--_vaadin-dashboard-default-padding))
46
- );
47
- padding: var(--_vaadin-dashboard-padding);
43
+ --_default-padding: 1rem;
44
+ --_padding: max(0px, var(--vaadin-dashboard-padding, var(--_default-padding)));
45
+ padding: var(--_padding);
48
46
 
49
47
  /* Gap between widgets */
50
- --_vaadin-dashboard-default-gap: 1rem;
51
- --_vaadin-dashboard-gap: max(0px, var(--vaadin-dashboard-gap, var(--_vaadin-dashboard-default-gap)));
52
- gap: var(--_vaadin-dashboard-gap);
48
+ --_default-gap: 1rem;
49
+ --_gap: max(0px, var(--vaadin-dashboard-gap, var(--_default-gap)));
50
+ gap: var(--_gap);
53
51
 
54
52
  /* Default min and max column widths */
55
- --_vaadin-dashboard-default-col-min-width: 25rem;
56
- --_vaadin-dashboard-default-col-max-width: 1fr;
53
+ --_default-col-min-width: 25rem;
54
+ --_default-col-max-width: 1fr;
57
55
 
58
56
  /* Effective min and max column widths */
59
- --_vaadin-dashboard-col-min-width: var(
60
- --vaadin-dashboard-col-min-width,
61
- var(--_vaadin-dashboard-default-col-min-width)
62
- );
63
- --_vaadin-dashboard-col-max-width: var(
64
- --vaadin-dashboard-col-max-width,
65
- var(--_vaadin-dashboard-default-col-max-width)
66
- );
57
+ --_col-min-width: var(--vaadin-dashboard-col-min-width, var(--_default-col-min-width));
58
+ --_col-max-width: var(--vaadin-dashboard-col-max-width, var(--_default-col-max-width));
67
59
 
68
60
  /* Effective max column count */
69
- --_vaadin-dashboard-col-max-count: var(--vaadin-dashboard-col-max-count, var(--_vaadin-dashboard-col-count));
61
+ --_col-max-count: var(--vaadin-dashboard-col-max-count, var(--_col-count));
70
62
 
71
63
  /* Effective column count */
72
- --_vaadin-dashboard-effective-col-count: min(
73
- var(--_vaadin-dashboard-col-count),
74
- var(--_vaadin-dashboard-col-max-count)
75
- );
64
+ --_effective-col-count: min(var(--_col-count), var(--_col-max-count));
76
65
 
77
66
  /* Default row min height */
78
- --_vaadin-dashboard-default-row-min-height: 12rem;
67
+ --_default-row-min-height: 12rem;
79
68
  /* Effective row min height */
80
- --_vaadin-dashboard-row-min-height: var(
81
- --vaadin-dashboard-row-min-height,
82
- var(--_vaadin-dashboard-default-row-min-height)
83
- );
69
+ --_row-min-height: var(--vaadin-dashboard-row-min-height, var(--_default-row-min-height));
84
70
  /* Effective row height */
85
- --_vaadin-dashboard-row-height: minmax(var(--_vaadin-dashboard-row-min-height, auto), auto);
71
+ --_row-height: minmax(var(--_row-min-height, auto), auto);
86
72
 
87
73
  display: grid;
88
- overflow: auto;
89
- height: 100%;
74
+ overflow: hidden;
75
+ min-width: calc(var(--_col-min-width) + var(--_padding) * 2);
90
76
 
91
77
  grid-template-columns: repeat(
92
- var(--_vaadin-dashboard-effective-col-count, auto-fill),
93
- minmax(var(--_vaadin-dashboard-col-min-width), var(--_vaadin-dashboard-col-max-width))
78
+ var(--_effective-col-count, auto-fill),
79
+ minmax(var(--_col-min-width), var(--_col-max-width))
94
80
  );
95
81
 
96
- grid-auto-rows: var(--_vaadin-dashboard-row-height);
82
+ grid-auto-rows: var(--_row-height);
97
83
  }
98
84
 
99
85
  ::slotted(*) {
100
86
  /* The grid-column value applied to children */
101
- --_vaadin-dashboard-item-column: span
102
- min(
103
- var(--vaadin-dashboard-item-colspan, 1),
104
- var(--_vaadin-dashboard-effective-col-count, var(--_vaadin-dashboard-col-count))
105
- );
87
+ --_item-column: span
88
+ min(var(--vaadin-dashboard-widget-colspan, 1), var(--_effective-col-count, var(--_col-count)));
106
89
 
107
- grid-column: var(--_vaadin-dashboard-item-column);
90
+ grid-column: var(--_item-column);
108
91
 
109
92
  /* The grid-row value applied to children */
110
- --_vaadin-dashboard-item-row: span var(--vaadin-dashboard-item-rowspan, 1);
111
- grid-row: var(--_vaadin-dashboard-item-row);
93
+ --_item-row: span var(--vaadin-dashboard-widget-rowspan, 1);
94
+ grid-row: var(--_item-row);
112
95
  }
113
96
  `;
114
97
  }
@@ -152,10 +135,10 @@ export const DashboardLayoutMixin = (superClass) =>
152
135
  */
153
136
  __updateColumnCount() {
154
137
  // Clear the previously computed column count
155
- this.$.grid.style.removeProperty('--_vaadin-dashboard-col-count');
138
+ this.$.grid.style.removeProperty('--_col-count');
156
139
  // Get the column count (with no colspans etc in effect)...
157
140
  const columnCount = getComputedStyle(this.$.grid).gridTemplateColumns.split(' ').length;
158
141
  // ...and set it as the new value
159
- this.$.grid.style.setProperty('--_vaadin-dashboard-col-count', columnCount);
142
+ this.$.grid.style.setProperty('--_col-count', columnCount);
160
143
  }
161
144
  };
package/src/vaadin-dashboard-section.js CHANGED
@@ -85,16 +85,13 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
85
85
  display: grid;
86
86
  position: relative;
87
87
  grid-template-columns: subgrid;
88
- --_vaadin-dashboard-section-column: 1 / calc(var(--_vaadin-dashboard-effective-col-count) + 1);
89
- grid-column: var(--_vaadin-dashboard-section-column) !important;
90
- gap: var(--_vaadin-dashboard-gap, 1rem);
88
+ --_section-column: 1 / calc(var(--_effective-col-count) + 1);
89
+ grid-column: var(--_section-column) !important;
90
+ gap: var(--_gap, 1rem);
91
91
  /* Dashboard section header height */
92
- --_vaadin-dashboard-section-header-height: minmax(0, auto);
93
- grid-template-rows: var(--_vaadin-dashboard-section-header-height) repeat(
94
- auto-fill,
95
- var(--_vaadin-dashboard-row-height)
96
- );
97
- grid-auto-rows: var(--_vaadin-dashboard-row-height);
92
+ --_section-header-height: minmax(0, auto);
93
+ grid-template-rows: var(--_section-header-height) repeat(auto-fill, var(--_row-height));
94
+ grid-auto-rows: var(--_row-height);
98
95
  }
99
96
 
100
97
  :host([hidden]) {
@@ -102,19 +99,16 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
102
99
  }
103
100
 
104
101
  ::slotted(*) {
105
- --_vaadin-dashboard-item-column: span
106
- min(
107
- var(--vaadin-dashboard-item-colspan, 1),
108
- var(--_vaadin-dashboard-effective-col-count, var(--_vaadin-dashboard-col-count))
109
- );
110
-
111
- grid-column: var(--_vaadin-dashboard-item-column);
112
- --_vaadin-dashboard-item-row: span var(--vaadin-dashboard-item-rowspan, 1);
113
- grid-row: var(--_vaadin-dashboard-item-row);
102
+ --_item-column: span
103
+ min(var(--vaadin-dashboard-widget-colspan, 1), var(--_effective-col-count, var(--_col-count)));
104
+
105
+ grid-column: var(--_item-column);
106
+ --_item-row: span var(--vaadin-dashboard-widget-rowspan, 1);
107
+ grid-row: var(--_item-row);
114
108
  }
115
109
 
116
110
  header {
117
- grid-column: var(--_vaadin-dashboard-section-column);
111
+ grid-column: var(--_section-column);
118
112
  }
119
113
 
120
114
  :host::before {
package/src/vaadin-dashboard-widget.d.ts CHANGED
@@ -62,10 +62,17 @@ import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
62
62
  *
63
63
  * The following custom properties are available:
64
64
  *
65
- * Custom Property | Description
66
- * ----------------------------------|-------------
67
- * `--vaadin-dashboard-item-colspan` | colspan of the widget
68
- * `--vaadin-dashboard-item-rowspan` | rowspan of the widget
65
+ * Custom Property | Description
66
+ * --------------------------------------------|----------------------
67
+ * `--vaadin-dashboard-widget-colspan` | colspan of the widget
68
+ * `--vaadin-dashboard-widget-rowspan` | rowspan of the widget
69
+ * `--vaadin-dashboard-widget-background` | widget background
70
+ * `--vaadin-dashboard-widget-border-radius` | widget corner radius
71
+ * `--vaadin-dashboard-widget-border-width` | widget border width
72
+ * `--vaadin-dashboard-widget-border-color` | widget border color
73
+ * `--vaadin-dashboard-widget-shadow` | widget shadow (non edit mode)
74
+ * `--vaadin-dashboard-widget-padding` | padding around widget content
75
+ * `--vaadin-dashboard-widget-title-wrap` | widget title wrap
69
76
  *
70
77
  * The following state attributes are available for styling:
71
78
  *
package/src/vaadin-dashboard-widget.js CHANGED
@@ -68,10 +68,17 @@ import { DashboardSection } from './vaadin-dashboard-section.js';
68
68
  *
69
69
  * The following custom properties are available:
70
70
  *
71
- * Custom Property | Description
72
- * ----------------------------------|-------------
73
- * `--vaadin-dashboard-item-colspan` | colspan of the widget
74
- * `--vaadin-dashboard-item-rowspan` | rowspan of the widget
71
+ * Custom Property | Description
72
+ * --------------------------------------------|----------------------
73
+ * `--vaadin-dashboard-widget-colspan` | colspan of the widget
74
+ * `--vaadin-dashboard-widget-rowspan` | rowspan of the widget
75
+ * `--vaadin-dashboard-widget-background` | widget background
76
+ * `--vaadin-dashboard-widget-border-radius` | widget corner radius
77
+ * `--vaadin-dashboard-widget-border-width` | widget border width
78
+ * `--vaadin-dashboard-widget-border-color` | widget border color
79
+ * `--vaadin-dashboard-widget-shadow` | widget shadow (non edit mode)
80
+ * `--vaadin-dashboard-widget-padding` | padding around widget content
81
+ * `--vaadin-dashboard-widget-title-wrap` | widget title wrap
75
82
  *
76
83
  * The following state attributes are available for styling:
77
84
  *
@@ -110,8 +117,8 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
110
117
  :host {
111
118
  display: flex;
112
119
  flex-direction: column;
113
- grid-column: var(--_vaadin-dashboard-item-column);
114
- grid-row: var(--_vaadin-dashboard-item-row);
120
+ grid-column: var(--_item-column);
121
+ grid-row: var(--_item-row);
115
122
  position: relative;
116
123
  }
117
124
 
@@ -141,8 +148,8 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
141
148
  z-index: 2;
142
149
  position: absolute;
143
150
  top: -1px;
144
- width: var(--_vaadin-dashboard-widget-resizer-width, 0);
145
- height: var(--_vaadin-dashboard-widget-resizer-height, 0);
151
+ width: var(--_widget-resizer-width, 0);
152
+ height: var(--_widget-resizer-height, 0);
146
153
  background: rgba(0, 0, 0, 0.1);
147
154
  border-radius: inherit;
148
155
  }
package/src/vaadin-dashboard.js CHANGED
@@ -433,8 +433,8 @@ class Dashboard extends DashboardLayoutMixin(
433
433
  /** @private */
434
434
  __updateWrapper(wrapper, item) {
435
435
  const style = `
436
- ${item.colspan ? `--vaadin-dashboard-item-colspan: ${item.colspan};` : ''}
437
- ${item.rowspan ? `--vaadin-dashboard-item-rowspan: ${item.rowspan};` : ''}
436
+ ${item.colspan ? `--vaadin-dashboard-widget-colspan: ${item.colspan};` : ''}
437
+ ${item.rowspan ? `--vaadin-dashboard-widget-rowspan: ${item.rowspan};` : ''}
438
438
  `.trim();
439
439
 
440
440
  wrapper.__item = item;
@@ -498,11 +498,11 @@ class Dashboard extends DashboardLayoutMixin(
498
498
  * @private
499
499
  */
500
500
  __updateColumnCount() {
501
- const previousColumnCount = this.$.grid.style.getPropertyValue('--_vaadin-dashboard-col-count');
501
+ const previousColumnCount = this.$.grid.style.getPropertyValue('--_col-count');
502
502
  super.__updateColumnCount();
503
503
 
504
504
  // Request update for all the widgets if the column count has changed on resize
505
- if (previousColumnCount !== this.$.grid.style.getPropertyValue('--_vaadin-dashboard-col-count')) {
505
+ if (previousColumnCount !== this.$.grid.style.getPropertyValue('--_col-count')) {
506
506
  this.querySelectorAll(WRAPPER_LOCAL_NAME).forEach((wrapper) => {
507
507
  if (wrapper.firstElementChild && 'requestUpdate' in wrapper.firstElementChild) {
508
508
  wrapper.firstElementChild.requestUpdate();
package/src/widget-resize-controller.js CHANGED
@@ -111,8 +111,8 @@ export class WidgetResizeController {
111
111
  }
112
112
 
113
113
  const itemWrapper = this.__getItemWrapper(this.resizedItem);
114
- itemWrapper.style.removeProperty('--_vaadin-dashboard-widget-resizer-width');
115
- itemWrapper.style.removeProperty('--_vaadin-dashboard-widget-resizer-height');
114
+ itemWrapper.style.removeProperty('--_widget-resizer-width');
115
+ itemWrapper.style.removeProperty('--_widget-resizer-height');
116
116
  if (itemWrapper.firstElementChild) {
117
117
  itemWrapper.firstElementChild.toggleAttribute('resizing', false);
118
118
  }
@@ -157,7 +157,7 @@ export class WidgetResizeController {
157
157
  }
158
158
 
159
159
  const gridStyle = getComputedStyle(this.host.$.grid);
160
- if (rowspanDelta && gridStyle.getPropertyValue('--_vaadin-dashboard-row-min-height') === 'auto') {
160
+ if (rowspanDelta && gridStyle.getPropertyValue('--_row-min-height') === 'auto') {
161
161
  // Do not resize vertically if the min row height is not set
162
162
  return;
163
163
  }
@@ -182,8 +182,8 @@ export class WidgetResizeController {
182
182
  /** @private */
183
183
  __updateWidgetStyles() {
184
184
  const itemWrapper = this.__getItemWrapper(this.resizedItem);
185
- itemWrapper.style.setProperty('--_vaadin-dashboard-widget-resizer-width', `${this.__resizeWidth}px`);
186
- itemWrapper.style.setProperty('--_vaadin-dashboard-widget-resizer-height', `${this.__resizeHeight}px`);
185
+ itemWrapper.style.setProperty('--_widget-resizer-width', `${this.__resizeWidth}px`);
186
+ itemWrapper.style.setProperty('--_widget-resizer-height', `${this.__resizeHeight}px`);
187
187
  if (itemWrapper.firstElementChild) {
188
188
  itemWrapper.firstElementChild.toggleAttribute('resizing', true);
189
189
  }
package/theme/lumo/vaadin-dashboard-layout-styles.js CHANGED
@@ -1,9 +1,25 @@
1
1
  import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
2
2
 
3
3
  export const dashboardLayoutStyles = css`
4
+ :host([theme~='shaded-background']) {
5
+ background: var(--lumo-shade-5pct);
6
+ }
7
+
8
+ :host([theme~='elevated-widgets']) {
9
+ --vaadin-dashboard-widget-shadow: var(--lumo-box-shadow-xs);
10
+ --vaadin-dashboard-widget-border-color: var(--lumo-contrast-10pct);
11
+ --vaadin-dashboard-widget-background: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct))
12
+ var(--lumo-base-color);
13
+ }
14
+
15
+ :host([theme~='flat-widgets']) {
16
+ --vaadin-dashboard-widget-background: var(--lumo-contrast-5pct);
17
+ --vaadin-dashboard-widget-border-color: transparent;
18
+ }
19
+
4
20
  #grid {
5
- --_vaadin-dashboard-default-gap: var(--lumo-space-m);
6
- --_vaadin-dashboard-default-padding: var(--lumo-space-m);
21
+ --_default-gap: var(--lumo-space-m);
22
+ --_default-padding: var(--lumo-space-m);
7
23
  }
8
24
  `;
9
25
 
package/theme/lumo/vaadin-dashboard-section-styles.js CHANGED
@@ -10,7 +10,7 @@ const section = css`
10
10
  /* stylelint-disable rule-empty-line-before */
11
11
 
12
12
  :host {
13
- --_section-outline-offset: calc(min(var(--_vaadin-dashboard-gap), var(--_vaadin-dashboard-padding)) / 3);
13
+ --_section-outline-offset: calc(min(var(--_gap), var(--_padding)) / 3);
14
14
  --_focus-ring-offset: calc((var(--_section-outline-offset) - var(--_focus-ring-width)));
15
15
  border-radius: var(--lumo-border-radius-l);
16
16
  }
@@ -20,11 +20,14 @@ const section = css`
20
20
  line-height: var(--lumo-line-height-s);
21
21
  padding-inline: var(--lumo-space-s);
22
22
  min-height: var(--lumo-size-l);
23
+ align-items: center;
23
24
  }
24
25
 
25
26
  [part='title'] {
26
27
  font-size: var(--lumo-font-size-xl);
27
28
  font-weight: 600;
29
+ white-space: nowrap;
30
+ line-height: var(--lumo-line-height-m);
28
31
  }
29
32
 
30
33
  /* Section states */
@@ -59,14 +62,14 @@ const section = css`
59
62
  }
60
63
 
61
64
  :host([move-mode]) ::slotted(*) {
62
- --_vaadin-dashboard-widget-opacity: 0.3;
63
- --_vaadin-dashboard-widget-filter: blur(10px);
65
+ --_widget-opacity: 0.3;
66
+ --_widget-filter: blur(10px);
64
67
  }
65
68
 
66
69
  :host([dragging]) {
67
- background: var(--_vaadin-dashboard-drop-target-background-color);
68
- outline: var(--_vaadin-dashboard-drop-target-border);
69
- box-shadow: 0 0 0 var(--_section-outline-offset) var(--_vaadin-dashboard-drop-target-background-color);
70
+ background: var(--_drop-target-background-color);
71
+ outline: var(--_drop-target-border);
72
+ box-shadow: 0 0 0 var(--_section-outline-offset) var(--_drop-target-background-color);
70
73
  }
71
74
 
72
75
  /* Accessible move mode controls */
package/theme/lumo/vaadin-dashboard-styles.js CHANGED
@@ -3,11 +3,11 @@ import { dashboardLayoutStyles } from './vaadin-dashboard-layout-styles.js';
3
3
 
4
4
  const dashboard = css`
5
5
  :host {
6
- --_vaadin-dashboard-widget-opacity: 1;
6
+ --_widget-opacity: 1;
7
7
  }
8
8
 
9
9
  :host([item-selected]) {
10
- --_vaadin-dashboard-widget-opacity: 0.7;
10
+ --_widget-opacity: 0.7;
11
11
  }
12
12
  `;
13
13
 
package/theme/lumo/vaadin-dashboard-widget-styles.js CHANGED
@@ -12,28 +12,19 @@ const dashboardWidgetAndSection = css`
12
12
  /* stylelint-disable length-zero-no-unit */
13
13
 
14
14
  :host {
15
- --_vaadin-dashboard-widget-background: var(--vaadin-dashboard-widget-background, var(--lumo-base-color));
16
- --_vaadin-dashboard-widget-border-radius: var(--vaadin-dashboard-widget-border-radius, var(--lumo-border-radius-l));
17
- --_vaadin-dashboard-widget-border-width: var(--vaadin-dashboard-widget-border-width, 1px);
18
- --_vaadin-dashboard-widget-border-color: var(--vaadin-dashboard-widget-border-color, var(--lumo-contrast-20pct));
19
- --_vaadin-dashboard-widget-shadow: var(--vaadin-dashboard-widget-shadow, 0 0 0 0 transparent);
20
- --_vaadin-dashboard-widget-editable-shadow: var(
21
- --vaadin-dashboard-widget-editable-shadow,
22
- var(--lumo-box-shadow-s)
23
- );
24
- --_vaadin-dashboard-widget-selected-shadow: var(
25
- --vaadin-dashboard-widget-selected-shadow,
26
- 0 2px 4px -1px var(--lumo-primary-color-10pct),
27
- 0 3px 12px -1px var(--lumo-primary-color-50pct)
28
- );
29
- --_vaadin-dashboard-drop-target-background-color: var(
15
+ --_widget-background: var(--vaadin-dashboard-widget-background, var(--lumo-base-color));
16
+ --_widget-border-radius: var(--vaadin-dashboard-widget-border-radius, var(--lumo-border-radius-l));
17
+ --_widget-border-width: var(--vaadin-dashboard-widget-border-width, 1px);
18
+ --_widget-border-color: var(--vaadin-dashboard-widget-border-color, var(--lumo-contrast-20pct));
19
+ --_widget-shadow: var(--vaadin-dashboard-widget-shadow, 0 0 0 0 transparent);
20
+ --_widget-editable-shadow: var(--lumo-box-shadow-s);
21
+ --_widget-selected-shadow: 0 2px 4px -1px var(--lumo-primary-color-10pct),
22
+ 0 3px 12px -1px var(--lumo-primary-color-50pct);
23
+ --_drop-target-background-color: var(
30
24
  --vaadin-dashboard-drop-target-background-color,
31
25
  var(--lumo-primary-color-10pct)
32
26
  );
33
- --_vaadin-dashboard-drop-target-border: var(
34
- --vaadin-dashboard-drop-target-border,
35
- 1px dashed var(--lumo-primary-color-50pct)
36
- );
27
+ --_drop-target-border: var(--vaadin-dashboard-drop-target-border, 1px dashed var(--lumo-primary-color-50pct));
37
28
 
38
29
  color: var(--lumo-body-text-color);
39
30
  font-family: var(--lumo-font-family);
@@ -42,8 +33,8 @@ const dashboardWidgetAndSection = css`
42
33
  --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
43
34
  --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
44
35
  --_icon-color: var(--lumo-contrast-60pct);
45
- opacity: var(--_vaadin-dashboard-widget-opacity);
46
- filter: var(--_vaadin-dashboard-widget-filter);
36
+ opacity: var(--_widget-opacity);
37
+ filter: var(--_widget-filter);
47
38
  }
48
39
 
49
40
  :host([selected]) {
@@ -57,19 +48,20 @@ const dashboardWidgetAndSection = css`
57
48
 
58
49
  header {
59
50
  display: flex;
60
- align-items: center;
51
+ align-items: start;
61
52
  box-sizing: border-box;
62
53
  justify-content: space-between;
63
- gap: var(--lumo-space-xs);
64
54
  }
65
55
 
66
56
  [part='title'] {
67
57
  flex: 1;
68
58
  color: var(--lumo-header-text-color);
69
- margin: 0;
70
- white-space: nowrap;
59
+ white-space: var(--vaadin-dashboard-widget-title-wrap, wrap);
71
60
  text-overflow: ellipsis;
72
61
  overflow: hidden;
62
+ line-height: var(--lumo-line-height-s);
63
+ margin: 0 0 1px;
64
+ align-self: safe center;
73
65
  }
74
66
 
75
67
  vaadin-dashboard-button {
@@ -110,6 +102,7 @@ const dashboardWidgetAndSection = css`
110
102
  [part~='remove-button'] {
111
103
  cursor: pointer;
112
104
  --icon: var(--lumo-icons-cross);
105
+ margin-inline-start: var(--lumo-space-xs);
113
106
  }
114
107
 
115
108
  /* Mode controls */
@@ -142,45 +135,55 @@ const dashboardWidgetAndSection = css`
142
135
  /* Widget styles */
143
136
  const dashboardWidget = css`
144
137
  :host {
145
- background: var(--_vaadin-dashboard-widget-background);
146
- border-radius: var(--_vaadin-dashboard-widget-border-radius);
147
- --_border-shadow: 0 0 0 var(--_vaadin-dashboard-widget-border-width) var(--_vaadin-dashboard-widget-border-color);
148
- --_shadow: var(--_vaadin-dashboard-widget-shadow);
149
- box-shadow: var(--_shadow), var(--_border-shadow);
138
+ background: var(--_widget-background);
139
+ border-radius: var(--_widget-border-radius);
140
+ box-shadow: var(--_widget-shadow);
141
+ position: relative;
142
+ }
143
+
144
+ :host::before {
145
+ content: '';
146
+ position: absolute;
147
+ inset: calc(-1 * var(--_widget-border-width));
148
+ border: var(--_widget-border-width) solid var(--_widget-border-color);
149
+ border-radius: calc(var(--_widget-border-radius) + var(--_widget-border-width));
150
+ pointer-events: none;
150
151
  }
151
152
 
152
153
  /* Widget states */
153
154
 
154
155
  :host([editable]) {
155
- --_shadow: var(--_vaadin-dashboard-widget-editable-shadow);
156
+ --vaadin-dashboard-widget-shadow: var(--_widget-editable-shadow);
157
+ --_widget-border-color: var(--lumo-contrast-20pct);
158
+ --_widget-border-width: 1px;
156
159
  }
157
160
 
158
- :host([focused]) {
159
- --_border-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
161
+ :host([focused])::before {
162
+ border-width: var(--_focus-ring-width);
163
+ border-color: var(--_focus-ring-color);
160
164
  }
161
165
 
162
166
  :host([selected]) {
163
- --_shadow: var(--_vaadin-dashboard-widget-selected-shadow);
167
+ --vaadin-dashboard-widget-shadow: var(--_widget-selected-shadow);
164
168
  background: var(--lumo-primary-color-10pct);
165
169
  }
166
170
 
167
171
  :host([dragging]) {
168
172
  box-shadow: none;
169
- background: var(--_vaadin-dashboard-drop-target-background-color);
170
- border: var(--_vaadin-dashboard-drop-target-border);
173
+ background: var(--_drop-target-background-color);
174
+ border: var(--_drop-target-border);
171
175
  }
172
176
 
173
177
  :host([resizing])::after {
174
- background: var(--_vaadin-dashboard-drop-target-background-color);
175
- border: var(--_vaadin-dashboard-drop-target-border);
178
+ background: var(--_drop-target-background-color);
179
+ border: var(--_drop-target-border);
176
180
  }
177
181
 
178
182
  /* Widget parts */
179
183
 
180
184
  header {
181
185
  min-height: var(--lumo-size-l);
182
- padding: 0 var(--lumo-space-m);
183
- border-bottom: 1px solid var(--lumo-contrast-10pct);
186
+ padding: var(--lumo-space-xs) var(--lumo-space-m);
184
187
  }
185
188
 
186
189
  :host([editable]) header {
@@ -194,7 +197,16 @@ const dashboardWidget = css`
194
197
 
195
198
  #content {
196
199
  min-height: var(--lumo-size-m);
197
- padding: var(--lumo-space-s);
200
+ padding: var(--vaadin-dashboard-widget-padding, 0);
201
+ padding-top: 0;
202
+ border-radius: inherit;
203
+ border-top-left-radius: 0;
204
+ border-top-right-radius: 0;
205
+ overflow: hidden;
206
+ }
207
+
208
+ ::slotted([slot='header-content']) {
209
+ align-self: center;
198
210
  }
199
211
 
200
212
  :host([resize-mode]) #content,
@@ -206,7 +218,7 @@ const dashboardWidget = css`
206
218
  /* Resize handle */
207
219
 
208
220
  [part~='resize-button'] {
209
- --_resize-button-offset: min(var(--_vaadin-dashboard-gap), var(--_vaadin-dashboard-padding), var(--lumo-space-xs));
221
+ --_resize-button-offset: min(var(--_gap), var(--_padding), var(--lumo-space-xs));
210
222
  position: absolute;
211
223
  bottom: calc(-1 * var(--_resize-button-offset));
212
224
  inset-inline-end: calc(-1 * var(--_resize-button-offset));
package/theme/lumo/vaadin-dashboard.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import './vaadin-dashboard-widget.js';
2
1
  import './vaadin-dashboard-section.js';
2
+ import './vaadin-dashboard-widget.js';
3
3
  import './vaadin-dashboard-styles.js';
4
4
  import '../../src/vaadin-dashboard.js';
package/theme/lumo/vaadin-dashboard.js CHANGED
@@ -1,4 +1,4 @@
1
- import './vaadin-dashboard-widget.js';
2
1
  import './vaadin-dashboard-section.js';
2
+ import './vaadin-dashboard-widget.js';
3
3
  import './vaadin-dashboard-styles.js';
4
4
  import '../../src/vaadin-dashboard.js';
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/dashboard",
4
- "version": "24.8.0-alpha9",
4
+ "version": "25.0.0-alpha1",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -92,7 +92,7 @@
92
92
  },
93
93
  {
94
94
  "name": "vaadin-dashboard-widget",
95
- "description": "A Widget component for use with the Dashboard component\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n-----------------|-------------\n`header-content` | A slot for the widget header content.\n\n#### Example\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------------------|-------------\n`header` | The header of the widget\n`title` | The title of the widget\n`content` | The content of the widget\n`move-button` | The move button\n`remove-button` | The remove button\n`resize-button` | The resize button\n`move-backward-button` | The move backward button when in move mode\n`move-forward-button` | The move forward button when in move mode\n`move-apply-button` | The apply button when in move mode\n`resize-shrink-width-button` | The shrink width button when in resize mode\n`resize-grow-width-button` | The grow width button when in resize mode\n`resize-shrink-height-button` | The shrink height button when in resize mode\n`resize-grow-height-button` | The grow height button when in resize mode\n`resize-apply-button` | The apply button when in resize mode\n\nThe following custom properties are available:\n\nCustom Property | Description\n----------------------------------|-------------\n`--vaadin-dashboard-item-colspan` | colspan of the widget\n`--vaadin-dashboard-item-rowspan` | rowspan of the widget\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`selected` | Set when the element is selected.\n`focused` | Set when the element is focused.\n`move-mode` | Set when the element is being moved.\n`resize-mode` | Set when the element is being resized.\n`resizing` | Set when the element is being resized.\n`dragging` | Set when the element is being dragged.\n`editable` | Set when the element is editable.\n`first-child` | Set when the element is the first child of the parent.\n`last-child` | Set when the element is the last child of the parent.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
95
+ "description": "A Widget component for use with the Dashboard component\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n-----------------|-------------\n`header-content` | A slot for the widget header content.\n\n#### Example\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------------------|-------------\n`header` | The header of the widget\n`title` | The title of the widget\n`content` | The content of the widget\n`move-button` | The move button\n`remove-button` | The remove button\n`resize-button` | The resize button\n`move-backward-button` | The move backward button when in move mode\n`move-forward-button` | The move forward button when in move mode\n`move-apply-button` | The apply button when in move mode\n`resize-shrink-width-button` | The shrink width button when in resize mode\n`resize-grow-width-button` | The grow width button when in resize mode\n`resize-shrink-height-button` | The shrink height button when in resize mode\n`resize-grow-height-button` | The grow height button when in resize mode\n`resize-apply-button` | The apply button when in resize mode\n\nThe following custom properties are available:\n\nCustom Property | Description\n--------------------------------------------|----------------------\n`--vaadin-dashboard-widget-colspan` | colspan of the widget\n`--vaadin-dashboard-widget-rowspan` | rowspan of the widget\n`--vaadin-dashboard-widget-background` | widget background\n`--vaadin-dashboard-widget-border-radius` | widget corner radius\n`--vaadin-dashboard-widget-border-width` | widget border width\n`--vaadin-dashboard-widget-border-color` | widget border color\n`--vaadin-dashboard-widget-shadow` | widget shadow (non edit mode)\n`--vaadin-dashboard-widget-padding` | padding around widget content\n`--vaadin-dashboard-widget-title-wrap` | widget title wrap\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`selected` | Set when the element is selected.\n`focused` | Set when the element is focused.\n`move-mode` | Set when the element is being moved.\n`resize-mode` | Set when the element is being resized.\n`resizing` | Set when the element is being resized.\n`dragging` | Set when the element is being dragged.\n`editable` | Set when the element is editable.\n`first-child` | Set when the element is the first child of the parent.\n`last-child` | Set when the element is the last child of the parent.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
96
96
  "attributes": [
97
97
  {
98
98
  "name": "widget-title",
@@ -136,7 +136,7 @@
136
136
  },
137
137
  {
138
138
  "name": "vaadin-dashboard",
139
- "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n {\n title: 'Section title',\n items: [{ title: 'Widget in section title', content: 'Text 3' }]\n },\n // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n if (!root.contains(widget)) {\n root.appendChild(widget);\n }\n widget.widgetTitle = item.title;\n widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width` | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width` | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count` | maximum column count of the dashboard\n`--vaadin-dashboard-gap` | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding` | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|-------------\n`editable` | Set when the dashboard is editable.\n`dense-layout` | Set when the dashboard is in dense mode.\n`item-selected` | Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
139
+ "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n {\n title: 'Section title',\n items: [{ title: 'Widget in section title', content: 'Text 3' }]\n },\n // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n if (!root.contains(widget)) {\n root.appendChild(widget);\n }\n widget.widgetTitle = item.title;\n widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width` | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width` | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count` | maximum column count of the dashboard\n`--vaadin-dashboard-gap` | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding` | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|-------------\n`editable` | Set when the dashboard is editable.\n`dense-layout` | Set when the dashboard is in dense mode.\n`item-selected` | Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
140
140
  "attributes": [
141
141
  {
142
142
  "name": "dense-layout",
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/dashboard",
4
- "version": "24.8.0-alpha9",
4
+ "version": "25.0.0-alpha1",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -44,7 +44,7 @@
44
44
  },
45
45
  {
46
46
  "name": "vaadin-dashboard-widget",
47
- "description": "A Widget component for use with the Dashboard component\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n-----------------|-------------\n`header-content` | A slot for the widget header content.\n\n#### Example\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------------------|-------------\n`header` | The header of the widget\n`title` | The title of the widget\n`content` | The content of the widget\n`move-button` | The move button\n`remove-button` | The remove button\n`resize-button` | The resize button\n`move-backward-button` | The move backward button when in move mode\n`move-forward-button` | The move forward button when in move mode\n`move-apply-button` | The apply button when in move mode\n`resize-shrink-width-button` | The shrink width button when in resize mode\n`resize-grow-width-button` | The grow width button when in resize mode\n`resize-shrink-height-button` | The shrink height button when in resize mode\n`resize-grow-height-button` | The grow height button when in resize mode\n`resize-apply-button` | The apply button when in resize mode\n\nThe following custom properties are available:\n\nCustom Property | Description\n----------------------------------|-------------\n`--vaadin-dashboard-item-colspan` | colspan of the widget\n`--vaadin-dashboard-item-rowspan` | rowspan of the widget\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`selected` | Set when the element is selected.\n`focused` | Set when the element is focused.\n`move-mode` | Set when the element is being moved.\n`resize-mode` | Set when the element is being resized.\n`resizing` | Set when the element is being resized.\n`dragging` | Set when the element is being dragged.\n`editable` | Set when the element is editable.\n`first-child` | Set when the element is the first child of the parent.\n`last-child` | Set when the element is the last child of the parent.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
47
+ "description": "A Widget component for use with the Dashboard component\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n-----------------|-------------\n`header-content` | A slot for the widget header content.\n\n#### Example\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n <span slot=\"header-content\">Header</span>\n <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------------------|-------------\n`header` | The header of the widget\n`title` | The title of the widget\n`content` | The content of the widget\n`move-button` | The move button\n`remove-button` | The remove button\n`resize-button` | The resize button\n`move-backward-button` | The move backward button when in move mode\n`move-forward-button` | The move forward button when in move mode\n`move-apply-button` | The apply button when in move mode\n`resize-shrink-width-button` | The shrink width button when in resize mode\n`resize-grow-width-button` | The grow width button when in resize mode\n`resize-shrink-height-button` | The shrink height button when in resize mode\n`resize-grow-height-button` | The grow height button when in resize mode\n`resize-apply-button` | The apply button when in resize mode\n\nThe following custom properties are available:\n\nCustom Property | Description\n--------------------------------------------|----------------------\n`--vaadin-dashboard-widget-colspan` | colspan of the widget\n`--vaadin-dashboard-widget-rowspan` | rowspan of the widget\n`--vaadin-dashboard-widget-background` | widget background\n`--vaadin-dashboard-widget-border-radius` | widget corner radius\n`--vaadin-dashboard-widget-border-width` | widget border width\n`--vaadin-dashboard-widget-border-color` | widget border color\n`--vaadin-dashboard-widget-shadow` | widget shadow (non edit mode)\n`--vaadin-dashboard-widget-padding` | padding around widget content\n`--vaadin-dashboard-widget-title-wrap` | widget title wrap\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`selected` | Set when the element is selected.\n`focused` | Set when the element is focused.\n`move-mode` | Set when the element is being moved.\n`resize-mode` | Set when the element is being resized.\n`resizing` | Set when the element is being resized.\n`dragging` | Set when the element is being dragged.\n`editable` | Set when the element is editable.\n`first-child` | Set when the element is the first child of the parent.\n`last-child` | Set when the element is the last child of the parent.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
48
48
  "extension": true,
49
49
  "attributes": [
50
50
  {
@@ -58,7 +58,7 @@
58
58
  },
59
59
  {
60
60
  "name": "vaadin-dashboard",
61
- "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n {\n title: 'Section title',\n items: [{ title: 'Widget in section title', content: 'Text 3' }]\n },\n // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n if (!root.contains(widget)) {\n root.appendChild(widget);\n }\n widget.widgetTitle = item.title;\n widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width` | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width` | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count` | maximum column count of the dashboard\n`--vaadin-dashboard-gap` | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding` | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|-------------\n`editable` | Set when the dashboard is editable.\n`dense-layout` | Set when the dashboard is in dense mode.\n`item-selected` | Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
61
+ "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n {\n title: 'Section title',\n items: [{ title: 'Widget in section title', content: 'Text 3' }]\n },\n // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n if (!root.contains(widget)) {\n root.appendChild(widget);\n }\n widget.widgetTitle = item.title;\n widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width` | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width` | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count` | maximum column count of the dashboard\n`--vaadin-dashboard-gap` | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding` | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|-------------\n`editable` | Set when the dashboard is editable.\n`dense-layout` | Set when the dashboard is in dense mode.\n`item-selected` | Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
62
62
  "extension": true,
63
63
  "attributes": [
64
64
  {
package/theme/material/vaadin-dashboard-layout.d.ts DELETED
@@ -1 +0,0 @@
1
- import '../../src/vaadin-dashboard-layout.js';
package/theme/material/vaadin-dashboard-layout.js DELETED
@@ -1 +0,0 @@
1
- import '../../src/vaadin-dashboard-layout.js';
package/theme/material/vaadin-dashboard-section.d.ts DELETED
@@ -1 +0,0 @@
1
- import '../../src/vaadin-dashboard-section.js';
package/theme/material/vaadin-dashboard-section.js DELETED
@@ -1 +0,0 @@
1
- import '../../src/vaadin-dashboard-section.js';
package/theme/material/vaadin-dashboard-widget.d.ts DELETED
@@ -1 +0,0 @@
1
- import '../../src/vaadin-dashboard-widget.js';
package/theme/material/vaadin-dashboard-widget.js DELETED
@@ -1 +0,0 @@
1
- import '../../src/vaadin-dashboard-widget.js';
package/theme/material/vaadin-dashboard.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import './vaadin-dashboard-widget.js';
2
- import './vaadin-dashboard-section.js';
3
- import '../../src/vaadin-dashboard.js';
package/theme/material/vaadin-dashboard.js DELETED
@@ -1,3 +0,0 @@
1
- import './vaadin-dashboard-widget.js';
2
- import './vaadin-dashboard-section.js';
3
- import '../../src/vaadin-dashboard.js';