@jetbrains/kotlin-web-site-ui 4.11.0 → 4.12.0

package/out/components/footer/index.css

@@ -41,6 +41,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -106,6 +114,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -190,6 +206,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {

package/out/components/footer-compact/index.css

@@ -34,6 +34,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -106,6 +114,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -178,6 +194,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {

package/out/components/header/index.css

@@ -42,6 +42,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -107,6 +115,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -271,6 +287,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -749,6 +773,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -827,6 +859,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -900,6 +940,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -926,6 +974,13 @@
         border-bottom: 1px solid rgba(255, 255, 255, 0.3);
     }
 
+.ktl-menu-list-module_menu-item-group_mFvUE + .ktl-menu-list-module_menu-item-group_mFvUE {
+    margin-top: 0;
+    padding-top: 0;
+
+    border-top: none;
+}
+
 .ktl-logo-small-module_logo-small_iGY12 {
   flex-grow: 1;
   display: flex;

package/out/components/header/index.js

@@ -1,4 +1,4 @@
 import './index.css';
 import { Header } from './header.js';
 export { Header as default } from './header.js';
-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';
+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

@@ -54,6 +54,13 @@ const KTOR_TITLE = 'Ktor';
 const KTOR_URL = 'https://api.ktor.io/';
 const COMPOSE_MULTIPLATFORM = 'Compose Multiplatform Material3';
 const COMPOSE_MULTIPLATFORM_URL = 'https://kotlinlang.org/api/compose-multiplatform/material3/';
+const DOCS_NAVIGATION_ITEMS = [{
+  url: '/docs/home.html',
+  title: 'Language guide'
+}, {
+  url: '/docs/multiplatform/get-started.html',
+  title: 'Multiplatform development'
+}];
 const navScheme = [{
   title: HOME_TITLE,
   url: HOME_URL
@@ -78,7 +85,8 @@ const navScheme = [{
   url: CASE_STUDIES_URL
 }, {
   title: DOCS_TITLE,
-  url: KOTLIN_DOCS_URL
+  url: KOTLIN_DOCS_URL,
+  items: DOCS_NAVIGATION_ITEMS
 }, {
   title: API_TITLE,
   url: null,
@@ -191,4 +199,4 @@ function makeExternalUrl(url, currentUrl, isPlayground) {
   return url;
 }
 
-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 };
+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/sub-navigation/horizontal-menu/horizontal-menu.js

@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+import styles from './horizontal-menu.module.pcss.js';
+import { useTextStyles } from '@rescui/typography';
+
+const HorizontalMenuItem = ({
+  item,
+  isActive,
+  linkHandler
+}) => {
+  useTextStyles();
+  const handleLink = useCallback(event => linkHandler(event, item.url), [item]);
+  return isActive ? React.createElement("span", {
+    key: item.url,
+    className: styles.itemActive
+  }, item.title) : React.createElement("a", {
+    href: item.url,
+    key: item.url,
+    className: styles.item,
+    onClick: handleLink,
+    target: item.isExternal ? '_blank' : undefined,
+    rel: "noreferrer"
+  }, item.title);
+};
+
+const HorizontalMenu = ({
+  items,
+  activeIndex,
+  linkHandler
+}) => {
+  const textCn = useTextStyles();
+  return React.createElement("nav", {
+    className: classNames(styles.horizontalMenu, textCn('rs-text-2'))
+  }, items.map((item, index) => React.createElement(HorizontalMenuItem, {
+    key: item.url,
+    isActive: index === activeIndex,
+    item: item,
+    linkHandler: linkHandler
+  })));
+};
+
+export { HorizontalMenu };

package/out/components/sub-navigation/horizontal-menu/horizontal-menu.module.pcss.js

@@ -0,0 +1,6 @@
+var styles = {
+  "horizontalMenu": "ktl-horizontal-menu-module_horizontal-menu_bRQN9",
+  "item": "ktl-horizontal-menu-module_item_vmotC",
+  "itemActive": "ktl-horizontal-menu-module_item-active_gSpD6"
+};
+export { styles as default };

package/out/components/sub-navigation/index.css

@@ -0,0 +1,147 @@
+:root {
+  --ktl-light-grey: #f4f4f4;
+  --ktl-dark-100: rgba(39, 40, 44, 1);
+  --ktl-dark-bg-hard: rgba(27, 27, 27, 1);
+  --ktl-icon-color-dark: rgba(39, 40, 44, 0.75);
+  --ktl-color-white-light: rgba(255, 255, 255, 0.75);
+  --ktl-transition-xfast: 100ms;
+  --ktl-transition-fast: 300ms;
+  --ktl-color-primary-light-theme: #7f52ff;
+  --ktl-color-dark-40: rgba(39, 40, 44, 0.4);
+  --ktl-light-text-hard: rgba(39, 40, 44, 1);
+  --ktl-light-dark-20: rgba(39, 40, 44, 0.2);
+  --ktl-divider-color: rgba(25, 25, 28, .2);
+  --ktl-overlay-z-index: 900;
+  --ktl-top-menu-z-index: 905;
+  --ktl-header-z-index: 906;
+  --ktl-mobile-dropdown-list-z-index: 907;
+  --ktl-header-height-mobile: 52px;
+  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
+  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
+}
+
+:root {
+  --ktl-box-block-s: 4px;
+  --ktl-box-block-m: 8px;
+  --ktl-box-block-l: 16px;
+
+  --ktl-box-section-s: 24px;
+  --ktl-box-section-m: 32px;
+  --ktl-box-section-l: 48px;
+
+  --ktl-box-page-s: 64px;
+  --ktl-box-page-m: 72px;
+  --ktl-box-page-l: 96px;
+}
+
+:root {
+  --sub-navigation-text-color: var(--website-ui-text-color);
+  --sub-navigation-background-color: #fff;
+}
+
+.ktl-sub-navigation-module_sub-navigation_dGfIT {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  height: 64px;
+  background-color: var(--sub-navigation-background-color);
+  padding: 0 32px;
+  overflow: auto;
+}
+
+@media (max-width: 640px) {
+
+.ktl-sub-navigation-module_sub-navigation_dGfIT {
+    height: var(--ktl-header-height-mobile);
+    padding: 0 6px 0 4px;
+    gap: 16px
+}
+  }
+
+.ktl-sub-navigation-module_sub-navigation-dark-theme_s4fQ7 {
+  --sub-navigation-background-color: rgba(16, 16, 16, 1);
+  --sub-navigation-text-color: var(--website-ui-text-color-dark);
+  color: var(--sub-navigation-text-color);
+}
+
+.ktl-sub-navigation-module_logo_Jm6Jd {
+  flex-shrink: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--sub-navigation-text-color) !important;
+  text-decoration: none;
+}
+
+.ktl-sub-navigation-module_logo_Jm6Jd:focus-visible {
+    outline: var(--website-ui-focus-outline);
+  }
+
+@media (max-width: 640px) {
+
+.ktl-sub-navigation-module_logo_Jm6Jd {
+    display: none
+}
+  }
+
+:root {
+  --horizontal-menu-item-padding: 12px;
+}
+
+.ktl-horizontal-menu-module_horizontal-menu_bRQN9 {
+  display: flex;
+  flex-grow: 1;
+  justify-content: flex-end;
+  align-items: center;
+  height: 100%;
+}
+
+.ktl-horizontal-menu-module_item_vmotC, .ktl-horizontal-menu-module_item-active_gSpD6 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  box-sizing: border-box;
+  text-align: center;
+  white-space: nowrap;
+  padding: var(--horizontal-menu-item-padding);
+  text-decoration: none;
+  color: var(--sub-navigation-text-color) !important;
+}
+
+.ktl-horizontal-menu-module_item_vmotC:focus-visible, .ktl-horizontal-menu-module_item-active_gSpD6:focus-visible {
+    outline: var(--website-ui-focus-outline);
+    outline-offset: -4px;
+  }
+
+.ktl-horizontal-menu-module_item_vmotC:after, .ktl-horizontal-menu-module_item-active_gSpD6:after {
+    content: '';
+    display: none;
+    height: 2px;
+    position: absolute;
+    bottom: 4px;
+    left: var(--horizontal-menu-item-padding);
+    right: var(--horizontal-menu-item-padding);
+    background-color: var(--sub-navigation-text-color);
+  }
+
+.ktl-horizontal-menu-module_item_vmotC:hover {
+  background-color: rgba(255, 255, 255, 0.10);
+}
+
+.ktl-horizontal-menu-module_item-active_gSpD6 {
+  cursor: default;
+}
+
+.ktl-horizontal-menu-module_item-active_gSpD6:after {
+    display: block;
+  }

package/out/components/sub-navigation/index.js

@@ -0,0 +1,3 @@
+import './index.css';
+import { SubNavigation } from './sub-navigation.js';
+export { SubNavigation as default } from './sub-navigation.js';

package/out/components/sub-navigation/sub-navigation.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useTheme } from '@rescui/ui-contexts';
+import classNames from 'classnames';
+import styles from './sub-navigation.module.pcss.js';
+import { useTextStyles } from '@rescui/typography';
+import { HorizontalMenu } from './horizontal-menu/horizontal-menu.js';
+
+const SubNavigation = ({
+  homeUrl,
+  title,
+  activeIndex,
+  items,
+  linkHandler = () => null,
+  className,
+  children
+}) => {
+  const theme = useTheme();
+  const textCn = useTextStyles();
+  return React.createElement("div", {
+    className: classNames(styles.subNavigation, className, {
+      [styles.subNavigationDarkTheme]: theme === 'dark'
+    })
+  }, title && React.createElement("a", {
+    href: homeUrl,
+    className: classNames(styles.logo, textCn('rs-text-2')),
+    onClick: event => linkHandler(event, homeUrl)
+  }, title), React.createElement(HorizontalMenu, {
+    items: items,
+    activeIndex: activeIndex,
+    linkHandler: linkHandler
+  }), children);
+};
+
+export { SubNavigation };

package/out/components/sub-navigation/sub-navigation.module.pcss.js

@@ -0,0 +1,6 @@
+var styles = {
+  "subNavigation": "ktl-sub-navigation-module_sub-navigation_dGfIT",
+  "subNavigationDarkTheme": "ktl-sub-navigation-module_sub-navigation-dark-theme_s4fQ7",
+  "logo": "ktl-sub-navigation-module_logo_Jm6Jd"
+};
+export { styles as default };

package/out/components/top-menu/index.css

@@ -18,6 +18,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {
@@ -110,6 +118,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {

package/out/components/typography/index.css

@@ -18,6 +18,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {

package/out/components/youtube-player/index.css

@@ -18,6 +18,14 @@
   --ktl-header-height-mobile: 52px;
   --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
+
+}
+
+:root {
+  --website-ui-text-color: #19191c;
+  --website-ui-text-color-dark: #fff;
+  --website-ui-focus-outline-color: rgba(48, 127, 255, 0.5);
+  --website-ui-focus-outline: 4px solid var(--website-ui-focus-outline-color);
 }
 
 :root {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jetbrains/kotlin-web-site-ui",
   "description": "UI components for Kotlin web sites development",
-  "version": "4.11.0",
+  "version": "4.12.0",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [