@vaadin/popover 24.5.0-alpha5 → 24.5.0-alpha6

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 (11) hide show
  1. package/package.json +8 -8
  2. package/src/vaadin-popover-overlay-mixin.js +6 -0
  3. package/src/vaadin-popover-overlay.js +12 -0
  4. package/src/vaadin-popover.d.ts +6 -0
  5. package/src/vaadin-popover.js +8 -2
  6. package/theme/lumo/vaadin-popover-styles.d.ts +1 -0
  7. package/theme/lumo/vaadin-popover-styles.js +87 -4
  8. package/theme/material/vaadin-popover-styles.d.ts +1 -1
  9. package/theme/material/vaadin-popover-styles.js +87 -4
  10. package/web-types.json +2 -2
  11. package/web-types.lit.json +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/popover",
3
- "version": "24.5.0-alpha5",
3
+ "version": "24.5.0-alpha6",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -35,12 +35,12 @@
35
35
  ],
36
36
  "dependencies": {
37
37
  "@open-wc/dedupe-mixin": "^1.3.0",
38
- "@vaadin/a11y-base": "24.5.0-alpha5",
39
- "@vaadin/component-base": "24.5.0-alpha5",
40
- "@vaadin/overlay": "24.5.0-alpha5",
41
- "@vaadin/vaadin-lumo-styles": "24.5.0-alpha5",
42
- "@vaadin/vaadin-material-styles": "24.5.0-alpha5",
43
- "@vaadin/vaadin-themable-mixin": "24.5.0-alpha5",
38
+ "@vaadin/a11y-base": "24.5.0-alpha6",
39
+ "@vaadin/component-base": "24.5.0-alpha6",
40
+ "@vaadin/overlay": "24.5.0-alpha6",
41
+ "@vaadin/vaadin-lumo-styles": "24.5.0-alpha6",
42
+ "@vaadin/vaadin-material-styles": "24.5.0-alpha6",
43
+ "@vaadin/vaadin-themable-mixin": "24.5.0-alpha6",
44
44
  "lit": "^3.0.0"
45
45
  },
46
46
  "devDependencies": {
@@ -52,5 +52,5 @@
52
52
  "web-types.json",
53
53
  "web-types.lit.json"
54
54
  ],
55
- "gitHead": "4e57d240ababf0c2db9d674891b90bdf3812e6ae"
55
+ "gitHead": "c5f541dbe961a994730d4c60472ae957bf6b4c12"
56
56
  }
package/src/vaadin-popover-overlay-mixin.js CHANGED
@@ -59,6 +59,8 @@ export const PopoverOverlayMixin = (superClass) =>
59
59
  return;
60
60
  }
61
61
 
62
+ this.removeAttribute('arrow-centered');
63
+
62
64
  // Center the overlay horizontally
63
65
  if (this.position === 'bottom' || this.position === 'top') {
64
66
  const targetRect = this.positionTarget.getBoundingClientRect();
@@ -70,6 +72,8 @@ export const PopoverOverlayMixin = (superClass) =>
70
72
  const left = overlayRect.left + offset;
71
73
  if (left > 0) {
72
74
  this.style.left = `${left}px`;
75
+ // Center the pointer arrow horizontally
76
+ this.setAttribute('arrow-centered', '');
73
77
  }
74
78
  }
75
79
 
@@ -77,6 +81,8 @@ export const PopoverOverlayMixin = (superClass) =>
77
81
  const right = parseFloat(this.style.right) + offset;
78
82
  if (right > 0) {
79
83
  this.style.right = `${right}px`;
84
+ // Center the pointer arrow horizontally
85
+ this.setAttribute('arrow-centered', '');
80
86
  }
81
87
  }
82
88
  }
package/src/vaadin-popover-overlay.js CHANGED
@@ -82,6 +82,17 @@ class PopoverOverlay extends PopoverOverlayMixin(DirMixin(ThemableMixin(PolylitM
82
82
  :host([position^='end'][end-aligned]) [part='overlay'] {
83
83
  margin-inline-end: var(--vaadin-popover-offset-end, 0);
84
84
  }
85
+
86
+ [part='arrow'] {
87
+ display: none;
88
+ position: absolute;
89
+ height: 0;
90
+ width: 0;
91
+ }
92
+
93
+ :host([theme~='arrow']) [part='arrow'] {
94
+ display: block;
95
+ }
85
96
  `,
86
97
  ];
87
98
  }
@@ -91,6 +102,7 @@ class PopoverOverlay extends PopoverOverlayMixin(DirMixin(ThemableMixin(PolylitM
91
102
  return html`
92
103
  <div id="backdrop" part="backdrop" hidden ?hidden="${!this.withBackdrop}"></div>
93
104
  <div part="overlay" id="overlay" tabindex="0">
105
+ <div part="arrow"></div>
94
106
  <div part="content" id="content"><slot></slot></div>
95
107
  </div>
96
108
  `;
package/src/vaadin-popover.d.ts CHANGED
@@ -43,6 +43,12 @@ export type PopoverEventMap = HTMLElementEventMap & PopoverCustomEventMap;
43
43
  * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) documentation
44
44
  * for `<vaadin-popover-overlay>` parts.
45
45
  *
46
+ * In addition to `<vaadin-overlay>` parts, the following parts are available for styling:
47
+ *
48
+ * Part name | Description
49
+ * -----------------|-------------------------------------------
50
+ * `arrow` | Optional arrow pointing to the target when using `theme="arrow"`
51
+ *
46
52
  * The following state attributes are available for styling:
47
53
  *
48
54
  * Attribute | Description
package/src/vaadin-popover.js CHANGED
@@ -139,6 +139,12 @@ class PopoverOpenedStateController {
139
139
  * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) documentation
140
140
  * for `<vaadin-popover-overlay>` parts.
141
141
  *
142
+ * In addition to `<vaadin-overlay>` parts, the following parts are available for styling:
143
+ *
144
+ * Part name | Description
145
+ * -----------------|-------------------------------------------
146
+ * `arrow` | Optional arrow pointing to the target when using `theme="arrow"`
147
+ *
142
148
  * The following state attributes are available for styling:
143
149
  *
144
150
  * Attribute | Description
@@ -445,14 +451,14 @@ class Popover extends PopoverPositionMixin(
445
451
  connectedCallback() {
446
452
  super.connectedCallback();
447
453
 
448
- document.addEventListener('click', this.__onGlobalClick, true);
454
+ document.documentElement.addEventListener('click', this.__onGlobalClick, true);
449
455
  }
450
456
 
451
457
  /** @protected */
452
458
  disconnectedCallback() {
453
459
  super.disconnectedCallback();
454
460
 
455
- document.removeEventListener('click', this.__onGlobalClick, true);
461
+ document.documentElement.removeEventListener('click', this.__onGlobalClick, true);
456
462
 
457
463
  this._openedStateController.close(true);
458
464
  }
package/theme/lumo/vaadin-popover-styles.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  import '@vaadin/vaadin-lumo-styles/color.js';
2
+ import '@vaadin/vaadin-lumo-styles/spacing.js';
2
3
  import '@vaadin/vaadin-lumo-styles/style.js';
3
4
  import '@vaadin/vaadin-lumo-styles/typography.js';
package/theme/lumo/vaadin-popover-styles.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import '@vaadin/vaadin-lumo-styles/color.js';
2
+ import '@vaadin/vaadin-lumo-styles/spacing.js';
2
3
  import '@vaadin/vaadin-lumo-styles/style.js';
3
4
  import '@vaadin/vaadin-lumo-styles/typography.js';
4
5
  import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
@@ -6,15 +7,97 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
6
7
 
7
8
  const popoverOverlay = css`
8
9
  :host {
9
- --vaadin-popover-offset-top: var(--lumo-space-xs);
10
- --vaadin-popover-offset-bottom: var(--lumo-space-xs);
11
- --vaadin-popover-offset-start: var(--lumo-space-xs);
12
- --vaadin-popover-offset-end: var(--lumo-space-xs);
10
+ --vaadin-popover-offset-top: var(--_vaadin-popover-default-offset);
11
+ --vaadin-popover-offset-bottom: var(--_vaadin-popover-default-offset);
12
+ --vaadin-popover-offset-start: var(--_vaadin-popover-default-offset);
13
+ --vaadin-popover-offset-end: var(--_vaadin-popover-default-offset);
14
+ --vaadin-popover-arrow-size: 0.5rem;
15
+ --_vaadin-popover-default-offset: var(--lumo-space-xs);
13
16
  }
14
17
 
15
18
  [part='content'] {
16
19
  padding: var(--lumo-space-xs) var(--lumo-space-s);
17
20
  }
21
+
22
+ :host([theme~='arrow']) {
23
+ --_vaadin-popover-default-offset: calc(var(--lumo-space-s) + var(--vaadin-popover-arrow-size) / 2);
24
+ }
25
+
26
+ /* top / bottom position */
27
+ :host([theme~='arrow'][position^='top']) [part='arrow'],
28
+ :host([theme~='arrow'][position^='bottom']) [part='arrow'] {
29
+ border-left: var(--vaadin-popover-arrow-size) solid transparent;
30
+ border-right: var(--vaadin-popover-arrow-size) solid transparent;
31
+ }
32
+
33
+ :host([theme~='arrow'][position^='bottom'][bottom-aligned]) [part='arrow'],
34
+ :host([theme~='arrow'][position^='top'][bottom-aligned]) [part='arrow'] {
35
+ bottom: calc(var(--vaadin-popover-arrow-size) * -1);
36
+ border-top: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
37
+ filter: drop-shadow(0 2px 1px var(--lumo-shade-10pct));
38
+ }
39
+
40
+ :host([theme~='arrow'][position^='bottom'][top-aligned]) [part='arrow'],
41
+ :host([theme~='arrow'][position^='top'][top-aligned]) [part='arrow'] {
42
+ top: calc(var(--vaadin-popover-arrow-size) * -1);
43
+ border-bottom: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
44
+ filter: drop-shadow(0 -2px 1px var(--lumo-shade-10pct));
45
+ }
46
+
47
+ :host([theme~='arrow'][position^='bottom'][start-aligned]) [part='arrow'],
48
+ :host([theme~='arrow'][position^='top'][start-aligned]) [part='arrow'] {
49
+ transform: translateX(-50%);
50
+ inset-inline-start: 1.5rem;
51
+ }
52
+
53
+ :host([theme~='arrow'][position^='bottom'][end-aligned]) [part='arrow'],
54
+ :host([theme~='arrow'][position^='top'][end-aligned]) [part='arrow'] {
55
+ transform: translateX(50%);
56
+ inset-inline-end: 1.5rem;
57
+ }
58
+
59
+ :host([theme~='arrow'][position^='bottom'][arrow-centered]) [part='arrow'],
60
+ :host([theme~='arrow'][position^='top'][arrow-centered]) [part='arrow'] {
61
+ transform: translateX(-50%);
62
+ inset-inline-start: 50%;
63
+ }
64
+
65
+ /* start / end position */
66
+ :host([theme~='arrow'][position^='start']) [part='arrow'],
67
+ :host([theme~='arrow'][position^='end']) [part='arrow'] {
68
+ border-top: var(--vaadin-popover-arrow-size) solid transparent;
69
+ border-bottom: var(--vaadin-popover-arrow-size) solid transparent;
70
+ }
71
+
72
+ :host([theme~='arrow'][position^='start'][start-aligned]) [part='arrow'],
73
+ :host([theme~='arrow'][position^='end'][start-aligned]) [part='arrow'] {
74
+ inset-inline-start: calc(var(--vaadin-popover-arrow-size) * -1);
75
+ border-right: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
76
+ filter: drop-shadow(-2px 0 1px var(--lumo-shade-10pct));
77
+ }
78
+
79
+ :host([theme~='arrow'][position^='start'][end-aligned]) [part='arrow'],
80
+ :host([theme~='arrow'][position^='end'][end-aligned]) [part='arrow'] {
81
+ inset-inline-end: calc(var(--vaadin-popover-arrow-size) * -1);
82
+ border-left: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
83
+ filter: drop-shadow(2px 0 1px var(--lumo-shade-10pct));
84
+ }
85
+
86
+ :host([theme~='arrow'][position^='start'][top-aligned]) [part='arrow'],
87
+ :host([theme~='arrow'][position^='end'][top-aligned]) [part='arrow'] {
88
+ top: 0.5rem;
89
+ }
90
+
91
+ :host([theme~='arrow'][position='start'][top-aligned]) [part='arrow'],
92
+ :host([theme~='arrow'][position='end'][top-aligned]) [part='arrow'] {
93
+ top: 50%;
94
+ transform: translateY(-50%);
95
+ }
96
+
97
+ :host([theme~='arrow'][position^='start'][bottom-aligned]) [part='arrow'],
98
+ :host([theme~='arrow'][position^='end'][bottom-aligned]) [part='arrow'] {
99
+ bottom: 0.5rem;
100
+ }
18
101
  `;
19
102
 
20
103
  registerStyles('vaadin-popover-overlay', [overlay, popoverOverlay], { moduleId: 'lumo-popover-overlay' });
package/theme/material/vaadin-popover-styles.d.ts CHANGED
@@ -1 +1 @@
1
- export {};
1
+ import '@vaadin/vaadin-material-styles/color.js';
package/theme/material/vaadin-popover-styles.js CHANGED
@@ -1,17 +1,100 @@
1
+ import '@vaadin/vaadin-material-styles/color.js';
1
2
  import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
2
3
  import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
3
4
 
4
5
  const popoverOverlay = css`
5
6
  :host {
6
- --vaadin-popover-offset-top: 0.25rem;
7
- --vaadin-popover-offset-bottom: 0.25rem;
8
- --vaadin-popover-offset-start: 0.25rem;
9
- --vaadin-popover-offset-end: 0.25rem;
7
+ --vaadin-popover-offset-top: var(--_vaadin-popover-default-offset);
8
+ --vaadin-popover-offset-bottom: var(--_vaadin-popover-default-offset);
9
+ --vaadin-popover-offset-start: var(--_vaadin-popover-default-offset);
10
+ --vaadin-popover-offset-end: var(--_vaadin-popover-default-offset);
11
+ --vaadin-popover-arrow-size: 0.5rem;
12
+ --_vaadin-popover-default-offset: 0.25rem;
10
13
  }
11
14
 
12
15
  [part='content'] {
13
16
  padding: 0.25rem 0.5rem;
14
17
  }
18
+
19
+ :host([theme~='arrow']) {
20
+ --_vaadin-popover-default-offset: calc(0.25rem + var(--vaadin-popover-arrow-size) / 1.25);
21
+ }
22
+
23
+ /* top / bottom position */
24
+ :host([theme~='arrow'][position^='top']) [part='arrow'],
25
+ :host([theme~='arrow'][position^='bottom']) [part='arrow'] {
26
+ border-left: var(--vaadin-popover-arrow-size) solid transparent;
27
+ border-right: var(--vaadin-popover-arrow-size) solid transparent;
28
+ }
29
+
30
+ :host([theme~='arrow'][position^='bottom'][bottom-aligned]) [part='arrow'],
31
+ :host([theme~='arrow'][position^='top'][bottom-aligned]) [part='arrow'] {
32
+ bottom: calc(var(--vaadin-popover-arrow-size) * -1);
33
+ border-top: var(--vaadin-popover-arrow-size) solid var(--material-background-color);
34
+ filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.14));
35
+ }
36
+
37
+ :host([theme~='arrow'][position^='bottom'][top-aligned]) [part='arrow'],
38
+ :host([theme~='arrow'][position^='top'][top-aligned]) [part='arrow'] {
39
+ top: calc(var(--vaadin-popover-arrow-size) * -1);
40
+ border-bottom: var(--vaadin-popover-arrow-size) solid var(--material-background-color);
41
+ filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, 0.14));
42
+ }
43
+
44
+ :host([theme~='arrow'][position^='bottom'][start-aligned]) [part='arrow'],
45
+ :host([theme~='arrow'][position^='top'][start-aligned]) [part='arrow'] {
46
+ transform: translateX(-50%);
47
+ inset-inline-start: 1.5rem;
48
+ }
49
+
50
+ :host([theme~='arrow'][position^='bottom'][end-aligned]) [part='arrow'],
51
+ :host([theme~='arrow'][position^='top'][end-aligned]) [part='arrow'] {
52
+ transform: translateX(50%);
53
+ inset-inline-end: 1.5rem;
54
+ }
55
+
56
+ :host([theme~='arrow'][position^='bottom'][arrow-centered]) [part='arrow'],
57
+ :host([theme~='arrow'][position^='top'][arrow-centered]) [part='arrow'] {
58
+ transform: translateX(-50%);
59
+ inset-inline-start: 50%;
60
+ }
61
+
62
+ /* start / end position */
63
+ :host([theme~='arrow'][position^='start']) [part='arrow'],
64
+ :host([theme~='arrow'][position^='end']) [part='arrow'] {
65
+ border-top: var(--vaadin-popover-arrow-size) solid transparent;
66
+ border-bottom: var(--vaadin-popover-arrow-size) solid transparent;
67
+ }
68
+
69
+ :host([theme~='arrow'][position^='start'][start-aligned]) [part='arrow'],
70
+ :host([theme~='arrow'][position^='end'][start-aligned]) [part='arrow'] {
71
+ inset-inline-start: calc(var(--vaadin-popover-arrow-size) * -1);
72
+ border-right: var(--vaadin-popover-arrow-size) solid var(--material-background-color);
73
+ filter: drop-shadow(-2px 0 1px rgba(0, 0, 0, 0.14));
74
+ }
75
+
76
+ :host([theme~='arrow'][position^='start'][end-aligned]) [part='arrow'],
77
+ :host([theme~='arrow'][position^='end'][end-aligned]) [part='arrow'] {
78
+ inset-inline-end: calc(var(--vaadin-popover-arrow-size) * -1);
79
+ border-left: var(--vaadin-popover-arrow-size) solid var(--material-background-color);
80
+ filter: drop-shadow(2px 0 1px rgba(0, 0, 0, 0.14));
81
+ }
82
+
83
+ :host([theme~='arrow'][position^='start'][top-aligned]) [part='arrow'],
84
+ :host([theme~='arrow'][position^='end'][top-aligned]) [part='arrow'] {
85
+ top: 0.5rem;
86
+ }
87
+
88
+ :host([theme~='arrow'][position='start'][top-aligned]) [part='arrow'],
89
+ :host([theme~='arrow'][position='end'][top-aligned]) [part='arrow'] {
90
+ top: 50%;
91
+ transform: translateY(-50%);
92
+ }
93
+
94
+ :host([theme~='arrow'][position^='start'][bottom-aligned]) [part='arrow'],
95
+ :host([theme~='arrow'][position^='end'][bottom-aligned]) [part='arrow'] {
96
+ bottom: 0.5rem;
97
+ }
15
98
  `;
16
99
 
17
100
  registerStyles('vaadin-popover-overlay', [overlay, popoverOverlay], { moduleId: 'material-popover-overlay' });
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/popover",
4
- "version": "24.5.0-alpha5",
4
+ "version": "24.5.0-alpha6",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-popover",
11
- "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\n`<vaadin-popover>` uses `<vaadin-popover-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha5/#/elements/vaadin-overlay) documentation\nfor `<vaadin-popover-overlay>` parts.\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-popover>` is\npropagated to the internal `<vaadin-popover-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-popover>` element:\n\nCustom CSS property | Description\n---------------------------------|-------------\n`--vaadin-popover-offset-top` | Used as an offset when the popover is aligned vertically below the target\n`--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target\n`--vaadin-popover-offset-start` | Used as an offset when the popover is aligned horizontally after the target\n`--vaadin-popover-offset-end` | Used as an offset when the popover is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
11
+ "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\n`<vaadin-popover>` uses `<vaadin-popover-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha6/#/elements/vaadin-overlay) documentation\nfor `<vaadin-popover-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`arrow` | Optional arrow pointing to the target when using `theme=\"arrow\"`\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-popover>` is\npropagated to the internal `<vaadin-popover-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-popover>` element:\n\nCustom CSS property | Description\n---------------------------------|-------------\n`--vaadin-popover-offset-top` | Used as an offset when the popover is aligned vertically below the target\n`--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target\n`--vaadin-popover-offset-start` | Used as an offset when the popover is aligned horizontally after the target\n`--vaadin-popover-offset-end` | Used as an offset when the popover is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "position",
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/popover",
4
- "version": "24.5.0-alpha5",
4
+ "version": "24.5.0-alpha6",
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-popover",
19
- "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\n`<vaadin-popover>` uses `<vaadin-popover-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha5/#/elements/vaadin-overlay) documentation\nfor `<vaadin-popover-overlay>` parts.\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-popover>` is\npropagated to the internal `<vaadin-popover-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-popover>` element:\n\nCustom CSS property | Description\n---------------------------------|-------------\n`--vaadin-popover-offset-top` | Used as an offset when the popover is aligned vertically below the target\n`--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target\n`--vaadin-popover-offset-start` | Used as an offset when the popover is aligned horizontally after the target\n`--vaadin-popover-offset-end` | Used as an offset when the popover is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
19
+ "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\n`<vaadin-popover>` uses `<vaadin-popover-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha6/#/elements/vaadin-overlay) documentation\nfor `<vaadin-popover-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`arrow` | Optional arrow pointing to the target when using `theme=\"arrow\"`\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-popover>` is\npropagated to the internal `<vaadin-popover-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-popover>` element:\n\nCustom CSS property | Description\n---------------------------------|-------------\n`--vaadin-popover-offset-top` | Used as an offset when the popover is aligned vertically below the target\n`--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target\n`--vaadin-popover-offset-start` | Used as an offset when the popover is aligned horizontally after the target\n`--vaadin-popover-offset-end` | Used as an offset when the popover is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {