@vaadin/dashboard 24.8.0-alpha8 → 24.8.0-beta1

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 (23) hide show
  1. package/README.md +0 -2
  2. package/package.json +9 -9
  3. package/src/vaadin-dashboard-button.js +15 -6
  4. package/src/vaadin-dashboard-helpers.js +28 -0
  5. package/src/vaadin-dashboard-item-mixin.js +5 -5
  6. package/src/vaadin-dashboard-layout-mixin.js +29 -46
  7. package/src/vaadin-dashboard-layout.js +0 -4
  8. package/src/vaadin-dashboard-section.js +21 -25
  9. package/src/vaadin-dashboard-widget.d.ts +11 -4
  10. package/src/vaadin-dashboard-widget.js +49 -27
  11. package/src/vaadin-dashboard.d.ts +15 -5
  12. package/src/vaadin-dashboard.js +27 -14
  13. package/src/widget-resize-controller.js +5 -5
  14. package/theme/lumo/vaadin-dashboard-layout-styles.js +18 -2
  15. package/theme/lumo/vaadin-dashboard-section-styles.js +9 -6
  16. package/theme/lumo/vaadin-dashboard-styles.js +2 -2
  17. package/theme/lumo/vaadin-dashboard-widget-styles.js +54 -42
  18. package/theme/lumo/vaadin-dashboard.d.ts +1 -1
  19. package/theme/lumo/vaadin-dashboard.js +1 -1
  20. package/theme/material/vaadin-dashboard.d.ts +1 -1
  21. package/theme/material/vaadin-dashboard.js +1 -1
  22. package/web-types.json +25 -3
  23. package/web-types.lit.json +10 -3
package/README.md CHANGED
@@ -2,8 +2,6 @@
2
2
 
3
3
  A responsive, grid-based dashboard layout component
4
4
 
5
- > ⚠️ This component is experimental and the API may change. In order to use it, enable the feature flag by setting `window.Vaadin.featureFlags.dashboardComponent = true`.
6
-
7
5
  > ℹ️  A commercial Vaadin [subscription](https://vaadin.com/pricing) is required to use Dashboard in your project.
8
6
 
9
7
  [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/dashboard)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/dashboard",
3
- "version": "24.8.0-alpha8",
3
+ "version": "24.8.0-beta1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -37,16 +37,16 @@
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": "24.8.0-beta1",
41
+ "@vaadin/component-base": "24.8.0-beta1",
42
+ "@vaadin/vaadin-lumo-styles": "24.8.0-beta1",
43
+ "@vaadin/vaadin-material-styles": "24.8.0-beta1",
44
+ "@vaadin/vaadin-themable-mixin": "24.8.0-beta1",
45
45
  "lit": "^3.0.0"
46
46
  },
47
47
  "devDependencies": {
48
- "@vaadin/chai-plugins": "24.8.0-alpha8",
49
- "@vaadin/test-runner-commands": "24.8.0-alpha8",
48
+ "@vaadin/chai-plugins": "24.8.0-beta1",
49
+ "@vaadin/test-runner-commands": "24.8.0-beta1",
50
50
  "@vaadin/testing-helpers": "^1.1.0"
51
51
  },
52
52
  "cvdlName": "vaadin-dashboard",
@@ -54,5 +54,5 @@
54
54
  "web-types.json",
55
55
  "web-types.lit.json"
56
56
  ],
57
- "gitHead": "d914bb8f669d7e3d1981feb8eac05688ab9870b4"
57
+ "gitHead": "57ce3a90de99e49049312b0ba4041d3e7542e9d8"
58
58
  }
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';
@@ -22,17 +22,26 @@ class DashboardButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixi
22
22
  return 'vaadin-dashboard-button';
23
23
  }
24
24
 
25
- static get experimental() {
26
- return 'dashboardComponent';
27
- }
28
-
29
25
  static get styles() {
30
26
  return buttonStyles;
31
27
  }
32
28
 
33
29
  /** @protected */
34
30
  render() {
35
- return buttonTemplate(html);
31
+ return html`
32
+ <div class="vaadin-button-container">
33
+ <span part="prefix" aria-hidden="true">
34
+ <slot name="prefix"></slot>
35
+ </span>
36
+ <span part="label">
37
+ <slot></slot>
38
+ </span>
39
+ <span part="suffix" aria-hidden="true">
40
+ <slot name="suffix"></slot>
41
+ </span>
42
+ </div>
43
+ <slot name="tooltip"></slot>
44
+ `;
36
45
  }
37
46
 
38
47
  /** @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-layout.js CHANGED
@@ -60,10 +60,6 @@ class DashboardLayout extends DashboardLayoutMixin(ElementMixin(ThemableMixin(Po
60
60
  return 'vaadin-dashboard-layout';
61
61
  }
62
62
 
63
- static get experimental() {
64
- return 'dashboardComponent';
65
- }
66
-
67
63
  static get cvdlName() {
68
64
  return 'vaadin-dashboard';
69
65
  }
package/src/vaadin-dashboard-section.js CHANGED
@@ -74,10 +74,6 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
74
74
  return 'vaadin-dashboard-section';
75
75
  }
76
76
 
77
- static get experimental() {
78
- return 'dashboardComponent';
79
- }
80
-
81
77
  static get styles() {
82
78
  return [
83
79
  css`
@@ -85,16 +81,13 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
85
81
  display: grid;
86
82
  position: relative;
87
83
  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);
84
+ --_section-column: 1 / calc(var(--_effective-col-count) + 1);
85
+ grid-column: var(--_section-column) !important;
86
+ gap: var(--_gap, 1rem);
91
87
  /* 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);
88
+ --_section-header-height: minmax(0, auto);
89
+ grid-template-rows: var(--_section-header-height) repeat(auto-fill, var(--_row-height));
90
+ grid-auto-rows: var(--_row-height);
98
91
  }
99
92
 
100
93
  :host([hidden]) {
@@ -102,20 +95,16 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
102
95
  }
103
96
 
104
97
  ::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);
98
+ --_item-column: span
99
+ min(var(--vaadin-dashboard-widget-colspan, 1), var(--_effective-col-count, var(--_col-count)));
100
+
101
+ grid-column: var(--_item-column);
102
+ --_item-row: span var(--vaadin-dashboard-widget-rowspan, 1);
103
+ grid-row: var(--_item-row);
115
104
  }
116
105
 
117
106
  header {
118
- grid-column: var(--_vaadin-dashboard-section-column);
107
+ grid-column: var(--_section-column);
119
108
  }
120
109
 
121
110
  :host::before {
@@ -166,6 +155,11 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
166
155
  value: '',
167
156
  },
168
157
 
158
+ /* @private */
159
+ __rootHeadingLevel: {
160
+ type: Number,
161
+ },
162
+
169
163
  /** @private */
170
164
  __childCount: {
171
165
  type: Number,
@@ -184,7 +178,9 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
184
178
 
185
179
  <header part="header">
186
180
  ${this.__renderDragHandle()}
187
- <h2 id="title" part="title">${this.sectionTitle}</h2>
181
+ <div id="title" role="heading" aria-level=${this.__rootHeadingLevel || 2} part="title"
182
+ >${this.sectionTitle}</div
183
+ >
188
184
  ${this.__renderRemoveButton()}
189
185
  </header>
190
186
  </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
  *
@@ -99,18 +107,14 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
99
107
  return 'vaadin-dashboard-widget';
100
108
  }
101
109
 
102
- static get experimental() {
103
- return 'dashboardComponent';
104
- }
105
-
106
110
  static get styles() {
107
111
  return [
108
112
  css`
109
113
  :host {
110
114
  display: flex;
111
115
  flex-direction: column;
112
- grid-column: var(--_vaadin-dashboard-item-column);
113
- grid-row: var(--_vaadin-dashboard-item-row);
116
+ grid-column: var(--_item-column);
117
+ grid-row: var(--_item-row);
114
118
  position: relative;
115
119
  }
116
120
 
@@ -140,8 +144,8 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
140
144
  z-index: 2;
141
145
  position: absolute;
142
146
  top: -1px;
143
- width: var(--_vaadin-dashboard-widget-resizer-width, 0);
144
- height: var(--_vaadin-dashboard-widget-resizer-height, 0);
147
+ width: var(--_widget-resizer-width, 0);
148
+ height: var(--_widget-resizer-height, 0);
145
149
  background: rgba(0, 0, 0, 0.1);
146
150
  border-radius: inherit;
147
151
  }
@@ -193,11 +197,15 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
193
197
  widgetTitle: {
194
198
  type: String,
195
199
  value: '',
196
- observer: '__onWidgetTitleChanged',
197
200
  },
198
201
 
199
202
  /* @private */
200
- __nestedHeadingLevel: {
203
+ __rootHeadingLevel: {
204
+ type: Number,
205
+ },
206
+
207
+ /* @private */
208
+ __isNestedWidget: {
201
209
  type: Boolean,
202
210
  value: false,
203
211
  },
@@ -213,10 +221,7 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
213
221
  ${this.__renderFocusButton('selectWidget')}
214
222
 
215
223
  <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>`}
224
+ ${this.__renderDragHandle()} ${this.__renderWidgetTitle()}
220
225
  <slot name="header-content"></slot>
221
226
  ${this.__renderRemoveButton()}
222
227
  </header>
@@ -240,13 +245,15 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
240
245
  this.toggleAttribute(attr, !!wrapper[attr]);
241
246
  });
242
247
  this.__i18n = wrapper.i18n;
248
+ this.__rootHeadingLevel = wrapper.__rootHeadingLevel;
243
249
  }
244
250
 
251
+ this.__updateNestedState();
245
252
  const undefinedAncestor = this.closest('*:not(:defined)');
246
253
  if (undefinedAncestor) {
247
- customElements.whenDefined(undefinedAncestor.localName).then(() => queueMicrotask(() => this.__updateTitle()));
248
- } else {
249
- this.__updateTitle();
254
+ customElements.whenDefined(undefinedAncestor.localName).then(() => {
255
+ queueMicrotask(() => this.__updateNestedState());
256
+ });
250
257
  }
251
258
  }
252
259
 
@@ -259,14 +266,29 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
259
266
  }
260
267
 
261
268
  /** @private */
262
- __onWidgetTitleChanged() {
263
- this.__updateTitle();
269
+ __renderWidgetTitle() {
270
+ let effectiveHeadingLevel = this.__rootHeadingLevel;
271
+ // Default to 2 if not defined
272
+ if (effectiveHeadingLevel == null) {
273
+ effectiveHeadingLevel = 2;
274
+ }
275
+ // Increase level by 1 for widgets in sections
276
+ if (this.__isNestedWidget) {
277
+ effectiveHeadingLevel += 1;
278
+ }
279
+ return html`<div
280
+ id="title"
281
+ part="title"
282
+ role="heading"
283
+ aria-level=${effectiveHeadingLevel}
284
+ .hidden=${!this.widgetTitle}
285
+ >${this.widgetTitle}</div
286
+ >`;
264
287
  }
265
288
 
266
289
  /** @private */
267
- __updateTitle() {
268
- const titleLevel = getComputedStyle(this).getPropertyValue('--_vaadin-dashboard-title-level');
269
- this.__nestedHeadingLevel = titleLevel === '3';
290
+ __updateNestedState() {
291
+ this.__isNestedWidget = !!findAncestorInstance(this, DashboardSection);
270
292
  }
271
293
  }
272
294
 
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
  *
@@ -111,10 +111,6 @@ class Dashboard extends DashboardLayoutMixin(
111
111
  return 'vaadin-dashboard';
112
112
  }
113
113
 
114
- static get experimental() {
115
- return 'dashboardComponent';
116
- }
117
-
118
114
  static get cvdlName() {
119
115
  return 'vaadin-dashboard';
120
116
  }
@@ -166,6 +162,20 @@ class Dashboard extends DashboardLayoutMixin(
166
162
  type: Boolean,
167
163
  },
168
164
 
165
+ /**
166
+ * Root heading level for sections and widgets. Defaults to 2.
167
+ *
168
+ * If changed to e.g. 1:
169
+ * - sections will have the attribute `aria-level` with value 1
170
+ * - non-nested widgets will have the attribute `aria-level` with value 1
171
+ * - nested widgets will have the attribute `aria-level` with value 2
172
+ */
173
+ rootHeadingLevel: {
174
+ type: Number,
175
+ value: 2,
176
+ sync: true,
177
+ },
178
+
169
179
  /** @private */
170
180
  __childCount: {
171
181
  type: Number,
@@ -175,7 +185,7 @@ class Dashboard extends DashboardLayoutMixin(
175
185
  }
176
186
 
177
187
  static get observers() {
178
- return ['__itemsOrRendererChanged(items, renderer, editable, __effectiveI18n)'];
188
+ return ['__itemsOrRendererChanged(items, renderer, editable, __effectiveI18n, rootHeadingLevel)'];
179
189
  }
180
190
 
181
191
  /**
@@ -261,6 +271,7 @@ class Dashboard extends DashboardLayoutMixin(
261
271
  wrapper.firstElementChild.toggleAttribute(attr, !!wrapper[attr]);
262
272
  });
263
273
  wrapper.firstElementChild.__i18n = this.__effectiveI18n;
274
+ wrapper.firstElementChild.__rootHeadingLevel = this.rootHeadingLevel;
264
275
  }
265
276
  });
266
277
  }
@@ -304,6 +315,7 @@ class Dashboard extends DashboardLayoutMixin(
304
315
 
305
316
  SYNCHRONIZED_ATTRIBUTES.forEach((attr) => section.toggleAttribute(attr, !!wrapper[attr]));
306
317
  section.__i18n = this.__effectiveI18n;
318
+ section.__rootHeadingLevel = this.rootHeadingLevel;
307
319
 
308
320
  // Render the subitems
309
321
  section.__childCount = item.items.length;
@@ -417,8 +429,8 @@ class Dashboard extends DashboardLayoutMixin(
417
429
  /** @private */
418
430
  __updateWrapper(wrapper, item) {
419
431
  const style = `
420
- ${item.colspan ? `--vaadin-dashboard-item-colspan: ${item.colspan};` : ''}
421
- ${item.rowspan ? `--vaadin-dashboard-item-rowspan: ${item.rowspan};` : ''}
432
+ ${item.colspan ? `--vaadin-dashboard-widget-colspan: ${item.colspan};` : ''}
433
+ ${item.rowspan ? `--vaadin-dashboard-widget-rowspan: ${item.rowspan};` : ''}
422
434
  `.trim();
423
435
 
424
436
  wrapper.__item = item;
@@ -428,6 +440,7 @@ class Dashboard extends DashboardLayoutMixin(
428
440
  wrapper['first-child'] = item === getItemsArrayOfItem(item, this.items)[0];
429
441
  wrapper['last-child'] = item === getItemsArrayOfItem(item, this.items).slice(-1)[0];
430
442
  wrapper.i18n = this.__effectiveI18n;
443
+ wrapper.__rootHeadingLevel = this.rootHeadingLevel;
431
444
  }
432
445
 
433
446
  /** @private */
@@ -481,11 +494,11 @@ class Dashboard extends DashboardLayoutMixin(
481
494
  * @private
482
495
  */
483
496
  __updateColumnCount() {
484
- const previousColumnCount = this.$.grid.style.getPropertyValue('--_vaadin-dashboard-col-count');
497
+ const previousColumnCount = this.$.grid.style.getPropertyValue('--_col-count');
485
498
  super.__updateColumnCount();
486
499
 
487
500
  // 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')) {
501
+ if (previousColumnCount !== this.$.grid.style.getPropertyValue('--_col-count')) {
489
502
  this.querySelectorAll(WRAPPER_LOCAL_NAME).forEach((wrapper) => {
490
503
  if (wrapper.firstElementChild && 'requestUpdate' in wrapper.firstElementChild) {
491
504
  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/theme/material/vaadin-dashboard.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import './vaadin-dashboard-widget.js';
2
1
  import './vaadin-dashboard-section.js';
2
+ import './vaadin-dashboard-widget.js';
3
3
  import '../../src/vaadin-dashboard.js';
package/theme/material/vaadin-dashboard.js CHANGED
@@ -1,3 +1,3 @@
1
- import './vaadin-dashboard-widget.js';
2
1
  import './vaadin-dashboard-section.js';
2
+ import './vaadin-dashboard-widget.js';
3
3
  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": "24.8.0-beta1",
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/24.8.0-beta1/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-beta1/#/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": "24.8.0-beta1",
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/24.8.0-beta1/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-beta1/#/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",