@vaadin/context-menu 24.0.0-alpha12 → 24.0.0-alpha13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/package.json +11 -11
  2. package/src/vaadin-context-menu-item.d.ts +21 -0
  3. package/src/vaadin-context-menu-item.js +53 -0
  4. package/src/vaadin-context-menu-list-box.d.ts +22 -0
  5. package/src/vaadin-context-menu-list-box.js +81 -0
  6. package/src/vaadin-context-menu-overlay.d.ts +20 -0
  7. package/src/vaadin-context-menu-overlay.js +6 -117
  8. package/src/vaadin-context-menu.d.ts +8 -8
  9. package/src/vaadin-context-menu.js +8 -8
  10. package/src/vaadin-contextmenu-items-mixin.d.ts +15 -31
  11. package/src/vaadin-contextmenu-items-mixin.js +25 -43
  12. package/src/vaadin-menu-overlay-mixin.d.ts +25 -0
  13. package/src/vaadin-menu-overlay-mixin.js +119 -0
  14. package/src/vaadin-menu-overlay-styles.d.ts +8 -0
  15. package/src/vaadin-menu-overlay-styles.js +26 -0
  16. package/theme/lumo/vaadin-context-menu-item-styles.js +46 -0
  17. package/theme/lumo/vaadin-context-menu-list-box-styles.js +47 -0
  18. package/theme/lumo/vaadin-context-menu-overlay-styles.js +33 -0
  19. package/theme/lumo/vaadin-context-menu.js +3 -3
  20. package/theme/material/vaadin-context-menu-item-styles.js +36 -0
  21. package/theme/material/vaadin-context-menu-list-box-styles.js +38 -0
  22. package/theme/material/vaadin-context-menu-overlay-styles.js +15 -0
  23. package/theme/material/vaadin-context-menu.js +3 -3
  24. package/web-types.json +3 -3
  25. package/web-types.lit.json +3 -3
  26. package/theme/lumo/vaadin-context-menu-styles.js +0 -115
  27. package/theme/material/vaadin-context-menu-styles.js +0 -79
package/theme/material/vaadin-context-menu-styles.js DELETED
@@ -1,79 +0,0 @@
1
- import '@vaadin/vaadin-material-styles/font-icons.js';
2
- import '@vaadin/vaadin-material-styles/color.js';
3
- import '@vaadin/vaadin-material-styles/typography.js';
4
- import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
5
- import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
6
-
7
- const contextMenuOverlay = css`
8
- [part='overlay'] {
9
- outline: none;
10
- will-change: transform, opacity;
11
- }
12
- `;
13
-
14
- registerStyles('vaadin-context-menu-overlay', [menuOverlay, contextMenuOverlay], {
15
- moduleId: 'material-context-menu-overlay',
16
- });
17
-
18
- registerStyles(
19
- 'vaadin-context-menu-list-box',
20
- css`
21
- [part='items'] ::slotted([role='menuitem']) {
22
- min-height: 36px;
23
- padding: 8px 32px 8px 10px;
24
- font-size: var(--material-small-font-size);
25
- line-height: 24px;
26
- }
27
-
28
- :host([dir='rtl']) [part='items'] ::slotted([role='menuitem']) {
29
- padding: 8px 10px 8px 32px;
30
- }
31
-
32
- [part='items'] ::slotted([role='menuitem']:hover:not([disabled])) {
33
- background-color: var(--material-secondary-background-color);
34
- }
35
-
36
- [part='items'] ::slotted([role='menuitem'][focused]:not([disabled])) {
37
- background-color: var(--material-divider-color);
38
- }
39
-
40
- @media (pointer: coarse) {
41
- [part='items'] ::slotted([role='menuitem']:hover:not([disabled])),
42
- [part='items'] ::slotted([role='menuitem'][focused]:not([disabled])) {
43
- background-color: transparent;
44
- }
45
- }
46
- `,
47
- { moduleId: 'material-context-menu-list-box' },
48
- );
49
-
50
- registerStyles(
51
- 'vaadin-context-menu-item',
52
- css`
53
- :host([aria-haspopup='true'])::after {
54
- font-family: material-icons;
55
- font-size: var(--material-icon-font-size);
56
- }
57
-
58
- :host(:not([dir='rtl'])[aria-haspopup='true'])::after {
59
- content: var(--material-icons-chevron-right);
60
- padding-left: 9px;
61
- margin-right: -9px;
62
- }
63
-
64
- :host([dir='rtl'][aria-haspopup='true'])::after {
65
- content: var(--material-icons-chevron-left);
66
- padding-right: 9px;
67
- margin-left: -9px;
68
- }
69
-
70
- :host([menu-item-checked]) [part='checkmark']::before {
71
- content: var(--material-icons-check);
72
- }
73
-
74
- :host([expanded]) {
75
- background-color: var(--material-secondary-background-color);
76
- }
77
- `,
78
- { moduleId: 'material-context-menu-item' },
79
- );