feat: implement slots for the listbox and listbox item components

src/LumexUI/Components/Listbox/LumexListbox.razor.cs

@@ -4,6 +4,7 @@
 
 using LumexUI.Common;
 using LumexUI.Styles;
+using LumexUI.Utilities;
 
 using Microsoft.AspNetCore.Components;
 
@@ -14,7 +15,7 @@ namespace LumexUI;
 /// </summary>
 /// <typeparam name="TValue">The type of the values associated with the items in the listbox.</typeparam>
 [CascadingTypeParameter( nameof( TValue ) )]
-public partial class LumexListbox<TValue> : LumexComponentBase
+public partial class LumexListbox<TValue> : LumexComponentBase, ISlotComponent<ListboxSlots>
 {
     /// <summary>
     /// Gets or sets content to be rendered inside the listbox.
@@ -67,12 +68,23 @@ public partial class LumexListbox<TValue> : LumexComponentBase
     /// </summary>
     [Parameter] public EventCallback<ICollection<TValue?>> ValuesChanged { get; set; }
 
+    /// <summary>
+    /// Gets or sets the CSS class names for the listbox slots.
+    /// </summary>
+    [Parameter] public ListboxSlots? Classes { get; set; }
+
+    /// <summary>
+    /// Gets or sets the CSS class names for the listbox items slots.
+    /// </summary>
+    [Parameter] public ListboxItemSlots? ItemClasses { get; set; }
+
     private readonly static RenderFragment _emptyContent = builder =>
     {
         builder.AddContent( 0, "No items." );
     };
 
     private readonly ListboxContext<TValue> _context;
+    private readonly Memoizer<ListboxSlots> _slotsMemoizer;
     private readonly RenderFragment _renderItems;
     private readonly RenderFragment _renderEmptyContent;
 
@@ -84,6 +96,7 @@ public partial class LumexListbox<TValue> : LumexComponentBase
     public LumexListbox()
     {
         _context = new ListboxContext<TValue>( this );
+        _slotsMemoizer = new Memoizer<ListboxSlots>();
         _renderItems = RenderItems;
         _renderEmptyContent = RenderEmptyContent;
 
@@ -119,6 +132,17 @@ public override Task SetParametersAsync( ParameterView parameters )
     /// <inheritdoc />
     protected override void OnParametersSet()
     {
-        _slots ??= Listbox.GetStyles( this, TwMerge );
+        // Perform a re-building only if the dependencies have changed
+        _slots = _slotsMemoizer.Memoize( GetSlots, [
+            Color,
+            Variant,
+            Classes,
+            Class
+        ] );
+    }
+
+    private ListboxSlots GetSlots()
+    {
+        return Listbox.GetStyles( this, TwMerge );
     }
 }

src/LumexUI/Components/Listbox/LumexListboxItem.razor.cs

@@ -6,6 +6,7 @@
 
 using LumexUI.Common;
 using LumexUI.Styles;
+using LumexUI.Utilities;
 
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
@@ -16,7 +17,8 @@ namespace LumexUI;
 /// A component representing an item within the <see cref="LumexListbox{T}"/>.
 /// </summary>
 /// <typeparam name="TValue">The type of the value associated with the listbox item.</typeparam>
-public partial class LumexListboxItem<TValue> : LumexComponentBase, IDisposable
+[CompositionComponent( typeof( LumexListbox<> ) )]
+public partial class LumexListboxItem<TValue> : LumexComponentBase, ISlotComponent<ListboxItemSlots>, IDisposable
 {
     /// <summary>
     /// Gets or sets content to be rendered inside the listbox item.
@@ -69,10 +71,16 @@ public partial class LumexListboxItem<TValue> : LumexComponentBase, IDisposable
     /// </summary>
     [Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
 
+    /// <summary>
+    /// Gets or sets the CSS class names for the listbox item slots.
+    /// </summary>
+    [Parameter] public ListboxItemSlots? Classes { get; set; }
+
     [CascadingParameter] internal ListboxContext<TValue>? Context { get; set; }
 
     private LumexListbox<TValue>? Listbox => Context?.Owner;
 
+    private readonly Memoizer<ListboxItemSlots> _slotsMemoizer;
     private readonly RenderFragment _renderSelectedIcon;
 
     private ListboxItemSlots _slots = default!;
@@ -82,6 +90,7 @@ public partial class LumexListboxItem<TValue> : LumexComponentBase, IDisposable
     /// </summary>
     public LumexListboxItem()
     {
+        _slotsMemoizer = new Memoizer<ListboxItemSlots>();
         _renderSelectedIcon = RenderSelectedIcon;
 
         As = "li";
@@ -117,15 +126,22 @@ protected override void OnInitialized()
     /// <inheritdoc />
     protected override void OnParametersSet()
     {
-        _slots ??= ListboxItem.GetStyles( this, TwMerge );
+        // Perform a re-building only if the dependencies have changed
+        _slots = _slotsMemoizer.Memoize( GetSlots, [
+            Color,
+            Variant,
+            GetDisabledState(),
+            Classes,
+            Class
+        ] );
     }
 
     internal bool GetSelectedState() =>
         Listbox?.Value?.Equals( Value ) is true ||
         Listbox?.Values?.Contains( Value ) is true;
 
     internal bool GetDisabledState() =>
-        Listbox?.DisabledItems?.Contains( Value ) is true;
+        Disabled || Listbox?.DisabledItems?.Contains( Value ) is true;
 
     private async Task OnClickAsync( MouseEventArgs args )
     {
@@ -164,6 +180,11 @@ private Task SelectAsync()
         return Task.CompletedTask;
     }
 
+    private ListboxItemSlots GetSlots()
+    {
+        return ListboxItem.GetStyles( this, TwMerge );
+    }
+
     /// <inheritdoc />
     public virtual void Dispose()
     {

src/LumexUI/Styles/Listbox.cs

@@ -42,17 +42,20 @@ public static ListboxSlots GetStyles<T>( LumexListbox<T> listbox, TwMerge twMerg
             Root = twMerge.Merge(
                 ElementClass.Empty()
                     .Add( _base )
+                    .Add( listbox.Classes?.Root )
                     .Add( listbox.Class )
                     .ToString() ),
 
             List = twMerge.Merge(
                 ElementClass.Empty()
                     .Add( _list )
+                    .Add( listbox.Classes?.List )
                     .ToString() ),
 
             EmptyContent = twMerge.Merge(
                 ElementClass.Empty()
                     .Add( _emptyContent )
+                    .Add( listbox.Classes?.EmptyContent )
                     .ToString() ),
         };
     }
@@ -115,35 +118,42 @@ internal class ListboxItem
 
     public static ListboxItemSlots GetStyles<T>( LumexListboxItem<T> listboxItem, TwMerge twMerge )
     {
+        var listbox = listboxItem.Context?.Owner;
+
         return new ListboxItemSlots()
         {
             Root = twMerge.Merge(
                 ElementClass.Empty()
                     .Add( _base )
                     .Add( _disabled, when: listboxItem.GetDisabledState() )
-                    .Add( listboxItem.Class )
                     .Add( GetVariantStyles( listboxItem.Variant, slot: nameof( _base ) ) )
                     .Add( GetCompoundStyles( listboxItem.Variant, listboxItem.Color, slot: nameof( _base ) ) )
+                    .Add( listbox?.ItemClasses?.Root )
+                    .Add( listboxItem.Class )
                     .ToString() ),
 
             Wrapper = twMerge.Merge(
                 ElementClass.Empty()
                     .Add( _wrapper )
+                    .Add( listbox?.ItemClasses?.Wrapper )
                     .ToString() ),
 
             Title = twMerge.Merge(
                 ElementClass.Empty()
                     .Add( _title )
+                    .Add( listbox?.ItemClasses?.Title )
                     .ToString() ),
 
             Description = twMerge.Merge(
                 ElementClass.Empty()
                     .Add( _description )
+                    .Add( listbox?.ItemClasses?.Description )
                     .ToString() ),
 
             SelectedIcon = twMerge.Merge(
                 ElementClass.Empty()
                     .Add( _selectedIcon )
+                    .Add( listbox?.ItemClasses?.SelectedIcon )
                     .ToString() ),
         };
     }
@@ -156,7 +166,7 @@ private static ElementClass GetVariantStyles( ListboxVariant variant, string slo
                 .Add( "", when: slot is nameof( _base ) ),
 
             ListboxVariant.Outlined => ElementClass.Empty()
-                .Add( "border-medium border-transparent bg-transparent", when: slot is nameof( _base ) ),
+                .Add( "border-2 border-transparent bg-transparent", when: slot is nameof( _base ) ),
 
             ListboxVariant.Flat => ElementClass.Empty()
                 .Add( "", when: slot is nameof( _base ) ),
@@ -213,27 +223,27 @@ private static ElementClass GetCompoundStyles( ListboxVariant variant, ThemeColo
 
             (ListboxVariant.Outlined, ThemeColor.Primary ) => ElementClass.Empty()
                 .Add( ElementClass.Empty()
-                    .Add( "hover:border-primary" ), when: slot is nameof( _base ) ),
+                    .Add( "hover:border-primary hover:text-primary" ), when: slot is nameof( _base ) ),
 
             (ListboxVariant.Outlined, ThemeColor.Secondary ) => ElementClass.Empty()
                 .Add( ElementClass.Empty()
-                    .Add( "hover:border-secondary" ), when: slot is nameof( _base ) ),
+                    .Add( "hover:border-secondary hover:text-secondary" ), when: slot is nameof( _base ) ),
 
             (ListboxVariant.Outlined, ThemeColor.Success ) => ElementClass.Empty()
                 .Add( ElementClass.Empty()
-                    .Add( "hover:border-success" ), when: slot is nameof( _base ) ),
+                    .Add( "hover:border-success hover:text-success" ), when: slot is nameof( _base ) ),
 
             (ListboxVariant.Outlined, ThemeColor.Warning ) => ElementClass.Empty()
                 .Add( ElementClass.Empty()
-                    .Add( "hover:border-warning" ), when: slot is nameof( _base ) ),
+                    .Add( "hover:border-warning hover:text-warning" ), when: slot is nameof( _base ) ),
 
             (ListboxVariant.Outlined, ThemeColor.Danger ) => ElementClass.Empty()
                 .Add( ElementClass.Empty()
-                    .Add( "hover:border-danger" ), when: slot is nameof( _base ) ),
+                    .Add( "hover:border-danger hover:text-danger" ), when: slot is nameof( _base ) ),
 
             (ListboxVariant.Outlined, ThemeColor.Info ) => ElementClass.Empty()
                 .Add( ElementClass.Empty()
-                    .Add( "hover:border-info" ), when: slot is nameof( _base ) ),
+                    .Add( "hover:border-info hover:text-info" ), when: slot is nameof( _base ) ),
 
             // flat / color