@jetbrains/kotlin-web-site-ui 4.3.0 → 4.4.0-alpha.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.
Files changed (34) hide show
  1. package/out/components/cta-block/index.css +2 -2
  2. package/out/components/footer/index.css +6 -3
  3. package/out/components/grid/index.css +65 -65
  4. package/out/components/header/full-search/full-search.js +8 -1
  5. package/out/components/header/header.js +7 -16
  6. package/out/components/header/header.module.pcss.js +1 -2
  7. package/out/components/header/index.css +121 -72
  8. package/out/components/header/index.js +1 -1
  9. package/out/components/header/logo-small/kotlin-logo-small.svg.js +18 -16
  10. package/out/components/header/logo-small/logo-small.js +1 -1
  11. package/out/components/header/menu-popup/menu-button/menu-button.js +8 -5
  12. package/out/components/header/menu-popup/menu-list/menu-list.js +33 -0
  13. package/out/components/header/menu-popup/menu-list/menu-list.module.pcss.js +4 -0
  14. package/out/components/header/menu-popup/menu-list-item/menu-list-item.js +28 -0
  15. package/out/components/header/menu-popup/menu-list-item/menu-list-item.module.pcss.js +7 -0
  16. package/out/components/header/menu-popup/menu-popup.js +3 -43
  17. package/out/components/header/menu-popup/menu-popup.module.pcss.js +0 -4
  18. package/out/components/header/nav-scheme.js +9 -3
  19. package/out/components/header/search-button/search-button.js +13 -2
  20. package/out/components/header/search-button/search-button.module.pcss.js +2 -1
  21. package/out/components/popup/index.css +1 -1
  22. package/out/components/quotes-slider/index.css +4 -4
  23. package/out/components/top-menu/index.css +92 -125
  24. package/out/components/top-menu/top-menu.js +20 -13
  25. package/out/components/top-menu/{dropdown-menu → vertical-menu}/arrow-dropdown-icon.svg.js +0 -0
  26. package/out/components/top-menu/vertical-menu/vertical-menu.js +123 -0
  27. package/out/components/top-menu/vertical-menu/vertical-menu.module.pcss.js +13 -0
  28. package/out/components/typography/index.css +6 -5
  29. package/out/components/youtube-player/index.css +2 -1
  30. package/package.json +1 -1
  31. package/out/components/header/menu-popup/menu-button/close-icon.svg.js +0 -35
  32. package/out/components/header/menu-popup/menu-button/hamburger-icon.svg.js +0 -35
  33. package/out/components/top-menu/dropdown-menu/dropdown-menu.js +0 -71
  34. package/out/components/top-menu/dropdown-menu/dropdown-menu.module.pcss.js +0 -15
package/out/components/cta-block/index.css CHANGED
@@ -3,7 +3,7 @@
3
3
  color: #fff;
4
4
  padding: 32px 0;
5
5
  }
6
- @media (--ktl-sm) {.ktl-cta-block-module_wrapper_60Mug {
6
+ @media (min-width: 768px) {.ktl-cta-block-module_wrapper_60Mug {
7
7
  padding: 48px 0
8
8
  }
9
9
  }
@@ -13,7 +13,7 @@
13
13
  margin-bottom: 64px;
14
14
  }
15
15
 
16
- @media (--ktl-sm) {
16
+ @media (min-width: 768px) {
17
17
 
18
18
  .ktl-cta-block-module_top-title_7p65f {
19
19
  margin-bottom: 96px
package/out/components/footer/index.css CHANGED
@@ -30,7 +30,8 @@
30
30
  --ktl-overlay-z-index: 900;
31
31
  --ktl-top-menu-z-index: 905;
32
32
  --ktl-header-z-index: 906;
33
- --ktl-header-height-mobile: 48px;
33
+ --ktl-mobile-dropdown-list-z-index: 907;
34
+ --ktl-header-height-mobile: 52px;
34
35
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
35
36
  --rs-font-family-ui: var(--ktl-font-family-inter);
36
37
  }
@@ -87,7 +88,8 @@
87
88
  --ktl-overlay-z-index: 900;
88
89
  --ktl-top-menu-z-index: 905;
89
90
  --ktl-header-z-index: 906;
90
- --ktl-header-height-mobile: 48px;
91
+ --ktl-mobile-dropdown-list-z-index: 907;
92
+ --ktl-header-height-mobile: 52px;
91
93
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
92
94
  --rs-font-family-ui: var(--ktl-font-family-inter);
93
95
  }
@@ -144,7 +146,8 @@
144
146
  --ktl-overlay-z-index: 900;
145
147
  --ktl-top-menu-z-index: 905;
146
148
  --ktl-header-z-index: 906;
147
- --ktl-header-height-mobile: 48px;
149
+ --ktl-mobile-dropdown-list-z-index: 907;
150
+ --ktl-header-height-mobile: 52px;
148
151
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
149
152
  --rs-font-family-ui: var(--ktl-font-family-inter);
150
153
  }
package/out/components/grid/index.css CHANGED
@@ -18,7 +18,7 @@
18
18
  max-width: 100%;
19
19
  }
20
20
 
21
- @media (--ktl-xs) {
21
+ @media (max-width: 767px) {
22
22
 
23
23
  .ktl-col {
24
24
  padding-right: var(--ktl-grid-gutter-mobile-half);
@@ -35,7 +35,7 @@
35
35
  max-width: calc(var(--ktl-grid-col-size) * 1);
36
36
  }
37
37
 
38
- @media (--ktl-xs) {
38
+ @media (max-width: 767px) {
39
39
 
40
40
  .ktl-col-1 {
41
41
  padding-right: var(--ktl-grid-gutter-mobile-half);
@@ -56,7 +56,7 @@
56
56
  max-width: calc(var(--ktl-grid-col-size) * 2);
57
57
  }
58
58
 
59
- @media (--ktl-xs) {
59
+ @media (max-width: 767px) {
60
60
 
61
61
  .ktl-col-2 {
62
62
  padding-right: var(--ktl-grid-gutter-mobile-half);
@@ -77,7 +77,7 @@
77
77
  max-width: calc(var(--ktl-grid-col-size) * 3);
78
78
  }
79
79
 
80
- @media (--ktl-xs) {
80
+ @media (max-width: 767px) {
81
81
 
82
82
  .ktl-col-3 {
83
83
  padding-right: var(--ktl-grid-gutter-mobile-half);
@@ -98,7 +98,7 @@
98
98
  max-width: calc(var(--ktl-grid-col-size) * 4);
99
99
  }
100
100
 
101
- @media (--ktl-xs) {
101
+ @media (max-width: 767px) {
102
102
 
103
103
  .ktl-col-4 {
104
104
  padding-right: var(--ktl-grid-gutter-mobile-half);
@@ -119,7 +119,7 @@
119
119
  max-width: calc(var(--ktl-grid-col-size) * 5);
120
120
  }
121
121
 
122
- @media (--ktl-xs) {
122
+ @media (max-width: 767px) {
123
123
 
124
124
  .ktl-col-5 {
125
125
  padding-right: var(--ktl-grid-gutter-mobile-half);
@@ -140,7 +140,7 @@
140
140
  max-width: calc(var(--ktl-grid-col-size) * 6);
141
141
  }
142
142
 
143
- @media (--ktl-xs) {
143
+ @media (max-width: 767px) {
144
144
 
145
145
  .ktl-col-6 {
146
146
  padding-right: var(--ktl-grid-gutter-mobile-half);
@@ -161,7 +161,7 @@
161
161
  max-width: calc(var(--ktl-grid-col-size) * 7);
162
162
  }
163
163
 
164
- @media (--ktl-xs) {
164
+ @media (max-width: 767px) {
165
165
 
166
166
  .ktl-col-7 {
167
167
  padding-right: var(--ktl-grid-gutter-mobile-half);
@@ -182,7 +182,7 @@
182
182
  max-width: calc(var(--ktl-grid-col-size) * 8);
183
183
  }
184
184
 
185
- @media (--ktl-xs) {
185
+ @media (max-width: 767px) {
186
186
 
187
187
  .ktl-col-8 {
188
188
  padding-right: var(--ktl-grid-gutter-mobile-half);
@@ -203,7 +203,7 @@
203
203
  max-width: calc(var(--ktl-grid-col-size) * 9);
204
204
  }
205
205
 
206
- @media (--ktl-xs) {
206
+ @media (max-width: 767px) {
207
207
 
208
208
  .ktl-col-9 {
209
209
  padding-right: var(--ktl-grid-gutter-mobile-half);
@@ -224,7 +224,7 @@
224
224
  max-width: calc(var(--ktl-grid-col-size) * 10);
225
225
  }
226
226
 
227
- @media (--ktl-xs) {
227
+ @media (max-width: 767px) {
228
228
 
229
229
  .ktl-col-10 {
230
230
  padding-right: var(--ktl-grid-gutter-mobile-half);
@@ -245,7 +245,7 @@
245
245
  max-width: calc(var(--ktl-grid-col-size) * 11);
246
246
  }
247
247
 
248
- @media (--ktl-xs) {
248
+ @media (max-width: 767px) {
249
249
 
250
250
  .ktl-col-11 {
251
251
  padding-right: var(--ktl-grid-gutter-mobile-half);
@@ -266,7 +266,7 @@
266
266
  max-width: calc(var(--ktl-grid-col-size) * 12);
267
267
  }
268
268
 
269
- @media (--ktl-xs) {
269
+ @media (max-width: 767px) {
270
270
 
271
271
  .ktl-col-12 {
272
272
  padding-right: var(--ktl-grid-gutter-mobile-half);
@@ -278,7 +278,7 @@
278
278
  margin-left: calc(var(--ktl-grid-col-size) * 12);
279
279
  }
280
280
 
281
- @media (--ktl-sm) {
281
+ @media (min-width: 768px) {
282
282
  .ktl-col-sm {
283
283
  padding-right: var(--ktl-grid-gutter-half);
284
284
  padding-left: var(--ktl-grid-gutter-half);
@@ -286,7 +286,7 @@
286
286
  flex-basis: 0;
287
287
  max-width: 100%;
288
288
  }
289
- @media (--ktl-xs) {
289
+ @media (max-width: 767px) {
290
290
  .ktl-col-sm {
291
291
  padding-right: var(--ktl-grid-gutter-mobile-half);
292
292
  padding-left: var(--ktl-grid-gutter-mobile-half)
@@ -300,7 +300,7 @@
300
300
  flex-basis: calc(var(--ktl-grid-col-size) * 1);
301
301
  max-width: calc(var(--ktl-grid-col-size) * 1);
302
302
  }
303
- @media (--ktl-xs) {
303
+ @media (max-width: 767px) {
304
304
  .ktl-col-sm-1 {
305
305
  padding-right: var(--ktl-grid-gutter-mobile-half);
306
306
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -317,7 +317,7 @@
317
317
  flex-basis: calc(var(--ktl-grid-col-size) * 2);
318
318
  max-width: calc(var(--ktl-grid-col-size) * 2);
319
319
  }
320
- @media (--ktl-xs) {
320
+ @media (max-width: 767px) {
321
321
  .ktl-col-sm-2 {
322
322
  padding-right: var(--ktl-grid-gutter-mobile-half);
323
323
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -334,7 +334,7 @@
334
334
  flex-basis: calc(var(--ktl-grid-col-size) * 3);
335
335
  max-width: calc(var(--ktl-grid-col-size) * 3);
336
336
  }
337
- @media (--ktl-xs) {
337
+ @media (max-width: 767px) {
338
338
  .ktl-col-sm-3 {
339
339
  padding-right: var(--ktl-grid-gutter-mobile-half);
340
340
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -351,7 +351,7 @@
351
351
  flex-basis: calc(var(--ktl-grid-col-size) * 4);
352
352
  max-width: calc(var(--ktl-grid-col-size) * 4);
353
353
  }
354
- @media (--ktl-xs) {
354
+ @media (max-width: 767px) {
355
355
  .ktl-col-sm-4 {
356
356
  padding-right: var(--ktl-grid-gutter-mobile-half);
357
357
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -368,7 +368,7 @@
368
368
  flex-basis: calc(var(--ktl-grid-col-size) * 5);
369
369
  max-width: calc(var(--ktl-grid-col-size) * 5);
370
370
  }
371
- @media (--ktl-xs) {
371
+ @media (max-width: 767px) {
372
372
  .ktl-col-sm-5 {
373
373
  padding-right: var(--ktl-grid-gutter-mobile-half);
374
374
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -385,7 +385,7 @@
385
385
  flex-basis: calc(var(--ktl-grid-col-size) * 6);
386
386
  max-width: calc(var(--ktl-grid-col-size) * 6);
387
387
  }
388
- @media (--ktl-xs) {
388
+ @media (max-width: 767px) {
389
389
  .ktl-col-sm-6 {
390
390
  padding-right: var(--ktl-grid-gutter-mobile-half);
391
391
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -402,7 +402,7 @@
402
402
  flex-basis: calc(var(--ktl-grid-col-size) * 7);
403
403
  max-width: calc(var(--ktl-grid-col-size) * 7);
404
404
  }
405
- @media (--ktl-xs) {
405
+ @media (max-width: 767px) {
406
406
  .ktl-col-sm-7 {
407
407
  padding-right: var(--ktl-grid-gutter-mobile-half);
408
408
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -419,7 +419,7 @@
419
419
  flex-basis: calc(var(--ktl-grid-col-size) * 8);
420
420
  max-width: calc(var(--ktl-grid-col-size) * 8);
421
421
  }
422
- @media (--ktl-xs) {
422
+ @media (max-width: 767px) {
423
423
  .ktl-col-sm-8 {
424
424
  padding-right: var(--ktl-grid-gutter-mobile-half);
425
425
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -436,7 +436,7 @@
436
436
  flex-basis: calc(var(--ktl-grid-col-size) * 9);
437
437
  max-width: calc(var(--ktl-grid-col-size) * 9);
438
438
  }
439
- @media (--ktl-xs) {
439
+ @media (max-width: 767px) {
440
440
  .ktl-col-sm-9 {
441
441
  padding-right: var(--ktl-grid-gutter-mobile-half);
442
442
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -453,7 +453,7 @@
453
453
  flex-basis: calc(var(--ktl-grid-col-size) * 10);
454
454
  max-width: calc(var(--ktl-grid-col-size) * 10);
455
455
  }
456
- @media (--ktl-xs) {
456
+ @media (max-width: 767px) {
457
457
  .ktl-col-sm-10 {
458
458
  padding-right: var(--ktl-grid-gutter-mobile-half);
459
459
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -470,7 +470,7 @@
470
470
  flex-basis: calc(var(--ktl-grid-col-size) * 11);
471
471
  max-width: calc(var(--ktl-grid-col-size) * 11);
472
472
  }
473
- @media (--ktl-xs) {
473
+ @media (max-width: 767px) {
474
474
  .ktl-col-sm-11 {
475
475
  padding-right: var(--ktl-grid-gutter-mobile-half);
476
476
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -487,7 +487,7 @@
487
487
  flex-basis: calc(var(--ktl-grid-col-size) * 12);
488
488
  max-width: calc(var(--ktl-grid-col-size) * 12);
489
489
  }
490
- @media (--ktl-xs) {
490
+ @media (max-width: 767px) {
491
491
  .ktl-col-sm-12 {
492
492
  padding-right: var(--ktl-grid-gutter-mobile-half);
493
493
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -498,7 +498,7 @@
498
498
  }
499
499
  }
500
500
 
501
- @media (--ktl-md) {
501
+ @media (min-width: 1024px) {
502
502
  .ktl-col-md {
503
503
  padding-right: var(--ktl-grid-gutter-half);
504
504
  padding-left: var(--ktl-grid-gutter-half);
@@ -506,7 +506,7 @@
506
506
  flex-basis: 0;
507
507
  max-width: 100%;
508
508
  }
509
- @media (--ktl-xs) {
509
+ @media (max-width: 767px) {
510
510
  .ktl-col-md {
511
511
  padding-right: var(--ktl-grid-gutter-mobile-half);
512
512
  padding-left: var(--ktl-grid-gutter-mobile-half)
@@ -520,7 +520,7 @@
520
520
  flex-basis: calc(var(--ktl-grid-col-size) * 1);
521
521
  max-width: calc(var(--ktl-grid-col-size) * 1);
522
522
  }
523
- @media (--ktl-xs) {
523
+ @media (max-width: 767px) {
524
524
  .ktl-col-md-1 {
525
525
  padding-right: var(--ktl-grid-gutter-mobile-half);
526
526
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -537,7 +537,7 @@
537
537
  flex-basis: calc(var(--ktl-grid-col-size) * 2);
538
538
  max-width: calc(var(--ktl-grid-col-size) * 2);
539
539
  }
540
- @media (--ktl-xs) {
540
+ @media (max-width: 767px) {
541
541
  .ktl-col-md-2 {
542
542
  padding-right: var(--ktl-grid-gutter-mobile-half);
543
543
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -554,7 +554,7 @@
554
554
  flex-basis: calc(var(--ktl-grid-col-size) * 3);
555
555
  max-width: calc(var(--ktl-grid-col-size) * 3);
556
556
  }
557
- @media (--ktl-xs) {
557
+ @media (max-width: 767px) {
558
558
  .ktl-col-md-3 {
559
559
  padding-right: var(--ktl-grid-gutter-mobile-half);
560
560
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -571,7 +571,7 @@
571
571
  flex-basis: calc(var(--ktl-grid-col-size) * 4);
572
572
  max-width: calc(var(--ktl-grid-col-size) * 4);
573
573
  }
574
- @media (--ktl-xs) {
574
+ @media (max-width: 767px) {
575
575
  .ktl-col-md-4 {
576
576
  padding-right: var(--ktl-grid-gutter-mobile-half);
577
577
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -588,7 +588,7 @@
588
588
  flex-basis: calc(var(--ktl-grid-col-size) * 5);
589
589
  max-width: calc(var(--ktl-grid-col-size) * 5);
590
590
  }
591
- @media (--ktl-xs) {
591
+ @media (max-width: 767px) {
592
592
  .ktl-col-md-5 {
593
593
  padding-right: var(--ktl-grid-gutter-mobile-half);
594
594
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -605,7 +605,7 @@
605
605
  flex-basis: calc(var(--ktl-grid-col-size) * 6);
606
606
  max-width: calc(var(--ktl-grid-col-size) * 6);
607
607
  }
608
- @media (--ktl-xs) {
608
+ @media (max-width: 767px) {
609
609
  .ktl-col-md-6 {
610
610
  padding-right: var(--ktl-grid-gutter-mobile-half);
611
611
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -622,7 +622,7 @@
622
622
  flex-basis: calc(var(--ktl-grid-col-size) * 7);
623
623
  max-width: calc(var(--ktl-grid-col-size) * 7);
624
624
  }
625
- @media (--ktl-xs) {
625
+ @media (max-width: 767px) {
626
626
  .ktl-col-md-7 {
627
627
  padding-right: var(--ktl-grid-gutter-mobile-half);
628
628
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -639,7 +639,7 @@
639
639
  flex-basis: calc(var(--ktl-grid-col-size) * 8);
640
640
  max-width: calc(var(--ktl-grid-col-size) * 8);
641
641
  }
642
- @media (--ktl-xs) {
642
+ @media (max-width: 767px) {
643
643
  .ktl-col-md-8 {
644
644
  padding-right: var(--ktl-grid-gutter-mobile-half);
645
645
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -656,7 +656,7 @@
656
656
  flex-basis: calc(var(--ktl-grid-col-size) * 9);
657
657
  max-width: calc(var(--ktl-grid-col-size) * 9);
658
658
  }
659
- @media (--ktl-xs) {
659
+ @media (max-width: 767px) {
660
660
  .ktl-col-md-9 {
661
661
  padding-right: var(--ktl-grid-gutter-mobile-half);
662
662
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -673,7 +673,7 @@
673
673
  flex-basis: calc(var(--ktl-grid-col-size) * 10);
674
674
  max-width: calc(var(--ktl-grid-col-size) * 10);
675
675
  }
676
- @media (--ktl-xs) {
676
+ @media (max-width: 767px) {
677
677
  .ktl-col-md-10 {
678
678
  padding-right: var(--ktl-grid-gutter-mobile-half);
679
679
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -690,7 +690,7 @@
690
690
  flex-basis: calc(var(--ktl-grid-col-size) * 11);
691
691
  max-width: calc(var(--ktl-grid-col-size) * 11);
692
692
  }
693
- @media (--ktl-xs) {
693
+ @media (max-width: 767px) {
694
694
  .ktl-col-md-11 {
695
695
  padding-right: var(--ktl-grid-gutter-mobile-half);
696
696
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -707,7 +707,7 @@
707
707
  flex-basis: calc(var(--ktl-grid-col-size) * 12);
708
708
  max-width: calc(var(--ktl-grid-col-size) * 12);
709
709
  }
710
- @media (--ktl-xs) {
710
+ @media (max-width: 767px) {
711
711
  .ktl-col-md-12 {
712
712
  padding-right: var(--ktl-grid-gutter-mobile-half);
713
713
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -718,7 +718,7 @@
718
718
  }
719
719
  }
720
720
 
721
- @media (--ktl-lg) {
721
+ @media (min-width: 1200px) {
722
722
  .ktl-col-lg {
723
723
  padding-right: var(--ktl-grid-gutter-half);
724
724
  padding-left: var(--ktl-grid-gutter-half);
@@ -726,7 +726,7 @@
726
726
  flex-basis: 0;
727
727
  max-width: 100%;
728
728
  }
729
- @media (--ktl-xs) {
729
+ @media (max-width: 767px) {
730
730
  .ktl-col-lg {
731
731
  padding-right: var(--ktl-grid-gutter-mobile-half);
732
732
  padding-left: var(--ktl-grid-gutter-mobile-half)
@@ -740,7 +740,7 @@
740
740
  flex-basis: calc(var(--ktl-grid-col-size) * 1);
741
741
  max-width: calc(var(--ktl-grid-col-size) * 1);
742
742
  }
743
- @media (--ktl-xs) {
743
+ @media (max-width: 767px) {
744
744
  .ktl-col-lg-1 {
745
745
  padding-right: var(--ktl-grid-gutter-mobile-half);
746
746
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -757,7 +757,7 @@
757
757
  flex-basis: calc(var(--ktl-grid-col-size) * 2);
758
758
  max-width: calc(var(--ktl-grid-col-size) * 2);
759
759
  }
760
- @media (--ktl-xs) {
760
+ @media (max-width: 767px) {
761
761
  .ktl-col-lg-2 {
762
762
  padding-right: var(--ktl-grid-gutter-mobile-half);
763
763
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -774,7 +774,7 @@
774
774
  flex-basis: calc(var(--ktl-grid-col-size) * 3);
775
775
  max-width: calc(var(--ktl-grid-col-size) * 3);
776
776
  }
777
- @media (--ktl-xs) {
777
+ @media (max-width: 767px) {
778
778
  .ktl-col-lg-3 {
779
779
  padding-right: var(--ktl-grid-gutter-mobile-half);
780
780
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -791,7 +791,7 @@
791
791
  flex-basis: calc(var(--ktl-grid-col-size) * 4);
792
792
  max-width: calc(var(--ktl-grid-col-size) * 4);
793
793
  }
794
- @media (--ktl-xs) {
794
+ @media (max-width: 767px) {
795
795
  .ktl-col-lg-4 {
796
796
  padding-right: var(--ktl-grid-gutter-mobile-half);
797
797
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -808,7 +808,7 @@
808
808
  flex-basis: calc(var(--ktl-grid-col-size) * 5);
809
809
  max-width: calc(var(--ktl-grid-col-size) * 5);
810
810
  }
811
- @media (--ktl-xs) {
811
+ @media (max-width: 767px) {
812
812
  .ktl-col-lg-5 {
813
813
  padding-right: var(--ktl-grid-gutter-mobile-half);
814
814
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -825,7 +825,7 @@
825
825
  flex-basis: calc(var(--ktl-grid-col-size) * 6);
826
826
  max-width: calc(var(--ktl-grid-col-size) * 6);
827
827
  }
828
- @media (--ktl-xs) {
828
+ @media (max-width: 767px) {
829
829
  .ktl-col-lg-6 {
830
830
  padding-right: var(--ktl-grid-gutter-mobile-half);
831
831
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -842,7 +842,7 @@
842
842
  flex-basis: calc(var(--ktl-grid-col-size) * 7);
843
843
  max-width: calc(var(--ktl-grid-col-size) * 7);
844
844
  }
845
- @media (--ktl-xs) {
845
+ @media (max-width: 767px) {
846
846
  .ktl-col-lg-7 {
847
847
  padding-right: var(--ktl-grid-gutter-mobile-half);
848
848
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -859,7 +859,7 @@
859
859
  flex-basis: calc(var(--ktl-grid-col-size) * 8);
860
860
  max-width: calc(var(--ktl-grid-col-size) * 8);
861
861
  }
862
- @media (--ktl-xs) {
862
+ @media (max-width: 767px) {
863
863
  .ktl-col-lg-8 {
864
864
  padding-right: var(--ktl-grid-gutter-mobile-half);
865
865
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -876,7 +876,7 @@
876
876
  flex-basis: calc(var(--ktl-grid-col-size) * 9);
877
877
  max-width: calc(var(--ktl-grid-col-size) * 9);
878
878
  }
879
- @media (--ktl-xs) {
879
+ @media (max-width: 767px) {
880
880
  .ktl-col-lg-9 {
881
881
  padding-right: var(--ktl-grid-gutter-mobile-half);
882
882
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -893,7 +893,7 @@
893
893
  flex-basis: calc(var(--ktl-grid-col-size) * 10);
894
894
  max-width: calc(var(--ktl-grid-col-size) * 10);
895
895
  }
896
- @media (--ktl-xs) {
896
+ @media (max-width: 767px) {
897
897
  .ktl-col-lg-10 {
898
898
  padding-right: var(--ktl-grid-gutter-mobile-half);
899
899
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -910,7 +910,7 @@
910
910
  flex-basis: calc(var(--ktl-grid-col-size) * 11);
911
911
  max-width: calc(var(--ktl-grid-col-size) * 11);
912
912
  }
913
- @media (--ktl-xs) {
913
+ @media (max-width: 767px) {
914
914
  .ktl-col-lg-11 {
915
915
  padding-right: var(--ktl-grid-gutter-mobile-half);
916
916
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -927,7 +927,7 @@
927
927
  flex-basis: calc(var(--ktl-grid-col-size) * 12);
928
928
  max-width: calc(var(--ktl-grid-col-size) * 12);
929
929
  }
930
- @media (--ktl-xs) {
930
+ @media (max-width: 767px) {
931
931
  .ktl-col-lg-12 {
932
932
  padding-right: var(--ktl-grid-gutter-mobile-half);
933
933
  padding-left: var(--ktl-grid-gutter-mobile-half);
@@ -944,7 +944,7 @@
944
944
  max-width: var(--ktl-grid-container-width-mobile);
945
945
  }
946
946
 
947
- @media (--ktl-lg) {
947
+ @media (min-width: 1200px) {
948
948
 
949
949
  .ktl-container {
950
950
  padding: 0 var(--ktl-grid-gutter);
@@ -968,7 +968,7 @@
968
968
  flex-direction: row-reverse;
969
969
  }
970
970
 
971
- @media (--ktl-xs) {
971
+ @media (max-width: 767px) {
972
972
 
973
973
  .ktl-row {
974
974
  margin-left: calc(-1 * var(--ktl-grid-gutter-mobile-half));
@@ -988,7 +988,7 @@
988
988
  margin-top: 32px;
989
989
  }
990
990
 
991
- @media (--ktl-xs) {
991
+ @media (max-width: 767px) {
992
992
 
993
993
  .ktl-offset-top-m {
994
994
  margin-top: 16px
@@ -999,7 +999,7 @@
999
999
  margin-top: 48px;
1000
1000
  }
1001
1001
 
1002
- @media (--ktl-xs) {
1002
+ @media (max-width: 767px) {
1003
1003
 
1004
1004
  .ktl-offset-top-l {
1005
1005
  margin-top: 32px
@@ -1010,7 +1010,7 @@
1010
1010
  margin-top: 64px;
1011
1011
  }
1012
1012
 
1013
- @media (--ktl-xs) {
1013
+ @media (max-width: 767px) {
1014
1014
 
1015
1015
  .ktl-offset-top-xl {
1016
1016
  margin-top: 48px
@@ -1021,7 +1021,7 @@
1021
1021
  margin-top: 96px;
1022
1022
  }
1023
1023
 
1024
- @media (--ktl-xs) {
1024
+ @media (max-width: 767px) {
1025
1025
 
1026
1026
  .ktl-offset-top-xxl {
1027
1027
  margin-top: 64px
@@ -1040,7 +1040,7 @@
1040
1040
  margin-bottom: 32px;
1041
1041
  }
1042
1042
 
1043
- @media (--ktl-xs) {
1043
+ @media (max-width: 767px) {
1044
1044
 
1045
1045
  .ktl-offset-bottom-m {
1046
1046
  margin-bottom: 16px
@@ -1051,7 +1051,7 @@
1051
1051
  margin-bottom: 48px;
1052
1052
  }
1053
1053
 
1054
- @media (--ktl-xs) {
1054
+ @media (max-width: 767px) {
1055
1055
 
1056
1056
  .ktl-offset-bottom-l {
1057
1057
  margin-bottom: 32px
@@ -1062,7 +1062,7 @@
1062
1062
  margin-bottom: 64px;
1063
1063
  }
1064
1064
 
1065
- @media (--ktl-xs) {
1065
+ @media (max-width: 767px) {
1066
1066
 
1067
1067
  .ktl-offset-bottom-xl {
1068
1068
  margin-bottom: 48px
@@ -1073,7 +1073,7 @@
1073
1073
  margin-bottom: 96px;
1074
1074
  }
1075
1075
 
1076
- @media (--ktl-xs) {
1076
+ @media (max-width: 767px) {
1077
1077
 
1078
1078
  .ktl-offset-bottom-xxl {
1079
1079
  margin-bottom: 64px
package/out/components/header/full-search/full-search.js CHANGED
@@ -1,4 +1,5 @@
1
- import React__default, { useState, useContext, useRef, useCallback, useLayoutEffect } from 'react';
1
+ import React__default, { useState, useContext, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
2
+ import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
2
3
  import useScrollbarSize from 'react-scrollbar-size';
3
4
  import { ThemeProvider } from '@rescui/ui-contexts';
4
5
  import Input from '@rescui/input';
@@ -53,6 +54,12 @@ const FullSearch = ({
53
54
  }
54
55
  }
55
56
  }, [hits, inputValue]);
57
+ useLayoutEffect(() => {
58
+ if (ref.current) disableBodyScroll(ref.current);
59
+ }, [ref]);
60
+ useEffect(() => {
61
+ return clearAllBodyScrollLocks;
62
+ }, []);
56
63
  return React__default.createElement(ThemeProvider, {
57
64
  theme: 'light'
58
65
  }, React__default.createElement("div", {
package/out/components/header/header.js CHANGED
@@ -35,20 +35,20 @@ const Header = forwardRef(({
35
35
  isPlayground,
36
36
  isUrlActive,
37
37
  searchConfig,
38
- noScrollClassName,
39
38
  resultViewType = SearchResultView.Narrow
40
39
  }, forwardedRef) => {
41
40
  const [menuPopupExpanded, setMenuPopupExpanded] = useState(false);
42
- const [isMenuPopupVisible, setIsMenuPopupVisible] = useState(false);
43
41
  const [isSearchBoxVisible, setSearchBoxVisible] = useState(false);
44
42
  const [fullSearchActive, setFullSearchActive] = useState(false);
45
43
  const items = useMemo(() => getNavScheme(isUrlActive, currentUrl, isPlayground), [isUrlActive, currentUrl, isPlayground]);
44
+ const itemsWithoutHomeSection = useMemo(() => items.slice(1), [items]);
46
45
  const headerRef = useRef(null);
47
46
  useImperativeHandle(forwardedRef, () => headerRef.current);
47
+ const [isMenuPopupVisible, setMenuPopupVisible] = useState(true);
48
48
  useLayoutEffect(() => {
49
- setIsMenuPopupVisible((headerRef.current?.getBoundingClientRect?.().width ?? 0) <= MENU_POPUP_BREAKPOINT);
49
+ setMenuPopupVisible((headerRef.current?.getBoundingClientRect?.().width ?? 0) <= MENU_POPUP_BREAKPOINT);
50
50
  }, [headerRef]);
51
- useResizeObserver(headerRef, entry => setIsMenuPopupVisible(entry.contentRect.width <= MENU_POPUP_BREAKPOINT));
51
+ useResizeObserver(headerRef, entry => setMenuPopupVisible(entry.contentRect.width <= MENU_POPUP_BREAKPOINT));
52
52
  const handleSearchButtonClick = useCallback(() => {
53
53
  setSearchBoxVisible(!isSearchBoxVisible);
54
54
  }, []);
@@ -77,15 +77,6 @@ const Header = forwardRef(({
77
77
  };
78
78
  }
79
79
  }, [fullSearchKeyHandler]);
80
- useEffect(() => {
81
- if (typeof document !== `undefined` && noScrollClassName) {
82
- if (fullSearchActive) {
83
- document.body.classList.add(noScrollClassName);
84
- } else {
85
- document.body.classList.remove(noScrollClassName);
86
- }
87
- }
88
- }, [fullSearchActive]);
89
80
  return React__default.createElement(ThemeProvider, {
90
81
  theme: 'dark'
91
82
  }, React__default.createElement(SearchWrapper, {
@@ -94,7 +85,7 @@ const Header = forwardRef(({
94
85
  ref: headerRef,
95
86
  className: classNames(styles.headerMenu, className, {
96
87
  [styles.withMenuPopup]: menuPopupExpanded,
97
- [styles.border]: hasBorder
88
+ [styles.border]: hasBorder || menuPopupExpanded
98
89
  }),
99
90
  "data-test": 'header'
100
91
  }, isMenuPopupVisible && currentTitle && currentUrl && !menuPopupExpanded ? React__default.createElement(LogoSmall, {
@@ -111,10 +102,10 @@ const Header = forwardRef(({
111
102
  setFullSearchActive: setFullSearchActive,
112
103
  searchBoxViewType: resultViewType
113
104
  })) : React__default.createElement(React__default.Fragment, null, !isMenuPopupVisible && React__default.createElement(HorizontalMenu, {
114
- items: items,
105
+ items: itemsWithoutHomeSection,
115
106
  theme: dropdownTheme,
116
107
  linkHandler: linkHandler
117
- }), React__default.createElement(SearchButton, {
108
+ }), !menuPopupExpanded && React__default.createElement(SearchButton, {
118
109
  onClick: handleSearchButtonClick,
119
110
  isActive: hasSearch
120
111
  }), isMenuPopupVisible && React__default.createElement(MenuPopup, {