chore(common): address feedback

getting-started/client-blazor.md

@@ -39,7 +39,7 @@ This article explains how to get the <a href = "https://www.telerik.com/blazor-u
 
 ## Step 4: Enable the Blazor UI Components
 
-To enable the Telerik UI for Blazor components, you must add several client-side dependencies to the application:
+To enable the Telerik UI for Blazor components, you must add several client-side dependencies to the application, include the required `@using` statements, add the `TelerikRootComponent` component, and register the Telerik Blazor service.
 
 ### 4.1. Add the Telerik UI for Blazor Client Assets
 
@@ -76,7 +76,7 @@ Add a `TelerikRootComponent` component as a top-level component in the app and m
 
 @[template](/_contentTemplates/common/get-started.md#root-component-main-layout)
 
-###  4.4. Register the Telerik Blazor Service
+### 4.4. Register the Telerik Blazor Service
 
 In the `~/Program.cs` file of the client web application, register the Telerik Blazor service.
 

getting-started/server-blazor.md

@@ -39,7 +39,7 @@ This article explains how to get the Telerik UI for Blazor components in your <a
 
 ## Step 4: Enable the Blazor UI Components
 
-To enable the Telerik UI for Blazor components, you must add several client-side dependencies to the application:
+To enable the Telerik UI for Blazor components, you must add several client-side dependencies to the application, include the required `@using` statements, add the `TelerikRootComponent` component, and register the Telerik Blazor service.
 
 ### 4.1. Add the Telerik UI for Blazor Client Assets
 
@@ -76,7 +76,7 @@ In the `~/_Imports.razor` file, add the `@using` directives below. This configur
  @using Telerik.FontIcons
  @using Telerik.SvgIcons
 
-###  4.3. Add the TelerikRootComponent
+### 4.3. Add the TelerikRootComponent
 
 Add a `TelerikRootComponent` component as a top-level component in the app and make sure it wraps all content.
 

getting-started/web-app.md

@@ -1,14 +1,14 @@
 ---
 title: Web App (Tutorial)
-page_title: First Steps with UI for Blazor in Web App 
+page_title: First Steps with UI for Blazor in a Web App 
 description: Make your first steps with Telerik UI for Blazor and build a Web App that runs the UI for Blazor components.
 slug: getting-started/web-app
 tags: get,started,first,steps,web,app,template
 published: true
 position: 4
 ---
 
-# First Steps with UI for Blazor in Web App
+# First Steps with UI for Blazor in a Web App
 
 This article explains how to use the Telerik UI for Blazor components in a <a href = "https://learn.microsoft.com/en-us/aspnet/core/blazor/project-structure?view=aspnetcore-8.0#blazor-web-app" target="_blank">.NET 8 Blazor Web App</a> project template. You will create a new application from scratch, learn how to add the UI for Blazor components to a project, and finally, add a UI component to a view.
 
@@ -28,16 +28,16 @@ This article explains how to use the Telerik UI for Blazor components in a <a hr
 
 ## Step 3: Install the Telerik UI for Blazor Components
 
-1. Right-click  the Blazor Server project in the solution and select **Manage NuGet Packages**.
+1. Right-click the Blazor Server project in the solution and select **Manage NuGet Packages**.
 
 1. Install the Telerik Blazor NuGet package:
 
- 1. Select the `telerik.com` **Package source** that you [added earlier](#step-2-add-the-telerik-nuget-feed-to-visual-studio). As this is a private NuGet feed, you must authenticate with your [Telerik account](https://www.telerik.com/account/) user name and password.
- 1. Select the **Browse** tab, find the NuGet package, and click **Install**. Commercial license holders should install `Telerik.UI.for.Blazor`. Trial users should install `Telerik.UI.for.Blazor.Trial`.
+ 1. Select the `telerik.com` **Package source** that you [added earlier](#step-2-add-the-telerik-nuget-feed-to-visual-studio). As this is a private NuGet feed, you must authenticate with your [Telerik account](https://www.telerik.com/account/) username and password.
+ 1. Select the **Browse** tab, find the NuGet package, and click **Install**. Commercial license holders must install `Telerik.UI.for.Blazor`. Trial users must install `Telerik.UI.for.Blazor.Trial`.
 
 ## Step 4: Enable the Blazor UI Components
 
-To enable the Telerik UI for Blazor components, you must add several client-side dependencies to the application:
+To enable the Telerik UI for Blazor components, you must add several client-side dependencies to the application, include the required `@using` statements, add the `TelerikRootComponent` component, and register the Telerik Blazor service.
 
 ### 4.1. Add the Telerik UI for Blazor Client Assets
 
@@ -49,12 +49,12 @@ To enable the Telerik UI for Blazor components, you must add several client-side
 
 2\. To select the appearance and color scheme for the Telerik Blazor components, add the [theme stylesheet]({%slug general-information/themes%}) in your `App.razor` file. Reference it as a [static asset]({%slug general-information/themes%}#static-assets) or from a [CDN]({%slug general-information/themes%}#cdn).
 
-3\. (optional - applicable if you are using static assets) To enable the use of static assets in your project, add the `app.UseStaticFiles();` line to the `Program.cs` of your Blazor Server project (by default, this line is already present).
+3\. (Optional) To enable the use of static assets in your project, add the `app.UseStaticFiles();` line to the `Program.cs` of your Blazor Server project (by default, this line is already present). This step is required only if your application uses static assets.
 
 **C#**
 @[template](/_contentTemplates/common/js-interop-file.md#enable-static-assets-snippet)
 
-###  4.2. Include @using Statements
+### 4.2. Include @using Statements
 
 In the `~/_Imports.razor` file, add the `@using` directives below. This configures the project to recognize the Telerik components in all files. You can register one or both icon namespaces, depending on the [icon type you will be using]({%slug general-information/font-icons%}).
 
@@ -65,42 +65,35 @@ In the `~/_Imports.razor` file, add the `@using` directives below. This configur
  @using Telerik.FontIcons
  @using Telerik.SvgIcons
 
-###  4.3. Add the TelerikRootComponent
+### 4.3. Add the TelerikRootComponent
 
-Add a `TelerikRootComponent` component as a top-level component in the app and make sure it wraps all content. Add the component in the preferred layout file - could be the `MainLayout.razor` or a custom layout file. The important part is that `TelerikRootComponent` must be in a layout component with enabled interactive mode.
+Add a `TelerikRootComponent` component as a top-level component in the app and make sure it wraps all content. Add the component in the preferred layout file, for example, the `MainLayout.razor` or a custom layout file.
 
-.NET 8.0 introduces [new render modes for the Blazor components](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0). The `TelerikRootComponent` must be placed in a layout page (e.g. `MainLayout.razor`) with enabled interactive mode. At the time of writing, the default render mode is `Static` and not interactive, so you need to make this change explicitly in your app.
+.NET 8.0 introduces [new render modes for the Blazor components](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0). The `TelerikRootComponent` must be placed in a layout page with enabled interactive mode, for example, `MainLayout.razor`. At the time of writing, the default render mode is static and not interactive, so you need to make this change explicitly in your app.
 
 Here are two possible options to proceed:
-* [Configure the render mode of the whole app](#configure-the-render-mode-of-the-whole-app)
-* [Configure the render mode per page](#configure-the-render-mode-per-page)
+* [Configure the Render Mode of the Entire App](#configure-the-render-mode-of-the-entire-app)
+* [Configure the Render Mode per Page](#configure-the-render-mode-per-page)
 
 
-#### Configure the render mode of the whole app
+#### Configure the Render Mode of the Entire App
 
-Set the render mode for the whole app as suggested in the [Blazor documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#set-the-render-mode-for-the-entire-app). This will spare the need to set the render mode in every page and component.
+You can set the render mode for the entire app as suggested in the [Blazor documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#set-the-render-mode-for-the-entire-app). This will spare the need to set the render mode in every page and component.
 
 <div class="skip-repl"></div>
 ````App.razor
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <base href="/" />
- <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
- <link rel="stylesheet" href="app.css" />
- <link rel="stylesheet" href="BlazorWebApp.styles.css" />
- <link rel="icon" type="image/png" href="favicon.png" />
- <link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
- <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>
+ @* ... *@
+
  <HeadOutlet @rendermode="RenderMode.InteractiveServer" />
 </head>
 
 <body>
  <Routes @rendermode="RenderMode.InteractiveServer" />
- <script src="_framework/blazor.web.js"></script>
+ @* ... *@
 </body>
 
 </html>
@@ -133,37 +126,6 @@ Set the render mode for the whole app as suggested in the [Blazor documentation]
  <a class="dismiss">🗙</a>
 </div>
 ````
-````NavMenu.razor
-<div class="top-row ps-3 navbar navbar-dark">
- <div class="container-fluid">
- <a class="navbar-brand" href="">MyBlazorWeb</a>
- </div>
-</div>
-
-<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
-
-<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
- <nav class="flex-column">
- <div class="nav-item px-3">
- <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
- <span class="bi bi-house-door-fill" aria-hidden="true"></span> Home
- </NavLink>
- </div>
-
- <div class="nav-item px-3">
- <NavLink class="nav-link" href="counter">
- <span class="bi bi-plus-square-fill" aria-hidden="true"></span> Counter
- </NavLink>
- </div>
-
- <div class="nav-item px-3">
- <NavLink class="nav-link" href="weather">
- <span class="bi bi-list-nested" aria-hidden="true"></span> Weather
- </NavLink>
- </div>
- </nav>
-</div>
-````
 ````Home.razor
 @page "/"
 
@@ -173,9 +135,11 @@ Set the render mode for the whole app as suggested in the [Blazor documentation]
 
 ````
 
-#### Configure the render mode per page
+#### Configure the Render Mode per Page
 
-Set interactive render mode for specific pages and components. This is useful if you want to have different render modes in the app. In this case, make sure that the `TelerikRootComponent` is part of a component hierarchy that has interactive render mode. See the example below:
+As an alternative to setting the render mode for the entire app, you can set it only for specific pages and components. This is useful if you want to have different render modes in the app. In this case, make sure that the `TelerikRootComponent` is part of a component hierarchy that has interactive render mode. 
+
+See the example below - the `TelerikRootComponent` must wrap all the content in the viewport, so the whole `<div class="page">` is moved from the `MainLayout.razor` to the `TelerikLayout.razor`.
 
 <div class="skip-repl"></div>
 
@@ -231,37 +195,6 @@ Set interactive render mode for specific pages and components. This is useful if
  public RenderFragment ChildContent {get;set;}
 }
 ````
-````NavMenu.razor
-<div class="top-row ps-3 navbar navbar-dark">
- <div class="container-fluid">
- <a class="navbar-brand" href="">MyBlazorWeb</a>
- </div>
-</div>
-
-<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
-
-<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
- <nav class="flex-column">
- <div class="nav-item px-3">
- <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
- <span class="bi bi-house-door-fill" aria-hidden="true"></span> Home
- </NavLink>
- </div>
-
- <div class="nav-item px-3">
- <NavLink class="nav-link" href="counter">
- <span class="bi bi-plus-square-fill" aria-hidden="true"></span> Counter
- </NavLink>
- </div>
-
- <div class="nav-item px-3">
- <NavLink class="nav-link" href="weather">
- <span class="bi bi-list-nested" aria-hidden="true"></span> Weather
- </NavLink>
- </div>
- </nav>
-</div>
-````
 ````Home.razor
 @page "/"
 

getting-started/what-you-need.md

@@ -13,7 +13,7 @@ position: 1
 
 This article describes the steps in the typical workflow for using the Telerik UI for Blazor components—getting the Telerik UI for Blazor components and configuring your project to use them.
 
->tip The information in this article is also available as step-by-step tutorials for Blazor [Server]({%slug getting-started/server-side%}), [WebAssembly]({%slug getting-started/client-side%}), [Web App]({%slug getting-started/web-app%}) and [Blazor Hybrid]({%slug getting-started/hybrid-blazor%}) apps.
+>tip The information in this article is also available as step-by-step tutorials for Blazor [Server]({%slug getting-started/server-side%}), [WebAssembly]({%slug getting-started/client-side%}), [.NET 8 Blazor Web App]({%slug getting-started/web-app%}) and [Blazor Hybrid]({%slug getting-started/hybrid-blazor%}) apps.
 
 To use the Telerik UI for Blazor, you need to:
 
@@ -82,7 +82,7 @@ To add these client assets, use either the [static assets](#using-static-assets)
 
 You can add the [Telerik JS Interop file](#telerik-js-interop-file) and the [Telerik Stylesheet](#telerik-stylesheet) as [static assets](https://docs.microsoft.com/en-us/aspnet/core/razor-pages/ui-class?view=aspnetcore-6.0&tabs=visual-studio#consume-content-from-a-referenced-rcl). Static assets (the `_content` folder) are automatically included in the solution from the NuGet package during build, so all you need is to enable static assets as shown in the snippet below. The `_content` folder is expanded by the framework into the local NuGet cache, and the project copies it from there.
 
-To enable the use of static assets in your project, add the `app.UseStaticFiles();` line to the `Program.cs` file of your **Server** project (by default, this line is already present)
+To enable the use of static assets in your project, add the `app.UseStaticFiles();` line to the `Program.cs` file of your **Server** project (by default, this line is already present).
 
 **C#**
 @[template](/_contentTemplates/common/js-interop-file.md#enable-static-assets-snippet)
@@ -125,9 +125,9 @@ To use the Telerik components, you must add a few items to your projects. Some o
 
 ### Common Configuration
 
-The following configurations ensure that the application will recognize the UI for Blazor components and they will function properly:
+To make sure that the application will recognize the UI for Blazor components and that they will function correctly, add the required `@using` statements and the `TelerikRootComponent`.
 
-#### Include `@using` Statements
+#### Include @using Statements
 
 You can set the project to recognize all Telerik components without explicit `@using` statements on every `.razor` file. To achieve this, add the following to your `~/_Imports.razor` file. You can register one or both icon namespaces, depending on the [icon type you will be using]({%slug general-information/font-icons%}).
 
@@ -142,9 +142,9 @@ You can set the project to recognize all Telerik components without explicit `@u
 @using Telerik.SvgIcons
 ````
 
-#### Add the `TelerikRootComponent`
+#### Add the TelerikRootComponent
 
-To enable the use of detached popups (for example, dropdown lists, menus, grid filters, etc.), you must add a `TelerikRootComponent` component at the root level of the DOM and configure the application layout to adopt that.
+To use popups (for example, dropdowns, menus, windows, grid filters, etc.), you must add the `TelerikRootComponent` component at the root level of the app and configure the app layout to adopt that.
 
 The configuration varies depending on the application type:
 

system-requirements.md

@@ -16,17 +16,16 @@ Telerik UI for Blazor steps on Microsoft Blazor. You can host and run Telerik Bl
 
 ## .NET Versions Support
 
-Telerik UI for Blazor targets `netstandard2.1`. Thus, apps and libraries that reference our package must use one of the following target frameworks:
+The latest version of Telerik UI for Blazor (currently {{site.uiForBlazorLatestVersion}}) targets `net6.0`. Thus, apps and libraries that reference our package must use one of the following target frameworks:
 
-* `netstandard2.1`
-* `netcoreapp3.1`
-* `net5.0`
 * `net6.0`
 * `net7.0`
 * `net8.0`
 
 Razor Class Libraries may target `netstandard2.0` by default, so you need to update that.
 
+>warning If your application targets an older framework version, the latest Telerik UI for Blazor you can use is `4.6.0`.
+
 ### Supported .NET Versions
 
 A **supported .NET version** is one that is [officially supported by Microsoft](https://dotnet.microsoft.com/en-us/platform/support/policy/dotnet-core). It will successfully run our NuGet package and Telerik Blazor components. We don't expect any .NET-related issues, but if such issues occur, we will resolve them.