.gitignore

@@ -414,15 +414,3 @@ FodyWeavers.xsd
 
 # Minified css files
 **.min.css
-
-# css files directly in the wwwroot folder
-**/wwwroot/**.css
-
-# Minified js files
-**.min.js
-
-# js files directly in the wwwroot folder
-**/wwwroot/**.js
-
-# any project with runner in its name
-**.Runner/**

Connected.Components.Showcase/App.razor

@@ -0,0 +1,12 @@
+<Router AppAssembly="@typeof(App).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+    </Found>
+    <NotFound>
+        <PageTitle>Not found</PageTitle>
+        <LayoutView Layout="@typeof(MainLayout)">
+            <p role="alert">Sorry, there's nothing at this address.</p>
+        </LayoutView>
+    </NotFound>
+</Router>

Connected.Components.Showcase/Connected.Components.Showcase.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Razor">
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
   <PropertyGroup>
     <TargetFramework>net7.0</TargetFramework>
@@ -7,12 +7,8 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.0-rc.2.22476.2" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.0" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.0-rc.2.22476.2" PrivateAssets="all" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <ProjectReference Include="..\connected.components\Connected.Components.csproj" />
   </ItemGroup>
 
 </Project>

Connected.Components.Showcase/MainLayout.razor

@@ -0,0 +1,5 @@
+@inherits LayoutComponentBase
+
+<main>
+    @Body
+</main>

Connected.Components.Showcase/Pages/Index.razor

@@ -0,0 +1,3 @@
+@page "/"
+
+<h1>Hello, world!</h1>

Connected.Components.Showcase/Program.cs

@@ -0,0 +1,11 @@
+using Connected.Components.Showcase;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+builder.RootComponents.Add<App>("#app");
+builder.RootComponents.Add<HeadOutlet>("head::after");
+
+builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+
+await builder.Build().RunAsync();

Connected.Components.sln

@@ -3,11 +3,9 @@ Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
 VisualStudioVersion = 17.4.33020.496
 MinimumVisualStudioVersion = 10.0.40219.1
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components", "src\connected.components\Connected.Components.csproj", "{70BF497D-6519-401B-A0EE-2E9856B13D96}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components", "connected.components\Connected.Components.csproj", "{70BF497D-6519-401B-A0EE-2E9856B13D96}"
 EndProject
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components.Showcase", "src\Connected.Components.Showcase\Connected.Components.Showcase.csproj", "{EBB24FD8-A554-427C-A93B-B48C047D34CC}"
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Connected.Components.Showcase", "Connected.Components.Showcase\Connected.Components.Showcase.csproj", "{EBB24FD8-A554-427C-A93B-B48C047D34CC}"
-EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Connected.Components.Showcase.Runner", "Connected.Components.Showcase.Runner\Connected.Components.Showcase.Runner.csproj", "{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
@@ -23,10 +21,6 @@ Global
 		{EBB24FD8-A554-427C-A93B-B48C047D34CC}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{EBB24FD8-A554-427C-A93B-B48C047D34CC}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{EBB24FD8-A554-427C-A93B-B48C047D34CC}.Release|Any CPU.Build.0 = Release|Any CPU
-		{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

Connected.Components/Components/Alert/Alert.razor

@@ -2,7 +2,7 @@
 
 @inherits UIComponent
 
-<div @attributes="UserAttributes" role="alert" class="@ClassList" Style="@Style" @onclick="Clicked">
+<div @attributes="UserAttributes" role="alert" class="@ClassList" Style="@Style" @onclick="OnClick">
 	<div class="@ClassPosition">
 	
 		@if (!GlyphVisible)

Connected.Components/Components/Alert/Alert.razor.cs

@@ -1,4 +1,5 @@
-using Connected.Extensions;
+using System.Diagnostics.CodeAnalysis;
+using Connected.Extensions;
 using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
@@ -10,21 +11,21 @@ public partial class Alert : UIComponent
 	[CascadingParameter(Name = "RightToLeft")]
 	public bool RightToLeft { get; set; }
 	/// <summary>
-	/// Sets the horizontal alignement of the text. Start and end depend on the <see cref="RightToLeft"/> property.
+	/// Sets the position of the text to the start (Left in LTR and right in RTL).
 	/// </summary>
 	[Parameter]
-	public HorizontalAlignment Alignment { get; set; } = HorizontalAlignment.Start;
+	public HorizontalAlignment Alignment { get; set; } = HorizontalAlignment.Left;
 	/// <summary>
-	/// The callback, when the close glyph has been clicked.
+	/// The callback, when the close button has been clicked.
 	/// </summary>
-	[Parameter] public EventCallback<Alert> CloseClicked { get; set; }
+	[Parameter] public EventCallback<Alert> CloseGlyphClicked { get; set; }
 	/// <summary>
-	/// Define the glyph used for the close button.
+	/// Define the icon used for the close button.
 	/// </summary>
 	[Parameter]
 	public string CloseGlyph { get; set; } = Icons.Material.Filled.Close;
 	/// <summary>
-	/// Sets if the alert shows a close glyph.
+	/// Sets if the alert shows a close icon.
 	/// </summary>
 	[Parameter]
 	public bool CloseGlyphVisible { get; set; }
@@ -44,12 +45,12 @@ public partial class Alert : UIComponent
 	[Parameter]
 	public bool Dense { get; set; }
 	/// <summary>
-	/// If true, no alert glyph will be used.
+	/// If true, no alert icon will be used.
 	/// </summary>
 	[Parameter]
 	public bool GlyphVisible { get; set; }
 	/// <summary>
-	/// The severity of the alert. This defines the color and glyph used.
+	/// The severity of the alert. This defines the color and icon used.
 	/// </summary>
 	[Parameter]
 	public Severity Severity { get; set; } = Severity.Normal;
@@ -64,7 +65,7 @@ public partial class Alert : UIComponent
 	[Parameter]
 	public RenderFragment? ChildContent { get; set; }
 	/// <summary>
-	/// Custom glyph, leave unset to use the standard glyph which depends on the Severity.
+	/// Custom icon, leave unset to use the standard icon which depends on the Severity
 	/// </summary>
 	[Parameter]
 	public string Glyph { get; set; } = default!;
@@ -72,7 +73,7 @@ public partial class Alert : UIComponent
 	/// Raised when the alert is clicked
 	/// </summary>
 	[Parameter]
-	public EventCallback<MouseEventArgs> Clicked { get; set; }
+	public EventCallback<MouseEventArgs> OnClick { get; set; }
 
 	protected string ClassList
 	{
@@ -111,30 +112,32 @@ public partial class Alert : UIComponent
 
 	internal async Task OnCloseGlyphClick()
 	{
-		if (!CloseClicked.HasDelegate)
+		if (CloseGlyphClicked.HasDelegate)
+		{
+			await CloseGlyphClicked.InvokeAsync(this);
 			return;
-
-		await CloseClicked.InvokeAsync(this);
 		}
 
+		await Task.CompletedTask;
+	}
+
+	//If we can check this exception can include the coverage again
+	[ExcludeFromCodeCoverage]
 	protected override void OnParametersSet()
 	{
 		if (!string.IsNullOrEmpty(Glyph))
 			return;
 
-		Glyph = GetGlyphForSeverity(Severity);
+		Glyph = Severity switch
-	}
-
-	private string GetGlyphForSeverity(Severity severity)
-	{
-		return Severity switch
 		{
 			Severity.Normal => Icons.Material.Outlined.EventNote,
 			Severity.Info => Icons.Material.Outlined.Info,
 			Severity.Success => Icons.Custom.Uncategorized.AlertSuccess,
 			Severity.Warning => Icons.Material.Outlined.ReportProblem,
 			Severity.Error => Icons.Material.Filled.ErrorOutline,
-			_ => throw new ArgumentOutOfRangeException(nameof(severity)),
+			_ => throw new ArgumentOutOfRangeException(nameof(Severity)),
 		};
 	}
 }
+
+

Connected.Components/Components/Avatar/Avatar.razor

@@ -8,11 +8,11 @@
         {
             if (!String.IsNullOrEmpty(Alt))
             {
-                <img src="@Image" alt="@Alt" class="avatar-img" />
+                <img src="@Image" alt="@Alt" class="mud-avatar-img" />
             }
             else
             {
-                <img src="@Image" class="avatar-img" />
+                <img src="@Image" class="mud-avatar-img" />
             }
         }
         else

Connected.Components/Components/Avatar/Avatar.razor.cs

@@ -9,13 +9,13 @@ partial class Avatar : UIComponent, IDisposable
 {
 	[CascadingParameter] protected AvatarGroup AvatarGroup { get; set; }
 	protected string Classname =>
-	new CssBuilder("avatar")
+	new CssBuilder("mud-avatar")
-	  .AddClass($"avatar-{Size.ToDescriptionString()}")
+	  .AddClass($"mud-avatar-{Size.ToDescriptionString()}")
-	  .AddClass($"avatar-rounded", Rounded)
+	  .AddClass($"mud-avatar-rounded", Rounded)
-	  .AddClass($"avatar-square", Square)
+	  .AddClass($"mud-avatar-square", Square)
-	  .AddClass($"avatar-{Variant.ToDescriptionString()}")
+	  .AddClass($"mud-avatar-{Variant.ToDescriptionString()}")
-	  .AddClass($"avatar-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
+	  .AddClass($"mud-avatar-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
-	  .AddClass($"elevation-{Elevation.ToString()}")
+	  .AddClass($"mud-elevation-{Elevation.ToString()}")
 	  .AddClass(AvatarGroup?.GetAvatarSpacing() ?? new CssBuilder(), AvatarGroup != null)
 	  .AddClass(Class)
 	.Build();

Connected.Components/Components/Avatar/AvatarGroup.razor.cs

@@ -10,14 +10,14 @@ partial class AvatarGroup : UIComponent
 	private bool _childrenNeedUpdates = false;
 
 	protected string Classname =>
-	new CssBuilder("avatar-group")
+	new CssBuilder("mud-avatar-group")
-		.AddClass($"avatar-group-outlined", Outlined)
+		.AddClass($"mud-avatar-group-outlined", Outlined)
-		.AddClass($"avatar-group-outlined-{OutlineColor.ToDescriptionString()}", Outlined)
+		.AddClass($"mud-avatar-group-outlined-{OutlineColor.ToDescriptionString()}", Outlined)
 	  .AddClass(Class)
 	.Build();
 
 	protected string MaxAvatarClassname =>
-	new CssBuilder("avatar-group-max-avatar")
+	new CssBuilder("mud-avatar-group-max-avatar")
 		.AddClass($"ms-n{Spacing}")
 	  .AddClass(MaxAvatarClass)
 	.Build();

Connected.Components/Components/Badge/Badge.razor

@@ -11,7 +11,7 @@
 				{
 					@if (!String.IsNullOrEmpty(Icon))
 					{
-						<Icon Icon="@Icon" Class="icon-badge" />
+						<Icon Icon="@Icon" Class="mud-icon-badge" />
 					}
 					else
 					{

Connected.Components/Components/Badge/Badge.razor.cs

@@ -10,24 +10,24 @@ namespace Connected.Components;
 public partial class Badge : UIComponent
 {
 	protected string Classname =>
-	new CssBuilder("badge-root")
+	new CssBuilder("mud-badge-root")
 	  .AddClass(Class)
 	.Build();
 	protected string WrapperClass =>
-	new CssBuilder("badge-wrapper")
+	new CssBuilder("mud-badge-wrapper")
-		.AddClass($"badge-{Origin.ToDescriptionString().Replace("-", " ")}")
+		.AddClass($"mud-badge-{Origin.ToDescriptionString().Replace("-", " ")}")
 	.Build();
 
 	protected string BadgeClassName =>
-	new CssBuilder("badge")
+	new CssBuilder("mud-badge")
-		.AddClass("badge-dot", Dot)
+		.AddClass("mud-badge-dot", Dot)
-		.AddClass("badge-bordered", Bordered)
+		.AddClass("mud-badge-bordered", Bordered)
-		.AddClass("badge-icon", !string.IsNullOrEmpty(Icon) && !Dot)
+		.AddClass("mud-badge-icon", !string.IsNullOrEmpty(Icon) && !Dot)
-		.AddClass($"badge-{Origin.ToDescriptionString().Replace("-", " ")}")
+		.AddClass($"mud-badge-{Origin.ToDescriptionString().Replace("-", " ")}")
-		.AddClass($"elevation-{Elevation.ToString()}")
+		.AddClass($"mud-elevation-{Elevation.ToString()}")
-		.AddClass("theme-" + Color.ToDescriptionString(), Color != ThemeColor.Default)
+		.AddClass("mud-theme-" + Color.ToDescriptionString(), Color != ThemeColor.Default)
-		.AddClass("badge-default", Color == ThemeColor.Default)
+		.AddClass("mud-badge-default", Color == ThemeColor.Default)
-		.AddClass("badge-overlap", Overlap)
+		.AddClass("mud-badge-overlap", Overlap)
 		.AddClass(BadgeClass)
 	.Build();
 

Connected.Components/Components/Breadcrumbs/BreadcrumbLink.razor.cs

@@ -10,7 +10,7 @@ public partial class BreadcrumbLink : UIComponent
 	[CascadingParameter]
 	public Breadcrumbs Parent { get; set; }
 
-	private string Classname => new CssBuilder("breadcrumb-item")
+	private string Classname => new CssBuilder("mud-breadcrumb-item")
-		 .AddClass("disabled", Item?.Disabled)
+		 .AddClass("mud-disabled", Item?.Disabled)
 		 .Build();
 }

Connected.Components/Components/Breadcrumbs/BreadcrumbSeparator.razor

@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<li aria-hidden="true" class="breadcrumb-separator mud-ltr mud-flip-x-rtl">
+<li aria-hidden="true" class="mud-breadcrumb-separator mud-ltr mud-flip-x-rtl">
     @if (Parent?.SeparatorTemplate is null)
     {
         <span>@Parent?.Separator</span>

Connected.Components/Components/Breadcrumbs/Breadcrumbs.razor

@@ -12,7 +12,7 @@
         {
             <BreadcrumbLink Item="Items[0]"></BreadcrumbLink>
             <BreadcrumbSeparator></BreadcrumbSeparator>
-            <li class="breadcrumbs-expander" @onclick="Expand">
+            <li class="mud-breadcrumbs-expander" @onclick="Expand">
                 <Icon Icon="@ExpanderIcon" Size="Size.Small"></Icon>
             </li>
             <BreadcrumbSeparator></BreadcrumbSeparator>

Connected.Components/Components/Breadcrumbs/Breadcrumbs.razor.cs

@@ -49,15 +49,15 @@ public partial class Breadcrumbs : UIComponent
 	public string ExpanderIcon { get; set; } = Icons.Material.Filled.SettingsEthernet;
 
 	public bool Collapsed { get; private set; } = true;
-	private string Classname => new CssBuilder("breadcrumbs")
+	private string Classname => new CssBuilder("mud-breadcrumbs")
-	 .AddClass("typography-body1")
+	 .AddClass("mud-typography-body1")
 	 .AddClass(Class)
 	 .Build();
 
 	internal static string GetItemClassname(BreadcrumbItem item)
 	{
-		return new CssBuilder("breadcrumb-item")
+		return new CssBuilder("mud-breadcrumb-item")
-			.AddClass("disabled", item.Disabled)
+			.AddClass("mud-disabled", item.Disabled)
 			.Build();
 	}
 

Connected.Components/Components/Button/Button.razor

@@ -13,7 +13,7 @@
             target="@Target"
             rel="@(Target=="_blank"?"noopener":null)"
             disabled="@Disabled">
-    <span class="button-label">
+    <span class="mud-button-label">
         @if (!string.IsNullOrWhiteSpace(StartIcon))
         {
             <span class="@StartIconClass">

Connected.Components/Components/Button/Button.razor.cs

@@ -8,25 +8,25 @@ namespace Connected.Components;
 public partial class Button : ButtonBase
 {
 	protected string Classname =>
-	new CssBuilder("button-root mud-button")
+	new CssBuilder("mud-button-root mud-button")
-	  .AddClass($"button-{Variant.ToDescriptionString()}")
+	  .AddClass($"mud-button-{Variant.ToDescriptionString()}")
-	  .AddClass($"button-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
+	  .AddClass($"mud-button-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
-	  .AddClass($"button-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}")
+	  .AddClass($"mud-button-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}")
-	  .AddClass($"width-full", FullWidth)
+	  .AddClass($"mud-width-full", FullWidth)
-	  .AddClass($"ripple", !DisableRipple)
+	  .AddClass($"mud-ripple", !DisableRipple)
-	  .AddClass($"button-disable-elevation", DisableElevation)
+	  .AddClass($"mud-button-disable-elevation", DisableElevation)
 	  .AddClass(Class)
 	.Build();
 
 	protected string StartIconClass =>
-	new CssBuilder("button-icon-start")
+	new CssBuilder("mud-button-icon-start")
-	  .AddClass($"button-icon-size-{Size.ToDescriptionString()}")
+	  .AddClass($"mud-button-icon-size-{Size.ToDescriptionString()}")
 	  .AddClass(IconClass)
 	.Build();
 
 	protected string EndIconClass =>
-	new CssBuilder("button-icon-end")
+	new CssBuilder("mud-button-icon-end")
-	  .AddClass($"button-icon-size-{Size.ToDescriptionString()}")
+	  .AddClass($"mud-button-icon-size-{Size.ToDescriptionString()}")
 	  .AddClass(IconClass)
 	.Build();
 

Connected.Components/Components/Button/Fab.razor

@@ -16,7 +16,7 @@
             rel="@(Target=="_blank"?"noopener":null)"
             disabled="@Disabled"
 			title="@Title">
-    <span class="fab-label">
+    <span class="mud-fab-label">
         @if (!string.IsNullOrWhiteSpace(StartIcon))
         {
             <Icon Icon="@StartIcon" Color="@IconColor" Size="@IconSize" />

Connected.Components/Components/Button/Fab.razor.cs

@@ -8,12 +8,12 @@ namespace Connected.Components;
 public partial class Fab : ButtonBase
 {
 	protected string Classname =>
-	new CssBuilder("button-root mud-fab")
+	new CssBuilder("mud-button-root mud-fab")
-	  .AddClass($"fab-extended", !string.IsNullOrEmpty(Label))
+	  .AddClass($"mud-fab-extended", !string.IsNullOrEmpty(Label))
-	  .AddClass($"fab-{Color.ToDescriptionString()}")
+	  .AddClass($"mud-fab-{Color.ToDescriptionString()}")
-	  .AddClass($"fab-size-{Size.ToDescriptionString()}")
+	  .AddClass($"mud-fab-size-{Size.ToDescriptionString()}")
-	  .AddClass($"ripple", !DisableRipple && !Disabled)
+	  .AddClass($"mud-ripple", !DisableRipple && !Disabled)
-	  .AddClass($"fab-disable-elevation", DisableElevation)
+	  .AddClass($"mud-fab-disable-elevation", DisableElevation)
 	  .AddClass(Class)
 	.Build();
 

Connected.Components/Components/Button/IconButton.razor

@@ -18,7 +18,7 @@
 			title="@Title">
     @if (!String.IsNullOrEmpty(Icon))
     {
-        <span class="icon-button-label">
+        <span class="mud-icon-button-label">
             <Icon Glyph="@Icon" Size="@Size" />
         </span>
     }

Connected.Components/Components/Button/IconButton.razor.cs

@@ -8,17 +8,17 @@ namespace Connected.Components;
 public partial class IconButton : ButtonBase
 {
 	protected string Classname =>
-	new CssBuilder("button-root mud-icon-button")
+	new CssBuilder("mud-button-root mud-icon-button")
-	  .AddClass("button", when: AsButton)
+	  .AddClass("mud-button", when: AsButton)
-	  .AddClass($"{Color.ToDescriptionString()}-text hover:mud-{Color.ToDescriptionString()}-hover", !AsButton && Color != ThemeColor.Default)
+	  .AddClass($"mud-{Color.ToDescriptionString()}-text hover:mud-{Color.ToDescriptionString()}-hover", !AsButton && Color != ThemeColor.Default)
-	  .AddClass($"button-{Variant.ToDescriptionString()}", AsButton)
+	  .AddClass($"mud-button-{Variant.ToDescriptionString()}", AsButton)
-	  .AddClass($"button-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}", AsButton)
+	  .AddClass($"mud-button-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}", AsButton)
-	  .AddClass($"button-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}", AsButton)
+	  .AddClass($"mud-button-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}", AsButton)
-	  .AddClass($"ripple", !DisableRipple)
+	  .AddClass($"mud-ripple", !DisableRipple)
-	  .AddClass($"ripple-icon", !DisableRipple && !AsButton)
+	  .AddClass($"mud-ripple-icon", !DisableRipple && !AsButton)
-	  .AddClass($"icon-button-size-{Size.ToDescriptionString()}", when: () => Size != Size.Medium)
+	  .AddClass($"mud-icon-button-size-{Size.ToDescriptionString()}", when: () => Size != Size.Medium)
-	  .AddClass($"icon-button-edge-{Edge.ToDescriptionString()}", when: () => Edge != Edge.False)
+	  .AddClass($"mud-icon-button-edge-{Edge.ToDescriptionString()}", when: () => Edge != Edge.False)
-	  .AddClass($"button-disable-elevation", DisableElevation)
+	  .AddClass($"mud-button-disable-elevation", DisableElevation)
 	  .AddClass(Class)
 	.Build();
 

Connected.Components/Components/ButtonGroup/ButtonGroup.razor.cs

@@ -8,15 +8,15 @@ namespace Connected.Components;
 public partial class ButtonGroup : UIComponent
 {
    protected string Classname =>
-   new CssBuilder("button-group-root")
+   new CssBuilder("mud-button-group-root")
-     .AddClass($"button-group-override-styles", OverrideStyles)
+     .AddClass($"mud-button-group-override-styles", OverrideStyles)
-     .AddClass($"button-group-{Variant.ToDescriptionString()}")
+     .AddClass($"mud-button-group-{Variant.ToDescriptionString()}")
-     .AddClass($"button-group-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
+     .AddClass($"mud-button-group-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
-     .AddClass($"button-group-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}")
+     .AddClass($"mud-button-group-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}")
-     .AddClass($"button-group-vertical", VerticalAlign)
+     .AddClass($"mud-button-group-vertical", VerticalAlign)
-     .AddClass($"button-group-horizontal", !VerticalAlign)
+     .AddClass($"mud-button-group-horizontal", !VerticalAlign)
-     .AddClass($"button-group-disable-elevation", DisableElevation)
+     .AddClass($"mud-button-group-disable-elevation", DisableElevation)
-     .AddClass($"button-group-rtl", RightToLeft)
+     .AddClass($"mud-button-group-rtl", RightToLeft)
      .AddClass(Class)
    .Build();
 

Connected.Components/Components/Card/Card.razor.cs

@@ -7,7 +7,7 @@ namespace Connected.Components;
 public partial class Card : UIComponent
 {
 	protected string Classname =>
-	new CssBuilder("card")
+	new CssBuilder("mud-card")
 	  .AddClass(Class)
 	.Build();
 

Connected.Components/Components/Card/CardActions.razor.cs

@@ -7,7 +7,7 @@ namespace Connected.Components;
 public partial class CardActions : UIComponent
 {
 	protected string Classname =>
-	new CssBuilder("card-actions")
+	new CssBuilder("mud-card-actions")
 	  .AddClass(Class)
 	.Build();
 

Connected.Components/Components/Card/CardContent.razor.cs

@@ -7,7 +7,7 @@ namespace Connected.Components;
 public partial class CardContent : UIComponent
 {
 	protected string Classname =>
-	new CssBuilder("card-content")
+	new CssBuilder("mud-card-content")
 	  .AddClass(Class)
 	.Build();
 

Connected.Components/Components/Card/CardHeader.razor

@@ -5,15 +5,15 @@
 <div @attributes="UserAttributes" class="@Classname" style="@Style">
     @if (CardHeaderAvatar is not null)
     {
-        <div class="card-header-avatar">@CardHeaderAvatar</div>
+        <div class="mud-card-header-avatar">@CardHeaderAvatar</div>
     }
     @if (CardHeaderContent is not null)
     {
-        <div class="card-header-content">@CardHeaderContent</div>
+        <div class="mud-card-header-content">@CardHeaderContent</div>
     }
     @if (CardHeaderActions is not null)
     {
-        <div class="card-header-actions">@CardHeaderActions</div>
+        <div class="mud-card-header-actions">@CardHeaderActions</div>
     }
     @if (ChildContent is not null)
     {

Connected.Components/Components/Card/CardHeader.razor.cs

@@ -7,7 +7,7 @@ namespace Connected.Components;
 public partial class CardHeader : UIComponent
 {
    protected string Classname =>
-   new CssBuilder("card-header")
+   new CssBuilder("mud-card-header")
      .AddClass(Class)
    .Build();
 

Connected.Components/Components/Card/CardMedia.razor.cs

@@ -12,7 +12,7 @@ public partial class CardMedia : UIComponent
 			.Build();
 
 	protected string Classname =>
-		new CssBuilder("card-media")
+		new CssBuilder("mud-card-media")
 			.AddClass(Class)
 			.Build();
 

Connected.Components/Components/Carousel/Carousel.razor

@@ -7,7 +7,7 @@
 <section @attributes="UserAttributes" aria-roledescription="carousel" class="@Classname" style="@Style">
     <CascadingValue Value="this">
 
-        <SwipeArea OnSwipe="OnSwipe" Class="carousel-swipe">
+        <SwipeArea OnSwipe="OnSwipe" Class="mud-carousel-swipe">
             @*Selected Content*@
             @if (ItemsSource == null)
             {

Connected.Components/Components/Carousel/Carousel.razor.cs

@@ -9,15 +9,15 @@ namespace Connected.Components;
 public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TData>, IAsyncDisposable
 {
 	protected string Classname =>
-				new CssBuilder("carousel")
+				new CssBuilder("mud-carousel")
-					 .AddClass($"carousel-{(BulletsColor ?? _currentColor).ToDescriptionString()}")
+					 .AddClass($"mud-carousel-{(BulletsColor ?? _currentColor).ToDescriptionString()}")
 							 .AddClass(Class)
 							 .Build();
 
 	protected string NavigationButtonsClassName =>
 				new CssBuilder()
 					.AddClass($"align-self-{ConvertPosition(ArrowsPosition).ToDescriptionString()}", !(NavigationButtonsClass ?? "").Contains("align-self-"))
-					.AddClass("carousel-elements-rtl", RightToLeft)
+					.AddClass("mud-carousel-elements-rtl", RightToLeft)
 					.AddClass(NavigationButtonsClass)
 					.Build();
 

Connected.Components/Components/Carousel/CarouselItem.razor.cs

@@ -0,0 +1,91 @@
+using Connected.Annotations;
+using Connected.Extensions;
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components;
+
+public partial class CarouselItem : UIComponent, IDisposable
+{
+	protected string Classname =>
+				new CssBuilder("mud-carousel-item")
+					 .AddClass($"mud-carousel-item-{Color.ToDescriptionString()}")
+					 .AddClass("mud-carousel-item-exit", !_disposed && Parent.LastContainer == this)
+
+					 .AddClass("mud-carousel-transition-fade-in", !_disposed && Transition == Transition.Fade && Parent.SelectedContainer == this)
+					 .AddClass("mud-carousel-transition-fade-out", !_disposed && Transition == Transition.Fade && Parent.LastContainer == this)
+
+					 .AddClass("mud-carousel-transition-slide-next-enter", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.SelectedContainer == this && Parent._moveNext)
+					 .AddClass("mud-carousel-transition-slide-next-exit", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.LastContainer == this && Parent._moveNext)
+
+					 .AddClass("mud-carousel-transition-slide-prev-enter", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.SelectedContainer == this && !Parent._moveNext)
+					 .AddClass("mud-carousel-transition-slide-prev-exit", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.LastContainer == this && !Parent._moveNext)
+
+					 .AddClass("mud-carousel-transition-slide-next-rtl-enter", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.SelectedContainer == this && Parent._moveNext)
+					 .AddClass("mud-carousel-transition-slide-next-rtl-exit", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.LastContainer == this && Parent._moveNext)
+
+					 .AddClass("mud-carousel-transition-slide-prev-rtl-enter", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.SelectedContainer == this && !Parent._moveNext)
+					 .AddClass("mud-carousel-transition-slide-prev-rtl-exit", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.LastContainer == this && !Parent._moveNext)
+
+					 .AddClass("mud-carousel-transition-none", !_disposed && Transition == Transition.None && Parent.SelectedContainer != this)
+
+					 .AddClass(CustomTransitionEnter, !_disposed && Transition == Transition.Custom && Parent.SelectedContainer == this && Parent.SelectedContainer == this)
+					 .AddClass(CustomTransitionExit, !_disposed && Transition == Transition.Custom && Parent.LastContainer == this && Parent.LastContainer == this)
+
+					 .AddClass(Class)
+					 .Build();
+
+	[Parameter]
+	[Category(CategoryTypes.Carousel.Behavior)]
+	public RenderFragment ChildContent { get; set; }
+
+	[CascadingParameter] protected internal ItemsControlBase<CarouselItem> Parent { get; set; }
+
+	[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
+
+	/// <summary>
+	/// The color of the component. It supports the theme colors.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Carousel.Appearance)]
+	public ThemeColor Color { get; set; } = ThemeColor.Default;
+
+	/// <summary>
+	/// The transition effect of the component.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Carousel.Appearance)]
+	public Transition Transition { get; set; } = Transition.Slide;
+
+	/// <summary>
+	/// The name of custom transition on entrance time
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Carousel.Appearance)]
+	public string CustomTransitionEnter { get; set; }
+
+	/// <summary>
+	/// The name of custom transition on exiting time
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Carousel.Appearance)]
+	public string CustomTransitionExit { get; set; }
+
+
+	public bool IsVisible => Parent != null && (Parent.LastContainer == this || Parent.SelectedIndex == Parent.Items.IndexOf(this));
+
+
+	protected override Task OnInitializedAsync()
+	{
+		Parent?.AddItem(this);
+		return Task.CompletedTask;
+	}
+
+	private bool _disposed = false;
+	public void Dispose()
+	{
+		_disposed = true;
+		Parent?.Items.Remove(this);
+	}
+
+}

Connected.Components/Components/Chart/Chart.razor.cs

@@ -36,8 +36,8 @@ public partial class Chart : UIComponent
 	public RenderFragment CustomGraphics { get; set; }
 
 	protected string Classname =>
-	new CssBuilder("chart")
+	new CssBuilder("mud-chart")
-		.AddClass($"chart-legend-{ConvertLegendPosition(LegendPosition).ToDescriptionString()}")
+		.AddClass($"mud-chart-legend-{ConvertLegendPosition(LegendPosition).ToDescriptionString()}")
 	  .AddClass(Class)
 	.Build();
 

Connected.Components/Components/Chart/Charts/Bar.razor

@@ -2,9 +2,9 @@
 @using System.Globalization;
 @inherits Chart
 
-<svg @attributes="UserAttributes" class="chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
+<svg @attributes="UserAttributes" class="mud-chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
-    <g class="charts-grid">
+    <g class="mud-charts-grid">
-        <g class="charts-gridlines-yaxis">
+        <g class="mud-charts-gridlines-yaxis">
             @foreach (var horizontalLine in _horizontalLines)
             {
                 <path stroke="#e0e0e0" stroke-width="0.3" d="@horizontalLine.Data"></path>
@@ -12,7 +12,7 @@
         </g>
         @if (ChartParent?.ChartOptions.XAxisLines==true)
         {
-            <g class="charts-gridlines-xaxis-lines">
+            <g class="mud-charts-gridlines-xaxis-lines">
                 @foreach (var verticalLine in _verticalLines)
                 {
                     <path stroke="gray" stroke-width="0.3" d="@verticalLine.Data"></path>
@@ -20,22 +20,22 @@
             </g>
         }
     </g>
-    <g class="charts-yaxis">
+    <g class="mud-charts-yaxis">
         @foreach (var horizontalLineValue in _horizontalValues)
         {
             @((MarkupString)$"<text x='{horizontalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{horizontalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='end' dominant-baseline='auto'>{horizontalLineValue.Value.ToString(CultureInfo.InvariantCulture)}</text>")
         }
     </g>
-    <g class="charts-xaxis">
+    <g class="mud-charts-xaxis">
         @foreach (var verticalLineValue in _verticalValues)
         {
             @((MarkupString)$"<text x='{verticalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{verticalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='middle'>{verticalLineValue.Value.ToString(CultureInfo.InvariantCulture)}</text>")
         }
     </g>
-    <g class="charts-bar-series">
+    <g class="mud-charts-bar-series">
         @foreach (var bar in _bars)
         {
-            <path class="chart-bar" @onclick="() => SelectedIndex = bar.Index"  fill="@(ChartParent.ChartOptions.ChartPalette.GetValue(bar.Index % ChartOptions.ChartPalette.Count()))" stroke="@(ChartParent.ChartOptions.ChartPalette.GetValue(bar.Index % ChartOptions.ChartPalette.Count()))" stroke-width="8" d="@bar.Data"></path>
+            <path class="mud-chart-bar" @onclick="() => SelectedIndex = bar.Index"  fill="@(ChartParent.ChartOptions.ChartPalette.GetValue(bar.Index % ChartOptions.ChartPalette.Count()))" stroke="@(ChartParent.ChartOptions.ChartPalette.GetValue(bar.Index % ChartOptions.ChartPalette.Count()))" stroke-width="8" d="@bar.Data"></path>
         }
     </g>
 

Connected.Components/Components/Chart/Charts/Donut.razor

@@ -0,0 +1,22 @@
+@namespace Connected.Components
+@using System.Globalization
+@inherits Chart
+
+<svg @attributes="UserAttributes" class="mud-chart-donut" width="@ParentWidth" height="@ParentHeight" viewBox="0 0 42 42">
+    <Filters />
+    <circle class="mud-donut-ring" cx="21" cy="21" r="15.91549430918954"></circle>
+    @foreach (var item in _circles.ToList())
+    {
+        <circle class="mud-chart-serie mud-donut-segment" @onclick="() => SelectedIndex = item.Index"  stroke="@(ChartParent.ChartOptions.ChartPalette.GetValue(item.Index % ChartOptions.ChartPalette.Count()))"
+                cx="@ToS(item.CX)"
+                cy="@ToS(item.CY)"
+                r="@ToS(item.Radius)"
+                stroke-dasharray="@item.StrokeDashArray"
+                stroke-dashoffset="@ToS(item.StrokeDashOffset)">
+        </circle>
+    }
+    <circle class="mud-donut-hole" cx="21" cy="21" r="13.4"></circle>
+
+	@ChartParent?.CustomGraphics
+</svg>
+<Legend Data="@_legends" />

Connected.Components/Components/Chart/Charts/Line.razor

@@ -2,9 +2,9 @@
 @using System.Globalization;
 @inherits Chart
 
-<svg @attributes="UserAttributes" class="chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
+<svg @attributes="UserAttributes" class="mud-chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
-    <g class="charts-grid">
+    <g class="mud-charts-grid">
-        <g class="charts-gridlines-yaxis">
+        <g class="mud-charts-gridlines-yaxis">
             @foreach (var horizontalLine in _horizontalLines)
             {
                 <path stroke="#e0e0e0" stroke-width="0.3" d="@horizontalLine.Data"></path>
@@ -12,7 +12,7 @@
         </g>
         @if (ChartParent?.ChartOptions.XAxisLines==true)
         {
-            <g class="charts-gridlines-xaxis-lines">
+            <g class="mud-charts-gridlines-xaxis-lines">
                 @foreach (var verticalLine in _verticalLines)
                 {
                     <path stroke="gray" stroke-width="0.3" d="@verticalLine.Data"></path>
@@ -20,22 +20,22 @@
             </g>
         }
     </g>
-    <g class="charts-yaxis">
+    <g class="mud-charts-yaxis">
         @foreach (var horizontalLineValue in _horizontalValues)
         {
             @((MarkupString)$"<text x='{horizontalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{horizontalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='end' dominant-baseline='auto'>{horizontalLineValue.Value.ToString(CultureInfo.InvariantCulture)}</text>")
         }
     </g>
-    <g class="charts-xaxis">
+    <g class="mud-charts-xaxis">
         @foreach (var verticalLineValue in _verticalValues)
         {
             @((MarkupString)$"<text x='{verticalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{verticalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='middle'>{verticalLineValue.Value.ToString(CultureInfo.InvariantCulture)}</text>")
         }
     </g>
-    <g class="charts-line-series">
+    <g class="mud-charts-line-series">
         @foreach (var chartLine in _chartLines)
         {
-            <path class="chart-line" @onclick="() => SelectedIndex = chartLine.Index"  fill="none" stroke="@(ChartParent.ChartOptions.ChartPalette.GetValue(chartLine.Index % ChartOptions.ChartPalette.Count()))" stroke-width="@(ChartParent.ChartOptions.LineStrokeWidth)" d="@chartLine.Data"></path>
+            <path class="mud-chart-line" @onclick="() => SelectedIndex = chartLine.Index"  fill="none" stroke="@(ChartParent.ChartOptions.ChartPalette.GetValue(chartLine.Index % ChartOptions.ChartPalette.Count()))" stroke-width="@(ChartParent.ChartOptions.LineStrokeWidth)" d="@chartLine.Data"></path>
         }
     </g>
 

Connected.Components/Components/Chart/Charts/Pie.razor

@@ -0,0 +1,14 @@
+@namespace Connected.Components
+@using System.Globalization
+@inherits Chart
+
+<svg @attributes="UserAttributes" class="mud-chart-pie" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="-1 -1 2 2" style="transform: rotate(-90deg);">
+    <Filters />
+    @foreach (var item in _paths.ToList())
+    {
+		<path @onclick="() => SelectedIndex = item.Index" class="mud-chart-serie" fill="@(ChartParent.ChartOptions.ChartPalette.GetValue(item.Index % ChartOptions.ChartPalette.Count()))" d="@item.Data"></path>
+	}
+
+	@ChartParent?.CustomGraphics
+</svg>
+<Legend Data="@_legends" />

Connected.Components/Components/Chart/Parts/Legend.razor

@@ -0,0 +1,15 @@
+@namespace Connected.Components
+@inherits Chart
+
+@if (ChartParent?.ChartOptions.DisableLegend != true)
+{
+    <div @attributes="UserAttributes" class="mud-chart-legend">
+        @foreach (var item in Data)
+        {
+            <div class="mud-chart-legend-item" @onclick=@(()=>{ if (ChartParent!=null) { ChartParent.SelectedIndex=item.Index; }}) @onclick:stopPropagation=@(ChartParent!=null)>
+                <span class="mud-chart-legend-marker" style="@($"background-color:{ChartParent.ChartOptions.ChartPalette.GetValue(item.Index % ChartOptions.ChartPalette.Count())}")"></span>
+                <TextContent Typo="Typo.body2" Inline="true">@item.Labels</TextContent>
+            </div>
+        }
+    </div>
+}

Connected.Components/Components/CheckBox/CheckBox.razor

@@ -7,7 +7,7 @@
         <label class="@LabelClassname" id="@_elementId" @onkeydown="HandleKeyDown" @onclick:stopPropagation="@StopClickPropagation">
             <span tabindex="0" class="@CheckBoxClassname">
                 @*note: stopping the click propagation is important here. otherwise checking the checkbox results in click events on its parent (i.e. table row), which is generally not what you would want*@
-                <input tabindex="-1" @attributes="UserAttributes" type="checkbox" class="checkbox-input" checked="@BoolValue" @onchange="@OnChange" disabled="@Disabled" @onclick:preventDefault="@ReadOnly" />
+                <input tabindex="-1" @attributes="UserAttributes" type="checkbox" class="mud-checkbox-input" checked="@BoolValue" @onchange="@OnChange" disabled="@Disabled" @onclick:preventDefault="@ReadOnly" />
                 <Icon Icon="@GetIcon()" Color="HasErrors ? ThemeColor.Error : ThemeColor.Inherit" Size="@Size" />
             </span>
             @if (!String.IsNullOrEmpty(Label))

Connected.Components/Components/CheckBox/CheckBox.razor.cs

@@ -10,25 +10,25 @@ namespace Connected.Components;
 public partial class CheckBox<T> : BooleanInput<T>
 {
 	protected string Classname =>
-	new CssBuilder("input-control-boolean-input")
+	new CssBuilder("mud-input-control-boolean-input")
 		.AddClass(Class)
 		.Build();
 
 	protected string LabelClassname =>
-	new CssBuilder("checkbox")
+	new CssBuilder("mud-checkbox")
-		.AddClass($"disabled", Disabled)
+		.AddClass($"mud-disabled", Disabled)
-		.AddClass($"readonly", ReadOnly)
+		.AddClass($"mud-readonly", ReadOnly)
-		.AddClass(LabelPosition == LabelPosition.End ? "ltr" : "rtl", true)
+		.AddClass(LabelPosition == LabelPosition.End ? "mud-ltr" : "mud-rtl", true)
 	.Build();
 
 	protected string CheckBoxClassname =>
-	new CssBuilder("button-root mud-icon-button")
+	new CssBuilder("mud-button-root mud-icon-button")
-		.AddClass($"{Color.ToDescriptionString()}-text hover:mud-{Color.ToDescriptionString()}-hover", UnCheckedColor == null || (UnCheckedColor != null && BoolValue == true))
+		.AddClass($"mud-{Color.ToDescriptionString()}-text hover:mud-{Color.ToDescriptionString()}-hover", UnCheckedColor == null || (UnCheckedColor != null && BoolValue == true))
-		.AddClass($"{UnCheckedColor?.ToDescriptionString()}-text hover:mud-{UnCheckedColor?.ToDescriptionString()}-hover", UnCheckedColor != null && BoolValue == false)
+		.AddClass($"mud-{UnCheckedColor?.ToDescriptionString()}-text hover:mud-{UnCheckedColor?.ToDescriptionString()}-hover", UnCheckedColor != null && BoolValue == false)
-		.AddClass($"checkbox-dense", Dense)
+		.AddClass($"mud-checkbox-dense", Dense)
-		.AddClass($"ripple mud-ripple-checkbox", !DisableRipple && !ReadOnly && !Disabled)
+		.AddClass($"mud-ripple mud-ripple-checkbox", !DisableRipple && !ReadOnly && !Disabled)
-		.AddClass($"disabled", Disabled)
+		.AddClass($"mud-disabled", Disabled)
-		.AddClass($"readonly", ReadOnly)
+		.AddClass($"mud-readonly", ReadOnly)
 	.Build();
 
 	/// <summary>
@@ -225,7 +225,7 @@ public partial class CheckBox<T> : BooleanInput<T>
 			await _keyInterceptor.Connect(_elementId, new KeyInterceptorOptions()
 			{
 				//EnableLogging = true,
-				TargetClass = "button-root",
+				TargetClass = "mud-button-root",
 				Keys = {
 					 new KeyOptions { Key=" ", PreventDown = "key+none", PreventUp = "key+none" }, // prevent scrolling page
                      new KeyOptions { Key="Enter", PreventDown = "key+none" },

Connected.Components/Components/Chip/Chip.razor

@@ -10,13 +10,13 @@
     }
     else if (!String.IsNullOrEmpty(Icon) && !IsChecked)
     {
-        <Icon Icon="@Icon" Class="chip-icon" Size="Size.Small" Color="@IconColor" />
+        <Icon Icon="@Icon" Class="mud-chip-icon" Size="Size.Small" Color="@IconColor" />
     }
     else if (IsChecked)
     {
-        <Icon Icon="@CheckedIcon" Class="chip-icon" Size="Size.Small" />
+        <Icon Icon="@CheckedIcon" Class="mud-chip-icon" Size="Size.Small" />
     }
-    <span class="chip-content">
+    <span class="mud-chip-content">
         @if (ChildContent == null)
         {
             @Text
@@ -27,7 +27,7 @@
         }
         @if (OnClose.HasDelegate || ChipSet?.AllClosable==true)
         {
-            <IconButton Class="chip-close-button" Icon="@(String.IsNullOrEmpty(CloseIcon) ? $"{Icons.Material.Filled.Cancel}" : $"{CloseIcon}")" OnClick="OnCloseHandler" Size="Size.Small"/>
+            <IconButton Class="mud-chip-close-button" Icon="@(String.IsNullOrEmpty(CloseIcon) ? $"{Icons.Material.Filled.Cancel}" : $"{CloseIcon}")" OnClick="OnCloseHandler" Size="Size.Small"/>
         }
     </span>
 </div>

Connected.Components/Components/Chip/Chip.razor.cs

@@ -16,15 +16,15 @@ public partial class Chip : UIComponent, IDisposable
 	[Inject] public IJsApiService JsApiService { get; set; }
 
 	protected string Classname =>
-	new CssBuilder("chip")
+	new CssBuilder("mud-chip")
-	  .AddClass($"chip-{GetVariant().ToDescriptionString()}")
+	  .AddClass($"mud-chip-{GetVariant().ToDescriptionString()}")
-	  .AddClass($"chip-size-{Size.ToDescriptionString()}")
+	  .AddClass($"mud-chip-size-{Size.ToDescriptionString()}")
-	  .AddClass($"chip-color-{GetColor().ToDescriptionString()}")
+	  .AddClass($"mud-chip-color-{GetColor().ToDescriptionString()}")
-	  .AddClass("clickable", !ChipSet?.ReadOnly ?? OnClick.HasDelegate)
+	  .AddClass("mud-clickable", !ChipSet?.ReadOnly ?? OnClick.HasDelegate)
-	  .AddClass("ripple", !ChipSet?.ReadOnly ?? OnClick.HasDelegate && !DisableRipple)
+	  .AddClass("mud-ripple", !ChipSet?.ReadOnly ?? OnClick.HasDelegate && !DisableRipple)
-	  .AddClass("chip-label", Label)
+	  .AddClass("mud-chip-label", Label)
-	  .AddClass("disabled", Disabled)
+	  .AddClass("mud-disabled", Disabled)
-	  .AddClass("chip-selected", IsSelected)
+	  .AddClass("mud-chip-selected", IsSelected)
 	  .AddClass(Class)
 	.Build();
 

Connected.Components/Components/ChipSet/ChipSet.razor.cs

@@ -8,7 +8,7 @@ public partial class ChipSet : UIComponent, IDisposable
 {
 
    protected string Classname =>
-   new CssBuilder("chipset")
+   new CssBuilder("mud-chipset")
      .AddClass(Class)
    .Build();
 

Connected.Components/Components/Collapse/Collapse.razor

@@ -3,8 +3,8 @@
 @using System.Globalization;
 
 <div @onanimationend="EventUtil.AsNonRenderingEventHandler(AnimationEnd)" @attributes="UserAttributes" class="@Classname" style="@Stylename">
-    <div @ref="_wrapper" class="collapse-wrapper">
+    <div @ref="_wrapper" class="mud-collapse-wrapper">
-        <div class="collapse-wrapper-inner">
+        <div class="mud-collapse-wrapper-inner">
             @ChildContent
         </div>
     </div>

Connected.Components/Components/Collapse/Collapse.razor.cs

@@ -27,10 +27,10 @@ public partial class Collapse : UIComponent
 		.Build();
 
 	protected string Classname =>
-		new CssBuilder("collapse-container")
+		new CssBuilder("mud-collapse-container")
-		.AddClass($"collapse-entering", _state == CollapseState.Entering)
+		.AddClass($"mud-collapse-entering", _state == CollapseState.Entering)
-		.AddClass($"collapse-entered", _state == CollapseState.Entered)
+		.AddClass($"mud-collapse-entered", _state == CollapseState.Entered)
-		.AddClass($"collapse-exiting", _state == CollapseState.Exiting)
+		.AddClass($"mud-collapse-exiting", _state == CollapseState.Exiting)
 		.AddClass(Class)
 		.Build();
 

Connected.Components/Components/ColorPicker/ColorPicker.razor

@@ -9,7 +9,7 @@
 
 	protected override RenderFragment PickerContent =>
 	@<CascadingValue Value="@this" IsFixed="true">
-		<PickerToolbar DisableToolbar="@DisableToolbar" Class="picker-color-toolbar">
+		<PickerToolbar DisableToolbar="@DisableToolbar" Class="mud-picker-color-toolbar">
 			@if (PickerVariant != PickerVariant.Static)
 					{
 						<IconButton Class="pa-1 mud-close-picker-button" Size="Size.Small" Color="ThemeColor.Inherit" Icon="@CloseIcon" OnClick="@GetEventCallback()" />
@@ -19,19 +19,19 @@
 					<IconButton Class="pa-1 mx-1" Size="Size.Small" Color="GetButtonColor(ColorPickerView.Grid)" Icon="@GridIcon" OnClick="(() => ChangeView(ColorPickerView.Grid))" />
 					<IconButton Class="pa-1" Size="Size.Small" Color="GetButtonColor(ColorPickerView.Palette)" Icon="@PaletteIcon" OnClick="(() => ChangeView(ColorPickerView.Palette))" />
 				</PickerToolbar>
-				<PickerContent Class="picker-color-content">
+				<PickerContent Class="mud-picker-color-content">
 					@if (!DisableColorField)
 					{
-						<div class="picker-color-picker">
+						<div class="mud-picker-color-picker">
 							@if (_activeColorPickerView == ColorPickerView.Spectrum)
 							{
-								<div class="picker-color-overlay" style="@($"background-color: {_baseColor.ToString(ColorOutputFormats.RGB)}")">
+								<div class="mud-picker-color-overlay" style="@($"background-color: {_baseColor.ToString(ColorOutputFormats.RGB)}")">
-									<div class="picker-color-overlay mud-picker-color-overlay-white">
+									<div class="mud-picker-color-overlay mud-picker-color-overlay-white">
-										<div class="picker-color-overlay mud-picker-color-overlay-black">
+										<div class="mud-picker-color-overlay mud-picker-color-overlay-black">
-											<div class="picker-color-overlay" id="@_id" @onclick="OnColorOverlayClick">
+											<div class="mud-picker-color-overlay" id="@_id" @onclick="OnColorOverlayClick">
-												<svg class="picker-color-selector" height="26" width="26" style="transform: @GetSelectorLocation()" @onclick="OnSelectorClicked" @onclick:stopPropagation="true">
+												<svg class="mud-picker-color-selector" height="26" width="26" style="transform: @GetSelectorLocation()" @onclick="OnSelectorClicked" @onclick:stopPropagation="true">
 													<defs>
-														<filter id="picker-color-selector-shadow" x="-50%" y="-50%" width="200%" height="200%">
+														<filter id="mud-picker-color-selector-shadow" x="-50%" y="-50%" width="200%" height="200%">
 															<feGaussianBlur in="SourceAlpha" stdDeviation="1" />
 															<feOffset dx="0" dy="5" result="offsetblur" />
 															<feOffset dx="0" dy="-5" result="offsetblur" />
@@ -48,7 +48,7 @@
 							}
 							@if (_activeColorPickerView is ColorPickerView.Grid or ColorPickerView.GridCompact)
 							{
-								<div class="picker-color-grid">
+								<div class="mud-picker-color-grid">
 									@foreach (var item in _gridList)
 									{
 										<div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div>
@@ -61,32 +61,32 @@
 					{
 						@if (!DisableSliders || !DisableInputs || !DisablePreview)
 						{
-							<div class="picker-color-controls">
+							<div class="mud-picker-color-controls">
 								@if (!DisableSliders || !DisablePreview)
 								{
-									<div class="picker-color-controls-row">
+									<div class="mud-picker-color-controls-row">
 										@if (!DisablePreview)
 										{
-											<div class="picker-color-dot mud-picker-color-dot-current mud-ripple" @onclick="ToggleCollection">
+											<div class="mud-picker-color-dot mud-picker-color-dot-current mud-ripple" @onclick="ToggleCollection">
-												<div class="picker-color-fill" style="@($"background: {_color.ToString(ColorOutputFormats.RGBA)};")"></div>
+												<div class="mud-picker-color-fill" style="@($"background: {_color.ToString(ColorOutputFormats.RGBA)};")"></div>
 											</div>
 										}
 										@if (!DisableSliders && !_collectionOpen)
 										{
-											<div class="picker-color-sliders">
+											<div class="mud-picker-color-sliders">
 												@if (_activeColorPickerView != ColorPickerView.Grid)
 												{
-													<Slider Class="picker-color-slider hue" dir="ltr" T="int" Value="(int)_color.H" ValueChanged="UpdateBaseColorSlider" Step="1" Min="0" Max="360" />
+													<Slider Class="mud-picker-color-slider hue" dir="ltr" T="int" Value="(int)_color.H" ValueChanged="UpdateBaseColorSlider" Step="1" Min="0" Max="360" />
 												}
 												@if (!DisableAlpha)
 												{
-													<Slider Class="picker-color-slider alpha" Value="_color.A" ValueChanged="SetAlpha" T="int" Min="0" Max="255" Step="1" Style="@AlphaSliderStyle" />
+													<Slider Class="mud-picker-color-slider alpha" Value="_color.A" ValueChanged="SetAlpha" T="int" Min="0" Max="255" Step="1" Style="@AlphaSliderStyle" />
 												}
 											</div>
 										}
 										@if (_collectionOpen)
 										{
-											<div class="picker-color-collection">
+											<div class="mud-picker-color-collection">
 												@foreach (var item in Palette.Take(5))
 												{
 													<div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div>
@@ -97,22 +97,22 @@
 								}
 								@if (!DisableInputs)
 								{
-									<div class="picker-color-controls-row">
+									<div class="mud-picker-color-controls-row">
-										<div class="picker-color-inputs">
+										<div class="mud-picker-color-inputs">
 											@switch (ColorPickerMode)
 											{
 												case ColorPickerMode.RGB:
-													<NumericField Value="_color.R" T="int" ValueChanged="SetR" Class="picker-color-inputfield" HelperText="R" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
+													<NumericField Value="_color.R" T="int" ValueChanged="SetR" Class="mud-picker-color-inputfield" HelperText="R" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
-													<NumericField Value="_color.G" T="int" ValueChanged="SetG" Class="picker-color-inputfield" HelperText="G" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
+													<NumericField Value="_color.G" T="int" ValueChanged="SetG" Class="mud-picker-color-inputfield" HelperText="G" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
-													<NumericField Value="_color.B" T="int" ValueChanged="SetB" Class="picker-color-inputfield" HelperText="B" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
+													<NumericField Value="_color.B" T="int" ValueChanged="SetB" Class="mud-picker-color-inputfield" HelperText="B" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
 													break;
 												case ColorPickerMode.HSL:
-													<NumericField Value="@_color.H" T="double" ValueChanged="SetH" Class="picker-color-inputfield" HelperText="H" Step="1" Min="0" Max="360" Variant="Variant.Outlined" HideSpinButtons="true" />
+													<NumericField Value="@_color.H" T="double" ValueChanged="SetH" Class="mud-picker-color-inputfield" HelperText="H" Step="1" Min="0" Max="360" Variant="Variant.Outlined" HideSpinButtons="true" />
-													<NumericField Value="@_color.S" T="double" ValueChanged="SetS" Class="picker-color-inputfield" HelperText="S" Step="0.01" Min="0" Max="100" Variant="Variant.Outlined" HideSpinButtons="true" />
+													<NumericField Value="@_color.S" T="double" ValueChanged="SetS" Class="mud-picker-color-inputfield" HelperText="S" Step="0.01" Min="0" Max="100" Variant="Variant.Outlined" HideSpinButtons="true" />
-													<NumericField Value="@_color.L" T="double" ValueChanged="SetL" Class="picker-color-inputfield" HelperText="L" Step="0.01" Min="0" Max="100" Variant="Variant.Outlined" HideSpinButtons="true" />
+													<NumericField Value="@_color.L" T="double" ValueChanged="SetL" Class="mud-picker-color-inputfield" HelperText="L" Step="0.01" Min="0" Max="100" Variant="Variant.Outlined" HideSpinButtons="true" />
 													break;
 												case ColorPickerMode.HEX:
-													<TextField Value="@GetColorTextValue()" ValueChanged="SetInputString" T="string" Class="picker-color-inputfield" Variant="Variant.Outlined" MaxLength="@GetHexColorInputMaxLength()" HelperText="HEX" />
+													<TextField Value="@GetColorTextValue()" ValueChanged="SetInputString" T="string" Class="mud-picker-color-inputfield" Variant="Variant.Outlined" MaxLength="@GetHexColorInputMaxLength()" HelperText="HEX" />
 													break;
 												default:
 													break;
@@ -120,12 +120,12 @@
 
 											@if (!DisableAlpha && ColorPickerMode != ColorPickerMode.HEX)
 											{
-												<NumericField Value="@(  Math.Round(_color.A / 255.0, 2))" T="double" ValueChanged="SetAlpha" Class="picker-color-inputfield input-field-alpha" HelperText="A" Min="0" Max="1" Step="0.01" Variant="Variant.Outlined" HideSpinButtons="true" />
+												<NumericField Value="@(  Math.Round(_color.A / 255.0, 2))" T="double" ValueChanged="SetAlpha" Class="mud-picker-color-inputfield input-field-alpha" HelperText="A" Min="0" Max="1" Step="0.01" Variant="Variant.Outlined" HideSpinButtons="true" />
 											}
 										</div>
 										@if (!DisableModeSwitch)
 										{
-											<div class="picker-control-switch">
+											<div class="mud-picker-control-switch">
 												<IconButton OnClick="ChangeMode" Icon="@ImportExportIcon" Class="pa-1 me-n1"></IconButton>
 											</div>
 										}
@@ -135,8 +135,8 @@
 						}
 						@if (_activeColorPickerView == ColorPickerView.Palette)
 						{
-							<div class="picker-color-view">
+							<div class="mud-picker-color-view">
-								<div class="picker-color-view-collection">
+								<div class="mud-picker-color-view-collection">
 									@foreach (var item in Palette)
 									{
 										<div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div>

Connected.Components/Components/ColorPicker/ColorPicker.razor.cs

@@ -535,7 +535,7 @@ public partial class ColorPicker : Picker<Color>, IAsyncDisposable
    private EventCallback<MouseEventArgs> GetSelectPaletteColorCallback(Color color) => new EventCallbackFactory().Create(this, (MouseEventArgs e) => SelectPaletteColor(color));
 
    private ThemeColor GetButtonColor(ColorPickerView view) => _activeColorPickerView == view ? ThemeColor.Primary : ThemeColor.Inherit;
-   private string GetColorDotClass(Color color) => new CssBuilder("picker-color-dot").AddClass("selected", color == Value).ToString();
+   private string GetColorDotClass(Color color) => new CssBuilder("mud-picker-color-dot").AddClass("selected", color == Value).ToString();
    private string AlphaSliderStyle => new StyleBuilder().AddStyle($"background-image: linear-gradient(to {(RightToLeft ? "left" : "right")}, transparent, {_color.ToString(ColorOutputFormats.RGB)})").Build();
 
    #endregion