@vaadin/dialog 25.0.0-alpha7 → 25.0.0-alpha9

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 (12) hide show
  1. package/package.json +10 -10
  2. package/src/styles/vaadin-dialog-overlay-base-styles.js +198 -198
  3. package/src/vaadin-dialog-base-mixin.d.ts +1 -13
  4. package/src/vaadin-dialog-base-mixin.js +16 -19
  5. package/src/vaadin-dialog-overlay-mixin.js +27 -8
  6. package/src/vaadin-dialog-overlay.js +1 -1
  7. package/src/vaadin-dialog-size-mixin.d.ts +24 -0
  8. package/src/vaadin-dialog-size-mixin.js +40 -0
  9. package/src/vaadin-dialog.d.ts +10 -20
  10. package/src/vaadin-dialog.js +37 -31
  11. package/web-types.json +33 -55
  12. package/web-types.lit.json +14 -21
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/dialog",
3
- "version": "25.0.0-alpha7",
3
+ "version": "25.0.0-alpha9",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -39,17 +39,17 @@
39
39
  ],
40
40
  "dependencies": {
41
41
  "@open-wc/dedupe-mixin": "^1.3.0",
42
- "@vaadin/component-base": "25.0.0-alpha7",
43
- "@vaadin/lit-renderer": "25.0.0-alpha7",
44
- "@vaadin/overlay": "25.0.0-alpha7",
45
- "@vaadin/vaadin-lumo-styles": "25.0.0-alpha7",
46
- "@vaadin/vaadin-themable-mixin": "25.0.0-alpha7",
42
+ "@vaadin/component-base": "25.0.0-alpha9",
43
+ "@vaadin/lit-renderer": "25.0.0-alpha9",
44
+ "@vaadin/overlay": "25.0.0-alpha9",
45
+ "@vaadin/vaadin-lumo-styles": "25.0.0-alpha9",
46
+ "@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
47
47
  "lit": "^3.0.0"
48
48
  },
49
49
  "devDependencies": {
50
- "@vaadin/a11y-base": "25.0.0-alpha7",
51
- "@vaadin/chai-plugins": "25.0.0-alpha7",
52
- "@vaadin/test-runner-commands": "25.0.0-alpha7",
50
+ "@vaadin/a11y-base": "25.0.0-alpha9",
51
+ "@vaadin/chai-plugins": "25.0.0-alpha9",
52
+ "@vaadin/test-runner-commands": "25.0.0-alpha9",
53
53
  "@vaadin/testing-helpers": "^2.0.0",
54
54
  "sinon": "^18.0.0"
55
55
  },
@@ -57,5 +57,5 @@
57
57
  "web-types.json",
58
58
  "web-types.lit.json"
59
59
  ],
60
- "gitHead": "87f72707ce6866892f8be5782fa0da008e87dcbc"
60
+ "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
61
61
  }
package/src/styles/vaadin-dialog-overlay-base-styles.js CHANGED
@@ -8,208 +8,208 @@ import { css } from 'lit';
8
8
  import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
9
9
 
10
10
  export const dialogOverlayBase = css`
11
- @layer base {
12
- /* Optical centering */
13
- :host::before,
14
- :host::after {
15
- content: '';
16
- flex-basis: 0;
17
- flex-grow: 1;
18
- }
19
-
20
- :host::after {
21
- flex-grow: 1.1;
22
- }
23
-
24
- :host {
25
- cursor: default;
26
- }
27
-
28
- [part='overlay']:focus-visible {
29
- outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
30
- }
31
-
32
- [part='overlay'] {
33
- background: var(--vaadin-dialog-background, var(--vaadin-background-color));
34
- background-origin: border-box;
35
- border: 0;
36
- box-shadow:
37
- 0 0 0 var(--vaadin-dialog-border-width, 1px) var(--vaadin-dialog-border-color, rgba(0, 0, 0, 0.1)),
38
- var(--vaadin-dialog-box-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3));
39
- border-radius: var(--vaadin-dialog-border-radius, var(--vaadin-radius-l));
40
- width: max-content;
41
- min-width: min(var(--vaadin-dialog-min-width, 4em), 100%);
42
- max-width: var(--vaadin-dialog-max-width, 100%);
43
- max-height: 100%;
44
- }
45
-
46
- [part='header'],
47
- [part='header-content'],
48
- [part='footer'] {
49
- display: flex;
50
- align-items: center;
51
- flex-wrap: wrap;
52
- flex: none;
53
- pointer-events: none;
54
- z-index: 1;
55
- gap: var(--vaadin-dialog-toolbar-gap, var(--vaadin-gap-container-inline));
56
- }
57
-
58
- ::slotted(*) {
59
- pointer-events: auto;
60
- }
61
-
62
- [part='header'],
63
- [part='content'],
64
- [part='footer'] {
65
- padding: var(--vaadin-dialog-padding, var(--vaadin-padding));
66
- }
67
-
68
- :host(:is([has-header], [has-title])) [part='content'] {
69
- padding-top: 0;
70
- }
71
-
72
- :host([has-footer]) [part='content'] {
73
- padding-bottom: 0;
74
- }
75
-
76
- [part='header'] {
77
- flex-wrap: nowrap;
78
- }
79
-
80
- ::slotted([slot='header-content']),
81
- ::slotted([slot='title']),
82
- ::slotted([slot='footer']) {
83
- display: contents;
84
- }
85
-
86
- ::slotted([slot='title']) {
87
- font: inherit !important;
88
- color: inherit !important;
89
- overflow-wrap: anywhere;
90
- }
91
-
92
- [part='title'] {
93
- color: var(--vaadin-dialog-title-color, var(--vaadin-color));
94
- font-weight: var(--vaadin-dialog-title-font-weight, 600);
95
- font-size: var(--vaadin-dialog-title-font-size, 1em);
96
- line-height: var(--vaadin-dialog-title-line-height, inherit);
97
- }
98
-
99
- [part='header-content'] {
100
- flex: 1;
101
- }
102
-
103
- :host([has-title]) [part='header-content'],
104
- [part='footer'] {
105
- justify-content: flex-end;
106
- }
107
-
108
- :host(:not([has-title]):not([has-header])) [part='header'],
109
- :host(:not([has-header])) [part='header-content'],
110
- :host(:not([has-title])) [part='title'],
111
- :host(:not([has-footer])) [part='footer'] {
112
- display: none !important;
113
- }
11
+ /* Optical centering */
12
+ :host::before,
13
+ :host::after {
14
+ content: '';
15
+ flex-basis: 0;
16
+ flex-grow: 1;
17
+ }
18
+
19
+ :host::after {
20
+ flex-grow: 1.1;
21
+ }
22
+
23
+ :host {
24
+ cursor: default;
25
+ }
26
+
27
+ [part='overlay']:focus-visible {
28
+ outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
29
+ }
30
+
31
+ [part='overlay'] {
32
+ background: var(--vaadin-dialog-background, var(--vaadin-background-color));
33
+ background-origin: border-box;
34
+ border: 0;
35
+ box-shadow:
36
+ 0 0 0 var(--vaadin-dialog-border-width, 1px) var(--vaadin-dialog-border-color, rgba(0, 0, 0, 0.1)),
37
+ var(--vaadin-dialog-box-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3));
38
+ border-radius: var(--vaadin-dialog-border-radius, var(--vaadin-radius-l));
39
+ width: max-content;
40
+ min-width: min(var(--vaadin-dialog-min-width, 4em), 100%);
41
+ max-width: var(--vaadin-dialog-max-width, 100%);
42
+ max-height: 100%;
43
+ }
44
+
45
+ [part='header'],
46
+ [part='header-content'],
47
+ [part='footer'] {
48
+ display: flex;
49
+ align-items: center;
50
+ flex-wrap: wrap;
51
+ flex: none;
52
+ pointer-events: none;
53
+ z-index: 1;
54
+ gap: var(--vaadin-dialog-toolbar-gap, var(--vaadin-gap-container-inline));
55
+ }
56
+
57
+ ::slotted(*) {
58
+ pointer-events: auto;
59
+ }
60
+
61
+ [part='header'],
62
+ [part='content'],
63
+ [part='footer'] {
64
+ padding: var(--vaadin-dialog-padding, var(--vaadin-padding));
65
+ }
66
+
67
+ :host([theme~='no-padding']) [part='content'] {
68
+ padding: 0 !important;
69
+ }
70
+
71
+ :host(:is([has-header], [has-title])) [part='content'] {
72
+ padding-top: 0;
73
+ }
74
+
75
+ :host([has-footer]) [part='content'] {
76
+ padding-bottom: 0;
77
+ }
78
+
79
+ [part='header'] {
80
+ flex-wrap: nowrap;
81
+ }
82
+
83
+ ::slotted([slot='header-content']),
84
+ ::slotted([slot='title']),
85
+ ::slotted([slot='footer']) {
86
+ display: contents;
87
+ }
88
+
89
+ ::slotted([slot='title']) {
90
+ font: inherit !important;
91
+ color: inherit !important;
92
+ overflow-wrap: anywhere;
93
+ }
94
+
95
+ [part='title'] {
96
+ color: var(--vaadin-dialog-title-color, var(--vaadin-color));
97
+ font-weight: var(--vaadin-dialog-title-font-weight, 600);
98
+ font-size: var(--vaadin-dialog-title-font-size, 1em);
99
+ line-height: var(--vaadin-dialog-title-line-height, inherit);
100
+ }
101
+
102
+ [part='header-content'] {
103
+ flex: 1;
104
+ }
105
+
106
+ :host([has-title]) [part='header-content'],
107
+ [part='footer'] {
108
+ justify-content: flex-end;
109
+ }
110
+
111
+ :host(:not([has-title]):not([has-header])) [part='header'],
112
+ :host(:not([has-header])) [part='header-content'],
113
+ :host(:not([has-title])) [part='title'],
114
+ :host(:not([has-footer])) [part='footer'] {
115
+ display: none !important;
114
116
  }
115
117
  `;
116
118
 
117
119
  const dialogResizableOverlay = css`
118
- @layer base {
119
- [part='overlay'] {
120
- position: relative;
121
- overflow: visible;
122
- display: flex;
123
- }
124
-
125
- :host([has-bounds-set]) [part='overlay'] {
126
- min-width: 0;
127
- max-width: none;
128
- max-height: none;
129
- }
130
-
131
- /* Content part scrolls by default */
132
- [part='content'] {
133
- flex: 1;
134
- min-height: 0;
135
- }
136
-
137
- :host([overflow]) [part='content'] {
138
- overflow: auto;
139
- overscroll-behavior: contain;
140
- }
141
-
142
- .resizer-container {
143
- display: flex;
144
- flex-direction: column;
145
- flex-grow: 1;
146
- border-radius: inherit;
147
- max-width: 100%;
148
- }
149
-
150
- :host(:not([resizable])) .resizer {
151
- display: none;
152
- }
153
-
154
- .resizer {
155
- position: absolute;
156
- height: 16px;
157
- width: 16px;
158
- }
159
-
160
- .resizer.edge {
161
- height: 8px;
162
- width: 8px;
163
- inset: -4px;
164
- }
165
-
166
- .resizer.edge.n {
167
- width: auto;
168
- bottom: auto;
169
- cursor: ns-resize;
170
- }
171
-
172
- .resizer.ne {
173
- top: -4px;
174
- right: -4px;
175
- cursor: nesw-resize;
176
- }
177
-
178
- .resizer.edge.e {
179
- height: auto;
180
- left: auto;
181
- cursor: ew-resize;
182
- }
183
-
184
- .resizer.se {
185
- bottom: -4px;
186
- right: -4px;
187
- cursor: nwse-resize;
188
- }
189
-
190
- .resizer.edge.s {
191
- width: auto;
192
- top: auto;
193
- cursor: ns-resize;
194
- }
195
-
196
- .resizer.sw {
197
- bottom: -4px;
198
- left: -4px;
199
- cursor: nesw-resize;
200
- }
201
-
202
- .resizer.edge.w {
203
- height: auto;
204
- right: auto;
205
- cursor: ew-resize;
206
- }
207
-
208
- .resizer.nw {
209
- top: -4px;
210
- left: -4px;
211
- cursor: nwse-resize;
212
- }
120
+ [part='overlay'] {
121
+ position: relative;
122
+ overflow: visible;
123
+ display: flex;
124
+ }
125
+
126
+ :host([has-bounds-set]) [part='overlay'] {
127
+ min-width: 0;
128
+ max-width: none;
129
+ max-height: none;
130
+ }
131
+
132
+ /* Content part scrolls by default */
133
+ [part='content'] {
134
+ flex: 1;
135
+ min-height: 0;
136
+ }
137
+
138
+ :host([overflow]) [part='content'] {
139
+ overflow: auto;
140
+ overscroll-behavior: contain;
141
+ }
142
+
143
+ .resizer-container {
144
+ display: flex;
145
+ flex-direction: column;
146
+ flex-grow: 1;
147
+ border-radius: inherit;
148
+ max-width: 100%;
149
+ }
150
+
151
+ :host(:not([resizable])) .resizer {
152
+ display: none;
153
+ }
154
+
155
+ .resizer {
156
+ position: absolute;
157
+ height: 16px;
158
+ width: 16px;
159
+ }
160
+
161
+ .resizer.edge {
162
+ height: 8px;
163
+ width: 8px;
164
+ inset: -4px;
165
+ }
166
+
167
+ .resizer.edge.n {
168
+ width: auto;
169
+ bottom: auto;
170
+ cursor: ns-resize;
171
+ }
172
+
173
+ .resizer.ne {
174
+ top: -4px;
175
+ right: -4px;
176
+ cursor: nesw-resize;
177
+ }
178
+
179
+ .resizer.edge.e {
180
+ height: auto;
181
+ left: auto;
182
+ cursor: ew-resize;
183
+ }
184
+
185
+ .resizer.se {
186
+ bottom: -4px;
187
+ right: -4px;
188
+ cursor: nwse-resize;
189
+ }
190
+
191
+ .resizer.edge.s {
192
+ width: auto;
193
+ top: auto;
194
+ cursor: ns-resize;
195
+ }
196
+
197
+ .resizer.sw {
198
+ bottom: -4px;
199
+ left: -4px;
200
+ cursor: nesw-resize;
201
+ }
202
+
203
+ .resizer.edge.w {
204
+ height: auto;
205
+ right: auto;
206
+ cursor: ew-resize;
207
+ }
208
+
209
+ .resizer.nw {
210
+ top: -4px;
211
+ left: -4px;
212
+ cursor: nwse-resize;
213
213
  }
214
214
  `;
215
215
 
package/src/vaadin-dialog-base-mixin.d.ts CHANGED
@@ -33,7 +33,7 @@ export declare class DialogBaseMixinClass {
33
33
  modeless: boolean;
34
34
 
35
35
  /**
36
- * The `role` attribute value to be set on the overlay. Defaults to "dialog".
36
+ * The `role` attribute value to be set on the dialog. Defaults to "dialog".
37
37
  *
38
38
  * @attr {string} overlay-role
39
39
  */
@@ -58,16 +58,4 @@ export declare class DialogBaseMixinClass {
58
58
  * overlay from stretching all the way to the left of the viewport).
59
59
  */
60
60
  left: string;
61
-
62
- /**
63
- * Set the width of the overlay.
64
- * If a unitless number is provided, pixels are assumed.
65
- */
66
- width: string | null;
67
-
68
- /**
69
- * Set the height of the overlay.
70
- * If a unitless number is provided, pixels are assumed.
71
- */
72
- height: string | null;
73
61
  }
package/src/vaadin-dialog-base-mixin.js CHANGED
@@ -17,6 +17,7 @@ export const DialogBaseMixin = (superClass) =>
17
17
  */
18
18
  opened: {
19
19
  type: Boolean,
20
+ reflectToAttribute: true,
20
21
  value: false,
21
22
  notify: true,
22
23
  sync: true,
@@ -76,35 +77,18 @@ export const DialogBaseMixin = (superClass) =>
76
77
  },
77
78
 
78
79
  /**
79
- * Set the width of the overlay.
80
- * If a unitless number is provided, pixels are assumed.
81
- */
82
- width: {
83
- type: String,
84
- },
85
-
86
- /**
87
- * Set the height of the overlay.
88
- * If a unitless number is provided, pixels are assumed.
89
- */
90
- height: {
91
- type: String,
92
- },
93
-
94
- /**
95
- * The `role` attribute value to be set on the overlay. Defaults to "dialog".
80
+ * The `role` attribute value to be set on the dialog. Defaults to "dialog".
96
81
  *
97
82
  * @attr {string} overlay-role
98
83
  */
99
84
  overlayRole: {
100
85
  type: String,
101
- value: 'dialog',
102
86
  },
103
87
  };
104
88
  }
105
89
 
106
90
  static get observers() {
107
- return ['__positionChanged(top, left)', '__sizeChanged(width, height)'];
91
+ return ['__positionChanged(top, left)'];
108
92
  }
109
93
 
110
94
  /** @protected */
@@ -118,6 +102,19 @@ export const DialogBaseMixin = (superClass) =>
118
102
  overlay.addEventListener('vaadin-overlay-closed', this.__handleOverlayClosed.bind(this));
119
103
 
120
104
  this._overlayElement = overlay;
105
+
106
+ if (!this.hasAttribute('role')) {
107
+ this.role = 'dialog';
108
+ }
109
+ }
110
+
111
+ /** @protected */
112
+ updated(props) {
113
+ super.updated(props);
114
+
115
+ if (props.has('overlayRole')) {
116
+ this.role = this.overlayRole || 'dialog';
117
+ }
121
118
  }
122
119
 
123
120
  /** @private */
package/src/vaadin-dialog-overlay-mixin.js CHANGED
@@ -4,6 +4,7 @@
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
7
+ import { setOverlayStateAttribute } from '@vaadin/overlay/src/vaadin-overlay-utils.js';
7
8
 
8
9
  /**
9
10
  * @polymerMixin
@@ -43,6 +44,24 @@ export const DialogOverlayMixin = (superClass) =>
43
44
  ];
44
45
  }
45
46
 
47
+ /**
48
+ * Override method from OverlayFocusMixin to use owner as content root
49
+ * @protected
50
+ * @override
51
+ */
52
+ get _contentRoot() {
53
+ return this.owner;
54
+ }
55
+
56
+ /**
57
+ * Override method from OverlayFocusMixin to use owner as modal root
58
+ * @protected
59
+ * @override
60
+ */
61
+ get _modalRoot() {
62
+ return this.owner;
63
+ }
64
+
46
65
  /** @protected */
47
66
  ready() {
48
67
  super.ready();
@@ -99,8 +118,8 @@ export const DialogOverlayMixin = (superClass) =>
99
118
  this._oldOpenedFooterHeader = opened;
100
119
 
101
120
  // Set attributes here to update styles before detecting content overflow
102
- this.toggleAttribute('has-header', !!headerRenderer);
103
- this.toggleAttribute('has-footer', !!footerRenderer);
121
+ setOverlayStateAttribute(this, 'has-header', !!headerRenderer);
122
+ setOverlayStateAttribute(this, 'has-footer', !!footerRenderer);
104
123
 
105
124
  if (headerRendererChanged) {
106
125
  if (headerRenderer) {
@@ -134,7 +153,7 @@ export const DialogOverlayMixin = (superClass) =>
134
153
 
135
154
  /** @private */
136
155
  _headerTitleChanged(headerTitle, opened) {
137
- this.toggleAttribute('has-title', !!headerTitle);
156
+ setOverlayStateAttribute(this, 'has-title', !!headerTitle);
138
157
 
139
158
  if (opened && (headerTitle || this._oldHeaderTitle)) {
140
159
  this.requestContentUpdate();
@@ -150,7 +169,7 @@ export const DialogOverlayMixin = (superClass) =>
150
169
  this.headerTitleElement.setAttribute('slot', 'title');
151
170
  this.headerTitleElement.classList.add('draggable');
152
171
  }
153
- this.appendChild(this.headerTitleElement);
172
+ this.owner.appendChild(this.headerTitleElement);
154
173
  this.headerTitleElement.textContent = this.headerTitle;
155
174
  } else if (this.headerTitleElement) {
156
175
  this.headerTitleElement.remove();
@@ -167,7 +186,7 @@ export const DialogOverlayMixin = (superClass) =>
167
186
  if (this.headerContainer) {
168
187
  // If a new renderer has been set, make sure to reattach the container
169
188
  if (!this.headerContainer.parentElement) {
170
- this.appendChild(this.headerContainer);
189
+ this.owner.appendChild(this.headerContainer);
171
190
  }
172
191
 
173
192
  if (this.headerRenderer) {
@@ -179,7 +198,7 @@ export const DialogOverlayMixin = (superClass) =>
179
198
  if (this.footerContainer) {
180
199
  // If a new renderer has been set, make sure to reattach the container
181
200
  if (!this.footerContainer.parentElement) {
182
- this.appendChild(this.footerContainer);
201
+ this.owner.appendChild(this.footerContainer);
183
202
  }
184
203
 
185
204
  if (this.footerRenderer) {
@@ -227,9 +246,9 @@ export const DialogOverlayMixin = (superClass) =>
227
246
 
228
247
  const value = overflow.trim();
229
248
  if (value.length > 0 && this.getAttribute('overflow') !== value) {
230
- this.setAttribute('overflow', value);
249
+ setOverlayStateAttribute(this, 'overflow', value);
231
250
  } else if (value.length === 0 && this.hasAttribute('overflow')) {
232
- this.removeAttribute('overflow');
251
+ setOverlayStateAttribute(this, 'overflow', null);
233
252
  }
234
253
  }
235
254
  };
package/src/vaadin-dialog-overlay.js CHANGED
@@ -23,7 +23,7 @@ import { DialogOverlayMixin } from './vaadin-dialog-overlay-mixin.js';
23
23
  * @private
24
24
  */
25
25
  export class DialogOverlay extends DialogOverlayMixin(
26
- DirMixin(ThemableMixin(LumoInjectionMixin(PolylitMixin(LitElement)))),
26
+ DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
27
27
  ) {
28
28
  static get is() {
29
29
  return 'vaadin-dialog-overlay';
package/src/vaadin-dialog-size-mixin.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import type { Constructor } from '@open-wc/dedupe-mixin';
7
+
8
+ export declare function DialogSizeMixin<T extends Constructor<HTMLElement>>(
9
+ base: T,
10
+ ): Constructor<DialogSizeMixinClass> & T;
11
+
12
+ export declare class DialogSizeMixinClass {
13
+ /**
14
+ * Set the width of the overlay.
15
+ * If a unitless number is provided, pixels are assumed.
16
+ */
17
+ width: string | null;
18
+
19
+ /**
20
+ * Set the height of the overlay.
21
+ * If a unitless number is provided, pixels are assumed.
22
+ */
23
+ height: string | null;
24
+ }
package/src/vaadin-dialog-size-mixin.js ADDED
@@ -0,0 +1,40 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+
7
+ /**
8
+ * @polymerMixin
9
+ */
10
+ export const DialogSizeMixin = (superClass) =>
11
+ class DialogSizeMixinClass extends superClass {
12
+ static get properties() {
13
+ return {
14
+ /**
15
+ * Set the width of the overlay.
16
+ * If a unitless number is provided, pixels are assumed.
17
+ */
18
+ width: {
19
+ type: String,
20
+ },
21
+
22
+ /**
23
+ * Set the height of the overlay.
24
+ * If a unitless number is provided, pixels are assumed.
25
+ */
26
+ height: {
27
+ type: String,
28
+ },
29
+ };
30
+ }
31
+
32
+ static get observers() {
33
+ return ['__sizeChanged(width, height)'];
34
+ }
35
+
36
+ /** @private */
37
+ __sizeChanged(width, height) {
38
+ requestAnimationFrame(() => this.$.overlay.setBounds({ width, height }, false));
39
+ }
40
+ };
package/src/vaadin-dialog.d.ts CHANGED
@@ -10,6 +10,7 @@ import { DialogBaseMixin } from './vaadin-dialog-base-mixin.js';
10
10
  import { DialogDraggableMixin } from './vaadin-dialog-draggable-mixin.js';
11
11
  import { DialogRendererMixin } from './vaadin-dialog-renderer-mixin.js';
12
12
  import { DialogResizableMixin } from './vaadin-dialog-resizable-mixin.js';
13
+ import { DialogSizeMixin } from './vaadin-dialog-size-mixin.js';
13
14
 
14
15
  export { DialogOverlay, DialogOverlayBounds } from './vaadin-dialog-overlay.js';
15
16
 
@@ -90,16 +91,13 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
90
91
  *
91
92
  * ### Styling
92
93
  *
93
- * `<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal
94
- * themable component as the actual visible dialog overlay.
95
- *
96
- * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) documentation.
97
- * for `<vaadin-dialog-overlay>` parts.
98
- *
99
- * In addition to `<vaadin-overlay>` parts, the following parts are available for styling:
94
+ * The following shadow DOM parts are available for styling:
100
95
  *
101
96
  * Part name | Description
102
97
  * -----------------|-------------------------------------------
98
+ * `backdrop` | Backdrop of the overlay
99
+ * `overlay` | The overlay container
100
+ * `content` | The overlay content
103
101
  * `header` | Element wrapping title and header content
104
102
  * `header-content` | Element wrapping the header content slot
105
103
  * `title` | Element wrapping the title slot
@@ -114,9 +112,6 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
114
112
  * `has-footer` | Set when the element has footer renderer
115
113
  * `overflow` | Set to `top`, `bottom`, none or both
116
114
  *
117
- * Note: the `theme` attribute value set on `<vaadin-dialog>` is
118
- * propagated to the internal `<vaadin-dialog-overlay>` component.
119
- *
120
115
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
121
116
  *
122
117
  * @fires {CustomEvent} resize - Fired when the dialog resize is finished.
@@ -124,18 +119,13 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
124
119
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
125
120
  * @fires {CustomEvent} closed - Fired when the dialog is closed.
126
121
  */
127
- declare class Dialog extends DialogDraggableMixin(
128
- DialogResizableMixin(
129
- DialogRendererMixin(DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(HTMLElement))))),
122
+ declare class Dialog extends DialogSizeMixin(
123
+ DialogDraggableMixin(
124
+ DialogResizableMixin(
125
+ DialogRendererMixin(DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(HTMLElement))))),
126
+ ),
130
127
  ),
131
128
  ) {
132
- /**
133
- * Set the `aria-label` attribute for assistive technologies like
134
- * screen readers. An empty string value for this property (the
135
- * default) means that the `aria-label` attribute is not present.
136
- */
137
- ariaLabel: string;
138
-
139
129
  addEventListener<K extends keyof DialogEventMap>(
140
130
  type: K,
141
131
  listener: (this: Dialog, ev: DialogEventMap[K]) => void,
package/src/vaadin-dialog.js CHANGED
@@ -15,6 +15,7 @@ import { DialogBaseMixin } from './vaadin-dialog-base-mixin.js';
15
15
  import { DialogDraggableMixin } from './vaadin-dialog-draggable-mixin.js';
16
16
  import { DialogRendererMixin } from './vaadin-dialog-renderer-mixin.js';
17
17
  import { DialogResizableMixin } from './vaadin-dialog-resizable-mixin.js';
18
+ import { DialogSizeMixin } from './vaadin-dialog-size-mixin.js';
18
19
 
19
20
  export { DialogOverlay } from './vaadin-dialog-overlay.js';
20
21
 
@@ -47,16 +48,13 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
47
48
  *
48
49
  * ### Styling
49
50
  *
50
- * `<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal
51
- * themable component as the actual visible dialog overlay.
52
- *
53
- * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) documentation.
54
- * for `<vaadin-dialog-overlay>` parts.
55
- *
56
- * In addition to `<vaadin-overlay>` parts, the following parts are available for styling:
51
+ * The following shadow DOM parts are available for styling:
57
52
  *
58
53
  * Part name | Description
59
54
  * -----------------|-------------------------------------------
55
+ * `backdrop` | Backdrop of the overlay
56
+ * `overlay` | The overlay container
57
+ * `content` | The overlay content
60
58
  * `header` | Element wrapping title and header content
61
59
  * `header-content` | Element wrapping the header content slot
62
60
  * `title` | Element wrapping the title slot
@@ -71,9 +69,6 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
71
69
  * `has-footer` | Set when the element has footer renderer
72
70
  * `overflow` | Set to `top`, `bottom`, none or both
73
71
  *
74
- * Note: the `theme` attribute value set on `<vaadin-dialog>` is
75
- * propagated to the internal `<vaadin-dialog-overlay>` component.
76
- *
77
72
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
78
73
  *
79
74
  * @fires {CustomEvent} resize - Fired when the dialog resize is finished.
@@ -89,11 +84,16 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
89
84
  * @mixes DialogDraggableMixin
90
85
  * @mixes DialogRendererMixin
91
86
  * @mixes DialogResizableMixin
87
+ * @mixes DialogSizeMixin
92
88
  * @mixes OverlayClassMixin
93
89
  */
94
- class Dialog extends DialogDraggableMixin(
95
- DialogResizableMixin(
96
- DialogRendererMixin(DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(LitElement)))))),
90
+ class Dialog extends DialogSizeMixin(
91
+ DialogDraggableMixin(
92
+ DialogResizableMixin(
93
+ DialogRendererMixin(
94
+ DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(LitElement))))),
95
+ ),
96
+ ),
97
97
  ),
98
98
  ) {
99
99
  static get is() {
@@ -102,32 +102,24 @@ class Dialog extends DialogDraggableMixin(
102
102
 
103
103
  static get styles() {
104
104
  return css`
105
- :host {
105
+ :host([opened]),
106
+ :host([opening]),
107
+ :host([closing]) {
108
+ display: contents !important;
109
+ }
110
+
111
+ :host,
112
+ :host([hidden]) {
106
113
  display: none !important;
107
114
  }
108
115
  `;
109
116
  }
110
117
 
111
- static get properties() {
112
- return {
113
- /**
114
- * Set the `aria-label` attribute for assistive technologies like
115
- * screen readers. An empty string value for this property (the
116
- * default) means that the `aria-label` attribute is not present.
117
- */
118
- ariaLabel: {
119
- type: String,
120
- value: '',
121
- },
122
- };
123
- }
124
-
125
118
  /** @protected */
126
119
  render() {
127
120
  return html`
128
121
  <vaadin-dialog-overlay
129
122
  id="overlay"
130
- role="${this.overlayRole}"
131
123
  .owner="${this}"
132
124
  .opened="${this.opened}"
133
125
  .headerTitle="${this.headerTitle}"
@@ -138,15 +130,29 @@ class Dialog extends DialogDraggableMixin(
138
130
  @mousedown="${this._bringOverlayToFront}"
139
131
  @touchstart="${this._bringOverlayToFront}"
140
132
  theme="${ifDefined(this._theme)}"
141
- aria-label="${ifDefined(this.ariaLabel || this.headerTitle)}"
142
133
  .modeless="${this.modeless}"
143
134
  .withBackdrop="${!this.modeless}"
144
135
  ?resizable="${this.resizable}"
145
136
  restore-focus-on-close
146
137
  focus-trap
147
- ></vaadin-dialog-overlay>
138
+ exportparts="backdrop, overlay, header, title, header-content, content, footer"
139
+ >
140
+ <slot name="title" slot="title"></slot>
141
+ <slot name="header-content" slot="header-content"></slot>
142
+ <slot name="footer" slot="footer"></slot>
143
+ <slot></slot>
144
+ </vaadin-dialog-overlay>
148
145
  `;
149
146
  }
147
+
148
+ /** @protected */
149
+ updated(props) {
150
+ super.updated(props);
151
+
152
+ if (props.has('headerTitle')) {
153
+ this.ariaLabel = this.headerTitle;
154
+ }
155
+ }
150
156
  }
151
157
 
152
158
  defineCustomElement(Dialog);
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/dialog",
4
- "version": "25.0.0-alpha7",
4
+ "version": "25.0.0-alpha9",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-dialog",
11
- "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha7/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`header` | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title` | Element wrapping the title slot\n`footer` | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`has-title` | Set when the element has a title\n`has-header` | Set when the element has header renderer\n`has-footer` | Set when the element has footer renderer\n`overflow` | Set to `top`, `bottom`, none or both\n\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
11
+ "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n`header` | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title` | Element wrapping the title slot\n`footer` | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`has-title` | Set when the element has a title\n`has-header` | Set when the element has header renderer\n`has-footer` | Set when the element has footer renderer\n`overflow` | Set to `top`, `bottom`, none or both\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "opened",
@@ -69,8 +69,8 @@
69
69
  }
70
70
  },
71
71
  {
72
- "name": "width",
73
- "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
72
+ "name": "overlay-role",
73
+ "description": "The `role` attribute value to be set on the dialog. Defaults to \"dialog\".",
74
74
  "value": {
75
75
  "type": [
76
76
  "string",
@@ -80,19 +80,17 @@
80
80
  }
81
81
  },
82
82
  {
83
- "name": "height",
84
- "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
83
+ "name": "draggable",
84
+ "description": "Set to true to enable repositioning the dialog by clicking and dragging.\n\nBy default, only the overlay area can be used to drag the element. But,\na child element can be marked as a draggable area by adding a\n\"`draggable`\" class to it, this will by default make all of its children draggable also.\nIf you want a child element to be draggable\nbut still have its children non-draggable (by default), mark it with\n\"`draggable-leaf-only`\" class name.",
85
85
  "value": {
86
86
  "type": [
87
- "string",
88
- "null",
89
- "undefined"
87
+ "boolean"
90
88
  ]
91
89
  }
92
90
  },
93
91
  {
94
- "name": "overlay-role",
95
- "description": "The `role` attribute value to be set on the overlay. Defaults to \"dialog\".",
92
+ "name": "header-title",
93
+ "description": "String used for rendering a dialog title.\n\nIf both `headerTitle` and `headerRenderer` are defined, the title\nand the elements created by the renderer will be placed next to\neach other, with the title coming first.\n\nWhen `headerTitle` is set, the attribute `has-title` is added to the overlay element.",
96
94
  "value": {
97
95
  "type": [
98
96
  "string",
@@ -102,8 +100,8 @@
102
100
  }
103
101
  },
104
102
  {
105
- "name": "draggable",
106
- "description": "Set to true to enable repositioning the dialog by clicking and dragging.\n\nBy default, only the overlay area can be used to drag the element. But,\na child element can be marked as a draggable area by adding a\n\"`draggable`\" class to it, this will by default make all of its children draggable also.\nIf you want a child element to be draggable\nbut still have its children non-draggable (by default), mark it with\n\"`draggable-leaf-only`\" class name.",
103
+ "name": "resizable",
104
+ "description": "Set to true to enable resizing the dialog by dragging the corners and edges.",
107
105
  "value": {
108
106
  "type": [
109
107
  "boolean"
@@ -111,8 +109,8 @@
111
109
  }
112
110
  },
113
111
  {
114
- "name": "header-title",
115
- "description": "String used for rendering a dialog title.\n\nIf both `headerTitle` and `headerRenderer` are defined, the title\nand the elements created by the renderer will be placed next to\neach other, with the title coming first.\n\nWhen `headerTitle` is set, the attribute `has-title` is added to the overlay element.",
112
+ "name": "width",
113
+ "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
116
114
  "value": {
117
115
  "type": [
118
116
  "string",
@@ -122,17 +120,8 @@
122
120
  }
123
121
  },
124
122
  {
125
- "name": "resizable",
126
- "description": "Set to true to enable resizing the dialog by dragging the corners and edges.",
127
- "value": {
128
- "type": [
129
- "boolean"
130
- ]
131
- }
132
- },
133
- {
134
- "name": "overlay-class",
135
- "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
123
+ "name": "height",
124
+ "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
136
125
  "value": {
137
126
  "type": [
138
127
  "string",
@@ -142,8 +131,8 @@
142
131
  }
143
132
  },
144
133
  {
145
- "name": "aria-label",
146
- "description": "Set the `aria-label` attribute for assistive technologies like\nscreen readers. An empty string value for this property (the\ndefault) means that the `aria-label` attribute is not present.",
134
+ "name": "overlay-class",
135
+ "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
147
136
  "value": {
148
137
  "type": [
149
138
  "string",
@@ -224,31 +213,9 @@
224
213
  ]
225
214
  }
226
215
  },
227
- {
228
- "name": "width",
229
- "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
230
- "value": {
231
- "type": [
232
- "string",
233
- "null",
234
- "undefined"
235
- ]
236
- }
237
- },
238
- {
239
- "name": "height",
240
- "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
241
- "value": {
242
- "type": [
243
- "string",
244
- "null",
245
- "undefined"
246
- ]
247
- }
248
- },
249
216
  {
250
217
  "name": "overlayRole",
251
- "description": "The `role` attribute value to be set on the overlay. Defaults to \"dialog\".",
218
+ "description": "The `role` attribute value to be set on the dialog. Defaults to \"dialog\".",
252
219
  "value": {
253
220
  "type": [
254
221
  "string",
@@ -317,8 +284,8 @@
317
284
  }
318
285
  },
319
286
  {
320
- "name": "overlayClass",
321
- "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
287
+ "name": "width",
288
+ "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
322
289
  "value": {
323
290
  "type": [
324
291
  "string",
@@ -328,8 +295,19 @@
328
295
  }
329
296
  },
330
297
  {
331
- "name": "ariaLabel",
332
- "description": "Set the `aria-label` attribute for assistive technologies like\nscreen readers. An empty string value for this property (the\ndefault) means that the `aria-label` attribute is not present.",
298
+ "name": "height",
299
+ "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
300
+ "value": {
301
+ "type": [
302
+ "string",
303
+ "null",
304
+ "undefined"
305
+ ]
306
+ }
307
+ },
308
+ {
309
+ "name": "overlayClass",
310
+ "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
333
311
  "value": {
334
312
  "type": [
335
313
  "string",
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/dialog",
4
- "version": "25.0.0-alpha7",
4
+ "version": "25.0.0-alpha9",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,7 +16,7 @@
16
16
  "elements": [
17
17
  {
18
18
  "name": "vaadin-dialog",
19
- "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha7/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`header` | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title` | Element wrapping the title slot\n`footer` | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`has-title` | Set when the element has a title\n`has-header` | Set when the element has header renderer\n`has-footer` | Set when the element has footer renderer\n`overflow` | Set to `top`, `bottom`, none or both\n\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
19
+ "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n`header` | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title` | Element wrapping the title slot\n`footer` | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`has-title` | Set when the element has a title\n`has-header` | Set when the element has header renderer\n`has-footer` | Set when the element has footer renderer\n`overflow` | Set to `top`, `bottom`, none or both\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {
@@ -75,23 +75,9 @@
75
75
  "kind": "expression"
76
76
  }
77
77
  },
78
- {
79
- "name": ".width",
80
- "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
81
- "value": {
82
- "kind": "expression"
83
- }
84
- },
85
- {
86
- "name": ".height",
87
- "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
88
- "value": {
89
- "kind": "expression"
90
- }
91
- },
92
78
  {
93
79
  "name": ".overlayRole",
94
- "description": "The `role` attribute value to be set on the overlay. Defaults to \"dialog\".",
80
+ "description": "The `role` attribute value to be set on the dialog. Defaults to \"dialog\".",
95
81
  "value": {
96
82
  "kind": "expression"
97
83
  }
@@ -125,15 +111,22 @@
125
111
  }
126
112
  },
127
113
  {
128
- "name": ".overlayClass",
129
- "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
114
+ "name": ".width",
115
+ "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
130
116
  "value": {
131
117
  "kind": "expression"
132
118
  }
133
119
  },
134
120
  {
135
- "name": ".ariaLabel",
136
- "description": "Set the `aria-label` attribute for assistive technologies like\nscreen readers. An empty string value for this property (the\ndefault) means that the `aria-label` attribute is not present.",
121
+ "name": ".height",
122
+ "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
123
+ "value": {
124
+ "kind": "expression"
125
+ }
126
+ },
127
+ {
128
+ "name": ".overlayClass",
129
+ "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
137
130
  "value": {
138
131
  "kind": "expression"
139
132
  }