[WIP]

Fix styles and js not loading
Replace all mud-* styles with non-mud alternatives
Add css/js artifacts to ignore list in .gitignore

Required steps for successful build were missing critical pieces:
- Required the excubo web compiler for js/css compilation (https://github.com/excubo-ag/WebCompiler)
- Required .csproj modification to include js/css compilation at build
- Required minified files added to the final index.html page as styles/scripts

.gitignore

@@ -414,3 +414,15 @@ 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

@@ -1,12 +0,0 @@
-<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/MainLayout.razor

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

Connected.Components.Showcase/Pages/Index.razor

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

Connected.Components.Showcase/Program.cs

@@ -1,11 +0,0 @@
-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,9 +3,11 @@ 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", "connected.components\Connected.Components.csproj", "{70BF497D-6519-401B-A0EE-2E9856B13D96}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components", "src\connected.components\Connected.Components.csproj", "{70BF497D-6519-401B-A0EE-2E9856B13D96}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Connected.Components.Showcase", "Connected.Components.Showcase\Connected.Components.Showcase.csproj", "{EBB24FD8-A554-427C-A93B-B48C047D34CC}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components.Showcase", "src\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
@@ -21,6 +23,10 @@ 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/Carousel/CarouselItem.razor.cs

@@ -1,91 +0,0 @@
-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/Charts/Donut.razor

@@ -1,22 +0,0 @@
-@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/Pie.razor

@@ -1,14 +0,0 @@
-@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

@@ -1,15 +0,0 @@
-@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/DataGrid/DataGridPager.razor

@@ -1,29 +0,0 @@
-@namespace Connected.Components
-@inherits UIComponent
-@typeparam T
-
-<ToolBar @attributes="UserAttributes" Class="@Classname" Style="@Style">
-    <div class="mud-table-pagination-spacer"></div>
-    @if (!DisableRowsPerPage)
-    {
-        <TextContent Typo="Typo.body2" Class="mud-table-pagination-caption">
-            @RowsPerPageString
-        </TextContent>
-        <Select T="string" ValueChanged="@SetRowsPerPageAsync" Value="@DataGrid?.RowsPerPage.ToString()" Class="mud-table-pagination-select" DisableUnderLine="true" Dense="true" Disabled="@Disabled">
-            @foreach (int pageSize in PageSizeOptions)
-            {
-                <SelectItem T="string" Value="@pageSize.ToString()">@pageSize.ToString().ToUpper()</SelectItem>
-            }
-        </Select>
-    }
-    <TextContent Typo="Typo.body2" Class="mud-table-pagination-caption">
-        @Info
-    </TextContent>
-    <div class="mud-table-pagination-actions">
-        <IconButton Class="mud-flip-x-rtl" Icon="@Icons.Material.Filled.FirstPage" Disabled="@BackButtonsDisabled" @onclick="@(() => DataGrid.NavigateTo(Page.First))"/>
-        <IconButton Class="mud-flip-x-rtl" Icon="@Icons.Material.Filled.NavigateBefore" Disabled="@BackButtonsDisabled" @onclick="@(() => DataGrid.NavigateTo(Page.Previous))"/>
-        <IconButton Class="mud-flip-x-rtl" Icon="@Icons.Material.Filled.NavigateNext" Disabled="@ForwardButtonsDisabled" @onclick="@(() => DataGrid.NavigateTo(Page.Next))"/>
-        <IconButton Class="mud-flip-x-rtl" Icon="@Icons.Material.Filled.LastPage" Disabled="@ForwardButtonsDisabled" @onclick="@(() => DataGrid.NavigateTo(Page.Last))"/>
-    </div>
-</ToolBar>
-

Connected.Components/Components/Input/InputCssHelper.cs

@@ -1,37 +0,0 @@
-using Connected.Extensions;
-using Connected.Utilities;
-
-namespace Connected.Components;
-
-internal static class InputCssHelper
-{
-   public static string GetClassname<T>(InputBase<T> baseInput, Func<bool> shrinkWhen) =>
-      new CssBuilder("mud-input")
-         .AddClass($"mud-input-{baseInput.Variant.ToDescriptionString()}")
-         .AddClass($"mud-input-adorned-{baseInput.Adornment.ToDescriptionString()}", baseInput.Adornment != Adornment.None)
-         .AddClass($"mud-input-margin-{baseInput.Margin.ToDescriptionString()}", when: () => baseInput.Margin != Margin.None)
-         .AddClass("mud-input-underline", when: () => baseInput.DisableUnderLine == false && baseInput.Variant != Variant.Outlined)
-         .AddClass("mud-shrink", when: shrinkWhen)
-         .AddClass("mud-disabled", baseInput.Disabled)
-         .AddClass("mud-input-error", baseInput.HasErrors)
-         .AddClass("mud-ltr", baseInput.GetInputType() == InputType.Email || baseInput.GetInputType() == InputType.Telephone)
-         .AddClass(baseInput.Class)
-         .Build();
-
-   public static string GetInputClassname<T>(InputBase<T> baseInput) =>
-      new CssBuilder("mud-input-slot")
-         .AddClass("mud-input-root")
-         .AddClass($"mud-input-root-{baseInput.Variant.ToDescriptionString()}")
-         .AddClass($"mud-input-root-adorned-{baseInput.Adornment.ToDescriptionString()}", baseInput.Adornment != Adornment.None)
-         .AddClass($"mud-input-root-margin-{baseInput.Margin.ToDescriptionString()}", when: () => baseInput.Margin != Margin.None)
-         .AddClass(baseInput.Class)
-         .Build();
-
-   public static string GetAdornmentClassname<T>(InputBase<T> baseInput) =>
-      new CssBuilder("mud-input-adornment")
-         .AddClass($"mud-input-adornment-{baseInput.Adornment.ToDescriptionString()}", baseInput.Adornment != Adornment.None)
-         .AddClass($"mud-text", !string.IsNullOrEmpty(baseInput.AdornmentText))
-         .AddClass($"mud-input-root-filled-shrink", baseInput.Variant == Variant.Filled)
-         .AddClass(baseInput.Class)
-         .Build();
-}

Connected.Components/Components/Popover/Popover.razor

@@ -1,5 +0,0 @@
-@namespace Connected.Components
-@inherits UIComponent
-
-<div id="@($"popover-{_handler.Id}")" class="mud-popover-cascading-value">
-</div>

Connected.Components/Components/Progress/ProgressLinear.razor

@@ -1,29 +0,0 @@
-@namespace Connected.Components
-@using Connected.Extensions;
-@inherits UIComponent
-
-<div @attributes="UserAttributes" class="@DivClassname" style="@Style" role="progressbar" aria-valuenow="@_value.ToInvariantString()" aria-valuemin="@_min.ToInvariantString()" aria-valuemax="@_max.ToInvariantString()">
-    <div class="mud-progress-linear-bars">
-        @if (Indeterminate)
-        {
-            <div class="mud-progress-linear-bar"></div>
-            <div class="mud-progress-linear-bar"></div>
-        }
-        else if (Buffer)
-        {
-            <div class="mud-progress-linear-bar"></div>
-            <div class="mud-progress-linear-bar" style="@GetStyledBar1Transform()"></div>
-            <div class="mud-progress-linear-bar last" style="@GetStyledBar2Transform()"></div>
-        }
-        else
-        {
-            <div class="mud-progress-linear-bar" style="@GetStyledBar1Transform()"></div>
-        }
-    </div>
-    @if(ChildContent != null)
-    {
-        <div class="mud-progress-linear-content">
-            @ChildContent
-        </div>
-    }
-</div>

Connected.Components/Components/Snackbar/Defaults.cs

@@ -1,25 +0,0 @@
-//Copyright(c) Alessandro Ghidini.All rights reserved.
-//Changes and improvements Copyright (c) The MudBlazor Team.
-
-namespace Connected.Components;
-
-public static class Defaults
-{
-   public static class Classes
-   {
-      public static class Position
-      {
-         public const string TopLeft = "mud-snackbar-location-top-left";
-         public const string TopCenter = "mud-snackbar-location-top-center";
-         public const string TopRight = "mud-snackbar-location-top-right";
-         public const string TopStart = "mud-snackbar-location-top-start";
-         public const string TopEnd = "mud-snackbar-location-top-end";
-
-         public const string BottomLeft = "mud-snackbar-location-bottom-left";
-         public const string BottomCenter = "mud-snackbar-location-bottom-center";
-         public const string BottomRight = "mud-snackbar-location-bottom-right";
-         public const string BottomStart = "mud-snackbar-location-bottom-start";
-         public const string BottomEnd = "mud-snackbar-location-bottom-end";
-      }
-   }
-}

Connected.Components/Components/UIComponent.cs

@@ -1,36 +0,0 @@
-using Microsoft.AspNetCore.Components;
-
-namespace Connected.Components;
-
-public abstract class UIComponent : ComponentBase
-{
-    /// <summary>
-    /// User class names, separated by space.
-    /// </summary>
-    [Parameter]
-    public string Class { get; set; }
-
-    /// <summary>
-    /// User styles, applied on top of the component's own classes and styles.
-    /// </summary>
-    [Parameter]
-    public string Style { get; set; }
-
-    /// <summary>
-    /// Use Tag to attach any user data object to the component for your convenience.
-    /// </summary>
-    [Parameter]
-    public object Tag { get; set; }
-
-    /// <summary>
-    /// UserAttributes carries all attributes you add to the component that don't match any of its parameters.
-    /// They will be splatted onto the underlying HTML tag.
-    /// </summary>
-    [Parameter(CaptureUnmatchedValues = true)]
-    public Dictionary<string, object> UserAttributes { get; set; } = new();
-
-    /// <summary>
-    /// If the UserAttributes contain an ID make it accessible for WCAG labelling of input fields
-    /// </summary>
-    public string FieldId => UserAttributes.TryGetValue("id", out var id) ? id.ToString() : $"input-{Guid.NewGuid()}";
-}

Connected.Components/Connected.Components.csproj

@@ -1,37 +0,0 @@
-<Project Sdk="Microsoft.NET.Sdk.Razor">
-
-	<PropertyGroup>
-		<TargetFramework>net7.0</TargetFramework>
-		<Nullable>enable</Nullable>
-		<ImplicitUsings>enable</ImplicitUsings>
-		<RootNamespace>Connected</RootNamespace>
-	</PropertyGroup>
-
-	<ItemGroup>
-		<Content Remove="compilerconfig.json" />
-	</ItemGroup>
-
-	<ItemGroup>
-		<_ContentIncludedByDefault Remove="compilerconfig.json" />
-	</ItemGroup>
-
-	<ItemGroup>
-		<None Include="compilerconfig.json" />
-	</ItemGroup>
-
-
-	<ItemGroup>
-		<SupportedPlatform Include="browser" />
-	</ItemGroup>
-
-	<ItemGroup>
-		<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.0.0-rc.2.22476.2" />
-	</ItemGroup>
-
-	<ItemGroup>
-	  <Folder Include="Colors\" />
-	</ItemGroup>
-	<!--<Target Name="CompileStaticAssets" AfterTargets="AfterBuild">
-		<Exec Command="webcompiler -r wwwroot" StandardOutputImportance="high" />
-	</Target>-->
-</Project>

Connected.Components/Enums/HorizontalAlignment.cs

@@ -1,18 +0,0 @@
-using System.ComponentModel;
-
-namespace Connected
-{
-    public enum HorizontalAlignment
-    {
-        [Description("center")]
-        Center,
-        [Description("left")]
-        Left,
-        [Description("right")]
-        Right,
-        [Description("start")]
-        Start,
-        [Description("end")]
-        End
-    }
-}

Connected.Components/Layouts/DefaultLayout.razor

@@ -1,9 +0,0 @@
-@inherits LayoutComponentBase
-
-<HeadContent>
-	<link rel="stylesheet" href="_content/Connected.UI/Components.min.css" />
-	<link rel="stylesheet" href="_content/Connected.UI/Styles.min.css" />
-</HeadContent>
-
-
-@Body

Connected.Components/Middleware/ComponentMiddlewareService.cs

@@ -1,42 +0,0 @@
-using System.Collections.Concurrent;
-
-namespace Connected.Middleware;
-
-internal class ComponentMiddlewareService : IComponentMiddlewareService
-{
-	public ComponentMiddlewareService()
-	{
-		Middleware = new();
-	}
-
-	private ConcurrentDictionary<string, List<Type>> Middleware { get; }
-
-	public void Add<TMiddleware, TComponent>()
-	{
-		var componentName = typeof(TComponent).FullName;
-
-		if (string.IsNullOrEmpty(componentName))
-			throw new ArgumentException(null, nameof(TMiddleware));
-
-		if (Middleware.TryGetValue(componentName, out List<Type>? items))
-		{
-			//TODO: sort by priority so multiple inheritance would work 
-			items.Add(typeof(TMiddleware));
-		}
-		else
-			Middleware.TryAdd(componentName, new List<Type> { typeof(TMiddleware) });
-	}
-
-	public Type? Select<TComponent>()
-	{
-		var typeName = typeof(TComponent).FullName;
-
-		if (string.IsNullOrEmpty(typeName))
-			throw new ArgumentException(null, nameof(TComponent));
-
-		if (Middleware.TryGetValue(typeName, out List<Type>? items) && items is not null && items.Any())
-			return items[0];
-
-		return null;
-	}
-}

Connected.Components/Middleware/IComponentMiddlewareService.cs

@@ -1,8 +0,0 @@
-namespace Connected.Middleware;
-
-public interface IComponentMiddlewareService
-{
-	void Add<TMiddleware, TComponent>();
-
-	Type? Select<TComponent>();
-}

Connected.Components/compilerconfig.json

@@ -1,10 +0,0 @@
-[
-  {
-    "outputFile": "wwwroot/Styles.css",
-    "inputFile": "wwwroot/Styles.scss"
-  },
-  {
-    "outputFile": "wwwroot/Components.css",
-    "inputFile": "Styles/Components.scss"
-  }
-]

Connected.Components/wwwroot/Styles.css

@@ -1,4 +0,0 @@
-.important {
-  font-size: 3em;
-  color: green;
-}

Connected.Components/wwwroot/Styles.scss

@@ -1,7 +0,0 @@
-body {
-}
-
-.important {
-	font-size: 3em;
-	color: green;
-}

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

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

src/Connected.Components.Showcase/Pages/AlertShowcase.razor

@@ -0,0 +1,7 @@
+@page "/components/alert"
+
+@using Connected.Components;
+
+<ThemeProvider></ThemeProvider>
+
+<Alert Severity="Severity.Error" Variant="Variant.Filled">This is an alert</Alert>

src/Connected.Components/.config/dotnet-tools.json

@@ -0,0 +1,12 @@
+{
+   "version": 1,
+   "isRoot": true,
+   "tools": {
+      "excubo.webcompiler": {
+         "version": "2.7.12",
+         "commands": [
+            "webcompiler"
+         ]
+      }
+   }
+}

src/Connected.Components/Components/Alert/Alert.razor

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

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

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

src/Connected.Components/Components/Avatar/Avatar.razor

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

src/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("mud-avatar")
+	new CssBuilder("avatar")
-	  .AddClass($"mud-avatar-{Size.ToDescriptionString()}")
+	  .AddClass($"avatar-{Size.ToDescriptionString()}")
-	  .AddClass($"mud-avatar-rounded", Rounded)
+	  .AddClass($"avatar-rounded", Rounded)
-	  .AddClass($"mud-avatar-square", Square)
+	  .AddClass($"avatar-square", Square)
-	  .AddClass($"mud-avatar-{Variant.ToDescriptionString()}")
+	  .AddClass($"avatar-{Variant.ToDescriptionString()}")
-	  .AddClass($"mud-avatar-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
+	  .AddClass($"avatar-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
-	  .AddClass($"mud-elevation-{Elevation.ToString()}")
+	  .AddClass($"elevation-{Elevation.ToString()}")
 	  .AddClass(AvatarGroup?.GetAvatarSpacing() ?? new CssBuilder(), AvatarGroup != null)
 	  .AddClass(Class)
 	.Build();

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

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

src/Connected.Components/Components/Badge/Badge.razor

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

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

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

src/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("mud-breadcrumb-item")
+	private string Classname => new CssBuilder("breadcrumb-item")
-		 .AddClass("mud-disabled", Item?.Disabled)
+		 .AddClass("disabled", Item?.Disabled)
 		 .Build();
 }

src/Connected.Components/Components/Breadcrumbs/BreadcrumbSeparator.razor

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

src/Connected.Components/Components/Breadcrumbs/Breadcrumbs.razor

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

src/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("mud-breadcrumbs")
+	private string Classname => new CssBuilder("breadcrumbs")
-	 .AddClass("mud-typography-body1")
+	 .AddClass("typography-body1")
 	 .AddClass(Class)
 	 .Build();
 
 	internal static string GetItemClassname(BreadcrumbItem item)
 	{
-		return new CssBuilder("mud-breadcrumb-item")
+		return new CssBuilder("breadcrumb-item")
-			.AddClass("mud-disabled", item.Disabled)
+			.AddClass("disabled", item.Disabled)
 			.Build();
 	}
 

src/Connected.Components/Components/Button/Button.razor

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

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

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

src/Connected.Components/Components/Button/Fab.razor

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

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

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

src/Connected.Components/Components/Button/IconButton.razor

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

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

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

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

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

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

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

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

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

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

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

src/Connected.Components/Components/Card/CardHeader.razor

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

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

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

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

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

src/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="mud-carousel-swipe">
+        <SwipeArea OnSwipe="OnSwipe" Class="carousel-swipe">
             @*Selected Content*@
             @if (ItemsSource == null)
             {

src/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("mud-carousel")
+				new CssBuilder("carousel")
-					 .AddClass($"mud-carousel-{(BulletsColor ?? _currentColor).ToDescriptionString()}")
+					 .AddClass($"carousel-{(BulletsColor ?? _currentColor).ToDescriptionString()}")
 							 .AddClass(Class)
 							 .Build();
 
 	protected string NavigationButtonsClassName =>
 				new CssBuilder()
 					.AddClass($"align-self-{ConvertPosition(ArrowsPosition).ToDescriptionString()}", !(NavigationButtonsClass ?? "").Contains("align-self-"))
-					.AddClass("mud-carousel-elements-rtl", RightToLeft)
+					.AddClass("carousel-elements-rtl", RightToLeft)
 					.AddClass(NavigationButtonsClass)
 					.Build();
 

src/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("carousel-item")
+					 .AddClass($"carousel-item-{Color.ToDescriptionString()}")
+					 .AddClass("carousel-item-exit", !_disposed && Parent.LastContainer == this)
+
+					 .AddClass("carousel-transition-fade-in", !_disposed && Transition == Transition.Fade && Parent.SelectedContainer == this)
+					 .AddClass("carousel-transition-fade-out", !_disposed && Transition == Transition.Fade && Parent.LastContainer == this)
+
+					 .AddClass("carousel-transition-slide-next-enter", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.SelectedContainer == this && Parent._moveNext)
+					 .AddClass("carousel-transition-slide-next-exit", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.LastContainer == this && Parent._moveNext)
+
+					 .AddClass("carousel-transition-slide-prev-enter", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.SelectedContainer == this && !Parent._moveNext)
+					 .AddClass("carousel-transition-slide-prev-exit", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.LastContainer == this && !Parent._moveNext)
+
+					 .AddClass("carousel-transition-slide-next-rtl-enter", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.SelectedContainer == this && Parent._moveNext)
+					 .AddClass("carousel-transition-slide-next-rtl-exit", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.LastContainer == this && Parent._moveNext)
+
+					 .AddClass("carousel-transition-slide-prev-rtl-enter", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.SelectedContainer == this && !Parent._moveNext)
+					 .AddClass("carousel-transition-slide-prev-rtl-exit", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.LastContainer == this && !Parent._moveNext)
+
+					 .AddClass("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);
+	}
+
+}

src/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("mud-chart")
+	new CssBuilder("chart")
-		.AddClass($"mud-chart-legend-{ConvertLegendPosition(LegendPosition).ToDescriptionString()}")
+		.AddClass($"chart-legend-{ConvertLegendPosition(LegendPosition).ToDescriptionString()}")
 	  .AddClass(Class)
 	.Build();
 

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

@@ -2,9 +2,9 @@
 @using System.Globalization;
 @inherits Chart
 
-<svg @attributes="UserAttributes" class="mud-chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
+<svg @attributes="UserAttributes" class="chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
-    <g class="mud-charts-grid">
+    <g class="charts-grid">
-        <g class="mud-charts-gridlines-yaxis">
+        <g class="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="mud-charts-gridlines-xaxis-lines">
+            <g class="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="mud-charts-yaxis">
+    <g class="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="mud-charts-xaxis">
+    <g class="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="mud-charts-bar-series">
+    <g class="charts-bar-series">
         @foreach (var bar in _bars)
         {
-            <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>
+            <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>
         }
     </g>
 

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

@@ -0,0 +1,22 @@
+@namespace Connected.Components
+@using System.Globalization
+@inherits Chart
+
+<svg @attributes="UserAttributes" class="chart-donut" width="@ParentWidth" height="@ParentHeight" viewBox="0 0 42 42">
+    <Filters />
+    <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954"></circle>
+    @foreach (var item in _circles.ToList())
+    {
+        <circle class="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="donut-hole" cx="21" cy="21" r="13.4"></circle>
+
+	@ChartParent?.CustomGraphics
+</svg>
+<Legend Data="@_legends" />

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

@@ -2,9 +2,9 @@
 @using System.Globalization;
 @inherits Chart
 
-<svg @attributes="UserAttributes" class="mud-chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
+<svg @attributes="UserAttributes" class="chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
-    <g class="mud-charts-grid">
+    <g class="charts-grid">
-        <g class="mud-charts-gridlines-yaxis">
+        <g class="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="mud-charts-gridlines-xaxis-lines">
+            <g class="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="mud-charts-yaxis">
+    <g class="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="mud-charts-xaxis">
+    <g class="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="mud-charts-line-series">
+    <g class="charts-line-series">
         @foreach (var chartLine in _chartLines)
         {
-            <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>
+            <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>
         }
     </g>
 

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

@@ -0,0 +1,14 @@
+@namespace Connected.Components
+@using System.Globalization
+@inherits Chart
+
+<svg @attributes="UserAttributes" class="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="chart-serie" fill="@(ChartParent.ChartOptions.ChartPalette.GetValue(item.Index % ChartOptions.ChartPalette.Count()))" d="@item.Data"></path>
+	}
+
+	@ChartParent?.CustomGraphics
+</svg>
+<Legend Data="@_legends" />