[WIP]: Save semi-refactored state for transfer

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

@@ -4,4 +4,5 @@
 
 <ThemeProvider></ThemeProvider>
 
-<Alert Severity="Severity.Error" Variant="Variant.Filled">This is an alert</Alert>
+<Alert Severity="Severity.Error" Variant="Variant.Filled" Dense="true">This is an alert</Alert>
+<Alert Severity="Severity.Error" Variant="Variant.Filled" Alignment="HorizontalAlignment.End">This is another alert</Alert>

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

@@ -0,0 +1,7 @@
+@page "/components/app-bar"
+
+@using Connected.Components;
+
+<ThemeProvider></ThemeProvider>
+
+<AppBar Dense="true">This is an alert</AppBar>

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

@@ -2,13 +2,16 @@
 
 @inherits UIComponent
 
-<div @attributes="UserAttributes" role="alert" class="@ClassList" Style="@Style" @onclick="Clicked">
+<div role="alert"
-	<div class="@ClassPosition">
+	  class="@CompiledClassList"
+	  @attributes="CustomAttributes"
+	  @onclick="Clicked">
+	<div class="@CompiledAlignmentClassList">
 
-		@if (!GlyphVisible)
+		@if (GlyphVisible)
 		{
 			<div class="alert-icon alert-icon-left">
-				<Icon Glyph="@Glyph" />
+				<Icon Glyph="@CustomGlyph" />
 			</div>
 		}
 

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

@@ -1,5 +1,4 @@
-using Connected.Extensions;
+using Connected.Utilities;
-using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 
@@ -7,122 +6,135 @@ namespace Connected.Components;
 
 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.
+	/// Defines the classlist used in aligning the alert content internally.
 	/// </summary>
-	[Parameter]
+	private CssBuilder CompiledAlignmentClassList
-	public HorizontalAlignment Alignment { get; set; } = HorizontalAlignment.Start;
+	{
+		get
+		{
+			return new CssBuilder("alert-position")
+				.AddClass($"justify-sm-{HorizontalAlignment.GetAbsolute(RightToLeft)}");
+		}
+	}
+
 	/// <summary>
-	/// The callback, when the close glyph has been clicked.
+	/// Contains the default container classlist and the user defined classes.
 	/// </summary>
-	[Parameter] public EventCallback<Alert> CloseClicked { get; set; }
+	private CssBuilder CompiledClassList
-	/// <summary>
+	{
-	/// Define the glyph used for the close button.
+		get
-	/// </summary>
+		{
-	[Parameter]
+			return new CssBuilder("alert")
-	public string CloseGlyph { get; set; } = Icons.Material.Filled.Close;
+				.AddClass($"alert-{Variant}-{Severity}")
-	/// <summary>
+				.AddClass($"dense", Dense)
-	/// Sets if the alert shows a close glyph.
+				.AddClass($"square", Square)
-	/// </summary>
+				.AddClass($"elevation-{Elevation}")
-	[Parameter]
+				.AddClass(ClassList);
-	public bool CloseGlyphVisible { get; set; }
+		}
-	/// <summary>
+	}
-	/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
+
-	/// </summary>
-	[Parameter]
-	public int Elevation { set; get; } = 0;
-	/// <summary>
-	/// If true, rounded corners are disabled.
-	/// </summary>
-	[Parameter]
-	public bool Square { get; set; }
-	/// <summary>
-	/// If true, compact padding will be used.
-	/// </summary>
-	[Parameter]
-	public bool Dense { get; set; }
-	/// <summary>
-	/// 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 glyph used.
-	/// </summary>
-	[Parameter]
-	public Severity Severity { get; set; } = Severity.Normal;
-	/// <summary>
-	/// The variant to use.
-	/// </summary>
-	[Parameter]
-	public Variant Variant { get; set; } = Variant.Text;
 	/// <summary>
 	/// Child content of the component.
 	/// </summary>
 	[Parameter]
 	public RenderFragment? ChildContent { get; set; }
+
+	#region EventCallbacks
 	/// <summary>
-	/// Custom glyph, leave unset to use the standard glyph which depends on the Severity.
+	/// Raised when the alert is clicked.
-	/// </summary>
-	[Parameter]
-	public string Glyph { get; set; } = default!;
-	/// <summary>
-	/// Raised when the alert is clicked
 	/// </summary>
 	[Parameter]
 	public EventCallback<MouseEventArgs> Clicked { get; set; }
 
-	protected string ClassList
+	/// <summary>
-	{
+	/// The callback, when the close glyph has been clicked.
-		get
+	/// </summary>
-		{
+	[Parameter] public EventCallback<Alert> CloseClicked { get; set; }
-			return new CssBuilder("alert")
-				.AddClass($"alert-{Variant.ToDescriptionString()}-{Severity.ToDescriptionString()}")
-				.AddClass($"dense", Dense)
-				.AddClass($"square", Square)
-				.AddClass($"elevation-{Elevation}")
-				.AddClass(Class)
-				.Build();
-		}
-	}
 
-	protected string ClassPosition
+	#endregion
-	{
+	#region Content placeholders
-		get
+	/// <summary>
-		{
+	/// Define the glyph used for the close button.
-			return new CssBuilder("alert-position")
+	/// </summary>
-				.AddClass($"justify-sm-{ConvertHorizontalAlignment(Alignment).ToDescriptionString()}")
+	[Parameter]
-				.Build();
+	public string CloseGlyph { get; set; } = Icons.Material.Filled.Close;
-		}
-	}
 
-	private HorizontalAlignment ConvertHorizontalAlignment(HorizontalAlignment contentAlignment)
+	/// <summary>
-	{
+	/// Custom glyph, leave unset to use the standard glyph which depends on the Severity.
-		return contentAlignment switch
+	/// </summary>
-		{
+	[Parameter]
-			HorizontalAlignment.Right => RightToLeft ? HorizontalAlignment.Start : HorizontalAlignment.End,
+	public string CustomGlyph { get; set; } = default!;
-			HorizontalAlignment.Left => RightToLeft ? HorizontalAlignment.End : HorizontalAlignment.Start,
+	#endregion
-			_ => contentAlignment
-		};
-	}
 
+	#region Styling properties
+	/// <summary>
+	/// Sets the horizontal alignement of the text. Start and end depend on the <see cref="RightToLeft"/> property.
+	/// </summary>
+	[Parameter]
+	public HorizontalAlignment HorizontalAlignment { get; set; } = HorizontalAlignment.Start;
 
-	internal async Task OnCloseGlyphClick()
+	/// <summary>
-	{
+	/// A space separated list of class names, added on top of the default class list.
-		if (!CloseClicked.HasDelegate)
+	/// </summary>
-			return;
+	[Parameter]
+	public string? ClassList { get; set; }
 
-		await CloseClicked.InvokeAsync(this);
+	/// <summary>
-	}
+	/// Sets if the alert shows a close glyph.
+	/// </summary>
+	[Parameter]
+	public bool CloseGlyphVisible { get; set; }
+
+	/// <summary>
+	/// If true, compact padding will be used.
+	/// </summary>
+	[Parameter]
+	public bool Dense { get; set; }
+
+	/// <summary>
+	/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
+	/// </summary>
+	[Parameter]
+	public int Elevation { set; get; } = 0;
+
+	/// <summary>
+	/// If true, no alert glyph will be used.
+	/// </summary>
+	[Parameter]
+	public bool GlyphVisible { get; set; }
+
+	/// <summary>
+	/// Specifies the control's display style
+	/// </summary>
+	[CascadingParameter(Name = "RightToLeft")]
+	public bool RightToLeft { get; set; }
+
+	/// <summary>
+	/// The severity of the alert. This defines the color and glyph used.
+	/// </summary>
+	[Parameter]
+	public Severity Severity { get; set; } = Severity.Normal;
+
+	/// <summary>
+	/// If true, rounded corners are disabled.
+	/// </summary>
+	[Parameter]
+	public bool Square { get; set; }
+
+	/// <summary>
+	/// The variant to use.
+	/// </summary>
+	[Parameter]
+	public Variant Variant { get; set; } = Variant.Text;
+	#endregion
 
 	protected override void OnParametersSet()
 	{
-		if (!string.IsNullOrEmpty(Glyph))
+		if (!string.IsNullOrEmpty(CustomGlyph))
 			return;
 
-		Glyph = GetGlyphForSeverity(Severity);
+		CustomGlyph = GetGlyphForSeverity(Severity);
 	}
 
 	private string GetGlyphForSeverity(Severity severity)
@@ -137,4 +149,12 @@ public partial class Alert : UIComponent
 			_ => throw new ArgumentOutOfRangeException(nameof(severity)),
 		};
 	}
+
+	internal async Task OnCloseGlyphClick()
+	{
+		if (!CloseClicked.HasDelegate)
+			return;
+
+		await CloseClicked.InvokeAsync(this);
+	}
 }

src/Connected.Components/Components/AppBar/AppBar.razor

@@ -1,10 +1,10 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<header @attributes="UserAttributes" class="@ClassList" style="@Style">
+<header @attributes="CustomAttributes" class="@CompiledHeaderClassList">
-    <ToolBar Dense="@Dense" DisableGutters="@DisableGutters" Class="@ToolBarClassList()">
+	<ToolBar Dense="@Dense" DisableGutters="@DisableGutters" Class="@CompiledToolbarClassList">
-        @ChildContent
+		@ChildContent
-    </ToolBar>
+	</ToolBar>
 </header>
 
 

src/Connected.Components/Components/AppBar/AppBar.razor.cs

@@ -1,22 +1,52 @@
 using Connected.Extensions;
 using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
+using System.Security;
 
 namespace Connected.Components;
 
 public partial class AppBar : UIComponent
 {
 	/// <summary>
-	/// If true, Appbar will be placed at the bottom of the screen.
+	/// The classlist determining the toolbar render.
 	/// </summary>
-	[Parameter]
+	private CssBuilder CompiledToolbarClassList
-	public bool Bottom { get; set; }
+	{
+		get
+		{
+			return new CssBuilder("toolbar-appbar")
+				.AddClass(ToolbarClassList);
+		}
+	}
 
 	/// <summary>
-	/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
+	/// The classlist determining the header render.
+	/// </summary>
+	private CssBuilder CompiledHeaderClassList
+	{
+		get
+		{
+			return new CssBuilder("app-bar")
+				.AddClass($"appbar-dense", Dense)
+				.AddClass($"appbar-fixed-top", Fixed && VerticalAlignment == VerticalAlignment.Top)
+				.AddClass($"appbar-fixed-bottom", Fixed && VerticalAlignment == VerticalAlignment.Bottom)
+				.AddClass($"elevation-{Elevation}")
+				.AddClass($"theme-{Color}", Color != ThemeColor.Default)
+				.AddClass(HeaderClassList);
+		}
+	}
+
+	/// <summary>
+	/// Child content of the component.
 	/// </summary>
 	[Parameter]
-	public int Elevation { set; get; } = 4;
+	public RenderFragment? ChildContent { get; set; }
+
+	/// <summary>
+	/// The color of the component. It supports the theme colors.
+	/// </summary>
+	[Parameter]
+	public ThemeColor Color { get; set; } = ThemeColor.Default;
 
 	/// <summary>
 	/// If true, compact padding will be used.
@@ -31,45 +61,32 @@ public partial class AppBar : UIComponent
 	public bool DisableGutters { get; set; }
 
 	/// <summary>
-	/// The color of the component. It supports the theme colors.
+	/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
 	/// </summary>
 	[Parameter]
-	public ThemeColor Color { get; set; } = ThemeColor.Default;
+	public int Elevation { set; get; } = 4;
 
 	/// <summary>
-	/// If true, appbar will be Fixed.
+	/// If true, appbar will be fixed.
 	/// </summary>
 	[Parameter]
 	public bool Fixed { get; set; } = true;
 
 	/// <summary>
-	/// User class names, separated by spaces for the nested toolbar.
+	/// Class names for the AppBar header. In case of several, separate by spaces.
 	/// </summary>
 	[Parameter]
-	public string? ToolBarClass { get; set; }
+	public string? HeaderClassList { get; set; }
 
 	/// <summary>
-	/// Child content of the component.
+	/// Class names for the nested toolbar. In case of several, separate by spaces.
 	/// </summary>
 	[Parameter]
-	public RenderFragment? ChildContent { get; set; }
+	public string? ToolbarClassList { get; set; }
 
-	protected string ClassList()
+	/// <summary>
-	{
+	/// Determines the vertical alignment of the AppBar.
-		return new CssBuilder("appbar")
+	/// </summary>
-			.AddClass($"appbar-dense", Dense)
+	[Parameter]
-			.AddClass($"appbar-fixed-top", Fixed && !Bottom)
+	public VerticalAlignment VerticalAlignment { get; set; }
-			.AddClass($"appbar-fixed-bottom", Fixed && Bottom)
-			.AddClass($"elevation-{Elevation}")
-			.AddClass($"theme-{Color.ToDescriptionString()}", Color != ThemeColor.Default)
-			.AddClass(Class)
-			.Build();
-	}
-
-	protected string ToolBarClassList()
-	{
-		return new CssBuilder("toolbar-appbar")
-			.AddClass(ToolBarClass)
-			.Build();
-	}
 }

src/Connected.Components/Components/Autocomplete/Autocomplete.razor

@@ -4,7 +4,7 @@
 
 <CascadingValue Name="SubscribeToParentForm" Value="false" IsFixed="true">
     <div class="@AutocompleteClassList">
-        <InputControl Label="@Label" Variant="@Variant" HelperText="@HelperText" HelperTextOnFocus="@HelperTextOnFocus" FullWidth="@FullWidth" Margin="@Margin" Class="@ClassList()" Style="@Style"
+        <InputControl Label="@Label" Variant="@Variant" HelperText="@HelperText" HelperTextOnFocus="@HelperTextOnFocus" FullWidth="@FullWidth" Margin="@Margin" Class="@ClassList()"
                          Error="@HasError" ErrorText="@ErrorText" Disabled="@Disabled" @onclick="@ToggleMenu" Required="@Required" ForId="@FieldId">
             <InputContent>
                 <Input @ref="_elementReference" @key="_elementKey" InputType="InputType.Text"
@@ -15,7 +15,7 @@
                           Disabled="@Disabled" ReadOnly="@ReadOnly" Error="@HasError"
                           OnAdornmentClick="@OnAdornmentClick" AdornmentIcon="@CurrentIcon" Adornment="@Adornment" AdornmentColor="@AdornmentColor" IconSize="@IconSize" AdornmentText="@AdornmentText"
                           Clearable="@Clearable" OnClearButtonClick="@OnClearButtonClick"
-                          @attributes="UserAttributes"
+                          @attributes="CustomAttributes"
                           TextChanged="OnTextChanged" OnBlur="OnInputBlurred"
                           OnKeyDown="@this.OnInputKeyDown"
                           OnKeyUp="@this.OnInputKeyUp" autocomplete=@("disabled-"+Guid.NewGuid()) KeyUpPreventDefault="KeyUpPreventDefault"

src/Connected.Components/Components/Autocomplete/Autocomplete.razor.cs

@@ -231,7 +231,6 @@ public partial class Autocomplete<T> : InputBase<T>, IDisposable
 	 protected string ClassList()
 	 {
 		  return new CssBuilder("select")
-			 .AddClass(Class)
 			 .Build();
 	 }
 

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

@@ -1,14 +1,14 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-@if(AvatarGroup == null || AvatarGroup.MaxGroupReached(this))
+@if(AvatarGroup is null || AvatarGroup.MaxGroupReached(this))
 {
-    <div @attributes="UserAttributes" class="@Classname" style="@Stylesname">
+    <div @attributes="CustomAttributes" class="@CompiledClassList" style="@CompiledStyles">
         @if (!String.IsNullOrEmpty(Image))
         {
-            if (!String.IsNullOrEmpty(Alt))
+            if (!String.IsNullOrEmpty(ImageAltText))
             {
-                <img src="@Image" alt="@Alt" class="avatar-img" />
+                <img src="@Image" alt="@ImageAltText" class="avatar-img" />
             }
             else
             {

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

@@ -7,88 +7,87 @@ namespace Connected.Components;
 
 partial class Avatar : UIComponent, IDisposable
 {
-	[CascadingParameter] protected AvatarGroup AvatarGroup { get; set; }
+	[CascadingParameter]
-	protected string Classname =>
+	protected AvatarGroup? AvatarGroup { get; set; }
-	new CssBuilder("avatar")
-	  .AddClass($"avatar-{Size.ToDescriptionString()}")
-	  .AddClass($"avatar-rounded", Rounded)
-	  .AddClass($"avatar-square", Square)
-	  .AddClass($"avatar-{Variant.ToDescriptionString()}")
-	  .AddClass($"avatar-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
-	  .AddClass($"elevation-{Elevation.ToString()}")
-	  .AddClass(AvatarGroup?.GetAvatarSpacing() ?? new CssBuilder(), AvatarGroup != null)
-	  .AddClass(Class)
-	.Build();
 
-	protected string Stylesname =>
+	protected CssBuilder CompiledClassList
-		new StyleBuilder()
+	{
-		.AddStyle(AvatarGroup?.GetAvatarZindex(this) ?? new StyleBuilder(), AvatarGroup != null)
+		get
-		.AddStyle(Style)
+		{
-		.Build();
+			return new CssBuilder("avatar")
+			  .AddClass($"avatar-{Size}")
+			  .AddClass($"avatar-rounded", Kind == AvatarKind.Rounded)
+			  .AddClass($"avatar-square", Kind == AvatarKind.Square)
+			  .AddClass($"avatar-{Variant}")
+			  .AddClass($"avatar-{Variant}-{Color}")
+			  .AddClass($"elevation-{Elevation}")
+			  .AddClass(ClassList)
+			  .AddClass(AvatarGroup?.GetAvatarSpacing() ?? new CssBuilder(), AvatarGroup != null);
+		}
+	}
+
+	protected StyleBuilder CompiledStyles
+	{
+		get
+		{
+			return new StyleBuilder()
+				.AddStyle(AvatarGroup?.GetAvatarZindex(this) ?? new StyleBuilder(), AvatarGroup is not null);
+		}
+	}
 
 	/// <summary>
-	/// The higher the number, the heavier the drop-shadow.
+	/// A space separated list of class names, added on top of the default class list.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Avatar.Appearance)]
+	public string? ClassList { get; set; }
-	public int Elevation { set; get; } = 0;
-
-	/// <summary>
-	/// If true, border-radius is set to 0.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Avatar.Appearance)]
-	public bool Square { get; set; }
-
-	/// <summary>
-	/// If true, border-radius is set to the themes default value.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Avatar.Appearance)]
-	public bool Rounded { get; set; }
-
-	/// <summary>
-	/// Link to image, if set a image will be displayed instead of text.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Avatar.Behavior)]
-	public string Image { get; set; }
 
 	/// <summary>
 	/// If set (and Image is also set), will add an alt property to the img element
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Avatar.Behavior)]
+	public string? ImageAltText { get; set; }
-	public string Alt { get; set; }
+
+	/// <summary>
+	/// Child content of the component.
+	/// </summary>
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
 
 	/// <summary>
 	/// The color of the component. It supports the theme colors.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Avatar.Appearance)]
 	public ThemeColor Color { get; set; } = ThemeColor.Default;
 
+	/// <summary>
+	/// The higher the number, the heavier the drop-shadow.
+	/// </summary>
+	[Parameter]
+	public int Elevation { set; get; } = 0;
+
+	/// <summary>
+	/// Link to image, if set a image will be displayed instead of text.
+	/// </summary>
+	[Parameter]
+	public string? Image { get; set; }
+
+	/// <summary>
+	/// Sets the avatar appearance
+	/// </summary>
+	public AvatarKind Kind { get; set; }
+
 	/// <summary>
 	/// The Size of the MudAvatar.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Avatar.Appearance)]
 	public Size Size { get; set; } = Size.Medium;
 
 	/// <summary>
 	/// The variant to use.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Avatar.Appearance)]
 	public Variant Variant { get; set; } = Variant.Filled;
 
-	/// <summary>
-	/// Child content of the component.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Avatar.Behavior)]
-	public RenderFragment ChildContent { get; set; }
-
 	protected override void OnInitialized()
 	{
 		base.OnInitialized();
@@ -96,13 +95,7 @@ partial class Avatar : UIComponent, IDisposable
 		AvatarGroup?.AddAvatar(this);
 	}
 
-	public void Dispose()
+	public void Dispose() => AvatarGroup?.RemoveAvatar(this);
-	{
-		AvatarGroup?.RemoveAvatar(this);
-	}
 
-	internal void ForceRedraw()
+	internal void ForceRedraw() => StateHasChanged();
-	{
-		StateHasChanged();
-	}
 }

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

@@ -1,13 +1,13 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div @attributes="UserAttributes" class="@Classname" style="@Style">
+<div @attributes="CustomAttributes" class="@CompiledClassList">
     <CascadingValue Value="this" IsFixed="true">
         @ChildContent
     </CascadingValue>
     @if(_avatars.Count > Max)
     {
-        <Avatar Class="@MaxAvatarClassname" Color="@MaxColor" Size="@MaxSize" Variant="@MaxVariant" Rounded="@MaxRounded" Square="@MaxSquare" Elevation="@MaxElevation">
+        <Avatar Class="@CompiledMaxAvatarClassList" Color="@MaxColor" Size="@MaxSize" Variant="@MaxVariant" Rounded="@MaxRounded" Square="@MaxSquare" Elevation="@MaxElevation">
             @($"+{_avatars.Count - Max}")
         </Avatar>
     }

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

@@ -8,27 +8,34 @@ namespace Connected.Components;
 partial class AvatarGroup : UIComponent
 {
 	private bool _childrenNeedUpdates = false;
-
-	protected string Classname =>
-	new CssBuilder("avatar-group")
-		.AddClass($"avatar-group-outlined", Outlined)
-		.AddClass($"avatar-group-outlined-{OutlineColor.ToDescriptionString()}", Outlined)
-	  .AddClass(Class)
-	.Build();
-
-	protected string MaxAvatarClassname =>
-	new CssBuilder("avatar-group-max-avatar")
-		.AddClass($"ms-n{Spacing}")
-	  .AddClass(MaxAvatarClass)
-	.Build();
-
 	private int _spacing = 3;
+	private List<Avatar> _avatars = new();
+
+	private CssBuilder CompiledClassList
+	{
+		get
+		{
+			return new CssBuilder("avatar-group")
+				.AddClass($"avatar-group-outlined", Outlined)
+				.AddClass($"avatar-group-outlined-{OutlineColor.ToDescriptionString()}", Outlined)
+				.AddClass(ClassList);
+		}
+	}
+
+	private CssBuilder CompiledMaxAvatarClassList
+	{
+		get
+		{
+			return new CssBuilder("avatar-group-max-avatar")
+			  .AddClass($"ms-n{Spacing}")
+			 .AddClass(MaxAvatarClass);
+		}
+	}
 		
 	/// <summary>
 	/// Spacing between avatars where 0 is none and 16 max.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.AvatarGroup.Behavior)]
 	public int Spacing
 	{
 		get => _spacing;
@@ -42,6 +49,12 @@ partial class AvatarGroup : UIComponent
 		}
 	}
 
+	/// <summary>
+	/// A space separated list of class names, added on top of the default class list.
+	/// </summary>
+	[Parameter]
+	public string? ClassList { get; set; }
+
 	/// <summary>
 	/// Outlines the grouped avatars to distinguish them, useful when avatars are the same color or uses images.
 	/// </summary>
@@ -132,8 +145,6 @@ partial class AvatarGroup : UIComponent
 	[Category(CategoryTypes.AvatarGroup.Behavior)]
 	public RenderFragment ChildContent { get; set; }
 
-	internal List<Avatar> _avatars = new();
-
 	internal void AddAvatar(Avatar avatar)
 	{
 		_avatars.Add(avatar);

src/Connected.Components/Components/Avatar/AvatarKind.cs

@@ -0,0 +1,14 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Connected.Components;
+public enum AvatarKind
+{
+	Undefined = 0,
+	Unadorned = 1,
+	Rounded = 2,
+	Square = 3
+}

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

@@ -1,8 +1,8 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<span @attributes="UserAttributes" class="@Classname" style="@Style">
+<span @attributes="CustomAttributes" class="@CompiledClassList">
-    @ChildContent
+	@ChildContent
 	@if (Visible)
 	{
 		<span class="@WrapperClass">

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

@@ -9,9 +9,9 @@ namespace Connected.Components;
 
 public partial class Badge : UIComponent
 {
-	protected string Classname =>
+	protected string CompiledClassList =>
 	new CssBuilder("badge-root")
-	  .AddClass(Class)
+	  .AddClass(AdditionalClassList)
 	.Build();
 	protected string WrapperClass =>
 	new CssBuilder("badge-wrapper")

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

@@ -7,7 +7,7 @@
 }
 
 <CascadingValue Value="this" IsFixed="true">
-    <ul @attributes="UserAttributes" class=@Classname style="@Style">
+    <ul @attributes="CustomAttributes" class=@Classname>
         @if (MaxItems is not null && Collapsed && Items.Count > MaxItems)
         {
             <BreadcrumbLink Item="Items[0]"></BreadcrumbLink>

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

@@ -51,7 +51,7 @@ public partial class Breadcrumbs : UIComponent
 	public bool Collapsed { get; private set; } = true;
 	private string Classname => new CssBuilder("breadcrumbs")
 	 .AddClass("typography-body1")
-	 .AddClass(Class)
+	 .AddClass(AdditionalClassList)
 	 .Build();
 
 	internal static string GetItemClassname(BreadcrumbItem item)

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

@@ -3,29 +3,13 @@
 @inherits ButtonBase
 
 <Element @bind-Ref="@_elementReference"
-            HtmlTag="@HtmlTag"
+			HtmlTag="@HtmlTag"
-            Class="@Classname" 
+			Class="@CompiledClassList"
-            Style="@Style"
+			@attributes="CustomAttributes"
-            @attributes="UserAttributes"
+			@onclick="OnClickHandler"
-            @onclick="OnClickHandler"
+			type="@ButtonType.ToDescriptionString()"
-            type="@ButtonType.ToDescriptionString()"
+			disabled="@Disabled">
-            href="@Href" 
+	<span class="button-label">
-            target="@Target"
+		@ChildContent
-            rel="@(Target=="_blank"?"noopener":null)"
+	</span>
-            disabled="@Disabled">
-    <span class="button-label">
-        @if (!string.IsNullOrWhiteSpace(StartIcon))
-        {
-            <span class="@StartIconClass">
-                <Icon Icon="@StartIcon" Size="@Size" Color="@IconColor" />
-            </span>
-        }
-        @ChildContent
-        @if (!string.IsNullOrWhiteSpace(@EndIcon))
-        {
-            <span class="@EndIconClass">
-                <Icon Glyph="@EndIcon" Size="@Size" Color="@IconColor" />
-            </span>
-        }
-    </span>
 </Element>

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

@@ -7,90 +7,47 @@ namespace Connected.Components;
 
 public partial class Button : ButtonBase
 {
-	protected string Classname =>
-	new CssBuilder("button-root mud-button")
-	  .AddClass($"button-{Variant.ToDescriptionString()}")
-	  .AddClass($"button-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
-	  .AddClass($"button-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}")
-	  .AddClass($"width-full", FullWidth)
-	  .AddClass($"ripple", !DisableRipple)
-	  .AddClass($"button-disable-elevation", DisableElevation)
-	  .AddClass(Class)
-	.Build();
-
-	protected string StartIconClass =>
-	new CssBuilder("button-icon-start")
-	  .AddClass($"button-icon-size-{Size.ToDescriptionString()}")
-	  .AddClass(IconClass)
-	.Build();
-
-	protected string EndIconClass =>
-	new CssBuilder("button-icon-end")
-	  .AddClass($"button-icon-size-{Size.ToDescriptionString()}")
-	  .AddClass(IconClass)
-	.Build();
-
 	/// <summary>
-	/// Icon placed before the text if set.
+	/// Child content of component.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Button.Behavior)]
+	public RenderFragment? ChildContent { get; set; }
-	public string StartIcon { get; set; }
+
+	private CssBuilder CompiledClassList
+	{
+		get
+		{
+			return new CssBuilder("button-root mud-button")
+			.AddClass($"button-{Variant}")
+			.AddClass($"button-{Variant}-{Color}")
+			.AddClass($"button-{Variant}-size-{Size}")
+			.AddClass($"ripple", !CanRipple)
+			.AddClass($"elevation-{Elevation}")
+			.AddClass(ClassList);
+		}
+	}
 
 	/// <summary>
-	/// Icon placed after the text if set.
+	/// A space separated list of class names, added on top of the default class list.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Button.Behavior)]
+	public string? ClassList { get; set; }
-	public string EndIcon { get; set; }
-
-	/// <summary>
-	/// The color of the icon. It supports the theme colors.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Button.Appearance)]
-	public ThemeColor IconColor { get; set; } = ThemeColor.Inherit;
-
-	/// <summary>
-	/// Icon class names, separated by space
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Button.Appearance)]
-	public string IconClass { get; set; }
 
 	/// <summary>
 	/// The color of the component. It supports the theme colors.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Button.Appearance)]
 	public ThemeColor Color { get; set; } = ThemeColor.Default;
 
 	/// <summary>
 	/// The Size of the component.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Button.Appearance)]
 	public Size Size { get; set; } = Size.Medium;
 
 	/// <summary>
 	/// The variant to use.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Button.Appearance)]
 	public Variant Variant { get; set; } = Variant.Text;
-
-	/// <summary>
-	/// If true, the button will take up 100% of available width.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Button.Appearance)]
-	public bool FullWidth { get; set; }
-
-	/// <summary>
-	/// Child content of component.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Button.Behavior)]
-	public RenderFragment ChildContent { get; set; }
-
 }

src/Connected.Components/Components/Button/ButtonBase.cs

@@ -8,133 +8,73 @@ namespace Connected.Components;
 
 public abstract class ButtonBase : UIComponent
 {
+	/// <summary>
+	/// Button click event.
+	/// </summary>
+	[Parameter]
+	public EventCallback<MouseEventArgs> OnClick { get; set; }
+
 	/// <summary>
 	/// Potential activation target for this button. This enables RenderFragments with user-defined
 	/// buttons which will automatically activate the intended functionality. 
 	/// </summary>
-	[CascadingParameter] protected IActivatable Activateable { get; set; }
+	[CascadingParameter]
+	protected IActivatable Activateable { get; set; }
 
 	/// <summary>
 	/// The HTML element that will be rendered in the root by the component
 	/// By default, is a button
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Button.ClickAction)]
 	public string HtmlTag { get; set; } = "button";
 
 	/// <summary>
 	/// The button Type (Button, Submit, Refresh)
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Button.ClickAction)]
 	public ButtonType ButtonType { get; set; }
 
-	/// <summary>
-	/// If set to a URL, clicking the button will open the referenced document. Use Target to specify where
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Button.ClickAction)]
-	public string Href { get; set; }
-	/// <summary>
-	/// If set to a URL, clicking the button will open the referenced document. Use Target to specify where (Obsolete replaced by Href)
-	/// </summary>
-
-	[Obsolete("Use Href Instead.", false)]
-	[Parameter]
-	[Category(CategoryTypes.Button.ClickAction)]
-	public string Link
-	{
-		get => Href;
-		set => Href = value;
-	}
-
-	/// <summary>
-	/// The target attribute specifies where to open the link, if Link is specified. Possible values: _blank | _self | _parent | _top | <i>framename</i>
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Button.ClickAction)]
-	public string Target { get; set; }
-
 	/// <summary>
 	/// If true, the button will be disabled.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Button.Behavior)]
 	public bool Disabled { get; set; }
 
 	/// <summary>
-	/// If true, no drop-shadow will be used.
+	/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Button.Appearance)]
+	public int Elevation { set; get; } = 0;
-	public bool DisableElevation { get; set; }
 
 	/// <summary>
 	/// If true, disables ripple effect.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Button.Appearance)]
+	public bool CanRipple { get; set; }
-	public bool DisableRipple { get; set; }
 
 	/// <summary>
 	/// Command executed when the user clicks on an element.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Button.ClickAction)]
+	public ICommand? Command { get; set; }
-	public ICommand Command { get; set; }
 
 	/// <summary>
 	/// Command parameter.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Button.ClickAction)]
+	public object? CommandParameters { get; set; }
-	public object CommandParameter { get; set; }
 
-	/// <summary>
+	protected async Task OnClickHandler(MouseEventArgs e)
-	/// Button click event.
-	/// </summary>
-	[Parameter]
-	public EventCallback<MouseEventArgs> OnClick { get; set; }
-
-	protected async Task OnClickHandler(MouseEventArgs ev)
 	{
 		if (Disabled)
 			return;
-		await OnClick.InvokeAsync(ev);
-		if (Command?.CanExecute(CommandParameter) ?? false)
-		{
-			Command.Execute(CommandParameter);
-		}
-		Activateable?.Activate(this, ev);
-	}
 
-	protected override void OnInitialized()
+		await OnClick.InvokeAsync(e);
-	{
-		SetDefaultValues();
-	}
 
-	protected override void OnParametersSet()
+		if (Command?.CanExecute(CommandParameters) ?? false)
-	{
+			Command.Execute(CommandParameters);
-		//if params change, must set default values again
-		SetDefaultValues();
-	}
 
-	//Set the default value for HtmlTag, Link and Target 
+		Activateable?.Activate(this, e);
-	private void SetDefaultValues()
-	{
-		if (Disabled)
-		{
-			HtmlTag = "button";
-			Href = null;
-			Target = null;
-			return;
-		}
-
-		// Render an anchor element if Link property is set and is not disabled
-		if (!IsNullOrWhiteSpace(Href))
-		{
-			HtmlTag = "a";
-		}
 	}
 
 	protected ElementReference _elementReference;

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

@@ -7,13 +7,9 @@
 <Element @bind-Ref="@_elementReference"
             HtmlTag="@HtmlTag"
             Class="@Classname"
-            Style="@Style"
+            @attributes="CustomAttributes"
-            @attributes="UserAttributes"
             @onclick="OnClickHandler"
             type="@ButtonType.ToDescriptionString()"
-            href="@Href"
-            target="@Target"
-            rel="@(Target=="_blank"?"noopener":null)"
             disabled="@Disabled"
 			title="@Title">
     <span class="fab-label">

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

@@ -12,9 +12,7 @@ public partial class Fab : ButtonBase
 	  .AddClass($"fab-extended", !string.IsNullOrEmpty(Label))
 	  .AddClass($"fab-{Color.ToDescriptionString()}")
 	  .AddClass($"fab-size-{Size.ToDescriptionString()}")
-	  .AddClass($"ripple", !DisableRipple && !Disabled)
+	  .AddClass($"ripple", !CanRipple && !Disabled)
-	  .AddClass($"fab-disable-elevation", DisableElevation)
-	  .AddClass(Class)
 	.Build();
 
 	/// <summary>

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

@@ -7,13 +7,9 @@
 <Element @bind-Ref="@_elementReference"
             HtmlTag="@HtmlTag"
             Class="@Classname"
-            Style="@Style"
+            @attributes="CustomAttributes" 
-            @attributes="UserAttributes" 
             @onclick="OnClickHandler"
             type="@ButtonType.ToDescriptionString()" 
-            href="@Href" 
-            target="@Target"
-            rel="@(Target=="_blank"?"noopener":null)"
             disabled="@Disabled"
 			title="@Title">
     @if (!String.IsNullOrEmpty(Icon))

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

@@ -14,12 +14,11 @@ public partial class IconButton : ButtonBase
 	  .AddClass($"button-{Variant.ToDescriptionString()}", AsButton)
 	  .AddClass($"button-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}", AsButton)
 	  .AddClass($"button-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}", AsButton)
-	  .AddClass($"ripple", !DisableRipple)
+	  .AddClass($"ripple", !CanRipple)
-	  .AddClass($"ripple-icon", !DisableRipple && !AsButton)
+	  .AddClass($"ripple-icon", !CanRipple && !AsButton)
 	  .AddClass($"icon-button-size-{Size.ToDescriptionString()}", when: () => Size != Size.Medium)
 	  .AddClass($"icon-button-edge-{Edge.ToDescriptionString()}", when: () => Edge != Edge.False)
-	  .AddClass($"button-disable-elevation", DisableElevation)
+	  .AddClass(AdditionalClassList)
-	  .AddClass(Class)
 	.Build();
 
 	protected bool AsButton => Variant != Variant.Text;

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

@@ -15,7 +15,6 @@
                Edge="Edge"
                DisableRipple="DisableRipple"
                OnClick="Toggle"
-               Class="@Class"
+               Class="@AdditionalClassList"
-               Style="@Style"
                aria-pressed="@ariaPressedValue"
-               @attributes="UserAttributes" />
+               @attributes="CustomAttributes" />

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

@@ -2,11 +2,11 @@
 
 @inherits UIComponent
 
-<Element HtmlTag="div" Class="@Classname" Style="@Style" Tag="@Tag" UserAttributes="@UserAttributes">
+<Element HtmlTag="div" Class="@Classname" Tag="@Tag" UserAttributes="@CustomAttributes">
     @ChildContent
 </Element>
 
 @{
-    if(!UserAttributes.ContainsKey("role"))
+    if(!CustomAttributes.ContainsKey("role"))
-       UserAttributes.Add("role", "group");
+       CustomAttributes.Add("role", "group");
 }

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

@@ -17,7 +17,7 @@ public partial class ButtonGroup : UIComponent
      .AddClass($"button-group-horizontal", !VerticalAlign)
      .AddClass($"button-group-disable-elevation", DisableElevation)
      .AddClass($"button-group-rtl", RightToLeft)
-     .AddClass(Class)
+     .AddClass(AdditionalClassList)
    .Build();
 
 

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

@@ -2,6 +2,6 @@
 
 @inherits UIComponent
 
-<Paper @attributes="UserAttributes" Class="@Classname" Style="@Style" Outlined="@Outlined" Square="@Square" Elevation="@Elevation">
+<Paper @attributes="CustomAttributes" Class="@Classname" Outlined="@Outlined" Square="@Square" Elevation="@Elevation">
     @ChildContent
 </Paper>

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

@@ -8,7 +8,7 @@ public partial class Card : UIComponent
 {
 	protected string Classname =>
 	new CssBuilder("card")
-	  .AddClass(Class)
+	  .AddClass(AdditionalClassList)
 	.Build();
 
 	/// <summary>

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

@@ -2,6 +2,6 @@
 
 @inherits UIComponent
 
-<div @attributes="UserAttributes" class="@Classname" style="@Style">
+<div @attributes="CustomAttributes" class="@Classname">
     @ChildContent
 </div>

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

@@ -8,7 +8,7 @@ public partial class CardActions : UIComponent
 {
 	protected string Classname =>
 	new CssBuilder("card-actions")
-	  .AddClass(Class)
+	  .AddClass(AdditionalClassList)
 	.Build();
 
 	/// <summary>

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

@@ -2,6 +2,6 @@
 
 @inherits UIComponent
 
-<div @attributes="UserAttributes" class="@Classname" style="@Style">
+<div @attributes="CustomAttributes" class="@Classname">
     @ChildContent
 </div>

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

@@ -8,7 +8,7 @@ public partial class CardContent : UIComponent
 {
 	protected string Classname =>
 	new CssBuilder("card-content")
-	  .AddClass(Class)
+	  .AddClass(AdditionalClassList)
 	.Build();
 
 	/// <summary>

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

@@ -2,7 +2,7 @@
 
 @inherits UIComponent
 
-<div @attributes="UserAttributes" class="@Classname" style="@Style">
+<div @attributes="CustomAttributes" class="@Classname">
     @if (CardHeaderAvatar is not null)
     {
         <div class="card-header-avatar">@CardHeaderAvatar</div>

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

@@ -8,7 +8,7 @@ public partial class CardHeader : UIComponent
 {
    protected string Classname =>
    new CssBuilder("card-header")
-     .AddClass(Class)
+     .AddClass(AdditionalClassList)
    .Build();
 
    /// <summary>

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

@@ -2,4 +2,4 @@
 
 @inherits UIComponent
 
-<div @attributes="UserAttributes" title="@Title" class="@Classname" style="@StyleString"></div>
+<div @attributes="CustomAttributes" title="@Title" class="@Classname" style="@StyleString"></div>

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

@@ -8,12 +8,11 @@ public partial class CardMedia : UIComponent
 {
 	protected string StyleString =>
 		StyleBuilder.Default($"background-image:url(\"{Image}\");height: {Height}px;")
-			.AddStyle(this.Style)
 			.Build();
 
 	protected string Classname =>
 		new CssBuilder("card-media")
-			.AddClass(Class)
+			.AddClass(AdditionalClassList)
 			.Build();
 
 	/// <summary>

src/Connected.Components/Components/Carousel/Carousel.razor

@@ -4,7 +4,7 @@
 @implements IAsyncDisposable
 @typeparam TData
 
-<section @attributes="UserAttributes" aria-roledescription="carousel" class="@Classname" style="@Style">
+<section @attributes="CustomAttributes" aria-roledescription="carousel" class="@Classname">
     <CascadingValue Value="this">
 
         <SwipeArea OnSwipe="OnSwipe" Class="carousel-swipe">

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

@@ -11,7 +11,7 @@ public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TD
 	protected string Classname =>
 				new CssBuilder("carousel")
 					 .AddClass($"carousel-{(BulletsColor ?? _currentColor).ToDescriptionString()}")
-							 .AddClass(Class)
+							 .AddClass(AdditionalClassList)
 							 .Build();
 
 	protected string NavigationButtonsClassName =>

src/Connected.Components/Components/Carousel/CarouselItem.razor

@@ -4,7 +4,7 @@
 
 @if (IsVisible)
 {
-    <div @attributes="UserAttributes" class="@Classname" style="@Style">
+    <div @attributes="CustomAttributes" class="@Classname">
         @ChildContent
     </div>
 }

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

@@ -32,7 +32,7 @@ public partial class CarouselItem : UIComponent, IDisposable
 					 .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)
+					 .AddClass(AdditionalClassList)
 					 .Build();
 
 	[Parameter]

src/Connected.Components/Components/Chart/Chart.razor

@@ -3,7 +3,7 @@
 @inherits UIComponent
 
 <CascadingValue Value="@this" IsFixed="true">
-    <div @attributes="UserAttributes" class="@Classname" style="@Style" dir="ltr">
+    <div @attributes="CustomAttributes" class="@Classname" dir="ltr">
         @if (ChartType == ChartType.Donut)
         {
             <Donut InputData="@InputData" @bind-SelectedIndex="@SelectedIndex" InputLabels="@InputLabels"></Donut>

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

@@ -38,7 +38,7 @@ public partial class Chart : UIComponent
 	protected string Classname =>
 	new CssBuilder("chart")
 		.AddClass($"chart-legend-{ConvertLegendPosition(LegendPosition).ToDescriptionString()}")
-	  .AddClass(Class)
+	  .AddClass(AdditionalClassList)
 	.Build();
 
 	[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }

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

@@ -2,7 +2,7 @@
 @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="CustomAttributes" class="chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
     <g class="charts-grid">
         <g class="charts-gridlines-yaxis">
             @foreach (var horizontalLine in _horizontalLines)

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

@@ -2,7 +2,7 @@
 @using System.Globalization
 @inherits Chart
 
-<svg @attributes="UserAttributes" class="chart-donut" width="@ParentWidth" height="@ParentHeight" viewBox="0 0 42 42">
+<svg @attributes="CustomAttributes" 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())

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

@@ -2,7 +2,7 @@
 @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="CustomAttributes" class="chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
     <g class="charts-grid">
         <g class="charts-gridlines-yaxis">
             @foreach (var horizontalLine in _horizontalLines)

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

@@ -2,7 +2,7 @@
 @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);">
+<svg @attributes="CustomAttributes" 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())
     {

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

@@ -3,7 +3,7 @@
 
 @if (ChartParent?.ChartOptions.DisableLegend != true)
 {
-    <div @attributes="UserAttributes" class="chart-legend">
+    <div @attributes="CustomAttributes" class="chart-legend">
         @foreach (var item in Data)
         {
             <div class="chart-legend-item" @onclick=@(()=>{ if (ChartParent!=null) { ChartParent.SelectedIndex=item.Index; }}) @onclick:stopPropagation=@(ChartParent!=null)>

src/Connected.Components/Components/CheckBox/CheckBox.razor

@@ -2,12 +2,12 @@
 @inherits BooleanInput<T>
 @typeparam T
 
-<InputControl Class="@Classname" Style="@Style" Error="@HasErrors" ErrorText="@GetErrorText()" Required="@Required">
+<InputControl Class="@Classname" Error="@HasErrors" ErrorText="@GetErrorText()" Required="@Required">
     <InputContent>
         <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="CustomAttributes" type="checkbox" class="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))

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

@@ -11,7 +11,7 @@ public partial class CheckBox<T> : BooleanInput<T>
 {
 	protected string Classname =>
 	new CssBuilder("input-control-boolean-input")
-		.AddClass(Class)
+		.AddClass(AdditionalClassList)
 		.Build();
 
 	protected string LabelClassname =>

src/Connected.Components/Components/Chip/Chip.razor

@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div tabindex="0" @attributes="UserAttributes" class="@Classname" style="@Style" @onclick="@OnClickHandler">
+<div tabindex="0" @attributes="CustomAttributes" class="@Classname" @onclick="@OnClickHandler">
     @if (!String.IsNullOrEmpty(Avatar))
     {
         <Avatar Class="@AvatarClass" Color="@Color">

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

@@ -25,7 +25,7 @@ public partial class Chip : UIComponent, IDisposable
 	  .AddClass("chip-label", Label)
 	  .AddClass("disabled", Disabled)
 	  .AddClass("chip-selected", IsSelected)
-	  .AddClass(Class)
+	  .AddClass(AdditionalClassList)
 	.Build();
 
 	//Cannot test the get variant (last line)

src/Connected.Components/Components/ChipSet/ChipSet.razor

@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div @attributes="UserAttributes" class="@Classname" style="@Style" >
+<div @attributes="CustomAttributes" class="@Classname">
     <CascadingValue IsFixed="true" Value="this">
         @ChildContent
     </CascadingValue>

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

@@ -9,7 +9,7 @@ public partial class ChipSet : UIComponent, IDisposable
 
    protected string Classname =>
    new CssBuilder("chipset")
-     .AddClass(Class)
+     .AddClass(AdditionalClassList)
    .Build();
 
    /// <summary>

src/Connected.Components/Components/Collapse/Collapse.razor

@@ -2,7 +2,7 @@
 @inherits UIComponent
 @using System.Globalization;
 
-<div @onanimationend="EventUtil.AsNonRenderingEventHandler(AnimationEnd)" @attributes="UserAttributes" class="@Classname" style="@Stylename">
+<div @onanimationend="EventUtil.AsNonRenderingEventHandler(AnimationEnd)" @attributes="CustomAttributes" class="@Classname" style="@Stylename">
     <div @ref="_wrapper" class="collapse-wrapper">
         <div class="collapse-wrapper-inner">
             @ChildContent

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

@@ -23,7 +23,6 @@ public partial class Collapse : UIComponent
 		.AddStyle("height", "auto", _state == CollapseState.Entered)
 		.AddStyle("height", _height.ToPx(), _state is CollapseState.Entering or CollapseState.Exiting)
 		.AddStyle("animation-duration", $"{CalculatedAnimationDuration.ToString("#.##", CultureInfo.InvariantCulture)}s", _state == CollapseState.Entering)
-		.AddStyle(Style)
 		.Build();
 
 	protected string Classname =>
@@ -31,7 +30,7 @@ public partial class Collapse : UIComponent
 		.AddClass($"collapse-entering", _state == CollapseState.Entering)
 		.AddClass($"collapse-entered", _state == CollapseState.Entered)
 		.AddClass($"collapse-exiting", _state == CollapseState.Exiting)
-		.AddClass(Class)
+		.AddClass(AdditionalClassList)
 		.Build();
 
 	/// <summary>

src/Connected.Components/Components/Container/Container.razor

@@ -2,6 +2,6 @@
 
 @inherits UIComponent
 
-<div @attributes="UserAttributes" class="@Classname" style="@Style">
+<div @attributes="CustomAttributes" class="@Classname">
     @ChildContent
 </div>

src/Connected.Components/Components/Container/Container.razor.cs

@@ -10,7 +10,7 @@ public partial class Container : UIComponent
 	new CssBuilder("container")
 	  .AddClass($"container-fixed", Fixed)
 	  .AddClass($"container-maxwidth-{MaxWidth.ToDescriptionString()}", !Fixed)
-	  .AddClass(Class)
+	  .AddClass(AdditionalClassList)
 	.Build();
 
 	/// <summary>

src/Connected.Components/Components/DataGrid/Column.cs

@@ -155,7 +155,7 @@ public partial class Column<T> : UIComponent
            .AddClass("table-cell-hide", HideSmall)
            .AddClass("sticky-left", StickyLeft)
            .AddClass("sticky-right", StickyRight)
-           .AddClass(Class)
+           .AddClass(AdditionalClassList)
        .Build();
 
    internal string cellClassname;
@@ -169,7 +169,7 @@ public partial class Column<T> : UIComponent
    internal string footerClassname =>
        new CssBuilder("table-cell")
            .AddClass("table-cell-hide", HideSmall)
-           .AddClass(Class)
+           .AddClass(AdditionalClassList)
        .Build();
 
    internal bool grouping;

src/Connected.Components/Components/DataGrid/DataGrid.razor

@@ -6,7 +6,7 @@
 <CascadingValue IsFixed="true" Value="this">@Columns</CascadingValue>
 
 <CascadingValue IsFixed="true" Value="this">
-    <div @attributes="UserAttributes" class="@_classname" style="@_style">
+    <div @attributes="CustomAttributes" class="@_classname" style="@_style">
         @if (Items != null || ServerData != null)
         {
             @if (ToolBarContent != null)

src/Connected.Components/Components/DataGrid/DataGrid.razor.cs

@@ -45,14 +45,13 @@ public partial class DataGrid<T> : UIComponent
 			  .AddClass("table-sticky-header", FixedHeader)
 			  .AddClass("table-sticky-footer", FixedFooter)
 			  .AddClass($"elevation-{Elevation}", !Outlined)
-			 .AddClass(Class)
+			 .AddClass(AdditionalClassList)
 		  .Build();
 
 	 protected string _style =>
 		  new StyleBuilder()
 				.AddStyle("overflow-x", "auto", when: HorizontalScrollbar || ColumnResizeMode == ResizeMode.Container)
 				.AddStyle("position", "relative", when: hasStickyColumns)
-				.AddStyle(Style)
 		  .Build();
 
 	 protected string _tableStyle =>

src/Connected.Components/Components/DataGrid/DataGridPager.razor

@@ -2,7 +2,7 @@
 @inherits UIComponent
 @typeparam T
 
-<ToolBar @attributes="UserAttributes" Class="@Classname" Style="@Style">
+<ToolBar @attributes="CustomAttributes" Class="@Classname">
     <div class="table-pagination-spacer"></div>
     @if (!DisableRowsPerPage)
     {

src/Connected.Components/Components/DataGrid/DataGridPager.razor.cs

@@ -50,7 +50,7 @@ public partial class DataGridPager<T> : UIComponent, IDisposable
 
    protected string Classname =>
       new CssBuilder("table-pagination-toolbar")
-      .AddClass(Class)
+      .AddClass(AdditionalClassList)
       .Build();
 
    private async Task SetRowsPerPageAsync(string size)

src/Connected.Components/Components/DataGrid/FilterHeaderCell.razor

@@ -2,7 +2,7 @@
 @inherits UIComponent
 @typeparam T
 
-<th scope="col" class="@_classname" style="@_style" colspan="@Column?.HeaderColSpan" @attributes="@UserAttributes">
+<th scope="col" class="@_classname" style="@_style" colspan="@Column?.HeaderColSpan" @attributes="@CustomAttributes">
     @if (null != Column && Column.filterable)
     {
         @if (Column.FilterTemplate != null)

src/Connected.Components/Components/DataGrid/FilterHeaderCell.razor.cs

@@ -17,14 +17,13 @@ public partial class FilterHeaderCell<T> : UIComponent
    private string _classname =>
        new CssBuilder(Column?.HeaderClass)
            .AddClass(Column?.headerClassname)
-           .AddClass(Class)
+           .AddClass(AdditionalClassList)
            .AddClass("filter-header-cell")
        .Build();
 
    private string _style =>
        new StyleBuilder()
            .AddStyle(Column?.HeaderStyle)
-           .AddStyle(Style)
        .Build();
 
    private string _valueString;

src/Connected.Components/Components/DataGrid/FooterCell.razor

@@ -4,7 +4,7 @@
 
 @if (Column is not null)
 {
-    <td class="@_classname" style="@_style" colspan="@Column.FooterColSpan" @attributes="@UserAttributes">
+    <td class="@_classname" style="@_style" colspan="@Column.FooterColSpan" @attributes="@CustomAttributes">
         @if (Column.AggregateDefinition != null)
         {
             @Column.AggregateDefinition?.GetValue(Column.Field, items)

src/Connected.Components/Components/DataGrid/FooterCell.razor.cs

@@ -19,12 +19,11 @@ public partial class FooterCell<T> : UIComponent
        new CssBuilder("footer-cell")
            .AddClass(Column?.FooterClass)
            .AddClass(Column?.footerClassname)
-           .AddClass(Class)
+           .AddClass(AdditionalClassList)
        .Build();
    private string _style =>
        new StyleBuilder()
            .AddStyle(Column?.FooterStyle)
-           .AddStyle(Style)
            .AddStyle("font-weight", "600")
        .Build();
 

src/Connected.Components/Components/DataGrid/HeaderCell.razor

@@ -4,13 +4,13 @@
 
 @if (IsOnlyHeader)
 {
-    <th scope="col" class="table cell @_classname" style="" @attributes="@UserAttributes">
+    <th scope="col" class="table cell @_classname" style="" @attributes="@CustomAttributes">
         @ChildContent
     </th>
 }
 else if (Column != null && !Column.Hidden)
 {
-    <th @ref=@_headerElement scope="col" class="@_classname" style="@_style" colspan="@Column.HeaderColSpan" @attributes="@UserAttributes">
+    <th @ref=@_headerElement scope="col" class="@_classname" style="@_style" colspan="@Column.HeaderColSpan" @attributes="@CustomAttributes">
         <span class="column-header">
             @if (sortable)
             {

src/Connected.Components/Components/DataGrid/HeaderCell.razor.cs

@@ -33,20 +33,18 @@ public partial class HeaderCell<T> : UIComponent, IDisposable
    private string _classname =>
        new CssBuilder(Column?.HeaderClass)
            .AddClass(Column?.headerClassname)
-           .AddClass(Class)
+           .AddClass(AdditionalClassList)
        .Build();
 
    private string _style =>
        new StyleBuilder()
            .AddStyle(Column?.HeaderStyle)
            .AddStyle("width", _width?.ToPx(), when: _width.HasValue)
-           .AddStyle(Style)
        .Build();
 
    private string _resizerStyle =>
        new StyleBuilder()
            .AddStyle("height", _resizerHeight?.ToPx() ?? "100%")
-           .AddStyle(Style)
        .Build();
 
    private string _resizerClass =>

src/Connected.Components/Components/DataGrid/Row.razor

@@ -1,6 +1,6 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<tr class="@Classname" style="@Style" @attributes="@UserAttributes">
+<tr class="@Classname" @attributes="@CustomAttributes">
     @ChildContent
 </tr>

src/Connected.Components/Components/DataGrid/Row.razor.cs

@@ -12,5 +12,5 @@ public partial class Row : UIComponent
 	[Parameter] public RenderFragment ChildContent { get; set; }
 
 	protected string Classname => new CssBuilder("table-row")
-		 .AddClass(Class).Build();
+		 .AddClass(AdditionalClassList).Build();
 }

src/Connected.Components/Components/DatePicker/DateRangePicker.razor

@@ -10,7 +10,7 @@
                           ErrorText="@ErrorText" Disabled="@Disabled" Margin="@Margin" Required="@Required"
                           @onclick="() => { if (!Editable) ToggleState(); }" ForId="@FieldId">
                <InputContent>
-                   <RangeInput @ref="_rangeInput" @attributes="UserAttributes" InputType="@InputType.Text" Class="@PickerInputClass" Style="@Style" Variant="@Variant" ReadOnly="@(!Editable)"
+                   <RangeInput @ref="_rangeInput" @attributes="CustomAttributes" InputType="@InputType.Text" Class="@PickerInputClass" Variant="@Variant" ReadOnly="@(!Editable)"
                                    @bind-Value="@RangeText" Disabled="@Disabled" Adornment="@Adornment" AdornmentIcon="@AdornmentIcon" AdornmentColor="@AdornmentColor" IconSize="@IconSize" OnAdornmentClick="ToggleState"
                                    Required="@Required" RequiredError="@RequiredError" Error="@HasError" ErrorText="@ErrorText" Margin="@Margin" AdornmentAriaLabel="@AdornmentAriaLabel"/>
                </InputContent>

src/Connected.Components/Components/Dialog/Dialog.razor

@@ -7,7 +7,7 @@
 {
     <FocusTrap DefaultFocus="DefaultFocus">
 
-        <div @attributes="UserAttributes" class="@ContentClass" style="@ContentStyle">
+        <div @attributes="CustomAttributes" class="@ContentClass" style="@ContentStyle">
             @DialogContent
         </div>
 

src/Connected.Components/Components/Dialog/Dialog.razor.cs

@@ -133,8 +133,7 @@ public partial class Dialog : UIComponent
          Close();
       var parameters = new DialogParameters()
       {
-         [nameof(Class)] = Class,
+         [nameof(AdditionalClassList)] = AdditionalClassList,
-         [nameof(Style)] = Style,
          [nameof(Tag)] = Tag,
          [nameof(TitleContent)] = TitleContent,
          [nameof(DialogContent)] = DialogContent,

src/Connected.Components/Components/Dialog/DialogInstance.razor

@@ -1,9 +1,9 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div @attributes="UserAttributes" id="@_elementId" class="dialog-container @Position">
+<div @attributes="CustomAttributes" id="@_elementId" class="dialog-container @Position">
     <Overlay Visible="true" OnClick="HandleBackgroundClick" Class="overlay-dialog" DarkBackground="true" />
-    <div id="_@Id.ToString("N")" role="dialog" class="@Classname" style="@Style">
+    <div id="_@Id.ToString("N")" role="dialog" class="@Classname">
         @if (!NoHeader)
         {
             <div class="dialog-title">

src/Connected.Components/Components/Dialog/DialogInstance.razor.cs

@@ -172,7 +172,7 @@ public partial class DialogInstance : UIComponent, IDisposable
 		FullScreen = SetFulScreen();
 		DisableBackdropClick = SetDisableBackdropClick();
 		CloseOnEscapeKey = SetCloseOnEscapeKey();
-		Class = Classname;
+		//AdditionalClassList = Classname;
 	}
 
 	private string SetPosition()
@@ -241,7 +241,7 @@ public partial class DialogInstance : UIComponent, IDisposable
 			.AddClass("dialog-width-full", FullWidth && !FullScreen)
 			.AddClass("dialog-fullscreen", FullScreen)
 			.AddClass("dialog-rtl", RightToLeft)
-			.AddClass(_dialog?.Class)
+			.AddClass(_dialog?.AdditionalClassList)
 		.Build();
 
 	private bool SetHideHeader()
@@ -310,8 +310,7 @@ public partial class DialogInstance : UIComponent, IDisposable
 		if (dialog == null)
 			return;
 		_dialog = dialog;
-		Class = dialog.Class;
+		//AdditionalClassList = dialog.AdditionalClassList;
-		Style = dialog.Style;
 		TitleContent = dialog.TitleContent;
 		StateHasChanged();
 	}

src/Connected.Components/Components/Divider/Divider.razor

@@ -1,4 +1,4 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<hr @attributes="UserAttributes" class="@Classname" style="@Style"/>
+<hr @attributes="CustomAttributes" class="@Classname"/>

src/Connected.Components/Components/Divider/Divider.razor.cs

@@ -13,7 +13,7 @@ public partial class Divider : UIComponent
      .AddClass($"divider-light", Light)
      .AddClass($"divider-vertical", Vertical)
      .AddClass($"divider-{DividerType.ToDescriptionString()}", when: () => DividerType != DividerType.FullWidth)
-     .AddClass(Class)
+     .AddClass(AdditionalClassList)
    .Build();
 
    /// <summary>

src/Connected.Components/Components/Drawer/Drawer.razor

@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<aside @onmouseenter="OnMouseEnter" @onmouseleave="OnMouseLeave" @attributes="UserAttributes" class="@Classname" style="@Stylename">
+<aside @onmouseenter="OnMouseEnter" @onmouseleave="OnMouseLeave" @attributes="CustomAttributes" class="@Classname" style="@Stylename">
     <div @ref="_contentRef" class="drawer-content">
         <CascadingValue Value="this" IsFixed="true">
             @ChildContent

src/Connected.Components/Components/Drawer/Drawer.razor.cs

@@ -33,7 +33,7 @@ public partial class Drawer : UIComponent, IDisposable, INavigationEventReceiver
 	  .AddClass($"theme-{Color.ToDescriptionString()}", Color != ThemeColor.Default)
 	  .AddClass($"elevation-{Elevation}")
 	  .AddClass($"drawer-{Variant.ToDescriptionString()}")
-	  .AddClass(Class)
+	  .AddClass(AdditionalClassList)
 	.Build();
 
 	protected string OverlayClass =>
@@ -54,7 +54,6 @@ public partial class Drawer : UIComponent, IDisposable, INavigationEventReceiver
 			string.IsNullOrWhiteSpace(Height) ? _height.ToPx() : Height,
 			Anchor == Anchor.Bottom || Anchor == Anchor.Top)
 		.AddStyle("visibility", "hidden", string.IsNullOrWhiteSpace(Height) && _height == 0 && (Anchor == Anchor.Bottom || Anchor == Anchor.Top))
-		.AddStyle(Style)
 	.Build();
 
 	[Inject] public IBreakpointService Breakpointistener { get; set; }

src/Connected.Components/Components/Drawer/DrawerContainer.razor

@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div @attributes="UserAttributes" style="@Stylename" class="@Classname">
+<div @attributes="CustomAttributes" style="@Stylename" class="@Classname">
     <CascadingValue Value="this" IsFixed="true">
         @ChildContent
     </CascadingValue>

src/Connected.Components/Components/Drawer/DrawerContainer.razor.cs

@@ -14,7 +14,7 @@ public partial class DrawerContainer : UIComponent
 	new CssBuilder()
 		.AddClass(GetDrawerClass(FindLeftDrawer()))
 		.AddClass(GetDrawerClass(FindRightDrawer()))
-		.AddClass(Class)
+		.AddClass(AdditionalClassList)
 	.Build();
 
 	protected string Stylename =>
@@ -23,7 +23,6 @@ public partial class DrawerContainer : UIComponent
 		.AddStyle("--mud-drawer-width-right", GetDrawerWidth(FindRightDrawer()), !string.IsNullOrEmpty(GetDrawerWidth(FindRightDrawer())))
 		.AddStyle("--mud-drawer-width-mini-left", GetMiniDrawerWidth(FindLeftMiniDrawer()), !string.IsNullOrEmpty(GetMiniDrawerWidth(FindLeftMiniDrawer())))
 		.AddStyle("--mud-drawer-width-mini-right", GetMiniDrawerWidth(FindRightMiniDrawer()), !string.IsNullOrEmpty(GetMiniDrawerWidth(FindRightMiniDrawer())))
-		.AddStyle(Style)
 	.Build();
 
 	[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }

src/Connected.Components/Components/Drawer/DrawerHeader.razor

@@ -3,13 +3,13 @@
 
 @if (LinkToIndex)
 {
-    <a @attributes="UserAttributes" class="@Classname" style="@Style" href="/">
+    <a @attributes="CustomAttributes" class="@Classname" href="/">
         @ChildContent
     </a>
 }
 else
 {
-    <div @attributes="UserAttributes" class="@Classname" style="@Style">
+    <div @attributes="CustomAttributes" class="@Classname">
         @ChildContent
     </div>
 }

src/Connected.Components/Components/Drawer/DrawerHeader.razor.cs

@@ -8,7 +8,7 @@ public partial class DrawerHeader : UIComponent
 	protected string Classname =>
 	new CssBuilder("drawer-header")
 		.AddClass($"drawer-header-dense", Dense)
-	  .AddClass(Class)
+	  .AddClass(AdditionalClassList)
 	.Build();
 
 	/// <summary>

src/Connected.Components/Components/DropZone/DropContainer.razor

@@ -3,8 +3,7 @@
 @typeparam T
 
 <CascadingValue Value="this" IsFixed="true">
-	<div @attributes="UserAttributes"
+	<div @attributes="CustomAttributes"
-		 style="@Style"
 		 class="@Classname">
 		@ChildContent
 	</div>

src/Connected.Components/Components/DropZone/DropContainer.razor.cs

@@ -149,7 +149,7 @@ public partial class DropContainer<T> : UIComponent
 
 	protected string Classname =>
 	new CssBuilder("drop-container")
-		.AddClass(Class)
+		.AddClass(AdditionalClassList)
 		.Build();
 
 	/// <summary>

src/Connected.Components/Components/DropZone/DropZone.razor

@@ -3,12 +3,12 @@
 @typeparam T
 
 
-<div class="@Classname" style="@Style"
+<div class="@Classname"
 	 id="@($"drop-zone-{_id}")"
 	 @ondrop="HandleDrop"
 	 @ondragenter="HandleDragEnter"
 	 @ondragleave="HandleDragLeave"
-	 @attributes="UserAttributes">
+	 @attributes="CustomAttributes">
 
 	@ChildContent
 

src/Connected.Components/Components/DropZone/DropZone.razor.cs

@@ -184,7 +184,7 @@ public partial class DropZone<T> : UIComponent, IDisposable
 			.AddClass(CanDropClass ?? Container?.CanDropClass, Container?.TransactionInProgress() == true && Container.GetTransactionOrignZoneIdentiifer() != Identifier && _canDrop == true && (_dragCounter > 0 || GetApplyDropClassesOnDragStarted() == true))
 			.AddClass(NoDropClass ?? Container?.NoDropClass, Container?.TransactionInProgress() == true && Container.GetTransactionOrignZoneIdentiifer() != Identifier && _canDrop == false && (_dragCounter > 0 || GetApplyDropClassesOnDragStarted() == true))
 			.AddClass(GetDragginClass(), _dragInProgress == true)
-			.AddClass(Class)
+			.AddClass(AdditionalClassList)
 			.Build();
 
 	protected string PlaceholderClassname =>

src/Connected.Components/Components/DropZone/DynamicDropItem.razor

@@ -2,8 +2,8 @@
 @inherits UIComponent
 @typeparam T
 
-<div class="@Classname" style="@Style"
+<div class="@Classname"
-	 @attributes="UserAttributes"
+	 @attributes="CustomAttributes"
 	 draggable="@(Disabled == false ? "true" : "false")"
 	 @ondragstart="DragStarted"
 	 @ondragend="DragEnded"

src/Connected.Components/Components/DropZone/DynamicDropItem.razor.cs

@@ -137,7 +137,7 @@ public partial class DynamicDropItem<T> : UIComponent
    new CssBuilder("drop-item")
        .AddClass(DraggingClass, _dragOperationIsInProgress == true)
        .AddClass(DisabledClass, Disabled == true)
-       .AddClass(Class)
+       .AddClass(AdditionalClassList)
        .Build();
 
 }

src/Connected.Components/Components/Element/Element.cs

@@ -46,7 +46,7 @@ public class Element : UIComponent
       builder.OpenElement(0, HtmlTag);
 
       //splatted attributes
-      foreach (var attribute in UserAttributes)
+      foreach (var attribute in CustomAttributes)
       {
          // checking if the value is null, we can get rid of null event handlers
          // for example `@onmouseenter=@(IsOpen ? HandleEnter : null)`
@@ -56,9 +56,7 @@ public class Element : UIComponent
             builder.AddAttribute(1, attribute.Key, attribute.Value);
       }
       //Class
-      builder.AddAttribute(2, "class", Class);
+      builder.AddAttribute(2, "class", AdditionalClassList);
-      //Style
-      builder.AddAttribute(3, "style", Style);
 
       // StopPropagation
       // the order matters. This has to be before content is added

src/Connected.Components/Components/ExpansionPanel/ExpansionPanel.razor

@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div @attributes="UserAttributes" class="@Classname" style="@Style">
+<div @attributes="CustomAttributes" class="@Classname">
     <div class="expand-panel-header" @onclick="ToggleExpansion">
         <div class="expand-panel-text">
             @if (TitleContent != null)

src/Connected.Components/Components/ExpansionPanel/ExpansionPanel.razor.cs

@@ -19,7 +19,7 @@ public partial class ExpansionPanel : UIComponent, IDisposable
 		.AddClass("disabled", Disabled)
 		.AddClass($"elevation-{Parent?.Elevation.ToString()}")
 		.AddClass($"expand-panel-border", Parent?.DisableBorders != true)
-		.AddClass(Class)
+		.AddClass(AdditionalClassList)
 	.Build();
 
 	protected string PanelContentClassname =>

src/Connected.Components/Components/ExpansionPanel/ExpansionPanels.razor

@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div @attributes="UserAttributes" class="@Classname" style="@Style">
+<div @attributes="CustomAttributes" class="@Classname">
     <CascadingValue Value="this" IsFixed="true">
         @ChildContent
     </CascadingValue>

src/Connected.Components/Components/ExpansionPanel/ExpansionPanels.razor.cs

@@ -10,7 +10,7 @@ public partial class ExpansionPanels : UIComponent
 	protected string Classname =>
 	new CssBuilder("expansion-panels")
 		.AddClass($"expansion-panels-square", Square)
-		.AddClass(Class)
+		.AddClass(AdditionalClassList)
 	.Build();
 
 	/// <summary>

src/Connected.Components/Components/Field/Field.razor

@@ -2,7 +2,7 @@
 @inherits UIComponent
 
 <InputControl Label="@Label" HelperText="@HelperText" Variant="@Variant" FullWidth="@FullWidth" Margin="@Margin" Disabled="@Disabled"
-                 Class="@InputControlClassname" Error="@Error" ErrorText="@ErrorText" Style="@Style" @attributes="UserAttributes" ForId="@FieldId">
+                 Class="@InputControlClassname" Error="@Error" ErrorText="@ErrorText" @attributes="CustomAttributes" ForId="@FieldId">
     <InputContent>
         <div class="@Classname">
             @if (Adornment == Adornment.Start)

src/Connected.Components/Components/Field/Field.razor.cs

@@ -38,7 +38,7 @@ public partial class Field : UIComponent
 
    protected string InputControlClassname =>
       new CssBuilder("field")
-         .AddClass(Class)
+         .AddClass(AdditionalClassList)
          .Build();
 
    /// <summary>

src/Connected.Components/Components/FileUpload/FileUpload.razor

@@ -3,9 +3,9 @@
 @namespace Connected.Components
 @using Microsoft.AspNetCore.Components.Forms
 
-<InputControl Class="@Classname" Style="@Style" Error="HasErrors" ErrorText="@GetErrorText()" Required="@Required">
+<InputControl Class="@Classname" Error="HasErrors" ErrorText="@GetErrorText()" Required="@Required">
     <InputContent>
-        <InputFile OnChange="OnChange" id="@_id" class="@InputClass" style="@InputStyle" hidden="@(Hidden ? "" : null)" multiple="@(typeof(T) == typeof(IReadOnlyList<IBrowserFile>) ? "" : null)" accept="@Accept" @attributes="UserAttributes" />
+        <InputFile OnChange="OnChange" id="@_id" class="@InputClass" style="@InputStyle" hidden="@(Hidden ? "" : null)" multiple="@(typeof(T) == typeof(IReadOnlyList<IBrowserFile>) ? "" : null)" accept="@Accept" @attributes="CustomAttributes" />
         @if (ButtonTemplate != null)
         {
             @ButtonTemplate(_id)

src/Connected.Components/Components/FileUpload/FileUpload.razor.cs

@@ -18,7 +18,7 @@ public partial class FileUpload<T> : FormComponent<T, string>
 
    protected string Classname =>
       new CssBuilder("file-upload")
-      .AddClass(Class)
+      .AddClass(AdditionalClassList)
       .Build();
 
    /// <summary>

src/Connected.Components/Components/FocusTrap/FocusTrap.razor

@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div @ref="_root" @attributes="UserAttributes" class="@Classname" style="@Style" @onkeydown="OnRootKeyDown" @onkeyup="OnRootKeyUp" @onfocus="OnRootFocusAsync" tabindex="-1">
+<div @ref="_root" @attributes="CustomAttributes" class="@Classname" @onkeydown="OnRootKeyDown" @onkeyup="OnRootKeyUp" @onfocus="OnRootFocusAsync" tabindex="-1">
 
     <div class="fixed pointer-events-none"
          tabindex="@TrapTabIndex"