@m3e/menu 1.1.11 → 1.2.1
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.
- package/README.md +138 -83
- package/dist/css-custom-data.json +282 -12
- package/dist/custom-elements.json +307 -12
- package/dist/html-custom-data.json +9 -4
- package/dist/index.js +129 -17
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +7 -7
- package/dist/index.min.js.map +1 -1
- package/dist/src/MenuElement.d.ts +12 -0
- package/dist/src/MenuElement.d.ts.map +1 -1
- package/dist/src/MenuItemCheckboxElement.d.ts +19 -2
- package/dist/src/MenuItemCheckboxElement.d.ts.map +1 -1
- package/dist/src/MenuItemElement.d.ts +18 -2
- package/dist/src/MenuItemElement.d.ts.map +1 -1
- package/dist/src/MenuItemElementBase.d.ts.map +1 -1
- package/dist/src/MenuItemRadioElement.d.ts +19 -2
- package/dist/src/MenuItemRadioElement.d.ts.map +1 -1
- package/dist/src/MenuVariant.d.ts +3 -0
- package/dist/src/MenuVariant.d.ts.map +1 -0
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -62,6 +62,14 @@
|
|
|
62
62
|
"name": "*",
|
|
63
63
|
"package": "\"./MenuTriggerElement\""
|
|
64
64
|
}
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"kind": "js",
|
|
68
|
+
"name": "*",
|
|
69
|
+
"declaration": {
|
|
70
|
+
"name": "*",
|
|
71
|
+
"package": "\"./MenuVariant\""
|
|
72
|
+
}
|
|
65
73
|
}
|
|
66
74
|
]
|
|
67
75
|
},
|
|
@@ -78,6 +86,10 @@
|
|
|
78
86
|
"description": "Controls the corner radius of the menu container.",
|
|
79
87
|
"name": "--m3e-menu-container-shape"
|
|
80
88
|
},
|
|
89
|
+
{
|
|
90
|
+
"description": "Controls the corner radius of the menu container when active.",
|
|
91
|
+
"name": "--m3e-menu-active-container-shape"
|
|
92
|
+
},
|
|
81
93
|
{
|
|
82
94
|
"description": "Minimum width of the menu container.",
|
|
83
95
|
"name": "--m3e-menu-container-min-width"
|
|
@@ -94,6 +106,10 @@
|
|
|
94
106
|
"description": "Vertical padding inside the menu container.",
|
|
95
107
|
"name": "--m3e-menu-container-padding-block"
|
|
96
108
|
},
|
|
109
|
+
{
|
|
110
|
+
"description": "Horizontal padding inside the menu container.",
|
|
111
|
+
"name": "--m3e-menu-container-padding-inline"
|
|
112
|
+
},
|
|
97
113
|
{
|
|
98
114
|
"description": "Background color of the menu container.",
|
|
99
115
|
"name": "--m3e-menu-container-color"
|
|
@@ -102,9 +118,17 @@
|
|
|
102
118
|
"description": "Box shadow elevation of the menu container.",
|
|
103
119
|
"name": "--m3e-menu-container-elevation"
|
|
104
120
|
},
|
|
121
|
+
{
|
|
122
|
+
"description": "Background color of the menu container for vibrant variant.",
|
|
123
|
+
"name": "--m3e-vibrant-menu-container-color"
|
|
124
|
+
},
|
|
105
125
|
{
|
|
106
126
|
"description": "Vertical spacing around slotted `m3e-divider` elements.",
|
|
107
127
|
"name": "--m3e-menu-divider-spacing"
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"description": "Gap between content in the menu.",
|
|
131
|
+
"name": "--m3e-menu-gap"
|
|
108
132
|
}
|
|
109
133
|
],
|
|
110
134
|
"slots": [
|
|
@@ -114,6 +138,15 @@
|
|
|
114
138
|
}
|
|
115
139
|
],
|
|
116
140
|
"members": [
|
|
141
|
+
{
|
|
142
|
+
"kind": "field",
|
|
143
|
+
"name": "__activeMenu",
|
|
144
|
+
"type": {
|
|
145
|
+
"text": "M3eMenuElement | undefined"
|
|
146
|
+
},
|
|
147
|
+
"static": true,
|
|
148
|
+
"privacy": "private"
|
|
149
|
+
},
|
|
117
150
|
{
|
|
118
151
|
"kind": "field",
|
|
119
152
|
"name": "#trigger",
|
|
@@ -142,6 +175,12 @@
|
|
|
142
175
|
"privacy": "private",
|
|
143
176
|
"readonly": true
|
|
144
177
|
},
|
|
178
|
+
{
|
|
179
|
+
"kind": "field",
|
|
180
|
+
"name": "#mouseEnterHandler",
|
|
181
|
+
"privacy": "private",
|
|
182
|
+
"readonly": true
|
|
183
|
+
},
|
|
145
184
|
{
|
|
146
185
|
"kind": "field",
|
|
147
186
|
"name": "#documentClickHandler",
|
|
@@ -181,6 +220,17 @@
|
|
|
181
220
|
"description": "The position of the menu, on the y-axis.",
|
|
182
221
|
"attribute": "position-y"
|
|
183
222
|
},
|
|
223
|
+
{
|
|
224
|
+
"kind": "field",
|
|
225
|
+
"name": "variant",
|
|
226
|
+
"type": {
|
|
227
|
+
"text": "MenuVariant"
|
|
228
|
+
},
|
|
229
|
+
"default": "\"standard\"",
|
|
230
|
+
"description": "The appearance variant of the menu.",
|
|
231
|
+
"attribute": "variant",
|
|
232
|
+
"reflects": true
|
|
233
|
+
},
|
|
184
234
|
{
|
|
185
235
|
"kind": "field",
|
|
186
236
|
"name": "items",
|
|
@@ -315,6 +365,16 @@
|
|
|
315
365
|
}
|
|
316
366
|
]
|
|
317
367
|
},
|
|
368
|
+
{
|
|
369
|
+
"kind": "method",
|
|
370
|
+
"name": "#handleMouseEnter",
|
|
371
|
+
"privacy": "private",
|
|
372
|
+
"return": {
|
|
373
|
+
"type": {
|
|
374
|
+
"text": "void"
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
},
|
|
318
378
|
{
|
|
319
379
|
"kind": "method",
|
|
320
380
|
"name": "#handleDocumentClick",
|
|
@@ -350,6 +410,26 @@
|
|
|
350
410
|
}
|
|
351
411
|
}
|
|
352
412
|
]
|
|
413
|
+
},
|
|
414
|
+
{
|
|
415
|
+
"kind": "method",
|
|
416
|
+
"name": "#activate",
|
|
417
|
+
"privacy": "private",
|
|
418
|
+
"return": {
|
|
419
|
+
"type": {
|
|
420
|
+
"text": "void"
|
|
421
|
+
}
|
|
422
|
+
}
|
|
423
|
+
},
|
|
424
|
+
{
|
|
425
|
+
"kind": "method",
|
|
426
|
+
"name": "#deactivate",
|
|
427
|
+
"privacy": "private",
|
|
428
|
+
"return": {
|
|
429
|
+
"type": {
|
|
430
|
+
"text": "void"
|
|
431
|
+
}
|
|
432
|
+
}
|
|
353
433
|
}
|
|
354
434
|
],
|
|
355
435
|
"events": [
|
|
@@ -381,6 +461,15 @@
|
|
|
381
461
|
"default": "\"below\"",
|
|
382
462
|
"fieldName": "positionY"
|
|
383
463
|
},
|
|
464
|
+
{
|
|
465
|
+
"description": "The appearance variant of the menu.",
|
|
466
|
+
"name": "variant",
|
|
467
|
+
"type": {
|
|
468
|
+
"text": "MenuVariant"
|
|
469
|
+
},
|
|
470
|
+
"default": "\"standard\"",
|
|
471
|
+
"fieldName": "variant"
|
|
472
|
+
},
|
|
384
473
|
{
|
|
385
474
|
"name": "submenu",
|
|
386
475
|
"type": {
|
|
@@ -454,12 +543,12 @@
|
|
|
454
543
|
"name": "--m3e-menu-item-ripple-color"
|
|
455
544
|
},
|
|
456
545
|
{
|
|
457
|
-
"description": "Text color for selected
|
|
458
|
-
"name": "--m3e-menu-selected-color"
|
|
546
|
+
"description": "Text color for selected items.",
|
|
547
|
+
"name": "--m3e-menu-item-selected-color"
|
|
459
548
|
},
|
|
460
549
|
{
|
|
461
|
-
"description": "Background color for selected
|
|
462
|
-
"name": "--m3e-menu-selected-container-color"
|
|
550
|
+
"description": "Background color for selected items.",
|
|
551
|
+
"name": "--m3e-menu-item-selected-container-color"
|
|
463
552
|
},
|
|
464
553
|
{
|
|
465
554
|
"description": "State layer hover color for selected items.",
|
|
@@ -473,6 +562,14 @@
|
|
|
473
562
|
"description": "Ripple color for selected items.",
|
|
474
563
|
"name": "--m3e-menu-item-selected-ripple-color"
|
|
475
564
|
},
|
|
565
|
+
{
|
|
566
|
+
"description": "State layer color for expanded items.",
|
|
567
|
+
"name": "--m3e-menu-item-active-state-layer-color"
|
|
568
|
+
},
|
|
569
|
+
{
|
|
570
|
+
"description": "State layer opacity for expanded items.",
|
|
571
|
+
"name": "--m3e-menu-item-active-state-layer-opacity"
|
|
572
|
+
},
|
|
476
573
|
{
|
|
477
574
|
"description": "Base color for disabled items.",
|
|
478
575
|
"name": "--m3e-menu-item-disabled-color"
|
|
@@ -481,6 +578,50 @@
|
|
|
481
578
|
"description": "Opacity percentage for disabled item color mix.",
|
|
482
579
|
"name": "--m3e-menu-item-disabled-opacity"
|
|
483
580
|
},
|
|
581
|
+
{
|
|
582
|
+
"description": "Text color for unselected, enabled menu items for vibrant variant.",
|
|
583
|
+
"name": "--m3e-vibrant-menu-item-color"
|
|
584
|
+
},
|
|
585
|
+
{
|
|
586
|
+
"description": "State layer hover color for unselected items for vibrant variant.",
|
|
587
|
+
"name": "--m3e-vibrant-menu-item-container-hover-color"
|
|
588
|
+
},
|
|
589
|
+
{
|
|
590
|
+
"description": "State layer focus color for unselected items for vibrant variant.",
|
|
591
|
+
"name": "--m3e-vibrant-menu-item-container-focus-color"
|
|
592
|
+
},
|
|
593
|
+
{
|
|
594
|
+
"description": "Ripple color for unselected items for vibrant variant.",
|
|
595
|
+
"name": "--m3e-vibrant-menu-item-ripple-color"
|
|
596
|
+
},
|
|
597
|
+
{
|
|
598
|
+
"description": "Text color for selected items for vibrant variant.",
|
|
599
|
+
"name": "--m3e-vibrant-menu-item-selected-color"
|
|
600
|
+
},
|
|
601
|
+
{
|
|
602
|
+
"description": "Background color for selected items for vibrant variant.",
|
|
603
|
+
"name": "--m3e-vibrant-menu-item-selected-container-color"
|
|
604
|
+
},
|
|
605
|
+
{
|
|
606
|
+
"description": "State layer hover color for selected items for vibrant variant.",
|
|
607
|
+
"name": "--m3e-vibrant-menu-item-selected-container-hover-color"
|
|
608
|
+
},
|
|
609
|
+
{
|
|
610
|
+
"description": "State layer focus color for selected items for vibrant variant.",
|
|
611
|
+
"name": "--m3e-vibrant-menu-item-selected-container-focus-color"
|
|
612
|
+
},
|
|
613
|
+
{
|
|
614
|
+
"description": "Ripple color for selected items for vibrant variant.",
|
|
615
|
+
"name": "--m3e-vibrant-menu-item-selected-ripple-color"
|
|
616
|
+
},
|
|
617
|
+
{
|
|
618
|
+
"description": "State layer color for expanded items for vibrant variant.",
|
|
619
|
+
"name": "--m3e-vibrant-menu-item-active-state-layer-color"
|
|
620
|
+
},
|
|
621
|
+
{
|
|
622
|
+
"description": "Base color for disabled items for vibrant variant",
|
|
623
|
+
"name": "--m3e-vibrant-menu-item-disabled-color"
|
|
624
|
+
},
|
|
484
625
|
{
|
|
485
626
|
"description": "Horizontal gap between icon and content.",
|
|
486
627
|
"name": "--m3e-menu-item-icon-label-space"
|
|
@@ -516,6 +657,22 @@
|
|
|
516
657
|
{
|
|
517
658
|
"description": "Font size for leading and trailing icons.",
|
|
518
659
|
"name": "--m3e-menu-item-icon-size"
|
|
660
|
+
},
|
|
661
|
+
{
|
|
662
|
+
"description": "Base shape of the menu item.",
|
|
663
|
+
"name": "--m3e-menu-item-shape"
|
|
664
|
+
},
|
|
665
|
+
{
|
|
666
|
+
"description": "Shape used for a selected menu item.",
|
|
667
|
+
"name": "--m3e-menu-item-selected-shape"
|
|
668
|
+
},
|
|
669
|
+
{
|
|
670
|
+
"description": "Shape for the first menu item in a menu.",
|
|
671
|
+
"name": "--m3e-menu-item-first-child-shape"
|
|
672
|
+
},
|
|
673
|
+
{
|
|
674
|
+
"description": "Shape for the last menu item in a menu.",
|
|
675
|
+
"name": "--m3e-menu-item-last-child-shape"
|
|
519
676
|
}
|
|
520
677
|
],
|
|
521
678
|
"slots": [
|
|
@@ -847,12 +1004,12 @@
|
|
|
847
1004
|
"name": "--m3e-menu-item-ripple-color"
|
|
848
1005
|
},
|
|
849
1006
|
{
|
|
850
|
-
"description": "Text color for selected
|
|
851
|
-
"name": "--m3e-menu-selected-color"
|
|
1007
|
+
"description": "Text color for selected items.",
|
|
1008
|
+
"name": "--m3e-menu-item-selected-color"
|
|
852
1009
|
},
|
|
853
1010
|
{
|
|
854
|
-
"description": "Background color for selected
|
|
855
|
-
"name": "--m3e-menu-selected-container-color"
|
|
1011
|
+
"description": "Background color for selected items.",
|
|
1012
|
+
"name": "--m3e-menu-item-selected-container-color"
|
|
856
1013
|
},
|
|
857
1014
|
{
|
|
858
1015
|
"description": "State layer hover color for selected items.",
|
|
@@ -866,6 +1023,14 @@
|
|
|
866
1023
|
"description": "Ripple color for selected items.",
|
|
867
1024
|
"name": "--m3e-menu-item-selected-ripple-color"
|
|
868
1025
|
},
|
|
1026
|
+
{
|
|
1027
|
+
"description": "State layer color for expanded items.",
|
|
1028
|
+
"name": "--m3e-menu-item-active-state-layer-color"
|
|
1029
|
+
},
|
|
1030
|
+
{
|
|
1031
|
+
"description": "State layer opacity for expanded items.",
|
|
1032
|
+
"name": "--m3e-menu-item-active-state-layer-opacity"
|
|
1033
|
+
},
|
|
869
1034
|
{
|
|
870
1035
|
"description": "Base color for disabled items.",
|
|
871
1036
|
"name": "--m3e-menu-item-disabled-color"
|
|
@@ -874,6 +1039,50 @@
|
|
|
874
1039
|
"description": "Opacity percentage for disabled item color mix.",
|
|
875
1040
|
"name": "--m3e-menu-item-disabled-opacity"
|
|
876
1041
|
},
|
|
1042
|
+
{
|
|
1043
|
+
"description": "Text color for unselected, enabled menu items for vibrant variant.",
|
|
1044
|
+
"name": "--m3e-vibrant-menu-item-color"
|
|
1045
|
+
},
|
|
1046
|
+
{
|
|
1047
|
+
"description": "State layer hover color for unselected items for vibrant variant.",
|
|
1048
|
+
"name": "--m3e-vibrant-menu-item-container-hover-color"
|
|
1049
|
+
},
|
|
1050
|
+
{
|
|
1051
|
+
"description": "State layer focus color for unselected items for vibrant variant.",
|
|
1052
|
+
"name": "--m3e-vibrant-menu-item-container-focus-color"
|
|
1053
|
+
},
|
|
1054
|
+
{
|
|
1055
|
+
"description": "Ripple color for unselected items for vibrant variant.",
|
|
1056
|
+
"name": "--m3e-vibrant-menu-item-ripple-color"
|
|
1057
|
+
},
|
|
1058
|
+
{
|
|
1059
|
+
"description": "Text color for selected items for vibrant variant.",
|
|
1060
|
+
"name": "--m3e-vibrant-menu-item-selected-color"
|
|
1061
|
+
},
|
|
1062
|
+
{
|
|
1063
|
+
"description": "Background color for selected items for vibrant variant.",
|
|
1064
|
+
"name": "--m3e-vibrant-menu-item-selected-container-color"
|
|
1065
|
+
},
|
|
1066
|
+
{
|
|
1067
|
+
"description": "State layer hover color for selected items for vibrant variant.",
|
|
1068
|
+
"name": "--m3e-vibrant-menu-item-selected-container-hover-color"
|
|
1069
|
+
},
|
|
1070
|
+
{
|
|
1071
|
+
"description": "State layer focus color for selected items for vibrant variant.",
|
|
1072
|
+
"name": "--m3e-vibrant-menu-item-selected-container-focus-color"
|
|
1073
|
+
},
|
|
1074
|
+
{
|
|
1075
|
+
"description": "Ripple color for selected items for vibrant variant.",
|
|
1076
|
+
"name": "--m3e-vibrant-menu-item-selected-ripple-color"
|
|
1077
|
+
},
|
|
1078
|
+
{
|
|
1079
|
+
"description": "State layer color for expanded items for vibrant variant.",
|
|
1080
|
+
"name": "--m3e-vibrant-menu-item-active-state-layer-color"
|
|
1081
|
+
},
|
|
1082
|
+
{
|
|
1083
|
+
"description": "Base color for disabled items for vibrant variant.",
|
|
1084
|
+
"name": "--m3e-vibrant-menu-item-disabled-color"
|
|
1085
|
+
},
|
|
877
1086
|
{
|
|
878
1087
|
"description": "Horizontal gap between icon and content.",
|
|
879
1088
|
"name": "--m3e-menu-item-icon-label-space"
|
|
@@ -909,6 +1118,18 @@
|
|
|
909
1118
|
{
|
|
910
1119
|
"description": "Font size for leading and trailing icons.",
|
|
911
1120
|
"name": "--m3e-menu-item-icon-size"
|
|
1121
|
+
},
|
|
1122
|
+
{
|
|
1123
|
+
"description": "Base shape of the menu item.",
|
|
1124
|
+
"name": "--m3e-menu-item-shape"
|
|
1125
|
+
},
|
|
1126
|
+
{
|
|
1127
|
+
"description": "Shape for the first menu item in a menu.",
|
|
1128
|
+
"name": "--m3e-menu-item-first-child-shape"
|
|
1129
|
+
},
|
|
1130
|
+
{
|
|
1131
|
+
"description": "Shape for the last menu item in a menu.",
|
|
1132
|
+
"name": "--m3e-menu-item-last-child-shape"
|
|
912
1133
|
}
|
|
913
1134
|
],
|
|
914
1135
|
"slots": [
|
|
@@ -1810,12 +2031,12 @@
|
|
|
1810
2031
|
"name": "--m3e-menu-item-ripple-color"
|
|
1811
2032
|
},
|
|
1812
2033
|
{
|
|
1813
|
-
"description": "Text color for selected
|
|
1814
|
-
"name": "--m3e-menu-selected-color"
|
|
2034
|
+
"description": "Text color for selected items.",
|
|
2035
|
+
"name": "--m3e-menu-item-selected-color"
|
|
1815
2036
|
},
|
|
1816
2037
|
{
|
|
1817
|
-
"description": "Background color for selected
|
|
1818
|
-
"name": "--m3e-menu-selected-container-color"
|
|
2038
|
+
"description": "Background color for selected items.",
|
|
2039
|
+
"name": "--m3e-menu-item-selected-container-color"
|
|
1819
2040
|
},
|
|
1820
2041
|
{
|
|
1821
2042
|
"description": "State layer hover color for selected items.",
|
|
@@ -1829,6 +2050,14 @@
|
|
|
1829
2050
|
"description": "Ripple color for selected items.",
|
|
1830
2051
|
"name": "--m3e-menu-item-selected-ripple-color"
|
|
1831
2052
|
},
|
|
2053
|
+
{
|
|
2054
|
+
"description": "State layer color for expanded items.",
|
|
2055
|
+
"name": "--m3e-menu-item-active-state-layer-color"
|
|
2056
|
+
},
|
|
2057
|
+
{
|
|
2058
|
+
"description": "State layer opacity for expanded items.",
|
|
2059
|
+
"name": "--m3e-menu-item-active-state-layer-opacity"
|
|
2060
|
+
},
|
|
1832
2061
|
{
|
|
1833
2062
|
"description": "Base color for disabled items.",
|
|
1834
2063
|
"name": "--m3e-menu-item-disabled-color"
|
|
@@ -1837,6 +2066,50 @@
|
|
|
1837
2066
|
"description": "Opacity percentage for disabled item color mix.",
|
|
1838
2067
|
"name": "--m3e-menu-item-disabled-opacity"
|
|
1839
2068
|
},
|
|
2069
|
+
{
|
|
2070
|
+
"description": "Text color for unselected, enabled menu items for vibrant variant.",
|
|
2071
|
+
"name": "--m3e-vibrant-menu-item-color"
|
|
2072
|
+
},
|
|
2073
|
+
{
|
|
2074
|
+
"description": "State layer hover color for unselected items for vibrant variant.",
|
|
2075
|
+
"name": "--m3e-vibrant-menu-item-container-hover-color"
|
|
2076
|
+
},
|
|
2077
|
+
{
|
|
2078
|
+
"description": "State layer focus color for unselected items for vibrant variant.",
|
|
2079
|
+
"name": "--m3e-vibrant-menu-item-container-focus-color"
|
|
2080
|
+
},
|
|
2081
|
+
{
|
|
2082
|
+
"description": "Ripple color for unselected items for vibrant variant.",
|
|
2083
|
+
"name": "--m3e-vibrant-menu-item-ripple-color"
|
|
2084
|
+
},
|
|
2085
|
+
{
|
|
2086
|
+
"description": "Text color for selected items for vibrant variant.",
|
|
2087
|
+
"name": "--m3e-vibrant-menu-item-selected-color"
|
|
2088
|
+
},
|
|
2089
|
+
{
|
|
2090
|
+
"description": "Background color for selected items for vibrant variant.",
|
|
2091
|
+
"name": "--m3e-vibrant-menu-item-selected-container-color"
|
|
2092
|
+
},
|
|
2093
|
+
{
|
|
2094
|
+
"description": "State layer hover color for selected items for vibrant variant.",
|
|
2095
|
+
"name": "--m3e-vibrant-menu-item-selected-container-hover-color"
|
|
2096
|
+
},
|
|
2097
|
+
{
|
|
2098
|
+
"description": "State layer focus color for selected items for vibrant variant.",
|
|
2099
|
+
"name": "--m3e-vibrant-menu-item-selected-container-focus-color"
|
|
2100
|
+
},
|
|
2101
|
+
{
|
|
2102
|
+
"description": "Ripple color for selected items for vibrant variant.",
|
|
2103
|
+
"name": "--m3e-vibrant-menu-item-selected-ripple-color"
|
|
2104
|
+
},
|
|
2105
|
+
{
|
|
2106
|
+
"description": "State layer color for expanded items for vibrant variant.",
|
|
2107
|
+
"name": "--m3e-vibrant-menu-item-active-state-layer-color"
|
|
2108
|
+
},
|
|
2109
|
+
{
|
|
2110
|
+
"description": "Base color for disabled items for vibrant variant",
|
|
2111
|
+
"name": "--m3e-vibrant-menu-item-disabled-color"
|
|
2112
|
+
},
|
|
1840
2113
|
{
|
|
1841
2114
|
"description": "Horizontal gap between icon and content.",
|
|
1842
2115
|
"name": "--m3e-menu-item-icon-label-space"
|
|
@@ -1872,6 +2145,22 @@
|
|
|
1872
2145
|
{
|
|
1873
2146
|
"description": "Font size for leading and trailing icons.",
|
|
1874
2147
|
"name": "--m3e-menu-item-icon-size"
|
|
2148
|
+
},
|
|
2149
|
+
{
|
|
2150
|
+
"description": "Base shape of the menu item.",
|
|
2151
|
+
"name": "--m3e-menu-item-shape"
|
|
2152
|
+
},
|
|
2153
|
+
{
|
|
2154
|
+
"description": "Shape used for a selected menu item.",
|
|
2155
|
+
"name": "--m3e-menu-item-selected-shape"
|
|
2156
|
+
},
|
|
2157
|
+
{
|
|
2158
|
+
"description": "Shape for the first menu item in a menu.",
|
|
2159
|
+
"name": "--m3e-menu-item-first-child-shape"
|
|
2160
|
+
},
|
|
2161
|
+
{
|
|
2162
|
+
"description": "Shape for the last menu item in a menu.",
|
|
2163
|
+
"name": "--m3e-menu-item-last-child-shape"
|
|
1875
2164
|
}
|
|
1876
2165
|
],
|
|
1877
2166
|
"slots": [
|
|
@@ -2432,6 +2721,12 @@
|
|
|
2432
2721
|
}
|
|
2433
2722
|
]
|
|
2434
2723
|
},
|
|
2724
|
+
{
|
|
2725
|
+
"kind": "javascript-module",
|
|
2726
|
+
"path": "src/MenuVariant.ts",
|
|
2727
|
+
"declarations": [],
|
|
2728
|
+
"exports": []
|
|
2729
|
+
},
|
|
2435
2730
|
{
|
|
2436
2731
|
"kind": "javascript-module",
|
|
2437
2732
|
"path": "../core/src/shared/mixins/AttachInternals.ts",
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"tags": [
|
|
5
5
|
{
|
|
6
6
|
"name": "m3e-menu",
|
|
7
|
-
"description": "Presents a list of choices on a temporary surface.\n---\n\n\n### **Events:**\n - **beforetoggle** - Dispatched before the toggle state changes.\n- **toggle** - Dispatched after the toggle state has changed.\n\n### **Methods:**\n - **show(trigger: _HTMLElement_): _Promise<void>_** - Opens the menu.\n- **hide(restoreFocus: _boolean_): _void_** - Hides the menu.\n- **hideAll(restoreFocus: _boolean_): _void_** - Closes this menu and any parenting menus.\n- **toggle(trigger: _HTMLElement_): _Promise<void>_** - Toggles the menu.\n\n### **Slots:**\n - _default_ - Renders the contents of the menu.\n\n### **CSS Properties:**\n - **--m3e-menu-container-shape** - Controls the corner radius of the menu container. _(default: undefined)_\n- **--m3e-menu-container-min-width** - Minimum width of the menu container. _(default: undefined)_\n- **--m3e-menu-container-max-width** - Maximum width of the menu container. _(default: undefined)_\n- **--m3e-menu-container-max-height** - Maximum height of the menu container. _(default: undefined)_\n- **--m3e-menu-container-padding-block** - Vertical padding inside the menu container. _(default: undefined)_\n- **--m3e-menu-container-color** - Background color of the menu container. _(default: undefined)_\n- **--m3e-menu-container-elevation** - Box shadow elevation of the menu container. _(default: undefined)_\n- **--m3e-menu-divider-spacing** - Vertical spacing around slotted `m3e-divider` elements. _(default: undefined)_",
|
|
7
|
+
"description": "Presents a list of choices on a temporary surface.\n---\n\n\n### **Events:**\n - **beforetoggle** - Dispatched before the toggle state changes.\n- **toggle** - Dispatched after the toggle state has changed.\n\n### **Methods:**\n - **show(trigger: _HTMLElement_): _Promise<void>_** - Opens the menu.\n- **hide(restoreFocus: _boolean_): _void_** - Hides the menu.\n- **hideAll(restoreFocus: _boolean_): _void_** - Closes this menu and any parenting menus.\n- **toggle(trigger: _HTMLElement_): _Promise<void>_** - Toggles the menu.\n\n### **Slots:**\n - _default_ - Renders the contents of the menu.\n\n### **CSS Properties:**\n - **--m3e-menu-container-shape** - Controls the corner radius of the menu container. _(default: undefined)_\n- **--m3e-menu-active-container-shape** - Controls the corner radius of the menu container when active. _(default: undefined)_\n- **--m3e-menu-container-min-width** - Minimum width of the menu container. _(default: undefined)_\n- **--m3e-menu-container-max-width** - Maximum width of the menu container. _(default: undefined)_\n- **--m3e-menu-container-max-height** - Maximum height of the menu container. _(default: undefined)_\n- **--m3e-menu-container-padding-block** - Vertical padding inside the menu container. _(default: undefined)_\n- **--m3e-menu-container-padding-inline** - Horizontal padding inside the menu container. _(default: undefined)_\n- **--m3e-menu-container-color** - Background color of the menu container. _(default: undefined)_\n- **--m3e-menu-container-elevation** - Box shadow elevation of the menu container. _(default: undefined)_\n- **--m3e-vibrant-menu-container-color** - Background color of the menu container for vibrant variant. _(default: undefined)_\n- **--m3e-menu-divider-spacing** - Vertical spacing around slotted `m3e-divider` elements. _(default: undefined)_\n- **--m3e-menu-gap** - Gap between content in the menu. _(default: undefined)_",
|
|
8
8
|
"attributes": [
|
|
9
9
|
{
|
|
10
10
|
"name": "position-x",
|
|
@@ -16,6 +16,11 @@
|
|
|
16
16
|
"description": "The position of the menu, on the y-axis.",
|
|
17
17
|
"values": [{ "name": "MenuPositionY" }]
|
|
18
18
|
},
|
|
19
|
+
{
|
|
20
|
+
"name": "variant",
|
|
21
|
+
"description": "The appearance variant of the menu.",
|
|
22
|
+
"values": [{ "name": "MenuVariant" }]
|
|
23
|
+
},
|
|
19
24
|
{
|
|
20
25
|
"name": "submenu",
|
|
21
26
|
"description": "A value indicating whether the menu is a submenu.",
|
|
@@ -26,7 +31,7 @@
|
|
|
26
31
|
},
|
|
27
32
|
{
|
|
28
33
|
"name": "m3e-menu-item-checkbox",
|
|
29
|
-
"description": "An item of a menu which supports a checkable state.\n---\n\n\n### **Events:**\n - **click** - Emitted when the element is clicked.\n\n### **Slots:**\n - _default_ - Renders the label of the item.\n- **icon** - Renders an icon before the items's label.\n- **trailing-icon** - Renders an icon after the item's label.\n\n### **CSS Properties:**\n - **--m3e-menu-item-container-height** - Height of the menu item container. _(default: undefined)_\n- **--m3e-menu-item-color** - Text color for unselected, enabled menu items. _(default: undefined)_\n- **--m3e-menu-item-container-hover-color** - State layer hover color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-container-focus-color** - State layer focus color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-ripple-color** - Ripple color for unselected items. _(default: undefined)_\n- **--m3e-menu-selected-color** - Text color for selected
|
|
34
|
+
"description": "An item of a menu which supports a checkable state.\n---\n\n\n### **Events:**\n - **click** - Emitted when the element is clicked.\n\n### **Slots:**\n - _default_ - Renders the label of the item.\n- **icon** - Renders an icon before the items's label.\n- **trailing-icon** - Renders an icon after the item's label.\n\n### **CSS Properties:**\n - **--m3e-menu-item-container-height** - Height of the menu item container. _(default: undefined)_\n- **--m3e-menu-item-color** - Text color for unselected, enabled menu items. _(default: undefined)_\n- **--m3e-menu-item-container-hover-color** - State layer hover color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-container-focus-color** - State layer focus color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-ripple-color** - Ripple color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-selected-color** - Text color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-color** - Background color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-hover-color** - State layer hover color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-focus-color** - State layer focus color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-ripple-color** - Ripple color for selected items. _(default: undefined)_\n- **--m3e-menu-item-active-state-layer-color** - State layer color for expanded items. _(default: undefined)_\n- **--m3e-menu-item-active-state-layer-opacity** - State layer opacity for expanded items. _(default: undefined)_\n- **--m3e-menu-item-disabled-color** - Base color for disabled items. _(default: undefined)_\n- **--m3e-menu-item-disabled-opacity** - Opacity percentage for disabled item color mix. _(default: undefined)_\n- **--m3e-vibrant-menu-item-color** - Text color for unselected, enabled menu items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-container-hover-color** - State layer hover color for unselected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-container-focus-color** - State layer focus color for unselected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-ripple-color** - Ripple color for unselected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-selected-color** - Text color for selected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-selected-container-color** - Background color for selected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-selected-container-hover-color** - State layer hover color for selected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-selected-container-focus-color** - State layer focus color for selected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-selected-ripple-color** - Ripple color for selected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-active-state-layer-color** - State layer color for expanded items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-disabled-color** - Base color for disabled items for vibrant variant _(default: undefined)_\n- **--m3e-menu-item-icon-label-space** - Horizontal gap between icon and content. _(default: undefined)_\n- **--m3e-menu-item-padding-start** - Start padding for the item wrapper. _(default: undefined)_\n- **--m3e-menu-item-padding-end** - End padding for the item wrapper. _(default: undefined)_\n- **--m3e-menu-item-label-text-font-size** - Font size for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-font-weight** - Font weight for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-line-height** - Line height for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-tracking** - Letter spacing for menu item text. _(default: undefined)_\n- **--m3e-menu-item-focus-ring-shape** - Border radius for the focus ring. _(default: undefined)_\n- **--m3e-menu-item-icon-size** - Font size for leading and trailing icons. _(default: undefined)_\n- **--m3e-menu-item-shape** - Base shape of the menu item. _(default: undefined)_\n- **--m3e-menu-item-selected-shape** - Shape used for a selected menu item. _(default: undefined)_\n- **--m3e-menu-item-first-child-shape** - Shape for the first menu item in a menu. _(default: undefined)_\n- **--m3e-menu-item-last-child-shape** - Shape for the last menu item in a menu. _(default: undefined)_",
|
|
30
35
|
"attributes": [
|
|
31
36
|
{
|
|
32
37
|
"name": "disabled",
|
|
@@ -43,7 +48,7 @@
|
|
|
43
48
|
},
|
|
44
49
|
{
|
|
45
50
|
"name": "m3e-menu-item",
|
|
46
|
-
"description": "An item of a menu.\n---\n\n\n### **Events:**\n - **click** - Emitted when the element is clicked.\n\n### **Slots:**\n - _default_ - Renders the label of the item.\n- **icon** - Renders an icon before the items's label.\n- **trailing-icon** - Renders an icon after the item's label.\n\n### **CSS Properties:**\n - **--m3e-menu-item-container-height** - Height of the menu item container. _(default: undefined)_\n- **--m3e-menu-item-color** - Text color for unselected, enabled menu items. _(default: undefined)_\n- **--m3e-menu-item-container-hover-color** - State layer hover color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-container-focus-color** - State layer focus color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-ripple-color** - Ripple color for unselected items. _(default: undefined)_\n- **--m3e-menu-selected-color** - Text color for selected
|
|
51
|
+
"description": "An item of a menu.\n---\n\n\n### **Events:**\n - **click** - Emitted when the element is clicked.\n\n### **Slots:**\n - _default_ - Renders the label of the item.\n- **icon** - Renders an icon before the items's label.\n- **trailing-icon** - Renders an icon after the item's label.\n\n### **CSS Properties:**\n - **--m3e-menu-item-container-height** - Height of the menu item container. _(default: undefined)_\n- **--m3e-menu-item-color** - Text color for unselected, enabled menu items. _(default: undefined)_\n- **--m3e-menu-item-container-hover-color** - State layer hover color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-container-focus-color** - State layer focus color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-ripple-color** - Ripple color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-selected-color** - Text color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-color** - Background color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-hover-color** - State layer hover color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-focus-color** - State layer focus color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-ripple-color** - Ripple color for selected items. _(default: undefined)_\n- **--m3e-menu-item-active-state-layer-color** - State layer color for expanded items. _(default: undefined)_\n- **--m3e-menu-item-active-state-layer-opacity** - State layer opacity for expanded items. _(default: undefined)_\n- **--m3e-menu-item-disabled-color** - Base color for disabled items. _(default: undefined)_\n- **--m3e-menu-item-disabled-opacity** - Opacity percentage for disabled item color mix. _(default: undefined)_\n- **--m3e-vibrant-menu-item-color** - Text color for unselected, enabled menu items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-container-hover-color** - State layer hover color for unselected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-container-focus-color** - State layer focus color for unselected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-ripple-color** - Ripple color for unselected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-selected-color** - Text color for selected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-selected-container-color** - Background color for selected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-selected-container-hover-color** - State layer hover color for selected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-selected-container-focus-color** - State layer focus color for selected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-selected-ripple-color** - Ripple color for selected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-active-state-layer-color** - State layer color for expanded items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-disabled-color** - Base color for disabled items for vibrant variant. _(default: undefined)_\n- **--m3e-menu-item-icon-label-space** - Horizontal gap between icon and content. _(default: undefined)_\n- **--m3e-menu-item-padding-start** - Start padding for the item wrapper. _(default: undefined)_\n- **--m3e-menu-item-padding-end** - End padding for the item wrapper. _(default: undefined)_\n- **--m3e-menu-item-label-text-font-size** - Font size for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-font-weight** - Font weight for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-line-height** - Line height for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-tracking** - Letter spacing for menu item text. _(default: undefined)_\n- **--m3e-menu-item-focus-ring-shape** - Border radius for the focus ring. _(default: undefined)_\n- **--m3e-menu-item-icon-size** - Font size for leading and trailing icons. _(default: undefined)_\n- **--m3e-menu-item-shape** - Base shape of the menu item. _(default: undefined)_\n- **--m3e-menu-item-first-child-shape** - Shape for the first menu item in a menu. _(default: undefined)_\n- **--m3e-menu-item-last-child-shape** - Shape for the last menu item in a menu. _(default: undefined)_",
|
|
47
52
|
"attributes": [
|
|
48
53
|
{
|
|
49
54
|
"name": "disabled",
|
|
@@ -81,7 +86,7 @@
|
|
|
81
86
|
},
|
|
82
87
|
{
|
|
83
88
|
"name": "m3e-menu-item-radio",
|
|
84
|
-
"description": "An item of a menu which supports a mutually exclusive checkable state.\n---\n\n\n### **Events:**\n - **click** - Emitted when the element is clicked.\n\n### **Slots:**\n - _default_ - Renders the label of the item.\n- **icon** - Renders an icon before the items's label.\n- **trailing-icon** - Renders an icon after the item's label.\n\n### **CSS Properties:**\n - **--m3e-menu-item-container-height** - Height of the menu item container. _(default: undefined)_\n- **--m3e-menu-item-color** - Text color for unselected, enabled menu items. _(default: undefined)_\n- **--m3e-menu-item-container-hover-color** - State layer hover color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-container-focus-color** - State layer focus color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-ripple-color** - Ripple color for unselected items. _(default: undefined)_\n- **--m3e-menu-selected-color** - Text color for selected
|
|
89
|
+
"description": "An item of a menu which supports a mutually exclusive checkable state.\n---\n\n\n### **Events:**\n - **click** - Emitted when the element is clicked.\n\n### **Slots:**\n - _default_ - Renders the label of the item.\n- **icon** - Renders an icon before the items's label.\n- **trailing-icon** - Renders an icon after the item's label.\n\n### **CSS Properties:**\n - **--m3e-menu-item-container-height** - Height of the menu item container. _(default: undefined)_\n- **--m3e-menu-item-color** - Text color for unselected, enabled menu items. _(default: undefined)_\n- **--m3e-menu-item-container-hover-color** - State layer hover color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-container-focus-color** - State layer focus color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-ripple-color** - Ripple color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-selected-color** - Text color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-color** - Background color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-hover-color** - State layer hover color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-focus-color** - State layer focus color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-ripple-color** - Ripple color for selected items. _(default: undefined)_\n- **--m3e-menu-item-active-state-layer-color** - State layer color for expanded items. _(default: undefined)_\n- **--m3e-menu-item-active-state-layer-opacity** - State layer opacity for expanded items. _(default: undefined)_\n- **--m3e-menu-item-disabled-color** - Base color for disabled items. _(default: undefined)_\n- **--m3e-menu-item-disabled-opacity** - Opacity percentage for disabled item color mix. _(default: undefined)_\n- **--m3e-vibrant-menu-item-color** - Text color for unselected, enabled menu items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-container-hover-color** - State layer hover color for unselected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-container-focus-color** - State layer focus color for unselected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-ripple-color** - Ripple color for unselected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-selected-color** - Text color for selected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-selected-container-color** - Background color for selected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-selected-container-hover-color** - State layer hover color for selected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-selected-container-focus-color** - State layer focus color for selected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-selected-ripple-color** - Ripple color for selected items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-active-state-layer-color** - State layer color for expanded items for vibrant variant. _(default: undefined)_\n- **--m3e-vibrant-menu-item-disabled-color** - Base color for disabled items for vibrant variant _(default: undefined)_\n- **--m3e-menu-item-icon-label-space** - Horizontal gap between icon and content. _(default: undefined)_\n- **--m3e-menu-item-padding-start** - Start padding for the item wrapper. _(default: undefined)_\n- **--m3e-menu-item-padding-end** - End padding for the item wrapper. _(default: undefined)_\n- **--m3e-menu-item-label-text-font-size** - Font size for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-font-weight** - Font weight for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-line-height** - Line height for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-tracking** - Letter spacing for menu item text. _(default: undefined)_\n- **--m3e-menu-item-focus-ring-shape** - Border radius for the focus ring. _(default: undefined)_\n- **--m3e-menu-item-icon-size** - Font size for leading and trailing icons. _(default: undefined)_\n- **--m3e-menu-item-shape** - Base shape of the menu item. _(default: undefined)_\n- **--m3e-menu-item-selected-shape** - Shape used for a selected menu item. _(default: undefined)_\n- **--m3e-menu-item-first-child-shape** - Shape for the first menu item in a menu. _(default: undefined)_\n- **--m3e-menu-item-last-child-shape** - Shape for the last menu item in a menu. _(default: undefined)_",
|
|
85
90
|
"attributes": [
|
|
86
91
|
{
|
|
87
92
|
"name": "disabled",
|