@rescui/menu 0.17.2 → 0.17.3-floating-ui-migration-ee8cf10db.9.sha-ee8cf10db

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 (7) hide show
  1. package/lib/_virtual/index.css.js +12 -12
  2. package/lib/index.css +77 -73
  3. package/lib/menu.p.module.css.js +1 -1
  4. package/lib/public-api.p.css +8 -4
  5. package/lib/public-api.pcss +8 -4
  6. package/llm/components/menu.md +31 -8
  7. package/package.json +7 -7
package/lib/_virtual/index.css.js CHANGED
@@ -1,16 +1,16 @@
1
1
  var styles = {
2
- "icon": "_icon_g46ng3_4",
3
- "sizeXS": "_sizeXS_g46ng3_14",
4
- "sizeS": "_sizeS_g46ng3_18",
5
- "sizeM": "_sizeM_g46ng3_22",
6
- "sizeL": "_sizeL_g46ng3_26",
7
- "light": "_light_g46ng3_30",
8
- "dark": "_dark_g46ng3_34",
9
- "allVariants": "_allVariants_g46ng3_48",
10
- "variant16": "_variant16_g46ng3_53",
11
- "variant20": "_variant20_g46ng3_54",
12
- "variant24": "_variant24_g46ng3_55",
13
- "variant28": "_variant28_g46ng3_58"
2
+ "icon": "_icon_1jn1uwd_4",
3
+ "sizeXS": "_sizeXS_1jn1uwd_14",
4
+ "sizeS": "_sizeS_1jn1uwd_18",
5
+ "sizeM": "_sizeM_1jn1uwd_22",
6
+ "sizeL": "_sizeL_1jn1uwd_26",
7
+ "light": "_light_1jn1uwd_30",
8
+ "dark": "_dark_1jn1uwd_34",
9
+ "allVariants": "_allVariants_1jn1uwd_48",
10
+ "variant16": "_variant16_1jn1uwd_53",
11
+ "variant20": "_variant20_1jn1uwd_54",
12
+ "variant24": "_variant24_1jn1uwd_55",
13
+ "variant28": "_variant28_1jn1uwd_58"
14
14
  };
15
15
 
16
16
  export { styles as default };
package/lib/index.css CHANGED
@@ -3,7 +3,7 @@
3
3
  inherits:true;
4
4
  initial-value:0;
5
5
  }
6
- ._icon_g46ng3_4{
6
+ ._icon_1jn1uwd_4{
7
7
  --_rs-theme-dark:var(
8
8
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
9
9
  var(--rs-theme-dark, 0)
@@ -13,7 +13,7 @@
13
13
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
14
14
  }
15
15
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
16
- ._icon_g46ng3_4{
16
+ ._icon_1jn1uwd_4{
17
17
  --_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)));
18
18
  --_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)));
19
19
  --_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)));
@@ -22,7 +22,7 @@
22
22
  }
23
23
  }
24
24
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
25
- ._icon_g46ng3_4{
25
+ ._icon_1jn1uwd_4{
26
26
  --_rs-color-primary:rgb(calc(107 * var(--_rs-theme-light-coefficient, 1) + 132 * var(--_rs-theme-dark-coefficient, 0)), calc(87 * var(--_rs-theme-light-coefficient, 1) + 115 * var(--_rs-theme-dark-coefficient, 0)), 255);
27
27
  --_rs-color-primary-dim:rgb(calc(137 * var(--_rs-theme-light-coefficient, 1) + 111 * var(--_rs-theme-dark-coefficient, 0)), calc(121 * var(--_rs-theme-light-coefficient, 1) + 97 * var(--_rs-theme-dark-coefficient, 0)), calc(255 * var(--_rs-theme-light-coefficient, 1) + 210 * var(--_rs-theme-dark-coefficient, 0)));
28
28
  --_rs-color-primary-fog:rgb(calc(225 * var(--_rs-theme-light-coefficient, 1) + 46 * var(--_rs-theme-dark-coefficient, 0)), calc(221 * var(--_rs-theme-light-coefficient, 1) + 43 * var(--_rs-theme-dark-coefficient, 0)), calc(255 * var(--_rs-theme-light-coefficient, 1) + 73 * var(--_rs-theme-dark-coefficient, 0)));
@@ -30,7 +30,7 @@
30
30
  --_rs-color-primary-t-fog:rgba(calc(107 * var(--_rs-theme-light-coefficient, 1) + 132 * var(--_rs-theme-dark-coefficient, 0)), calc(87 * var(--_rs-theme-light-coefficient, 1) + 115 * var(--_rs-theme-dark-coefficient, 0)), 255, calc(.2 * var(--_rs-theme-light-coefficient, 1) + .3 * var(--_rs-theme-dark-coefficient, 0)));
31
31
  }
32
32
  }
33
- ._icon_g46ng3_4{
33
+ ._icon_1jn1uwd_4{
34
34
 
35
35
  fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
36
36
 
@@ -38,27 +38,27 @@
38
38
  height:var(--rs-icons-height, var(--_rs-icons-height));
39
39
  }
40
40
 
41
- ._sizeXS_g46ng3_14{
41
+ ._sizeXS_1jn1uwd_14{
42
42
  --_rs-icons-height:16px;
43
43
  }
44
44
 
45
- ._sizeS_g46ng3_18{
45
+ ._sizeS_1jn1uwd_18{
46
46
  --_rs-icons-height:20px;
47
47
  }
48
48
 
49
- ._sizeM_g46ng3_22{
49
+ ._sizeM_1jn1uwd_22{
50
50
  --_rs-icons-height:24px;
51
51
  }
52
52
 
53
- ._sizeL_g46ng3_26{
53
+ ._sizeL_1jn1uwd_26{
54
54
  --_rs-icons-height:28px;
55
55
  }
56
56
 
57
- ._light_g46ng3_30{
57
+ ._light_1jn1uwd_30{
58
58
  --rs-theme-dark:0;
59
59
  --_rs-icons-themed-fill-or-initial:rgb(calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(28 + 227 * var(--_rs-theme-dark-coefficient, 0)));
60
60
  }
61
- ._dark_g46ng3_34{
61
+ ._dark_1jn1uwd_34{
62
62
  --rs-theme-dark:1;
63
63
  --_rs-icons-themed-fill-or-initial:rgb(calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(28 + 227 * var(--_rs-theme-dark-coefficient, 0)));
64
64
  }
@@ -72,40 +72,40 @@
72
72
  }
73
73
  }
74
74
 
75
- ._allVariants_g46ng3_48{
75
+ ._allVariants_1jn1uwd_48{
76
76
  aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
77
77
  container:rs-icon / size;
78
78
  }
79
79
 
80
- ._variant16_g46ng3_53,
81
- ._variant20_g46ng3_54,
82
- ._variant24_g46ng3_55{
80
+ ._variant16_1jn1uwd_53,
81
+ ._variant20_1jn1uwd_54,
82
+ ._variant24_1jn1uwd_55{
83
83
  display:none;
84
84
  }
85
- ._variant28_g46ng3_58{
85
+ ._variant28_1jn1uwd_58{
86
86
  display:block;
87
87
  }
88
88
  @container rs-icon (max-height: 24px){
89
- ._variant24_g46ng3_55{
89
+ ._variant24_1jn1uwd_55{
90
90
  display:block;
91
91
  }
92
- ._variant28_g46ng3_58{
92
+ ._variant28_1jn1uwd_58{
93
93
  display:none;
94
94
  }
95
95
  }
96
96
  @container rs-icon (max-height: 20px){
97
- ._variant20_g46ng3_54{
97
+ ._variant20_1jn1uwd_54{
98
98
  display:block;
99
99
  }
100
- ._variant24_g46ng3_55{
100
+ ._variant24_1jn1uwd_55{
101
101
  display:none;
102
102
  }
103
103
  }
104
104
  @container rs-icon (max-height: 16px){
105
- ._variant16_g46ng3_53{
105
+ ._variant16_1jn1uwd_53{
106
106
  display:block;
107
107
  }
108
- ._variant20_g46ng3_54{
108
+ ._variant20_1jn1uwd_54{
109
109
  display:none;
110
110
  }
111
111
  }
@@ -116,18 +116,18 @@
116
116
  initial-value:0;
117
117
  }
118
118
 
119
- ._themeLight_em1hf_8{
119
+ ._themeLight_ztyslr_8{
120
120
  --rs-theme-dark:0;
121
121
  }
122
- ._themeDark_em1hf_11{
122
+ ._themeDark_ztyslr_11{
123
123
  --rs-theme-dark:1;
124
124
  }
125
125
 
126
- ._menu_em1hf_15:focus{
126
+ ._menu_ztyslr_15:focus{
127
127
  outline:none;
128
128
  }
129
129
 
130
- ._sizeS_em1hf_21{
130
+ ._sizeS_ztyslr_21{
131
131
  --_rs-menu-mi-icon-offset:8px;
132
132
  --_rs-menu-mi-icon-size:20px;
133
133
  --_rs-menu-mi-vertical-padding:6px;
@@ -166,7 +166,7 @@
166
166
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
167
167
  --_rs-typography-link-border-bottom-width-from-text:1px;
168
168
  }
169
- ._sizeM_em1hf_24{
169
+ ._sizeM_ztyslr_24{
170
170
  --_rs-menu-mi-icon-offset:8px;
171
171
  --_rs-menu-mi-icon-size:24px;
172
172
  --_rs-menu-mi-vertical-padding:8px;
@@ -209,11 +209,11 @@
209
209
  --_rs-typography-link-border-bottom-width-from-text:1px;
210
210
  }
211
211
  @media screen and (max-width: 640px){
212
- ._sizeM_em1hf_24{
212
+ ._sizeM_ztyslr_24{
213
213
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
214
214
  }
215
215
  }
216
- ._sizeL_em1hf_27{
216
+ ._sizeL_ztyslr_27{
217
217
  --_rs-menu-mi-icon-offset:16px;
218
218
  --_rs-menu-mi-icon-size:28px;
219
219
  --_rs-menu-mi-vertical-padding:12px;
@@ -256,18 +256,19 @@
256
256
  --_rs-typography-link-border-bottom-width-from-text:1px;
257
257
  }
258
258
  @media screen and (max-width: 640px){
259
- ._sizeL_em1hf_27{
259
+ ._sizeL_ztyslr_27{
260
260
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
261
261
  }
262
262
  }
263
263
 
264
- ._modeClassic_em1hf_31{
264
+ ._modeClassic_ztyslr_31{
265
265
  --_rs-menu-mi-horizontal-padding-with-mode:var(
266
- --_rs-menu-mi-horizontal-padding
266
+ --rs-menu-item-horizontal-padding,
267
+ var(--_rs-menu-mi-horizontal-padding)
267
268
  );
268
269
  }
269
270
 
270
- ._modeClassic_em1hf_31 [data-rs-internal="menu__menu-item__inner"]{
271
+ ._modeClassic_ztyslr_31 [data-rs-internal="menu__menu-item__inner"]{
271
272
  --_rs-menu-mi-color:rgba(calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(28 + 227 * var(--_rs-theme-dark-coefficient, 0)), 0.7);
272
273
  --_rs-menu-mi-active-background:var(--_rs-color-primary-t-fog);
273
274
  --_rs-menu-mi-selected-color:rgb(calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(28 + 227 * var(--_rs-theme-dark-coefficient, 0)));
@@ -279,12 +280,13 @@
279
280
  );
280
281
  --_rs-menu-mi-hover-background:var(--_rs-color-primary);
281
282
  }
282
- ._modeRock_em1hf_34{
283
+ ._modeRock_ztyslr_34{
283
284
  --_rs-menu-mi-horizontal-padding-with-mode:var(
284
- --_rs-menu-mi-horizontal-padding
285
+ --rs-menu-item-horizontal-padding,
286
+ var(--_rs-menu-mi-horizontal-padding)
285
287
  );
286
288
  }
287
- ._modeRock_em1hf_34 [data-rs-internal="menu__menu-item__inner"]{
289
+ ._modeRock_ztyslr_34 [data-rs-internal="menu__menu-item__inner"]{
288
290
  --_rs-menu-mi-color:rgba(calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(28 + 227 * var(--_rs-theme-dark-coefficient, 0)), 0.7);
289
291
  --_rs-menu-mi-active-background:transparent;
290
292
  --_rs-menu-mi-selected-color:rgb(calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(28 + 227 * var(--_rs-theme-dark-coefficient, 0)));
@@ -292,10 +294,10 @@
292
294
  --_rs-menu-mi-hover-color:rgb(calc(255 - 230 * var(--_rs-theme-dark-coefficient, 0)), calc(255 - 230 * var(--_rs-theme-dark-coefficient, 0)), calc(255 - 227 * var(--_rs-theme-dark-coefficient, 0)));
293
295
  --_rs-menu-mi-hover-background:rgb(calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(28 + 227 * var(--_rs-theme-dark-coefficient, 0)));
294
296
  }
295
- ._modeClear_em1hf_37{
297
+ ._modeClear_ztyslr_37{
296
298
  --_rs-menu-mi-horizontal-padding-with-mode:0;
297
299
  }
298
- ._modeClear_em1hf_37 [data-rs-internal="menu__menu-item__inner"]{
300
+ ._modeClear_ztyslr_37 [data-rs-internal="menu__menu-item__inner"]{
299
301
  --_rs-menu-mi-color:rgb(calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(28 + 227 * var(--_rs-theme-dark-coefficient, 0)));
300
302
  --_rs-menu-mi-active-background:transparent;
301
303
  --_rs-menu-mi-selected-color:rgb(calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(28 + 227 * var(--_rs-theme-dark-coefficient, 0)));
@@ -304,29 +306,29 @@
304
306
  --_rs-menu-mi-hover-background:transparent;
305
307
  }
306
308
 
307
- ._iconPlacementLeft_em1hf_41{
309
+ ._iconPlacementLeft_ztyslr_41{
308
310
  --_rs-menu-mi-flex-direction:row;
309
311
  --_rs-menu-mi-justify-content:initial;
310
312
  }
311
313
 
312
- ._iconPlacementRight_em1hf_45{
314
+ ._iconPlacementRight_ztyslr_45{
313
315
  --_rs-menu-mi-flex-direction:row-reverse;
314
316
  --_rs-menu-mi-justify-content:space-between;
315
317
  }
316
318
 
317
- ._wrapper_em1hf_49{
319
+ ._wrapper_ztyslr_49{
318
320
  display:flex;
319
321
  }
320
322
 
321
- ._hoverIcon_em1hf_53{
323
+ ._hoverIcon_ztyslr_53{
322
324
  visibility:hidden;
323
325
  }
324
326
 
325
- ._hoverIcon_em1hf_53._hoverIconNoReserve_em1hf_56{
327
+ ._hoverIcon_ztyslr_53._hoverIconNoReserve_ztyslr_56{
326
328
  display:none;
327
329
  }
328
330
 
329
- ._menuItem_em1hf_61{
331
+ ._menuItem_ztyslr_61{
330
332
  --_rs-theme-dark:var(
331
333
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
332
334
  var(--rs-theme-dark, 0)
@@ -338,7 +340,7 @@
338
340
 
339
341
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
340
342
 
341
- ._menuItem_em1hf_61{
343
+ ._menuItem_ztyslr_61{
342
344
  --_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)));
343
345
  --_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)));
344
346
  --_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)));
@@ -349,7 +351,7 @@
349
351
 
350
352
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
351
353
 
352
- ._menuItem_em1hf_61{
354
+ ._menuItem_ztyslr_61{
353
355
  --_rs-color-primary:rgb(calc(107 * var(--_rs-theme-light-coefficient, 1) + 132 * var(--_rs-theme-dark-coefficient, 0)), calc(87 * var(--_rs-theme-light-coefficient, 1) + 115 * var(--_rs-theme-dark-coefficient, 0)), 255);
354
356
  --_rs-color-primary-dim:rgb(calc(137 * var(--_rs-theme-light-coefficient, 1) + 111 * var(--_rs-theme-dark-coefficient, 0)), calc(121 * var(--_rs-theme-light-coefficient, 1) + 97 * var(--_rs-theme-dark-coefficient, 0)), calc(255 * var(--_rs-theme-light-coefficient, 1) + 210 * var(--_rs-theme-dark-coefficient, 0)));
355
357
  --_rs-color-primary-fog:rgb(calc(225 * var(--_rs-theme-light-coefficient, 1) + 46 * var(--_rs-theme-dark-coefficient, 0)), calc(221 * var(--_rs-theme-light-coefficient, 1) + 43 * var(--_rs-theme-dark-coefficient, 0)), calc(255 * var(--_rs-theme-light-coefficient, 1) + 73 * var(--_rs-theme-dark-coefficient, 0)));
@@ -358,7 +360,7 @@
358
360
  }
359
361
  }
360
362
 
361
- ._menuItem_em1hf_61 {
363
+ ._menuItem_ztyslr_61 {
362
364
  letter-spacing:var(
363
365
  --rs-text-base-letter-spacing,
364
366
  var(--_rs-typography-letter-spacing)
@@ -399,51 +401,51 @@
399
401
  -moz-osx-font-smoothing:inherit;
400
402
  }
401
403
 
402
- ._menuItem_em1hf_61:focus{
404
+ ._menuItem_ztyslr_61:focus{
403
405
  outline:none;
404
406
  }
405
407
 
406
- ._keyboardNavigationDisabled_em1hf_98 ._menuItem_em1hf_61:focus-visible,
407
- ._keyboardNavigationDisabled_em1hf_98 ._menuItem_em1hf_61:focus[data-focus-method='key']{
408
+ ._keyboardNavigationDisabled_ztyslr_98 ._menuItem_ztyslr_61:focus-visible,
409
+ ._keyboardNavigationDisabled_ztyslr_98 ._menuItem_ztyslr_61:focus[data-focus-method='key']{
408
410
  box-shadow:0 0 0 2px var(--_rs-color-primary-dim), inset 0 0 0 2px var(--_rs-color-primary-dim);
409
411
  }
410
412
 
411
- ._menuItem_em1hf_61:active{
413
+ ._menuItem_ztyslr_61:active{
412
414
  color:rgb(calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(28 + 227 * var(--_rs-theme-dark-coefficient, 0)));
413
415
  background:var(--_rs-menu-mi-active-background);
414
416
  }
415
417
 
416
- ._menuItem_em1hf_61._selected_em1hf_113{
418
+ ._menuItem_ztyslr_61._selected_ztyslr_113{
417
419
  color:var(--_rs-menu-mi-selected-color);
418
420
  background:var(--_rs-menu-mi-selected-background);
419
421
  }
420
422
 
421
- ._keyboardNavigationEnabled_em1hf_120 ._menuItem_em1hf_61:focus,
422
- ._keyboardNavigationDisabled_em1hf_98 ._menuItem_em1hf_61:hover{
423
+ ._keyboardNavigationEnabled_ztyslr_120 ._menuItem_ztyslr_61:focus,
424
+ ._keyboardNavigationDisabled_ztyslr_98 ._menuItem_ztyslr_61:hover{
423
425
  color:var(--_rs-menu-mi-hover-color);
424
426
  background:var(--_rs-menu-mi-hover-background);
425
427
  }
426
428
 
427
- ._keyboardNavigationEnabled_em1hf_120 ._menuItem_em1hf_61:focus ._hoverIcon_em1hf_53, ._keyboardNavigationDisabled_em1hf_98 ._menuItem_em1hf_61:hover ._hoverIcon_em1hf_53{
429
+ ._keyboardNavigationEnabled_ztyslr_120 ._menuItem_ztyslr_61:focus ._hoverIcon_ztyslr_53, ._keyboardNavigationDisabled_ztyslr_98 ._menuItem_ztyslr_61:hover ._hoverIcon_ztyslr_53{
428
430
  display:block;
429
431
  visibility:visible;
430
432
  }
431
433
 
432
- ._keyboardNavigationEnabled_em1hf_120 ._menuItem_em1hf_61._hideCustomIconOnHover_em1hf_131:focus ._customIcon_em1hf_133, ._keyboardNavigationDisabled_em1hf_98 ._menuItem_em1hf_61._hideCustomIconOnHover_em1hf_131:hover ._customIcon_em1hf_133{
434
+ ._keyboardNavigationEnabled_ztyslr_120 ._menuItem_ztyslr_61._hideCustomIconOnHover_ztyslr_131:focus ._customIcon_ztyslr_133, ._keyboardNavigationDisabled_ztyslr_98 ._menuItem_ztyslr_61._hideCustomIconOnHover_ztyslr_131:hover ._customIcon_ztyslr_133{
433
435
  display:none;
434
436
  }
435
437
 
436
- ._keyboardNavigationEnabled_em1hf_120 ._menuItem_em1hf_61._hideSelectedIconOnHover_em1hf_138:focus ._selectedIcon_em1hf_140, ._keyboardNavigationDisabled_em1hf_98 ._menuItem_em1hf_61._hideSelectedIconOnHover_em1hf_138:hover ._selectedIcon_em1hf_140{
438
+ ._keyboardNavigationEnabled_ztyslr_120 ._menuItem_ztyslr_61._hideSelectedIconOnHover_ztyslr_138:focus ._selectedIcon_ztyslr_140, ._keyboardNavigationDisabled_ztyslr_98 ._menuItem_ztyslr_61._hideSelectedIconOnHover_ztyslr_138:hover ._selectedIcon_ztyslr_140{
437
439
  display:none;
438
440
  }
439
441
 
440
- ._menuItem_em1hf_61._disabled_em1hf_145{
442
+ ._menuItem_ztyslr_61._disabled_ztyslr_145{
441
443
  pointer-events:none;
442
444
 
443
445
  color:rgba(calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(28 + 227 * var(--_rs-theme-dark-coefficient, 0)), 0.5);
444
446
  }
445
447
 
446
- ._contentWrapper_em1hf_152{
448
+ ._contentWrapper_ztyslr_152{
447
449
  display:flex;
448
450
  flex-grow:1;
449
451
 
@@ -451,23 +453,23 @@
451
453
  gap:var(--_rs-menu-mi-icon-offset);
452
454
  }
453
455
 
454
- ._content_em1hf_152{
456
+ ._content_ztyslr_152{
455
457
  flex-grow:1;
456
458
 
457
459
  font-size:inherit;
458
460
  }
459
461
 
460
- ._icon_em1hf_41{
462
+ ._icon_ztyslr_41{
461
463
  flex:0 0;
462
464
  flex-basis:auto;
463
465
  }
464
466
 
465
- ._icon_em1hf_41._resizedIcon_em1hf_170{
467
+ ._icon_ztyslr_41._resizedIcon_ztyslr_170{
466
468
  width:auto;
467
469
  height:var(--_rs-menu-mi-icon-size);
468
470
  }
469
471
 
470
- ._divider_em1hf_178{
472
+ ._divider_ztyslr_178{
471
473
  flex-shrink:0;
472
474
 
473
475
  width:100%;
@@ -479,14 +481,14 @@
479
481
  background-color:rgb(calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(25 + 230 * var(--_rs-theme-dark-coefficient, 0)), calc(28 + 227 * var(--_rs-theme-dark-coefficient, 0)), 0.2);
480
482
  }
481
483
 
482
- ._groupHeaderThemeLight_em1hf_192{
484
+ ._groupHeaderThemeLight_ztyslr_192{
483
485
  --rs-theme-dark:0;
484
486
  }
485
- ._groupHeaderThemeDark_em1hf_195{
487
+ ._groupHeaderThemeDark_ztyslr_195{
486
488
  --rs-theme-dark:1;
487
489
  }
488
490
 
489
- ._groupHeaderSizeL_em1hf_199{
491
+ ._groupHeaderSizeL_ztyslr_199{
490
492
  --_rs-menu-gh-vertical-padding:12px;
491
493
  --_rs-menu-gh-horizontal-padding:16px;
492
494
  --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
@@ -520,7 +522,7 @@
520
522
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
521
523
  --_rs-typography-link-border-bottom-width-from-text:2px;
522
524
  }
523
- ._groupHeaderSizeM_em1hf_202{
525
+ ._groupHeaderSizeM_ztyslr_202{
524
526
  --_rs-menu-gh-vertical-padding:8px;
525
527
  --_rs-menu-gh-horizontal-padding:16px;
526
528
  --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
@@ -554,7 +556,7 @@
554
556
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
555
557
  --_rs-typography-link-border-bottom-width-from-text:2px;
556
558
  }
557
- ._groupHeaderSizeS_em1hf_205{
559
+ ._groupHeaderSizeS_ztyslr_205{
558
560
  --_rs-menu-gh-vertical-padding:6px;
559
561
  --_rs-menu-gh-horizontal-padding:8px;
560
562
  --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
@@ -589,7 +591,7 @@
589
591
  --_rs-typography-link-border-bottom-width-from-text:2px;
590
592
  }
591
593
 
592
- ._groupHeader_em1hf_192{
594
+ ._groupHeader_ztyslr_192{
593
595
  --_rs-theme-dark:var(
594
596
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
595
597
  var(--rs-theme-dark, 0)
@@ -601,7 +603,7 @@
601
603
 
602
604
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
603
605
 
604
- ._groupHeader_em1hf_192{
606
+ ._groupHeader_ztyslr_192{
605
607
  --_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)));
606
608
  --_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)));
607
609
  --_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)));
@@ -612,7 +614,7 @@
612
614
 
613
615
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
614
616
 
615
- ._groupHeader_em1hf_192{
617
+ ._groupHeader_ztyslr_192{
616
618
  --_rs-color-primary:rgb(calc(107 * var(--_rs-theme-light-coefficient, 1) + 132 * var(--_rs-theme-dark-coefficient, 0)), calc(87 * var(--_rs-theme-light-coefficient, 1) + 115 * var(--_rs-theme-dark-coefficient, 0)), 255);
617
619
  --_rs-color-primary-dim:rgb(calc(137 * var(--_rs-theme-light-coefficient, 1) + 111 * var(--_rs-theme-dark-coefficient, 0)), calc(121 * var(--_rs-theme-light-coefficient, 1) + 97 * var(--_rs-theme-dark-coefficient, 0)), calc(255 * var(--_rs-theme-light-coefficient, 1) + 210 * var(--_rs-theme-dark-coefficient, 0)));
618
620
  --_rs-color-primary-fog:rgb(calc(225 * var(--_rs-theme-light-coefficient, 1) + 46 * var(--_rs-theme-dark-coefficient, 0)), calc(221 * var(--_rs-theme-light-coefficient, 1) + 43 * var(--_rs-theme-dark-coefficient, 0)), calc(255 * var(--_rs-theme-light-coefficient, 1) + 73 * var(--_rs-theme-dark-coefficient, 0)));
@@ -621,7 +623,7 @@
621
623
  }
622
624
  }
623
625
 
624
- ._groupHeader_em1hf_192 {
626
+ ._groupHeader_ztyslr_192 {
625
627
  letter-spacing:var(
626
628
  --rs-text-base-letter-spacing,
627
629
  var(--_rs-typography-letter-spacing)
@@ -633,8 +635,10 @@
633
635
  line-height:var(--_rs-typography-line-height);
634
636
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
635
637
  font-feature-settings:'kern', 'liga', 'calt';
636
-
637
- padding:var(--_rs-menu-gh-vertical-padding) var(--_rs-menu-gh-horizontal-padding);
638
+ padding:var(--_rs-menu-gh-vertical-padding) var(
639
+ --rs-menu-item-horizontal-padding,
640
+ var(--_rs-menu-gh-horizontal-padding)
641
+ );
638
642
 
639
643
  border:none;
640
644
 
package/lib/menu.p.module.css.js CHANGED
@@ -1,3 +1,3 @@
1
- var styles = {"themeLight":"_themeLight_em1hf_8","themeDark":"_themeDark_em1hf_11","menu":"_menu_em1hf_15","sizeS":"_sizeS_em1hf_21","sizeM":"_sizeM_em1hf_24","sizeL":"_sizeL_em1hf_27","modeClassic":"_modeClassic_em1hf_31","modeRock":"_modeRock_em1hf_34","modeClear":"_modeClear_em1hf_37","iconPlacementLeft":"_iconPlacementLeft_em1hf_41","iconPlacementRight":"_iconPlacementRight_em1hf_45","wrapper":"_wrapper_em1hf_49","hoverIcon":"_hoverIcon_em1hf_53","hoverIconNoReserve":"_hoverIconNoReserve_em1hf_56","menuItem":"_menuItem_em1hf_61","keyboardNavigationDisabled":"_keyboardNavigationDisabled_em1hf_98","selected":"_selected_em1hf_113","keyboardNavigationEnabled":"_keyboardNavigationEnabled_em1hf_120","hideCustomIconOnHover":"_hideCustomIconOnHover_em1hf_131","customIcon":"_customIcon_em1hf_133","hideSelectedIconOnHover":"_hideSelectedIconOnHover_em1hf_138","selectedIcon":"_selectedIcon_em1hf_140","disabled":"_disabled_em1hf_145","contentWrapper":"_contentWrapper_em1hf_152","content":"_content_em1hf_152","icon":"_icon_em1hf_41","resizedIcon":"_resizedIcon_em1hf_170","divider":"_divider_em1hf_178","groupHeaderThemeLight":"_groupHeaderThemeLight_em1hf_192","groupHeaderThemeDark":"_groupHeaderThemeDark_em1hf_195","groupHeaderSizeL":"_groupHeaderSizeL_em1hf_199","groupHeaderSizeM":"_groupHeaderSizeM_em1hf_202","groupHeaderSizeS":"_groupHeaderSizeS_em1hf_205","groupHeader":"_groupHeader_em1hf_192"};
1
+ var styles = {"themeLight":"_themeLight_ztyslr_8","themeDark":"_themeDark_ztyslr_11","menu":"_menu_ztyslr_15","sizeS":"_sizeS_ztyslr_21","sizeM":"_sizeM_ztyslr_24","sizeL":"_sizeL_ztyslr_27","modeClassic":"_modeClassic_ztyslr_31","modeRock":"_modeRock_ztyslr_34","modeClear":"_modeClear_ztyslr_37","iconPlacementLeft":"_iconPlacementLeft_ztyslr_41","iconPlacementRight":"_iconPlacementRight_ztyslr_45","wrapper":"_wrapper_ztyslr_49","hoverIcon":"_hoverIcon_ztyslr_53","hoverIconNoReserve":"_hoverIconNoReserve_ztyslr_56","menuItem":"_menuItem_ztyslr_61","keyboardNavigationDisabled":"_keyboardNavigationDisabled_ztyslr_98","selected":"_selected_ztyslr_113","keyboardNavigationEnabled":"_keyboardNavigationEnabled_ztyslr_120","hideCustomIconOnHover":"_hideCustomIconOnHover_ztyslr_131","customIcon":"_customIcon_ztyslr_133","hideSelectedIconOnHover":"_hideSelectedIconOnHover_ztyslr_138","selectedIcon":"_selectedIcon_ztyslr_140","disabled":"_disabled_ztyslr_145","contentWrapper":"_contentWrapper_ztyslr_152","content":"_content_ztyslr_152","icon":"_icon_ztyslr_41","resizedIcon":"_resizedIcon_ztyslr_170","divider":"_divider_ztyslr_178","groupHeaderThemeLight":"_groupHeaderThemeLight_ztyslr_192","groupHeaderThemeDark":"_groupHeaderThemeDark_ztyslr_195","groupHeaderSizeL":"_groupHeaderSizeL_ztyslr_199","groupHeaderSizeM":"_groupHeaderSizeM_ztyslr_202","groupHeaderSizeS":"_groupHeaderSizeS_ztyslr_205","groupHeader":"_groupHeader_ztyslr_192"};
2
2
 
3
3
  export { styles as default };
package/lib/public-api.p.css CHANGED
@@ -247,7 +247,8 @@
247
247
  @define-mixin rs-menu-mode-classic{
248
248
  & [data-rs-internal="menu__menu-item"]{
249
249
  --_rs-menu-mi-horizontal-padding-with-mode:var(
250
- --_rs-menu-mi-horizontal-padding
250
+ --rs-menu-item-horizontal-padding,
251
+ var(--_rs-menu-mi-horizontal-padding)
251
252
  );
252
253
  }
253
254
  & [data-rs-internal="menu__menu-item"] [data-rs-internal="menu__menu-item__inner"]{
@@ -266,7 +267,8 @@
266
267
  @define-mixin rs-menu-mode-rock{
267
268
  & [data-rs-internal="menu__menu-item"]{
268
269
  --_rs-menu-mi-horizontal-padding-with-mode:var(
269
- --_rs-menu-mi-horizontal-padding
270
+ --rs-menu-item-horizontal-padding,
271
+ var(--_rs-menu-mi-horizontal-padding)
270
272
  );
271
273
  }
272
274
  & [data-rs-internal="menu__menu-item"] [data-rs-internal="menu__menu-item__inner"]{
@@ -433,7 +435,8 @@
433
435
  @define-mixin rs-menu-item-mode-classic{
434
436
  &[class]{
435
437
  --_rs-menu-mi-horizontal-padding-with-mode:var(
436
- --_rs-menu-mi-horizontal-padding
438
+ --rs-menu-item-horizontal-padding,
439
+ var(--_rs-menu-mi-horizontal-padding)
437
440
  );
438
441
  }
439
442
  &[class] [data-rs-internal="menu__menu-item__inner"]{
@@ -452,7 +455,8 @@
452
455
  @define-mixin rs-menu-item-mode-rock{
453
456
  &[class]{
454
457
  --_rs-menu-mi-horizontal-padding-with-mode:var(
455
- --_rs-menu-mi-horizontal-padding
458
+ --rs-menu-item-horizontal-padding,
459
+ var(--_rs-menu-mi-horizontal-padding)
456
460
  );
457
461
  }
458
462
  &[class] [data-rs-internal="menu__menu-item__inner"]{
package/lib/public-api.pcss CHANGED
@@ -247,7 +247,8 @@
247
247
  @define-mixin rs-menu-mode-classic{
248
248
  & [data-rs-internal="menu__menu-item"]{
249
249
  --_rs-menu-mi-horizontal-padding-with-mode:var(
250
- --_rs-menu-mi-horizontal-padding
250
+ --rs-menu-item-horizontal-padding,
251
+ var(--_rs-menu-mi-horizontal-padding)
251
252
  );
252
253
  }
253
254
  & [data-rs-internal="menu__menu-item"] [data-rs-internal="menu__menu-item__inner"]{
@@ -266,7 +267,8 @@
266
267
  @define-mixin rs-menu-mode-rock{
267
268
  & [data-rs-internal="menu__menu-item"]{
268
269
  --_rs-menu-mi-horizontal-padding-with-mode:var(
269
- --_rs-menu-mi-horizontal-padding
270
+ --rs-menu-item-horizontal-padding,
271
+ var(--_rs-menu-mi-horizontal-padding)
270
272
  );
271
273
  }
272
274
  & [data-rs-internal="menu__menu-item"] [data-rs-internal="menu__menu-item__inner"]{
@@ -433,7 +435,8 @@
433
435
  @define-mixin rs-menu-item-mode-classic{
434
436
  &[class]{
435
437
  --_rs-menu-mi-horizontal-padding-with-mode:var(
436
- --_rs-menu-mi-horizontal-padding
438
+ --rs-menu-item-horizontal-padding,
439
+ var(--_rs-menu-mi-horizontal-padding)
437
440
  );
438
441
  }
439
442
  &[class] [data-rs-internal="menu__menu-item__inner"]{
@@ -452,7 +455,8 @@
452
455
  @define-mixin rs-menu-item-mode-rock{
453
456
  &[class]{
454
457
  --_rs-menu-mi-horizontal-padding-with-mode:var(
455
- --_rs-menu-mi-horizontal-padding
458
+ --rs-menu-item-horizontal-padding,
459
+ var(--_rs-menu-mi-horizontal-padding)
456
460
  );
457
461
  }
458
462
  &[class] [data-rs-internal="menu__menu-item__inner"]{
package/llm/components/menu.md CHANGED
@@ -12,7 +12,7 @@ Do not combine `iconPlacement="right"` with `selected` prop.
12
12
 
13
13
  #### Example
14
14
 
15
- ```tsx
15
+ ```jsx
16
16
  import { Menu, MenuItem } from '@rescui/menu';
17
17
  import {
18
18
  PersonOutlineIcon,
@@ -33,7 +33,7 @@ import {
33
33
 
34
34
  #### With glow hover and mode rock
35
35
 
36
- ```tsx
36
+ ```jsx
37
37
  import { Menu, MenuItem } from '@rescui/menu';
38
38
  import {
39
39
  PersonOutlineIcon,
@@ -71,7 +71,7 @@ render(<Demo />);
71
71
 
72
72
  If you want to change a size of the menu and items content, you should use `resizeIcons` prop.
73
73
 
74
- ```tsx
74
+ ```jsx
75
75
  import { Menu, MenuItem } from '@rescui/menu';
76
76
  import {
77
77
  PersonOutlineIcon,
@@ -94,7 +94,7 @@ import {
94
94
 
95
95
  You can use `hoverIcon` prop to set the icon for the hovered items.
96
96
 
97
- ```tsx
97
+ ```jsx
98
98
  import { Menu, MenuItem } from '@rescui/menu';
99
99
  import {
100
100
  DownloadOutlineIcon,
@@ -123,7 +123,7 @@ import {
123
123
 
124
124
  If your primary color background requires dark text color, use `--rs-menu-contrast-primary` CSS variable.
125
125
 
126
- ```tsx
126
+ ```jsx
127
127
  import { Menu, MenuItem } from '@rescui/menu';
128
128
 
129
129
  const Demo = () => {
@@ -176,7 +176,7 @@ render(<Demo />);
176
176
 
177
177
  Use the controls to see the effect at different viewport widths.
178
178
 
179
- ```tsx
179
+ ```jsx
180
180
  import { Menu, MenuItem } from '@rescui/menu';
181
181
  import {
182
182
  PersonOutlineIcon,
@@ -217,7 +217,7 @@ const MyMenu = () => {
217
217
  render(<MyMenu />);
218
218
  ```
219
219
 
220
- ```postcss attached
220
+ ```postcss
221
221
  @import '@rescui/menu/lib/public-api.p.css';
222
222
  @import '@rescui/icons/lib/public-api.p.css';
223
223
 
@@ -246,9 +246,32 @@ render(<MyMenu />);
246
246
  | Variable | Syntax | Description |
247
247
  | --- | --- | --- |
248
248
  | `--rs-menu-contrast-primary` | `0 \| 1` | The flag whenever the current primary is contrast enough and highlighted text color should be inverted |
249
+ | `--rs-menu-item-horizontal-padding` | `<length>` | Horizontal padding of menu items and group headers, overrides the padding of the size. Can be set on `Menu`, `MenuItem` or any ancestor, e.g. the `Dropdown`. Has no effect in the `clear` mode |
249
250
 
250
251
  Check out [this example](/components/menu/#contrast-primary-color) for contrast primary.
251
252
 
253
+ ##### Horizontal padding
254
+
255
+ `--rs-menu-item-horizontal-padding` overrides the side padding of the items and group headers without changing the height and the typography of the size, e.g. to align a size `s` menu with 16px paddings of the surrounding content. It is inherited, so it can be set on the menu, on an item or on any ancestor such as a `Dropdown`.
256
+
257
+ ```jsx
258
+ import { Menu, MenuItem } from '@rescui/menu';
259
+
260
+ <Menu size="s" resizeIcons className="wide-padding-menu">
261
+ <MenuItem>Australia</MenuItem>
262
+ <MenuItem selected>Germany</MenuItem>
263
+ <MenuItem>Netherlands</MenuItem>
264
+ </Menu>;
265
+ ```
266
+
267
+ ```postcss attached
268
+ .wide-padding-menu {
269
+ --rs-menu-item-horizontal-padding: 16px;
270
+
271
+ max-width: 320px;
272
+ }
273
+ ```
274
+
252
275
  #### `MenuItem` mixins
253
276
 
254
277
  | Mixin name | Details |
@@ -264,7 +287,7 @@ Check out [this example](/components/menu/#contrast-primary-color) for contrast
264
287
 
265
288
  Use the controls to see the effect at different viewport widths.
266
289
 
267
- ```tsx
290
+ ```jsx
268
291
  import { MenuItem } from '@rescui/menu';
269
292
  import { PersonOutlineIcon } from '@rescui/icons';
270
293
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/menu",
3
- "version": "0.17.2",
3
+ "version": "0.17.3-floating-ui-migration-ee8cf10db.9.sha-ee8cf10db",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -25,11 +25,11 @@
25
25
  "react": ">=17.0.0 <20"
26
26
  },
27
27
  "devDependencies": {
28
- "@rescui/colors": "^0.3.6",
29
- "@rescui/postcss-preset-library": "^0.2.4",
30
- "@rescui/scripts": "^0.6.0",
31
- "@rescui/typography": "^0.30.2",
32
- "@rescui/visual-regression": "^0.1.5",
28
+ "@rescui/colors": "0.3.7-floating-ui-migration-ee8cf10db.12.sha-ee8cf10db",
29
+ "@rescui/postcss-preset-library": "0.2.4",
30
+ "@rescui/scripts": "0.6.0",
31
+ "@rescui/typography": "0.30.3-floating-ui-migration-ee8cf10db.9.sha-ee8cf10db",
32
+ "@rescui/visual-regression": "0.1.5",
33
33
  "postcss": "^8.5.28"
34
34
  },
35
35
  "scripts": {
@@ -37,5 +37,5 @@
37
37
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
38
38
  },
39
39
  "nx": {},
40
- "gitHead": "5a6fe218e161f8f97ea1faf56a82b0a5dae2ab4d"
40
+ "gitHead": "ee8cf10dbbe12af812fa565b2325a88196088d92"
41
41
  }