Progress - Categorizing variables and methods

src/Connected.Components/Annotations/CategoryAttribute.cs

@@ -126,7 +126,7 @@ public static class CategoryTypes
       public const string Common = "Common";
    }
 
-   /// <summary>Used in: <see cref="ButtonBase"/>, all components inheriting from it, and <see cref="MudToggleIconButton"/>.</summary>
+   /// <summary>Used in: <see cref="ButtonBase"/>, all components inheriting from it, and <see cref="ToggleIconButton"/>.</summary>
    public static class Button
    {
       public const string Behavior = "Behavior";

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

@@ -1,12 +1,25 @@
-using Connected.Extensions;
+using Connected.Utilities;
-using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
-using System.Security;
 
 namespace Connected.Components;
 
 public partial class AppBar : UIComponent
 {
+
+	#region Event callbacks
+	#endregion
+
+	#region Content placeholders
+
+	/// <summary>
+	/// Child content of the component.
+	/// </summary>
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+
+	#endregion
+
+	#region Styling properties
 	/// <summary>
 	/// The classlist determining the toolbar render.
 	/// </summary>
@@ -18,6 +31,12 @@ public partial class AppBar : UIComponent
 				.AddClass(ToolbarClassList);
 		}
 	}
+	/// <summary>
+	/// Class names for the nested toolbar. In case of several, separate by spaces.
+	/// </summary>
+	[Parameter]
+	public string? ToolbarClassList { get; set; }
+
 
 	/// <summary>
 	/// The classlist determining the header render.
@@ -32,34 +51,36 @@ public partial class AppBar : UIComponent
 				.AddClass(HeaderClassList);
 		}
 	}
-
-	/// <summary>
-	/// Child content of the component.
-	/// </summary>
-	[Parameter]
-	public RenderFragment? ChildContent { get; set; }
-
-	/// <summary>
-	/// If true, appbar will be fixed.
-	/// </summary>
-	[Parameter]
-	public bool Fixed { get; set; } = true;
-
 	/// <summary>
 	/// Class names for the AppBar header. In case of several, separate by spaces.
 	/// </summary>
 	[Parameter]
 	public string? HeaderClassList { get; set; }
 
-	/// <summary>
-	/// Class names for the nested toolbar. In case of several, separate by spaces.
-	/// </summary>
-	[Parameter]
-	public string? ToolbarClassList { get; set; }
-
 	/// <summary>
 	/// Determines the vertical alignment of the AppBar.
 	/// </summary>
 	[Parameter]
 	public VerticalAlignment VerticalAlignment { get; set; }
+
+	/// <summary>
+	/// If true, appbar will be fixed.
+	/// </summary>
+	[Parameter]
+	public bool Fixed { get; set; } = true;
+
+	#endregion
+
+	#region Lifecycle
+	#endregion
+
+
+
+	
+
+	
+
+	
+
+	
 }

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

@@ -7,9 +7,43 @@ namespace Connected.Components;
 
 partial class Avatar : UIComponent, IDisposable
 {
+
+	#region Variables
+	#endregion
+
+	#region Events
+
+	internal void ForceRedraw() => StateHasChanged();
+
+	#endregion
+
+	#region Content
+
+	/// <summary>
+	/// Child content of the component.
+	/// </summary>
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+
+	/// <summary>
+	/// Link to image, if set a image will be displayed instead of text.
+	/// </summary>
+	[Parameter]
+	public string? Image { get; set; }
+
+	/// <summary>
+	/// If set (and Image is also set), will add an alt property to the img element
+	/// </summary>
+	[Parameter]
+	public string? ImageAltText { get; set; }
+
 	[CascadingParameter]
 	protected AvatarGroup? AvatarGroup { get; set; }
 
+	#endregion
+
+	#region Styling
+
 	protected CssBuilder CompiledClassList
 	{
 		get
@@ -41,18 +75,6 @@ partial class Avatar : UIComponent, IDisposable
 	[Parameter]
 	public string? ClassList { get; set; }
 
-	/// <summary>
-	/// If set (and Image is also set), will add an alt property to the img element
-	/// </summary>
-	[Parameter]
-	public string? ImageAltText { get; set; }
-
-	/// <summary>
-	/// Child content of the component.
-	/// </summary>
-	[Parameter]
-	public RenderFragment? ChildContent { get; set; }
-
 	/// <summary>
 	/// The color of the component. It supports the theme colors.
 	/// </summary>
@@ -65,12 +87,6 @@ partial class Avatar : UIComponent, IDisposable
 	[Parameter]
 	public int Elevation { set; get; } = 0;
 
-	/// <summary>
-	/// Link to image, if set a image will be displayed instead of text.
-	/// </summary>
-	[Parameter]
-	public string? Image { get; set; }
-
 	/// <summary>
 	/// Sets the avatar appearance
 	/// </summary>
@@ -88,6 +104,10 @@ partial class Avatar : UIComponent, IDisposable
 	[Parameter]
 	public Variant Variant { get; set; } = Variant.Filled;
 
+	#endregion
+
+	#region Lifecycle
+
 	protected override void OnInitialized()
 	{
 		base.OnInitialized();
@@ -97,5 +117,6 @@ partial class Avatar : UIComponent, IDisposable
 
 	public void Dispose() => AvatarGroup?.RemoveAvatar(this);
 
-	internal void ForceRedraw() => StateHasChanged();
+	#endregion
+
 }

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

@@ -7,10 +7,57 @@ namespace Connected.Components;
 
 partial class AvatarGroup : UIComponent
 {
+
+	#region Variables
+
 	private bool _childrenNeedUpdates = false;
 	private int _spacing = 3;
 	private List<Avatar> _avatars = new();
 
+	#endregion
+
+	#region Event callbacks
+	#endregion
+
+	#region Content
+
+	/// <summary>
+	/// Child content of the component.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.AvatarGroup.Behavior)]
+	public RenderFragment ChildContent { get; set; }
+
+	internal void AddAvatar(Avatar avatar)
+	{
+		_avatars.Add(avatar);
+		StateHasChanged();
+	}
+
+	internal void RemoveAvatar(Avatar avatar)
+	{
+		_avatars.Remove(avatar);
+	}
+
+	internal bool MaxGroupReached(Avatar avatar)
+	{
+		if (_avatars.IndexOf(avatar) < Max)
+			return true;
+		else
+			return false;
+	}
+
+	#endregion
+
+	#region Styling properties
+
+
+	internal CssBuilder GetAvatarSpacing() => new CssBuilder()
+	  .AddClass($"ms-n{Spacing}");
+
+	internal StyleBuilder GetAvatarZindex(Avatar avatar) => new StyleBuilder()
+		.AddStyle("z-index", $"{_avatars.Count - _avatars.IndexOf(avatar)}");
+
 	private CssBuilder CompiledClassList
 	{
 		get
@@ -21,6 +68,11 @@ partial class AvatarGroup : UIComponent
 				.AddClass(ClassList);
 		}
 	}
+	/// <summary>
+	/// A space separated list of class names, added on top of the default class list.
+	/// </summary>
+	[Parameter]
+	public string? ClassList { get; set; }
 
 	private CssBuilder CompiledMaxAvatarClassList
 	{
@@ -31,30 +83,12 @@ partial class AvatarGroup : UIComponent
 			 .AddClass(MaxAvatarClass);
 		}
 	}
-		
 	/// <summary>
-	/// Spacing between avatars where 0 is none and 16 max.
+	/// Custom class/classes for MaxAvatar
 	/// </summary>
 	[Parameter]
-	public int Spacing
+	[Category(CategoryTypes.AvatarGroup.Appearance)]
-	{
+	public string MaxAvatarClass { get; set; }
-		get => _spacing;
-		set
-		{
-			if (value != _spacing)
-			{
-				_spacing = value;
-				_childrenNeedUpdates = true;
-			}
-		}
-	}
-
-	/// <summary>
-	/// A space separated list of class names, added on top of the default class list.
-	/// </summary>
-	[Parameter]
-	public string? ClassList { get; set; }
-
 	/// <summary>
 	/// Outlines the grouped avatars to distinguish them, useful when avatars are the same color or uses images.
 	/// </summary>
@@ -132,44 +166,25 @@ partial class AvatarGroup : UIComponent
 	}
 
 	/// <summary>
-	/// Custom class/classes for MaxAvatar
+	/// Spacing between avatars where 0 is none and 16 max.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.AvatarGroup.Appearance)]
+	public int Spacing
-	public string MaxAvatarClass { get; set; }
-
-	/// <summary>
-	/// Child content of the component.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.AvatarGroup.Behavior)]
-	public RenderFragment ChildContent { get; set; }
-
-	internal void AddAvatar(Avatar avatar)
 	{
-		_avatars.Add(avatar);
+		get => _spacing;
-		StateHasChanged();
+		set
+		{
+			if (value != _spacing)
+			{
+				_spacing = value;
+				_childrenNeedUpdates = true;
+			}
+		}
 	}
 
-	internal void RemoveAvatar(Avatar avatar)
+	#endregion
-	{
-		_avatars.Remove(avatar);
-	}
-
-	internal CssBuilder GetAvatarSpacing() => new CssBuilder()
-	  .AddClass($"ms-n{Spacing}");
-
-	internal StyleBuilder GetAvatarZindex(Avatar avatar) => new StyleBuilder()
-		.AddStyle("z-index", $"{_avatars.Count - _avatars.IndexOf(avatar)}");
-
-	internal bool MaxGroupReached(Avatar avatar)
-	{
-		if (_avatars.IndexOf(avatar) < Max)
-			return true;
-		else
-			return false;
-	}
 
+	#region Lifecycle
 	protected override void OnParametersSet()
 	{
 		base.OnParametersSet();
@@ -184,4 +199,7 @@ partial class AvatarGroup : UIComponent
 			_childrenNeedUpdates = false;
 		}
 	}
+
+	#endregion
+
 }

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

@@ -1,10 +1,4 @@
-using System;
+namespace Connected.Components;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-
-namespace Connected.Components;
 public enum AvatarKind
 {
 	Undefined = 0,

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

@@ -9,6 +9,72 @@ namespace Connected.Components;
 
 public partial class Badge : UIComponent
 {
+
+	#region Variables
+	#endregion
+
+	#region Events
+
+	/// <summary>
+	/// Button click event if set.
+	/// </summary>
+	[Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
+
+
+
+	internal Task HandleBadgeClick(MouseEventArgs e)
+	{
+		if (OnClick.HasDelegate)
+			return OnClick.InvokeAsync(e);
+
+		return Task.CompletedTask;
+	}
+
+	#endregion
+
+	#region Content
+
+	private string _content;
+
+	/// <summary>
+	/// Sets the Glyph to use in the badge.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Badge.Behavior)]
+	public string Icon { get; set; }
+
+	/// <summary>
+	/// Max value to show when content is integer type.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Badge.Behavior)]
+	public int Max { get; set; } = 99;
+
+	/// <summary>
+	/// Content you want inside the badge. Supported types are string and integer.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Badge.Behavior)]
+	public object Content { get; set; }
+
+	/// <summary>
+	/// Child content of component, the content that the badge will apply to.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Badge.Behavior)]
+	public RenderFragment ChildContent { get; set; }
+
+	#endregion
+
+	#region Styling
+
+	/// <summary>
+	/// Badge class names, separated by space.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Badge.Appearance)]
+	public string BadgeClass { get; set; }
+
 	protected string CompiledClassList =>
 	new CssBuilder("badge-root")
 	  .AddClass(AdditionalClassList)
@@ -59,27 +125,6 @@ public partial class Badge : UIComponent
 	[Category(CategoryTypes.Badge.Appearance)]
 	public ThemeColor Color { get; set; } = ThemeColor.Default;
 
-	/// <summary>
-	/// Aligns the badge to bottom.
-	/// </summary>
-	[ExcludeFromCodeCoverage]
-	[Obsolete("Use Origin instead.", true)]
-	[Parameter] public bool Bottom { get; set; }
-
-	/// <summary>
-	/// Aligns the badge to left.
-	/// </summary>
-	[ExcludeFromCodeCoverage]
-	[Obsolete("Use Origin instead.", true)]
-	[Parameter] public bool Left { get => Start; set { Start = value; } }
-
-	/// <summary>
-	/// Aligns the badge to the start (Left in LTR and right in RTL).
-	/// </summary>
-	[ExcludeFromCodeCoverage]
-	[Obsolete("Use Origin instead.", true)]
-	[Parameter] public bool Start { get; set; }
-
 	/// <summary>
 	/// Reduces the size of the badge and hide any of its content.
 	/// </summary>
@@ -101,55 +146,9 @@ public partial class Badge : UIComponent
 	[Category(CategoryTypes.Badge.Appearance)]
 	public bool Bordered { get; set; }
 
-	/// <summary>
+	#endregion
-	/// Sets the Glyph to use in the badge.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Badge.Behavior)]
-	public string Icon { get; set; }
 
-	/// <summary>
+	#region Lifecycle
-	/// Max value to show when content is integer type.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Badge.Behavior)]
-	public int Max { get; set; } = 99;
-
-	/// <summary>
-	/// Content you want inside the badge. Supported types are string and integer.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Badge.Behavior)]
-	public object Content { get; set; }
-
-	/// <summary>
-	/// Badge class names, separated by space.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Badge.Appearance)]
-	public string BadgeClass { get; set; }
-
-	/// <summary>
-	/// Child content of component, the content that the badge will apply to.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Badge.Behavior)]
-	public RenderFragment ChildContent { get; set; }
-
-	/// <summary>
-	/// Button click event if set.
-	/// </summary>
-	[Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
-
-	private string _content;
-
-	internal Task HandleBadgeClick(MouseEventArgs e)
-	{
-		if (OnClick.HasDelegate)
-			return OnClick.InvokeAsync(e);
-
-		return Task.CompletedTask;
-	}
 
 	protected override void OnParametersSet()
 	{
@@ -173,4 +172,6 @@ public partial class Badge : UIComponent
 			_content = null;
 		}
 	}
+
+	#endregion
 }

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

@@ -4,13 +4,20 @@ using Microsoft.AspNetCore.Components;
 namespace Connected.Components;
 public partial class BreadcrumbLink : UIComponent
 {
+	#region Content
 	[Parameter]
 	public BreadcrumbItem Item { get; set; }
 
 	[CascadingParameter]
 	public Breadcrumbs Parent { get; set; }
 
+	#endregion
+
+	#region Style
+
 	private string Classname => new CssBuilder("breadcrumb-item")
 		 .AddClass("disabled", Item?.Disabled)
 		 .Build();
+
+	#endregion
 }

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

@@ -3,6 +3,8 @@
 namespace Connected.Components;
 public partial class BreadcrumbSeparator : UIComponent
 {
+	#region Content
 	[CascadingParameter]
 	public Breadcrumbs Parent { get; set; }
+	#endregion
 }

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

@@ -6,6 +6,22 @@ namespace Connected.Components;
 
 public partial class Breadcrumbs : UIComponent
 {
+
+	#region Events
+
+	internal void Expand()
+	{
+		if (!Collapsed)
+			return;
+
+		Collapsed = false;
+		StateHasChanged();
+	}
+
+	#endregion
+
+	#region Content
+
 	/// <summary>
 	/// A list of breadcrumb items/links.
 	/// </summary>
@@ -20,6 +36,30 @@ public partial class Breadcrumbs : UIComponent
 	[Category(CategoryTypes.Breadcrumbs.Appearance)]
 	public string Separator { get; set; } = "/";
 
+	/// <summary>
+	/// Custom expander icon.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Breadcrumbs.Appearance)]
+	public string ExpanderIcon { get; set; } = Icons.Material.Filled.SettingsEthernet;
+
+	#endregion
+
+	#region Styling
+	[Parameter]
+	public string ClassList { get; set; } = string.Empty;
+	private string Classname => new CssBuilder("breadcrumbs")
+	 .AddClass("typography-body1")
+	 .AddClass(ClassList)
+	 .Build();
+
+	internal static string GetItemClassname(BreadcrumbItem item)
+	{
+		return new CssBuilder("breadcrumb-item")
+			.AddClass("disabled", item.Disabled)
+			.Build();
+	}
+
 	/// <summary>
 	/// Specifies a RenderFragment to use as the separator.
 	/// </summary>
@@ -34,6 +74,8 @@ public partial class Breadcrumbs : UIComponent
 	[Category(CategoryTypes.Breadcrumbs.Behavior)]
 	public RenderFragment<BreadcrumbItem> ItemTemplate { get; set; }
 
+	public bool Collapsed { get; private set; } = true;
+
 	/// <summary>
 	/// Controls when (and if) the breadcrumbs will automatically collapse.
 	/// </summary>
@@ -41,32 +83,6 @@ public partial class Breadcrumbs : UIComponent
 	[Category(CategoryTypes.Breadcrumbs.Behavior)]
 	public byte? MaxItems { get; set; }
 
-	/// <summary>
+	#endregion
-	/// Custom expander icon.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Breadcrumbs.Appearance)]
-	public string ExpanderIcon { get; set; } = Icons.Material.Filled.SettingsEthernet;
 
-	public bool Collapsed { get; private set; } = true;
-	private string Classname => new CssBuilder("breadcrumbs")
-	 .AddClass("typography-body1")
-	 .AddClass(AdditionalClassList)
-	 .Build();
-
-	internal static string GetItemClassname(BreadcrumbItem item)
-	{
-		return new CssBuilder("breadcrumb-item")
-			.AddClass("disabled", item.Disabled)
-			.Build();
-	}
-
-	internal void Expand()
-	{
-		if (!Collapsed)
-			return;
-
-		Collapsed = false;
-		StateHasChanged();
-	}
 }

src/Connected.Components/Components/BreakpointProvider/BreakpointProvider.razor.cs

@@ -6,18 +6,37 @@ namespace Connected.Components;
 
 public partial class BreakpointProvider : UIComponent, IAsyncDisposable
 {
+
+	#region Variables
 	private Guid _breakPointListenerSubscriptionId;
-
+	
 	public Breakpoint Breakpoint { get; private set; } = Breakpoint.Always;
 
-	[Parameter] public EventCallback<Breakpoint> OnBreakpointChanged { get; set; }
-
 	[Inject] public IBreakpointService Service { get; set; }
 
+	#endregion
+
+	#region Events
+	private void SetBreakpointCallback(Breakpoint breakpoint)
+	{
+		InvokeAsync(() =>
+		{
+			Breakpoint = breakpoint;
+			OnBreakpointChanged.InvokeAsync(breakpoint);
+			StateHasChanged();
+		}).AndForget();
+	}
+
+	[Parameter] public EventCallback<Breakpoint> OnBreakpointChanged { get; set; }
+	#endregion
+
+	#region Content
 	[Parameter]
 	[Category(CategoryTypes.BreakpointProvider.Behavior)]
 	public RenderFragment ChildContent { get; set; }
+	#endregion
 
+	#region Lifecycle
 	protected override async Task OnAfterRenderAsync(bool firstRender)
 	{
 		await base.OnAfterRenderAsync(firstRender);
@@ -32,15 +51,9 @@ public partial class BreakpointProvider : UIComponent, IAsyncDisposable
 		}
 	}
 
-	private void SetBreakpointCallback(Breakpoint breakpoint)
+
-	{
-		InvokeAsync(() =>
-		{
-			Breakpoint = breakpoint;
-			OnBreakpointChanged.InvokeAsync(breakpoint);
-			StateHasChanged();
-		}).AndForget();
-	}
 
 	public async ValueTask DisposeAsync() => await Service.Unsubscribe(_breakPointListenerSubscriptionId);
+	#endregion
+
 }

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

@@ -5,6 +5,27 @@ namespace Connected.Components;
 
 public partial class Button : ButtonBase
 {
+
+	#region Content
+	/// <summary>
+	/// Child content of component.
+	/// </summary>
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+	#endregion
+
+	#region Styling
+	/// <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;
 	/// <summary>
 	/// Contains the default container classlist and the user defined classes.
 	/// </summary>
@@ -17,25 +38,6 @@ public partial class Button : ButtonBase
 			.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 variant to use.
-	/// </summary>
-	[Parameter]
-	public Variant Variant { get; set; } = Variant.Text;
 	#endregion
 
 }

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

@@ -36,9 +36,13 @@ public abstract class ButtonBase : UIComponent
 	/// </summary>
 	[CascadingParameter]
 	protected IActivatable? Activateable { get; set; }
-	#endregion
 
-	#region Styling properties
+	/// <summary>
+	/// The HTML element that will be rendered in the root by the component
+	/// By default, is a button.
+	/// </summary>
+	protected string HtmlTag => ButtonType.ToString().ToLower();
+
 	#endregion
 
 	#region Behavior properties
@@ -65,13 +69,6 @@ public abstract class ButtonBase : UIComponent
 	/// </summary>
 	[Parameter]
 	public bool Disabled { get; set; }
-	#endregion
-
-	/// <summary>
-	/// The HTML element that will be rendered in the root by the component
-	/// By default, is a button.
-	/// </summary>
-	protected string HtmlTag => ButtonType.ToString().ToLower();
 
 	/// <summary>
 	/// Indicates whether the internal click propagation should be disabled,
@@ -79,5 +76,6 @@ public abstract class ButtonBase : UIComponent
 	/// </summary>
 	protected bool PreventOnClickPropagation => string.Compare(HtmlTag, "button", true) == 0;
 
-	
+	#endregion
+
 }

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

@@ -7,6 +7,38 @@ namespace Connected.Components;
 
 public partial class Fab : ButtonBase
 {
+
+	#region Content
+	/// <summary>
+	/// 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 Glyph will be added at the end of the component.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Button.Behavior)]
+	public string EndIcon { get; set; }
+
+	/// <summary>
+	/// If applied the text will be added to the component.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Button.Behavior)]
+	public string Label { get; set; }
+
+	/// <summary>
+	/// GlyphTitle of the icon used for accessibility.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Button.Behavior)]
+	public string Title { get; set; }
+	#endregion
+
+	#region Styling
 	protected string Classname =>
 	new CssBuilder("button-root mud-fab")
 	  .AddClass($"fab-extended", !string.IsNullOrEmpty(Label))
@@ -28,25 +60,6 @@ public partial class Fab : ButtonBase
 	[Category(CategoryTypes.Button.Appearance)]
 	public Size Size { get; set; } = Size.Large;
 
-	/// <summary>
-	/// 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 Glyph will be added at the start of the component.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Button.Behavior)]
-	public string StartIcon { get; set; }
-
-	/// <summary>
-	/// If applied Glyph will be added at the end of the component.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Button.Behavior)]
-	public string EndIcon { get; set; }
-
 	/// <summary>
 	/// The color of the icon. It supports the theme colors.
 	/// </summary>
@@ -60,18 +73,6 @@ public partial class Fab : ButtonBase
 	[Parameter]
 	[Category(CategoryTypes.Button.Appearance)]
 	public Size IconSize { get; set; } = Size.Medium;
+	#endregion
 
-	/// <summary>
-	/// If applied the text will be added to the component.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Button.Behavior)]
-	public string Label { get; set; }
-
-	/// <summary>
-	/// GlyphTitle of the icon used for accessibility.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Button.Behavior)]
-	public string Title { get; set; }
 }

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

@@ -5,28 +5,7 @@ namespace Connected.Components;
 
 public partial class IconButton : ButtonBase
 {
-	/// <summary>
+	#region Content
-	/// 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 Icon that will be used in the component.
 	/// </summary>
@@ -38,9 +17,16 @@ public partial class IconButton : ButtonBase
 	/// </summary>
 	[Parameter]
 	public string? IconTitle { get; set; }
+
+	/// <summary>
+	/// Child content of component, only shows if Glyph is null or Empty.
+	/// </summary>
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+
 	#endregion
 
-	#region Styling properties
+	#region Styling
 	/// <summary>
 	/// A space separated list of class names, added on top of the default class list.
 	/// </summary>
@@ -52,5 +38,17 @@ public partial class IconButton : ButtonBase
 	/// </summary>
 	[Parameter]
 	public Variant Variant { get; set; } = Variant.Text;
+
+	/// <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);
+		}
+	}
 	#endregion
 }

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

@@ -6,8 +6,8 @@
              ClassList="@ClassList"
              Clicked="Toggle"
              Disabled="Disabled"
-             Icon="@(Toggled ? ToggledGlyph : Glyph)"
+             Icon="@(Toggled ? ToggledIcon : Icon)"
-             IconTitle="@(Toggled && ToggledGlyphTitle != null ? ToggledGlyphTitle : GlyphTitle)"
+             IconTitle="@(Toggled && ToggledIconTitle != null ? ToggledIconTitle : IconTitle)"
              Variant="Variant"
              @attributes="CustomAttributes" 
 />

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

@@ -4,67 +4,12 @@ namespace Connected.Components;
 
 public partial class ToggleIconButton : UIComponent
 {
-	#region EventCallbacks
+	#region Events
 	/// <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()
 	{
@@ -86,4 +31,59 @@ public partial class ToggleIconButton : UIComponent
 			await ToggledChanged.InvokeAsync(Toggled);
 		}
 	}
+
+	#endregion
+
+	#region Content
+	/// <summary>
+	/// The glyph that will be used in the untoggled state.
+	/// </summary>
+	[Parameter]
+	public string? Icon { get; set; }
+
+	/// <summary>
+	/// GlyphTitle of the icon used for accessibility.
+	/// </summary>
+	[Parameter]
+	public string? IconTitle { get; set; }
+
+	/// <summary>
+	/// The glyph that will be used in the toggled state.
+	/// </summary>
+	[Parameter]
+	public string? ToggledIcon { get; set; }
+
+	/// <summary>
+	/// GlyphTitle used in toggled state, if different.
+	/// </summary>
+	[Parameter]
+	public string? ToggledIconTitle { get; set; }
+	#endregion
+
+	#region Styling
+	/// <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;
+
+	/// <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
 }

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

@@ -7,69 +7,75 @@ namespace Connected.Components;
 
 public partial class ButtonGroup : UIComponent
 {
-   protected string Classname =>
+
-   new CssBuilder("button-group-root")
+	#region Content
-     .AddClass($"button-group-override-styles", OverrideStyles)
+	/// <summary>
-     .AddClass($"button-group-{Variant.ToDescription()}")
+	/// Child content of component.
-     .AddClass($"button-group-{Variant.ToDescription()}-{Color.ToDescription()}")
+	/// </summary>
-     .AddClass($"button-group-{Variant.ToDescription()}-size-{Size.ToDescription()}")
+	[Parameter]
-     .AddClass($"button-group-vertical", VerticalAlign)
+	[Category(CategoryTypes.ButtonGroup.Behavior)]
-     .AddClass($"button-group-horizontal", !VerticalAlign)
+	public RenderFragment ChildContent { get; set; }
-     .AddClass($"button-group-disable-elevation", DisableElevation)
+	#endregion
-     .AddClass($"button-group-rtl", RightToLeft)
+
-     .AddClass(AdditionalClassList)
+	#region Styling
-   .Build();
+	/// <summary>
+	/// If true, the button group will be displayed vertically.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.ButtonGroup.Appearance)]
+	public bool VerticalAlign { get; set; } = false;
+
+	/// <summary>
+	/// If true, no drop-shadow will be used.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.ButtonGroup.Appearance)]
+	public bool DisableElevation { get; set; } = false;
+
+	/// <summary>
+	/// The color of the component. It supports the theme colors.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.ButtonGroup.Appearance)]
+	public ThemeColor Color { get; set; } = ThemeColor.Default;
+
+	/// <summary>
+	/// The size of the component.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.ButtonGroup.Appearance)]
+	public Size Size { get; set; } = Size.Medium;
+
+	/// <summary>
+	/// The variant to use.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.ButtonGroup.Appearance)]
+	public Variant Variant { get; set; } = Variant.Text;
+
+	protected string Classname =>
+	new CssBuilder("button-group-root")
+	  .AddClass($"button-group-override-styles", OverrideStyles)
+	  .AddClass($"button-group-{Variant.ToDescription()}")
+	  .AddClass($"button-group-{Variant.ToDescription()}-{Color.ToDescription()}")
+	  .AddClass($"button-group-{Variant.ToDescription()}-size-{Size.ToDescription()}")
+	  .AddClass($"button-group-vertical", VerticalAlign)
+	  .AddClass($"button-group-horizontal", !VerticalAlign)
+	  .AddClass($"button-group-disable-elevation", DisableElevation)
+	  .AddClass($"button-group-rtl", RightToLeft)
+	  .AddClass(AdditionalClassList)
+	.Build();
 
 
-   [CascadingParameter(Name = "RightToLeft")]
+	[CascadingParameter(Name = "RightToLeft")]
-   public bool RightToLeft { get; set; }
+	public bool RightToLeft { get; set; }
 
-   /// <summary>
+	/// <summary>
-   /// If true, the button group will override the styles of the individual buttons.
+	/// If true, the button group will override the styles of the individual buttons.
-   /// </summary>
+	/// </summary>
-   [Parameter]
+	[Parameter]
-   [Category(CategoryTypes.ButtonGroup.Appearance)]
+	[Category(CategoryTypes.ButtonGroup.Appearance)]
-   public bool OverrideStyles { get; set; } = true;
+	public bool OverrideStyles { get; set; } = true;
+	#endregion
 
-   /// <summary>
-   /// Child content of component.
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.ButtonGroup.Behavior)]
-   public RenderFragment ChildContent { get; set; }
-
-   /// <summary>
-   /// If true, the button group will be displayed vertically.
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.ButtonGroup.Appearance)]
-   public bool VerticalAlign { get; set; } = false;
-
-   /// <summary>
-   /// If true, no drop-shadow will be used.
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.ButtonGroup.Appearance)]
-   public bool DisableElevation { get; set; } = false;
-
-   /// <summary>
-   /// The color of the component. It supports the theme colors.
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.ButtonGroup.Appearance)]
-   public ThemeColor Color { get; set; } = ThemeColor.Default;
-
-   /// <summary>
-   /// The size of the component.
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.ButtonGroup.Appearance)]
-   public Size Size { get; set; } = Size.Medium;
-
-   /// <summary>
-   /// The variant to use.
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.ButtonGroup.Appearance)]
-   public Variant Variant { get; set; } = Variant.Text;
 }

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

@@ -6,6 +6,16 @@ namespace Connected.Components;
 
 public partial class Card : UIComponent
 {
+	#region Content
+	/// <summary>
+	/// Child content of the component.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Card.Behavior)]
+	public RenderFragment ChildContent { get; set; }
+	#endregion
+
+	#region Styling
 	protected string Classname =>
 	new CssBuilder("card")
 	  .AddClass(AdditionalClassList)
@@ -31,11 +41,6 @@ public partial class Card : UIComponent
 	[Parameter]
 	[Category(CategoryTypes.Card.Appearance)]
 	public bool Outlined { get; set; }
+	#endregion
 
-	/// <summary>
-	/// Child content of the component.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Card.Behavior)]
-	public RenderFragment ChildContent { get; set; }
 }

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

@@ -6,15 +6,22 @@ namespace Connected.Components;
 
 public partial class CardActions : UIComponent
 {
+	#region Style
 	protected string Classname =>
 	new CssBuilder("card-actions")
 	  .AddClass(AdditionalClassList)
 	.Build();
 
+	#endregion
+
+	#region Content
+
 	/// <summary>
 	/// Child content of the component.
 	/// </summary>
 	[Parameter]
 	[Category(CategoryTypes.Card.Behavior)]
 	public RenderFragment ChildContent { get; set; }
+
+	#endregion
 }

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

@@ -6,15 +6,22 @@ namespace Connected.Components;
 
 public partial class CardContent : UIComponent
 {
+	#region Style
 	protected string Classname =>
 	new CssBuilder("card-content")
 	  .AddClass(AdditionalClassList)
 	.Build();
 
+	#endregion
+
+	#region Content
+
 	/// <summary>
 	/// Child content of the component.
 	/// </summary>
 	[Parameter]
 	[Category(CategoryTypes.Card.Behavior)]
 	public RenderFragment ChildContent { get; set; }
+
+	#endregion
 }

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

@@ -6,7 +6,8 @@ namespace Connected.Components;
 
 public partial class CardHeader : UIComponent
 {
-   protected string Classname =>
+	#region Style
+	protected string Classname =>
    new CssBuilder("card-header")
      .AddClass(AdditionalClassList)
    .Build();
@@ -32,10 +33,16 @@ public partial class CardHeader : UIComponent
    [Category(CategoryTypes.Card.Behavior)]
    public RenderFragment CardHeaderActions { get; set; }
 
-   /// <summary>
+	#endregion
-   /// Optional child content
+
-   /// </summary>
+	#region Content
-   [Parameter]
+
+	/// <summary>
+	/// Optional child content
+	/// </summary>
+	[Parameter]
    [Category(CategoryTypes.Card.Behavior)]
    public RenderFragment ChildContent { get; set; }
+
+	#endregion
 }

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

@@ -6,6 +6,7 @@ namespace Connected.Components;
 
 public partial class CardMedia : UIComponent
 {
+	#region Style
 	protected string StyleString =>
 		StyleBuilder.Default($"background-image:url(\"{Image}\");height: {Height}px;")
 			.Build();
@@ -15,6 +16,17 @@ public partial class CardMedia : UIComponent
 			.AddClass(AdditionalClassList)
 			.Build();
 
+	/// <summary>
+	/// Specifies the height of the image in px.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Card.Behavior)]
+	public int Height { get; set; } = 300;
+
+	#endregion
+
+	#region Content
+
 	/// <summary>
 	/// GlyphTitle of the image used for accessibility.
 	/// </summary>
@@ -29,10 +41,6 @@ public partial class CardMedia : UIComponent
 	[Category(CategoryTypes.Card.Behavior)]
 	public string Image { get; set; }
 
-	/// <summary>
+	#endregion
-	/// Specifies the height of the image in px.
+
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Card.Behavior)]
-	public int Height { get; set; } = 300;
 }

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

@@ -8,6 +8,102 @@ namespace Connected.Components;
 
 public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TData>, IAsyncDisposable
 {
+	#region Variables
+
+	private Timer _timer;
+	private bool _autoCycle = true;
+	private ThemeColor _currentColor = ThemeColor.Inherit;
+	private TimeSpan _cycleTimeout = TimeSpan.FromSeconds(5);
+	private void TimerElapsed(object stateInfo) => InvokeAsync(async () => await TimerTickAsync());
+
+	#endregion
+
+	#region Events
+	/// <summary>
+	/// Called when selected Index changed on base class
+	/// </summary>
+	protected override void SelectionChanged()
+	{
+		InvokeAsync(async () => await ResetTimerAsync());
+
+		_currentColor = SelectedContainer?.Color ?? ThemeColor.Inherit;
+	}
+
+	//When an item is added, it automatically checks the color
+	public override void AddItem(CarouselItem item)
+	{
+		Items.Add(item);
+		if (Items.Count - 1 == SelectedIndex)
+		{
+			_currentColor = item.Color;
+			StateHasChanged();
+		}
+	}
+
+	/// <summary>
+	/// Provides Selection changes by horizontal swipe gesture
+	/// </summary>
+	private void OnSwipe(SwipeDirection direction)
+	{
+		if (!EnableSwipeGesture)
+		{
+			return;
+		}
+
+		switch (direction)
+		{
+			case SwipeDirection.LeftToRight:
+				if (RightToLeft) Next();
+				else Previous();
+				break;
+
+			case SwipeDirection.RightToLeft:
+				if (RightToLeft) Previous();
+				else Next();
+				break;
+		}
+	}
+
+	/// <summary>
+	/// Immediately starts the AutoCycle timer
+	/// </summary>
+	private ValueTask StartTimerAsync()
+	{
+		if (AutoCycle)
+			_timer?.Change(AutoCycleTime, TimeSpan.Zero);
+
+		return ValueTask.CompletedTask;
+	}
+
+	/// <summary>
+	/// Immediately stops the AutoCycle timer
+	/// </summary>
+	private ValueTask StopTimerAsync()
+	{
+		_timer?.Change(Timeout.Infinite, Timeout.Infinite);
+		return ValueTask.CompletedTask;
+	}
+
+	/// <summary>
+	/// Stops and restart the AutoCycle timer
+	/// </summary>
+	private async ValueTask ResetTimerAsync()
+	{
+		await StopTimerAsync();
+		await StartTimerAsync();
+	}
+
+
+	/// <summary>
+	/// Changes the SelectedIndex to a next one (or restart on 0)
+	/// </summary>
+	private async ValueTask TimerTickAsync()
+	{
+		await InvokeAsync(Next);
+	}
+	#endregion
+
+	#region Styling
 	protected string Classname =>
 				new CssBuilder("carousel")
 					 .AddClass($"carousel-{(BulletsColor ?? _currentColor).ToDescription()}")
@@ -26,12 +122,6 @@ public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TD
 					.AddClass(BulletsClass)
 					.Build();
 
-	private Timer _timer;
-	private bool _autoCycle = true;
-	private ThemeColor _currentColor = ThemeColor.Inherit;
-	private TimeSpan _cycleTimeout = TimeSpan.FromSeconds(5);
-	private void TimerElapsed(object stateInfo) => InvokeAsync(async () => await TimerTickAsync());
-
 	private static Position ConvertPosition(Position position)
 	{
 		return position switch
@@ -61,12 +151,6 @@ public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TD
 	[Category(CategoryTypes.Carousel.Appearance)]
 	public Position ArrowsPosition { get; set; } = Position.Center;
 
-	/// <summary>
-	/// Gets or Sets if bar with Bullets must be visible
-	/// </summary>
-	[Category(CategoryTypes.Carousel.Behavior)]
-	[Parameter] public bool ShowBullets { get; set; } = true;
-
 	/// <summary>
 	/// Sets the position of the bullets. By default, the position is the Bottom position
 	/// </summary>
@@ -80,16 +164,6 @@ public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TD
 	[Category(CategoryTypes.Carousel.Appearance)]
 	[Parameter] public ThemeColor? BulletsColor { get; set; }
 
-
-	/// <summary>
-	/// Gets or Sets if bottom bar with Delimiters must be visible.
-	/// Deprecated, use ShowBullets instead.
-	/// </summary>
-	[Category(CategoryTypes.Carousel.Behavior)]
-	[Obsolete($"Use {nameof(ShowBullets)} instead", false)]
-	[ExcludeFromCodeCoverage]
-	[Parameter] public bool ShowDelimiters { get => ShowBullets; set => ShowBullets = value; }
-
 	/// <summary>
 	/// Gets or Sets the Delimiters color.
 	/// If not set, the color is determined based on the <see cref="MudCarouselItem.Color"/> property of the active child.
@@ -100,48 +174,6 @@ public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TD
 	[ExcludeFromCodeCoverage]
 	[Parameter] public ThemeColor? DelimitersColor { get => BulletsColor; set => BulletsColor = value; }
 
-	/// <summary>
-	/// Gets or Sets automatic cycle on item collection.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Carousel.Behavior)]
-	public bool AutoCycle
-	{
-		get => _autoCycle;
-		set
-		{
-			_autoCycle = value;
-
-			if (_autoCycle)
-				InvokeAsync(async () => await ResetTimerAsync());
-
-			else
-				InvokeAsync(async () => await StopTimerAsync());
-		}
-	}
-
-
-	/// <summary>
-	/// Gets or Sets the Auto Cycle time
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Carousel.Behavior)]
-	public TimeSpan AutoCycleTime
-	{
-		get => _cycleTimeout;
-		set
-		{
-			_cycleTimeout = value;
-
-			if (_autoCycle == true)
-				InvokeAsync(async () => await ResetTimerAsync());
-
-			else
-				InvokeAsync(async () => await StopTimerAsync());
-		}
-	}
-
-
 	/// <summary>
 	/// Gets or Sets custom class(es) for 'Next' and 'Previous' arrows
 	/// </summary>
@@ -214,13 +246,6 @@ public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TD
 	[Category(CategoryTypes.Carousel.Appearance)]
 	[Parameter] public RenderFragment<bool> BulletTemplate { get; set; }
 
-	/// <summary>
-	/// Gets or Sets if swipe gestures are allowed for touch devices.
-	/// </summary>
-	[Category(CategoryTypes.Carousel.Behavior)]
-	[Parameter]
-	public bool EnableSwipeGesture { get; set; } = true;
-
 	/// <summary>
 	/// Gets or Sets the Template for Delimiters.
 	/// Deprecated, use BulletsTemplate instead.
@@ -230,91 +255,78 @@ public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TD
 	[ExcludeFromCodeCoverage]
 	[Parameter] public RenderFragment<bool> DelimiterTemplate { get => BulletTemplate; set => BulletTemplate = value; }
 
+	#endregion
+
+	#region Behavior
+	/// <summary>
+	/// Gets or Sets if bar with Bullets must be visible
+	/// </summary>
+	[Category(CategoryTypes.Carousel.Behavior)]
+	[Parameter] public bool ShowBullets { get; set; } = true;
 
 	/// <summary>
-	/// Called when selected Index changed on base class
+	/// Gets or Sets if bottom bar with Delimiters must be visible.
+	/// Deprecated, use ShowBullets instead.
 	/// </summary>
-	protected override void SelectionChanged()
+	[Category(CategoryTypes.Carousel.Behavior)]
-	{
+	[Obsolete($"Use {nameof(ShowBullets)} instead", false)]
-		InvokeAsync(async () => await ResetTimerAsync());
+	[ExcludeFromCodeCoverage]
+	[Parameter] public bool ShowDelimiters { get => ShowBullets; set => ShowBullets = value; }
 
-		_currentColor = SelectedContainer?.Color ?? ThemeColor.Inherit;
-	}
 
-	//When an item is added, it automatically checks the color
+	/// <summary>
-	public override void AddItem(CarouselItem item)
+	/// Gets or Sets automatic cycle on item collection.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Carousel.Behavior)]
+	public bool AutoCycle
 	{
-		Items.Add(item);
+		get => _autoCycle;
-		if (Items.Count - 1 == SelectedIndex)
+		set
 		{
-			_currentColor = item.Color;
+			_autoCycle = value;
-			StateHasChanged();
+
+			if (_autoCycle)
+				InvokeAsync(async () => await ResetTimerAsync());
+
+			else
+				InvokeAsync(async () => await StopTimerAsync());
 		}
 	}
 
 
 	/// <summary>
-	/// Provides Selection changes by horizontal swipe gesture
+	/// Gets or Sets the Auto Cycle time
 	/// </summary>
-	private void OnSwipe(SwipeDirection direction)
+	[Parameter]
+	[Category(CategoryTypes.Carousel.Behavior)]
+	public TimeSpan AutoCycleTime
 	{
-		if (!EnableSwipeGesture)
+		get => _cycleTimeout;
+		set
 		{
-			return;
+			_cycleTimeout = value;
-		}
 
-		switch (direction)
+			if (_autoCycle == true)
-		{
+				InvokeAsync(async () => await ResetTimerAsync());
-			case SwipeDirection.LeftToRight:
-				if (RightToLeft) Next();
-				else Previous();
-				break;
 
-			case SwipeDirection.RightToLeft:
+			else
-				if (RightToLeft) Previous();
+				InvokeAsync(async () => await StopTimerAsync());
-				else Next();
-				break;
 		}
 	}
 
-	/// <summary>
-	/// Immediately starts the AutoCycle timer
-	/// </summary>
-	private ValueTask StartTimerAsync()
-	{
-		if (AutoCycle)
-			_timer?.Change(AutoCycleTime, TimeSpan.Zero);
 
-		return ValueTask.CompletedTask;
-	}
-
-	/// <summary>
-	/// Immediately stops the AutoCycle timer
-	/// </summary>
-	private ValueTask StopTimerAsync()
-	{
-		_timer?.Change(Timeout.Infinite, Timeout.Infinite);
-		return ValueTask.CompletedTask;
-	}
-
-	/// <summary>
-	/// Stops and restart the AutoCycle timer
-	/// </summary>
-	private async ValueTask ResetTimerAsync()
-	{
-		await StopTimerAsync();
-		await StartTimerAsync();
-	}
 
 
 	/// <summary>
-	/// Changes the SelectedIndex to a next one (or restart on 0)
+	/// Gets or Sets if swipe gestures are allowed for touch devices.
 	/// </summary>
-	private async ValueTask TimerTickAsync()
+	[Category(CategoryTypes.Carousel.Behavior)]
-	{
+	[Parameter]
-		await InvokeAsync(Next);
+	public bool EnableSwipeGesture { get; set; } = true;
-	}
+	#endregion
 
+	#region Lifecycle
 	protected override async Task OnAfterRenderAsync(bool firstRender)
 	{
 		await base.OnAfterRenderAsync(firstRender);
@@ -346,4 +358,6 @@ public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TD
 			}
 		}
 	}
+	#endregion
+
 }

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

@@ -7,6 +7,19 @@ namespace Connected.Components;
 
 public partial class CarouselItem : UIComponent, IDisposable
 {
+	#region Variables
+	private bool _disposed = false;
+	#endregion
+
+	#region Content
+	[Parameter]
+	[Category(CategoryTypes.Carousel.Behavior)]
+	public RenderFragment ChildContent { get; set; }
+
+	[CascadingParameter] protected internal ItemsControlBase<CarouselItem> Parent { get; set; }
+	#endregion
+
+	#region Styling
 	protected string Classname =>
 				new CssBuilder("carousel-item")
 					 .AddClass($"carousel-item-{Color.ToDescription()}")
@@ -35,14 +48,6 @@ public partial class CarouselItem : UIComponent, IDisposable
 					 .AddClass(AdditionalClassList)
 					 .Build();
 
-	[Parameter]
-	[Category(CategoryTypes.Carousel.Behavior)]
-	public RenderFragment ChildContent { get; set; }
-
-	[CascadingParameter] protected internal ItemsControlBase<CarouselItem> Parent { get; set; }
-
-	[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
-
 	/// <summary>
 	/// The color of the component. It supports the theme colors.
 	/// </summary>
@@ -71,21 +76,24 @@ public partial class CarouselItem : UIComponent, IDisposable
 	[Category(CategoryTypes.Carousel.Appearance)]
 	public string CustomTransitionExit { get; set; }
 
+	[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
 
 	public bool IsVisible => Parent != null && (Parent.LastContainer == this || Parent.SelectedIndex == Parent.Items.IndexOf(this));
+	#endregion
 
-
+	#region Lifecycle
 	protected override Task OnInitializedAsync()
 	{
 		Parent?.AddItem(this);
 		return Task.CompletedTask;
 	}
 
-	private bool _disposed = false;
+
 	public void Dispose()
 	{
 		_disposed = true;
 		Parent?.Items.Remove(this);
 	}
+	#endregion
 
 }

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

@@ -8,99 +8,12 @@ namespace Connected.Components;
 
 public partial class Chart : UIComponent
 {
-	[Parameter]
-	[Category(CategoryTypes.Chart.Behavior)]
-	public double[] InputData { get; set; } = Array.Empty<double>();
-
-	[Parameter]
-	[Category(CategoryTypes.Chart.Behavior)]
-	public string[] InputLabels { get; set; } = Array.Empty<string>();
-
-	[Parameter]
-	[Category(CategoryTypes.Chart.Behavior)]
-	public string[] XAxisLabels { get; set; } = Array.Empty<string>();
-
-	[Parameter]
-	[Category(CategoryTypes.Chart.Behavior)]
-	public List<ChartSeries> ChartSeries { get; set; } = new();
-
-	[Parameter]
-	[Category(CategoryTypes.Chart.Appearance)]
-	public ChartOptions ChartOptions { get; set; } = new();
-
-	/// <summary>
-	/// RenderFragment for costumization inside the chart's svg.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Chart.Appearance)]
-	public RenderFragment CustomGraphics { get; set; }
-
-	protected string Classname =>
-	new CssBuilder("chart")
-		.AddClass($"chart-legend-{ConvertLegendPosition(LegendPosition).ToDescription()}")
-	  .AddClass(AdditionalClassList)
-	.Build();
-
-	[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
-
-	/// <summary>
-	/// The Type of the chart.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Chart.Behavior)]
-	public ChartType ChartType { get; set; }
-
-	/// <summary>
-	/// The Width of the chart, end with % or px.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Chart.Appearance)]
-	public string Width { get; set; } = "80%";
-
-	/// <summary>
-	/// The Height of the chart, end with % or px.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Chart.Appearance)]
-	public string Height { get; set; } = "80%";
-
-	/// <summary>
-	/// The placement direction of the legend if used.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Chart.Appearance)]
-	public Position LegendPosition { get; set; } = Position.Bottom;
-
-	private Position ConvertLegendPosition(Position position)
-	{
-		return position switch
-		{
-			Position.Start => RightToLeft ? Position.Right : Position.Left,
-			Position.End => RightToLeft ? Position.Left : Position.Right,
-			_ => position
-		};
-	}
 
+	#region Variables
 	private int _selectedIndex;
+	#endregion
 
-	/// <summary>
+	#region Events
-	/// Selected index of a portion of the chart.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Chart.Behavior)]
-	public int SelectedIndex
-	{
-		get => _selectedIndex;
-		set
-		{
-			if (value != _selectedIndex)
-			{
-				_selectedIndex = value;
-				SelectedIndexChanged.InvokeAsync(value);
-			}
-		}
-	}
-
 	/// <summary>
 	/// Selected index of a portion of the chart.
 	/// </summary>
@@ -124,6 +37,102 @@ public partial class Chart : UIComponent
 
 		return d.ToString(format);
 	}
+	private Position ConvertLegendPosition(Position position)
+	{
+		return position switch
+		{
+			Position.Start => RightToLeft ? Position.Right : Position.Left,
+			Position.End => RightToLeft ? Position.Left : Position.Right,
+			_ => position
+		};
+	}
+	#endregion
+
+	#region Styling
+	[Parameter]
+	[Category(CategoryTypes.Chart.Appearance)]
+	public ChartOptions ChartOptions { get; set; } = new();
+
+	/// <summary>
+	/// RenderFragment for costumization inside the chart's svg.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Chart.Appearance)]
+	public RenderFragment CustomGraphics { get; set; }
+
+	protected string Classname =>
+	new CssBuilder("chart")
+		.AddClass($"chart-legend-{ConvertLegendPosition(LegendPosition).ToDescription()}")
+	  .AddClass(AdditionalClassList)
+	.Build();
+
+	[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
+
+	/// <summary>
+	/// The Width of the chart, end with % or px.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Chart.Appearance)]
+	public string Width { get; set; } = "80%";
+
+	/// <summary>
+	/// The Height of the chart, end with % or px.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Chart.Appearance)]
+	public string Height { get; set; } = "80%";
+
+	/// <summary>
+	/// The placement direction of the legend if used.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Chart.Appearance)]
+	public Position LegendPosition { get; set; } = Position.Bottom;
+
+	#endregion
+
+	#region Behavior
+	[Parameter]
+	[Category(CategoryTypes.Chart.Behavior)]
+	public double[] InputData { get; set; } = Array.Empty<double>();
+
+	[Parameter]
+	[Category(CategoryTypes.Chart.Behavior)]
+	public string[] InputLabels { get; set; } = Array.Empty<string>();
+
+	[Parameter]
+	[Category(CategoryTypes.Chart.Behavior)]
+	public string[] XAxisLabels { get; set; } = Array.Empty<string>();
+
+	[Parameter]
+	[Category(CategoryTypes.Chart.Behavior)]
+	public List<ChartSeries> ChartSeries { get; set; } = new();
+	/// <summary>
+	/// The Type of the chart.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Chart.Behavior)]
+	public ChartType ChartType { get; set; }
+
+	/// <summary>
+	/// Selected index of a portion of the chart.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Chart.Behavior)]
+	public int SelectedIndex
+	{
+		get => _selectedIndex;
+		set
+		{
+			if (value != _selectedIndex)
+			{
+				_selectedIndex = value;
+				SelectedIndexChanged.InvokeAsync(value);
+			}
+		}
+	}
+
+	#endregion
 
 }
 

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

@@ -4,6 +4,7 @@ namespace Connected.Components;
 
 partial class Bar : Chart
 {
+	#region Variables
 	[CascadingParameter] public Chart ChartParent { get; set; }
 
 	private List<SvgPath> _horizontalLines = new();
@@ -16,7 +17,9 @@ partial class Bar : Chart
 	private List<ChartSeries> _series = new();
 
 	private List<SvgPath> _bars = new();
+	#endregion
 
+	#region Lifecycle
 	protected override void OnParametersSet()
 	{
 		base.OnParametersSet();
@@ -147,4 +150,6 @@ partial class Bar : Chart
 			_legends.Add(legend);
 		}
 	}
+	#endregion
+
 }

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

@@ -4,6 +4,7 @@ namespace Connected.Components;
 
 partial class Donut : Chart
 {
+	#region Variables
 	[CascadingParameter] public Chart ChartParent { get; set; }
 
 	private List<SvgCircle> _circles = new();
@@ -12,6 +13,10 @@ partial class Donut : Chart
 	protected string ParentWidth => ChartParent?.Width;
 	protected string ParentHeight => ChartParent?.Height;
 
+	#endregion
+
+	#region Lifecycle
+
 	protected override void OnParametersSet()
 	{
 		_circles.Clear();
@@ -57,4 +62,6 @@ partial class Donut : Chart
 		}
 	}
 
+	#endregion
+
 }

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

@@ -4,6 +4,8 @@ namespace Connected.Components;
 
 partial class Line : Chart
 {
+	#region Variables
+
 	private const int MaxHorizontalGridLines = 100;
 
 	[CascadingParameter] public Chart ChartParent { get; set; }
@@ -19,6 +21,10 @@ partial class Line : Chart
 
 	private List<SvgPath> _chartLines = new();
 
+	#endregion
+
+	#region Lifecycle
+
 	protected override void OnParametersSet()
 	{
 		base.OnParametersSet();
@@ -228,4 +234,6 @@ partial class Line : Chart
 			_legends.Add(legend);
 		}
 	}
+
+	#endregion
 }

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

@@ -4,11 +4,16 @@ namespace Connected.Components;
 
 partial class Pie : Chart
 {
+	#region Variables
 	[CascadingParameter] public Chart ChartParent { get; set; }
 
 	private List<SvgPath> _paths = new();
 	private List<SvgLegend> _legends = new();
 
+	#endregion
+
+	#region Lifecycle
+
 	protected override void OnParametersSet()
 	{
 		_paths.Clear();
@@ -52,4 +57,5 @@ partial class Pie : Chart
 			counter += 1;
 		}
 	}
+	#endregion
 }

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

@@ -9,134 +9,13 @@ namespace Connected.Components;
 
 public partial class CheckBox<T> : BooleanInput<T>
 {
-	protected string Classname =>
+	#region Variables
-	new CssBuilder("input-control-boolean-input")
+	private IKeyInterceptor _keyInterceptor;
-		.AddClass(AdditionalClassList)
+	[Inject] private IKeyInterceptorFactory _keyInterceptorFactory { get; set; }
-		.Build();
+	private string _elementId = "checkbox" + Guid.NewGuid().ToString().Substring(0, 8);
-
+	#endregion
-	protected string LabelClassname =>
-	new CssBuilder("checkbox")
-		.AddClass($"disabled", Disabled)
-		.AddClass($"readonly", ReadOnly)
-		.AddClass(LabelPosition == LabelPosition.End ? "ltr" : "rtl", true)
-	.Build();
-
-	protected string CheckBoxClassname =>
-	new CssBuilder("button-root mud-icon-button")
-		.AddClass($"{Color.ToDescription()}-text hover:mud-{Color.ToDescription()}-hover", UnCheckedColor == null || (UnCheckedColor != null && BoolValue == true))
-		.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)
-		.AddClass($"readonly", ReadOnly)
-	.Build();
-
-	/// <summary>
-	/// The color of the component. It supports the theme colors.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.Appearance)]
-	public ThemeColor Color { get; set; } = ThemeColor.Default;
-
-	/// <summary>
-	/// The base color of the component in its none active/unchecked state. It supports the theme colors.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Radio.Appearance)]
-	public ThemeColor? UnCheckedColor { get; set; } = null;
-
-	/// <summary>
-	/// The text/label will be displayed next to the checkbox if set.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.Behavior)]
-	public string Label { get; set; }
-
-	/// <summary>
-	/// The position of the text/label.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.Behavior)]
-	public LabelPosition LabelPosition { get; set; } = LabelPosition.End;
-
-	/// <summary>
-	/// If true, the checkbox can be controlled with the keyboard.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.Behavior)]
-	public bool KeyboardEnabled { get; set; } = true;
-
-	/// <summary>
-	/// If true, disables ripple effect.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.Appearance)]
-	public bool DisableRipple { get; set; }
-
-	/// <summary>
-	/// If true, compact padding will be applied.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.Appearance)]
-	public bool Dense { get; set; }
-
-	/// <summary>
-	/// The Size of the component.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.Appearance)]
-	public Size Size { get; set; } = Size.Medium;
-
-	/// <summary>
-	/// Child content of component.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.Behavior)]
-	public RenderFragment ChildContent { get; set; }
-
-	/// <summary>
-	/// Custom checked icon, leave null for default.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.Appearance)]
-	public string CheckedIcon { get; set; } = Icons.Material.Filled.CheckBox;
-
-	/// <summary>
-	/// Custom unchecked icon, leave null for default.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.Appearance)]
-	public string UncheckedIcon { get; set; } = Icons.Material.Filled.CheckBoxOutlineBlank;
-
-	/// <summary>
-	/// Custom indeterminate icon, leave null for default.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.Appearance)]
-	public string IndeterminateIcon { get; set; } = Icons.Material.Filled.IndeterminateCheckBox;
-
-	/// <summary>
-	/// Define if the checkbox can cycle again through indeterminate status.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.Validation)]
-	public bool TriState { get; set; }
-
-	private string GetIcon()
-	{
-		if (BoolValue == true)
-		{
-			return CheckedIcon;
-		}
-
-		if (BoolValue == false)
-		{
-			return UncheckedIcon;
-		}
-
-		return IndeterminateIcon;
-	}
 
+	#region Events
 	protected override Task OnChange(ChangeEventArgs args)
 	{
 		Modified = true;
@@ -202,12 +81,144 @@ public partial class CheckBox<T> : BooleanInput<T>
 				break;
 		}
 	}
+	#endregion
 
-	private IKeyInterceptor _keyInterceptor;
+	#region Content
-	[Inject] private IKeyInterceptorFactory _keyInterceptorFactory { get; set; }
+	/// <summary>
+	/// Child content of component.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.Behavior)]
+	public RenderFragment ChildContent { get; set; }
+	#endregion
 
-	private string _elementId = "checkbox" + Guid.NewGuid().ToString().Substring(0, 8);
+	#region Styling
+	protected string Classname =>
+	new CssBuilder("input-control-boolean-input")
+		.AddClass(AdditionalClassList)
+		.Build();
 
+	protected string LabelClassname =>
+	new CssBuilder("checkbox")
+		.AddClass($"disabled", Disabled)
+		.AddClass($"readonly", ReadOnly)
+		.AddClass(LabelPosition == LabelPosition.End ? "ltr" : "rtl", true)
+	.Build();
+
+	protected string CheckBoxClassname =>
+	new CssBuilder("button-root mud-icon-button")
+		.AddClass($"{Color.ToDescription()}-text hover:mud-{Color.ToDescription()}-hover", UnCheckedColor == null || (UnCheckedColor != null && BoolValue == true))
+		.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)
+		.AddClass($"readonly", ReadOnly)
+	.Build();
+
+	/// <summary>
+	/// The color of the component. It supports the theme colors.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.Appearance)]
+	public ThemeColor Color { get; set; } = ThemeColor.Default;
+
+	/// <summary>
+	/// The base color of the component in its none active/unchecked state. It supports the theme colors.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Radio.Appearance)]
+	public ThemeColor? UnCheckedColor { get; set; } = null;
+
+	/// <summary>
+	/// If true, disables ripple effect.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.Appearance)]
+	public bool DisableRipple { get; set; }
+
+	/// <summary>
+	/// If true, compact padding will be applied.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.Appearance)]
+	public bool Dense { get; set; }
+
+	/// <summary>
+	/// The Size of the component.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.Appearance)]
+	public Size Size { get; set; } = Size.Medium;
+
+	/// <summary>
+	/// Custom checked icon, leave null for default.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.Appearance)]
+	public string CheckedIcon { get; set; } = Icons.Material.Filled.CheckBox;
+
+	/// <summary>
+	/// Custom unchecked icon, leave null for default.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.Appearance)]
+	public string UncheckedIcon { get; set; } = Icons.Material.Filled.CheckBoxOutlineBlank;
+
+	/// <summary>
+	/// Custom indeterminate icon, leave null for default.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.Appearance)]
+	public string IndeterminateIcon { get; set; } = Icons.Material.Filled.IndeterminateCheckBox;
+
+	private string GetIcon()
+	{
+		if (BoolValue == true)
+		{
+			return CheckedIcon;
+		}
+
+		if (BoolValue == false)
+		{
+			return UncheckedIcon;
+		}
+
+		return IndeterminateIcon;
+	}
+
+	#endregion
+
+	#region Behavior
+	/// <summary>
+	/// The text/label will be displayed next to the checkbox if set.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.Behavior)]
+	public string Label { get; set; }
+
+	/// <summary>
+	/// The position of the text/label.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.Behavior)]
+	public LabelPosition LabelPosition { get; set; } = LabelPosition.End;
+
+	/// <summary>
+	/// If true, the checkbox can be controlled with the keyboard.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.Behavior)]
+	public bool KeyboardEnabled { get; set; } = true;
+
+	/// <summary>
+	/// Define if the checkbox can cycle again through indeterminate status.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.Validation)]
+	public bool TriState { get; set; }
+	#endregion
+
+	#region Lifecycle
 	protected override void OnInitialized()
 	{
 		base.OnInitialized();
@@ -251,4 +262,6 @@ public partial class CheckBox<T> : BooleanInput<T>
 			}
 		}
 	}
+	#endregion
+	
 }

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

@@ -10,11 +10,101 @@ namespace Connected.Components;
 
 public partial class Chip : UIComponent, IDisposable
 {
+
+	#region Variables
 	private bool _isSelected;
 	[Inject] public NavigationManager UriHelper { get; set; }
 
 	[Inject] public IJsApiService JsApiService { get; set; }
+	#endregion
 
+	#region Events
+	
+	internal void ForceRerender() => StateHasChanged();
+
+	protected internal async Task OnClickHandler(MouseEventArgs ev)
+	{
+		if (ChipSet?.ReadOnly == true)
+		{
+			return;
+		}
+		if (ChipSet != null)
+		{
+			_ = ChipSet.OnChipClicked(this);
+		}
+		if (Href != null)
+		{
+			// TODO: use MudElement to render <a> and this code can be removed. we know that it has potential problems on iOS
+			if (string.IsNullOrWhiteSpace(Target))
+				UriHelper.NavigateTo(Href, ForceLoad);
+			else
+				await JsApiService.Open(Href, Target);
+		}
+		else
+		{
+			await OnClick.InvokeAsync(ev);
+			if (Command?.CanExecute(CommandParameter) ?? false)
+			{
+				Command.Execute(CommandParameter);
+			}
+		}
+	}
+
+	protected async Task OnCloseHandler(MouseEventArgs ev)
+	{
+		if (ChipSet?.ReadOnly == true)
+		{
+			return;
+		}
+		await OnClose.InvokeAsync(this);
+		ChipSet?.OnChipDeleted(this);
+		StateHasChanged();
+	}
+
+
+	/// <summary>
+	/// Chip click event, if set the chip focus, hover and click effects are applied.
+	/// </summary>
+	[Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
+
+	/// <summary>
+	/// Chip delete event, if set the delete icon will be visible.
+	/// </summary>
+	[Parameter] public EventCallback<Chip> OnClose { get; set; }
+	#endregion
+
+	#region Content
+	[CascadingParameter] ChipSet ChipSet { get; set; }
+
+	/// <summary>
+	/// If set to a URL, clicking the button will open the referenced document. Use Target to specify where
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Chip.ClickAction)]
+	public string Href { get; set; }
+	/// <summary>
+	/// The target attribute specifies where to open the link, if Href is specified. Possible values: _blank | _self | _parent | _top | <i>framename</i>
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Chip.ClickAction)]
+	public string Target { get; set; }
+
+	/// <summary>
+	/// Command executed when the user clicks on an element.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Chip.ClickAction)]
+	public ICommand Command { get; set; }
+
+	/// <summary>
+	/// Command parameter.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Chip.ClickAction)]
+	public object CommandParameter { get; set; }
+	#endregion
+
+	#region Styling
 	protected string Classname =>
 	new CssBuilder("chip")
 	  .AddClass($"chip-{GetVariant().ToDescription()}")
@@ -57,8 +147,6 @@ public partial class Chip : UIComponent, IDisposable
 		}
 	}
 
-	[CascadingParameter] ChipSet ChipSet { get; set; }
-
 	/// <summary>
 	/// The color of the component.
 	/// </summary>
@@ -87,13 +175,6 @@ public partial class Chip : UIComponent, IDisposable
 	[Category(CategoryTypes.Chip.Appearance)]
 	public ThemeColor SelectedColor { get; set; } = ThemeColor.Inherit;
 
-	/// <summary>
-	/// Avatar Glyph, Overrides the regular Glyph if set.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Chip.Behavior)]
-	public string Avatar { get; set; }
-
 	/// <summary>
 	/// Avatar CSS Class, appends to Chips default avatar classes.
 	/// </summary>
@@ -108,20 +189,6 @@ public partial class Chip : UIComponent, IDisposable
 	[Category(CategoryTypes.Chip.Appearance)]
 	public bool Label { get; set; }
 
-	/// <summary>
-	/// If true, the chip will be displayed in disabled state and no events possible.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Chip.Behavior)]
-	public bool Disabled { get; set; }
-
-	/// <summary>
-	/// Sets the Glyph to use.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Chip.Behavior)]
-	public string Icon { get; set; }
-
 	/// <summary>
 	/// Custom checked icon.
 	/// </summary>
@@ -150,6 +217,92 @@ public partial class Chip : UIComponent, IDisposable
 	[Category(CategoryTypes.Chip.Appearance)]
 	public bool DisableRipple { get; set; }
 
+	#endregion
+
+	#region Behavior
+
+	/// <summary>
+	/// Set by MudChipSet
+	/// </summary>
+	public bool IsSelected
+	{
+		get => _isSelected;
+		set
+		{
+			if (_isSelected == value)
+				return;
+			_isSelected = value;
+			StateHasChanged();
+		}
+	}
+
+	/// <summary>
+	/// If false, this chip has not been seen before
+	/// </summary>
+	public bool DefaultProcessed { get; set; }
+
+	/// <summary>
+	/// Set by MudChipSet
+	/// </summary>
+	public bool IsChecked
+	{
+		get => _isSelected && ChipSet?.Filter == true;
+	}
+
+	/// <summary>
+	/// If true, force browser to redirect outside component router-space.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Chip.ClickAction)]
+	public bool ForceLoad { get; set; }
+
+	/// <summary>
+	/// If true, this chip is selected by default if used in a ChipSet. 
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Chip.Behavior)]
+	public bool? Default { get; set; }
+
+	/// <summary>
+	/// A string you want to associate with the chip. If the ChildContent is not set this will be shown as chip text.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Chip.Behavior)]
+	public string Text { get; set; }
+
+	/// <summary>
+	/// A value that should be managed in the SelectedValues collection.
+	/// Note: do not change the value during the chip's lifetime
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Chip.Behavior)]
+	public object Value { get; set; }
+
+	/// <summary>
+	/// Avatar Glyph, Overrides the regular Glyph if set.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Chip.Behavior)]
+	public string Avatar { get; set; }
+
+
+
+	/// <summary>
+	/// If true, the chip will be displayed in disabled state and no events possible.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Chip.Behavior)]
+	public bool Disabled { get; set; }
+
+	/// <summary>
+	/// Sets the Glyph to use.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Chip.Behavior)]
+	public string Icon { get; set; }
+
+
+
 	/// <summary>
 	/// Child content of component.
 	/// </summary>
@@ -168,101 +321,9 @@ public partial class Chip : UIComponent, IDisposable
 		get => Href;
 		set => Href = value;
 	}
+	#endregion
 
-	/// <summary>
+	#region Lifecycle
-	/// If set to a URL, clicking the button will open the referenced document. Use Target to specify where
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Chip.ClickAction)]
-	public string Href { get; set; }
-
-	/// <summary>
-	/// The target attribute specifies where to open the link, if Href is specified. Possible values: _blank | _self | _parent | _top | <i>framename</i>
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Chip.ClickAction)]
-	public string Target { get; set; }
-
-	/// <summary>
-	/// A string you want to associate with the chip. If the ChildContent is not set this will be shown as chip text.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Chip.Behavior)]
-	public string Text { get; set; }
-
-	/// <summary>
-	/// A value that should be managed in the SelectedValues collection.
-	/// Note: do not change the value during the chip's lifetime
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Chip.Behavior)]
-	public object Value { get; set; }
-
-	/// <summary>
-	/// If true, force browser to redirect outside component router-space.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Chip.ClickAction)]
-	public bool ForceLoad { get; set; }
-
-	/// <summary>
-	/// If true, this chip is selected by default if used in a ChipSet. 
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Chip.Behavior)]
-	public bool? Default { get; set; }
-
-	/// <summary>
-	/// Command executed when the user clicks on an element.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Chip.ClickAction)]
-	public ICommand Command { get; set; }
-
-	/// <summary>
-	/// Command parameter.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Chip.ClickAction)]
-	public object CommandParameter { get; set; }
-
-	/// <summary>
-	/// Chip click event, if set the chip focus, hover and click effects are applied.
-	/// </summary>
-	[Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
-
-	/// <summary>
-	/// Chip delete event, if set the delete icon will be visible.
-	/// </summary>
-	[Parameter] public EventCallback<Chip> OnClose { get; set; }
-
-	/// <summary>
-	/// Set by MudChipSet
-	/// </summary>
-	public bool IsChecked
-	{
-		get => _isSelected && ChipSet?.Filter == true;
-	}
-
-	/// <summary>
-	/// If false, this chip has not been seen before
-	/// </summary>
-	public bool DefaultProcessed { get; set; }
-
-	/// <summary>
-	/// Set by MudChipSet
-	/// </summary>
-	public bool IsSelected
-	{
-		get => _isSelected;
-		set
-		{
-			if (_isSelected == value)
-				return;
-			_isSelected = value;
-			StateHasChanged();
-		}
-	}
 
 	protected override void OnInitialized()
 	{
@@ -271,53 +332,12 @@ public partial class Chip : UIComponent, IDisposable
 			Value = this;
 	}
 
-	protected internal async Task OnClickHandler(MouseEventArgs ev)
-	{
-		if (ChipSet?.ReadOnly == true)
-		{
-			return;
-		}
-		if (ChipSet != null)
-		{
-			_ = ChipSet.OnChipClicked(this);
-		}
-		if (Href != null)
-		{
-			// TODO: use MudElement to render <a> and this code can be removed. we know that it has potential problems on iOS
-			if (string.IsNullOrWhiteSpace(Target))
-				UriHelper.NavigateTo(Href, ForceLoad);
-			else
-				await JsApiService.Open(Href, Target);
-		}
-		else
-		{
-			await OnClick.InvokeAsync(ev);
-			if (Command?.CanExecute(CommandParameter) ?? false)
-			{
-				Command.Execute(CommandParameter);
-			}
-		}
-	}
-
-	protected async Task OnCloseHandler(MouseEventArgs ev)
-	{
-		if (ChipSet?.ReadOnly == true)
-		{
-			return;
-		}
-		await OnClose.InvokeAsync(this);
-		ChipSet?.OnChipDeleted(this);
-		StateHasChanged();
-	}
-
 	protected override Task OnInitializedAsync()
 	{
 		ChipSet?.Add(this);
 		return base.OnInitializedAsync();
 	}
 
-	internal void ForceRerender() => StateHasChanged();
-
 	//Exclude because we don't test to catching exception yet
 	[ExcludeFromCodeCoverage]
 	public void Dispose()
@@ -331,5 +351,5 @@ public partial class Chip : UIComponent, IDisposable
 			/* ignore! */
 		}
 	}
-
+	#endregion
 }

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

@@ -6,337 +6,344 @@ namespace Connected.Components;
 
 public partial class ChipSet : UIComponent, IDisposable
 {
+	#region Variables
+	private IEqualityComparer<object> _comparer;
+	private HashSet<object> _selectedValues;
+	private HashSet<object> _initialSelectedValues;
+	private HashSet<Chip> _chips = new();
+	private bool _filter;
+	private bool _disposed;
+	#endregion
 
-   protected string Classname =>
+	#region Events
-   new CssBuilder("chipset")
+	/// <summary>
-     .AddClass(AdditionalClassList)
+	/// Called when the selected chip changes, in Choice mode
-   .Build();
+	/// </summary>
+	[Parameter]
+	public EventCallback<Chip> SelectedChipChanged { get; set; }
+	/// <summary>
+	/// Called when the selection changed, in Filter mode
+	/// </summary>
+	[Parameter]
+	public EventCallback<Chip[]> SelectedChipsChanged { get; set; }
 
-   /// <summary>
+	/// <summary>
-   /// Child content of component.
+	/// The current selected value.
-   /// </summary>
+	/// Note: make the list Clickable for item selection to work.
-   [Parameter]
+	/// </summary>
-   [Category(CategoryTypes.ChipSet.Behavior)]
+	[Parameter]
-   public RenderFragment ChildContent { get; set; }
+	[Category(CategoryTypes.ChipSet.Behavior)]
+	public ICollection<object> SelectedValues
+	{
+		get => _selectedValues;
+		set
+		{
+			if (value == null)
+				SetSelectedValues(new object[0]);
+			else
+				SetSelectedValues(value.ToArray()).AndForget();
+		}
+	}
 
-   /// <summary>
+	/// <summary>
-   /// Allows to select more than one chip.
+	/// Called whenever the selection changed
-   /// </summary>
+	/// </summary>
-   [Parameter]
+	[Parameter] public EventCallback<ICollection<object>> SelectedValuesChanged { get; set; }
-   [Category(CategoryTypes.ChipSet.Behavior)]
+	internal Task SetSelectedValues(object[] values)
-   public bool MultiSelection { get; set; } = false;
+	{
+		HashSet<object> newValues = null;
+		if (values == null)
+			values = new object[0];
+		if (MultiSelection)
+			newValues = new HashSet<object>(values, _comparer);
+		else
+		{
+			newValues = new HashSet<object>(_comparer);
+			if (values.Length > 0)
+				newValues.Add(values.First());
+		}
+		// avoid update with same values
+		if (_selectedValues.IsEqualTo(newValues))
+			return Task.CompletedTask;
+		_selectedValues = newValues;
+		foreach (var chip in _chips.ToArray())
+		{
+			var isSelected = _selectedValues.Contains(chip.Value);
+			chip.IsSelected = isSelected;
+		}
+		return NotifySelection();
+	}
 
-   /// <summary>
+	/// <summary>
-   /// Will not allow to deselect the selected chip in single selection mode.
+	/// Called when a Chip was deleted (by click on the close icon)
-   /// </summary>
+	/// </summary>
-   [Parameter]
+	[Parameter]
-   [Category(CategoryTypes.ChipSet.Behavior)]
+	public EventCallback<Chip> OnClose { get; set; }
-   public bool Mandatory { get; set; } = false;
+	internal Task Add(Chip chip)
+	{
+		_chips.Add(chip);
+		if (_selectedValues.Contains(chip.Value))
+			chip.IsSelected = true;
+		return CheckDefault(chip);
+	}
 
-   /// <summary>
+	internal void Remove(Chip chip)
-   /// Will make all chips closable.
+	{
-   /// </summary>
+		_chips.Remove(chip);
-   [Parameter]
+		if (chip.IsSelected)
-   [Category(CategoryTypes.ChipSet.Behavior)]
+		{
-   public bool AllClosable { get; set; } = false;
+			_selectedValues.Remove(chip.Value);
+			NotifySelection().AndForget();
+		}
+	}
 
-   /// <summary>
+	private async Task CheckDefault(Chip chip)
-   ///  Will show a check-mark for the selected components.
+	{
-   /// </summary>
+		if (!MultiSelection)
-   [Parameter]
+			return;
-   [Category(CategoryTypes.ChipSet.Appearance)]
+		if (chip.DefaultProcessed)
-   public bool Filter
+			return;
-   {
+		chip.DefaultProcessed = true;
-      get => _filter;
+		if (chip.Default == null)
-      set
+			return;
-      {
+		var oldSelected = chip.IsSelected;
-         if (_filter == value)
+		chip.IsSelected = chip.Default == true;
-            return;
+		if (chip.IsSelected != oldSelected)
-         _filter = value;
+		{
-         StateHasChanged();
+			if (chip.IsSelected)
-         foreach (var chip in _chips)
+				_selectedValues.Add(chip.Value);
-            chip.ForceRerender();
+			else
-      }
+				_selectedValues.Remove(chip.Value);
-   }
+			await NotifySelection();
+		}
+	}
 
-   /// <summary>
+	internal Task OnChipClicked(Chip chip)
-   ///  Will make all chips read only.
+	{
-   /// </summary>
+		var wasSelected = chip.IsSelected;
-   [Parameter]
+		if (MultiSelection)
-   [Category(CategoryTypes.ChipSet.Behavior)]
+		{
-   public bool ReadOnly { get; set; } = false;
+			chip.IsSelected = !chip.IsSelected;
+		}
+		else
+		{
+			foreach (var ch in _chips)
+			{
+				ch.IsSelected = (ch == chip); // <-- exclusively select the one chip only, thus all others must be deselected
+			}
+			if (!Mandatory)
+				chip.IsSelected = !wasSelected;
+		}
+		UpdateSelectedValues();
+		return NotifySelection();
+	}
 
-   /// <summary>
+	private void UpdateSelectedValues()
-   /// The currently selected chip in Choice mode
+	{
-   /// </summary>
+		_selectedValues = new HashSet<object>(_chips.Where(x => x.IsSelected).Select(x => x.Value), _comparer);
-   [Parameter]
+	}
-   [Category(CategoryTypes.ChipSet.Behavior)]
-   public Chip SelectedChip
-   {
-      get { return _chips.OfType<Chip>().FirstOrDefault(x => x.IsSelected); }
-      set
-      {
-         if (value == null)
-         {
-            foreach (var chip in _chips)
-            {
-               chip.IsSelected = false;
-            }
-         }
-         else
-         {
-            foreach (var chip in _chips)
-            {
-               chip.IsSelected = (chip == value);
-            }
-         }
-         this.InvokeAsync(StateHasChanged);
-      }
-   }
 
-   /// <summary>
+	private object[] _lastSelectedValues = null;
-   /// Called when the selected chip changes, in Choice mode
-   /// </summary>
-   [Parameter]
-   public EventCallback<Chip> SelectedChipChanged { get; set; }
 
-   /// <summary>
+	private async Task NotifySelection()
-   /// The currently selected chips in Filter mode
+	{
-   /// </summary>
+		if (_disposed)
-   [Parameter]
+			return;
-   [Category(CategoryTypes.ChipSet.Behavior)]
+		// to avoid endless notification loops we check if selection has really changed
-   public Chip[] SelectedChips
+		if (_selectedValues.IsEqualTo(_lastSelectedValues))
-   {
+			return;
-      get { return _chips.OfType<Chip>().Where(x => x.IsSelected).ToArray(); }
+		_lastSelectedValues = _selectedValues.ToArray();
-      set
+		await SelectedChipChanged.InvokeAsync(SelectedChip);
-      {
+		await SelectedChipsChanged.InvokeAsync(SelectedChips);
-         if (value == null || value.Length == 0)
+		await SelectedValuesChanged.InvokeAsync(SelectedValues);
-         {
+		StateHasChanged();
-            foreach (var chip in _chips)
+	}
-            {
-               chip.IsSelected = false;
-            }
-         }
-         else
-         {
-            var selected = new HashSet<Chip>(value);
-            foreach (var chip in _chips)
-            {
-               chip.IsSelected = selected.Contains(chip);
-            }
-         }
-         StateHasChanged();
-      }
-   }
 
-   protected override void OnInitialized()
+	public void OnChipDeleted(Chip chip)
-   {
+	{
-      base.OnInitialized();
+		Remove(chip);
-      if (_selectedValues == null)
+		OnClose.InvokeAsync(chip);
-         _selectedValues = new HashSet<object>(_comparer);
+	}
-      _initialSelectedValues = new HashSet<object>(_selectedValues, _comparer);
-   }
 
-   private IEqualityComparer<object> _comparer;
-   private HashSet<object> _selectedValues;
-   private HashSet<object> _initialSelectedValues;
 
-   /// <summary>
-   /// The Comparer to use for comparing selected values internally.
-   /// </summary>
-   [Parameter]
-   [Category(CategoryTypes.ChipSet.Behavior)]
-   public IEqualityComparer<object> Comparer
-   {
-      get => _comparer;
-      set
-      {
-         _comparer = value;
-         // Apply comparer and refresh selected values
-         _selectedValues = new HashSet<object>(_selectedValues, _comparer);
-         SelectedValues = _selectedValues;
-      }
-   }
 
-   /// <summary>
+	private async Task SelectDefaultChips()
-   /// Called when the selection changed, in Filter mode
+	{
-   /// </summary>
+		if (!MultiSelection)
-   [Parameter]
+		{
-   public EventCallback<Chip[]> SelectedChipsChanged { get; set; }
+			var anySelected = false;
+			var defaultChip = _chips.LastOrDefault(chip => chip.Default == true);
+			if (defaultChip != null)
+			{
+				defaultChip.IsSelected = true;
+				anySelected = true;
+			}
+			if (anySelected)
+			{
+				UpdateSelectedValues();
+				await NotifySelection();
+			}
+		}
+	}
+	#endregion
 
-   /// <summary>
+	#region Content
-   /// The current selected value.
+	/// <summary>
-   /// Note: make the list Clickable for item selection to work.
+	/// Child content of component.
-   /// </summary>
+	/// </summary>
-   [Parameter]
+	[Parameter]
-   [Category(CategoryTypes.ChipSet.Behavior)]
+	[Category(CategoryTypes.ChipSet.Behavior)]
-   public ICollection<object> SelectedValues
+	public RenderFragment ChildContent { get; set; }
-   {
-      get => _selectedValues;
-      set
-      {
-         if (value == null)
-            SetSelectedValues(new object[0]);
-         else
-            SetSelectedValues(value.ToArray()).AndForget();
-      }
-   }
 
-   /// <summary>
+	/// <summary>
-   /// Called whenever the selection changed
+	/// The currently selected chip in Choice mode
-   /// </summary>
+	/// </summary>
-   [Parameter] public EventCallback<ICollection<object>> SelectedValuesChanged { get; set; }
+	[Parameter]
+	[Category(CategoryTypes.ChipSet.Behavior)]
+	public Chip SelectedChip
+	{
+		get { return _chips.OfType<Chip>().FirstOrDefault(x => x.IsSelected); }
+		set
+		{
+			if (value == null)
+			{
+				foreach (var chip in _chips)
+				{
+					chip.IsSelected = false;
+				}
+			}
+			else
+			{
+				foreach (var chip in _chips)
+				{
+					chip.IsSelected = (chip == value);
+				}
+			}
+			this.InvokeAsync(StateHasChanged);
+		}
+	}
 
-   internal Task SetSelectedValues(object[] values)
+	/// <summary>
-   {
+	/// The currently selected chips in Filter mode
-      HashSet<object> newValues = null;
+	/// </summary>
-      if (values == null)
+	[Parameter]
-         values = new object[0];
+	[Category(CategoryTypes.ChipSet.Behavior)]
-      if (MultiSelection)
+	public Chip[] SelectedChips
-         newValues = new HashSet<object>(values, _comparer);
+	{
-      else
+		get { return _chips.OfType<Chip>().Where(x => x.IsSelected).ToArray(); }
-      {
+		set
-         newValues = new HashSet<object>(_comparer);
+		{
-         if (values.Length > 0)
+			if (value == null || value.Length == 0)
-            newValues.Add(values.First());
+			{
-      }
+				foreach (var chip in _chips)
-      // avoid update with same values
+				{
-      if (_selectedValues.IsEqualTo(newValues))
+					chip.IsSelected = false;
-         return Task.CompletedTask;
+				}
-      _selectedValues = newValues;
+			}
-      foreach (var chip in _chips.ToArray())
+			else
-      {
+			{
-         var isSelected = _selectedValues.Contains(chip.Value);
+				var selected = new HashSet<Chip>(value);
-         chip.IsSelected = isSelected;
+				foreach (var chip in _chips)
-      }
+				{
-      return NotifySelection();
+					chip.IsSelected = selected.Contains(chip);
-   }
+				}
+			}
+			StateHasChanged();
+		}
+	}
 
-   /// <summary>
+	#endregion
-   /// Called when a Chip was deleted (by click on the close icon)
-   /// </summary>
-   [Parameter]
-   public EventCallback<Chip> OnClose { get; set; }
 
-   internal Task Add(Chip chip)
+	#region Styling
-   {
+	protected string Classname =>
-      _chips.Add(chip);
+	new CssBuilder("chipset")
-      if (_selectedValues.Contains(chip.Value))
+	  .AddClass(AdditionalClassList)
-         chip.IsSelected = true;
+	.Build();
-      return CheckDefault(chip);
+	#endregion
-   }
 
-   internal void Remove(Chip chip)
+	#region Behavior
-   {
+	/// <summary>
-      _chips.Remove(chip);
+	/// The Comparer to use for comparing selected values internally.
-      if (chip.IsSelected)
+	/// </summary>
-      {
+	[Parameter]
-         _selectedValues.Remove(chip.Value);
+	[Category(CategoryTypes.ChipSet.Behavior)]
-         NotifySelection().AndForget();
+	public IEqualityComparer<object> Comparer
-      }
+	{
-   }
+		get => _comparer;
+		set
+		{
+			_comparer = value;
+			// Apply comparer and refresh selected values
+			_selectedValues = new HashSet<object>(_selectedValues, _comparer);
+			SelectedValues = _selectedValues;
+		}
+	}
+	/// <summary>
+	///  Will make all chips read only.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.ChipSet.Behavior)]
+	public bool ReadOnly { get; set; } = false;
 
-   private async Task CheckDefault(Chip chip)
+	/// <summary>
-   {
+	/// Allows to select more than one chip.
-      if (!MultiSelection)
+	/// </summary>
-         return;
+	[Parameter]
-      if (chip.DefaultProcessed)
+	[Category(CategoryTypes.ChipSet.Behavior)]
-         return;
+	public bool MultiSelection { get; set; } = false;
-      chip.DefaultProcessed = true;
-      if (chip.Default == null)
-         return;
-      var oldSelected = chip.IsSelected;
-      chip.IsSelected = chip.Default == true;
-      if (chip.IsSelected != oldSelected)
-      {
-         if (chip.IsSelected)
-            _selectedValues.Add(chip.Value);
-         else
-            _selectedValues.Remove(chip.Value);
-         await NotifySelection();
-      }
-   }
 
-   private HashSet<Chip> _chips = new();
+	/// <summary>
-   private bool _filter;
+	/// Will not allow to deselect the selected chip in single selection mode.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.ChipSet.Behavior)]
+	public bool Mandatory { get; set; } = false;
 
-   internal Task OnChipClicked(Chip chip)
+	/// <summary>
-   {
+	/// Will make all chips closable.
-      var wasSelected = chip.IsSelected;
+	/// </summary>
-      if (MultiSelection)
+	[Parameter]
-      {
+	[Category(CategoryTypes.ChipSet.Behavior)]
-         chip.IsSelected = !chip.IsSelected;
+	public bool AllClosable { get; set; } = false;
-      }
-      else
-      {
-         foreach (var ch in _chips)
-         {
-            ch.IsSelected = (ch == chip); // <-- exclusively select the one chip only, thus all others must be deselected
-         }
-         if (!Mandatory)
-            chip.IsSelected = !wasSelected;
-      }
-      UpdateSelectedValues();
-      return NotifySelection();
-   }
 
-   private void UpdateSelectedValues()
+	/// <summary>
-   {
+	///  Will show a check-mark for the selected components.
-      _selectedValues = new HashSet<object>(_chips.Where(x => x.IsSelected).Select(x => x.Value), _comparer);
+	/// </summary>
-   }
+	[Parameter]
+	[Category(CategoryTypes.ChipSet.Appearance)]
+	public bool Filter
+	{
+		get => _filter;
+		set
+		{
+			if (_filter == value)
+				return;
+			_filter = value;
+			StateHasChanged();
+			foreach (var chip in _chips)
+				chip.ForceRerender();
+		}
+	}
+	#endregion
 
-   private object[] _lastSelectedValues = null;
+	#region Lifecycle
+	public void Dispose()
+	{
+		_disposed = true;
+	}
+	protected override void OnInitialized()
+	{
+		base.OnInitialized();
+		if (_selectedValues == null)
+			_selectedValues = new HashSet<object>(_comparer);
+		_initialSelectedValues = new HashSet<object>(_selectedValues, _comparer);
+	}
+	protected override async void OnAfterRender(bool firstRender)
+	{
+		if (firstRender)
+			await SelectDefaultChips();
+		base.OnAfterRender(firstRender);
+	}
+	#endregion
 
-   private async Task NotifySelection()
-   {
-      if (_disposed)
-         return;
-      // to avoid endless notification loops we check if selection has really changed
-      if (_selectedValues.IsEqualTo(_lastSelectedValues))
-         return;
-      _lastSelectedValues = _selectedValues.ToArray();
-      await SelectedChipChanged.InvokeAsync(SelectedChip);
-      await SelectedChipsChanged.InvokeAsync(SelectedChips);
-      await SelectedValuesChanged.InvokeAsync(SelectedValues);
-      StateHasChanged();
-   }
-
-   public void OnChipDeleted(Chip chip)
-   {
-      Remove(chip);
-      OnClose.InvokeAsync(chip);
-   }
-
-   protected override async void OnAfterRender(bool firstRender)
-   {
-      if (firstRender)
-         await SelectDefaultChips();
-      base.OnAfterRender(firstRender);
-   }
-
-   private async Task SelectDefaultChips()
-   {
-      if (!MultiSelection)
-      {
-         var anySelected = false;
-         var defaultChip = _chips.LastOrDefault(chip => chip.Default == true);
-         if (defaultChip != null)
-         {
-            defaultChip.IsSelected = true;
-            anySelected = true;
-         }
-         if (anySelected)
-         {
-            UpdateSelectedValues();
-            await NotifySelection();
-         }
-      }
-   }
-
-   private bool _disposed;
-
-   public void Dispose()
-   {
-      _disposed = true;
-   }
 }

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

@@ -7,6 +7,7 @@ namespace Connected.Components;
 
 public partial class Collapse : UIComponent
 {
+	#region Variables
 	internal enum CollapseState
 	{
 		Entering, Entered, Exiting, Exited
@@ -16,7 +17,58 @@ public partial class Collapse : UIComponent
 	private bool _expanded, _isRendered, _updateHeight;
 	private ElementReference _wrapper;
 	internal CollapseState _state = CollapseState.Exited;
+	#endregion
 
+	#region Events
+	[Parameter] public EventCallback OnAnimationEnd { get; set; }
+
+	[Parameter] public EventCallback<bool> ExpandedChanged { get; set; }
+
+	internal async Task UpdateHeight()
+	{
+		try
+		{
+			_height = (await _wrapper.MudGetBoundingClientRectAsync())?.Height ?? 0;
+		}
+		catch (Exception ex) when (ex is JSDisconnectedException || ex is TaskCanceledException)
+		{
+			_height = 0;
+		}
+
+		if (MaxHeight != null && _height > MaxHeight)
+		{
+			_height = MaxHeight.Value;
+		}
+	}
+
+
+
+	public void AnimationEnd()
+	{
+		if (_state == CollapseState.Entering)
+		{
+			_state = CollapseState.Entered;
+			StateHasChanged();
+		}
+		else if (_state == CollapseState.Exiting)
+		{
+			_state = CollapseState.Exited;
+			StateHasChanged();
+		}
+		OnAnimationEnd.InvokeAsync(Expanded);
+	}
+	#endregion
+
+	#region Content
+	/// <summary>
+	/// Child content of component.
+	/// </summary>
+	[Parameter] public RenderFragment ChildContent { get; set; }
+
+
+	#endregion
+
+	#region Styling
 	protected string Stylename =>
 		new StyleBuilder()
 		.AddStyle("max-height", MaxHeight.ToPx(), MaxHeight != null)
@@ -66,15 +118,6 @@ public partial class Collapse : UIComponent
 	/// </summary>
 	[Parameter] public int? MaxHeight { get; set; }
 
-	/// <summary>
-	/// Child content of component.
-	/// </summary>
-	[Parameter] public RenderFragment ChildContent { get; set; }
-
-	[Parameter] public EventCallback OnAnimationEnd { get; set; }
-
-	[Parameter] public EventCallback<bool> ExpandedChanged { get; set; }
-
 	/// <summary>
 	/// Modified Animation duration that scales with height parameter.
 	/// Basic implementation for now but should be a math formula to allow it to scale between 0.1s and 1s for the effect to be consistently smooth.
@@ -95,23 +138,9 @@ public partial class Collapse : UIComponent
 		set { }
 	}
 
-	internal async Task UpdateHeight()
+	#endregion
-	{
-		try
-		{
-			_height = (await _wrapper.MudGetBoundingClientRectAsync())?.Height ?? 0;
-		}
-		catch (Exception ex) when (ex is JSDisconnectedException || ex is TaskCanceledException)
-		{
-			_height = 0;
-		}
-
-		if (MaxHeight != null && _height > MaxHeight)
-		{
-			_height = MaxHeight.Value;
-		}
-	}
 
+	#region Lifecycle
 	protected override async Task OnAfterRenderAsync(bool firstRender)
 	{
 		if (firstRender)
@@ -127,19 +156,6 @@ public partial class Collapse : UIComponent
 		}
 		await base.OnAfterRenderAsync(firstRender);
 	}
+	#endregion
 
-	public void AnimationEnd()
+}
-	{
-		if (_state == CollapseState.Entering)
-		{
-			_state = CollapseState.Entered;
-			StateHasChanged();
-		}
-		else if (_state == CollapseState.Exiting)
-		{
-			_state = CollapseState.Exited;
-			StateHasChanged();
-		}
-		OnAnimationEnd.InvokeAsync(Expanded);
-	}
-}

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

@@ -5,9 +5,6 @@ namespace Connected.Components;
 public partial class Container : UIComponent
 {
 
-	#region Event callbacks
-	#endregion
-
 	#region Content placeholders
 
 	/// <summary>

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

@@ -8,223 +8,100 @@ namespace Connected.Components;
 
 public abstract partial class DatePickerBase : Picker<DateTime?>
 {
+	#region Variables
 	private bool _dateFormatTouched;
-
-	protected DatePickerBase() : base(new DefaultConverter<DateTime?>
-	{
-		Format = CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern,
-		Culture = CultureInfo.CurrentCulture
-	})
-	{
-		AdornmentAriaLabel = "Open Date Picker";
-	}
-
-	[Inject] protected IScrollManager ScrollManager { get; set; }
-
-	/// <summary>
-	/// Max selectable date.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.Validation)]
-	public DateTime? MaxDate { get; set; }
-
-	/// <summary>
-	/// Min selectable date.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.Validation)]
-	public DateTime? MinDate { get; set; }
-
-	/// <summary>
-	/// First view to show in the MudDatePicker.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.PickerBehavior)]
-	public OpenTo OpenTo { get; set; } = OpenTo.Date;
-
-	/// <summary>
-	/// String Format for selected date view
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.Behavior)]
-	public string DateFormat
-	{
-		get
-		{
-			return (Converter as DefaultConverter<DateTime?>)?.Format;
-		}
-		set
-		{
-			if (Converter is DefaultConverter<DateTime?> defaultConverter)
-			{
-				defaultConverter.Format = value;
-				_dateFormatTouched = true;
-			}
-			DateFormatChanged(value);
-		}
-	}
-
-	/// <summary>
-	/// Date format value change hook for descendants.
-	/// </summary>
-	protected virtual Task DateFormatChanged(string newFormat)
-	{
-		return Task.CompletedTask;
-	}
-
-	protected override bool SetCulture(CultureInfo value)
-	{
-		if (!base.SetCulture(value))
-			return false;
-
-		if (!_dateFormatTouched && Converter is DefaultConverter<DateTime?> defaultConverter)
-			defaultConverter.Format = value.DateTimeFormat.ShortDatePattern;
-
-		return true;
-	}
-
-	/// <summary>
-	/// Defines on which day the week starts. Depends on the value of Culture. 
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.PickerBehavior)]
-	public DayOfWeek? FirstDayOfWeek { get; set; } = null;
-
-	/// <summary>
-	/// The current month of the date picker (two-way bindable). This changes when the user browses through the calender.
-	/// The month is represented as a DateTime which is always the first day of that month. You can also set this to define which month is initially shown. If not set, the current month is shown.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.PickerBehavior)]
-	public DateTime? PickerMonth
-	{
-		get => _picker_month;
-		set
-		{
-			if (value == _picker_month)
-				return;
-			_picker_month = value;
-			InvokeAsync(StateHasChanged);
-			PickerMonthChanged.InvokeAsync(value);
-		}
-	}
-
 	private DateTime? _picker_month;
-
-	/// <summary>
-	/// Fired when the date changes.
-	/// </summary>
-	[Parameter] public EventCallback<DateTime?> PickerMonthChanged { get; set; }
-
-	/// <summary>
-	/// Sets the amount of time in milliseconds to wait before closing the picker. This helps the user see that the date was selected before the popover disappears.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.PickerBehavior)]
-	public int ClosingDelay { get; set; } = 100;
-
-	/// <summary>
-	/// Number of months to display in the calendar
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.PickerBehavior)]
-	public int DisplayMonths { get; set; } = 1;
-
-	/// <summary>
-	/// Maximum number of months in one row
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.PickerAppearance)]
-	public int? MaxMonthColumns { get; set; }
-
-	/// <summary>
-	/// Start month when opening the picker. 
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.PickerBehavior)]
-	public DateTime? StartMonth { get; set; }
-
-	/// <summary>
-	/// Display week numbers according to the Culture parameter. If no culture is defined, CultureInfo.CurrentCulture will be used.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.PickerBehavior)]
-	public bool ShowWeekNumbers { get; set; }
-
-	/// <summary>
-	/// Format of the selected date in the title. By default, this is "ddd, dd MMM" which abbreviates day and month names. 
-	/// For instance, display the long names like this "dddd, dd. MMMM". 
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.PickerBehavior)]
-	public string TitleDateFormat { get; set; } = "ddd, dd MMM";
-
-	/// <summary>
-	/// If AutoClose is set to true and PickerActions are defined, selecting a day will close the MudDatePicker.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.PickerBehavior)]
-	public bool AutoClose { get; set; }
-
-	/// <summary>
-	/// Function to determine whether a date is disabled
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.Validation)]
-	public Func<DateTime, bool> IsDateDisabledFunc
-	{
-		get => _isDateDisabledFunc;
-		set
-		{
-			_isDateDisabledFunc = value ?? (_ => false);
-		}
-	}
-	private Func<DateTime, bool> _isDateDisabledFunc = _ => false;
-
-	/// <summary>
-	/// Function to conditionally apply new classes to specific days
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.Appearance)]
-	public Func<DateTime, string> AdditionalDateClassesFunc { get; set; }
-
-	/// <summary>
-	/// Custom previous icon.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.PickerAppearance)]
-	public string PreviousIcon { get; set; } = Icons.Material.Filled.ChevronLeft;
-
-	/// <summary>
-	/// Custom next icon.
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.PickerAppearance)]
-	public string NextIcon { get; set; } = Icons.Material.Filled.ChevronRight;
-
-	/// <summary>
-	/// Set a predefined fix year - no year can be selected
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.PickerBehavior)]
-	public int? FixYear { get; set; }
-	/// <summary>
-	/// Set a predefined fix month - no month can be selected
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.PickerBehavior)]
-	public int? FixMonth { get; set; }
-	/// <summary>
-	/// Set a predefined fix day - no day can be selected
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.FormComponent.PickerBehavior)]
-	public int? FixDay { get; set; }
-
 	protected virtual bool IsRange { get; } = false;
-
 	protected OpenTo CurrentView;
+	/// <summary>
+	/// We need a random id for the year items in the year list so we can scroll to the item safely in every DatePicker.
+	/// </summary>
+	private string _componentId = Guid.NewGuid().ToString();
 
+	/// <summary>
+	/// Is set to true to scroll to the actual year after the next render
+	/// </summary>
+	private bool _scrollToYearAfterRender = false;
+	#endregion
+
+	#region Events
+	private Typo GetMonthTypo(DateTime month)
+	{
+		if (GetMonthStart(0) == month)
+			return Typo.h5;
+		return Typo.subtitle1;
+	}
+
+	protected abstract DateTime GetCalendarStartOfMonth();
+
+	private int GetCalendarDayOfMonth(DateTime date)
+	{
+		return Culture.Calendar.GetDayOfMonth(date);
+	}
+
+	/// <summary>
+	/// Converts gregorian year into whatever year it is in the provided culture
+	/// </summary>
+	/// <param name="year">Gregorian year</param>
+	/// <returns>Year according to culture</returns>
+	protected abstract int GetCalendarYear(int year);
+	public async void ScrollToYear()
+	{
+		_scrollToYearAfterRender = false;
+		var id = $"{_componentId}{GetMonthStart(0).Year}";
+		await ScrollManager.ScrollToYearAsync(id);
+		StateHasChanged();
+	}
+
+	private int GetMinYear()
+	{
+		if (MinDate.HasValue)
+			return MinDate.Value.Year;
+		return DateTime.Today.Year - 100;
+	}
+
+	private int GetMaxYear()
+	{
+		if (MaxDate.HasValue)
+			return MaxDate.Value.Year;
+		return DateTime.Today.Year + 100;
+	}
+
+
+
+	private Typo GetYearTypo(int year)
+	{
+		if (year == GetMonthStart(0).Year)
+			return Typo.h5;
+		return Typo.subtitle1;
+	}
+
+	private void OnFormattedDateClick()
+	{
+		// todo: raise an event the user can handle
+	}
+
+
+	private IEnumerable<DateTime> GetAllMonths()
+	{
+		var current = GetMonthStart(0);
+		var calendarYear = Culture.Calendar.GetYear(current);
+		var firstOfCalendarYear = Culture.Calendar.ToDateTime(calendarYear, 1, 1, 0, 0, 0, 0);
+		for (var i = 0; i < Culture.Calendar.GetMonthsInYear(calendarYear); i++)
+			yield return Culture.Calendar.AddMonths(firstOfCalendarYear, i);
+	}
+
+	private string GetAbbreviatedMonthName(DateTime month)
+	{
+		var calendarMonth = Culture.Calendar.GetMonth(month);
+		return Culture.DateTimeFormat.AbbreviatedMonthNames[calendarMonth - 1];
+	}
+
+	private string GetMonthName(DateTime month)
+	{
+		var calendarMonth = Culture.Calendar.GetMonth(month);
+		return Culture.DateTimeFormat.MonthNames[calendarMonth - 1];
+	}
 	protected override void OnPickerOpened()
 	{
 		base.OnPickerOpened();
@@ -461,39 +338,73 @@ public abstract partial class DatePickerBase : Picker<DateTime?>
 			_scrollToYearAfterRender = true;
 		}
 	}
+	/// <summary>
+	/// Date format value change hook for descendants.
+	/// </summary>
+	protected virtual Task DateFormatChanged(string newFormat)
+	{
+		return Task.CompletedTask;
+	}
+
+	protected override bool SetCulture(CultureInfo value)
+	{
+		if (!base.SetCulture(value))
+			return false;
+
+		if (!_dateFormatTouched && Converter is DefaultConverter<DateTime?> defaultConverter)
+			defaultConverter.Format = value.DateTimeFormat.ShortDatePattern;
+
+		return true;
+	}
+	/// <summary>
+	/// Fired when the date changes.
+	/// </summary>
+	[Parameter] public EventCallback<DateTime?> PickerMonthChanged { get; set; }
+
+	#endregion
+
+	#region Content
+	[Inject] protected IScrollManager ScrollManager { get; set; }
+	/// <summary>
+	/// Defines on which day the week starts. Depends on the value of Culture. 
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.PickerBehavior)]
+	public DayOfWeek? FirstDayOfWeek { get; set; } = null;
 
 	/// <summary>
-	/// We need a random id for the year items in the year list so we can scroll to the item safely in every DatePicker.
+	/// The current month of the date picker (two-way bindable). This changes when the user browses through the calender.
+	/// The month is represented as a DateTime which is always the first day of that month. You can also set this to define which month is initially shown. If not set, the current month is shown.
 	/// </summary>
-	private string _componentId = Guid.NewGuid().ToString();
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.PickerBehavior)]
+	public DateTime? PickerMonth
+	{
+		get => _picker_month;
+		set
+		{
+			if (value == _picker_month)
+				return;
+			_picker_month = value;
+			InvokeAsync(StateHasChanged);
+			PickerMonthChanged.InvokeAsync(value);
+		}
+	}
+	#endregion
 
+	#region Styling
+	private string GetMonthClasses(DateTime month)
+	{
+		if (GetMonthStart(0) == month)
+			return $"picker-month-selected mud-{Color.ToDescription()}-text";
+		return null;
+	}
 	/// <summary>
-	/// Is set to true to scroll to the actual year after the next render
+	/// Function to conditionally apply new classes to specific days
 	/// </summary>
-	private bool _scrollToYearAfterRender = false;
+	[Parameter]
-
+	[Category(CategoryTypes.FormComponent.Appearance)]
-	public async void ScrollToYear()
+	public Func<DateTime, string> AdditionalDateClassesFunc { get; set; }
-	{
-		_scrollToYearAfterRender = false;
-		var id = $"{_componentId}{GetMonthStart(0).Year}";
-		await ScrollManager.ScrollToYearAsync(id);
-		StateHasChanged();
-	}
-
-	private int GetMinYear()
-	{
-		if (MinDate.HasValue)
-			return MinDate.Value.Year;
-		return DateTime.Today.Year - 100;
-	}
-
-	private int GetMaxYear()
-	{
-		if (MaxDate.HasValue)
-			return MaxDate.Value.Year;
-		return DateTime.Today.Year + 100;
-	}
-
 	private string GetYearClasses(int year)
 	{
 		if (year == GetMonthStart(0).Year)
@@ -508,57 +419,162 @@ public abstract partial class DatePickerBase : Picker<DateTime?>
 			.AddClass($"picker-calendar-header-last", month == DisplayMonths - 1)
 			.Build();
 	}
+	/// <summary>
+	/// Custom previous icon.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.PickerAppearance)]
+	public string PreviousIcon { get; set; } = Icons.Material.Filled.ChevronLeft;
 
-	private Typo GetYearTypo(int year)
+	/// <summary>
+	/// Custom next icon.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.PickerAppearance)]
+	public string NextIcon { get; set; } = Icons.Material.Filled.ChevronRight;
+
+	
+
+	/// <summary>
+	/// String Format for selected date view
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.Behavior)]
+	public string DateFormat
 	{
-		if (year == GetMonthStart(0).Year)
+		get
-			return Typo.h5;
+		{
-		return Typo.subtitle1;
+			return (Converter as DefaultConverter<DateTime?>)?.Format;
+		}
+		set
+		{
+			if (Converter is DefaultConverter<DateTime?> defaultConverter)
+			{
+				defaultConverter.Format = value;
+				_dateFormatTouched = true;
+			}
+			DateFormatChanged(value);
+		}
 	}
+	#endregion
 
-	private void OnFormattedDateClick()
+	#region Behavior
+	/// <summary>
+	/// Max selectable date.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.Validation)]
+	public DateTime? MaxDate { get; set; }
+
+	/// <summary>
+	/// Min selectable date.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.Validation)]
+	public DateTime? MinDate { get; set; }
+
+	/// <summary>
+	/// First view to show in the DatePicker.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.PickerBehavior)]
+	public OpenTo OpenTo { get; set; } = OpenTo.Date;
+
+	/// <summary>
+	/// Set a predefined fix year - no year can be selected
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.PickerBehavior)]
+	public int? FixYear { get; set; }
+	/// <summary>
+	/// Set a predefined fix month - no month can be selected
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.PickerBehavior)]
+	public int? FixMonth { get; set; }
+	/// <summary>
+	/// Set a predefined fix day - no day can be selected
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.PickerBehavior)]
+	public int? FixDay { get; set; }
+	/// <summary>
+	/// Sets the amount of time in milliseconds to wait before closing the picker. This helps the user see that the date was selected before the popover disappears.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.PickerBehavior)]
+	public int ClosingDelay { get; set; } = 100;
+
+	/// <summary>
+	/// Number of months to display in the calendar
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.PickerBehavior)]
+	public int DisplayMonths { get; set; } = 1;
+
+	/// <summary>
+	/// Maximum number of months in one row
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.PickerAppearance)]
+	public int? MaxMonthColumns { get; set; }
+
+	/// <summary>
+	/// Start month when opening the picker. 
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.PickerBehavior)]
+	public DateTime? StartMonth { get; set; }
+
+	/// <summary>
+	/// Display week numbers according to the Culture parameter. If no culture is defined, CultureInfo.CurrentCulture will be used.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.PickerBehavior)]
+	public bool ShowWeekNumbers { get; set; }
+
+	/// <summary>
+	/// Format of the selected date in the title. By default, this is "ddd, dd MMM" which abbreviates day and month names. 
+	/// For instance, display the long names like this "dddd, dd. MMMM". 
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.PickerBehavior)]
+	public string TitleDateFormat { get; set; } = "ddd, dd MMM";
+
+	/// <summary>
+	/// If AutoClose is set to true and PickerActions are defined, selecting a day will close the MudDatePicker.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.PickerBehavior)]
+	public bool AutoClose { get; set; }
+
+	/// <summary>
+	/// Function to determine whether a date is disabled
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.Validation)]
+	public Func<DateTime, bool> IsDateDisabledFunc
 	{
-		// todo: raise an event the user can handle
+		get => _isDateDisabledFunc;
+		set
+		{
+			_isDateDisabledFunc = value ?? (_ => false);
+		}
 	}
+	private Func<DateTime, bool> _isDateDisabledFunc = _ => false;
+	#endregion
 
+	#region Lifecycle
 
-	private IEnumerable<DateTime> GetAllMonths()
+	protected DatePickerBase() : base(new DefaultConverter<DateTime?>
 	{
-		var current = GetMonthStart(0);
+		Format = CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern,
-		var calendarYear = Culture.Calendar.GetYear(current);
+		Culture = CultureInfo.CurrentCulture
-		var firstOfCalendarYear = Culture.Calendar.ToDateTime(calendarYear, 1, 1, 0, 0, 0, 0);
+	})
-		for (var i = 0; i < Culture.Calendar.GetMonthsInYear(calendarYear); i++)
-			yield return Culture.Calendar.AddMonths(firstOfCalendarYear, i);
-	}
-
-	private string GetAbbreviatedMonthName(DateTime month)
 	{
-		var calendarMonth = Culture.Calendar.GetMonth(month);
+		AdornmentAriaLabel = "Open Date Picker";
-		return Culture.DateTimeFormat.AbbreviatedMonthNames[calendarMonth - 1];
 	}
 
-	private string GetMonthName(DateTime month)
-	{
-		var calendarMonth = Culture.Calendar.GetMonth(month);
-		return Culture.DateTimeFormat.MonthNames[calendarMonth - 1];
-	}
-
-	private string GetMonthClasses(DateTime month)
-	{
-		if (GetMonthStart(0) == month)
-			return $"picker-month-selected mud-{Color.ToDescription()}-text";
-		return null;
-	}
-
-	private Typo GetMonthTypo(DateTime month)
-	{
-		if (GetMonthStart(0) == month)
-			return Typo.h5;
-		return Typo.subtitle1;
-	}
-
-
-
 	protected override void OnInitialized()
 	{
 		base.OnInitialized();
@@ -584,17 +600,6 @@ public abstract partial class DatePickerBase : Picker<DateTime?>
 			ScrollToYear();
 	}
 
-	protected abstract DateTime GetCalendarStartOfMonth();
+	#endregion
-
+	
-	private int GetCalendarDayOfMonth(DateTime date)
-	{
-		return Culture.Calendar.GetDayOfMonth(date);
-	}
-
-	/// <summary>
-	/// Converts gregorian year into whatever year it is in the provided culture
-	/// </summary>
-	/// <param name="year">Gregorian year</param>
-	/// <returns>Year according to culture</returns>
-	protected abstract int GetCalendarYear(int year);
 }

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

@@ -7,297 +7,305 @@ namespace Connected.Components;
 
 public partial class DateRangePicker : DatePickerBase
 {
-   private DateTime? _firstDate = null, _secondDate;
+	#region Variables
-   private DateRange _dateRange;
+	private DateTime? _firstDate = null, _secondDate;
-   private Range<string> _rangeText;
+	private DateRange _dateRange;
+	private Range<string> _rangeText;
+	protected override bool IsRange => true;
+	private RangeInput<string> _rangeInput;
+	/// <summary>
+	/// The currently selected range (two-way bindable). If null, then nothing was selected.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.FormComponent.Data)]
+	public DateRange DateRange
+	{
+		get => _dateRange;
+		set => SetDateRangeAsync(value, true).AndForget();
+	}
+	#endregion
 
-   protected override bool IsRange => true;
+	#region Events
 
-   public DateRangePicker()
+	protected override async void OnDayClicked(DateTime dateTime)
-   {
+	{
-      DisplayMonths = 2;
+		if (_firstDate == null || _firstDate > dateTime || _secondDate != null)
-      AdornmentAriaLabel = "Open Date Range Picker";
+		{
-   }
+			_secondDate = null;
+			_firstDate = dateTime;
+			return;
+		}
 
-   /// <summary>
+		_secondDate = dateTime;
-   /// Fired when the DateFormat changes.
+		if (PickerActions == null || AutoClose)
-   /// </summary>
+		{
-   [Parameter] public EventCallback<DateRange> DateRangeChanged { get; set; }
+			Submit();
 
-   /// <summary>
+			if (PickerVariant != PickerVariant.Static)
-   /// The currently selected range (two-way bindable). If null, then nothing was selected.
+			{
-   /// </summary>
+				await Task.Delay(ClosingDelay);
-   [Parameter]
+				Close(false);
-   [Category(CategoryTypes.FormComponent.Data)]
+			}
-   public DateRange DateRange
+		}
-   {
+	}
-      get => _dateRange;
-      set => SetDateRangeAsync(value, true).AndForget();
-   }
 
-   protected async Task SetDateRangeAsync(DateRange range, bool updateValue)
+	protected override void OnOpened()
-   {
+	{
-      if (_dateRange != range)
+		_secondDate = null;
-      {
+		base.OnOpened();
-         var doesRangeContainDisabledDates = range?.Start != null && range?.End != null && Enumerable
+	}
-             .Range(0, int.MaxValue)
-             .Select(index => range.Start.Value.AddDays(index))
-             .TakeWhile(date => date <= range.End.Value)
-             .Any(date => IsDateDisabledFunc(date.Date));
 
-         if (doesRangeContainDisabledDates)
+	protected internal override async void Submit()
-         {
+	{
-            _rangeText = null;
+		if (ReadOnly)
-            await SetTextAsync(null, false);
+			return;
-            return;
+		if (_firstDate == null || _secondDate == null)
-         }
+			return;
 
-         _dateRange = range;
+		await SetDateRangeAsync(new DateRange(_firstDate, _secondDate), true);
-         _value = range?.End;
 
-         if (updateValue)
+		_firstDate = null;
-         {
+		_secondDate = null;
-            if (_dateRange == null)
+	}
-            {
-               _rangeText = null;
-               await SetTextAsync(null, false);
-            }
-            else
-            {
-               _rangeText = new Range<string>(
-                   Converter.Convert(_dateRange.Start),
-                   Converter.Convert(_dateRange.End));
-               await SetTextAsync(_dateRange.ToString(Converter), false);
-            }
-         }
 
-         await DateRangeChanged.InvokeAsync(_dateRange);
+	public override void Clear(bool close = true)
-         BeginValidate();
+	{
-      }
+		DateRange = null;
-   }
+		_firstDate = _secondDate = null;
+		base.Clear();
+	}
+	protected override Task DateFormatChanged(string newFormat)
+	{
+		Modified = true;
+		return SetTextAsync(_dateRange?.ToString(Converter), false);
+	}
 
-   private Range<string> RangeText
+	protected override Task StringValueChanged(string value)
-   {
+	{
-      get => _rangeText;
+		Modified = true;
-      set
+		// Update the daterange property (without updating back the Value property)
-      {
+		return SetDateRangeAsync(ParseDateRangeValue(value), false);
-         if (_rangeText?.Equals(value) ?? value == null)
+	}
-            return;
+	/// <summary>
+	/// Fired when the DateFormat changes.
+	/// </summary>
+	[Parameter] public EventCallback<DateRange> DateRangeChanged { get; set; }
+	protected async Task SetDateRangeAsync(DateRange range, bool updateValue)
+	{
+		if (_dateRange != range)
+		{
+			var doesRangeContainDisabledDates = range?.Start != null && range?.End != null && Enumerable
+				 .Range(0, int.MaxValue)
+				 .Select(index => range.Start.Value.AddDays(index))
+				 .TakeWhile(date => date <= range.End.Value)
+				 .Any(date => IsDateDisabledFunc(date.Date));
 
-         Modified = true;
+			if (doesRangeContainDisabledDates)
-         _rangeText = value;
+			{
-         SetDateRangeAsync(ParseDateRangeValue(value?.Start, value?.End), false).AndForget();
+				_rangeText = null;
-      }
+				await SetTextAsync(null, false);
-   }
+				return;
+			}
 
-   private RangeInput<string> _rangeInput;
+			_dateRange = range;
+			_value = range?.End;
 
-   /// <summary>
+			if (updateValue)
-   /// Focuses the start date of MudDateRangePicker
+			{
-   /// </summary>
+				if (_dateRange == null)
-   /// <returns></returns>
+				{
-   public ValueTask FocusStartAsync() => _rangeInput.FocusStartAsync();
+					_rangeText = null;
+					await SetTextAsync(null, false);
+				}
+				else
+				{
+					_rangeText = new Range<string>(
+						 Converter.Convert(_dateRange.Start),
+						 Converter.Convert(_dateRange.End));
+					await SetTextAsync(_dateRange.ToString(Converter), false);
+				}
+			}
 
-   /// <summary>
+			await DateRangeChanged.InvokeAsync(_dateRange);
-   /// Selects the start date of MudDateRangePicker
+			BeginValidate();
-   /// </summary>
+		}
-   /// <returns></returns>
+	}
-   public ValueTask SelectStartAsync() => _rangeInput.SelectStartAsync();
+	#endregion
 
-   /// <summary>
+	#region Content
-   /// Selects the specified range of the start date text
-   /// </summary>
-   /// <param name="pos1">Start position of the selection</param>
-   /// <param name="pos2">End position of the selection</param>
-   /// <returns></returns>
-   public ValueTask SelectRangeStartAsync(int pos1, int pos2) => _rangeInput.SelectRangeStartAsync(pos1, pos2);
 
-   /// <summary>
+	private Range<string> RangeText
-   /// Focuses the end date of MudDateRangePicker
+	{
-   /// </summary>
+		get => _rangeText;
-   /// <returns></returns>
+		set
-   public ValueTask FocusEndAsync() => _rangeInput.FocusEndAsync();
+		{
+			if (_rangeText?.Equals(value) ?? value == null)
+				return;
 
-   /// <summary>
+			Modified = true;
-   /// Selects the end date of MudDateRangePicker
+			_rangeText = value;
-   /// </summary>
+			SetDateRangeAsync(ParseDateRangeValue(value?.Start, value?.End), false).AndForget();
-   /// <returns></returns>
+		}
-   public ValueTask SelectEndAsync() => _rangeInput.SelectEndAsync();
+	}
 
-   /// <summary>
+	#endregion
-   /// Selects the specified range of the end date text
-   /// </summary>
-   /// <param name="pos1">Start position of the selection</param>
-   /// <param name="pos2">End position of the selection</param>
-   /// <returns></returns>
-   public ValueTask SelectRangeEndAsync(int pos1, int pos2) => _rangeInput.SelectRangeEndAsync(pos1, pos2);
 
-   protected override Task DateFormatChanged(string newFormat)
+	#region Styling
-   {
+	protected override string GetDayClasses(int month, DateTime day)
-      Modified = true;
+	{
-      return SetTextAsync(_dateRange?.ToString(Converter), false);
+		var b = new CssBuilder("day");
-   }
+		if (day < GetMonthStart(month) || day > GetMonthEnd(month))
+		{
+			return b.AddClass("hidden").Build();
+		}
 
-   protected override Task StringValueChanged(string value)
+		if ((_firstDate != null && _secondDate != null && _firstDate < day && _secondDate > day) ||
-   {
+			 (_firstDate == null && _dateRange != null && _dateRange.Start < day && _dateRange.End > day))
-      Modified = true;
+		{
-      // Update the daterange property (without updating back the Value property)
+			return b
-      return SetDateRangeAsync(ParseDateRangeValue(value), false);
+				 .AddClass("range")
-   }
+				 .AddClass("range-between")
+				 .Build();
+		}
 
-   protected override bool HasValue(DateTime? value)
+		if ((_firstDate != null && day == _firstDate) ||
-   {
+			 (_firstDate == null && _dateRange != null && _dateRange.Start == day && DateRange.End != day))
-      return null != value && value.HasValue;
+		{
-   }
+			return b.AddClass("selected")
+				 .AddClass("range")
+				 .AddClass("range-start-selected")
+				 .AddClass("range-selection", _firstDate != null)
+				 .AddClass($"theme-{Color.ToDescription()}")
+				 .Build();
+		}
 
-   private DateRange ParseDateRangeValue(string value)
+		if ((_firstDate != null && _secondDate != null && day == _secondDate) ||
-   {
+			 (_firstDate == null && _dateRange != null && _dateRange.Start != day && _dateRange.End == day))
-      return DateRange.TryParse(value, Converter, out var dateRange) ? dateRange : null;
+		{
-   }
+			return b.AddClass("selected")
+				 .AddClass("range")
+				 .AddClass("range-end-selected")
+				 .AddClass($"theme-{Color.ToDescription()}")
+				 .Build();
+		}
 
-   private DateRange ParseDateRangeValue(string start, string end)
+		if (_firstDate == null && _dateRange != null && _dateRange.Start == _dateRange.End && _dateRange.Start == day)
-   {
+		{
-      return DateRange.TryParse(start, end, Converter, out var dateRange) ? dateRange : null;
+			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.ToDescription()}", _firstDate != null)
+				 .Build();
+		}
 
-   protected override void OnPickerClosed()
+		if (day == DateTime.Today)
-   {
+		{
-      _firstDate = null;
+			return b.AddClass("current")
-      base.OnPickerClosed();
+				 .AddClass("range", _firstDate != null && day > _firstDate)
-   }
+				 .AddClass("range-selection", _firstDate != null && day > _firstDate)
+				 .AddClass($"range-selection-{Color.ToDescription()}", _firstDate != null && day > _firstDate)
+				 .AddClass($"{Color.ToDescription()}-text")
+				 .Build();
+		}
 
-   protected override string GetDayClasses(int month, DateTime day)
+		return b.Build();
-   {
+	}
-      var b = new CssBuilder("day");
+	#endregion
-      if (day < GetMonthStart(month) || day > GetMonthEnd(month))
-      {
-         return b.AddClass("hidden").Build();
-      }
 
-      if ((_firstDate != null && _secondDate != null && _firstDate < day && _secondDate > day) ||
+	#region Behavior
-          (_firstDate == null && _dateRange != null && _dateRange.Start < day && _dateRange.End > day))
-      {
-         return b
-             .AddClass("range")
-             .AddClass("range-between")
-             .Build();
-      }
 
-      if ((_firstDate != null && day == _firstDate) ||
+	protected override string GetTitleDateString()
-          (_firstDate == null && _dateRange != null && _dateRange.Start == day && DateRange.End != day))
+	{
-      {
+		if (_firstDate != null)
-         return b.AddClass("selected")
+			return $"{FormatTitleDate(_firstDate)} - {FormatTitleDate(_secondDate)}";
-             .AddClass("range")
-             .AddClass("range-start-selected")
-             .AddClass("range-selection", _firstDate != null)
-             .AddClass($"theme-{Color.ToDescription()}")
-             .Build();
-      }
 
-      if ((_firstDate != null && _secondDate != null && day == _secondDate) ||
+		return DateRange?.Start != null
-          (_firstDate == null && _dateRange != null && _dateRange.Start != day && _dateRange.End == day))
+			 ? $"{FormatTitleDate(DateRange.Start)} - {FormatTitleDate(DateRange.End)}"
-      {
+			 : "";
-         return b.AddClass("selected")
+	}
-             .AddClass("range")
-             .AddClass("range-end-selected")
-             .AddClass($"theme-{Color.ToDescription()}")
-             .Build();
-      }
 
-      if (_firstDate == null && _dateRange != null && _dateRange.Start == _dateRange.End && _dateRange.Start == day)
+	protected override DateTime GetCalendarStartOfMonth()
-      {
+	{
-         return b.AddClass("selected").AddClass($"theme-{Color.ToDescription()}").Build();
+		var date = StartMonth ?? DateRange?.Start ?? DateTime.Today;
-      }
+		return date.StartOfMonth(Culture);
-      else if (_firstDate != null && day > _firstDate)
+	}
-      {
-         return b.AddClass("range")
-             .AddClass("range-selection", _secondDate == null)
-             .AddClass($"range-selection-{Color.ToDescription()}", _firstDate != null)
-             .Build();
-      }
 
-      if (day == DateTime.Today)
+	protected override int GetCalendarYear(int year)
-      {
+	{
-         return b.AddClass("current")
+		var date = DateRange?.Start ?? DateTime.Today;
-             .AddClass("range", _firstDate != null && day > _firstDate)
+		var diff = date.Year - year;
-             .AddClass("range-selection", _firstDate != null && day > _firstDate)
+		var calenderYear = Culture.Calendar.GetYear(date);
-             .AddClass($"range-selection-{Color.ToDescription()}", _firstDate != null && day > _firstDate)
+		return calenderYear - diff;
-             .AddClass($"{Color.ToDescription()}-text")
+	}
-             .Build();
+	protected override bool HasValue(DateTime? value)
-      }
+	{
+		return null != value && value.HasValue;
+	}
 
-      return b.Build();
+	private DateRange ParseDateRangeValue(string value)
-   }
+	{
+		return DateRange.TryParse(value, Converter, out var dateRange) ? dateRange : null;
+	}
 
-   protected override async void OnDayClicked(DateTime dateTime)
+	private DateRange ParseDateRangeValue(string start, string end)
-   {
+	{
-      if (_firstDate == null || _firstDate > dateTime || _secondDate != null)
+		return DateRange.TryParse(start, end, Converter, out var dateRange) ? dateRange : null;
-      {
+	}
-         _secondDate = null;
+	/// <summary>
-         _firstDate = dateTime;
+	/// Focuses the start date of MudDateRangePicker
-         return;
+	/// </summary>
-      }
+	/// <returns></returns>
+	public ValueTask FocusStartAsync() => _rangeInput.FocusStartAsync();
 
-      _secondDate = dateTime;
+	/// <summary>
-      if (PickerActions == null || AutoClose)
+	/// Selects the start date of MudDateRangePicker
-      {
+	/// </summary>
-         Submit();
+	/// <returns></returns>
+	public ValueTask SelectStartAsync() => _rangeInput.SelectStartAsync();
 
-         if (PickerVariant != PickerVariant.Static)
+	/// <summary>
-         {
+	/// Selects the specified range of the start date text
-            await Task.Delay(ClosingDelay);
+	/// </summary>
-            Close(false);
+	/// <param name="pos1">Start position of the selection</param>
-         }
+	/// <param name="pos2">End position of the selection</param>
-      }
+	/// <returns></returns>
-   }
+	public ValueTask SelectRangeStartAsync(int pos1, int pos2) => _rangeInput.SelectRangeStartAsync(pos1, pos2);
 
-   protected override void OnOpened()
+	/// <summary>
-   {
+	/// Focuses the end date of MudDateRangePicker
-      _secondDate = null;
+	/// </summary>
-      base.OnOpened();
+	/// <returns></returns>
-   }
+	public ValueTask FocusEndAsync() => _rangeInput.FocusEndAsync();
 
-   protected internal override async void Submit()
+	/// <summary>
-   {
+	/// Selects the end date of MudDateRangePicker
-      if (ReadOnly)
+	/// </summary>
-         return;
+	/// <returns></returns>
-      if (_firstDate == null || _secondDate == null)
+	public ValueTask SelectEndAsync() => _rangeInput.SelectEndAsync();
-         return;
 
-      await SetDateRangeAsync(new DateRange(_firstDate, _secondDate), true);
+	/// <summary>
+	/// Selects the specified range of the end date text
+	/// </summary>
+	/// <param name="pos1">Start position of the selection</param>
+	/// <param name="pos2">End position of the selection</param>
+	/// <returns></returns>
+	public ValueTask SelectRangeEndAsync(int pos1, int pos2) => _rangeInput.SelectRangeEndAsync(pos1, pos2);
+	#endregion
 
-      _firstDate = null;
+	#region Lifecycle
-      _secondDate = null;
+	public DateRangePicker()
-   }
+	{
-
+		DisplayMonths = 2;
-   public override void Clear(bool close = true)
+		AdornmentAriaLabel = "Open Date Range Picker";
-   {
+	}
-      DateRange = null;
+	protected override void OnPickerClosed()
-      _firstDate = _secondDate = null;
+	{
-      base.Clear();
+		_firstDate = null;
-   }
+		base.OnPickerClosed();
-
+	}
-   protected override string GetTitleDateString()
+	#endregion
-   {
+   
-      if (_firstDate != null)
-         return $"{FormatTitleDate(_firstDate)} - {FormatTitleDate(_secondDate)}";
-
-      return DateRange?.Start != null
-          ? $"{FormatTitleDate(DateRange.Start)} - {FormatTitleDate(DateRange.End)}"
-          : "";
-   }
-
-   protected override DateTime GetCalendarStartOfMonth()
-   {
-      var date = StartMonth ?? DateRange?.Start ?? DateTime.Today;
-      return date.StartOfMonth(Culture);
-   }
-
-   protected override int GetCalendarYear(int year)
-   {
-      var date = DateRange?.Start ?? DateTime.Today;
-      var diff = date.Year - year;
-      var calenderYear = Culture.Calendar.GetYear(date);
-      return calenderYear - diff;
-   }
 }

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

@@ -8,7 +8,7 @@
                      Variant="@Variant"
                      HelperText="@HelperText"
                      HelperTextOnFocus="@HelperTextOnFocus"
-                     CounterText="@CounterText"
+                     CounterText="@GetCounterText()"
                      FullWidth="@FullWidth"
                      class="@CompiledHelperContainerClassList.Build()"
                      Error="@HasErrors"

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

@@ -198,6 +198,11 @@ public partial class Input<T> : InputBase<T>
 	/// </summary>
 	[Parameter] public bool HideSpinButtons { get; set; } = true;
 
+	internal override InputType GetInputType()
+	{
+		return InputType;
+	}
+
 	/// <summary>
 	/// Show clear button.
 	/// </summary>
@@ -230,7 +235,7 @@ public partial class Input<T> : InputBase<T>
 	#region Input field class
 
 	[Parameter]
-	public string InputClass { get; set; } = string.Empty;
+	public string Class { get; set; } = string.Empty;
 	protected CssBuilder CompiledInputClass
 	{
 		get
@@ -240,7 +245,7 @@ public partial class Input<T> : InputBase<T>
 			.AddClass($"input-root-{Variant.ToDescription()}")
 			.AddClass($"input-root-adorned-{Adornment.ToDescription()}", Adornment != Adornment.None)
 			.AddClass($"input-root-margin-{Margin.ToDescription()}", when: () => Margin != Margin.None)
-			.AddClass(InputClass);
+			.AddClass(Class);
 		}
 	}
 	#endregion
@@ -315,7 +320,17 @@ public partial class Input<T> : InputBase<T>
 	/// <summary>
 	/// The current character counter, displayed below the text field.
 	/// </summary>
-	[Parameter] public string CounterText { get; set; }
+	[Parameter] public bool ShowCharacterCounter { get; set; }
+
+	/// <summary>
+	/// The current character counter, displayed below the text field.
+	/// </summary>
+	public string GetCounterText()
+	{
+		if (ShowCharacterCounter)
+			return Text.Length.ToString();
+		return string.Empty;
+	}
 
 	private System.Timers.Timer _timer;
 
@@ -381,7 +396,7 @@ public partial class Input<T> : InputBase<T>
 
 	[Parameter]
 	public double Step { get; set; } = 1;
-	internal override InputType GetInputType() => InputType;
+	//internal override InputType GetInputType() => InputType;
 	protected string InputTypeString => InputType.ToDescription();
 	public ElementReference ElementReference { get; private set; }
 	private ElementReference _elementReference1;