@rescui/menu 0.13.6-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33 → 0.13.6-RUI-293-Update-menu-component-0e65dd41c.30

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 (6) hide show
  1. package/lib/_virtual/index.css.js +12 -12
  2. package/lib/index.css +68 -68
  3. package/lib/menu.p.module.css.js +34 -34
  4. package/lib/parts/menu-item.js +1 -0
  5. package/llm/components/menu.md +15 -17
  6. package/package.json +4 -4
package/lib/_virtual/index.css.js CHANGED
@@ -1,15 +1,15 @@
1
1
  var styles = {
2
- "icon": "_icon_selttq_4",
3
- "sizeXS": "_sizeXS_selttq_14",
4
- "sizeS": "_sizeS_selttq_18",
5
- "sizeM": "_sizeM_selttq_22",
6
- "sizeL": "_sizeL_selttq_26",
7
- "light": "_light_selttq_30",
8
- "dark": "_dark_selttq_34",
9
- "allVariants": "_allVariants_selttq_48",
10
- "variant16": "_variant16_selttq_53",
11
- "variant20": "_variant20_selttq_54",
12
- "variant24": "_variant24_selttq_55",
13
- "variant28": "_variant28_selttq_58"
2
+ "icon": "_icon_mf6s7n_4",
3
+ "sizeXS": "_sizeXS_mf6s7n_14",
4
+ "sizeS": "_sizeS_mf6s7n_18",
5
+ "sizeM": "_sizeM_mf6s7n_22",
6
+ "sizeL": "_sizeL_mf6s7n_26",
7
+ "light": "_light_mf6s7n_30",
8
+ "dark": "_dark_mf6s7n_34",
9
+ "allVariants": "_allVariants_mf6s7n_48",
10
+ "variant16": "_variant16_mf6s7n_53",
11
+ "variant20": "_variant20_mf6s7n_54",
12
+ "variant24": "_variant24_mf6s7n_55",
13
+ "variant28": "_variant28_mf6s7n_58"
14
14
  };
15
15
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_selttq_4{
1
+ ._icon_mf6s7n_4{
2
2
  --_rs-theme-dark:var(
3
3
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
4
4
  var(--rs-theme-dark, 0)
@@ -8,7 +8,7 @@
8
8
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
9
9
  }
10
10
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
11
- ._icon_selttq_4{
11
+ ._icon_mf6s7n_4{
12
12
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
13
13
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
14
14
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -17,7 +17,7 @@
17
17
  }
18
18
  }
19
19
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
20
- ._icon_selttq_4{
20
+ ._icon_mf6s7n_4{
21
21
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
22
22
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
23
23
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -25,30 +25,30 @@
25
25
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
26
26
  }
27
27
  }
28
- ._icon_selttq_4{
28
+ ._icon_mf6s7n_4{
29
29
 
30
30
  fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
31
31
 
32
32
  width:var(--rs-icons-width, auto);
33
33
  height:var(--rs-icons-height, var(--_rs-icons-height));
34
34
  }
35
- ._sizeXS_selttq_14{
35
+ ._sizeXS_mf6s7n_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_selttq_18{
38
+ ._sizeS_mf6s7n_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_selttq_22{
41
+ ._sizeM_mf6s7n_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_selttq_26{
44
+ ._sizeL_mf6s7n_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_selttq_30{
47
+ ._light_mf6s7n_30{
48
48
  --rs-theme-dark:0;
49
49
  --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
50
50
  }
51
- ._dark_selttq_34{
51
+ ._dark_mf6s7n_34{
52
52
  --rs-theme-dark:1;
53
53
  --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
54
54
  }
@@ -60,52 +60,52 @@
60
60
  transform:rotate(360deg);
61
61
  }
62
62
  }
63
- ._allVariants_selttq_48{
63
+ ._allVariants_mf6s7n_48{
64
64
  aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
65
65
  container:rs-icon / size;
66
66
  }
67
- ._variant16_selttq_53,
68
- ._variant20_selttq_54,
69
- ._variant24_selttq_55{
67
+ ._variant16_mf6s7n_53,
68
+ ._variant20_mf6s7n_54,
69
+ ._variant24_mf6s7n_55{
70
70
  display:none;
71
71
  }
72
- ._variant28_selttq_58{
72
+ ._variant28_mf6s7n_58{
73
73
  display:block;
74
74
  }
75
75
  @container rs-icon (max-height: 24px){
76
- ._variant24_selttq_55{
76
+ ._variant24_mf6s7n_55{
77
77
  display:block;
78
78
  }
79
- ._variant28_selttq_58{
79
+ ._variant28_mf6s7n_58{
80
80
  display:none;
81
81
  }
82
82
  }
83
83
  @container rs-icon (max-height: 20px){
84
- ._variant20_selttq_54{
84
+ ._variant20_mf6s7n_54{
85
85
  display:block;
86
86
  }
87
- ._variant24_selttq_55{
87
+ ._variant24_mf6s7n_55{
88
88
  display:none;
89
89
  }
90
90
  }
91
91
  @container rs-icon (max-height: 16px){
92
- ._variant16_selttq_53{
92
+ ._variant16_mf6s7n_53{
93
93
  display:block;
94
94
  }
95
- ._variant20_selttq_54{
95
+ ._variant20_mf6s7n_54{
96
96
  display:none;
97
97
  }
98
98
  }
99
- ._themeLight_1khtdmq_8{
99
+ ._themeLight_1hp9le7_8{
100
100
  --rs-theme-dark:0;
101
101
  }
102
- ._themeDark_1khtdmq_11{
102
+ ._themeDark_1hp9le7_11{
103
103
  --rs-theme-dark:1;
104
104
  }
105
- ._menu_1khtdmq_15:focus{
105
+ ._menu_1hp9le7_15:focus{
106
106
  outline:none;
107
107
  }
108
- ._sizeS_1khtdmq_21{
108
+ ._sizeS_1hp9le7_21{
109
109
  --_rs-menu-mi-icon-offset:8px;
110
110
  --_rs-menu-mi-icon-size:20px;
111
111
  --_rs-menu-mi-vertical-padding:6px;
@@ -144,7 +144,7 @@
144
144
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
145
145
  --_rs-typography-link-border-bottom-width-from-text:1px;
146
146
  }
147
- ._sizeM_1khtdmq_24{
147
+ ._sizeM_1hp9le7_24{
148
148
  --_rs-menu-mi-icon-offset:8px;
149
149
  --_rs-menu-mi-icon-size:24px;
150
150
  --_rs-menu-mi-vertical-padding:8px;
@@ -187,11 +187,11 @@
187
187
  --_rs-typography-link-border-bottom-width-from-text:1px;
188
188
  }
189
189
  @media screen and (max-width: 640px){
190
- ._sizeM_1khtdmq_24{
190
+ ._sizeM_1hp9le7_24{
191
191
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
192
192
  }
193
193
  }
194
- ._sizeL_1khtdmq_27{
194
+ ._sizeL_1hp9le7_27{
195
195
  --_rs-menu-mi-icon-offset:16px;
196
196
  --_rs-menu-mi-icon-size:28px;
197
197
  --_rs-menu-mi-vertical-padding:12px;
@@ -234,16 +234,16 @@
234
234
  --_rs-typography-link-border-bottom-width-from-text:1px;
235
235
  }
236
236
  @media screen and (max-width: 640px){
237
- ._sizeL_1khtdmq_27{
237
+ ._sizeL_1hp9le7_27{
238
238
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
239
239
  }
240
240
  }
241
- ._modeClassic_1khtdmq_31{
241
+ ._modeClassic_1hp9le7_31{
242
242
  --_rs-menu-mi-horizontal-padding-with-mode:var(
243
243
  --_rs-menu-mi-horizontal-padding
244
244
  );
245
245
  }
246
- ._modeClassic_1khtdmq_31 [data-rs-internal="menu__menu-item__inner"]{
246
+ ._modeClassic_1hp9le7_31 [data-rs-internal="menu__menu-item__inner"]{
247
247
  --_rs-menu-mi-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7);
248
248
  --_rs-menu-mi-active-background:var(--_rs-color-primary-t-fog);
249
249
  --_rs-menu-mi-selected-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
@@ -255,12 +255,12 @@
255
255
  );
256
256
  --_rs-menu-mi-hover-background:var(--_rs-color-primary);
257
257
  }
258
- ._modeRock_1khtdmq_34{
258
+ ._modeRock_1hp9le7_34{
259
259
  --_rs-menu-mi-horizontal-padding-with-mode:var(
260
260
  --_rs-menu-mi-horizontal-padding
261
261
  );
262
262
  }
263
- ._modeRock_1khtdmq_34 [data-rs-internal="menu__menu-item__inner"]{
263
+ ._modeRock_1hp9le7_34 [data-rs-internal="menu__menu-item__inner"]{
264
264
  --_rs-menu-mi-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7);
265
265
  --_rs-menu-mi-active-background:transparent;
266
266
  --_rs-menu-mi-selected-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
@@ -268,10 +268,10 @@
268
268
  --_rs-menu-mi-hover-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
269
269
  --_rs-menu-mi-hover-background:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
270
270
  }
271
- ._modeClear_1khtdmq_37{
271
+ ._modeClear_1hp9le7_37{
272
272
  --_rs-menu-mi-horizontal-padding-with-mode:0;
273
273
  }
274
- ._modeClear_1khtdmq_37 [data-rs-internal="menu__menu-item__inner"]{
274
+ ._modeClear_1hp9le7_37 [data-rs-internal="menu__menu-item__inner"]{
275
275
  --_rs-menu-mi-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
276
276
  --_rs-menu-mi-active-background:transparent;
277
277
  --_rs-menu-mi-selected-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
@@ -279,24 +279,24 @@
279
279
  --_rs-menu-mi-hover-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
280
280
  --_rs-menu-mi-hover-background:transparent;
281
281
  }
282
- ._iconPlacementLeft_1khtdmq_41{
282
+ ._iconPlacementLeft_1hp9le7_41{
283
283
  --_rs-menu-mi-flex-direction:row;
284
284
  --_rs-menu-mi-justify-content:initial;
285
285
  }
286
- ._iconPlacementRight_1khtdmq_45{
286
+ ._iconPlacementRight_1hp9le7_45{
287
287
  --_rs-menu-mi-flex-direction:row-reverse;
288
288
  --_rs-menu-mi-justify-content:space-between;
289
289
  }
290
- ._wrapper_1khtdmq_49{
290
+ ._wrapper_1hp9le7_49{
291
291
  display:flex;
292
292
  }
293
- ._hoverIcon_1khtdmq_53{
293
+ ._hoverIcon_1hp9le7_53{
294
294
  visibility:hidden;
295
295
  }
296
- ._hoverIcon_1khtdmq_53._hoverIconNoReserve_1khtdmq_56{
296
+ ._hoverIcon_1hp9le7_53._hoverIconNoReserve_1hp9le7_56{
297
297
  display:none;
298
298
  }
299
- ._menuItem_1khtdmq_61{
299
+ ._menuItem_1hp9le7_61{
300
300
  --_rs-theme-dark:var(
301
301
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
302
302
  var(--rs-theme-dark, 0)
@@ -306,7 +306,7 @@
306
306
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
307
307
  }
308
308
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
309
- ._menuItem_1khtdmq_61{
309
+ ._menuItem_1hp9le7_61{
310
310
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
311
311
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
312
312
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -315,7 +315,7 @@
315
315
  }
316
316
  }
317
317
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
318
- ._menuItem_1khtdmq_61{
318
+ ._menuItem_1hp9le7_61{
319
319
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
320
320
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
321
321
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -323,7 +323,7 @@
323
323
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
324
324
  }
325
325
  }
326
- ._menuItem_1khtdmq_61 {
326
+ ._menuItem_1hp9le7_61 {
327
327
  letter-spacing:var(
328
328
  --rs-text-base-letter-spacing,
329
329
  var(--_rs-typography-letter-spacing)
@@ -364,61 +364,61 @@
364
364
  -webkit-font-smoothing:inherit;
365
365
  -moz-osx-font-smoothing:inherit;
366
366
  }
367
- ._menuItem_1khtdmq_61:focus{
367
+ ._menuItem_1hp9le7_61:focus{
368
368
  outline:none;
369
369
  }
370
- ._keyboardNavigationDisabled_1khtdmq_98 ._menuItem_1khtdmq_61:focus[data-focus-method='key']{
370
+ ._keyboardNavigationDisabled_1hp9le7_98 ._menuItem_1hp9le7_61:focus[data-focus-method='key']{
371
371
  box-shadow:0 0 0 2px var(--_rs-color-primary-dim), inset 0 0 0 2px var(--_rs-color-primary-dim);
372
372
  }
373
- ._menuItem_1khtdmq_61:active{
373
+ ._menuItem_1hp9le7_61:active{
374
374
  color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
375
375
  background:var(--_rs-menu-mi-active-background);
376
376
  }
377
- ._menuItem_1khtdmq_61._selected_1khtdmq_112{
377
+ ._menuItem_1hp9le7_61._selected_1hp9le7_112{
378
378
  color:var(--_rs-menu-mi-selected-color);
379
379
  background:var(--_rs-menu-mi-selected-background);
380
380
  }
381
- ._keyboardNavigationEnabled_1khtdmq_119 ._menuItem_1khtdmq_61:focus,
382
- ._keyboardNavigationDisabled_1khtdmq_98 ._menuItem_1khtdmq_61:hover{
381
+ ._keyboardNavigationEnabled_1hp9le7_119 ._menuItem_1hp9le7_61:focus,
382
+ ._keyboardNavigationDisabled_1hp9le7_98 ._menuItem_1hp9le7_61:hover{
383
383
  color:var(--_rs-menu-mi-hover-color);
384
384
  background:var(--_rs-menu-mi-hover-background);
385
385
  }
386
- ._keyboardNavigationEnabled_1khtdmq_119 ._menuItem_1khtdmq_61:focus ._hoverIcon_1khtdmq_53, ._keyboardNavigationDisabled_1khtdmq_98 ._menuItem_1khtdmq_61:hover ._hoverIcon_1khtdmq_53{
386
+ ._keyboardNavigationEnabled_1hp9le7_119 ._menuItem_1hp9le7_61:focus ._hoverIcon_1hp9le7_53, ._keyboardNavigationDisabled_1hp9le7_98 ._menuItem_1hp9le7_61:hover ._hoverIcon_1hp9le7_53{
387
387
  display:block;
388
388
  visibility:visible;
389
389
  }
390
- ._keyboardNavigationEnabled_1khtdmq_119 ._menuItem_1khtdmq_61._hideCustomIconOnHover_1khtdmq_130:focus ._customIcon_1khtdmq_132, ._keyboardNavigationDisabled_1khtdmq_98 ._menuItem_1khtdmq_61._hideCustomIconOnHover_1khtdmq_130:hover ._customIcon_1khtdmq_132{
390
+ ._keyboardNavigationEnabled_1hp9le7_119 ._menuItem_1hp9le7_61._hideCustomIconOnHover_1hp9le7_130:focus ._customIcon_1hp9le7_132, ._keyboardNavigationDisabled_1hp9le7_98 ._menuItem_1hp9le7_61._hideCustomIconOnHover_1hp9le7_130:hover ._customIcon_1hp9le7_132{
391
391
  display:none;
392
392
  }
393
- ._keyboardNavigationEnabled_1khtdmq_119 ._menuItem_1khtdmq_61._hideSelectedIconOnHover_1khtdmq_137:focus ._selectedIcon_1khtdmq_139, ._keyboardNavigationDisabled_1khtdmq_98 ._menuItem_1khtdmq_61._hideSelectedIconOnHover_1khtdmq_137:hover ._selectedIcon_1khtdmq_139{
393
+ ._keyboardNavigationEnabled_1hp9le7_119 ._menuItem_1hp9le7_61._hideSelectedIconOnHover_1hp9le7_137:focus ._selectedIcon_1hp9le7_139, ._keyboardNavigationDisabled_1hp9le7_98 ._menuItem_1hp9le7_61._hideSelectedIconOnHover_1hp9le7_137:hover ._selectedIcon_1hp9le7_139{
394
394
  display:none;
395
395
  }
396
- ._menuItem_1khtdmq_61._disabled_1khtdmq_144{
396
+ ._menuItem_1hp9le7_61._disabled_1hp9le7_144{
397
397
  pointer-events:none;
398
398
 
399
399
  color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
400
400
  }
401
- ._contentWrapper_1khtdmq_151{
401
+ ._contentWrapper_1hp9le7_151{
402
402
  display:flex;
403
403
  flex-grow:1;
404
404
 
405
405
  justify-content:space-between;
406
406
  gap:var(--_rs-menu-mi-icon-offset);
407
407
  }
408
- ._content_1khtdmq_151{
408
+ ._content_1hp9le7_151{
409
409
  flex-grow:1;
410
410
 
411
411
  font-size:inherit;
412
412
  }
413
- ._icon_1khtdmq_41{
413
+ ._icon_1hp9le7_41{
414
414
  flex:0 0;
415
415
  flex-basis:auto;
416
416
  }
417
- ._icon_1khtdmq_41._resizedIcon_1khtdmq_169{
417
+ ._icon_1hp9le7_41._resizedIcon_1hp9le7_169{
418
418
  width:auto;
419
419
  height:var(--_rs-menu-mi-icon-size);
420
420
  }
421
- ._divider_1khtdmq_177{
421
+ ._divider_1hp9le7_177{
422
422
  flex-shrink:0;
423
423
 
424
424
  width:100%;
@@ -429,13 +429,13 @@
429
429
 
430
430
  background-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
431
431
  }
432
- ._groupHeaderThemeLight_1khtdmq_191{
432
+ ._groupHeaderThemeLight_1hp9le7_191{
433
433
  --rs-theme-dark:0;
434
434
  }
435
- ._groupHeaderThemeDark_1khtdmq_194{
435
+ ._groupHeaderThemeDark_1hp9le7_194{
436
436
  --rs-theme-dark:1;
437
437
  }
438
- ._groupHeaderSizeL_1khtdmq_198{
438
+ ._groupHeaderSizeL_1hp9le7_198{
439
439
  --_rs-menu-gh-vertical-padding:12px;
440
440
  --_rs-menu-gh-horizontal-padding:16px;
441
441
  --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
@@ -469,7 +469,7 @@
469
469
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
470
470
  --_rs-typography-link-border-bottom-width-from-text:2px;
471
471
  }
472
- ._groupHeaderSizeM_1khtdmq_201{
472
+ ._groupHeaderSizeM_1hp9le7_201{
473
473
  --_rs-menu-gh-vertical-padding:8px;
474
474
  --_rs-menu-gh-horizontal-padding:16px;
475
475
  --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
@@ -503,7 +503,7 @@
503
503
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
504
504
  --_rs-typography-link-border-bottom-width-from-text:2px;
505
505
  }
506
- ._groupHeaderSizeS_1khtdmq_204{
506
+ ._groupHeaderSizeS_1hp9le7_204{
507
507
  --_rs-menu-gh-vertical-padding:6px;
508
508
  --_rs-menu-gh-horizontal-padding:8px;
509
509
  --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
@@ -537,7 +537,7 @@
537
537
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
538
538
  --_rs-typography-link-border-bottom-width-from-text:2px;
539
539
  }
540
- ._groupHeader_1khtdmq_191{
540
+ ._groupHeader_1hp9le7_191{
541
541
  --_rs-theme-dark:var(
542
542
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
543
543
  var(--rs-theme-dark, 0)
@@ -547,7 +547,7 @@
547
547
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
548
548
  }
549
549
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
550
- ._groupHeader_1khtdmq_191{
550
+ ._groupHeader_1hp9le7_191{
551
551
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
552
552
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
553
553
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -556,7 +556,7 @@
556
556
  }
557
557
  }
558
558
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
559
- ._groupHeader_1khtdmq_191{
559
+ ._groupHeader_1hp9le7_191{
560
560
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
561
561
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
562
562
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -564,7 +564,7 @@
564
564
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
565
565
  }
566
566
  }
567
- ._groupHeader_1khtdmq_191 {
567
+ ._groupHeader_1hp9le7_191 {
568
568
  letter-spacing:var(
569
569
  --rs-text-base-letter-spacing,
570
570
  var(--_rs-typography-letter-spacing)
package/lib/menu.p.module.css.js CHANGED
@@ -1,37 +1,37 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_1khtdmq_8",
3
- "themeDark": "_themeDark_1khtdmq_11",
4
- "menu": "_menu_1khtdmq_15",
5
- "sizeS": "_sizeS_1khtdmq_21",
6
- "sizeM": "_sizeM_1khtdmq_24",
7
- "sizeL": "_sizeL_1khtdmq_27",
8
- "modeClassic": "_modeClassic_1khtdmq_31",
9
- "modeRock": "_modeRock_1khtdmq_34",
10
- "modeClear": "_modeClear_1khtdmq_37",
11
- "iconPlacementLeft": "_iconPlacementLeft_1khtdmq_41",
12
- "iconPlacementRight": "_iconPlacementRight_1khtdmq_45",
13
- "wrapper": "_wrapper_1khtdmq_49",
14
- "hoverIcon": "_hoverIcon_1khtdmq_53",
15
- "hoverIconNoReserve": "_hoverIconNoReserve_1khtdmq_56",
16
- "menuItem": "_menuItem_1khtdmq_61",
17
- "keyboardNavigationDisabled": "_keyboardNavigationDisabled_1khtdmq_98",
18
- "selected": "_selected_1khtdmq_112",
19
- "keyboardNavigationEnabled": "_keyboardNavigationEnabled_1khtdmq_119",
20
- "hideCustomIconOnHover": "_hideCustomIconOnHover_1khtdmq_130",
21
- "customIcon": "_customIcon_1khtdmq_132",
22
- "hideSelectedIconOnHover": "_hideSelectedIconOnHover_1khtdmq_137",
23
- "selectedIcon": "_selectedIcon_1khtdmq_139",
24
- "disabled": "_disabled_1khtdmq_144",
25
- "contentWrapper": "_contentWrapper_1khtdmq_151",
26
- "content": "_content_1khtdmq_151",
27
- "icon": "_icon_1khtdmq_41",
28
- "resizedIcon": "_resizedIcon_1khtdmq_169",
29
- "divider": "_divider_1khtdmq_177",
30
- "groupHeaderThemeLight": "_groupHeaderThemeLight_1khtdmq_191",
31
- "groupHeaderThemeDark": "_groupHeaderThemeDark_1khtdmq_194",
32
- "groupHeaderSizeL": "_groupHeaderSizeL_1khtdmq_198",
33
- "groupHeaderSizeM": "_groupHeaderSizeM_1khtdmq_201",
34
- "groupHeaderSizeS": "_groupHeaderSizeS_1khtdmq_204",
35
- "groupHeader": "_groupHeader_1khtdmq_191"
2
+ "themeLight": "_themeLight_1hp9le7_8",
3
+ "themeDark": "_themeDark_1hp9le7_11",
4
+ "menu": "_menu_1hp9le7_15",
5
+ "sizeS": "_sizeS_1hp9le7_21",
6
+ "sizeM": "_sizeM_1hp9le7_24",
7
+ "sizeL": "_sizeL_1hp9le7_27",
8
+ "modeClassic": "_modeClassic_1hp9le7_31",
9
+ "modeRock": "_modeRock_1hp9le7_34",
10
+ "modeClear": "_modeClear_1hp9le7_37",
11
+ "iconPlacementLeft": "_iconPlacementLeft_1hp9le7_41",
12
+ "iconPlacementRight": "_iconPlacementRight_1hp9le7_45",
13
+ "wrapper": "_wrapper_1hp9le7_49",
14
+ "hoverIcon": "_hoverIcon_1hp9le7_53",
15
+ "hoverIconNoReserve": "_hoverIconNoReserve_1hp9le7_56",
16
+ "menuItem": "_menuItem_1hp9le7_61",
17
+ "keyboardNavigationDisabled": "_keyboardNavigationDisabled_1hp9le7_98",
18
+ "selected": "_selected_1hp9le7_112",
19
+ "keyboardNavigationEnabled": "_keyboardNavigationEnabled_1hp9le7_119",
20
+ "hideCustomIconOnHover": "_hideCustomIconOnHover_1hp9le7_130",
21
+ "customIcon": "_customIcon_1hp9le7_132",
22
+ "hideSelectedIconOnHover": "_hideSelectedIconOnHover_1hp9le7_137",
23
+ "selectedIcon": "_selectedIcon_1hp9le7_139",
24
+ "disabled": "_disabled_1hp9le7_144",
25
+ "contentWrapper": "_contentWrapper_1hp9le7_151",
26
+ "content": "_content_1hp9le7_151",
27
+ "icon": "_icon_1hp9le7_41",
28
+ "resizedIcon": "_resizedIcon_1hp9le7_169",
29
+ "divider": "_divider_1hp9le7_177",
30
+ "groupHeaderThemeLight": "_groupHeaderThemeLight_1hp9le7_191",
31
+ "groupHeaderThemeDark": "_groupHeaderThemeDark_1hp9le7_194",
32
+ "groupHeaderSizeL": "_groupHeaderSizeL_1hp9le7_198",
33
+ "groupHeaderSizeM": "_groupHeaderSizeM_1hp9le7_201",
34
+ "groupHeaderSizeS": "_groupHeaderSizeS_1hp9le7_204",
35
+ "groupHeader": "_groupHeader_1hp9le7_191"
36
36
  };
37
37
  export { styles as default };
package/lib/parts/menu-item.js CHANGED
@@ -165,6 +165,7 @@ const MenuItemInner = (_ref, ref) => {
165
165
  className: styles.content
166
166
  }, children), selected && /*#__PURE__*/React.createElement(CheckOutlineIcon, {
167
167
  className: cn(styles.icon, styles.selectedIcon, resizeIcons && styles.resizedIcon),
168
+ "data-test": 'menu-item__selected-icon',
168
169
  "data-render-all-sizes": true
169
170
  }), hasHoverIcon && /*#__PURE__*/React.cloneElement(hoverIcon, {
170
171
  className: cn(hoverIcon.props.className, styles.icon, styles.hoverIcon, resizeIcons && styles.resizedIcon, hoverIconWillReplace !== 'none' && styles.hoverIconNoReserve),
package/llm/components/menu.md CHANGED
@@ -102,23 +102,21 @@ import {
102
102
  LeftOutlineIcon
103
103
  } from '@rescui/icons';
104
104
 
105
- <div>
106
- <Menu size="s" resizeIcons style={{ maxWidth: 200 }}>
107
- <MenuItem hoverIcon={<DownloadOutlineIcon />}>Cart</MenuItem>
108
- <MenuItem hoverIcon={<CloseOutlineIcon />} selected>
109
- Bug
110
- </MenuItem>
111
- <MenuItem hoverIcon={<DownloadOutlineIcon />}>Person</MenuItem>
112
- <MenuItem
113
- icon={<LeftOutlineIcon />}
114
- iconPlacement="right"
115
- hoverIcon={<CloseOutlineIcon />}
116
- >
117
- Team
118
- </MenuItem>
119
- <MenuItem hoverIcon={<DownloadOutlineIcon />}>Success</MenuItem>
120
- </Menu>
121
- </div>;
105
+ <Menu size="s" resizeIcons style={{ maxWidth: 200 }}>
106
+ <MenuItem hoverIcon={<DownloadOutlineIcon />}>Cart</MenuItem>
107
+ <MenuItem hoverIcon={<CloseOutlineIcon />} selected>
108
+ Bug
109
+ </MenuItem>
110
+ <MenuItem hoverIcon={<DownloadOutlineIcon />}>Person</MenuItem>
111
+ <MenuItem
112
+ icon={<LeftOutlineIcon />}
113
+ iconPlacement="right"
114
+ hoverIcon={<CloseOutlineIcon />}
115
+ >
116
+ Team
117
+ </MenuItem>
118
+ <MenuItem hoverIcon={<DownloadOutlineIcon />}>Success</MenuItem>
119
+ </Menu>;
122
120
  ```
123
121
 
124
122
  #### Contrast primary color
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/menu",
3
- "version": "0.13.6-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33+d8a5b0551",
3
+ "version": "0.13.6-RUI-293-Update-menu-component-0e65dd41c.30+0e65dd41c",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -26,10 +26,10 @@
26
26
  "react": ">=16.8.0 <20"
27
27
  },
28
28
  "devDependencies": {
29
- "@rescui/colors": "0.3.1-RUI-293-Update-menu-component-hover-icon-d8a5b0551.68+d8a5b0551",
29
+ "@rescui/colors": "0.3.1-RUI-293-Update-menu-component-0e65dd41c.65+0e65dd41c",
30
30
  "@rescui/postcss-preset-library": "0.2.2",
31
31
  "@rescui/scripts": "0.5.2",
32
- "@rescui/typography": "0.27.1-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33+d8a5b0551",
32
+ "@rescui/typography": "0.27.1-RUI-293-Update-menu-component-0e65dd41c.30+0e65dd41c",
33
33
  "@rescui/visual-regression": "0.1.4",
34
34
  "postcss": "^8.3.0"
35
35
  },
@@ -38,5 +38,5 @@
38
38
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
39
39
  },
40
40
  "nx": {},
41
- "gitHead": "d8a5b055167d8b1ea55c32621655b8e0acc98a1a"
41
+ "gitHead": "0e65dd41c5b827cd8e09582ea9f5ad24f61b1d96"
42
42
  }