[WIP]: Transfer commit

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

@@ -7,7 +7,7 @@
 
 <Grid>
     <Item md="4" xs="12">
-        <Alert Severity="Severity.Normal" ClassList="my-2 justify-end dense">Default Square</Alert>
+        <Alert Severity="Severity.Normal" ClassList="my-2 justify-end dense" CloseGlyphVisible="true">Default Square</Alert>
         <Alert Severity="Severity.Info" ClassList="my-2">Info Square</Alert>
         <Alert Severity="Severity.Success" ClassList="my-2">Success Square</Alert>
         <Alert Severity="Severity.Warning" ClassList="my-2">Warning Square</Alert>

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

@@ -23,7 +23,7 @@
 	@if (CloseGlyphVisible)
 	{
 		<div class="alert-close">
-			<ToggleIconButton Glyph="@CloseGlyph" @onclick="OnCloseGlyphClick" Size="Size.Small" />
+			<GlyphButton ClassList="size-small" Glyph="@CloseGlyph" Clicked="OnCloseGlyphClick" />
 		</div>
 	}
 </div>

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

@@ -4,8 +4,7 @@ using Microsoft.AspNetCore.Components.Web;
 
 namespace Connected.Components;
 
-public partial class Alert : UIComponent
+public partial class Alert : UIComponent{
-{
 	/// <summary>
 	/// Contains the default container classlist and the user defined classes.
 	/// </summary>

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

@@ -2,7 +2,7 @@
 @inherits UIComponent
 
 <header @attributes="CustomAttributes" class="@CompiledHeaderClassList">
-	<ToolBar Dense="@Dense" DisableGutters="@DisableGutters" Class="@CompiledToolbarClassList">
+	<ToolBar Class="@CompiledToolbarClassList">
 		@ChildContent
 	</ToolBar>
 </header>

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

@@ -27,11 +27,8 @@ public partial class AppBar : UIComponent
 		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);
 		}
 	}
@@ -42,30 +39,6 @@ public partial class AppBar : UIComponent
 	[Parameter]
 	public RenderFragment? ChildContent { get; set; }
 
-	/// <summary>
-	/// The color of the component. It supports the theme colors.
-	/// </summary>
-	[Parameter]
-	public ThemeColor Color { get; set; } = ThemeColor.Default;
-
-	/// <summary>
-	/// If true, compact padding will be used.
-	/// </summary>
-	[Parameter]
-	public bool Dense { get; set; }
-
-	/// <summary>
-	/// If true, the left and right padding is removed from from the appbar.
-	/// </summary>
-	[Parameter]
-	public bool DisableGutters { get; set; }
-
-	/// <summary>
-	/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
-	/// </summary>
-	[Parameter]
-	public int Elevation { set; get; } = 4;
-
 	/// <summary>
 	/// If true, appbar will be fixed.
 	/// </summary>

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

@@ -55,12 +55,12 @@ public partial class Autocomplete<T> : InputBase<T>, IDisposable
 	 [Parameter]
 	 public bool Dense { get; set; }
 	 /// <summary>
-	 /// The Open Autocomplete Icon
+	 /// The Open Autocomplete Glyph
 	 /// </summary>
 	 [Parameter]
 	 public string OpenIcon { get; set; } = Icons.Material.Filled.ArrowDropDown;
 	 /// <summary>
-	 /// The Close Autocomplete Icon
+	 /// The Close Autocomplete Glyph
 	 /// </summary>
 	 [Parameter]
 	 public string CloseIcon { get; set; } = Icons.Material.Filled.ArrowDropUp;

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

@@ -17,7 +17,7 @@ partial class AvatarGroup : UIComponent
 		{
 			return new CssBuilder("avatar-group")
 				.AddClass($"avatar-group-outlined", Outlined)
-				.AddClass($"avatar-group-outlined-{OutlineColor.ToDescriptionString()}", Outlined)
+				.AddClass($"avatar-group-outlined-{OutlineColor.ToDescription()}", Outlined)
 				.AddClass(ClassList);
 		}
 	}

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

@@ -15,7 +15,7 @@ public partial class Badge : UIComponent
 	.Build();
 	protected string WrapperClass =>
 	new CssBuilder("badge-wrapper")
-		.AddClass($"badge-{Origin.ToDescriptionString().Replace("-", " ")}")
+		.AddClass($"badge-{Origin.ToDescription().Replace("-", " ")}")
 	.Build();
 
 	protected string BadgeClassName =>
@@ -23,9 +23,9 @@ public partial class Badge : UIComponent
 		.AddClass("badge-dot", Dot)
 		.AddClass("badge-bordered", Bordered)
 		.AddClass("badge-icon", !string.IsNullOrEmpty(Icon) && !Dot)
-		.AddClass($"badge-{Origin.ToDescriptionString().Replace("-", " ")}")
+		.AddClass($"badge-{Origin.ToDescription().Replace("-", " ")}")
 		.AddClass($"elevation-{Elevation.ToString()}")
-		.AddClass("theme-" + Color.ToDescriptionString(), Color != ThemeColor.Default)
+		.AddClass("theme-" + Color.ToDescription(), Color != ThemeColor.Default)
 		.AddClass("badge-default", Color == ThemeColor.Default)
 		.AddClass("badge-overlap", Overlap)
 		.AddClass(BadgeClass)
@@ -102,7 +102,7 @@ public partial class Badge : UIComponent
 	public bool Bordered { get; set; }
 
 	/// <summary>
-	/// Sets the Icon to use in the badge.
+	/// Sets the Glyph to use in the badge.
 	/// </summary>
 	[Parameter]
 	[Category(CategoryTypes.Badge.Behavior)]

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

@@ -1,15 +1,17 @@
 @namespace Connected.Components
+
 @using Connected.Extensions;
+
 @inherits ButtonBase
 
-<Element @bind-Ref="@_elementReference"
+<Element type="@ButtonType.ToDescription()"
-			HtmlTag="@HtmlTag"
+         disabled="@Disabled"
-			Class="@CompiledClassList"
+         HtmlTag="@HtmlTag"
-			@attributes="CustomAttributes"
+         ClassList="@CompiledClassList.ToString()"
-			@onclick="OnClickHandler"
+         PreventOnClickPropagation="PreventOnClickPropagation"
-			type="@ButtonType.ToDescriptionString()"
+         @attributes="CustomAttributes"
-			disabled="@Disabled">
+         @onclick="OnClick">
-	<span class="button-label">
+   <span name="button-content" class="button-content">
-		@ChildContent
+      @ChildContent
-	</span>
+   </span>
 </Element>

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

@@ -1,6 +1,4 @@
-using Connected.Annotations;
+using Connected.Utilities;
-using Connected.Extensions;
-using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
 
 namespace Connected.Components;
@@ -8,46 +6,36 @@ namespace Connected.Components;
 public partial class Button : ButtonBase
 {
 	/// <summary>
-	/// Child content of component.
+	/// Contains the default container classlist and the user defined classes.
 	/// </summary>
-	[Parameter]
-	public RenderFragment? ChildContent { get; set; }
-
 	private CssBuilder CompiledClassList
 	{
 		get
 		{
 			return new CssBuilder("button-root mud-button")
 			.AddClass($"button-{Variant}")
-			.AddClass($"button-{Variant}-{Color}")
-			.AddClass($"button-{Variant}-size-{Size}")
-			.AddClass($"ripple", !CanRipple)
-			.AddClass($"elevation-{Elevation}")
 			.AddClass(ClassList);
 		}
 	}
 
+	#region Styling properties
+	/// <summary>
+	/// Child content of component.
+	/// </summary>
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+
 	/// <summary>
 	/// A space separated list of class names, added on top of the default class list.
 	/// </summary>
 	[Parameter]
 	public string? ClassList { get; set; }
 
-	/// <summary>
-	/// The color of the component. It supports the theme colors.
-	/// </summary>
-	[Parameter]
-	public ThemeColor Color { get; set; } = ThemeColor.Default;
-
-	/// <summary>
-	/// The Size of the component.
-	/// </summary>
-	[Parameter]
-	public Size Size { get; set; } = Size.Medium;
-
 	/// <summary>
 	/// The variant to use.
 	/// </summary>
 	[Parameter]
 	public Variant Variant { get; set; } = Variant.Text;
+	#endregion
+
 }

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

@@ -54,10 +54,16 @@ public abstract class ButtonBase : UIComponent
 
 	/// <summary>
 	/// The HTML element that will be rendered in the root by the component
-	/// By default, is a button
+	/// By default, is a button.
 	/// </summary>
 	protected string HtmlTag => ButtonType.ToString().ToLower();
 
+	/// <summary>
+	/// Indicates whether the internal click propagation should be disabled,
+	/// as it is handled in the component itself.
+	/// </summary>
+	protected bool PreventOnClickPropagation => string.Compare(HtmlTag, "button", true) == 0;
+
 	protected async Task OnClick(MouseEventArgs e)
 	{
 		if (Disabled)

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

@@ -4,12 +4,11 @@
 
 @using Connected.Extensions;
 
-<Element @bind-Ref="@_elementReference"
+<Element    HtmlTag="@HtmlTag"
-            HtmlTag="@HtmlTag"
             Class="@Classname"
             @attributes="CustomAttributes"
-            @onclick="OnClickHandler"
+            @onclick="OnClick"
-            type="@ButtonType.ToDescriptionString()"
+            type="@ButtonType.ToDescription()"
             disabled="@Disabled"
 			title="@Title">
     <span class="fab-label">

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

@@ -10,9 +10,8 @@ public partial class Fab : ButtonBase
 	protected string Classname =>
 	new CssBuilder("button-root mud-fab")
 	  .AddClass($"fab-extended", !string.IsNullOrEmpty(Label))
-	  .AddClass($"fab-{Color.ToDescriptionString()}")
+	  .AddClass($"fab-{Color.ToDescription()}")
-	  .AddClass($"fab-size-{Size.ToDescriptionString()}")
+	  .AddClass($"fab-size-{Size.ToDescription()}")
-	  .AddClass($"ripple", !CanRipple && !Disabled)
 	.Build();
 
 	/// <summary>
@@ -30,19 +29,19 @@ public partial class Fab : ButtonBase
 	public Size Size { get; set; } = Size.Large;
 
 	/// <summary>
-	/// If applied Icon will be added at the start of the component.
+	/// If applied Glyph will be added at the start of the component.
 	/// </summary>
 	[Obsolete("This property is obsolete. Use StartIcon instead.")][Parameter] public string Icon { get => StartIcon; set => StartIcon = value; }
 
 	/// <summary>
-	/// If applied Icon will be added at the start of the component.
+	/// If applied Glyph will be added at the start of the component.
 	/// </summary>
 	[Parameter]
 	[Category(CategoryTypes.Button.Behavior)]
 	public string StartIcon { get; set; }
 
 	/// <summary>
-	/// If applied Icon will be added at the end of the component.
+	/// If applied Glyph will be added at the end of the component.
 	/// </summary>
 	[Parameter]
 	[Category(CategoryTypes.Button.Behavior)]
@@ -70,7 +69,7 @@ public partial class Fab : ButtonBase
 	public string Label { get; set; }
 
 	/// <summary>
-	/// Title of the icon used for accessibility.
+	/// GlyphTitle of the icon used for accessibility.
 	/// </summary>
 	[Parameter]
 	[Category(CategoryTypes.Button.Behavior)]

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

@@ -0,0 +1,27 @@
+@namespace Connected.Components
+
+@inherits ButtonBase
+
+@using Connected.Extensions;
+
+<Element disabled="@Disabled"
+         title="@GlyphTitle"
+         type="@ButtonType.ToDescription()"
+         ClassList="@CompiledClassList.ToString()"
+         HtmlTag="@HtmlTag"
+         PreventOnClickPropagation="PreventOnClickPropagation"
+         @attributes="CustomAttributes"
+         @onclick="OnClick">
+   @if (!String.IsNullOrEmpty(Glyph))
+   {
+      <span name="glyph-container" class="glyph-button-label">
+         <Icon Glyph="@Glyph" />
+      </span>
+   }
+   else
+   {
+      <TextContent Typo="Typo.body2">
+         @ChildContent
+      </TextContent>
+   }
+</Element>

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

@@ -0,0 +1,56 @@
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components;
+
+public partial class GlyphButton : ButtonBase
+{
+	/// <summary>
+	/// Contains the default container classlist and the user defined classes.
+	/// </summary>
+	private CssBuilder CompiledClassList
+	{
+		get
+		{
+			return new CssBuilder("button-root glyph-button")
+				.AddClass(ClassList);
+		}
+	}
+
+	/// <summary>
+	/// Child content of component, only shows if Glyph is null or Empty.
+	/// </summary>
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+
+	#region EventCallbacks
+	#endregion
+
+	#region Content placeholders
+	/// <summary>
+	/// The Glyph that will be used in the component.
+	/// </summary>
+	[Parameter]
+	public string? Glyph { get; set; }
+
+	/// <summary>
+	/// GlyphTitle of the icon used for accessibility.
+	/// </summary>
+	[Parameter]
+	public string? GlyphTitle { get; set; }
+	#endregion
+
+	#region Styling properties
+	/// <summary>
+	/// A space separated list of class names, added on top of the default class list.
+	/// </summary>
+	[Parameter]
+	public string? ClassList { get; set; }
+
+	/// <summary>
+	/// The variant to use.
+	/// </summary>
+	[Parameter]
+	public Variant Variant { get; set; } = Variant.Text;
+	#endregion
+}

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

@@ -1,25 +0,0 @@
-@namespace Connected.Components
-
-@inherits ButtonBase
-
-@using Connected.Extensions;
-
-<Element @bind-Ref="@_elementReference"
-            HtmlTag="@HtmlTag"
-            Class="@Classname"
-            @attributes="CustomAttributes" 
-            @onclick="OnClickHandler"
-            type="@ButtonType.ToDescriptionString()" 
-            disabled="@Disabled"
-			title="@Title">
-    @if (!String.IsNullOrEmpty(Icon))
-    {
-        <span class="icon-button-label">
-            <Icon Glyph="@Icon" Size="@Size" />
-        </span>
-    }
-    else
-    {
-        <TextContent Typo="Typo.body2" Color="ThemeColor.Inherit">@ChildContent</TextContent>
-    }
-</Element>

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

@@ -1,75 +0,0 @@
-using Connected.Annotations;
-using Connected.Extensions;
-using Connected.Utilities;
-using Microsoft.AspNetCore.Components;
-
-namespace Connected.Components;
-
-public partial class IconButton : ButtonBase
-{
-	protected string Classname =>
-	new CssBuilder("button-root mud-icon-button")
-	  .AddClass("button", when: AsButton)
-	  .AddClass($"{Color.ToDescriptionString()}-text hover:mud-{Color.ToDescriptionString()}-hover", !AsButton && Color != ThemeColor.Default)
-	  .AddClass($"button-{Variant.ToDescriptionString()}", AsButton)
-	  .AddClass($"button-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}", AsButton)
-	  .AddClass($"button-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}", 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(AdditionalClassList)
-	.Build();
-
-	protected bool AsButton => Variant != Variant.Text;
-
-	/// <summary>
-	/// The Icon that will be used in the component.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Button.Behavior)]
-	public string Icon { get; set; }
-
-	/// <summary>
-	/// Title of the icon used for accessibility.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Button.Behavior)]
-	public string Title { 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>
-	/// If set uses a negative margin.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Button.Appearance)]
-	public Edge Edge { get; set; }
-
-	/// <summary>
-	/// Child content of component, only shows if Icon is null or Empty.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Button.Behavior)]
-	public RenderFragment ChildContent { get; set; }
-
-	/// <summary>
-	/// The variant to use.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Button.Appearance)]
-	public Variant Variant { get; set; } = Variant.Text;
-
-}

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

@@ -0,0 +1,13 @@
+@namespace Connected.Components
+
+@inherits UIComponent
+
+<GlyphButton aria-pressed="@Toggled.ToString()"
+             ClassList="@ClassList"
+             Clicked="Toggle"
+             Disabled="Disabled"
+             Glyph="@(Toggled ? ToggledGlyph : Glyph)"
+             GlyphTitle="@(Toggled && ToggledGlyphTitle != null ? ToggledGlyphTitle : GlyphTitle)"
+             Variant="Variant"
+             @attributes="CustomAttributes" 
+/>

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

@@ -0,0 +1,89 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components;
+
+public partial class ToggleGlyphButton : UIComponent
+{
+	#region EventCallbacks
+	/// <summary>
+	/// Fires whenever toggled is changed. 
+	/// </summary>
+	[Parameter]
+	public EventCallback<bool> ToggledChanged { get; set; }
+	#endregion
+
+	#region Content placeholders
+	/// <summary>
+	/// The glyph that will be used in the untoggled state.
+	/// </summary>
+	[Parameter]
+	public string? Glyph { get; set; }
+
+	/// <summary>
+	/// GlyphTitle of the icon used for accessibility.
+	/// </summary>
+	[Parameter]
+	public string? GlyphTitle { get; set; }
+
+	/// <summary>
+	/// The glyph that will be used in the toggled state.
+	/// </summary>
+	[Parameter]
+	public string? ToggledGlyph { get; set; }
+
+	/// <summary>
+	/// GlyphTitle used in toggled state, if different.
+	/// </summary>
+	[Parameter]
+	public string? ToggledGlyphTitle { get; set; }
+	#endregion
+
+	#region Styling properties
+	/// <summary>
+	/// A space separated list of class names, added on top of the default class list.
+	/// </summary>
+	[Parameter]
+	public string? ClassList { get; set; }
+
+	/// <summary>
+	/// The variant to use.
+	/// </summary>
+	[Parameter]
+	public Variant Variant { get; set; } = Variant.Text;
+	#endregion
+
+	#region Behavior properties
+	/// <summary>
+	/// If true, the button will be disabled.
+	/// </summary>
+	[Parameter]
+	public bool Disabled { get; set; }
+
+	/// <summary>
+	/// The button toggled state.
+	/// </summary>
+	[Parameter]
+	public bool Toggled { get; set; }
+	#endregion
+
+	public async Task Toggle()
+	{
+		await SetToggledAsync(!Toggled);
+	}
+
+	protected internal async Task SetToggledAsync(bool toggled)
+	{
+		if (Disabled)
+			return;
+
+		if (Toggled != toggled)
+		{
+			Toggled = toggled;
+
+			if (!ToggledChanged.HasDelegate)
+				return;
+
+			await ToggledChanged.InvokeAsync(Toggled);
+		}
+	}
+}

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

@@ -1,20 +0,0 @@
-@namespace Connected.Components
-
-@inherits UIComponent
-
-@{
-    var ariaPressedValue = @Toggled ? "true" : "false";
-}
-
-<IconButton Icon="@(Toggled ? ToggledIcon : Icon)"
-               Size="(Toggled ? ToggledSize : Size)"
-               Color="(Toggled ? ToggledColor : Color)"
-               Title="@(Toggled && ToggledTitle != null ? ToggledTitle : Title)"
-               Variant="Variant"
-               Disabled="Disabled"
-               Edge="Edge"
-               DisableRipple="DisableRipple"
-               OnClick="Toggle"
-               Class="@AdditionalClassList"
-               aria-pressed="@ariaPressedValue"
-               @attributes="CustomAttributes" />

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

@@ -1,119 +0,0 @@
-using Connected.Annotations;
-using Microsoft.AspNetCore.Components;
-
-namespace Connected.Components;
-
-public partial class ToggleIconButton : UIComponent
-{
-   /// <summary>
-   /// The toggled value.
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.Button.Behavior)]
-   public bool Toggled { get; set; }
-
-   /// <summary>
-   /// Fires whenever toggled is changed. 
-   /// </summary>
-   [Parameter] public EventCallback<bool> ToggledChanged { get; set; }
-
-   /// <summary>
-   /// The Icon that will be used in the untoggled state.
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.Button.Behavior)]
-   public string Icon { get; set; }
-
-   /// <summary>
-   /// The Icon that will be used in the toggled state.
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.Button.Behavior)]
-   public string ToggledIcon { get; set; }
-
-   /// <summary>
-   /// Title of the icon used for accessibility.
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.Button.Behavior)]
-   public string Title { get; set; }
-
-   /// <summary>
-   /// Title used in toggled state, if different.
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.Button.Behavior)]
-   public string ToggledTitle { get; set; }
-
-   /// <summary>
-   /// The color of the icon in the untoggled state. It supports the theme colors.
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.Button.Appearance)]
-   public ThemeColor Color { get; set; } = ThemeColor.Default;
-
-   /// <summary>
-   /// The color of the icon in the toggled state. It supports the theme colors.
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.Button.Appearance)]
-   public ThemeColor ToggledColor { get; set; } = ThemeColor.Default;
-
-   /// <summary>
-   /// The Size of the component in the untoggled state.
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.Button.Appearance)]
-   public Size Size { get; set; } = Size.Medium;
-
-   /// <summary>
-   /// The Size of the component in the toggled state.
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.Button.Appearance)]
-   public Size ToggledSize { get; set; } = Size.Medium;
-
-   /// <summary>
-   /// If set uses a negative margin.
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.Button.Appearance)]
-   public Edge Edge { get; set; }
-
-   /// <summary>
-   /// If true, disables ripple effect.
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.Button.Appearance)]
-   public bool DisableRipple { get; set; }
-
-   /// <summary>
-   /// If true, the button will be disabled.
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.Button.Behavior)]
-   public bool Disabled { get; set; }
-
-   /// <summary>
-   /// The variant to use.
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.Button.Appearance)]
-   public Variant Variant { get; set; } = Variant.Text;
-
-   public Task Toggle()
-   {
-      return SetToggledAsync(!Toggled);
-   }
-
-   protected internal async Task SetToggledAsync(bool toggled)
-   {
-      if (Disabled)
-         return;
-      if (Toggled != toggled)
-      {
-         Toggled = toggled;
-         await ToggledChanged.InvokeAsync(Toggled);
-      }
-   }
-}

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

@@ -10,9 +10,9 @@ public partial class ButtonGroup : UIComponent
    protected string Classname =>
    new CssBuilder("button-group-root")
      .AddClass($"button-group-override-styles", OverrideStyles)
-     .AddClass($"button-group-{Variant.ToDescriptionString()}")
+     .AddClass($"button-group-{Variant.ToDescription()}")
-     .AddClass($"button-group-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
+     .AddClass($"button-group-{Variant.ToDescription()}-{Color.ToDescription()}")
-     .AddClass($"button-group-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}")
+     .AddClass($"button-group-{Variant.ToDescription()}-size-{Size.ToDescription()}")
      .AddClass($"button-group-vertical", VerticalAlign)
      .AddClass($"button-group-horizontal", !VerticalAlign)
      .AddClass($"button-group-disable-elevation", DisableElevation)

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

@@ -16,7 +16,7 @@ public partial class CardMedia : UIComponent
 			.Build();
 
 	/// <summary>
-	/// Title of the image used for accessibility.
+	/// GlyphTitle of the image used for accessibility.
 	/// </summary>
 	[Parameter]
 	[Category(CategoryTypes.Card.Behavior)]

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

@@ -42,7 +42,7 @@
             }
 
             @*Bullets*@
-            <div class="@($"flex-grow-1 align-self-{ConvertPosition(BulletsPosition).ToDescriptionString()}")" style="z-index:3">
+            <div class="@($"flex-grow-1 align-self-{ConvertPosition(BulletsPosition).ToDescription()}")" style="z-index:3">
                 @if (ShowBullets)
                 {
                     <div class="d-flex justify-center">

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

@@ -10,13 +10,13 @@ public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TD
 {
 	protected string Classname =>
 				new CssBuilder("carousel")
-					 .AddClass($"carousel-{(BulletsColor ?? _currentColor).ToDescriptionString()}")
+					 .AddClass($"carousel-{(BulletsColor ?? _currentColor).ToDescription()}")
 							 .AddClass(AdditionalClassList)
 							 .Build();
 
 	protected string NavigationButtonsClassName =>
 				new CssBuilder()
-					.AddClass($"align-self-{ConvertPosition(ArrowsPosition).ToDescriptionString()}", !(NavigationButtonsClass ?? "").Contains("align-self-"))
+					.AddClass($"align-self-{ConvertPosition(ArrowsPosition).ToDescription()}", !(NavigationButtonsClass ?? "").Contains("align-self-"))
 					.AddClass("carousel-elements-rtl", RightToLeft)
 					.AddClass(NavigationButtonsClass)
 					.Build();

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

@@ -9,7 +9,7 @@ public partial class CarouselItem : UIComponent, IDisposable
 {
 	protected string Classname =>
 				new CssBuilder("carousel-item")
-					 .AddClass($"carousel-item-{Color.ToDescriptionString()}")
+					 .AddClass($"carousel-item-{Color.ToDescription()}")
 					 .AddClass("carousel-item-exit", !_disposed && Parent.LastContainer == this)
 
 					 .AddClass("carousel-transition-fade-in", !_disposed && Transition == Transition.Fade && Parent.SelectedContainer == this)

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

@@ -37,7 +37,7 @@ public partial class Chart : UIComponent
 
 	protected string Classname =>
 	new CssBuilder("chart")
-		.AddClass($"chart-legend-{ConvertLegendPosition(LegendPosition).ToDescriptionString()}")
+		.AddClass($"chart-legend-{ConvertLegendPosition(LegendPosition).ToDescription()}")
 	  .AddClass(AdditionalClassList)
 	.Build();
 

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

@@ -23,8 +23,8 @@ public partial class CheckBox<T> : BooleanInput<T>
 
 	protected string CheckBoxClassname =>
 	new CssBuilder("button-root mud-icon-button")
-		.AddClass($"{Color.ToDescriptionString()}-text hover:mud-{Color.ToDescriptionString()}-hover", UnCheckedColor == null || (UnCheckedColor != null && BoolValue == true))
+		.AddClass($"{Color.ToDescription()}-text hover:mud-{Color.ToDescription()}-hover", UnCheckedColor == null || (UnCheckedColor != null && BoolValue == true))
-		.AddClass($"{UnCheckedColor?.ToDescriptionString()}-text hover:mud-{UnCheckedColor?.ToDescriptionString()}-hover", UnCheckedColor != null && BoolValue == false)
+		.AddClass($"{UnCheckedColor?.ToDescription()}-text hover:mud-{UnCheckedColor?.ToDescription()}-hover", UnCheckedColor != null && BoolValue == false)
 		.AddClass($"checkbox-dense", Dense)
 		.AddClass($"ripple mud-ripple-checkbox", !DisableRipple && !ReadOnly && !Disabled)
 		.AddClass($"disabled", Disabled)

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

@@ -17,9 +17,9 @@ public partial class Chip : UIComponent, IDisposable
 
 	protected string Classname =>
 	new CssBuilder("chip")
-	  .AddClass($"chip-{GetVariant().ToDescriptionString()}")
+	  .AddClass($"chip-{GetVariant().ToDescription()}")
-	  .AddClass($"chip-size-{Size.ToDescriptionString()}")
+	  .AddClass($"chip-size-{Size.ToDescription()}")
-	  .AddClass($"chip-color-{GetColor().ToDescriptionString()}")
+	  .AddClass($"chip-color-{GetColor().ToDescription()}")
 	  .AddClass("clickable", !ChipSet?.ReadOnly ?? OnClick.HasDelegate)
 	  .AddClass("ripple", !ChipSet?.ReadOnly ?? OnClick.HasDelegate && !DisableRipple)
 	  .AddClass("chip-label", Label)
@@ -88,7 +88,7 @@ public partial class Chip : UIComponent, IDisposable
 	public ThemeColor SelectedColor { get; set; } = ThemeColor.Inherit;
 
 	/// <summary>
-	/// Avatar Icon, Overrides the regular Icon if set.
+	/// Avatar Glyph, Overrides the regular Glyph if set.
 	/// </summary>
 	[Parameter]
 	[Category(CategoryTypes.Chip.Behavior)]
@@ -116,7 +116,7 @@ public partial class Chip : UIComponent, IDisposable
 	public bool Disabled { get; set; }
 
 	/// <summary>
-	/// Sets the Icon to use.
+	/// Sets the Glyph to use.
 	/// </summary>
 	[Parameter]
 	[Category(CategoryTypes.Chip.Behavior)]

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

@@ -9,7 +9,7 @@ public partial class Container : UIComponent
 	protected string Classname =>
 	new CssBuilder("container")
 	  .AddClass($"container-fixed", Fixed)
-	  .AddClass($"container-maxwidth-{MaxWidth.ToDescriptionString()}", !Fixed)
+	  .AddClass($"container-maxwidth-{MaxWidth.ToDescription()}", !Fixed)
 	  .AddClass(AdditionalClassList)
 	.Build();
 

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

@@ -60,7 +60,7 @@
                                             @Filter(f, null)
                                         }
                                     </Grid>
-                                    <Button Class="mt-2" StartIcon="@Icons.Material.Filled.Add" OnClick="@AddFilter" Color="@ThemeColor.Primary">Add Filter</Button>
+                           <Button Class="mt-2" StartIcon="@Icons.Material.Filled.Add" Clicked="@AddFilter" Color="@ThemeColor.Primary">Add Filter</Button>
                                     @if (ServerData != null)
                                     {
                                         <Button Class="mt-2" StartIcon="@Icons.Material.Filled.Add" OnClick="@ApplyFilters" Color="@ThemeColor.Primary">Apply</Button>
@@ -273,8 +273,8 @@
             </Form>
         </DialogContent>
         <DialogActions>
-            <Button Variant="Variant.Filled" Color="ThemeColor.Default" OnClick="@CancelEditingItemAsync" Class="px-10">Cancel</Button>
+            <Button Variant="Variant.Filled" Color="ThemeColor.Default" Clicked="@CancelEditingItemAsync" Class="px-10">Cancel</Button>
-            <Button Variant="Variant.Filled" Color="ThemeColor.Primary" OnClick="@CommitItemChangesAsync" Class="px-10">Save</Button>
+         <Button Variant="Variant.Filled" Color="ThemeColor.Primary" Clicked="@CommitItemChangesAsync" Class="px-10">Save</Button>
         </DialogActions>
     </Dialog>
 </CascadingValue>

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

@@ -58,7 +58,7 @@
                         }
                     }
                 </Menu>
-                <IconButton Class="align-self-center" Icon="@Icons.Material.Filled.FilterAltOff" Size="@Size.Small" OnClick="@ClearFilter"></IconButton>
+            <GlyphButton Class="align-self-center" Icon="@Icons.Material.Filled.FilterAltOff" Size="@Size.Small" Clicked="@ClearFilter"></GlyphButton>
             </Stack>
         }
     }

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

@@ -113,8 +113,8 @@ else if (Column != null && !Column.Hidden)
                             @DataGrid.Filter(Column.filterContext.FilterDefinition, Column)
                         </Item>
                         <Item xs="12" Class="d-flex justify-end">
-                            <Button Class="clear-filter-button" OnClick="@ClearFilter">Clear</Button>
+                     <Button Class="clear-filter-button" Clicked="@ClearFilter">Clear</Button>
-                            <Button Class="apply-filter-button" Color="@ThemeColor.Primary" OnClick="@ApplyFilter">Filter</Button>
+                     <Button Class="apply-filter-button" Color="@ThemeColor.Primary" Clicked="@ApplyFilter">Filter</Button>
                         </Item>
                     </Grid>
                 }

src/Connected.Components/Components/DatePicker/DatePicker.cs

@@ -68,9 +68,9 @@ public class DatePicker : DatePickerBase
 		if (day < GetMonthStart(month) || day > GetMonthEnd(month))
 			return b.AddClass("hidden").Build();
 		if ((Date?.Date == day && _selectedDate == null) || _selectedDate?.Date == day)
-			return b.AddClass("selected").AddClass($"theme-{Color.ToDescriptionString()}").Build();
+			return b.AddClass("selected").AddClass($"theme-{Color.ToDescription()}").Build();
 		if (day == DateTime.Today)
-			return b.AddClass("current mud-button-outlined").AddClass($"button-outlined-{Color.ToDescriptionString()} mud-{Color.ToDescriptionString()}-text").Build();
+			return b.AddClass("current mud-button-outlined").AddClass($"button-outlined-{Color.ToDescription()} mud-{Color.ToDescription()}-text").Build();
 		return b.Build();
 	}
 

src/Connected.Components/Components/DatePicker/DatePickerBase.razor.cs

@@ -497,7 +497,7 @@ public abstract partial class DatePickerBase : Picker<DateTime?>
 	private string GetYearClasses(int year)
 	{
 		if (year == GetMonthStart(0).Year)
-			return $"picker-year-selected mud-{Color.ToDescriptionString()}-text";
+			return $"picker-year-selected mud-{Color.ToDescription()}-text";
 		return null;
 	}
 
@@ -546,7 +546,7 @@ public abstract partial class DatePickerBase : Picker<DateTime?>
 	private string GetMonthClasses(DateTime month)
 	{
 		if (GetMonthStart(0) == month)
-			return $"picker-month-selected mud-{Color.ToDescriptionString()}-text";
+			return $"picker-month-selected mud-{Color.ToDescription()}-text";
 		return null;
 	}
 

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

@@ -190,7 +190,7 @@ public partial class DateRangePicker : DatePickerBase
              .AddClass("range")
              .AddClass("range-start-selected")
              .AddClass("range-selection", _firstDate != null)
-             .AddClass($"theme-{Color.ToDescriptionString()}")
+             .AddClass($"theme-{Color.ToDescription()}")
              .Build();
       }
 
@@ -200,19 +200,19 @@ public partial class DateRangePicker : DatePickerBase
          return b.AddClass("selected")
              .AddClass("range")
              .AddClass("range-end-selected")
-             .AddClass($"theme-{Color.ToDescriptionString()}")
+             .AddClass($"theme-{Color.ToDescription()}")
              .Build();
       }
 
       if (_firstDate == null && _dateRange != null && _dateRange.Start == _dateRange.End && _dateRange.Start == day)
       {
-         return b.AddClass("selected").AddClass($"theme-{Color.ToDescriptionString()}").Build();
+         return b.AddClass("selected").AddClass($"theme-{Color.ToDescription()}").Build();
       }
       else if (_firstDate != null && day > _firstDate)
       {
          return b.AddClass("range")
              .AddClass("range-selection", _secondDate == null)
-             .AddClass($"range-selection-{Color.ToDescriptionString()}", _firstDate != null)
+             .AddClass($"range-selection-{Color.ToDescription()}", _firstDate != null)
              .Build();
       }
 
@@ -221,8 +221,8 @@ public partial class DateRangePicker : DatePickerBase
          return b.AddClass("current")
              .AddClass("range", _firstDate != null && day > _firstDate)
              .AddClass("range-selection", _firstDate != null && day > _firstDate)
-             .AddClass($"range-selection-{Color.ToDescriptionString()}", _firstDate != null && day > _firstDate)
+             .AddClass($"range-selection-{Color.ToDescription()}", _firstDate != null && day > _firstDate)
-             .AddClass($"{Color.ToDescriptionString()}-text")
+             .AddClass($"{Color.ToDescription()}-text")
              .Build();
       }
 

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

@@ -24,7 +24,7 @@ public partial class Dialog : UIComponent
    [Inject] public IDialogService DialogService { get; set; }
 
    /// <summary>
-   /// Define the dialog title as a renderfragment (overrides Title)
+   /// Define the dialog title as a renderfragment (overrides GlyphTitle)
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.Dialog.Behavior)]
@@ -109,7 +109,7 @@ public partial class Dialog : UIComponent
 
 
    /// <summary>
-   /// Define the dialog title as a renderfragment (overrides Title)
+   /// Define the dialog title as a renderfragment (overrides GlyphTitle)
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.Dialog.Behavior)]

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

@@ -191,7 +191,7 @@ public partial class DialogInstance : UIComponent, IDisposable
 		{
 			position = DialogPosition.Center;
 		}
-		return $"dialog-{position.ToDescriptionString()}";
+		return $"dialog-{position.ToDescription()}";
 	}
 
 	private string SetMaxWidth()
@@ -210,7 +210,7 @@ public partial class DialogInstance : UIComponent, IDisposable
 		{
 			maxWidth = MaxWidth.Small;
 		}
-		return $"dialog-width-{maxWidth.ToDescriptionString()}";
+		return $"dialog-width-{maxWidth.ToDescription()}";
 	}
 
 	private bool SetFullWidth()

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

@@ -12,7 +12,7 @@ public partial class Divider : UIComponent
      .AddClass($"divider-flexitem", FlexItem)
      .AddClass($"divider-light", Light)
      .AddClass($"divider-vertical", Vertical)
-     .AddClass($"divider-{DividerType.ToDescriptionString()}", when: () => DividerType != DividerType.FullWidth)
+     .AddClass($"divider-{DividerType.ToDescription()}", when: () => DividerType != DividerType.FullWidth)
      .AddClass(AdditionalClassList)
    .Build();
 

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

@@ -28,11 +28,11 @@ public partial class Drawer : UIComponent, IDisposable, INavigationEventReceiver
 	  .AddClass($"drawer--open", Open)
 	  .AddClass($"drawer--closed", !Open)
 	  .AddClass($"drawer--initial", _initial)
-	  .AddClass($"drawer-{Breakpoint.ToDescriptionString()}")
+	  .AddClass($"drawer-{Breakpoint.ToDescription()}")
-	  .AddClass($"drawer-clipped-{_clipMode.ToDescriptionString()}")
+	  .AddClass($"drawer-clipped-{_clipMode.ToDescription()}")
-	  .AddClass($"theme-{Color.ToDescriptionString()}", Color != ThemeColor.Default)
+	  .AddClass($"theme-{Color.ToDescription()}", Color != ThemeColor.Default)
 	  .AddClass($"elevation-{Elevation}")
-	  .AddClass($"drawer-{Variant.ToDescriptionString()}")
+	  .AddClass($"drawer-{Variant.ToDescription()}")
 	  .AddClass(AdditionalClassList)
 	.Build();
 
@@ -40,8 +40,8 @@ public partial class Drawer : UIComponent, IDisposable, INavigationEventReceiver
 	new CssBuilder("drawer-overlay mud-overlay-drawer")
 	  .AddClass($"drawer-pos-{GetPosition()}")
 	  .AddClass($"drawer-overlay--open", Open)
-	  .AddClass($"drawer-overlay-{Variant.ToDescriptionString()}")
+	  .AddClass($"drawer-overlay-{Variant.ToDescription()}")
-	  .AddClass($"drawer-overlay-{Breakpoint.ToDescriptionString()}")
+	  .AddClass($"drawer-overlay-{Breakpoint.ToDescription()}")
 	  .AddClass($"drawer-overlay--initial", _initial)
 	.Build();
 
@@ -385,7 +385,7 @@ public partial class Drawer : UIComponent, IDisposable, INavigationEventReceiver
 			default: break;
 		}
 
-		return Anchor.ToDescriptionString();
+		return Anchor.ToDescription();
 	}
 
 

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

@@ -53,14 +53,14 @@ public partial class DrawerContainer : UIComponent
 		if (drawer == null)
 			return string.Empty;
 
-		var className = $"drawer-{(drawer.Open ? "open" : "close")}-{drawer.Variant.ToDescriptionString()}";
+		var className = $"drawer-{(drawer.Open ? "open" : "close")}-{drawer.Variant.ToDescription()}";
 		if (drawer.Variant is DrawerVariant.Responsive or DrawerVariant.Mini)
 		{
-			className += $"-{drawer.Breakpoint.ToDescriptionString()}";
+			className += $"-{drawer.Breakpoint.ToDescription()}";
 		}
 		className += $"-{drawer.GetPosition()}";
 
-		className += $" mud-drawer-{drawer.GetPosition()}-clipped-{drawer.ClipMode.ToDescriptionString()}";
+		className += $" mud-drawer-{drawer.GetPosition()}-clipped-{drawer.ClipMode.ToDescription()}";
 
 		return className;
 	}

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

@@ -1,5 +1,4 @@
-using Connected.Annotations;
+using Microsoft.AspNetCore.Components;
-using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Rendering;
 using Microsoft.AspNetCore.Components.Web;
 
@@ -11,72 +10,97 @@ namespace Connected.Components;
 /// </summary>
 public class Element : UIComponent
 {
-   /// <summary>
+	/// <summary>
-   /// Child content
+	/// Child content
-   /// </summary>
+	/// </summary>
-   [Parameter]
+	[Parameter]
-   [Category(CategoryTypes.Element.Misc)]
+	public RenderFragment? ChildContent { get; set; }
-   public RenderFragment ChildContent { get; set; }
 
-   /// <summary>
+	#region EventCallbacks
-   /// The HTML element that will be rendered in the root by the component
+	[Parameter]
-   /// </summary>
+	public EventCallback<ElementReference> RefChanged { get; set; }
-   [Parameter]
+	#endregion
-   [Category(CategoryTypes.Element.Misc)]
-   public string HtmlTag { get; set; } = "span";
-   /// <summary>
-   /// The ElementReference to bind to.
-   /// Use like @bind-Ref="myRef"
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.Element.Misc)]
-   public ElementReference? Ref { get; set; }
 
-   [Parameter] public EventCallback<ElementReference> RefChanged { get; set; }
+	#region Content placeholders
+	/// <summary>
+	/// The Ref to bind to.
+	/// Usage: @bind-Ref="myRef"
+	/// </summary>
+	[Parameter]
+	public ElementReference? Ref { get; set; }
+	#endregion
 
-   /// <summary>
+	#region Styling properties
-   /// Calling StateHasChanged to refresh the component's state
+	/// <summary>
-   /// </summary>
+	/// A space separated list of class names, added on top of the default class list.
-   public void Refresh() => StateHasChanged();
+	/// </summary>
+	[Parameter]
+	public string? ClassList { get; set; }
+	#endregion
 
-   protected override void BuildRenderTree(RenderTreeBuilder builder)
+	#region Behavior properties
-   {
+	/// <summary>
-      base.BuildRenderTree(builder);
+	/// The HTML element that will be rendered in the root by the component
-      //Open
+	/// </summary>
-      builder.OpenElement(0, HtmlTag);
+	[Parameter]
+	public string HtmlTag { get; set; } = "span";
 
-      //splatted attributes
+	[Parameter]
-      foreach (var attribute in CustomAttributes)
+	public bool PreventOnClickPropagation { get; set; }
-      {
+	#endregion
-         // checking if the value is null, we can get rid of null event handlers
-         // for example `@onmouseenter=@(IsOpen ? HandleEnter : null)`
-         // this is a powerful feature that in normal HTML elements doesn't work, because
-         // Blazor adds always the attribute value and creates an EventCallback
-         if (attribute.Value != null)
-            builder.AddAttribute(1, attribute.Key, attribute.Value);
-      }
-      //Class
-      builder.AddAttribute(2, "class", AdditionalClassList);
 
-      // StopPropagation
+	/// <summary>
-      // the order matters. This has to be before content is added
+	/// Schedules a component's state refresh
-      if (HtmlTag == "button")
+	/// </summary>
-         builder.AddEventStopPropagationAttribute(5, "onclick", true);
+	public void Refresh() => StateHasChanged();
 
-      //Reference capture
+	protected override void BuildRenderTree(RenderTreeBuilder builder)
-      if (Ref != null)
+	{
-      {
+		base.BuildRenderTree(builder);
-         builder.AddElementReferenceCapture(6, async capturedRef =>
-         {
-            Ref = capturedRef;
-            await RefChanged.InvokeAsync(Ref.Value);
-         });
-      }
 
-      //Content
+		builder.OpenElement(0, HtmlTag);
-      builder.AddContent(10, ChildContent);
 	
-      //Close
+		/*
-      builder.CloseElement();
+		 * Handle splatted attributes
-   }
+		 */
+		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)`.
+			 * This is a powerful feature that does not work in regular html elements
+			 * because Blazor always adds the attribute value and creates an EventCallback.
+			 * */
+			if (attribute.Value is not null)
+				builder.AddAttribute(1, attribute.Key, attribute.Value);
+		}
+
+		builder.AddAttribute(2, "class", ClassList);
+
+		/*
+		 * Stop onclock propagation for buttons. The order matters.
+		 * This has to be before content is added
+		 */
+		if (PreventOnClickPropagation)
+			builder.AddEventStopPropagationAttribute(5, "onclick", true);
+
+		/*
+		 * Add reference capture propagation.
+		 */
+		if (Ref is not null)
+		{
+			builder.AddElementReferenceCapture(6, async capturedRef =>
+			{
+				Ref = capturedRef;
+				await RefChanged.InvokeAsync(Ref.Value);
+			});
+		}
+
+		/*
+		 * Render child content
+		 */
+		builder.AddContent(10, ChildContent);
+
+		builder.CloseElement();
+	}
 }

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

@@ -11,9 +11,9 @@ public partial class Field : UIComponent
 {
    protected string Classname =>
       new CssBuilder("input")
-         .AddClass($"input-{Variant.ToDescriptionString()}")
+         .AddClass($"input-{Variant.ToDescription()}")
-         .AddClass($"input-adorned-{Adornment.ToDescriptionString()}", Adornment != Adornment.None)
+         .AddClass($"input-adorned-{Adornment.ToDescription()}", Adornment != Adornment.None)
-         .AddClass($"input-margin-{Margin.ToDescriptionString()}", when: () => Margin != Margin.None)
+         .AddClass($"input-margin-{Margin.ToDescription()}", when: () => Margin != Margin.None)
          .AddClass("input-underline", when: () => DisableUnderLine == false && Variant != Variant.Outlined)
          .AddClass("shrink", when: () => !string.IsNullOrWhiteSpace(ChildContent?.ToString()) || Adornment == Adornment.Start)
          .AddClass("disabled", Disabled)
@@ -24,14 +24,14 @@ public partial class Field : UIComponent
       new CssBuilder("input-slot")
          .AddClass("input-root")
          .AddClass("input-slot-nopadding", when: () => InnerPadding == false)
-         .AddClass($"input-root-{Variant.ToDescriptionString()}")
+         .AddClass($"input-root-{Variant.ToDescription()}")
-         .AddClass($"input-adorned-{Adornment.ToDescriptionString()}", Adornment != Adornment.None)
+         .AddClass($"input-adorned-{Adornment.ToDescription()}", Adornment != Adornment.None)
-         .AddClass($"input-root-margin-{Margin.ToDescriptionString()}", when: () => Margin != Margin.None)
+         .AddClass($"input-root-margin-{Margin.ToDescription()}", when: () => Margin != Margin.None)
          .Build();
 
    protected string AdornmentClassname =>
       new CssBuilder("input-adornment")
-         .AddClass($"input-adornment-{Adornment.ToDescriptionString()}", Adornment != Adornment.None)
+         .AddClass($"input-adornment-{Adornment.ToDescription()}", Adornment != Adornment.None)
          .AddClass($"text", !string.IsNullOrEmpty(AdornmentText))
          .AddClass($"input-root-filled-shrink", Variant == Variant.Filled)
          .Build();
@@ -105,14 +105,14 @@ public partial class Field : UIComponent
    public bool Disabled { get; set; }
 
    /// <summary>
-   /// Icon that will be used if Adornment is set to Start or End.
+   /// Glyph that will be used if Adornment is set to Start or End.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.Field.Behavior)]
    public string AdornmentIcon { get; set; }
 
    /// <summary>
-   /// Text that will be used if Adornment is set to Start or End, the Text overrides Icon.
+   /// Text that will be used if Adornment is set to Start or End, the Text overrides Glyph.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.Field.Behavior)]
@@ -133,7 +133,7 @@ public partial class Field : UIComponent
    public ThemeColor AdornmentColor { get; set; } = ThemeColor.Default;
 
    /// <summary>
-   /// Sets the Icon Size.
+   /// Sets the Glyph Size.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.Field.Appearance)]

src/Connected.Components/Components/Grid/Grid.razor

@@ -15,7 +15,7 @@
     protected string Classname =>
     new CssBuilder("grid")
       .AddClass($"grid-spacing-xs-{Spacing.ToString()}")
-      .AddClass($"justify-{Justify.ToDescriptionString()}")
+      .AddClass($"justify-{Justify.ToDescription()}")
       .AddClass(AdditionalClassList)
     .Build();
 

src/Connected.Components/Components/Icon/Icon.razor.cs

@@ -11,20 +11,20 @@ public partial class Icon : UIComponent
        new CssBuilder("icon-root")
            .AddClass($"icon-default", Color == ThemeColor.Default)
            .AddClass($"svg-icon", !string.IsNullOrEmpty(Glyph) && Glyph.Trim().StartsWith(("<")))
-           .AddClass($"{Color.ToDescriptionString()}-text", Color != ThemeColor.Default && Color != ThemeColor.Inherit)
+           .AddClass($"{Color.ToDescription()}-text", Color != ThemeColor.Default && Color != ThemeColor.Inherit)
-           .AddClass($"icon-size-{Size.ToDescriptionString()}")
+           .AddClass($"icon-size-{Size.ToDescription()}")
            .AddClass(AdditionalClassList)
            .Build();
 
    /// <summary>
-   /// Icon to be used can either be svg paths for font icons.
+   /// Glyph to be used can either be svg paths for font icons.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.Icon.Behavior)]
    public string Glyph { get; set; }
 
    /// <summary>
-   /// Title of the icon used for accessibility.
+   /// GlyphTitle of the icon used for accessibility.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.Icon.Behavior)]

src/Connected.Components/Components/Image/Image.razor.cs

@@ -14,8 +14,8 @@ public partial class Image : UIComponent
    protected string Classname =>
       new CssBuilder("image")
          .AddClass("fluid", Fluid)
-         .AddClass($"object-{ObjectFit.ToDescriptionString()}")
+         .AddClass($"object-{ObjectFit.ToDescription()}")
-         .AddClass($"object-{ObjectPosition.ToDescriptionString()}")
+         .AddClass($"object-{ObjectPosition.ToDescription()}")
          .AddClass($"elevation-{Elevation}", Elevation > 0)
          .AddClass(AdditionalClassList)
          .Build();

src/Connected.Components/Components/Input/Input.razor.cs

@@ -29,7 +29,7 @@ public partial class Input<T> : InputBase<T>
 
    internal override InputType GetInputType() => InputType;
 
-   protected string InputTypeString => InputType.ToDescriptionString();
+   protected string InputTypeString => InputType.ToDescription();
 
    protected Task OnInput(ChangeEventArgs args)
    {

src/Connected.Components/Components/Input/InputBase.cs

@@ -63,14 +63,14 @@ public abstract class InputBase<T> : FormComponent<T, string>
    public bool HelperTextOnFocus { get; set; }
 
    /// <summary>
-   /// Icon that will be used if Adornment is set to Start or End.
+   /// Glyph that will be used if Adornment is set to Start or End.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.FormComponent.Behavior)]
    public string AdornmentIcon { get; set; }
 
    /// <summary>
-   /// Text that will be used if Adornment is set to Start or End, the Text overrides Icon.
+   /// Text that will be used if Adornment is set to Start or End, the Text overrides Glyph.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.FormComponent.Behavior)]
@@ -105,7 +105,7 @@ public abstract class InputBase<T> : FormComponent<T, string>
    public string AdornmentAriaLabel { get; set; } = string.Empty;
 
    /// <summary>
-   /// The Icon Size.
+   /// The Glyph Size.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.FormComponent.Appearance)]

src/Connected.Components/Components/Input/InputCssHelper.cs

@@ -7,9 +7,9 @@ internal static class InputCssHelper
 {
    public static string GetClassname<T>(InputBase<T> baseInput, Func<bool> shrinkWhen) =>
       new CssBuilder("input")
-         .AddClass($"input-{baseInput.Variant.ToDescriptionString()}")
+         .AddClass($"input-{baseInput.Variant.ToDescription()}")
-         .AddClass($"input-adorned-{baseInput.Adornment.ToDescriptionString()}", baseInput.Adornment != Adornment.None)
+         .AddClass($"input-adorned-{baseInput.Adornment.ToDescription()}", baseInput.Adornment != Adornment.None)
-         .AddClass($"input-margin-{baseInput.Margin.ToDescriptionString()}", when: () => baseInput.Margin != Margin.None)
+         .AddClass($"input-margin-{baseInput.Margin.ToDescription()}", when: () => baseInput.Margin != Margin.None)
          .AddClass("input-underline", when: () => baseInput.DisableUnderLine == false && baseInput.Variant != Variant.Outlined)
          .AddClass("shrink", when: shrinkWhen)
          .AddClass("disabled", baseInput.Disabled)
@@ -21,15 +21,15 @@ internal static class InputCssHelper
    public static string GetInputClassname<T>(InputBase<T> baseInput) =>
       new CssBuilder("input-slot")
          .AddClass("input-root")
-         .AddClass($"input-root-{baseInput.Variant.ToDescriptionString()}")
+         .AddClass($"input-root-{baseInput.Variant.ToDescription()}")
-         .AddClass($"input-root-adorned-{baseInput.Adornment.ToDescriptionString()}", baseInput.Adornment != Adornment.None)
+         .AddClass($"input-root-adorned-{baseInput.Adornment.ToDescription()}", baseInput.Adornment != Adornment.None)
-         .AddClass($"input-root-margin-{baseInput.Margin.ToDescriptionString()}", when: () => baseInput.Margin != Margin.None)
+         .AddClass($"input-root-margin-{baseInput.Margin.ToDescription()}", when: () => baseInput.Margin != Margin.None)
          .AddClass(baseInput.AdditionalClassList)
          .Build();
 
    public static string GetAdornmentClassname<T>(InputBase<T> baseInput) =>
       new CssBuilder("input-adornment")
-         .AddClass($"input-adornment-{baseInput.Adornment.ToDescriptionString()}", baseInput.Adornment != Adornment.None)
+         .AddClass($"input-adornment-{baseInput.Adornment.ToDescription()}", baseInput.Adornment != Adornment.None)
          .AddClass($"text", !string.IsNullOrEmpty(baseInput.AdornmentText))
          .AddClass($"input-root-filled-shrink", baseInput.Variant == Variant.Filled)
          .AddClass(baseInput.AdditionalClassList)

src/Connected.Components/Components/Input/InputLabel.razor.cs

@@ -9,8 +9,8 @@ public partial class InputLabel : UIComponent
   new Utilities.CssBuilder()
     .AddClass("input-label")
     .AddClass("input-label-animated")
-    .AddClass($"input-label-{Variant.ToDescriptionString()}")
+    .AddClass($"input-label-{Variant.ToDescription()}")
-    .AddClass($"input-label-margin-{Margin.ToDescriptionString()}", when: () => Margin != Margin.None)
+    .AddClass($"input-label-margin-{Margin.ToDescription()}", when: () => Margin != Margin.None)
     .AddClass($"disabled", Disabled)
     .AddClass("input-error", Error)
     .AddClass(AdditionalClassList)

src/Connected.Components/Components/Input/RangeInput.razor.cs

@@ -38,7 +38,7 @@ public partial class RangeInput<T> : InputBase<Range<T>>
    /// </summary>
    [Parameter] public string PlaceholderEnd { get; set; }
 
-   protected string InputTypeString => InputType.ToDescriptionString();
+   protected string InputTypeString => InputType.ToDescription();
 
    /// <summary>
    /// ChildContent of the MudInput will only be displayed if InputType.Hidden and if its not null.

src/Connected.Components/Components/InputControl/InputControl.razor.cs

@@ -9,7 +9,7 @@ public partial class InputControl : UIComponent
 	protected string Classname =>
 		new CssBuilder("input-control")
 		 .AddClass("input-required", when: () => Required)
-		 .AddClass($"input-control-margin-{Margin.ToDescriptionString()}", when: () => Margin != Margin.None)
+		 .AddClass($"input-control-margin-{Margin.ToDescription()}", when: () => Margin != Margin.None)
 		 .AddClass("input-control-full-width", FullWidth)
 		 .AddClass("input-error", Error)
 		 .AddClass(AdditionalClassList)

src/Connected.Components/Components/Link/Link.razor.cs

@@ -10,10 +10,10 @@ public partial class Link : UIComponent
 {
 	protected string Classname =>
 	new CssBuilder("typography mud-link")
-		.AddClass($"{Color.ToDescriptionString()}-text")
+		.AddClass($"{Color.ToDescription()}-text")
-	  .AddClass($"link-underline-{Underline.ToDescriptionString()}")
+	  .AddClass($"link-underline-{Underline.ToDescription()}")
-	  .AddClass($"typography-{Typo.ToDescriptionString()}")
+	  .AddClass($"typography-{Typo.ToDescription()}")
-	  // When Href is empty, link's hover cursor is text "I beam" even when OnClick has a delegate.
+	  // When Href is empty, link's hover cursor is text "I beam" even when Clicked has a delegate.
 	  // 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)

src/Connected.Components/Components/List/ListItem.razor.cs

@@ -15,7 +15,7 @@ public partial class ListItem : UIComponent, IDisposable
 	  .AddClass("list-item-gutters", !DisableGutters && !(List?.DisableGutters == true))
 	  .AddClass("list-item-clickable", List?.Clickable)
 	  .AddClass("ripple", List?.Clickable == true && !DisableRipple && !Disabled)
-	  .AddClass($"selected-item mud-{List?.Color.ToDescriptionString()}-text mud-{List?.Color.ToDescriptionString()}-hover", _selected && !Disabled)
+	  .AddClass($"selected-item mud-{List?.Color.ToDescription()}-text mud-{List?.Color.ToDescription()}-hover", _selected && !Disabled)
 	  .AddClass("list-item-disabled", Disabled)
 	  .AddClass(AdditionalClassList)
 	.Build();
@@ -86,7 +86,7 @@ public partial class ListItem : UIComponent, IDisposable
 	public bool DisableRipple { get; set; }
 
 	/// <summary>
-	/// Icon to use if set.
+	/// Glyph to use if set.
 	/// </summary>
 	[Parameter]
 	[Category(CategoryTypes.List.Behavior)]
@@ -100,7 +100,7 @@ public partial class ListItem : UIComponent, IDisposable
 	public ThemeColor IconColor { get; set; } = ThemeColor.Inherit;
 
 	/// <summary>
-	/// Sets the Icon Size.
+	/// Sets the Glyph Size.
 	/// </summary>
 	[Parameter]
 	[Category(CategoryTypes.List.Appearance)]

src/Connected.Components/Components/Mask/Mask.razor

@@ -17,7 +17,7 @@
     <input class="@InputClassname"
            @ref="_elementReference"
            @attributes="CustomAttributes"
-           type="@InputType.ToDescriptionString()"
+           type="@InputType.ToDescription()"
            value="@Text"
            placeholder="@Placeholder"
            disabled=@Disabled

src/Connected.Components/Components/Mask/Mask.razor.cs

@@ -21,9 +21,9 @@ public partial class Mask : InputBase<string>, IDisposable
 
    protected string Classname =>
       new CssBuilder("input")
-         .AddClass($"input-{Variant.ToDescriptionString()}")
+         .AddClass($"input-{Variant.ToDescription()}")
-         .AddClass($"input-adorned-{Adornment.ToDescriptionString()}", Adornment != Adornment.None)
+         .AddClass($"input-adorned-{Adornment.ToDescription()}", Adornment != Adornment.None)
-         .AddClass($"input-margin-{Margin.ToDescriptionString()}", when: () => Margin != Margin.None)
+         .AddClass($"input-margin-{Margin.ToDescription()}", when: () => Margin != Margin.None)
          .AddClass("input-underline", when: () => DisableUnderLine == false && Variant != Variant.Outlined)
          .AddClass("shrink",
             when: () => !string.IsNullOrEmpty(Text) || Adornment == Adornment.Start ||
@@ -37,15 +37,15 @@ public partial class Mask : InputBase<string>, IDisposable
    protected string InputClassname =>
       new CssBuilder("input-slot")
          .AddClass("input-root")
-         .AddClass($"input-root-{Variant.ToDescriptionString()}")
+         .AddClass($"input-root-{Variant.ToDescription()}")
-         .AddClass($"input-root-adorned-{Adornment.ToDescriptionString()}", Adornment != Adornment.None)
+         .AddClass($"input-root-adorned-{Adornment.ToDescription()}", Adornment != Adornment.None)
-         .AddClass($"input-root-margin-{Margin.ToDescriptionString()}", when: () => Margin != Margin.None)
+         .AddClass($"input-root-margin-{Margin.ToDescription()}", when: () => Margin != Margin.None)
          .AddClass(AdditionalClassList)
          .Build();
 
    protected string AdornmentClassname =>
       new CssBuilder("input-adornment")
-         .AddClass($"input-adornment-{Adornment.ToDescriptionString()}", Adornment != Adornment.None)
+         .AddClass($"input-adornment-{Adornment.ToDescription()}", Adornment != Adornment.None)
          .AddClass($"text", !string.IsNullOrEmpty(AdornmentText))
          .AddClass($"input-root-filled-shrink", Variant == Variant.Filled)
          .AddClass(AdditionalClassList)

src/Connected.Components/Components/Menu/Menu.razor.cs

@@ -41,7 +41,7 @@ public partial class Menu : UIComponent, IActivatable
 	public string PopoverClass { get; set; }
 
 	/// <summary>
-	/// Icon to use if set will turn the button into a MudIconButton.
+	/// Glyph to use if set will turn the button into a MudIconButton.
 	/// </summary>
 	[Parameter]
 	[Category(CategoryTypes.Menu.Behavior)]
@@ -55,14 +55,14 @@ public partial class Menu : UIComponent, IActivatable
 	public ThemeColor IconColor { get; set; } = ThemeColor.Inherit;
 
 	/// <summary>
-	/// Icon placed before the text if set.
+	/// Glyph placed before the text if set.
 	/// </summary>
 	[Parameter]
 	[Category(CategoryTypes.Menu.Behavior)]
 	public string StartIcon { get; set; }
 
 	/// <summary>
-	/// Icon placed after the text if set.
+	/// Glyph placed after the text if set.
 	/// </summary>
 	[Parameter]
 	[Category(CategoryTypes.Menu.Behavior)]

src/Connected.Components/Components/Menu/MenuItem.razor.cs

@@ -31,7 +31,7 @@ public partial class MenuItem : UIComponent
 	public string Href { get; set; }
 
 	/// <summary>
-	/// Icon to be used for this menu entry
+	/// Glyph to be used for this menu entry
 	/// </summary>
 	[Parameter]
 	[Category(CategoryTypes.List.Behavior)]
@@ -43,7 +43,7 @@ public partial class MenuItem : UIComponent
 	[Category(CategoryTypes.List.Appearance)]
 	public ThemeColor IconColor { get; set; } = ThemeColor.Inherit;
 	/// <summary>
-	/// The Icon Size.
+	/// The Glyph Size.
 	/// </summary>
 	[Parameter]
 	[Category(CategoryTypes.List.Appearance)]

src/Connected.Components/Components/MessageBox/MessageBox.razor.cs

@@ -18,7 +18,7 @@ public partial class MessageBox : UIComponent
 	public string Title { get; set; }
 
 	/// <summary>
-	/// Define the message box title as a renderfragment (overrides Title)
+	/// Define the message box title as a renderfragment (overrides GlyphTitle)
 	/// </summary>
 	[Parameter]
 	[Category(CategoryTypes.MessageBox.Behavior)]

src/Connected.Components/Components/NavMenu/NavGroup.razor.cs

@@ -34,7 +34,7 @@ public partial class NavGroup : UIComponent
    public string Title { get; set; }
 
    /// <summary>
-   /// Icon to use if set.
+   /// Glyph to use if set.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.NavMenu.Behavior)]

src/Connected.Components/Components/NavMenu/NavLink.razor.cs

@@ -34,7 +34,7 @@ public partial class NavLink : SelectItemBase
 	}
 
 	/// <summary>
-	/// Icon to use if set.
+	/// Glyph to use if set.
 	/// </summary>
 	[Parameter]
 	[Category(CategoryTypes.NavMenu.Behavior)]

src/Connected.Components/Components/NavMenu/NavMenu.razor.cs

@@ -9,11 +9,11 @@ public partial class NavMenu : UIComponent
 {
 	protected string Classname =>
 	new CssBuilder("navmenu")
-		.AddClass($"navmenu-{Color.ToDescriptionString()}")
+		.AddClass($"navmenu-{Color.ToDescription()}")
-		.AddClass($"navmenu-margin-{Margin.ToDescriptionString()}")
+		.AddClass($"navmenu-margin-{Margin.ToDescription()}")
 		.AddClass("navmenu-dense", Dense)
 		.AddClass("navmenu-rounded", Rounded)
-		.AddClass($"navmenu-bordered mud-border-{Color.ToDescriptionString()}", Bordered)
+		.AddClass($"navmenu-bordered mud-border-{Color.ToDescription()}", Bordered)
 		.AddClass(AdditionalClassList)
 	.Build();
 

src/Connected.Components/Components/Overlay/Overlay.razor.cs

@@ -95,7 +95,7 @@ public partial class Overlay : UIComponent, IDisposable
    public bool LightBackground { get; set; }
 
    /// <summary>
-   /// Icon class names, separated by space
+   /// Glyph class names, separated by space
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.Overlay.Behavior)]

src/Connected.Components/Components/PageContentNavigation/PageContentSection.cs

@@ -44,7 +44,7 @@ public class PageContentSection
    public int Level { get; set; }
 
    /// <summary>
-   /// The Title of the section. This will be displayed in the navigation
+   /// The GlyphTitle of the section. This will be displayed in the navigation
    /// </summary>
    public string Title { get; set; }
 

src/Connected.Components/Components/Pagination/Pagination.razor.cs

@@ -16,8 +16,8 @@ public partial class Pagination : UIComponent
 
    private string Classname =>
       new CssBuilder("pagination")
-         .AddClass($"pagination-{Variant.ToDescriptionString()}")
+         .AddClass($"pagination-{Variant.ToDescription()}")
-         .AddClass($"pagination-{Size.ToDescriptionString()}")
+         .AddClass($"pagination-{Size.ToDescription()}")
          .AddClass("pagination-disable-elevation", DisableElevation)
          .AddClass("pagination-rtl", RightToLeft)
          .AddClass(AdditionalClassList)

src/Connected.Components/Components/Picker/Picker.razor.cs

@@ -237,7 +237,7 @@ public partial class Picker<T> : FormComponent<T, string>
    public Orientation Orientation { get; set; } = Orientation.Portrait;
 
    /// <summary>
-   /// Sets the Icon Size.
+   /// Sets the Glyph Size.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.FormComponent.Appearance)]

src/Connected.Components/Components/Picker/PickerToolbar.razor

@@ -13,7 +13,7 @@
 @code {
     protected string Classnames =>
     new CssBuilder("picker-toolbar")
-      .AddClass($"theme-{Color.ToDescriptionString()}")
+      .AddClass($"theme-{Color.ToDescription()}")
       .AddClass("picker-toolbar-landscape", Orientation == Orientation.Landscape)
       .AddClass(Class)
     .Build();

src/Connected.Components/Components/Popover/Popover.razor.cs

@@ -15,9 +15,9 @@ public partial class Popover : UIComponent, IAsyncDisposable
 		new CssBuilder("popover")
 		.AddClass($"popover-fixed", Fixed)
 		.AddClass($"popover-open", Open)
-		.AddClass($"popover-{TransformOrigin.ToDescriptionString()}")
+		.AddClass($"popover-{TransformOrigin.ToDescription()}")
-		.AddClass($"popover-anchor-{AnchorOrigin.ToDescriptionString()}")
+		.AddClass($"popover-anchor-{AnchorOrigin.ToDescription()}")
-		.AddClass($"popover-overflow-{OverflowBehavior.ToDescriptionString()}")
+		.AddClass($"popover-overflow-{OverflowBehavior.ToDescription()}")
 		.AddClass($"popover-relative-width", RelativeWidth)
 		.AddClass($"paper", Paper)
 		.AddClass($"paper-square", Paper && Square)

src/Connected.Components/Components/Progress/ProgressCircular.razor.cs

@@ -12,8 +12,8 @@ public partial class ProgressCircular : UIComponent
 
    protected string DivClassname =>
        new CssBuilder("progress-circular")
-           .AddClass($"{Color.ToDescriptionString()}-text")
+           .AddClass($"{Color.ToDescription()}-text")
-           .AddClass($"progress-{Size.ToDescriptionString()}")
+           .AddClass($"progress-{Size.ToDescription()}")
            .AddClass($"progress-indeterminate", Indeterminate)
            .AddClass($"progress-static", !Indeterminate)
            .AddClass(AdditionalClassList)

src/Connected.Components/Components/Progress/ProgressLinear.razor.cs

@@ -15,8 +15,8 @@ public partial class ProgressLinear : UIComponent
          .AddClass($"progress-linear-striped", Striped)
          .AddClass($"progress-indeterminate", Indeterminate)
          .AddClass($"progress-linear-buffer", Buffer && !Indeterminate)
-         .AddClass($"progress-linear-{Size.ToDescriptionString()}")
+         .AddClass($"progress-linear-{Size.ToDescription()}")
-         .AddClass($"progress-linear-color-{Color.ToDescriptionString()}")
+         .AddClass($"progress-linear-color-{Color.ToDescription()}")
          .AddClass("horizontal", !Vertical)
          .AddClass("vertical", Vertical)
          .AddClass("flip-x-rtl")

src/Connected.Components/Components/Radio/Radio.razor.cs

@@ -21,8 +21,8 @@ public partial class Radio<T> : UIComponent, IDisposable
    protected string ButtonClassname =>
    new CssBuilder("button-root mud-icon-button")
        .AddClass($"ripple mud-ripple-radio", !DisableRipple && !Disabled)
-       .AddClass($"{Color.ToDescriptionString()}-text hover:mud-{Color.ToDescriptionString()}-hover", UnCheckedColor == null || (UnCheckedColor != null && Checked == true))
+       .AddClass($"{Color.ToDescription()}-text hover:mud-{Color.ToDescription()}-hover", UnCheckedColor == null || (UnCheckedColor != null && Checked == true))
-       .AddClass($"{UnCheckedColor?.ToDescriptionString()}-text hover:mud-{UnCheckedColor?.ToDescriptionString()}-hover", UnCheckedColor != null && Checked == false)
+       .AddClass($"{UnCheckedColor?.ToDescription()}-text hover:mud-{UnCheckedColor?.ToDescription()}-hover", UnCheckedColor != null && Checked == false)
        .AddClass($"radio-dense", Dense)
        .AddClass($"disabled", Disabled)
        .AddClass($"checked", Checked)
@@ -36,12 +36,12 @@ public partial class Radio<T> : UIComponent, IDisposable
 
    protected string IconClassName =>
    new CssBuilder("icon-root mud-svg-icon")
-       .AddClass($"icon-size-{Size.ToDescriptionString()}")
+       .AddClass($"icon-size-{Size.ToDescription()}")
        .Build();
 
    protected string CheckedIconClassName =>
    new CssBuilder("icon-root mud-svg-icon mud-radio-icon-checked")
-       .AddClass($"icon-size-{Size.ToDescriptionString()}")
+       .AddClass($"icon-size-{Size.ToDescription()}")
        .Build();
 
    protected string ChildSpanClassName =>

src/Connected.Components/Components/Rating/RatingItem.razor.cs

@@ -15,7 +15,7 @@ public partial class RatingItem : UIComponent
      .AddClass($"rating-item")
      .AddClass($"ripple mud-ripple-icon", !DisableRipple)
      .AddClass($"yellow-text.text-darken-3", Color == ThemeColor.Default)
-     .AddClass($"{Color.ToDescriptionString()}-text", Color != ThemeColor.Default)
+     .AddClass($"{Color.ToDescription()}-text", Color != ThemeColor.Default)
      .AddClass($"rating-item-active", IsActive)
      .AddClass($"disabled", Disabled)
      .AddClass($"readonly", ReadOnly)

src/Connected.Components/Components/Select/Select.razor.cs

@@ -171,14 +171,14 @@ public partial class Select<T> : InputBase<T>, ISelect, IShadowSelect
 	}
 
 	/// <summary>
-	/// The Open Select Icon
+	/// The Open Select Glyph
 	/// </summary>
 	[Parameter]
 	[Category(CategoryTypes.FormComponent.Appearance)]
 	public string OpenIcon { get; set; } = Icons.Material.Filled.ArrowDropDown;
 
 	/// <summary>
-	/// The Close Select Icon
+	/// The Close Select Glyph
 	/// </summary>
 	[Parameter]
 	[Category(CategoryTypes.FormComponent.Appearance)]

src/Connected.Components/Components/Skeleton/Skeleton.razor.cs

@@ -9,8 +9,8 @@ public partial class Skeleton : UIComponent
 {
 	protected string Classname =>
 		new CssBuilder("skeleton")
-			.AddClass($"skeleton-{SkeletonType.ToDescriptionString()}")
+			.AddClass($"skeleton-{SkeletonType.ToDescription()}")
-			.AddClass($"skeleton-{Animation.ToDescriptionString()}")
+			.AddClass($"skeleton-{Animation.ToDescription()}")
 			.AddClass(AdditionalClassList)
 			.Build();
 

src/Connected.Components/Components/Slider/Slider.razor.cs

@@ -10,8 +10,8 @@ public partial class Slider<T> : UIComponent
 {
    protected string Classname =>
       new CssBuilder("slider")
-         .AddClass($"slider-{Size.ToDescriptionString()}")
+         .AddClass($"slider-{Size.ToDescription()}")
-         .AddClass($"slider-{Color.ToDescriptionString()}")
+         .AddClass($"slider-{Color.ToDescription()}")
          .AddClass("slider-vertical", Vertical)
          .AddClass(AdditionalClassList)
          .Build();

src/Connected.Components/Components/Snackbar/SnackbarOptions.cs

@@ -59,7 +59,7 @@ public class SnackbarOptions : CommonSnackbarOptions
    {
       Severity = severity;
 
-      SnackbarTypeClass = $"alert-{SnackbarVariant.ToDescriptionString()}-{severity.ToDescriptionString()}";
+      SnackbarTypeClass = $"alert-{SnackbarVariant.ToDescription()}-{severity.ToDescription()}";
 
       if (SnackbarVariant != Variant.Filled)
       {

src/Connected.Components/Components/Stack/Stack.razor.cs

@@ -14,8 +14,8 @@ public partial class Stack : UIComponent
    protected string Classname =>
    new CssBuilder("d-flex")
      .AddClass($"flex-{(Row ? "row" : "column")}{(Reverse ? "-reverse" : string.Empty)}")
-     .AddClass($"justify-{Justify?.ToDescriptionString()}", Justify != null)
+     .AddClass($"justify-{Justify?.ToDescription()}", Justify != null)
-     .AddClass($"align-{AlignItems?.ToDescriptionString()}", AlignItems != null)
+     .AddClass($"align-{AlignItems?.ToDescription()}", AlignItems != null)
      .AddClass($"gap-{Spacing}")
      .AddClass(AdditionalClassList)
    .Build();

src/Connected.Components/Components/Switch/Switch.razor.cs

@@ -21,8 +21,8 @@ public partial class Switch<T> : BooleanInput<T>
    protected string SwitchClassname =>
    new CssBuilder("button-root mud-icon-button mud-switch-base")
       .AddClass($"ripple mud-ripple-switch", !DisableRipple && !ReadOnly && !Disabled)
-      .AddClass($"{Color.ToDescriptionString()}-text hover:mud-{Color.ToDescriptionString()}-hover", BoolValue == true)
+      .AddClass($"{Color.ToDescription()}-text hover:mud-{Color.ToDescription()}-hover", BoolValue == true)
-      .AddClass($"{UnCheckedColor.ToDescriptionString()}-text hover:mud-{UnCheckedColor.ToDescriptionString()}-hover", BoolValue == false)
+      .AddClass($"{UnCheckedColor.ToDescription()}-text hover:mud-{UnCheckedColor.ToDescription()}-hover", BoolValue == false)
       .AddClass($"switch-disabled", Disabled)
       .AddClass($"readonly", ReadOnly)
       .AddClass($"checked", BoolValue)
@@ -30,8 +30,8 @@ public partial class Switch<T> : BooleanInput<T>
 
    protected string TrackClassname =>
    new CssBuilder("switch-track")
-      .AddClass($"{Color.ToDescriptionString()}", BoolValue == true)
+      .AddClass($"{Color.ToDescription()}", BoolValue == true)
-      .AddClass($"{UnCheckedColor.ToDescriptionString()}", BoolValue == false)
+      .AddClass($"{UnCheckedColor.ToDescription()}", BoolValue == false)
    .Build();
 
    //Excluded because not used

src/Connected.Components/Components/Table/TableBase.cs

@@ -331,14 +331,14 @@ public abstract class TableBase : UIComponent
    public string CancelEditTooltip { get; set; }
 
    /// <summary>
-   /// Sets the Icon of the CommitEdit Button.
+   /// Sets the Glyph of the CommitEdit Button.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.Table.Editing)]
    public string CommitEditIcon { get; set; } = Icons.Material.Filled.Done;
 
    /// <summary>
-   /// Sets the Icon of the CancelEdit Button.
+   /// Sets the Glyph of the CancelEdit Button.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.Table.Editing)]

src/Connected.Components/Components/Table/TableSortLabel.razor.cs

@@ -27,7 +27,7 @@ public partial class TableSortLabel<[DynamicallyAccessedMembers(DynamicallyAcces
    public bool Enabled { get; set; } = true;
 
    /// <summary>
-   /// The Icon used to display sortdirection.
+   /// The Glyph used to display sortdirection.
    /// </summary>
    [Parameter] public string SortIcon { get; set; } = Icons.Material.Filled.ArrowUpward;
 

src/Connected.Components/Components/Tabs/TabPanel.razor

@@ -34,7 +34,7 @@ else
     public string Text { get; set; }
 
     /// <summary>
-    /// Icon placed before the text if set.
+    /// Glyph placed before the text if set.
     /// </summary>
     [Parameter] 
     [Category(CategoryTypes.Tabs.Behavior)]

src/Connected.Components/Components/Tabs/Tabs.razor

@@ -14,7 +14,7 @@
                 @if (_showScrollButtons)
                 {
                     <div class="tabs-scroll-button">
-                        <IconButton Icon="@_prevIcon" Color="@ScrollIconColor" OnClick="@((e) => ScrollPrev())" Disabled="@_prevButtonDisabled" />
+                  <GlyphButton Icon="@_prevIcon" Color="@ScrollIconColor" Clicked="@((e) => ScrollPrev())" Disabled="@_prevButtonDisabled" />
                     </div>
                 }
                 <div @ref="@_tabsContentSize" class="tabs-toolbar-content">
@@ -52,7 +52,7 @@
                 @if (_showScrollButtons)
                 {
                     <div class="tabs-scroll-button">
-                        <IconButton Icon="@_nextIcon" Color="@ScrollIconColor" OnClick="@((e) => ScrollNext())" Disabled="@_nextButtonDisabled" />
+                        <GlyphButton Icon="@_nextIcon" Color="@ScrollIconColor" Clicked="@((e) => ScrollNext())" Disabled="@_nextButtonDisabled" />
                     </div>
                 }
                 @if (HeaderPosition == TabHeaderPosition.After && Header != null)

src/Connected.Components/Components/Tabs/Tabs.razor.cs

@@ -77,14 +77,14 @@ public partial class Tabs : UIComponent, IAsyncDisposable
    public bool HideSlider { get; set; }
 
    /// <summary>
-   /// Icon to use for left pagination.
+   /// Glyph to use for left pagination.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.Tabs.Appearance)]
    public string PrevIcon { get; set; } = Icons.Filled.ChevronLeft;
 
    /// <summary>
-   /// Icon to use for right pagination.
+   /// Glyph to use for right pagination.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.Tabs.Appearance)]
@@ -430,8 +430,8 @@ public partial class Tabs : UIComponent, IAsyncDisposable
        new CssBuilder("tabs-toolbar")
        .AddClass($"tabs-rounded", !ApplyEffectsToContainer && Rounded)
        .AddClass($"tabs-vertical", IsVerticalTabs())
-       .AddClass($"tabs-toolbar-{Color.ToDescriptionString()}", Color != ThemeColor.Default)
+       .AddClass($"tabs-toolbar-{Color.ToDescription()}", Color != ThemeColor.Default)
-       .AddClass($"tabs-border-{ConvertPosition(Position).ToDescriptionString()}", Border)
+       .AddClass($"tabs-border-{ConvertPosition(Position).ToDescription()}", Border)
        .AddClass($"paper-outlined", !ApplyEffectsToContainer && Outlined)
        .AddClass($"elevation-{Elevation}", !ApplyEffectsToContainer && Elevation != 0)
        .Build();
@@ -456,7 +456,7 @@ public partial class Tabs : UIComponent, IAsyncDisposable
 
    protected string SliderClass =>
        new CssBuilder("tab-slider")
-       .AddClass($"{SliderColor.ToDescriptionString()}", SliderColor != ThemeColor.Inherit)
+       .AddClass($"{SliderColor.ToDescription()}", SliderColor != ThemeColor.Inherit)
        .AddClass($"tab-slider-horizontal", Position is Position.Top or Position.Bottom)
        .AddClass($"tab-slider-vertical", IsVerticalTabs())
        .AddClass($"tab-slider-horizontal-reverse", Position == Position.Bottom)

src/Connected.Components/Components/TimePicker/TimePicker.razor.cs

@@ -301,24 +301,24 @@ public partial class TimePicker : Picker<TimeSpan?>
 
 	private string GetClockPinColor()
 	{
-		return $"picker-time-clock-pin mud-{Color.ToDescriptionString()}";
+		return $"picker-time-clock-pin mud-{Color.ToDescription()}";
 	}
 
 	private string GetClockPointerColor()
 	{
 		if (MouseDown)
-			return $"picker-time-clock-pointer mud-{Color.ToDescriptionString()}";
+			return $"picker-time-clock-pointer mud-{Color.ToDescription()}";
 		else
-			return $"picker-time-clock-pointer mud-picker-time-clock-pointer-animation mud-{Color.ToDescriptionString()}";
+			return $"picker-time-clock-pointer mud-picker-time-clock-pointer-animation mud-{Color.ToDescription()}";
 	}
 
 	private string GetClockPointerThumbColor()
 	{
 		var deg = GetDeg();
 		if (deg % 30 == 0)
-			return $"picker-time-clock-pointer-thumb mud-onclock-text mud-onclock-primary mud-{Color.ToDescriptionString()}";
+			return $"picker-time-clock-pointer-thumb mud-onclock-text mud-onclock-primary mud-{Color.ToDescription()}";
 		else
-			return $"picker-time-clock-pointer-thumb mud-onclock-minute mud-{Color.ToDescriptionString()}-text";
+			return $"picker-time-clock-pointer-thumb mud-onclock-minute mud-{Color.ToDescription()}-text";
 	}
 
 	private string GetNumberColor(int value)
@@ -333,11 +333,11 @@ public partial class TimePicker : Picker<TimeSpan?>
 					h = 12;
 			}
 			if (h == value)
-				return $"clock-number mud-theme-{Color.ToDescriptionString()}";
+				return $"clock-number mud-theme-{Color.ToDescription()}";
 		}
 		else if (_currentView == OpenTo.Minutes && _timeSet.Minute == value)
 		{
-			return $"clock-number mud-theme-{Color.ToDescriptionString()}";
+			return $"clock-number mud-theme-{Color.ToDescription()}";
 		}
 		return $"clock-number";
 	}

src/Connected.Components/Components/Timeline/Timeline.razor.cs

@@ -50,10 +50,10 @@ public partial class Timeline : ItemsControlBase<TimelineItem>
 
    protected string Classnames =>
        new CssBuilder("timeline")
-           .AddClass($"timeline-{TimelineOrientation.ToDescriptionString()}")
+           .AddClass($"timeline-{TimelineOrientation.ToDescription()}")
-           .AddClass($"timeline-position-{ConvertTimelinePosition().ToDescriptionString()}")
+           .AddClass($"timeline-position-{ConvertTimelinePosition().ToDescription()}")
            .AddClass($"timeline-reverse", Reverse && TimelinePosition == TimelinePosition.Alternate)
-           .AddClass($"timeline-align-{TimelineAlign.ToDescriptionString()}")
+           .AddClass($"timeline-align-{TimelineAlign.ToDescription()}")
            .AddClass($"timeline-modifiers", !DisableModifiers)
            .AddClass($"timeline-rtl", RightToLeft)
            .AddClass(AdditionalClassList)

src/Connected.Components/Components/Timeline/TimelineItem.razor.cs

@@ -14,26 +14,26 @@ public partial class TimelineItem : UIComponent, IDisposable
 {
    protected string Classnames =>
        new CssBuilder("timeline-item")
-           .AddClass($"timeline-item-{TimelineAlign.ToDescriptionString()}")
+           .AddClass($"timeline-item-{TimelineAlign.ToDescription()}")
            .AddClass(AdditionalClassList)
            .Build();
 
    protected string DotClassnames =>
    new CssBuilder("timeline-item-dot")
-     .AddClass($"timeline-dot-size-{Size.ToDescriptionString()}")
+     .AddClass($"timeline-dot-size-{Size.ToDescription()}")
      .AddClass($"elevation-{Elevation.ToString()}")
    .Build();
 
    protected string DotInnerClassnames =>
    new CssBuilder("timeline-item-dot-inner")
      .AddClass($"timeline-dot-fill", Variant == Variant.Filled)
-     .AddClass($"timeline-dot-{Color.ToDescriptionString()}")
+     .AddClass($"timeline-dot-{Color.ToDescription()}")
    .Build();
 
    [CascadingParameter] protected internal ItemsControlBase<TimelineItem> Parent { get; set; }
 
    /// <summary>
-   /// Dot Icon
+   /// Dot Glyph
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.Timeline.Dot)]

src/Connected.Components/Components/Tooltip/Tooltip.razor.cs

@@ -16,10 +16,10 @@ public partial class Tooltip : UIComponent
 
    protected string Classname => new CssBuilder("tooltip")
       .AddClass($"tooltip-default", Color == ThemeColor.Default)
-      .AddClass($"tooltip-{ConvertPlacement().ToDescriptionString()}")
+      .AddClass($"tooltip-{ConvertPlacement().ToDescription()}")
       .AddClass($"tooltip-arrow", Arrow)
-      .AddClass($"border-{Color.ToDescriptionString()}", Arrow && Color != ThemeColor.Default)
+      .AddClass($"border-{Color.ToDescription()}", Arrow && Color != ThemeColor.Default)
-      .AddClass($"theme-{Color.ToDescriptionString()}", Color != ThemeColor.Default)
+      .AddClass($"theme-{Color.ToDescription()}", Color != ThemeColor.Default)
       .AddClass($"d-block", TooltipContent != null)
       .AddClass($"d-flex", !String.IsNullOrEmpty(Text))
       .Build();

src/Connected.Components/Components/TreeView/TreeView.razor.cs

@@ -16,8 +16,8 @@ public partial class TreeView<T> : UIComponent
 	new CssBuilder("treeview")
 	  .AddClass("treeview-dense", Dense)
 	  .AddClass("treeview-hover", Hover)
-	  .AddClass($"treeview-selected-{Color.ToDescriptionString()}")
+	  .AddClass($"treeview-selected-{Color.ToDescription()}")
-		.AddClass($"treeview-checked-{CheckBoxColor.ToDescriptionString()}")
+		.AddClass($"treeview-checked-{CheckBoxColor.ToDescription()}")
 	  .AddClass(AdditionalClassList)
 	.Build();
 	protected string Stylename =>

src/Connected.Components/Components/TreeView/TreeViewItem.razor.cs

@@ -184,7 +184,7 @@ public partial class TreeViewItem<T> : UIComponent
    }
 
    /// <summary>
-   /// Icon placed before the text if set.
+   /// Glyph placed before the text if set.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.TreeView.Behavior)]
@@ -198,7 +198,7 @@ public partial class TreeViewItem<T> : UIComponent
    public ThemeColor IconColor { get; set; } = ThemeColor.Default;
 
    /// <summary>
-   /// Icon placed after the text if set.
+   /// Glyph placed after the text if set.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.TreeView.Behavior)]

src/Connected.Components/Components/Typography/TextContent.razor.cs

@@ -9,10 +9,10 @@ public partial class TextContent : UIComponent
 {
 	protected string Classname =>
 	new CssBuilder("typography")
-	  .AddClass($"typography-{Typo.ToDescriptionString()}")
+	  .AddClass($"typography-{Typo.ToDescription()}")
-	  .AddClass($"{Color.ToDescriptionString()}-text", Color != ThemeColor.Default && Color != ThemeColor.Inherit)
+	  .AddClass($"{Color.ToDescription()}-text", Color != ThemeColor.Default && Color != ThemeColor.Inherit)
 	  .AddClass("typography-gutterbottom", GutterBottom)
-	  .AddClass($"typography-align-{ConvertAlign(Align).ToDescriptionString()}", Align != Align.Inherit)
+	  .AddClass($"typography-align-{ConvertAlign(Align).ToDescription()}", Align != Align.Inherit)
 	  .AddClass("typography-display-inline", Inline)
 	  .AddClass(AdditionalClassList)
 	.Build();

src/Connected.Components/Extensions/EnumExtensions.cs

@@ -4,7 +4,7 @@ namespace Connected.Extensions;
 
 public static class EnumExtensions
 {
-	public static string? ToDescriptionString(this Enum value)
+	public static string? ToDescription(this Enum value)
 	{
 		if (value is null)
 			return null;

src/Connected.Components/Services/Scroll/ScrollManager.cs

@@ -39,7 +39,7 @@ namespace Connected
       /// <param name="behavior">smooth or auto</param>
       /// <returns></returns>
       public ValueTask ScrollToAsync(string id, int left, int top, ScrollBehavior behavior) =>
-          _jSRuntime.InvokeVoidAsync("scrollManager.scrollTo", id, left, top, behavior.ToDescriptionString());
+          _jSRuntime.InvokeVoidAsync("scrollManager.scrollTo", id, left, top, behavior.ToDescription());
 
       /// <summary>
       /// Scrolls the first instance of the selector into view
@@ -48,7 +48,7 @@ namespace Connected
       /// <param name="behavior"></param>
       /// <returns></returns>
       public ValueTask ScrollIntoViewAsync(string selector, ScrollBehavior behavior) =>
-          _jSRuntime.InvokeVoidAsync("scrollManager.scrollIntoView", selector, behavior.ToDescriptionString());
+          _jSRuntime.InvokeVoidAsync("scrollManager.scrollIntoView", selector, behavior.ToDescription());
 
       /// <summary>
       /// Scrolls to the top of the element
@@ -73,7 +73,7 @@ namespace Connected
       /// <param name="behavior">smooth or auto</param>
       /// <returns></returns>
       public ValueTask ScrollToBottomAsync(string id, ScrollBehavior behavior) =>
-          _jSRuntime.InvokeVoidAsync("scrollManager.scrollToBottom", id, behavior.ToDescriptionString());
+          _jSRuntime.InvokeVoidAsync("scrollManager.scrollToBottom", id, behavior.ToDescription());
 
       public ValueTask ScrollToYearAsync(string elementId) =>
           _jSRuntime.InvokeVoidAsync("scrollManager.scrollToYear", elementId);

src/Connected.Components/Styles/components/_badge.scss

@@ -1,5 +1,4 @@
-
+.badge-root {
-.badge-root {
     position: relative;
     display: inline-block;