Version updated

Fix #1741

.github/workflows/ci.yml

@@ -19,7 +19,7 @@ jobs:
     - name: Setup .NET
       uses: actions/setup-dotnet@v3
       with:
-        dotnet-version: 7.0.x
+        dotnet-version: 8.0.x
     - name: Build
       run: dotnet build Radzen.Blazor/Radzen.Blazor.csproj
     - name: Test

Dockerfile

@@ -17,7 +17,7 @@ COPY RadzenBlazorDemos.Host /app/RadzenBlazorDemos.Host
 WORKDIR /app
 RUN docfx DocFX/docfx.json
 
-FROM mcr.microsoft.com/dotnet/sdk:7.0
+FROM mcr.microsoft.com/dotnet/sdk:8.0.400
 
 COPY --from=0 /app/RadzenBlazorDemos.Host /app/RadzenBlazorDemos.Host
 COPY --from=0 /app/RadzenBlazorDemos /app/RadzenBlazorDemos

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-2022 Radzen Ltd
+Copyright (c) 2018-2024 Radzen Ltd
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,45 +1,19 @@
-![Radzen Blazor Components](RadzenBlazorDemos/wwwroot/images/radzen-blazor-components.png)
+![Radzen Blazor Components](https://raw.githubusercontent.com/radzenhq/radzen-blazor/master/RadzenBlazorDemos/wwwroot/images/radzen-blazor-components.png)
 
-<h1 align="center">
-    Radzen Blazor Components
-</h1>
+Radzen Blazor Components
+========================
 
-<p align="center">
-    A set of <strong>70+ free and open source</strong> native Blazor UI controls.
-</p>
+A set of **90+ free and open source** native Blazor UI controls.
 
-<div align="center">
+See Online Demos or Read the Docs
 
-[See Online Demos](https://blazor.radzen.com) or [Read the Docs](https://blazor.radzen.com/docs/)
-
-</div>
-
----
-
-<p align="center">
-    <a href="https://github.com/radzenhq/radzen-blazor/blob/master/LICENSE">
-        <img alt="License - MIT" src="https://img.shields.io/github/license/radzenhq/radzen-blazor?logo=github&style=for-the-badge" />
-    </a>
-    <a href="https://www.nuget.org/packages/Radzen.Blazor">
-        <img alt="Nuget Downloads" src="https://img.shields.io/nuget/dt/Radzen.Blazor?color=%232694F9&label=nuget%20downloads&logo=nuget&style=for-the-badge" />
-    </a>
-    <img alt="Last Commit" src="https://img.shields.io/github/last-commit/radzenhq/radzen-blazor?logo=github&style=for-the-badge" />
-    <a href="https://github.com/radzenhq/radzen-blazor/graphs/contributors">
-        <img alt="Github Contributors" src="https://img.shields.io/github/contributors/radzenhq/radzen-blazor?logo=github&style=for-the-badge" />
-    </a>
-    <a href="https://blazor.radzen.com">
-        <img alt="Radzen Blazor Components - Online Demos" src="https://img.shields.io/badge/demos-online-brightgreen?color=%232694F9&logo=blazor&style=for-the-badge" />
-    </a>
-    <a href="https://blazor.radzen.com/docs">
-        <img alt="Radzen Blazor Components - Documentation" src="https://img.shields.io/badge/docs-online-brightgreen?color=%232694F9&logo=blazor&style=for-the-badge" />
-    </a>
-</p>
+ [![License - MIT](https://img.shields.io/github/license/radzenhq/radzen-blazor?logo=github&style=for-the-badge)](https://github.com/radzenhq/radzen-blazor/blob/master/LICENSE)[![NuGet Downloads](https://img.shields.io/nuget/dt/Radzen.Blazor?color=%232694F9&label=nuget%20downloads&logo=nuget&style=for-the-badge) ](https://www.nuget.org/packages/Radzen.Blazor)![Last Commit](https://img.shields.io/github/last-commit/radzenhq/radzen-blazor?logo=github&style=for-the-badge) [![Github Contributors](https://img.shields.io/github/contributors/radzenhq/radzen-blazor?logo=github&style=for-the-badge) ](https://github.com/radzenhq/radzen-blazor/graphs/contributors)[![Radzen Blazor Components - Online Demos](https://img.shields.io/badge/demos-online-brightgreen?color=%232694F9&logo=blazor&style=for-the-badge) ](https://blazor.radzen.com)[![Radzen Blazor Components - Documentation](https://img.shields.io/badge/docs-online-brightgreen?color=%232694F9&logo=blazor&style=for-the-badge)](https://blazor.radzen.com/docs)
 
 ## Why choose Radzen Blazor Components?
 
 ### :sparkles: Free
 
-Radzen Blazor Components are open source and free for commercial use. You can install them from [nuget](https://www.nuget.org/packages/Radzen.Blazor) or build your own copy from source.
+Radzen Blazor Components are open source and free for commercial use. You can install them from [NuGet](https://www.nuget.org/packages/Radzen.Blazor) or build your own copy from source.
 
 Paid support is available as part of the [Radzen Professional subscription](https://www.radzen.com/blazor-studio/pricing/).
 
@@ -76,67 +50,8 @@ Our flagship product [Radzen Blazor Studio](https://www.radzen.com/blazor-studio
 
 ## Get started with Radzen Blazor Components
 
-### 1. Install
+Check the [getting started](https://blazor.radzen.com/getting-started) instructions to start making awesome Blazor applications.
 
-Radzen Blazor Components are distributed as a [Radzen.Blazor nuget package](https://www.nuget.org/packages/Radzen.Blazor). You can add them to your project in one of the following ways
-- Install the package from command line by running `dotnet add package Radzen.Blazor`
-- Add the project from the Visual Nuget Package Manager
-- Manually edit the .csproj file and add a project reference
-
-### 2. Import the namespace
-
-Open the `_Imports.razor` file of your Blazor application and add this line `@using Radzen.Blazor`.
-
-### 3. Include a theme
-
-Radzen Blazor components come with five free themes: Material, Standard, Default, Dark, Software and Humanistic.
-
-To use a theme
-1. Pick a theme. The [online demos](https://blazor.radzen.com/colors) allow you to preview the available options via the theme dropdown located in the header. The Material theme is currently selected by default.
-1. Include the theme CSS file in your Blazor application. Open `Pages\_Layout.cshtml` (Blazor Server .NET 6), `Pages\_Host.cshtml` (Blazor Server .NET 7) or `wwwroot/index.html` (Blazor WebAssembly) and include a theme CSS file by adding this snippet
-   ```html
-   <link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
-   ```
-
-To include a different theme (i.e. Standard) just change the name of the CSS file:
-```
-<link rel="stylesheet" href="_content/Radzen.Blazor/css/standard-base.css">
-```
-
-### 4. Include Radzen.Blazor.js
-
-Open `Pages\_Layout.cshtml` (Blazor Server .NET 6), `Pages\_Host.cshtml` (Blazor Server .NET 7) or `wwwroot/index.html` (Blazor WebAssembly) and include this snippet:
-
-```html
-<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
-```
-
-### 5. Use a component
-Use any Radzen Blazor component by typing its tag name in a Blazor page e.g.
-```html
-<RadzenButton Text="Hi"></RadzenButton>
-```
-
-#### Data-binding a property
-```razor
-<RadzenButton Text=@text />
-<RadzenTextBox @bind-Value=@text />
-@code {
-  string text = "Hi";
-}
-```
-
-#### Handing events
-
-```razor
-<RadzenButton Click="@ButtonClicked" Text="Hi"></RadzenButton>
-@code {
-  void ButtonClicked()
-  {
-
-  }
-}
-```
 ## Run demos locally
 
-Use Radzen.Server.sln to open and run demos as Blazor server application or Radzen.WebAssembly.sln to open and run demos as Blazor WebAssembly application. Radzen.sln has reference to all projects including tests.
+Use Radzen.Server.sln to open and run demos as Blazor server application or Radzen.WebAssembly.sln to open and run demos as Blazor WebAssembly application. Radzen.sln has reference to all projects including tests.

Radzen.Blazor.Tests/AutoCompleteTests.cs

@@ -0,0 +1,74 @@
+using Xunit;
+
+namespace Radzen.Blazor.Tests
+{
+	public class AutoCompleteTests
+	{
+        [Fact]
+        public void AutoComplete_Enum_Converts_To_Attr_Value()
+        {
+            // Options
+            Assert.Equal("off", AutoCompleteType.Off.GetAutoCompleteValue());
+            Assert.Equal("on", AutoCompleteType.On.GetAutoCompleteValue());
+            Assert.Equal("name", AutoCompleteType.Name.GetAutoCompleteValue());
+            Assert.Equal("honorific-prefix", AutoCompleteType.HonorificPrefix.GetAutoCompleteValue());
+            Assert.Equal("given-name", AutoCompleteType.GivenName.GetAutoCompleteValue());
+            Assert.Equal("additional-name", AutoCompleteType.AdditionalName.GetAutoCompleteValue());
+            Assert.Equal("family-name", AutoCompleteType.FamilyName.GetAutoCompleteValue());
+            Assert.Equal("honorific-suffix", AutoCompleteType.HonorificSuffix.GetAutoCompleteValue());
+            Assert.Equal("nickname", AutoCompleteType.Nickname.GetAutoCompleteValue());
+            Assert.Equal("email", AutoCompleteType.Email.GetAutoCompleteValue());
+            Assert.Equal("username", AutoCompleteType.Username.GetAutoCompleteValue());
+            Assert.Equal("new-password", AutoCompleteType.NewPassword.GetAutoCompleteValue());
+            Assert.Equal("current-password", AutoCompleteType.CurrentPassword.GetAutoCompleteValue());
+            Assert.Equal("one-time-code", AutoCompleteType.OneTimeCode.GetAutoCompleteValue());
+            Assert.Equal("organization-title", AutoCompleteType.OrganizationTitle.GetAutoCompleteValue());
+            Assert.Equal("organization", AutoCompleteType.Organization.GetAutoCompleteValue());
+            Assert.Equal("street-address", AutoCompleteType.StreetAddress.GetAutoCompleteValue());
+            Assert.Equal("address-line1", AutoCompleteType.AddressLine1.GetAutoCompleteValue());
+            Assert.Equal("address-line2", AutoCompleteType.AddressLine2.GetAutoCompleteValue());
+            Assert.Equal("address-line3", AutoCompleteType.AddressLine3.GetAutoCompleteValue());
+            Assert.Equal("address-level1", AutoCompleteType.AddressLevel1.GetAutoCompleteValue());
+            Assert.Equal("address-level2", AutoCompleteType.AddressLevel2.GetAutoCompleteValue());
+            Assert.Equal("address-level3", AutoCompleteType.AddressLevel3.GetAutoCompleteValue());
+            Assert.Equal("address-level4", AutoCompleteType.AddressLevel4.GetAutoCompleteValue());
+            Assert.Equal("country", AutoCompleteType.Country.GetAutoCompleteValue());
+            Assert.Equal("country-name", AutoCompleteType.CountryName.GetAutoCompleteValue());
+            Assert.Equal("postal-code", AutoCompleteType.PostalCode.GetAutoCompleteValue());
+            Assert.Equal("cc-name", AutoCompleteType.CcName.GetAutoCompleteValue());
+            Assert.Equal("cc-given-name", AutoCompleteType.CcGivenName.GetAutoCompleteValue());
+            Assert.Equal("cc-additional-name", AutoCompleteType.CcAdditionalName.GetAutoCompleteValue());
+            Assert.Equal("cc-family-name", AutoCompleteType.CcFamilyName.GetAutoCompleteValue());
+            Assert.Equal("cc-number", AutoCompleteType.CcNumber.GetAutoCompleteValue());
+            Assert.Equal("cc-exp", AutoCompleteType.CcExp.GetAutoCompleteValue());
+            Assert.Equal("cc-exp-month", AutoCompleteType.CcExpMonth.GetAutoCompleteValue());
+            Assert.Equal("cc-exp-year", AutoCompleteType.CcExpYear.GetAutoCompleteValue());
+            Assert.Equal("cc-csc", AutoCompleteType.CcCsc.GetAutoCompleteValue());
+            Assert.Equal("cc-type", AutoCompleteType.CcType.GetAutoCompleteValue());
+            Assert.Equal("transaction-currency", AutoCompleteType.TransactionCurrency.GetAutoCompleteValue());
+            Assert.Equal("transaction-amount", AutoCompleteType.TransactionAmount.GetAutoCompleteValue());
+            Assert.Equal("language", AutoCompleteType.Language.GetAutoCompleteValue());
+            Assert.Equal("bday", AutoCompleteType.Bday.GetAutoCompleteValue());
+            Assert.Equal("bday-day", AutoCompleteType.BdayDay.GetAutoCompleteValue());
+            Assert.Equal("bday-month", AutoCompleteType.BdayMonth.GetAutoCompleteValue());
+            Assert.Equal("bday-year", AutoCompleteType.BdayYear.GetAutoCompleteValue());
+            Assert.Equal("sex", AutoCompleteType.Sex.GetAutoCompleteValue());
+            Assert.Equal("tel", AutoCompleteType.Tel.GetAutoCompleteValue());
+            Assert.Equal("tel-country-code", AutoCompleteType.TelCountryCode.GetAutoCompleteValue());
+            Assert.Equal("tel-national", AutoCompleteType.TelNational.GetAutoCompleteValue());
+            Assert.Equal("tel-area-code", AutoCompleteType.TelAreaCode.GetAutoCompleteValue());
+            Assert.Equal("tel-local", AutoCompleteType.TelLocal.GetAutoCompleteValue());
+            Assert.Equal("tel-extension", AutoCompleteType.TelExtension.GetAutoCompleteValue());
+            Assert.Equal("impp", AutoCompleteType.Impp.GetAutoCompleteValue());
+            Assert.Equal("url", AutoCompleteType.Url.GetAutoCompleteValue());
+            Assert.Equal("photo", AutoCompleteType.Photo.GetAutoCompleteValue());
+            // Synonyms
+            Assert.Equal("address-level1", AutoCompleteType.State.GetAutoCompleteValue());
+            Assert.Equal("address-level1", AutoCompleteType.Province.GetAutoCompleteValue());
+            Assert.Equal("postal-code", AutoCompleteType.ZipCode.GetAutoCompleteValue());
+            Assert.Equal("given-name", AutoCompleteType.FirstName.GetAutoCompleteValue());
+            Assert.Equal("additional-name", AutoCompleteType.MiddleName.GetAutoCompleteValue());
+            Assert.Equal("family-name", AutoCompleteType.LastName.GetAutoCompleteValue());
+        }
+    }
+}

Radzen.Blazor.Tests/ButtonTests.cs

@@ -30,7 +30,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.Icon, icon));
 
-            Assert.Contains(@$"<i class=""rz-button-icon-left rzi"">{icon}</i>", component.Markup);
+            Assert.Contains(@$"<i class=""notranslate rz-button-icon-left rzi"">{icon}</i>", component.Markup);
         }
 
         [Fact]
@@ -48,7 +48,7 @@ namespace Radzen.Blazor.Tests
             );
 
             // does not render the actual icon when busy
-            Assert.DoesNotContain(@$"<i class=""rz-button-icon-left rzi"">{icon}</i>", component.Markup);
+            Assert.DoesNotContain(@$"<i class=""notranslate rz-button-icon-left rzi"">{icon}</i>", component.Markup);
 
             // renders the icon with busy spin animation
             Assert.Contains(@"<i style=""animation: rotation", component.Markup);
@@ -71,7 +71,7 @@ namespace Radzen.Blazor.Tests
                 parameters.Add(p => p.Icon, icon);
             });
 
-            Assert.Contains(@$"<i class=""rz-button-icon-left rzi"">{icon}</i>", component.Markup);
+            Assert.Contains(@$"<i class=""notranslate rz-button-icon-left rzi"">{icon}</i>", component.Markup);
             Assert.Contains(@$"<span class=""rz-button-text"">{text}</span>", component.Markup);
         }
 
@@ -86,7 +86,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.Image, image));
 
-            Assert.Contains(@$"<img class=""rz-button-icon-left rzi"" src=""{image}"" />", component.Markup);
+            Assert.Contains(@$"<img class=""notranslate rz-button-icon-left rzi"" src=""{image}"" alt=""button"" />", component.Markup);
         }
 
         [Fact]
@@ -103,9 +103,10 @@ namespace Radzen.Blazor.Tests
             {
                 parameters.Add(p => p.Text, text);
                 parameters.Add(p => p.Image, image);
+                parameters.Add(p => p.ImageAlternateText, text);
             });
 
-            Assert.Contains(@$"<img class=""rz-button-icon-left rzi"" src=""{image}"" />", component.Markup);
+            Assert.Contains(@$"<img class=""notranslate rz-button-icon-left rzi"" src=""{image}"" alt=""{text}"" />", component.Markup);
             Assert.Contains(@$"<span class=""rz-button-text"">{text}</span>", component.Markup);
         }
 

Radzen.Blazor.Tests/ChartTests.cs

@@ -0,0 +1,54 @@
+using System.Diagnostics;
+using System.Linq;
+using System.Threading;
+using System.Threading.Tasks;
+using Bunit;
+using Radzen.Blazor.Rendering;
+using Xunit;
+using Xunit.Abstractions;
+
+namespace Radzen.Blazor.Tests;
+
+public class ChartTests
+{
+    private readonly ITestOutputHelper output;
+    public ChartTests(ITestOutputHelper output)
+    {
+        this.output = output;
+    }
+
+    [Fact(Timeout = 30000)]
+    public async Task Chart_Tooltip_Performance()
+    {
+        using var ctx = new TestContext();
+        ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+        ctx.JSInterop.Setup<Rect>("Radzen.createChart", _ => true).SetResult(new Rect {Left = 0, Top = 0, Width = 200, Height = 200});
+
+        var seriesData = Enumerable.Range(0, 5000).Select(i => new Point { X = i, Y = i });
+        var chart = ctx.RenderComponent<RadzenChart>(chartParameters =>
+            chartParameters
+                .AddChildContent<RadzenLineSeries<Point>>(seriesParameters =>
+                    seriesParameters
+                        .Add(p => p.CategoryProperty, nameof(Point.X))
+                        .Add(p => p.ValueProperty, nameof(Point.Y))
+                        .Add(p => p.Data, seriesData))
+                .AddChildContent<RadzenCategoryAxis>(axisParameters =>
+                    axisParameters
+                        .Add(p => p.Step, 100)
+                        .Add(p => p.Formatter, x =>
+                        {
+                            Thread.Sleep(100);
+                            return $"{x}";
+                        })));
+
+        var stopwatch = Stopwatch.StartNew();
+        foreach (var _ in Enumerable.Range(0, 10))
+        {
+            await chart.InvokeAsync(() => chart.Instance.MouseMove(100, 80));
+            Assert.Contains("<div class=\"rz-chart-tooltip", chart.Markup);
+            await chart.InvokeAsync(() => chart.Instance.MouseMove(0, 0));
+            Assert.DoesNotContain("<div class=\"rz-chart-tooltip", chart.Markup);
+        }
+        output.WriteLine($"Time took: {stopwatch.Elapsed}");
+    }
+}

Radzen.Blazor.Tests/CheckBoxTests.cs

@@ -160,5 +160,83 @@ namespace Radzen.Blazor.Tests
             Assert.Contains(@$"rz-state-active", component.Markup);
             Assert.Contains(@$"rzi-times", component.Markup);
         }
+
+        [Fact]
+        public void CheckBox_Renders_ReadonlyParameter()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenCheckBox<bool>>();
+
+            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.ReadOnly, true));
+
+            Assert.Contains(@$"readonly", component.Markup);
+        }
+
+        [Fact]
+        public void CheckBox_DoesNotRaise_ChangedEvent_ReadonlyParameter()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenCheckBox<bool>>();
+
+            var raised = false;
+
+            component.SetParametersAndRender(parameters => parameters
+              .Add<bool>(p => p.ReadOnly, true)
+              .Add(p => p.Change, args => { raised = true; })
+            );
+
+            component.Find("div.rz-chkbox-box").Click();
+
+            Assert.False(raised);
+        }
+
+        [Fact]
+        public void CheckBox_DoesNotRaise_ValueChangedEvent_ReadonlyParameter()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenCheckBox<bool>>();
+
+            var raised = false;
+
+            component.SetParametersAndRender(parameters => parameters
+              .Add<bool>(p => p.ReadOnly, true)
+              .Add(p => p.ValueChanged, args => { raised = true; })
+            );
+
+            component.Find("div.rz-chkbox-box").Click();
+
+            Assert.False(raised);
+        }
+
+        [Fact]
+        public void CheckBox_ValueNotChanged_ReadonlyParameter()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenCheckBox<bool>>();
+
+            var value = true;
+
+            component.SetParametersAndRender(parameters => parameters
+              .Add<bool>(p => p.ReadOnly, true)
+              .Add<bool>(p => p.Value, value)
+            );
+
+            component.Find("div.rz-chkbox-box").Click();
+
+            Assert.Contains(@$"rz-state-active", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters
+              .Add<bool>(p => p.ReadOnly, !true)
+              .Add<bool>(p => p.Value, value)
+            );
+
+            component.Find("div.rz-chkbox-box").Click();
+
+            Assert.DoesNotContain(@$"rz-state-active", component.Markup);
+        }
     }
 }

Radzen.Blazor.Tests/DataGridTests.cs

@@ -20,39 +20,29 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
             {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
                 parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
                 {
-                    builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.CloseComponent();
                 });
             });
 
             // Main
-            Assert.Contains(@$"rz-datatable-scrollable-wrapper", component.Markup);
-            Assert.Contains(@$"rz-datatable-scrollable-view", component.Markup);
+            Assert.Contains(@$"rz-data-grid", component.Markup);
+            Assert.Contains(@$"rz-datatable", component.Markup);
+            Assert.Contains(@$"rz-datatable-scrollable", component.Markup);
 
-            // Header
-            Assert.Contains(@$"rz-datatable-scrollable-header", component.Markup);
-            Assert.Contains(@$"rz-datatable-scrollable-header-box", component.Markup);
-            Assert.Contains(@$"rz-datatable-thead", component.Markup);
-            Assert.Contains(@$"rz-datatable-scrollable-colgroup", component.Markup);
+            // Data
+            Assert.Contains(@$"rz-data-grid-data", component.Markup);
 
-            //Body
-            Assert.Contains(@$"rz-datatable-scrollable-body", component.Markup);
-            Assert.Contains(@$"rz-datatable-scrollable-table-wrapper", component.Markup);
-            Assert.Contains(@$"rz-datatable-data", component.Markup);
-            Assert.Contains(@$"rz-datatable-hoverable-rows", component.Markup);
-
-            // Footer
-            Assert.DoesNotContain(@$"rz-datatable-scrollable-footer", component.Markup);
-            Assert.DoesNotContain(@$"rz-datatable-scrollable-footer-box", component.Markup);
-
-            //Columns
-            Assert.DoesNotContain(@$"rz-sortable-column", component.Markup);
+            // Table
+            Assert.Contains(@$"rz-grid-table", component.Markup);
+            Assert.Contains(@$"rz-grid-table-fixed", component.Markup);
+            Assert.Contains(@$"rz-grid-table-striped", component.Markup);
         }
 
         // Columns tests
@@ -63,12 +53,12 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
             {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
                 parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
                 {
-                    builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.CloseComponent();
                 });
@@ -88,12 +78,12 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
             {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
                 parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
                 {
-                    builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
                     builder.AddAttribute(1, "Title", "MyId");
                     builder.CloseComponent();
                 });
@@ -103,6 +93,54 @@ namespace Radzen.Blazor.Tests
             Assert.Equal("MyId", title.TextContent.Trim());
         }
 
+        [Fact]
+        public void DataGrid_Renders_TitleAttribute()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
+            {
+                parameterBuilder.Add(p => p.ShowColumnTitleAsTooltip, true);
+                parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
+                    builder.AddAttribute(1, "Title", "MyId");
+                    builder.CloseComponent();
+                });
+            });
+
+            var title = component.Find(".rz-column-title");
+            Assert.Equal("MyId", title.TextContent.Trim());
+            Assert.Equal("MyId", title.GetAttribute("title"));
+        }
+
+        [Fact]
+        public void DataGrid_DoesNotRender_TitleAttribute()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
+            {
+                parameterBuilder.Add(p => p.ShowColumnTitleAsTooltip, false);
+                parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
+                    builder.AddAttribute(1, "Title", "MyId");
+                    builder.CloseComponent();
+                });
+            });
+
+            var title = component.Find(".rz-column-title");
+            Assert.Equal("MyId", title.TextContent.Trim());
+            Assert.Null(title.GetAttribute("title"));
+        }
+
         [Fact]
         public void DataGrid_Renders_AllowSortingParameter()
         {
@@ -110,12 +148,12 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
             {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
                 parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
                 {
-                    builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.AddAttribute(2, "Title", "Id");
                     builder.CloseComponent();
@@ -140,12 +178,12 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
             {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
                 parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
                 {
-                    builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.AddAttribute(2, "Title", "Id");
                     builder.AddAttribute(3, "Sortable", false);
@@ -164,12 +202,12 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
             {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
                 parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
                 {
-                    builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.AddAttribute(2, "Title", "Id");
                     builder.CloseComponent();
@@ -177,14 +215,14 @@ namespace Radzen.Blazor.Tests
                 parameterBuilder.Add<bool>(p => p.AllowFiltering, true);
             });
 
-            Assert.Contains(@$"rz-cell-filter", component.Markup);
+            Assert.Contains(@$"rz-grid-filter-icon", component.Markup);
 
             component.SetParametersAndRender(parameters =>
             {
                 parameters.Add<bool>(p => p.AllowFiltering, false);
             });
 
-            Assert.DoesNotContain(@$"rz-cell-filter", component.Markup);
+            Assert.DoesNotContain(@$"rz-grid-filter-icon", component.Markup);
         }
 
         [Fact]
@@ -194,12 +232,12 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
             {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
                 parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
                 {
-                    builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.AddAttribute(2, "Title", "Id");
                     builder.AddAttribute(3, "Filterable", false);
@@ -218,12 +256,12 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
             {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
                 parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
                 {
-                    builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.AddAttribute(2, "Title", "Id");
                     builder.CloseComponent();
@@ -249,12 +287,12 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder =>
+            var component = ctx.RenderComponent<RadzenDataGrid<int>>(parameterBuilder =>
             {
                 parameterBuilder.Add<IEnumerable<int>>(p => p.Data, new[] { 1, 2, 3 });
                 parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
                 {
-                    builder.OpenComponent(0, typeof(RadzenGridColumn<int>));
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<int>));
 
                     builder.AddAttribute(1, "HeaderTemplate", (RenderFragment)delegate (RenderTreeBuilder b)
                     {
@@ -275,12 +313,12 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder =>
+            var component = ctx.RenderComponent<RadzenDataGrid<int>>(parameterBuilder =>
             {
                 parameterBuilder.Add<IEnumerable<int>>(p => p.Data, new[] { 1, 2, 3 });
                 parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
                 {
-                    builder.OpenComponent(0, typeof(RadzenGridColumn<int>));
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<int>));
 
                     builder.AddAttribute(1, "FooterTemplate", (RenderFragment)delegate (RenderTreeBuilder b)
                     {
@@ -291,8 +329,8 @@ namespace Radzen.Blazor.Tests
                 });
             });
 
-            Assert.Contains(@$"rz-datatable-scrollable-footer", component.Markup);
-            Assert.Contains(@$"rz-datatable-scrollable-footer-box", component.Markup);
+            Assert.Contains(@$"rz-datatable-tfoot", component.Markup);
+            Assert.Contains(@$"rz-column-footer", component.Markup);
             Assert.Contains(@$"Footer", component.Markup);
         }
 
@@ -304,12 +342,12 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
             {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, Enumerable.Range(0, 100).Select(i => new { Id = i }));
                 parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
                 {
-                    builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.AddAttribute(2, "Title", "Id");
                     builder.CloseComponent();
@@ -334,11 +372,20 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Enumerable.Range(0, 100)));
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
+            {
+                parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, Enumerable.Range(0, 100).Select(i => new { Id = i }));
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
+                    builder.AddAttribute(1, "Property", "Id");
+                    builder.AddAttribute(2, "Title", "Id");
+                    builder.CloseComponent();
+                });
+                parameterBuilder.Add<bool>(p => p.AllowPaging, true);
+            });
 
-            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AllowPaging, true));
-
-            Assert.Contains(@$"rz-paginator-bottom", component.Markup);
+            Assert.Contains(@$"rz-pager", component.Markup);
         }
 
         [Fact]
@@ -348,16 +395,21 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Enumerable.Range(0, 100)));
-
-            component.SetParametersAndRender(parameters =>
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
             {
-                parameters.Add<bool>(p => p.AllowPaging, true);
-                parameters.Add<PagerPosition>(p => p.PagerPosition, PagerPosition.Top);
+                parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, Enumerable.Range(0, 100).Select(i => new { Id = i }));
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
+                    builder.AddAttribute(1, "Property", "Id");
+                    builder.AddAttribute(2, "Title", "Id");
+                    builder.CloseComponent();
+                });
+                parameterBuilder.Add<bool>(p => p.AllowPaging, true);
+                parameterBuilder.Add<PagerPosition>(p => p.PagerPosition, PagerPosition.Top);
             });
 
-            Assert.Contains(@$"rz-paginator", component.Markup);
-            Assert.DoesNotContain(@$"rz-paginator-bottom", component.Markup);
+            Assert.Contains(@$"rz-pager", component.Markup);
         }
 
         [Fact]
@@ -367,16 +419,59 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Enumerable.Range(0, 100)));
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
+            {
+                parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, Enumerable.Range(0, 100).Select(i => new { Id = i }));
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
+                    builder.AddAttribute(1, "Property", "Id");
+                    builder.AddAttribute(2, "Title", "Id");
+                    builder.CloseComponent();
+                });
+                parameterBuilder.Add<bool>(p => p.AllowPaging, true);
+                parameterBuilder.Add<PagerPosition>(p => p.PagerPosition, PagerPosition.TopAndBottom);
+            });
+
+            Assert.Contains(@$"rz-pager", component.Markup);
+        }
+
+        [Fact]
+        public void DataGrid_Renders_PagerDensityDefault()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenDataGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Enumerable.Range(0, 100)));
 
             component.SetParametersAndRender(parameters =>
             {
                 parameters.Add<bool>(p => p.AllowPaging, true);
-                parameters.Add<PagerPosition>(p => p.PagerPosition, PagerPosition.TopAndBottom);
+                parameters.Add<PagerPosition>(p => p.PagerPosition, PagerPosition.Top);
+                parameters.Add<Density>(p => p.Density, Density.Default);
             });
 
-            Assert.Contains(@$"rz-paginator", component.Markup);
-            Assert.Contains(@$"rz-paginator-bottom", component.Markup);
+            Assert.DoesNotContain(@$"rz-density-compact", component.Markup);
+        }
+
+        [Fact]
+        public void DataGrid_Renders_PagerDensityCompact()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenDataGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Enumerable.Range(0, 100)));
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add<bool>(p => p.AllowPaging, true);
+                parameters.Add<PagerPosition>(p => p.PagerPosition, PagerPosition.Top);
+                parameters.Add<Density>(p => p.Density, Density.Compact);
+            });
+
+            Assert.Contains(@$"rz-density-compact", component.Markup);
         }
 
         [Fact]
@@ -386,7 +481,7 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Array.Empty<int>()));
+            var component = ctx.RenderComponent<RadzenDataGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Array.Empty<int>()));
             component.Render();
 
             Assert.Contains("No records to display.", component.Markup);
@@ -400,7 +495,7 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Array.Empty<int>()));
+            var component = ctx.RenderComponent<RadzenDataGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Array.Empty<int>()));
             component.SetParametersAndRender(parameters =>
             {
                 parameters.Add(p => p.EmptyText, emptyText);
@@ -416,7 +511,7 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Array.Empty<int>()));
+            var component = ctx.RenderComponent<RadzenDataGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Array.Empty<int>()));
             component.SetParametersAndRender(parameters =>
             {
                 parameters.Add<RenderFragment>(p => p.EmptyTemplate, builder =>
@@ -437,18 +532,28 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Enumerable.Range(0, 100)));
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
+            {
+                parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, Enumerable.Range(0, 100).Select(i => new { Id = i }));
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
+                    builder.AddAttribute(1, "Property", "Id");
+                    builder.AddAttribute(2, "Title", "Id");
+                    builder.CloseComponent();
+                });
+                parameterBuilder.Add<bool>(p => p.AllowPaging, true);
+            });
 
             var raised = false;
             LoadDataArgs newArgs = null;
 
             component.SetParametersAndRender(parameters =>
             {
-                parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; newArgs = args; });
             });
 
-            component.Find(".rz-paginator-next").Click();
+            component.Find(".rz-pager-next").Click();
 
             Assert.True(raised);
             Assert.True(newArgs.Skip == 10);
@@ -462,18 +567,28 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Enumerable.Range(0, 100)));
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
+            {
+                parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, Enumerable.Range(0, 100).Select(i => new { Id = i }));
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
+                    builder.AddAttribute(1, "Property", "Id");
+                    builder.AddAttribute(2, "Title", "Id");
+                    builder.CloseComponent();
+                });
+                parameterBuilder.Add<bool>(p => p.AllowPaging, true);
+            });
 
             var raised = false;
             LoadDataArgs newArgs = null;
 
             component.SetParametersAndRender(parameters =>
             {
-                parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; newArgs = args; });
             });
 
-            component.Find(".rz-paginator-last").Click();
+            component.Find(".rz-pager-last").Click();
 
             Assert.True(raised);
             Assert.True(newArgs.Skip == 90);
@@ -487,19 +602,29 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Enumerable.Range(0, 100)));
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
+            {
+                parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, Enumerable.Range(0, 100).Select(i => new { Id = i }));
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
+                    builder.AddAttribute(1, "Property", "Id");
+                    builder.AddAttribute(2, "Title", "Id");
+                    builder.CloseComponent();
+                });
+                parameterBuilder.Add<bool>(p => p.AllowPaging, true);
+            });
 
             var raised = false;
             LoadDataArgs newArgs = null;
 
             component.SetParametersAndRender(parameters =>
             {
-                parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; newArgs = args; });
             });
 
-            component.Find(".rz-paginator-next").Click();
-            component.Find(".rz-paginator-prev").Click();
+            component.Find(".rz-pager-next").Click();
+            component.Find(".rz-pager-prev").Click();
 
             Assert.True(raised);
             Assert.True(newArgs.Skip == 0);
@@ -513,19 +638,29 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Enumerable.Range(0, 100)));
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
+            {
+                parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, Enumerable.Range(0, 100).Select(i => new { Id = i }));
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
+                    builder.AddAttribute(1, "Property", "Id");
+                    builder.AddAttribute(2, "Title", "Id");
+                    builder.CloseComponent();
+                });
+                parameterBuilder.Add<bool>(p => p.AllowPaging, true);
+            });
 
             var raised = false;
             LoadDataArgs newArgs = null;
 
             component.SetParametersAndRender(parameters =>
             {
-                parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; newArgs = args; });
             });
 
-            component.Find(".rz-paginator-next").Click();
-            component.Find(".rz-paginator-first").Click();
+            component.Find(".rz-pager-next").Click();
+            component.Find(".rz-pager-first").Click();
 
             Assert.True(raised);
             Assert.True(newArgs.Skip == 0);
@@ -539,17 +674,27 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Enumerable.Range(0, 100)));
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
+            {
+                parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, Enumerable.Range(0, 100).Select(i => new { Id = i }));
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
+                    builder.AddAttribute(1, "Property", "Id");
+                    builder.AddAttribute(2, "Title", "Id");
+                    builder.CloseComponent();
+                });
+                parameterBuilder.Add<bool>(p => p.AllowPaging, true);
+            });
 
             var raised = false;
 
             component.SetParametersAndRender(parameters =>
             {
-                parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; });
             });
 
-            component.Find(".rz-paginator-first").Click();
+            component.Find(".rz-pager-first").Click();
 
             Assert.False(raised);
         }
@@ -561,17 +706,27 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Enumerable.Range(0, 100)));
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
+            {
+                parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, Enumerable.Range(0, 100).Select(i => new { Id = i }));
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
+                    builder.AddAttribute(1, "Property", "Id");
+                    builder.AddAttribute(2, "Title", "Id");
+                    builder.CloseComponent();
+                });
+                parameterBuilder.Add<bool>(p => p.AllowPaging, true);
+            });
 
             var raised = false;
 
             component.SetParametersAndRender(parameters =>
             {
-                parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; });
             });
 
-            component.Find(".rz-paginator-prev").Click();
+            component.Find(".rz-pager-prev").Click();
 
             Assert.False(raised);
         }
@@ -583,23 +738,29 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Enumerable.Range(0, 100)));
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
+            {
+                parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, Enumerable.Range(0, 100).Select(i => new { Id = i }));
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
+                    builder.AddAttribute(1, "Property", "Id");
+                    builder.AddAttribute(2, "Title", "Id");
+                    builder.CloseComponent();
+                });
+                parameterBuilder.Add<bool>(p => p.AllowPaging, true);
+            });
 
             var raised = false;
 
-            component.SetParametersAndRender(parameters =>
-            {
-                parameters.Add<bool>(p => p.AllowPaging, true);
-            });
-
-            component.Find(".rz-paginator-last").Click();
+            component.Find(".rz-pager-last").Click();
 
             component.SetParametersAndRender(parameters =>
             {
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; });
             });
 
-            component.Find(".rz-paginator-last").Click();
+            component.Find(".rz-pager-last").Click();
 
             Assert.False(raised);
         }
@@ -611,23 +772,29 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Enumerable.Range(0, 100)));
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
+            {
+                parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, Enumerable.Range(0, 100).Select(i => new { Id = i }));
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
+                    builder.AddAttribute(1, "Property", "Id");
+                    builder.AddAttribute(2, "Title", "Id");
+                    builder.CloseComponent();
+                });
+                parameterBuilder.Add<bool>(p => p.AllowPaging, true);
+            });
 
             var raised = false;
 
-            component.SetParametersAndRender(parameters =>
-            {
-                parameters.Add<bool>(p => p.AllowPaging, true);
-            });
-
-            component.Find(".rz-paginator-last").Click();
+            component.Find(".rz-pager-last").Click();
 
             component.SetParametersAndRender(parameters =>
             {
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; });
             });
 
-            component.Find(".rz-paginator-next").Click();
+            component.Find(".rz-pager-next").Click();
 
             Assert.False(raised);
         }
@@ -639,19 +806,29 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Enumerable.Range(0, 100)));
+            var component = ctx.RenderComponent<RadzenDataGrid<dynamic>>(parameterBuilder =>
+            {
+                parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, Enumerable.Range(0, 100).Select(i => new { Id = i }));
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
+                    builder.OpenComponent(0, typeof(RadzenDataGridColumn<dynamic>));
+                    builder.AddAttribute(1, "Property", "Id");
+                    builder.AddAttribute(2, "Title", "Id");
+                    builder.CloseComponent();
+                });
+                parameterBuilder.Add<bool>(p => p.AllowPaging, true);
+            });
 
             var raised = false;
             LoadDataArgs newArgs = null;
 
             component.SetParametersAndRender(parameters =>
             {
-                parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<int>(p => p.PageSize, 20);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; newArgs = args; });
             });
 
-            component.Find(".rz-paginator-next").Click();
+            component.Find(".rz-pager-next").Click();
 
             Assert.True(raised);
             Assert.True(newArgs.Skip == 20);

Radzen.Blazor.Tests/DataListTests.cs

@@ -29,7 +29,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AllowPaging, true));
 
-            Assert.Contains(@$"rz-paginator-bottom", component.Markup);
+            Assert.Contains(@$"rz-pager-bottom", component.Markup);
         }
 
         [Fact]
@@ -44,8 +44,8 @@ namespace Radzen.Blazor.Tests
                 parameters.Add<PagerPosition>(p => p.PagerPosition, PagerPosition.Top); 
             });
 
-            Assert.Contains(@$"rz-paginator", component.Markup);
-            Assert.DoesNotContain(@$"rz-paginator-bottom", component.Markup);
+            Assert.Contains(@$"rz-pager", component.Markup);
+            Assert.DoesNotContain(@$"rz-pager-bottom", component.Markup);
         }
 
         [Fact]
@@ -60,8 +60,42 @@ namespace Radzen.Blazor.Tests
                 parameters.Add<PagerPosition>(p => p.PagerPosition, PagerPosition.TopAndBottom);
             });
 
-            Assert.Contains(@$"rz-paginator", component.Markup);
-            Assert.Contains(@$"rz-paginator-bottom", component.Markup);
+            Assert.Contains(@$"rz-pager", component.Markup);
+            Assert.Contains(@$"rz-pager-bottom", component.Markup);
+        }
+
+        [Fact]
+        public void DataList_Renders_PagerDensityDefault()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenDataList<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Enumerable.Range(0, 100)));
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add<bool>(p => p.AllowPaging, true);
+                parameters.Add<PagerPosition>(p => p.PagerPosition, PagerPosition.Top);
+                parameters.Add<Density>(p => p.Density, Density.Default);
+            });
+
+            Assert.DoesNotContain(@$"rz-density-compact", component.Markup);
+        }
+
+        [Fact]
+        public void DataList_Renders_PagerDensityCompact()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenDataList<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Enumerable.Range(0, 100)));
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add<bool>(p => p.AllowPaging, true);
+                parameters.Add<PagerPosition>(p => p.PagerPosition, PagerPosition.Top);
+                parameters.Add<Density>(p => p.Density, Density.Compact);
+            });
+
+            Assert.Contains(@$"rz-density-compact", component.Markup);
         }
 
         [Fact]
@@ -93,7 +127,7 @@ namespace Radzen.Blazor.Tests
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; newArgs = args; });
             });
 
-            component.Find(".rz-paginator-next").Click();
+            component.Find(".rz-pager-next").Click();
 
             Assert.True(raised);
             Assert.True(newArgs.Skip == 10);
@@ -115,7 +149,7 @@ namespace Radzen.Blazor.Tests
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; newArgs = args; });
             });
 
-            component.Find(".rz-paginator-last").Click();
+            component.Find(".rz-pager-last").Click();
 
             Assert.True(raised);
             Assert.True(newArgs.Skip == 90);
@@ -137,8 +171,8 @@ namespace Radzen.Blazor.Tests
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; newArgs = args; });
             });
 
-            component.Find(".rz-paginator-next").Click();
-            component.Find(".rz-paginator-prev").Click();
+            component.Find(".rz-pager-next").Click();
+            component.Find(".rz-pager-prev").Click();
 
             Assert.True(raised);
             Assert.True(newArgs.Skip == 0);
@@ -160,8 +194,8 @@ namespace Radzen.Blazor.Tests
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; newArgs = args; });
             });
 
-            component.Find(".rz-paginator-next").Click();
-            component.Find(".rz-paginator-first").Click();
+            component.Find(".rz-pager-next").Click();
+            component.Find(".rz-pager-first").Click();
 
             Assert.True(raised);
             Assert.True(newArgs.Skip == 0);
@@ -182,7 +216,7 @@ namespace Radzen.Blazor.Tests
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; });
             });
 
-            component.Find(".rz-paginator-first").Click();
+            component.Find(".rz-pager-first").Click();
 
             Assert.False(raised);
         }
@@ -201,7 +235,7 @@ namespace Radzen.Blazor.Tests
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; });
             });
 
-            component.Find(".rz-paginator-prev").Click();
+            component.Find(".rz-pager-prev").Click();
 
             Assert.False(raised);
         }
@@ -219,13 +253,13 @@ namespace Radzen.Blazor.Tests
                 parameters.Add<bool>(p => p.AllowPaging, true);
             });
 
-            component.Find(".rz-paginator-last").Click();
+            component.Find(".rz-pager-last").Click();
 
             component.SetParametersAndRender(parameters => {
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; });
             });
 
-            component.Find(".rz-paginator-last").Click();
+            component.Find(".rz-pager-last").Click();
 
             Assert.False(raised);
         }
@@ -243,13 +277,13 @@ namespace Radzen.Blazor.Tests
                 parameters.Add<bool>(p => p.AllowPaging, true);
             });
 
-            component.Find(".rz-paginator-last").Click();
+            component.Find(".rz-pager-last").Click();
 
             component.SetParametersAndRender(parameters => {
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; });
             });
 
-            component.Find(".rz-paginator-next").Click();
+            component.Find(".rz-pager-next").Click();
 
             Assert.False(raised);
         }
@@ -270,7 +304,7 @@ namespace Radzen.Blazor.Tests
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; newArgs = args; });
             });
 
-            component.Find(".rz-paginator-next").Click();
+            component.Find(".rz-pager-next").Click();
 
             Assert.True(raised);
             Assert.True(newArgs.Skip == 20);

Radzen.Blazor.Tests/DatePickerTests.cs

@@ -18,10 +18,10 @@ namespace Radzen.Blazor.Tests
 
             var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>();
 
+            Assert.Contains(@$"rz-datepicker", component.Markup);
             Assert.Contains(@$"rz-calendar", component.Markup);
-            Assert.Contains(@$"rz-datepicker-group", component.Markup);
-            Assert.Contains(@$"rz-datepicker-header", component.Markup);
-            Assert.Contains(@$"rz-datepicker-calendar", component.Markup);
+            Assert.Contains(@$"rz-calendar-header", component.Markup);
+            Assert.Contains(@$"rz-calendar-view", component.Markup);
         }
 
         [Fact]
@@ -49,7 +49,8 @@ namespace Radzen.Blazor.Tests
 
             var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>();
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.ShowTime, true);
                 parameters.Add<bool>(p => p.ShowSeconds, true);
             });
@@ -69,7 +70,8 @@ namespace Radzen.Blazor.Tests
 
             var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>();
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.ShowTime, true);
                 parameters.Add<bool>(p => p.ShowTimeOkButton, true);
             });
@@ -91,7 +93,8 @@ namespace Radzen.Blazor.Tests
 
             var format = "d";
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add(p => p.DateFormat, format);
                 parameters.Add<object>(p => p.Value, DateTime.Now);
             });
@@ -108,7 +111,8 @@ namespace Radzen.Blazor.Tests
 
             var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>();
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.ShowTime, true);
                 parameters.Add(p => p.HourFormat, "12");
             });
@@ -127,12 +131,13 @@ namespace Radzen.Blazor.Tests
 
             var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>();
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.ShowTime, true);
                 parameters.Add<bool>(p => p.TimeOnly, true);
             });
 
-            Assert.DoesNotContain(@$"rz-datepicker-header", component.Markup);
+            Assert.DoesNotContain(@$"rz-calendar-header", component.Markup);
         }
 
         [Fact]
@@ -144,12 +149,13 @@ namespace Radzen.Blazor.Tests
 
             var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>();
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<object>(p => p.Value, DateTime.Now);
                 parameters.Add<bool>(p => p.AllowClear, true);
             });
 
-            Assert.Contains(@$"<i class=""rz-dropdown-clear-icon rzi rzi-times""", component.Markup);
+            Assert.Contains(@$"<i class=""notranslate rz-dropdown-clear-icon rzi rzi-times""", component.Markup);
         }
 
         [Fact]
@@ -212,7 +218,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.Style, value));
 
-            Assert.Contains(@$"style=""display: inline-block;{value}""", component.Markup);
+            Assert.Contains(@$"style=""{value}""", component.Markup);
         }
 
         [Fact]
@@ -241,11 +247,12 @@ namespace Radzen.Blazor.Tests
             var raised = false;
             object newValue = null;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add(p => p.Change, args => { raised = true; newValue = args; });
             });
 
-            component.Find(".rz-datepicker-next-icon").Click();
+            component.Find(".rz-calendar-next-icon").Click();
 
             Assert.False(raised);
         }
@@ -262,11 +269,12 @@ namespace Radzen.Blazor.Tests
             var raised = false;
             object newValue = null;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add(p => p.ValueChanged, args => { raised = true; newValue = args; });
             });
 
-            component.Find(".rz-datepicker-next-icon").Click();
+            component.Find(".rz-calendar-next-icon").Click();
 
             Assert.False(raised);
         }
@@ -283,11 +291,12 @@ namespace Radzen.Blazor.Tests
             var raised = false;
             object newValue = null;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add(p => p.Change, args => { raised = true; newValue = args; });
             });
 
-            component.Find(".rz-datepicker-prev-icon").Click();
+            component.Find(".rz-calendar-prev-icon").Click();
 
             Assert.False(raised);
         }
@@ -304,11 +313,12 @@ namespace Radzen.Blazor.Tests
             var raised = false;
             object newValue = null;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add(p => p.ValueChanged, args => { raised = true; newValue = args; });
             });
 
-            component.Find(".rz-datepicker-prev-icon").Click();
+            component.Find(".rz-calendar-prev-icon").Click();
 
             Assert.False(raised);
         }
@@ -327,7 +337,8 @@ namespace Radzen.Blazor.Tests
             var raised = false;
             object newValue = null;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add(p => p.ValueChanged, args => { raised = true; newValue = args; })
                           .Add(p => p.DateRender, args => { args.Disabled = dates.Contains(args.Date); });
             });
@@ -360,7 +371,8 @@ namespace Radzen.Blazor.Tests
             var raised = false;
             object newValue = null;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add(p => p.ValueChanged, args => { raised = true; newValue = args; })
                           .Add(p => p.DateRender, args => { args.Disabled = dates.Contains(args.Date); });
             });
@@ -379,6 +391,72 @@ namespace Radzen.Blazor.Tests
             Assert.Null(newValue);
         }
 
+        [Fact]
+        public void DatePicker_Parses_Input_Using_DateFormat()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTime?>>();
+
+            var raised = false;
+            object newValue = null;
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add(p => p.DateFormat, "ddMM");
+                parameters.Add(p => p.ValueChanged, args => { raised = true; newValue = args; });
+            });
+
+            var inputElement = component.Find(".rz-inputtext");
+
+            string input = "3012";
+            ctx.JSInterop.Setup<string>("Radzen.getInputValue", invocation => true).SetResult(input);
+            inputElement.Change(input);
+
+            Assert.True(raised);
+            Assert.Equal(new DateTime(DateTime.Now.Year, 12, 30), newValue);
+        }
+
+
+        [Fact]
+        public void DatePicker_Parses_Input_Using_ParseInput()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTime?>>();
+
+            Func<string, DateTime?> customParseInput = (input) =>
+            {
+                if (DateTime.TryParseExact(input, "ddMM", null, DateTimeStyles.None, out var result))
+                {
+                    return result;
+                }
+
+                return null;
+            };
+
+            var raised = false;
+            object newValue = null;
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add(p => p.ParseInput, customParseInput);
+                parameters.Add(p => p.ValueChanged, args => { raised = true; newValue = args; });
+            });
+
+            var inputElement = component.Find(".rz-inputtext");
+
+            string input = "3012";
+            ctx.JSInterop.Setup<string>("Radzen.getInputValue", invocation => true).SetResult(input);
+            inputElement.Change(input);
+
+            Assert.True(raised);
+            Assert.Equal(new DateTime(DateTime.Now.Year, 12, 30), newValue);
+        }
+
+
         [Fact]
         public void DatePicker_Respects_DateTimeMaxValue()
         {
@@ -393,26 +471,7 @@ namespace Radzen.Blazor.Tests
 
             Assert.Contains(DateTime.MaxValue.ToString(component.Instance.DateFormat), component.Markup);
 
-            var exception = Record.Exception(() => component.Find(".rz-datepicker-next-icon")
-                                                            .Click());
-            Assert.Null(exception);
-        }
-
-        [Fact]
-        public void DatePicker_Respects_DateTimeMinValue()
-        {
-            using var ctx = new TestContext();
-            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
-            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
-
-            var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>(parameters =>
-            {
-                parameters.Add(p => p.Value, DateTime.MinValue);
-            });
-
-            Assert.Contains(DateTime.MinValue.ToString(component.Instance.DateFormat), component.Markup);
-
-            var exception = Record.Exception(() => component.Find(".rz-datepicker-prev-icon")
+            var exception = Record.Exception(() => component.Find(".rz-calendar-next-icon")
                                                             .Click());
             Assert.Null(exception);
         }
@@ -441,7 +500,7 @@ namespace Radzen.Blazor.Tests
                 parameters.Add(p => p.Change, args => { raised = true; newValue = args; });
             });
 
-            component.Find(".rz-datepicker-next-icon").Click();
+            component.Find(".rz-calendar-next-icon").Click();
             component.FindAll(".rz-button-text").First(x => x.TextContent == "Ok").Click();
 
             Assert.True(raised);
@@ -505,5 +564,145 @@ namespace Radzen.Blazor.Tests
             Assert.Equal(kind, (component.Instance.Value as DateTime?)?.Kind);
             Assert.Equal(valueUtc.UtcDateTime.ToString(CultureInfo.InvariantCulture), (component.Instance.Value as DateTime?)?.ToString(CultureInfo.InvariantCulture));
         }
+
+        [Fact]
+        public void DatePicker_Displays_Calender_Icon()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>();
+
+            Assert.Contains(@$"rzi-calendar", component.Markup);
+        }
+
+        [Fact]
+        public void DatePicker_Displays_Schedule_Icon()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>(parameters =>
+            {
+                parameters.Add(p => p.TimeOnly, true);
+            });
+
+            Assert.Contains(@$"rzi-time", component.Markup);
+        }
+
+        [Fact]
+        public void DatePicker_Supports_DateOnly()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            DateOnly? dateOnly = new DateOnly(2024, 1, 31);
+            DateOnly? valueChangedValue = null!;
+            var component = ctx.RenderComponent<RadzenDatePicker<DateOnly?>>(parameters =>
+            {
+                parameters.Add(p => p.Value, dateOnly);
+                parameters.Add(p => p.ValueChanged, args => { valueChangedValue = args; });
+            });
+
+            Assert.False(component.Instance.ShowTime);
+            var input = component.Find("input");
+            input.GetAttribute("value").MarkupMatches(dateOnly.ToString());
+
+            // update to new value
+            var inputElement = component.Find(".rz-inputtext");
+            DateOnly? enteredValue = new DateOnly(2024, 2, 28);
+            ctx.JSInterop.Setup<string>("Radzen.getInputValue", invocation => true).SetResult(enteredValue.Value.ToShortDateString());
+            inputElement.Change(enteredValue);
+
+            input.GetAttribute("value").MarkupMatches(enteredValue.ToString());
+            Assert.Equal(enteredValue, component.Instance.Value);
+            Assert.Equal(enteredValue, valueChangedValue);
+        }
+
+        [Fact]
+        public void DatePicker_Supports_TimeOnly()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            TimeOnly? timeOnly = new TimeOnly(23, 59, 59);
+            TimeOnly? valueChangedValue = null!;
+            var component = ctx.RenderComponent<RadzenDatePicker<TimeOnly>>(parameters =>
+            {
+                parameters.Add(p => p.Value, timeOnly);
+                parameters.Add(p => p.ValueChanged, args => { valueChangedValue = args; });
+            });
+
+            Assert.True(component.Instance.TimeOnly);
+            Assert.True(component.Instance.ShowTime);
+            var input = component.Find("input");
+            input.GetAttribute("value").MarkupMatches(timeOnly.ToString());
+
+            // update to new value
+            var inputElement = component.Find(".rz-inputtext");
+            TimeOnly? enteredValue = new TimeOnly(1, 4, 5);
+            ctx.JSInterop.Setup<string>("Radzen.getInputValue", invocation => true).SetResult(enteredValue.Value.ToLongTimeString());
+            inputElement.Change(enteredValue);
+
+            input.GetAttribute("value").MarkupMatches(enteredValue.ToString());
+            Assert.Equal(enteredValue, component.Instance.Value);
+            Assert.Equal(enteredValue, valueChangedValue);
+        }
+
+        [Fact]
+        public void DatePicker_ShowCalendarWeek_WeekNumberAddedInAdditionalColumn()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>(parameter =>
+            {
+                parameter.Add(p => p.ShowCalendarWeek, true);
+            });
+
+            Assert.Contains(@$"rz-calendar-week-number", component.Markup);
+            Assert.Equal(8, component.FindAll(".rz-calendar-view th").Count());
+            // check header and week number column
+            Assert.Single(component.FindAll("th.rz-datepicker-week-number"));
+            Assert.Equal(6, component.FindAll("td.rz-calendar-week-number").Count());
+        }
+
+        [Fact]
+        public void DatePicker_ShowCalendarWeekFalse_NoAdditionalColumn()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>(parameter =>
+            {
+                parameter.Add(p => p.ShowCalendarWeek, false);
+            });
+
+            Assert.DoesNotContain(@$"rz-calendar-week-number", component.Markup);
+            Assert.Equal(7, component.FindAll(".rz-calendar-view th").Count());
+        }
+
+        [Fact]
+        public void DatePicker_ShowCalendarWeekWithCustomTitle_TitleCorrectlyRendered()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>(parameter =>
+            {
+                parameter.Add(p => p.ShowCalendarWeek, true);
+                parameter.Add(p => p.CalendarWeekTitle, "Wk");
+            });
+
+            var weekNumberHeader = component.Find(".rz-calendar-view th.rz-datepicker-week-number");
+            Assert.Contains("Wk", weekNumberHeader.InnerHtml);
+        }
     }
 }

Radzen.Blazor.Tests/Dollars.cs

@@ -0,0 +1,58 @@
+using System;
+using System.ComponentModel;
+using System.Globalization;
+
+namespace Radzen.Blazor.Tests;
+
+[TypeConverter(typeof(DollarsTypeConverter))]
+public readonly record struct Dollars(decimal Amount) : IComparable<decimal>
+{
+    public int CompareTo(decimal other)
+    {
+        return Amount.CompareTo(other);
+    }
+
+    public string ToString(string format, CultureInfo culture = null) => Amount.ToString(format, culture ?? CultureInfo.CreateSpecificCulture("en-US"));
+    public override string ToString() => Amount.ToString("F2", CultureInfo.CreateSpecificCulture("en-US"));
+}
+
+public class DollarsTypeConverter : TypeConverter
+{
+    public override bool CanConvertFrom(ITypeDescriptorContext context, Type sourceType)
+    {
+        if (sourceType == typeof(decimal) ||
+            sourceType == typeof(string)) 
+        {
+            return true;
+        }
+
+        return base.CanConvertFrom(context, sourceType);
+    }
+
+    public override bool CanConvertTo(ITypeDescriptorContext context, Type destinationType)
+    {
+        if (destinationType == typeof(decimal))
+            return true;
+        
+        return base.CanConvertTo(context, destinationType);
+    }
+
+    public override object ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, object value)
+    {
+        if (value is decimal d)
+            return new Dollars(d);
+
+        if (value is string s)
+            return decimal.TryParse(s, out var val) ? new Dollars(val) : null;
+        
+        return base.ConvertFrom(context, culture, value);
+    }
+
+    public override object ConvertTo(ITypeDescriptorContext context, CultureInfo culture, object value, Type destinationType)
+    {
+        if (destinationType == typeof(decimal) && value is Dollars d)
+            return d.Amount;
+        
+        return base.ConvertTo(context, culture, value, destinationType);
+    }
+}

Radzen.Blazor.Tests/DropDownTests.cs

@@ -1,5 +1,8 @@
 using System;
+using System.Threading.Tasks;
+using AngleSharp.Dom;
 using Bunit;
+using Microsoft.AspNetCore.Components;
 using Xunit;
 
 namespace Radzen.Blazor.Tests
@@ -38,6 +41,23 @@ namespace Radzen.Blazor.Tests
             return component;
         }
 
+        [Fact]
+        public async Task Dropdown_SelectItem_Method_Should_Not_Throw()
+        {
+            using var ctx = new TestContext();
+
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            var component = DropDown<int>(ctx);
+
+            var items = component.FindAll(".rz-dropdown-item");
+
+            Assert.Equal(2, items.Count);
+
+            //this throws
+            await component.InvokeAsync(async () => await component.Instance.SelectItem(1));
+        }
+
         [Fact]
         public void DropDown_RendersItems()
         {
@@ -122,5 +142,108 @@ namespace Radzen.Blazor.Tests
 
             Assert.Equal(2, selectedItems.Count);
         }
+
+        [Fact]
+        public void DropDown_AppliesValueTemplateOnMultipleSelection()
+        {
+            using var ctx = new TestContext();
+
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            var valueTemplateFragment = (RenderFragment<dynamic>)(_context =>
+            builder =>
+            {
+                builder.AddContent(0, $"value: {_context.Text}");
+            });
+
+            var component = DropDown<string>(ctx, parameters =>
+            {
+                parameters.Add(p => p.Multiple, true)
+                    .Add(p => p.ValueTemplate, valueTemplateFragment);
+            });
+
+            var items = component.FindAll(".rz-multiselect-item");
+
+            items[0].Click();
+            items[1].Click();
+
+            component.Render();
+
+            var selectedItems = component.Find(".rz-inputtext");
+
+            Assert.Contains("value: Item 1,value: Item 2", selectedItems.Text());
+        }
+
+        [Fact]
+        public void DropDown_AppliesValueTemplateWhenTepmlateDefined()
+        {
+            using var ctx = new TestContext();
+
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            var valueTemplateFragment = (RenderFragment<dynamic>)(_context =>
+            builder =>
+            {
+                builder.AddContent(0, $"value: {_context.Text}");
+            });
+
+            var templateFragment = (RenderFragment<dynamic>)(_context =>
+            builder =>
+            {
+                builder.AddContent(0, $"template: {_context.Text}");
+            });
+
+            var component = DropDown<string>(ctx, parameters =>
+            {
+                parameters.Add(p => p.Multiple, true)
+                    .Add(p => p.ValueTemplate, valueTemplateFragment)
+                    .Add(p => p.Template, templateFragment);
+            });
+
+            var items = component.FindAll(".rz-multiselect-item");
+
+            items[0].Click();
+            items[1].Click();
+
+            component.Render();
+
+            var selectedItems = component.Find(".rz-inputtext");
+            var itemsText = component.FindAll(".rz-multiselect-item-content");
+
+            Assert.Collection(itemsText, item => Assert.Contains("template: Item 1", item.Text()), item => Assert.Contains("template: Item 2", item.Text()));
+            Assert.Contains("value: Item 1,value: Item 2", selectedItems.Text());
+        }
+
+        [Fact]
+        public void DropDown_AppliesValueTemplateOnMultipleSelectionChips()
+        {
+            using var ctx = new TestContext();
+
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            var valueTemplateFragment = (RenderFragment<dynamic>)(_context =>
+            builder =>
+            {
+                builder.AddContent(0, $"value: {_context.Text}");
+            });
+
+            var component = DropDown<string>(ctx, parameters =>
+            {
+                parameters.Add(p => p.Multiple, true)
+                    .Add(p => p.ValueTemplate, valueTemplateFragment)
+                    .Add(p => p.Chips, true);
+            });
+
+            var items = component.FindAll(".rz-multiselect-item");
+
+            items[0].Click();
+            items[1].Click();
+
+            component.Render();
+
+            var selectedItems = component.FindAll(".rz-chip-text");
+
+            Assert.Collection(selectedItems, item => Assert.Contains("value: Item 1", item.Text()), item => Assert.Contains("value: Item 2", item.Text()));
+        }
     }
 }

Radzen.Blazor.Tests/FieldsetTests.cs

@@ -46,7 +46,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.Icon, value));
 
-            Assert.Contains(@$"<i class=""rzi"">{value}</i>", component.Markup);
+            Assert.Contains(@$"<i class=""notranslate rzi"">{value}</i>", component.Markup);
         }
 
         [Fact]
@@ -104,11 +104,11 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AllowCollapse, true));
 
-            Assert.Contains(@"<span class=""rz-fieldset-toggler rzi rzi-w rzi-minus""></span>", component.Markup);
+            Assert.Contains(@"<span class=""notranslate rz-fieldset-toggler rzi rzi-w rzi-minus""></span>", component.Markup);
 
             component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.Collapsed, true));
 
-            Assert.Contains(@"<span class=""rz-fieldset-toggler rzi rzi-w rzi-plus""></span>", component.Markup);
+            Assert.Contains(@"<span class=""notranslate rz-fieldset-toggler rzi rzi-w rzi-plus""></span>", component.Markup);
         }
 
         [Fact]

Radzen.Blazor.Tests/IconTests.cs

@@ -17,7 +17,7 @@ namespace Radzen.Blazor.Tests
             component.SetParametersAndRender(parameters => parameters.Add(p => p.Icon, icon));
 
             Assert.Contains(@$">{icon}</i>", component.Markup);
-            Assert.Contains(@$"<i class=""rzi""", component.Markup);
+            Assert.Contains(@$"class=""notranslate rzi""", component.Markup);
         }
 
         [Fact]
@@ -58,6 +58,18 @@ namespace Radzen.Blazor.Tests
             Assert.Contains(@$"rzi-primary", component.Markup);
         }
 
+        [Fact]
+        public void Icon_Renders_IconColor()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenIcon>();
+
+            component.SetParametersAndRender(parameters => parameters.Add(icon => icon.IconColor, Colors.Primary));
+
+            Assert.Contains(@$"color:", component.Markup);
+        }
+
         [Fact]
         public void Icon_NotRenders_IconStyleClass_WhenNull()
         {
@@ -69,5 +81,17 @@ namespace Radzen.Blazor.Tests
 
             Assert.DoesNotContain(@$"rzi-primary", component.Markup);
         }
+
+        [Fact]
+        public void Icon_NotRenders_IconColor_WhenNull()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenIcon>();
+
+            component.SetParametersAndRender(parameters => parameters.Add(icon => icon.IconColor, null));
+
+            Assert.DoesNotContain(@$"color:", component.Markup);
+        }
     }
 }

Radzen.Blazor.Tests/LinkTests.cs

@@ -47,7 +47,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.Icon, icon));
 
-            Assert.Contains(@$"<i class=""rzi"">{icon}</i>", component.Markup);
+            Assert.Contains(@$"<i class=""notranslate rzi"">{icon}</i>", component.Markup);
         }
 
         [Fact]

Radzen.Blazor.Tests/MaskTests.cs

@@ -119,13 +119,54 @@ namespace Radzen.Blazor.Tests
 
             var component = ctx.RenderComponent<RadzenMask>();
 
-            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, false));
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", false));
+
+            Assert.Contains(@$"autocomplete=""off""", component.Markup);
+            Assert.Contains(@$"aria-autocomplete=""none""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", true));
+
+            Assert.Contains(@$"autocomplete=""on""", component.Markup);
+            Assert.DoesNotContain(@$"aria-autocomplete", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("autocomplete", "custom"));
+
+            Assert.Contains(@$"autocomplete=""custom""", component.Markup);
+            Assert.DoesNotContain(@$"aria-autocomplete", component.Markup);
+
+            component.Instance.DefaultAutoCompleteAttribute = "autocomplete-custom";
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", false));
+
+            Assert.Contains(@$"autocomplete=""autocomplete-custom""", component.Markup);
+            Assert.Contains(@$"aria-autocomplete=""none""", component.Markup);
+        }
+
+        [Fact]
+        public void Mask_Renders_TypedAutoCompleteParameter()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenMask>();
+
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", false));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.On));
 
             Assert.Contains(@$"autocomplete=""off""", component.Markup);
 
-            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, true));
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.Off));
 
-            Assert.Contains(@$"autocomplete=""on""", component.Markup);
+            Assert.Contains(@$"autocomplete=""off""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.AdditionalName));
+
+            Assert.Contains(@$"autocomplete=""{AutoCompleteType.AdditionalName.GetAutoCompleteValue()}""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.Email));
+
+            Assert.Contains(@$"autocomplete=""{AutoCompleteType.Email.GetAutoCompleteValue()}""", component.Markup);
         }
 
         [Fact]

Radzen.Blazor.Tests/NotificationServiceTests.cs

@@ -0,0 +1,214 @@
+using System;
+using System.Linq;
+using Xunit;
+
+namespace Radzen.Blazor.Tests
+{
+    public class NotificationServiceTests
+    {
+        [Fact]
+        public void NotificationService_IsMessageIsNull_ExceptionExpected()
+        {
+            NotificationService notificationService = new NotificationService();
+            NotificationMessage notificationMessage = null;
+
+            var exception = Record.Exception(() => notificationService.Notify(notificationMessage));
+
+            Assert.IsType<ArgumentNullException>(exception);
+        }
+        
+        [Fact]
+        public void NotificationService_CheckAreTwoMessages_Equals()
+        {
+            var messageOne = new NotificationMessage()
+            {
+                Severity = NotificationSeverity.Info,
+                Summary = "Info Summary",
+                Detail = "Info Detail",
+                Duration = 4000
+            };
+
+            var messageTwo = new NotificationMessage()
+            {
+                Severity = NotificationSeverity.Info,
+                Summary = "Info Summary",
+                Detail = "Info Detail",
+                Duration = 4000
+            };
+
+            Assert.True(messageOne.Equals(messageTwo));
+        }
+
+        [Fact]
+        public void NotificationService_CheckAreTwoMessages_NotEquals()
+        {
+            var messageOne = new NotificationMessage()
+            {
+                Severity = NotificationSeverity.Info,
+                Summary = "Info Summary",
+                Detail = "Info Detail",
+                Duration = 4000
+            };
+
+            var messageTwo = new NotificationMessage()
+            {
+                Severity = NotificationSeverity.Info,
+                Summary = "Info Summary Two",
+                Detail = "Info Detail Two",
+                Duration = 6000
+            };
+
+            Assert.False(messageOne.Equals(messageTwo));
+        }
+
+        [Fact]
+        public void NotificationService_CheckAreTwoMessages_EqualsByReference()
+        {
+            var messageOne = new NotificationMessage()
+            {
+                Severity = NotificationSeverity.Info,
+                Summary = "Info Summary",
+                Detail = "Info Detail",
+                Duration = 4000
+            };
+
+            var messageTwo = messageOne;
+
+            Assert.True(messageOne.Equals(messageTwo));
+        }
+
+        [Fact]
+        public void NotificationService_CheckAreTwoMessages_EqualsByOperator()
+        {
+            var messageOne = new NotificationMessage()
+            {
+                Severity = NotificationSeverity.Info,
+                Summary = "Info Summary",
+                Detail = "Info Detail",
+                Duration = 4000
+            };
+
+            var messageTwo = new NotificationMessage()
+            {
+                Severity = NotificationSeverity.Info,
+                Summary = "Info Summary",
+                Detail = "Info Detail",
+                Duration = 4000
+            };
+
+            Assert.True(messageOne == messageTwo);
+        }
+
+        [Fact]
+        public void NotificationService_CheckAreTwoMessages_NotEqualsByOperator()
+        {
+            var messageOne = new NotificationMessage()
+            {
+                Severity = NotificationSeverity.Info,
+                Summary = "Info Summary",
+                Detail = "Info Detail",
+                Duration = 4000
+            };
+
+            var messageTwo = new NotificationMessage()
+            {
+                Severity = NotificationSeverity.Info,
+                Summary = "Info Summary Two",
+                Detail = "Info Detail Two",
+                Duration = 6000
+            };
+
+            Assert.True(messageOne != messageTwo);
+        }
+
+        [Fact]
+        public void NotificationService_CheckAreTwoMessages_EqualsByHashCode()
+        {
+            var messageOne = new NotificationMessage()
+            {
+                Severity = NotificationSeverity.Info,
+                Summary = "Info Summary",
+                Detail = "Info Detail",
+                Duration = 4000
+            };
+
+            var messageTwo = new NotificationMessage()
+            {
+                Severity = NotificationSeverity.Info,
+                Summary = "Info Summary",
+                Detail = "Info Detail",
+                Duration = 4000
+            };
+
+            var messageOneHashCode = messageOne.GetHashCode();
+            var messageTwoHashCode = messageTwo.GetHashCode();
+
+            Assert.Equal(messageOneHashCode, messageTwoHashCode);
+        }
+
+        [Fact]
+        public void NotificationService_CheckAreTwoMessages_NotEqualsByHashCode()
+        {
+            var messageOne = new NotificationMessage()
+            {
+                Severity = NotificationSeverity.Info,
+                Summary = "Info Summary",
+                Detail = "Info Detail",
+                Duration = 4000
+            };
+
+            var messageTwo = new NotificationMessage()
+            {
+                Severity = NotificationSeverity.Info,
+                Summary = "Info Summary Two",
+                Detail = "Info Detail Tow",
+                Duration = 5000
+            };
+
+            var messageOneHashCode = messageOne.GetHashCode();
+            var messageTwoHashCode = messageTwo.GetHashCode();
+
+            Assert.NotEqual(messageOneHashCode, messageTwoHashCode);
+        }
+
+        [Fact]
+        public void NotificationService_MessagesCount_AfterAddingMessages()
+        {
+            NotificationService notificationService = new NotificationService();
+
+            //Messages are the same so only one should be added
+            notificationService.Notify(NotificationSeverity.Info, "Info Summary", "Info Detail", 4000);
+            notificationService.Notify(new NotificationMessage()
+            {
+                Severity = NotificationSeverity.Info,
+                Summary = "Info Summary",
+                Detail = "Info Detail",
+                Duration = 4000
+            });
+
+            int expectedMessagesNumber = 1;
+
+            Assert.Equal(expectedMessagesNumber, notificationService.Messages.Count);
+        }
+
+        [Fact]
+        public void NotificationService_MessagesCount_AfterAddingTwoDifferentMessages()
+        {
+            NotificationService notificationService = new NotificationService();
+
+            //Messages are the same so only one should be added
+            notificationService.Notify(NotificationSeverity.Info, "Info Summary 2", "Info Detail 2", 6000);
+            notificationService.Notify(new NotificationMessage()
+            {
+                Severity = NotificationSeverity.Info,
+                Summary = "Info Summary",
+                Detail = "Info Detail",
+                Duration = 4000
+            });
+
+            int expectedMessagesNumber = 2;
+
+            Assert.Equal(expectedMessagesNumber, notificationService.Messages.Count);
+        }
+    }
+}

Radzen.Blazor.Tests/NumericRangeValidatorTests.cs

@@ -0,0 +1,172 @@
+using System;
+using System.Threading.Tasks;
+using Bunit;
+using Microsoft.AspNetCore.Components.Forms;
+using Xunit;
+
+namespace Radzen.Blazor.Tests
+{
+    public class NumericRangeValidatorTests
+    {
+        class FormComponentTestDouble : IRadzenFormComponent
+        {
+            public bool IsBound => false;
+
+            public bool HasValue => true;
+
+            public string Name { get; set; }
+
+            public FieldIdentifier FieldIdentifier => throw new System.NotImplementedException();
+
+            public object GetValue()
+            {
+                return Value;
+            }
+
+            public ValueTask FocusAsync()
+            {
+                throw new NotImplementedException();
+            }
+
+            public object Value { get; set; }
+        }
+
+        class RadzenNumericRangeValidatorTestDouble : RadzenNumericRangeValidator
+        {
+            public bool Validate(object value)
+            {
+                return base.Validate(new FormComponentTestDouble { Value = value });
+            }
+        }
+
+        [Fact]
+        public void Throws_Exception_If_Min_And_Max_Are_Null()
+        {
+            var validator = new RadzenNumericRangeValidatorTestDouble();
+
+            Assert.Throws<System.ArgumentException>(() => validator.Validate(1));
+        }
+
+        [Fact]
+        public void Returns_False_If_Value_Is_Null()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenNumericRangeValidatorTestDouble>();
+
+            component.SetParametersAndRender(parameters =>
+            {
+                component.SetParametersAndRender(parameters => parameters.Add(p => p.Min, 0).Add(p => p.Max, 10));
+            });
+
+            Assert.False(component.Instance.Validate(null));
+        }
+        [Fact]
+        public void Returns_True_If_Value_Is_Null_And_AllowNull_Is_True()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenNumericRangeValidatorTestDouble>();
+
+            component.SetParametersAndRender(parameters =>
+            {
+                component.SetParametersAndRender(parameters => parameters.Add(p => p.Min, 0).Add(p => p.Max, 10).Add(p => p.AllowNull, true));
+            });
+
+            Assert.True(component.Instance.Validate(null));
+        }
+
+        [Fact]
+        public void Returns_False_If_Value_Overflows()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenNumericRangeValidatorTestDouble>();
+
+            component.SetParametersAndRender(parameters =>
+            {
+                component.SetParametersAndRender(parameters => parameters.Add(p => p.Min, 0).Add(p => p.Max, 10));
+            });
+
+            Assert.False(component.Instance.Validate(long.MaxValue));
+        }
+
+        [Fact]
+        public void Returns_True_If_Value_Is_Greater_Than_Min()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenNumericRangeValidatorTestDouble>();
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Min, 0));
+
+            Assert.True(component.Instance.Validate(1));
+        }
+
+        [Fact]
+        public void Returns_True_If_Value_Is_Equal_To_Min()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenNumericRangeValidatorTestDouble>();
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Min, 0));
+
+            Assert.True(component.Instance.Validate(0));
+        }
+
+        [Fact]
+        public void Returns_True_If_Value_Is_Less_Than_Max()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenNumericRangeValidatorTestDouble>();
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Max, 10));
+
+            Assert.True(component.Instance.Validate(9));
+        }
+
+        [Fact]
+        public void Returns_True_If_Value_Is_Equal_To_Max()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenNumericRangeValidatorTestDouble>();
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Max, 10));
+
+            Assert.True(component.Instance.Validate(10));
+        }
+
+        [Fact]
+        public void Returns_True_If_Value_Is_Between_Min_And_Max()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenNumericRangeValidatorTestDouble>();
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Min, 0).Add(p => p.Max, 10));
+
+            Assert.True(component.Instance.Validate(5));
+        }
+
+        [Fact]
+        public void Returns_True_If_Value_Is_Between_Min_And_Max_And_They_Are_Nullable()
+        {
+            int? min = 0;
+            int? max = 10;
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenNumericRangeValidatorTestDouble>();
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Min, min).Add(p => p.Max, max));
+            Assert.True(component.Instance.Validate(5));
+        }
+
+        [Fact]
+        public void Returns_True_When_Value_Is_Of_DifferentType()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenNumericRangeValidatorTestDouble>();
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Min, 0m).Add(p => p.Max, 10m));
+
+            Assert.True(component.Instance.Validate(5));
+        }
+
+        [Fact]
+        public void Returns_False_If_Cannot_Conert_Value()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenNumericRangeValidatorTestDouble>();
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Min, 0m).Add(p => p.Max, 10m));
+
+            Assert.False(component.Instance.Validate(DateTime.Now));
+        }
+    }
+}

Radzen.Blazor.Tests/NumericTests.cs

@@ -1,4 +1,6 @@
+using System;
 using Bunit;
+using Newtonsoft.Json.Linq;
 using Xunit;
 
 namespace Radzen.Blazor.Tests
@@ -14,9 +16,9 @@ namespace Radzen.Blazor.Tests
 
             component.Render();
 
-            Assert.Contains(@$"rz-spinner", component.Markup);
-            Assert.Contains(@$"rz-spinner-up", component.Markup);
-            Assert.Contains(@$"rz-spinner-down", component.Markup);
+            Assert.Contains(@$"rz-numeric", component.Markup);
+            Assert.Contains(@$"rz-numeric-up", component.Markup);
+            Assert.Contains(@$"rz-numeric-down", component.Markup);
         }
 
         [Fact]
@@ -52,11 +54,41 @@ namespace Radzen.Blazor.Tests
                 parameters.Add<decimal?>(p => p.Min, minValue);
             });
 
-            component.Find(".rz-spinner-down").Click();
+            component.Find(".rz-numeric-down").Click();
 
             Assert.False(raised, $"Numeric value should Change event if value is less than min value.");
         }
 
+        [Fact]
+        public void Numeric_Respect_Nullable_With_MinParameter()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenNumeric<double?>>();
+
+            var raised = false;
+            var value = 3.5;
+            object newValue = null;
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add(p => p.Change, args => { raised = true; newValue = args; });
+                parameters.Add<decimal?>(p => p.Min, 1);
+            });
+
+            component.Find("input").Change(value);
+
+            Assert.True(raised);
+            Assert.True(object.Equals(value, newValue));
+
+            component.Find("input").Change("");
+
+            Assert.True(raised);
+            Assert.True(object.Equals(null, newValue));
+        }
+
         [Fact]
         public void Numeric_Respect_MaxParameter()
         {
@@ -76,7 +108,7 @@ namespace Radzen.Blazor.Tests
                 parameters.Add<decimal?>(p => p.Max, maxValue);
             });
 
-            component.Find(".rz-spinner-up").Click();
+            component.Find(".rz-numeric-up").Click();
 
             Assert.False(raised, $"Numeric value should Change event if value is less than min value.");
         }
@@ -184,13 +216,54 @@ namespace Radzen.Blazor.Tests
 
             var component = ctx.RenderComponent<RadzenNumeric<double>>();
 
-            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, false));
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", false));
+
+            Assert.Contains(@$"autocomplete=""off""", component.Markup);
+            Assert.Contains(@$"aria-autocomplete=""none""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", true));
+
+            Assert.Contains(@$"autocomplete=""on""", component.Markup);
+            Assert.DoesNotContain(@$"aria-autocomplete", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("autocomplete", "custom"));
+
+            Assert.Contains(@$"autocomplete=""custom""", component.Markup);
+            Assert.DoesNotContain(@$"aria-autocomplete", component.Markup);
+
+            component.Instance.DefaultAutoCompleteAttribute = "autocomplete-custom";
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", false));
+
+            Assert.Contains(@$"autocomplete=""autocomplete-custom""", component.Markup);
+            Assert.Contains(@$"aria-autocomplete=""none""", component.Markup);
+        }
+
+        [Fact]
+        public void Numeric_Renders_TypedAutoCompleteParameter()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenNumeric<double>>();
+
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", false));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.On));
 
             Assert.Contains(@$"autocomplete=""off""", component.Markup);
 
-            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, true));
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.Off));
 
-            Assert.Contains(@$"autocomplete=""on""", component.Markup);
+            Assert.Contains(@$"autocomplete=""off""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.BdayMonth));
+
+            Assert.Contains(@$"autocomplete=""{AutoCompleteType.BdayMonth.GetAutoCompleteValue()}""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.BdayYear));
+
+            Assert.Contains(@$"autocomplete=""{AutoCompleteType.BdayYear.GetAutoCompleteValue()}""", component.Markup);
         }
 
         [Fact]
@@ -256,7 +329,7 @@ namespace Radzen.Blazor.Tests
                 parameters.Add(p => p.Change, args => { raised = true; newValue = args; });
             });
 
-            component.Find(".rz-spinner-up").Click();
+            component.Find(".rz-numeric-up").Click();
 
             Assert.True(raised, "Numeric Change should be raised on step up");
             Assert.True(object.Equals(expectedValue, newValue), $"Numeric value should be incremented on step up. Expected value: {expectedValue}, value: {newValue}");
@@ -265,7 +338,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.ValueChanged, args => { raised = true; }));
 
-            component.Find(".rz-spinner-up").Click();
+            component.Find(".rz-numeric-up").Click();
 
             Assert.True(raised, "Numeric ValueChanged should be raised on step up");
         }
@@ -291,7 +364,7 @@ namespace Radzen.Blazor.Tests
                 parameters.Add(p => p.Change, args => { raised = true; newValue = args; });
             });
 
-            component.Find(".rz-spinner-down").Click();
+            component.Find(".rz-numeric-down").Click();
 
             Assert.True(raised, "Numeric Change should be raised on step up");
             Assert.True(object.Equals(expectedValue, newValue), $"Numeric value should be incremented on step up. Expected value: {expectedValue}, value: {newValue}");
@@ -300,7 +373,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.ValueChanged, args => { raised = true; }));
 
-            component.Find(".rz-spinner-down").Click();
+            component.Find(".rz-numeric-down").Click();
 
             Assert.True(raised, "Numeric ValueChanged should be raised on step up");
         }
@@ -314,9 +387,9 @@ namespace Radzen.Blazor.Tests
 
             component.Render();
 
-            Assert.Contains(@$"rz-spinner-button-icon", component.Markup);
-            Assert.Contains(@$"rz-spinner-up", component.Markup);
-            Assert.Contains(@$"rz-spinner-down", component.Markup);
+            Assert.Contains(@$"rz-numeric-button-icon", component.Markup);
+            Assert.Contains(@$"rz-numeric-up", component.Markup);
+            Assert.Contains(@$"rz-numeric-down", component.Markup);
         }
 
         [Fact]
@@ -328,9 +401,9 @@ namespace Radzen.Blazor.Tests
 
             component.Render();
 
-            Assert.DoesNotContain(@$"rz-spinner-button-icon", component.Markup);
-            Assert.DoesNotContain(@$"rz-spinner-up", component.Markup);
-            Assert.DoesNotContain(@$"rz-spinner-down", component.Markup);
+            Assert.DoesNotContain(@$"rz-numeric-button-icon", component.Markup);
+            Assert.DoesNotContain(@$"rz-numeric-up", component.Markup);
+            Assert.DoesNotContain(@$"rz-numeric-down", component.Markup);
         }
 
         [Fact]
@@ -350,5 +423,124 @@ namespace Radzen.Blazor.Tests
 
             Assert.Contains($" value=\"{valueToTest.ToString(format)}\"", component.Markup);
         }
+        
+        public static TheoryData<decimal, decimal> NumericFormatterPreservesLeadingZerosData =>
+            new()
+            {
+                { 10.000m, 100.000m },
+                { 100.000m, 10.000m }
+            };
+        
+        [Theory]
+        [MemberData(nameof(NumericFormatterPreservesLeadingZerosData))]
+        public void Numeric_Formatter_PreservesLeadingZeros(decimal oldValue, decimal newValue)
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            string format = "0.000";
+
+            var component = ctx.RenderComponent<RadzenNumeric<decimal>>(
+                ComponentParameter.CreateParameter(nameof(RadzenNumeric<decimal>.Format), format),
+                ComponentParameter.CreateParameter(nameof(RadzenNumeric<decimal>.Value), oldValue)
+            );
+
+            component.Render();
+            
+            Assert.Contains($" value=\"{oldValue.ToString(format)}\"", component.Markup);
+
+            component.Find("input").Change(newValue);
+            
+            Assert.Contains($" value=\"{newValue.ToString(format)}\"", component.Markup);
+        }
+
+        [Fact]
+        public void Numeric_Uses_ConvertValue()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var value = new Dollars(11m);
+            Dollars? ConvertFunc(string s) => decimal.TryParse(s, out var val) ? new Dollars(val) : null;
+            var component = ctx.RenderComponent<RadzenNumeric<Dollars?>>(
+                ComponentParameter.CreateParameter(nameof(RadzenNumeric<Dollars?>.ConvertValue), (Func<string, Dollars?>)ConvertFunc),
+                ComponentParameter.CreateParameter(nameof(RadzenNumeric<Dollars?>.Value), value)
+            );
+
+            component.Render();
+            
+            Assert.Contains($" value=\"{value.ToString()}\"", component.Markup);
+
+            var newValue = new Dollars(13.53m);
+            component.Find("input").Change("13.53");
+
+            Assert.Contains($" value=\"{newValue.ToString()}\"", component.Markup);
+        }
+
+        [Fact]
+        public void Numeric_Supports_TypeConverter()
+        {
+            using var ctx = new TestContext();
+
+            var valueToTest = new Dollars(100.234m);
+            string format = "0.00";
+
+            var component = ctx.RenderComponent<RadzenNumeric<Dollars>>(
+                ComponentParameter.CreateParameter(nameof(RadzenNumeric<Dollars>.Format), format),
+                ComponentParameter.CreateParameter(nameof(RadzenNumeric<Dollars>.Value), valueToTest)
+            );
+
+            component.Render();
+
+            Assert.Contains($" value=\"{valueToTest.ToString(format)}\"", component.Markup);
+        }
+
+        [Fact]
+        public void Numeric_Supports_IComparable()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenNumeric<Dollars>>();
+
+            var maxValue = 2;
+
+            component.SetParametersAndRender(parameters =>
+            {
+                component.SetParametersAndRender(parameters =>
+                {
+                    parameters.Add(p => p.Value, new Dollars(1m));
+                    parameters.Add(p => p.Max, maxValue);
+                });
+            });
+            
+            component.Find("input").Change("13.53");
+
+            var maxDollars = new Dollars(2);
+            Assert.Contains($" value=\"{maxDollars.ToString()}\"", component.Markup);
+            Assert.Equal(component.Instance.Value, maxDollars);
+        }
+
+        [Fact]
+        public void Numeric_Supports_IFormattable()
+        {
+            using var ctx = new TestContext();
+
+            var valueToTest = new Temperature(60.23m);
+            const string format = "F";
+
+            var component = ctx.RenderComponent<RadzenNumeric<Temperature>>(
+                ComponentParameter.CreateParameter(nameof(RadzenNumeric<Temperature>.Format), format),
+                ComponentParameter.CreateParameter(nameof(RadzenNumeric<Temperature>.Value), valueToTest)
+            );
+
+            component.Render();
+
+            var input = component.Find("input").GetAttribute("value");
+            input.MarkupMatches(valueToTest.ToString(format));
+        }
     }
 }

Radzen.Blazor.Tests/PagerTests.cs

@@ -23,14 +23,14 @@ namespace Radzen.Blazor.Tests
 
             component.Render();
 
-            Assert.Contains(@$"rz-paginator", component.Markup);
+            Assert.Contains(@$"rz-pager", component.Markup);
 
             component.SetParametersAndRender(parameters =>
             {
                 parameters.Add<int>(p => p.PageSize, 101);
                 parameters.Add<int>(p => p.Count, 100);
             });
-            Assert.DoesNotContain(@$"rz-paginator", component.Markup);
+            Assert.DoesNotContain(@$"rz-pager", component.Markup);
         }
 
         [Fact]
@@ -49,7 +49,7 @@ namespace Radzen.Blazor.Tests
 
             component.Render();
 
-            Assert.Contains(@$"rz-paginator", component.Markup);
+            Assert.Contains(@$"rz-pager", component.Markup);
             Assert.Contains(@$"rz-dropdown-trigger", component.Markup);
         }
 
@@ -67,14 +67,93 @@ namespace Radzen.Blazor.Tests
             await component.Instance.GoToPage(2);
             component.Render();
 
-            Assert.Contains(@$"rz-paginator-summary", component.Markup); 
+            Assert.Contains(@$"rz-pager-summary", component.Markup); 
             Assert.Contains(@$"Page 3 of 10 (100 items)", component.Markup); 
             
             component.SetParametersAndRender(parameters => {
                 parameters.Add<bool>(p => p.ShowPagingSummary, false);
             });
-            Assert.DoesNotContain(@$"rz-paginator-summary", component.Markup);
+            Assert.DoesNotContain(@$"rz-pager-summary", component.Markup);
         }
 
+        [Fact]
+        public void RadzenPager_Renders_PagerDensityDefault()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenPager>(parameters =>
+            {
+                parameters.Add<int>(p => p.PageSize, 20);
+                parameters.Add<int>(p => p.Count, 100);
+                parameters.Add<Density>(p => p.Density, Density.Default);
+            });
+
+            Assert.DoesNotContain(@$"rz-density-compact", component.Markup);
+        }
+
+        [Fact]
+        public void RadzenPager_Renders_PagerDensityCompact()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenPager>(parameters =>
+            {
+                parameters.Add<int>(p => p.PageSize, 20);
+                parameters.Add<int>(p => p.Count, 100);
+                parameters.Add<Density>(p => p.Density, Density.Compact);
+            });
+
+            Assert.Contains(@$"rz-density-compact", component.Markup);
+        }
+
+        [Fact]
+        public async void RadzenPager_First_And_Prev_Buttons_Are_Disabled_When_On_The_First_Page()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenPager>(parameters => {
+                parameters.Add<int>(p => p.PageSize, 10);
+                parameters.Add<int>(p => p.Count, 100);
+                parameters.Add<bool>(p => p.ShowPagingSummary, true);
+            });
+
+            await component.Instance.GoToPage(0);
+            component.Render();
+
+            var firstPageButton = component.Find("a.rz-pager-first");
+            Assert.True(firstPageButton.HasAttribute("disabled"));
+
+            var prevPageButton = component.Find("a.rz-pager-prev");
+            Assert.True(prevPageButton.HasAttribute("disabled"));
+        }
+
+        [Fact]
+        public async void RadzenPager_Last_And_Next_Buttons_Are_Disabled_When_On_The_Last_Page()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenPager>(parameters => {
+                parameters.Add<int>(p => p.PageSize, 10);
+                parameters.Add<int>(p => p.Count, 100);
+                parameters.Add<bool>(p => p.ShowPagingSummary, true);
+            });
+
+            await component.Instance.GoToPage(9);
+            component.Render();
+
+            var lastPageButton = component.Find("a.rz-pager-last");
+            Assert.True(lastPageButton.HasAttribute("disabled"));
+
+            var nextPageButton = component.Find("a.rz-pager-next");
+            Assert.True(nextPageButton.HasAttribute("disabled"));
+        }
     }
 }

Radzen.Blazor.Tests/PanelTests.cs

@@ -47,7 +47,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.Icon, value));
 
-            Assert.Contains(@$"<i class=""rzi"">{value}</i>", component.Markup);
+            Assert.Contains(@$"<i class=""notranslate rzi"">{value}</i>", component.Markup);
         }
 
         [Fact]
@@ -119,11 +119,11 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AllowCollapse, true));
 
-            Assert.Contains(@"<span class=""rzi rzi-minus""></span>", component.Markup);
+            Assert.Contains(@"<span class=""notranslate rzi rzi-minus""></span>", component.Markup);
 
             component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.Collapsed, true));
 
-            Assert.Contains(@"<span class=""rzi rzi-plus""></span>", component.Markup);
+            Assert.Contains(@"<span class=""notranslate rzi rzi-plus""></span>", component.Markup);
         }
 
         [Fact]

Radzen.Blazor.Tests/PasswordTests.cs

@@ -119,13 +119,45 @@ namespace Radzen.Blazor.Tests
 
             var component = ctx.RenderComponent<RadzenPassword>();
 
-            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, false));
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", false));
 
             Assert.Contains(@$"autocomplete=""new-password""", component.Markup);
 
-            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, true));
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", true));
 
             Assert.Contains(@$"autocomplete=""on""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("autocomplete", "custom"));
+
+            Assert.Contains(@$"autocomplete=""custom""", component.Markup);
+        }
+
+        [Fact]
+        public void Password_Renders_TypedAutoCompleteParameter()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenPassword>();
+
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", false));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.On));
+
+            Assert.Contains(@$"autocomplete=""new-password""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.Off));
+
+            Assert.Contains(@$"autocomplete=""off""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.CurrentPassword));
+
+            Assert.Contains(@$"autocomplete=""{AutoCompleteType.CurrentPassword.GetAutoCompleteValue()}""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.NewPassword));
+
+            Assert.Contains(@$"autocomplete=""{AutoCompleteType.NewPassword.GetAutoCompleteValue()}""", component.Markup);
         }
 
         [Fact]

Radzen.Blazor.Tests/ProgressBarTests.cs

@@ -72,7 +72,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.Style, value));
 
-            Assert.Contains(@$"style=""{value}""", component.Markup);
+            Assert.Contains(@$"style=""--rz-progressbar-value: 0%;{value}""", component.Markup);
         }
 
         [Fact]
@@ -118,7 +118,7 @@ namespace Radzen.Blazor.Tests
                 parameters.Add<double>(p => p.Max, max);
             });
 
-            Assert.Contains(@$"style=""width: {Math.Min(value / max * 100, 100).ToInvariantString()}%;""", component.Markup);
+            Assert.Contains(@$"style=""--rz-progressbar-value: {Math.Min(value / max * 100, 100).ToInvariantString()}%;""", component.Markup);
         }
 
         [Fact]
@@ -129,18 +129,18 @@ namespace Radzen.Blazor.Tests
             var component = ctx.RenderComponent<RadzenProgressBar>();
 
             component.SetParametersAndRender(parameters=>parameters.Add(p=>p.ProgressBarStyle, ProgressBarStyle.Success));
-            Assert.Contains(@$"rz-progressbar-determinate-success", component.Markup);
+            Assert.Contains(@$"rz-progressbar-success", component.Markup);
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.ProgressBarStyle, ProgressBarStyle.Info));
-            Assert.Contains(@$"rz-progressbar-determinate-info", component.Markup);
+            Assert.Contains(@$"rz-progressbar-info", component.Markup);
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.ProgressBarStyle, ProgressBarStyle.Success));
             component.SetParametersAndRender(parameters => parameters.Add(p => p.Mode, ProgressBarMode.Indeterminate));
-            Assert.Contains(@$"rz-progressbar-indeterminate-success", component.Markup);
+            Assert.Contains(@$"rz-progressbar-success", component.Markup);
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.ProgressBarStyle, ProgressBarStyle.Info));
             component.SetParametersAndRender(parameters => parameters.Add(p => p.Mode, ProgressBarMode.Indeterminate));
-            Assert.Contains(@$"rz-progressbar-indeterminate-info", component.Markup);
+            Assert.Contains(@$"rz-progressbar-info", component.Markup);
         }
     }
 }

Radzen.Blazor.Tests/Radzen.Blazor.Tests.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>net7</TargetFramework>
+    <TargetFramework>net8</TargetFramework>
 
     <IsPackable>false</IsPackable>
   </PropertyGroup>

Radzen.Blazor.Tests/SliderTests.cs

@@ -39,7 +39,7 @@ namespace Radzen.Blazor.Tests
             component.SetParametersAndRender(parameters => parameters.Add<int>(p => p.Value, value));
 
             Assert.Contains(@$"style=""width: {Math.Round((value / max * 100)).ToInvariantString()}%;""", component.Markup);
-            Assert.Contains(@$"style=""left: {Math.Round((value / max * 100)).ToInvariantString()}%;""", component.Markup);
+            Assert.Contains(@$"style=""inset-inline-start: {Math.Round((value / max * 100)).ToInvariantString()}%;""", component.Markup);
         }
 
         [Fact]
@@ -55,9 +55,9 @@ namespace Radzen.Blazor.Tests
                 parameters.Add<IEnumerable<int>>(p => p.Value, new int[] { 4, 30 });
             });
 
-            Assert.Contains(@$"left: 4%", component.Markup);
-            Assert.Contains(@$"left: 30%", component.Markup);
-            Assert.Contains(@$"left: 4%; width: 26%;", component.Markup);
+            Assert.Contains(@$"inset-inline-start: 4%", component.Markup);
+            Assert.Contains(@$"inset-inline-start: 30%", component.Markup);
+            Assert.Contains(@$"inset-inline-start: 4%; width: 26%;", component.Markup);
         }
 
         [Fact]

Radzen.Blazor.Tests/SplitButtonTests.cs

@@ -1,4 +1,5 @@
 using Bunit;
+using Microsoft.AspNetCore.Components;
 using Xunit;
 
 namespace Radzen.Blazor.Tests
@@ -44,7 +45,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.Icon, icon));
 
-            Assert.Contains(@$"<i class=""rz-button-icon-left rzi"">{icon}</i>", component.Markup);
+            Assert.Contains(@$"<i class=""notranslate rz-button-icon-left rzi"">{icon}</i>", component.Markup);
         }
 
         [Fact]
@@ -59,10 +60,10 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => {
                 parameters.Add(p => p.Text, text);
-                parameters.Add(p => p.Icon, icon); 
+                parameters.Add(p => p.Icon, icon);
             });
 
-            Assert.Contains(@$"<i class=""rz-button-icon-left rzi"">{icon}</i>", component.Markup);
+            Assert.Contains(@$"<i class=""notranslate rz-button-icon-left rzi"">{icon}</i>", component.Markup);
             Assert.Contains(@$"<span class=""rz-button-text"">{text}</span>", component.Markup);
         }
 
@@ -77,7 +78,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.Image, image));
 
-            Assert.Contains(@$"<img class=""rz-button-icon-left rzi"" src=""{image}"" />", component.Markup);
+            Assert.Contains(@$"<img class=""notranslate rz-button-icon-left rzi"" src=""{image}"" alt=""image"" />", component.Markup);
         }
 
         [Fact]
@@ -93,12 +94,29 @@ namespace Radzen.Blazor.Tests
             component.SetParametersAndRender(parameters => {
                 parameters.Add(p => p.Text, text);
                 parameters.Add(p => p.Image, image);
+                parameters.Add(p => p.ImageAlternateText, text);
             });
 
-            Assert.Contains(@$"<img class=""rz-button-icon-left rzi"" src=""{image}"" />", component.Markup);
+            Assert.Contains(@$"<img class=""notranslate rz-button-icon-left rzi"" src=""{image}"" alt=""{text}"" />", component.Markup);
             Assert.Contains(@$"<span class=""rz-button-text"">{text}</span>", component.Markup);
         }
 
+        [Fact]
+        public void SplitButton_Renders_ButtonContent()
+        {
+            using var ctx = new TestContext();
+
+            RenderFragment buttonContent = (builder) => builder.AddMarkupContent(0, "<strong>Custom button content</strong>");
+
+            var text = "Test";
+            var component = ctx.RenderComponent<RadzenSplitButton>(parameters => parameters
+            .Add(p => p.ButtonContent, buttonContent)
+            .Add(p => p.Text, text));
+
+            Assert.Contains(@$"<strong>Custom button content</strong>", component.Markup);
+            Assert.DoesNotContain(@$"<span class=""rz-button-text"">{text}</span>", component.Markup);
+        }
+
         [Fact]
         public void SplitButton_Renders_DisabledParameter()
         {

Radzen.Blazor.Tests/SwitchTests.cs

@@ -41,7 +41,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.Style, value));
 
-            Assert.Contains(@$"style=""outline: 0 none;{value}""", component.Markup);
+            Assert.Contains(@$"style=""{value}""", component.Markup);
         }
 
         [Fact]

Radzen.Blazor.Tests/Temperature.cs

@@ -0,0 +1,35 @@
+using System;
+using System.Globalization;
+
+namespace Radzen.Blazor.Tests;
+
+public record struct Temperature(decimal DegreesCelsius)
+    : IFormattable
+{
+    public decimal Celsius => DegreesCelsius;
+    public decimal Fahrenheit => DegreesCelsius * 9 / 5 + 32;
+    public decimal Kelvin => DegreesCelsius + 273.15m;
+
+    public override string ToString() => ToString("G");
+    public string ToString(string format) => ToString(format, CultureInfo.CurrentCulture);
+
+    public string ToString(string format, IFormatProvider provider)
+    {
+        provider ??= CultureInfo.CurrentCulture;
+        if (string.IsNullOrEmpty(format))
+            format = "G";
+
+        switch (format.ToUpperInvariant())
+        {
+            case "G":
+            case "C":
+                return $"{Celsius.ToString("F2", provider)} °C";
+            case "F":
+                return $"{Fahrenheit.ToString("F2", provider)} °F";
+            case "K":
+                return $"{Kelvin.ToString("F2", provider)} K";
+            default:
+                throw new FormatException($"The {format} format string is not supported.");
+        }
+    }
+}

Radzen.Blazor.Tests/TextBoxTests.cs

@@ -119,13 +119,54 @@ namespace Radzen.Blazor.Tests
 
             var component = ctx.RenderComponent<RadzenTextBox>();
 
-            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, false));
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", false));
+
+            Assert.Contains(@$"autocomplete=""off""", component.Markup);
+            Assert.Contains(@$"aria-autocomplete=""none""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", true));
+
+            Assert.Contains(@$"autocomplete=""on""", component.Markup);
+            Assert.DoesNotContain(@$"aria-autocomplete", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("autocomplete", "custom"));
+
+            Assert.Contains(@$"autocomplete=""custom""", component.Markup);
+            Assert.DoesNotContain(@$"aria-autocomplete", component.Markup);
+
+            component.Instance.DefaultAutoCompleteAttribute = "autocomplete-custom";
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", false));
+
+            Assert.Contains(@$"autocomplete=""autocomplete-custom""", component.Markup);
+            Assert.Contains(@$"aria-autocomplete=""none""", component.Markup);
+        }
+
+        [Fact]
+        public void TextBox_Renders_TypedAutoCompleteParameter()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenTextBox>();
+
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", false));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.On));
 
             Assert.Contains(@$"autocomplete=""off""", component.Markup);
 
-            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, true));
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.Off));
 
-            Assert.Contains(@$"autocomplete=""on""", component.Markup);
+            Assert.Contains(@$"autocomplete=""off""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.AdditionalName));
+
+            Assert.Contains(@$"autocomplete=""{AutoCompleteType.AdditionalName.GetAutoCompleteValue()}""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.AddUnmatched("AutoComplete", true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.FamilyName));
+
+            Assert.Contains(@$"autocomplete=""{AutoCompleteType.FamilyName.GetAutoCompleteValue()}""", component.Markup);
         }
 
         [Fact]

Radzen.Blazor/AutoCompleteType.cs

@@ -0,0 +1,138 @@
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// The <c>AutomCompleteType</c> is a string-associated enum of
+    /// browser-supported autocomplete attribute values.
+    /// </summary>
+    /// <remarks>
+    /// This class lists the autocomplete attirbute options allowing
+    /// developers to provide the browser with guidance on how to pre-populate
+    /// the form fields. It is a class rather than a simpler enum to associate
+    /// each option with the string the browser expects. For more information
+    /// please review the list of options (https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
+    /// and the spec (https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
+    /// </remarks>
+    public enum AutoCompleteType
+    {
+        /// <summary>Autocomplete is disabled. </summary>
+        Off,
+        /// <summary>Autocomplete is enabled. The browser chooses what values to suggest. </summary>
+        On,
+        /// <summary>The field expects the value to be a person's full name.</summary>
+        Name,
+        /// <summary>The prefix or title, such as "Mrs.", "Mr.", "Miss", "Ms.", "Dr." etc.</summary>
+        HonorificPrefix,
+        /// <summary>The given (or "first") name.</summary>
+        GivenName,
+        /// <summary>The middle name.</summary>
+        AdditionalName,
+        /// <summary>The family (or "last") name.</summary>
+        FamilyName,
+        /// <summary>The suffix, such as "Jr.", "B.Sc.", "PhD.", "MBASW", etc.</summary>
+        HonorificSuffix,
+        /// <summary>The nickname or handle.</summary>
+        Nickname,
+        /// <summary>The email address.</summary>
+        Email,
+        /// <summary>The username or account name.</summary>
+        Username,
+        /// <summary>A new password. When creating a new account or changing passwords.</summary>
+        NewPassword,
+        /// <summary>A current password. When filling in an existing password.</summary>
+        CurrentPassword,
+        /// <summary>A one-time code used for verifying user identity.</summary>
+        OneTimeCode,
+        /// <summary>A job title, or the title a person has within an organization, such as "Senior Technical Writer", "President", or "Assistant Troop Leader".</summary>
+        OrganizationTitle,
+        /// <summary>A company, business, or organization name.</summary>
+        Organization,
+        /// <summary>A street address. Use multiple address lines when more space is needed.</summary>
+        StreetAddress,
+        /// <summary>The line 1 of a street address. For example, "1234 Main Street".</summary>
+        AddressLine1,
+        /// <summary>The line 2 of a street address. For example, "Apartment 123".</summary>
+        AddressLine2,
+        /// <summary>The line 3 of a street address. For example, "c/o Jane Doe".</summary>
+        AddressLine3,
+        /// <summary>The city or locality.</summary>
+        AddressLevel1,
+        /// <summary>The state, province, prefecture, or region.</summary>
+        AddressLevel2,
+        /// <summary>The zip code or postal code.</summary>
+        AddressLevel3,
+        /// <summary>The country name.</summary>
+        AddressLevel4,
+        /// <summary>The country code.</summary>
+        Country,
+        /// <summary>The country name.</summary>
+        CountryName,
+        /// <summary>The postal code.</summary>
+        PostalCode,
+        /// <summary>The full name as printed on or associated with a payment instrument such as a credit card.</summary>
+        CcName,
+        /// <summary>The given (or "first") name as printed on or associated with a payment instrument such as a credit card.</summary>
+        CcGivenName,
+        /// <summary>The middle name as printed on or associated with a payment instrument such as a credit card.</summary>
+        CcAdditionalName,
+        /// <summary>The family (or "last") name as printed on or associated with a payment instrument such as a credit card.</summary>
+        CcFamilyName,
+        /// <summary>A credit card number or other number identifying a payment method, such as an account number.</summary>
+        CcNumber,
+        /// <summary>A payment method expiration date, typically in the form "MM/YY" or "MM/YYYY".</summary>
+        CcExp,
+        /// <summary>A payment method expiration month, typically in numeric form (MM).</summary>
+        CcExpMonth,
+        /// <summary>A payment method expiration year, typically in numeric form (YYYY).</summary>
+        CcExpYear,
+        /// <summary>The security code for your payment method, such as the CVV code.</summary>
+        CcCsc,
+        /// <summary>The type of payment instrument, such as "Visa", "Master Card", "Checking", or "Savings".</summary>
+        CcType,
+        /// <summary>The currency in which the transaction was completed. Use the ISO 4217 currency codes, such as "USD" for the US dollar.</summary>
+        TransactionCurrency,
+        /// <summary>The amount, in the currency specified by the transaction currency attribute, of the transaction completed.</summary>
+        TransactionAmount,
+        /// <summary>The language in which the transaction was completed. Use the relevant BCP 47 language tag.</summary>
+        Language,
+        /// <summary>A birth date, as a full date.</summary>
+        Bday,
+        /// <summary>The day of the month of a birth date.</summary>
+        BdayDay,
+        /// <summary>The month of the year of a birth date.</summary>
+        BdayMonth,
+        /// <summary>The year of a birth date.</summary>
+        BdayYear,
+        /// <summary>A gender identity (such as "Female", "Fa'afafine", "Hijra", "Male", "Nonbinary"), as freeform text without newlines.</summary>
+        Sex,
+        /// <summary>A full telephone number, including the country code. </summary>
+        Tel,
+        /// <summary>A country code, such as "1" for the United States, Canada, and other areas in North America and parts of the Caribbean.</summary>
+        TelCountryCode,
+        /// <summary>The entire phone number without the country code component, including a country-internal prefix.</summary>
+        TelNational,
+        /// <summary>The area code, with any country-internal prefix applied if appropriate.</summary>
+        TelAreaCode,
+        /// <summary>The phone number without the country or area code.</summary>
+        TelLocal,
+        /// <summary>The extension number, if applicable.</summary>
+        TelExtension,
+        /// <summary>A URL for an instant messaging protocol endpoint, such as "xmpp:username@example.net".</summary>
+        Impp,
+        /// <summary>A URL, such as a home page or company website address as appropriate given the context of the other fields in the form.</summary>
+        Url,
+        /// <summary>The URL of an image representing the person, company, or contact information given in the other fields in the form.</summary>
+        Photo,
+        /// <summary>State.</summary>
+        State,
+        /// <summary>Province.</summary>
+        Province,
+        /// <summary>Zip code.</summary>
+        ZipCode,
+        /// <summary>Firs name.</summary>
+        FirstName,
+        /// <summary>Middle name.</summary>
+        MiddleName,
+        /// <summary>Last name.</summary>
+        LastName,
+    }
+}

Radzen.Blazor/CartesianSeries.cs

@@ -5,7 +5,7 @@ using System.Linq;
 using System.Linq.Dynamic.Core;
 using Radzen.Blazor.Rendering;
 using System.Threading.Tasks;
-using System.Collections;
+using System.Net.Mime;
 using Microsoft.AspNetCore.Components.Rendering;
 
 namespace Radzen.Blazor
@@ -16,22 +16,34 @@ namespace Radzen.Blazor
     /// <typeparam name="TItem">The type of the series data.</typeparam>
     public abstract class CartesianSeries<TItem> : RadzenChartComponentBase, IChartSeries, IDisposable
     {
+        /// <summary>
+        /// Cache for the value returned by <see cref="Category"/> when that value is only dependent on
+        /// <see cref="CategoryProperty"/>.
+        /// </summary>
+        Func<TItem, double> categoryPropertyCache;
+
         /// <summary>
         /// Creates a getter function that returns a value from the specified category scale for the specified data item.
         /// </summary>
         /// <param name="scale">The scale.</param>
         internal Func<TItem, double> Category(ScaleBase scale)
         {
+            if (categoryPropertyCache != null)
+            {
+                return categoryPropertyCache;
+            }
+
             if (IsNumeric(CategoryProperty))
             {
-                return PropertyAccess.Getter<TItem, double>(CategoryProperty);
+                categoryPropertyCache = PropertyAccess.Getter<TItem, double>(CategoryProperty);
+                return categoryPropertyCache;
             }
 
             if (IsDate(CategoryProperty))
             {
                 var category = PropertyAccess.Getter<TItem, DateTime>(CategoryProperty);
-
-                return (item) => category(item).Ticks;
+                categoryPropertyCache = (item) => category(item).Ticks;
+                return categoryPropertyCache;
             }
 
             if (scale is OrdinalScale ordinal)
@@ -80,6 +92,12 @@ namespace Radzen.Blazor
                 throw new ArgumentException($"Property {propertyName} does not exist");
             }
 
+#if NET6_0_OR_GREATER
+            if(PropertyAccess.IsDateOnly(property))
+            {
+                return false;
+            }
+#endif
             return PropertyAccess.IsDate(property);
         }
 
@@ -351,6 +369,7 @@ namespace Radzen.Blazor
             var shouldRefresh = parameters.DidParameterChange(nameof(Data), Data);
             var visibleChanged = parameters.DidParameterChange(nameof(Visible), Visible);
             var hiddenChanged = parameters.DidParameterChange(nameof(Hidden), Hidden);
+            var categoryChanged = parameters.DidParameterChange(nameof(CategoryProperty), CategoryProperty);
 
             await base.SetParametersAsync(parameters);
 
@@ -366,6 +385,11 @@ namespace Radzen.Blazor
                 shouldRefresh = true;
             }
 
+            if (categoryChanged || shouldRefresh)
+            {
+                categoryPropertyCache = null;
+            }
+
             if (Data != null && Data.Count() != Items.Count)
             {
                 shouldRefresh = true;
@@ -386,7 +410,7 @@ namespace Radzen.Blazor
 
                     if (IsDate(CategoryProperty) || IsNumeric(CategoryProperty))
                     {
-                        Items = Items.AsQueryable().OrderBy(CategoryProperty).ToList();
+                        Items = Items.AsQueryable().OrderBy(DynamicLinqCustomTypeProvider.ParsingConfig, CategoryProperty).ToList();
                     }
                 }
 
@@ -454,7 +478,7 @@ namespace Radzen.Blazor
         }
 
         /// <inheritdoc />
-        public virtual RenderFragment RenderTooltip(object data, double marginLeft, double marginTop)
+        public virtual RenderFragment RenderTooltip(object data, double marginLeft, double marginTop, double chartHeight)
         {
             var item = (TItem)data;
 
@@ -463,18 +487,62 @@ namespace Radzen.Blazor
 
             return builder =>
             {
-                builder.OpenComponent<ChartTooltip>(0);
-                builder.AddAttribute(1, nameof(ChartTooltip.X), x + marginLeft);
-                builder.AddAttribute(2, nameof(ChartTooltip.Y), y + marginTop);
 
-                builder.AddAttribute(3, nameof(ChartTooltip.ChildContent), TooltipTemplate == null ? null : TooltipTemplate(item));
+                if (Chart.Tooltip.Shared)
+                {
+                    var category = PropertyAccess.GetValue(item, CategoryProperty);
+                    builder.OpenComponent<ChartSharedTooltip>(0);
+                    builder.AddAttribute(1, nameof(ChartSharedTooltip.X), x + marginLeft);
+                    builder.AddAttribute(2, nameof(ChartSharedTooltip.Y), y + marginTop);
+                    builder.AddAttribute(3, nameof(ChartSharedTooltip.Class), TooltipClass(item));
+                    builder.AddAttribute(4, nameof(ChartSharedTooltip.Title), TooltipTitle(item));
+                    builder.AddAttribute(4, nameof(ChartSharedTooltip.ChildContent), RenderSharedTooltipItems(category));
+                    builder.CloseComponent();
+                }
+                else
+                {
+                    builder.OpenComponent<ChartTooltip>(0);
+                    builder.AddAttribute(1, nameof(ChartTooltip.X), x + marginLeft);
+                    builder.AddAttribute(2, nameof(ChartTooltip.Y), y + marginTop);
+                    builder.AddAttribute(3, nameof(ChartTooltip.ChildContent), TooltipTemplate?.Invoke(item));
+                    builder.AddAttribute(4, nameof(ChartTooltip.Title), TooltipTitle(item));
+                    builder.AddAttribute(5, nameof(ChartTooltip.Label), TooltipLabel(item));
+                    builder.AddAttribute(6, nameof(ChartTooltip.Value), TooltipValue(item));
+                    builder.AddAttribute(7, nameof(ChartTooltip.Class), TooltipClass(item));
+                    builder.AddAttribute(8, nameof(ChartTooltip.Style), TooltipStyle(item));
+                    builder.CloseComponent();
+                }
+            };
+        }
 
-                builder.AddAttribute(4, nameof(ChartTooltip.Title), TooltipTitle(item));
-                builder.AddAttribute(5, nameof(ChartTooltip.Label), TooltipLabel(item));
-                builder.AddAttribute(6, nameof(ChartTooltip.Value), TooltipValue(item));
-                builder.AddAttribute(7, nameof(ChartTooltip.Class), TooltipClass(item));
-                builder.AddAttribute(8, nameof(ChartTooltip.Style), TooltipStyle(item));
-                builder.CloseComponent();
+        private RenderFragment RenderSharedTooltipItems(object category)
+        {
+            return builder =>
+            {
+                var visibleSeries = Chart.Series.Where(s => s.Visible).ToList();
+
+                foreach (var series in visibleSeries)
+                {
+                    builder.AddContent(1, series.RenderSharedTooltipItem(category));
+                }
+            };
+        }
+
+        /// <inheritdoc />
+        public virtual RenderFragment RenderSharedTooltipItem(object category)
+        {
+            return builder =>
+            {
+                var item = Items.FirstOrDefault(i => object.Equals(PropertyAccess.GetValue(i, CategoryProperty), category));
+
+                if (item != null)
+                {
+                    builder.OpenComponent<ChartSharedTooltipItem>(0);
+                    builder.AddAttribute(1, nameof(ChartSharedTooltipItem.Value), TooltipValue(item));
+                    builder.AddAttribute(2, nameof(ChartSharedTooltipItem.ChildContent), TooltipTemplate?.Invoke(item));
+                    builder.AddAttribute(3, nameof(ChartSharedTooltipItem.LegendItem), RenderLegendItem(false));
+                    builder.CloseComponent();
+                }
             };
         }
 
@@ -498,6 +566,14 @@ namespace Radzen.Blazor
 
         /// <inheritdoc />
         public virtual RenderFragment RenderLegendItem()
+        {
+            return RenderLegendItem(true);
+        }
+
+        /// <summary>
+        /// Renders the legend item for this series.
+        /// </summary>
+        protected virtual RenderFragment RenderLegendItem(bool clickable)
         {
             var style = new List<string>();
 
@@ -516,6 +592,7 @@ namespace Radzen.Blazor
                 builder.AddAttribute(5, nameof(LegendItem.MarkerSize), MarkerSize);
                 builder.AddAttribute(6, nameof(LegendItem.Text), GetTitle());
                 builder.AddAttribute(7, nameof(LegendItem.Click), EventCallback.Factory.Create(this, OnLegendItemClick));
+                builder.AddAttribute(8, nameof(LegendItem.Clickable), clickable);
                 builder.CloseComponent();
             };
         }
@@ -545,13 +622,13 @@ namespace Radzen.Blazor
         /// <inheritdoc />
         public double GetMean()
         {
-            return Data.Select(e => Value(e)).Average();
+            return Data.Select(e => Value(e)).DefaultIfEmpty(double.NaN).Average();
         }
 
         /// <inheritdoc />
         public double GetMode()
         {
-            return Data.GroupBy(e => Value(e)).Select(g => new { Value = g.Key, Count = g.Count() }).OrderByDescending(e => e.Count).FirstOrDefault().Value;
+            return Data.Any() ? Data.GroupBy(e => Value(e)).Select(g => new { Value = g.Key, Count = g.Count() }).OrderByDescending(e => e.Count).FirstOrDefault().Value : double.NaN;
         }
 
         /// <summary>
@@ -559,35 +636,38 @@ namespace Radzen.Blazor
         /// </summary>
         public (double a, double b) GetTrend()
         {
-            double a, b;
+            double a = double.NaN, b = double.NaN;
 
-            Func<TItem, double> X;
-            Func<TItem, double> Y;
-            if (Chart.ShouldInvertAxes())
+            if (Data.Any())
             {
-                X = e => Chart.CategoryScale.Scale(Value(e));
-                Y = e => Chart.ValueScale.Scale(Category(Chart.ValueScale)(e));
-            }
-            else
-            {
-                X = e => Chart.CategoryScale.Scale(Category(Chart.CategoryScale)(e));
-                Y = e => Chart.ValueScale.Scale(Value(e));
-            }
+                Func<TItem, double> X;
+                Func<TItem, double> Y;
+                if (Chart.ShouldInvertAxes())
+                {
+                    X = e => Chart.CategoryScale.Scale(Value(e));
+                    Y = e => Chart.ValueScale.Scale(Category(Chart.ValueScale)(e));
+                }
+                else
+                {
+                    X = e => Chart.CategoryScale.Scale(Category(Chart.CategoryScale)(e));
+                    Y = e => Chart.ValueScale.Scale(Value(e));
+                }
 
-            var avgX = Data.Select(e => X(e)).Average();
-            var avgY = Data.Select(e => Y(e)).Average();
-            var sumXY = Data.Sum(e => (X(e) - avgX) * (Y(e) - avgY));         
-            if (Chart.ShouldInvertAxes())
-            {
-                var sumYSq = Data.Sum(e => (Y(e) - avgY) * (Y(e) - avgY));
-                b = sumXY / sumYSq;
-                a = avgX - b * avgY;
-            }
-            else
-            {
-                var sumXSq = Data.Sum(e => (X(e) - avgX) * (X(e) - avgX));
-                b = sumXY / sumXSq;
-                a = avgY - b * avgX;
+                var avgX = Data.Select(e => X(e)).Average();
+                var avgY = Data.Select(e => Y(e)).Average();
+                var sumXY = Data.Sum(e => (X(e) - avgX) * (Y(e) - avgY));
+                if (Chart.ShouldInvertAxes())
+                {
+                    var sumYSq = Data.Sum(e => (Y(e) - avgY) * (Y(e) - avgY));
+                    b = sumXY / sumYSq;
+                    a = avgX - b * avgY;
+                }
+                else
+                {
+                    var sumXSq = Data.Sum(e => (X(e) - avgX) * (X(e) - avgX));
+                    b = sumXY / sumXSq;
+                    a = avgY - b * avgX;
+                }
             }
 
             return (a, b);
@@ -669,29 +749,32 @@ namespace Radzen.Blazor
         }
 
         /// <inheritdoc />
-        public virtual object DataAt(double x, double y)
+        public virtual (object, Point) DataAt(double x, double y)
         {
             if (Items.Any())
             {
-                return Items.Select(item =>
+                var retObject = Items.Select(item =>
                 {
                     var distance = Math.Abs(TooltipX(item) - x);
                     return new { Item = item, Distance = distance };
                 }).Aggregate((a, b) => a.Distance < b.Distance ? a : b).Item;
+
+                return (retObject,
+                    new Point() { X = TooltipX(retObject), Y = TooltipY(retObject)});
             }
 
-            return null;
+            return (null, null);
         }
 
         /// <inheritdoc />
         public virtual IEnumerable<ChartDataLabel> GetDataLabels(double offsetX, double offsetY)
         {
             var list = new List<ChartDataLabel>();
-            
+
             foreach (var d in Data)
             {
-                list.Add(new ChartDataLabel 
-                { 
+                list.Add(new ChartDataLabel
+                {
                     Position = new Point { X = TooltipX(d) + offsetX, Y = TooltipY(d) + offsetY },
                     TextAnchor = "middle",
                     Text = Chart.ValueAxis.Format(Chart.ValueScale, Value(d))
@@ -707,16 +790,25 @@ namespace Radzen.Blazor
         /// <param name="index">The index.</param>
         /// <param name="colors">The colors.</param>
         /// <param name="defaultValue">The default value.</param>
-        protected string PickColor(int index, IEnumerable<string> colors, string defaultValue = null)
+        /// <param name="colorRange">The color range value.</param>
+        /// <param name="value">The value of the item.</param>
+        protected string PickColor(int index, IEnumerable<string> colors, string defaultValue = null, IList<SeriesColorRange> colorRange = null, double value = 0.0)
         {
-            if (colors == null || !colors.Any())
+            if (colorRange != null)
             {
-                return defaultValue;
+                var result = colorRange.Where(r => r.Min <= value && r.Max >= value).FirstOrDefault<SeriesColorRange>();
+                return result != null ? result.Color : defaultValue;
             }
+            else
+            {
+                if (colors == null || !colors.Any())
+                {
+                    return defaultValue;
+                }
 
-            return colors.ElementAt(index % colors.Count());
+                return colors.ElementAt(index % colors.Count());
+            }
         }
-
         /// <inheritdoc />
         public void Dispose()
         {

Radzen.Blazor/ContextMenuService.cs

@@ -199,5 +199,30 @@ namespace Radzen
         /// </summary>
         /// <value>The value.</value>
         public object Value { get; set; }
+        /// <summary>
+        /// Gets or sets the icon.
+        /// </summary>
+        /// <value>The icon.</value>
+        public string Icon { get; set; }
+        /// <summary>
+        /// Gets or sets the icon color.
+        /// </summary>
+        /// <value>The icon color.</value>
+        public string IconColor { get; set; }
+        /// <summary>
+        /// Gets or sets the image.
+        /// </summary>
+        /// <value>The image.</value>
+        public string Image { get; set; }
+        /// <summary>
+        /// Gets or sets the image style.
+        /// </summary>
+        /// <value>The image style.</value>
+        public string ImageStyle { get; set; }
+        /// <summary>
+        /// Gets a value indicating whether this instance is disabled.
+        /// </summary>
+        /// <value><c>true</c> if this instance is disabled; otherwise, <c>false</c>.</value>
+        public bool Disabled { get; set; }
     }
 }

Radzen.Blazor/CookieThemeService.cs

@@ -0,0 +1,110 @@
+using System;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Options;
+using Microsoft.JSInterop;
+
+namespace Radzen
+{
+    /// <summary>
+    /// Options for the <see cref="CookieThemeService" />.
+    /// </summary>
+    public class CookieThemeServiceOptions
+    {
+        /// <summary>
+        /// Gets or sets the cookie name.
+        /// </summary>
+        public string Name { get; set; } = "Theme";
+
+        /// <summary>
+        /// Gets or sets the cookie duration.
+        /// </summary>
+        public TimeSpan Duration { get; set; } = TimeSpan.FromDays(365);
+    }
+
+    /// <summary>
+    /// Persist the current theme in a cookie. Requires <see cref="ThemeService" /> to be registered in the DI container.
+    /// </summary>
+    public class CookieThemeService
+    {
+        private readonly CookieThemeServiceOptions options;
+        private readonly IJSRuntime jsRuntime;
+        private readonly ThemeService themeService;
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="CookieThemeService" /> class.
+        /// </summary>
+        public CookieThemeService(IJSRuntime jsRuntime, ThemeService themeService, IOptions<CookieThemeServiceOptions> options)
+        {
+            this.jsRuntime = jsRuntime;
+            this.themeService = themeService;
+            this.options = options.Value;
+
+            themeService.ThemeChanged += OnThemeChanged;
+
+            _ = InitializeAsync();
+        }
+
+        private async Task InitializeAsync()
+        {
+            try
+            {
+                var cookies = await jsRuntime.InvokeAsync<string>("eval", "document.cookie");
+
+                var themeCookie = cookies?.Split("; ").Select(x =>
+                {
+                    var parts = x.Split("=");
+
+                    return (Key: parts[0], Value: parts[1]);
+                })
+                .FirstOrDefault(x => x.Key == options.Name);
+
+                var theme = themeCookie?.Value;
+
+                if (!string.IsNullOrEmpty(theme) && themeService.Theme != theme)
+                {
+                    themeService.SetTheme(theme);
+                }
+            }
+            catch (InvalidOperationException)
+            {
+            }
+        }
+
+        private void OnThemeChanged()
+        {
+            var expiration = DateTime.Now.Add(options.Duration);
+
+            _ = jsRuntime.InvokeVoidAsync("eval", $"document.cookie = \"{options.Name}={themeService.Theme}; expires={expiration:R}; path=/\"");
+        }
+    }
+
+    /// <summary>
+    /// Extension methods to register the <see cref="CookieThemeService" />.
+    /// </summary>
+    public static class CookieThemeServiceCollectionExtensions
+    {
+        /// <summary>
+        /// Adds the <see cref="CookieThemeService" /> to the service collection.
+        /// </summary>
+        public static IServiceCollection AddRadzenCookieThemeService(this IServiceCollection services)
+        {
+            services.AddOptions<CookieThemeServiceOptions>();
+            services.AddScoped<CookieThemeService>();
+
+            return services;
+        }
+
+        /// <summary>
+        /// Adds the <see cref="CookieThemeService" /> to the service collection with the specified configuration.
+        /// </summary>
+        public static IServiceCollection AddRadzenCookieThemeService(this IServiceCollection services, Action<CookieThemeServiceOptions> configure)
+        {
+            services.Configure(configure);
+            services.AddScoped<CookieThemeService>();
+
+            return services;
+        }
+    }
+}

Radzen.Blazor/DataBoundFormComponent.cs

@@ -1,14 +1,16 @@
-using System;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Forms;
+using Microsoft.AspNetCore.Components.Web;
+using Radzen.Blazor;
+using Radzen.Blazor.Rendering;
+
+using System;
 using System.Collections;
 using System.Collections.Generic;
 using System.Linq;
 using System.Linq.Dynamic.Core;
 using System.Linq.Expressions;
 using System.Threading.Tasks;
-using Microsoft.AspNetCore.Components;
-using Microsoft.AspNetCore.Components.Forms;
-using Radzen.Blazor;
-using Radzen.Blazor.Rendering;
 
 namespace Radzen
 {
@@ -213,6 +215,32 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Gets or sets the search text
+        /// </summary>
+        [Parameter]
+        public string SearchText
+        {
+            get
+            {
+                return searchText;
+            }
+            set
+            {
+                if (searchText != value)
+                {
+                    searchText = value;
+                }
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the search text changed.
+        /// </summary>
+        /// <value>The search text changed.</value>
+        [Parameter]
+        public EventCallback<string> SearchTextChanged { get; set; }
+
         /// <summary>
         /// The search text
         /// </summary>
@@ -250,7 +278,7 @@ namespace Radzen
 
                         query.Add($"{Enum.GetName(typeof(StringFilterOperator), FilterOperator)}(@0)");
 
-                        _view = Query.Where(String.Join(".", query), ignoreCase ? searchText.ToLower() : searchText);
+                        _view = Query.Where(DynamicLinqCustomTypeProvider.ParsingConfig, string.Join(".", query), ignoreCase ? searchText.ToLower() : searchText);
                     }
                     else
                     {
@@ -288,20 +316,35 @@ namespace Radzen
         /// <returns>A Task representing the asynchronous operation.</returns>
         public override async Task SetParametersAsync(ParameterView parameters)
         {
+            var searchTextChanged = parameters.DidParameterChange(nameof(SearchText), SearchText);
+            if (searchTextChanged)
+            {
+                searchText = parameters.GetValueOrDefault<string>(SearchText);
+            }
+
             var dataChanged = parameters.DidParameterChange(nameof(Data), Data);
+
             if (dataChanged)
             {
                 await OnDataChanged();
             }
 
+            var disabledChanged = parameters.DidParameterChange(nameof(Disabled), Disabled);
+
             var result = base.SetParametersAsync(parameters);
 
             if (EditContext != null && ValueExpression != null && FieldIdentifier.Model != EditContext.Model)
             {
                 FieldIdentifier = FieldIdentifier.Create(ValueExpression);
+                EditContext.OnValidationStateChanged -= ValidationStateChanged;
                 EditContext.OnValidationStateChanged += ValidationStateChanged;
             }
 
+            if (disabledChanged)
+            {
+                FormFieldContext?.DisabledChanged(Disabled);
+            }
+
             await result;
         }
 
@@ -334,7 +377,7 @@ namespace Radzen
         /// Gets the value.
         /// </summary>
         /// <returns>System.Object.</returns>
-        public object GetValue()
+        public virtual object GetValue()
         {
             return Value;
         }
@@ -347,6 +390,35 @@ namespace Radzen
         /// <returns>ClassList.</returns>
         protected ClassList GetClassList(string className) => ClassList.Create(className)
                                                                        .AddDisabled(Disabled)
-                                                                       .Add(FieldIdentifier, EditContext);
+                                                                       .Add(FieldIdentifier, EditContext)
+                                                                       .Add("rz-state-empty", !HasValue);
+
+        /// <inheritdoc/>
+        public virtual async ValueTask FocusAsync()
+        {
+            await Element.FocusAsync();
+        }
+
+        /// <summary> Provides support for RadzenFormField integration. </summary>
+        [CascadingParameter]
+        public IFormFieldContext FormFieldContext { get; set; }
+
+        /// <summary> Gets the current placeholder. Returns empty string if this component is inside a RadzenFormField.</summary>
+        protected string CurrentPlaceholder => FormFieldContext?.AllowFloatingLabel == true ? " " : Placeholder;
+
+        /// <summary>
+        /// Handles the <see cref="E:ContextMenu" /> event.
+        /// </summary>
+        /// <param name="args">The <see cref="MouseEventArgs"/> instance containing the event data.</param>
+        /// <returns>Task.</returns>
+        public override Task OnContextMenu(MouseEventArgs args)
+        {
+            if (!Disabled)
+            {
+                return base.OnContextMenu(args);
+            }
+
+            return Task.CompletedTask;
+        }
     }
 }

Radzen.Blazor/DialogService.cs

@@ -2,6 +2,7 @@
 using Microsoft.JSInterop;
 using System;
 using System.Collections.Generic;
+using System.Drawing;
 using System.Linq;
 using System.Threading.Tasks;
 
@@ -24,7 +25,7 @@ namespace Radzen
     ///          <div class="row">
     ///              <div class="col-md-12">
     ///                  <RadzenButton Text="Ok" Click="() => ds.Close(true)" Style="margin-bottom: 10px; width: 150px" />
-    ///                  <RadzenButton Text="Cancel" Click="() => ds.Close(false)" ButtonStyle="ButtonStyle.Secondary"  Style="margin-bottom: 10px; width: 150px"/>
+    ///                  <RadzenButton Text="Cancel" Click="() => ds.Close(false)" ButtonStyle="ButtonStyle.Base"  Style="margin-bottom: 10px; width: 150px"/>
     ///                  <RadzenButton Text="Refresh" Click="(() => { orderID = 10249; ds.Refresh(); })" ButtonStyle="ButtonStyle.Info"  Style="margin-bottom: 10px; width: 150px"/>
     ///                  Order ID: @orderID
     ///              </div>
@@ -76,10 +77,15 @@ namespace Radzen
 
         private void UriHelper_OnLocationChanged(object sender, Microsoft.AspNetCore.Components.Routing.LocationChangedEventArgs e)
         {
-            if (dialogs.Count > 0)
+            while (dialogs.Any())
             {
                 Close();
             }
+
+            if (_sideDialogTask?.Task.IsCompleted == false)
+            {
+                CloseSide();
+            }
         }
 
         /// <summary>
@@ -97,6 +103,16 @@ namespace Radzen
         /// </summary>
         public event Action<string, Type, Dictionary<string, object>, DialogOptions> OnOpen;
 
+        /// <summary>
+        /// Raises the Close event for the side dialog
+        /// </summary>
+        public event Action<dynamic> OnSideClose;
+
+        /// <summary>
+        /// Raises the Open event for the side dialog
+        /// </summary>
+        public event Action<Type, Dictionary<string, object>, SideDialogOptions> OnSideOpen;
+
         /// <summary>
         /// Opens a dialog with the specified arguments.
         /// </summary>
@@ -104,7 +120,7 @@ namespace Radzen
         /// <param name="title">The text displayed in the title bar of the dialog.</param>
         /// <param name="parameters">The dialog parameters. Passed as property values of <typeparamref name="T" />.</param>
         /// <param name="options">The dialog options.</param>
-        public void Open<T>(string title, Dictionary<string, object> parameters = null, DialogOptions options = null) where T : ComponentBase
+        public virtual void Open<T>(string title, Dictionary<string, object> parameters = null, DialogOptions options = null) where T : ComponentBase
         {
             OpenDialog<T>(title, parameters, options);
         }
@@ -121,6 +137,7 @@ namespace Radzen
         /// The tasks
         /// </summary>
         protected List<TaskCompletionSource<dynamic>> tasks = new List<TaskCompletionSource<dynamic>>();
+        private TaskCompletionSource<dynamic> _sideDialogTask;
 
         /// <summary>
         /// Opens a dialog with the specified arguments.
@@ -130,7 +147,7 @@ namespace Radzen
         /// <param name="parameters">The dialog parameters. Passed as property values of <typeparamref name="T" />.</param>
         /// <param name="options">The dialog options.</param>
         /// <returns>The value passed as argument to <see cref="Close" />.</returns>
-        public Task<dynamic> OpenAsync<T>(string title, Dictionary<string, object> parameters = null, DialogOptions options = null) where T : ComponentBase
+        public virtual Task<dynamic> OpenAsync<T>(string title, Dictionary<string, object> parameters = null, DialogOptions options = null) where T : ComponentBase
         {
             var task = new TaskCompletionSource<dynamic>();
             tasks.Add(task);
@@ -140,6 +157,42 @@ namespace Radzen
             return task.Task;
         }
 
+        /// <summary>
+        /// Opens a side dialog with the specified arguments
+        /// </summary>
+        /// <typeparam name="T">The type of Blazor component which will be displayed in the side dialog.</typeparam>
+        /// <param name="title">The text displayed in the title bar of the side dialog.</param>
+        /// <param name="parameters">The dialog parameters. Passed as property values of <typeparamref name="T"/></param>
+        /// <param name="options">The side dialog options.</param>
+        /// <returns>A task that completes when the dialog is closed or a new one opened</returns>
+        public Task<dynamic> OpenSideAsync<T>(string title, Dictionary<string, object> parameters = null, SideDialogOptions options = null)
+            where T : ComponentBase
+        {
+            CloseSide();
+            _sideDialogTask = new TaskCompletionSource<dynamic>();
+            if (options == null)
+            {
+                options = new SideDialogOptions();
+            }
+
+            options.Title = title;
+            OnSideOpen?.Invoke(typeof(T), parameters ?? new Dictionary<string, object>(), options);
+            return _sideDialogTask.Task;
+        }
+
+        /// <summary>
+        /// Closes the side dialog
+        /// </summary>
+        /// <param name="result">The result of the Dialog</param>
+        public void CloseSide(dynamic result = null)
+        {
+            if (_sideDialogTask?.Task.IsCompleted == false)
+            {
+                _sideDialogTask.TrySetResult(result);
+                OnSideClose?.Invoke(result);
+            }
+        }
+
         /// <summary>
         /// Opens a dialog with the specified content.
         /// </summary>
@@ -147,7 +200,7 @@ namespace Radzen
         /// <param name="childContent">The content displayed in the dialog.</param>
         /// <param name="options">The dialog options.</param>
         /// <returns>The value passed as argument to <see cref="Close" />.</returns>
-        public Task<dynamic> OpenAsync(string title, RenderFragment<DialogService> childContent, DialogOptions options = null)
+        public virtual Task<dynamic> OpenAsync(string title, RenderFragment<DialogService> childContent, DialogOptions options = null)
         {
             var task = new TaskCompletionSource<dynamic>();
             tasks.Add(task);
@@ -161,13 +214,36 @@ namespace Radzen
             return task.Task;
         }
 
+        /// <summary>
+        /// Opens a dialog with the specified content.
+        /// </summary>
+        /// <param name="titleContent">The content displayed in the title bar of the dialog.</param>
+        /// <param name="childContent">The content displayed in the dialog.</param>
+        /// <param name="options">The dialog options.</param>
+        /// <returns>The value passed as argument to <see cref="Close" />.</returns>
+        public virtual Task<dynamic> OpenAsync(RenderFragment<DialogService> titleContent, RenderFragment<DialogService> childContent, DialogOptions options = null)
+        {
+            var task = new TaskCompletionSource<dynamic>();
+            tasks.Add(task);
+
+            options = options ?? new DialogOptions();
+
+            options.ChildContent = childContent;
+
+            options.TitleContent = titleContent;
+
+            OpenDialog<object>(null, null, options);
+
+            return task.Task;
+        }
+
         /// <summary>
         /// Opens a dialog with the specified content.
         /// </summary>
         /// <param name="title">The text displayed in the title bar of the dialog.</param>
         /// <param name="childContent">The content displayed in the dialog.</param>
         /// <param name="options">The dialog options.</param>
-        public void Open(string title, RenderFragment<DialogService> childContent, DialogOptions options = null)
+        public virtual void Open(string title, RenderFragment<DialogService> childContent, DialogOptions options = null)
         {
             options = options ?? new DialogOptions();
 
@@ -196,11 +272,17 @@ namespace Radzen
                 Resizable = options != null ? options.Resizable : false,
                 Draggable = options != null ? options.Draggable : false,
                 ChildContent = options?.ChildContent,
+                TitleContent = options?.TitleContent,
                 Style = options != null ? options.Style : "",
                 AutoFocusFirstElement = options != null ? options.AutoFocusFirstElement : true,
                 CloseDialogOnOverlayClick = options != null ? options.CloseDialogOnOverlayClick : false,
                 CloseDialogOnEsc = options != null ? options.CloseDialogOnEsc : true,
                 CssClass = options != null ? options.CssClass : "",
+                WrapperCssClass = options != null ? options.WrapperCssClass : "",
+                CloseTabIndex = options != null ? options.CloseTabIndex : 0,
+                ContentCssClass = options != null ? options.ContentCssClass : "",
+                Resize = options?.Resize,
+                Drag = options?.Drag
             });
         }
 
@@ -243,7 +325,7 @@ namespace Radzen
         /// <param name="title">The text displayed in the title bar of the dialog.</param>
         /// <param name="options">The options.</param>
         /// <returns><c>true</c> if the user clicked the OK button, <c>false</c> otherwise.</returns>
-        public async Task<bool?> Confirm(string message = "Confirm?", string title = "Confirm", ConfirmOptions options = null)
+        public virtual async Task<bool?> Confirm(string message = "Confirm?", string title = "Confirm", ConfirmOptions options = null)
         {
             var dialogOptions = new DialogOptions()
             {
@@ -262,6 +344,8 @@ namespace Radzen
                 CloseDialogOnOverlayClick = options != null ? options.CloseDialogOnOverlayClick : false,
                 CloseDialogOnEsc = options != null ? options.CloseDialogOnEsc : true,
                 CssClass = options != null ? $"rz-dialog-confirm {options.CssClass}" : "rz-dialog-confirm",
+                WrapperCssClass = options != null ? $"rz-dialog-wrapper {options.WrapperCssClass}" : "rz-dialog-wrapper",
+                CloseTabIndex = options != null ? options.CloseTabIndex : 0,
             };
 
             return await OpenAsync(title, ds =>
@@ -271,7 +355,7 @@ namespace Radzen
                     var i = 0;
                     b.OpenElement(i++, "p");
                     b.AddAttribute(i++, "class", "rz-dialog-confirm-message");
-                    b.AddContent(i++, message);
+                    b.AddContent(i++, (MarkupString)message);
                     b.CloseElement();
 
                     b.OpenElement(i++, "div");
@@ -284,7 +368,7 @@ namespace Radzen
 
                     b.OpenComponent<Blazor.RadzenButton>(i++);
                     b.AddAttribute(i++, "Text", options != null ? options.CancelButtonText : "Cancel");
-                    b.AddAttribute(i++, "ButtonStyle", ButtonStyle.Secondary);
+                    b.AddAttribute(i++, "ButtonStyle", ButtonStyle.Base);
                     b.AddAttribute(i++, "Click", EventCallback.Factory.Create<Microsoft.AspNetCore.Components.Web.MouseEventArgs>(this, () => ds.Close(false)));
                     b.CloseComponent();
 
@@ -301,7 +385,7 @@ namespace Radzen
         /// <param name="title">The text displayed in the title bar of the dialog.</param>
         /// <param name="options">The options.</param>
         /// <returns><c>true</c> if the user clicked the OK button, <c>false</c> otherwise.</returns>
-        public async Task<bool?> Alert(string message = "", string title = "Message", AlertOptions options = null)
+        public virtual async Task<bool?> Alert(string message = "", string title = "Message", AlertOptions options = null)
         {
             var dialogOptions = new DialogOptions()
             {
@@ -320,6 +404,9 @@ namespace Radzen
                 CloseDialogOnOverlayClick = options != null ? options.CloseDialogOnOverlayClick : false,
                 CloseDialogOnEsc = options != null ? options.CloseDialogOnEsc : true,
                 CssClass = options != null ? $"rz-dialog-alert {options.CssClass}" : "rz-dialog-alert",
+                WrapperCssClass = options != null ? $"rz-dialog-wrapper {options.WrapperCssClass}" : "rz-dialog-wrapper",
+                ContentCssClass = options != null ? $"rz-dialog-content {options.ContentCssClass}" : "rz-dialog-content",
+                CloseTabIndex = options != null ? options.CloseTabIndex : 0,
             };
 
             return await OpenAsync(title, ds =>
@@ -329,7 +416,7 @@ namespace Radzen
                     var i = 0;
                     b.OpenElement(i++, "p");
                     b.AddAttribute(i++, "class", "rz-dialog-alert-message");
-                    b.AddContent(i++, message);
+                    b.AddContent(i++, (MarkupString)message);
                     b.CloseElement();
 
                     b.OpenElement(i++, "div");
@@ -348,9 +435,9 @@ namespace Radzen
     }
 
     /// <summary>
-    /// Class DialogOptions.
+    /// Base Class for dialog options
     /// </summary>
-    public class DialogOptions
+    public abstract class DialogOptionsBase
     {
         /// <summary>
         /// Gets or sets a value indicating whether to show the title bar. Set to <c>true</c> by default.
@@ -363,17 +450,127 @@ namespace Radzen
         /// </summary>
         /// <value><c>true</c> if the close button is shown; otherwise, <c>false</c>.</value>
         public bool ShowClose { get; set; } = true;
+        /// <summary>
+        /// Gets or sets the width of the dialog.
+        /// </summary>
+        /// <value>The width.</value>
+        public string Width { get; set; }
+        /// <summary>
+        /// Gets or sets the height of the dialog.
+        /// </summary>
+        /// <value>The height.</value>
+        public string Height { get; set; }
+        /// <summary>
+        /// Gets or sets the CSS style of the dialog
+        /// </summary>
+        /// <value>The style.</value>
+        public string Style { get; set; }
 
+        /// <summary>
+        /// Gets or sets a value indicating whether the dialog should be closed by clicking the overlay.
+        /// </summary>
+        /// <value><c>true</c> if closeable; otherwise, <c>false</c>.</value>
+        public bool CloseDialogOnOverlayClick { get; set; } = false;
+
+        /// <summary>
+        /// Gets or sets dialog box custom class
+        /// </summary>
+        public string CssClass { get; set; }
+
+        /// <summary>
+        /// Gets or sets the CSS classes added to the dialog's wrapper element.
+        /// </summary>
+        public string WrapperCssClass { get; set; }
+
+        /// <summary>
+        /// Gets or sets the CSS classes added to the dialog's content element.
+        /// </summary>
+        public string ContentCssClass { get; set; }
+
+        /// <summary>
+        /// Gets or sets a value the dialog escape tabindex. Set to <c>0</c> by default.
+        /// </summary>
+        public int CloseTabIndex { get; set; } = 0;
+    }
+
+    /// <summary>
+    /// Class SideDialogOptions
+    /// </summary>
+    public class SideDialogOptions : DialogOptionsBase
+    {
+        /// <summary>
+        /// The title displayed on the dialog.
+        /// </summary>
+        public string Title { get; set; }
+
+        /// <summary>
+        /// The Position on which the dialog will be positioned
+        /// </summary>
+        public DialogPosition Position { get; set; } = DialogPosition.Right;
+
+        /// <summary>
+        /// Whether to show a mask on the background or not
+        /// </summary>
+        public bool ShowMask { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether to focus the first focusable HTML element. Set to <c>true</c> by default.
+        /// </summary>
+        public bool AutoFocusFirstElement { get; set; } = false;
+    }
+
+    /// <summary>
+    /// DialogPosition enum
+    /// </summary>
+    public enum DialogPosition
+    {
+        /// <summary>
+        /// Dialog will be positioned on the right side
+        /// </summary>
+        Right,
+        /// <summary>
+        /// Dialog will be positioned on the left side
+        /// </summary>
+        Left,
+        /// <summary>
+        /// Dialog will be positioned on the top of the page
+        /// </summary>
+        Top,
+        /// <summary>
+        /// Dialog will be positioned at the bottom of the page
+        /// </summary>
+        Bottom
+    }
+
+    /// <summary>
+    /// Class DialogOptions.
+    /// </summary>
+    public class DialogOptions : DialogOptionsBase
+    {
         /// <summary>
         /// Gets or sets a value indicating whether the dialog is resizable. Set to <c>false</c> by default.
         /// </summary>
         /// <value><c>true</c> if resizable; otherwise, <c>false</c>.</value>
         public bool Resizable { get; set; } = false;
+
+        /// <summary>
+        /// Gets or sets the change.
+        /// </summary>
+        /// <value>The change.</value>
+        public Action<Size> Resize { get; set; }
+
         /// <summary>
         /// Gets or sets a value indicating whether the dialog is draggable. Set to <c>false</c> by default.
         /// </summary>
         /// <value><c>true</c> if draggable; otherwise, <c>false</c>.</value>
         public bool Draggable { get; set; } = false;
+
+        /// <summary>
+        /// Gets or sets the change.
+        /// </summary>
+        /// <value>The change.</value>
+        public Action<Point> Drag { get; set; }
+
         /// <summary>
         /// Gets or sets the X coordinate of the dialog. Maps to the <c>left</c> CSS attribute.
         /// </summary>
@@ -390,46 +587,24 @@ namespace Radzen
         /// <value>The bottom.</value>
         public string Bottom { get; set; }
         /// <summary>
-        /// Gets or sets the width of the dialog.
-        /// </summary>
-        /// <value>The width.</value>
-        public string Width { get; set; }
-        /// <summary>
-        /// Gets or sets the height of the dialog.
-        /// </summary>
-        /// <value>The height.</value>
-        public string Height { get; set; }
-        /// <summary>
-        /// Gets or sets the CSS style of the dialog
-        /// </summary>
-        /// <value>The style.</value>
-        public string Style { get; set; }
-        /// <summary>
         /// Gets or sets the child content.
         /// </summary>
         /// <value>The child content.</value>
         public RenderFragment<DialogService> ChildContent { get; set; }
         /// <summary>
+        /// Gets or sets the title content.
+        /// </summary>
+        /// <value>The title content.</value>
+        public RenderFragment<DialogService> TitleContent { get; set; }
+        /// <summary>
         /// Gets or sets a value indicating whether to focus the first focusable HTML element. Set to <c>true</c> by default.
         /// </summary>
         public bool AutoFocusFirstElement { get; set; } = true;
-
-        /// <summary>
-        /// Gets or sets a value indicating whether the dialog should be closed by clicking the overlay.
-        /// </summary>
-        /// <value><c>true</c> if closeable; otherwise, <c>false</c>.</value>
-        public bool CloseDialogOnOverlayClick { get; set; } = false;
-
         /// <summary>
         /// Gets or sets a value indicating whether the dialog should be closed on ESC key press.
         /// </summary>
         /// <value><c>true</c> if closeable; otherwise, <c>false</c>.</value>
         public bool CloseDialogOnEsc { get; set; } = true;
-
-        /// <summary>
-        /// Gets or sets dialog box custom class
-        /// </summary>
-        public string CssClass { get; set; }
     }
 
     /// <summary>

Radzen.Blazor/DropDownBase.cs

@@ -1,12 +1,13 @@
-using System;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Rendering;
+using Microsoft.JSInterop;
+using Radzen.Blazor;
+using System;
 using System.Collections;
 using System.Collections.Generic;
 using System.Linq;
 using System.Linq.Dynamic.Core;
 using System.Threading.Tasks;
-using Microsoft.AspNetCore.Components;
-using Microsoft.AspNetCore.Components.Rendering;
-using Microsoft.JSInterop;
 
 namespace Radzen
 {
@@ -16,7 +17,12 @@ namespace Radzen
     /// <typeparam name="T"></typeparam>
     public class DropDownBase<T> : DataBoundFormComponent<T>
     {
-#if NET5_0_OR_GREATER
+        /// <summary>
+        /// Gets or sets a value that determines how many additional items will be rendered before and after the visible region. This help to reduce the frequency of rendering during scrolling. However, higher values mean that more elements will be present in the page.
+        /// </summary>
+        [Parameter]
+        public int VirtualizationOverscanCount { get; set; }
+
         internal Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize<object> virtualize;
 
         /// <summary>
@@ -39,14 +45,14 @@ namespace Radzen
             var totalItemsCount = LoadData.HasDelegate ? Count : view.Count();
             var top = request.Count;
 
-            if(top <= 0)
+            if (top <= 0)
             {
                 top = PageSize;
             }
 
             if (LoadData.HasDelegate)
             {
-                await LoadData.InvokeAsync(new Radzen.LoadDataArgs() { Skip = request.StartIndex, Top = request.Count, Filter = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search) });
+                await LoadData.InvokeAsync(new Radzen.LoadDataArgs() { Skip = request.StartIndex, Top = top, Filter = searchText });
             }
 
             virtualItems = (LoadData.HasDelegate ? Data : view.Skip(request.StartIndex).Take(top)).Cast<object>().ToList();
@@ -71,18 +77,19 @@ namespace Radzen
         /// </summary>
         [Parameter]
         public int PageSize { get; set; } = 5;
-#endif
+
         /// <summary>
         /// Determines whether virtualization is allowed.
         /// </summary>
         /// <returns><c>true</c> if virtualization is allowed; otherwise, <c>false</c>.</returns>
         internal bool IsVirtualizationAllowed()
         {
-#if NET5_0_OR_GREATER
             return AllowVirtualization;
-#else
-            return false;
-#endif
+        }
+
+        internal int GetVirtualizationOverscanCount()
+        {
+            return VirtualizationOverscanCount;
         }
 
         /// <summary>
@@ -93,7 +100,6 @@ namespace Radzen
         {
             return new RenderFragment(builder =>
             {
-#if NET5_0_OR_GREATER
                 if (AllowVirtualization)
                 {
                     builder.OpenComponent(0, typeof(Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize<object>));
@@ -106,6 +112,11 @@ namespace Radzen
                         });
                     }));
 
+                    if (VirtualizationOverscanCount != default(int))
+                    {
+                        builder.AddAttribute(3, "OverscanCount", VirtualizationOverscanCount);
+                    }
+
                     builder.AddComponentReferenceCapture(7, c => { virtualize = (Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize<object>)c; });
 
                     builder.CloseComponent();
@@ -117,12 +128,6 @@ namespace Radzen
                         RenderItem(builder, item);
                     }
                 }
-#else
-                foreach (var item in LoadData.HasDelegate ? Data : View)
-                {
-                    RenderItem(builder, item);
-                }
-#endif
             });
         }
 
@@ -173,6 +178,13 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Gets or sets the header template.
+        /// </summary>
+        /// <value>The header template.</value>
+        [Parameter]
+        public RenderFragment HeaderTemplate { get; set; }
+
         /// <summary>
         /// Gets or sets a value indicating whether filtering is allowed. Set to <c>false</c> by default.
         /// </summary>
@@ -180,6 +192,13 @@ namespace Radzen
         [Parameter]
         public virtual bool AllowFiltering { get; set; }
 
+        /// <summary>
+        /// Gets or sets a value indicating whether filtering is allowed as you type. Set to <c>true</c> by default.
+        /// </summary>
+        /// <value><c>true</c> if filtering is allowed; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public virtual bool FilterAsYouType { get; set; } = true;
+
         /// <summary>
         /// Gets or sets a value indicating whether the user can clear the value. Set to <c>false</c> by default.
         /// </summary>
@@ -222,12 +241,33 @@ namespace Radzen
         [Parameter]
         public string DisabledProperty { get; set; }
 
+        /// <summary>
+        /// Gets or sets the remove chip button title.
+        /// </summary>
+        /// <value>The remove chip button title.</value>
+        [Parameter]
+        public string RemoveChipTitle { get; set; } = "Remove";
+
+        /// <summary>
+        /// Gets or sets the search aria label text.
+        /// </summary>
+        /// <value>The search aria label text.</value>
+        [Parameter]
+        public string SearchAriaLabel { get; set; } = "Search";
+
+        /// <summary>
+        /// Gets or sets the empty value aria label text.
+        /// </summary>
+        /// <value>The empty value aria label text.</value>
+        [Parameter]
+        public string EmptyAriaLabel { get; set; } = "Empty";
+
         /// <summary>
         /// Gets or sets the selected item changed.
         /// </summary>
         /// <value>The selected item changed.</value>
         [Parameter]
-        public Action<object> SelectedItemChanged { get; set; }
+        public EventCallback<object> SelectedItemChanged { get; set; }
 
         /// <summary>
         /// The selected items
@@ -241,17 +281,17 @@ namespace Radzen
         /// <summary>
         /// Selects all.
         /// </summary>
-        protected async System.Threading.Tasks.Task SelectAll()
+        protected virtual async System.Threading.Tasks.Task SelectAll()
         {
             if (Disabled)
             {
                 return;
             }
 
-            if (selectedItems.Count != View.Cast<object>().Count())
+            if (selectedItems.Count != View.Cast<object>().ToList().Where(i => disabledPropertyGetter != null ? disabledPropertyGetter(i) as bool? != true : true).Count())
             {
                 selectedItems.Clear();
-                selectedItems = View.Cast<object>().ToList();
+                selectedItems = View.Cast<object>().ToList().Where(i => disabledPropertyGetter != null ? disabledPropertyGetter(i) as bool? != true : true).ToList();
             }
             else
             {
@@ -278,6 +318,15 @@ namespace Radzen
                 }
                 await ValueChanged.InvokeAsync((T)(object)list);
             }
+            else if (typeof(T).IsGenericType && typeof(ICollection<>).MakeGenericType(typeof(T).GetGenericArguments()[0]).IsAssignableFrom(typeof(T)))
+            {
+                var list = (IList)Activator.CreateInstance(typeof(List<>).MakeGenericType(typeof(T).GetGenericArguments()[0]));
+                foreach (var i in (IEnumerable)internalValue)
+                {
+                    list.Add(i);
+                }
+                await ValueChanged.InvokeAsync((T)(object)list);
+            }
             else
             {
                 await ValueChanged.InvokeAsync((T)internalValue);
@@ -286,16 +335,21 @@ namespace Radzen
             await Change.InvokeAsync(internalValue);
 
             StateHasChanged();
+
+            await JSRuntime.InvokeVoidAsync("Radzen.focusElement", GetId());
         }
 
         internal bool IsAllSelected()
         {
             if (LoadData.HasDelegate && !string.IsNullOrEmpty(ValueProperty))
             {
-                return View != null && View.Cast<object>().All(i => IsItemSelectedByValue(GetItemOrValueFromProperty(i, ValueProperty)));
+                return View != null && View.Cast<object>().ToList()
+                    .Where(i => disabledPropertyGetter != null ? disabledPropertyGetter(i) as bool? != true : true)
+                    .All(i => IsItemSelectedByValue(GetItemOrValueFromProperty(i, ValueProperty)));
             }
 
-            return View != null && selectedItems.Count == View.Cast<object>().Count();
+            return View != null && selectedItems.Count == View.Cast<object>().ToList()
+                    .Where(i => disabledPropertyGetter != null ? disabledPropertyGetter(i) as bool? != true : true).Count();
         }
 
         /// <summary>
@@ -316,6 +370,7 @@ namespace Radzen
                 return;
 
             searchText = null;
+            await SearchTextChanged.InvokeAsync(searchText);
             await JSRuntime.InvokeAsync<string>("Radzen.setInputValue", search, "");
 
             internalValue = default(T);
@@ -386,21 +441,34 @@ namespace Radzen
 
                 if (!string.IsNullOrEmpty(ValueProperty))
                 {
-                    valuePropertyGetter = PropertyAccess.Getter<object, object>(ValueProperty, type);
+                    valuePropertyGetter = GetGetter(ValueProperty, type);
                 }
 
                 if (!string.IsNullOrEmpty(TextProperty))
                 {
-                    textPropertyGetter = PropertyAccess.Getter<object, object>(TextProperty, type);
+                    textPropertyGetter = GetGetter(TextProperty, type);
                 }
 
                 if (!string.IsNullOrEmpty(DisabledProperty))
                 {
-                    disabledPropertyGetter = PropertyAccess.Getter<object, object>(DisabledProperty, type);
+                    disabledPropertyGetter = GetGetter(DisabledProperty, type);
                 }
             }
         }
 
+        Func<object, object> GetGetter(string propertyName, Type type)
+        {
+            if (propertyName?.Contains("[") == true)
+            {
+                var getter = typeof(PropertyAccess).GetMethod("Getter", [typeof(string), typeof(Type)]);
+                var getterMethod = getter.MakeGenericMethod([type, typeof(object)]);
+
+                return (i) => getterMethod.Invoke(i, [propertyName, type]);
+            }
+
+            return PropertyAccess.Getter<object, object>(propertyName, type);
+        }
+
         internal Func<object, object> valuePropertyGetter;
         internal Func<object, object> textPropertyGetter;
         internal Func<object, object> disabledPropertyGetter;
@@ -415,30 +483,29 @@ namespace Radzen
         {
             if (item != null)
             {
-                if (property == TextProperty && textPropertyGetter != null)
-                {
-                    return textPropertyGetter(item);
-                }
-                else if (property == ValueProperty && valuePropertyGetter != null)
-                {
-                    return valuePropertyGetter(item);
-                }
-                else if (property == DisabledProperty && disabledPropertyGetter != null)
-                {
-                    return disabledPropertyGetter(item);
-                }
-
                 var enumValue = item as Enum;
                 if (enumValue != null)
                 {
                     return Radzen.Blazor.EnumExtensions.GetDisplayDescription(enumValue);
                 }
+
+                if (property == TextProperty)
+                {
+                    return textPropertyGetter != null ? textPropertyGetter(item) : PropertyAccess.GetItemOrValueFromProperty(item, property);
+                }
+                else if (property == ValueProperty)
+                {
+                    return valuePropertyGetter != null ? valuePropertyGetter(item) : PropertyAccess.GetItemOrValueFromProperty(item, property);
+                }
+                else if (property == DisabledProperty)
+                {
+                    return disabledPropertyGetter != null ? disabledPropertyGetter(item) : PropertyAccess.GetItemOrValueFromProperty(item, property);
+                }
             }
 
             return item;
         }
 
-#if NET5_0_OR_GREATER
         /// <inheritdoc/>
         protected override async Task OnDataChanged()
         {
@@ -449,7 +516,6 @@ namespace Radzen
                 await InvokeAsync(Virtualize.RefreshDataAsync);
             }
         }
-#endif
 
         /// <summary>
         /// Gets the popup identifier.
@@ -467,7 +533,7 @@ namespace Radzen
         /// Gets the search identifier.
         /// </summary>
         /// <value>The search identifier.</value>
-        protected string SearchID
+        public string SearchID
         {
             get
             {
@@ -543,12 +609,15 @@ namespace Radzen
             }
         }
 
+        internal bool preventKeydown = false;
+
         /// <summary>
         /// Handles the key press.
         /// </summary>
         /// <param name="args">The <see cref="Microsoft.AspNetCore.Components.Web.KeyboardEventArgs"/> instance containing the event data.</param>
         /// <param name="isFilter">if set to <c>true</c> [is filter].</param>
-        private async System.Threading.Tasks.Task HandleKeyPress(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args, bool isFilter = false)
+        /// <param name="shouldSelectOnChange">Should select item on item change with keyboard.</param>
+        protected virtual async System.Threading.Tasks.Task HandleKeyPress(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args, bool isFilter = false, bool? shouldSelectOnChange = null)
         {
             if (Disabled)
                 return;
@@ -566,9 +635,7 @@ namespace Radzen
             {
                 if (IsVirtualizationAllowed())
                 {
-#if NET5_0_OR_GREATER
-                    items = virtualItems;
-#endif
+                    items = virtualItems ?? Enumerable.Empty<object>().ToList();
                 }
                 else
                 {
@@ -580,48 +647,72 @@ namespace Radzen
 
             if (!args.AltKey && (key == "ArrowDown" || key == "ArrowLeft" || key == "ArrowUp" || key == "ArrowRight"))
             {
+                preventKeydown = true;
+
                 try
                 {
-                    var currentViewIndex = Multiple ? selectedIndex : items.IndexOf(selectedItem);
+                    selectedIndex = await JSRuntime.InvokeAsync<int>("Radzen.focusListItem", search, list, key == "ArrowDown" || key == "ArrowRight", selectedIndex);
 
-                    var newSelectedIndex = await JSRuntime.InvokeAsync<int>("Radzen.focusListItem", search, list, key == "ArrowDown" || key == "ArrowRight", currentViewIndex);
+                    var popupOpened = await JSRuntime.InvokeAsync<bool>("Radzen.popupOpened", PopupID);
 
-                    if (!Multiple)
+                    if (!Multiple && !popupOpened && shouldSelectOnChange != false)
                     {
-                        if (newSelectedIndex != currentViewIndex && newSelectedIndex >= 0 && newSelectedIndex <= items.Count() - 1)
+                        var itemToSelect = items.ElementAtOrDefault(selectedIndex);
+                        if (itemToSelect != null)
                         {
-                            selectedIndex = newSelectedIndex;
-                            await OnSelectItem(items.ElementAt(selectedIndex), true);
+                            await OnSelectItem(itemToSelect, true);
                         }
                     }
-                    else
-                    {
-                        selectedIndex = await JSRuntime.InvokeAsync<int>("Radzen.focusListItem", search, list, key == "ArrowDown", currentViewIndex);
-                    }
                 }
                 catch (Exception)
                 {
                     //
                 }
             }
-            else if (Multiple && key == "Enter")
+            else if (key == "Enter" || key == "NumpadEnter")
             {
+                preventKeydown = true;
+
                 if (selectedIndex >= 0 && selectedIndex <= items.Count() - 1)
                 {
+                    var itemToSelect = items.ElementAtOrDefault(selectedIndex);
+
                     await JSRuntime.InvokeAsync<string>("Radzen.setInputValue", search, $"{searchText}".Trim());
-                    await OnSelectItem(items.ElementAt(selectedIndex), true);
+                    
+                    if (itemToSelect != null)
+                    {
+                        await OnSelectItem(itemToSelect, true);
+                    }
+                }
+
+                var popupOpened = await JSRuntime.InvokeAsync<bool>("Radzen.popupOpened", PopupID);
+
+                if (!popupOpened)
+                {
+                    await OpenPopup(key, isFilter);
+                }
+                else
+                {
+                    if (!Multiple)
+                    {
+                        await ClosePopup(key);
+                    }
                 }
             }
-            else if (key == "Enter" || (args.AltKey && key == "ArrowDown"))
+            else if (args.AltKey && key == "ArrowDown")
             {
+                preventKeydown = true;
+
                 await OpenPopup(key, isFilter);
             }
             else if (key == "Escape" || key == "Tab")
             {
-                await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID);
+                await ClosePopup(key);
             }
             else if (key == "Delete" && AllowClear)
             {
+                preventKeydown = true;
+
                 if (!Multiple && selectedItem != null)
                 {
                     selectedIndex = -1;
@@ -633,12 +724,58 @@ namespace Radzen
                     Debounce(DebounceFilter, FilterDelay);
                 }
             }
-            else if (AllowFiltering && isFilter)
+            else if (AllowFiltering && isFilter && FilterAsYouType)
             {
+                preventKeydown = true;
+
                 Debounce(DebounceFilter, FilterDelay);
             }
+            else
+            {
+                var filteredItems = Query.Where(TextProperty, args.Key, StringFilterOperator.StartsWith, FilterCaseSensitivity.CaseInsensitive)
+                    .Cast<object>()
+                    .ToList();
+
+
+                if (previousKey != args.Key)
+                {
+                    previousKey = args.Key;
+                    itemIndex = -1;
+                }
+
+                itemIndex = itemIndex + 1 >= filteredItems.Count() ? 0 : itemIndex + 1;
+                var itemToSelect = filteredItems.ElementAtOrDefault(itemIndex);
+
+                if (itemToSelect != null)
+                {
+                    if (!Multiple)
+                    {
+                        await SelectItem(itemToSelect);
+                    }
+
+                    var result = items.Select((x, i) => new { Item = x, Index = i }).FirstOrDefault(itemWithIndex => object.Equals(itemWithIndex.Item, itemToSelect));
+                    if (result != null)
+                    {
+                        if (!Multiple)
+                        {
+                            selectedIndex = result.Index;
+                        }
+                        await JSRuntime.InvokeVoidAsync("Radzen.selectListItem", list, list, result.Index);
+                    }
+                }
+
+                preventKeydown = false;
+            }
         }
 
+        internal virtual async Task ClosePopup(string key)
+        {
+            await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID);
+        }
+
+        int itemIndex;
+        string previousKey;
+
         /// <summary>
         /// Handles the <see cref="E:FilterKeyPress" /> event.
         /// </summary>
@@ -655,17 +792,14 @@ namespace Radzen
         {
             if (!LoadData.HasDelegate)
             {
-                searchText = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search);
                 _view = null;
                 if (IsVirtualizationAllowed())
                 {
-#if NET5_0_OR_GREATER
                     if (virtualize != null)
                     {
                         await virtualize.RefreshDataAsync();
                     }
                     await InvokeAsync(() => { StateHasChanged(); });
-#endif
                 }
                 else
                 {
@@ -676,13 +810,15 @@ namespace Radzen
             {
                 if (IsVirtualizationAllowed())
                 {
-#if NET5_0_OR_GREATER
                     if (virtualize != null)
                     {
                         await InvokeAsync(virtualize.RefreshDataAsync);
                     }
+                    else
+                    {
+                        await LoadData.InvokeAsync(await GetLoadDataArgs());
+                    }
                     await InvokeAsync(() => { StateHasChanged(); });
-#endif
                 }
                 else
                 {
@@ -694,15 +830,17 @@ namespace Radzen
                 selectedIndex = -1;
 
             await JSRuntime.InvokeAsync<string>("Radzen.repositionPopup", Element, PopupID);
+            await SearchTextChanged.InvokeAsync(SearchText);
         }
 
         /// <summary>
         /// Handles the <see cref="E:KeyPress" /> event.
         /// </summary>
         /// <param name="args">The <see cref="Microsoft.AspNetCore.Components.Web.KeyboardEventArgs"/> instance containing the event data.</param>
-        protected async System.Threading.Tasks.Task OnKeyPress(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args)
+        /// <param name="shouldSelectOnChange">Should select item on item change with keyboard.</param>
+        protected virtual async System.Threading.Tasks.Task OnKeyPress(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args, bool? shouldSelectOnChange = null)
         {
-            await HandleKeyPress(args);
+            await HandleKeyPress(args, false, shouldSelectOnChange);
         }
 
         /// <summary>
@@ -730,18 +868,14 @@ namespace Radzen
         /// <returns>LoadDataArgs.</returns>
         internal virtual async System.Threading.Tasks.Task<LoadDataArgs> GetLoadDataArgs()
         {
-#if NET5_0_OR_GREATER
             if (AllowVirtualization)
             {
-                return new Radzen.LoadDataArgs() { Skip = 0, Top = PageSize, Filter = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search) };
+                return await Task.FromResult(new Radzen.LoadDataArgs() { Skip = 0, Top = PageSize, Filter = searchText });
             }
             else
             {
-                return new Radzen.LoadDataArgs() { Filter = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search) };
+                return await Task.FromResult(new Radzen.LoadDataArgs() { Filter = searchText });
             }
-#else
-            return new Radzen.LoadDataArgs() { Filter = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search) };
-#endif
         }
 
         /// <summary>
@@ -776,13 +910,12 @@ namespace Radzen
         /// <returns>A Task representing the asynchronous operation.</returns>
         public override async Task SetParametersAsync(ParameterView parameters)
         {
-#if NET5_0_OR_GREATER
             var pageSize = parameters.GetValueOrDefault<int>(nameof(PageSize));
-            if(pageSize != default(int))
+            if (pageSize != default(int))
             {
                 PageSize = pageSize;
             }
-#endif
+
             var selectedItemChanged = parameters.DidParameterChange(nameof(SelectedItem), SelectedItem);
             if (selectedItemChanged)
             {
@@ -820,7 +953,7 @@ namespace Radzen
 
             if (valueAsEnumerable != null)
             {
-                if (valueAsEnumerable.OfType<object>().Count() != selectedItems.Count)
+                if (!valueAsEnumerable.Cast<object>().SequenceEqual(selectedItems.Select(i => string.IsNullOrEmpty(ValueProperty) ? i : GetItemOrValueFromProperty(i, ValueProperty))))
                 {
                     selectedItems.Clear();
                 }
@@ -859,7 +992,7 @@ namespace Radzen
                 }
                 else
                 {
-                    return object.Equals(item,selectedItem);
+                    return object.Equals(item, selectedItem);
                 }
             }
         }
@@ -913,42 +1046,7 @@ namespace Radzen
             {
                 if (_view == null && Query != null)
                 {
-                    if (!string.IsNullOrEmpty(searchText))
-                    {
-                        var ignoreCase = FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive;
-
-                        var query = new List<string>();
-
-                        if (!string.IsNullOrEmpty(TextProperty))
-                        {
-                            query.Add(TextProperty);
-                        }
-
-                        if (typeof(EnumerableQuery).IsAssignableFrom(Query.GetType()))
-                        {
-                            query.Add("ToString()");
-                        }
-
-                        if (ignoreCase)
-                        {
-                            query.Add("ToLower()");
-                        }
-
-                        query.Add($"{Enum.GetName(typeof(StringFilterOperator), FilterOperator)}(@0)");
-
-                        _view = Query.Where(String.Join(".", query), ignoreCase ? searchText.ToLower() : searchText);
-                    }
-                    else
-                    {
-                        if (IsVirtualizationAllowed())
-                        {
-                            _view = Query;
-                        }
-                        else
-                        {
-                            _view = (typeof(IQueryable).IsAssignableFrom(Data.GetType())) ? (Query as IEnumerable).Cast<object>().ToList().AsQueryable() : Query;
-                        }
-                    }
+                    _view = Query.Where(TextProperty, searchText, FilterOperator, FilterCaseSensitivity);
                 }
 
                 return _view;
@@ -996,7 +1094,7 @@ namespace Radzen
         /// <param name="raiseChange">if set to <c>true</c> [raise change].</param>
         public async System.Threading.Tasks.Task SelectItem(object item, bool raiseChange = true)
         {
-            if (disabledPropertyGetter != null && disabledPropertyGetter(item) as bool? == true)
+            if (disabledPropertyGetter != null && item != null && disabledPropertyGetter(item) as bool? == true)
             {
                 return;
             }
@@ -1009,7 +1107,7 @@ namespace Radzen
                 selectedItem = item;
                 if (!string.IsNullOrEmpty(ValueProperty))
                 {
-                    internalValue = GetItemOrValueFromProperty(item, ValueProperty);
+                    internalValue = PropertyAccess.GetItemOrValueFromProperty(item, ValueProperty);
                 }
                 else
                 {
@@ -1018,7 +1116,7 @@ namespace Radzen
 
                 SetSelectedIndexFromSelectedItem();
 
-                SelectedItemChanged?.Invoke(selectedItem);
+                await SelectedItemChanged.InvokeAsync(selectedItem);
             }
             else
             {
@@ -1069,6 +1167,22 @@ namespace Radzen
                             await ValueChanged.InvokeAsync((T)(object)list);
                         }
                     }
+                    else if (typeof(T).IsGenericType && typeof(ICollection<>).MakeGenericType(typeof(T).GetGenericArguments()[0]).IsAssignableFrom(typeof(T)))
+                    {
+                        if (object.Equals(internalValue, null))
+                        {
+                            await ValueChanged.InvokeAsync(default(T));
+                        }
+                        else
+                        {
+                            var list = (IList)Activator.CreateInstance(typeof(List<>).MakeGenericType(typeof(T).GetGenericArguments()[0]));
+                            foreach (var i in (IEnumerable)internalValue)
+                            {
+                                list.Add(i);
+                            }
+                            await ValueChanged.InvokeAsync((T)(object)list);
+                        }
+                    }
                     else
                     {
                         await ValueChanged.InvokeAsync(object.Equals(internalValue, null) ? default(T) : (T)internalValue);
@@ -1082,6 +1196,12 @@ namespace Radzen
             StateHasChanged();
         }
 
+        /// <inheritdoc />
+        public override object GetValue()
+        {
+            return internalValue;
+        }
+
         internal void UpdateSelectedItems(object item)
         {
             if (!string.IsNullOrEmpty(ValueProperty))
@@ -1094,7 +1214,7 @@ namespace Radzen
                 }
                 else
                 {
-                    selectedItems = selectedItems.AsQueryable().Where($@"!object.Equals({ValueProperty},@0)", value).ToList();
+                    selectedItems = selectedItems.AsQueryable().Where(DynamicLinqCustomTypeProvider.ParsingConfig, $@"!object.Equals(it.{ValueProperty},@0)", value).ToList();
                 }
             }
             else
@@ -1116,19 +1236,20 @@ namespace Radzen
         /// <param name="value">The value.</param>
         protected virtual void SelectItemFromValue(object value)
         {
-            if (value != null && View != null)
+            var view = LoadData.HasDelegate ? Data : View;
+            if (value != null && view != null)
             {
                 if (!Multiple)
                 {
                     if (!string.IsNullOrEmpty(ValueProperty))
                     {
-                        if (typeof(EnumerableQuery).IsAssignableFrom(View.GetType()))
+                        if (typeof(EnumerableQuery).IsAssignableFrom(view.GetType()))
                         {
-                            SelectedItem = View.OfType<object>().Where(i => object.Equals(GetItemOrValueFromProperty(i, ValueProperty), value)).FirstOrDefault();
+                            SelectedItem = view.OfType<object>().Where(i => object.Equals(GetItemOrValueFromProperty(i, ValueProperty), value)).FirstOrDefault();
                         }
                         else
                         {
-                            SelectedItem = View.AsQueryable().Where($@"{ValueProperty} == @0", value).FirstOrDefault();
+                            SelectedItem = view.AsQueryable().Where(DynamicLinqCustomTypeProvider.ParsingConfig, $@"{ValueProperty} == @0", value).FirstOrDefault();
                         }
                     }
                     else
@@ -1137,8 +1258,6 @@ namespace Radzen
                     }
 
                     SetSelectedIndexFromSelectedItem();
-
-                    SelectedItemChanged?.Invoke(selectedItem);
                 }
                 else
                 {
@@ -1151,16 +1270,16 @@ namespace Radzen
                             {
                                 dynamic item;
 
-                                if (typeof(EnumerableQuery).IsAssignableFrom(View.GetType()))
+                                if (typeof(EnumerableQuery).IsAssignableFrom(view.GetType()))
                                 {
-                                    item = View.OfType<object>().Where(i => object.Equals(GetItemOrValueFromProperty(i, ValueProperty), v)).FirstOrDefault();
+                                    item = view.OfType<object>().Where(i => object.Equals(GetItemOrValueFromProperty(i, ValueProperty), v)).FirstOrDefault();
                                 }
                                 else
                                 {
-                                    item = View.AsQueryable().Where($@"{ValueProperty} == @0", v).FirstOrDefault();
+                                    item = view.AsQueryable().Where(DynamicLinqCustomTypeProvider.ParsingConfig, $@"{ValueProperty} == @0", v).FirstOrDefault();
                                 }
 
-                                if (!object.Equals(item, null) && !selectedItems.AsQueryable().Where($@"object.Equals({ValueProperty},@0)", v).Any())
+                                if (!object.Equals(item, null) && !selectedItems.AsQueryable().Where(DynamicLinqCustomTypeProvider.ParsingConfig, $@"object.Equals(it.{ValueProperty},@0)", v).Any())
                                 {
                                     selectedItems.Add(item);
                                 }

Radzen.Blazor/DynamicLinqCustomTypeProvider.cs

@@ -0,0 +1,18 @@
+using System;
+using System.Collections.Generic;
+using System.Linq.Dynamic.Core;
+using System.Linq.Dynamic.Core.CustomTypeProviders;
+using System.Reflection;
+
+namespace Radzen.Blazor
+{
+    class DynamicLinqCustomTypeProvider : IDynamicLinkCustomTypeProvider
+    {
+        static readonly HashSet<Type> empty = [];
+        public HashSet<Type> GetCustomTypes() => empty;
+        public Dictionary<Type, List<MethodInfo>> GetExtensionMethods() => throw new NotSupportedException();
+        public Type ResolveType(string typeName) => throw new NotSupportedException();
+        public Type ResolveTypeBySimpleName(string simpleTypeName) => throw new NotSupportedException();
+        public static ParsingConfig ParsingConfig = new() { CustomTypeProvider = new DynamicLinqCustomTypeProvider() };
+    }
+}

Radzen.Blazor/Extensions.cs

@@ -1,8 +1,12 @@
 using System;
+using System.Collections;
 using System.Collections.Generic;
 using System.ComponentModel.DataAnnotations;
 using System.Linq;
 using System.Reflection;
+using System.Reflection.Emit;
+using System.Text.RegularExpressions;
+using System.Xml.Linq;
 
 namespace Radzen.Blazor
 {
@@ -14,22 +18,57 @@ namespace Radzen.Blazor
         /// <summary>
         /// Gets enum description.
         /// </summary>
-        public static string GetDisplayDescription(this Enum enumValue)
+        public static string GetDisplayDescription(this Enum enumValue, Func<string, string> translationFunction = null)
         {
             var enumValueAsString = enumValue.ToString();
             var val = enumValue.GetType().GetMember(enumValueAsString).FirstOrDefault();
+            var enumVal = val?.GetCustomAttribute<DisplayAttribute>()?.GetDescription() ?? enumValueAsString;
 
-            return val?.GetCustomAttribute<DisplayAttribute>()?.GetDescription() ?? enumValueAsString;
+            if (translationFunction != null)
+                return translationFunction(enumVal);
+
+            return enumVal;
         }
 
         /// <summary>
         /// Converts Enum to IEnumerable of Value/Text.
         /// </summary>
-        public static IEnumerable<object> EnumAsKeyValuePair(Type enumType)
+        public static IEnumerable<object> EnumAsKeyValuePair(Type enumType, Func<string, string> translationFunction = null)
         {
-            return Enum.GetValues(enumType).Cast<Enum>().Distinct().Select(val => new { Value = Convert.ToInt32(val), Text = val.GetDisplayDescription() });
+            Type underlyingType = Enum.GetUnderlyingType(enumType);
+            return Enum.GetValues(enumType).Cast<Enum>().Distinct().Select(val => new { Value = Convert.ChangeType(val, underlyingType), Text = val.GetDisplayDescription(translationFunction) });
         }
 
+        /// <summary>
+        /// Converts the autocomplete type enum value to the expected
+        /// autocomplete attribute value.
+        /// </summary>
+        /// <returns>The autocomplete attribute string value.</returns>
+        public static string GetAutoCompleteValue(this AutoCompleteType typeValue)
+        {
+            // Handle synonyms.
+            switch (typeValue)
+            {
+                case AutoCompleteType.FirstName:
+                    return "given-name";
+                case AutoCompleteType.LastName:
+                    return "family-name";
+                case AutoCompleteType.MiddleName:
+                    return "additional-name";
+                case AutoCompleteType.ZipCode:
+                    return "postal-code";
+                case AutoCompleteType.Province:
+                    return "address-level1";
+                case AutoCompleteType.State:
+                    return "address-level1";
+            }
+
+            // Handle standard values.
+            var value = typeValue.ToString();
+            value = Regex.Replace(value, "([^A-Z])([A-Z])", "$1-$2");
+            return Regex.Replace(value, "([A-Z]+)([A-Z][^A-Z$])", "$1-$2")
+                .Trim().ToLower();
+        }
     }
 }
 

Radzen.Blazor/FormComponent.cs

@@ -1,14 +1,80 @@
 using System;
+using System.Linq;
 using System.Collections.Generic;
 using System.Linq.Expressions;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Forms;
 using Microsoft.AspNetCore.Components.Web;
+using Radzen.Blazor;
 using Radzen.Blazor.Rendering;
 
 namespace Radzen
 {
+    /// <summary>
+    /// Class FormComponentWithAutoComplete.
+    /// </summary>
+    public class FormComponentWithAutoComplete<T> : FormComponent<T>
+    {
+        /// <summary>
+        /// Gets or sets a value indicating the type of built-in autocomplete
+        /// the browser should use.
+        /// <see cref="Blazor.AutoCompleteType" />
+        /// </summary>
+        /// <value>
+        /// The type of built-in autocomplete.
+        /// </value>
+        [Parameter]
+        public virtual AutoCompleteType AutoCompleteType { get; set; } = AutoCompleteType.On;
+
+        /// <summary>
+        /// Gets the autocomplete attribute's string value.
+        /// </summary>
+        /// <value>
+        /// <c>off</c> if the AutoComplete parameter is false or the
+        /// AutoCompleteType parameter is "off". When the AutoComplete
+        /// parameter is true, the value is <c>on</c> or, if set, the value of
+        /// AutoCompleteType.</value>
+        public virtual string AutoCompleteAttribute
+        {
+            get => Attributes != null && Attributes.ContainsKey("AutoComplete") && $"{Attributes["AutoComplete"]}".ToLower() == "false" ? DefaultAutoCompleteAttribute :
+                Attributes != null && Attributes.ContainsKey("AutoComplete") ? Attributes["AutoComplete"] as string ?? AutoCompleteType.GetAutoCompleteValue() : AutoCompleteType.GetAutoCompleteValue();
+        }
+
+        /// <summary>
+        /// Gets or sets the default autocomplete attribute's string value.
+        /// </summary>
+        public virtual string DefaultAutoCompleteAttribute { get; set; } = "off";
+
+        object ariaAutoComplete;
+
+        /// <inheritdoc />
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            parameters = parameters.TryGetValue("aria-autocomplete", out ariaAutoComplete) ?
+                ParameterView.FromDictionary(parameters
+                    .ToDictionary().Where(i => i.Key != "aria-autocomplete").ToDictionary(i => i.Key, i => i.Value)
+                    .ToDictionary(i => i.Key, i => i.Value))
+                : parameters;
+
+            await base.SetParametersAsync(parameters);
+        }
+
+        /// <summary>
+        /// Gets or sets the default aria-autocomplete attribute's string value.
+        /// </summary>
+        public virtual string DefaultAriaAutoCompleteAttribute { get; set; } = "none";
+
+        /// <summary>
+        /// Gets the aria-autocomplete attribute's string value.
+        /// </summary>
+        public virtual string AriaAutoCompleteAttribute
+        {
+            get => AutoCompleteAttribute == DefaultAutoCompleteAttribute ? DefaultAriaAutoCompleteAttribute : ariaAutoComplete as string;
+        }
+
+    }
+
     /// <summary>
     /// Class FormComponent.
     /// Implements the <see cref="Radzen.RadzenComponent" />
@@ -162,6 +228,8 @@ namespace Radzen
         /// <returns>Task.</returns>
         public override Task SetParametersAsync(ParameterView parameters)
         {
+            var disabledChanged = parameters.DidParameterChange(nameof(Disabled), Disabled);
+
             var result = base.SetParametersAsync(parameters);
 
             if (EditContext != null && ValueExpression != null && FieldIdentifier.Model != EditContext.Model)
@@ -171,6 +239,11 @@ namespace Radzen
                 EditContext.OnValidationStateChanged += ValidationStateChanged;
             }
 
+            if (disabledChanged)
+            {
+                FormFieldContext?.DisabledChanged(Disabled);
+            }
+
             return result;
         }
 
@@ -230,6 +303,20 @@ namespace Radzen
         /// <returns>ClassList.</returns>
         protected ClassList GetClassList(string className) => ClassList.Create(className)
                                                                        .AddDisabled(Disabled)
-                                                                       .Add(FieldIdentifier, EditContext);
+                                                                       .Add(FieldIdentifier, EditContext)
+                                                                       .Add("rz-state-empty", !HasValue);
+
+        /// <summary> Provides support for RadzenFormField integration. </summary>
+        [CascadingParameter]
+        public IFormFieldContext FormFieldContext { get; set; }
+
+        /// <summary> Gets the current placeholder. Returns empty string if this component is inside a RadzenFormField.</summary>
+        protected string CurrentPlaceholder => FormFieldContext?.AllowFloatingLabel == true ? " " : Placeholder;
+
+        /// <inheritdoc/>
+        public virtual async ValueTask FocusAsync()
+        {
+            await Element.FocusAsync();
+        }
     }
 }

Radzen.Blazor/IChartSeries.cs

@@ -56,8 +56,13 @@ namespace Radzen.Blazor
         /// <param name="data">The data.</param>
         /// <param name="marginLeft">The left margin.</param>
         /// <param name="marginTop">The right margin.</param>
+        /// <param name="chartHeight">Height of the whole char area.</param>
         /// <returns>RenderFragment.</returns>
-        RenderFragment RenderTooltip(object data, double marginLeft, double marginTop);
+        RenderFragment RenderTooltip(object data, double marginLeft, double marginTop, double chartHeight);
+        /// <summary>
+        /// Renders a tooltip item with the specified data to be displayed in a shared tooltip
+        /// </summary>
+        RenderFragment RenderSharedTooltipItem(object category);
         /// <summary>
         /// Renders the legend item.
         /// </summary>
@@ -96,7 +101,7 @@ namespace Radzen.Blazor
         /// </summary>
         /// <param name="x">The x.</param>
         /// <param name="y">The y.</param>
-        object DataAt(double x, double y);
+        (object, Point) DataAt(double x, double y);
         /// <summary>
         /// Returns data chart position
         /// </summary>

Radzen.Blazor/IChartStackedAreaSeries.cs

@@ -0,0 +1,26 @@
+using System.Collections.Generic;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Marker interface for <see cref="RadzenStackedAreaSeries{TItem}" />.
+    /// </summary>
+    public interface IChartStackedAreaSeries
+    {
+        /// <summary>
+        /// Gets the count.
+        /// </summary>
+        /// <value>The count.</value>
+        int Count { get; }
+
+        /// <summary>
+        /// Gets the values for category.
+        /// </summary>
+        IEnumerable<double> ValuesForCategory(double category);
+
+        /// <summary>
+        /// Gets the value at the specified index.
+        /// </summary>
+        double ValueAt(int index);
+    }
+}

Radzen.Blazor/IChartStackedBarSeries.cs

@@ -0,0 +1,26 @@
+using System.Collections.Generic;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Marker interface for <see cref="RadzenStackedBarSeries{TItem}" />.
+    /// </summary>
+    public interface IChartStackedBarSeries : IChartBarSeries
+    {
+        /// <summary>
+        /// Gets the value at the specified index.
+        /// </summary>
+        double ValueAt(int index);
+
+        /// <summary>
+        /// Gets the values for category.
+        /// </summary>
+        IEnumerable<double> ValuesForCategory(double category);
+        /// <summary>
+        /// Gets the items for category.
+        /// </summary>
+        /// <param name="category"></param>
+        /// <returns></returns>
+        IEnumerable<object> ItemsForCategory(double category);
+    }
+}

Radzen.Blazor/IChartStackedColumnSeries.cs

@@ -0,0 +1,33 @@
+using System.Collections.Generic;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Marker interface for <see cref="RadzenStackedColumnSeries{TItem}" />.
+    /// </summary>
+    public interface IChartStackedColumnSeries
+    {
+        /// <summary>
+        /// Gets the count.
+        /// </summary>
+        /// <value>The count.</value>
+        int Count { get; }
+
+        /// <summary>
+        /// Gets the values for category.
+        /// </summary>
+        IEnumerable<double> ValuesForCategory(double category);
+
+        /// <summary>
+        /// Gets the items for category.
+        /// </summary>
+        /// <param name="category"></param>
+        /// <returns></returns>
+        IEnumerable<object> ItemsForCategory(double category);
+
+        /// <summary>
+        /// Gets the value at the specified index.
+        /// </summary>
+        double ValueAt(int index);
+    }
+}

Radzen.Blazor/IScheduler.cs

@@ -11,6 +11,11 @@ namespace Radzen.Blazor
     /// </summary>
     public interface IScheduler
     {
+        /// <summary>
+        /// Gets or sets the appointment move event callback.
+        /// </summary>
+        /// <value>The appointment move event callback.</value>
+        EventCallback<SchedulerAppointmentMoveEventArgs> AppointmentMove { get; set; }
         /// <summary>
         /// Gets the appointments in the specified range.
         /// </summary>
@@ -59,6 +64,26 @@ namespace Radzen.Blazor
         /// <param name="end">The end.</param>
         Task SelectSlot(DateTime start, DateTime end);
         /// <summary>
+        /// Selects the specified slot.
+        /// </summary>
+        /// <param name="start">The start.</param>
+        /// <param name="end">The end.</param>
+        /// <param name="appointments">The appointments for this range.</param>
+        Task<bool> SelectSlot(DateTime start, DateTime end, IEnumerable<AppointmentData> appointments);
+        /// <summary>
+        /// Selects the specified month.
+        /// </summary>
+        /// <param name="monthStart">The start of the month.</param>
+        /// <param name="appointments">The appointments for this range.</param>
+        Task SelectMonth(DateTime monthStart, IEnumerable<AppointmentData> appointments);
+        /// <summary>
+        /// Selects the specified more link.
+        /// </summary>
+        /// <param name="start">The start.</param>
+        /// <param name="end">The end.</param>
+        /// <param name="appointments">The appointments for this range.</param>
+        Task<bool> SelectMore(DateTime start, DateTime end, IEnumerable<AppointmentData> appointments);
+        /// <summary>
         /// Gets the appointment HTML attributes.
         /// </summary>
         /// <param name="item">The appointment.</param>
@@ -77,6 +102,31 @@ namespace Radzen.Blazor
         /// <param name="item">The item.</param>
         /// <returns>RenderFragment.</returns>
         RenderFragment RenderAppointment(AppointmentData item);
+
+        /// <summary>
+        /// Notifies the scheduler that the user has moved the mouse over the specified appointment.
+        /// </summary>
+        /// <param name="reference"></param>
+        /// <param name="data"></param>
+        Task MouseEnterAppointment(ElementReference reference, AppointmentData data);
+
+        /// <summary>
+        /// Returns true if the scheduler has a mouse enter appointment listener.
+        /// </summary>
+        bool HasMouseEnterAppointmentDelegate();
+
+        /// <summary>
+        /// Returns true if the scheduler has an AppointmentMove listener.
+        /// </summary>
+        bool HasAppointmentMoveDelegate();
+
+        /// <summary>
+        /// Notifies the scheduler that the user has moved the mouse out of the specified appointment.
+        /// </summary>
+        /// <param name="reference"></param>
+        /// <param name="data"></param>
+        /// <returns></returns>
+        Task MouseLeaveAppointment(ElementReference reference, AppointmentData data);
         /// <summary>
         /// Reloads this instance.
         /// </summary>

Radzen.Blazor/ISchedulerView.cs

@@ -1,4 +1,5 @@
 using System;
+using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
 
 namespace Radzen.Blazor
@@ -49,5 +50,11 @@ namespace Radzen.Blazor
         /// Gets the end date.
         /// </summary>
         DateTime EndDate { get; }
+        /// <summary>
+        /// Handles appointent move event.
+        /// </summary>
+        /// <param name="data"></param>
+        /// <returns></returns>
+        Task OnAppointmentMove(SchedulerAppointmentMoveEventArgs data);
     }
 }

Radzen.Blazor/LICENSE.txt

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-2022 Radzen Ltd
+Copyright (c) 2018-2024 Radzen Ltd
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

Radzen.Blazor/LinearScale.cs

@@ -88,11 +88,6 @@ namespace Radzen.Blazor
                 if (Step is IConvertible)
                 {
                     step = Convert.ToDouble(Step);
-
-                    if (step <= 0)
-                    {
-                        throw new ArgumentOutOfRangeException("Step must be greater than zero");
-                    }
                 }
             }
 
@@ -102,7 +97,7 @@ namespace Radzen.Blazor
                 end = Math.Ceiling(end / step) * step;
             }
 
-            if (!Double.IsFinite(Input.Start) && !Double.IsFinite(Input.End))
+            if (!double.IsFinite(Input.Start) || !double.IsFinite(Input.End))
             {
                 Input.Start = start = 0;
                 Input.End = end = 2;
@@ -110,7 +105,7 @@ namespace Radzen.Blazor
                 Round = false;
             }
 
-            if (!Double.IsFinite(start) && !Double.IsFinite(end))
+            if (!double.IsFinite(start) || !double.IsFinite(end))
             {
                 Input.Start = start = 0;
                 Input.End = end = 2;
@@ -118,6 +113,11 @@ namespace Radzen.Blazor
                 Round = false;
             }
 
+            if (step <= 0)
+            {
+                throw new ArgumentOutOfRangeException("Step must be greater than zero");
+            }
+
             return (start, end, step);
         }
     }

Radzen.Blazor/NotificationService.cs

@@ -31,35 +31,29 @@ namespace Radzen
         /// <param name="message">The message.</param>
         public void Notify(NotificationMessage message)
         {
-            var newMessage = new NotificationMessage()
+            if (message is null)
             {
-                Duration = message != null && message.Duration.HasValue ? message.Duration : 3000,
-                Severity = message.Severity,
-                Summary = message.Summary,
-                Detail = message.Detail,
-                Style = message.Style,
-                Click = message.Click,
-                CloseOnClick = message.CloseOnClick,
-                Payload = message.Payload
-            };
+                throw new ArgumentNullException(nameof(message));
+            }
 
-            if (!Messages.Contains(newMessage))
+            if (!Messages.Contains(message))
             {
-                Messages.Add(newMessage);
+                Messages.Add(message);
             }
         }
 
-      /// <summary>
-      /// Notifies the specified severity.
-      /// </summary>
-      /// <param name="severity">The severity.</param>
-      /// <param name="summary">The summary.</param>
-      /// <param name="detail">The detail.</param>
-      /// <param name="duration">The duration.</param>
-      /// <param name="click">The click event.</param>
-      /// <param name="closeOnClick">If true, then the notification will be closed when clicked on.</param>
-      /// <param name="payload">Used to store a custom payload that can be retreived later in the click event handler.</param>
-      public void Notify(NotificationSeverity severity = NotificationSeverity.Info, string summary = "", string detail = "", double duration = 3000, Action<NotificationMessage> click = null, bool closeOnClick = false, object payload = null)
+        /// <summary>
+        /// Notifies the specified severity.
+        /// </summary>
+        /// <param name="severity">The severity.</param>
+        /// <param name="summary">The summary.</param>
+        /// <param name="detail">The detail.</param>
+        /// <param name="duration">The duration.</param>
+        /// <param name="click">The click event.</param>
+        /// <param name="closeOnClick">If true, then the notification will be closed when clicked on.</param>
+        /// <param name="payload">Used to store a custom payload that can be retreived later in the click event handler.</param>
+        /// <param name="close">Action to be executed on close.</param>
+        public void Notify(NotificationSeverity severity = NotificationSeverity.Info, string summary = "", string detail = "", double duration = 3000, Action<NotificationMessage> click = null, bool closeOnClick = false, object payload = null, Action<NotificationMessage> close = null)
         {
             var newMessage = new NotificationMessage()
             {
@@ -68,6 +62,7 @@ namespace Radzen
                 Summary = summary,
                 Detail = detail,
                 Click = click,
+                Close = close,
                 CloseOnClick = closeOnClick,
                 Payload = payload
             };
@@ -82,38 +77,42 @@ namespace Radzen
     /// <summary>
     /// Class NotificationMessage.
     /// </summary>
-    public class NotificationMessage
+    public class NotificationMessage : IEquatable<NotificationMessage>
     {
         /// <summary>
         /// Gets or sets the duration.
         /// </summary>
         /// <value>The duration.</value>
-        public double? Duration { get; set; }
+        public double? Duration { get; set; } = 3000;
         /// <summary>
         /// Gets or sets the severity.
         /// </summary>
         /// <value>The severity.</value>
-        public NotificationSeverity Severity { get; set; }
+        public NotificationSeverity Severity { get; set; } = NotificationSeverity.Info;
         /// <summary>
         /// Gets or sets the summary.
         /// </summary>
         /// <value>The summary.</value>
-        public string Summary { get; set; }
+        public string Summary { get; set; } = string.Empty;
         /// <summary>
         /// Gets or sets the detail.
         /// </summary>
         /// <value>The detail.</value>
-        public string Detail { get; set; }
+        public string Detail { get; set; } = string.Empty;
         /// <summary>
         /// Gets or sets the style.
         /// </summary>
         /// <value>The style.</value>
-        public string Style { get; set; }
+        public string Style { get; set; } = string.Empty;
         /// <summary>
         /// Gets or sets the click event.
         /// </summary>
         /// <value>This event handler is called when the notification is clicked on.</value>
-        public Action<NotificationMessage> Click { get; set; }
+        public Action<NotificationMessage> Click { get; set; } 
+        /// <summary>
+        /// Get or set the event for when the notification is closed
+        /// </summary>
+        public Action<NotificationMessage> Close { get; set; }
         /// <summary>
         /// Gets or sets click on close action.
         /// </summary>
@@ -124,5 +123,90 @@ namespace Radzen
         /// </summary>
         /// <value>Used to store a custom payload that can be retreived later in the click event handler.</value>
         public object Payload { get; set; }
-   }
+
+        /// <summary>
+        /// Gets or sets the detail content.
+        /// </summary>
+        /// <value>The detail content.</value>
+        public RenderFragment<NotificationService> DetailContent { get; set; }
+        /// <summary>
+        /// Gets or sets the summary content.
+        /// </summary>
+        /// <value>The summary content.</value>
+        public RenderFragment<NotificationService> SummaryContent { get; set; }
+
+
+        #region Implementation of IEquatable<NotificationMessage> and operators overloading
+
+        /// <summary>
+        /// Check if NotificationMessage instance is equal to current instance.
+        /// </summary>
+        /// <param name="other"></param>
+        /// <returns></returns>
+        public bool Equals(NotificationMessage other)
+        {
+            if(other == null) return false;
+            
+            if(object.ReferenceEquals(this, other)) return true;
+
+            return this.Severity == other.Severity 
+                && this.Summary == other.Summary 
+                && this.Detail == other.Detail 
+                && this.Duration == other.Duration
+                && this.Style == other.Style
+                && this.Click == other.Click
+                && this.Close == other.Close
+                && this.CloseOnClick == other.CloseOnClick
+                && this.Payload == other.Payload
+                && this.DetailContent == other.DetailContent
+                && this.SummaryContent == other.SummaryContent;
+        }
+
+        /// <summary>
+        /// Check if object instance is equal to current instance.
+        /// </summary>
+        /// <param name="obj"></param>
+        /// <returns></returns>
+        public override bool Equals(object obj) => Equals(obj as NotificationMessage);
+
+        /// <summary>
+        ///  Return a hash code for the current object
+        /// </summary>
+        /// <returns></returns>
+        public override int GetHashCode() => (Summary, Detail, Duration, Style, Click, Close, CloseOnClick, Payload, SummaryContent, DetailContent).GetHashCode();
+
+        /// <summary>
+        /// Overloading == operator for NotificationMessage.
+        /// </summary>
+        /// <param name="message"></param>
+        /// <param name="otherMessage"></param>
+        /// <returns></returns>
+        public static bool operator ==(NotificationMessage message, NotificationMessage otherMessage)
+        {
+            if (message is null)
+            {
+                if (otherMessage is null)
+                {
+                    return true;
+                }
+
+                return false;
+            }
+
+            return message.Equals(otherMessage);
+        }
+
+        /// <summary>
+        /// Overloading != operator for NotificationMessage.
+        /// </summary>
+        /// <param name="message"></param>
+        /// <param name="otherMessage"></param>
+        /// <returns></returns>
+        public static bool operator !=(NotificationMessage message, NotificationMessage otherMessage)
+        {
+            return !(message == otherMessage);
+        }
+
+        #endregion
+    }
 }

Radzen.Blazor/OData.cs

@@ -5,6 +5,7 @@ using System.Collections.Generic;
 using System.Text.Json;
 using System.Text.Json.Serialization;
 using System.Web;
+using System.Globalization;
 
 namespace Radzen
 {
@@ -211,7 +212,7 @@ namespace Radzen
         /// <param name="options">The options.</param>
         public override void Write(Utf8JsonWriter writer, DateTime value, JsonSerializerOptions options)
         {
-            writer.WriteStringValue(value.ToString("yyyy-MM-ddTHH:mm:ss.fffZ"));
+            writer.WriteStringValue(value.ToString("yyyy-MM-ddTHH:mm:ss.fffZ", CultureInfo.InvariantCulture));
         }
     }
 
@@ -230,9 +231,10 @@ namespace Radzen
         /// <param name="orderby">The orderby.</param>
         /// <param name="expand">The expand.</param>
         /// <param name="select">The select.</param>
+        /// <param name="apply">The apply.</param>
         /// <param name="count">if set to <c>true</c> [count].</param>
         /// <returns>Uri.</returns>
-        public static Uri GetODataUri(this Uri uri, string filter = null, int? top = null, int? skip = null, string orderby = null, string expand = null, string select = null, bool? count = null)
+        public static Uri GetODataUri(this Uri uri, string filter = null, int? top = null, int? skip = null, string orderby = null, string expand = null, string select = null, string apply = null, bool? count = null)
         {
             var uriBuilder = new UriBuilder(uri);
             var queryString = HttpUtility.ParseQueryString(uriBuilder.Query);
@@ -267,6 +269,11 @@ namespace Radzen
                 queryString["$select"] = $"{select}";
             }
 
+            if (!string.IsNullOrEmpty(apply))
+            {
+                queryString["$apply"] = $"{apply}";
+            }
+
             if (count != null)
             {
                 queryString["$count"] = $"{count}".ToLower();

Radzen.Blazor/PagedDataBoundComponent.cs

@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.Collections.Specialized;
 using System.Linq;
 using System.Linq.Dynamic.Core;
 using System.Threading.Tasks;
@@ -35,6 +36,12 @@ namespace Radzen
         [Parameter]
         public HorizontalAlign PagerHorizontalAlign { get; set; } = HorizontalAlign.Justify;
 
+        /// <summary>
+        /// Gets or sets a value indicating pager density.
+        /// </summary>
+        [Parameter]
+        public Density Density { get; set; } = Density.Default;
+
         /// <summary>
         /// Gets or sets a value indicating whether paging is allowed. Set to <c>false</c> by default.
         /// </summary>
@@ -56,10 +63,24 @@ namespace Radzen
             }
             set
             {
-                _PageSize = value;
+                if (_PageSize != value)
+                {
+                    _PageSize = value;
+                    InvokeAsync(() => OnPageSizeChanged(value));
+                }
             }
         }
 
+        internal int GetPageSize()
+        {
+            return _PageSize;
+        }
+
+        internal void SetPageSize(int value)
+        {
+            _PageSize = value;
+        }
+
         /// <summary>
         /// Gets or sets the page numbers count.
         /// </summary>
@@ -86,6 +107,13 @@ namespace Radzen
         [Parameter]
         public RenderFragment<T> Template { get; set; }
 
+        /// <summary>
+        /// Gets or sets the loading template.
+        /// </summary>
+        /// <value>The loading template.</value>
+        [Parameter]
+        public RenderFragment LoadingTemplate { get; set; }
+
         /// <summary>
         /// The data
         /// </summary>
@@ -107,12 +135,37 @@ namespace Radzen
                 if (_data != value)
                 {
                     _data = value;
+
+                    if (_data != null && _data is INotifyCollectionChanged)
+                    {
+                        ((INotifyCollectionChanged)_data).CollectionChanged += OnCollectionChanged;
+                    }
+
                     OnDataChanged();
                     StateHasChanged();
                 }
             }
         }
 
+        /// <summary>
+        /// Called when INotifyCollectionChanged CollectionChanged is raised.
+        /// </summary>
+        protected virtual void OnCollectionChanged(object sender, NotifyCollectionChangedEventArgs args)
+        {
+
+        }
+
+        /// <inheritdoc />
+        public override void Dispose()
+        {
+            base.Dispose();
+
+            if (_data != null && _data is INotifyCollectionChanged)
+            {
+                ((INotifyCollectionChanged)_data).CollectionChanged -= OnCollectionChanged;
+            }
+        }
+
         /// <summary>
         /// Gets or sets the page size options.
         /// </summary>
@@ -141,6 +194,78 @@ namespace Radzen
         [Parameter]
         public string PagingSummaryFormat { get; set; } = "Page {0} of {1} ({2} items)";
 
+        /// <summary>
+        /// Gets or sets the pager's first page button's title attribute.
+        /// </summary>
+        [Parameter]
+        public string FirstPageTitle { get; set; } = "First page.";
+
+        /// <summary>
+        /// Gets or sets the pager's first page button's aria-label attribute.
+        /// </summary>
+        [Parameter]
+        public string FirstPageAriaLabel { get; set; } = "Go to first page.";
+
+        /// <summary>
+        /// Gets or sets the pager's optional previous page button's label text.
+        /// </summary>
+        [Parameter]
+        public string PrevPageLabel { get; set; }
+
+        /// <summary>
+        /// Gets or sets the pager's previous page button's title attribute.
+        /// </summary>
+        [Parameter]
+        public string PrevPageTitle { get; set; } = "Previous page";
+
+        /// <summary>
+        /// Gets or sets the pager's previous page button's aria-label attribute.
+        /// </summary>
+        [Parameter]
+        public string PrevPageAriaLabel { get; set; } = "Go to previous page.";
+
+        /// <summary>
+        /// Gets or sets the pager's last page button's title attribute.
+        /// </summary>
+        [Parameter]
+        public string LastPageTitle { get; set; } = "Last page";
+
+        /// <summary>
+        /// Gets or sets the pager's last page button's aria-label attribute.
+        /// </summary>
+        [Parameter]
+        public string LastPageAriaLabel { get; set; } = "Go to last page.";
+
+        /// <summary>
+        /// Gets or sets the pager's optional next page button's label text.
+        /// </summary>
+        [Parameter]
+        public string NextPageLabel { get; set; }
+
+        /// <summary>
+        /// Gets or sets the pager's next page button's title attribute.
+        /// </summary>
+        [Parameter]
+        public string NextPageTitle { get; set; } = "Next page";
+
+        /// <summary>
+        /// Gets or sets the pager's next page button's aria-label attribute.
+        /// </summary>
+        [Parameter]
+        public string NextPageAriaLabel { get; set; } = "Go to next page.";
+        
+        /// <summary>
+        /// Gets or sets the pager's numeric page number buttons' title attributes.
+        /// </summary>
+        [Parameter]
+        public string PageTitleFormat { get; set; } = "Page {0}";
+        
+        /// <summary>
+        /// Gets or sets the pager's numeric page number buttons' aria-label attributes.
+        /// </summary>
+        [Parameter]
+        public string PageAriaLabelFormat { get; set; } = "Go to page {0}.";
+        
         internal IQueryable<T> _view = null;
         /// <summary>
         /// Gets the paged view.
@@ -316,8 +441,11 @@ namespace Radzen
         /// <param name="value">The value.</param>
         protected virtual async Task OnPageSizeChanged(int value)
         {
-            pageSize = value;
-            await InvokeAsync(Reload);
+            if (pageSize != value && !this.firstRender)
+            {
+                pageSize = value;
+                await InvokeAsync(Reload);
+            }
         }
 
         /// <summary>

Radzen.Blazor/QueryStringThemeService.cs

@@ -0,0 +1,189 @@
+using System;
+using System.Collections.Generic;
+using System.Reflection;
+using System.Threading.Tasks;
+using System.Web;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Routing;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Options;
+
+namespace Radzen
+{
+    /// <summary>
+    /// Options for the <see cref="QueryStringThemeService" />.
+    /// </summary>
+    public class QueryStringThemeServiceOptions
+    {
+        /// <summary>
+        /// Gets or sets the query string parameter for the theme.
+        /// </summary>
+        public string ThemeParameter { get; set; } = "theme";
+        /// <summary>
+        /// Gets or sets the query string parameter for the wcag compatible color theme.
+        /// </summary>
+        public string WcagParameter { get; set; } = "wcag";
+
+        /// <summary>
+        /// Gets or sets the query string parameter for the right to left theme.
+        /// </summary>
+        public string RightToLeftParameter { get; set; } = "rtl";
+    }
+
+    /// <summary>
+    /// Persist the current theme in the query string. Requires <see cref="ThemeService" /> to be registered in the DI container.
+    /// </summary>
+    public class QueryStringThemeService : IDisposable
+    {
+        private readonly NavigationManager navigationManager;
+        private readonly ThemeService themeService;
+
+#if NET7_0_OR_GREATER
+        private readonly IDisposable registration;
+#endif
+        private readonly QueryStringThemeServiceOptions options;
+        private readonly PropertyInfo hasAttachedJSRuntimeProperty;
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="QueryStringThemeService" /> class.
+        /// </summary>
+        public QueryStringThemeService(NavigationManager navigationManager, ThemeService themeService, IOptions<QueryStringThemeServiceOptions> options)
+        {
+            this.navigationManager = navigationManager;
+
+            this.themeService = themeService;
+
+            this.options = options.Value;
+
+            hasAttachedJSRuntimeProperty = navigationManager.GetType().GetProperty("HasAttachedJSRuntime");
+
+            var state = GetStateFromQueryString(navigationManager.Uri);
+
+            if (state.theme != null && RequiresChange(state))
+            {
+                themeService.SetTheme(new ThemeOptions
+                {
+                    Theme = state.theme,
+                    Wcag = state.wcag,
+                    RightToLeft = state.rightToLeft,
+                    TriggerChange = true
+                });
+            }
+
+            themeService.ThemeChanged += OnThemeChanged;
+
+#if NET7_0_OR_GREATER
+            try
+            {
+                registration = navigationManager.RegisterLocationChangingHandler(OnLocationChanging);
+            }
+            catch (NotSupportedException)
+            {
+                // HttpNavigationManager does not support that
+            }
+#endif
+        }
+
+        private bool RequiresChange((string theme, bool? wcag, bool? rightToLeft) state) =>
+            (state.theme != null && !string.Equals(themeService.Theme, state.theme, StringComparison.OrdinalIgnoreCase)) ||
+            themeService.Wcag != state.wcag || themeService.RightToLeft != state.rightToLeft;
+
+#if NET7_0_OR_GREATER
+        private ValueTask OnLocationChanging(LocationChangingContext context)
+        {
+            var state = GetStateFromQueryString(context.TargetLocation);
+
+            if (RequiresChange(state))
+            {
+                context.PreventNavigation();
+
+                navigationManager.NavigateTo(GetUriWithStateQueryParameters(context.TargetLocation), replace: true);
+            }
+
+            return ValueTask.CompletedTask;
+        }
+#endif
+
+        private (string theme, bool? wcag, bool? rightToLeft) GetStateFromQueryString(string uri)
+        {
+            var queryString = uri.Contains('?') ? uri[(uri.IndexOf('?') + 1)..] : string.Empty;
+
+            var query = HttpUtility.ParseQueryString(queryString.Contains('#') ? queryString[..queryString.IndexOf('#')] : queryString);
+
+            bool? wcag = query.Get(options.WcagParameter) != null ? query.Get(options.WcagParameter) == "true" : null;
+            bool? rtl = query.Get(options.RightToLeftParameter) != null ? query.Get(options.RightToLeftParameter) == "true" : null;
+
+            return (query.Get(options.ThemeParameter), wcag, rtl);
+        }
+
+        private string GetUriWithStateQueryParameters(string uri)
+        {
+            var parameters = new Dictionary<string, object>
+            {
+                { options.ThemeParameter, themeService.Theme.ToLowerInvariant() },
+            };
+
+            if (themeService.Wcag.HasValue)
+            {
+                parameters.Add(options.WcagParameter, themeService.Wcag.Value ? "true" : "false");
+            }
+
+            if (themeService.RightToLeft.HasValue)
+            {
+                parameters.Add(options.RightToLeftParameter, themeService.RightToLeft.Value ? "true" : "false");
+            }
+
+            return navigationManager.GetUriWithQueryParameters(uri, parameters);
+        }
+
+        private void OnThemeChanged()
+        {
+
+            if (hasAttachedJSRuntimeProperty is null || hasAttachedJSRuntimeProperty.GetValue(navigationManager) is true)
+            {
+                var state = GetStateFromQueryString(navigationManager.Uri);
+
+                navigationManager.NavigateTo(GetUriWithStateQueryParameters(navigationManager.Uri),
+                    forceLoad: state.rightToLeft != themeService.RightToLeft);
+            }
+        }
+
+        /// <inheritdoc />
+        public void Dispose()
+        {
+            themeService.ThemeChanged -= OnThemeChanged;
+
+#if NET7_0_OR_GREATER
+            registration?.Dispose();
+#endif
+        }
+    }
+
+    /// <summary>
+    /// Extension methods to register the <see cref="QueryStringThemeService" />.
+    /// </summary>
+    public static class QueryStringThemeServiceCollectionExtensions
+    {
+        /// <summary>
+        /// Adds the <see cref="QueryStringThemeService" /> to the service collection.
+        /// </summary>
+        public static IServiceCollection AddRadzenQueryStringThemeService(this IServiceCollection services)
+        {
+            services.AddOptions<QueryStringThemeServiceOptions>();
+            services.AddScoped<QueryStringThemeService>();
+
+            return services;
+        }
+
+        /// <summary>
+        /// Adds the <see cref="QueryStringThemeService" /> to the service collection with the specified condiguration.
+        /// </summary>
+        public static IServiceCollection AddRadzenQueryStringThemeService(this IServiceCollection services, Action<QueryStringThemeServiceOptions> configure)
+        {
+            services.Configure(configure);
+            services.AddScoped<QueryStringThemeService>();
+
+            return services;
+        }
+    }
+}

Radzen.Blazor/README.md

@@ -1,105 +0,0 @@
-## Radzen Blazor is a set of 70+ free native Blazor UI controls packed with DataGrid, Scheduler, Charts and robust theming including Material design and Fluent UI.
-
-![Radzen Blazor Components](https://raw.githubusercontent.com/radzenhq/radzen-blazor/master/RadzenBlazorDemos/wwwroot/images/radzen-blazor-components.png)
-
-## Why choose Radzen Blazor Components?
-
-### :sparkles: Free
-
-Radzen Blazor Components are open source and free for commercial use. You can install them from [nuget](https://www.nuget.org/packages/Radzen.Blazor) or build your own copy from source.
-
-Paid support is available as part of the [Radzen Professional subscription](https://www.radzen.com/blazor-studio/pricing/).
-
-### :computer: Native
-
-The components are implemented in C# and take full advantage of the Blazor framework. They do not depend on or wrap existing JavaScript frameworks or libraries.
-
-Blazor Server and Blazor WebAssembly are fully supported.
-
-### :seedling: Growing
-
-We add new components and features on a regular basis.
-
-Short development cycle. We release as soon as new stuff is available. No more quarterly releases.
-
-## Support exceeding your expectations
-
-### :speech_balloon: Community Support
-Everybody is welcome to visit the [Radzen Community forum](https://forum.radzen.com/). Join the growing community and participate in the discussions!
-
-### :dart: Dedicated Support
-
-The Radzen team monitors the forum threads, but does not guarantee a response to every question. For guaranteed responses you may consider the dedicated support option.
-
-Dedicated support for the Radzen Blazor Components is available as part of the [Radzen Professional subscription](https://www.radzen.com/blazor-studio/pricing/).
-
-Our flagship product [Radzen Blazor Studio](https://www.radzen.com/blazor-studio/) provides tons of productivity features for Blazor developers:
-- An industry-leading WYSIWYG Blazor design time canvas
-- Scaffolding a complete CRUD applications from a database
-- Built-in security - authentication and authorization
-- Visual Studio Code and Professional support
-- Deployment to IIS and Azure
-- Dedicated support with 24 hour guaranteed response time
-
-## Get started with Radzen Blazor Components
-
-### 1. Install
-
-Radzen Blazor Components are distributed as a [Radzen.Blazor nuget package](https://www.nuget.org/packages/Radzen.Blazor). You can add them to your project in one of the following ways
-- Install the package from command line by running `dotnet add package Radzen.Blazor`
-- Add the project from the Visual Nuget Package Manager
-- Manually edit the .csproj file and add a project reference
-
-### 2. Import the namespace
-
-Open the `_Imports.razor` file of your Blazor application and add this line `@using Radzen.Blazor`.
-
-### 3. Include a theme
-Radzen Blazor components come with five free themes: Material, Standard, Default, Dark, Software and Humanistic.
-
-To use a theme
-1. Pick a theme. The [online demos](https://blazor.radzen.com/colors) allow you to preview the available options via the theme dropdown located in the header. The Material theme is currently selected by default.
-1. Include the theme CSS file in your Blazor application. Open `Pages\_Layout.cshtml` (Blazor Server .NET 6), `Pages\_Host.cshtml` (Blazor Server .NET 7) or `wwwroot/index.html` (Blazor WebAssembly) and include a theme CSS file by adding this snippet
-   ```html
-   <link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
-   ```
-
-To include a different theme (i.e. Standard) just change the name of the CSS file:
-```
-<link rel="stylesheet" href="_content/Radzen.Blazor/css/standard-base.css">
-```
-
-### 4. Include Radzen.Blazor.js
-
-Open `Pages\_Layout.cshtml` (Blazor Server .NET 6), `Pages\_Host.cshtml` (Blazor Server .NET 7) or `wwwroot/index.html` (Blazor WebAssembly) and include this snippet:
-
-```html
-<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
-```
-
-### 5. Use a component
-Use any Radzen Blazor component by typing its tag name in a Blazor page e.g.
-```html
-<RadzenButton Text="Hi"></RadzenButton>
-```
-
-#### Data-binding a property
-```razor
-<RadzenButton Text=@text />
-<RadzenTextBox @bind-Value=@text />
-@code {
-  string text = "Hi";
-}
-```
-
-#### Handing events
-
-```razor
-<RadzenButton Click="@ButtonClicked" Text="Hi"></RadzenButton>
-@code {
-  void ButtonClicked()
-  {
-
-  }
-}
-```

Radzen.Blazor/Radzen.Blazor.csproj

@@ -1,44 +1,43 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
   <PropertyGroup>
-    <NoWarn>BL9993</NoWarn>
-    <TargetFrameworks>netstandard2.1;net5.0;net6.0;net7.0</TargetFrameworks>
-    <RazorLangVersion>3.0</RazorLangVersion>
-    <LangVersion>7.3</LangVersion>
+    <IncludeSymbols>true</IncludeSymbols>
+    <SymbolPackageFormat>snupkg</SymbolPackageFormat>
+    <NoWarn>BL9993;BL0007;BL0005</NoWarn>
+    <TargetFrameworks>net6.0;net7.0;net8.0</TargetFrameworks>
+    <RazorLangVersion>7.0</RazorLangVersion>
+    <LangVersion>latest</LangVersion>
     <OutputType>Library</OutputType>
     <IsPackable>true</IsPackable>
     <PackageId>Radzen.Blazor</PackageId>
     <Product>Radzen.Blazor</Product>
-    <Version>4.4.3</Version>
+    <Version>5.3.1</Version>
     <Copyright>Radzen Ltd.</Copyright>
     <Authors>Radzen Ltd.</Authors>
-    <Description>Radzen Blazor is a set of 70+ free native Blazor UI controls packed with DataGrid, Scheduler, Charts and robust theming including Material design and Fluent UI.</Description>
+    <Description>Radzen Blazor is a set of 90+ free native Blazor UI controls packed with DataGrid, Scheduler, Charts and robust theming including Material design and Fluent UI.</Description>
     <PackageTags>blazor material design fluent fluentui components datagrid scheduler charts</PackageTags>
-	<PackageReadmeFile>README.md</PackageReadmeFile>
+    <PackageReadmeFile>README.md</PackageReadmeFile>
     <PackageProjectUrl>https://www.radzen.com</PackageProjectUrl>
     <PackageIcon>icon.png</PackageIcon>
-    <PackageLicenseFile>LICENSE.txt</PackageLicenseFile>
+    <PackageLicenseExpression>MIT</PackageLicenseExpression>
     <Title>Radzen Components for Blazor</Title>
     <RepositoryUrl>https://github.com/radzenhq/radzen-blazor</RepositoryUrl>
     <GenerateDocumentationFile>true</GenerateDocumentationFile>
   </PropertyGroup>
   <ItemGroup>
-    <PackageReference Include="LibSassBuilder" Version="2.0.1" />
-    <PackageReference Include="Microsoft.AspNetCore.Components" Condition="'$(TargetFramework)' == 'netstandard2.1'" Version="3.1.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Condition="'$(TargetFramework)' == 'netstandard2.1'" Version="3.1.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components" Condition="'$(TargetFramework)' == 'net5.0'" Version="5.0.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Condition="'$(TargetFramework)' == 'net5.0'" Version="5.0.0" />
-	<PackageReference Include="Microsoft.AspNetCore.Components" Condition="'$(TargetFramework)' == 'net6.0'" Version="6.0.0" />
-	<PackageReference Include="Microsoft.AspNetCore.Components.Web" Condition="'$(TargetFramework)' == 'net6.0'" Version="6.0.0" />
-	<PackageReference Include="Microsoft.AspNetCore.Components" Condition="'$(TargetFramework)' == 'net7.0'" Version="7.0.0" />
-	<PackageReference Include="Microsoft.AspNetCore.Components.Web" Condition="'$(TargetFramework)' == 'net7.0'" Version="7.0.0" />
-	<PackageReference Include="Microsoft.CSharp" Version="4.7.0" />
-    <PackageReference Include="System.Linq.Dynamic.Core" Version="1.2.22" />
+    <PackageReference Include="DartSassBuilder" Version="1.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components" Condition="'$(TargetFramework)' == 'net6.0'" Version="6.0.25" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Condition="'$(TargetFramework)' == 'net6.0'" Version="6.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components" Condition="'$(TargetFramework)' == 'net7.0'" Version="7.0.14" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Condition="'$(TargetFramework)' == 'net7.0'" Version="7.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components" Condition="'$(TargetFramework)' == 'net8.0'" Version="8.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Condition="'$(TargetFramework)' == 'net8.0'" Version="8.0.0" />
+    <PackageReference Include="System.Linq.Dynamic.Core" Version="1.3.7" />
   </ItemGroup>
 
   <ItemGroup>
     <None Include="LICENSE.txt" Pack="true" PackagePath="" />
     <None Include="icon.png" Pack="true" PackagePath="" />
-	<None Include="README.md" Pack="true" PackagePath="\"/>
+    <None Include="..\README.md" Pack="true" PackagePath="\" />
   </ItemGroup>
 
   <ItemGroup>
@@ -48,8 +47,8 @@
   </ItemGroup>
 
   <PropertyGroup>
-    <LibSassOutputStyle>expanded</LibSassOutputStyle>
-    <EnableDefaultSassItems>false</EnableDefaultSassItems>  
+    <DartSassOutputStyle>expanded</DartSassOutputStyle>
+    <EnableDefaultSassItems>false</EnableDefaultSassItems>
   </PropertyGroup>
 
   <ItemGroup>
@@ -59,17 +58,17 @@
  <Target Name="Sass" BeforeTargets="BeforeBuild" Condition="'$(TargetFramework)' == 'net6.0'">
     <PropertyGroup>
       <_SassFileList>@(Sass->'&quot;%(FullPath)&quot;', ' ')</_SassFileList>
-      <LibSassBuilderArgs>files $(_SassFileList) --outputstyle $(LibSassOutputStyle) --level $(LibSassOutputLevel)</LibSassBuilderArgs>
+      <DartSassBuilderArgs>files $(_SassFileList) --outputstyle $(DartSassOutputStyle) --level $(DartSassOutputLevel)</DartSassBuilderArgs>
     </PropertyGroup>
-    <Message Text="$(LibSassBuilderArgs)" Importance="$(LibSassMessageLevel)" />
-    <Message Text="Converted SassFile list to argument" Importance="$(LibSassMessageLevel)" />
+    <Message Text="$(DartSassBuilderArgs)" Importance="$(DartSassMessageLevel)" />
+    <Message Text="Converted SassFile list to argument" Importance="$(DartSassMessageLevel)" />
   </Target>
 
-  <Target Name="MoveCss" AfterTargets="AfterCompile" Condition="'$(TargetFramework)' == 'net6.0'" >
+  <Target Name="MoveCss" AfterTargets="AfterCompile" Condition="'$(TargetFramework)' == 'net6.0'">
     <ItemGroup>
         <CssFile Include="$(MSBuildProjectDirectory)/themes/*.css" />
     </ItemGroup>
     <Move SourceFiles="@(CssFile)" DestinationFolder="$(MSBuildProjectDirectory)/wwwroot/css/" />
   </Target>
 
-</Project>
+</Project>

Radzen.Blazor/RadzenAccordion.razor

@@ -10,31 +10,37 @@
 }
 @if (Visible)
 {
-<div @ref="@Element" role="tablist" style=@Style @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
+<div @ref="@Element" role="tablist" style=@Style @attributes="Attributes" class="@GetCssClass()" id="@GetId()" 
+    tabindex="0" @onkeydown="@((args) => OnKeyPress(args))" @onkeydown:preventDefault=preventKeyPress @onkeydown:stopPropagation=preventKeyPress 
+    @onfocus=@(args => focusedIndex = focusedIndex == -1 ? 0: focusedIndex)>
     @for (var i = 0; i < items.Count; i++)
     {
-        var item = items[i];
+        var item = items[i];    
         if (!item.Visible)
             continue;
 
-        <div @ref="@item.Element" id="@item.GetItemId()" @attributes="item.Attributes" class="@item.GetItemCssClass()" style="@item.Style">
-            <a @onclick="@((args) => SelectItem(item))" href="javascript:void(0)" role="tab" tabindex="0"
+        <div @ref="@item.Element" id="@item.GetItemId()" @attributes="item.Attributes" class="@item.GetItemCssClass()" style="@item.Style" @onkeydown:stopPropagation>
+            <a @onclick="@((args) => SelectItem(item))" aria-label="@ItemAriaLabel(i, item)" title="@ItemTitle(i, item)" @onclick:preventDefault="true" role="tab" 
                id="@($"rz-accordiontab-{items.IndexOf(item)}")" aria-controls="@($"rz-accordiontab-{items.IndexOf(item)}-content")" aria-expanded="true">
                 @if (IsSelected(i, item))
                 {
-                    <span class="rz-accordion-toggle-icon rzi rzi-chevron-down"></span>
+                    <span class="notranslate rz-accordion-toggle-icon rzi rzi-chevron-down"></span>
                 }
                 else
                 {
-                    <span class="rz-accordion-toggle-icon rzi rzi-chevron-right"></span>
+                    <span class="notranslate rz-accordion-toggle-icon rzi rzi-chevron-right"></span>
                 }
                 @if (!string.IsNullOrEmpty(item.Icon))
                 {
-            <i class="rzi">@((MarkupString)item.Icon)</i>
+            <i class="notranslate rzi" style="@(!string.IsNullOrEmpty(item.IconColor) ? $"color:{item.IconColor}" : null)">@((MarkupString)item.Icon)</i>
                 }
-                @if (!string.IsNullOrEmpty(item.Text))
+                @if (item.Template != null)
                 {
-                    <span>@item.Text</span>
+                    @item.Template
+                }
+                else if(!string.IsNullOrEmpty(item.Text))
+                {
+                    <span>@((MarkupString)item.Text)</span>
                 }
             </a>
         </div>
@@ -42,7 +48,7 @@
         {
             <div class="rz-accordion-content-wrapper" role="tabpanel"
                  id="@($"rz-accordiontab-{items.IndexOf(item)}-content")" aria-hidden="false" aria-labelledby="@($"rz-accordiontab-{items.IndexOf(item)}")">
-                <div class="rz-accordion-content ">
+                <div class="rz-accordion-content" @onkeydown:stopPropagation>
                     @item.ChildContent
                 </div>
             </div>

Radzen.Blazor/RadzenAccordion.razor.cs

@@ -1,6 +1,9 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using System;
 using System.Collections.Generic;
 using System.Linq;
+using System.Threading.Tasks;
 
 namespace Radzen.Blazor
 {
@@ -41,7 +44,14 @@ namespace Radzen.Blazor
         /// </summary>
         /// <value>The index of the selected item.</value>
         [Parameter]
-        public int SelectedIndex { get; set; } = 0;
+        public int SelectedIndex { get; set; }
+
+        /// <summary>
+        /// Gets or sets the value changed.
+        /// </summary>
+        /// <value>The value changed.</value>
+        [Parameter]
+        public EventCallback<int> SelectedIndexChanged { get; set; }
 
         /// <summary>
         /// Gets or sets a callback raised when the item is expanded.
@@ -74,18 +84,9 @@ namespace Radzen.Blazor
         {
             if (items.IndexOf(item) == -1)
             {
-                if (item.Selected)
+                if (item.GetSelected())
                 {
-                    SelectedIndex = items.Count;
-                    if (!Multiple)
-                    {
-                        expandedIdexes.Clear();
-                    }
-
-                    if (!expandedIdexes.Contains(SelectedIndex))
-                    {
-                        expandedIdexes.Add(SelectedIndex);
-                    }
+                    SelectedIndexChanged.InvokeAsync(items.Count);
                 }
 
                 items.Add(item);
@@ -125,30 +126,63 @@ namespace Radzen.Blazor
         /// <returns><c>true</c> if the specified index is selected; otherwise, <c>false</c>.</returns>
         protected bool IsSelected(int index, RadzenAccordionItem item)
         {
-            return expandedIdexes.Contains(index);
+            return item.GetSelected() == true;
         }
 
-        List<int> expandedIdexes = new List<int>();
+        /// <summary>
+        /// Gets the item's title attribute value.
+        /// </summary>
+        /// <param name="index">The index.</param>
+        /// <param name="item">The item.</param>
+        /// <returns>The item's collapse or expand title value depending on if the item is expanded or collapsed.
+        /// If the relevant title is null or whitespace this method returns "Expand" or "Collapse".</returns>
+        protected string ItemTitle(int index, RadzenAccordionItem item)
+        {
+            if (IsSelected(index, item))
+            {
+                return string.IsNullOrWhiteSpace(item.CollapseTitle) ? "Collapse" : item.CollapseTitle;
+            }
+            return string.IsNullOrWhiteSpace(item.ExpandTitle) ? "Expand" : item.ExpandTitle;
+        }
 
-        internal async System.Threading.Tasks.Task SelectItem(RadzenAccordionItem item)
+        /// <summary>
+        /// Gets the item's aria-label attribute value.
+        /// </summary>
+        /// <param name="index">The index.</param>
+        /// <param name="item">The item.</param>
+        /// <returns>The item's collapse or expand aria-label value depending on if the item is expanded or collapsed.
+        /// If the relevant aria-label is null or whitespace this method returns "Expand" or "Collapse".</returns>
+        protected string ItemAriaLabel(int index, RadzenAccordionItem item)
+        {
+            if (IsSelected(index, item))
+            {
+                return string.IsNullOrWhiteSpace(item.CollapseAriaLabel) ? "Collapse" : item.CollapseAriaLabel;
+            }
+            return string.IsNullOrWhiteSpace(item.ExpandAriaLabel) ? "Expand" : item.ExpandAriaLabel;          
+        }
+        
+        internal async System.Threading.Tasks.Task SelectItem(RadzenAccordionItem item, bool? value = null)
         {
             await CollapseAll(item);
 
             var itemIndex = items.IndexOf(item);
-            if (!expandedIdexes.Contains(itemIndex))
+
+            var selected = item.GetSelected();
+
+            if (selected)
             {
-                expandedIdexes.Add(itemIndex);
-                await Expand.InvokeAsync(itemIndex);
+                await Collapse.InvokeAsync(itemIndex);
             }
             else
             {
-                expandedIdexes.Remove(itemIndex);
-                await Collapse.InvokeAsync(itemIndex);
+                await Expand.InvokeAsync(itemIndex);
             }
 
+            item.SetSelected(value ?? !selected);
+
             if (!Multiple)
             {
-                SelectedIndex = itemIndex;
+                await SelectedIndexChanged.InvokeAsync(itemIndex);
             }
 
             StateHasChanged();
@@ -160,14 +194,60 @@ namespace Radzen.Blazor
             {
                 foreach (var i in items.Where(i => i != item))
                 {
-                    var itemIndex = items.IndexOf(i);
-                    if (expandedIdexes.Contains(itemIndex))
+                    if (i.GetSelected())
                     {
-                        expandedIdexes.Remove(itemIndex);
+                        i.SetSelected(false);
                         await Collapse.InvokeAsync(items.IndexOf(i));
                     }
                 }
             }
         }
+
+        internal int focusedIndex = -1;
+        bool preventKeyPress = true;
+        async Task OnKeyPress(KeyboardEventArgs args)
+        {
+            var key = args.Code != null ? args.Code : args.Key;
+
+            if (key == "ArrowUp" || key == "ArrowDown")
+            {
+                preventKeyPress = true;
+
+                focusedIndex = Math.Clamp(focusedIndex + (key == "ArrowUp" ? -1 : 1), 0, items.Count - 1);
+            }
+            else if (key == "Space" || key == "Enter")
+            {
+                preventKeyPress = true;
+
+                if (focusedIndex >= 0 && focusedIndex < items.Count)
+                {
+                    await SelectItem(items.Where(i => i.Visible).ElementAt(focusedIndex));
+                }
+            }
+            else
+            {
+                preventKeyPress = false;
+            }
+        }
+
+        internal bool IsFocused(RadzenAccordionItem item)
+        {
+            return items.Where(i => i.Visible).ToList().IndexOf(item) == focusedIndex && focusedIndex != -1;
+        }
+
+        /// <inheritdoc />
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            if (parameters.DidParameterChange(nameof(SelectedIndex), SelectedIndex))
+            {
+                var item = items.Where(i => i.Visible).ElementAtOrDefault(parameters.GetValueOrDefault<int>(nameof(SelectedIndex)));
+                if (item != null && !item.GetSelected())
+                {
+                    await SelectItem(item);
+                }
+            }
+            
+            await base.SetParametersAsync(parameters);
+        }
     }
 }

Radzen.Blazor/RadzenAccordionItem.cs

@@ -22,6 +22,13 @@ namespace Radzen.Blazor
         [Parameter]
         public string Icon { get; set; }
 
+        /// <summary>
+        /// Gets or sets the icon color.
+        /// </summary>
+        /// <value>The icon color.</value>
+        [Parameter]
+        public string IconColor { get; set; }
+
         /// <summary>
         /// Gets or sets a value indicating whether this <see cref="RadzenAccordionItem"/> is selected.
         /// </summary>
@@ -29,6 +36,34 @@ namespace Radzen.Blazor
         [Parameter]
         public bool Selected { get; set; }
 
+        /// <summary>
+        /// Gets or sets the title attribute of the expand button.
+        /// </summary>
+        /// <value>The title attribute value of the expand button.</value>
+        [Parameter]
+        public string ExpandTitle { get; set; }
+        
+        /// <summary>
+        /// Gets or sets the title attribute of the collapse button.
+        /// </summary>
+        /// <value>The title attribute value of the collapse button.</value>
+        [Parameter]
+        public string CollapseTitle { get; set; }
+        
+        /// <summary>
+        /// Gets or sets the aria-label attribute of the expand button.
+        /// </summary>
+        /// <value>The aria-label attribute value of the expand button.</value>
+        [Parameter]
+        public string ExpandAriaLabel { get; set; }
+        
+        /// <summary>
+        /// Gets or sets the aria-label attribute of the collapse button.
+        /// </summary>
+        /// <value>The aria-label attribute value of the collapse button.</value>
+        [Parameter]
+        public string CollapseAriaLabel { get; set; }
+        
         /// <summary>
         /// Gets or sets the child content.
         /// </summary>
@@ -36,6 +71,12 @@ namespace Radzen.Blazor
         [Parameter]
         public RenderFragment ChildContent { get; set; }
 
+        /// <summary>
+        /// Gets or sets the header content.
+        /// </summary>
+        /// <value>The header content.</value>
+        [Parameter]
+        public RenderFragment Template { get; set; }
 
         bool _visible = true;
         /// <summary>
@@ -85,6 +126,17 @@ namespace Radzen.Blazor
             }
         }
 
+        bool? selected;
+        internal bool GetSelected()
+        {
+            return selected ?? Selected;
+        }
+
+        internal void SetSelected(bool? value)
+        {
+            selected = value;
+        }
+
         /// <summary>
         /// Set parameters as an asynchronous operation.
         /// </summary>
@@ -94,7 +146,7 @@ namespace Radzen.Blazor
         {
             if (parameters.DidParameterChange(nameof(Selected), Selected))
             {
-                Accordion?.SelectItem(this);
+                Accordion?.SelectItem(this, parameters.GetValueOrDefault<bool>(nameof(Selected)));
             }
 
             await base.SetParametersAsync(parameters);
@@ -117,7 +169,7 @@ namespace Radzen.Blazor
 
         internal string GetItemCssClass()
         {
-            return GetCssClass();
+            return $"{GetCssClass()} {(Accordion.IsFocused(this) ? "rz-state-focused" : "")}".Trim();
         }
 
         /// <inheritdoc />

Radzen.Blazor/RadzenAlert.razor

@@ -1,81 +1,32 @@
 @inherits RadzenComponentWithChildren
-@if (GetVisible())
+@if (visible)
 {
     <div @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()" aria-live="polite">
         <div class="rz-alert-item">
             @if (ShowIcon)
             {
-               <RadzenIcon Icon="@getIcon()" Class="rz-alert-icon" />
+               <RadzenIcon Icon="@GetIcon()" IconColor="@IconColor" class="rz-alert-icon" />
             }
             <div class="rz-alert-message">
-
-            @if (!string.IsNullOrEmpty(Title))
-            {
+                @if (!string.IsNullOrEmpty(Title))
+                {
                 <div class="rz-alert-title">@Title</div>
-            }
-                <div class="rz-alert-content">@ChildContent</div>
+                }
+                <div class="rz-alert-content">
+                    @if (ChildContent != null)
+                    {
+                        @ChildContent
+                    }
+                    else
+                    {
+                        @Text
+                    }
+                </div>
             </div>
         </div>
         @if (AllowClose)
         {
-            if (Shade == Shade.Lighter)
-            {
-                if (AlertStyle == AlertStyle.Primary)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Primary" Shade="Shade.Dark" Size="@getCloseButtonSize()" />
-                }
-                else if (AlertStyle == AlertStyle.Secondary)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Secondary" Shade="Shade.Dark" Size="@getCloseButtonSize()" />
-                }
-                else if (AlertStyle == AlertStyle.Light)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Dark" Shade="Shade.Dark" Size="@getCloseButtonSize()" />
-                }
-                else if (AlertStyle == AlertStyle.Base)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Dark" Shade="Shade.Dark" Size="@getCloseButtonSize()" />
-                }
-                else if (AlertStyle == AlertStyle.Dark)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Light" Shade="Shade.Dark" Size="@getCloseButtonSize()" />
-                }
-                else if (AlertStyle == AlertStyle.Success)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Success" Shade="Shade.Dark" Size="@getCloseButtonSize()" />
-                }
-                else if (AlertStyle == AlertStyle.Danger)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Danger" Shade="Shade.Dark" Size="@getCloseButtonSize()" />
-                }
-                else if (AlertStyle == AlertStyle.Warning)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Warning" Shade="Shade.Dark" Size="@getCloseButtonSize()" />
-                }
-                else if (AlertStyle == AlertStyle.Info)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Info" Shade="Shade.Dark" Size="@getCloseButtonSize()" />
-                }
-            }
-            else
-            {
-                if (AlertStyle == AlertStyle.Light)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Dark" Size="@getCloseButtonSize()" />
-                }
-                else if (AlertStyle == AlertStyle.Base)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Dark" Size="@getCloseButtonSize()" />
-                }
-                else if (AlertStyle == AlertStyle.Dark)
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Light" Size="@getCloseButtonSize()" />
-                }
-                else
-                {
-                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Light" Size="@getCloseButtonSize()" />
-                }
-            }
+            <RadzenButton Click=@OnClose Icon="close" Variant="Variant.Text" ButtonStyle="@GetCloseButtonStyle()" Shade="@GetCloseButtonShade()" Size="@GetCloseButtonSize()" />
         }
     </div>
 }

Radzen.Blazor/RadzenAlert.razor.cs

@@ -19,11 +19,11 @@ namespace Radzen.Blazor
     /// </example>
     public partial class RadzenAlert : RadzenComponentWithChildren
     {
-        private string getAlertSize()
+        private string GetAlertSize()
         {
             return Size == AlertSize.Medium ? "md" : Size == AlertSize.Large ? "lg" : Size == AlertSize.Small ? "sm" : "xs";
         }
-        
+
         /// <summary>
         /// Gets or sets a value indicating whether close is allowed. Set to <c>true</c> by default.
         /// </summary>
@@ -45,6 +45,13 @@ namespace Radzen.Blazor
         [Parameter]
         public string Title { get; set; }
 
+        /// <summary>
+        /// Gets or sets the text of the alert. Overriden by <see cref="RadzenComponentWithChildren.ChildContent" />.
+        /// </summary>
+        /// <value>The title.</value>
+        [Parameter]
+        public string Text { get; set; }
+
         /// <summary>
         /// Gets or sets the icon.
         /// </summary>
@@ -52,6 +59,13 @@ namespace Radzen.Blazor
         [Parameter]
         public string Icon { get; set; }
 
+        /// <summary>
+        /// Gets or sets the icon color.
+        /// </summary>
+        /// <value>The icon color.</value>
+        [Parameter]
+        public string IconColor { get; set; }
+
         /// <summary>
         /// Gets or sets the severity.
         /// </summary>
@@ -80,72 +94,131 @@ namespace Radzen.Blazor
         [Parameter]
         public AlertSize Size { get; set; } = AlertSize.Medium;
 
-        ButtonSize getCloseButtonSize()
+        ButtonSize GetCloseButtonSize()
         {
             return Size == AlertSize.ExtraSmall ? ButtonSize.ExtraSmall : ButtonSize.Small;
         }
 
-        bool? visible;
-        bool GetVisible()
+        Shade GetCloseButtonShade()
         {
-            return visible ?? Visible;
+            if (Shade == Shade.Light || Shade == Shade.Lighter)
+            {
+                return Shade.Darker;
+            }
+            else
+            {
+                return Shade.Default;
+            }
+        }
+
+        ButtonStyle GetCloseButtonStyle()
+        {
+            if (Shade == Shade.Light || Shade == Shade.Lighter)
+            {
+                switch (AlertStyle)
+                {
+                    case AlertStyle.Success:
+                        return ButtonStyle.Success;
+                    case AlertStyle.Danger:
+                        return ButtonStyle.Danger;
+                    case AlertStyle.Warning:
+                        return ButtonStyle.Warning;
+                    case AlertStyle.Info:
+                        return ButtonStyle.Info;
+                    case AlertStyle.Primary:
+                        return ButtonStyle.Primary;
+                    case AlertStyle.Secondary:
+                        return ButtonStyle.Secondary;
+                    case AlertStyle.Light:
+                    case AlertStyle.Base:
+                        return ButtonStyle.Dark;
+                    default:
+                        return ButtonStyle.Light;
+                }
+            }
+            else
+            {
+                switch (AlertStyle)
+                {
+                    case AlertStyle.Light:
+                    case AlertStyle.Base:
+                        return ButtonStyle.Dark;
+                    default:
+                        return ButtonStyle.Light;
+                }
+            }
+        }
+
+
+        bool visible;
+
+        /// <inheritdoc />
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            visible = Visible;
         }
 
         /// <inheritdoc />
         protected override string GetComponentCssClass()
         {
-            return $"rz-alert rz-alert-{getAlertSize()} rz-variant-{Enum.GetName(typeof(Variant), Variant).ToLowerInvariant()} rz-{Enum.GetName(typeof(AlertStyle), AlertStyle).ToLowerInvariant()} rz-shade-{Enum.GetName(typeof(Shade), Shade).ToLowerInvariant()}";
+            return $"rz-alert rz-alert-{GetAlertSize()} rz-variant-{Enum.GetName(typeof(Variant), Variant).ToLowerInvariant()} rz-{Enum.GetName(typeof(AlertStyle), AlertStyle).ToLowerInvariant()} rz-shade-{Enum.GetName(typeof(Shade), Shade).ToLowerInvariant()}";
         }
 
-        string getIcon()
+        string GetIcon()
         {
             if (!string.IsNullOrEmpty(Icon))
             {
                 return Icon;
             }
-            else if (AlertStyle == AlertStyle.Primary)
-            {
-                return "lightbulb_outline";
-            }
-            else if (AlertStyle == AlertStyle.Secondary)
-            {
-                return "lightbulb_outline";
-            }
-            else if (AlertStyle == AlertStyle.Light)
-            {
-                return "lightbulb_outline";
-            }
-            else if (AlertStyle == AlertStyle.Base)
-            {
-                return "lightbulb_outline";
-            }
-            else if (AlertStyle == AlertStyle.Dark)
-            {
-                return "lightbulb_outline";
-            }
-            else if (AlertStyle == AlertStyle.Success)
-            {
-                return "check_circle_outline";
-            }
-            else if (AlertStyle == AlertStyle.Danger)
-            {
-                return "error_outline";
-            }
-            else if (AlertStyle == AlertStyle.Warning)
-            {
-                return "warning_amber";
-            }
-            else if (AlertStyle == AlertStyle.Info)
-            {
-                return "info_outline";
-            }
 
-            return "";
+            switch (AlertStyle)
+            {
+                case AlertStyle.Success:
+                    return "check_circle";
+                case AlertStyle.Danger:
+                    return "error";
+                case AlertStyle.Warning:
+                    return "warning_amber";
+                case AlertStyle.Info:
+                    return "info";
+                default:
+                    return "lightbulb";
+            }
         }
 
-        void Close()
+        async Task OnClose()
         {
             visible = false;
+
+            await VisibleChanged.InvokeAsync(false);
+            await Close.InvokeAsync(null);
+        }
+
+        /// <summary>
+        /// Gets or sets the callback which is invoked when the alert is shown or hidden.
+        /// </summary>
+        [Parameter]
+        public EventCallback<bool> VisibleChanged { get; set; }
+
+        /// <summary>
+        /// Gets or sets the callback which is invoked when the alert is closed by the user.
+        /// </summary>
+        [Parameter]
+        public EventCallback Close { get; set; }
+
+        /// <inheritdoc />
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            var visibleChanged = parameters.DidParameterChange(nameof(Visible), Visible);
+
+            await base.SetParametersAsync(parameters);
+
+            if (visibleChanged)
+            {
+                visible = Visible;
+            }
         }
     }
 }

Radzen.Blazor/RadzenAppearanceToggle.razor

@@ -0,0 +1,2 @@
+@inherits RadzenComponent
+<RadzenToggleButton Visible=@Visible @attributes=@Attributes Icon=@Icon Change=@OnChange Value=@value Variant="Variant" ButtonStyle="ButtonStyle" ToggleButtonStyle="ToggleButtonStyle" ToggleShade="ToggleShade" />

Radzen.Blazor/RadzenAppearanceToggle.razor.cs

@@ -0,0 +1,112 @@
+using System;
+using System.Diagnostics;
+using Microsoft.AspNetCore.Components;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Dark or light theme switch. Requires <see cref="ThemeService" /> to be registered in the DI container.
+    /// </summary>
+    public partial class RadzenAppearanceToggle : RadzenComponent
+    {
+        [Inject]
+        private ThemeService ThemeService { get; set; }
+        /// <summary>
+        /// Gets or sets the switch button variant.
+        /// </summary>
+        /// <value>The switch button variant.</value>
+        [Parameter]
+        public Variant Variant { get; set; } = Variant.Text;
+
+        /// <summary>
+        /// Gets or sets the switch button style.
+        /// </summary>
+        /// <value>The switch button style.</value>
+        [Parameter]
+        public ButtonStyle ButtonStyle { get; set; } = ButtonStyle.Base;
+
+        /// <summary>
+        /// Gets or sets the switch button toggled shade.
+        /// </summary>
+        /// <value>The switch button toggled shade.</value>
+        [Parameter]
+        public Shade ToggleShade { get; set; } = Shade.Default;
+
+        /// <summary>
+        /// Gets or sets the switch button toggled style.
+        /// </summary>
+        /// <value>The switch button toggled style.</value>
+        [Parameter]
+        public ButtonStyle ToggleButtonStyle { get; set; } = ButtonStyle.Base;
+
+        /// <summary>
+        /// Gets or sets the light theme. Not set by default - the component uses the light version of the current theme.
+        /// </summary>
+        [Parameter]
+        public string LightTheme { get; set; }
+
+        /// <summary>
+        /// Gets or sets the dark theme. Not set by default - the component uses the dark version of the current theme.
+        /// </summary>
+        [Parameter]
+        public string DarkTheme { get; set; }
+
+        private string CurrentLightTheme => LightTheme ?? ThemeService.Theme?.ToLowerInvariant() switch
+        {
+            "dark" => "default",
+            "material-dark" => "material",
+            "fluent-dark" => "fluent",
+            "material3-dark" => "material3",
+            "software-dark" => "software",
+            "humanistic-dark" => "humanistic",
+            "standard-dark" => "standard",
+            _ => ThemeService.Theme,
+        };
+
+        private string CurrentDarkTheme => DarkTheme ?? ThemeService.Theme?.ToLowerInvariant() switch
+        {
+            "default" => "dark",
+            "material" => "material-dark",
+            "fluent" => "fluent-dark",
+            "material3" => "material3-dark",
+            "software" => "software-dark",
+            "humanistic" => "humanistic-dark",
+            "standard" => "standard-dark",
+            _ => ThemeService.Theme,
+        };
+
+        private bool value;
+
+        /// <inheritdoc />
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            ThemeService.ThemeChanged += OnThemeChanged;
+
+            value = ThemeService.Theme != CurrentDarkTheme;
+        }
+
+        private void OnThemeChanged()
+        {
+            value = ThemeService.Theme != CurrentDarkTheme;
+
+            StateHasChanged();
+        }
+
+        void OnChange(bool value)
+        {
+            ThemeService.SetTheme(value ? CurrentLightTheme : CurrentDarkTheme);
+        }
+
+        private string Icon => value ? "dark_mode" : "light_mode";
+
+        /// <inheritdoc />
+        public override void Dispose()
+        {
+            base.Dispose();
+
+            ThemeService.ThemeChanged -= OnThemeChanged;
+        }
+    }
+}

Radzen.Blazor/RadzenAreaSeries.razor

@@ -14,19 +14,19 @@
 
     var pathGenerator = GetPathGenerator();
 
-    var data = Items.Select(item => 
+    var data = Items.Select(item =>
     {
       var x = category(item);
       var y = value(item);
 
-      return new Point { X = x, Y = y };
+      return new Point<TItem> { X = x, Y = y, Data = item };
     });
 
     var ticks = Chart.CategoryScale.Ticks(Chart.CategoryAxis.TickDistance);
     var index = Chart.Series.IndexOf(this);
     var className = $"rz-area-series rz-series-{index}";
 
-    return 
+    return
     @<g class="@className">
       @if (Items.Any())
       {
@@ -43,7 +43,7 @@
         <path @key="@area" style="@style" d="@area" fill="@Fill" stroke="none"></path>
         <Path @key="@line" D="@line" Stroke="@Stroke" StrokeWidth="@StrokeWidth" LineType="@LineType" Style="@style" Fill="none" />
       }
-      <Markers Data="@Items" Category="@category" Value="@value" MarkerType="@MarkerType" Stroke="@Markers.Stroke" Fill="@(Markers.Fill ?? Stroke)" StrokeWidth="@Markers.StrokeWidth" Size="@Markers.Size" />
+      <Markers Visible="@Markers.Visible" Series="@this" Data="@data" MarkerType="@MarkerType" Stroke="@Markers.Stroke" Fill="@(Markers.Fill ?? Stroke)" StrokeWidth="@Markers.StrokeWidth" Size="@Markers.Size" />
     </g>;
   }
 }

Radzen.Blazor/RadzenAreaSeries.razor.cs

@@ -49,7 +49,7 @@ namespace Radzen.Blazor
         }
 
         /// <summary>
-        /// Specifies how to render lines between data points. Set to <see cref="Line"/> by default
+        /// Specifies how to render lines between data points. Set to <see cref="Interpolation.Line"/> by default
         /// </summary>
         [Parameter]
         public Interpolation Interpolation { get; set; } = Interpolation.Line;

Radzen.Blazor/RadzenAutoComplete.razor

@@ -1,7 +1,6 @@
 @using Radzen
 @using Radzen.Blazor.Rendering
 @using System.Collections
-@using System.Linq.Dynamic.Core
 @using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.JSInterop
 
@@ -12,19 +11,19 @@
     <div @ref="@Element" style="@($"{Style};display:inline-block;")" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
         @if (Multiline)
         {
-            <textarea @ref="@search" @onkeydown="@OnFilterKeyPress" value="@Value" disabled="@Disabled"
-                oninput="@OpenScript()" tabindex="@(Disabled ? "-1" : $"{TabIndex}")"  @onchange="@OnChange"
+            <textarea @ref="@search" @attributes="InputAttributes" @onkeydown="@OnFilterKeyPress" value="@Value" disabled="@Disabled"
+                oninput="@OpenScript()" tabindex="@(Disabled ? "-1" : $"{TabIndex}")"  @onchange="@OnChange" onfocus="@(OpenOnFocus ? OpenScript() : null)"
                 aria-autocomplete="list" aria-haspopup="true" autocomplete="off" role="combobox"
-                class="@InputClassList"
-                id="@Name" aria-expanded="true" placeholder="@Placeholder" />
+                class="@InputClassList" onblur="Radzen.activeElement = null"
+                id="@Name" aria-expanded="true" placeholder="@CurrentPlaceholder" maxlength="@MaxLength" />
         }
         else
         {
-            <input @ref="@search" @onkeydown="@OnFilterKeyPress" value="@Value" disabled="@Disabled"
-                oninput="@OpenScript()" tabindex="@(Disabled ? "-1" : $"{TabIndex}")" @onchange="@OnChange"
+            <input @ref="@search" @attributes="InputAttributes" @onkeydown="@OnFilterKeyPress" value="@Value" disabled="@Disabled"
+                oninput="@OpenScript()" tabindex="@(Disabled ? "-1" : $"{TabIndex}")" @onchange="@OnChange" onfocus="@(OpenOnFocus ? OpenScript() : null)"
                 aria-autocomplete="list" aria-haspopup="true" autocomplete="off" role="combobox"
-                class="@InputClassList"
-                type="text" id="@Name" aria-expanded="true" placeholder="@Placeholder" />
+                class="@InputClassList" onblur="Radzen.activeElement = null"
+                type="@InputType" id="@Name" aria-expanded="true" placeholder="@CurrentPlaceholder" maxlength="@MaxLength" />
         }
         <div id="@PopupID" class="rz-autocomplete-panel" style="@PopupStyle">
             <ul @ref="@list" class="rz-autocomplete-items rz-autocomplete-list" role="listbox">

Radzen.Blazor/RadzenAutoComplete.razor.cs

@@ -9,6 +9,7 @@ using Microsoft.AspNetCore.Components.Web;
 using System.Linq;
 using System;
 using System.Threading.Tasks;
+using System.Collections.Generic;
 
 namespace Radzen.Blazor
 {
@@ -22,6 +23,13 @@ namespace Radzen.Blazor
     /// </example>
     public partial class RadzenAutoComplete : DataBoundFormComponent<string>
     {
+        /// <summary>
+        /// Specifies additional custom attributes that will be rendered by the input.
+        /// </summary>
+        /// <value>The attributes.</value>
+        [Parameter]
+        public IReadOnlyDictionary<string, object> InputAttributes { get; set; }
+
         /// <summary>
         /// Gets or sets a value indicating whether this <see cref="RadzenAutoComplete"/> is multiline.
         /// </summary>
@@ -29,6 +37,13 @@ namespace Radzen.Blazor
         [Parameter]
         public bool Multiline { get; set; }
 
+        /// <summary>
+        /// Gets or sets a value indicating whether popup should open on focus. Set to <c>false</c> by default.
+        /// </summary>
+        /// <value><c>true</c> if popup should open on focus; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool OpenOnFocus { get; set; }
+
         /// <summary>
         /// Gets or sets the Popup height.
         /// </summary>
@@ -57,6 +72,23 @@ namespace Radzen.Blazor
         [Parameter]
         public int FilterDelay { get; set; } = 500;
 
+        /// <summary>
+        /// Gets or sets the underlying input type.
+        /// </summary>
+        /// <remarks>
+        /// This does not apply when <see cref="Multiline"/> is <c>true</c>.
+        /// </remarks>
+        /// <value>The input type.</value>
+        [Parameter]
+        public string InputType { get; set; } = "text";
+
+        /// <summary>
+        /// Gets or sets the underlying max length.
+        /// </summary>
+        /// <value>The max length value.</value>
+        [Parameter]
+        public long? MaxLength { get; set; }
+
         /// <summary>
         /// Gets search input reference.
         /// </summary>
@@ -91,15 +123,20 @@ namespace Radzen.Blazor
                     //
                 }
             }
-            else if (key == "Enter")
+            else if (key == "Enter" || key == "Tab")
             {
                 if (selectedIndex >= 0 && selectedIndex <= items.Count() - 1)
                 {
                     await OnSelectItem(items.ElementAt(selectedIndex));
                     selectedIndex = -1;
                 }
+
+                if (key == "Tab")
+                {
+                    await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID);
+                }
             }
-            else if (key == "Escape" || key == "Tab")
+            else if (key == "Escape")
             {
                 await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID);
             }
@@ -115,8 +152,13 @@ namespace Radzen.Blazor
         {
             var value = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search);
 
+            value = $"{value}";
+
             if (value.Length < MinLength)
+            {
+                await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID);
                 return;
+            }
 
             if (!LoadData.HasDelegate)
             {
@@ -171,7 +213,7 @@ namespace Radzen.Blazor
 
                     string textProperty = string.IsNullOrEmpty(TextProperty) ? string.Empty : $".{TextProperty}";
 
-                    return Query.Where($"o=>o{textProperty}{filterCaseSensitivityOperator}.{Enum.GetName(typeof(StringFilterOperator), FilterOperator)}(@0)",
+                    return Query.Where(DynamicLinqCustomTypeProvider.ParsingConfig, $"o=>o{textProperty}{filterCaseSensitivityOperator}.{Enum.GetName(typeof(StringFilterOperator), FilterOperator)}(@0)",
                         FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ? searchText.ToLower() : searchText);
                 }
 
@@ -272,5 +314,13 @@ namespace Radzen.Blazor
                 await JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
             }
         }
+
+        /// <summary>
+        /// Sets the focus on the input element.
+        /// </summary>
+        public override async ValueTask FocusAsync()
+        {
+            await search.FocusAsync();
+        }
     }
 }

Radzen.Blazor/RadzenBarSeries.razor

@@ -10,8 +10,8 @@
 </CascadingValue>
 
 @code {
-   public override RenderFragment Render(ScaleBase categoryScale, ScaleBase valueScale)
-   {
+    public override RenderFragment Render(ScaleBase categoryScale, ScaleBase valueScale)
+    {
         var value = ComposeValue(categoryScale);
         var category = ComposeCategory(valueScale);
         var ticks = Chart.CategoryScale.Ticks(Chart.ValueAxis.TickDistance);
@@ -26,15 +26,17 @@
         var height = barHeight / barSeries.Count() - padding + padding / barSeries.Count();;
         var className = $"rz-bar-series rz-series-{Chart.Series.IndexOf(this)}";
 
-        return 
+        return
         @<g class="@className">
             @foreach(var data in Items)
             {
                 var y = category(data) - barHeight / 2 + index * height + index * padding;
                 var x = value(data);
+                var itemValue = Value(data);
                 var radius = Chart.BarOptions.Radius;
+                var width = Math.Abs(x0 - x);
 
-                if (radius > height / 2)
+                if (radius > height / 2 || radius > width)
                 {
                     radius = 0;
                 }
@@ -47,11 +49,11 @@
                 {
                     path = $"M {x0.ToInvariantString()} {y.ToInvariantString()} L {(x+radius).ToInvariantString()} {y.ToInvariantString()} A {r} {r} 0 0 0 {x.ToInvariantString()} {(y+radius).ToInvariantString()} L {x.ToInvariantString()} {(y+height-radius).ToInvariantString()} A {r} {r} 0 0 0 {(x+radius).ToInvariantString()} {(y + height).ToInvariantString()} L {x0.ToInvariantString()} {(y+height).ToInvariantString()} Z";
                 }
-                var fill = PickColor(Items.IndexOf(data), Fills, Fill);
-                var stroke = PickColor(Items.IndexOf(data), Strokes, Stroke);
+                var fill = PickColor(Items.IndexOf(data), Fills, Fill, FillRange, itemValue);
+                var stroke = PickColor(Items.IndexOf(data), Strokes, Stroke, StrokeRange, itemValue);
 
                 <Path @key="@path" D="@path" Stroke="@stroke" StrokeWidth="@StrokeWidth" Fill="@fill" LineType="@LineType" Style="@style" />
             }
         </g>;
     }
-}
+}

Radzen.Blazor/RadzenBarSeries.razor.cs

@@ -54,6 +54,20 @@ namespace Radzen.Blazor
         [Parameter]
         public LineType LineType { get; set; }
 
+        /// <summary>
+        /// Gets or sets the color range of the fill.
+        /// </summary>
+        /// <value>The color range of the fill.</value>
+        [Parameter]
+        public IList<SeriesColorRange> FillRange { get; set; }
+
+        /// <summary>
+        /// Gets or sets the color range of the stroke.
+        /// </summary>
+        /// <value>The color range of the stroke.</value>
+        [Parameter]
+        public IList<SeriesColorRange> StrokeRange { get; set; }
+
         /// <inheritdoc />
         public override string Color
         {
@@ -106,7 +120,7 @@ namespace Radzen.Blazor
 
             if (index >= 0)
             {
-                var color = PickColor(index, Fills, Fill);
+                var color = PickColor(index, Fills, Fill, FillRange, Value(item));
 
                 if (color != null)
                 {
@@ -147,7 +161,7 @@ namespace Radzen.Blazor
         /// <inheritdoc />
         public override bool Contains(double x, double y, double tolerance)
         {
-            return DataAt(x, y) != null;
+            return DataAt(x, y).Item1 != null;
         }
 
         /// <inheritdoc />
@@ -173,7 +187,7 @@ namespace Radzen.Blazor
         }
 
         /// <inheritdoc />
-        public override object DataAt(double x, double y)
+        public override (object, Point) DataAt(double x, double y)
         {
             var value = ComposeValue(Chart.CategoryScale);
             var category = ComposeCategory(Chart.ValueScale);
@@ -196,11 +210,11 @@ namespace Radzen.Blazor
 
                 if (startX <= x && x <= endX && startY <= y && y <= endY)
                 {
-                    return data;
+                    return (data, new Point() { X = x, Y = y });
                 }
             }
 
-            return null;
+            return (null, null);
         }
 
         /// <inheritdoc />
@@ -221,13 +235,17 @@ namespace Radzen.Blazor
         public override IEnumerable<ChartDataLabel> GetDataLabels(double offsetX, double offsetY)
         {
             var list = new List<ChartDataLabel>();
-            
+
+            (string Anchor, int Sign) position;
+
             foreach (var d in Data)
             {
-                list.Add(new ChartDataLabel 
-                { 
-                    Position = new Point() { X = TooltipX(d) + offsetX + 8, Y = TooltipY(d) + offsetY },
-                    TextAnchor = "start",
+                position = Value(d) < 0 ? ("end", -1) : Value(d) == 0 ? ("middle", 0) : ("start", 1);
+
+                list.Add(new ChartDataLabel
+                {
+                    Position = new Point() { X = TooltipX(d) + offsetX + (8 * position.Sign), Y = TooltipY(d) + offsetY },
+                    TextAnchor = position.Anchor,
                     Text = Chart.ValueAxis.Format(Chart.CategoryScale, Value(d))
                 });
             }
@@ -235,4 +253,4 @@ namespace Radzen.Blazor
             return list;
         }
     }
-}
+}

Radzen.Blazor/RadzenBody.razor.cs

@@ -4,6 +4,8 @@ using Radzen.Blazor.Rendering;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components.Routing;
 using Microsoft.JSInterop;
+using System.Threading;
+using System.Runtime.ExceptionServices;
 
 namespace Radzen.Blazor
 {
@@ -25,9 +27,8 @@ namespace Radzen.Blazor
         protected override string GetComponentCssClass()
         {
             var classList = ClassList.Create("rz-body")
-                                     .Add("body")
-                                     .Add("body-expanded", Expanded);
-                                     
+                                     .Add("rz-body-expanded", Expanded);
+
             return classList.ToString();
         }
 
@@ -111,7 +112,7 @@ namespace Radzen.Blazor
         {
             if (IsJSRuntimeAvailable && Layout != null)
             {
-                JSRuntime.InvokeVoidAsync("eval", $"document.getElementById('{GetId()}').scrollTop = 0");
+                JSRuntime.InvokeVoidAsync("eval", $"try{{document.getElementById('{GetId()}').scrollTop = 0}}catch(e){{}}");
             }
         }
 

Radzen.Blazor/RadzenBreadCrumbItem.razor

@@ -15,15 +15,15 @@
         {
             @if (!string.IsNullOrWhiteSpace(Path))
             {
-                <RadzenLink Icon="@Icon" Path="@Path" Text="@Text" />
+                <RadzenLink Icon="@Icon" IconColor="@IconColor" Path="@Path" Text="@Text" />
             }
             else
             {
                 @if (!string.IsNullOrWhiteSpace(Icon))
                 {
-                    <RadzenIcon Icon="@Icon" />
+                    <RadzenIcon Icon="@Icon" IconColor="@IconColor" />
                 }
-                <RadzenLabel Text="@Text" />
+                <span class="rz-label">@Text</span>
             }
         }
     </div>

Radzen.Blazor/RadzenBreadCrumbItem.razor.cs

@@ -31,6 +31,13 @@ namespace Radzen.Blazor
         [Parameter]
         public string Icon { get; set; }
 
+        /// <summary>
+        /// Gets or sets the icon color.
+        /// </summary>
+        /// <value>The icon color.</value>
+        [Parameter]
+        public string IconColor { get; set; }
+
         /// <summary>
         /// Template Parameter used only for this Item
         /// Note: this overrides the <see cref="Template"/> Cascading Parameter

Radzen.Blazor/RadzenButton.razor

@@ -2,7 +2,7 @@
 
 @if (Visible)
 {
-    <button @ref="@Element" style="@Style" disabled="@IsDisabled"
+    <button @ref="@Element" style="@Style" disabled="@IsDisabled" tabindex="@(Disabled ? -1 : TabIndex)"
             type="@Enum.GetName(typeof(ButtonType), ButtonType).ToLower()"
             @attributes="Attributes" class="@GetCssClass()" id="@GetId()"
             @onclick="@OnClick">
@@ -25,11 +25,11 @@
                 {
                     @if (!string.IsNullOrEmpty(@Icon))
                     {
-                        <i class="rz-button-icon-left rzi">@((MarkupString)Icon)</i>
+                        <i class="notranslate rz-button-icon-left rzi" style="@(!string.IsNullOrEmpty(IconColor) ? $"color:{IconColor}" : null)">@((MarkupString)Icon)</i>
                     }
                     @if (!string.IsNullOrEmpty(Image))
                     {
-                        <img class="rz-button-icon-left rzi" src="@Image" />
+                        <img class="notranslate rz-button-icon-left rzi" src="@Image" alt="@ImageAlternateText" />
                     }
                     @if (!string.IsNullOrEmpty(Text))
                     {

Radzen.Blazor/RadzenButton.razor.cs

@@ -15,7 +15,7 @@ namespace Radzen.Blazor
     /// </example>
     public partial class RadzenButton : RadzenComponent
     {
-        private string getButtonSize()
+        internal string getButtonSize()
         {
             return Size == ButtonSize.Medium ? "md" : Size == ButtonSize.Large ? "lg" : Size == ButtonSize.Small ? "sm" : "xs";
         }
@@ -27,6 +27,13 @@ namespace Radzen.Blazor
         [Parameter]
         public RenderFragment ChildContent { get; set; }
 
+        /// <summary>
+        /// Gets or sets the index of the tab.
+        /// </summary>
+        /// <value>The index of the tab.</value>
+        [Parameter]
+        public int TabIndex { get; set; } = 0;
+
         /// <summary>
         /// Gets or sets the text.
         /// </summary>
@@ -34,6 +41,13 @@ namespace Radzen.Blazor
         [Parameter]
         public string Text { get; set; } = "";
 
+        /// <summary>
+        /// Gets or sets the text.
+        /// </summary>
+        /// <value>The text.</value>
+        [Parameter]
+        public string ImageAlternateText { get; set; } = "button";
+
         /// <summary>
         /// Gets or sets the icon.
         /// </summary>
@@ -41,6 +55,13 @@ namespace Radzen.Blazor
         [Parameter]
         public string Icon { get; set; }
 
+        /// <summary>
+        /// Gets or sets the icon color.
+        /// </summary>
+        /// <value>The icon color.</value>
+        [Parameter]
+        public string IconColor { get; set; }
+
         /// <summary>
         /// Gets or sets the image.
         /// </summary>
@@ -123,7 +144,7 @@ namespace Radzen.Blazor
         /// Handles the <see cref="E:Click" /> event.
         /// </summary>
         /// <param name="args">The <see cref="MouseEventArgs"/> instance containing the event data.</param>
-        public async Task OnClick(MouseEventArgs args)
+        public virtual async Task OnClick(MouseEventArgs args)
         {
             if (clicking)
             {

Radzen.Blazor/RadzenCard.razor.cs

@@ -2,6 +2,7 @@
 using Microsoft.AspNetCore.Components.Web;
 using System;
 using System.Threading.Tasks;
+using System.Collections.Generic;
 
 namespace Radzen.Blazor
 {
@@ -13,7 +14,18 @@ namespace Radzen.Blazor
         /// <inheritdoc />
         protected override string GetComponentCssClass()
         {
-            return "rz-card";
+            var classList = new List<string>();
+            classList.Add("rz-card");
+            classList.Add($"rz-variant-{Variant.ToString().ToLowerInvariant()}");
+
+            return string.Join(" ", classList);
         }
+
+        /// <summary>
+        /// Gets or sets the card variant.
+        /// </summary>
+        /// <value>The card variant.</value>
+        [Parameter]
+        public Variant Variant { get; set; } = Variant.Filled;
     }
-}
+}

Radzen.Blazor/RadzenCarousel.razor

@@ -0,0 +1,40 @@
+@inherits RadzenComponent
+@using System.Linq
+@using Microsoft.JSInterop
+<CascadingValue Value=this>
+@if (Visible)
+{
+    <section @ref=@Element style=@Style @attributes=@Attributes class=@GetCssClass() id=@GetId() tabindex="0">
+        @if(AllowPaging && (PagerPosition == PagerPosition.Top || PagerPosition == PagerPosition.TopAndBottom))
+        {
+        <RadzenStack class="rz-carousel-pager rz-carousel-pager-top" Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Center" Wrap="FlexWrap.Wrap">
+            @foreach (var item in items)
+            {
+                var index = items.IndexOf(item);
+                <a @onclick="@(args => Navigate(index))" class="rz-carousel-pager-button @(index == selectedIndex ? "rz-state-active" : "")"></a>
+            }
+        </RadzenStack>
+        }
+        @if(AllowNavigation)
+        {
+        <RadzenButton class="rz-carousel-prev" Icon="@PrevIcon" Text="@PrevText" ButtonStyle="@ButtonStyle" Size="@ButtonSize" Variant="@ButtonVariant" Shade="@ButtonShade"
+            Click=@Prev />
+        <RadzenButton class="rz-carousel-next" Icon="@NextIcon" Text="@NextText" ButtonStyle="@ButtonStyle" Size="@ButtonSize" Variant="@ButtonVariant" Shade="@ButtonShade"
+            Click=@Next/>
+        }
+        <ul class="rz-carousel-items">
+            @Items
+        </ul>
+        @if(AllowPaging && (PagerPosition == PagerPosition.Bottom || PagerPosition == PagerPosition.TopAndBottom))
+        {
+        <RadzenStack class="rz-carousel-pager rz-carousel-pager-bottom" Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Center" Wrap="FlexWrap.Wrap">
+            @foreach (var item in items)
+            {
+                var index = items.IndexOf(item);
+                <a @onclick="@(args => Navigate(index))" class="rz-carousel-pager-button @(index == selectedIndex ? "rz-state-active" : "")"></a>
+            }
+        </RadzenStack>
+        }
+    </section>
+}
+</CascadingValue>

Radzen.Blazor/RadzenCarousel.razor.cs

@@ -0,0 +1,319 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.JSInterop;
+using System;
+using System.Collections;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading;
+using System.Threading.Tasks;
+using System.Timers;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenCarousel component.
+    /// </summary>
+    /// <example>
+    /// <code>
+    /// &lt;RadzenCarousel Change=@(args => Console.WriteLine($"Selected index is: {args}"))&gt;
+    ///     &lt;Items&gt;
+    ///         &lt;RadzenCarouselItem&gt;
+    ///             Details for Orders
+    ///         &lt;/RadzenCarouselItem&gt;
+    ///         &lt;RadzenCarousel&gt;
+    ///             Details for Employees
+    ///         &lt;/RadzenCarouselItem&gt;
+    ///     &lt;/Items&gt;
+    /// &lt;/RadzenCarousel&gt;
+    /// </code>
+    /// </example>
+    public partial class RadzenCarousel : RadzenComponent
+    {
+        /// <summary>
+        /// Gets or sets the items.
+        /// </summary>
+        /// <value>The items.</value>
+        [Parameter]
+        public RenderFragment Items { get; set; }
+
+        internal List<RadzenCarouselItem> items = new List<RadzenCarouselItem>();
+
+        /// <summary>
+        /// Adds the item.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        public void AddItem(RadzenCarouselItem item)
+        {
+            if (!items.Contains(item))
+            {
+                items.Add(item);
+
+                StateHasChanged();
+            }
+        }
+
+        /// <summary>
+        /// Removes the item.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        public void RemoveItem(RadzenCarouselItem item)
+        {
+            if (items.Contains(item))
+            {
+                items.Remove(item);
+
+                if (!disposed)
+                {
+                    try { InvokeAsync(StateHasChanged); } catch { }
+                }
+            }
+        }
+
+        /// <inheritdoc />
+        protected override string GetComponentCssClass()
+        {
+            return $"rz-carousel {(AllowNavigation ? "" : "rz-carousel-no-navigation")} {(PagerOverlay ? "rz-carousel-pager-overlay" : "")}".Trim();
+        }
+
+        /// <summary>
+        /// Navigates to specific index.
+        /// </summary>
+        public async Task Navigate(int index)
+        {
+            if (Auto)
+            {
+                await Reset();
+            }
+
+            await GoTo(index);
+        }
+
+        async Task Prev()
+        {
+            await Navigate(selectedIndex == 0 ? items.Count - 1 : selectedIndex - 1);
+        }
+
+        async Task Next()
+        {
+            await Navigate(selectedIndex == items.Count - 1 ? 0 : selectedIndex + 1);
+        }
+
+        async Task GoTo(int index)
+        {
+            if (selectedIndex != index)
+            {
+                selectedIndex = index == items.Count ? 0 : index;
+                await SelectedIndexChanged.InvokeAsync(selectedIndex);
+                await Change.InvokeAsync(selectedIndex);
+                await JSRuntime.InvokeVoidAsync("Radzen.scrollCarouselItem", items[selectedIndex].element);
+                StateHasChanged();
+            }
+        }
+
+        /// <summary>
+        /// Stops the auto-cycle timer.
+        /// </summary>
+        public void Stop()
+        {
+            timer?.Change(Timeout.Infinite, Timeout.Infinite);
+        }
+
+        /// <summary>
+        /// Starts the auto-cycle timer.
+        /// </summary>
+        public void Start()
+        {
+            timer?.Change(TimeSpan.FromMilliseconds(Interval), TimeSpan.Zero);
+        }
+
+        /// <summary>
+        /// Resets the auto-cycle timer.
+        /// </summary>
+        public async Task Reset()
+        {
+            Stop();
+            Start();
+
+            await Task.CompletedTask;
+        }
+
+        /// <summary>
+        /// Gets or sets the selected index.
+        /// </summary>
+        /// <value>The selected index.</value>
+        [Parameter]
+        public int SelectedIndex { get; set; }
+
+        private int selectedIndex;
+
+        /// <summary>
+        /// Gets or sets the selected index changed callback.
+        /// </summary>
+        /// <value>The selected index changed callback.</value>
+        [Parameter]
+        public EventCallback<int> SelectedIndexChanged { get; set; }
+
+        /// <summary>
+        /// Gets or sets the change callback.
+        /// </summary>
+        /// <value>The change callback.</value>
+        [Parameter]
+        public EventCallback<int> Change { get; set; }
+
+        /// <inheritdoc />
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            var shouldUpdate = false;
+            if (parameters.DidParameterChange(nameof(SelectedIndex), SelectedIndex))
+            {
+                selectedIndex = parameters.GetValueOrDefault<int>(nameof(SelectedIndex));
+                shouldUpdate = true;
+            }
+
+            if (parameters.DidParameterChange(nameof(Auto), Auto) ||
+                    parameters.DidParameterChange(nameof(Interval), Interval))
+            {
+                if (parameters.GetValueOrDefault<bool>(nameof(Auto)))
+                {
+                    await Reset();
+                }
+                else
+                {
+                    Stop();
+                }
+            }
+
+            await base.SetParametersAsync(parameters);
+
+            if (shouldUpdate)
+            {
+                await JSRuntime.InvokeVoidAsync("Radzen.scrollCarouselItem", items[selectedIndex].element);
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="RadzenCarousel"/> cycle is automatic.
+        /// </summary>
+        /// <value><c>true</c> if cycle automatic; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool Auto { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets the auto-cycle interval in milliseconds.
+        /// </summary>
+        [Parameter]
+        public double Interval { get; set; } = 4000;
+
+        /// <summary>
+        /// Gets or sets the pager position. Set to <c>PagerPosition.Bottom</c> by default.
+        /// </summary>
+        /// <value>The pager position.</value>
+        [Parameter]
+        public PagerPosition PagerPosition { get; set; } = PagerPosition.Bottom;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether pager overlays the carousel items. Set to <c>true</c> by default.
+        /// </summary>
+        /// <value><c>true</c> if pager overlay is allowed; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool PagerOverlay { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether paging is allowed. Set to <c>true</c> by default.
+        /// </summary>
+        /// <value><c>true</c> if paging is allowed; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool AllowPaging { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether previous/next navigation is allowed. Set to <c>true</c> by default.
+        /// </summary>
+        /// <value><c>true</c> if previous/next navigation is allowed; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool AllowNavigation { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets the buttons style
+        /// </summary>
+        /// <value>The buttons style.</value>
+        [Parameter]
+        public ButtonStyle ButtonStyle { get; set; } = ButtonStyle.Base;
+
+        /// <summary>
+        /// Gets or sets the design variant of the buttons.
+        /// </summary>
+        /// <value>The variant of the buttons.</value>
+        [Parameter]
+        public Variant ButtonVariant { get; set; } = Variant.Text;
+
+        /// <summary>
+        /// Gets or sets the color shade of the buttons.
+        /// </summary>
+        /// <value>The color shade of the buttons.</value>
+        [Parameter]
+        public Shade ButtonShade { get; set; } = Shade.Lighter;
+
+        /// <summary>
+        /// Gets or sets the buttons size.
+        /// </summary>
+        /// <value>The buttons size.</value>
+        [Parameter]
+        public ButtonSize ButtonSize { get; set; } = ButtonSize.Large;
+
+        /// <summary>
+        /// Gets or sets the next button text.
+        /// </summary>
+        /// <value>The next button text.</value>
+        [Parameter]
+        public string NextText { get; set; } = "";
+
+        /// <summary>
+        /// Gets or sets the previous button text.
+        /// </summary>
+        /// <value>The previous button text.</value>
+        [Parameter]
+        public string PrevText { get; set; } = "";
+
+        /// <summary>
+        /// Gets or sets the next button icon.
+        /// </summary>
+        /// <value>The next button icon.</value>
+        [Parameter]
+        public string NextIcon { get; set; } = "arrow_forward_ios";
+
+        /// <summary>
+        /// Gets or sets the previous button icon.
+        /// </summary>
+        /// <value>The previous button icon.</value>
+        [Parameter]
+        public string PrevIcon { get; set; } = "arrow_back_ios_new";
+
+        System.Threading.Timer timer;
+
+        /// <inheritdoc />
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            await base.OnAfterRenderAsync(firstRender);
+
+            if (firstRender)
+            {
+                var ts = TimeSpan.FromMilliseconds(Interval);
+                timer = new System.Threading.Timer(state => InvokeAsync(() => GoTo(selectedIndex + 1)), 
+                    null, Auto ? ts : Timeout.InfiniteTimeSpan, ts);
+            }
+        }
+
+        /// <inheritdoc />
+        public override void Dispose()
+        {
+            base.Dispose();
+
+            if (timer != null)
+            {
+                timer.Dispose();
+                timer = null;
+            }
+        }
+    }
+}

Radzen.Blazor/RadzenCarouselItem.razor

@@ -0,0 +1,8 @@
+@using Microsoft.JSInterop
+@implements IDisposable
+@inject IJSRuntime JSRuntime
+
+<li @ref="element" @attributes=@Attributes class=@ClassList tabindex="0">
+    @ChildContent
+    <div class="rz-carousel-snapper"></div>
+</li>

Radzen.Blazor/RadzenCarouselItem.razor.cs

@@ -0,0 +1,63 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using Radzen.Blazor.Rendering;
+using System;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenCarouselItem component.
+    /// </summary>
+    public partial class RadzenCarouselItem : IDisposable
+    {        
+        /// <summary>
+        /// Gets the class list.
+        /// </summary>
+        /// <value>The class list.</value>
+        ClassList ClassList => ClassList.Create()
+                                        .Add("rz-carousel-item")
+                                        .Add(Attributes);
+        
+        /// <summary>
+        /// Gets or sets the arbitrary attributes.
+        /// </summary>
+        /// <value>The arbitrary attributes.</value>
+        [Parameter(CaptureUnmatchedValues = true)]
+        public IDictionary<string, object> Attributes { get; set; }
+
+        /// <summary>
+        /// Gets or sets the child content.
+        /// </summary>
+        /// <value>The child content.</value>
+        [Parameter]
+        public RenderFragment ChildContent { get; set; }
+
+        /// <summary>
+        /// Gets or sets the tabs.
+        /// </summary>
+        /// <value>The tabs.</value>
+        [CascadingParameter]
+        public RadzenCarousel Carousel { get; set; }
+
+        /// <inheritdoc />
+        protected override async Task OnInitializedAsync()
+        {
+            await base.OnInitializedAsync();
+
+            Carousel.AddItem(this);
+
+            itemIndex = Carousel.items.IndexOf(this);
+        }
+
+        /// <inheritdoc />
+        public void Dispose()
+        {
+            Carousel?.RemoveItem(this);
+        }
+
+        int itemIndex;
+        internal ElementReference element;
+    }
+}

Radzen.Blazor/RadzenChart.razor

@@ -38,10 +38,13 @@
                 @donut.RenderTitle(MarginLeft, MarginTop)
             }
         }
-    @if (tooltip != null)
-    {
-        @tooltip
-    }
+        <ChartTooltipContainer @ref="@chartTooltipContainer">
+            @if (tooltip != null)
+            {
+                @tooltip
+            }
+        </ChartTooltipContainer>
+        
     </CascadingValue>
 }
 </div>

Radzen.Blazor/RadzenChart.razor.cs

@@ -42,27 +42,46 @@ namespace Radzen.Blazor
         public ColorScheme ColorScheme { get; set; }
 
         /// <summary>
-        /// A callback that will be invoked when the user clicks on a series. 
+        /// A callback that will be invoked when the user clicks on a series.
         /// </summary>
         [Parameter]
         public EventCallback<SeriesClickEventArgs> SeriesClick { get; set; }
 
         /// <summary>
-        /// A callback that will be invoked when the user clicks on a legend. 
+        /// A callback that will be invoked when the user clicks on a legend.
         /// </summary>
         [Parameter]
         public EventCallback<LegendClickEventArgs> LegendClick { get; set; }
-        double? Width { get; set; }
 
-        double? Height { get; set; }
+        /// <summary>
+        /// Gets the runtime width of the chart.
+        /// </summary>
+        protected double? Width { get; set; }
 
-        double MarginTop { get; set; }
+        /// <summary>
+        /// Gets the runtime height of the chart.
+        /// </summary>
+        protected double? Height { get; set; }
 
-        double MarginLeft { get; set; }
+        /// <summary>
+        /// Gets or sets the top margin of the plot area.
+        /// </summary>
+        protected double MarginTop { get; set; }
 
-        double MarginRight { get; set; }
+        /// <summary>
+        /// Gets or sets the left margin of the plot area.
+        /// </summary>
+        protected double MarginLeft { get; set; }
 
-        double MarginBottom { get; set; }
+        /// <summary>
+        /// Gets or sets the right margin of the plot area.
+        /// </summary>
+        protected double MarginRight { get; set; }
+
+        /// <summary>
+        /// Gets or sets the bottom margin of the plot area.
+        /// </summary>
+        protected double MarginBottom { get; set; }
 
         /// <summary>
         /// Gets or sets the child content. Used to specify series and other configuration.
@@ -93,7 +112,11 @@ namespace Radzen.Blazor
             Series.Remove(series);
         }
 
-        private bool ShouldRenderAxes()
+        /// <summary>
+        /// Returns whether the chart should render axes.
+        /// </summary>
+        /// <returns></returns>
+        protected bool ShouldRenderAxes()
         {
             var pieType = typeof(RadzenPieSeries<>);
             var donutType = typeof(RadzenDonutSeries<>);
@@ -111,7 +134,11 @@ namespace Radzen.Blazor
             return Series.Count > 0 && Series.All(series => series is IChartBarSeries);
         }
 
-        private bool UpdateScales()
+        /// <summary>
+        /// Updates the scales based on the configuration.
+        /// </summary>
+        /// <returns></returns>
+        protected virtual bool UpdateScales()
         {
             var valueScale = ValueScale;
             var categoryScale = CategoryScale;
@@ -207,12 +234,7 @@ namespace Radzen.Blazor
             ValueScale.Fit(ValueAxis.TickDistance);
             CategoryScale.Fit(CategoryAxis.TickDistance);
 
-            var stateHasChanged = false;
-
-            if (!ValueScale.IsEqualTo(valueScale))
-            {
-                stateHasChanged = true;
-            }
+            var stateHasChanged = !ValueScale.IsEqualTo(valueScale);
 
             if (!CategoryScale.IsEqualTo(categoryScale))
             {
@@ -254,6 +276,7 @@ namespace Radzen.Blazor
             }
         }
 
+        ChartTooltipContainer chartTooltipContainer;
         RenderFragment tooltip;
         object tooltipData;
         double mouseX;
@@ -273,6 +296,18 @@ namespace Radzen.Blazor
             await DisplayTooltip();
         }
 
+        /// <summary>
+        /// The minimum pixel distance from a data point to the mouse cursor required for the SeriesClick event to fire. Set to 25 by default.
+        /// </summary>
+        [Parameter]
+        public int ClickTolerance { get; set; } = 25;
+
+        /// <summary>
+        /// The minimum pixel distance from a data point to the mouse cursor required by the tooltip to show. Set to 25 by default.
+        /// </summary>
+        [Parameter]
+        public int TooltipTolerance { get; set; } = 25;
+
         /// <summary>
         /// Invoked via interop when the user clicks the RadzenChart. Raises the <see cref="SeriesClick" /> handler.
         /// </summary>
@@ -281,20 +316,37 @@ namespace Radzen.Blazor
         [JSInvokable]
         public async Task Click(double x, double y)
         {
+            IChartSeries closestSeries = null;
+            object closestSeriesData = null;
+            double closestSeriesDistanceSquared = ClickTolerance * ClickTolerance;
+
+            var queryX = x - MarginLeft;
+            var queryY = y - MarginTop;
+
             foreach (var series in Series)
             {
-                if (series.Visible && series.Contains(mouseX - MarginLeft, mouseY - MarginTop, 5))
+                if (series.Visible)
                 {
-                    var data = series.DataAt(mouseX - MarginLeft, mouseY - MarginTop);
-
-                    if (data != null)
+                    var (seriesData, seriesDataPoint) = series.DataAt(queryX, queryY);
+                    if (seriesData != null)
                     {
-                        await series.InvokeClick(SeriesClick, data);
+                        double xDelta = queryX - seriesDataPoint.X;
+                        double yDelta = queryY - seriesDataPoint.Y;
+                        double squaredDistance = xDelta * xDelta + yDelta * yDelta;
+                        if (squaredDistance < closestSeriesDistanceSquared)
+                        {
+                            closestSeries = series;
+                            closestSeriesData = seriesData;
+                            closestSeriesDistanceSquared = squaredDistance;
+                        }
                     }
-
-                    return;
                 }
             }
+
+            if (closestSeriesData != null)
+            {
+                await closestSeries.InvokeClick(SeriesClick, closestSeriesData);
+            }
         }
 
         internal async Task DisplayTooltip()
@@ -302,6 +354,12 @@ namespace Radzen.Blazor
             if (Tooltip.Visible)
             {
                 var orderedSeries = Series.OrderBy(s => s.RenderingOrder).Reverse();
+                IChartSeries closestSeries = null;
+                object closestSeriesData = null;
+                double closestSeriesDistanceSquared = TooltipTolerance * TooltipTolerance;
+
+                var queryX = mouseX - MarginLeft;
+                var queryY = mouseY - MarginTop;
 
                 foreach (var series in orderedSeries)
                 {
@@ -309,40 +367,51 @@ namespace Radzen.Blazor
                     {
                         foreach (var overlay in series.Overlays.Reverse())
                         {
-                            if (overlay.Visible && overlay.Contains(mouseX - MarginLeft, mouseY - MarginTop, 25))
+                            if (overlay.Visible && overlay.Contains(mouseX - MarginLeft, mouseY - MarginTop, TooltipTolerance))
                             {
                                 tooltipData = null;
                                 tooltip = overlay.RenderTooltip(mouseX, mouseY, MarginLeft, MarginTop);
-                                StateHasChanged();
+                                chartTooltipContainer.Refresh();
                                 await Task.Yield();
-                                
+
                                 return;
                             }
                         }
 
-                        if (series.Contains(mouseX - MarginLeft, mouseY - MarginTop, 25))
+                        var (seriesData, seriesDataPoint) = series.DataAt(queryX, queryY);
+                        if (seriesData != null)
                         {
-                            var data = series.DataAt(mouseX - MarginLeft, mouseY - MarginTop);
-
-                            if (data != tooltipData)
+                            double xDelta = queryX - seriesDataPoint.X;
+                            double yDelta = queryY - seriesDataPoint.Y;
+                            double squaredDistance = xDelta * xDelta + yDelta * yDelta;
+                            if (squaredDistance < closestSeriesDistanceSquared)
                             {
-                                tooltipData = data;
-                                tooltip = series.RenderTooltip(data, MarginLeft, MarginTop);
-                                StateHasChanged();
-                                await Task.Yield();
+                                closestSeries = series;
+                                closestSeriesData = seriesData;
+                                closestSeriesDistanceSquared = squaredDistance;
                             }
-
-                            return;
                         }
                     }
                 }
 
+                if (closestSeriesData != null)
+                {
+                    if (closestSeriesData != tooltipData)
+                    {
+                        tooltipData = closestSeriesData;
+                        tooltip = closestSeries.RenderTooltip(closestSeriesData, MarginLeft, MarginTop, Height ?? 0);
+                        chartTooltipContainer.Refresh();
+                        await Task.Yield();
+                    }
+                    return;
+                }
+
                 if (tooltip != null)
                 {
                     tooltipData = null;
                     tooltip = null;
 
-                    StateHasChanged();
+                    chartTooltipContainer.Refresh();
                     await Task.Yield();
                 }
             }

Radzen.Blazor/RadzenChartTooltipOptions.cs

@@ -8,7 +8,7 @@ namespace Radzen.Blazor
     public partial class RadzenChartTooltipOptions : RadzenChartComponentBase
     {
         /// <summary>
-        /// Gets or sets a value indicating whether to show tooltips. By defaults RadzenChart displays tooltips.
+        /// Gets or sets a value indicating whether to show tooltips. By default RadzenChart displays tooltips.
         /// </summary>
         /// <value><c>true</c> to display tooltips; otherwise, <c>false</c>.</value>
         [Parameter]
@@ -21,6 +21,12 @@ namespace Radzen.Blazor
         [Parameter]
         public string Style { get; set; }
 
+        /// <summary>
+        /// Enable or disable shared tooltips (one tooltip displaying data for all values for the same category). By default set to false (a separate tooltip is shown for each point in the category).
+        /// </summary>
+        [Parameter]
+        public bool Shared { get; set; }
+
         /// <inheritdoc />
         protected override void Initialize()
         {

Radzen.Blazor/RadzenCheckBox.razor

@@ -5,10 +5,10 @@
 @inherits FormComponent<TValue>
 @if (Visible)
 {
-    <div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" @onkeypress=@OnKeyPress @onkeypress:preventDefault style="@Style" tabindex="@(Disabled ? "-1" : $"{TabIndex}")" id="@GetId()">
+    <div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" @onkeypress=@OnKeyPress @onkeypress:preventDefault style="@Style" tabindex="@(Disabled || ReadOnly ? "-1" : $"{TabIndex}")" id="@GetId()">
     <div class="rz-helper-hidden-accessible">
-        <input type="checkbox" @onchange=@Toggle value=@CheckBoxValue name=@Name id=@Name checked=@CheckBoxChecked
-            tabindex="-1">
+        <input type="checkbox" @onchange=@Toggle value=@CheckBoxValue name=@Name id=@Name checked=@CheckBoxChecked aria-checked="@((Value as bool? == true).ToString().ToLowerInvariant())" @attributes="InputAttributes"
+            tabindex="-1" readonly="@ReadOnly">
     </div>
     <div class=@BoxClassList @onclick=@Toggle @onclick:preventDefault>
         <span class=@IconClassList></span>

Radzen.Blazor/RadzenCheckBox.razor.cs

@@ -1,6 +1,7 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Radzen.Blazor.Rendering;
+using System.Collections.Generic;
 using System.Threading.Tasks;
 
 namespace Radzen.Blazor
@@ -16,6 +17,13 @@ namespace Radzen.Blazor
     /// </example>
     public partial class RadzenCheckBox<TValue> : FormComponent<TValue>
     {
+        /// <summary>
+        /// Specifies additional custom attributes that will be rendered by the input.
+        /// </summary>
+        /// <value>The attributes.</value>
+        [Parameter]
+        public IReadOnlyDictionary<string, object> InputAttributes { get; set; }
+
         /// <summary>
         /// Gets or sets a value indicating whether is tri-state (true, false or null).
         /// </summary>
@@ -27,7 +35,7 @@ namespace Radzen.Blazor
                                            .Add("rz-state-active", !object.Equals(Value, false))
                                            .AddDisabled(Disabled);
 
-        ClassList IconClassList => ClassList.Create("rz-chkbox-icon")
+        ClassList IconClassList => ClassList.Create("notranslate rz-chkbox-icon")
                                             .Add("rzi rzi-check", object.Equals(Value, true))
                                             .Add("rzi rzi-times", object.Equals(Value, null));
 
@@ -49,9 +57,16 @@ namespace Radzen.Blazor
             }
         }
 
+        /// <summary>
+        /// Gets or sets a value indicating whether is read only.
+        /// </summary>
+        /// <value><c>true</c> if is read only; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool ReadOnly { get; set; }
+
         async Task Toggle()
         {
-            if (Disabled)
+            if (Disabled || ReadOnly)
             {
                 return;
             }

Radzen.Blazor/RadzenCheckBoxList.razor

@@ -18,22 +18,32 @@
         @if (AllowSelectAll)
         {
             <div class="rz-multiselect-header rz-helper-clearfix" @onclick:preventDefault>
-                <RadzenCheckBox Name="SelectAll" TValue="bool?" Value="@IsAllSelected()" Change="@SelectAll" />
+                <RadzenCheckBox ReadOnly="@ReadOnly" Disabled="@Disabled" Name="SelectAll" TValue="bool?" Value="@IsAllSelected()" Change="@SelectAll"
+                                InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", SelectAllText }})" />
                 <RadzenLabel Component="SelectAll" Text="@SelectAllText" class="rz-chkbox-label" />
             </div>
         }
         @foreach (var item in allItems.Where(i => i.Visible))
         {
             <div @ref="@item.Element" id="@item.GetItemId()" @onclick="@(args => SelectItem(item))" @attributes="item.Attributes" class="@item.GetItemCssClass()" style="@item.Style">
-                <div class="rz-chkbox " @onkeypress="@(async args => { if (args.Code == "Space") { await SelectItem(item); } })" tabindex="@(Disabled || item.Disabled ? "-1" : $"{TabIndex}")">
+                <div class="rz-chkbox" @onkeypress="@(args => OnKeyPress(args, SelectItem(item)))" @onkeypress:preventDefault=preventKeyPress @onkeypress:stopPropagation tabindex="@(Disabled || ReadOnly || item.Disabled || item.ReadOnly ? "-1" : $"{TabIndex}")">
                     <div class="rz-helper-hidden-accessible">
-                        <input type="checkbox" name="@Name" value="@item.Value" disabled="@Disabled" tabindex="-1">
+                        <input type="checkbox" name="@Name" value="@item.Value" disabled="@Disabled" readonly="@ReadOnly" tabindex="-1" aria-label="@(item.Text + " " + item.Value)" aria-checked="@(IsSelected(item).ToString().ToLowerInvariant())">
                     </div>
                     <div class=@ItemClassList(item)>
                         <span class=@IconClassList(item)></span>
                     </div>
                 </div>
-                <label class="rz-chkbox-label">@item.Text</label>
+                @if (item.Template != null)
+                {
+                    <div class="rz-chkbox-template" @onkeydown:stopPropagation>
+                        @item.Template(item)
+                    </div>
+                }
+                else
+                {
+                    <label class="rz-chkbox-label" aria-hidden="true">@((MarkupString)item.Text)</label>
+                }
             </div>
         }
     </div>

Radzen.Blazor/RadzenCheckBoxList.razor.cs

@@ -30,7 +30,7 @@ namespace Radzen.Blazor
                                                                             .AddDisabled(Disabled || item.Disabled);
 
         ClassList IconClassList(RadzenCheckBoxListItem<TValue> item) => ClassList.Create("rz-chkbox-icon")
-                                                                            .Add("rzi rzi-check", IsSelected(item));
+                                                                            .Add("notranslate rzi rzi-check", IsSelected(item));
 
         /// <summary>
         /// Gets or sets the value property.
@@ -46,6 +46,20 @@ namespace Radzen.Blazor
         [Parameter]
         public string TextProperty { get; set; }
 
+        /// <summary>
+        /// Gets or sets the disabled property.
+        /// </summary>
+        /// <value>The disabled property.</value>
+        [Parameter]
+        public string DisabledProperty { get; set; }
+
+        /// <summary>
+        /// Gets or sets the read-only property.
+        /// </summary>
+        /// <value>The read-only property.</value>
+        [Parameter]
+        public string ReadOnlyProperty { get; set; }
+
         IEnumerable<RadzenCheckBoxListItem<TValue>> allItems
         {
             get
@@ -55,6 +69,17 @@ namespace Radzen.Blazor
                     var item = new RadzenCheckBoxListItem<TValue>();
                     item.SetText((string)PropertyAccess.GetItemOrValueFromProperty(i, TextProperty));
                     item.SetValue((TValue)PropertyAccess.GetItemOrValueFromProperty(i, ValueProperty));
+
+                    if (DisabledProperty != null && PropertyAccess.TryGetItemOrValueFromProperty<bool>(i, DisabledProperty, out var disabledResult))
+                    {
+                        item.SetDisabled(disabledResult);
+                    }
+
+                    if (ReadOnlyProperty != null && PropertyAccess.TryGetItemOrValueFromProperty<bool>(i, ReadOnlyProperty, out var readOnlyResult))
+                    {
+                        item.SetReadOnly(readOnlyResult);
+                    }
+
                     return item;
                 }));
             }
@@ -76,14 +101,14 @@ namespace Radzen.Blazor
 
         async Task SelectAll(bool? value)
         {
-            if (Disabled)
+            if (Disabled || ReadOnly)
             {
                 return;
             }
 
             if (value == true)
             {
-                Value = items.Select(i => i.Value);
+                Value = allItems.Where(i => !i.Disabled).Select(i => i.Value);
             }
             else if (value == false)
             {
@@ -100,8 +125,8 @@ namespace Radzen.Blazor
         bool? IsAllSelected()
         {
             Func<RadzenCheckBoxListItem<TValue>, bool> predicate = i => Value != null && Value.Contains(i.Value);
-            var all = items.All(predicate);
-            var any = items.Any(predicate);
+            var all = allItems.All(predicate);
+            var any = allItems.Any(predicate);
 
             if (all)
             {
@@ -114,6 +139,7 @@ namespace Radzen.Blazor
         }
 
         IEnumerable _data = null;
+
         /// <summary>
         /// Gets or sets the data used to generate items.
         /// </summary>
@@ -135,6 +161,13 @@ namespace Radzen.Blazor
             }
         }
 
+        /// <summary>
+        /// Gets or sets a value indicating whether is read only.
+        /// </summary>
+        /// <value><c>true</c> if is read only; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool ReadOnly { get; set; }
+
         /// <inheritdoc />
         protected override string GetComponentCssClass()
         {
@@ -214,7 +247,7 @@ namespace Radzen.Blazor
         /// <param name="item">The item.</param>
         protected async System.Threading.Tasks.Task SelectItem(RadzenCheckBoxListItem<TValue> item)
         {
-            if (Disabled || item.Disabled)
+            if (Disabled || item.Disabled || ReadOnly || item.ReadOnly)
                 return;
 
             List<TValue> selectedValues = new List<TValue>(Value != null ? Value : Enumerable.Empty<TValue>());
@@ -237,9 +270,21 @@ namespace Radzen.Blazor
             StateHasChanged();
         }
 
-        private string getDisabledState(RadzenCheckBoxListItem<TValue> item)
+        bool preventKeyPress = true;
+        async Task OnKeyPress(KeyboardEventArgs args, Task task)
         {
-            return Disabled || item.Disabled ? " rz-state-disabled" : "";
+            var key = args.Code != null ? args.Code : args.Key;
+
+            if (key == "Space" || key == "Enter")
+            {
+                preventKeyPress = true;
+
+                await task;
+            }
+            else
+            {
+                preventKeyPress = false;
+            }
         }
     }
 }

Radzen.Blazor/RadzenCheckBoxListItem.cs

@@ -15,6 +15,13 @@ namespace Radzen.Blazor
         [Parameter]
         public string Text { get; set; }
 
+        /// <summary>
+        /// Gets or sets the template.
+        /// </summary>
+        /// <value>The template.</value>
+        [Parameter]
+        public RenderFragment<RadzenCheckBoxListItem<TValue>> Template { get; set; }
+
         /// <summary>
         /// Gets or sets the value.
         /// </summary>
@@ -29,6 +36,13 @@ namespace Radzen.Blazor
         [Parameter]
         public virtual bool Disabled { get; set; }
 
+        /// <summary>
+        /// Gets or sets a value indicating whether is read only.
+        /// </summary>
+        /// <value><c>true</c> if is read only; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool ReadOnly { get; set; }
+
         RadzenCheckBoxList<TValue> _checkBoxList;
 
         /// <summary>
@@ -70,6 +84,17 @@ namespace Radzen.Blazor
         {
             Value = value;
         }
+
+        internal void SetDisabled(bool value)
+        {
+            Disabled = value;
+        }
+
+        internal void SetReadOnly(bool value)
+        {
+            ReadOnly = value;
+        }
+
         internal string GetItemId()
         {
             return GetId();

Radzen.Blazor/RadzenColorPicker.razor

@@ -5,28 +5,31 @@
 
 @if (Visible)
 {
-    <div @ref=@Element style=@Style @onclick=@Toggle @attributes=@Attributes class=@GetCssClass() id=@GetId()>
-        @if(Icon != null)
+    <div @ref=@Element style=@Style @onclick=@Toggle @attributes=@Attributes class=@GetCssClass() id=@GetId() tabindex="@(Disabled ? -1 : TabIndex)" @onkeypress="@(args => OnKeyPress(args, Toggle()))" @onkeypress:preventDefault=preventKeyPress @onkeypress:stopPropagation>
+        @if (Icon != null)
         {
-            <i class="rzi">@Icon</i>
+            <i class="notranslate rzi" style="@(!string.IsNullOrEmpty(IconColor) ? $"color:{IconColor}" : null)">@Icon</i>
         }
-        <div class="rz-colorpicker-value" style="background-color: @Color" ></div>
-        <button type="button" tabindex="-1" class="rz-colorpicker-trigger" disabled=@Disabled @onclick:preventDefault><i class="rzi" /></button>
-        <Popup Lazy=@(PopupRenderMode == PopupRenderMode.OnDemand) @ref=@Popup class="rz-colorpicker-popup" Close=@Close Open=@Open>
+        <div class="rz-colorpicker-value" style="background-color: @Value" ></div>
+        <button aria-label="@ToggleAriaLabel" type="button" tabindex="-1" class="rz-colorpicker-trigger" disabled=@Disabled @onclick:preventDefault><i class="notranslate rzi" /></button>
+        <Popup Lazy=@(PopupRenderMode == PopupRenderMode.OnDemand) @ref=@Popup class="rz-colorpicker-popup" Close=@OnClosePopup Open=@Open>
             @if (ShowHSV)
             {
-                <Draggable class="rz-saturation-picker rz-colorpicker-section" style=@($"background-color: {HSV.ToRGB().ToCSS()}") Drag=@OnSaturationMove>
+                <Draggable class="rz-saturation-picker rz-colorpicker-section" style=@($"background-color: hsl({(HueHandleLeft * 360).ToInvariantString()}, 100%, 50%)") Drag=@OnSaturationMove
+                           id=@(GetId() + "hsl" ) tabindex="@(Disabled ? -1 : 0)" @onkeydown="@(args => OnHslKeyPress(args))">
                     <div class="rz-saturation-white">
                         <div class="rz-saturation-black"></div>
-                        <div class="rz-saturation-handle" style=@($"top: {(SaturationHandleTop*100).ToInvariantString()}%; left: {(SaturationHandleLeft * 100).ToInvariantString()}%")></div>
+                        <div class="rz-saturation-handle" style=@($"top: {(SaturationHandleTop * 100).ToInvariantString()}%; left: {(SaturationHandleLeft * 100).ToInvariantString()}%")></div>
                     </div>
                 </Draggable>
                 <div class="rz-colorpicker-preview-area rz-colorpicker-section">
                     <div class="rz-hue-and-alpha">
-                        <Draggable class="rz-hue-picker" Drag=@OnHueMove>
+                        <Draggable class="rz-hue-picker" Drag=@OnHueMove 
+                            id=@(GetId() + "hue" ) tabindex="@(Disabled ? -1 : 0)" @onkeydown="@(args => OnHueKeyPress(args))">
                             <div class="rz-hue-handle" style=@($"top: 0; left: {(HueHandleLeft * 100).ToInvariantString()}%")></div>
                         </Draggable>
-                        <Draggable style=@($"background-image: linear-gradient(to right, {AlphaGradientStart} 0%, {AlphaGradientEnd} 100%)") class="rz-alpha-picker" Drag=@OnAlphaMove>
+                        <Draggable style=@($"background-image: linear-gradient(to right, {AlphaGradientStart} 0%, {AlphaGradientEnd} 100%)") class="rz-alpha-picker" Drag=@OnAlphaMove
+                            id=@(GetId() + "alpha" ) tabindex="@(Disabled ? -1 : 0)" @onkeydown="@(args => OnAlphaKeyPress(args))">
                             <div class="rz-alpha-handle" style=@($"top: 0; left: {(AlphaHandleLeft * 100).ToInvariantString()}%")></div>
                         </Draggable>
                     </div>
@@ -37,32 +40,32 @@
             {
                 <div class="rz-colorpicker-rgba rz-colorpicker-section" @onmousedown:stopPropagation> 
                     <div class="rz-color-box">
-                        <RadzenTextBox Value=@Hex @oninput=@(args => ChangeRGB(args.Value)) />
+                        <RadzenTextBox Value=@Hex @oninput=@(args => ChangeRGB(args.Value)) aria-label=@HexText />
                         @HexText
                     </div>
                     <div class="rz-color-box">
-                        <RadzenNumeric TValue="double" Value=@Red Min="0" Max="255" 
+                        <RadzenNumeric TValue="double" Value=@Red Min="0" Max="255" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", RedText }})"
                             @oninput=@(args => ChangeColor(args.Value, (color, value) => color.Red = value)) 
                             Change=@(red => ChangeColor(red, (color, value) => color.Red = value)) 
                         />
                         @RedText
                     </div>
                     <div class="rz-color-box">
-                        <RadzenNumeric TValue="double" Value=@Green Min="0" Max="255" 
+                        <RadzenNumeric TValue="double" Value=@Green Min="0" Max="255" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", GreenText }})"
                             @oninput=@(args => ChangeColor(args.Value, (color, value) => color.Green = value)) 
                             Change=@(green => ChangeColor(green, (color, value) => color.Green = value)) 
                         />
                         @GreenText
                     </div>
                     <div class="rz-color-box">
-                        <RadzenNumeric TValue="double" Value=@Blue Min="0" Max="255" 
+                        <RadzenNumeric TValue="double" Value=@Blue Min="0" Max="255" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", BlueText }})"
                             @oninput=@(args => ChangeColor(args.Value, (color, value) => color.Blue = value)) 
                             Change=@(blue => ChangeColor(blue, (color, value) => color.Blue = value)) 
                         />
                         @BlueText
                     </div>
                     <div class="rz-color-box">
-                        <RadzenNumeric TValue="double" Value=@Alpha Min="0" Max="100" 
+                        <RadzenNumeric TValue="double" Value=@Alpha Min="0" Max="100" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", AlphaText }})"
                             @oninput=@(args => ChangeAlpha(args.Value)) 
                             Change=@(alpha => ChangeAlpha(alpha)) 
                         />
@@ -107,7 +110,7 @@
                 </div>
 
             }
-            @if(ShowButton)
+            @if (ShowButton)
             {
                 <div class="rz-colorpicker-button rz-colorpicker-section">
                     <RadzenButton ButtonStyle="ButtonStyle.Primary" Click=@OnClick Text=@ButtonText @onclick:preventDefault />

Radzen.Blazor/RadzenColorPicker.razor.cs

@@ -1,8 +1,10 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 using Radzen.Blazor.Rendering;
 using System;
 using System.Collections.Generic;
 using System.Threading.Tasks;
+using Microsoft.JSInterop;
 
 namespace Radzen.Blazor
 {
@@ -16,6 +18,13 @@ namespace Radzen.Blazor
     /// </example>
     public partial class RadzenColorPicker : FormComponent<string>
     {
+        /// <summary>
+        /// Gets or sets the toggle popup aria label text.
+        /// </summary>
+        /// <value>The toggle popup aria label text.</value>
+        [Parameter]
+        public string ToggleAriaLabel { get; set; } = "Toggle";
+
         /// <summary>
         /// Gets or sets the open callback.
         /// </summary>
@@ -37,6 +46,13 @@ namespace Radzen.Blazor
         [Parameter]
         public string Icon { get; set; }
 
+        /// <summary>
+        /// Gets or sets the icon color.
+        /// </summary>
+        /// <value>The icon color.</value>
+        [Parameter]
+        public string IconColor { get; set; }
+
         /// <summary>
         /// Gets or sets the hexadecimal color label text.
         /// </summary>
@@ -151,16 +167,27 @@ namespace Radzen.Blazor
             }
         }
 
+        void UpdateColorUsingHsvHandles()
+        {
+            var hsv = new HSV {
+                Hue = HueHandleLeft,
+                Saturation = SaturationHandleLeft,
+                Value = 1 - SaturationHandleTop,
+                Alpha = AlphaHandleLeft
+            };
+            Color = hsv.ToRGB().ToCSS();
+            TriggerChange();
+        }
+
+        Rect lastHslRect;
         void OnSaturationMove(DraggableEventArgs args)
         {
+            lastHslRect = args.Rect; ;
+
             SaturationHandleLeft = Math.Clamp((args.ClientX - args.Rect.Left) / args.Rect.Width, 0, 1);
             SaturationHandleTop = Math.Clamp((args.ClientY - args.Rect.Top) / args.Rect.Height, 0, 1);
 
-            var hsv = new HSV { Hue = HSV.Hue, Saturation = SaturationHandleLeft, Value = 1 - SaturationHandleTop, Alpha = AlphaHandleLeft };
-
-            Color = hsv.ToRGB().ToCSS();
-
-            TriggerChange();
+            UpdateColorUsingHsvHandles();
         }
 
         void TriggerChange()
@@ -176,23 +203,17 @@ namespace Radzen.Blazor
 
         void ChangeRGB(object value)
         {
-            SetValue(value as string);
-        }
-
-        void SetValue(string value)
-        {
-            var rgb = RGB.Parse(value);
-
+            var rgb = RGB.Parse(value as string);
             if (rgb != null)
             {
-                Color = rgb.ToCSS();
+                rgb.Alpha = AlphaHandleLeft;
                 UpdateColor(rgb);
             }
         }
 
         internal async Task SelectColor(string value)
         {
-            SetValue(value);
+            UpdateColor(RGB.Parse(value));
 
             if (!ShowButton)
             {
@@ -204,11 +225,12 @@ namespace Radzen.Blazor
         {
             Color = rgb.ToCSS();
 
-            HSV = rgb.ToHSV();
+            var hsv = rgb.ToHSV();
 
-            SaturationHandleLeft = HSV.Saturation;
-            SaturationHandleTop = 1 - HSV.Value;
-            HueHandleLeft = HSV.Hue;
+            SaturationHandleLeft = hsv.Saturation;
+            SaturationHandleTop = 1 - hsv.Value;
+            HueHandleLeft = hsv.Hue;
+            AlphaHandleLeft = hsv.Alpha;
 
             TriggerChange();
         }
@@ -254,29 +276,24 @@ namespace Radzen.Blazor
             }
         }
 
+        Rect lastAlphaRect;
         void OnAlphaMove(DraggableEventArgs args)
         {
+            lastAlphaRect = args.Rect;
+
             AlphaHandleLeft = Math.Round(Math.Clamp((args.ClientX - args.Rect.Left) / args.Rect.Width, 0, 1), 2);
 
-            HSV.Alpha = AlphaHandleLeft;
-
-            var hsv = new HSV { Hue = HSV.Hue, Saturation = SaturationHandleLeft, Value = 1 - SaturationHandleTop, Alpha = AlphaHandleLeft };
-
-            Color = hsv.ToRGB().ToCSS();
-
-            TriggerChange();
+            UpdateColorUsingHsvHandles();
         }
 
+        Rect lastHueRect;
         void OnHueMove(DraggableEventArgs args)
         {
+            lastHueRect = args.Rect;
+
             HueHandleLeft = Math.Clamp((args.ClientX - args.Rect.Left) / args.Rect.Width, 0, 1);
 
-            HSV.Hue = HueHandleLeft;
-            var hsv = new HSV { Hue = HSV.Hue, Saturation = SaturationHandleLeft, Value = 1 - SaturationHandleTop, Alpha = AlphaHandleLeft };
-
-            Color = hsv.ToRGB().ToCSS();
-
-            TriggerChange();
+            UpdateColorUsingHsvHandles();
         }
 
         async Task OnClick()
@@ -286,6 +303,15 @@ namespace Radzen.Blazor
             await Popup.CloseAsync();
         }
 
+        async Task OnClosePopup()
+        {
+            if (ShowButton)
+            {
+                SetInitialValue();
+            }
+            await Close.InvokeAsync(null);
+        }
+
         /// <summary>
         /// Gets or sets a value indicating whether button is shown.
         /// </summary>
@@ -328,11 +354,10 @@ namespace Radzen.Blazor
         [Parameter]
         public PopupRenderMode PopupRenderMode { get; set; } = PopupRenderMode.Initial;
 
-        double SaturationHandleLeft { get; set; }
-        double HueHandleLeft { get; set; }
+        double SaturationHandleLeft { get; set; } = 0;
+        double SaturationHandleTop { get; set; } = 0;
+        double HueHandleLeft { get; set; } = 0;
         double AlphaHandleLeft { get; set; } = 1;
-        double SaturationHandleTop { get; set; }
-        HSV HSV { get; set; } = new HSV { Hue = 0, Saturation = 1, Value = 1 };
         string Color { get; set; } = "rgb(255, 255, 255)";
 
         async Task Toggle()
@@ -349,7 +374,7 @@ namespace Radzen.Blazor
 
             if (Disabled)
             {
-                classList.Add("rz-disabled");
+                classList.Add("rz-state-disabled");
             }
 
             return string.Join(" ", classList);
@@ -358,12 +383,12 @@ namespace Radzen.Blazor
         /// <inheritdoc />
         protected override void OnInitialized()
         {
-            Init();
+            SetInitialValue();
 
             base.OnInitialized();
         }
 
-        void Init()
+        void SetInitialValue()
         {
             var value = Value;
 
@@ -376,17 +401,11 @@ namespace Radzen.Blazor
             {
                 Color = value;
 
-                HSV = RGB.Parse(Color).ToHSV();
-                SaturationHandleLeft = HSV.Saturation;
-                SaturationHandleTop = 1 - HSV.Value;
-                HSV.Saturation = 1;
-                HSV.Value = 1;
-                HueHandleLeft = HSV.Hue;
-
-                if (value.StartsWith("rgba"))
-                {
-                    AlphaHandleLeft = HSV.Alpha;
-                }
+                var hsv = RGB.Parse(Color).ToHSV();
+                SaturationHandleLeft = hsv.Saturation;
+                SaturationHandleTop = 1 - hsv.Value;
+                HueHandleLeft = hsv.Hue;
+                AlphaHandleLeft = hsv.Alpha;
             }
         }
 
@@ -399,8 +418,115 @@ namespace Radzen.Blazor
 
             if (valueChanged)
             {
-                Init();
+                SetInitialValue();
             }
         }
+
+        async Task OnHueKeyPress(KeyboardEventArgs args)
+        {
+            var key = args.Code != null ? args.Code : args.Key;
+
+            if (key == "ArrowLeft" || key == "ArrowRight")
+            {
+                preventKeyPress = true;
+
+                if (lastHueRect == null)
+                {
+                    lastHueRect = await JSRuntime.InvokeAsync<Rect>("Radzen.clientRect", (GetId() + "hue"));
+                }
+
+                OnHueMove(new DraggableEventArgs() { Rect = lastHueRect, ClientX = lastHueRect.Left + lastHueRect.Width * HueHandleLeft + (key == "ArrowLeft" ? -1 : 1) });
+            }
+            else if (key == "Escape")
+            {
+                await ClosePopup();
+            }
+            else
+            {
+                preventKeyPress = false;
+            }
+        }
+
+        async Task OnAlphaKeyPress(KeyboardEventArgs args)
+        {
+            var key = args.Code != null ? args.Code : args.Key;
+
+            if (key == "ArrowLeft" || key == "ArrowRight")
+            {
+                preventKeyPress = true;
+
+                if (lastAlphaRect == null)
+                {
+                    lastAlphaRect = await JSRuntime.InvokeAsync<Rect>("Radzen.clientRect", (GetId() + "alpha"));
+                }
+
+                OnAlphaMove(new DraggableEventArgs() { Rect = lastAlphaRect, ClientX = lastAlphaRect.Left + lastAlphaRect.Width * AlphaHandleLeft + (key == "ArrowLeft" ? -3 : 3) });
+            }
+            else if (key == "Escape")
+            {
+                await ClosePopup();
+            }
+            else
+            {
+                preventKeyPress = false;
+            }
+        }
+
+        async Task OnHslKeyPress(KeyboardEventArgs args)
+        {
+            var key = args.Code != null ? args.Code : args.Key;
+
+            if (lastHslRect == null)
+            {
+                lastHslRect = await JSRuntime.InvokeAsync<Rect>("Radzen.clientRect", (GetId() + "hsl"));
+            }
+
+            if (key == "ArrowLeft" || key == "ArrowRight" || key == "ArrowUp" || key == "ArrowDown")
+            {
+                preventKeyPress = true;
+
+                OnSaturationMove(new DraggableEventArgs() 
+                { 
+                    Rect = lastHslRect, 
+                    ClientX = lastHslRect.Left + lastHslRect.Width * SaturationHandleLeft + (key == "ArrowLeft" ? -1 : key == "ArrowRight" ? 1 : 0),
+                    ClientY = lastHslRect.Top + lastHslRect.Height * SaturationHandleTop + (key == "ArrowUp" ? -1 : key == "ArrowDown" ? 1 : 0)
+                });
+            }
+            else if (key == "Escape")
+            {
+                await ClosePopup();
+            }
+            else
+            {
+                preventKeyPress = false;
+            }
+        }
+
+        bool preventKeyPress = false;
+        async Task OnKeyPress(KeyboardEventArgs args, Task task)
+        {
+            var key = args.Code != null ? args.Code : args.Key;
+
+            if (key == "Space" || key == "Enter")
+            {
+                preventKeyPress = true;
+
+                await task;
+            }
+            else if (key == "Escape")
+            {
+                await ClosePopup();
+            }
+            else
+            {
+                preventKeyPress = false;
+            }
+        }
+
+        internal async Task ClosePopup()
+        {
+            await Popup.CloseAsync();
+            await JSRuntime.InvokeVoidAsync("Radzen.focusElement", GetId());
+        }
     }
 }

Radzen.Blazor/RadzenColorPickerItem.razor

@@ -1,3 +1,4 @@
 @using Radzen.Blazor.Rendering
 
-<div class="rz-colorpicker-item" style="background-color: @Background" @onmousedown:preventDefault @onclick=@OnClick></div>
+<div class="rz-colorpicker-item" style="background-color: @Background" @onmousedown:preventDefault @onclick=@OnClick
+     tabindex="@(ColorPicker.Disabled ? -1 : 0)" @onkeypress="@(args => OnKeyPress(args, OnClick()))" @onkeypress:preventDefault=preventKeyPress @onkeypress:stopPropagation></div>

Radzen.Blazor/RadzenColorPickerItem.razor.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 using Radzen.Blazor.Rendering;
 using System.Threading.Tasks;
 
@@ -37,5 +38,26 @@ namespace Radzen.Blazor
         {
             await ColorPicker.SelectColor(Value);
         }
+
+        bool preventKeyPress = false;
+        async Task OnKeyPress(KeyboardEventArgs args, Task task)
+        {
+            var key = args.Code != null ? args.Code : args.Key;
+
+            if (key == "Space" || key == "Enter")
+            {
+                preventKeyPress = true;
+
+                await task;
+            }
+            else if (key == "Escape")
+            {
+                await ColorPicker.ClosePopup();
+            }
+            else
+            {
+                preventKeyPress = false;
+            }
+        }
     }
 }

Radzen.Blazor/RadzenColumn.razor

@@ -0,0 +1,6 @@
+@inherits RadzenComponentWithChildren
+
+@if (Visible)
+{
+    <div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" style="@GetStyle()" id="@GetId()">@ChildContent</div>
+}

Radzen.Blazor/RadzenColumn.razor.cs

@@ -0,0 +1,245 @@
+using Microsoft.AspNetCore.Components;
+using System;
+using System.Collections.Generic;
+using System.ComponentModel.DataAnnotations;
+using System.Linq;
+using System.Text;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenColumn component.
+    /// </summary>
+    public partial class RadzenColumn : RadzenComponentWithChildren
+    {
+        /// <summary>
+        /// Gets or sets the size.
+        /// </summary>
+        /// <value>The size.</value>
+        [Parameter]
+        public int? Size { get; set; }
+
+        /// <summary>
+        /// Gets or sets the XS size.
+        /// </summary>
+        /// <value>The XS size.</value>
+        [Parameter]
+        public int? SizeXS { get; set; }
+
+        /// <summary>
+        /// Gets or sets the SM size.
+        /// </summary>
+        /// <value>The SM size.</value>
+        [Parameter]
+        public int? SizeSM { get; set; }
+
+        /// <summary>
+        /// Gets or sets the MD size.
+        /// </summary>
+        /// <value>The MD size.</value>
+        [Parameter]
+        public int? SizeMD { get; set; }
+
+        /// <summary>
+        /// Gets or sets the LG size.
+        /// </summary>
+        /// <value>The LG size.</value>
+        [Parameter]
+        public int? SizeLG { get; set; }
+
+        /// <summary>
+        /// Gets or sets the XL size.
+        /// </summary>
+        /// <value>The XL size.</value>
+        [Parameter]
+        public int? SizeXL { get; set; }
+
+        /// <summary>
+        /// Gets or sets the XX size.
+        /// </summary>
+        /// <value>The XX size.</value>
+        [Parameter]
+        public int? SizeXX { get; set; }
+
+        /// <summary>
+        /// Gets or sets the offset.
+        /// </summary>
+        /// <value>The offset.</value>
+        [Parameter]
+        public int? Offset { get; set; }
+
+        /// <summary>
+        /// Gets or sets the XS offset.
+        /// </summary>
+        /// <value>The XS offset.</value>
+        [Parameter]
+        public int? OffsetXS { get; set; }
+
+        /// <summary>
+        /// Gets or sets the SM offset.
+        /// </summary>
+        /// <value>The SM offset.</value>
+        [Parameter]
+        public int? OffsetSM { get; set; }
+
+        /// <summary>
+        /// Gets or sets the MD offset.
+        /// </summary>
+        /// <value>The MD offset.</value>
+        [Parameter]
+        public int? OffsetMD { get; set; }
+
+        /// <summary>
+        /// Gets or sets the LG offset.
+        /// </summary>
+        /// <value>The LG offset.</value>
+        [Parameter]
+        public int? OffsetLG { get; set; }
+
+        /// <summary>
+        /// Gets or sets the XL offset.
+        /// </summary>
+        /// <value>The XL offset.</value>
+        [Parameter]
+        public int? OffsetXL { get; set; }
+
+        /// <summary>
+        /// Gets or sets the XX offset.
+        /// </summary>
+        /// <value>The XX offset.</value>
+        [Parameter]
+        public int? OffsetXX { get; set; }
+
+        /// <summary>
+        /// Gets or sets the order.
+        /// </summary>
+        /// <value>The order.</value>
+        [Parameter]
+        public string Order { get; set; }
+
+        /// <summary>
+        /// Gets or sets the XS order.
+        /// </summary>
+        /// <value>The XS order.</value>
+        [Parameter]
+        public string OrderXS { get; set; }
+
+        /// <summary>
+        /// Gets or sets the SM order.
+        /// </summary>
+        /// <value>The SM order.</value>
+        [Parameter]
+        public string OrderSM { get; set; }
+
+        /// <summary>
+        /// Gets or sets the MD order.
+        /// </summary>
+        /// <value>The MD order.</value>
+        [Parameter]
+        public string OrderMD { get; set; }
+
+        /// <summary>
+        /// Gets or sets the LG order.
+        /// </summary>
+        /// <value>The LG order.</value>
+        [Parameter]
+        public string OrderLG { get; set; }
+
+        /// <summary>
+        /// Gets or sets the XL order.
+        /// </summary>
+        /// <value>The XL order.</value>
+        [Parameter]
+        public string OrderXL { get; set; }
+
+        /// <summary>
+        /// Gets or sets the XX order.
+        /// </summary>
+        /// <value>The XX order.</value>
+        [Parameter]
+        public string OrderXX { get; set; }
+
+        /// <summary>
+        /// Gets the final CSS style rendered by the component. Combines it with a <c>style</c> custom attribute.
+        /// </summary>
+        protected string GetStyle()
+        {
+            if (Attributes != null && Attributes.TryGetValue("style", out var style) && !string.IsNullOrEmpty(Convert.ToString(@style)))
+            {
+                return $"{GetComponentStyle()} {@style}";
+            }
+
+            return GetComponentStyle();
+        }
+
+        /// <summary>
+        /// Gets the component CSS style.
+        /// </summary>
+        protected string GetComponentStyle()
+        {
+            return $"{Style}{(!string.IsNullOrEmpty(Style) && !Style.EndsWith(";") ? ";" : "")}";
+        }
+
+        /// <inheritdoc />
+        protected override string GetComponentCssClass()
+        {
+            var list = new List<string>
+            {
+                Size != null ? $"rz-col-{GetColumnValue("Size", Size)}" : "rz-col"
+            };
+
+            if (Offset != null)
+            {
+                list.Add($"rz-offset-{GetColumnValue("Offset", Offset)}");
+            }
+
+            if (!string.IsNullOrEmpty(Order))
+            {
+                list.Add($"rz-order-{GetOrderValue("Order", Order)}");
+            }
+
+            var breakPoints = new string[] { "xs", "sm", "md", "lg", "xl", "xx" };
+
+            var properties = GetType().GetProperties()
+                .Where(p => breakPoints.Any(bp => p.Name.ToLower().EndsWith(bp)))
+                .Select(p => new { p.Name, BreakPoint = string.Concat(p.Name.ToLower().TakeLast(2)), Value = p.GetValue(this) });
+
+            foreach (var p in properties) 
+            {
+                if (p.Value != null)
+                {
+                    list.Add($"rz-{(!p.Name.StartsWith("Size") ? p.Name.ToLower().Replace(p.BreakPoint, "") + "-" : "col-")}{p.BreakPoint}-{GetColumnValue(p.Name, p.Value)}");
+                }
+            }
+
+            return string.Join(" ", list);
+        }
+
+        string GetColumnValue(string name, object value)
+        {
+            if (name.StartsWith("Order"))
+            {
+                return GetOrderValue(name, value.ToString());
+            }
+
+            if ((int)value < 0 || (int)value > 12)
+            {
+                throw new Exception($"Property {name} value should be between 0 and 12.");
+            }
+
+            return $"{value}";
+        }
+
+        string GetOrderValue(string name, string value)
+        {
+            var orders = Enumerable.Range(0, 12).Select(i => $"{i}").ToArray().Concat(new string[] { "first", "last" }); 
+
+            if (!orders.Contains(value))
+            {
+                throw new Exception($"Property {name} value should be between 0 and 12 or first/last.");
+            }
+
+            return value;
+        }
+    }
+}

Radzen.Blazor/RadzenColumnSeries.razor

@@ -24,15 +24,17 @@
         var width = bandWidth / columnSeries.Count() - padding + padding / columnSeries.Count();;
         var className = $"rz-column-series rz-series-{Chart.Series.IndexOf(this)}";
 
-        return 
+        return
         @<g class="@className">
             @foreach(var data in Items)
             {
                 var x = category(data) - bandWidth / 2 + index * width + index * padding;
                 var y = value(data);
+                var itemValue = Value(data);
                 var radius = Chart.ColumnOptions.Radius;
+                var height = Math.Abs(y0 - y);
 
-                if (radius > width / 2)
+                if (radius > width / 2 || radius > height)
                 {
                     radius = 0;
                 }
@@ -43,11 +45,11 @@
                 {
                     path = $"M {x.ToInvariantString()} {y0.ToInvariantString()} L {(x+width).ToInvariantString()} {y0.ToInvariantString()} L {(x+width).ToInvariantString()} {(y-radius).ToInvariantString()} A {radius.ToInvariantString()} {radius.ToInvariantString()} 0 0 1 {(x + width - radius).ToInvariantString()} {y.ToInvariantString()} L {(x + radius).ToInvariantString()} {y.ToInvariantString()} A {radius.ToInvariantString()} {radius.ToInvariantString()} 0 0 1 {x.ToInvariantString()} {(y-radius).ToInvariantString()} L {x.ToInvariantString()} {y0.ToInvariantString()} Z";
                 }
-                var fill = PickColor(Items.IndexOf(data), Fills, Fill);
-                var stroke = PickColor(Items.IndexOf(data), Strokes, Stroke);
+                var fill = PickColor(Items.IndexOf(data), Fills, Fill, FillRange, itemValue);
+                var stroke = PickColor(Items.IndexOf(data), Strokes, Stroke, StrokeRange, itemValue);
 
                 <Path @key="@path" D="@path" Stroke="@stroke" StrokeWidth="@StrokeWidth" Fill="@fill" LineType="@LineType" Style="@style" />
             }
         </g>;
     }
-}
+}

Radzen.Blazor/RadzenColumnSeries.razor.cs

@@ -54,6 +54,20 @@ namespace Radzen.Blazor
         [Parameter]
         public LineType LineType { get; set; }
 
+        /// <summary>
+        /// Gets or sets the color range of the fill.
+        /// </summary>
+        /// <value>The color range of the fill.</value>
+        [Parameter]
+        public IList<SeriesColorRange> FillRange { get; set; }
+
+        /// <summary>
+        /// Gets or sets the color range of the stroke.
+        /// </summary>
+        /// <value>The color range of the stroke.</value>
+        [Parameter]
+        public IList<SeriesColorRange> StrokeRange { get; set; }
+
         /// <inheritdoc />
         public override string Color
         {
@@ -101,7 +115,7 @@ namespace Radzen.Blazor
 
             if (index >= 0)
             {
-                var color = PickColor(index, Fills, Fill);
+                var color = PickColor(index, Fills, Fill, FillRange, Value(item));
 
                 if (color != null)
                 {
@@ -134,7 +148,7 @@ namespace Radzen.Blazor
         /// <inheritdoc />
         public override bool Contains(double x, double y, double tolerance)
         {
-            return DataAt(x, y) != null;
+            return DataAt(x, y).Item1 != null;
         }
 
         /// <inheritdoc />
@@ -154,15 +168,11 @@ namespace Radzen.Blazor
         /// <inheritdoc />
         internal override double TooltipY(TItem item)
         {
-            var y = base.TooltipY(item);
-            var ticks = Chart.ValueScale.Ticks(Chart.ValueAxis.TickDistance);
-            var y0 = Chart.ValueScale.Scale(Math.Max(0, ticks.Start));
-
-            return Math.Min(y, y0);
+            return base.TooltipY(item);
         }
 
         /// <inheritdoc />
-        public override object DataAt(double x, double y)
+        public override (object, Point) DataAt(double x, double y)
         {
             var category = ComposeCategory(Chart.CategoryScale);
             var value = ComposeValue(Chart.ValueScale);
@@ -185,17 +195,33 @@ namespace Radzen.Blazor
 
                 if (startX <= x && x <= endX && startY <= y && y <= endY)
                 {
-                    return data;
+                    return (data, new Point() { X = x, Y = y });
                 }
             }
 
-            return null;
+            return (null, null);
         }
 
         /// <inheritdoc />
         public override IEnumerable<ChartDataLabel> GetDataLabels(double offsetX, double offsetY)
         {
-            return base.GetDataLabels(offsetX, offsetY - 16);
+            var list = new List<ChartDataLabel>();
+
+            int sign;
+
+            foreach (var d in Data)
+            {
+                sign = Value(d) < 0 ? -1 : Value(d) == 0 ? 0 : 1;
+
+                list.Add(new ChartDataLabel
+                {
+                    Position = new Point() { X = TooltipX(d) + offsetX, Y = TooltipY(d) - offsetY - (16 * sign) },
+                    TextAnchor = "middle",
+                    Text = Chart.ValueAxis.Format(Chart.ValueScale, Value(d))
+                });
+            }
+
+            return list;
         }
     }
-}
+}

Radzen.Blazor/RadzenCompareValidator.cs

@@ -1,5 +1,7 @@
 using System;
+using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Forms;
 
 namespace Radzen.Blazor
 {
@@ -51,7 +53,7 @@ namespace Radzen.Blazor
     ///      public string Password { get; set; }
     ///      public double Value { get; set; }
     ///      public string RepeatPassword { get; set; }
-    ///    } 
+    ///    }
     ///    Model model = new Model();
     /// }
     /// </code>
@@ -76,6 +78,13 @@ namespace Radzen.Blazor
         [Parameter]
         public CompareOperator Operator { get; set; } = CompareOperator.Equal;
 
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="RadzenCompareValidator"/> should be validated on value change of the specified Component.
+        /// </summary>
+        /// <value><c>true</c> if should be validated; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public virtual bool ValidateOnComponentValueChange { get; set; } = true;
+
         private int Compare(object componentValue)
         {
             switch (componentValue)
@@ -88,6 +97,41 @@ namespace Radzen.Blazor
                     return 0;
             }
         }
+
+        /// <inheritdoc />
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            var valueChanged = parameters.DidParameterChange(nameof(Value), Value);
+
+            await base.SetParametersAsync(parameters);
+
+            if (ValidateOnComponentValueChange && valueChanged && !firstRender && Visible)
+            {
+                var component = Form.FindComponent(Component);
+                if (component != null && component.FieldIdentifier.FieldName != null)
+                {
+                    IsValid = Validate(component);
+
+                    messages?.Clear(component.FieldIdentifier);
+
+                    if (!IsValid)
+                    {
+                        messages?.Add(component.FieldIdentifier, Text);
+                    }
+
+                    EditContext?.NotifyValidationStateChanged();
+                }
+            }
+        }
+
+        bool firstRender = true;
+        /// <inheritdoc />
+        protected override void OnAfterRender(bool firstRender)
+        {
+            this.firstRender = firstRender;
+            base.OnAfterRender(firstRender);
+        }
+
         /// <inheritdoc />
         protected override bool Validate(IRadzenFormComponent component)
         {

Radzen.Blazor/RadzenComponent.cs

@@ -22,7 +22,7 @@ namespace Radzen
         /// <summary>
         /// Gets a reference to the HTML element rendered by the component.
         /// </summary>
-        public ElementReference Element { get; internal set; }
+        public ElementReference Element { get; protected internal set; }
 
         /// <summary>
         /// A callback that will be invoked when the user hovers the component. Commonly used to display a tooltip via 
@@ -119,7 +119,7 @@ namespace Radzen
         /// Gets the unique identifier. 
         /// </summary>
         /// <returns>Returns the <c>id</c> attribute (if specified) or generates a random one.</returns>
-        protected string GetId()
+        protected virtual string GetId()
         {
             if (Attributes != null && Attributes.TryGetValue("id", out var id) && !string.IsNullOrEmpty(Convert.ToString(@id)))
             {
@@ -233,17 +233,17 @@ namespace Radzen
                 {
                     if (ContextMenu.HasDelegate)
                     {
-                        await JSRuntime.InvokeVoidAsync("Radzen.addContextMenu", UniqueID, Reference);
+                        await JSRuntime.InvokeVoidAsync("Radzen.addContextMenu", GetId(), Reference);
                     }
 
                     if (MouseEnter.HasDelegate)
                     {
-                        await JSRuntime.InvokeVoidAsync("Radzen.addMouseEnter", UniqueID, Reference);
+                        await JSRuntime.InvokeVoidAsync("Radzen.addMouseEnter", GetId(), Reference);
                     }
 
                     if (MouseLeave.HasDelegate)
                     {
-                        await JSRuntime.InvokeVoidAsync("Radzen.addMouseLeave", UniqueID, Reference);
+                        await JSRuntime.InvokeVoidAsync("Radzen.addMouseLeave", GetId(), Reference);
                     }
                 }
             }
@@ -347,4 +347,4 @@ namespace Radzen
             }
         }
     }
-}
+}

Radzen.Blazor/RadzenComponentActivator.cs

@@ -0,0 +1,76 @@
+using System;
+using System.Collections.Generic;
+using Microsoft.AspNetCore.Components;
+
+namespace Radzen
+{
+    /// <summary>
+    ///  Allows the developer to replace a component with another. Useful to specify default values for component properties.
+    /// </summary>
+    /// <example>
+    /// <code>
+    /// var builder = WebApplication.CreateBuilder(args);
+    /// var activator = new RadzenComponentActivator();
+    /// // Replace RadzenButton with MyButton
+    /// activator.Override&lt;RadzenButton, MyButton&gt;();
+    /// // Replace RadzenDataGrid with MyDataGrid
+    /// activator.Override(typeof(RadzenDataGrid&lt;&gt;), typeof(MyDataGrid&lt;&gt;));
+    /// // Register the activator
+    /// builder.Services.AddSingleton&lt;IComponentActivator&gt;(activator);
+    /// </code>
+    /// </example>
+    public class RadzenComponentActivator : IComponentActivator
+    {
+        private readonly Dictionary<Type, Type> replacedTypes = new Dictionary<Type, Type>();
+
+        /// <summary>
+        ///  Replaces the specified component type with another.
+        /// </summary>
+        /// <typeparam name="TOriginal"></typeparam>
+        /// <typeparam name="TOverride"></typeparam>
+        public void Override<TOriginal, TOverride>()
+        {
+            Override(typeof(TOriginal), typeof(TOverride));
+        }
+
+        /// <summary>
+        /// Replaces the specified component type with another.
+        /// </summary>
+        /// <param name="original"></param>
+        /// <param name="override"></param>
+        public void Override(Type original, Type @override)
+        {
+            replacedTypes.Add(original, @override);
+        }
+
+        /// <summary>
+        ///   Creates a component of the specified type.
+        /// </summary>
+        /// <param name="componentType"></param>
+        /// <returns></returns>
+        /// <exception cref="ArgumentException"></exception>
+        public IComponent CreateInstance(Type componentType)
+        {
+            if (!typeof(IComponent).IsAssignableFrom(componentType))
+            {
+                throw new ArgumentException($"The type {componentType.FullName} does not implement {nameof(IComponent)}.", nameof(componentType));
+            }
+
+            if (replacedTypes.ContainsKey(componentType))
+            {
+                componentType = replacedTypes[componentType];
+            }
+            else if (componentType.IsGenericType)
+            {
+                var genericTypeDefinition = componentType.GetGenericTypeDefinition();
+
+                if (replacedTypes.ContainsKey(genericTypeDefinition))
+                {
+                    componentType = replacedTypes[genericTypeDefinition].MakeGenericType(componentType.GetGenericArguments());
+                }
+            }
+
+            return (IComponent)Activator.CreateInstance(componentType);
+        }
+    }
+}

Radzen.Blazor/RadzenComponents.razor

@@ -0,0 +1,13 @@
+<RadzenDialog @attributes="Attributes" />
+<RadzenNotification @attributes="Attributes" />
+<RadzenContextMenu @attributes="Attributes" />
+<RadzenTooltip @attributes="Attributes" />
+
+@code {
+    /// <summary>
+    /// Specifies additional custom attributes that will be rendered by the component.
+    /// </summary>
+    /// <value>The attributes.</value>
+    [Parameter(CaptureUnmatchedValues = true)]
+    public IReadOnlyDictionary<string, object> Attributes { get; set; }
+}

Radzen.Blazor/RadzenContextMenu.razor

@@ -1,4 +1,4 @@
-@implements IDisposable
+@implements IAsyncDisposable
 @using Microsoft.JSInterop
 @inject IJSRuntime JSRuntime
 
@@ -17,7 +17,7 @@
                 <RadzenMenu Click="@(args => { if (menu.Options.Click != null) { menu.Options.Click(args); } })" Responsive="false">
                     @foreach (var item in menu.Options.Items)
                     {
-                        <RadzenMenuItem Text="@item.Text" Value="@item.Value"></RadzenMenuItem>
+                        <RadzenMenuItem Text="@item.Text" Value="@item.Value" Icon="@item.Icon" IconColor="@item.IconColor" Image="@item.Image" ImageStyle="@item.ImageStyle" Disabled=@item.Disabled></RadzenMenuItem>
                     }
                 </RadzenMenu>
             </div>