From fe1ef0fbc981852d035b45024aa7e12413783a12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matija=20Ko=C5=BEelj?= <matija.kozelj@tompit.net>
Date: Mon, 19 Dec 2022 14:44:52 +0100
Subject: [PATCH] [WIP]: Save semi-refactored state for transfer

---
 .../Pages/AlertShowcase.razor                 |   3 +-
 .../Pages/AppBarShowcase.razor                |   7 +
 .../Components/Alert/Alert.razor              |  17 +-
 .../Components/Alert/Alert.razor.cs           | 160 +++++----
 .../Components/AppBar/AppBar.razor            |   8 +-
 .../Components/AppBar/AppBar.razor.cs         |  75 +++--
 .../Autocomplete/Autocomplete.razor           |   4 +-
 .../Autocomplete/Autocomplete.razor.cs        |   1 -
 .../Components/Avatar/Avatar.razor            |   8 +-
 .../Components/Avatar/Avatar.razor.cs         |  99 +++---
 .../Components/Avatar/AvatarGroup.razor       |   4 +-
 .../Components/Avatar/AvatarGroup.razor.cs    |  45 ++-
 .../Components/Avatar/AvatarKind.cs           |  14 +
 .../Components/Badge/Badge.razor              |   4 +-
 .../Components/Badge/Badge.razor.cs           |   4 +-
 .../Components/Breadcrumbs/Breadcrumbs.razor  |   2 +-
 .../Breadcrumbs/Breadcrumbs.razor.cs          |   2 +-
 .../Components/Button/Button.razor            |  34 +-
 .../Components/Button/Button.razor.cs         |  77 +----
 .../Components/Button/ButtonBase.cs           |  96 ++----
 .../Components/Button/Fab.razor               |   6 +-
 .../Components/Button/Fab.razor.cs            |   4 +-
 .../Components/Button/IconButton.razor        |   8 +-
 .../Components/Button/IconButton.razor.cs     |   7 +-
 .../Components/Button/ToggleIconButton.razor  |   5 +-
 .../Components/ButtonGroup/ButtonGroup.razor  |   6 +-
 .../ButtonGroup/ButtonGroup.razor.cs          |   2 +-
 .../Components/Card/Card.razor                |   2 +-
 .../Components/Card/Card.razor.cs             |   2 +-
 .../Components/Card/CardActions.razor         |   2 +-
 .../Components/Card/CardActions.razor.cs      |   2 +-
 .../Components/Card/CardContent.razor         |   2 +-
 .../Components/Card/CardContent.razor.cs      |   2 +-
 .../Components/Card/CardHeader.razor          |   2 +-
 .../Components/Card/CardHeader.razor.cs       |   2 +-
 .../Components/Card/CardMedia.razor           |   2 +-
 .../Components/Card/CardMedia.razor.cs        |   3 +-
 .../Components/Carousel/Carousel.razor        |   2 +-
 .../Components/Carousel/Carousel.razor.cs     |   2 +-
 .../Components/Carousel/CarouselItem.razor    |   2 +-
 .../Components/Carousel/CarouselItem.razor.cs |   2 +-
 .../Components/Chart/Chart.razor              |   2 +-
 .../Components/Chart/Chart.razor.cs           |   2 +-
 .../Components/Chart/Charts/Bar.razor         |   2 +-
 .../Components/Chart/Charts/Donut.razor       |   2 +-
 .../Components/Chart/Charts/Line.razor        |   2 +-
 .../Components/Chart/Charts/Pie.razor         |   2 +-
 .../Components/Chart/Parts/Legend.razor       |   2 +-
 .../Components/CheckBox/CheckBox.razor        |   4 +-
 .../Components/CheckBox/CheckBox.razor.cs     |   2 +-
 .../Components/Chip/Chip.razor                |   2 +-
 .../Components/Chip/Chip.razor.cs             |   2 +-
 .../Components/ChipSet/ChipSet.razor          |   2 +-
 .../Components/ChipSet/ChipSet.razor.cs       |   2 +-
 .../Components/Collapse/Collapse.razor        |   2 +-
 .../Components/Collapse/Collapse.razor.cs     |   3 +-
 .../Components/Container/Container.razor      |   2 +-
 .../Components/Container/Container.razor.cs   |   2 +-
 .../Components/DataGrid/Column.cs             |   4 +-
 .../Components/DataGrid/DataGrid.razor        |   2 +-
 .../Components/DataGrid/DataGrid.razor.cs     |   3 +-
 .../Components/DataGrid/DataGridPager.razor   |   2 +-
 .../DataGrid/DataGridPager.razor.cs           |   2 +-
 .../DataGrid/FilterHeaderCell.razor           |   2 +-
 .../DataGrid/FilterHeaderCell.razor.cs        |   3 +-
 .../Components/DataGrid/FooterCell.razor      |   2 +-
 .../Components/DataGrid/FooterCell.razor.cs   |   3 +-
 .../Components/DataGrid/HeaderCell.razor      |   4 +-
 .../Components/DataGrid/HeaderCell.razor.cs   |   4 +-
 .../Components/DataGrid/Row.razor             |   2 +-
 .../Components/DataGrid/Row.razor.cs          |   2 +-
 .../DatePicker/DateRangePicker.razor          |   2 +-
 .../Components/Dialog/Dialog.razor            |   2 +-
 .../Components/Dialog/Dialog.razor.cs         |   3 +-
 .../Components/Dialog/DialogInstance.razor    |   4 +-
 .../Components/Dialog/DialogInstance.razor.cs |   7 +-
 .../Components/Divider/Divider.razor          |   2 +-
 .../Components/Divider/Divider.razor.cs       |   2 +-
 .../Components/Drawer/Drawer.razor            |   2 +-
 .../Components/Drawer/Drawer.razor.cs         |   3 +-
 .../Components/Drawer/DrawerContainer.razor   |   2 +-
 .../Drawer/DrawerContainer.razor.cs           |   3 +-
 .../Components/Drawer/DrawerHeader.razor      |   4 +-
 .../Components/Drawer/DrawerHeader.razor.cs   |   2 +-
 .../Components/DropZone/DropContainer.razor   |   3 +-
 .../DropZone/DropContainer.razor.cs           |   2 +-
 .../Components/DropZone/DropZone.razor        |   4 +-
 .../Components/DropZone/DropZone.razor.cs     |   2 +-
 .../Components/DropZone/DynamicDropItem.razor |   4 +-
 .../DropZone/DynamicDropItem.razor.cs         |   2 +-
 .../Components/Element/Element.cs             |   6 +-
 .../ExpansionPanel/ExpansionPanel.razor       |   2 +-
 .../ExpansionPanel/ExpansionPanel.razor.cs    |   2 +-
 .../ExpansionPanel/ExpansionPanels.razor      |   2 +-
 .../ExpansionPanel/ExpansionPanels.razor.cs   |   2 +-
 .../Components/Field/Field.razor              |   2 +-
 .../Components/Field/Field.razor.cs           |   2 +-
 .../Components/FileUpload/FileUpload.razor    |   4 +-
 .../Components/FileUpload/FileUpload.razor.cs |   2 +-
 .../Components/FocusTrap/FocusTrap.razor      |   2 +-
 .../Components/FocusTrap/FocusTrap.razor.cs   |   2 +-
 .../Components/Form/Form.razor                |   2 +-
 .../Components/Form/Form.razor.cs             |   2 +-
 .../Components/Grid/Grid.razor                |   4 +-
 .../Components/Grid/Item.razor                |   4 +-
 .../Components/Highlighter/Highlighter.razor  |   2 +-
 .../Components/Icon/Icon.razor                |   4 +-
 .../Components/Icon/Icon.razor.cs             |   2 +-
 .../Components/Image/Image.razor              |   2 +-
 .../Components/Image/Image.razor.cs           |   4 +-
 .../Components/Input/Input.razor              |   6 +-
 .../Components/Input/InputCssHelper.cs        |   6 +-
 .../Components/Input/InputLabel.razor         |   2 +-
 .../Components/Input/InputLabel.razor.cs      |   2 +-
 .../Components/Input/RangeInput.razor         |   6 +-
 .../InputControl/InputControl.razor           |   2 +-
 .../InputControl/InputControl.razor.cs        |   2 +-
 .../Components/Layout/Layout.razor            |   2 +-
 .../Components/Link/Link.razor                |   2 +-
 .../Components/Link/Link.razor.cs             |   4 +-
 .../Components/List/List.razor                |   2 +-
 .../Components/List/List.razor.cs             |   2 +-
 .../Components/List/ListItem.razor            |   2 +-
 .../Components/List/ListItem.razor.cs         |   2 +-
 .../Components/List/ListSubheader.razor       |   2 +-
 .../Components/List/ListSubheader.razor.cs    |   2 +-
 .../Components/Main/MainContent.razor         |   4 +-
 .../Components/Mask/Mask.razor                |   4 +-
 .../Components/Mask/Mask.razor.cs             |   6 +-
 .../Components/Menu/Menu.razor                |   2 +-
 .../Components/Menu/Menu.razor.cs             |   2 +-
 .../Components/Menu/MenuItem.razor            |   2 +-
 .../Components/MessageBox/MessageBox.razor    |   2 +-
 .../Components/NavMenu/NavGroup.razor         |   2 +-
 .../Components/NavMenu/NavGroup.razor.cs      |   2 +-
 .../Components/NavMenu/NavLink.razor          |   2 +-
 .../Components/NavMenu/NavLink.razor.cs       |   2 +-
 .../Components/NavMenu/NavMenu.razor          |   2 +-
 .../Components/NavMenu/NavMenu.razor.cs       |   2 +-
 .../NumericField/NumericField.razor           |   3 +-
 .../NumericField/NumericField.razor.cs        |   2 +-
 .../Components/Overlay/Overlay.razor          |   2 +-
 .../Components/Overlay/Overlay.razor.cs       |   3 +-
 .../PageContentNavigation.razor               |   2 +-
 .../PageContentNavigation.razor.cs            |   2 +-
 .../Components/Pagination/Pagination.razor    |   2 +-
 .../Components/Pagination/Pagination.razor.cs |   2 +-
 .../Components/Paper/Paper.razor              |   2 +-
 .../Components/Paper/Paper.razor.cs           |   3 +-
 .../Components/Picker/Picker.razor            |   9 +-
 .../Components/Picker/Picker.razor.cs         |   4 +-
 .../Components/Popover/Popover.razor.cs       |   3 +-
 .../Components/Popover/PopoverService.cs      |   2 +-
 .../Progress/ProgressCircular.razor           |   2 +-
 .../Progress/ProgressCircular.razor.cs        |   2 +-
 .../Components/Progress/ProgressLinear.razor  |   2 +-
 .../Progress/ProgressLinear.razor.cs          |   2 +-
 .../Components/RTLProvider/RTLProvider.razor  |   2 +-
 .../RTLProvider/RTLProvider.razor.cs          |   4 +-
 .../Components/Radio/Radio.razor              |   4 +-
 .../Components/Radio/Radio.razor.cs           |  18 +-
 .../Components/Radio/RadioGroup.razor         |   4 +-
 .../Components/Radio/RadioGroup.razor.cs      |   2 +-
 .../Components/Rating/Rating.razor            |   2 +-
 .../Components/Rating/Rating.razor.cs         |   2 +-
 .../Components/Rating/RatingItem.razor        |   6 +-
 .../Components/Rating/RatingItem.razor.cs     |   2 +-
 .../Components/ScrollToTop/ScrollToTop.razor  |   3 +-
 .../ScrollToTop/ScrollToTop.razor.cs          |   2 +-
 .../Components/Select/Select.razor            |   4 +-
 .../Components/Select/Select.razor.cs         |   2 +-
 .../Components/Select/SelectItem.razor        |   2 +-
 .../Components/Select/SelectItem.razor.cs     |   2 +-
 .../Components/Skeleton/Skeleton.razor        |   2 +-
 .../Components/Skeleton/Skeleton.razor.cs     |   4 +-
 .../Components/Slider/Slider.razor            |   4 +-
 .../Components/Slider/Slider.razor.cs         |   2 +-
 .../Components/Snackbar/SnackbarElement.razor |   2 +-
 .../Snackbar/SnackbarElement.razor.cs         |   2 +-
 .../Snackbar/SnackbarProvider.razor           |   2 +-
 .../Snackbar/SnackbarProvider.razor.cs        |   2 +-
 .../Components/Sparkline/SparkLine.razor      |   2 +-
 .../Components/Stack/Stack.razor              |   2 +-
 .../Components/Stack/Stack.razor.cs           |   2 +-
 .../Components/SwipeArea/SwipeArea.razor      |   2 +-
 .../Components/Switch/Switch.razor            |   4 +-
 .../Components/Switch/Switch.razor.cs         |   2 +-
 .../Components/Table/TFootRow.razor           |   2 +-
 .../Components/Table/TFootRow.razor.cs        |   2 +-
 .../Components/Table/THeadRow.razor           |   2 +-
 .../Components/Table/THeadRow.razor.cs        |   2 +-
 .../Components/Table/Table.razor              |   2 +-
 .../Components/Table/TableBase.cs             |   2 +-
 .../Components/Table/TableGroupRow.razor      |   8 +-
 .../Components/Table/TablePager.razor         |   2 +-
 .../Components/Table/TablePager.razor.cs      |   6 +-
 .../Components/Table/TableSortLabel.razor     |   2 +-
 .../Components/Table/TableSortLabel.razor.cs  |   2 +-
 .../Components/Table/Td.razor                 |   2 +-
 .../Components/Table/Td.razor.cs              |   2 +-
 .../Components/Table/Th.razor                 |   2 +-
 .../Components/Table/Th.razor.cs              |   2 +-
 .../Components/Table/Tr.razor                 |   2 +-
 .../Components/Table/Tr.razor.cs              |   2 +-
 .../Components/TableSimple/SimpleTable.razor  |   2 +-
 .../TableSimple/SimpleTable.razor.cs          |   2 +-
 .../Components/Tabs/TabPanel.razor            |   2 +-
 .../Components/Tabs/Tabs.razor                |   2 +-
 .../Components/Tabs/Tabs.razor.cs             |   9 +-
 .../Components/TextField/TextField.razor      |   6 +-
 .../Components/TextField/TextField.razor.cs   |   2 +-
 .../Components/TimePicker/TimePicker.razor    |   2 +-
 .../Components/TimePicker/TimePicker.razor.cs |   2 +-
 .../Components/Timeline/Timeline.razor        |   2 +-
 .../Components/Timeline/Timeline.razor.cs     |   2 +-
 .../Components/Timeline/TimelineItem.razor    |   2 +-
 .../Components/Timeline/TimelineItem.razor.cs |   2 +-
 .../Components/ToolBar/ToolBar.razor          |   4 +-
 .../Components/Tooltip/Tooltip.razor          |   2 +-
 .../Components/Tooltip/Tooltip.razor.cs       |   2 +-
 .../Components/TreeView/TreeView.razor        |   2 +-
 .../Components/TreeView/TreeView.razor.cs     |   3 +-
 .../Components/TreeView/TreeViewItem.razor    |   2 +-
 .../Components/TreeView/TreeViewItem.razor.cs |   2 +-
 .../Components/Typography/TextContent.razor   |  84 ++---
 .../Typography/TextContent.razor.cs           |   2 +-
 .../Components/UIComponent.cs                 |  24 +-
 .../Enums/{ObjectPosition.cs => Alignment.cs} |   7 +-
 src/Connected.Components/Enums/Color.cs       |  12 -
 .../Enums/HorizontalAlignment.cs              |  32 +-
 src/Connected.Components/Enums/Placement.cs   |  30 +-
 src/Connected.Components/Enums/Position.cs    |  33 +-
 src/Connected.Components/Enums/Severity.cs    |  22 +-
 src/Connected.Components/Enums/Size.cs        |  16 +-
 src/Connected.Components/Enums/Variant.cs     |  16 +-
 .../Enums/VerticalAlignment.cs                |   7 +
 .../Extensions/EnumExtensions.cs              |  18 +-
 .../Utilities/CssBuilder.cs                   | 234 +++++++-------
 .../Utilities/StyleBuilder.cs                 | 305 +++++++++---------
 239 files changed, 971 insertions(+), 1105 deletions(-)
 create mode 100644 src/Connected.Components.Showcase/Pages/AppBarShowcase.razor
 create mode 100644 src/Connected.Components/Components/Avatar/AvatarKind.cs
 rename src/Connected.Components/Enums/{ObjectPosition.cs => Alignment.cs} (74%)
 create mode 100644 src/Connected.Components/Enums/VerticalAlignment.cs

diff --git a/src/Connected.Components.Showcase/Pages/AlertShowcase.razor b/src/Connected.Components.Showcase/Pages/AlertShowcase.razor
index 4c0dcc4..32127d1 100644
--- a/src/Connected.Components.Showcase/Pages/AlertShowcase.razor
+++ b/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>
diff --git a/src/Connected.Components.Showcase/Pages/AppBarShowcase.razor b/src/Connected.Components.Showcase/Pages/AppBarShowcase.razor
new file mode 100644
index 0000000..68aff84
--- /dev/null
+++ b/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>
diff --git a/src/Connected.Components/Components/Alert/Alert.razor b/src/Connected.Components/Components/Alert/Alert.razor
index 5d02acf..6d2452f 100644
--- a/src/Connected.Components/Components/Alert/Alert.razor
+++ b/src/Connected.Components/Components/Alert/Alert.razor
@@ -2,21 +2,24 @@
 
 @inherits UIComponent
 
-<div @attributes="UserAttributes" role="alert" class="@ClassList" Style="@Style" @onclick="Clicked">
-	<div class="@ClassPosition">
-	
-		@if (!GlyphVisible)
+<div role="alert"
+	  class="@CompiledClassList"
+	  @attributes="CustomAttributes"
+	  @onclick="Clicked">
+	<div class="@CompiledAlignmentClassList">
+
+		@if (GlyphVisible)
 		{
 			<div class="alert-icon alert-icon-left">
-				<Icon Glyph="@Glyph" />
+				<Icon Glyph="@CustomGlyph" />
 			</div>
 		}
-		
+
 		<div class="alert-message">
 			@ChildContent
 		</div>
 	</div>
-	
+
 	@if (CloseGlyphVisible)
 	{
 		<div class="alert-close">
diff --git a/src/Connected.Components/Components/Alert/Alert.razor.cs b/src/Connected.Components/Components/Alert/Alert.razor.cs
index e4c7937..64cff52 100644
--- a/src/Connected.Components/Components/Alert/Alert.razor.cs
+++ b/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>
+	private CssBuilder CompiledAlignmentClassList
+	{
+		get
+		{
+			return new CssBuilder("alert-position")
+				.AddClass($"justify-sm-{HorizontalAlignment.GetAbsolute(RightToLeft)}");
+		}
+	}
+
+	/// <summary>
+	/// Contains the default container classlist and the user defined classes.
+	/// </summary>
+	private CssBuilder CompiledClassList
+	{
+		get
+		{
+			return new CssBuilder("alert")
+				.AddClass($"alert-{Variant}-{Severity}")
+				.AddClass($"dense", Dense)
+				.AddClass($"square", Square)
+				.AddClass($"elevation-{Elevation}")
+				.AddClass(ClassList);
+		}
+	}
+
+	/// <summary>
+	/// Child content of the component.
+	/// </summary>
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+
+	#region EventCallbacks
+	/// <summary>
+	/// Raised when the alert is clicked.
 	/// </summary>
 	[Parameter]
-	public HorizontalAlignment Alignment { get; set; } = HorizontalAlignment.Start;
+	public EventCallback<MouseEventArgs> Clicked { get; set; }
+
 	/// <summary>
 	/// The callback, when the close glyph has been clicked.
 	/// </summary>
 	[Parameter] public EventCallback<Alert> CloseClicked { get; set; }
+
+	#endregion
+	#region Content placeholders
 	/// <summary>
 	/// 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 glyph.
+	/// Custom glyph, leave unset to use the standard glyph which depends on the Severity.
 	/// </summary>
 	[Parameter]
-	public bool CloseGlyphVisible { get; set; }
+	public string CustomGlyph { get; set; } = default!;
+	#endregion
+
+	#region Styling properties
 	/// <summary>
-	/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
+	/// Sets the horizontal alignement of the text. Start and end depend on the <see cref="RightToLeft"/> property.
 	/// </summary>
 	[Parameter]
-	public int Elevation { set; get; } = 0;
+	public HorizontalAlignment HorizontalAlignment { get; set; } = HorizontalAlignment.Start;
+
 	/// <summary>
-	/// If true, rounded corners are disabled.
+	/// A space separated list of class names, added on top of the default class list.
 	/// </summary>
 	[Parameter]
-	public bool Square { get; set; }
+	public string? ClassList { get; set; }
+
+	/// <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>
-	/// If true, no alert glyph will be used.
+	/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
 	/// </summary>
 	[Parameter]
-	public bool GlyphVisible { get; set; }
+	public int Elevation { set; get; } = 0;
+
 	/// <summary>
-	/// The severity of the alert. This defines the color and glyph used.
+	/// If true, no alert glyph will be used.
 	/// </summary>
 	[Parameter]
-	public Severity Severity { get; set; } = Severity.Normal;
+	public bool GlyphVisible { get; set; }
+
 	/// <summary>
-	/// The variant to use.
+	/// Specifies the control's display style
 	/// </summary>
-	[Parameter]
-	public Variant Variant { get; set; } = Variant.Text;
+	[CascadingParameter(Name = "RightToLeft")]
+	public bool RightToLeft { get; set; }
+
 	/// <summary>
-	/// Child content of the component.
+	/// The severity of the alert. This defines the color and glyph used.
 	/// </summary>
 	[Parameter]
-	public RenderFragment? ChildContent { get; set; }
+	public Severity Severity { get; set; } = Severity.Normal;
+
 	/// <summary>
-	/// Custom glyph, leave unset to use the standard glyph which depends on the Severity.
+	/// If true, rounded corners are disabled.
 	/// </summary>
 	[Parameter]
-	public string Glyph { get; set; } = default!;
+	public bool Square { get; set; }
+
 	/// <summary>
-	/// Raised when the alert is clicked
+	/// The variant to use.
 	/// </summary>
 	[Parameter]
-	public EventCallback<MouseEventArgs> Clicked { get; set; }
-
-	protected string ClassList
-	{
-		get
-		{
-			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
-	{
-		get
-		{
-			return new CssBuilder("alert-position")
-				.AddClass($"justify-sm-{ConvertHorizontalAlignment(Alignment).ToDescriptionString()}")
-				.Build();
-		}
-	}
-
-	private HorizontalAlignment ConvertHorizontalAlignment(HorizontalAlignment contentAlignment)
-	{
-		return contentAlignment switch
-		{
-			HorizontalAlignment.Right => RightToLeft ? HorizontalAlignment.Start : HorizontalAlignment.End,
-			HorizontalAlignment.Left => RightToLeft ? HorizontalAlignment.End : HorizontalAlignment.Start,
-			_ => contentAlignment
-		};
-	}
-
-
-	internal async Task OnCloseGlyphClick()
-	{
-		if (!CloseClicked.HasDelegate)
-			return;
-
-		await CloseClicked.InvokeAsync(this);
-	}
+	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);
+	}
 }
\ No newline at end of file
diff --git a/src/Connected.Components/Components/AppBar/AppBar.razor b/src/Connected.Components/Components/AppBar/AppBar.razor
index fb13ed1..5f4e0fc 100644
--- a/src/Connected.Components/Components/AppBar/AppBar.razor
+++ b/src/Connected.Components/Components/AppBar/AppBar.razor
@@ -1,10 +1,10 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<header @attributes="UserAttributes" class="@ClassList" style="@Style">
-    <ToolBar Dense="@Dense" DisableGutters="@DisableGutters" Class="@ToolBarClassList()">
-        @ChildContent
-    </ToolBar>
+<header @attributes="CustomAttributes" class="@CompiledHeaderClassList">
+	<ToolBar Dense="@Dense" DisableGutters="@DisableGutters" Class="@CompiledToolbarClassList">
+		@ChildContent
+	</ToolBar>
 </header>
 
 
diff --git a/src/Connected.Components/Components/AppBar/AppBar.razor.cs b/src/Connected.Components/Components/AppBar/AppBar.razor.cs
index 41ac692..dd8a6d8 100644
--- a/src/Connected.Components/Components/AppBar/AppBar.razor.cs
+++ b/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>
+	private CssBuilder CompiledToolbarClassList
+	{
+		get
+		{
+			return new CssBuilder("toolbar-appbar")
+				.AddClass(ToolbarClassList);
+		}
+	}
+
+	/// <summary>
+	/// 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 bool Bottom { get; set; }
+	public RenderFragment? ChildContent { get; set; }
 
 	/// <summary>
-	/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
+	/// The color of the component. It supports the theme colors.
 	/// </summary>
 	[Parameter]
-	public int Elevation { set; get; } = 4;
+	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()
-	{
-		return new CssBuilder("appbar")
-			.AddClass($"appbar-dense", Dense)
-			.AddClass($"appbar-fixed-top", Fixed && !Bottom)
-			.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();
-	}
+	/// <summary>
+	/// Determines the vertical alignment of the AppBar.
+	/// </summary>
+	[Parameter]
+	public VerticalAlignment VerticalAlignment { get; set; }
 }
diff --git a/src/Connected.Components/Components/Autocomplete/Autocomplete.razor b/src/Connected.Components/Components/Autocomplete/Autocomplete.razor
index c0dd9c6..627c8ea 100644
--- a/src/Connected.Components/Components/Autocomplete/Autocomplete.razor
+++ b/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"
diff --git a/src/Connected.Components/Components/Autocomplete/Autocomplete.razor.cs b/src/Connected.Components/Components/Autocomplete/Autocomplete.razor.cs
index 6f6f890..643db7b 100644
--- a/src/Connected.Components/Components/Autocomplete/Autocomplete.razor.cs
+++ b/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();
 	 }
 
diff --git a/src/Connected.Components/Components/Avatar/Avatar.razor b/src/Connected.Components/Components/Avatar/Avatar.razor
index b9323ca..975dc26 100644
--- a/src/Connected.Components/Components/Avatar/Avatar.razor
+++ b/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
             {
diff --git a/src/Connected.Components/Components/Avatar/Avatar.razor.cs b/src/Connected.Components/Components/Avatar/Avatar.razor.cs
index 500cae5..d42775c 100644
--- a/src/Connected.Components/Components/Avatar/Avatar.razor.cs
+++ b/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; }
-	protected string Classname =>
-	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 =>
-		new StyleBuilder()
-		.AddStyle(AvatarGroup?.GetAvatarZindex(this) ?? new StyleBuilder(), AvatarGroup != null)
-		.AddStyle(Style)
-		.Build();
+	[CascadingParameter]
+	protected AvatarGroup? AvatarGroup { get; set; }
+
+	protected CssBuilder CompiledClassList
+	{
+		get
+		{
+			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 int Elevation { set; get; } = 0;
+	public string? ClassList { get; set; }
 
 	/// <summary>
-	/// If true, border-radius is set to 0.
+	/// If set (and Image is also set), will add an alt property to the img element
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Avatar.Appearance)]
-	public bool Square { get; set; }
+	public string? ImageAltText { get; set; }
 
 	/// <summary>
-	/// If true, border-radius is set to the themes default value.
+	/// Child content of the component.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Avatar.Appearance)]
-	public bool Rounded { get; set; }
+	public RenderFragment? ChildContent { get; set; }
 
 	/// <summary>
-	/// Link to image, if set a image will be displayed instead of text.
+	/// The color of the component. It supports the theme colors.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Avatar.Behavior)]
-	public string Image { get; set; }
+	public ThemeColor Color { get; set; } = ThemeColor.Default;
 
 	/// <summary>
-	/// If set (and Image is also set), will add an alt property to the img element
+	/// The higher the number, the heavier the drop-shadow.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Avatar.Behavior)]
-	public string Alt { get; set; }
+	public int Elevation { set; get; } = 0;
 
 	/// <summary>
-	/// The color of the component. It supports the theme colors.
+	/// Link to image, if set a image will be displayed instead of text.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Avatar.Appearance)]
-	public ThemeColor Color { get; set; } = ThemeColor.Default;
+	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()
-	{
-		AvatarGroup?.RemoveAvatar(this);
-	}
+	public void Dispose() => AvatarGroup?.RemoveAvatar(this);
 
-	internal void ForceRedraw()
-	{
-		StateHasChanged();
-	}
+	internal void ForceRedraw() => StateHasChanged();
 }
diff --git a/src/Connected.Components/Components/Avatar/AvatarGroup.razor b/src/Connected.Components/Components/Avatar/AvatarGroup.razor
index b373864..b667de4 100644
--- a/src/Connected.Components/Components/Avatar/AvatarGroup.razor
+++ b/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>
     }
diff --git a/src/Connected.Components/Components/Avatar/AvatarGroup.razor.cs b/src/Connected.Components/Components/Avatar/AvatarGroup.razor.cs
index 226f2bb..d3c338d 100644
--- a/src/Connected.Components/Components/Avatar/AvatarGroup.razor.cs
+++ b/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);
diff --git a/src/Connected.Components/Components/Avatar/AvatarKind.cs b/src/Connected.Components/Components/Avatar/AvatarKind.cs
new file mode 100644
index 0000000..e0d3195
--- /dev/null
+++ b/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
+}
diff --git a/src/Connected.Components/Components/Badge/Badge.razor b/src/Connected.Components/Components/Badge/Badge.razor
index 050e8bc..a43da56 100644
--- a/src/Connected.Components/Components/Badge/Badge.razor
+++ b/src/Connected.Components/Components/Badge/Badge.razor
@@ -1,8 +1,8 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<span @attributes="UserAttributes" class="@Classname" style="@Style">
-    @ChildContent
+<span @attributes="CustomAttributes" class="@CompiledClassList">
+	@ChildContent
 	@if (Visible)
 	{
 		<span class="@WrapperClass">
diff --git a/src/Connected.Components/Components/Badge/Badge.razor.cs b/src/Connected.Components/Components/Badge/Badge.razor.cs
index 53b7278..ae37399 100644
--- a/src/Connected.Components/Components/Badge/Badge.razor.cs
+++ b/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")
diff --git a/src/Connected.Components/Components/Breadcrumbs/Breadcrumbs.razor b/src/Connected.Components/Components/Breadcrumbs/Breadcrumbs.razor
index 5525ef1..6d5e759 100644
--- a/src/Connected.Components/Components/Breadcrumbs/Breadcrumbs.razor
+++ b/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>
diff --git a/src/Connected.Components/Components/Breadcrumbs/Breadcrumbs.razor.cs b/src/Connected.Components/Components/Breadcrumbs/Breadcrumbs.razor.cs
index 1808dbc..e0b5a99 100644
--- a/src/Connected.Components/Components/Breadcrumbs/Breadcrumbs.razor.cs
+++ b/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)
diff --git a/src/Connected.Components/Components/Button/Button.razor b/src/Connected.Components/Components/Button/Button.razor
index 4c36931..b3fc015 100644
--- a/src/Connected.Components/Components/Button/Button.razor
+++ b/src/Connected.Components/Components/Button/Button.razor
@@ -3,29 +3,13 @@
 @inherits ButtonBase
 
 <Element @bind-Ref="@_elementReference"
-            HtmlTag="@HtmlTag"
-            Class="@Classname" 
-            Style="@Style"
-            @attributes="UserAttributes"
-            @onclick="OnClickHandler"
-            type="@ButtonType.ToDescriptionString()"
-            href="@Href" 
-            target="@Target"
-            rel="@(Target=="_blank"?"noopener":null)"
-            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>
+			HtmlTag="@HtmlTag"
+			Class="@CompiledClassList"
+			@attributes="CustomAttributes"
+			@onclick="OnClickHandler"
+			type="@ButtonType.ToDescriptionString()"
+			disabled="@Disabled">
+	<span class="button-label">
+		@ChildContent
+	</span>
 </Element>
diff --git a/src/Connected.Components/Components/Button/Button.razor.cs b/src/Connected.Components/Components/Button/Button.razor.cs
index a0fb2f8..84164ad 100644
--- a/src/Connected.Components/Components/Button/Button.razor.cs
+++ b/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.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Button.Behavior)]
-	public string StartIcon { get; set; }
-
-	/// <summary>
-	/// Icon placed after the text if set.
+	/// Child content of component.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Button.Behavior)]
-	public string EndIcon { get; set; }
+	public RenderFragment? ChildContent { 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;
+	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 class names, separated by space
+	/// A space separated list of class names, added on top of the default class list.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Button.Appearance)]
-	public string IconClass { get; set; }
+	public string? ClassList { 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; }
-
 }
diff --git a/src/Connected.Components/Components/Button/ButtonBase.cs b/src/Connected.Components/Components/Button/ButtonBase.cs
index e567e5e..368a942 100644
--- a/src/Connected.Components/Components/Button/ButtonBase.cs
+++ b/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 bool DisableElevation { get; set; }
+	public int Elevation { set; get; } = 0;
 
 	/// <summary>
 	/// If true, disables ripple effect.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Button.Appearance)]
-	public bool DisableRipple { get; set; }
+	public bool CanRipple { 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 CommandParameter { get; set; }
+	public object? CommandParameters { get; set; }
 
-	/// <summary>
-	/// Button click event.
-	/// </summary>
-	[Parameter]
-	public EventCallback<MouseEventArgs> OnClick { get; set; }
-
-	protected async Task OnClickHandler(MouseEventArgs ev)
+	protected async Task OnClickHandler(MouseEventArgs e)
 	{
 		if (Disabled)
 			return;
-		await OnClick.InvokeAsync(ev);
-		if (Command?.CanExecute(CommandParameter) ?? false)
-		{
-			Command.Execute(CommandParameter);
-		}
-		Activateable?.Activate(this, ev);
-	}
 
-	protected override void OnInitialized()
-	{
-		SetDefaultValues();
-	}
-
-	protected override void OnParametersSet()
-	{
-		//if params change, must set default values again
-		SetDefaultValues();
-	}
+		await OnClick.InvokeAsync(e);
 
-	//Set the default value for HtmlTag, Link and Target 
-	private void SetDefaultValues()
-	{
-		if (Disabled)
-		{
-			HtmlTag = "button";
-			Href = null;
-			Target = null;
-			return;
-		}
+		if (Command?.CanExecute(CommandParameters) ?? false)
+			Command.Execute(CommandParameters);
 
-		// Render an anchor element if Link property is set and is not disabled
-		if (!IsNullOrWhiteSpace(Href))
-		{
-			HtmlTag = "a";
-		}
+		Activateable?.Activate(this, e);
 	}
 
 	protected ElementReference _elementReference;
diff --git a/src/Connected.Components/Components/Button/Fab.razor b/src/Connected.Components/Components/Button/Fab.razor
index 83d5535..5a45a55 100644
--- a/src/Connected.Components/Components/Button/Fab.razor
+++ b/src/Connected.Components/Components/Button/Fab.razor
@@ -7,13 +7,9 @@
 <Element @bind-Ref="@_elementReference"
             HtmlTag="@HtmlTag"
             Class="@Classname"
-            Style="@Style"
-            @attributes="UserAttributes"
+            @attributes="CustomAttributes"
             @onclick="OnClickHandler"
             type="@ButtonType.ToDescriptionString()"
-            href="@Href"
-            target="@Target"
-            rel="@(Target=="_blank"?"noopener":null)"
             disabled="@Disabled"
 			title="@Title">
     <span class="fab-label">
diff --git a/src/Connected.Components/Components/Button/Fab.razor.cs b/src/Connected.Components/Components/Button/Fab.razor.cs
index b12048e..7633bc4 100644
--- a/src/Connected.Components/Components/Button/Fab.razor.cs
+++ b/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($"fab-disable-elevation", DisableElevation)
-	  .AddClass(Class)
+	  .AddClass($"ripple", !CanRipple && !Disabled)
 	.Build();
 
 	/// <summary>
diff --git a/src/Connected.Components/Components/Button/IconButton.razor b/src/Connected.Components/Components/Button/IconButton.razor
index a096616..0684608 100644
--- a/src/Connected.Components/Components/Button/IconButton.razor
+++ b/src/Connected.Components/Components/Button/IconButton.razor
@@ -6,14 +6,10 @@
 
 <Element @bind-Ref="@_elementReference"
             HtmlTag="@HtmlTag"
-            Class="@Classname" 
-            Style="@Style"
-            @attributes="UserAttributes" 
+            Class="@Classname"
+            @attributes="CustomAttributes" 
             @onclick="OnClickHandler"
             type="@ButtonType.ToDescriptionString()" 
-            href="@Href" 
-            target="@Target"
-            rel="@(Target=="_blank"?"noopener":null)"
             disabled="@Disabled"
 			title="@Title">
     @if (!String.IsNullOrEmpty(Icon))
diff --git a/src/Connected.Components/Components/Button/IconButton.razor.cs b/src/Connected.Components/Components/Button/IconButton.razor.cs
index 34fbdbe..701c220 100644
--- a/src/Connected.Components/Components/Button/IconButton.razor.cs
+++ b/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-icon", !DisableRipple && !AsButton)
+	  .AddClass($"ripple", !CanRipple)
+	  .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(Class)
+	  .AddClass(AdditionalClassList)
 	.Build();
 
 	protected bool AsButton => Variant != Variant.Text;
diff --git a/src/Connected.Components/Components/Button/ToggleIconButton.razor b/src/Connected.Components/Components/Button/ToggleIconButton.razor
index c3d8765..47b3efe 100644
--- a/src/Connected.Components/Components/Button/ToggleIconButton.razor
+++ b/src/Connected.Components/Components/Button/ToggleIconButton.razor
@@ -15,7 +15,6 @@
                Edge="Edge"
                DisableRipple="DisableRipple"
                OnClick="Toggle"
-               Class="@Class"
-               Style="@Style"
+               Class="@AdditionalClassList"
                aria-pressed="@ariaPressedValue"
-               @attributes="UserAttributes" />
+               @attributes="CustomAttributes" />
diff --git a/src/Connected.Components/Components/ButtonGroup/ButtonGroup.razor b/src/Connected.Components/Components/ButtonGroup/ButtonGroup.razor
index 25a7d2d..80188b6 100644
--- a/src/Connected.Components/Components/ButtonGroup/ButtonGroup.razor
+++ b/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"))
-       UserAttributes.Add("role", "group");
+    if(!CustomAttributes.ContainsKey("role"))
+       CustomAttributes.Add("role", "group");
 }
\ No newline at end of file
diff --git a/src/Connected.Components/Components/ButtonGroup/ButtonGroup.razor.cs b/src/Connected.Components/Components/ButtonGroup/ButtonGroup.razor.cs
index a2f61c4..0b3519a 100644
--- a/src/Connected.Components/Components/ButtonGroup/ButtonGroup.razor.cs
+++ b/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();
 
 
diff --git a/src/Connected.Components/Components/Card/Card.razor b/src/Connected.Components/Components/Card/Card.razor
index 97c03f9..6535e65 100644
--- a/src/Connected.Components/Components/Card/Card.razor
+++ b/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>
diff --git a/src/Connected.Components/Components/Card/Card.razor.cs b/src/Connected.Components/Components/Card/Card.razor.cs
index 2cc04bc..0b954b0 100644
--- a/src/Connected.Components/Components/Card/Card.razor.cs
+++ b/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>
diff --git a/src/Connected.Components/Components/Card/CardActions.razor b/src/Connected.Components/Components/Card/CardActions.razor
index e03ba91..8cdb0a6 100644
--- a/src/Connected.Components/Components/Card/CardActions.razor
+++ b/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>
diff --git a/src/Connected.Components/Components/Card/CardActions.razor.cs b/src/Connected.Components/Components/Card/CardActions.razor.cs
index 40a67bf..3c74bf1 100644
--- a/src/Connected.Components/Components/Card/CardActions.razor.cs
+++ b/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>
diff --git a/src/Connected.Components/Components/Card/CardContent.razor b/src/Connected.Components/Components/Card/CardContent.razor
index e03ba91..8cdb0a6 100644
--- a/src/Connected.Components/Components/Card/CardContent.razor
+++ b/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>
diff --git a/src/Connected.Components/Components/Card/CardContent.razor.cs b/src/Connected.Components/Components/Card/CardContent.razor.cs
index a261c3a..28c0f76 100644
--- a/src/Connected.Components/Components/Card/CardContent.razor.cs
+++ b/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>
diff --git a/src/Connected.Components/Components/Card/CardHeader.razor b/src/Connected.Components/Components/Card/CardHeader.razor
index ff93949..f099d25 100644
--- a/src/Connected.Components/Components/Card/CardHeader.razor
+++ b/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>
diff --git a/src/Connected.Components/Components/Card/CardHeader.razor.cs b/src/Connected.Components/Components/Card/CardHeader.razor.cs
index fb0955d..79f0065 100644
--- a/src/Connected.Components/Components/Card/CardHeader.razor.cs
+++ b/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>
diff --git a/src/Connected.Components/Components/Card/CardMedia.razor b/src/Connected.Components/Components/Card/CardMedia.razor
index 2a52216..464838b 100644
--- a/src/Connected.Components/Components/Card/CardMedia.razor
+++ b/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>
diff --git a/src/Connected.Components/Components/Card/CardMedia.razor.cs b/src/Connected.Components/Components/Card/CardMedia.razor.cs
index 42b0a5c..87f6ad8 100644
--- a/src/Connected.Components/Components/Card/CardMedia.razor.cs
+++ b/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>
diff --git a/src/Connected.Components/Components/Carousel/Carousel.razor b/src/Connected.Components/Components/Carousel/Carousel.razor
index 9101779..ccbc0ba 100644
--- a/src/Connected.Components/Components/Carousel/Carousel.razor
+++ b/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">
diff --git a/src/Connected.Components/Components/Carousel/Carousel.razor.cs b/src/Connected.Components/Components/Carousel/Carousel.razor.cs
index 9e4a568..ea7f141 100644
--- a/src/Connected.Components/Components/Carousel/Carousel.razor.cs
+++ b/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 =>
diff --git a/src/Connected.Components/Components/Carousel/CarouselItem.razor b/src/Connected.Components/Components/Carousel/CarouselItem.razor
index 0f2c5a9..4ad06a8 100644
--- a/src/Connected.Components/Components/Carousel/CarouselItem.razor
+++ b/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>
 }
\ No newline at end of file
diff --git a/src/Connected.Components/Components/Carousel/CarouselItem.razor.cs b/src/Connected.Components/Components/Carousel/CarouselItem.razor.cs
index 17dd5d9..f08e450 100644
--- a/src/Connected.Components/Components/Carousel/CarouselItem.razor.cs
+++ b/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]
diff --git a/src/Connected.Components/Components/Chart/Chart.razor b/src/Connected.Components/Components/Chart/Chart.razor
index 93c81ad..d32f750 100644
--- a/src/Connected.Components/Components/Chart/Chart.razor
+++ b/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>
diff --git a/src/Connected.Components/Components/Chart/Chart.razor.cs b/src/Connected.Components/Components/Chart/Chart.razor.cs
index 41c760a..7ce809c 100644
--- a/src/Connected.Components/Components/Chart/Chart.razor.cs
+++ b/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; }
diff --git a/src/Connected.Components/Components/Chart/Charts/Bar.razor b/src/Connected.Components/Components/Chart/Charts/Bar.razor
index 7a7021c..f081599 100644
--- a/src/Connected.Components/Components/Chart/Charts/Bar.razor
+++ b/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)
diff --git a/src/Connected.Components/Components/Chart/Charts/Donut.razor b/src/Connected.Components/Components/Chart/Charts/Donut.razor
index eae7c9c..f2c4109 100644
--- a/src/Connected.Components/Components/Chart/Charts/Donut.razor
+++ b/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())
diff --git a/src/Connected.Components/Components/Chart/Charts/Line.razor b/src/Connected.Components/Components/Chart/Charts/Line.razor
index 1f8ba8b..5f1a37c 100644
--- a/src/Connected.Components/Components/Chart/Charts/Line.razor
+++ b/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)
diff --git a/src/Connected.Components/Components/Chart/Charts/Pie.razor b/src/Connected.Components/Components/Chart/Charts/Pie.razor
index 32d77e0..55b039b 100644
--- a/src/Connected.Components/Components/Chart/Charts/Pie.razor
+++ b/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())
     {
diff --git a/src/Connected.Components/Components/Chart/Parts/Legend.razor b/src/Connected.Components/Components/Chart/Parts/Legend.razor
index 48170e0..020e134 100644
--- a/src/Connected.Components/Components/Chart/Parts/Legend.razor
+++ b/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)>
diff --git a/src/Connected.Components/Components/CheckBox/CheckBox.razor b/src/Connected.Components/Components/CheckBox/CheckBox.razor
index da6fc88..eb643ee 100644
--- a/src/Connected.Components/Components/CheckBox/CheckBox.razor
+++ b/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))
diff --git a/src/Connected.Components/Components/CheckBox/CheckBox.razor.cs b/src/Connected.Components/Components/CheckBox/CheckBox.razor.cs
index d4e5774..947b825 100644
--- a/src/Connected.Components/Components/CheckBox/CheckBox.razor.cs
+++ b/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 =>
diff --git a/src/Connected.Components/Components/Chip/Chip.razor b/src/Connected.Components/Components/Chip/Chip.razor
index 4ec5db5..a720c9c 100644
--- a/src/Connected.Components/Components/Chip/Chip.razor
+++ b/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">
diff --git a/src/Connected.Components/Components/Chip/Chip.razor.cs b/src/Connected.Components/Components/Chip/Chip.razor.cs
index 5f6c68f..a765113 100644
--- a/src/Connected.Components/Components/Chip/Chip.razor.cs
+++ b/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)
diff --git a/src/Connected.Components/Components/ChipSet/ChipSet.razor b/src/Connected.Components/Components/ChipSet/ChipSet.razor
index a2b95fb..58db7b8 100644
--- a/src/Connected.Components/Components/ChipSet/ChipSet.razor
+++ b/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>
diff --git a/src/Connected.Components/Components/ChipSet/ChipSet.razor.cs b/src/Connected.Components/Components/ChipSet/ChipSet.razor.cs
index ada3c87..6b5556f 100644
--- a/src/Connected.Components/Components/ChipSet/ChipSet.razor.cs
+++ b/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>
diff --git a/src/Connected.Components/Components/Collapse/Collapse.razor b/src/Connected.Components/Components/Collapse/Collapse.razor
index e4abe10..8acf194 100644
--- a/src/Connected.Components/Components/Collapse/Collapse.razor
+++ b/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
diff --git a/src/Connected.Components/Components/Collapse/Collapse.razor.cs b/src/Connected.Components/Components/Collapse/Collapse.razor.cs
index c284672..100cfae 100644
--- a/src/Connected.Components/Components/Collapse/Collapse.razor.cs
+++ b/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>
diff --git a/src/Connected.Components/Components/Container/Container.razor b/src/Connected.Components/Components/Container/Container.razor
index 4c2962c..8088c1d 100644
--- a/src/Connected.Components/Components/Container/Container.razor
+++ b/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>
\ No newline at end of file
diff --git a/src/Connected.Components/Components/Container/Container.razor.cs b/src/Connected.Components/Components/Container/Container.razor.cs
index 496b9d7..20f15ad 100644
--- a/src/Connected.Components/Components/Container/Container.razor.cs
+++ b/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>
diff --git a/src/Connected.Components/Components/DataGrid/Column.cs b/src/Connected.Components/Components/DataGrid/Column.cs
index 445aace..9822031 100644
--- a/src/Connected.Components/Components/DataGrid/Column.cs
+++ b/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;
diff --git a/src/Connected.Components/Components/DataGrid/DataGrid.razor b/src/Connected.Components/Components/DataGrid/DataGrid.razor
index f882457..fdedc90 100644
--- a/src/Connected.Components/Components/DataGrid/DataGrid.razor
+++ b/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)
diff --git a/src/Connected.Components/Components/DataGrid/DataGrid.razor.cs b/src/Connected.Components/Components/DataGrid/DataGrid.razor.cs
index 6487536..2d244f5 100644
--- a/src/Connected.Components/Components/DataGrid/DataGrid.razor.cs
+++ b/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 =>
diff --git a/src/Connected.Components/Components/DataGrid/DataGridPager.razor b/src/Connected.Components/Components/DataGrid/DataGridPager.razor
index b5c8e5e..0e44c7f 100644
--- a/src/Connected.Components/Components/DataGrid/DataGridPager.razor
+++ b/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)
     {
diff --git a/src/Connected.Components/Components/DataGrid/DataGridPager.razor.cs b/src/Connected.Components/Components/DataGrid/DataGridPager.razor.cs
index 25af35d..8623bb3 100644
--- a/src/Connected.Components/Components/DataGrid/DataGridPager.razor.cs
+++ b/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)
diff --git a/src/Connected.Components/Components/DataGrid/FilterHeaderCell.razor b/src/Connected.Components/Components/DataGrid/FilterHeaderCell.razor
index 1a28e47..6c5a6a6 100644
--- a/src/Connected.Components/Components/DataGrid/FilterHeaderCell.razor
+++ b/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)
diff --git a/src/Connected.Components/Components/DataGrid/FilterHeaderCell.razor.cs b/src/Connected.Components/Components/DataGrid/FilterHeaderCell.razor.cs
index 2d5060b..309b4d9 100644
--- a/src/Connected.Components/Components/DataGrid/FilterHeaderCell.razor.cs
+++ b/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;
diff --git a/src/Connected.Components/Components/DataGrid/FooterCell.razor b/src/Connected.Components/Components/DataGrid/FooterCell.razor
index d5e966c..ae9ba4a 100644
--- a/src/Connected.Components/Components/DataGrid/FooterCell.razor
+++ b/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)
diff --git a/src/Connected.Components/Components/DataGrid/FooterCell.razor.cs b/src/Connected.Components/Components/DataGrid/FooterCell.razor.cs
index 9c5c7d8..6ac8c9a 100644
--- a/src/Connected.Components/Components/DataGrid/FooterCell.razor.cs
+++ b/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();
 
diff --git a/src/Connected.Components/Components/DataGrid/HeaderCell.razor b/src/Connected.Components/Components/DataGrid/HeaderCell.razor
index 84d7b50..b9661fc 100644
--- a/src/Connected.Components/Components/DataGrid/HeaderCell.razor
+++ b/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)
             {
diff --git a/src/Connected.Components/Components/DataGrid/HeaderCell.razor.cs b/src/Connected.Components/Components/DataGrid/HeaderCell.razor.cs
index 1a50f82..964932e 100644
--- a/src/Connected.Components/Components/DataGrid/HeaderCell.razor.cs
+++ b/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 =>
diff --git a/src/Connected.Components/Components/DataGrid/Row.razor b/src/Connected.Components/Components/DataGrid/Row.razor
index 27fa32b..4422235 100644
--- a/src/Connected.Components/Components/DataGrid/Row.razor
+++ b/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>
\ No newline at end of file
diff --git a/src/Connected.Components/Components/DataGrid/Row.razor.cs b/src/Connected.Components/Components/DataGrid/Row.razor.cs
index dfdc23d..4711b11 100644
--- a/src/Connected.Components/Components/DataGrid/Row.razor.cs
+++ b/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();
 }
diff --git a/src/Connected.Components/Components/DatePicker/DateRangePicker.razor b/src/Connected.Components/Components/DatePicker/DateRangePicker.razor
index ae90b21..9a26474 100644
--- a/src/Connected.Components/Components/DatePicker/DateRangePicker.razor
+++ b/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>
diff --git a/src/Connected.Components/Components/Dialog/Dialog.razor b/src/Connected.Components/Components/Dialog/Dialog.razor
index 351277d..dfe47de 100644
--- a/src/Connected.Components/Components/Dialog/Dialog.razor
+++ b/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>
 
diff --git a/src/Connected.Components/Components/Dialog/Dialog.razor.cs b/src/Connected.Components/Components/Dialog/Dialog.razor.cs
index 415b39f..e704b68 100644
--- a/src/Connected.Components/Components/Dialog/Dialog.razor.cs
+++ b/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(Style)] = Style,
+         [nameof(AdditionalClassList)] = AdditionalClassList,
          [nameof(Tag)] = Tag,
          [nameof(TitleContent)] = TitleContent,
          [nameof(DialogContent)] = DialogContent,
diff --git a/src/Connected.Components/Components/Dialog/DialogInstance.razor b/src/Connected.Components/Components/Dialog/DialogInstance.razor
index ae38324..2576121 100644
--- a/src/Connected.Components/Components/Dialog/DialogInstance.razor
+++ b/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">
diff --git a/src/Connected.Components/Components/Dialog/DialogInstance.razor.cs b/src/Connected.Components/Components/Dialog/DialogInstance.razor.cs
index 32f8daa..ff6d787 100644
--- a/src/Connected.Components/Components/Dialog/DialogInstance.razor.cs
+++ b/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;
-		Style = dialog.Style;
+		//AdditionalClassList = dialog.AdditionalClassList;
 		TitleContent = dialog.TitleContent;
 		StateHasChanged();
 	}
diff --git a/src/Connected.Components/Components/Divider/Divider.razor b/src/Connected.Components/Components/Divider/Divider.razor
index f4a6e5f..5e7fb2c 100644
--- a/src/Connected.Components/Components/Divider/Divider.razor
+++ b/src/Connected.Components/Components/Divider/Divider.razor
@@ -1,4 +1,4 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<hr @attributes="UserAttributes" class="@Classname" style="@Style"/>
\ No newline at end of file
+<hr @attributes="CustomAttributes" class="@Classname"/>
\ No newline at end of file
diff --git a/src/Connected.Components/Components/Divider/Divider.razor.cs b/src/Connected.Components/Components/Divider/Divider.razor.cs
index cc32cae..a816b55 100644
--- a/src/Connected.Components/Components/Divider/Divider.razor.cs
+++ b/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>
diff --git a/src/Connected.Components/Components/Drawer/Drawer.razor b/src/Connected.Components/Components/Drawer/Drawer.razor
index 345b6d2..1963c24 100644
--- a/src/Connected.Components/Components/Drawer/Drawer.razor
+++ b/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
diff --git a/src/Connected.Components/Components/Drawer/Drawer.razor.cs b/src/Connected.Components/Components/Drawer/Drawer.razor.cs
index a9f0fe0..179ba4b 100644
--- a/src/Connected.Components/Components/Drawer/Drawer.razor.cs
+++ b/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; }
diff --git a/src/Connected.Components/Components/Drawer/DrawerContainer.razor b/src/Connected.Components/Components/Drawer/DrawerContainer.razor
index dbcbbce..c5868e6 100644
--- a/src/Connected.Components/Components/Drawer/DrawerContainer.razor
+++ b/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>
diff --git a/src/Connected.Components/Components/Drawer/DrawerContainer.razor.cs b/src/Connected.Components/Components/Drawer/DrawerContainer.razor.cs
index c342e68..af85420 100644
--- a/src/Connected.Components/Components/Drawer/DrawerContainer.razor.cs
+++ b/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; }
diff --git a/src/Connected.Components/Components/Drawer/DrawerHeader.razor b/src/Connected.Components/Components/Drawer/DrawerHeader.razor
index dd3efea..7dadc9d 100644
--- a/src/Connected.Components/Components/Drawer/DrawerHeader.razor
+++ b/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>
 }
diff --git a/src/Connected.Components/Components/Drawer/DrawerHeader.razor.cs b/src/Connected.Components/Components/Drawer/DrawerHeader.razor.cs
index 8082a1f..f600f53 100644
--- a/src/Connected.Components/Components/Drawer/DrawerHeader.razor.cs
+++ b/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>
diff --git a/src/Connected.Components/Components/DropZone/DropContainer.razor b/src/Connected.Components/Components/DropZone/DropContainer.razor
index 64a45e4..c89ad9f 100644
--- a/src/Connected.Components/Components/DropZone/DropContainer.razor
+++ b/src/Connected.Components/Components/DropZone/DropContainer.razor
@@ -3,8 +3,7 @@
 @typeparam T
 
 <CascadingValue Value="this" IsFixed="true">
-	<div @attributes="UserAttributes"
-		 style="@Style"
+	<div @attributes="CustomAttributes"
 		 class="@Classname">
 		@ChildContent
 	</div>
diff --git a/src/Connected.Components/Components/DropZone/DropContainer.razor.cs b/src/Connected.Components/Components/DropZone/DropContainer.razor.cs
index 0f37be9..f02be05 100644
--- a/src/Connected.Components/Components/DropZone/DropContainer.razor.cs
+++ b/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>
diff --git a/src/Connected.Components/Components/DropZone/DropZone.razor b/src/Connected.Components/Components/DropZone/DropZone.razor
index 5b56eb5..ccc0ef4 100644
--- a/src/Connected.Components/Components/DropZone/DropZone.razor
+++ b/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
 
diff --git a/src/Connected.Components/Components/DropZone/DropZone.razor.cs b/src/Connected.Components/Components/DropZone/DropZone.razor.cs
index d8ad9b6..5a9690a 100644
--- a/src/Connected.Components/Components/DropZone/DropZone.razor.cs
+++ b/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 =>
diff --git a/src/Connected.Components/Components/DropZone/DynamicDropItem.razor b/src/Connected.Components/Components/DropZone/DynamicDropItem.razor
index 998aadf..86f0edd 100644
--- a/src/Connected.Components/Components/DropZone/DynamicDropItem.razor
+++ b/src/Connected.Components/Components/DropZone/DynamicDropItem.razor
@@ -2,8 +2,8 @@
 @inherits UIComponent
 @typeparam T
 
-<div class="@Classname" style="@Style"
-	 @attributes="UserAttributes"
+<div class="@Classname"
+	 @attributes="CustomAttributes"
 	 draggable="@(Disabled == false ? "true" : "false")"
 	 @ondragstart="DragStarted"
 	 @ondragend="DragEnded"
diff --git a/src/Connected.Components/Components/DropZone/DynamicDropItem.razor.cs b/src/Connected.Components/Components/DropZone/DynamicDropItem.razor.cs
index a940b18..2caf4a7 100644
--- a/src/Connected.Components/Components/DropZone/DynamicDropItem.razor.cs
+++ b/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();
 
 }
diff --git a/src/Connected.Components/Components/Element/Element.cs b/src/Connected.Components/Components/Element/Element.cs
index edf9d84..9a76014 100644
--- a/src/Connected.Components/Components/Element/Element.cs
+++ b/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);
-      //Style
-      builder.AddAttribute(3, "style", Style);
+      builder.AddAttribute(2, "class", AdditionalClassList);
 
       // StopPropagation
       // the order matters. This has to be before content is added
diff --git a/src/Connected.Components/Components/ExpansionPanel/ExpansionPanel.razor b/src/Connected.Components/Components/ExpansionPanel/ExpansionPanel.razor
index d666023..144de9b 100644
--- a/src/Connected.Components/Components/ExpansionPanel/ExpansionPanel.razor
+++ b/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)
diff --git a/src/Connected.Components/Components/ExpansionPanel/ExpansionPanel.razor.cs b/src/Connected.Components/Components/ExpansionPanel/ExpansionPanel.razor.cs
index 1e4a91a..182c2c4 100644
--- a/src/Connected.Components/Components/ExpansionPanel/ExpansionPanel.razor.cs
+++ b/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 =>
diff --git a/src/Connected.Components/Components/ExpansionPanel/ExpansionPanels.razor b/src/Connected.Components/Components/ExpansionPanel/ExpansionPanels.razor
index a777bb5..c49d052 100644
--- a/src/Connected.Components/Components/ExpansionPanel/ExpansionPanels.razor
+++ b/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>
diff --git a/src/Connected.Components/Components/ExpansionPanel/ExpansionPanels.razor.cs b/src/Connected.Components/Components/ExpansionPanel/ExpansionPanels.razor.cs
index 5d6a0d8..058792e 100644
--- a/src/Connected.Components/Components/ExpansionPanel/ExpansionPanels.razor.cs
+++ b/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>
diff --git a/src/Connected.Components/Components/Field/Field.razor b/src/Connected.Components/Components/Field/Field.razor
index da86f54..28bc6ac 100644
--- a/src/Connected.Components/Components/Field/Field.razor
+++ b/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)
diff --git a/src/Connected.Components/Components/Field/Field.razor.cs b/src/Connected.Components/Components/Field/Field.razor.cs
index 498c0c2..3d1bfdb 100644
--- a/src/Connected.Components/Components/Field/Field.razor.cs
+++ b/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>
diff --git a/src/Connected.Components/Components/FileUpload/FileUpload.razor b/src/Connected.Components/Components/FileUpload/FileUpload.razor
index 55d5f44..e7b9b87 100644
--- a/src/Connected.Components/Components/FileUpload/FileUpload.razor
+++ b/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)
diff --git a/src/Connected.Components/Components/FileUpload/FileUpload.razor.cs b/src/Connected.Components/Components/FileUpload/FileUpload.razor.cs
index a7839b8..baf35f1 100644
--- a/src/Connected.Components/Components/FileUpload/FileUpload.razor.cs
+++ b/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>
diff --git a/src/Connected.Components/Components/FocusTrap/FocusTrap.razor b/src/Connected.Components/Components/FocusTrap/FocusTrap.razor
index 92a0fd0..8ce3845 100644
--- a/src/Connected.Components/Components/FocusTrap/FocusTrap.razor
+++ b/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"
diff --git a/src/Connected.Components/Components/FocusTrap/FocusTrap.razor.cs b/src/Connected.Components/Components/FocusTrap/FocusTrap.razor.cs
index f99f3c0..b6a24fe 100644
--- a/src/Connected.Components/Components/FocusTrap/FocusTrap.razor.cs
+++ b/src/Connected.Components/Components/FocusTrap/FocusTrap.razor.cs
@@ -9,7 +9,7 @@ public partial class FocusTrap : IDisposable
 {
 	protected string Classname =>
 		 new CssBuilder("outline-none")
-			  .AddClass(Class)
+			  .AddClass(AdditionalClassList)
 			  .Build();
 
 	protected ElementReference _firstBumper;
diff --git a/src/Connected.Components/Components/Form/Form.razor b/src/Connected.Components/Components/Form/Form.razor
index 76af19e..fed87cb 100644
--- a/src/Connected.Components/Components/Form/Form.razor
+++ b/src/Connected.Components/Components/Form/Form.razor
@@ -2,7 +2,7 @@
 @inherits UIComponent
 
 
-<form @attributes="UserAttributes" class="@Classname" style="@Style">
+<form @attributes="CustomAttributes" class="@Classname">
     @if (SuppressImplicitSubmission)
     {
         <!-- Prevent implicit submission of the form -->
diff --git a/src/Connected.Components/Components/Form/Form.razor.cs b/src/Connected.Components/Components/Form/Form.razor.cs
index f15fc80..f743305 100644
--- a/src/Connected.Components/Components/Form/Form.razor.cs
+++ b/src/Connected.Components/Components/Form/Form.razor.cs
@@ -8,7 +8,7 @@ public partial class Form : UIComponent, IDisposable, IForm
 {
 	protected string Classname =>
 		new CssBuilder("form")
-		.AddClass(Class)
+		.AddClass(AdditionalClassList)
 	.Build();
 
 	/// <summary>
diff --git a/src/Connected.Components/Components/Grid/Grid.razor b/src/Connected.Components/Components/Grid/Grid.razor
index d58da76..53c76f1 100644
--- a/src/Connected.Components/Components/Grid/Grid.razor
+++ b/src/Connected.Components/Components/Grid/Grid.razor
@@ -5,7 +5,7 @@
 @inherits UIComponent
 
 <CascadingValue Value="this" IsFixed="true">
-    <div @attributes="UserAttributes" class="@Classname" style="@Style">
+    <div @attributes="CustomAttributes" class="@Classname">
         @ChildContent
     </div>
 </CascadingValue>
@@ -16,7 +16,7 @@
     new CssBuilder("grid")
       .AddClass($"grid-spacing-xs-{Spacing.ToString()}")
       .AddClass($"justify-{Justify.ToDescriptionString()}")
-      .AddClass(Class)
+      .AddClass(AdditionalClassList)
     .Build();
 
     [Parameter]
diff --git a/src/Connected.Components/Components/Grid/Item.razor b/src/Connected.Components/Components/Grid/Item.razor
index c9d2e79..4c8d173 100644
--- a/src/Connected.Components/Components/Grid/Item.razor
+++ b/src/Connected.Components/Components/Grid/Item.razor
@@ -4,7 +4,7 @@
 @using Connected.Extensions
 @inherits UIComponent
 
-<div @attributes="UserAttributes" class="@Classname" style="@Style">
+<div @attributes="CustomAttributes" class="@Classname">
     @ChildContent
 </div>
 
@@ -17,7 +17,7 @@
         .AddClass($"grid-item-lg-{lg.ToString()}", lg != 0)
         .AddClass($"grid-item-xl-{xl.ToString()}", xl != 0)
         .AddClass($"grid-item-xxl-{xxl.ToString()}", xxl != 0)
-      .AddClass(Class)
+      .AddClass(AdditionalClassList)
     .Build();
 
     [CascadingParameter]
diff --git a/src/Connected.Components/Components/Highlighter/Highlighter.razor b/src/Connected.Components/Components/Highlighter/Highlighter.razor
index e1bde96..d1df9c3 100644
--- a/src/Connected.Components/Components/Highlighter/Highlighter.razor
+++ b/src/Connected.Components/Components/Highlighter/Highlighter.razor
@@ -13,7 +13,7 @@
                 ? RegexOptions.None
                 : RegexOptions.IgnoreCase))
     {
-        <mark class="@Class" style="@Style" @attributes="@UserAttributes"> @fragment </mark>
+        <mark class="@AdditionalClassList" @attributes="@CustomAttributes"> @fragment </mark>
     }
     else
     {
diff --git a/src/Connected.Components/Components/Icon/Icon.razor b/src/Connected.Components/Components/Icon/Icon.razor
index 33e8a90..4900ec0 100644
--- a/src/Connected.Components/Components/Icon/Icon.razor
+++ b/src/Connected.Components/Components/Icon/Icon.razor
@@ -3,7 +3,7 @@
 
 @if (!string.IsNullOrEmpty(Glyph) && Glyph.Trim().StartsWith(("<")))
 {
-    <svg @attributes="UserAttributes" class="@Classname" style="@Style" focusable="false" viewBox="@ViewBox" aria-hidden="true">
+    <svg @attributes="CustomAttributes" class="@Classname" focusable="false" viewBox="@ViewBox" aria-hidden="true">
         @if (Title != null)
         {
             <title>@Title</title>
@@ -14,5 +14,5 @@
 }
 else
 {
-    <span @attributes="UserAttributes" class="@($"{Classname} {Glyph}")" style="@Style" title="@Title" />
+    <span @attributes="CustomAttributes" class="@($"{Classname} {Glyph}")" title="@Title" />
 }
diff --git a/src/Connected.Components/Components/Icon/Icon.razor.cs b/src/Connected.Components/Components/Icon/Icon.razor.cs
index 4e2d5a0..6c910cc 100644
--- a/src/Connected.Components/Components/Icon/Icon.razor.cs
+++ b/src/Connected.Components/Components/Icon/Icon.razor.cs
@@ -13,7 +13,7 @@ public partial class Icon : UIComponent
            .AddClass($"svg-icon", !string.IsNullOrEmpty(Glyph) && Glyph.Trim().StartsWith(("<")))
            .AddClass($"{Color.ToDescriptionString()}-text", Color != ThemeColor.Default && Color != ThemeColor.Inherit)
            .AddClass($"icon-size-{Size.ToDescriptionString()}")
-           .AddClass(Class)
+           .AddClass(AdditionalClassList)
            .Build();
 
    /// <summary>
diff --git a/src/Connected.Components/Components/Image/Image.razor b/src/Connected.Components/Components/Image/Image.razor
index 7caa643..994588c 100644
--- a/src/Connected.Components/Components/Image/Image.razor
+++ b/src/Connected.Components/Components/Image/Image.razor
@@ -1,4 +1,4 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<img @attributes="UserAttributes" src="@Src" alt="@Alt" class="@Classname" style="@Style" width="@Width" height="@Height">
\ No newline at end of file
+<img @attributes="CustomAttributes" src="@Src" alt="@Alt" class="@Classname" width="@Width" height="@Height">
\ No newline at end of file
diff --git a/src/Connected.Components/Components/Image/Image.razor.cs b/src/Connected.Components/Components/Image/Image.razor.cs
index 1e4196e..d769eb7 100644
--- a/src/Connected.Components/Components/Image/Image.razor.cs
+++ b/src/Connected.Components/Components/Image/Image.razor.cs
@@ -17,7 +17,7 @@ public partial class Image : UIComponent
          .AddClass($"object-{ObjectFit.ToDescriptionString()}")
          .AddClass($"object-{ObjectPosition.ToDescriptionString()}")
          .AddClass($"elevation-{Elevation}", Elevation > 0)
-         .AddClass(Class)
+         .AddClass(AdditionalClassList)
          .Build();
 
    /// <summary>
@@ -74,5 +74,5 @@ public partial class Image : UIComponent
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.Image.Appearance)]
-   public ObjectPosition ObjectPosition { set; get; } = ObjectPosition.Center;
+   public Position ObjectPosition { set; get; } = Position.Center;
 }
diff --git a/src/Connected.Components/Components/Input/Input.razor b/src/Connected.Components/Components/Input/Input.razor
index d9e34cf..8a2751a 100644
--- a/src/Connected.Components/Components/Input/Input.razor
+++ b/src/Connected.Components/Components/Input/Input.razor
@@ -2,7 +2,7 @@
 @typeparam T
 @inherits InputBase<T>
 
-<div class="@Classname" style="@Style">
+<div class="@Classname">
 	@if (Adornment == Adornment.Start)
 	{
 	    <InputAdornment Class="@AdornmentClassname" 
@@ -21,7 +21,7 @@
 	    <textarea class="@InputClassname"
                 @ref="ElementReference" 
                 rows="@Lines" 
-                @attributes="UserAttributes"
+                @attributes="CustomAttributes"
                 type="@InputTypeString"                  
                 placeholder="@Placeholder" 
                 disabled=@Disabled 
@@ -53,7 +53,7 @@
 	{
 	    <input class="@InputClassname"
                 @ref="ElementReference" 
-                @attributes="UserAttributes" 
+                @attributes="CustomAttributes" 
                 type="@InputTypeString"                  
                 value="@_internalText" 
                 @oninput="OnInput" 
diff --git a/src/Connected.Components/Components/Input/InputCssHelper.cs b/src/Connected.Components/Components/Input/InputCssHelper.cs
index 716e041..6b7c411 100644
--- a/src/Connected.Components/Components/Input/InputCssHelper.cs
+++ b/src/Connected.Components/Components/Input/InputCssHelper.cs
@@ -15,7 +15,7 @@ internal static class InputCssHelper
          .AddClass("disabled", baseInput.Disabled)
          .AddClass("input-error", baseInput.HasErrors)
          .AddClass("ltr", baseInput.GetInputType() == InputType.Email || baseInput.GetInputType() == InputType.Telephone)
-         .AddClass(baseInput.Class)
+         .AddClass(baseInput.AdditionalClassList)
          .Build();
 
    public static string GetInputClassname<T>(InputBase<T> baseInput) =>
@@ -24,7 +24,7 @@ internal static class InputCssHelper
          .AddClass($"input-root-{baseInput.Variant.ToDescriptionString()}")
          .AddClass($"input-root-adorned-{baseInput.Adornment.ToDescriptionString()}", baseInput.Adornment != Adornment.None)
          .AddClass($"input-root-margin-{baseInput.Margin.ToDescriptionString()}", when: () => baseInput.Margin != Margin.None)
-         .AddClass(baseInput.Class)
+         .AddClass(baseInput.AdditionalClassList)
          .Build();
 
    public static string GetAdornmentClassname<T>(InputBase<T> baseInput) =>
@@ -32,6 +32,6 @@ internal static class InputCssHelper
          .AddClass($"input-adornment-{baseInput.Adornment.ToDescriptionString()}", baseInput.Adornment != Adornment.None)
          .AddClass($"text", !string.IsNullOrEmpty(baseInput.AdornmentText))
          .AddClass($"input-root-filled-shrink", baseInput.Variant == Variant.Filled)
-         .AddClass(baseInput.Class)
+         .AddClass(baseInput.AdditionalClassList)
          .Build();
 }
diff --git a/src/Connected.Components/Components/Input/InputLabel.razor b/src/Connected.Components/Components/Input/InputLabel.razor
index 679b0c9..59548b0 100644
--- a/src/Connected.Components/Components/Input/InputLabel.razor
+++ b/src/Connected.Components/Components/Input/InputLabel.razor
@@ -1,6 +1,6 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<label @attributes="UserAttributes" class="@Classname" style="@Style" for="@ForId">
+<label @attributes="CustomAttributes" class="@Classname" for="@ForId">
     @ChildContent
 </label>
diff --git a/src/Connected.Components/Components/Input/InputLabel.razor.cs b/src/Connected.Components/Components/Input/InputLabel.razor.cs
index 4a5728d..cd08152 100644
--- a/src/Connected.Components/Components/Input/InputLabel.razor.cs
+++ b/src/Connected.Components/Components/Input/InputLabel.razor.cs
@@ -13,7 +13,7 @@ public partial class InputLabel : UIComponent
     .AddClass($"input-label-margin-{Margin.ToDescriptionString()}", when: () => Margin != Margin.None)
     .AddClass($"disabled", Disabled)
     .AddClass("input-error", Error)
-    .AddClass(Class)
+    .AddClass(AdditionalClassList)
   .Build();
 
    /// <summary>
diff --git a/src/Connected.Components/Components/Input/RangeInput.razor b/src/Connected.Components/Components/Input/RangeInput.razor
index b90bb33..d38c193 100644
--- a/src/Connected.Components/Components/Input/RangeInput.razor
+++ b/src/Connected.Components/Components/Input/RangeInput.razor
@@ -2,7 +2,7 @@
 @typeparam T
 @inherits InputBase<Range<T>>
 
-<div class="@Classname" style="@Style">
+<div class="@Classname">
     @if (Adornment == Adornment.Start)
     {
         <InputAdornment Class="@AdornmentClassname" Icon="@AdornmentIcon" Color="@AdornmentColor" Size="@IconSize" Text="@AdornmentText" Edge="@Edge.Start" AdornmentClick="@OnAdornmentClick" AriaLabel="@AdornmentAriaLabel" />
@@ -15,10 +15,10 @@
         </div>
     }
 
-    <input @ref="_elementReferenceStart" @attributes="UserAttributes" type="@InputTypeString" class="@InputClassname" @bind-value="@TextStart" @bind-value:event="@((Immediate ? "oninput" : "onchange"))"
+    <input @ref="_elementReferenceStart" @attributes="CustomAttributes" type="@InputTypeString" class="@InputClassname" @bind-value="@TextStart" @bind-value:event="@((Immediate ? "oninput" : "onchange"))"
            placeholder="@PlaceholderStart" disabled=@Disabled readonly="@ReadOnly" @onblur="@OnBlurred" @onkeydown="@InvokeKeyDown" @onkeypress="@InvokeKeyPress" @onkeyup="@InvokeKeyUp" inputmode="@InputMode.ToString()" pattern="@Pattern" />
     <Icon Class="range-input-separator mud-flip-x-rtl" Icon="@SeparatorIcon" Color="@ThemeColor.Default" />
-    <input @ref="_elementReferenceEnd" @attributes="UserAttributes" type="@InputTypeString" class="@InputClassname" @bind-value="@TextEnd" @bind-value:event="@((Immediate ? "oninput" : "onchange"))" inputmode="@InputMode.ToString()" pattern="@Pattern"
+    <input @ref="_elementReferenceEnd" @attributes="CustomAttributes" type="@InputTypeString" class="@InputClassname" @bind-value="@TextEnd" @bind-value:event="@((Immediate ? "oninput" : "onchange"))" inputmode="@InputMode.ToString()" pattern="@Pattern"
            placeholder="@PlaceholderEnd" disabled=@Disabled readonly="@ReadOnly" @onblur="@OnBlurred" @onkeydown="@InvokeKeyDown" @onkeypress="@InvokeKeyPress" @onkeyup="@InvokeKeyUp" />
 
     @if (Adornment == Adornment.End)
diff --git a/src/Connected.Components/Components/InputControl/InputControl.razor b/src/Connected.Components/Components/InputControl/InputControl.razor
index 3da1a2c..e52ecb3 100644
--- a/src/Connected.Components/Components/InputControl/InputControl.razor
+++ b/src/Connected.Components/Components/InputControl/InputControl.razor
@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div @attributes="UserAttributes" class="@Classname" style="@Style">
+<div @attributes="CustomAttributes" class="@Classname">
     <div class="input-control-input-container">
         @InputContent
         @if (!String.IsNullOrEmpty(Label))
diff --git a/src/Connected.Components/Components/InputControl/InputControl.razor.cs b/src/Connected.Components/Components/InputControl/InputControl.razor.cs
index d885f7d..7d22b42 100644
--- a/src/Connected.Components/Components/InputControl/InputControl.razor.cs
+++ b/src/Connected.Components/Components/InputControl/InputControl.razor.cs
@@ -12,7 +12,7 @@ public partial class InputControl : UIComponent
 		 .AddClass($"input-control-margin-{Margin.ToDescriptionString()}", when: () => Margin != Margin.None)
 		 .AddClass("input-control-full-width", FullWidth)
 		 .AddClass("input-error", Error)
-		 .AddClass(Class)
+		 .AddClass(AdditionalClassList)
 		.Build();
 
 	protected string HelperContainer =>
diff --git a/src/Connected.Components/Components/Layout/Layout.razor b/src/Connected.Components/Components/Layout/Layout.razor
index 9017f0e..b10b31c 100644
--- a/src/Connected.Components/Components/Layout/Layout.razor
+++ b/src/Connected.Components/Components/Layout/Layout.razor
@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits DrawerContainer
 
-<div @attributes="UserAttributes" class="@Classname" style="@Stylename">
+<div @attributes="CustomAttributes" class="@Classname" style="@Stylename">
     <CascadingValue IsFixed="true" Value="@this">
         @ChildContent
     </CascadingValue>
diff --git a/src/Connected.Components/Components/Link/Link.razor b/src/Connected.Components/Components/Link/Link.razor
index f6f883f..5793864 100644
--- a/src/Connected.Components/Components/Link/Link.razor
+++ b/src/Connected.Components/Components/Link/Link.razor
@@ -1,6 +1,6 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<a @attributes="Attributes" @onclick="OnClickHandler" class="@Classname" style="@Style">
+<a @attributes="Attributes" @onclick="OnClickHandler" class="@Classname">
     @ChildContent
 </a>
\ No newline at end of file
diff --git a/src/Connected.Components/Components/Link/Link.razor.cs b/src/Connected.Components/Components/Link/Link.razor.cs
index 058b026..8ec125d 100644
--- a/src/Connected.Components/Components/Link/Link.razor.cs
+++ b/src/Connected.Components/Components/Link/Link.razor.cs
@@ -17,12 +17,12 @@ public partial class Link : UIComponent
 	  // To change this for more expected look change hover cursor to a pointer:
 	  .AddClass("cursor-pointer", Href == default && OnClick.HasDelegate && !Disabled)
 	  .AddClass($"link-disabled", Disabled)
-	  .AddClass(Class)
+	  .AddClass(AdditionalClassList)
 	.Build();
 
 	private Dictionary<string, object> Attributes
 	{
-		get => Disabled ? UserAttributes : new Dictionary<string, object>(UserAttributes)
+		get => Disabled ? CustomAttributes : new Dictionary<string, object>(CustomAttributes)
 		 {
 			 { "href", Href },
 			 { "target", Target }
diff --git a/src/Connected.Components/Components/List/List.razor b/src/Connected.Components/Components/List/List.razor
index 7747798..8e8296c 100644
--- a/src/Connected.Components/Components/List/List.razor
+++ b/src/Connected.Components/Components/List/List.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>
diff --git a/src/Connected.Components/Components/List/List.razor.cs b/src/Connected.Components/Components/List/List.razor.cs
index 8f8510b..0ea17b6 100644
--- a/src/Connected.Components/Components/List/List.razor.cs
+++ b/src/Connected.Components/Components/List/List.razor.cs
@@ -9,7 +9,7 @@ public partial class List : UIComponent, IDisposable
 	protected string Classname =>
 	new CssBuilder("list")
 		.AddClass("list-padding", !DisablePadding)
-	  .AddClass(Class)
+	  .AddClass(AdditionalClassList)
 	.Build();
 
 	[CascadingParameter] protected List ParentList { get; set; }
diff --git a/src/Connected.Components/Components/List/ListItem.razor b/src/Connected.Components/Components/List/ListItem.razor
index a16ec07..ae370ac 100644
--- a/src/Connected.Components/Components/List/ListItem.razor
+++ b/src/Connected.Components/Components/List/ListItem.razor
@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div tabindex="0" @attributes="UserAttributes" class="@Classname" @onclick="OnClickHandler" @onclick:stopPropagation="true" style="@Style">
+<div tabindex="0" @attributes="CustomAttributes" class="@Classname" @onclick="OnClickHandler" @onclick:stopPropagation="true">
     @if (!string.IsNullOrWhiteSpace(Avatar))
     {
         <div class="list-item-avatar">
diff --git a/src/Connected.Components/Components/List/ListItem.razor.cs b/src/Connected.Components/Components/List/ListItem.razor.cs
index 147cf01..eb22d95 100644
--- a/src/Connected.Components/Components/List/ListItem.razor.cs
+++ b/src/Connected.Components/Components/List/ListItem.razor.cs
@@ -17,7 +17,7 @@ public partial class ListItem : UIComponent, IDisposable
 	  .AddClass("ripple", List?.Clickable == true && !DisableRipple && !Disabled)
 	  .AddClass($"selected-item mud-{List?.Color.ToDescriptionString()}-text mud-{List?.Color.ToDescriptionString()}-hover", _selected && !Disabled)
 	  .AddClass("list-item-disabled", Disabled)
-	  .AddClass(Class)
+	  .AddClass(AdditionalClassList)
 	.Build();
 
 	[Inject] protected NavigationManager UriHelper { get; set; }
diff --git a/src/Connected.Components/Components/List/ListSubheader.razor b/src/Connected.Components/Components/List/ListSubheader.razor
index da208cd..8a71571 100644
--- a/src/Connected.Components/Components/List/ListSubheader.razor
+++ b/src/Connected.Components/Components/List/ListSubheader.razor
@@ -1,6 +1,6 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div @attributes="UserAttributes" class="@Classname" style="@Style">
+<div @attributes="CustomAttributes" class="@Classname">
     @ChildContent
 </div>
diff --git a/src/Connected.Components/Components/List/ListSubheader.razor.cs b/src/Connected.Components/Components/List/ListSubheader.razor.cs
index 5e6105a..616821a 100644
--- a/src/Connected.Components/Components/List/ListSubheader.razor.cs
+++ b/src/Connected.Components/Components/List/ListSubheader.razor.cs
@@ -10,7 +10,7 @@ public partial class ListSubheader : UIComponent
 	new CssBuilder("list-subheader")
 		.AddClass("list-subheader-gutters", !DisableGutters)
 		.AddClass("list-subheader-inset", Inset)
-	  .AddClass(Class)
+	  .AddClass(AdditionalClassList)
 	.Build();
 
 	[Parameter]
diff --git a/src/Connected.Components/Components/Main/MainContent.razor b/src/Connected.Components/Components/Main/MainContent.razor
index 3bdb2fc..5c85d57 100644
--- a/src/Connected.Components/Components/Main/MainContent.razor
+++ b/src/Connected.Components/Components/Main/MainContent.razor
@@ -3,7 +3,7 @@
 @using Connected.Utilities;
 @inherits UIComponent
 
-<div @attributes="UserAttributes" class="@Classname" style="@Style">
+<div @attributes="CustomAttributes" class="@Classname">
     @ChildContent
 </div>
 
@@ -11,7 +11,7 @@
 
     protected string Classname =>
     new CssBuilder("main-content")
-        .AddClass(Class)
+        .AddClass(AdditionalClassList)
      .Build();
 
     [Parameter]
diff --git a/src/Connected.Components/Components/Mask/Mask.razor b/src/Connected.Components/Components/Mask/Mask.razor
index 8b276a1..80c5fa8 100644
--- a/src/Connected.Components/Components/Mask/Mask.razor
+++ b/src/Connected.Components/Components/Mask/Mask.razor
@@ -2,7 +2,7 @@
 @using Connected.Extensions;
 @inherits InputBase<string>
 
-<div id="@_elementId" class="@Classname" style="@Style">
+<div id="@_elementId" class="@Classname">
     @if (Adornment == Adornment.Start)
     {
         <InputAdornment Class="@AdornmentClassname"
@@ -16,7 +16,7 @@
 
     <input class="@InputClassname"
            @ref="_elementReference"
-           @attributes="UserAttributes"
+           @attributes="CustomAttributes"
            type="@InputType.ToDescriptionString()"
            value="@Text"
            placeholder="@Placeholder"
diff --git a/src/Connected.Components/Components/Mask/Mask.razor.cs b/src/Connected.Components/Components/Mask/Mask.razor.cs
index 490990c..bf41dc9 100644
--- a/src/Connected.Components/Components/Mask/Mask.razor.cs
+++ b/src/Connected.Components/Components/Mask/Mask.razor.cs
@@ -31,7 +31,7 @@ public partial class Mask : InputBase<string>, IDisposable
          .AddClass("disabled", Disabled)
          .AddClass("input-error", HasErrors)
          .AddClass("ltr", GetInputType() == InputType.Email || GetInputType() == InputType.Telephone)
-         .AddClass(Class)
+         .AddClass(AdditionalClassList)
          .Build();
 
    protected string InputClassname =>
@@ -40,7 +40,7 @@ public partial class Mask : InputBase<string>, IDisposable
          .AddClass($"input-root-{Variant.ToDescriptionString()}")
          .AddClass($"input-root-adorned-{Adornment.ToDescriptionString()}", Adornment != Adornment.None)
          .AddClass($"input-root-margin-{Margin.ToDescriptionString()}", when: () => Margin != Margin.None)
-         .AddClass(Class)
+         .AddClass(AdditionalClassList)
          .Build();
 
    protected string AdornmentClassname =>
@@ -48,7 +48,7 @@ public partial class Mask : InputBase<string>, IDisposable
          .AddClass($"input-adornment-{Adornment.ToDescriptionString()}", Adornment != Adornment.None)
          .AddClass($"text", !string.IsNullOrEmpty(AdornmentText))
          .AddClass($"input-root-filled-shrink", Variant == Variant.Filled)
-         .AddClass(Class)
+         .AddClass(AdditionalClassList)
          .Build();
 
    protected string ClearButtonClassname =>
diff --git a/src/Connected.Components/Components/Menu/Menu.razor b/src/Connected.Components/Components/Menu/Menu.razor
index ec84cfc..d1069ad 100644
--- a/src/Connected.Components/Components/Menu/Menu.razor
+++ b/src/Connected.Components/Components/Menu/Menu.razor
@@ -2,7 +2,7 @@
 @inherits UIComponent
 
 
-<div @attributes="UserAttributes" Class="@Classname" Style="@Style" 
+<div @attributes="CustomAttributes" Class="@Classname"
         @onmouseenter="@MouseEnter"
         @onmouseleave="@MouseLeave"
         @oncontextmenu:preventDefault="@(ActivationEvent == MouseEvent.RightClick ? true : false)">
diff --git a/src/Connected.Components/Components/Menu/Menu.razor.cs b/src/Connected.Components/Components/Menu/Menu.razor.cs
index b4739fe..7d47627 100644
--- a/src/Connected.Components/Components/Menu/Menu.razor.cs
+++ b/src/Connected.Components/Components/Menu/Menu.razor.cs
@@ -11,7 +11,7 @@ public partial class Menu : UIComponent, IActivatable
 {
 	protected string Classname =>
 	new CssBuilder("menu")
-	.AddClass(Class)
+	.AddClass(AdditionalClassList)
 	.Build();
 
 	protected string ActivatorClassname =>
diff --git a/src/Connected.Components/Components/Menu/MenuItem.razor b/src/Connected.Components/Components/Menu/MenuItem.razor
index 3f31277..c6a0af7 100644
--- a/src/Connected.Components/Components/Menu/MenuItem.razor
+++ b/src/Connected.Components/Components/Menu/MenuItem.razor
@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<ListItem @attributes="UserAttributes" @onclick="OnClickHandler" @ontouchend="@OnTouchHandler" Disabled="@Disabled" Class="@Class" Style="@Style" Icon="@Icon" IconColor="@IconColor" IconSize="@IconSize">
+<ListItem @attributes="CustomAttributes" @onclick="OnClickHandler" @ontouchend="@OnTouchHandler" Disabled="@Disabled" Class="@AdditionalClassList" Icon="@Icon" IconColor="@IconColor" IconSize="@IconSize">
     @ChildContent
 </ListItem>
 
diff --git a/src/Connected.Components/Components/MessageBox/MessageBox.razor b/src/Connected.Components/Components/MessageBox/MessageBox.razor
index a1d76a2..2517e0f 100644
--- a/src/Connected.Components/Components/MessageBox/MessageBox.razor
+++ b/src/Connected.Components/Components/MessageBox/MessageBox.razor
@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<Dialog @attributes="UserAttributes">
+<Dialog @attributes="CustomAttributes">
     <TitleContent>
         @if (TitleContent == null)
         {
diff --git a/src/Connected.Components/Components/NavMenu/NavGroup.razor b/src/Connected.Components/Components/NavMenu/NavGroup.razor
index 0b25e3a..6506a68 100644
--- a/src/Connected.Components/Components/NavMenu/NavGroup.razor
+++ b/src/Connected.Components/Components/NavMenu/NavGroup.razor
@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div @attributes="UserAttributes" class=@Classname disabled="@Disabled" style="@Style">
+<div @attributes="CustomAttributes" class=@Classname disabled="@Disabled">
     <button @onclick="ExpandedToggle" tabindex="0" class="@ButtonClassname">
         @if (!String.IsNullOrEmpty(Icon))
         {
diff --git a/src/Connected.Components/Components/NavMenu/NavGroup.razor.cs b/src/Connected.Components/Components/NavMenu/NavGroup.razor.cs
index 66cd3d3..1cb3c2a 100644
--- a/src/Connected.Components/Components/NavMenu/NavGroup.razor.cs
+++ b/src/Connected.Components/Components/NavMenu/NavGroup.razor.cs
@@ -8,7 +8,7 @@ public partial class NavGroup : UIComponent
 {
    protected string Classname =>
    new CssBuilder("nav-group")
-     .AddClass(Class)
+     .AddClass(AdditionalClassList)
      .AddClass($"nav-group-disabled", Disabled)
      .Build();
 
diff --git a/src/Connected.Components/Components/NavMenu/NavLink.razor b/src/Connected.Components/Components/NavMenu/NavLink.razor
index f00adfc..7c07d95 100644
--- a/src/Connected.Components/Components/NavMenu/NavLink.razor
+++ b/src/Connected.Components/Components/NavMenu/NavLink.razor
@@ -2,7 +2,7 @@
 @inherits SelectItemBase
 @using Microsoft.AspNetCore.Components.Routing
 
-<div @attributes="UserAttributes" class="@Classname" disabled="@Disabled" style="@Style">
+<div @attributes="CustomAttributes" class="@Classname" disabled="@Disabled">
     @if (!OnClick.HasDelegate && Command == null)
     {
       <Microsoft.AspNetCore.Components.Routing.NavLink @onclick="@HandleNavigation"
diff --git a/src/Connected.Components/Components/NavMenu/NavLink.razor.cs b/src/Connected.Components/Components/NavMenu/NavLink.razor.cs
index 4ba7681..25d790c 100644
--- a/src/Connected.Components/Components/NavMenu/NavLink.razor.cs
+++ b/src/Connected.Components/Components/NavMenu/NavLink.razor.cs
@@ -10,7 +10,7 @@ public partial class NavLink : SelectItemBase
 	protected string Classname =>
 	new CssBuilder("nav-item")
 	  .AddClass($"ripple", !DisableRipple && !Disabled)
-	  .AddClass(Class)
+	  .AddClass(AdditionalClassList)
 	  .Build();
 
 	protected string LinkClassname =>
diff --git a/src/Connected.Components/Components/NavMenu/NavMenu.razor b/src/Connected.Components/Components/NavMenu/NavMenu.razor
index da208cd..8a71571 100644
--- a/src/Connected.Components/Components/NavMenu/NavMenu.razor
+++ b/src/Connected.Components/Components/NavMenu/NavMenu.razor
@@ -1,6 +1,6 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div @attributes="UserAttributes" class="@Classname" style="@Style">
+<div @attributes="CustomAttributes" class="@Classname">
     @ChildContent
 </div>
diff --git a/src/Connected.Components/Components/NavMenu/NavMenu.razor.cs b/src/Connected.Components/Components/NavMenu/NavMenu.razor.cs
index 6446281..8e93ae6 100644
--- a/src/Connected.Components/Components/NavMenu/NavMenu.razor.cs
+++ b/src/Connected.Components/Components/NavMenu/NavMenu.razor.cs
@@ -14,7 +14,7 @@ public partial class NavMenu : UIComponent
 		.AddClass("navmenu-dense", Dense)
 		.AddClass("navmenu-rounded", Rounded)
 		.AddClass($"navmenu-bordered mud-border-{Color.ToDescriptionString()}", Bordered)
-		.AddClass(Class)
+		.AddClass(AdditionalClassList)
 	.Build();
 
 	[Category(CategoryTypes.NavMenu.Behavior)]
diff --git a/src/Connected.Components/Components/NumericField/NumericField.razor b/src/Connected.Components/Components/NumericField/NumericField.razor
index aab516c..e816af2 100644
--- a/src/Connected.Components/Components/NumericField/NumericField.razor
+++ b/src/Connected.Components/Components/NumericField/NumericField.razor
@@ -23,9 +23,8 @@
             <CascadingValue Name="SubscribeToParentForm" Value="false" IsFixed="true">
                 <Input T="string"
                           @ref="@_elementReference"
-                          @attributes="@UserAttributes"
+                          @attributes="@CustomAttributes"
                           InputType="@InputType.Text"
-                          Style="@Style"
                           Variant="@Variant"
                           TextUpdateSuppression="@TextUpdateSuppression"
                           Value="@Text"
diff --git a/src/Connected.Components/Components/NumericField/NumericField.razor.cs b/src/Connected.Components/Components/NumericField/NumericField.razor.cs
index 61f97ba..c5c2ebe 100644
--- a/src/Connected.Components/Components/NumericField/NumericField.razor.cs
+++ b/src/Connected.Components/Components/NumericField/NumericField.razor.cs
@@ -108,7 +108,7 @@ public partial class NumericField<T> : DebouncedInput<T>
    protected string Classname =>
       new CssBuilder("input-input-control mud-input-number-control " +
                   (HideSpinButtons ? "input-nospin" : "input-showspin"))
-         .AddClass(Class)
+         .AddClass(AdditionalClassList)
          .Build();
 
 
diff --git a/src/Connected.Components/Components/Overlay/Overlay.razor b/src/Connected.Components/Components/Overlay/Overlay.razor
index 04e97bf..4179a76 100644
--- a/src/Connected.Components/Components/Overlay/Overlay.razor
+++ b/src/Connected.Components/Components/Overlay/Overlay.razor
@@ -3,7 +3,7 @@
 
 @if (Visible)
 {
-    <div @attributes="UserAttributes" class="@Classname" style="@Styles" @onclick="OnClickHandler" @onclick:stopPropagation="true">
+    <div @attributes="CustomAttributes" class="@Classname" style="@Styles" @onclick="OnClickHandler" @onclick:stopPropagation="true">
         @if(LightBackground || DarkBackground)
         {
             <div class="@ScrimClassname"></div>
diff --git a/src/Connected.Components/Components/Overlay/Overlay.razor.cs b/src/Connected.Components/Components/Overlay/Overlay.razor.cs
index 845577b..dc2da1e 100644
--- a/src/Connected.Components/Components/Overlay/Overlay.razor.cs
+++ b/src/Connected.Components/Components/Overlay/Overlay.razor.cs
@@ -13,7 +13,7 @@ public partial class Overlay : UIComponent, IDisposable
    protected string Classname =>
       new CssBuilder("overlay")
          .AddClass("overlay-absolute", Absolute)
-         .AddClass(Class)
+         .AddClass(AdditionalClassList)
          .Build();
 
    protected string ScrimClassname =>
@@ -25,7 +25,6 @@ public partial class Overlay : UIComponent, IDisposable
    protected string Styles =>
       new StyleBuilder()
       .AddStyle("z-index", $"{ZIndex}", ZIndex != 5)
-      .AddStyle(Style)
       .Build();
 
    [Inject] public IScrollManager ScrollManager { get; set; }
diff --git a/src/Connected.Components/Components/PageContentNavigation/PageContentNavigation.razor b/src/Connected.Components/Components/PageContentNavigation/PageContentNavigation.razor
index 669e1ee..4df1ebc 100644
--- a/src/Connected.Components/Components/PageContentNavigation/PageContentNavigation.razor
+++ b/src/Connected.Components/Components/PageContentNavigation/PageContentNavigation.razor
@@ -2,7 +2,7 @@
 @inherits UIComponent
 @using Microsoft.AspNetCore.Components.Routing
 
-<div class="@GetPanelClass()" @attributes="UserAttributes">
+<div class="@GetPanelClass()" @attributes="CustomAttributes">
     @if (_sections.Any() && _sections.Count() > 1)
     {
         <TextContent Typo="Typo.subtitle1" Class="title" GutterBottom="true">
diff --git a/src/Connected.Components/Components/PageContentNavigation/PageContentNavigation.razor.cs b/src/Connected.Components/Components/PageContentNavigation/PageContentNavigation.razor.cs
index 0ab4141..141ca53 100644
--- a/src/Connected.Components/Components/PageContentNavigation/PageContentNavigation.razor.cs
+++ b/src/Connected.Components/Components/PageContentNavigation/PageContentNavigation.razor.cs
@@ -82,7 +82,7 @@ public partial class PageContentNavigation : IAsyncDisposable
       .AddClass($"navigation-level-{section.Level}")
       .Build();
 
-   private string GetPanelClass() => new CssBuilder("page-content-navigation").AddClass(Class).Build();
+   private string GetPanelClass() => new CssBuilder("page-content-navigation").AddClass(AdditionalClassList).Build();
 
    /// <summary>
    /// Scrolls to a section based on the fragment of the uri. If there is no fragment, no scroll will occured
diff --git a/src/Connected.Components/Components/Pagination/Pagination.razor b/src/Connected.Components/Components/Pagination/Pagination.razor
index 3f5aa3b..c63e0a4 100644
--- a/src/Connected.Components/Components/Pagination/Pagination.razor
+++ b/src/Connected.Components/Components/Pagination/Pagination.razor
@@ -2,7 +2,7 @@
 
 @inherits UIComponent
 
-<Element HtmlTag="ul" Class="@Classname" Style="@Style" Tag="@Tag" UserAttributes="@UserAttributes">
+<Element HtmlTag="ul" Class="@Classname" Tag="@Tag" UserAttributes="@CustomAttributes">
     @if (ShowFirstButton)
     {
         <li class="@ItemClassname">
diff --git a/src/Connected.Components/Components/Pagination/Pagination.razor.cs b/src/Connected.Components/Components/Pagination/Pagination.razor.cs
index ca1de95..a256fdf 100644
--- a/src/Connected.Components/Components/Pagination/Pagination.razor.cs
+++ b/src/Connected.Components/Components/Pagination/Pagination.razor.cs
@@ -20,7 +20,7 @@ public partial class Pagination : UIComponent
          .AddClass($"pagination-{Size.ToDescriptionString()}")
          .AddClass("pagination-disable-elevation", DisableElevation)
          .AddClass("pagination-rtl", RightToLeft)
-         .AddClass(Class)
+         .AddClass(AdditionalClassList)
          .Build();
 
    private string ItemClassname =>
diff --git a/src/Connected.Components/Components/Paper/Paper.razor b/src/Connected.Components/Components/Paper/Paper.razor
index 24b4757..0aa8435 100644
--- a/src/Connected.Components/Components/Paper/Paper.razor
+++ b/src/Connected.Components/Components/Paper/Paper.razor
@@ -1,6 +1,6 @@
 @namespace Connected.Components
 @inherits UIComponent;
 
-<div @attributes="UserAttributes" class="@Classname" style="@Stylename">
+<div @attributes="CustomAttributes" class="@Classname" style="@Stylename">
     @ChildContent
 </div>
\ No newline at end of file
diff --git a/src/Connected.Components/Components/Paper/Paper.razor.cs b/src/Connected.Components/Components/Paper/Paper.razor.cs
index 751f275..7edabe4 100644
--- a/src/Connected.Components/Components/Paper/Paper.razor.cs
+++ b/src/Connected.Components/Components/Paper/Paper.razor.cs
@@ -15,7 +15,7 @@ public partial class Paper : UIComponent
      .AddClass($"paper-outlined", Outlined)
      .AddClass($"paper-square", Square)
      .AddClass($"elevation-{Elevation.ToString()}", !Outlined)
-     .AddClass(Class)
+     .AddClass(AdditionalClassList)
    .Build();
 
    protected string Stylename =>
@@ -26,7 +26,6 @@ public partial class Paper : UIComponent
       .AddStyle("max-width", $"{MaxWidth}", !String.IsNullOrEmpty(MaxWidth))
       .AddStyle("min-height", $"{MinHeight}", !String.IsNullOrEmpty(MinHeight))
       .AddStyle("min-width", $"{MinWidth}", !String.IsNullOrEmpty(MinWidth))
-      .AddStyle(Style)
    .Build();
 
    /// <summary>
diff --git a/src/Connected.Components/Components/Picker/Picker.razor b/src/Connected.Components/Components/Picker/Picker.razor
index bbac807..c6f4890 100644
--- a/src/Connected.Components/Components/Picker/Picker.razor
+++ b/src/Connected.Components/Components/Picker/Picker.razor
@@ -11,8 +11,7 @@
         @<TextField 
              T="string" 
              @ref="_inputReference" 
-             @attributes="UserAttributes" 
-             Style="@Style"
+             @attributes="CustomAttributes" 
              Label="@Label" 
              Mask="@_mask"
              @bind-Value="@Text" 
@@ -56,7 +55,7 @@
             {
 				<Popover Open="IsOpen" Fixed="true" AnchorOrigin="@(AnchorOrigin)" TransformOrigin="@(TransformOrigin)" OverflowBehavior="OverflowBehavior.FlipOnOpen" Paper="false">
 				   <div @ref="_pickerInlineRef" class="@PickerInlineClass">
-					   <Paper @attributes="UserAttributes" Class="@PickerPaperClass" Elevation="@_pickerElevation" Square="@_pickerSquare">
+					   <Paper @attributes="CustomAttributes" Class="@PickerPaperClass" Elevation="@_pickerElevation" Square="@_pickerSquare">
 						   <div class="@PickerContainerClass">
 							   @if(PickerContent != null){
 								   @PickerContent
@@ -74,7 +73,7 @@
             }
             else if (PickerVariant == PickerVariant.Static)
             {
-               <Paper @attributes="UserAttributes" Class="@PickerPaperClass" Elevation="@_pickerElevation" Square="@_pickerSquare">
+               <Paper @attributes="CustomAttributes" Class="@PickerPaperClass" Elevation="@_pickerElevation" Square="@_pickerSquare">
                    <div class="@PickerContainerClass">
 					   @if(PickerContent != null){
 						   @PickerContent
@@ -91,7 +90,7 @@
             else if(IsOpen && PickerVariant == PickerVariant.Dialog)
             {
                <Overlay Visible="IsOpen" OnClick="CloseOverlay" DarkBackground="true" Class="overlay-dialog">
-                   <Paper @attributes="UserAttributes" Class="@PickerPaperClass" Elevation="@_pickerElevation" Square="@_pickerSquare">
+                   <Paper @attributes="CustomAttributes" Class="@PickerPaperClass" Elevation="@_pickerElevation" Square="@_pickerSquare">
                        <div class="@PickerContainerClass">
 							@if(PickerContent != null){
 								@PickerContent
diff --git a/src/Connected.Components/Components/Picker/Picker.razor.cs b/src/Connected.Components/Components/Picker/Picker.razor.cs
index 2045fc7..c0b5e8a 100644
--- a/src/Connected.Components/Components/Picker/Picker.razor.cs
+++ b/src/Connected.Components/Components/Picker/Picker.razor.cs
@@ -29,7 +29,7 @@ public partial class Picker<T> : FormComponent<T, string>
          .AddClass($"picker-input-button", !Editable && PickerVariant != PickerVariant.Static)
          .AddClass($"picker-input-text", Editable && PickerVariant != PickerVariant.Static)
          .AddClass($"disabled", Disabled && PickerVariant != PickerVariant.Static)
-         .AddClass(Class)
+         .AddClass(AdditionalClassList)
          .Build();
 
    protected string PickerPaperClass =>
@@ -53,7 +53,7 @@ public partial class Picker<T> : FormComponent<T, string>
          .Build();
 
    protected string PickerInputClass =>
-      new CssBuilder("input-input-control").AddClass(Class)
+      new CssBuilder("input-input-control").AddClass(AdditionalClassList)
          .Build();
 
    protected string ActionClass => new CssBuilder("picker-actions")
diff --git a/src/Connected.Components/Components/Popover/Popover.razor.cs b/src/Connected.Components/Components/Popover/Popover.razor.cs
index 475fc26..5e310a0 100644
--- a/src/Connected.Components/Components/Popover/Popover.razor.cs
+++ b/src/Connected.Components/Components/Popover/Popover.razor.cs
@@ -23,7 +23,7 @@ public partial class Popover : UIComponent, IAsyncDisposable
 		.AddClass($"paper-square", Paper && Square)
 		.AddClass($"elevation-{Elevation}", Paper)
 		.AddClass($"overflow-y-auto", MaxHeight != null)
-		.AddClass(Class)
+		.AddClass(AdditionalClassList)
 		.Build();
 
 	protected string PopoverStyles =>
@@ -31,7 +31,6 @@ public partial class Popover : UIComponent, IAsyncDisposable
 		.AddStyle("transition-duration", $"{Duration}ms")
 		.AddStyle("transition-delay", $"{Delay}ms")
 		.AddStyle("max-height", MaxHeight.ToPx(), MaxHeight != null)
-		.AddStyle(Style)
 		.Build();
 
 	internal Direction ConvertDirection(Direction direction)
diff --git a/src/Connected.Components/Components/Popover/PopoverService.cs b/src/Connected.Components/Components/Popover/PopoverService.cs
index b1fe11f..b4d9fab 100644
--- a/src/Connected.Components/Components/Popover/PopoverService.cs
+++ b/src/Connected.Components/Components/Popover/PopoverService.cs
@@ -51,7 +51,7 @@ public class PopoverHandler
       Class = @class;
       Style = style;
       Tag = componentBase.Tag;
-      UserAttributes = componentBase.UserAttributes;
+      UserAttributes = componentBase.CustomAttributes;
       ShowContent = showContent;
       if (showContent == true)
       {
diff --git a/src/Connected.Components/Components/Progress/ProgressCircular.razor b/src/Connected.Components/Components/Progress/ProgressCircular.razor
index 2dbaae4..c2d6a7e 100644
--- a/src/Connected.Components/Components/Progress/ProgressCircular.razor
+++ b/src/Connected.Components/Components/Progress/ProgressCircular.razor
@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div @attributes="UserAttributes" class="@DivClassname" role="progressbar" style="@Style" aria-valuenow="@Value">
+<div @attributes="CustomAttributes" class="@DivClassname" role="progressbar" aria-valuenow="@Value">
     <svg class="progress-circular-svg" viewBox="22 22 44 44">
         @if (Indeterminate)
         {
diff --git a/src/Connected.Components/Components/Progress/ProgressCircular.razor.cs b/src/Connected.Components/Components/Progress/ProgressCircular.razor.cs
index 351eaad..5c93766 100644
--- a/src/Connected.Components/Components/Progress/ProgressCircular.razor.cs
+++ b/src/Connected.Components/Components/Progress/ProgressCircular.razor.cs
@@ -16,7 +16,7 @@ public partial class ProgressCircular : UIComponent
            .AddClass($"progress-{Size.ToDescriptionString()}")
            .AddClass($"progress-indeterminate", Indeterminate)
            .AddClass($"progress-static", !Indeterminate)
-           .AddClass(Class)
+           .AddClass(AdditionalClassList)
            .Build();
 
    protected string SvgClassname =>
diff --git a/src/Connected.Components/Components/Progress/ProgressLinear.razor b/src/Connected.Components/Components/Progress/ProgressLinear.razor
index cb4234b..23de03b 100644
--- a/src/Connected.Components/Components/Progress/ProgressLinear.razor
+++ b/src/Connected.Components/Components/Progress/ProgressLinear.razor
@@ -2,7 +2,7 @@
 @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 @attributes="CustomAttributes" class="@DivClassname" role="progressbar" aria-valuenow="@_value.ToInvariantString()" aria-valuemin="@_min.ToInvariantString()" aria-valuemax="@_max.ToInvariantString()">
     <div class="progress-linear-bars">
         @if (Indeterminate)
         {
diff --git a/src/Connected.Components/Components/Progress/ProgressLinear.razor.cs b/src/Connected.Components/Components/Progress/ProgressLinear.razor.cs
index ec38dd9..40b282d 100644
--- a/src/Connected.Components/Components/Progress/ProgressLinear.razor.cs
+++ b/src/Connected.Components/Components/Progress/ProgressLinear.razor.cs
@@ -20,7 +20,7 @@ public partial class ProgressLinear : UIComponent
          .AddClass("horizontal", !Vertical)
          .AddClass("vertical", Vertical)
          .AddClass("flip-x-rtl")
-         .AddClass(Class)
+         .AddClass(AdditionalClassList)
          .Build();
 
    /// <summary>
diff --git a/src/Connected.Components/Components/RTLProvider/RTLProvider.razor b/src/Connected.Components/Components/RTLProvider/RTLProvider.razor
index 6dc9dce..7e4e325 100644
--- a/src/Connected.Components/Components/RTLProvider/RTLProvider.razor
+++ b/src/Connected.Components/Components/RTLProvider/RTLProvider.razor
@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<Element HtmlTag="div" Class="@Classname" Style="@Style" UserAttributes="@UserAttributes" Tag="@Tag">
+<Element HtmlTag="div" Class="@Classname" UserAttributes="@CustomAttributes" Tag="@Tag">
     <CascadingValue Value="@RightToLeft" Name="RightToLeft">
         @ChildContent
     </CascadingValue>
diff --git a/src/Connected.Components/Components/RTLProvider/RTLProvider.razor.cs b/src/Connected.Components/Components/RTLProvider/RTLProvider.razor.cs
index 3002609..274b130 100644
--- a/src/Connected.Components/Components/RTLProvider/RTLProvider.razor.cs
+++ b/src/Connected.Components/Components/RTLProvider/RTLProvider.razor.cs
@@ -13,7 +13,7 @@ public partial class RTLProvider : UIComponent
    protected string Classname =>
       new CssBuilder("rtl-provider")
          .AddClass("application-layout-rtl", RightToLeft)
-         .AddClass(Class)
+         .AddClass(AdditionalClassList)
          .Build();
 
    private bool _rtl;
@@ -28,7 +28,7 @@ public partial class RTLProvider : UIComponent
       set
       {
          _rtl = value;
-         UserAttributes["dir"] = RightToLeft ? "rtl" : "ltr";
+         CustomAttributes["dir"] = RightToLeft ? "rtl" : "ltr";
       }
    }
 
diff --git a/src/Connected.Components/Components/Radio/Radio.razor b/src/Connected.Components/Components/Radio/Radio.razor
index 4cb26cb..0c7923b 100644
--- a/src/Connected.Components/Components/Radio/Radio.razor
+++ b/src/Connected.Components/Components/Radio/Radio.razor
@@ -2,10 +2,10 @@
 @typeparam T
 @inherits UIComponent
 
-<label class="@Classname" style="@Style" id="@_elementId" @onkeydown="@HandleKeyDown">
+<label class="@Classname" id="@_elementId" @onkeydown="@HandleKeyDown">
     <span tabindex="0" class="@ButtonClassname">
         <span class="radio-button">
-            <input tabindex="-1" @attributes="UserAttributes" aria-checked="@(Checked.ToString().ToLower())" aria-disabled="@(Disabled.ToString().ToLower())" role="radio" type="radio" class="radio-input" name="@RadioGroup?.Name" disabled="@Disabled" @onclick="OnClick" />
+            <input tabindex="-1" @attributes="CustomAttributes" aria-checked="@(Checked.ToString().ToLower())" aria-disabled="@(Disabled.ToString().ToLower())" role="radio" type="radio" class="radio-input" name="@RadioGroup?.Name" disabled="@Disabled" @onclick="OnClick" />
             <span class="@RadioIconsClassNames">
                 <svg class="@IconClassName" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                     <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path>
diff --git a/src/Connected.Components/Components/Radio/Radio.razor.cs b/src/Connected.Components/Components/Radio/Radio.razor.cs
index 98ad143..ed36cd7 100644
--- a/src/Connected.Components/Components/Radio/Radio.razor.cs
+++ b/src/Connected.Components/Components/Radio/Radio.razor.cs
@@ -14,8 +14,8 @@ public partial class Radio<T> : UIComponent, IDisposable
    protected string Classname =>
    new CssBuilder("radio")
        .AddClass($"disabled", Disabled)
-       .AddClass($"radio-content-placement-{ConvertPlacement(Placement).ToDescriptionString()}")
-       .AddClass(Class)
+       .AddClass($"radio-content-placement-{HorizontalAlignment}")
+
        .Build();
 
    protected string ButtonClassname =>
@@ -69,17 +69,7 @@ public partial class Radio<T> : UIComponent, IDisposable
    }
 
    internal RadioGroup<T> RadioGroup => (RadioGroup<T>)ParentGroup;
-
-   private Placement ConvertPlacement(Placement placement)
-   {
-      return placement switch
-      {
-         Placement.Left => RightToLeft ? Placement.End : Placement.Start,
-         Placement.Right => RightToLeft ? Placement.Start : Placement.End,
-         _ => placement
-      };
-   }
-
+	
    /// <summary>
    /// The color of the component. It supports the theme colors.
    /// </summary>
@@ -99,7 +89,7 @@ public partial class Radio<T> : UIComponent, IDisposable
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.Radio.Behavior)]
-   public Placement Placement { get; set; } = Placement.End;
+   public HorizontalAlignment HorizontalAlignment { get; set; } = HorizontalAlignment.End;
 
    /// <summary>
    /// The value to associate to the button.
diff --git a/src/Connected.Components/Components/Radio/RadioGroup.razor b/src/Connected.Components/Components/Radio/RadioGroup.razor
index e11ef39..f51ba4d 100644
--- a/src/Connected.Components/Components/Radio/RadioGroup.razor
+++ b/src/Connected.Components/Components/Radio/RadioGroup.razor
@@ -2,10 +2,10 @@
 @typeparam T
 @inherits FormComponent<T, T>
 
-<InputControl Class="@Classname" Style="@Style" Error="@HasErrors" ErrorText="@GetErrorText()" Required="@Required">
+<InputControl Class="@Classname" Error="@HasErrors" ErrorText="@GetErrorText()" Required="@Required">
     <InputContent>
         <CascadingValue Value="@((IRadioGroup)this)" IsFixed="true">
-            <div role="radiogroup" @attributes="UserAttributes" class="@GetInputClass()" style="@InputStyle">
+            <div role="radiogroup" @attributes="CustomAttributes" class="@GetInputClass()" style="@InputStyle">
                 @ChildContent
             </div>
         </CascadingValue>
diff --git a/src/Connected.Components/Components/Radio/RadioGroup.razor.cs b/src/Connected.Components/Components/Radio/RadioGroup.razor.cs
index bade301..510cfb9 100644
--- a/src/Connected.Components/Components/Radio/RadioGroup.razor.cs
+++ b/src/Connected.Components/Components/Radio/RadioGroup.razor.cs
@@ -15,7 +15,7 @@ public partial class RadioGroup<T> : FormComponent<T, T>, IRadioGroup
 
    protected string Classname =>
    new CssBuilder("input-control-boolean-input")
-       .AddClass(Class)
+       .AddClass(AdditionalClassList)
        .Build();
 
    private string GetInputClass() =>
diff --git a/src/Connected.Components/Components/Rating/Rating.razor b/src/Connected.Components/Components/Rating/Rating.razor
index 912a4b9..eaf5d25 100644
--- a/src/Connected.Components/Components/Rating/Rating.razor
+++ b/src/Connected.Components/Components/Rating/Rating.razor
@@ -2,7 +2,7 @@
 @inherits UIComponent
 
 
-<span tabindex="@(Disabled?-1:0)" @onkeydown="HandleKeyDown" @attributes="UserAttributes" class="@ClassName" style="@Style" >
+<span tabindex="@(Disabled?-1:0)" @onkeydown="HandleKeyDown" @attributes="CustomAttributes" class="@ClassName">
     <CascadingValue Value="this" >
         @for (int i = 1; i <= MaxValue; i++)
         {
diff --git a/src/Connected.Components/Components/Rating/Rating.razor.cs b/src/Connected.Components/Components/Rating/Rating.razor.cs
index ecd5685..785c033 100644
--- a/src/Connected.Components/Components/Rating/Rating.razor.cs
+++ b/src/Connected.Components/Components/Rating/Rating.razor.cs
@@ -13,7 +13,7 @@ public partial class Rating : UIComponent
    protected string ClassName =>
    new CssBuilder("")
      .AddClass($"rating-root")
-     .AddClass(Class)
+     .AddClass(AdditionalClassList)
    .Build();
 
    /// <summary>
diff --git a/src/Connected.Components/Components/Rating/RatingItem.razor b/src/Connected.Components/Components/Rating/RatingItem.razor
index e13f34c..b09d684 100644
--- a/src/Connected.Components/Components/Rating/RatingItem.razor
+++ b/src/Connected.Components/Components/Rating/RatingItem.razor
@@ -3,14 +3,14 @@
 
 @if (ReadOnly)
 {
-    <span class="@ClassName" style="@Style">
+    <span class="@ClassName">
         <Icon Icon="@ItemIcon" Size="@Size"></Icon>
     </span>
 }
 else
 {
-    <span class="@ClassName" style="@Style" @onmouseover="HandleMouseOver" @onclick="HandleClick" @onmouseout="HandleMouseOut ">
-        <input class="rating-input" type="radio" tabindex="-1" value="@ItemValue" name="@Rating?.Name" disabled="@Disabled" checked="@(IsChecked)" @attributes="UserAttributes" />
+    <span class="@ClassName" @onmouseover="HandleMouseOver" @onclick="HandleClick" @onmouseout="HandleMouseOut ">
+        <input class="rating-input" type="radio" tabindex="-1" value="@ItemValue" name="@Rating?.Name" disabled="@Disabled" checked="@(IsChecked)" @attributes="CustomAttributes" />
         <Icon Icon="@ItemIcon" Size="@Size"></Icon>
     </span>
 }
diff --git a/src/Connected.Components/Components/Rating/RatingItem.razor.cs b/src/Connected.Components/Components/Rating/RatingItem.razor.cs
index 0e6b49e..e734b7c 100644
--- a/src/Connected.Components/Components/Rating/RatingItem.razor.cs
+++ b/src/Connected.Components/Components/Rating/RatingItem.razor.cs
@@ -19,7 +19,7 @@ public partial class RatingItem : UIComponent
      .AddClass($"rating-item-active", IsActive)
      .AddClass($"disabled", Disabled)
      .AddClass($"readonly", ReadOnly)
-     .AddClass(Class)
+     .AddClass(AdditionalClassList)
    .Build();
 
    [CascadingParameter]
diff --git a/src/Connected.Components/Components/ScrollToTop/ScrollToTop.razor b/src/Connected.Components/Components/ScrollToTop/ScrollToTop.razor
index bcad72e..7a6682b 100644
--- a/src/Connected.Components/Components/ScrollToTop/ScrollToTop.razor
+++ b/src/Connected.Components/Components/ScrollToTop/ScrollToTop.razor
@@ -2,8 +2,7 @@
 @inherits UIComponent
  
 <span class="@Classname"
-      style="@Style"
-      @attributes="@UserAttributes"
+      @attributes="@CustomAttributes"
       @onclick="OnClick">
     @ChildContent
 </span>
diff --git a/src/Connected.Components/Components/ScrollToTop/ScrollToTop.razor.cs b/src/Connected.Components/Components/ScrollToTop/ScrollToTop.razor.cs
index 0392280..043db68 100644
--- a/src/Connected.Components/Components/ScrollToTop/ScrollToTop.razor.cs
+++ b/src/Connected.Components/Components/ScrollToTop/ScrollToTop.razor.cs
@@ -14,7 +14,7 @@ public partial class ScrollToTop : IDisposable
 		.AddClass("hidden", !Visible && string.IsNullOrWhiteSpace(HiddenCssClass))
 		.AddClass(VisibleCssClass, Visible && !string.IsNullOrWhiteSpace(VisibleCssClass))
 		.AddClass(HiddenCssClass, !Visible && !string.IsNullOrWhiteSpace(HiddenCssClass))
-		.AddClass(Class)
+		.AddClass(AdditionalClassList)
 		.Build();
 
 	[Inject] IScrollListenerFactory ScrollListenerFactory { get; set; }
diff --git a/src/Connected.Components/Components/Select/Select.razor b/src/Connected.Components/Components/Select/Select.razor
index 2735906..f0e08bb 100644
--- a/src/Connected.Components/Components/Select/Select.razor
+++ b/src/Connected.Components/Components/Select/Select.razor
@@ -4,7 +4,7 @@
 
 <CascadingValue Name="SubscribeToParentForm" Value="false" IsFixed="true">
 	<div class="select" id="@_elementId">
-		<InputControl Label="@Label" Variant="@Variant" HelperText="@HelperText" HelperTextOnFocus="@HelperTextOnFocus" FullWidth="@FullWidth" Margin="@Margin" Class="@Classname" Style="@Style"
+		<InputControl Label="@Label" Variant="@Variant" HelperText="@HelperText" HelperTextOnFocus="@HelperTextOnFocus" FullWidth="@FullWidth" Margin="@Margin" Class="@Classname"
 						 Error="@HasError" ErrorText="@ErrorText" ErrorId="@ErrorId" Disabled="@Disabled" @onclick="@ToggleMenu" Required="@Required" ForId="@FieldId">
 			<InputContent>
                 <Input @ref="_elementReference" InputType="@(CanRenderValue || (Strict && !IsValueInList) ? InputType.Hidden : InputType.Text)"
@@ -16,7 +16,7 @@
                           OnAdornmentClick="@OnAdornmentClick" AdornmentIcon="@_currentIcon" Adornment="@Adornment"
                           AdornmentColor="@AdornmentColor" IconSize="@IconSize" AdornmentText="@AdornmentText"
                           Clearable="@Clearable" OnClearButtonClick="(async (e) => await SelectClearButtonClickHandlerAsync(e))"
-                          @attributes="UserAttributes" OnBlur="@OnLostFocus">
+                          @attributes="CustomAttributes" OnBlur="@OnLostFocus">
                     @if (CanRenderValue)
                     {
                         @GetSelectedValuePresenter()
diff --git a/src/Connected.Components/Components/Select/Select.razor.cs b/src/Connected.Components/Components/Select/Select.razor.cs
index aeb9692..5d906db 100644
--- a/src/Connected.Components/Components/Select/Select.razor.cs
+++ b/src/Connected.Components/Components/Select/Select.razor.cs
@@ -23,7 +23,7 @@ public partial class Select<T> : InputBase<T>, ISelect, IShadowSelect
 
 	protected string Classname =>
 	   new CssBuilder("select")
-	   .AddClass(Class)
+	   .AddClass(AdditionalClassList)
 	   .Build();
 
 	[Inject] private IKeyInterceptorFactory KeyInterceptorFactory { get; set; }
diff --git a/src/Connected.Components/Components/Select/SelectItem.razor b/src/Connected.Components/Components/Select/SelectItem.razor
index b2e774b..0f1088a 100644
--- a/src/Connected.Components/Components/Select/SelectItem.razor
+++ b/src/Connected.Components/Components/Select/SelectItem.razor
@@ -4,7 +4,7 @@
 
 @if (HideContent == false)
 {
-	<ListItem @attributes="UserAttributes" Value="@ItemId" id="@ItemId" OnClick="@OnClicked" OnClickHandlerPreventDefault="true" Icon="@CheckBoxIcon" Disabled="@Disabled" Class="@GetCssClasses()" Style="@Style">
+	<ListItem @attributes="CustomAttributes" Value="@ItemId" id="@ItemId" OnClick="@OnClicked" OnClickHandlerPreventDefault="true" Icon="@CheckBoxIcon" Disabled="@Disabled" Class="@GetCssClasses()">
 		@if (ChildContent != null)
 		{
 			@ChildContent
diff --git a/src/Connected.Components/Components/Select/SelectItem.razor.cs b/src/Connected.Components/Components/Select/SelectItem.razor.cs
index 6fa1370..27aa162 100644
--- a/src/Connected.Components/Components/Select/SelectItem.razor.cs
+++ b/src/Connected.Components/Components/Select/SelectItem.razor.cs
@@ -10,7 +10,7 @@ namespace Connected.Components;
 public partial class SelectItem<T> : SelectItemBase, IDisposable
 {
    private String GetCssClasses() => new CssBuilder()
-      .AddClass(Class)
+      .AddClass(AdditionalClassList)
       .Build();
 
    private ISelect _parent;
diff --git a/src/Connected.Components/Components/Skeleton/Skeleton.razor b/src/Connected.Components/Components/Skeleton/Skeleton.razor
index 6579454..3462a4d 100644
--- a/src/Connected.Components/Components/Skeleton/Skeleton.razor
+++ b/src/Connected.Components/Components/Skeleton/Skeleton.razor
@@ -1,5 +1,5 @@
 @namespace Connected.Components
 @inherits UIComponent;
 
-<span @attributes="UserAttributes" class="@Classname" style="@_styleString"></span>
+<span @attributes="CustomAttributes" class="@Classname" style="@_styleString"></span>
 
diff --git a/src/Connected.Components/Components/Skeleton/Skeleton.razor.cs b/src/Connected.Components/Components/Skeleton/Skeleton.razor.cs
index 1e08fe1..202767b 100644
--- a/src/Connected.Components/Components/Skeleton/Skeleton.razor.cs
+++ b/src/Connected.Components/Components/Skeleton/Skeleton.razor.cs
@@ -11,7 +11,7 @@ public partial class Skeleton : UIComponent
 		new CssBuilder("skeleton")
 			.AddClass($"skeleton-{SkeletonType.ToDescriptionString()}")
 			.AddClass($"skeleton-{Animation.ToDescriptionString()}")
-			.AddClass(Class)
+			.AddClass(AdditionalClassList)
 			.Build();
 
 	/// <summary>
@@ -58,6 +58,6 @@ public partial class Skeleton : UIComponent
 			_height = $"height:{Height};";
 		}
 
-		_styleString = $"{_width}{_height}{Style}";
+		_styleString = $"{_width}{_height}";
 	}
 }
diff --git a/src/Connected.Components/Components/Slider/Slider.razor b/src/Connected.Components/Components/Slider/Slider.razor
index b8b4b72..6141a22 100644
--- a/src/Connected.Components/Components/Slider/Slider.razor
+++ b/src/Connected.Components/Components/Slider/Slider.razor
@@ -7,7 +7,7 @@
 	var width = CalculatePosition().ToString(CultureInfo.InvariantCulture);
 }
 
-<div class="@Classname" style="@Style">
+<div class="@Classname">
 	@if (ChildContent != null)
 	{
 		<MudText Typo="Typo.body1">@ChildContent</MudText>
@@ -38,7 +38,7 @@
 				</div>
 			</div>
 		}
-		<input class="slider-input" aria-valuenow="@Value" aria-valuemin="@_min" aria-valuemax="@_max" role="slider" @attributes="UserAttributes" type="range" min="@_min" max="@_max" step="@_step" disabled="@Disabled"
+		<input class="slider-input" aria-valuenow="@Value" aria-valuemin="@_min" aria-valuemax="@_max" role="slider" @attributes="CustomAttributes" type="range" min="@_min" max="@_max" step="@_step" disabled="@Disabled"
 			   @bind-value="@Text" @bind-value:event="@((Immediate == true ? "oninput" : "onchange"))" />
         @if (ValueLabel)
         {
diff --git a/src/Connected.Components/Components/Slider/Slider.razor.cs b/src/Connected.Components/Components/Slider/Slider.razor.cs
index 86dbaac..b408f08 100644
--- a/src/Connected.Components/Components/Slider/Slider.razor.cs
+++ b/src/Connected.Components/Components/Slider/Slider.razor.cs
@@ -13,7 +13,7 @@ public partial class Slider<T> : UIComponent
          .AddClass($"slider-{Size.ToDescriptionString()}")
          .AddClass($"slider-{Color.ToDescriptionString()}")
          .AddClass("slider-vertical", Vertical)
-         .AddClass(Class)
+         .AddClass(AdditionalClassList)
          .Build();
 
    protected string _value;
diff --git a/src/Connected.Components/Components/Snackbar/SnackbarElement.razor b/src/Connected.Components/Components/Snackbar/SnackbarElement.razor
index a066b9a..4f9b6af 100644
--- a/src/Connected.Components/Components/Snackbar/SnackbarElement.razor
+++ b/src/Connected.Components/Components/Snackbar/SnackbarElement.razor
@@ -2,7 +2,7 @@
 @inherits UIComponent
 
 @Css
-<div @attributes="UserAttributes" class="@SnackbarClass" style="@AnimationStyle" @onclick="@SnackbarClicked">
+<div @attributes="CustomAttributes" class="@SnackbarClass" style="@AnimationStyle" @onclick="@SnackbarClicked">
     @if (!HideIcon)
     {
         <div class="snackbar-icon">
diff --git a/src/Connected.Components/Components/Snackbar/SnackbarElement.razor.cs b/src/Connected.Components/Components/Snackbar/SnackbarElement.razor.cs
index 218e4e9..00a3936 100644
--- a/src/Connected.Components/Components/Snackbar/SnackbarElement.razor.cs
+++ b/src/Connected.Components/Components/Snackbar/SnackbarElement.razor.cs
@@ -21,7 +21,7 @@ public partial class SnackbarElement : UIComponent, IDisposable
 	private string Action => Snackbar?.State.Options.Action;
 	private ThemeColor ActionColor => Snackbar?.State.Options.ActionColor ?? ThemeColor.Default;
 	private Variant ActionVariant => Snackbar?.State.Options.ActionVariant ?? Snackbar?.State.Options.SnackbarVariant ?? Variant.Text;
-	private string AnimationStyle => Snackbar?.State.AnimationStyle + Style;
+	private string AnimationStyle => Snackbar?.State.AnimationStyle;
 	private string SnackbarClass => Snackbar?.State.SnackbarClass;
 	private RenderFragment Css;
 	private bool ShowActionButton => Snackbar?.State.ShowActionButton == true;
diff --git a/src/Connected.Components/Components/Snackbar/SnackbarProvider.razor b/src/Connected.Components/Components/Snackbar/SnackbarProvider.razor
index 47a6335..751aafb 100644
--- a/src/Connected.Components/Components/Snackbar/SnackbarProvider.razor
+++ b/src/Connected.Components/Components/Snackbar/SnackbarProvider.razor
@@ -6,7 +6,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div @attributes="UserAttributes" id="snackbar-container" class="@Classname" style="@Style">
+<div @attributes="CustomAttributes" id="snackbar-container" class="@Classname">
     @if (Snackbar != null)
     {
         @foreach (var snackbar in Snackbar)
diff --git a/src/Connected.Components/Components/Snackbar/SnackbarProvider.razor.cs b/src/Connected.Components/Components/Snackbar/SnackbarProvider.razor.cs
index 411a24a..d87f328 100644
--- a/src/Connected.Components/Components/Snackbar/SnackbarProvider.razor.cs
+++ b/src/Connected.Components/Components/Snackbar/SnackbarProvider.razor.cs
@@ -18,7 +18,7 @@ public partial class SnackbarProvider : UIComponent, IDisposable
            : Snackbars.ShownSnackbars;
 
    protected string Classname =>
-       new CssBuilder(Class)
+       new CssBuilder(AdditionalClassList)
        .AddClass(GetPositionClass())
    .Build();
 
diff --git a/src/Connected.Components/Components/Sparkline/SparkLine.razor b/src/Connected.Components/Components/Sparkline/SparkLine.razor
index b125988..058a42b 100644
--- a/src/Connected.Components/Components/Sparkline/SparkLine.razor
+++ b/src/Connected.Components/Components/Sparkline/SparkLine.razor
@@ -2,7 +2,7 @@
 @using Connected.Utilities
 @inherits UIComponent;
 
-<svg @attributes="UserAttributes" class=@Class style=@Style stroke-linecap="round" display="block" stroke-width="@StrokeWidth" viewBox="0 0 300 75">
+<svg @attributes="CustomAttributes" class=@AdditionalClassList stroke-linecap="round" display="block" stroke-width="@StrokeWidth" viewBox="0 0 300 75">
     <defs>
         <linearGradient id="1337" gradientUnits="userSpaceOnUse" x1="0" y1="100%" x2="0" y2="0">
             <stop offset="0" stop-color="rgb(89,74,226)"></stop>
diff --git a/src/Connected.Components/Components/Stack/Stack.razor b/src/Connected.Components/Components/Stack/Stack.razor
index bbe100c..8561e73 100644
--- a/src/Connected.Components/Components/Stack/Stack.razor
+++ b/src/Connected.Components/Components/Stack/Stack.razor
@@ -1,6 +1,6 @@
 @namespace Connected.Components
 @inherits UIComponent;
 
-<div @attributes="UserAttributes" class="@Classname" style="@Style">
+<div @attributes="CustomAttributes" class="@Classname">
     @ChildContent
 </div>
\ No newline at end of file
diff --git a/src/Connected.Components/Components/Stack/Stack.razor.cs b/src/Connected.Components/Components/Stack/Stack.razor.cs
index c76a188..9369855 100644
--- a/src/Connected.Components/Components/Stack/Stack.razor.cs
+++ b/src/Connected.Components/Components/Stack/Stack.razor.cs
@@ -17,7 +17,7 @@ public partial class Stack : UIComponent
      .AddClass($"justify-{Justify?.ToDescriptionString()}", Justify != null)
      .AddClass($"align-{AlignItems?.ToDescriptionString()}", AlignItems != null)
      .AddClass($"gap-{Spacing}")
-     .AddClass(Class)
+     .AddClass(AdditionalClassList)
    .Build();
 
    /// <summary>
diff --git a/src/Connected.Components/Components/SwipeArea/SwipeArea.razor b/src/Connected.Components/Components/SwipeArea/SwipeArea.razor
index 59a5bf2..c5f495d 100644
--- a/src/Connected.Components/Components/SwipeArea/SwipeArea.razor
+++ b/src/Connected.Components/Components/SwipeArea/SwipeArea.razor
@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div @ref="_componentRef" @attributes="UserAttributes" class="@Class" style="@Style" 
+<div @ref="_componentRef" @attributes="CustomAttributes" class="@AdditionalClassList" 
      @ontouchstart="OnTouchStart" @ontouchstart:stopPropagation="true"
      @ontouchend="OnTouchEnd" @ontouchend:stopPropagation="true"
      @ontouchcancel="OnTouchCancel" @ontouchcancel:stopPropagation="true">
diff --git a/src/Connected.Components/Components/Switch/Switch.razor b/src/Connected.Components/Components/Switch/Switch.razor
index d191bf0..5e94d22 100644
--- a/src/Connected.Components/Components/Switch/Switch.razor
+++ b/src/Connected.Components/Components/Switch/Switch.razor
@@ -3,11 +3,11 @@
 @inherits BooleanInput<T>
 @typeparam T
 
-<label class="@Classname" style="@Style" @onkeydown="@HandleKeyDown" id="@_elementId">
+<label class="@Classname" @onkeydown="@HandleKeyDown" id="@_elementId">
     <span class="switch-span mud-flip-x-rtl">
         <span tabindex="0" class="@SwitchClassname">
             <span class="switch-button">
-                <input tabindex="-1" @attributes="UserAttributes" aria-checked="@((BoolValue == true).ToString().ToLower())" aria-readonly="@(Disabled.ToString().ToLower())" type="checkbox" class="switch-input" checked="@BoolValue" @onchange="@OnChange" disabled="@Disabled" @onclick:preventDefault="@ReadOnly"/>
+                <input tabindex="-1" @attributes="CustomAttributes" aria-checked="@((BoolValue == true).ToString().ToLower())" aria-readonly="@(Disabled.ToString().ToLower())" type="checkbox" class="switch-input" checked="@BoolValue" @onchange="@OnChange" disabled="@Disabled" @onclick:preventDefault="@ReadOnly"/>
                 <span class="switch-thumb d-flex align-center justify-center">
                     @if (!string.IsNullOrEmpty(ThumbIcon))
                     {
diff --git a/src/Connected.Components/Components/Switch/Switch.razor.cs b/src/Connected.Components/Components/Switch/Switch.razor.cs
index 2375b5f..b6283cc 100644
--- a/src/Connected.Components/Components/Switch/Switch.razor.cs
+++ b/src/Connected.Components/Components/Switch/Switch.razor.cs
@@ -15,7 +15,7 @@ public partial class Switch<T> : BooleanInput<T>
       .AddClass($"disabled", Disabled)
       .AddClass($"readonly", ReadOnly)
       .AddClass(LabelPosition == LabelPosition.End ? "ltr" : "rtl", true)
-      .AddClass(Class)
+      .AddClass(AdditionalClassList)
    .Build();
 
    protected string SwitchClassname =>
diff --git a/src/Connected.Components/Components/Table/TFootRow.razor b/src/Connected.Components/Components/Table/TFootRow.razor
index 0bcd9df..4e96e5b 100644
--- a/src/Connected.Components/Components/Table/TFootRow.razor
+++ b/src/Connected.Components/Components/Table/TFootRow.razor
@@ -2,7 +2,7 @@
 @implements IDisposable
 @inherits UIComponent
 
-<tr class="@Classname" @onclick="@OnRowClick" style="@Style" @attributes="@UserAttributes">
+<tr class="@Classname" @onclick="@OnRowClick" @attributes="@CustomAttributes">
 	@if (Context.DisplayApplyButtonAtStart(IgnoreEditable) || Context.DisplayEditbuttonAtStart(IgnoreEditable))
 	{
 		<Th />
diff --git a/src/Connected.Components/Components/Table/TFootRow.razor.cs b/src/Connected.Components/Components/Table/TFootRow.razor.cs
index 340deeb..d50d2c3 100644
--- a/src/Connected.Components/Components/Table/TFootRow.razor.cs
+++ b/src/Connected.Components/Components/Table/TFootRow.razor.cs
@@ -7,7 +7,7 @@ namespace Connected.Components;
 public partial class TFootRow : UIComponent
 {
 	protected string Classname => new CssBuilder("table-row")
-		.AddClass(Class).Build();
+		.AddClass(AdditionalClassList).Build();
 
 	[CascadingParameter] public TableContext Context { get; set; }
 
diff --git a/src/Connected.Components/Components/Table/THeadRow.razor b/src/Connected.Components/Components/Table/THeadRow.razor
index 100eecd..8446abf 100644
--- a/src/Connected.Components/Components/Table/THeadRow.razor
+++ b/src/Connected.Components/Components/Table/THeadRow.razor
@@ -2,7 +2,7 @@
 @implements IDisposable
 @inherits UIComponent
 
-<tr class="@Classname" @onclick="@OnRowClick" style="@Style" @attributes="@UserAttributes">
+<tr class="@Classname" @onclick="@OnRowClick" @attributes="@CustomAttributes">
 
 	@if (Context.DisplayApplyButtonAtStart(IgnoreEditable) || Context.DisplayEditbuttonAtStart(IgnoreEditable))
 	{
diff --git a/src/Connected.Components/Components/Table/THeadRow.razor.cs b/src/Connected.Components/Components/Table/THeadRow.razor.cs
index 29203b8..5d48449 100644
--- a/src/Connected.Components/Components/Table/THeadRow.razor.cs
+++ b/src/Connected.Components/Components/Table/THeadRow.razor.cs
@@ -7,7 +7,7 @@ namespace Connected.Components;
 public partial class THeadRow : UIComponent
 {
 	protected string Classname => new CssBuilder("table-row")
-		.AddClass(Class).Build();
+		.AddClass(AdditionalClassList).Build();
 
 	[CascadingParameter] public TableContext Context { get; set; }
 
diff --git a/src/Connected.Components/Components/Table/Table.razor b/src/Connected.Components/Components/Table/Table.razor
index 0e3a803..6d64441 100644
--- a/src/Connected.Components/Components/Table/Table.razor
+++ b/src/Connected.Components/Components/Table/Table.razor
@@ -2,7 +2,7 @@
 @using Connected.Utilities;
 @inherits TableBase
 @typeparam T
-<div @attributes="UserAttributes" class="@Classname" style="@Style">
+<div @attributes="CustomAttributes" class="@Classname">
 @if (Items != null || ServerData != null)
 {
     <CascadingValue Value="TableContext" IsFixed="true">
diff --git a/src/Connected.Components/Components/Table/TableBase.cs b/src/Connected.Components/Components/Table/TableBase.cs
index 6429767..8bfce97 100644
--- a/src/Connected.Components/Components/Table/TableBase.cs
+++ b/src/Connected.Components/Components/Table/TableBase.cs
@@ -35,7 +35,7 @@ public abstract class TableBase : UIComponent
       .AddClass("table-sticky-header", FixedHeader)
       .AddClass("table-sticky-footer", FixedFooter)
       .AddClass($"elevation-{Elevation}", !Outlined)
-     .AddClass(Class)
+     .AddClass(AdditionalClassList)
    .Build();
 
    protected string HeadClassname => new CssBuilder("table-head")
diff --git a/src/Connected.Components/Components/Table/TableGroupRow.razor b/src/Connected.Components/Components/Table/TableGroupRow.razor
index cfa5716..075d830 100644
--- a/src/Connected.Components/Components/Table/TableGroupRow.razor
+++ b/src/Connected.Components/Components/Table/TableGroupRow.razor
@@ -6,7 +6,7 @@
 @*HEADER:*@
 @if (HeaderTemplate != null && GroupDefinition != null)
 {
-<tr class="@HeaderClassname" @onclick="@OnRowClick" style="@HeaderStyle" @attributes="@UserAttributes">        
+<tr class="@HeaderClassname" @onclick="@OnRowClick" style="@HeaderStyle" @attributes="@CustomAttributes">        
     @if ((GroupDefinition?.IsThisOrParentExpandable ?? false) || (Context?.Table.MultiSelection ?? false))
     {
         <Td>
@@ -38,7 +38,7 @@
 }
 else
 {
-<TextContent @attributes="@UserAttributes">@("There aren't any group definition to use with this component.")</TextContent>
+<TextContent @attributes="@CustomAttributes">@("There aren't any group definition to use with this component.")</TextContent>
 }
 
 @if (IsExpanded)
@@ -51,7 +51,7 @@ else
             <TableGroupRow GroupDefinition="GroupDefinition.InnerGroup" Items="@group" IsCheckable="@IsCheckable"
                               HeaderClass="@HeaderClass" HeaderStyle="@HeaderStyle"
                               FooterClass="@FooterClass" FooterStyle="@FooterStyle"
-                              HeaderTemplate="@HeaderTemplate" FooterTemplate="@FooterTemplate" T="T" @attributes="@UserAttributes" />
+                              HeaderTemplate="@HeaderTemplate" FooterTemplate="@FooterTemplate" T="T" @attributes="@CustomAttributes" />
         }
     }
     else
@@ -62,7 +62,7 @@ else
     @*FOOTER:*@
     @if (FooterTemplate != null && GroupDefinition != null)
     {
-        <tr class="@FooterClassname" @onclick="@OnRowClick" style="@FooterStyle" @attributes="@UserAttributes">
+        <tr class="@FooterClassname" @onclick="@OnRowClick" style="@FooterStyle" @attributes="@CustomAttributes">
             @if ((GroupDefinition?.IsThisOrParentExpandable ?? false) || (Context?.Table.MultiSelection ?? false))
             {
                 <Td/>
diff --git a/src/Connected.Components/Components/Table/TablePager.razor b/src/Connected.Components/Components/Table/TablePager.razor
index 77057df..93f35cc 100644
--- a/src/Connected.Components/Components/Table/TablePager.razor
+++ b/src/Connected.Components/Components/Table/TablePager.razor
@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<ToolBar @attributes="UserAttributes" Class="@Classname" Style="@Style">
+<ToolBar @attributes="CustomAttributes" Class="@Classname">
     @if (HorizontalAlignment == HorizontalAlignment.End ||
        (HorizontalAlignment == HorizontalAlignment.Right && !RightToLeft) ||
        (HorizontalAlignment == HorizontalAlignment.Left && RightToLeft) ||
diff --git a/src/Connected.Components/Components/Table/TablePager.razor.cs b/src/Connected.Components/Components/Table/TablePager.razor.cs
index 76ad371..9d1d72c 100644
--- a/src/Connected.Components/Components/Table/TablePager.razor.cs
+++ b/src/Connected.Components/Components/Table/TablePager.razor.cs
@@ -10,14 +10,14 @@ public partial class TablePager : UIComponent
 				new CssBuilder("table-pagination-toolbar")
 				.AddClass("tablepager-left", !RightToLeft)
 				.AddClass("tablepager-right", RightToLeft)
-				.AddClass(Class)
+				.AddClass(AdditionalClassList)
 				.Build();
 
 	protected string PaginationClassname =>
 		new CssBuilder("table-pagination-display")
 		.AddClass("tablepager-left", !RightToLeft)
 		.AddClass("tablepager-right", RightToLeft)
-		.AddClass(Class)
+		.AddClass(AdditionalClassList)
 		.Build();
 
 	[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
@@ -49,7 +49,7 @@ public partial class TablePager : UIComponent
 	/// <summary>
 	/// Set the horizontal alignment position.
 	/// </summary>
-	[Parameter] public HorizontalAlignment HorizontalAlignment { get; set; } = HorizontalAlignment.Right;
+	[Parameter] public HorizontalAlignment HorizontalAlignment { get; set; } = HorizontalAlignment.End;
 
 	/// <summary>
 	/// Define a list of available page size options for the user to choose from
diff --git a/src/Connected.Components/Components/Table/TableSortLabel.razor b/src/Connected.Components/Components/Table/TableSortLabel.razor
index 7e3d002..56d0dc5 100644
--- a/src/Connected.Components/Components/Table/TableSortLabel.razor
+++ b/src/Connected.Components/Components/Table/TableSortLabel.razor
@@ -3,7 +3,7 @@
 @inherits UIComponent
 @implements IDisposable
 
-<span  @onclick="ToggleSortDirection" class="@Classname" style="@Style" @attributes="@UserAttributes">
+<span  @onclick="ToggleSortDirection" class="@Classname" @attributes="@CustomAttributes">
     @if (!AppendIcon)
     {
         @ChildContent
diff --git a/src/Connected.Components/Components/Table/TableSortLabel.razor.cs b/src/Connected.Components/Components/Table/TableSortLabel.razor.cs
index 71f13ff..d085726 100644
--- a/src/Connected.Components/Components/Table/TableSortLabel.razor.cs
+++ b/src/Connected.Components/Components/Table/TableSortLabel.razor.cs
@@ -8,7 +8,7 @@ namespace Connected.Components;
 public partial class TableSortLabel<[DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.PublicParameterlessConstructor)] T> : UIComponent
 {
    protected string Classname => new CssBuilder("button-root mud-table-sort-label")
-       .AddClass(Class).Build();
+       .AddClass(AdditionalClassList).Build();
 
    [CascadingParameter] public TableContext TableContext { get; set; }
 
diff --git a/src/Connected.Components/Components/Table/Td.razor b/src/Connected.Components/Components/Table/Td.razor
index 6bfc483..c53fea6 100644
--- a/src/Connected.Components/Components/Table/Td.razor
+++ b/src/Connected.Components/Components/Table/Td.razor
@@ -1,6 +1,6 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<td data-label="@DataLabel" style="@Style" class="@Classname" @attributes="@UserAttributes">
+<td data-label="@DataLabel" class="@Classname" @attributes="@CustomAttributes">
     @ChildContent
 </td>
\ No newline at end of file
diff --git a/src/Connected.Components/Components/Table/Td.razor.cs b/src/Connected.Components/Components/Table/Td.razor.cs
index 326cccc..6c0bd84 100644
--- a/src/Connected.Components/Components/Table/Td.razor.cs
+++ b/src/Connected.Components/Components/Table/Td.razor.cs
@@ -9,7 +9,7 @@ public partial class Td : UIComponent
 	protected string Classname =>
 	new CssBuilder("table-cell")
 		.AddClass("table-cell-hide", HideSmall)
-		.AddClass(Class)
+		.AddClass(AdditionalClassList)
 	.Build();
 
 	[Parameter] public RenderFragment ChildContent { get; set; }
diff --git a/src/Connected.Components/Components/Table/Th.razor b/src/Connected.Components/Components/Table/Th.razor
index 9f30966..14d183c 100644
--- a/src/Connected.Components/Components/Table/Th.razor
+++ b/src/Connected.Components/Components/Table/Th.razor
@@ -1,6 +1,6 @@
 @namespace Connected.Components
 @inherits UIComponent
-<th scope="col" class="@Classname" style="@Style" @attributes="@UserAttributes">
+<th scope="col" class="@Classname" @attributes="@CustomAttributes">
     @ChildContent
 </th>
 
diff --git a/src/Connected.Components/Components/Table/Th.razor.cs b/src/Connected.Components/Components/Table/Th.razor.cs
index 8d79798..99c4429 100644
--- a/src/Connected.Components/Components/Table/Th.razor.cs
+++ b/src/Connected.Components/Components/Table/Th.razor.cs
@@ -6,7 +6,7 @@ namespace Connected.Components;
 public partial class Th : UIComponent
 {
    protected string Classname => new CssBuilder("table-cell")
-       .AddClass(Class).Build();
+       .AddClass(AdditionalClassList).Build();
 
    [Parameter] public RenderFragment ChildContent { get; set; }
 }
diff --git a/src/Connected.Components/Components/Table/Tr.razor b/src/Connected.Components/Components/Table/Tr.razor
index 0e30e2e..29f0371 100644
--- a/src/Connected.Components/Components/Table/Tr.razor
+++ b/src/Connected.Components/Components/Table/Tr.razor
@@ -2,7 +2,7 @@
 @implements IDisposable
 @inherits UIComponent
 
-<tr class="@Classname" @onclick="@OnRowClicked" style="@Style" @attributes="@UserAttributes">
+<tr class="@Classname" @onclick="@OnRowClicked" @attributes="@CustomAttributes">
     @if (IsEditable && ((Context?.Table.EditButtonPosition.DisplayEditButtonAtStart() == true && Context?.Table.EditTrigger == TableEditTrigger.EditButton) || Context?.Table.ApplyButtonPosition.DisplayApplyButtonAtStart() == true))
     {
         @* Add datalabel as a placeholder to avoid jumps on small viewports *@
diff --git a/src/Connected.Components/Components/Table/Tr.razor.cs b/src/Connected.Components/Components/Table/Tr.razor.cs
index 2201d79..2860d5c 100644
--- a/src/Connected.Components/Components/Table/Tr.razor.cs
+++ b/src/Connected.Components/Components/Table/Tr.razor.cs
@@ -13,7 +13,7 @@ public partial class Tr : UIComponent
 	internal object _itemCopy;
 
 	protected string Classname => new CssBuilder("table-row")
-		.AddClass(Class).Build();
+		.AddClass(AdditionalClassList).Build();
 
 	protected string ActionsStylename => new StyleBuilder()
 		.AddStyle("padding-left", "34px", IsExpandable).Build();
diff --git a/src/Connected.Components/Components/TableSimple/SimpleTable.razor b/src/Connected.Components/Components/TableSimple/SimpleTable.razor
index 313d40c..337af3e 100644
--- a/src/Connected.Components/Components/TableSimple/SimpleTable.razor
+++ b/src/Connected.Components/Components/TableSimple/SimpleTable.razor
@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div @attributes="UserAttributes" class="@Classname" style="@Style" >
+<div @attributes="CustomAttributes" class="@Classname">
     <div class="table-container">
         <table>
             @ChildContent
diff --git a/src/Connected.Components/Components/TableSimple/SimpleTable.razor.cs b/src/Connected.Components/Components/TableSimple/SimpleTable.razor.cs
index c1490c3..5c3ad9e 100644
--- a/src/Connected.Components/Components/TableSimple/SimpleTable.razor.cs
+++ b/src/Connected.Components/Components/TableSimple/SimpleTable.razor.cs
@@ -16,7 +16,7 @@ public partial class SimpleTable : UIComponent
       .AddClass($"table-square", Square)
       .AddClass($"table-sticky-header", FixedHeader)
       .AddClass($"elevation-{Elevation}", !Outlined)
-     .AddClass(Class)
+     .AddClass(AdditionalClassList)
    .Build();
 
    /// <summary>
diff --git a/src/Connected.Components/Components/Tabs/TabPanel.razor b/src/Connected.Components/Components/Tabs/TabPanel.razor
index fed0c73..299fe63 100644
--- a/src/Connected.Components/Components/Tabs/TabPanel.razor
+++ b/src/Connected.Components/Components/Tabs/TabPanel.razor
@@ -5,7 +5,7 @@
 
 @if (Parent?.KeepPanelsAlive == true)
 {
-    <div @attributes="UserAttributes" class="@Class" style="display:@(Parent?.ActivePanel == this ? "contents" : "none");@Style">
+    <div @attributes="CustomAttributes" class="@AdditionalClassList" style="display:@(Parent?.ActivePanel == this ? "contents" : "none");">
         @ChildContent
     </div>
 }
diff --git a/src/Connected.Components/Components/Tabs/Tabs.razor b/src/Connected.Components/Components/Tabs/Tabs.razor
index 665d27a..9c1c317 100644
--- a/src/Connected.Components/Components/Tabs/Tabs.razor
+++ b/src/Connected.Components/Components/Tabs/Tabs.razor
@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div @attributes="UserAttributes" class="@TabsClassnames" style="@Style">
+<div @attributes="CustomAttributes" class="@TabsClassnames">
     <CascadingValue Value="this" IsFixed="true">
         <div class="@ToolbarClassnames">
             <div class="tabs-toolbar-inner" style="@MaxHeightStyles">
diff --git a/src/Connected.Components/Components/Tabs/Tabs.razor.cs b/src/Connected.Components/Components/Tabs/Tabs.razor.cs
index 6b6a9ef..8082e63 100644
--- a/src/Connected.Components/Components/Tabs/Tabs.razor.cs
+++ b/src/Connected.Components/Components/Tabs/Tabs.razor.cs
@@ -422,9 +422,8 @@ public partial class Tabs : UIComponent, IAsyncDisposable
        .AddClass($"elevation-{Elevation}", ApplyEffectsToContainer && Elevation != 0)
        .AddClass($"tabs-reverse", Position == Position.Bottom)
        .AddClass($"tabs-vertical", IsVerticalTabs())
-       .AddClass($"tabs-vertical-reverse", Position == Position.Right && !RightToLeft || (Position == Position.Left) && RightToLeft || Position == Position.End)
+       .AddClass($"tabs-vertical-reverse", Position == Position.Right && !RightToLeft || (Position == Position.Left) && RightToLeft)
        .AddClass(InternalClassName)
-       .AddClass(Class)
        .Build();
 
    protected string ToolbarClassnames =>
@@ -495,8 +494,8 @@ public partial class Tabs : UIComponent, IAsyncDisposable
    {
       return position switch
       {
-         Position.Start => RightToLeft ? Position.Right : Position.Left,
-         Position.End => RightToLeft ? Position.Left : Position.Right,
+			Position.Start => RightToLeft ? Position.Right : Position.Left,
+			Position.End => RightToLeft ? Position.Left : Position.Right,
          _ => position
       };
    }
@@ -508,7 +507,6 @@ public partial class Tabs : UIComponent, IAsyncDisposable
         .AddClass($"disabled", panel.Disabled)
         .AddClass($"ripple", !DisableRipple)
         .AddClass(TabPanelClass)
-        .AddClass(panel.Class)
         .Build();
 
       return tabClass;
@@ -529,7 +527,6 @@ public partial class Tabs : UIComponent, IAsyncDisposable
    string GetTabStyle(TabPanel panel)
    {
       var tabStyle = new StyleBuilder()
-      .AddStyle(panel.Style)
       .Build();
 
       return tabStyle;
diff --git a/src/Connected.Components/Components/TextField/TextField.razor b/src/Connected.Components/Components/TextField/TextField.razor
index 7aa51f9..9b11446 100644
--- a/src/Connected.Components/Components/TextField/TextField.razor
+++ b/src/Connected.Components/Components/TextField/TextField.razor
@@ -23,10 +23,9 @@
                 {
                     <Input T="string"
                               @ref="InputReference"
-                              @attributes="UserAttributes"
+                              @attributes="CustomAttributes"
                               InputType="@InputType"
                               Lines="@Lines"
-                              Style="@Style"
                               Variant="@Variant"
                               TextUpdateSuppression="@TextUpdateSuppression"
                               Value="@Text"
@@ -63,11 +62,10 @@
                 else
                 {
                     <Mask @ref="_maskReference"
-                             @attributes="UserAttributes"
+                             @attributes="CustomAttributes"
                              Mask="@_mask"
                              InputType="@InputType"
                              Lines="@Lines"
-                             Style="@Style"
                              Variant="@Variant"
                              TextUpdateSuppression="@TextUpdateSuppression"
                              Value="@Text"
diff --git a/src/Connected.Components/Components/TextField/TextField.razor.cs b/src/Connected.Components/Components/TextField/TextField.razor.cs
index b95e639..a6fd3a6 100644
--- a/src/Connected.Components/Components/TextField/TextField.razor.cs
+++ b/src/Connected.Components/Components/TextField/TextField.razor.cs
@@ -36,7 +36,7 @@ public partial class TextField<T> : DebouncedInput<T>
 
     protected string ClassList =>
 		new CssBuilder("input-input-control")
-		.AddClass(Class)
+		.AddClass(base.AdditionalClassList)
 		.Build();
 
 	public override ValueTask FocusAsync()
diff --git a/src/Connected.Components/Components/TimePicker/TimePicker.razor b/src/Connected.Components/Components/TimePicker/TimePicker.razor
index fa6a73c..542683a 100644
--- a/src/Connected.Components/Components/TimePicker/TimePicker.razor
+++ b/src/Connected.Components/Components/TimePicker/TimePicker.razor
@@ -7,7 +7,7 @@
 
     protected override RenderFragment PickerContent=> 
     @<CascadingValue Value="@this" IsFixed="true">
-        <PickerToolbar Class="@ToolbarClass" Style="@Style" DisableToolbar="@DisableToolbar" Orientation="@Orientation" Color="@Color">
+        <PickerToolbar Class="@ToolbarClass" DisableToolbar="@DisableToolbar" Orientation="@Orientation" Color="@Color">
             <div class="timepicker-hourminute mud-ltr">
                 @if (TimeEditMode == TimeEditMode.Normal)
                 {
diff --git a/src/Connected.Components/Components/TimePicker/TimePicker.razor.cs b/src/Connected.Components/Components/TimePicker/TimePicker.razor.cs
index 07149aa..63cc467 100644
--- a/src/Connected.Components/Components/TimePicker/TimePicker.razor.cs
+++ b/src/Connected.Components/Components/TimePicker/TimePicker.razor.cs
@@ -259,7 +259,7 @@ public partial class TimePicker : Picker<TimeSpan?>
 	protected string ToolbarClass =>
 	new CssBuilder("picker-timepicker-toolbar")
 	  .AddClass($"picker-timepicker-toolbar-landscape", Orientation == Orientation.Landscape && PickerVariant == PickerVariant.Static)
-	  .AddClass(Class)
+	  .AddClass(AdditionalClassList)
 	.Build();
 
 	protected string HoursButtonClass =>
diff --git a/src/Connected.Components/Components/Timeline/Timeline.razor b/src/Connected.Components/Components/Timeline/Timeline.razor
index 3791afb..2b8762d 100644
--- a/src/Connected.Components/Components/Timeline/Timeline.razor
+++ b/src/Connected.Components/Components/Timeline/Timeline.razor
@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits ItemsControlBase<TimelineItem>
 
-<div @attributes="UserAttributes" class="@Classnames" style="@Style">
+<div @attributes="CustomAttributes" class="@Classnames">
     <CascadingValue Value="this">
         @ChildContent
     </CascadingValue>
diff --git a/src/Connected.Components/Components/Timeline/Timeline.razor.cs b/src/Connected.Components/Components/Timeline/Timeline.razor.cs
index becbfd7..ea9a295 100644
--- a/src/Connected.Components/Components/Timeline/Timeline.razor.cs
+++ b/src/Connected.Components/Components/Timeline/Timeline.razor.cs
@@ -56,7 +56,7 @@ public partial class Timeline : ItemsControlBase<TimelineItem>
            .AddClass($"timeline-align-{TimelineAlign.ToDescriptionString()}")
            .AddClass($"timeline-modifiers", !DisableModifiers)
            .AddClass($"timeline-rtl", RightToLeft)
-           .AddClass(Class)
+           .AddClass(AdditionalClassList)
            .Build();
 
    private TimelinePosition ConvertTimelinePosition()
diff --git a/src/Connected.Components/Components/Timeline/TimelineItem.razor b/src/Connected.Components/Components/Timeline/TimelineItem.razor
index 9522487..844890a 100644
--- a/src/Connected.Components/Components/Timeline/TimelineItem.razor
+++ b/src/Connected.Components/Components/Timeline/TimelineItem.razor
@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div @attributes="UserAttributes" class="@Classnames" style="@Style" @onclick="Select">
+<div @attributes="CustomAttributes" class="@Classnames" @onclick="Select">
     <div class="timeline-item-content">
         @if (ChildContent != null)
         {
diff --git a/src/Connected.Components/Components/Timeline/TimelineItem.razor.cs b/src/Connected.Components/Components/Timeline/TimelineItem.razor.cs
index 017bf4c..ba4c143 100644
--- a/src/Connected.Components/Components/Timeline/TimelineItem.razor.cs
+++ b/src/Connected.Components/Components/Timeline/TimelineItem.razor.cs
@@ -15,7 +15,7 @@ public partial class TimelineItem : UIComponent, IDisposable
    protected string Classnames =>
        new CssBuilder("timeline-item")
            .AddClass($"timeline-item-{TimelineAlign.ToDescriptionString()}")
-           .AddClass(Class)
+           .AddClass(AdditionalClassList)
            .Build();
 
    protected string DotClassnames =>
diff --git a/src/Connected.Components/Components/ToolBar/ToolBar.razor b/src/Connected.Components/Components/ToolBar/ToolBar.razor
index a6eb291..98f97eb 100644
--- a/src/Connected.Components/Components/ToolBar/ToolBar.razor
+++ b/src/Connected.Components/Components/ToolBar/ToolBar.razor
@@ -3,7 +3,7 @@
 @using Connected.Utilities;
 @inherits UIComponent
 
-<div @attributes="UserAttributes" class="@Classname" style="@Style">
+<div @attributes="CustomAttributes" class="@Classname">
     @ChildContent
 </div>
 
@@ -13,7 +13,7 @@
     new CssBuilder("toolbar")
       .AddClass($"toolbar-dense", Dense)
       .AddClass($"toolbar-gutters", !DisableGutters)
-      .AddClass(Class)
+      .AddClass(AdditionalClassList)
     .Build();
 
     /// <summary>
diff --git a/src/Connected.Components/Components/Tooltip/Tooltip.razor b/src/Connected.Components/Components/Tooltip/Tooltip.razor
index 9abe92a..3328f36 100644
--- a/src/Connected.Components/Components/Tooltip/Tooltip.razor
+++ b/src/Connected.Components/Components/Tooltip/Tooltip.razor
@@ -1,7 +1,7 @@
 @namespace Connected.Components
 @inherits UIComponent
 
-<div @attributes="UserAttributes" class="@ContainerClass" style="@RootStyle" @onmouseenter="@HandleMouseOver" @onmouseleave="@HandleMouseOut" @onfocusin="@HandleMouseOver" @onfocusout="@HandleMouseOut" >
+<div @attributes="CustomAttributes" class="@ContainerClass" style="@RootStyle" @onmouseenter="@HandleMouseOver" @onmouseleave="@HandleMouseOut" @onfocusin="@HandleMouseOver" @onfocusout="@HandleMouseOut" >
 	@ChildContent
 	@if (TooltipContent != null || string.IsNullOrEmpty(Text) == false)
 	{
diff --git a/src/Connected.Components/Components/Tooltip/Tooltip.razor.cs b/src/Connected.Components/Components/Tooltip/Tooltip.razor.cs
index 09a9622..38ceb85 100644
--- a/src/Connected.Components/Components/Tooltip/Tooltip.razor.cs
+++ b/src/Connected.Components/Components/Tooltip/Tooltip.razor.cs
@@ -3,6 +3,7 @@ using Connected.Annotations;
 using Connected.Extensions;
 using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
+using static Connected.Components.Tabs;
 
 namespace Connected.Components;
 
@@ -21,7 +22,6 @@ public partial class Tooltip : UIComponent
       .AddClass($"theme-{Color.ToDescriptionString()}", Color != ThemeColor.Default)
       .AddClass($"d-block", TooltipContent != null)
       .AddClass($"d-flex", !String.IsNullOrEmpty(Text))
-      .AddClass(Class)
       .Build();
 
 
diff --git a/src/Connected.Components/Components/TreeView/TreeView.razor b/src/Connected.Components/Components/TreeView/TreeView.razor
index f6a3044..ba42114 100644
--- a/src/Connected.Components/Components/TreeView/TreeView.razor
+++ b/src/Connected.Components/Components/TreeView/TreeView.razor
@@ -2,7 +2,7 @@
 @inherits UIComponent
 @typeparam T
 
-<ul @attributes="UserAttributes" class="@Classname" style="@Stylename">
+<ul @attributes="CustomAttributes" class="@Classname" style="@Stylename">
     <CascadingValue Value="@MudTreeRoot" IsFixed="true">
         @if (ItemTemplate != null && Items != null)
         {
diff --git a/src/Connected.Components/Components/TreeView/TreeView.razor.cs b/src/Connected.Components/Components/TreeView/TreeView.razor.cs
index b585490..07c8eb6 100644
--- a/src/Connected.Components/Components/TreeView/TreeView.razor.cs
+++ b/src/Connected.Components/Components/TreeView/TreeView.razor.cs
@@ -18,14 +18,13 @@ public partial class TreeView<T> : UIComponent
 	  .AddClass("treeview-hover", Hover)
 	  .AddClass($"treeview-selected-{Color.ToDescriptionString()}")
 		.AddClass($"treeview-checked-{CheckBoxColor.ToDescriptionString()}")
-	  .AddClass(Class)
+	  .AddClass(AdditionalClassList)
 	.Build();
 	protected string Stylename =>
 	new StyleBuilder()
 		.AddStyle($"width", Width, !string.IsNullOrWhiteSpace(Width))
 		.AddStyle($"height", Height, !string.IsNullOrWhiteSpace(Height))
 		.AddStyle($"max-height", MaxHeight, !string.IsNullOrWhiteSpace(MaxHeight))
-		.AddStyle(Style)
 	.Build();
 
 	/// <summary>
diff --git a/src/Connected.Components/Components/TreeView/TreeViewItem.razor b/src/Connected.Components/Components/TreeView/TreeViewItem.razor
index 00d2c17..fc0f01a 100644
--- a/src/Connected.Components/Components/TreeView/TreeViewItem.razor
+++ b/src/Connected.Components/Components/TreeView/TreeViewItem.razor
@@ -2,7 +2,7 @@
 @inherits UIComponent
 @typeparam T
 
-<li @attributes="UserAttributes" class="@Classname" style="@Style">
+<li @attributes="CustomAttributes" class="@Classname">
     <div class="@ContentClassname" @onclick="OnItemClicked" @onclick:stopPropagation="true" @ondblclick="OnItemDoubleClicked" @ondblclick:stopPropagation="true">
         @if (Content != null)
         {
diff --git a/src/Connected.Components/Components/TreeView/TreeViewItem.razor.cs b/src/Connected.Components/Components/TreeView/TreeViewItem.razor.cs
index 238869d..f0c1342 100644
--- a/src/Connected.Components/Components/TreeView/TreeViewItem.razor.cs
+++ b/src/Connected.Components/Components/TreeView/TreeViewItem.razor.cs
@@ -17,7 +17,7 @@ public partial class TreeViewItem<T> : UIComponent
 
    protected string Classname =>
    new CssBuilder("treeview-item")
-     .AddClass(Class)
+     .AddClass(AdditionalClassList)
    .Build();
 
    protected string ContentClassname =>
diff --git a/src/Connected.Components/Components/Typography/TextContent.razor b/src/Connected.Components/Components/Typography/TextContent.razor
index a06d330..070f077 100644
--- a/src/Connected.Components/Components/Typography/TextContent.razor
+++ b/src/Connected.Components/Components/Typography/TextContent.razor
@@ -4,46 +4,46 @@
 
 @switch (Typo)
 {
-    case Typo.h1:
-        <h1 @attributes="UserAttributes" class="@Classname" style="@Style">@ChildContent</h1>
-        break;
-    case Typo.h2:
-        <h2 @attributes="UserAttributes" class="@Classname" style="@Style">@ChildContent</h2>
-        break;
-    case Typo.h3:
-        <h3 @attributes="UserAttributes" class="@Classname" style="@Style">@ChildContent</h3>
-        break;
-    case Typo.h4:
-        <h4 @attributes="UserAttributes" class="@Classname" style="@Style">@ChildContent</h4>
-        break;
-    case Typo.h5:
-        <h5 @attributes="UserAttributes" class="@Classname" style="@Style">@ChildContent</h5>
-        break;
-    case Typo.h6:
-        <h6 @attributes="UserAttributes" class="@Classname" style="@Style">@ChildContent</h6>
-        break;
-    case Typo.subtitle1:
-        <h6 @attributes="UserAttributes" class="@Classname" style="@Style">@ChildContent</h6>
-        break;
-    case Typo.subtitle2:
-        <h6 @attributes="UserAttributes" class="@Classname" style="@Style">@ChildContent</h6>
-        break;
-    case Typo.body1:
-        <p @attributes="UserAttributes" class="@Classname" style="@Style">@ChildContent</p>
-        break;
-    case Typo.body2:
-        <p @attributes="UserAttributes" class="@Classname" style="@Style">@ChildContent</p>
-        break;
-    case Typo.button:
-        <span @attributes="UserAttributes" class="@Classname" style="@Style">@ChildContent</span>
-        break;
-    case Typo.caption:
-        <span @attributes="UserAttributes" class="@Classname" style="@Style">@ChildContent</span>
-        break;
-    case Typo.overline:
-        <span @attributes="UserAttributes" class="@Classname" style="@Style">@ChildContent</span>
-        break;
-    case Typo.inherit:
-        <span @attributes="UserAttributes" class="@Classname" style="@Style">@ChildContent</span>
-        break;
+	case Typo.h1:
+		<h1 @attributes="CustomAttributes" class="@Classname">@ChildContent</h1>
+		break;
+	case Typo.h2:
+		<h2 @attributes="CustomAttributes" class="@Classname">@ChildContent</h2>
+		break;
+	case Typo.h3:
+		<h3 @attributes="CustomAttributes" class="@Classname">@ChildContent</h3>
+		break;
+	case Typo.h4:
+		<h4 @attributes="CustomAttributes" class="@Classname">@ChildContent</h4>
+		break;
+	case Typo.h5:
+		<h5 @attributes="CustomAttributes" class="@Classname">@ChildContent</h5>
+		break;
+	case Typo.h6:
+		<h6 @attributes="CustomAttributes" class="@Classname">@ChildContent</h6>
+		break;
+	case Typo.subtitle1:
+		<h6 @attributes="CustomAttributes" class="@Classname">@ChildContent</h6>
+		break;
+	case Typo.subtitle2:
+		<h6 @attributes="CustomAttributes" class="@Classname">@ChildContent</h6>
+		break;
+	case Typo.body1:
+		<p @attributes="CustomAttributes" class="@Classname">@ChildContent</p>
+		break;
+	case Typo.body2:
+		<p @attributes="CustomAttributes" class="@Classname">@ChildContent</p>
+		break;
+	case Typo.button:
+		<span @attributes="CustomAttributes" class="@Classname">@ChildContent</span>
+		break;
+	case Typo.caption:
+		<span @attributes="CustomAttributes" class="@Classname">@ChildContent</span>
+		break;
+	case Typo.overline:
+		<span @attributes="CustomAttributes" class="@Classname">@ChildContent</span>
+		break;
+	case Typo.inherit:
+		<span @attributes="CustomAttributes" class="@Classname">@ChildContent</span>
+		break;
 }
diff --git a/src/Connected.Components/Components/Typography/TextContent.razor.cs b/src/Connected.Components/Components/Typography/TextContent.razor.cs
index 10e0909..3f854b3 100644
--- a/src/Connected.Components/Components/Typography/TextContent.razor.cs
+++ b/src/Connected.Components/Components/Typography/TextContent.razor.cs
@@ -14,7 +14,7 @@ public partial class TextContent : UIComponent
 	  .AddClass("typography-gutterbottom", GutterBottom)
 	  .AddClass($"typography-align-{ConvertAlign(Align).ToDescriptionString()}", Align != Align.Inherit)
 	  .AddClass("typography-display-inline", Inline)
-	  .AddClass(Class)
+	  .AddClass(AdditionalClassList)
 	.Build();
 
 	private Align ConvertAlign(Align align)
diff --git a/src/Connected.Components/Components/UIComponent.cs b/src/Connected.Components/Components/UIComponent.cs
index 0653737..be504c0 100644
--- a/src/Connected.Components/Components/UIComponent.cs
+++ b/src/Connected.Components/Components/UIComponent.cs
@@ -1,36 +1,28 @@
-using Microsoft.AspNetCore.Components;
+using Connected.Utilities;
+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; }
+	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();
+	public Dictionary<string, object> CustomAttributes { 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()}";
+	public string FieldId => CustomAttributes.TryGetValue("id", out var id) ? id?.ToString() ?? string.Empty : $"input-{Guid.NewGuid()}";
+
+	[Obsolete]
+	public string AdditionalClassList => string.Empty;
 }
diff --git a/src/Connected.Components/Enums/ObjectPosition.cs b/src/Connected.Components/Enums/Alignment.cs
similarity index 74%
rename from src/Connected.Components/Enums/ObjectPosition.cs
rename to src/Connected.Components/Enums/Alignment.cs
index df6523f..0e18d7c 100644
--- a/src/Connected.Components/Enums/ObjectPosition.cs
+++ b/src/Connected.Components/Enums/Alignment.cs
@@ -5,21 +5,16 @@ using System.ComponentModel;
 
 namespace Connected;
 
-public enum ObjectPosition
+public enum Alignment
 {
-    [Description("center")]
     Center,
-    [Description("top")]
     Top,
-    [Description("bottom")]
     Bottom,
-    [Description("left")]
     Left,
     [Description("left-top")]
     LeftTop,
     [Description("left-bottom")]
     LeftBottom,
-    [Description("right")]
     Right,
     [Description("right-top")]
     RightTop,
diff --git a/src/Connected.Components/Enums/Color.cs b/src/Connected.Components/Enums/Color.cs
index efdb463..76005f9 100644
--- a/src/Connected.Components/Enums/Color.cs
+++ b/src/Connected.Components/Enums/Color.cs
@@ -4,28 +4,16 @@ namespace Connected;
 
 public enum ThemeColor
 {
-   [Description("default")]
    Default,
-   [Description("primary")]
    Primary,
-   [Description("secondary")]
    Secondary,
-   [Description("tertiary")]
    Tertiary,
-   [Description("info")]
    Info,
-   [Description("success")]
    Success,
-   [Description("warning")]
    Warning,
-   [Description("error")]
    Error,
-   [Description("dark")]
    Dark,
-   [Description("transparent")]
    Transparent,
-   [Description("inherit")]
    Inherit,
-   [Description("surface")]
    Surface
 }
diff --git a/src/Connected.Components/Enums/HorizontalAlignment.cs b/src/Connected.Components/Enums/HorizontalAlignment.cs
index b6e43f4..515bd9f 100644
--- a/src/Connected.Components/Enums/HorizontalAlignment.cs
+++ b/src/Connected.Components/Enums/HorizontalAlignment.cs
@@ -1,17 +1,35 @@
-using System.ComponentModel;
+using System.Runtime.CompilerServices;
 
 namespace Connected;
 
 public enum HorizontalAlignment
 {
-	[Description("center")]
-	Center,
-	[Description("left")]
 	Left,
-	[Description("right")]
 	Right,
-	[Description("start")]
+	Center,
 	Start,
-	[Description("end")]
 	End
 }
+
+public static class HorizontalAlignmentExtensions
+{
+	public static HorizontalAlignment GetAbsolute(this HorizontalAlignment alignment, bool rightToLeft = false)
+	{
+		return alignment switch
+		{
+			HorizontalAlignment.Start => rightToLeft ? HorizontalAlignment.Right : HorizontalAlignment.Left,
+			HorizontalAlignment.End => rightToLeft ? HorizontalAlignment.Left : HorizontalAlignment.Right,
+			_ => alignment
+		};
+	}
+
+	public static HorizontalAlignment GetRelative(this HorizontalAlignment alignment, bool rightToLeft = false)
+	{
+		return alignment switch
+		{
+			HorizontalAlignment.Left => rightToLeft ? HorizontalAlignment.End : HorizontalAlignment.Start,
+			HorizontalAlignment.Right => rightToLeft ? HorizontalAlignment.Start : HorizontalAlignment.End,
+			_ => alignment
+		};
+	}
+}
diff --git a/src/Connected.Components/Enums/Placement.cs b/src/Connected.Components/Enums/Placement.cs
index 9affe7b..7d478fc 100644
--- a/src/Connected.Components/Enums/Placement.cs
+++ b/src/Connected.Components/Enums/Placement.cs
@@ -1,20 +1,16 @@
-using System.ComponentModel;
+// Copyright (c) MudBlazor 2021
+// MudBlazor licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+using System.ComponentModel;
 
-namespace Connected
+namespace Connected;
+
+public enum Placement
 {
-    public enum Placement
-    {
-        [Description("left")]
-        Left,
-        [Description("right")]
-        Right,
-        [Description("end")]
-        End,
-        [Description("start")]
-        Start,
-        [Description("top")]
-        Top,
-        [Description("bottom")]
-        Bottom
-    }
+	Top,
+	Bottom,
+	Left,
+	Right,
+	Start,
+	End
 }
diff --git a/src/Connected.Components/Enums/Position.cs b/src/Connected.Components/Enums/Position.cs
index e487d94..8f187be 100644
--- a/src/Connected.Components/Enums/Position.cs
+++ b/src/Connected.Components/Enums/Position.cs
@@ -1,22 +1,17 @@
-using System.ComponentModel;
+// Copyright (c) MudBlazor 2021
+// MudBlazor licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+using System.ComponentModel;
 
-namespace Connected
+namespace Connected;
+
+public enum Position
 {
-    public enum Position
-    {
-        [Description("bottom")]
-        Bottom,
-        [Description("center")]
-        Center,
-        [Description("top")]
-        Top,
-        [Description("left")]
-        Left,
-        [Description("right")]
-        Right,
-        [Description("start")]
-        Start,
-        [Description("end")]
-        End
-    }
+	Top,
+	Bottom,
+	Center,
+	Left,
+	Right,
+	Start,
+	End
 }
diff --git a/src/Connected.Components/Enums/Severity.cs b/src/Connected.Components/Enums/Severity.cs
index d4fe78e..64a4617 100644
--- a/src/Connected.Components/Enums/Severity.cs
+++ b/src/Connected.Components/Enums/Severity.cs
@@ -1,18 +1,10 @@
-using System.ComponentModel;
+namespace Connected;
 
-namespace Connected
+public enum Severity
 {
-    public enum Severity
-    {
-        [Description("normal")]
-        Normal,
-        [Description("info")]
-        Info,
-        [Description("success")]
-        Success,
-        [Description("warning")]
-        Warning,
-        [Description("error")]
-        Error
-    }
+	Normal,
+	Info,
+	Success,
+	Warning,
+	Error
 }
diff --git a/src/Connected.Components/Enums/Size.cs b/src/Connected.Components/Enums/Size.cs
index 2c22eb2..c81e5e4 100644
--- a/src/Connected.Components/Enums/Size.cs
+++ b/src/Connected.Components/Enums/Size.cs
@@ -1,14 +1,8 @@
-using System.ComponentModel;
+namespace Connected;
 
-namespace Connected
+public enum Size
 {
-    public enum Size
-    {
-        [Description("small")]
-        Small,
-        [Description("medium")]
-        Medium,
-        [Description("large")]
-        Large
-    }
+	Small,
+	Medium,
+	Large
 }
diff --git a/src/Connected.Components/Enums/Variant.cs b/src/Connected.Components/Enums/Variant.cs
index 2f6f66b..97139b1 100644
--- a/src/Connected.Components/Enums/Variant.cs
+++ b/src/Connected.Components/Enums/Variant.cs
@@ -1,14 +1,10 @@
 using System.ComponentModel;
 
-namespace Connected
+namespace Connected;
+
+public enum Variant
 {
-    public enum Variant
-    {
-        [Description("text")]
-        Text,
-        [Description("filled")]
-        Filled,
-        [Description("outlined")]
-        Outlined
-    }
+	Text,
+	Filled,
+	Outlined
 }
diff --git a/src/Connected.Components/Enums/VerticalAlignment.cs b/src/Connected.Components/Enums/VerticalAlignment.cs
new file mode 100644
index 0000000..9720101
--- /dev/null
+++ b/src/Connected.Components/Enums/VerticalAlignment.cs
@@ -0,0 +1,7 @@
+namespace Connected;
+public enum VerticalAlignment
+{
+	Top,
+	Bottom, 
+	Center
+}
diff --git a/src/Connected.Components/Extensions/EnumExtensions.cs b/src/Connected.Components/Extensions/EnumExtensions.cs
index e7cd9ab..40e7b5a 100644
--- a/src/Connected.Components/Extensions/EnumExtensions.cs
+++ b/src/Connected.Components/Extensions/EnumExtensions.cs
@@ -4,12 +4,24 @@ namespace Connected.Extensions;
 
 public static class EnumExtensions
 {
-	public static string ToDescriptionString(this Enum val)
+	public static string? ToDescriptionString(this Enum value)
 	{
-		var attributes = (DescriptionAttribute[])val.GetType().GetField(val.ToString()).GetCustomAttributes(typeof(DescriptionAttribute), false);
+		if (value is null)
+			return null;
+
+		var stringValue = value.ToString();
+
+		var attributes = 
+			value
+			?.GetType()
+			?.GetField(stringValue)
+			?.GetCustomAttributes(typeof(DescriptionAttribute), false)
+			as DescriptionAttribute[];
+
+		attributes ??= Array.Empty<DescriptionAttribute>();
 
 		return attributes.Length > 0
 			? attributes[0].Description
-			: val.ToString().ToLower();
+			: stringValue.ToLower();
 	}
 }
diff --git a/src/Connected.Components/Utilities/CssBuilder.cs b/src/Connected.Components/Utilities/CssBuilder.cs
index 2c675c1..c5f75c1 100644
--- a/src/Connected.Components/Utilities/CssBuilder.cs
+++ b/src/Connected.Components/Utilities/CssBuilder.cs
@@ -2,134 +2,118 @@
 // License: MIT
 // See https://github.com/EdCharbeneau
 
-namespace Connected.Utilities
+using System.Text;
+
+namespace Connected.Utilities;
+
+public readonly struct CssBuilder
 {
-	public struct CssBuilder
+	private readonly StringBuilder _stringBuffer;
+
+	public CssBuilder() => _stringBuffer = new StringBuilder();
+	/// <summary>
+	/// Creates a CssBuilder used to define conditional CSS classes used in a component.
+	/// Call Build() to return the completed CSS Classes as a string. 
+	/// </summary>
+	/// <param name="value"></param>
+	public CssBuilder(string value) => _stringBuffer = new StringBuilder(value?.ToLower());
+
+	/// <summary>
+	/// Adds a raw string to the builder that will be concatenated with the next class or value added to the builder. All values are converted to lowercase.
+	/// </summary>
+	/// <param name="value"></param>
+	/// <returns>CssBuilder</returns>
+	public CssBuilder AddValue(string value)
+	{
+		_stringBuffer.Append(value?.ToLower());
+		return this;
+	}
+
+	/// <summary>
+	/// Adds a CSS Class to the builder with space separator. All classes are converted to lowercase.
+	/// </summary>
+	/// <param name="value">CSS Class to add</param>
+	/// <returns>CssBuilder</returns>
+	public CssBuilder AddClass(string? value)
 	{
-		private string stringBuffer;
-
-		/// <summary>
-		/// Creates a CssBuilder used to define conditional CSS classes used in a component.
-		/// Call Build() to return the completed CSS Classes as a string. 
-		/// </summary>
-		/// <param name="value"></param>
-		public static CssBuilder Default(string value) => new(value);
-
-		/// <summary>
-		/// Creates an Empty CssBuilder used to define conditional CSS classes used in a component.
-		/// Call Build() to return the completed CSS Classes as a string. 
-		/// </summary>
-		public static CssBuilder Empty() => new();
-
-		/// <summary>
-		/// Creates a CssBuilder used to define conditional CSS classes used in a component.
-		/// Call Build() to return the completed CSS Classes as a string. 
-		/// </summary>
-		/// <param name="value"></param>
-		public CssBuilder(string value) => stringBuffer = value;
-
-		/// <summary>
-		/// Adds a raw string to the builder that will be concatenated with the next class or value added to the builder.
-		/// </summary>
-		/// <param name="value"></param>
-		/// <returns>CssBuilder</returns>
-		public CssBuilder AddValue(string value)
-		{
-			stringBuffer += value;
+		if (value is null)
 			return this;
-		}
-
-		/// <summary>
-		/// Adds a CSS Class to the builder with space separator.
-		/// </summary>
-		/// <param name="value">CSS Class to add</param>
-		/// <returns>CssBuilder</returns>
-		public CssBuilder AddClass(string? value)
-		{
-			if (value is null)
-				return this;
-
-			return AddValue($" {value}");
-		}
-
-		/// <summary>
-		/// Adds a conditional CSS Class to the builder with space separator.
-		/// </summary>
-		/// <param name="value">CSS Class to conditionally add.</param>
-		/// <param name="when">Condition in which the CSS Class is added.</param>
-		/// <returns>CssBuilder</returns>
-		public CssBuilder AddClass(string value, bool when = true) => when ? this.AddClass(value) : this;
-
-		/// <summary>
-		/// Adds a conditional CSS Class to the builder with space separator.
-		/// </summary>
-		/// <param name="value">CSS Class to conditionally add.</param>
-		/// <param name="when">Nullable condition in which the CSS Class is added.</param>
-		/// <returns>CssBuilder</returns>
-		public CssBuilder AddClass(string value, bool? when = true) => when == true ? this.AddClass(value) : this;
-
-		/// <summary>
-		/// Adds a conditional CSS Class to the builder with space separator.
-		/// </summary>
-		/// <param name="value">CSS Class to conditionally add.</param>
-		/// <param name="when">Condition in which the CSS Class is added.</param>
-		/// <returns>CssBuilder</returns>
-		public CssBuilder AddClass(string value, Func<bool> when = null) => this.AddClass(value, when != null && when());
-
-		/// <summary>
-		/// Adds a conditional CSS Class to the builder with space separator.
-		/// </summary>
-		/// <param name="value">Function that returns a CSS Class to conditionally add.</param>
-		/// <param name="when">Condition in which the CSS Class is added.</param>
-		/// <returns>CssBuilder</returns>
-		public CssBuilder AddClass(Func<string> value, bool when = true) => when ? this.AddClass(value()) : this;
-
-		/// <summary>
-		/// Adds a conditional CSS Class to the builder with space separator.
-		/// </summary>
-		/// <param name="value">Function that returns a CSS Class to conditionally add.</param>
-		/// <param name="when">Condition in which the CSS Class is added.</param>
-		/// <returns>CssBuilder</returns>
-		public CssBuilder AddClass(Func<string> value, Func<bool> when = null) => this.AddClass(value, when != null && when());
-
-		/// <summary>
-		/// Adds a conditional nested CssBuilder to the builder with space separator.
-		/// </summary>
-		/// <param name="builder">CSS Class to conditionally add.</param>
-		/// <param name="when">Condition in which the CSS Class is added.</param>
-		/// <returns>CssBuilder</returns>
-		public CssBuilder AddClass(CssBuilder builder, bool when = true) => when ? this.AddClass(builder.Build()) : this;
-
-		/// <summary>
-		/// Adds a conditional CSS Class to the builder with space separator.
-		/// </summary>
-		/// <param name="builder">CSS Class to conditionally add.</param>
-		/// <param name="when">Condition in which the CSS Class is added.</param>
-		/// <returns>CssBuilder</returns>
-		public CssBuilder AddClass(CssBuilder builder, Func<bool> when = null) => this.AddClass(builder, when != null && when());
-
-		/// <summary>
-		/// Adds a conditional CSS Class when it exists in a dictionary to the builder with space separator.
-		/// Null safe operation.
-		/// </summary>
-		/// <param name="additionalAttributes">Additional Attribute splat parameters</param>
-		/// <returns>CssBuilder</returns>
-		public CssBuilder AddClassFromAttributes(IReadOnlyDictionary<string, object> additionalAttributes) =>
-			 additionalAttributes == null ? this :
-			 additionalAttributes.TryGetValue("class", out var c) ? AddClass(c.ToString()) : this;
-
-		/// <summary>
-		/// Finalize the completed CSS Classes as a string.
-		/// </summary>
-		/// <returns>string</returns>
-		public string Build()
-		{
-			// String buffer finalization code
-			return stringBuffer != null ? stringBuffer.Trim() : string.Empty;
-		}
-
-		// ToString should only and always call Build to finalize the rendered string.
-		public override string ToString() => Build();
 
+		return AddValue($" {value?.ToLower()}");
 	}
+
+	/// <summary>
+	/// Adds a conditional CSS Class to the builder with space separator.
+	/// </summary>
+	/// <param name="value">CSS Class to conditionally add.</param>
+	/// <param name="when">Condition in which the CSS Class is added.</param>
+	/// <returns>CssBuilder</returns>
+	public CssBuilder AddClass(string value, bool when = true) => when ? AddClass(value) : this;
+
+	/// <summary>
+	/// Adds a conditional CSS Class to the builder with space separator.
+	/// </summary>
+	/// <param name="value">CSS Class to conditionally add.</param>
+	/// <param name="when">Nullable condition in which the CSS Class is added.</param>
+	/// <returns>CssBuilder</returns>
+	public CssBuilder AddClass(string value, bool? when = true) => when == true ? AddClass(value) : this;
+
+	/// <summary>
+	/// Adds a conditional CSS Class to the builder with space separator.
+	/// </summary>
+	/// <param name="value">CSS Class to conditionally add.</param>
+	/// <param name="when">Condition in which the CSS Class is added.</param>
+	/// <returns>CssBuilder</returns>
+	public CssBuilder AddClass(string value, Func<bool>? when = null) => AddClass(value, when is not null && when());
+
+	/// <summary>
+	/// Adds a conditional CSS Class to the builder with space separator.
+	/// </summary>
+	/// <param name="value">Function that returns a CSS Class to conditionally add.</param>
+	/// <param name="when">Condition in which the CSS Class is added.</param>
+	/// <returns>CssBuilder</returns>
+	public CssBuilder AddClass(Func<string> value, bool when = true) => when ? AddClass(value()) : this;
+
+	/// <summary>
+	/// Adds a conditional CSS Class to the builder with space separator.
+	/// </summary>
+	/// <param name="value">Function that returns a CSS Class to conditionally add.</param>
+	/// <param name="when">Condition in which the CSS Class is added.</param>
+	/// <returns>CssBuilder</returns>
+	public CssBuilder AddClass(Func<string> value, Func<bool> when = null) => AddClass(value, when != null && when());
+
+	/// <summary>
+	/// Adds a conditional nested CssBuilder to the builder with space separator.
+	/// </summary>
+	/// <param name="builder">CSS Class to conditionally add.</param>
+	/// <param name="when">Condition in which the CSS Class is added.</param>
+	/// <returns>CssBuilder</returns>
+	public CssBuilder AddClass(CssBuilder builder, bool when = true) => when ? AddClass(builder.Build()) : this;
+
+	/// <summary>
+	/// Adds a conditional CSS Class to the builder with space separator.
+	/// </summary>
+	/// <param name="builder">CSS Class to conditionally add.</param>
+	/// <param name="when">Condition in which the CSS Class is added.</param>
+	/// <returns>CssBuilder</returns>
+	public CssBuilder AddClass(CssBuilder builder, Func<bool> when = null) => AddClass(builder, when != null && when());
+
+	/// <summary>
+	/// Adds a conditional CSS Class when it exists in a dictionary to the builder with space separator.
+	/// Null safe operation.
+	/// </summary>
+	/// <param name="additionalAttributes">Additional Attribute splat parameters</param>
+	/// <returns>CssBuilder</returns>
+	public CssBuilder AddClassFromAttributes(IReadOnlyDictionary<string, object> additionalAttributes) =>
+		 additionalAttributes is null ? this :
+		 additionalAttributes.TryGetValue("class", out var c) ? AddClass(c.ToString()) : this;
+
+	/// <summary>
+	/// Finalize the completed CSS Classes as a string.
+	/// </summary>
+	/// <returns>string</returns>
+	public string Build() => _stringBuffer.ToString().Trim();
+
+	// ToString should only and always call Build to finalize the rendered string.
+	public override string ToString() => Build();
 }
diff --git a/src/Connected.Components/Utilities/StyleBuilder.cs b/src/Connected.Components/Utilities/StyleBuilder.cs
index a8fa3a6..79c4b5b 100644
--- a/src/Connected.Components/Utilities/StyleBuilder.cs
+++ b/src/Connected.Components/Utilities/StyleBuilder.cs
@@ -5,158 +5,157 @@
 using System;
 using System.Collections.Generic;
 
-namespace Connected.Utilities
+namespace Connected.Utilities;
+
+public struct StyleBuilder
 {
-    public struct StyleBuilder
-    {
-        private string stringBuffer;
-
-        /// <summary>
-        /// Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string.
-        /// </summary>
-        /// <param name="prop"></param>
-        /// <param name="value"></param>
-        public static StyleBuilder Default(string prop, string value) => new(prop, value);
-
-        /// <summary>
-        /// Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string.
-        /// </summary>
-        /// <param name="style"></param>
-        public static StyleBuilder Default(string style) => Empty().AddStyle(style);
-
-        /// <summary>
-        /// Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string.
-        /// </summary>
-        public static StyleBuilder Empty() => new();
-
-        /// <summary>
-        /// Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string.
-        /// </summary>
-        /// <param name="prop"></param>
-        /// <param name="value"></param>
-        public StyleBuilder(string prop, string value) => stringBuffer = $"{prop}:{value};";
-
-        /// <summary>
-        /// Adds a conditional in-line style to the builder with space separator and closing semicolon.
-        /// </summary>
-        /// <param name="style"></param>
-        public StyleBuilder AddStyle(string style) => !string.IsNullOrWhiteSpace(style) ? AddRaw($"{style};") : this;
-
-        /// <summary>
-        /// Adds a raw string to the builder that will be concatenated with the next style or value added to the builder.
-        /// </summary>
-        /// <param name="style"></param>
-        /// <returns>StyleBuilder</returns>
-        private StyleBuilder AddRaw(string style)
-        {
-            stringBuffer += style;
-            return this;
-        }
-
-        /// <summary>
-        /// Adds a conditional in-line style to the builder with space separator and closing semicolon..
-        /// </summary>
-        /// <param name="prop"></param>
-        /// <param name="value">Style to add</param>
-        /// <returns>StyleBuilder</returns>
-        public StyleBuilder AddStyle(string prop, string value) => AddRaw($"{prop}:{value};");
-
-        /// <summary>
-        /// Adds a conditional in-line style to the builder with space separator and closing semicolon..
-        /// </summary>
-        /// <param name="prop"></param>
-        /// <param name="value">Style to conditionally add.</param>
-        /// <param name="when">Condition in which the style is added.</param>
-        /// <returns>StyleBuilder</returns>
-        public StyleBuilder AddStyle(string prop, string value, bool when = true) => when ? this.AddStyle(prop, value) : this;
-
-
-        /// <summary>
-        /// Adds a conditional in-line style to the builder with space separator and closing semicolon..
-        /// </summary>
-        /// <param name="prop"></param>
-        /// <param name="value">Style to conditionally add.</param>
-        /// <param name="when">Condition in which the style is added.</param>
-        /// <returns></returns>
-        public StyleBuilder AddStyle(string prop, Func<string> value, bool when = true) => when ? this.AddStyle(prop, value()) : this;
-
-        /// <summary>
-        /// Adds a conditional in-line style to the builder with space separator and closing semicolon..
-        /// </summary>
-        /// <param name="prop"></param>
-        /// <param name="value">Style to conditionally add.</param>
-        /// <param name="when">Condition in which the style is added.</param>
-        /// <returns>StyleBuilder</returns>
-        public StyleBuilder AddStyle(string prop, string value, Func<bool> when = null) => this.AddStyle(prop, value, when != null && when());
-
-        /// <summary>
-        /// Adds a conditional in-line style to the builder with space separator and closing semicolon..
-        /// </summary>
-        /// <param name="prop"></param>
-        /// <param name="value">Style to conditionally add.</param>
-        /// <param name="when">Condition in which the style is added.</param>
-        /// <returns>StyleBuilder</returns>
-        public StyleBuilder AddStyle(string prop, Func<string> value, Func<bool> when = null) => this.AddStyle(prop, value(), when != null && when());
-
-        /// <summary>
-        /// Adds a conditional nested StyleBuilder to the builder with separator and closing semicolon.
-        /// </summary>
-        /// <param name="builder">Style Builder to conditionally add.</param>
-        /// <returns>StyleBuilder</returns>
-        public StyleBuilder AddStyle(StyleBuilder builder) => this.AddRaw(builder.Build());
-
-        /// <summary>
-        /// Adds a conditional nested StyleBuilder to the builder with separator and closing semicolon.
-        /// </summary>
-        /// <param name="builder">Style Builder to conditionally add.</param>
-        /// <param name="when">Condition in which the style is added.</param>
-        /// <returns>StyleBuilder</returns>
-        public StyleBuilder AddStyle(StyleBuilder builder, bool when = true) => when ? this.AddRaw(builder.Build()) : this;
-
-        /// <summary>
-        /// Adds a conditional in-line style to the builder with space separator and closing semicolon..
-        /// </summary>
-        /// <param name="builder">Style Builder to conditionally add.</param>
-        /// <param name="when">Condition in which the styles are added.</param>
-        /// <returns>StyleBuilder</returns>
-        public StyleBuilder AddStyle(StyleBuilder builder, Func<bool> when = null) => this.AddStyle(builder, when != null && when());
-
-        /// <summary>
-        /// Adds a conditional in-line style to the builder with space separator and closing semicolon..
-        /// A ValueBuilder action defines a complex set of values for the property.
-        /// </summary>
-        /// <param name="prop"></param>
-        /// <param name="builder"></param>
-        /// <param name="when"></param>
-        public StyleBuilder AddStyle(string prop, Action<ValueBuilder> builder, bool when = true)
-        {
-            var values = new ValueBuilder();
-            builder(values);
-            return AddStyle(prop, values.ToString(), when && values.HasValue);
-        }
-
-        /// <summary>
-        /// Adds a conditional in-line style when it exists in a dictionary to the builder with separator.
-        /// Null safe operation.
-        /// </summary>
-        /// <param name="additionalAttributes">Additional Attribute splat parameters</param>
-        /// <returns>StyleBuilder</returns>
-        public StyleBuilder AddStyleFromAttributes(IReadOnlyDictionary<string, object> additionalAttributes) =>
-            additionalAttributes == null ? this :
-            additionalAttributes.TryGetValue("style", out var c) ? AddRaw(c.ToString()) : this;
-
-
-        /// <summary>
-        /// Finalize the completed Style as a string.
-        /// </summary>
-        /// <returns>string</returns>
-        public string Build()
-        {
-            // String buffer finalization code
-            return stringBuffer != null ? stringBuffer.Trim() : string.Empty;
-        }
-
-        // ToString should only and always call Build to finalize the rendered string.
-        public override string ToString() => Build();
-    }
+	private string stringBuffer;
+
+	/// <summary>
+	/// Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string.
+	/// </summary>
+	/// <param name="prop"></param>
+	/// <param name="value"></param>
+	public static StyleBuilder Default(string prop, string value) => new(prop, value);
+
+	/// <summary>
+	/// Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string.
+	/// </summary>
+	/// <param name="style"></param>
+	public static StyleBuilder Default(string style) => Empty().AddStyle(style);
+
+	/// <summary>
+	/// Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string.
+	/// </summary>
+	public static StyleBuilder Empty() => new();
+
+	/// <summary>
+	/// Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string.
+	/// </summary>
+	/// <param name="prop"></param>
+	/// <param name="value"></param>
+	public StyleBuilder(string prop, string value) => stringBuffer = $"{prop}:{value};";
+
+	/// <summary>
+	/// Adds a conditional in-line style to the builder with space separator and closing semicolon.
+	/// </summary>
+	/// <param name="style"></param>
+	public StyleBuilder AddStyle(string style) => !string.IsNullOrWhiteSpace(style) ? AddRaw($"{style};") : this;
+
+	/// <summary>
+	/// Adds a raw string to the builder that will be concatenated with the next style or value added to the builder.
+	/// </summary>
+	/// <param name="style"></param>
+	/// <returns>StyleBuilder</returns>
+	private StyleBuilder AddRaw(string style)
+	{
+		stringBuffer += style;
+		return this;
+	}
+
+	/// <summary>
+	/// Adds a conditional in-line style to the builder with space separator and closing semicolon..
+	/// </summary>
+	/// <param name="prop"></param>
+	/// <param name="value">Style to add</param>
+	/// <returns>StyleBuilder</returns>
+	public StyleBuilder AddStyle(string prop, string value) => AddRaw($"{prop}:{value};");
+
+	/// <summary>
+	/// Adds a conditional in-line style to the builder with space separator and closing semicolon..
+	/// </summary>
+	/// <param name="prop"></param>
+	/// <param name="value">Style to conditionally add.</param>
+	/// <param name="when">Condition in which the style is added.</param>
+	/// <returns>StyleBuilder</returns>
+	public StyleBuilder AddStyle(string prop, string value, bool when = true) => when ? this.AddStyle(prop, value) : this;
+
+
+	/// <summary>
+	/// Adds a conditional in-line style to the builder with space separator and closing semicolon..
+	/// </summary>
+	/// <param name="prop"></param>
+	/// <param name="value">Style to conditionally add.</param>
+	/// <param name="when">Condition in which the style is added.</param>
+	/// <returns></returns>
+	public StyleBuilder AddStyle(string prop, Func<string> value, bool when = true) => when ? this.AddStyle(prop, value()) : this;
+
+	/// <summary>
+	/// Adds a conditional in-line style to the builder with space separator and closing semicolon..
+	/// </summary>
+	/// <param name="prop"></param>
+	/// <param name="value">Style to conditionally add.</param>
+	/// <param name="when">Condition in which the style is added.</param>
+	/// <returns>StyleBuilder</returns>
+	public StyleBuilder AddStyle(string prop, string value, Func<bool> when = null) => this.AddStyle(prop, value, when != null && when());
+
+	/// <summary>
+	/// Adds a conditional in-line style to the builder with space separator and closing semicolon..
+	/// </summary>
+	/// <param name="prop"></param>
+	/// <param name="value">Style to conditionally add.</param>
+	/// <param name="when">Condition in which the style is added.</param>
+	/// <returns>StyleBuilder</returns>
+	public StyleBuilder AddStyle(string prop, Func<string> value, Func<bool> when = null) => this.AddStyle(prop, value(), when != null && when());
+
+	/// <summary>
+	/// Adds a conditional nested StyleBuilder to the builder with separator and closing semicolon.
+	/// </summary>
+	/// <param name="builder">Style Builder to conditionally add.</param>
+	/// <returns>StyleBuilder</returns>
+	public StyleBuilder AddStyle(StyleBuilder builder) => this.AddRaw(builder.Build());
+
+	/// <summary>
+	/// Adds a conditional nested StyleBuilder to the builder with separator and closing semicolon.
+	/// </summary>
+	/// <param name="builder">Style Builder to conditionally add.</param>
+	/// <param name="when">Condition in which the style is added.</param>
+	/// <returns>StyleBuilder</returns>
+	public StyleBuilder AddStyle(StyleBuilder builder, bool when = true) => when ? this.AddRaw(builder.Build()) : this;
+
+	/// <summary>
+	/// Adds a conditional in-line style to the builder with space separator and closing semicolon..
+	/// </summary>
+	/// <param name="builder">Style Builder to conditionally add.</param>
+	/// <param name="when">Condition in which the styles are added.</param>
+	/// <returns>StyleBuilder</returns>
+	public StyleBuilder AddStyle(StyleBuilder builder, Func<bool> when = null) => this.AddStyle(builder, when != null && when());
+
+	/// <summary>
+	/// Adds a conditional in-line style to the builder with space separator and closing semicolon..
+	/// A ValueBuilder action defines a complex set of values for the property.
+	/// </summary>
+	/// <param name="prop"></param>
+	/// <param name="builder"></param>
+	/// <param name="when"></param>
+	public StyleBuilder AddStyle(string prop, Action<ValueBuilder> builder, bool when = true)
+	{
+		var values = new ValueBuilder();
+		builder(values);
+		return AddStyle(prop, values.ToString(), when && values.HasValue);
+	}
+
+	/// <summary>
+	/// Adds a conditional in-line style when it exists in a dictionary to the builder with separator.
+	/// Null safe operation.
+	/// </summary>
+	/// <param name="additionalAttributes">Additional Attribute splat parameters</param>
+	/// <returns>StyleBuilder</returns>
+	public StyleBuilder AddStyleFromAttributes(IReadOnlyDictionary<string, object> additionalAttributes) =>
+		 additionalAttributes == null ? this :
+		 additionalAttributes.TryGetValue("style", out var c) ? AddRaw(c.ToString()) : this;
+
+
+	/// <summary>
+	/// Finalize the completed Style as a string.
+	/// </summary>
+	/// <returns>string</returns>
+	public string Build()
+	{
+		// String buffer finalization code
+		return stringBuffer != null ? stringBuffer.Trim() : string.Empty;
+	}
+
+	// ToString should only and always call Build to finalize the rendered string.
+	public override string ToString() => Build();
 }