@jetbrains/kotlin-web-site-ui 4.11.0 → 4.13.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 (23) hide show
  1. package/out/components/breakpoints/media.pcss +8 -8
  2. package/out/components/breakpoints-v2/constants.js +58 -0
  3. package/out/components/breakpoints-v2/hooks.js +20 -0
  4. package/out/components/breakpoints-v2/index.js +2 -0
  5. package/out/components/breakpoints-v2/media.pcss +24 -0
  6. package/out/components/footer/index.css +29 -5
  7. package/out/components/footer-compact/index.css +24 -0
  8. package/out/components/header/index.css +55 -0
  9. package/out/components/header/index.js +1 -1
  10. package/out/components/header/nav-scheme.js +10 -2
  11. package/out/components/layout/index.css +4 -4
  12. package/out/components/layout-v2/index.css +61 -0
  13. package/out/components/layout-v2/index.js +1 -0
  14. package/out/components/sub-navigation/horizontal-menu/horizontal-menu.js +42 -0
  15. package/out/components/sub-navigation/horizontal-menu/horizontal-menu.module.pcss.js +6 -0
  16. package/out/components/sub-navigation/index.css +147 -0
  17. package/out/components/sub-navigation/index.js +3 -0
  18. package/out/components/sub-navigation/sub-navigation.js +34 -0
  19. package/out/components/sub-navigation/sub-navigation.module.pcss.js +6 -0
  20. package/out/components/top-menu/index.css +16 -0
  21. package/out/components/typography/index.css +8 -0
  22. package/out/components/youtube-player/index.css +8 -0
  23. package/package.json +1 -1
package/out/components/breakpoints/media.pcss CHANGED
@@ -1,14 +1,14 @@
1
- @custom-media --ktl-ms-min (min-width: 375px);
2
- @custom-media --ktl-mm-min (min-width: 473px);
3
- @custom-media --ktl-ts-min (min-width: 617px);
4
- @custom-media --ktl-tm-min (min-width: 809px);
5
- @custom-media --ktl-tl-min (min-width: 1001px);
6
- @custom-media --ktl-ds-min (min-width: 1191px);
7
- @custom-media --ktl-dm-min (min-width: 1281px);
8
1
  @custom-media --ktl-ms (max-width: 374px);
9
2
  @custom-media --ktl-mm (max-width: 472px);
10
3
  @custom-media --ktl-ts (max-width: 616px);
11
4
  @custom-media --ktl-tm (max-width: 808px);
12
5
  @custom-media --ktl-tl (max-width: 1000px);
13
6
  @custom-media --ktl-ds (max-width: 1190px);
14
- @custom-media --ktl-dm (max-width: 1280px);
7
+ @custom-media --ktl-dm (max-width: 1280px);
8
+ @custom-media --ktl-ms-min (min-width: 375px);
9
+ @custom-media --ktl-mm-min (min-width: 473px);
10
+ @custom-media --ktl-ts-min (min-width: 617px);
11
+ @custom-media --ktl-tm-min (min-width: 809px);
12
+ @custom-media --ktl-tl-min (min-width: 1001px);
13
+ @custom-media --ktl-ds-min (min-width: 1191px);
14
+ @custom-media --ktl-dm-min (min-width: 1281px);
package/out/components/breakpoints-v2/constants.js ADDED
@@ -0,0 +1,58 @@
1
+ const BREAKPOINTS = {
2
+ MS: 472,
3
+ ML: 616,
4
+ TM: 808,
5
+ TL: 1000,
6
+ DS: 1190
7
+ };
8
+ const BREAKPOINTS_NAMES = Object.freeze(Object.keys(BREAKPOINTS));
9
+
10
+ function isBreakpointKey(key) {
11
+ return BREAKPOINTS_NAMES.includes(key);
12
+ } // --- Generate media queries for min <= width <= max ---
13
+
14
+
15
+ function generateInMediaItem([name, value], index, list) {
16
+ if (!isBreakpointKey(name)) throw new Error(`Invalid breakpoint name: ${name}`);
17
+ let result = `width <= ${value}px`;
18
+
19
+ if (index > 0) {
20
+ result = `${list[index - 1][1]}px < ${result}`;
21
+ }
22
+
23
+ return [name, `(${result})`];
24
+ }
25
+
26
+ const BREAKPOINTS_IN_MEDIA = Object.fromEntries(Object.entries(BREAKPOINTS).map(generateInMediaItem)); // --- Generate media queries for width > max ---
27
+
28
+ function generateMoreMediaItem([name, value]) {
29
+ if (!isBreakpointKey(name)) throw new Error(`Invalid breakpoint name: ${name}`);
30
+ return [name, `(width > ${value}px)`];
31
+ }
32
+
33
+ const BREAKPOINTS_MORE_MEDIA = Object.fromEntries(Object.entries(BREAKPOINTS).map(generateMoreMediaItem)); // --- Generate media queries for width < min ---
34
+
35
+ function generateLessMediaItem([name], index, list) {
36
+ if (!isBreakpointKey(name)) throw new Error(`Invalid breakpoint name: ${name}`);
37
+ if (index === 0) return null;
38
+ const value = list[index - 1][1];
39
+ return [name, `(width < ${value}px)`];
40
+ }
41
+
42
+ const BREAKPOINTS_LESS_MEDIA = Object.fromEntries(Object.entries(BREAKPOINTS).map(generateLessMediaItem).filter(Boolean)); // ===== BACKWARD COMPATIBILITY =====
43
+ // --- Generate media queries for (max-width: max) ---
44
+
45
+ function generateMaxMediaItem([name, value]) {
46
+ if (!isBreakpointKey(name)) throw new Error(`Invalid breakpoint name: ${name}`);
47
+ return [name, `(max-width: ${value}px)`];
48
+ }
49
+
50
+ const BREAKPOINTS_MAX_MEDIA = Object.fromEntries(Object.entries(BREAKPOINTS).map(generateMaxMediaItem)); // --- Generate media queries for (max-width: max) ---
51
+
52
+ function generateMinMediaItem([name, value]) {
53
+ if (!isBreakpointKey(name)) throw new Error(`Invalid breakpoint name: ${name}`);
54
+ return [name, `(min-width: ${value + 1}px)`];
55
+ }
56
+
57
+ const BREAKPOINTS_MIN_MEDIA = Object.fromEntries(Object.entries(BREAKPOINTS).map(generateMinMediaItem));
58
+ export { BREAKPOINTS, BREAKPOINTS_IN_MEDIA, BREAKPOINTS_LESS_MEDIA, BREAKPOINTS_MAX_MEDIA, BREAKPOINTS_MIN_MEDIA, BREAKPOINTS_MORE_MEDIA, BREAKPOINTS_NAMES };
package/out/components/breakpoints-v2/hooks.js ADDED
@@ -0,0 +1,20 @@
1
+ import { useMedia } from 'the-platform/useMedia';
2
+ import { BREAKPOINTS_MAX_MEDIA } from './constants.js';
3
+
4
+ function useMS() {
5
+ return useMedia(BREAKPOINTS_MAX_MEDIA.MS, false);
6
+ }
7
+
8
+ function useTM() {
9
+ return useMedia(BREAKPOINTS_MAX_MEDIA.TM, false);
10
+ }
11
+
12
+ function useTL() {
13
+ return useMedia(BREAKPOINTS_MAX_MEDIA.TL, false);
14
+ }
15
+
16
+ function useDS() {
17
+ return useMedia(BREAKPOINTS_MAX_MEDIA.DS, false);
18
+ }
19
+
20
+ export { useDS, useMS, useTL, useTM };
package/out/components/breakpoints-v2/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export { BREAKPOINTS, BREAKPOINTS_IN_MEDIA, BREAKPOINTS_LESS_MEDIA, BREAKPOINTS_MAX_MEDIA, BREAKPOINTS_MIN_MEDIA, BREAKPOINTS_MORE_MEDIA, BREAKPOINTS_NAMES } from './constants.js';
2
+ export { useDS, useMS, useTL, useTM } from './hooks.js';
package/out/components/breakpoints-v2/media.pcss ADDED
@@ -0,0 +1,24 @@
1
+ @custom-media --ktl-ms (max-width: 472px);
2
+ @custom-media --ktl-ml (max-width: 616px);
3
+ @custom-media --ktl-tm (max-width: 808px);
4
+ @custom-media --ktl-tl (max-width: 1000px);
5
+ @custom-media --ktl-ds (max-width: 1190px);
6
+ @custom-media --ktl-ms-min (min-width: 473px);
7
+ @custom-media --ktl-ml-min (min-width: 617px);
8
+ @custom-media --ktl-tm-min (min-width: 809px);
9
+ @custom-media --ktl-tl-min (min-width: 1001px);
10
+ @custom-media --ktl-ds-min (min-width: 1191px);
11
+ @custom-media --ktl-ms-in (width <= 472px);
12
+ @custom-media --ktl-ml-in (472px < width <= 616px);
13
+ @custom-media --ktl-tm-in (616px < width <= 808px);
14
+ @custom-media --ktl-tl-in (808px < width <= 1000px);
15
+ @custom-media --ktl-ds-in (1000px < width <= 1190px);
16
+ @custom-media --ktl-ms-more (width > 472px);
17
+ @custom-media --ktl-ml-more (width > 616px);
18
+ @custom-media --ktl-tm-more (width > 808px);
19
+ @custom-media --ktl-tl-more (width > 1000px);
20
+ @custom-media --ktl-ds-more (width > 1190px);
21
+ @custom-media --ktl-ml-less (width < 472px);
22
+ @custom-media --ktl-tm-less (width < 616px);
23
+ @custom-media --ktl-tl-less (width < 808px);
24
+ @custom-media --ktl-ds-less (width < 1000px);
package/out/components/footer/index.css CHANGED
@@ -41,6 +41,14 @@
41
41
  --ktl-header-height-mobile: 52px;
42
42
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
43
43
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
44
+
45
+ }
46
+
47
+ :root {
48
+ --website-ui-text-color: #19191c;
49
+ --website-ui-text-color-dark: #fff;
50
+ --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
51
+ --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
44
52
  }
45
53
 
46
54
  :root {
@@ -106,6 +114,14 @@
106
114
  --ktl-header-height-mobile: 52px;
107
115
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
108
116
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
117
+
118
+ }
119
+
120
+ :root {
121
+ --website-ui-text-color: #19191c;
122
+ --website-ui-text-color-dark: #fff;
123
+ --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
124
+ --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
109
125
  }
110
126
 
111
127
  :root {
@@ -190,6 +206,14 @@
190
206
  --ktl-header-height-mobile: 52px;
191
207
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
192
208
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
209
+
210
+ }
211
+
212
+ :root {
213
+ --website-ui-text-color: #19191c;
214
+ --website-ui-text-color-dark: #fff;
215
+ --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
216
+ --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
193
217
  }
194
218
 
195
219
  :root {
@@ -241,7 +265,7 @@
241
265
  display: none;
242
266
  }
243
267
 
244
- @media (max-width: 808px) {
268
+ @media (width < 616px) {
245
269
  .ktl-footer-module_footer_m67Up {
246
270
  padding: var(--ktl-box-section-l) 0;
247
271
  }
@@ -275,18 +299,18 @@
275
299
  --ktl-layout-width: 1144px;
276
300
  }
277
301
 
278
- @media (max-width: 1190px) {.ktl-layout {
302
+ @media (width < 1000px) {.ktl-layout {
279
303
  --ktl-layout-width: 952px;
280
304
  }
281
305
  }
282
306
 
283
- @media (max-width: 1000px) {.ktl-layout {
307
+ @media (width < 808px) {.ktl-layout {
284
308
  --ktl-layout-spacing: 48px;
285
309
  --ktl-layout-width: 760px;
286
310
  }
287
311
  }
288
312
 
289
- @media (max-width: 808px) {.ktl-layout {
313
+ @media (width < 616px) {.ktl-layout {
290
314
  --ktl-layout-width: 568px;
291
315
  }
292
316
  }
@@ -301,7 +325,7 @@
301
325
  }
302
326
  }
303
327
 
304
- @media (max-width: 374px) {.ktl-layout {
328
+ @media (width > 472px) {.ktl-layout {
305
329
  --ktl-layout-width: 272px;
306
330
  }
307
331
  }
package/out/components/footer-compact/index.css CHANGED
@@ -34,6 +34,14 @@
34
34
  --ktl-header-height-mobile: 52px;
35
35
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
36
36
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
37
+
38
+ }
39
+
40
+ :root {
41
+ --website-ui-text-color: #19191c;
42
+ --website-ui-text-color-dark: #fff;
43
+ --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
44
+ --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
37
45
  }
38
46
 
39
47
  :root {
@@ -106,6 +114,14 @@
106
114
  --ktl-header-height-mobile: 52px;
107
115
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
108
116
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
117
+
118
+ }
119
+
120
+ :root {
121
+ --website-ui-text-color: #19191c;
122
+ --website-ui-text-color-dark: #fff;
123
+ --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
124
+ --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
109
125
  }
110
126
 
111
127
  :root {
@@ -178,6 +194,14 @@
178
194
  --ktl-header-height-mobile: 52px;
179
195
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
180
196
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
197
+
198
+ }
199
+
200
+ :root {
201
+ --website-ui-text-color: #19191c;
202
+ --website-ui-text-color-dark: #fff;
203
+ --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
204
+ --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
181
205
  }
182
206
 
183
207
  :root {
package/out/components/header/index.css CHANGED
@@ -42,6 +42,14 @@
42
42
  --ktl-header-height-mobile: 52px;
43
43
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
44
44
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
45
+
46
+ }
47
+
48
+ :root {
49
+ --website-ui-text-color: #19191c;
50
+ --website-ui-text-color-dark: #fff;
51
+ --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
52
+ --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
45
53
  }
46
54
 
47
55
  :root {
@@ -107,6 +115,14 @@
107
115
  --ktl-header-height-mobile: 52px;
108
116
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
109
117
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
118
+
119
+ }
120
+
121
+ :root {
122
+ --website-ui-text-color: #19191c;
123
+ --website-ui-text-color-dark: #fff;
124
+ --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
125
+ --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
110
126
  }
111
127
 
112
128
  :root {
@@ -271,6 +287,14 @@
271
287
  --ktl-header-height-mobile: 52px;
272
288
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
273
289
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
290
+
291
+ }
292
+
293
+ :root {
294
+ --website-ui-text-color: #19191c;
295
+ --website-ui-text-color-dark: #fff;
296
+ --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
297
+ --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
274
298
  }
275
299
 
276
300
  :root {
@@ -749,6 +773,14 @@
749
773
  --ktl-header-height-mobile: 52px;
750
774
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
751
775
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
776
+
777
+ }
778
+
779
+ :root {
780
+ --website-ui-text-color: #19191c;
781
+ --website-ui-text-color-dark: #fff;
782
+ --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
783
+ --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
752
784
  }
753
785
 
754
786
  :root {
@@ -827,6 +859,14 @@
827
859
  --ktl-header-height-mobile: 52px;
828
860
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
829
861
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
862
+
863
+ }
864
+
865
+ :root {
866
+ --website-ui-text-color: #19191c;
867
+ --website-ui-text-color-dark: #fff;
868
+ --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
869
+ --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
830
870
  }
831
871
 
832
872
  :root {
@@ -900,6 +940,14 @@
900
940
  --ktl-header-height-mobile: 52px;
901
941
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
902
942
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
943
+
944
+ }
945
+
946
+ :root {
947
+ --website-ui-text-color: #19191c;
948
+ --website-ui-text-color-dark: #fff;
949
+ --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
950
+ --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
903
951
  }
904
952
 
905
953
  :root {
@@ -926,6 +974,13 @@
926
974
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
927
975
  }
928
976
 
977
+ .ktl-menu-list-module_menu-item-group_mFvUE + .ktl-menu-list-module_menu-item-group_mFvUE {
978
+ margin-top: 0;
979
+ padding-top: 0;
980
+
981
+ border-top: none;
982
+ }
983
+
929
984
  .ktl-logo-small-module_logo-small_iGY12 {
930
985
  flex-grow: 1;
931
986
  display: flex;
package/out/components/header/index.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import './index.css';
2
2
  import { Header } from './header.js';
3
3
  export { Header as default } from './header.js';
4
- export { ANDROID_TITLE, ANDROID_URL, API_OVERVIEW_TITLE, API_OVERVIEW_URL, API_TITLE, CASE_STUDIES_TITLE, CASE_STUDIES_URL, COMMUNITY_TITLE, COMMUNITY_URL, COMPOSE_MULTIPLATFORM, COMPOSE_MULTIPLATFORM_URL, CORE_API_TITLE, CORE_API_URL, COROUTINES_API_TITLE, COROUTINES_API_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DATETIME_API_TITLE, DATETIME_API_URL, DOCS_TITLE, DOCS_URL, HOME_TITLE, HOME_URL, IO_API_TITLE, IO_API_URL, KGP_TITLE, KGP_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, KTOR_TITLE, KTOR_URL, METADATA_JVM_TITLE, METADATA_JVM_URL, MULTIPLATFORM_LIBRARIES_TITLE, MULTIPLATFORM_LIBRARIES_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERIALIZATION_API_TITLE, SERIALIZATION_API_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, TEST_API_TITLE, TEST_API_URL, getNavScheme } from './nav-scheme.js';
4
+ export { ANDROID_TITLE, ANDROID_URL, API_OVERVIEW_TITLE, API_OVERVIEW_URL, API_TITLE, CASE_STUDIES_TITLE, CASE_STUDIES_URL, COMMUNITY_TITLE, COMMUNITY_URL, COMPOSE_MULTIPLATFORM, COMPOSE_MULTIPLATFORM_URL, CORE_API_TITLE, CORE_API_URL, COROUTINES_API_TITLE, COROUTINES_API_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DATETIME_API_TITLE, DATETIME_API_URL, DOCS_NAVIGATION_ITEMS, DOCS_TITLE, DOCS_URL, HOME_TITLE, HOME_URL, IO_API_TITLE, IO_API_URL, KGP_TITLE, KGP_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, KTOR_TITLE, KTOR_URL, METADATA_JVM_TITLE, METADATA_JVM_URL, MULTIPLATFORM_LIBRARIES_TITLE, MULTIPLATFORM_LIBRARIES_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERIALIZATION_API_TITLE, SERIALIZATION_API_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, TEST_API_TITLE, TEST_API_URL, getNavScheme } from './nav-scheme.js';
package/out/components/header/nav-scheme.js CHANGED
@@ -54,6 +54,13 @@ const KTOR_TITLE = 'Ktor';
54
54
  const KTOR_URL = 'https://api.ktor.io/';
55
55
  const COMPOSE_MULTIPLATFORM = 'Compose Multiplatform Material3';
56
56
  const COMPOSE_MULTIPLATFORM_URL = 'https://kotlinlang.org/api/compose-multiplatform/material3/';
57
+ const DOCS_NAVIGATION_ITEMS = [{
58
+ url: '/docs/home.html',
59
+ title: 'Language guide'
60
+ }, {
61
+ url: '/docs/multiplatform/get-started.html',
62
+ title: 'Multiplatform development'
63
+ }];
57
64
  const navScheme = [{
58
65
  title: HOME_TITLE,
59
66
  url: HOME_URL
@@ -78,7 +85,8 @@ const navScheme = [{
78
85
  url: CASE_STUDIES_URL
79
86
  }, {
80
87
  title: DOCS_TITLE,
81
- url: KOTLIN_DOCS_URL
88
+ url: KOTLIN_DOCS_URL,
89
+ items: DOCS_NAVIGATION_ITEMS
82
90
  }, {
83
91
  title: API_TITLE,
84
92
  url: null,
@@ -191,4 +199,4 @@ function makeExternalUrl(url, currentUrl, isPlayground) {
191
199
  return url;
192
200
  }
193
201
 
194
- export { ANDROID_TITLE, ANDROID_URL, API_OVERVIEW_TITLE, API_OVERVIEW_URL, API_TITLE, CASE_STUDIES_TITLE, CASE_STUDIES_URL, COMMUNITY_TITLE, COMMUNITY_URL, COMPOSE_MULTIPLATFORM, COMPOSE_MULTIPLATFORM_URL, CORE_API_TITLE, CORE_API_URL, COROUTINES_API_TITLE, COROUTINES_API_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DATETIME_API_TITLE, DATETIME_API_URL, DOCS_TITLE, DOCS_URL, HOME_TITLE, HOME_URL, IO_API_TITLE, IO_API_URL, KGP_TITLE, KGP_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, KTOR_TITLE, KTOR_URL, METADATA_JVM_TITLE, METADATA_JVM_URL, MULTIPLATFORM_LIBRARIES_TITLE, MULTIPLATFORM_LIBRARIES_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERIALIZATION_API_TITLE, SERIALIZATION_API_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, TEST_API_TITLE, TEST_API_URL, getNavScheme };
202
+ export { ANDROID_TITLE, ANDROID_URL, API_OVERVIEW_TITLE, API_OVERVIEW_URL, API_TITLE, CASE_STUDIES_TITLE, CASE_STUDIES_URL, COMMUNITY_TITLE, COMMUNITY_URL, COMPOSE_MULTIPLATFORM, COMPOSE_MULTIPLATFORM_URL, CORE_API_TITLE, CORE_API_URL, COROUTINES_API_TITLE, COROUTINES_API_URL, DATA_SCIENCE_TITLE, DATA_SCIENCE_URL, DATETIME_API_TITLE, DATETIME_API_URL, DOCS_NAVIGATION_ITEMS, DOCS_TITLE, DOCS_URL, HOME_TITLE, HOME_URL, IO_API_TITLE, IO_API_URL, KGP_TITLE, KGP_URL, KMM_DOCS_TITLE, KMM_DOCS_URL, KOTLIN_DOCS_TITLE, KOTLIN_DOCS_URL, KTOR_TITLE, KTOR_URL, METADATA_JVM_TITLE, METADATA_JVM_URL, MULTIPLATFORM_LIBRARIES_TITLE, MULTIPLATFORM_LIBRARIES_URL, MULTIPLATFORM_MOBILE_TITLE, MULTIPLATFORM_MOBILE_URL, PLAY_EXAMPLES_TITLE, PLAY_EXAMPLES_URL, PLAY_KOANS_TITLE, PLAY_KOANS_URL, PLAY_TITLE, PLAY_TITLE_FULL, PLAY_URL, SERIALIZATION_API_TITLE, SERIALIZATION_API_URL, SERVER_SIDE_TITLE, SERVER_SIDE_URL, SOLUTIONS_TITLE, TEACH_TITLE, TEACH_URL, TEST_API_TITLE, TEST_API_URL, getNavScheme };
package/out/components/layout/index.css CHANGED
@@ -3,18 +3,18 @@
3
3
  --ktl-layout-width: 1144px;
4
4
  }
5
5
 
6
- @media (max-width: 1190px) {.ktl-layout {
6
+ @media (width < 1000px) {.ktl-layout {
7
7
  --ktl-layout-width: 952px;
8
8
  }
9
9
  }
10
10
 
11
- @media (max-width: 1000px) {.ktl-layout {
11
+ @media (width < 808px) {.ktl-layout {
12
12
  --ktl-layout-spacing: 48px;
13
13
  --ktl-layout-width: 760px;
14
14
  }
15
15
  }
16
16
 
17
- @media (max-width: 808px) {.ktl-layout {
17
+ @media (width < 616px) {.ktl-layout {
18
18
  --ktl-layout-width: 568px;
19
19
  }
20
20
  }
@@ -29,7 +29,7 @@
29
29
  }
30
30
  }
31
31
 
32
- @media (max-width: 374px) {.ktl-layout {
32
+ @media (width > 472px) {.ktl-layout {
33
33
  --ktl-layout-width: 272px;
34
34
  }
35
35
  }
package/out/components/layout-v2/index.css ADDED
@@ -0,0 +1,61 @@
1
+ .ktl-layout-v2,
2
+ .ktl-layout-to-2 .ktl-layout,
3
+ .ktl-layout-to-2 .ktl-layout {
4
+ --ktl-layout-spacing: 72px;
5
+ --ktl-layout-width: 1144px;
6
+ }
7
+
8
+ @media (width < 1000px) {.ktl-layout-v2,
9
+ .ktl-layout-to-2 .ktl-layout,
10
+ .ktl-layout-to-2 .ktl-layout {
11
+ --ktl-layout-width: 952px;
12
+ }
13
+ }
14
+
15
+ @media (width < 808px) {.ktl-layout-v2,
16
+ .ktl-layout-to-2 .ktl-layout,
17
+ .ktl-layout-to-2 .ktl-layout {
18
+ --ktl-layout-spacing: 48px;
19
+ --ktl-layout-width: 760px;
20
+ }
21
+ }
22
+
23
+ @media (max-width: 616px) {.ktl-layout-v2,
24
+ .ktl-layout-to-2 .ktl-layout,
25
+ .ktl-layout-to-2 .ktl-layout {
26
+ --ktl-layout-width: 568px;
27
+ }
28
+ }
29
+
30
+ @media (width < 472px) {.ktl-layout-v2,
31
+ .ktl-layout-to-2 .ktl-layout,
32
+ .ktl-layout-to-2 .ktl-layout {
33
+ --ktl-layout-width: 424px;
34
+ }
35
+ }
36
+
37
+ @media (width > 472px) {.ktl-layout-v2,
38
+ .ktl-layout-to-2 .ktl-layout,
39
+ .ktl-layout-to-2 .ktl-layout {
40
+ --ktl-layout-width: 312px;
41
+ }
42
+ }
43
+
44
+ .ktl-layout-v2,
45
+ .ktl-layout-to-2 .ktl-layout,
46
+ .ktl-layout-to-2 .ktl-layout {
47
+
48
+ box-sizing: border-box;
49
+ width: var(--ktl-layout-width);
50
+
51
+ transition: width 200ms;
52
+ will-change: width;
53
+ }
54
+ .ktl-layout--center {
55
+ margin-left: auto;
56
+ margin-right: auto;
57
+ }
58
+ .ktl-layout--spacing {
59
+ margin-top: var(--ktl-layout-spacing);
60
+ margin-bottom: var(--ktl-layout-spacing);
61
+ }
package/out/components/layout-v2/index.js ADDED
@@ -0,0 +1 @@
1
+ import './index.css';
package/out/components/sub-navigation/horizontal-menu/horizontal-menu.js ADDED
@@ -0,0 +1,42 @@
1
+ import React, { useCallback } from 'react';
2
+ import classNames from 'classnames';
3
+ import styles from './horizontal-menu.module.pcss.js';
4
+ import { useTextStyles } from '@rescui/typography';
5
+
6
+ const HorizontalMenuItem = ({
7
+ item,
8
+ isActive,
9
+ linkHandler
10
+ }) => {
11
+ useTextStyles();
12
+ const handleLink = useCallback(event => linkHandler(event, item.url), [item]);
13
+ return isActive ? React.createElement("span", {
14
+ key: item.url,
15
+ className: styles.itemActive
16
+ }, item.title) : React.createElement("a", {
17
+ href: item.url,
18
+ key: item.url,
19
+ className: styles.item,
20
+ onClick: handleLink,
21
+ target: item.isExternal ? '_blank' : undefined,
22
+ rel: "noreferrer"
23
+ }, item.title);
24
+ };
25
+
26
+ const HorizontalMenu = ({
27
+ items,
28
+ activeIndex,
29
+ linkHandler
30
+ }) => {
31
+ const textCn = useTextStyles();
32
+ return React.createElement("nav", {
33
+ className: classNames(styles.horizontalMenu, textCn('rs-text-2'))
34
+ }, items.map((item, index) => React.createElement(HorizontalMenuItem, {
35
+ key: item.url,
36
+ isActive: index === activeIndex,
37
+ item: item,
38
+ linkHandler: linkHandler
39
+ })));
40
+ };
41
+
42
+ export { HorizontalMenu };
package/out/components/sub-navigation/horizontal-menu/horizontal-menu.module.pcss.js ADDED
@@ -0,0 +1,6 @@
1
+ var styles = {
2
+ "horizontalMenu": "ktl-horizontal-menu-module_horizontal-menu_bRQN9",
3
+ "item": "ktl-horizontal-menu-module_item_vmotC",
4
+ "itemActive": "ktl-horizontal-menu-module_item-active_gSpD6"
5
+ };
6
+ export { styles as default };
package/out/components/sub-navigation/index.css ADDED
@@ -0,0 +1,147 @@
1
+ :root {
2
+ --ktl-light-grey: #f4f4f4;
3
+ --ktl-dark-100: rgba(39, 40, 44, 1);
4
+ --ktl-dark-bg-hard: rgba(27, 27, 27, 1);
5
+ --ktl-icon-color-dark: rgba(39, 40, 44, 0.75);
6
+ --ktl-color-white-light: rgba(255, 255, 255, 0.75);
7
+ --ktl-transition-xfast: 100ms;
8
+ --ktl-transition-fast: 300ms;
9
+ --ktl-color-primary-light-theme: #7f52ff;
10
+ --ktl-color-dark-40: rgba(39, 40, 44, 0.4);
11
+ --ktl-light-text-hard: rgba(39, 40, 44, 1);
12
+ --ktl-light-dark-20: rgba(39, 40, 44, 0.2);
13
+ --ktl-divider-color: rgba(25, 25, 28, .2);
14
+ --ktl-overlay-z-index: 900;
15
+ --ktl-top-menu-z-index: 905;
16
+ --ktl-header-z-index: 906;
17
+ --ktl-mobile-dropdown-list-z-index: 907;
18
+ --ktl-header-height-mobile: 52px;
19
+ --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
20
+ --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
21
+
22
+ }
23
+
24
+ :root {
25
+ --website-ui-text-color: #19191c;
26
+ --website-ui-text-color-dark: #fff;
27
+ --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
28
+ --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
29
+ }
30
+
31
+ :root {
32
+ --ktl-box-block-s: 4px;
33
+ --ktl-box-block-m: 8px;
34
+ --ktl-box-block-l: 16px;
35
+
36
+ --ktl-box-section-s: 24px;
37
+ --ktl-box-section-m: 32px;
38
+ --ktl-box-section-l: 48px;
39
+
40
+ --ktl-box-page-s: 64px;
41
+ --ktl-box-page-m: 72px;
42
+ --ktl-box-page-l: 96px;
43
+ }
44
+
45
+ :root {
46
+ --sub-navigation-text-color: var(--website-ui-text-color);
47
+ --sub-navigation-background-color: #fff;
48
+ }
49
+
50
+ .ktl-sub-navigation-module_sub-navigation_dGfIT {
51
+ position: relative;
52
+ display: flex;
53
+ align-items: center;
54
+ gap: 32px;
55
+ height: 64px;
56
+ background-color: var(--sub-navigation-background-color);
57
+ padding: 0 32px;
58
+ overflow: auto;
59
+ }
60
+
61
+ @media (max-width: 640px) {
62
+
63
+ .ktl-sub-navigation-module_sub-navigation_dGfIT {
64
+ height: var(--ktl-header-height-mobile);
65
+ padding: 0 6px 0 4px;
66
+ gap: 16px
67
+ }
68
+ }
69
+
70
+ .ktl-sub-navigation-module_sub-navigation-dark-theme_s4fQ7 {
71
+ --sub-navigation-background-color: rgba(16, 16, 16, 1);
72
+ --sub-navigation-text-color: var(--website-ui-text-color-dark);
73
+ color: var(--sub-navigation-text-color);
74
+ }
75
+
76
+ .ktl-sub-navigation-module_logo_Jm6Jd {
77
+ flex-shrink: 1;
78
+ overflow: hidden;
79
+ text-overflow: ellipsis;
80
+ white-space: nowrap;
81
+ color: var(--sub-navigation-text-color) !important;
82
+ text-decoration: none;
83
+ }
84
+
85
+ .ktl-sub-navigation-module_logo_Jm6Jd:focus-visible {
86
+ outline: var(--website-ui-focus-outline);
87
+ }
88
+
89
+ @media (max-width: 640px) {
90
+
91
+ .ktl-sub-navigation-module_logo_Jm6Jd {
92
+ display: none
93
+ }
94
+ }
95
+
96
+ :root {
97
+ --horizontal-menu-item-padding: 12px;
98
+ }
99
+
100
+ .ktl-horizontal-menu-module_horizontal-menu_bRQN9 {
101
+ display: flex;
102
+ flex-grow: 1;
103
+ justify-content: flex-end;
104
+ align-items: center;
105
+ height: 100%;
106
+ }
107
+
108
+ .ktl-horizontal-menu-module_item_vmotC, .ktl-horizontal-menu-module_item-active_gSpD6 {
109
+ position: relative;
110
+ display: flex;
111
+ align-items: center;
112
+ height: 100%;
113
+ box-sizing: border-box;
114
+ text-align: center;
115
+ white-space: nowrap;
116
+ padding: var(--horizontal-menu-item-padding);
117
+ text-decoration: none;
118
+ color: var(--sub-navigation-text-color) !important;
119
+ }
120
+
121
+ .ktl-horizontal-menu-module_item_vmotC:focus-visible, .ktl-horizontal-menu-module_item-active_gSpD6:focus-visible {
122
+ outline: var(--website-ui-focus-outline);
123
+ outline-offset: -4px;
124
+ }
125
+
126
+ .ktl-horizontal-menu-module_item_vmotC:after, .ktl-horizontal-menu-module_item-active_gSpD6:after {
127
+ content: '';
128
+ display: none;
129
+ height: 2px;
130
+ position: absolute;
131
+ bottom: 4px;
132
+ left: var(--horizontal-menu-item-padding);
133
+ right: var(--horizontal-menu-item-padding);
134
+ background-color: var(--sub-navigation-text-color);
135
+ }
136
+
137
+ .ktl-horizontal-menu-module_item_vmotC:hover {
138
+ background-color: rgba(255, 255, 255, 0.10);
139
+ }
140
+
141
+ .ktl-horizontal-menu-module_item-active_gSpD6 {
142
+ cursor: default;
143
+ }
144
+
145
+ .ktl-horizontal-menu-module_item-active_gSpD6:after {
146
+ display: block;
147
+ }
package/out/components/sub-navigation/index.js ADDED
@@ -0,0 +1,3 @@
1
+ import './index.css';
2
+ import { SubNavigation } from './sub-navigation.js';
3
+ export { SubNavigation as default } from './sub-navigation.js';
package/out/components/sub-navigation/sub-navigation.js ADDED
@@ -0,0 +1,34 @@
1
+ import React from 'react';
2
+ import { useTheme } from '@rescui/ui-contexts';
3
+ import classNames from 'classnames';
4
+ import styles from './sub-navigation.module.pcss.js';
5
+ import { useTextStyles } from '@rescui/typography';
6
+ import { HorizontalMenu } from './horizontal-menu/horizontal-menu.js';
7
+
8
+ const SubNavigation = ({
9
+ homeUrl,
10
+ title,
11
+ activeIndex,
12
+ items,
13
+ linkHandler = () => null,
14
+ className,
15
+ children
16
+ }) => {
17
+ const theme = useTheme();
18
+ const textCn = useTextStyles();
19
+ return React.createElement("div", {
20
+ className: classNames(styles.subNavigation, className, {
21
+ [styles.subNavigationDarkTheme]: theme === 'dark'
22
+ })
23
+ }, title && React.createElement("a", {
24
+ href: homeUrl,
25
+ className: classNames(styles.logo, textCn('rs-text-2')),
26
+ onClick: event => linkHandler(event, homeUrl)
27
+ }, title), React.createElement(HorizontalMenu, {
28
+ items: items,
29
+ activeIndex: activeIndex,
30
+ linkHandler: linkHandler
31
+ }), children);
32
+ };
33
+
34
+ export { SubNavigation };
package/out/components/sub-navigation/sub-navigation.module.pcss.js ADDED
@@ -0,0 +1,6 @@
1
+ var styles = {
2
+ "subNavigation": "ktl-sub-navigation-module_sub-navigation_dGfIT",
3
+ "subNavigationDarkTheme": "ktl-sub-navigation-module_sub-navigation-dark-theme_s4fQ7",
4
+ "logo": "ktl-sub-navigation-module_logo_Jm6Jd"
5
+ };
6
+ export { styles as default };
package/out/components/top-menu/index.css CHANGED
@@ -18,6 +18,14 @@
18
18
  --ktl-header-height-mobile: 52px;
19
19
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
20
20
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
21
+
22
+ }
23
+
24
+ :root {
25
+ --website-ui-text-color: #19191c;
26
+ --website-ui-text-color-dark: #fff;
27
+ --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
28
+ --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
21
29
  }
22
30
 
23
31
  :root {
@@ -110,6 +118,14 @@
110
118
  --ktl-header-height-mobile: 52px;
111
119
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
112
120
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
121
+
122
+ }
123
+
124
+ :root {
125
+ --website-ui-text-color: #19191c;
126
+ --website-ui-text-color-dark: #fff;
127
+ --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
128
+ --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
113
129
  }
114
130
 
115
131
  :root {
package/out/components/typography/index.css CHANGED
@@ -18,6 +18,14 @@
18
18
  --ktl-header-height-mobile: 52px;
19
19
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
20
20
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
21
+
22
+ }
23
+
24
+ :root {
25
+ --website-ui-text-color: #19191c;
26
+ --website-ui-text-color-dark: #fff;
27
+ --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
28
+ --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
21
29
  }
22
30
 
23
31
  :root {
package/out/components/youtube-player/index.css CHANGED
@@ -18,6 +18,14 @@
18
18
  --ktl-header-height-mobile: 52px;
19
19
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
20
20
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
21
+
22
+ }
23
+
24
+ :root {
25
+ --website-ui-text-color: #19191c;
26
+ --website-ui-text-color-dark: #fff;
27
+ --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
28
+ --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
21
29
  }
22
30
 
23
31
  :root {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@jetbrains/kotlin-web-site-ui",
3
3
  "description": "UI components for Kotlin web sites development",
4
- "version": "4.11.0",
4
+ "version": "4.13.0-alpha.1",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
7
7
  "files": [