.gitignore

@@ -412,9 +412,6 @@ FodyWeavers.xsd
 # Built Visual Studio Code Extensions
 *.vsix
 
-# Css files
-**.css
-
 # Minified css files
 **.min.css
 

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

@@ -6,12 +6,12 @@
 	  class="@CompiledClassList"
 	  @attributes="CustomAttributes"
 	  @onclick="Clicked">
-	<div name="alert-content">
+	<div class="@CompiledAlignmentClassList">
 
 		@if (GlyphVisible)
 		{
 			<div class="alert-icon alert-icon-left">
-				<Icon Glyph="@Glyph" />
+				<Icon Glyph="@CustomGlyph" />
 			</div>
 		}
 

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

@@ -6,6 +6,18 @@ namespace Connected.Components;
 
 public partial class Alert : UIComponent
 {
+	/// <summary>
+	/// 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>
@@ -15,6 +27,9 @@ public partial class Alert : UIComponent
 		{
 			return new CssBuilder("alert")
 				.AddClass($"alert-{Variant}-{Severity}")
+				.AddClass($"dense", Dense)
+				.AddClass($"square", Square)
+				.AddClass($"elevation-{Elevation}")
 				.AddClass(ClassList);
 		}
 	}
@@ -49,10 +64,16 @@ public partial class Alert : UIComponent
 	/// Custom glyph, leave unset to use the standard glyph which depends on the Severity.
 	/// </summary>
 	[Parameter]
-	public string Glyph { get; set; } = default!;
+	public string CustomGlyph { get; set; } = default!;
 	#endregion
 
 	#region Styling properties
+	/// <summary>
+	/// Sets the horizontal alignement of the text. Start and end depend on the <see cref="RightToLeft"/> property.
+	/// </summary>
+	[Parameter]
+	public HorizontalAlignment HorizontalAlignment { get; set; } = HorizontalAlignment.Start;
+
 	/// <summary>
 	/// A space separated list of class names, added on top of the default class list.
 	/// </summary>
@@ -65,6 +86,18 @@ public partial class Alert : UIComponent
 	[Parameter]
 	public bool CloseGlyphVisible { get; set; }
 
+	/// <summary>
+	/// If true, compact padding will be used.
+	/// </summary>
+	[Parameter]
+	public bool Dense { get; set; }
+
+	/// <summary>
+	/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
+	/// </summary>
+	[Parameter]
+	public int Elevation { set; get; } = 0;
+
 	/// <summary>
 	/// If true, no alert glyph will be used.
 	/// </summary>
@@ -74,7 +107,6 @@ public partial class Alert : UIComponent
 	/// <summary>
 	/// Specifies the control's display style
 	/// </summary>
-	//TODO: Implement in DOM
 	[CascadingParameter(Name = "RightToLeft")]
 	public bool RightToLeft { get; set; }
 
@@ -84,6 +116,12 @@ public partial class Alert : UIComponent
 	[Parameter]
 	public Severity Severity { get; set; } = Severity.Normal;
 
+	/// <summary>
+	/// If true, rounded corners are disabled.
+	/// </summary>
+	[Parameter]
+	public bool Square { get; set; }
+
 	/// <summary>
 	/// The variant to use.
 	/// </summary>
@@ -93,10 +131,10 @@ public partial class Alert : UIComponent
 
 	protected override void OnParametersSet()
 	{
-		if (!string.IsNullOrEmpty(Glyph))
+		if (!string.IsNullOrEmpty(CustomGlyph))
 			return;
 
-		Glyph = GetGlyphForSeverity(Severity);
+		CustomGlyph = GetGlyphForSeverity(Severity);
 	}
 
 	private string GetGlyphForSeverity(Severity severity)