@vaadin/dashboard 24.8.0-alpha8 → 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 (27) hide show
  1. package/package.json +8 -9
  2. package/src/vaadin-dashboard-button.js +15 -2
  3. package/src/vaadin-dashboard-helpers.js +28 -0
  4. package/src/vaadin-dashboard-item-mixin.js +5 -5
  5. package/src/vaadin-dashboard-layout-mixin.js +29 -46
  6. package/src/vaadin-dashboard-section.js +21 -21
  7. package/src/vaadin-dashboard-widget.d.ts +11 -4
  8. package/src/vaadin-dashboard-widget.js +49 -23
  9. package/src/vaadin-dashboard.d.ts +15 -5
  10. package/src/vaadin-dashboard.js +27 -10
  11. package/src/widget-resize-controller.js +5 -5
  12. package/theme/lumo/vaadin-dashboard-layout-styles.js +18 -2
  13. package/theme/lumo/vaadin-dashboard-section-styles.js +9 -6
  14. package/theme/lumo/vaadin-dashboard-styles.js +2 -2
  15. package/theme/lumo/vaadin-dashboard-widget-styles.js +54 -42
  16. package/theme/lumo/vaadin-dashboard.d.ts +1 -1
  17. package/theme/lumo/vaadin-dashboard.js +1 -1
  18. package/web-types.json +25 -3
  19. package/web-types.lit.json +10 -3
  20. package/theme/material/vaadin-dashboard-layout.d.ts +0 -1
  21. package/theme/material/vaadin-dashboard-layout.js +0 -1
  22. package/theme/material/vaadin-dashboard-section.d.ts +0 -1
  23. package/theme/material/vaadin-dashboard-section.js +0 -1
  24. package/theme/material/vaadin-dashboard-widget.d.ts +0 -1
  25. package/theme/material/vaadin-dashboard-widget.js +0 -1
  26. package/theme/material/vaadin-dashboard.d.ts +0 -3
  27. 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-alpha8",
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-alpha8",
41
- "@vaadin/component-base": "24.8.0-alpha8",
42
- "@vaadin/vaadin-lumo-styles": "24.8.0-alpha8",
43
- "@vaadin/vaadin-material-styles": "24.8.0-alpha8",
44
- "@vaadin/vaadin-themable-mixin": "24.8.0-alpha8",
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-alpha8",
49
- "@vaadin/test-runner-commands": "24.8.0-alpha8",
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": "d914bb8f669d7e3d1981feb8eac05688ab9870b4"
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-helpers.js CHANGED
@@ -101,3 +101,31 @@ export function fireResize(element, colspanDelta, rowspanDelta) {
101
101
  export function fireRemove(element) {
102
102
  element.dispatchEvent(new CustomEvent('item-remove', { bubbles: true }));
103
103
  }
104
+
105
+ /**
106
+ * Walks up the DOM tree starting from `node`, returning the first ancestor which is an instance of the given `baseClass`.
107
+ *
108
+ * @param {Node} node - starting node
109
+ * @param {Function} baseClass - constructor, e.g. `Dashboard`
110
+ * @returns {HTMLElement | null}
111
+ */
112
+ export function findAncestorInstance(node, baseClass) {
113
+ while (node) {
114
+ if (node instanceof baseClass) {
115
+ return node;
116
+ }
117
+ if (node instanceof ShadowRoot) {
118
+ node = node.host;
119
+ } else {
120
+ const rootNode = node.getRootNode();
121
+ if (rootNode instanceof ShadowRoot) {
122
+ node = rootNode.host;
123
+ } else if (node.parentNode) {
124
+ node = node.parentNode;
125
+ } else {
126
+ node = null;
127
+ }
128
+ }
129
+ }
130
+ return null;
131
+ }
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,20 +99,16 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
102
99
  }
103
100
 
104
101
  ::slotted(*) {
105
- --_vaadin-dashboard-title-level: 3;
106
- --_vaadin-dashboard-item-column: span
107
- min(
108
- var(--vaadin-dashboard-item-colspan, 1),
109
- var(--_vaadin-dashboard-effective-col-count, var(--_vaadin-dashboard-col-count))
110
- );
111
-
112
- grid-column: var(--_vaadin-dashboard-item-column);
113
- --_vaadin-dashboard-item-row: span var(--vaadin-dashboard-item-rowspan, 1);
114
- 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);
115
108
  }
116
109
 
117
110
  header {
118
- grid-column: var(--_vaadin-dashboard-section-column);
111
+ grid-column: var(--_section-column);
119
112
  }
120
113
 
121
114
  :host::before {
@@ -166,6 +159,11 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
166
159
  value: '',
167
160
  },
168
161
 
162
+ /* @private */
163
+ __rootHeadingLevel: {
164
+ type: Number,
165
+ },
166
+
169
167
  /** @private */
170
168
  __childCount: {
171
169
  type: Number,
@@ -184,7 +182,9 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
184
182
 
185
183
  <header part="header">
186
184
  ${this.__renderDragHandle()}
187
- <h2 id="title" part="title">${this.sectionTitle}</h2>
185
+ <div id="title" role="heading" aria-level=${this.__rootHeadingLevel || 2} part="title"
186
+ >${this.sectionTitle}</div
187
+ >
188
188
  ${this.__renderRemoveButton()}
189
189
  </header>
190
190
  </div>
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
@@ -13,9 +13,10 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
13
13
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
14
14
  import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
15
15
  import { css, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
16
- import { SYNCHRONIZED_ATTRIBUTES, WRAPPER_LOCAL_NAME } from './vaadin-dashboard-helpers.js';
16
+ import { findAncestorInstance, SYNCHRONIZED_ATTRIBUTES, WRAPPER_LOCAL_NAME } from './vaadin-dashboard-helpers.js';
17
17
  import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
18
18
  import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
19
+ import { DashboardSection } from './vaadin-dashboard-section.js';
19
20
 
20
21
  /**
21
22
  * A Widget component for use with the Dashboard component
@@ -67,10 +68,17 @@ import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
67
68
  *
68
69
  * The following custom properties are available:
69
70
  *
70
- * Custom Property | Description
71
- * ----------------------------------|-------------
72
- * `--vaadin-dashboard-item-colspan` | colspan of the widget
73
- * `--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
74
82
  *
75
83
  * The following state attributes are available for styling:
76
84
  *
@@ -109,8 +117,8 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
109
117
  :host {
110
118
  display: flex;
111
119
  flex-direction: column;
112
- grid-column: var(--_vaadin-dashboard-item-column);
113
- grid-row: var(--_vaadin-dashboard-item-row);
120
+ grid-column: var(--_item-column);
121
+ grid-row: var(--_item-row);
114
122
  position: relative;
115
123
  }
116
124
 
@@ -140,8 +148,8 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
140
148
  z-index: 2;
141
149
  position: absolute;
142
150
  top: -1px;
143
- width: var(--_vaadin-dashboard-widget-resizer-width, 0);
144
- height: var(--_vaadin-dashboard-widget-resizer-height, 0);
151
+ width: var(--_widget-resizer-width, 0);
152
+ height: var(--_widget-resizer-height, 0);
145
153
  background: rgba(0, 0, 0, 0.1);
146
154
  border-radius: inherit;
147
155
  }
@@ -193,11 +201,15 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
193
201
  widgetTitle: {
194
202
  type: String,
195
203
  value: '',
196
- observer: '__onWidgetTitleChanged',
197
204
  },
198
205
 
199
206
  /* @private */
200
- __nestedHeadingLevel: {
207
+ __rootHeadingLevel: {
208
+ type: Number,
209
+ },
210
+
211
+ /* @private */
212
+ __isNestedWidget: {
201
213
  type: Boolean,
202
214
  value: false,
203
215
  },
@@ -213,10 +225,7 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
213
225
  ${this.__renderFocusButton('selectWidget')}
214
226
 
215
227
  <header part="header">
216
- ${this.__renderDragHandle()}
217
- ${this.__nestedHeadingLevel
218
- ? html`<h3 id="title" part="title" .hidden=${!this.widgetTitle}>${this.widgetTitle}</h3>`
219
- : html`<h2 id="title" part="title" .hidden=${!this.widgetTitle}>${this.widgetTitle}</h2>`}
228
+ ${this.__renderDragHandle()} ${this.__renderWidgetTitle()}
220
229
  <slot name="header-content"></slot>
221
230
  ${this.__renderRemoveButton()}
222
231
  </header>
@@ -240,13 +249,15 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
240
249
  this.toggleAttribute(attr, !!wrapper[attr]);
241
250
  });
242
251
  this.__i18n = wrapper.i18n;
252
+ this.__rootHeadingLevel = wrapper.__rootHeadingLevel;
243
253
  }
244
254
 
255
+ this.__updateNestedState();
245
256
  const undefinedAncestor = this.closest('*:not(:defined)');
246
257
  if (undefinedAncestor) {
247
- customElements.whenDefined(undefinedAncestor.localName).then(() => queueMicrotask(() => this.__updateTitle()));
248
- } else {
249
- this.__updateTitle();
258
+ customElements.whenDefined(undefinedAncestor.localName).then(() => {
259
+ queueMicrotask(() => this.__updateNestedState());
260
+ });
250
261
  }
251
262
  }
252
263
 
@@ -259,14 +270,29 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
259
270
  }
260
271
 
261
272
  /** @private */
262
- __onWidgetTitleChanged() {
263
- this.__updateTitle();
273
+ __renderWidgetTitle() {
274
+ let effectiveHeadingLevel = this.__rootHeadingLevel;
275
+ // Default to 2 if not defined
276
+ if (effectiveHeadingLevel == null) {
277
+ effectiveHeadingLevel = 2;
278
+ }
279
+ // Increase level by 1 for widgets in sections
280
+ if (this.__isNestedWidget) {
281
+ effectiveHeadingLevel += 1;
282
+ }
283
+ return html`<div
284
+ id="title"
285
+ part="title"
286
+ role="heading"
287
+ aria-level=${effectiveHeadingLevel}
288
+ .hidden=${!this.widgetTitle}
289
+ >${this.widgetTitle}</div
290
+ >`;
264
291
  }
265
292
 
266
293
  /** @private */
267
- __updateTitle() {
268
- const titleLevel = getComputedStyle(this).getPropertyValue('--_vaadin-dashboard-title-level');
269
- this.__nestedHeadingLevel = titleLevel === '3';
294
+ __updateNestedState() {
295
+ this.__isNestedWidget = !!findAncestorInstance(this, DashboardSection);
270
296
  }
271
297
  }
272
298
 
package/src/vaadin-dashboard.d.ts CHANGED
@@ -202,11 +202,11 @@ export interface DashboardI18n {
202
202
  *
203
203
  * The following state attributes are available for styling:
204
204
  *
205
- * Attribute | Description
206
- * ---------------|-------------
207
- * `editable` | Set when the dashboard is editable.
208
- * `dense-layout` | Set when the dashboard is in dense mode.
209
- * `item-selected`| Set when an item is selected.
205
+ * Attribute | Description
206
+ * ---------------------|-------------
207
+ * `editable` | Set when the dashboard is editable.
208
+ * `dense-layout` | Set when the dashboard is in dense mode.
209
+ * `item-selected` | Set when an item is selected.
210
210
  *
211
211
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
212
212
  *
@@ -243,6 +243,16 @@ declare class Dashboard<TItem extends DashboardItem = DashboardItem> extends Das
243
243
  */
244
244
  editable: boolean;
245
245
 
246
+ /**
247
+ * Root heading level for sections and widgets. Defaults to 2.
248
+ *
249
+ * If changed to e.g. 1:
250
+ * - sections will have the attribute `aria-level` with value 1
251
+ * - non-nested widgets will have the attribute `aria-level` with value 1
252
+ * - nested widgets will have the attribute `aria-level` with value 2
253
+ */
254
+ rootHeadingLevel: number | null | undefined;
255
+
246
256
  /**
247
257
  * The object used to localize this component. To change the default
248
258
  * localization, replace this with an object that provides all properties, or
package/src/vaadin-dashboard.js CHANGED
@@ -82,11 +82,11 @@ import { WidgetResizeController } from './widget-resize-controller.js';
82
82
  *
83
83
  * The following state attributes are available for styling:
84
84
  *
85
- * Attribute | Description
86
- * ---------------|-------------
87
- * `editable` | Set when the dashboard is editable.
88
- * `dense-layout` | Set when the dashboard is in dense mode.
89
- * `item-selected`| Set when an item is selected.
85
+ * Attribute | Description
86
+ * ---------------------|-------------
87
+ * `editable` | Set when the dashboard is editable.
88
+ * `dense-layout` | Set when the dashboard is in dense mode.
89
+ * `item-selected` | Set when an item is selected.
90
90
  *
91
91
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
92
92
  *
@@ -166,6 +166,20 @@ class Dashboard extends DashboardLayoutMixin(
166
166
  type: Boolean,
167
167
  },
168
168
 
169
+ /**
170
+ * Root heading level for sections and widgets. Defaults to 2.
171
+ *
172
+ * If changed to e.g. 1:
173
+ * - sections will have the attribute `aria-level` with value 1
174
+ * - non-nested widgets will have the attribute `aria-level` with value 1
175
+ * - nested widgets will have the attribute `aria-level` with value 2
176
+ */
177
+ rootHeadingLevel: {
178
+ type: Number,
179
+ value: 2,
180
+ sync: true,
181
+ },
182
+
169
183
  /** @private */
170
184
  __childCount: {
171
185
  type: Number,
@@ -175,7 +189,7 @@ class Dashboard extends DashboardLayoutMixin(
175
189
  }
176
190
 
177
191
  static get observers() {
178
- return ['__itemsOrRendererChanged(items, renderer, editable, __effectiveI18n)'];
192
+ return ['__itemsOrRendererChanged(items, renderer, editable, __effectiveI18n, rootHeadingLevel)'];
179
193
  }
180
194
 
181
195
  /**
@@ -261,6 +275,7 @@ class Dashboard extends DashboardLayoutMixin(
261
275
  wrapper.firstElementChild.toggleAttribute(attr, !!wrapper[attr]);
262
276
  });
263
277
  wrapper.firstElementChild.__i18n = this.__effectiveI18n;
278
+ wrapper.firstElementChild.__rootHeadingLevel = this.rootHeadingLevel;
264
279
  }
265
280
  });
266
281
  }
@@ -304,6 +319,7 @@ class Dashboard extends DashboardLayoutMixin(
304
319
 
305
320
  SYNCHRONIZED_ATTRIBUTES.forEach((attr) => section.toggleAttribute(attr, !!wrapper[attr]));
306
321
  section.__i18n = this.__effectiveI18n;
322
+ section.__rootHeadingLevel = this.rootHeadingLevel;
307
323
 
308
324
  // Render the subitems
309
325
  section.__childCount = item.items.length;
@@ -417,8 +433,8 @@ class Dashboard extends DashboardLayoutMixin(
417
433
  /** @private */
418
434
  __updateWrapper(wrapper, item) {
419
435
  const style = `
420
- ${item.colspan ? `--vaadin-dashboard-item-colspan: ${item.colspan};` : ''}
421
- ${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};` : ''}
422
438
  `.trim();
423
439
 
424
440
  wrapper.__item = item;
@@ -428,6 +444,7 @@ class Dashboard extends DashboardLayoutMixin(
428
444
  wrapper['first-child'] = item === getItemsArrayOfItem(item, this.items)[0];
429
445
  wrapper['last-child'] = item === getItemsArrayOfItem(item, this.items).slice(-1)[0];
430
446
  wrapper.i18n = this.__effectiveI18n;
447
+ wrapper.__rootHeadingLevel = this.rootHeadingLevel;
431
448
  }
432
449
 
433
450
  /** @private */
@@ -481,11 +498,11 @@ class Dashboard extends DashboardLayoutMixin(
481
498
  * @private
482
499
  */
483
500
  __updateColumnCount() {
484
- const previousColumnCount = this.$.grid.style.getPropertyValue('--_vaadin-dashboard-col-count');
501
+ const previousColumnCount = this.$.grid.style.getPropertyValue('--_col-count');
485
502
  super.__updateColumnCount();
486
503
 
487
504
  // Request update for all the widgets if the column count has changed on resize
488
- if (previousColumnCount !== this.$.grid.style.getPropertyValue('--_vaadin-dashboard-col-count')) {
505
+ if (previousColumnCount !== this.$.grid.style.getPropertyValue('--_col-count')) {
489
506
  this.querySelectorAll(WRAPPER_LOCAL_NAME).forEach((wrapper) => {
490
507
  if (wrapper.firstElementChild && 'requestUpdate' in wrapper.firstElementChild) {
491
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-alpha8",
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-alpha8/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha8/#/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",
@@ -167,6 +167,17 @@
167
167
  ]
168
168
  }
169
169
  },
170
+ {
171
+ "name": "root-heading-level",
172
+ "description": "Root heading level for sections and widgets. Defaults to 2.\n\nIf changed to e.g. 1:\n- sections will have the attribute `aria-level` with value 1\n- non-nested widgets will have the attribute `aria-level` with value 1\n- nested widgets will have the attribute `aria-level` with value 2",
173
+ "value": {
174
+ "type": [
175
+ "number",
176
+ "null",
177
+ "undefined"
178
+ ]
179
+ }
180
+ },
170
181
  {
171
182
  "name": "theme",
172
183
  "description": "The theme variants to apply to the component.",
@@ -231,6 +242,17 @@
231
242
  "undefined"
232
243
  ]
233
244
  }
245
+ },
246
+ {
247
+ "name": "rootHeadingLevel",
248
+ "description": "Root heading level for sections and widgets. Defaults to 2.\n\nIf changed to e.g. 1:\n- sections will have the attribute `aria-level` with value 1\n- non-nested widgets will have the attribute `aria-level` with value 1\n- nested widgets will have the attribute `aria-level` with value 2",
249
+ "value": {
250
+ "type": [
251
+ "number",
252
+ "null",
253
+ "undefined"
254
+ ]
255
+ }
234
256
  }
235
257
  ],
236
258
  "events": [
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-alpha8",
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-alpha8/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha8/#/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
  {
@@ -96,6 +96,13 @@
96
96
  "kind": "expression"
97
97
  }
98
98
  },
99
+ {
100
+ "name": ".rootHeadingLevel",
101
+ "description": "Root heading level for sections and widgets. Defaults to 2.\n\nIf changed to e.g. 1:\n- sections will have the attribute `aria-level` with value 1\n- non-nested widgets will have the attribute `aria-level` with value 1\n- nested widgets will have the attribute `aria-level` with value 2",
102
+ "value": {
103
+ "kind": "expression"
104
+ }
105
+ },
99
106
  {
100
107
  "name": "@dashboard-item-move-mode-changed",
101
108
  "description": "Fired when an item move mode changed",
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';