From 75d397fa5aef85530402c219905d377ada03bed0 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 21 Jul 2026 18:21:06 +0330
Subject: [PATCH 1/7] apply BitDropdown improvements #12741

---
 .../Inputs/Dropdown/BitDropdown.razor         |  88 +-
 .../Inputs/Dropdown/BitDropdown.razor.cs      | 246 +++++-
 .../Inputs/Dropdown/BitDropdown.scss          |  54 ++
 .../Inputs/Dropdown/BitDropdownClassStyles.cs |  30 +
 .../Inputs/Dropdown/_BitDropdownItem.razor    |   9 +-
 .../JsInterop/DropdownsJsRuntimeExtensions.cs |  19 +
 .../Bit.BlazorUI/Scripts/Dropdowns.ts         | 104 +++
 .../Inputs/Dropdown/BitDropdownDemo.razor     |   4 +-
 .../Inputs/Dropdown/BitDropdownDemo.razor.cs  |  77 ++
 .../Dropdown/BitDropdownDemo.razor.scss       |   6 +
 .../Dropdown/_BitDropdownCustomDemo.razor     | 435 +++++++---
 .../Dropdown/_BitDropdownCustomDemo.razor.cs  |   8 +
 .../_BitDropdownCustomDemo.razor.samples.cs   | 817 ++++++++++++------
 .../Dropdown/_BitDropdownItemDemo.razor       | 425 ++++++---
 .../Dropdown/_BitDropdownItemDemo.razor.cs    |   8 +
 .../_BitDropdownItemDemo.razor.samples.cs     | 642 +++++++++-----
 .../Dropdown/_BitDropdownOptionDemo.razor     | 435 ++++++++--
 .../Dropdown/_BitDropdownOptionDemo.razor.cs  |   6 +
 .../_BitDropdownOptionDemo.razor.samples.cs   | 392 +++++++--
 19 files changed, 2934 insertions(+), 871 deletions(-)
 create mode 100644 src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DropdownsJsRuntimeExtensions.cs
 create mode 100644 src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
index 7dfe510d4c..39ec80e8b5 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
@@ -12,6 +12,18 @@
     var searchBoxClearIconCss = BitIconInfo.From(SearchBoxClearIcon, SearchBoxClearIconName ?? "Cancel")?.GetCssClasses();
     var comboBoxAddButtonIconCss = BitIconInfo.From(ComboBoxAddButtonIcon, ComboBoxAddButtonIconName ?? "Add")?.GetCssClasses();
     var itemCheckIconCss = GetItemCheckIconCss();
+
+    RenderFragment emptyContent =
+        @<div style="@Styles?.EmptyContent" class="bit-drp-emp @Classes?.EmptyContent">
+            @if (EmptyTemplate is not null)
+            {
+                @EmptyTemplate
+            }
+            else
+            {
+                @(EmptyText ?? "No items found")
+            }
+        </div>;
 }
 
 @if (Virtualize && (Options ?? ChildContent) is not null)
@@ -42,7 +54,9 @@
         </label>
     }
 
-    <div @onclick="HandleOnClick"
+    <div @ref="_dropdownWrapperRef"
+         @onclick="HandleOnClick"
+         @onkeydown="HandleOnTriggerKeyDown"
          title="@Title"
          role="combobox"
          id="@_dropdownId"
@@ -104,6 +118,8 @@
                        @onkeydown="@HandleOnKeyDown"
                        @oninput="@HandleOnComboInput"
                        @onchange="@HandleOnComboChange"
+                       @onfocusin="HandleComboInputFocusIn"
+                       @onfocusout="HandleComboInputFocusOut"
                        style="@Styles?.ComboBoxInput"
                        class="bit-drp-inp @Classes?.ComboBoxInput"
                        type="text"
@@ -176,12 +192,14 @@
      id="@_overlayId"
      class="bit-drp-ovl @Classes?.Overlay"></div>
 
-<div id="@_calloutId"
+<div @onkeydown="HandleOnCalloutKeyDown"
+     id="@_calloutId"
      tabindex="0"
      role="listbox"
      style="@Styles?.Callout"
      class="@GetCalloutCssClasses()"
-     aria-labelledby="@_labelId">
+     aria-labelledby="@_labelId"
+     aria-multiselectable="@(MultiSelect ? "true" : null)">
 
     @if (Responsive)
     {
@@ -263,7 +281,7 @@
     {
         <div style="@Styles?.ResponsiveComboInputContainer"
              class="bit-drp-cbi @Classes?.ResponsiveComboInputContainer">
-            <input @ref="_comboBoxInputResponsiveRef" @onkeydown="@((k) => HandleOnKeyDown(k))" @oninput="@HandleOnComboInput" @onchange="@HandleOnComboChange"
+            <input @ref="_comboBoxInputResponsiveRef" @onkeydown="@((k) => HandleOnKeyDown(k))" @oninput="@HandleOnComboInput" @onchange="@HandleOnComboChange" @onfocusin="HandleComboInputFocusIn" @onfocusout="HandleComboInputFocusOut"
                    style="@Styles?.ComboBoxInput"
                    class="bit-drp-icb @Classes?.ComboBoxInput"
                    type="text"
@@ -283,6 +301,36 @@
         </div>
     }
 
+    @if (MultiSelect && ShowSelectAll && ItemsProvider is null)
+    {
+        var (allSelected, anySelected) = GetSelectAllState();
+        var selectAllClasses = "bit-drp-sac bit-drp-iwr" +
+                               (allSelected ? " bit-drp-chd" : string.Empty) +
+                               (anySelected && allSelected is false ? " bit-drp-sai" : string.Empty) +
+                               (IsEnabled ? string.Empty : " bit-drp-ids");
+        var selectAllAriaChecked = allSelected ? "true" : anySelected ? "mixed" : "false";
+        <div style="@Styles?.SelectAllContainer"
+             class="@selectAllClasses @Classes?.SelectAllContainer">
+            <button @onclick="HandleOnSelectAllClick"
+                    type="button"
+                    role="checkbox"
+                    style="@Styles?.SelectAllButton"
+                    class="bit-drp-mcn @Classes?.SelectAllButton"
+                    aria-checked="@selectAllAriaChecked">
+                <div style="@Styles?.SelectAllCheckBox"
+                     class="bit-drp-chb @Classes?.SelectAllCheckBox">
+                    <i aria-hidden="true"
+                       style="@Styles?.SelectAllCheckIcon"
+                       class="bit-drp-chm @itemCheckIconCss @Classes?.SelectAllCheckIcon" />
+                </div>
+                <span style="@Styles?.SelectAllText"
+                      class="bit-drp-itx @Classes?.SelectAllText">
+                    @(SelectAllText ?? "Select all")
+                </span>
+            </button>
+        </div>
+    }
+
     <div id="@_scrollContainerId"
          style="@Styles?.ScrollContainer"
          class="bit-drp-scn @Classes?.ScrollContainer">
@@ -291,21 +339,29 @@
             if (ItemsProvider is null)
             {
                 <Virtualize Items="GetSearchedItems()"
-                            Context="item"
                             ItemSize="ItemSize"
                             OverscanCount="OverscanCount"
                             Placeholder="VirtualizePlaceholder">
-                    <_BitDropdownItem Item="item" Dropdown="this" ItemCheckIconCss="@itemCheckIconCss" />
+                    <ItemContent Context="item">
+                        <_BitDropdownItem Item="item" Dropdown="this" ItemCheckIconCss="@itemCheckIconCss" />
+                    </ItemContent>
+                    <EmptyContent>
+                        @emptyContent
+                    </EmptyContent>
                 </Virtualize>
             }
             else
             {
                 <Virtualize @ref="_virtualizeElement"
-                            Context="item"
                             OverscanCount="OverscanCount"
                             Placeholder="VirtualizePlaceholder"
                             ItemsProvider="InternalItemsProvider">
-                    <_BitDropdownItem Item="item" Dropdown="this" ItemCheckIconCss="@itemCheckIconCss" />
+                    <ItemContent Context="item">
+                        <_BitDropdownItem Item="item" Dropdown="this" ItemCheckIconCss="@itemCheckIconCss" />
+                    </ItemContent>
+                    <EmptyContent>
+                        @emptyContent
+                    </EmptyContent>
                 </Virtualize>
             }
         }
@@ -314,12 +370,24 @@
             <CascadingValue Value="this" IsFixed="true">
                 @(Options ?? ChildContent)
             </CascadingValue>
+
+            @if (HasNoVisibleItems())
+            {
+                @emptyContent
+            }
         }
         else
         {
-            @foreach (var item in GetSearchedItems())
+            @if (HasNoVisibleItems())
             {
-                <_BitDropdownItem Item="item" Dropdown="this" ItemCheckIconCss="@itemCheckIconCss" />
+                @emptyContent
+            }
+            else
+            {
+                @foreach (var item in GetSearchedItems())
+                {
+                    <_BitDropdownItem Item="item" Dropdown="this" ItemCheckIconCss="@itemCheckIconCss" />
+                }
             }
         }
     </div>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
index ad6d7d067e..fc669e39cb 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
@@ -18,6 +18,7 @@ namespace Bit.BlazorUI;
     private HashSet<TItem>? _searchedItemsCache;
     private bool _isResponsiveMode;
     private bool _inputSearchHasFocus;
+    private bool _inputComboHasFocus;
     private List<TItem> _selectedItems = [];
     private List<TItem> _lastShownItems = [];
     private Virtualize<TItem>? _virtualizeElement;
@@ -36,8 +37,12 @@ namespace Bit.BlazorUI;
 
     private ElementReference _searchInputRef;
     private ElementReference _comboBoxInputRef;
+    private ElementReference _dropdownWrapperRef;
     private ElementReference _comboBoxInputResponsiveRef;
 
+    private string _typeAheadBuffer = string.Empty;
+    private DateTimeOffset _lastTypeAheadStamp;
+
 
 
     [Inject] private IJSRuntime _js { get; set; } = default!;
@@ -177,6 +182,16 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public Func<TItem?, TValue>? DynamicValueGenerator { get; set; }
 
+    /// <summary>
+    /// The custom template to render in the callout when there is no item to show.
+    /// </summary>
+    [Parameter] public RenderFragment? EmptyTemplate { get; set; }
+
+    /// <summary>
+    /// The text to render in the callout when there is no item to show.
+    /// </summary>
+    [Parameter] public string? EmptyText { get; set; }
+
     /// <summary>
     /// Custom search function to be used in place of the default search algorithm for checking existing an item in selected items in the ComboBox mode.
     /// </summary>
@@ -259,6 +274,11 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public RenderFragment? LabelTemplate { get; set; }
 
+    /// <summary>
+    /// The maximum number of items that can be selected in multi select mode. Zero or null means no limit.
+    /// </summary>
+    [Parameter] public int? MaxSelectedItems { get; set; }
+
     /// <summary>
     /// Enables the multi select mode.
     /// </summary>
@@ -403,6 +423,11 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public Func<ICollection<TItem>, string, ICollection<TItem>>? SearchFunction { get; set; }
 
+    /// <summary>
+    /// The text of the select all item in multi select mode.
+    /// </summary>
+    [Parameter] public string? SelectAllText { get; set; }
+
     /// <summary>
     /// Shows the clear button when an item is selected.
     /// </summary>
@@ -413,6 +438,11 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public bool ShowSearchBox { get; set; }
 
+    /// <summary>
+    /// Shows the select all item in the callout in multi select mode.
+    /// </summary>
+    [Parameter] public bool ShowSelectAll { get; set; }
+
     /// <summary>
     /// Custom CSS styles for different parts of the BitDropdown.
     /// </summary>
@@ -652,6 +682,20 @@ internal async Task HandleOnItemClick(TItem item)
 
         await AddOrRemoveSelectedItem(item);
 
+        if (MultiSelect is false)
+        {
+            // Selecting an item hides the callout along with the focused option,
+            // so return the focus to the dropdown (or its combo input).
+            if (Combo)
+            {
+                await FocusComboInputAsync();
+            }
+            else
+            {
+                await _dropdownWrapperRef.FocusAsync();
+            }
+        }
+
         StateHasChanged();
     }
 
@@ -659,12 +703,14 @@ internal string GetItemWrapperCssClasses(TItem item)
     {
         var stringBuilder = new StringBuilder("bit-drp-iwr");
 
-        if (GetIsSelected(item))
+        var isSelected = GetIsSelected(item);
+
+        if (isSelected)
         {
             stringBuilder.Append(" bit-drp-chd");
         }
 
-        if (GetIsEnabled(item) is false)
+        if (GetIsEnabled(item) is false || (isSelected is false && IsMaxSelectedItemsReached))
         {
             stringBuilder.Append(" bit-drp-ids");
         }
@@ -672,6 +718,8 @@ internal string GetItemWrapperCssClasses(TItem item)
         return stringBuilder.ToString();
     }
 
+    internal bool IsMaxSelectedItemsReached => MultiSelect && MaxSelectedItems is > 0 && (Values?.Count() ?? 0) >= MaxSelectedItems.Value;
+
     internal int? GetTotalItems()
     {
         if (Items is null) return null;
@@ -1102,6 +1150,14 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
         _dotnetObj = DotNetObjectReference.Create(this);
 
+        try
+        {
+            // Prevents the default behavior (scrolling) of the navigation keys handled by the
+            // keydown handlers, since Blazor cannot conditionally preventDefault per key.
+            await _js.BitDropdownsSetup(_Id, _calloutId);
+        }
+        catch (JSDisconnectedException) { } // we can ignore this exception here
+
         if (Responsive is false) return;
 
         await _js.BitSwipesSetup(_calloutId, 0.25m, BitPanelPosition.End, Dir is BitDir.Rtl, BitSwipeOrientation.Horizontal, _dotnetObj);
@@ -1137,6 +1193,8 @@ private async Task AddOrRemoveSelectedItem(TItem? item, bool addDynamic = false)
 
             var isSelected = GetIsSelected(item) is false;
 
+            if (isSelected && IsMaxSelectedItemsReached) return;
+
             var tempValue = Values?.ToList() ?? [];
 
             if (isSelected)
@@ -1283,6 +1341,122 @@ private async Task HandleOnClick(MouseEventArgs e)
         await FocusOnSearchBox();
     }
 
+    private async Task HandleOnTriggerKeyDown(KeyboardEventArgs e)
+    {
+        if (IsEnabled is false) return;
+
+        if (e.Key is "Escape")
+        {
+            await CloseCallout();
+            return;
+        }
+
+        if (Combo)
+        {
+            // Typing is handled by the combo input itself; only the arrow keys manage the callout here.
+            if (e.Key is "ArrowDown" or "ArrowUp")
+            {
+                await OpenCallout();
+                await FocusItem("selected");
+            }
+            return;
+        }
+
+        if (e.Key is "Enter" or " ")
+        {
+            if (IsOpen)
+            {
+                await CloseCallout();
+            }
+            else
+            {
+                await OpenCallout();
+                await FocusItem("selected");
+            }
+        }
+        else if (e.Key is "ArrowDown" or "ArrowUp")
+        {
+            await OpenCallout();
+            await FocusItem("selected");
+        }
+        else if (IsPrintableKey(e))
+        {
+            await OpenCallout();
+            await FocusItem("char", GetTypeAheadBuffer(e.Key!));
+        }
+    }
+
+    private async Task HandleOnCalloutKeyDown(KeyboardEventArgs e)
+    {
+        if (IsEnabled is false || IsOpen is false) return;
+
+        switch (e.Key)
+        {
+            case "ArrowDown":
+                await FocusItem("next");
+                break;
+            case "ArrowUp":
+                await FocusItem("prev");
+                break;
+            case "PageDown":
+                await FocusItem("nextPage");
+                break;
+            case "PageUp":
+                await FocusItem("prevPage");
+                break;
+            case "Home":
+            case "End":
+                // Home/End keep their caret behavior while typing in the search/combo inputs.
+                if (_inputSearchHasFocus is false && _inputComboHasFocus is false)
+                {
+                    await FocusItem(e.Key is "Home" ? "first" : "last");
+                }
+                break;
+            case "Escape":
+                await CloseCallout();
+                await _dropdownWrapperRef.FocusAsync();
+                break;
+            case "Tab":
+                await CloseCallout();
+                break;
+            default:
+                // In Combo mode the combo input is the type-ahead, and printable keys
+                // typed into the search box must keep filtering instead of moving focus.
+                if (Combo is false && _inputSearchHasFocus is false && IsPrintableKey(e))
+                {
+                    await FocusItem("char", GetTypeAheadBuffer(e.Key!));
+                }
+                break;
+        }
+    }
+
+    private static bool IsPrintableKey(KeyboardEventArgs e)
+    {
+        return e.Key?.Length is 1 && e.Key != " " && e.CtrlKey is false && e.AltKey is false && e.MetaKey is false;
+    }
+
+    private string GetTypeAheadBuffer(string key)
+    {
+        // Accumulates the keys typed in quick succession so the type-ahead matches the
+        // full string, and starts over after a pause (the common 500ms convention).
+        var now = DateTimeOffset.UtcNow;
+
+        if ((now - _lastTypeAheadStamp).TotalMilliseconds > 500)
+        {
+            _typeAheadBuffer = string.Empty;
+        }
+
+        _lastTypeAheadStamp = now;
+        _typeAheadBuffer += key;
+
+        return _typeAheadBuffer;
+    }
+
+    private ValueTask FocusItem(string mode, string? character = null)
+    {
+        return _js.BitDropdownsFocusItem(_calloutId, mode, character);
+    }
+
     private void HandleOnValueChanged(object? sender, EventArgs args)
     {
         UpdateSelectedItemsFromValues();
@@ -1298,6 +1472,16 @@ private void HandleSearchBoxFocusOut()
         _inputSearchHasFocus = false;
     }
 
+    private void HandleComboInputFocusIn()
+    {
+        _inputComboHasFocus = true;
+    }
+
+    private void HandleComboInputFocusOut()
+    {
+        _inputComboHasFocus = false;
+    }
+
     private Task HandleSearchBoxOnClear()
     {
         return ClearSearchBox();
@@ -1456,6 +1640,63 @@ private async Task HandleOnClearClick()
         UpdateSelectedItemsFromValues();
     }
 
+    private bool HasNoVisibleItems()
+    {
+        return GetSearchedItems().Any(i => GetItemType(i) == BitDropdownItemType.Normal && GetIsHidden(i) is false) is false;
+    }
+
+    private (bool AllSelected, bool AnySelected) GetSelectAllState()
+    {
+        var candidates = GetSelectAllCandidateItems();
+        if (candidates.Count == 0) return (false, false);
+
+        var selectedCount = candidates.Count(GetIsSelected);
+
+        return (selectedCount == candidates.Count, selectedCount > 0);
+    }
+
+    private List<TItem> GetSelectAllCandidateItems()
+    {
+        return [.. GetSearchedItems().Where(i => GetItemType(i) == BitDropdownItemType.Normal &&
+                                                 GetIsHidden(i) is false &&
+                                                 GetIsEnabled(i))];
+    }
+
+    private async Task HandleOnSelectAllClick()
+    {
+        if (ReadOnly) return;
+        if (IsEnabled is false) return;
+        if (MultiSelect is false) return;
+        if (ValuesHasBeenSet && ValuesChanged.HasDelegate is false) return;
+
+        var candidates = GetSelectAllCandidateItems();
+        if (candidates.Count == 0) return;
+
+        List<TValue?> newValues;
+        if (candidates.TrueForAll(GetIsSelected))
+        {
+            // All (searched) items are selected, so the select all item clears them, keeping
+            // the selected values that are not part of the current search results.
+            var comparer = EqualityComparer<TValue>.Default;
+            var candidateValues = candidates.Select(GetValue).ToList();
+            newValues = [.. (Values ?? []).Where(v => candidateValues.Exists(cv => comparer.Equals(cv, v)) is false)];
+        }
+        else
+        {
+            newValues = Values?.ToList() ?? [];
+            foreach (var item in candidates)
+            {
+                if (GetIsSelected(item)) continue;
+                if (MaxSelectedItems is > 0 && newValues.Count >= MaxSelectedItems.Value) break;
+
+                newValues.Add(GetValue(item));
+            }
+        }
+
+        await AssignValues(newValues);
+        await OnValuesChange.InvokeAsync([.. (Values ?? [])!]);
+    }
+
     private async Task HandleOnAddItemComboClick()
     {
         if (ReadOnly) return;
@@ -1866,6 +2107,7 @@ protected override async ValueTask DisposeAsync(bool disposing)
 
         try
         {
+            await _js.BitDropdownsDispose(_Id);
             await _js.BitCalloutClearCallout(_calloutId);
             await _js.BitSwipesDispose(_calloutId);
         }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
index c1dddd43b9..7c95e175a0 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
@@ -722,6 +722,60 @@
     background-color: $clr-bg-sec;
 }
 
+.bit-drp-emp {
+    display: flex;
+    cursor: default;
+    user-select: none;
+    color: $clr-fg-sec;
+    align-items: center;
+    height: spacing(4.5);
+    padding: 0 spacing(1);
+    box-sizing: border-box;
+    justify-content: center;
+    font-size: spacing(1.75);
+}
+
+.bit-drp-sac {
+    border-bottom: $shp-border-width $shp-border-style $clr-brd-sec;
+}
+
+.bit-drp-sai {
+    .bit-drp-chb {
+        border-color: var(--bit-drp-clr);
+
+        .bit-drp-chm {
+            opacity: 0;
+        }
+
+        &::after {
+            inset: 0;
+            content: "";
+            margin: auto;
+            position: absolute;
+            width: spacing(1.25);
+            height: spacing(1.25);
+            border-radius: spacing(0.125);
+            background-color: var(--bit-drp-clr);
+        }
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            .bit-drp-chb {
+                border-color: var(--bit-drp-clr-hover);
+
+                .bit-drp-chm {
+                    opacity: 0;
+                }
+
+                &::after {
+                    background-color: var(--bit-drp-clr-hover);
+                }
+            }
+        }
+    }
+}
+
 .bit-drp-cls {
     border: none;
     cursor: pointer;
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs
index d2ced9f963..091142d39c 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs
@@ -177,6 +177,36 @@ public class BitDropdownClassStyles
     /// </summary>
     public string? Suffix { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the empty state content of the BitDropdown.
+    /// </summary>
+    public string? EmptyContent { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the select all item container of the multi-select BitDropdown.
+    /// </summary>
+    public string? SelectAllContainer { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the select all item button of the multi-select BitDropdown.
+    /// </summary>
+    public string? SelectAllButton { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the select all item check box of the multi-select BitDropdown.
+    /// </summary>
+    public string? SelectAllCheckBox { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the select all item check icon of the multi-select BitDropdown.
+    /// </summary>
+    public string? SelectAllCheckIcon { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the select all item text of the multi-select BitDropdown.
+    /// </summary>
+    public string? SelectAllText { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the ComboBox input container in responsive mode of the BitDropdown.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/_BitDropdownItem.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/_BitDropdownItem.razor
index 3fe037ef25..9821fa8fef 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/_BitDropdownItem.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/_BitDropdownItem.razor
@@ -37,8 +37,15 @@
                         id="@id"
                         type="button"
                         role="option"
+                        title="@Dropdown.GetTitle(Item)"
+                        disabled=@(isEnabled is false)
                         style="@Dropdown.Styles?.ItemButton"
-                        class="bit-drp-mcn @Dropdown.Classes?.ItemButton">
+                        class="bit-drp-mcn @Dropdown.Classes?.ItemButton"
+                        aria-label="@Dropdown.GetAriaLabel(Item)"
+                        aria-setsize="@Dropdown.GetTotalItems()"
+                        aria-disabled="@(isEnabled is false)"
+                        aria-selected="@(isSelected ? "true" : "false")"
+                        aria-posinset="@Dropdown.GetItemPosInSet(Item)">
                     <div style="@Dropdown.Styles?.ItemCheckBox"
                          class="bit-drp-chb @Dropdown.Classes?.ItemCheckBox">
                         <i aria-hidden="true"
diff --git a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DropdownsJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DropdownsJsRuntimeExtensions.cs
new file mode 100644
index 0000000000..cf3e0b14ce
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DropdownsJsRuntimeExtensions.cs
@@ -0,0 +1,19 @@
+namespace Bit.BlazorUI;
+
+internal static class DropdownsJsRuntimeExtensions
+{
+    internal static ValueTask BitDropdownsSetup(this IJSRuntime jsRuntime, string id, string calloutId)
+    {
+        return jsRuntime.InvokeVoid("BitBlazorUI.Dropdowns.setup", id, calloutId);
+    }
+
+    internal static ValueTask BitDropdownsDispose(this IJSRuntime jsRuntime, string id)
+    {
+        return jsRuntime.InvokeVoid("BitBlazorUI.Dropdowns.dispose", id);
+    }
+
+    internal static ValueTask BitDropdownsFocusItem(this IJSRuntime jsRuntime, string calloutId, string mode, string? character)
+    {
+        return jsRuntime.InvokeVoid("BitBlazorUI.Dropdowns.focusItem", calloutId, mode, character);
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts b/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts
new file mode 100644
index 0000000000..4ce143fc2e
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts
@@ -0,0 +1,104 @@
+namespace BitBlazorUI {
+    export class Dropdowns {
+        private static _handlers = new Map<string, { element: HTMLElement, handler: (e: KeyboardEvent) => void }[]>();
+
+        // Attaches keydown listeners that only prevent the default behavior (e.g. page scrolling)
+        // of the navigation keys. The actual keyboard logic runs in the Blazor keydown handlers,
+        // which cannot conditionally preventDefault per key.
+        public static setup(id: string, calloutId: string) {
+            Dropdowns.dispose(id);
+
+            const entries: { element: HTMLElement, handler: (e: KeyboardEvent) => void }[] = [];
+
+            const isTextInput = (e: KeyboardEvent) => (e.target as HTMLElement)?.tagName === 'INPUT';
+
+            const root = document.getElementById(id);
+            if (root) {
+                const handler = (e: KeyboardEvent) => {
+                    if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || (e.key === ' ' && !isTextInput(e))) {
+                        e.preventDefault();
+                    }
+                };
+                root.addEventListener('keydown', handler);
+                entries.push({ element: root, handler });
+            }
+
+            const callout = document.getElementById(calloutId);
+            if (callout) {
+                const handler = (e: KeyboardEvent) => {
+                    // Home/End must keep their caret behavior while typing in the search/combo inputs.
+                    if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'PageDown' || e.key === 'PageUp' ||
+                        ((e.key === 'Home' || e.key === 'End') && !isTextInput(e))) {
+                        e.preventDefault();
+                    }
+                };
+                callout.addEventListener('keydown', handler);
+                entries.push({ element: callout, handler });
+            }
+
+            Dropdowns._handlers.set(id, entries);
+        }
+
+        public static dispose(id: string) {
+            const entries = Dropdowns._handlers.get(id);
+            if (!entries) return;
+
+            entries.forEach(e => e.element.removeEventListener('keydown', e.handler));
+            Dropdowns._handlers.delete(id);
+        }
+
+        public static focusItem(calloutId: string, mode: string, char: string | null) {
+            const callout = document.getElementById(calloutId);
+            if (!callout) return;
+
+            const items = (Array.from(callout.querySelectorAll('.bit-drp-itm, .bit-drp-mcn')) as HTMLElement[])
+                .filter(el => !(el as HTMLButtonElement).disabled &&
+                    el.getAttribute('aria-disabled') !== 'true' &&
+                    !el.closest('.bit-drp-ids') &&
+                    el.offsetParent !== null);
+            if (items.length === 0) return;
+
+            const current = items.indexOf(document.activeElement as HTMLElement);
+            let index = -1;
+
+            if (mode === 'first') {
+                index = 0;
+            } else if (mode === 'last') {
+                index = items.length - 1;
+            } else if (mode === 'next') {
+                index = current < 0 ? 0 : (current + 1) % items.length;
+            } else if (mode === 'prev') {
+                index = current < 0 ? items.length - 1 : (current - 1 + items.length) % items.length;
+            } else if (mode === 'nextPage') {
+                index = current < 0 ? 0 : Math.min(current + 10, items.length - 1);
+            } else if (mode === 'prevPage') {
+                index = current < 0 ? items.length - 1 : Math.max(current - 10, 0);
+            } else if (mode === 'selected') {
+                // Focus the selected option if there is one, otherwise the first one (APG combobox pattern).
+                index = items.findIndex(el => el.classList.contains('bit-drp-sel') || el.getAttribute('aria-selected') === 'true');
+                if (index < 0) {
+                    index = 0;
+                }
+            } else if (mode === 'char' && char) {
+                // Type-ahead per the APG: a repeated single character cycles through the options starting
+                // with it, while a multi-character buffer matches the accumulated string without leaving
+                // the current option (so typing a longer prefix refines the match instead of jumping).
+                const buffer = char.toLowerCase();
+                const sameChar = buffer.split('').every(c => c === buffer[0]);
+                const query = sameChar ? buffer[0] : buffer;
+                const start = current < 0 ? 0 : (sameChar ? current + 1 : current);
+                for (let i = 0; i < items.length; i++) {
+                    const candidate = (start + i) % items.length;
+                    if ((items[candidate].textContent || '').trim().toLowerCase().indexOf(query) === 0) {
+                        index = candidate;
+                        break;
+                    }
+                }
+            }
+
+            if (index > -1) {
+                items[index].focus();
+            }
+        }
+    }
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor
index 0040ae1ace..1b5b84505e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor
@@ -3,12 +3,12 @@
 
 <PageOutlet Url="components/dropdown"
             Title="Dropdown"
-            Description="A dropdown is a list in which the selected item is always visible while other items are visible on demand by clicking a dropdown button." />
+            Description="BitDropdown is a full-featured select component for picking one or more options: a searchable callout with full keyboard navigation, select all, selection limit and empty state support, a ComboBox mode with chips and dynamic item addition, virtualization for large datasets, rich templates, validation, responsive rendering and RTL." />
 
 <div>
     <DemoPage Name="Dropdown"
               SecondaryNames="@(["Select", "MultiSelect", "ComboBox"])"
-              Description="A dropdown is a list in which the selected item is always visible while other items are visible on demand by clicking a dropdown button. Dropdowns are typically used for forms."
+              Description="BitDropdown (also known as Select, MultiSelect or ComboBox) lets users pick one or more options from a list that opens on demand. Beyond the basics, it offers a searchable callout with full keyboard navigation, select all, selection limit and empty state support, a ComboBox mode with free typing, chips and dynamic item addition, virtualization and on-demand loading for large datasets, rich templates for every part of the component, form validation, responsive rendering and RTL support."
               Parameters="componentParameters"
               SubClasses="componentSubClasses"
               SubEnums="componentSubEnums"
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
index 08d8f2ab5a..82b9844704 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
@@ -173,6 +173,20 @@ public partial class BitDropdownDemo
             Description = "The function for generating value in a custom item when a new item is on added Dynamic ComboBox mode.",
         },
         new()
+        {
+            Name = "EmptyTemplate",
+            Type = "RenderFragment?",
+            DefaultValue = "null",
+            Description = "The custom template to render in the callout when there is no item to show.",
+        },
+        new()
+        {
+            Name = "EmptyText",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The text to render in the callout when there is no item to show.",
+        },
+        new()
         {
             Name = "ExistsSelectedItemFunction",
             Type = "Func<ICollection<TItem>, string, bool>",
@@ -280,6 +294,13 @@ public partial class BitDropdownDemo
             Description = "The custom template for the label of the dropdown.",
         },
         new()
+        {
+            Name = "MaxSelectedItems",
+            Type = "int?",
+            DefaultValue = "null",
+            Description = "The maximum number of items that can be selected in multi select mode. Zero or null means no limit.",
+        },
+        new()
         {
             Name = "MultiSelect",
             Type = "bool",
@@ -465,6 +486,13 @@ public partial class BitDropdownDemo
             Description = "Custom search function to be used in place of the default search algorithm.",
         },
         new()
+        {
+            Name = "SelectAllText",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The text of the select all item in multi select mode.",
+        },
+        new()
         {
             Name = "ShowClearButton",
             Type = "bool",
@@ -479,6 +507,13 @@ public partial class BitDropdownDemo
             Description = "Shows the SearchBox element in the callout.",
         },
         new()
+        {
+            Name = "ShowSelectAll",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Shows the select all item in the callout in multi select mode.",
+        },
+        new()
         {
             Name = "Styles",
             Type = "BitDropdownClassStyles?",
@@ -1174,6 +1209,48 @@ public partial class BitDropdownDemo
                    DefaultValue = "null",
                    Description = "Custom CSS classes/styles for the item divider of the BitDropdown."
                },
+               new()
+               {
+                   Name = "EmptyContent",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the empty state content of the BitDropdown."
+               },
+               new()
+               {
+                   Name = "SelectAllContainer",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the select all item container of the multi-select BitDropdown."
+               },
+               new()
+               {
+                   Name = "SelectAllButton",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the select all item button of the multi-select BitDropdown."
+               },
+               new()
+               {
+                   Name = "SelectAllCheckBox",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the select all item check box of the multi-select BitDropdown."
+               },
+               new()
+               {
+                   Name = "SelectAllCheckIcon",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the select all item check icon of the multi-select BitDropdown."
+               },
+               new()
+               {
+                   Name = "SelectAllText",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the select all item text of the multi-select BitDropdown."
+               },
             ],
         }
     ];
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.scss
index a2be6d18f7..5f4c4e213d 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.scss
@@ -86,6 +86,12 @@
             color: #ff4600;
             font-weight: bold;
         }
+
+        &.custom-drp-empty {
+            color: orangered;
+            padding: 5px 12px;
+            justify-content: center;
+        }
     }
 
     .grid-wrap {
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
index f1989a31fa..85a5402436 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
@@ -1,5 +1,5 @@
 <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
-    <div>Displays basic dropdowns demonstrating single and multi-select options, including required and disabled states.</div>
+    <div>BitDropdown in its simplest forms: single and multi select dropdowns, a required one, one preserving its original callout width, the disabled and read-only states and a custom delimiter for joining the selected values in multi select mode.</div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Single select"
@@ -30,11 +30,26 @@
                      DefaultValue="@("f-ora")"
                      Placeholder="Select an item"
                      NameSelectors="nameSelectors" />
+        <br /><br />
+        <BitDropdown Label="ReadOnly"
+                     ReadOnly
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@("f-app")"
+                     Placeholder="Select an item"
+                     NameSelectors="nameSelectors" />
+        <br /><br />
+        <BitDropdown Label="Custom delimiter"
+                     MultiSelect
+                     MultiSelectDelimiter=" - "
+                     Items="GetBasicCustoms()"
+                     DefaultValues="@(new[] { "f-app", "f-ban" })"
+                     Placeholder="Select items"
+                     NameSelectors="nameSelectors" />
     </div>
 </DemoExample>
 
 <DemoExample Title="Prefix & Suffix" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2" PreventRenderForMcpClient>
-    <div>Use prefixes and suffixes in BitDropdown, including combinations and the disabled state.</div>
+    <div>Display custom text before and after the selected value using the <b>Prefix</b> and <b>Suffix</b> parameters, separately or combined, or replace them entirely using the <b>PrefixTemplate</b> and <b>SuffixTemplate</b> parameters. They are visual only and are not part of the value.</div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Prefix"
@@ -56,6 +71,18 @@
                      NameSelectors="nameSelectors"
                      Placeholder="Select an item" />
         <br /><br />
+        <BitDropdown Label="Templates"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item">
+            <PrefixTemplate>
+                <BitIcon IconName="@BitIconName.ShoppingCart" Style="padding-inline:0.5rem" />
+            </PrefixTemplate>
+            <SuffixTemplate>
+                <BitIcon IconName="@BitIconName.Info" Style="padding-inline:0.5rem" />
+            </SuffixTemplate>
+        </BitDropdown>
+        <br /><br />
         <BitDropdown Label="Disabled"
                      Prefix="Fruits:"
                      Suffix="kg"
@@ -67,7 +94,7 @@
 </DemoExample>
 
 <DemoExample Title="FitWidth" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3" PreventRenderForMcpClient>
-    <div>Enables fit-content width for the dropdown that sets the width of the component based on its content size.</div>
+    <div>The <b>FitWidth</b> parameter makes the dropdown's width fit its content instead of stretching to the full width of its container.</div>
     <br /><br />
     <BitDropdown Label="Single select"
                  FitWidth
@@ -83,8 +110,8 @@
                  NameSelectors="nameSelectors" />
 </DemoExample>
 
-<DemoExample Title="NoBorder" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4" PreventRenderForMcpClient>
-    <div>The dropdown can be rendered without any border.</div>
+<DemoExample Title="NoBorder & Transparent" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4" PreventRenderForMcpClient>
+    <div>The <b>NoBorder</b> parameter removes the border of the dropdown and the <b>Transparent</b> parameter removes its background, for a minimal look on busy or colorful surfaces.</div>
     <br /><br />
     <div style="max-width:10rem">
         <BitDropdown NoBorder
@@ -97,11 +124,18 @@
                      Items="GetBasicCustoms()"
                      Placeholder="Select items"
                      NameSelectors="nameSelectors" />
+        <br /><br />
+        <div style="padding:0.5rem;border-radius:0.5rem;background:linear-gradient(90deg,#ff00cc7f,#3333997f)">
+            <BitDropdown Transparent
+                         Items="GetBasicCustoms()"
+                         Placeholder="Select an item"
+                         NameSelectors="nameSelectors" />
+        </div>
     </div>
 </DemoExample>
 
 <DemoExample Title="Responsive" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5" PreventRenderForMcpClient>
-    <div>When the <b>IsResponsive</b> parameter is true, on small screens the drop down items will render in a side panel.</div>
+    <div>When the <b>Responsive</b> parameter is true, the callout turns into a swipeable side panel on small screens, making long item lists easier to use on mobile devices.</div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Responsive Dropdown"
@@ -113,7 +147,7 @@
 </DemoExample>
 
 <DemoExample Title="Drop direction" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6" PreventRenderForMcpClient>
-    <div>Explores different drop directions for the BitDropdown component, including automatic and explicit directions.</div>
+    <div>The <b>DropDirection</b> parameter determines which directions the callout is allowed to open in: <b>All</b> picks the best fitting direction automatically, while <b>TopAndBottom</b> (the default) restricts it to opening above or below the dropdown.</div>
     <br />
     <div class="example-content">
         <BitDropdown Label="All"
@@ -131,7 +165,7 @@
 </DemoExample>
 
 <DemoExample Title="Clear button" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7" PreventRenderForMcpClient>
-    <div>Shows the usage of the clear button in BitDropdown, allowing users to clear selected values in single and multi-select dropdowns.</div>
+    <div>The <b>ShowClearButton</b> parameter adds a button that clears the current selection whenever the dropdown has a value, in both single and multi select modes.</div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="clearValue"
@@ -156,7 +190,7 @@
 </DemoExample>
 
 <DemoExample Title="SearchBox" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8" PreventRenderForMcpClient>
-    <div>Examples of dropdowns with search functionality, including default and custom search functions.</div>
+    <div>The <b>ShowSearchBox</b> parameter adds a search input to the callout to filter the items, <b>AutoFocusSearchBox</b> focuses it as soon as the callout opens and <b>SearchFunction</b> replaces the default contains algorithm with a custom one.</div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Single select & auto focus"
@@ -240,7 +274,7 @@
 </DemoExample>
 
 <DemoExample Title="Validation" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10" PreventRenderForMcpClient>
-    <div>Demonstrates how validation can be applied to BitDropdown, including required fields, numeric input, character constraints, email validation, and range validation.</div>
+    <div>BitDropdown integrates with <b>EditForm</b> and data annotations validation: this example validates that a single select value is required and that the number of selected items in the multi select dropdown stays within a range.</div>
     <br />
     <div class="example-content">
         @if (string.IsNullOrEmpty(successMessage))
@@ -280,7 +314,7 @@
 </DemoExample>
 
 <DemoExample Title="Customization" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
-    <div>Shows how to customize dropdowns using templates for header, text, item, placeholder, label, and callout sections.</div>
+    <div>Replace nearly every part of the dropdown with your own content using the <b>HeaderTemplate</b>, <b>TextTemplate</b>, <b>ItemTemplate</b>, <b>PlaceholderTemplate</b>, <b>LabelTemplate</b>, <b>CaretDownIconName</b>, <b>CaretDownTemplate</b>, <b>CalloutHeaderTemplate</b> and <b>CalloutFooterTemplate</b> parameters.</div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Header template"
@@ -343,6 +377,15 @@
                      Placeholder="Select an item"
                      CaretDownIconName="@BitIconName.ScrollUpDown" />
         <br /><br />
+        <BitDropdown Label="CaretDownTemplate"
+                     Items="GetDataCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item">
+            <CaretDownTemplate>
+                <BitIcon IconName="@BitIconName.FavoriteStar" Style="font-size:0.875rem" />
+            </CaretDownTemplate>
+        </BitDropdown>
+        <br /><br />
         <BitDropdown Label="Callout templates"
                      Items="GetDataCustoms()"
                      NameSelectors="nameSelectors"
@@ -358,7 +401,7 @@
 </DemoExample>
 
 <DemoExample Title="Binding" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
-    <div>Demonstrates two-way binding and change event handling for dropdowns, showcasing single and multi-select scenarios.</div>
+    <div>Different ways of binding to the selection and state: two-way binding over the <b>Value</b> and <b>Values</b> parameters, the <b>OnChange</b>, <b>OnValuesChange</b> and <b>OnSelectItem</b> events, the <b>Reselectable</b> parameter that raises the select events even when the already selected item is selected again and two-way binding of the callout's open state via <b>IsOpen</b>.</div>
     <br /><br />
     <div class="example-content">
         <div>Two-way binding:</div><br />
@@ -418,11 +461,32 @@
                      OnSelectItem="(Product item) => selectedItem2 = item" />
         <br />
         <div>Selected Value: @selectedItem2?.Value</div>
+        <br /><br /><br /><br />
+        <div><b>Reselectable</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Reselectable
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     NameSelectors="nameSelectors"
+                     OnSelectItem="(Product item) => selectItemCounter++" />
+        <br />
+        <div>OnSelectItem count: @selectItemCounter</div>
+        <br /><br /><br /><br />
+        <div><b>IsOpen</b>:</div><br />
+        <BitButton OnClick="() => isDropdownOpen = true">Open the dropdown</BitButton>
+        <br /><br />
+        <BitDropdown @bind-IsOpen="isDropdownOpen"
+                     Label="Single select"
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     NameSelectors="nameSelectors" />
     </div>
 </DemoExample>
 
 <DemoExample Title="ComboBox" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
-    <div>When the <b>Combo</b> parameter is true, you can type in BitDropdown input and search between items.</div>
+    <div>The <b>Combo</b> parameter turns the dropdown into a ComboBox: an input renders in place of the selected text that filters the items as you type.</div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample1"
@@ -449,7 +513,7 @@
 </DemoExample>
 
 <DemoExample Title="Chips" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
-    <div>When the <b>Chips</b> parameter is true, shows the selected items like chips in the ComboBox.</div>
+    <div>When the <b>Chips</b> parameter is true, the selected items render as chips, each with a remove button, in both single and multi select ComboBox modes.</div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample2"
@@ -476,7 +540,7 @@
 </DemoExample>
 
 <DemoExample Title="Dynamic ComboBox" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
-    <div>When the <b>Dynamic</b> parameter is true, you can add a new item in the ComboBox.</div>
+    <div>When the <b>Dynamic</b> parameter is true, a text typed into the ComboBox that matches no existing item can be added as a new item; <b>DynamicValueGenerator</b> generates the value of the new item and <b>OnDynamicAdd</b> notifies about the addition.</div>
     <div class="example-content">
         <br />
         <BitDropdown @bind-Value="comboBoxValueSample3"
@@ -491,7 +555,7 @@
         <div>Value: @comboBoxValueSample3</div>
     </div>
     <br /><br /><br /><br />
-    <div>When the <b>Combo</b>, <b>Chips</b> and <b>Dynamic</b> parameters are true, you can add a new item in the ComboBox (pressing the enter key or touching the add button on the mobile).</div>
+    <div>Combining the <b>Combo</b>, <b>Chips</b> and <b>Dynamic</b> parameters, new items get added by pressing the enter key (or the add button of the responsive panel on mobile) and render as removable chips.</div>
     <br />
     <div class="example-content">
         <br />
@@ -522,81 +586,184 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
+<DemoExample Title="Keyboard navigation" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16" PreventRenderForMcpClient>
     <div>
-        Use icons from external libraries like FontAwesome and Bootstrap Icons with the <b>CaretDownIcon</b>, 
-        <b>ClearButtonIcon</b>, <b>ChipsRemoveIcon</b>, <b>SearchBoxIcon</b>, <b>SearchBoxClearIcon</b>, and 
-        <b>ResponsiveCloseIcon</b> parameters on the dropdown and the <b>Icon</b> or <b>IconName</b> 
-        properties on custom type.
+        The dropdown is fully operable with the keyboard: <b>Enter</b>, <b>Space</b> and the arrow keys open the callout,
+        <b>ArrowUp</b> and <b>ArrowDown</b> move the focus between the items, <b>Home</b> and <b>End</b> jump to the first and last item,
+        <b>PageUp</b> and <b>PageDown</b> jump ten items at a time, typing characters moves the focus to the next matching item,
+        <b>Enter</b> and <b>Space</b> select the focused item and <b>Escape</b> closes the callout.
     </div>
-    
-    <br />
     <br />
-
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
-
     <div class="example-content">
-        <BitDropdown Label="Caret down icon (external)"
-                     CaretDownIcon="@BitIconInfo.Css("fa-solid fa-circle-chevron-down")"
+        <BitDropdown Label="Single select"
                      Items="GetBasicCustoms()"
                      NameSelectors="nameSelectors"
                      Placeholder="Select an item" />
-        
         <br /><br />
-        
-        <BitDropdown Label="Clear button icon (external)"
-                     ShowClearButton
-                     ClearButtonIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
+        <BitDropdown Label="Multi select"
+                     MultiSelect
                      Items="GetBasicCustoms()"
-                     NameSelectors="nameSelectors"
-                     Placeholder="Select an item" />
-        
-        <br /><br />
-        
-        <BitDropdown Label="Chips remove icon (external)"
-                     Chips
+                     Placeholder="Select items"
+                     NameSelectors="nameSelectors" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Select all" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17" PreventRenderForMcpClient>
+    <div>
+        When the <b>ShowSelectAll</b> parameter is true, a select all item renders at the top of the callout of the
+        multi select dropdown that selects or clears all items at once and shows an indeterminate state when only
+        some items are selected. Disabled items are skipped, the <b>SelectAllText</b> parameter customizes its text
+        and combined with the search box, it only applies to the search result.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown @bind-Values="selectAllValues"
                      MultiSelect
-                     ChipsRemoveIcon="@BitIconInfo.Css("bi bi-x-circle")"
+                     ShowSelectAll
                      Items="GetBasicCustoms()"
                      NameSelectors="nameSelectors"
-                     Placeholder="Select items" />
-
+                     Placeholder="Select items"
+                     Label="Select all" />
+        <br />
+        <div>Values: @string.Join(',', selectAllValues)</div>
         <br /><br />
-
-        <BitDropdown Label="Search box icons (external)"
+        <BitDropdown MultiSelect
+                     ShowSelectAll
                      ShowSearchBox
-                     SearchBoxIcon="@BitIconInfo.Css("fa-solid fa-magnifying-glass")"
-                     SearchBoxClearIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
+                     SelectAllText="Select all of them"
                      Items="GetBasicCustoms()"
                      NameSelectors="nameSelectors"
-                     Placeholder="Select an item" />
-
-        <br /><br />
+                     Placeholder="Select items"
+                     DefaultValue="@string.Empty"
+                     SearchBoxPlaceholder="Search items"
+                     Label="Custom text & search" />
+    </div>
+</DemoExample>
 
-        <BitDropdown Label="Item icons (IconName - Fluent UI)"
-                     Items="GetExternalIconCustoms()"
+<DemoExample Title="Selection limit" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18" PreventRenderForMcpClient>
+    <div>
+        The <b>MaxSelectedItems</b> parameter limits the number of items that can be selected in the multi select
+        dropdown; once the limit is reached, the remaining items become disabled until an item gets unselected.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown @bind-Values="maxSelectedValues"
+                     MultiSelect
+                     MaxSelectedItems="2"
+                     Items="GetBasicCustoms()"
                      NameSelectors="nameSelectors"
-                     Placeholder="Select an item" />
+                     Placeholder="Select up to 2 items"
+                     Label="Max 2 items" />
+        <br />
+        <div>Values: @string.Join(',', maxSelectedValues)</div>
+    </div>
+</DemoExample>
 
+<DemoExample Title="Empty state" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
+    <div>
+        When there is no item to show in the callout (an empty list or a search without a result), the dropdown
+        renders a message that can be customized using the <b>EmptyText</b> and <b>EmptyTemplate</b> parameters.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="Default"
+                     Items="emptyCustoms"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item"
+                     TItem="Product" TValue="string" />
         <br /><br />
-
-        <BitDropdown Label="Item icons (Icon - FontAwesome)"
-                     Items="GetExternalIconFaCustoms()"
+        <BitDropdown Label="EmptyText"
+                     Items="emptyCustoms"
                      NameSelectors="nameSelectors"
-                     Placeholder="Select an item" />
-
+                     Placeholder="Select an item"
+                     EmptyText="There is nothing here!"
+                     TItem="Product" TValue="string" />
+        <br /><br />
+        <BitDropdown Label="EmptyTemplate"
+                     Items="emptyCustoms"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item"
+                     TItem="Product" TValue="string">
+            <EmptyTemplate>
+                <div class="custom-drp custom-drp-empty">
+                    <BitIcon IconName="@BitIconName.SearchIssue" />
+                    <div>Nothing to show!</div>
+                </div>
+            </EmptyTemplate>
+        </BitDropdown>
         <br /><br />
+        <BitDropdown Label="Search without result"
+                     ShowSearchBox
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search for anything" />
+    </div>
+</DemoExample>
 
-        <BitDropdown Label="Item icons (Icon - Bootstrap Icons)"
-                     Items="GetExternalIconBiCustoms()"
+<DemoExample Title="Virtualization" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20">
+    <div>The <b>Virtualize</b> parameter renders only the visible items instead of the whole list, keeping the dropdown fast with thousands of items — either over a local <b>Items</b> collection or by loading pages on demand through an <b>ItemsProvider</b> (with <b>InitialSelectedItems</b> pre-selecting values that have not been loaded yet). The <b>VirtualizePlaceholder</b> template renders in place of the items that are still loading.</div>
+    <br /><br /><br />
+    <div class="example-content">
+        <div>With <b>Items</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Virtualize
+                     Items="virtualizeCustoms1"
+                     Placeholder="Select an item"
+                     NameSelectors="nameSelectors" />
+        <br />
+        <BitDropdown Label="Multi select"
+                     Virtualize
+                     MultiSelect
+                     Items="virtualizeCustoms2"
+                     Placeholder="Select items"
+                     NameSelectors="nameSelectors" />
+        <br /><br /><br /><br />
+        <div>With <b>ItemsProvider</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Virtualize
+                     ItemsProvider="LoadItems"
+                     Placeholder="Select an item"
+                     NameSelectors="nameSelectors" />
+        <br />
+        <BitDropdown Label="Multi select"
+                     Virtualize
+                     MultiSelect
+                     ItemsProvider="LoadItems"
+                     Placeholder="Select items"
+                     NameSelectors="nameSelectors" />
+        <br />
+        <BitDropdown Label="VirtualizePlaceholder"
+                     Virtualize
+                     ItemsProvider="LoadItems"
+                     Placeholder="Select an item"
                      NameSelectors="nameSelectors"
-                     Placeholder="Select an item" />
+                     TItem="Product" TValue="string">
+            <VirtualizePlaceholder>
+                <div style="padding:0 0.5rem;color:gray">Loading @(context.Index)...</div>
+            </VirtualizePlaceholder>
+        </BitDropdown>
+        <br /><br /><br /><br />
+        <div>With <b>ItemsProvider and InitialSelectedItems</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Virtualize
+                     ItemsProvider="LoadItems"
+                     Placeholder="Select an item"
+                     InitialSelectedItems="initialSelectedItem"
+                     NameSelectors="nameSelectors" />
+        <br />
+        <BitDropdown Label="Multi select"
+                     Virtualize
+                     MultiSelect
+                     ItemsProvider="LoadItems"
+                     Placeholder="Select items"
+                     InitialSelectedItems="initialSelectedItems"
+                     NameSelectors="nameSelectors" />
     </div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17" PreventRenderForMcpClient>
-    <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
+<DemoExample Title="Color" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21" PreventRenderForMcpClient>
+    <div>The <b>Color</b> parameter paints the dropdown's accents (the focus border, the search icon and the check boxes of the multi select items) in one of the theme colors, <b>Primary</b> being the default.</div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Primary"
@@ -657,8 +824,91 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18">
-    <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
+<DemoExample Title="External Icons" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22">
+    <div>
+        Use icons from external libraries like FontAwesome and Bootstrap Icons with the <b>CaretDownIcon</b>,
+        <b>ClearButtonIcon</b>, <b>ChipsRemoveIcon</b>, <b>SearchBoxIcon</b>, <b>SearchBoxClearIcon</b>,
+        <b>ResponsiveCloseIcon</b>, and <b>ItemCheckIcon</b> parameters on the dropdown and the <b>Icon</b> or <b>IconName</b>
+        properties on custom type.
+    </div>
+    
+    <br />
+    <br />
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
+
+    <div class="example-content">
+        <BitDropdown Label="Caret down icon (external)"
+                     CaretDownIcon="@BitIconInfo.Css("fa-solid fa-circle-chevron-down")"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item" />
+        
+        <br /><br />
+        
+        <BitDropdown Label="Clear button icon (external)"
+                     ShowClearButton
+                     ClearButtonIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item" />
+        
+        <br /><br />
+        
+        <BitDropdown Label="Chips remove icon (external)"
+                     Chips
+                     MultiSelect
+                     ChipsRemoveIcon="@BitIconInfo.Css("bi bi-x-circle")"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select items" />
+
+        <br /><br />
+
+        <BitDropdown Label="Search box icons (external)"
+                     ShowSearchBox
+                     SearchBoxIcon="@BitIconInfo.Css("fa-solid fa-magnifying-glass")"
+                     SearchBoxClearIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item" />
+
+        <br /><br />
+
+        <BitDropdown Label="Item check icon (external)"
+                     MultiSelect
+                     ItemCheckIcon="@BitIconInfo.Css("fa-solid fa-heart")"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     DefaultValues="@(Array.Empty<string>())"
+                     Placeholder="Select items" />
+
+        <br /><br />
+
+        <BitDropdown Label="Item icons (IconName - Fluent UI)"
+                     Items="GetExternalIconCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item" />
+
+        <br /><br />
+
+        <BitDropdown Label="Item icons (Icon - FontAwesome)"
+                     Items="GetExternalIconFaCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item" />
+
+        <br /><br />
+
+        <BitDropdown Label="Item icons (Icon - Bootstrap Icons)"
+                     Items="GetExternalIconBiCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Style & Class" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23">
+    <div>Style the dropdown at every level: inline <b>Style</b> and <b>Class</b> on the root element, per-item styles and classes on the items, and the <b>Styles</b> and <b>Classes</b> parameters that target each internal part of the component individually.</div>
     <br /><br />
     <div class="example-content">
         <div>Component's Style & Class:</div><br />
@@ -699,8 +949,8 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
-    <div>Use BitDropdown in right-to-left (RTL).</div>
+<DemoExample Title="RTL" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24" PreventRenderForMcpClient>
+    <div>Setting the <b>Dir</b> parameter to <b>Rtl</b> renders the dropdown right-to-left for languages like Arabic, Persian and Hebrew, in both the regular callout and the responsive panel.</div>
     <br />
     <dir dir="rtl" style="padding:0">
         <div class="example-content">
@@ -726,52 +976,3 @@
         </div>
     </dir>
 </DemoExample>
-
-<DemoExample Title="Virtualization" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20">
-    <div>Demonstrates virtualization in the BitDropdown component for handling large datasets efficiently.</div>
-    <br /><br /><br />
-    <div class="example-content">
-        <div>With <b>Items</b>:</div><br />
-        <BitDropdown Label="Single select"
-                     Virtualize
-                     Items="virtualizeCustoms1"
-                     Placeholder="Select an item"
-                     NameSelectors="nameSelectors" />
-        <br />
-        <BitDropdown Label="Multi select"
-                     Virtualize
-                     MultiSelect
-                     Items="virtualizeCustoms2"
-                     Placeholder="Select items"
-                     NameSelectors="nameSelectors" />
-        <br /><br /><br /><br />
-        <div>With <b>ItemsProvider</b>:</div><br />
-        <BitDropdown Label="Single select"
-                     Virtualize
-                     ItemsProvider="LoadItems"
-                     Placeholder="Select an item"
-                     NameSelectors="nameSelectors" />
-        <br />
-        <BitDropdown Label="Multi select"
-                     Virtualize
-                     MultiSelect
-                     ItemsProvider="LoadItems"
-                     Placeholder="Select items"
-                     NameSelectors="nameSelectors" /><br /><br /><br /><br />
-        <div>With <b>ItemsProvider and InitialSelectedItems</b>:</div><br />
-        <BitDropdown Label="Single select"
-                     Virtualize
-                     ItemsProvider="LoadItems"
-                     Placeholder="Select an item"
-                     InitialSelectedItems="initialSelectedItem"
-                     NameSelectors="nameSelectors" />
-        <br />
-        <BitDropdown Label="Multi select"
-                     Virtualize
-                     MultiSelect
-                     ItemsProvider="LoadItems"
-                     Placeholder="Select items"
-                     InitialSelectedItems="initialSelectedItems"
-                     NameSelectors="nameSelectors" />
-    </div>
-</DemoExample>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.cs
index 7c77ac9561..fd25183d9c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.cs
@@ -158,6 +158,14 @@ private List<Product> GetRtlCustoms() =>
 
 
 
+    private readonly List<Product> emptyCustoms = [];
+
+    private IEnumerable<string> selectAllValues = [];
+    private IEnumerable<string> maxSelectedValues = [];
+
+    private bool isDropdownOpen;
+    private int selectItemCounter;
+
     private string controlledValue = "f-app";
     private IEnumerable<string> controlledValues = ["f-app", "f-ban"];
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
index 4aa2f2dc4b..44515716be 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
@@ -30,6 +30,21 @@ public partial class _BitDropdownCustomDemo
              Items=""GetBasicCustoms()""
              DefaultValue=""@(""f-ora"")""
              Placeholder=""Select an item""
+             NameSelectors=""nameSelectors"" />
+
+<BitDropdown Label=""ReadOnly""
+             ReadOnly
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@(""f-app"")""
+             Placeholder=""Select an item""
+             NameSelectors=""nameSelectors"" />
+
+<BitDropdown Label=""Custom delimiter""
+             MultiSelect
+             MultiSelectDelimiter="" - ""
+             Items=""GetBasicCustoms()""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"" })""
+             Placeholder=""Select items""
              NameSelectors=""nameSelectors"" />";
     private readonly string example1CsharpCode = @"
 public class Product
@@ -92,6 +107,18 @@ public class Product
              NameSelectors=""nameSelectors""
              Placeholder=""Select an item"" />
 
+<BitDropdown Label=""Templates""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"">
+    <PrefixTemplate>
+        <BitIcon IconName=""@BitIconName.ShoppingCart"" Style=""padding-inline:0.5rem"" />
+    </PrefixTemplate>
+    <SuffixTemplate>
+        <BitIcon IconName=""@BitIconName.Info"" Style=""padding-inline:0.5rem"" />
+    </SuffixTemplate>
+</BitDropdown>
+
 <BitDropdown Label=""Disabled""
              Prefix=""Fruits:""
              Suffix=""kg""
@@ -204,7 +231,14 @@ public class Product
              MultiSelect
              Items=""GetBasicCustoms()""
              Placeholder=""Select items""
-             NameSelectors=""nameSelectors"" />";
+             NameSelectors=""nameSelectors"" />
+
+<div style=""padding:0.5rem;border-radius:0.5rem;background:linear-gradient(90deg,#ff00cc7f,#3333997f)"">
+    <BitDropdown Transparent
+                 Items=""GetBasicCustoms()""
+                 Placeholder=""Select an item""
+                 NameSelectors=""nameSelectors"" />
+</div>";
     private readonly string example4CsharpCode = @"
 public class Product
 {
@@ -725,6 +759,15 @@ public class Product
              Placeholder=""Select an item""
              CaretDownIconName=""@BitIconName.ScrollUpDown"" />
 
+<BitDropdown Label=""CaretDownTemplate""
+             Items=""GetDataCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"">
+    <CaretDownTemplate>
+        <BitIcon IconName=""@BitIconName.FavoriteStar"" Style=""font-size:0.875rem"" />
+    </CaretDownTemplate>
+</BitDropdown>
+
 <BitDropdown Label=""Callout templates""
              Items=""GetDataCustoms()""
              NameSelectors=""nameSelectors""
@@ -833,8 +876,28 @@ public class DropdownItemData
              DefaultValue=""@string.Empty""
              NameSelectors=""nameSelectors""
              OnSelectItem=""(Product item) => selectedItem2 = item"" />
-<div>Selected Value: @selectedItem2?.Value</div>";
+<div>Selected Value: @selectedItem2?.Value</div>
+
+<BitDropdown Label=""Single select""
+             Reselectable
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             NameSelectors=""nameSelectors""
+             OnSelectItem=""(Product item) => selectItemCounter++"" />
+<div>OnSelectItem count: @selectItemCounter</div>
+
+<BitButton OnClick=""() => isDropdownOpen = true"">Open the dropdown</BitButton>
+<BitDropdown @bind-IsOpen=""isDropdownOpen""
+             Label=""Single select""
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             NameSelectors=""nameSelectors"" />";
     private readonly string example12CsharpCode = @"
+private bool isDropdownOpen;
+private int selectItemCounter;
+
 private string controlledValue = ""f-app"";
 private IEnumerable<string> controlledValues = [""f-app"", ""f-ban""];
 
@@ -884,171 +947,6 @@ public class Product
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example20RazorCode = @"
-<BitDropdown Label=""Single select""
-             Virtualize
-             Items=""virtualizeCustoms1""
-             Placeholder=""Select an item""
-             NameSelectors=""nameSelectors"" />
-
-<BitDropdown Label=""Multi select""
-             Virtualize
-             MultiSelect
-             Items=""virtualizeCustoms2""
-             Placeholder=""Select items""
-             NameSelectors=""nameSelectors"" />
-
-
-<BitDropdown Label=""Single select""
-             Virtualize
-             ItemsProvider=""LoadItems""
-             Placeholder=""Select an item""
-             NameSelectors=""nameSelectors"" />
-
-<BitDropdown Label=""Multi select""
-             Virtualize
-             MultiSelect
-             ItemsProvider=""LoadItems""
-             Placeholder=""Select items""
-             NameSelectors=""nameSelectors"" />
-
-<BitDropdown Label=""Single select""
-             Virtualize
-             ItemsProvider=""LoadItems""
-             Placeholder=""Select an item""
-             InitialSelectedItems=""initialSelectedItem""
-             NameSelectors=""nameSelectors"" />
-
-<BitDropdown Label=""Multi select""
-             Virtualize
-             MultiSelect
-             ItemsProvider=""LoadItems""
-             Placeholder=""Select items""
-             InitialSelectedItems=""initialSelectedItems""
-             NameSelectors=""nameSelectors"" />";
-    private readonly string example20CsharpCode = @"
-public class Product
-{
-    public string? Label { get; set; }
-    public string? Key { get; set; }
-    public object? Payload { get; set; }
-    public bool Disabled { get; set; }
-    public bool Visible { get; set; } = true;
-    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
-    public string? Text { get; set; }
-    public string? Title { get; set; }
-    public string? Value { get; set; }
-}
-
-private ICollection<Product>? virtualizeCustoms1;
-private ICollection<Product>? virtualizeCustoms2;
-
-private IEnumerable<Product> initialSelectedItem = [
-    new()
-    {
-        Text = ""Product 100"",
-        Value = ""100"",
-        Payload = new ProductDto {
-            Id = 100,
-            Price = 60,
-            Name = ""Product 100""
-        },
-        Label = ""Product 100"",
-        Type = BitDropdownItemType.Normal
-    }
-];
-
-private IEnumerable<Product> initialSelectedItems = [
-    new()
-    {
-        Text = ""Product 100"",
-        Value = ""100"",
-        Payload = new ProductDto {
-            Id = 100,
-            Price = 60,
-            Name = ""Product 100""
-        },
-        Label = ""Product 100"",
-        Type = BitDropdownItemType.Normal
-    },
-    new()
-    {
-        Text = ""Product 99"",
-        Value = ""99"",
-        Payload = new ProductDto {
-            Id = 99,
-            Price = 75,
-            Name = ""Product 99""
-        },
-        Label = ""Product 99"",
-        Type = BitDropdownItemType.Normal
-    }
-];
-
-protected override void OnInitialized()
-{
-    virtualizeCustoms1 = Enumerable.Range(1, 10_000)
-                                   .Select(p => new Product { Text = $""Produce {p}"", Value = p.ToString() })
-                                   .ToArray();
-
-    virtualizeCustoms2 = Enumerable.Range(1, 10_000)
-                                   .Select(p => new Product { Text = $""Produce {p}"", Value = p.ToString() })
-                                   .ToArray();
-}
-
-private BitDropdownNameSelectors<Product, string?> nameSelectors = new() 
-{
-    AriaLabel = { Selector = c => c.Label },
-    Id = { Selector = c => c.Key },
-    Data = { Selector = c => c.Payload },
-    IsEnabled = { Selector = c => c.Disabled is false },
-    IsHidden = { Selector = c => c.Visible is false },
-    ItemType = { Selector = c => c.Type },
-    Text = { Selector = c => c.Text },
-    Title = { Selector = c => c.Title },
-    Value = { Selector = c => c.Value },
-};
-
-private async ValueTask<BitDropdownItemsProviderResult<Product>> LoadItems(
-    BitDropdownItemsProviderRequest<Product> request)
-{
-    try
-    {
-        // https://docs.microsoft.com/en-us/odata/concepts/queryoptions-overview
-
-        var query = new Dictionary<string, object?>()
-        {
-            { ""$top"", request.Count == 0 ? 50 : request.Count },
-            { ""$skip"", request.StartIndex }
-        };
-
-        if (string.IsNullOrEmpty(request.Search) is false)
-        {
-            query.Add(""$filter"", $""contains(Name,'{request.Search}')"");
-        }
-
-        var url = NavManager.GetUriWithQueryParameters(""api/Products/GetProducts"", query);
-
-        var data = await HttpClient.GetFromJsonAsync(url, AppJsonContext.Default.PagedResultProductDto);
-
-        var items = data!.Items.Select(i => new Product
-        {
-            Text = i.Name,
-            Value = i.Id.ToString(),
-            Payload = i,
-            Label = i.Name,
-            Disabled = false,
-            Type = BitDropdownItemType.Normal
-        }).ToList();
-
-        return BitDropdownItemsProviderResult.From(items, data!.TotalCount);
-    }
-    catch
-    {
-        return BitDropdownItemsProviderResult.From(new List<Product>(), 0);
-    }
-}";
-
     private readonly string example13RazorCode = @"
 <BitDropdown @bind-Value=""comboBoxValueSample1""
              Combo
@@ -1271,52 +1169,16 @@ public class Product
 };";
 
     private readonly string example16RazorCode = @"
-<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
-<link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
-
-<BitDropdown Label=""Caret down icon (external)""
-             CaretDownIcon=""@BitIconInfo.Css(""fa-solid fa-circle-chevron-down"")""
-             Items=""GetBasicCustoms()""
-             NameSelectors=""nameSelectors""
-             Placeholder=""Select an item"" />
-        
-<BitDropdown Label=""Clear button icon (external)""
-             ShowClearButton
-             ClearButtonIcon=""@BitIconInfo.Css(""fa-solid fa-circle-xmark"")""
+<BitDropdown Label=""Single select""
              Items=""GetBasicCustoms()""
              NameSelectors=""nameSelectors""
              Placeholder=""Select an item"" />
-        
-<BitDropdown Label=""Chips remove icon (external)""
-             Chips
+
+<BitDropdown Label=""Multi select""
              MultiSelect
-             ChipsRemoveIcon=""@BitIconInfo.Css(""bi bi-x-circle"")""
-             Items=""GetBasicCustoms()""
-             NameSelectors=""nameSelectors""
-             Placeholder=""Select items"" />
-        
-<BitDropdown Label=""Search box icons (external)""
-             ShowSearchBox
-             SearchBoxIcon=""@BitIconInfo.Css(""fa-solid fa-magnifying-glass"")""
-             SearchBoxClearIcon=""@BitIconInfo.Css(""fa-solid fa-circle-xmark"")""
              Items=""GetBasicCustoms()""
-             NameSelectors=""nameSelectors""
-             Placeholder=""Select an item"" />
-
-<BitDropdown Label=""Item icons (IconName - Fluent UI)""
-             Items=""GetExternalIconCustoms()""
-             NameSelectors=""nameSelectors""
-             Placeholder=""Select an item"" />
-
-<BitDropdown Label=""Item icons (Icon - FontAwesome)""
-             Items=""GetExternalIconFaCustoms()""
-             NameSelectors=""nameSelectors""
-             Placeholder=""Select an item"" />
-
-<BitDropdown Label=""Item icons (Icon - Bootstrap Icons)""
-             Items=""GetExternalIconBiCustoms()""
-             NameSelectors=""nameSelectors""
-             Placeholder=""Select an item"" />";
+             Placeholder=""Select items""
+             NameSelectors=""nameSelectors"" />";
     private readonly string example16CsharpCode = @"
 public class Product
 {
@@ -1329,8 +1191,6 @@ public class Product
     public string? Text { get; set; }
     public string? Title { get; set; }
     public string? Value { get; set; }
-    public BitIconInfo? Icon { get; set; }
-    public string? IconName { get; set; }
 }
 
 private List<Product> GetBasicCustoms() => new()
@@ -1347,66 +1207,387 @@ public class Product
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };
 
-private List<Product> GetExternalIconCustoms() => new()
+private BitDropdownNameSelectors<Product, string?> nameSelectors = new()
 {
-    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
-    new() { Text = ""Apple"", Value = ""f-app"", IconName = nameof(BitIconName.AllApps) },
-    new() { Text = ""Banana"", Value = ""f-ban"", IconName = nameof(BitIconName.Calculator) },
-    new() { Text = ""Orange"", Value = ""f-ora"", IconName = nameof(BitIconName.FavoriteStar), Disabled = true },
-    new() { Text = ""Grape"", Value = ""f-gra"", IconName = nameof(BitIconName.Edit) },
+    AriaLabel = { Selector = c => c.Label },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+};";
+
+    private readonly string example17RazorCode = @"
+<BitDropdown @bind-Values=""selectAllValues""
+             MultiSelect
+             ShowSelectAll
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items""
+             Label=""Select all"" />
+<div>Values: @string.Join(',', selectAllValues)</div>
+
+<BitDropdown MultiSelect
+             ShowSelectAll
+             ShowSearchBox
+             SelectAllText=""Select all of them""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items""
+             DefaultValue=""@string.Empty""
+             SearchBoxPlaceholder=""Search items""
+             Label=""Custom text & search"" />";
+    private readonly string example17CsharpCode = @"
+private IEnumerable<string> selectAllValues = [];
+
+public class Product
+{
+    public string? Label { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
+
+private List<Product> GetBasicCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
     new() { Type = BitDropdownItemType.Divider },
     new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
-    new() { Text = ""Broccoli"", Value = ""v-bro"", IconName = nameof(BitIconName.Health) },
-    new() { Text = ""Carrot"", Value = ""v-car"", IconName = nameof(BitIconName.Add) },
-    new() { Text = ""Lettuce"", Value = ""v-let"", IconName = nameof(BitIconName.ChevronDown) }
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
 };
 
-private List<Product> GetExternalIconFaCustoms() => new()
+private BitDropdownNameSelectors<Product, string?> nameSelectors = new()
+{
+    AriaLabel = { Selector = c => c.Label },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+};";
+
+    private readonly string example18RazorCode = @"
+<BitDropdown @bind-Values=""maxSelectedValues""
+             MultiSelect
+             MaxSelectedItems=""2""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select up to 2 items""
+             Label=""Max 2 items"" />
+<div>Values: @string.Join(',', maxSelectedValues)</div>";
+    private readonly string example18CsharpCode = @"
+private IEnumerable<string> maxSelectedValues = [];
+
+public class Product
+{
+    public string? Label { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
+
+private List<Product> GetBasicCustoms() => new()
 {
     new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
-    new() { Text = ""Apple"", Value = ""f-app"", Icon = BitIconInfo.Css(""fa-solid fa-apple-whole"") },
-    new() { Text = ""Banana"", Value = ""f-ban"", Icon = BitIconInfo.Css(""fa-solid fa-moon"") },
-    new() { Text = ""Orange"", Value = ""f-ora"", Icon = BitIconInfo.Fa(""solid lemon""), Disabled = true },
-    new() { Text = ""Grape"", Value = ""f-gra"", Icon = BitIconInfo.Css(""fa-solid fa-droplet"") },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
     new() { Type = BitDropdownItemType.Divider },
     new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
-    new() { Text = ""Broccoli"", Value = ""v-bro"", Icon = BitIconInfo.Css(""fa-solid fa-seedling"") },
-    new() { Text = ""Carrot"", Value = ""v-car"", Icon = BitIconInfo.Css(""fa-solid fa-carrot"") },
-    new() { Text = ""Lettuce"", Value = ""v-let"", Icon = BitIconInfo.Css(""fa-solid fa-leaf"") }
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
 };
 
-private List<Product> GetExternalIconBiCustoms() => new()
+private BitDropdownNameSelectors<Product, string?> nameSelectors = new()
+{
+    AriaLabel = { Selector = c => c.Label },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+};";
+
+    private readonly string example19RazorCode = @"
+<BitDropdown Label=""Default""
+             Items=""emptyCustoms""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             TItem=""Product"" TValue=""string"" />
+
+<BitDropdown Label=""EmptyText""
+             Items=""emptyCustoms""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             EmptyText=""There is nothing here!""
+             TItem=""Product"" TValue=""string"" />
+
+<BitDropdown Label=""EmptyTemplate""
+             Items=""emptyCustoms""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             TItem=""Product"" TValue=""string"">
+    <EmptyTemplate>
+        <div class=""custom-drp custom-drp-empty"">
+            <BitIcon IconName=""@BitIconName.SearchIssue"" />
+            <div>Nothing to show!</div>
+        </div>
+    </EmptyTemplate>
+</BitDropdown>
+
+<BitDropdown Label=""Search without result""
+             ShowSearchBox
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search for anything"" />";
+    private readonly string example19CsharpCode = @"
+private readonly List<Product> emptyCustoms = [];
+
+public class Product
+{
+    public string? Label { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
+
+private List<Product> GetBasicCustoms() => new()
 {
     new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
-    new() { Text = ""Apple"", Value = ""f-app"", Icon = BitIconInfo.Bi(""apple"") },
-    new() { Text = ""Banana"", Value = ""f-ban"", Icon = BitIconInfo.Bi(""flower1"") },
-    new() { Text = ""Orange"", Value = ""f-ora"", Icon = BitIconInfo.Css(""bi bi-sun""), Disabled = true },
-    new() { Text = ""Grape"", Value = ""f-gra"", Icon = BitIconInfo.Bi(""droplet-fill"") },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
     new() { Type = BitDropdownItemType.Divider },
     new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
-    new() { Text = ""Broccoli"", Value = ""v-bro"", Icon = BitIconInfo.Bi(""tree-fill"") },
-    new() { Text = ""Carrot"", Value = ""v-car"", Icon = BitIconInfo.Bi(""egg"") },
-    new() { Text = ""Lettuce"", Value = ""v-let"", Icon = BitIconInfo.Bi(""flower2"") }
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
 };
 
-private BitDropdownNameSelectors<Product, string> nameSelectors = new()
+private BitDropdownNameSelectors<Product, string?> nameSelectors = new()
 {
     AriaLabel = { Selector = c => c.Label },
-    Class = { Selector = c => c.CssClass },
     Id = { Selector = c => c.Key },
     Data = { Selector = c => c.Payload },
     IsEnabled = { Selector = c => c.Disabled is false },
     IsHidden = { Selector = c => c.Visible is false },
     ItemType = { Selector = c => c.Type },
-    Style = { Selector = c => c.CssStyle },
     Text = { Selector = c => c.Text },
     Title = { Selector = c => c.Title },
     Value = { Selector = c => c.Value },
-    Icon = { Selector = c => c.Icon },
-    IconName = { Selector = c => c.IconName },
 };";
 
-    private readonly string example17RazorCode = @"
+    private readonly string example20RazorCode = @"
+<BitDropdown Label=""Single select""
+             Virtualize
+             Items=""virtualizeCustoms1""
+             Placeholder=""Select an item""
+             NameSelectors=""nameSelectors"" />
+
+<BitDropdown Label=""Multi select""
+             Virtualize
+             MultiSelect
+             Items=""virtualizeCustoms2""
+             Placeholder=""Select items""
+             NameSelectors=""nameSelectors"" />
+
+
+<BitDropdown Label=""Single select""
+             Virtualize
+             ItemsProvider=""LoadItems""
+             Placeholder=""Select an item""
+             NameSelectors=""nameSelectors"" />
+
+<BitDropdown Label=""Multi select""
+             Virtualize
+             MultiSelect
+             ItemsProvider=""LoadItems""
+             Placeholder=""Select items""
+             NameSelectors=""nameSelectors"" />
+
+<BitDropdown Label=""VirtualizePlaceholder""
+             Virtualize
+             ItemsProvider=""LoadItems""
+             Placeholder=""Select an item""
+             NameSelectors=""nameSelectors""
+             TItem=""Product"" TValue=""string"">
+    <VirtualizePlaceholder>
+        <div style=""padding:0 0.5rem;color:gray"">Loading @(context.Index)...</div>
+    </VirtualizePlaceholder>
+</BitDropdown>
+
+<BitDropdown Label=""Single select""
+             Virtualize
+             ItemsProvider=""LoadItems""
+             Placeholder=""Select an item""
+             InitialSelectedItems=""initialSelectedItem""
+             NameSelectors=""nameSelectors"" />
+
+<BitDropdown Label=""Multi select""
+             Virtualize
+             MultiSelect
+             ItemsProvider=""LoadItems""
+             Placeholder=""Select items""
+             InitialSelectedItems=""initialSelectedItems""
+             NameSelectors=""nameSelectors"" />";
+    private readonly string example20CsharpCode = @"
+public class Product
+{
+    public string? Label { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
+
+private ICollection<Product>? virtualizeCustoms1;
+private ICollection<Product>? virtualizeCustoms2;
+
+private IEnumerable<Product> initialSelectedItem = [
+    new()
+    {
+        Text = ""Product 100"",
+        Value = ""100"",
+        Payload = new ProductDto {
+            Id = 100,
+            Price = 60,
+            Name = ""Product 100""
+        },
+        Label = ""Product 100"",
+        Type = BitDropdownItemType.Normal
+    }
+];
+
+private IEnumerable<Product> initialSelectedItems = [
+    new()
+    {
+        Text = ""Product 100"",
+        Value = ""100"",
+        Payload = new ProductDto {
+            Id = 100,
+            Price = 60,
+            Name = ""Product 100""
+        },
+        Label = ""Product 100"",
+        Type = BitDropdownItemType.Normal
+    },
+    new()
+    {
+        Text = ""Product 99"",
+        Value = ""99"",
+        Payload = new ProductDto {
+            Id = 99,
+            Price = 75,
+            Name = ""Product 99""
+        },
+        Label = ""Product 99"",
+        Type = BitDropdownItemType.Normal
+    }
+];
+
+protected override void OnInitialized()
+{
+    virtualizeCustoms1 = Enumerable.Range(1, 10_000)
+                                   .Select(p => new Product { Text = $""Produce {p}"", Value = p.ToString() })
+                                   .ToArray();
+
+    virtualizeCustoms2 = Enumerable.Range(1, 10_000)
+                                   .Select(p => new Product { Text = $""Produce {p}"", Value = p.ToString() })
+                                   .ToArray();
+}
+
+private BitDropdownNameSelectors<Product, string?> nameSelectors = new()
+{
+    AriaLabel = { Selector = c => c.Label },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+};
+
+private async ValueTask<BitDropdownItemsProviderResult<Product>> LoadItems(
+    BitDropdownItemsProviderRequest<Product> request)
+{
+    try
+    {
+        // https://docs.microsoft.com/en-us/odata/concepts/queryoptions-overview
+
+        var query = new Dictionary<string, object?>()
+        {
+            { ""$top"", request.Count == 0 ? 50 : request.Count },
+            { ""$skip"", request.StartIndex }
+        };
+
+        if (string.IsNullOrEmpty(request.Search) is false)
+        {
+            query.Add(""$filter"", $""contains(Name,'{request.Search}')"");
+        }
+
+        var url = NavManager.GetUriWithQueryParameters(""api/Products/GetProducts"", query);
+
+        var data = await HttpClient.GetFromJsonAsync(url, AppJsonContext.Default.PagedResultProductDto);
+
+        var items = data!.Items.Select(i => new Product
+        {
+            Text = i.Name,
+            Value = i.Id.ToString(),
+            Payload = i,
+            Label = i.Name,
+            Disabled = false,
+            Type = BitDropdownItemType.Normal
+        }).ToList();
+
+        return BitDropdownItemsProviderResult.From(items, data!.TotalCount);
+    }
+    catch
+    {
+        return BitDropdownItemsProviderResult.From(new List<Product>(), 0);
+    }
+}";
+
+    private readonly string example21RazorCode = @"
 <BitDropdown Label=""Primary""
              MultiSelect
              Color=""BitColor.Primary""
@@ -1462,7 +1643,7 @@ public class Product
              Items=""GetBasicCustoms()""
              NameSelectors=""nameSelectors""
              Placeholder=""Select items"" />";
-    private readonly string example17CsharpCode = @"
+    private readonly string example21CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
@@ -1503,7 +1684,151 @@ public class Product
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example18RazorCode = @"
+    private readonly string example22RazorCode = @"
+<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
+<link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
+
+<BitDropdown Label=""Caret down icon (external)""
+             CaretDownIcon=""@BitIconInfo.Css(""fa-solid fa-circle-chevron-down"")""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"" />
+        
+<BitDropdown Label=""Clear button icon (external)""
+             ShowClearButton
+             ClearButtonIcon=""@BitIconInfo.Css(""fa-solid fa-circle-xmark"")""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"" />
+        
+<BitDropdown Label=""Chips remove icon (external)""
+             Chips
+             MultiSelect
+             ChipsRemoveIcon=""@BitIconInfo.Css(""bi bi-x-circle"")""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items"" />
+        
+<BitDropdown Label=""Search box icons (external)""
+             ShowSearchBox
+             SearchBoxIcon=""@BitIconInfo.Css(""fa-solid fa-magnifying-glass"")""
+             SearchBoxClearIcon=""@BitIconInfo.Css(""fa-solid fa-circle-xmark"")""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Item check icon (external)""
+             MultiSelect
+             ItemCheckIcon=""@BitIconInfo.Css(""fa-solid fa-heart"")""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             DefaultValues=""@(Array.Empty<string>())""
+             Placeholder=""Select items"" />
+
+<BitDropdown Label=""Item icons (IconName - Fluent UI)""
+             Items=""GetExternalIconCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Item icons (Icon - FontAwesome)""
+             Items=""GetExternalIconFaCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Item icons (Icon - Bootstrap Icons)""
+             Items=""GetExternalIconBiCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"" />";
+    private readonly string example22CsharpCode = @"
+public class Product
+{
+    public string? Label { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+    public BitIconInfo? Icon { get; set; }
+    public string? IconName { get; set; }
+}
+
+private List<Product> GetBasicCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private List<Product> GetExternalIconCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"", IconName = nameof(BitIconName.AllApps) },
+    new() { Text = ""Banana"", Value = ""f-ban"", IconName = nameof(BitIconName.Calculator) },
+    new() { Text = ""Orange"", Value = ""f-ora"", IconName = nameof(BitIconName.FavoriteStar), Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"", IconName = nameof(BitIconName.Edit) },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"", IconName = nameof(BitIconName.Health) },
+    new() { Text = ""Carrot"", Value = ""v-car"", IconName = nameof(BitIconName.Add) },
+    new() { Text = ""Lettuce"", Value = ""v-let"", IconName = nameof(BitIconName.ChevronDown) }
+};
+
+private List<Product> GetExternalIconFaCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"", Icon = BitIconInfo.Css(""fa-solid fa-apple-whole"") },
+    new() { Text = ""Banana"", Value = ""f-ban"", Icon = BitIconInfo.Css(""fa-solid fa-moon"") },
+    new() { Text = ""Orange"", Value = ""f-ora"", Icon = BitIconInfo.Fa(""solid lemon""), Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"", Icon = BitIconInfo.Css(""fa-solid fa-droplet"") },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"", Icon = BitIconInfo.Css(""fa-solid fa-seedling"") },
+    new() { Text = ""Carrot"", Value = ""v-car"", Icon = BitIconInfo.Css(""fa-solid fa-carrot"") },
+    new() { Text = ""Lettuce"", Value = ""v-let"", Icon = BitIconInfo.Css(""fa-solid fa-leaf"") }
+};
+
+private List<Product> GetExternalIconBiCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"", Icon = BitIconInfo.Bi(""apple"") },
+    new() { Text = ""Banana"", Value = ""f-ban"", Icon = BitIconInfo.Bi(""flower1"") },
+    new() { Text = ""Orange"", Value = ""f-ora"", Icon = BitIconInfo.Css(""bi bi-sun""), Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"", Icon = BitIconInfo.Bi(""droplet-fill"") },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"", Icon = BitIconInfo.Bi(""tree-fill"") },
+    new() { Text = ""Carrot"", Value = ""v-car"", Icon = BitIconInfo.Bi(""egg"") },
+    new() { Text = ""Lettuce"", Value = ""v-let"", Icon = BitIconInfo.Bi(""flower2"") }
+};
+
+private BitDropdownNameSelectors<Product, string> nameSelectors = new()
+{
+    AriaLabel = { Selector = c => c.Label },
+    Class = { Selector = c => c.CssClass },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Style = { Selector = c => c.CssStyle },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+    Icon = { Selector = c => c.Icon },
+    IconName = { Selector = c => c.IconName },
+};";
+
+    private readonly string example23RazorCode = @"
 <style>
     .custom-class {
         margin-inline: 1rem;
@@ -1581,7 +1906,7 @@ public class Product
                                 Container = ""custom-container"",
                                 ItemButton = ""custom-item-button"",
                                 ScrollContainer = ""custom-scroll-container"" })"" />";
-    private readonly string example18CsharpCode = @"
+    private readonly string example23CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
@@ -1640,7 +1965,7 @@ public class Product
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example19RazorCode = @"
+    private readonly string example24RazorCode = @"
 <BitDropdown Label=""تک انتخابی""
              Dir=""BitDir.Rtl""
              Items=""GetRtlCustoms()""
@@ -1660,7 +1985,7 @@ public class Product
              Items=""GetRtlCustoms()""
              NameSelectors=""nameSelectors""
              Placeholder=""لطفا انتخاب کنید"" />";
-    private readonly string example19CsharpCode = @"
+    private readonly string example24CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
index 5f36a115f8..fe51a5e3f7 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
@@ -1,5 +1,5 @@
 <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
-    <div>Displays basic dropdowns demonstrating single and multi-select options, including required and disabled states.</div>
+    <div>BitDropdown in its simplest forms: single and multi select dropdowns, a required one, one preserving its original callout width, the disabled and read-only states and a custom delimiter for joining the selected values in multi select mode.</div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Single select"
@@ -29,11 +29,24 @@
                      Items="GetBasicItems()"
                      DefaultValue="@("f-ora")"
                      Placeholder="Select an item" />
+        <br /><br />
+        <BitDropdown Label="ReadOnly"
+                     ReadOnly
+                     Items="GetBasicItems()"
+                     DefaultValue="@("f-app")"
+                     Placeholder="Select an item" />
+        <br /><br />
+        <BitDropdown Label="Custom delimiter"
+                     MultiSelect
+                     MultiSelectDelimiter=" - "
+                     Items="GetBasicItems()"
+                     DefaultValues="@(new[] { "f-app", "f-ban" })"
+                     Placeholder="Select items" />
     </div>
 </DemoExample>
 
 <DemoExample Title="Prefix & Suffix" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2" PreventRenderForMcpClient>
-    <div>Use prefixes and suffixes in BitDropdown, including combinations and the disabled state.</div>
+    <div>Display custom text before and after the selected value using the <b>Prefix</b> and <b>Suffix</b> parameters, separately or combined, or replace them entirely using the <b>PrefixTemplate</b> and <b>SuffixTemplate</b> parameters. They are visual only and are not part of the value.</div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Prefix"
@@ -58,6 +71,19 @@
                      TItem="BitDropdownItem<string>"
                      TValue="string" />
         <br /><br />
+        <BitDropdown Label="Templates"
+                     Items="GetBasicItems()"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownItem<string>"
+                     TValue="string">
+            <PrefixTemplate>
+                <BitIcon IconName="@BitIconName.ShoppingCart" Style="padding-inline:0.5rem" />
+            </PrefixTemplate>
+            <SuffixTemplate>
+                <BitIcon IconName="@BitIconName.Info" Style="padding-inline:0.5rem" />
+            </SuffixTemplate>
+        </BitDropdown>
+        <br /><br />
         <BitDropdown Label="Disabled"
                      Prefix="Fruits:"
                      Suffix="kg"
@@ -70,7 +96,7 @@
 </DemoExample>
 
 <DemoExample Title="FitWidth" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3" PreventRenderForMcpClient>
-    <div>Enables fit-content width for the dropdown that sets the width of the component based on its content size.</div>
+    <div>The <b>FitWidth</b> parameter makes the dropdown's width fit its content instead of stretching to the full width of its container.</div>
     <br /><br />
     <BitDropdown Label="Single select"
                  FitWidth
@@ -86,8 +112,8 @@
                  DefaultValue="@string.Empty" />
 </DemoExample>
 
-<DemoExample Title="NoBorder" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4" PreventRenderForMcpClient>
-    <div>The dropdown can be rendered without any border.</div>
+<DemoExample Title="NoBorder & Transparent" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4" PreventRenderForMcpClient>
+    <div>The <b>NoBorder</b> parameter removes the border of the dropdown and the <b>Transparent</b> parameter removes its background, for a minimal look on busy or colorful surfaces.</div>
     <br /><br />
     <div style="max-width:10rem">
         <BitDropdown NoBorder
@@ -100,11 +126,18 @@
                      Items="GetBasicItems()"
                      Placeholder="Select items"
                      DefaultValue="@string.Empty" />
+        <br /><br />
+        <div style="padding:0.5rem;border-radius:0.5rem;background:linear-gradient(90deg,#ff00cc7f,#3333997f)">
+            <BitDropdown Transparent
+                         Items="GetBasicItems()"
+                         DefaultValue="@string.Empty"
+                         Placeholder="Select an item" />
+        </div>
     </div>
 </DemoExample>
 
 <DemoExample Title="Responsive" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5" PreventRenderForMcpClient>
-    <div>When the <b>IsResponsive</b> parameter is true, on small screens the drop down items will render in a side panel.</div>
+    <div>When the <b>Responsive</b> parameter is true, the callout turns into a swipeable side panel on small screens, making long item lists easier to use on mobile devices.</div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Responsive Dropdown"
@@ -116,7 +149,7 @@
 </DemoExample>
 
 <DemoExample Title="Drop direction" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6" PreventRenderForMcpClient>
-    <div>Explores different drop directions for the BitDropdown component, including automatic and explicit directions.</div>
+    <div>The <b>DropDirection</b> parameter determines which directions the callout is allowed to open in: <b>All</b> picks the best fitting direction automatically, while <b>TopAndBottom</b> (the default) restricts it to opening above or below the dropdown.</div>
     <br />
     <div class="example-content">
         <BitDropdown Label="All"
@@ -134,7 +167,7 @@
 </DemoExample>
 
 <DemoExample Title="Clear button" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7" PreventRenderForMcpClient>
-    <div>Shows the usage of the clear button in BitDropdown, allowing users to clear selected values in single and multi-select dropdowns.</div>
+    <div>The <b>ShowClearButton</b> parameter adds a button that clears the current selection whenever the dropdown has a value, in both single and multi select modes.</div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="clearValue"
@@ -157,7 +190,7 @@
 </DemoExample>
 
 <DemoExample Title="SearchBox" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8" PreventRenderForMcpClient>
-    <div>Examples of dropdowns with search functionality, including default and custom search functions.</div>
+    <div>The <b>ShowSearchBox</b> parameter adds a search input to the callout to filter the items, <b>AutoFocusSearchBox</b> focuses it as soon as the callout opens and <b>SearchFunction</b> replaces the default contains algorithm with a custom one.</div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Single select & auto focus"
@@ -241,7 +274,7 @@
 </DemoExample>
 
 <DemoExample Title="Validation" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10" PreventRenderForMcpClient>
-    <div>Demonstrates how validation can be applied to BitDropdown, including required fields, numeric input, character constraints, email validation, and range validation.</div>
+    <div>BitDropdown integrates with <b>EditForm</b> and data annotations validation: this example validates that a single select value is required and that the number of selected items in the multi select dropdown stays within a range.</div>
     <br />
     <div class="example-content">
         @if (string.IsNullOrEmpty(successMessage))
@@ -279,7 +312,7 @@
 </DemoExample>
 
 <DemoExample Title="Customization" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11" PreventRenderForMcpClient>
-    <div>Shows how to customize dropdowns using templates for header, text, item, placeholder, label, and callout sections.</div>
+    <div>Replace nearly every part of the dropdown with your own content using the <b>HeaderTemplate</b>, <b>TextTemplate</b>, <b>ItemTemplate</b>, <b>PlaceholderTemplate</b>, <b>LabelTemplate</b>, <b>CaretDownIconName</b>, <b>CaretDownTemplate</b>, <b>CalloutHeaderTemplate</b> and <b>CalloutFooterTemplate</b> parameters.</div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Header template"
@@ -342,6 +375,15 @@
                      Placeholder="Select an item"
                      CaretDownIconName="@BitIconName.ScrollUpDown" />
         <br /><br />
+        <BitDropdown Label="CaretDownTemplate"
+                     Items="GetDataItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item">
+            <CaretDownTemplate>
+                <BitIcon IconName="@BitIconName.FavoriteStar" Style="font-size:0.875rem" />
+            </CaretDownTemplate>
+        </BitDropdown>
+        <br /><br />
         <BitDropdown Label="Callout templates"
                      Items="GetBasicItems()"
                      DefaultValue="@string.Empty"
@@ -357,7 +399,7 @@
 </DemoExample>
 
 <DemoExample Title="Binding" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12" PreventRenderForMcpClient>
-    <div>Demonstrates two-way binding and change event handling for dropdowns, showcasing single and multi-select scenarios.</div>
+    <div>Different ways of binding to the selection and state: two-way binding over the <b>Value</b> and <b>Values</b> parameters, the <b>OnChange</b>, <b>OnValuesChange</b> and <b>OnSelectItem</b> events, the <b>Reselectable</b> parameter that raises the select events even when the already selected item is selected again and two-way binding of the callout's open state via <b>IsOpen</b>.</div>
     <br /><br />
     <div class="example-content">
         <div><b>Two-way binding</b>:</div><br />
@@ -411,11 +453,30 @@
                      OnSelectItem="(BitDropdownItem<string> item) => selectedItem2 = item" />
         <br />
         <div>Selected Value: @selectedItem2?.Value</div>
+        <br /><br /><br /><br />
+        <div><b>Reselectable</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Reselectable
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     OnSelectItem="(BitDropdownItem<string> item) => selectItemCounter++" />
+        <br />
+        <div>OnSelectItem count: @selectItemCounter</div>
+        <br /><br /><br /><br />
+        <div><b>IsOpen</b>:</div><br />
+        <BitButton OnClick="() => isDropdownOpen = true">Open the dropdown</BitButton>
+        <br /><br />
+        <BitDropdown @bind-IsOpen="isDropdownOpen"
+                     Label="Single select"
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item" />
     </div>
 </DemoExample>
 
 <DemoExample Title="ComboBox" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13" PreventRenderForMcpClient>
-    <div>When the <b>Combo</b> parameter is true, you can type in BitDropdown input and search between items.</div>
+    <div>The <b>Combo</b> parameter turns the dropdown into a ComboBox: an input renders in place of the selected text that filters the items as you type.</div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample1"
@@ -440,7 +501,7 @@
 </DemoExample>
 
 <DemoExample Title="Chips" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14" PreventRenderForMcpClient>
-    <div>When the <b>Chips</b> parameter is true, shows the selected items like chips in the ComboBox.</div>
+    <div>When the <b>Chips</b> parameter is true, the selected items render as chips, each with a remove button, in both single and multi select ComboBox modes.</div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample2"
@@ -465,7 +526,7 @@
 </DemoExample>
 
 <DemoExample Title="Dynamic ComboBox" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
-    <div>When the <b>Dynamic</b> parameter is true, you can add a new item in the ComboBox.</div>
+    <div>When the <b>Dynamic</b> parameter is true, a text typed into the ComboBox that matches no existing item can be added as a new item; <b>DynamicValueGenerator</b> generates the value of the new item and <b>OnDynamicAdd</b> notifies about the addition.</div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample3"
@@ -480,7 +541,7 @@
         <div>Value: @comboBoxValueSample3</div>
     </div>
     <br /><br /><br /><br />
-    <div>When the <b>Combo</b>, <b>Chips</b> and <b>Dynamic</b> parameters are true, you can add a new item in the ComboBox (pressing the enter key or touching the add button on the mobile).</div>
+    <div>Combining the <b>Combo</b>, <b>Chips</b> and <b>Dynamic</b> parameters, new items get added by pressing the enter key (or the add button of the responsive panel on mobile) and render as removable chips.</div>
     <br />
     <div class="example-content">
         <br />
@@ -509,82 +570,177 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16" PreventRenderForMcpClient>
+<DemoExample Title="Keyboard navigation" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16" PreventRenderForMcpClient>
     <div>
-        Use icons from external libraries like FontAwesome and Bootstrap Icons with the <b>CaretDownIcon</b>, 
-        <b>ClearButtonIcon</b>, <b>ChipsRemoveIcon</b>, <b>SearchBoxIcon</b>, <b>SearchBoxClearIcon</b>, and 
-        <b>ResponsiveCloseIcon</b> parameters on the dropdown and the <b>Icon</b> or <b>IconName</b> 
-        properties on <b>BitDropdownItem</b>.
+        The dropdown is fully operable with the keyboard: <b>Enter</b>, <b>Space</b> and the arrow keys open the callout,
+        <b>ArrowUp</b> and <b>ArrowDown</b> move the focus between the items, <b>Home</b> and <b>End</b> jump to the first and last item,
+        <b>PageUp</b> and <b>PageDown</b> jump ten items at a time, typing characters moves the focus to the next matching item,
+        <b>Enter</b> and <b>Space</b> select the focused item and <b>Escape</b> closes the callout.
     </div>
-    
     <br />
-    <br />
-    
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
-
     <div class="example-content">
-        <BitDropdown Label="Caret down icon (external)"
-                     CaretDownIcon="@BitIconInfo.Css("fa-solid fa-circle-chevron-down")"
+        <BitDropdown Label="Single select"
                      Items="GetBasicItems()"
                      DefaultValue="@string.Empty"
                      Placeholder="Select an item" />
-
         <br /><br />
-
-        <BitDropdown Label="Clear button icon (external)"
-                     ShowClearButton
-                     ClearButtonIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
+        <BitDropdown Label="Multi select"
+                     MultiSelect
                      Items="GetBasicItems()"
-                     DefaultValue="@string.Empty"
-                     Placeholder="Select an item" />
-
-        <br /><br />
+                     Placeholder="Select items"
+                     DefaultValue="@string.Empty" />
+    </div>
+</DemoExample>
 
-        <BitDropdown Label="Chips remove icon (external)"
-                     Chips
+<DemoExample Title="Select all" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17" PreventRenderForMcpClient>
+    <div>
+        When the <b>ShowSelectAll</b> parameter is true, a select all item renders at the top of the callout of the
+        multi select dropdown that selects or clears all items at once and shows an indeterminate state when only
+        some items are selected. Disabled items are skipped, the <b>SelectAllText</b> parameter customizes its text
+        and combined with the search box, it only applies to the search result.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown @bind-Values="selectAllValues"
                      MultiSelect
-                     ChipsRemoveIcon="@BitIconInfo.Css("bi bi-x-circle")"
+                     ShowSelectAll
                      Items="GetBasicItems()"
-                     DefaultValues="@(Array.Empty<string>())"
-                     Placeholder="Select items" />
-
+                     Placeholder="Select items"
+                     Label="Select all" />
+        <br />
+        <div>Values: @string.Join(',', selectAllValues)</div>
         <br /><br />
-
-        <BitDropdown Label="Search box icons (external)"
+        <BitDropdown MultiSelect
+                     ShowSelectAll
                      ShowSearchBox
-                     SearchBoxIcon="@BitIconInfo.Css("fa-solid fa-magnifying-glass")"
-                     SearchBoxClearIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
+                     SelectAllText="Select all of them"
                      Items="GetBasicItems()"
+                     Placeholder="Select items"
                      DefaultValue="@string.Empty"
-                     Placeholder="Select an item" />
+                     SearchBoxPlaceholder="Search items"
+                     Label="Custom text & search" />
+    </div>
+</DemoExample>
 
-        <br /><br />
+<DemoExample Title="Selection limit" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18" PreventRenderForMcpClient>
+    <div>
+        The <b>MaxSelectedItems</b> parameter limits the number of items that can be selected in the multi select
+        dropdown; once the limit is reached, the remaining items become disabled until an item gets unselected.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown @bind-Values="maxSelectedValues"
+                     MultiSelect
+                     MaxSelectedItems="2"
+                     Items="GetBasicItems()"
+                     Placeholder="Select up to 2 items"
+                     Label="Max 2 items" />
+        <br />
+        <div>Values: @string.Join(',', maxSelectedValues)</div>
+    </div>
+</DemoExample>
 
-        <BitDropdown Label="Item icons (IconName - Fluent UI)"
-                     Items="GetExternalIconItems()"
-                     DefaultValue="@string.Empty"
+<DemoExample Title="Empty state" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
+    <div>
+        When there is no item to show in the callout (an empty list or a search without a result), the dropdown
+        renders a message that can be customized using the <b>EmptyText</b> and <b>EmptyTemplate</b> parameters.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="Default"
+                     Items="emptyItems"
                      Placeholder="Select an item"
                      TItem="BitDropdownItem<string>" TValue="string" />
-
         <br /><br />
-
-        <BitDropdown Label="Item icons (Icon - FontAwesome)"
-                     Items="GetExternalIconFaItems()"
-                     DefaultValue="@string.Empty"
-                     Placeholder="Select an item" />
-
+        <BitDropdown Label="EmptyText"
+                     Items="emptyItems"
+                     Placeholder="Select an item"
+                     EmptyText="There is nothing here!"
+                     TItem="BitDropdownItem<string>" TValue="string" />
         <br /><br />
+        <BitDropdown Label="EmptyTemplate"
+                     Items="emptyItems"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownItem<string>" TValue="string">
+            <EmptyTemplate>
+                <div class="custom-drp custom-drp-empty">
+                    <BitIcon IconName="@BitIconName.SearchIssue" />
+                    <div>Nothing to show!</div>
+                </div>
+            </EmptyTemplate>
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="Search without result"
+                     ShowSearchBox
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search for anything" />
+    </div>
+</DemoExample>
 
-        <BitDropdown Label="Item icons (Icon - Bootstrap Icons)"
-                     Items="GetExternalIconBiItems()"
+<DemoExample Title="Virtualization" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20" PreventRenderForMcpClient>
+    <div>The <b>Virtualize</b> parameter renders only the visible items instead of the whole list, keeping the dropdown fast with thousands of items — either over a local <b>Items</b> collection or by loading pages on demand through an <b>ItemsProvider</b> (with <b>InitialSelectedItems</b> pre-selecting values that have not been loaded yet). The <b>VirtualizePlaceholder</b> template renders in place of the items that are still loading.</div>
+    <br /><br /><br />
+    <div class="example-content">
+        <div>With <b>Items</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Virtualize
+                     Items="virtualizeItems1"
                      DefaultValue="@string.Empty"
                      Placeholder="Select an item" />
+        <br />
+        <BitDropdown Label="Multi select"
+                     Virtualize
+                     MultiSelect
+                     Items="virtualizeItems2"
+                     Placeholder="Select items"
+                     DefaultValue="@string.Empty" />
+        <br /><br /><br /><br />
+        <div>With <b>ItemsProvider</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Virtualize
+                     ItemsProvider="LoadItems"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownItem<string>" TValue="string" />
+        <br />
+        <BitDropdown Label="Multi select"
+                     Virtualize
+                     MultiSelect
+                     ItemsProvider="LoadItems"
+                     Placeholder="Select items"
+                     TItem="BitDropdownItem<string>" TValue="string" />
+        <br />
+        <BitDropdown Label="VirtualizePlaceholder"
+                     Virtualize
+                     ItemsProvider="LoadItems"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownItem<string>" TValue="string">
+            <VirtualizePlaceholder>
+                <div style="padding:0 0.5rem;color:gray">Loading @(context.Index)...</div>
+            </VirtualizePlaceholder>
+        </BitDropdown>
+        <br /><br /><br /><br />
+        <div>With <b>ItemsProvider and InitialSelectedItems</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Virtualize
+                     ItemsProvider="LoadItems"
+                     Placeholder="Select an item"
+                     InitialSelectedItems="initialSelectedItem"
+                     TItem="BitDropdownItem<string>" TValue="string" />
+        <br />
+        <BitDropdown Label="Multi select"
+                     Virtualize
+                     MultiSelect
+                     ItemsProvider="LoadItems"
+                     Placeholder="Select items"
+                     InitialSelectedItems="initialSelectedItems"
+                     TItem="BitDropdownItem<string>" TValue="string" />
     </div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17" PreventRenderForMcpClient>
-    <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
+<DemoExample Title="Color" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21" PreventRenderForMcpClient>
+    <div>The <b>Color</b> parameter paints the dropdown's accents (the focus border, the search icon and the check boxes of the multi select items) in one of the theme colors, <b>Primary</b> being the default.</div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Primary"
@@ -653,8 +809,91 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18" PreventRenderForMcpClient>
-    <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
+<DemoExample Title="External Icons" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22" PreventRenderForMcpClient>
+    <div>
+        Use icons from external libraries like FontAwesome and Bootstrap Icons with the <b>CaretDownIcon</b>, 
+        <b>ClearButtonIcon</b>, <b>ChipsRemoveIcon</b>, <b>SearchBoxIcon</b>, <b>SearchBoxClearIcon</b>,
+        <b>ResponsiveCloseIcon</b>, and <b>ItemCheckIcon</b> parameters on the dropdown and the <b>Icon</b> or <b>IconName</b> 
+        properties on <b>BitDropdownItem</b>.
+    </div>
+    
+    <br />
+    <br />
+    
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
+
+    <div class="example-content">
+        <BitDropdown Label="Caret down icon (external)"
+                     CaretDownIcon="@BitIconInfo.Css("fa-solid fa-circle-chevron-down")"
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item" />
+
+        <br /><br />
+
+        <BitDropdown Label="Clear button icon (external)"
+                     ShowClearButton
+                     ClearButtonIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item" />
+
+        <br /><br />
+
+        <BitDropdown Label="Chips remove icon (external)"
+                     Chips
+                     MultiSelect
+                     ChipsRemoveIcon="@BitIconInfo.Css("bi bi-x-circle")"
+                     Items="GetBasicItems()"
+                     DefaultValues="@(Array.Empty<string>())"
+                     Placeholder="Select items" />
+
+        <br /><br />
+
+        <BitDropdown Label="Search box icons (external)"
+                     ShowSearchBox
+                     SearchBoxIcon="@BitIconInfo.Css("fa-solid fa-magnifying-glass")"
+                     SearchBoxClearIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item" />
+
+        <br /><br />
+
+        <BitDropdown Label="Item check icon (external)"
+                     MultiSelect
+                     ItemCheckIcon="@BitIconInfo.Css("fa-solid fa-heart")"
+                     Items="GetBasicItems()"
+                     DefaultValues="@(Array.Empty<string>())"
+                     Placeholder="Select items" />
+
+        <br /><br />
+
+        <BitDropdown Label="Item icons (IconName - Fluent UI)"
+                     Items="GetExternalIconItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownItem<string>" TValue="string" />
+
+        <br /><br />
+
+        <BitDropdown Label="Item icons (Icon - FontAwesome)"
+                     Items="GetExternalIconFaItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item" />
+
+        <br /><br />
+
+        <BitDropdown Label="Item icons (Icon - Bootstrap Icons)"
+                     Items="GetExternalIconBiItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Style & Class" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23" PreventRenderForMcpClient>
+    <div>Style the dropdown at every level: inline <b>Style</b> and <b>Class</b> on the root element, per-item styles and classes on the items, and the <b>Styles</b> and <b>Classes</b> parameters that target each internal part of the component individually.</div>
     <br /><br />
     <div class="example-content">
         <div>Component's Style & Class:</div><br />
@@ -695,8 +934,8 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
-    <div>Use BitDropdown in right-to-left (RTL).</div>
+<DemoExample Title="RTL" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24" PreventRenderForMcpClient>
+    <div>Setting the <b>Dir</b> parameter to <b>Rtl</b> renders the dropdown right-to-left for languages like Arabic, Persian and Hebrew, in both the regular callout and the responsive panel.</div>
     <br />
     <dir dir="rtl" style="padding:0">
         <div class="example-content">
@@ -722,53 +961,3 @@
         </div>
     </dir>
 </DemoExample>
-
-<DemoExample Title="Virtualization" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20" PreventRenderForMcpClient>
-    <div>Demonstrates virtualization in the BitDropdown component for handling large datasets efficiently.</div>
-    <br /><br /><br />
-    <div class="example-content">
-        <div>With <b>Items</b>:</div><br />
-        <BitDropdown Label="Single select"
-                     Virtualize
-                     Items="virtualizeItems1"
-                     DefaultValue="@string.Empty"
-                     Placeholder="Select an item" />
-        <br />
-        <BitDropdown Label="Multi select"
-                     Virtualize
-                     MultiSelect
-                     Items="virtualizeItems2"
-                     Placeholder="Select items"
-                     DefaultValue="@string.Empty" />
-        <br /><br /><br /><br />
-        <div>With <b>ItemsProvider</b>:</div><br />
-        <BitDropdown Label="Single select"
-                     Virtualize
-                     ItemsProvider="LoadItems"
-                     Placeholder="Select an item"
-                     TItem="BitDropdownItem<string>" TValue="string" />
-        <br />
-        <BitDropdown Label="Multi select"
-                     Virtualize
-                     MultiSelect
-                     ItemsProvider="LoadItems"
-                     Placeholder="Select items"
-                     TItem="BitDropdownItem<string>" TValue="string" />
-        <br /><br /><br /><br />
-        <div>With <b>ItemsProvider and InitialSelectedItems</b>:</div><br />
-        <BitDropdown Label="Single select"
-                     Virtualize
-                     ItemsProvider="LoadItems"
-                     Placeholder="Select an item"
-                     InitialSelectedItems="initialSelectedItem"
-                     TItem="BitDropdownItem<string>" TValue="string" />
-        <br />
-        <BitDropdown Label="Multi select"
-                     Virtualize
-                     MultiSelect
-                     ItemsProvider="LoadItems"
-                     Placeholder="Select items"
-                     InitialSelectedItems="initialSelectedItems"
-                     TItem="BitDropdownItem<string>" TValue="string" />
-    </div>
-</DemoExample>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs
index 6c4c49fafd..06cc149d2f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs
@@ -123,6 +123,14 @@ private List<BitDropdownItem<string>> GetExternalIconBiItems() =>
     ];
 
 
+    private readonly List<BitDropdownItem<string>> emptyItems = [];
+
+    private IEnumerable<string?> selectAllValues = [];
+    private IEnumerable<string?> maxSelectedValues = [];
+
+    private bool isDropdownOpen;
+    private int selectItemCounter;
+
     private string controlledValue = "f-app";
     private IEnumerable<string> controlledValues = ["f-app", "f-ban"];
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
index 9c0ca57b90..763b8b6314 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
@@ -29,7 +29,20 @@ public partial class _BitDropdownItemDemo
              IsEnabled=""false""
              Items=""GetBasicItems()""
              DefaultValue=""@(""f-ora"")""
-             Placeholder=""Select an item"" />";
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""ReadOnly""
+             ReadOnly
+             Items=""GetBasicItems()""
+             DefaultValue=""@(""f-app"")""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Custom delimiter""
+             MultiSelect
+             MultiSelectDelimiter="" - ""
+             Items=""GetBasicItems()""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"" })""
+             Placeholder=""Select items"" />";
     private readonly string example1CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
@@ -68,6 +81,19 @@ public partial class _BitDropdownItemDemo
              TItem=""BitDropdownItem<string>""
              TValue=""string"" />
 
+<BitDropdown Label=""Templates""
+             Items=""GetBasicItems()""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownItem<string>""
+             TValue=""string"">
+    <PrefixTemplate>
+        <BitIcon IconName=""@BitIconName.ShoppingCart"" Style=""padding-inline:0.5rem"" />
+    </PrefixTemplate>
+    <SuffixTemplate>
+        <BitIcon IconName=""@BitIconName.Info"" Style=""padding-inline:0.5rem"" />
+    </SuffixTemplate>
+</BitDropdown>
+
 <BitDropdown Label=""Disabled""
              Prefix=""Fruits:""
              Suffix=""kg""
@@ -129,7 +155,14 @@ public partial class _BitDropdownItemDemo
              MultiSelect
              Items=""GetBasicItems()""
              Placeholder=""Select items""
-             DefaultValue=""@string.Empty"" />";
+             DefaultValue=""@string.Empty"" />
+
+<div style=""padding:0.5rem;border-radius:0.5rem;background:linear-gradient(90deg,#ff00cc7f,#3333997f)"">
+    <BitDropdown Transparent
+                 Items=""GetBasicItems()""
+                 DefaultValue=""@string.Empty""
+                 Placeholder=""Select an item"" />
+</div>";
     private readonly string example4CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
@@ -490,6 +523,15 @@ private void HandleInvalidSubmit() { }
              Placeholder=""Select an item""
              CaretDownIconName=""@BitIconName.ScrollUpDown"" />
 
+<BitDropdown Label=""CaretDownTemplate""
+             Items=""GetDataItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"">
+    <CaretDownTemplate>
+        <BitIcon IconName=""@BitIconName.FavoriteStar"" Style=""font-size:0.875rem"" />
+    </CaretDownTemplate>
+</BitDropdown>
+
 <BitDropdown Label=""Callout templates""
              Items=""GetBasicItems()""
              DefaultValue=""@string.Empty""
@@ -566,8 +608,26 @@ public class DropdownItemData
              Placeholder=""Select items""
              DefaultValue=""@string.Empty""
              OnSelectItem=""(BitDropdownItem<string> item) => selectedItem2 = item"" />
-<div>Selected Value: @selectedItem2?.Value</div>";
+<div>Selected Value: @selectedItem2?.Value</div>
+
+<BitDropdown Label=""Single select""
+             Reselectable
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             OnSelectItem=""(BitDropdownItem<string> item) => selectItemCounter++"" />
+<div>OnSelectItem count: @selectItemCounter</div>
+
+<BitButton OnClick=""() => isDropdownOpen = true"">Open the dropdown</BitButton>
+<BitDropdown @bind-IsOpen=""isDropdownOpen""
+             Label=""Single select""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"" />";
     private readonly string example12CsharpCode = @"
+private bool isDropdownOpen;
+private int selectItemCounter;
+
 private string controlledValue = ""f-app"";
 private IEnumerable<string> controlledValues = [""f-app"", ""f-ban""];
 
@@ -591,148 +651,6 @@ public class DropdownItemData
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example20RazorCode = @"
-<BitDropdown Label=""Single select""
-             Virtualize
-             Items=""virtualizeItems1""
-             DefaultValue=""@string.Empty""
-             Placeholder=""Select an item"" />
-
-<BitDropdown Label=""Multi select""
-             Virtualize
-             MultiSelect
-             Items=""virtualizeItems2""
-             Placeholder=""Select items""
-             DefaultValue=""@string.Empty"" />
-
-
-<BitDropdown Label=""Single select""
-             Virtualize
-             ItemsProvider=""LoadItems""
-             Placeholder=""Select an item""
-             TItem=""BitDropdownItem<string>"" TValue=""string"" />
-
-<BitDropdown Label=""Multi select""
-             Virtualize
-             MultiSelect
-             ItemsProvider=""LoadItems""
-             Placeholder=""Select items""
-             TItem=""BitDropdownItem<string>"" TValue=""string"" />
-
-<BitDropdown Label=""Single select""
-             Virtualize
-             ItemsProvider=""LoadItems""
-             Placeholder=""Select an item""
-             InitialSelectedItems=""initialSelectedItem""
-             TItem=""BitDropdownItem<string>"" TValue=""string"" />
-
-<BitDropdown Label=""Multi select""
-             Virtualize
-             MultiSelect
-             ItemsProvider=""LoadItems""
-             Placeholder=""Select items""
-             InitialSelectedItems=""initialSelectedItems""
-             TItem=""BitDropdownItem<string>"" TValue=""string"" />";
-    private readonly string example20CsharpCode = @"
-private ICollection<BitDropdownItem<string>>? virtualizeItems1;
-private ICollection<BitDropdownItem<string>>? virtualizeItems2;
-
-private IEnumerable<BitDropdownItem<string>> initialSelectedItem = [
-    new()
-    {
-        Text = ""Product 100"",
-        Value = ""100"",
-        Data = new ProductDto {
-            Id = 100,
-            Price = 60,
-            Name = ""Product 100""
-        },
-        AriaLabel = ""Product 100"",
-        IsEnabled = true,
-        ItemType = BitDropdownItemType.Normal
-    }
-];
-
-private IEnumerable<BitDropdownItem<string>> initialSelectedItems = [
-    new()
-    {
-        Text = ""Product 100"",
-        Value = ""100"",
-        Data = new ProductDto {
-            Id = 100,
-            Price = 60,
-            Name = ""Product 100""
-        },
-        AriaLabel = ""Product 100"",
-        IsEnabled = true,
-        ItemType = BitDropdownItemType.Normal
-    },
-    new()
-    {
-        Text = ""Product 99"",
-        Value = ""99"",
-        Data = new ProductDto {
-            Id = 99,
-            Price = 75,
-            Name = ""Product 99""
-        },
-        AriaLabel = ""Product 99"",
-        IsEnabled = true,
-        ItemType = BitDropdownItemType.Normal
-    }
-];
-
-protected override void OnInitialized()
-{
-    virtualizeItems1 = Enumerable.Range(1, 10_000)
-                                 .Select(c => new BitDropdownItem<string> { Text = $""Category {c}"", Value = c.ToString() })
-                                 .ToArray();
-
-    virtualizeItems2 = Enumerable.Range(1, 10_000)
-                                 .Select(c => new BitDropdownItem<string> { Text = $""Category {c}"", Value = c.ToString() })
-                                 .ToArray();
-}
-
-private async ValueTask<BitDropdownItemsProviderResult<BitDropdownItem<string>>> LoadItems(
-    BitDropdownItemsProviderRequest<BitDropdownItem<string>> request)
-{
-    try
-    {
-        // https://docs.microsoft.com/en-us/odata/concepts/queryoptions-overview
-
-        var query = new Dictionary<string, object?>()
-        {
-            { ""$top"", request.Count == 0 ? 50 : request.Count },
-            { ""$skip"", request.StartIndex }
-        };
-
-        if (string.IsNullOrEmpty(request.Search) is false)
-        {
-            query.Add(""$filter"", $""contains(Name,'{request.Search}')"");
-        }
-
-        var url = NavManager.GetUriWithQueryParameters(""api/Products/GetProducts"", query);
-
-        var data = await HttpClient.GetFromJsonAsync(url, AppJsonContext.Default.PagedResultProductDto);
-
-        var items = data!.Items.Select(i => new BitDropdownItem<string>
-        {
-            Text = i.Name,
-            Value = i.Id.ToString(),
-            Data = i,
-            AriaLabel = i.Name,
-            IsEnabled = true,
-            ItemType = BitDropdownItemType.Normal
-        }).ToList();
-
-        return BitDropdownItemsProviderResult.From(items, data!.TotalCount);
-    }
-    catch
-    {
-        return BitDropdownItemsProviderResult.From(new List<BitDropdownItem<string>>(), 0);
-    }
-}";
-
     private readonly string example13RazorCode = @"
 <BitDropdown @bind-Value=""comboBoxValueSample1""
              Combo
@@ -859,53 +777,52 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
 };";
 
     private readonly string example16RazorCode = @"
-<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
-<link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
-
-<BitDropdown Label=""Caret down icon (external)""
-             CaretDownIcon=""@BitIconInfo.Css(""fa-solid fa-circle-chevron-down"")""
+<BitDropdown Label=""Single select""
              Items=""GetBasicItems()""
              DefaultValue=""@string.Empty""
              Placeholder=""Select an item"" />
 
-<BitDropdown Label=""Clear button icon (external)""
-             ShowClearButton
-             ClearButtonIcon=""@BitIconInfo.Css(""fa-solid fa-circle-xmark"")""
+<BitDropdown Label=""Multi select""
+             MultiSelect
              Items=""GetBasicItems()""
-             DefaultValue=""@string.Empty""
-             Placeholder=""Select an item"" />
+             Placeholder=""Select items""
+             DefaultValue=""@string.Empty"" />";
+    private readonly string example16CsharpCode = @"
+private List<BitDropdownItem<string>> GetBasicItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
 
-<BitDropdown Label=""Chips remove icon (external)""
-             Chips
+    private readonly string example17RazorCode = @"
+<BitDropdown @bind-Values=""selectAllValues""
              MultiSelect
-             ChipsRemoveIcon=""@BitIconInfo.Css(""bi bi-x-circle"")""
+             ShowSelectAll
              Items=""GetBasicItems()""
-             DefaultValues=""@(Array.Empty<string>())""
-             Placeholder=""Select items"" />
+             Placeholder=""Select items""
+             Label=""Select all"" />
+<div>Values: @string.Join(',', selectAllValues)</div>
 
-<BitDropdown Label=""Search box icons (external)""
+<BitDropdown MultiSelect
+             ShowSelectAll
              ShowSearchBox
-             SearchBoxIcon=""@BitIconInfo.Css(""fa-solid fa-magnifying-glass"")""
-             SearchBoxClearIcon=""@BitIconInfo.Css(""fa-solid fa-circle-xmark"")""
+             SelectAllText=""Select all of them""
              Items=""GetBasicItems()""
+             Placeholder=""Select items""
              DefaultValue=""@string.Empty""
-             Placeholder=""Select an item"" />
-
-<BitDropdown Label=""Item icons (IconName - Fluent UI)""
-             Items=""GetExternalIconItems()""
-             DefaultValue=""@string.Empty""
-             Placeholder=""Select an item"" />
-
-<BitDropdown Label=""Item icons (Icon - FontAwesome)""
-             Items=""GetExternalIconFaItems()""
-             DefaultValue=""@string.Empty""
-             Placeholder=""Select an item"" />
+             SearchBoxPlaceholder=""Search items""
+             Label=""Custom text & search"" />";
+    private readonly string example17CsharpCode = @"
+private IEnumerable<string?> selectAllValues = [];
 
-<BitDropdown Label=""Item icons (Icon - Bootstrap Icons)""
-             Items=""GetExternalIconBiItems()""
-             DefaultValue=""@string.Empty""
-             Placeholder=""Select an item"" />";
-    private readonly string example16CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -918,51 +835,233 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
     new() { Text = ""Broccoli"", Value = ""v-bro"" },
     new() { Text = ""Carrot"", Value = ""v-car"" },
     new() { Text = ""Lettuce"", Value = ""v-let"" }
-};
+};";
 
-private List<BitDropdownItem<string>> GetExternalIconItems() => new()
+    private readonly string example18RazorCode = @"
+<BitDropdown @bind-Values=""maxSelectedValues""
+             MultiSelect
+             MaxSelectedItems=""2""
+             Items=""GetBasicItems()""
+             Placeholder=""Select up to 2 items""
+             Label=""Max 2 items"" />
+<div>Values: @string.Join(',', maxSelectedValues)</div>";
+    private readonly string example18CsharpCode = @"
+private IEnumerable<string?> maxSelectedValues = [];
+
+private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
-    new() { Text = ""Apple"", Value = ""f-app"", IconName = nameof(BitIconName.AllApps) },
-    new() { Text = ""Banana"", Value = ""f-ban"", IconName = nameof(BitIconName.Calculator) },
-    new() { Text = ""Orange"", Value = ""f-ora"", IconName = nameof(BitIconName.FavoriteStar), IsEnabled = false },
-    new() { Text = ""Grape"", Value = ""f-gra"", IconName = nameof(BitIconName.Edit) },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
     new() { ItemType = BitDropdownItemType.Divider },
     new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
-    new() { Text = ""Broccoli"", Value = ""v-bro"", IconName = nameof(BitIconName.Health) },
-    new() { Text = ""Carrot"", Value = ""v-car"", IconName = nameof(BitIconName.Add) },
-    new() { Text = ""Lettuce"", Value = ""v-let"", IconName = nameof(BitIconName.ChevronDown) }
-};
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
 
-private List<BitDropdownItem<string>> GetExternalIconFaItems() => new()
-{
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
-    new() { Text = ""Apple"", Value = ""f-app"", Icon = BitIconInfo.Css(""fa-solid fa-apple-whole"") },
-    new() { Text = ""Banana"", Value = ""f-ban"", Icon = BitIconInfo.Css(""fa-solid fa-moon"") },
-    new() { Text = ""Orange"", Value = ""f-ora"", Icon = BitIconInfo.Fa(""solid lemon""), IsEnabled = false },
-    new() { Text = ""Grape"", Value = ""f-gra"", Icon = BitIconInfo.Css(""fa-solid fa-droplet"") },
-    new() { ItemType = BitDropdownItemType.Divider },
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
-    new() { Text = ""Broccoli"", Value = ""v-bro"", Icon = BitIconInfo.Css(""fa-solid fa-seedling"") },
-    new() { Text = ""Carrot"", Value = ""v-car"", Icon = BitIconInfo.Css(""fa-solid fa-carrot"") },
-    new() { Text = ""Lettuce"", Value = ""v-let"", Icon = BitIconInfo.Css(""fa-solid fa-leaf"") }
-};
+    private readonly string example19RazorCode = @"
+<BitDropdown Label=""Default""
+             Items=""emptyItems""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownItem<string>"" TValue=""string"" />
 
-private List<BitDropdownItem<string>> GetExternalIconBiItems() => new()
+<BitDropdown Label=""EmptyText""
+             Items=""emptyItems""
+             Placeholder=""Select an item""
+             EmptyText=""There is nothing here!""
+             TItem=""BitDropdownItem<string>"" TValue=""string"" />
+
+<BitDropdown Label=""EmptyTemplate""
+             Items=""emptyItems""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownItem<string>"" TValue=""string"">
+    <EmptyTemplate>
+        <div class=""custom-drp custom-drp-empty"">
+            <BitIcon IconName=""@BitIconName.SearchIssue"" />
+            <div>Nothing to show!</div>
+        </div>
+    </EmptyTemplate>
+</BitDropdown>
+
+<BitDropdown Label=""Search without result""
+             ShowSearchBox
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search for anything"" />";
+    private readonly string example19CsharpCode = @"
+private readonly List<BitDropdownItem<string>> emptyItems = [];
+
+private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
-    new() { Text = ""Apple"", Value = ""f-app"", Icon = BitIconInfo.Bi(""apple"") },
-    new() { Text = ""Banana"", Value = ""f-ban"", Icon = BitIconInfo.Bi(""flower1"") },
-    new() { Text = ""Orange"", Value = ""f-ora"", Icon = BitIconInfo.Css(""bi bi-sun""), IsEnabled = false },
-    new() { Text = ""Grape"", Value = ""f-gra"", Icon = BitIconInfo.Bi(""droplet-fill"") },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
     new() { ItemType = BitDropdownItemType.Divider },
     new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
-    new() { Text = ""Broccoli"", Value = ""v-bro"", Icon = BitIconInfo.Bi(""tree-fill"") },
-    new() { Text = ""Carrot"", Value = ""v-car"", Icon = BitIconInfo.Bi(""egg"") },
-    new() { Text = ""Lettuce"", Value = ""v-let"", Icon = BitIconInfo.Bi(""flower2"") }
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example17RazorCode = @"
+    private readonly string example20RazorCode = @"
+<BitDropdown Label=""Single select""
+             Virtualize
+             Items=""virtualizeItems1""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Multi select""
+             Virtualize
+             MultiSelect
+             Items=""virtualizeItems2""
+             Placeholder=""Select items""
+             DefaultValue=""@string.Empty"" />
+
+
+<BitDropdown Label=""Single select""
+             Virtualize
+             ItemsProvider=""LoadItems""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownItem<string>"" TValue=""string"" />
+
+<BitDropdown Label=""Multi select""
+             Virtualize
+             MultiSelect
+             ItemsProvider=""LoadItems""
+             Placeholder=""Select items""
+             TItem=""BitDropdownItem<string>"" TValue=""string"" />
+
+<BitDropdown Label=""VirtualizePlaceholder""
+             Virtualize
+             ItemsProvider=""LoadItems""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownItem<string>"" TValue=""string"">
+    <VirtualizePlaceholder>
+        <div style=""padding:0 0.5rem;color:gray"">Loading @(context.Index)...</div>
+    </VirtualizePlaceholder>
+</BitDropdown>
+
+<BitDropdown Label=""Single select""
+             Virtualize
+             ItemsProvider=""LoadItems""
+             Placeholder=""Select an item""
+             InitialSelectedItems=""initialSelectedItem""
+             TItem=""BitDropdownItem<string>"" TValue=""string"" />
+
+<BitDropdown Label=""Multi select""
+             Virtualize
+             MultiSelect
+             ItemsProvider=""LoadItems""
+             Placeholder=""Select items""
+             InitialSelectedItems=""initialSelectedItems""
+             TItem=""BitDropdownItem<string>"" TValue=""string"" />";
+    private readonly string example20CsharpCode = @"
+private ICollection<BitDropdownItem<string>>? virtualizeItems1;
+private ICollection<BitDropdownItem<string>>? virtualizeItems2;
+
+private IEnumerable<BitDropdownItem<string>> initialSelectedItem = [
+    new()
+    {
+        Text = ""Product 100"",
+        Value = ""100"",
+        Data = new ProductDto {
+            Id = 100,
+            Price = 60,
+            Name = ""Product 100""
+        },
+        AriaLabel = ""Product 100"",
+        IsEnabled = true,
+        ItemType = BitDropdownItemType.Normal
+    }
+];
+
+private IEnumerable<BitDropdownItem<string>> initialSelectedItems = [
+    new()
+    {
+        Text = ""Product 100"",
+        Value = ""100"",
+        Data = new ProductDto {
+            Id = 100,
+            Price = 60,
+            Name = ""Product 100""
+        },
+        AriaLabel = ""Product 100"",
+        IsEnabled = true,
+        ItemType = BitDropdownItemType.Normal
+    },
+    new()
+    {
+        Text = ""Product 99"",
+        Value = ""99"",
+        Data = new ProductDto {
+            Id = 99,
+            Price = 75,
+            Name = ""Product 99""
+        },
+        AriaLabel = ""Product 99"",
+        IsEnabled = true,
+        ItemType = BitDropdownItemType.Normal
+    }
+];
+
+protected override void OnInitialized()
+{
+    virtualizeItems1 = Enumerable.Range(1, 10_000)
+                                 .Select(c => new BitDropdownItem<string> { Text = $""Category {c}"", Value = c.ToString() })
+                                 .ToArray();
+
+    virtualizeItems2 = Enumerable.Range(1, 10_000)
+                                 .Select(c => new BitDropdownItem<string> { Text = $""Category {c}"", Value = c.ToString() })
+                                 .ToArray();
+}
+
+private async ValueTask<BitDropdownItemsProviderResult<BitDropdownItem<string>>> LoadItems(
+    BitDropdownItemsProviderRequest<BitDropdownItem<string>> request)
+{
+    try
+    {
+        // https://docs.microsoft.com/en-us/odata/concepts/queryoptions-overview
+
+        var query = new Dictionary<string, object?>()
+        {
+            { ""$top"", request.Count == 0 ? 50 : request.Count },
+            { ""$skip"", request.StartIndex }
+        };
+
+        if (string.IsNullOrEmpty(request.Search) is false)
+        {
+            query.Add(""$filter"", $""contains(Name,'{request.Search}')"");
+        }
+
+        var url = NavManager.GetUriWithQueryParameters(""api/Products/GetProducts"", query);
+
+        var data = await HttpClient.GetFromJsonAsync(url, AppJsonContext.Default.PagedResultProductDto);
+
+        var items = data!.Items.Select(i => new BitDropdownItem<string>
+        {
+            Text = i.Name,
+            Value = i.Id.ToString(),
+            Data = i,
+            AriaLabel = i.Name,
+            IsEnabled = true,
+            ItemType = BitDropdownItemType.Normal
+        }).ToList();
+
+        return BitDropdownItemsProviderResult.From(items, data!.TotalCount);
+    }
+    catch
+    {
+        return BitDropdownItemsProviderResult.From(new List<BitDropdownItem<string>>(), 0);
+    }
+}";
+
+    private readonly string example21RazorCode = @"
 <BitDropdown Label=""Primary""
              MultiSelect
              ShowSearchBox
@@ -1026,7 +1125,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
              Items=""GetBasicItems()""
              Color=""BitColor.Error""
              Placeholder=""Select items"" />";
-    private readonly string example17CsharpCode = @"
+    private readonly string example21CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1041,7 +1140,118 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example18RazorCode = @"
+    private readonly string example22RazorCode = @"
+<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
+<link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
+
+<BitDropdown Label=""Caret down icon (external)""
+             CaretDownIcon=""@BitIconInfo.Css(""fa-solid fa-circle-chevron-down"")""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Clear button icon (external)""
+             ShowClearButton
+             ClearButtonIcon=""@BitIconInfo.Css(""fa-solid fa-circle-xmark"")""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Chips remove icon (external)""
+             Chips
+             MultiSelect
+             ChipsRemoveIcon=""@BitIconInfo.Css(""bi bi-x-circle"")""
+             Items=""GetBasicItems()""
+             DefaultValues=""@(Array.Empty<string>())""
+             Placeholder=""Select items"" />
+
+<BitDropdown Label=""Search box icons (external)""
+             ShowSearchBox
+             SearchBoxIcon=""@BitIconInfo.Css(""fa-solid fa-magnifying-glass"")""
+             SearchBoxClearIcon=""@BitIconInfo.Css(""fa-solid fa-circle-xmark"")""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Item check icon (external)""
+             MultiSelect
+             ItemCheckIcon=""@BitIconInfo.Css(""fa-solid fa-heart"")""
+             Items=""GetBasicItems()""
+             DefaultValues=""@(Array.Empty<string>())""
+             Placeholder=""Select items"" />
+
+<BitDropdown Label=""Item icons (IconName - Fluent UI)""
+             Items=""GetExternalIconItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Item icons (Icon - FontAwesome)""
+             Items=""GetExternalIconFaItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Item icons (Icon - Bootstrap Icons)""
+             Items=""GetExternalIconBiItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"" />";
+    private readonly string example22CsharpCode = @"
+private List<BitDropdownItem<string>> GetBasicItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private List<BitDropdownItem<string>> GetExternalIconItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"", IconName = nameof(BitIconName.AllApps) },
+    new() { Text = ""Banana"", Value = ""f-ban"", IconName = nameof(BitIconName.Calculator) },
+    new() { Text = ""Orange"", Value = ""f-ora"", IconName = nameof(BitIconName.FavoriteStar), IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"", IconName = nameof(BitIconName.Edit) },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"", IconName = nameof(BitIconName.Health) },
+    new() { Text = ""Carrot"", Value = ""v-car"", IconName = nameof(BitIconName.Add) },
+    new() { Text = ""Lettuce"", Value = ""v-let"", IconName = nameof(BitIconName.ChevronDown) }
+};
+
+private List<BitDropdownItem<string>> GetExternalIconFaItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"", Icon = BitIconInfo.Css(""fa-solid fa-apple-whole"") },
+    new() { Text = ""Banana"", Value = ""f-ban"", Icon = BitIconInfo.Css(""fa-solid fa-moon"") },
+    new() { Text = ""Orange"", Value = ""f-ora"", Icon = BitIconInfo.Fa(""solid lemon""), IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"", Icon = BitIconInfo.Css(""fa-solid fa-droplet"") },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"", Icon = BitIconInfo.Css(""fa-solid fa-seedling"") },
+    new() { Text = ""Carrot"", Value = ""v-car"", Icon = BitIconInfo.Css(""fa-solid fa-carrot"") },
+    new() { Text = ""Lettuce"", Value = ""v-let"", Icon = BitIconInfo.Css(""fa-solid fa-leaf"") }
+};
+
+private List<BitDropdownItem<string>> GetExternalIconBiItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"", Icon = BitIconInfo.Bi(""apple"") },
+    new() { Text = ""Banana"", Value = ""f-ban"", Icon = BitIconInfo.Bi(""flower1"") },
+    new() { Text = ""Orange"", Value = ""f-ora"", Icon = BitIconInfo.Css(""bi bi-sun""), IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"", Icon = BitIconInfo.Bi(""droplet-fill"") },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"", Icon = BitIconInfo.Bi(""tree-fill"") },
+    new() { Text = ""Carrot"", Value = ""v-car"", Icon = BitIconInfo.Bi(""egg"") },
+    new() { Text = ""Lettuce"", Value = ""v-let"", Icon = BitIconInfo.Bi(""flower2"") }
+};";
+
+    private readonly string example23RazorCode = @"
 <style>
     .custom-class {
         margin-inline: 1rem;
@@ -1119,7 +1329,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
                                 Container = ""custom-container"",
                                 ItemButton = ""custom-item-button"",
                                 ScrollContainer = ""custom-scroll-container"" })"" />";
-    private readonly string example18CsharpCode = @"
+    private readonly string example23CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1148,7 +1358,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"", Class = ""custom-veg"" }
 };";
 
-    private readonly string example19RazorCode = @"
+    private readonly string example24RazorCode = @"
 <BitDropdown Label=""تک انتخابی""
              Items=""GetRtlItems()""
              DefaultValue=""@string.Empty""
@@ -1168,7 +1378,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
              Items=""GetRtlItems()""
              DefaultValue=""@string.Empty""
              Placeholder=""لطفا انتخاب کنید"" />";
-    private readonly string example19CsharpCode = @"
+    private readonly string example24CsharpCode = @"
 private List<BitDropdownItem<string>> GetRtlItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""میوه ها"" },
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
index fc5fa9b26b..3481e852af 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
@@ -1,5 +1,5 @@
 <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
-    <div>Displays basic dropdowns demonstrating single and multi-select options, including required and disabled states.</div>
+    <div>BitDropdown in its simplest forms: single and multi select dropdowns, a required one, one preserving its original callout width, the disabled and read-only states and a custom delimiter for joining the selected values in multi select mode.</div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Single select"
@@ -56,11 +56,34 @@
                 <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
             }
         </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="ReadOnly"
+                     ReadOnly
+                     DefaultValue="@("f-app")"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="Custom delimiter"
+                     MultiSelect
+                     MultiSelectDelimiter=" - "
+                     DefaultValues="@(new[] { "f-app", "f-ban" })"
+                     Placeholder="Select items"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
     </div>
 </DemoExample>
 
 <DemoExample Title="Prefix & Suffix" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2" PreventRenderForMcpClient>
-    <div>Use prefixes and suffixes in BitDropdown, including combinations and the disabled state.</div>
+    <div>Display custom text before and after the selected value using the <b>Prefix</b> and <b>Suffix</b> parameters, separately or combined, or replace them entirely using the <b>PrefixTemplate</b> and <b>SuffixTemplate</b> parameters. They are visual only and are not part of the value.</div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Prefix"
@@ -97,6 +120,24 @@
             }
         </BitDropdown>
         <br /><br />
+        <BitDropdown Label="Templates"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>"
+                     TValue="string">
+            <PrefixTemplate>
+                <BitIcon IconName="@BitIconName.ShoppingCart" Style="padding-inline:0.5rem" />
+            </PrefixTemplate>
+            <SuffixTemplate>
+                <BitIcon IconName="@BitIconName.Info" Style="padding-inline:0.5rem" />
+            </SuffixTemplate>
+            <Options>
+                @foreach (var item in basicItems)
+                {
+                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+                }
+            </Options>
+        </BitDropdown>
+        <br /><br />
         <BitDropdown Label="Disabled"
                      Prefix="Fruits:"
                      Suffix="kg"
@@ -113,7 +154,7 @@
 </DemoExample>
 
 <DemoExample Title="FitWidth" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3" PreventRenderForMcpClient>
-    <div>Enables fit-content width for the dropdown that sets the width of the component based on its content size.</div>
+    <div>The <b>FitWidth</b> parameter makes the dropdown's width fit its content instead of stretching to the full width of its container.</div>
     <br /><br />
     <BitDropdown Label="Single select" FitWidth
                  Placeholder="Select an item"
@@ -136,8 +177,8 @@
     </BitDropdown>
 </DemoExample>
 
-<DemoExample Title="NoBorder" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4" PreventRenderForMcpClient>
-    <div>The dropdown can be rendered without any border.</div>
+<DemoExample Title="NoBorder & Transparent" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4" PreventRenderForMcpClient>
+    <div>The <b>NoBorder</b> parameter removes the border of the dropdown and the <b>Transparent</b> parameter removes its background, for a minimal look on busy or colorful surfaces.</div>
     <br /><br />
     <div style="max-width:10rem">
         <BitDropdown NoBorder
@@ -158,11 +199,22 @@
                 <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
             }
         </BitDropdown>
+        <br /><br />
+        <div style="padding:0.5rem;border-radius:0.5rem;background:linear-gradient(90deg,#ff00cc7f,#3333997f)">
+            <BitDropdown Transparent
+                         Placeholder="Select an item"
+                         TItem="BitDropdownOption<string>" TValue="string">
+                @foreach (var item in basicItems)
+                {
+                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+                }
+            </BitDropdown>
+        </div>
     </div>
 </DemoExample>
 
 <DemoExample Title="Responsive" RazorCode="@example5RazorCode" Id="example5" PreventRenderForMcpClient>
-    <div>When the <b>IsResponsive</b> parameter is true, on small screens the drop down items will render in a side panel.</div>
+    <div>When the <b>Responsive</b> parameter is true, the callout turns into a swipeable side panel on small screens, making long item lists easier to use on mobile devices.</div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Responsive Dropdown"
@@ -184,7 +236,7 @@
 </DemoExample>
 
 <DemoExample Title="Drop direction" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6" PreventRenderForMcpClient>
-    <div>Explores different drop directions for the BitDropdown component, including automatic and explicit directions.</div>
+    <div>The <b>DropDirection</b> parameter determines which directions the callout is allowed to open in: <b>All</b> picks the best fitting direction automatically, while <b>TopAndBottom</b> (the default) restricts it to opening above or below the dropdown.</div>
     <br />
     <div class="example-content">
         <BitDropdown Label="All"
@@ -210,7 +262,7 @@
 </DemoExample>
 
 <DemoExample Title="Clear button" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7" PreventRenderForMcpClient>
-    <div>Shows the usage of the clear button in BitDropdown, allowing users to clear selected values in single and multi-select dropdowns.</div>
+    <div>The <b>ShowClearButton</b> parameter adds a button that clears the current selection whenever the dropdown has a value, in both single and multi select modes.</div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="clearValue"
@@ -244,7 +296,7 @@
 </DemoExample>
 
 <DemoExample Title="SearchBox" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8" PreventRenderForMcpClient>
-    <div>Examples of dropdowns with search functionality, including default and custom search functions.</div>
+    <div>The <b>ShowSearchBox</b> parameter adds a search input to the callout to filter the items, <b>AutoFocusSearchBox</b> focuses it as soon as the callout opens and <b>SearchFunction</b> replaces the default contains algorithm with a custom one.</div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Single select & auto focus"
@@ -356,7 +408,7 @@
 </DemoExample>
 
 <DemoExample Title="Validation" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10" PreventRenderForMcpClient>
-    <div>Demonstrates how validation can be applied to BitDropdown, including required fields, numeric input, character constraints, email validation, and range validation.</div>
+    <div>BitDropdown integrates with <b>EditForm</b> and data annotations validation: this example validates that a single select value is required and that the number of selected items in the multi select dropdown stays within a range.</div>
     <br />
     <div class="example-content">
         @if (string.IsNullOrEmpty(successMessage))
@@ -404,7 +456,7 @@
 </DemoExample>
 
 <DemoExample Title="Customization" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11" PreventRenderForMcpClient>
-    <div>Shows how to customize dropdowns using templates for header, text, item, placeholder, label, and callout sections.</div>
+    <div>Replace nearly every part of the dropdown with your own content using the <b>HeaderTemplate</b>, <b>TextTemplate</b>, <b>ItemTemplate</b>, <b>PlaceholderTemplate</b>, <b>LabelTemplate</b>, <b>CaretDownIconName</b>, <b>CaretDownTemplate</b>, <b>CalloutHeaderTemplate</b> and <b>CalloutFooterTemplate</b> parameters.</div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Header template"
@@ -491,6 +543,20 @@
             }
         </BitDropdown>
         <br /><br />
+        <BitDropdown Label="CaretDownTemplate"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            <CaretDownTemplate>
+                <BitIcon IconName="@BitIconName.FavoriteStar" Style="font-size:0.875rem" />
+            </CaretDownTemplate>
+            <Options>
+                @foreach (var item in dataItems)
+                {
+                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" />
+                }
+            </Options>
+        </BitDropdown>
+        <br /><br />
         <BitDropdown Label="Callout templates"
                      Placeholder="Select an item"
                      TItem="BitDropdownOption<string>" TValue="string">
@@ -511,7 +577,7 @@
 </DemoExample>
 
 <DemoExample Title="Binding" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12" PreventRenderForMcpClient>
-    <div>Demonstrates two-way binding and change event handling for dropdowns, showcasing single and multi-select scenarios.</div>
+    <div>Different ways of binding to the selection and state: two-way binding over the <b>Value</b> and <b>Values</b> parameters, the <b>OnChange</b>, <b>OnValuesChange</b> and <b>OnSelectItem</b> events, the <b>Reselectable</b> parameter that raises the select events even when the already selected item is selected again and two-way binding of the callout's open state via <b>IsOpen</b>.</div>
     <br /><br />
     <div class="example-content">
         <div>Two-way binding:</div><br />
@@ -599,11 +665,40 @@
         </BitDropdown>
         <br />
         <div>Selected Value: @selectedItem2?.Value</div>
+        <br /><br /><br /><br />
+        <div>Reselectable:</div><br />
+        <BitDropdown Label="Single select"
+                     Reselectable
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string"
+                     OnSelectItem="(BitDropdownOption<string> item) => selectItemCounter++">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br />
+        <div>OnSelectItem count: @selectItemCounter</div>
+        <br /><br /><br /><br />
+        <div>IsOpen:</div><br />
+        <BitButton OnClick="() => isDropdownOpen = true">Open the dropdown</BitButton>
+        <br /><br />
+        <BitDropdown @bind-IsOpen="isDropdownOpen"
+                     Label="Single select"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
     </div>
 </DemoExample>
 
 <DemoExample Title="ComboBox" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13" PreventRenderForMcpClient>
-    <div>When the <b>Combo</b> parameter is true, you can type in BitDropdown input and search between items.</div>
+    <div>The <b>Combo</b> parameter turns the dropdown into a ComboBox: an input renders in place of the selected text that filters the items as you type.</div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample1"
@@ -636,7 +731,7 @@
 </DemoExample>
 
 <DemoExample Title="Chips" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14" PreventRenderForMcpClient>
-    <div>When the <b>Chips</b> parameter is true, shows the selected items like chips in the ComboBox.</div>
+    <div>When the <b>Chips</b> parameter is true, the selected items render as chips, each with a remove button, in both single and multi select ComboBox modes.</div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample2"
@@ -669,7 +764,7 @@
 </DemoExample>
 
 <DemoExample Title="Dynamic ComboBox" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15" PreventRenderForMcpClient>
-    <div>When the <b>Dynamic</b> parameter is true, you can add a new item in the ComboBox.</div>
+    <div>When the <b>Dynamic</b> parameter is true, a text typed into the ComboBox that matches no existing item can be added as a new item; <b>DynamicValueGenerator</b> generates the value of the new item and <b>OnDynamicAdd</b> notifies about the addition.</div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample3"
@@ -688,7 +783,7 @@
         <div>Value: @comboBoxValueSample3</div>
     </div>
     <br /><br /><br /><br />
-    <div>When the <b>Combo</b>, <b>Chips</b> and <b>Dynamic</b> parameters are true, you can add a new item in the ComboBox (pressing the enter key or touching the add button on the mobile).</div>
+    <div>Combining the <b>Combo</b>, <b>Chips</b> and <b>Dynamic</b> parameters, new items get added by pressing the enter key (or the add button of the responsive panel on mobile) and render as removable chips.</div>
     <br />
     <div class="example-content">
         <br />
@@ -727,23 +822,17 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16" PreventRenderForMcpClient>
+<DemoExample Title="Keyboard navigation" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16" PreventRenderForMcpClient>
     <div>
-        Use icons from external libraries like FontAwesome and Bootstrap Icons with the <b>CaretDownIcon</b>, 
-        <b>ClearButtonIcon</b>, <b>ChipsRemoveIcon</b>, <b>SearchBoxIcon</b>, <b>SearchBoxClearIcon</b>, and 
-        <b>ResponsiveCloseIcon</b> parameters on the dropdown and the <b>Icon</b> or <b>IconName</b> 
-        parameters on <b>BitDropdownOption</b>.
+        The dropdown is fully operable with the keyboard: <b>Enter</b>, <b>Space</b> and the arrow keys open the callout,
+        <b>ArrowUp</b> and <b>ArrowDown</b> move the focus between the items, <b>Home</b> and <b>End</b> jump to the first and last item,
+        <b>PageUp</b> and <b>PageDown</b> jump ten items at a time, typing characters moves the focus to the next matching item,
+        <b>Enter</b> and <b>Space</b> select the focused item and <b>Escape</b> closes the callout.
     </div>
-    
     <br />
-    <br />
-    
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
-    
     <div class="example-content">
-        <BitDropdown Label="Caret down icon (external)"
-                     CaretDownIcon="@BitIconInfo.Css("fa-solid fa-circle-chevron-down")"
+        <BitDropdown Label="Single select"
+                     DefaultValue="@string.Empty"
                      Placeholder="Select an item"
                      TItem="BitDropdownOption<string>" TValue="string">
             @foreach (var item in basicItems)
@@ -751,103 +840,130 @@
                 <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
             }
         </BitDropdown>
-
         <br /><br />
-
-        <BitDropdown Label="Clear button icon (external)"
-                     ShowClearButton
-                     ClearButtonIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
-                     Placeholder="Select an item"
+        <BitDropdown Label="Multi select"
+                     MultiSelect
+                     Placeholder="Select items"
+                     DefaultValue="@string.Empty"
                      TItem="BitDropdownOption<string>" TValue="string">
             @foreach (var item in basicItems)
             {
                 <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
             }
         </BitDropdown>
+    </div>
+</DemoExample>
 
-        <br /><br />
-
-        <BitDropdown Label="Chips remove icon (external)"
-                     Chips
+<DemoExample Title="Select all" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17" PreventRenderForMcpClient>
+    <div>
+        When the <b>ShowSelectAll</b> parameter is true, a select all item renders at the top of the callout of the
+        multi select dropdown that selects or clears all items at once and shows an indeterminate state when only
+        some items are selected. Disabled items are skipped, the <b>SelectAllText</b> parameter customizes its text
+        and combined with the search box, it only applies to the search result.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown @bind-Values="selectAllValues"
                      MultiSelect
-                     ChipsRemoveIcon="@BitIconInfo.Css("bi bi-x-circle")"
+                     ShowSelectAll
                      Placeholder="Select items"
+                     Label="Select all"
                      TItem="BitDropdownOption<string>" TValue="string">
             @foreach (var item in basicItems)
             {
                 <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
             }
         </BitDropdown>
-
+        <br />
+        <div>Values: @string.Join(',', selectAllValues)</div>
         <br /><br />
-
-        <BitDropdown Label="Search box icons (external)"
+        <BitDropdown MultiSelect
+                     ShowSelectAll
                      ShowSearchBox
-                     SearchBoxIcon="@BitIconInfo.Css("fa-solid fa-magnifying-glass")"
-                     SearchBoxClearIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
-                     Placeholder="Select an item"
+                     SelectAllText="Select all of them"
+                     Placeholder="Select items"
+                     DefaultValue="@string.Empty"
+                     SearchBoxPlaceholder="Search items"
+                     Label="Custom text & search"
                      TItem="BitDropdownOption<string>" TValue="string">
             @foreach (var item in basicItems)
             {
                 <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
             }
         </BitDropdown>
+    </div>
+</DemoExample>
 
-        <br /><br />
-
-        <BitDropdown Label="Item icons (IconName - Fluent UI)"
-                     Placeholder="Select an item"
+<DemoExample Title="Selection limit" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18" PreventRenderForMcpClient>
+    <div>
+        The <b>MaxSelectedItems</b> parameter limits the number of items that can be selected in the multi select
+        dropdown; once the limit is reached, the remaining items become disabled until an item gets unselected.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown @bind-Values="maxSelectedValues"
+                     MultiSelect
+                     MaxSelectedItems="2"
+                     Placeholder="Select up to 2 items"
+                     Label="Max 2 items"
                      TItem="BitDropdownOption<string>" TValue="string">
-            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Fruits" Value="@string.Empty" />
-            <BitDropdownOption Text="Apple" Value="@("f-app")" IconName="@BitIconName.AllApps" />
-            <BitDropdownOption Text="Banana" Value="@("f-ban")" IconName="@BitIconName.Calculator" />
-            <BitDropdownOption Text="Orange" Value="@("f-ora")" IconName="@BitIconName.FavoriteStar" IsEnabled="false" />
-            <BitDropdownOption Text="Grape" Value="@("f-gra")" IconName="@BitIconName.Edit" />
-            <BitDropdownOption ItemType="BitDropdownItemType.Divider" Value="@string.Empty" />
-            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Vegetables" Value="@string.Empty" />
-            <BitDropdownOption Text="Broccoli" Value="@("v-bro")" IconName="@BitIconName.Health" />
-            <BitDropdownOption Text="Carrot" Value="@("v-car")" IconName="@BitIconName.Add" />
-            <BitDropdownOption Text="Lettuce" Value="@("v-let")" IconName="@BitIconName.ChevronDown" />
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
         </BitDropdown>
+        <br />
+        <div>Values: @string.Join(',', maxSelectedValues)</div>
+    </div>
+</DemoExample>
 
+<DemoExample Title="Empty state" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
+    <div>
+        When there is no item to show in the callout (an empty list or a search without a result), the dropdown
+        renders a message that can be customized using the <b>EmptyText</b> and <b>EmptyTemplate</b> parameters.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="Default"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string" />
         <br /><br />
-
-        <BitDropdown Label="Item icons (Icon - FontAwesome)"
+        <BitDropdown Label="EmptyText"
+                     Placeholder="Select an item"
+                     EmptyText="There is nothing here!"
+                     TItem="BitDropdownOption<string>" TValue="string" />
+        <br /><br />
+        <BitDropdown Label="EmptyTemplate"
                      Placeholder="Select an item"
                      TItem="BitDropdownOption<string>" TValue="string">
-            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Fruits" Value="@string.Empty" />
-            <BitDropdownOption Text="Apple" Value="@("f-app")" Icon="@BitIconInfo.Css("fa-solid fa-apple-whole")" />
-            <BitDropdownOption Text="Banana" Value="@("f-ban")" Icon="@BitIconInfo.Css("fa-solid fa-moon")" />
-            <BitDropdownOption Text="Orange" Value="@("f-ora")" Icon="@BitIconInfo.Fa("solid lemon")" IsEnabled="false" />
-            <BitDropdownOption Text="Grape" Value="@("f-gra")" Icon="@BitIconInfo.Css("fa-solid fa-droplet")" />
-            <BitDropdownOption ItemType="BitDropdownItemType.Divider" Value="@string.Empty" />
-            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Vegetables" Value="@string.Empty" />
-            <BitDropdownOption Text="Broccoli" Value="@("v-bro")" Icon="@BitIconInfo.Css("fa-solid fa-seedling")" />
-            <BitDropdownOption Text="Carrot" Value="@("v-car")" Icon="@BitIconInfo.Css("fa-solid fa-carrot")" />
-            <BitDropdownOption Text="Lettuce" Value="@("v-let")" Icon="@BitIconInfo.Css("fa-solid fa-leaf")" />
+            <EmptyTemplate>
+                <div class="custom-drp custom-drp-empty">
+                    <BitIcon IconName="@BitIconName.SearchIssue" />
+                    <div>Nothing to show!</div>
+                </div>
+            </EmptyTemplate>
         </BitDropdown>
-
         <br /><br />
-
-        <BitDropdown Label="Item icons (Icon - Bootstrap Icons)"
+        <BitDropdown Label="Search without result"
+                     ShowSearchBox
+                     DefaultValue="@string.Empty"
                      Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search for anything"
                      TItem="BitDropdownOption<string>" TValue="string">
-            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Fruits" Value="@string.Empty" />
-            <BitDropdownOption Text="Apple" Value="@("f-app")" Icon="@BitIconInfo.Bi("apple")" />
-            <BitDropdownOption Text="Banana" Value="@("f-ban")" Icon="@BitIconInfo.Bi("flower1")" />
-            <BitDropdownOption Text="Orange" Value="@("f-ora")" Icon="@BitIconInfo.Css("bi bi-sun")" IsEnabled="false" />
-            <BitDropdownOption Text="Grape" Value="@("f-gra")" Icon="@BitIconInfo.Bi("droplet-fill")" />
-            <BitDropdownOption ItemType="BitDropdownItemType.Divider" Value="@string.Empty" />
-            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Vegetables" Value="@string.Empty" />
-            <BitDropdownOption Text="Broccoli" Value="@("v-bro")" Icon="@BitIconInfo.Bi("tree-fill")" />
-            <BitDropdownOption Text="Carrot" Value="@("v-car")" Icon="@BitIconInfo.Bi("egg")" />
-            <BitDropdownOption Text="Lettuce" Value="@("v-let")" Icon="@BitIconInfo.Bi("flower2")" />
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
         </BitDropdown>
     </div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17" PreventRenderForMcpClient>
-    <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
+<DemoExample Title="Virtualization" RazorCode="@example20RazorCode" Id="example20">
+    <div>Virtualizing large item lists is demonstrated with the <b>Items</b> and <b>ItemsProvider</b> APIs; check the <b>Item</b> and <b>Custom</b> tabs for the examples.</div>
+</DemoExample>
+
+<DemoExample Title="Color" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21" PreventRenderForMcpClient>
+    <div>The <b>Color</b> parameter paints the dropdown's accents (the focus border, the search icon and the check boxes of the multi select items) in one of the theme colors, <b>Primary</b> being the default.</div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Primary"
@@ -940,8 +1056,141 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18" PreventRenderForMcpClient>
-    <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
+<DemoExample Title="External Icons" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22" PreventRenderForMcpClient>
+    <div>
+        Use icons from external libraries like FontAwesome and Bootstrap Icons with the <b>CaretDownIcon</b>, 
+        <b>ClearButtonIcon</b>, <b>ChipsRemoveIcon</b>, <b>SearchBoxIcon</b>, <b>SearchBoxClearIcon</b>,
+        <b>ResponsiveCloseIcon</b>, and <b>ItemCheckIcon</b> parameters on the dropdown and the <b>Icon</b> or <b>IconName</b>
+        parameters on <b>BitDropdownOption</b>.
+    </div>
+    
+    <br />
+    <br />
+    
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
+    
+    <div class="example-content">
+        <BitDropdown Label="Caret down icon (external)"
+                     CaretDownIcon="@BitIconInfo.Css("fa-solid fa-circle-chevron-down")"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+
+        <br /><br />
+
+        <BitDropdown Label="Clear button icon (external)"
+                     ShowClearButton
+                     ClearButtonIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+
+        <br /><br />
+
+        <BitDropdown Label="Chips remove icon (external)"
+                     Chips
+                     MultiSelect
+                     ChipsRemoveIcon="@BitIconInfo.Css("bi bi-x-circle")"
+                     Placeholder="Select items"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+
+        <br /><br />
+
+        <BitDropdown Label="Search box icons (external)"
+                     ShowSearchBox
+                     SearchBoxIcon="@BitIconInfo.Css("fa-solid fa-magnifying-glass")"
+                     SearchBoxClearIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+
+        <br /><br />
+
+        <BitDropdown Label="Item check icon (external)"
+                     MultiSelect
+                     ItemCheckIcon="@BitIconInfo.Css("fa-solid fa-heart")"
+                     DefaultValues="@(Array.Empty<string>())"
+                     Placeholder="Select items"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+
+        <br /><br />
+
+        <BitDropdown Label="Item icons (IconName - Fluent UI)"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Fruits" Value="@string.Empty" />
+            <BitDropdownOption Text="Apple" Value="@("f-app")" IconName="@BitIconName.AllApps" />
+            <BitDropdownOption Text="Banana" Value="@("f-ban")" IconName="@BitIconName.Calculator" />
+            <BitDropdownOption Text="Orange" Value="@("f-ora")" IconName="@BitIconName.FavoriteStar" IsEnabled="false" />
+            <BitDropdownOption Text="Grape" Value="@("f-gra")" IconName="@BitIconName.Edit" />
+            <BitDropdownOption ItemType="BitDropdownItemType.Divider" Value="@string.Empty" />
+            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Vegetables" Value="@string.Empty" />
+            <BitDropdownOption Text="Broccoli" Value="@("v-bro")" IconName="@BitIconName.Health" />
+            <BitDropdownOption Text="Carrot" Value="@("v-car")" IconName="@BitIconName.Add" />
+            <BitDropdownOption Text="Lettuce" Value="@("v-let")" IconName="@BitIconName.ChevronDown" />
+        </BitDropdown>
+
+        <br /><br />
+
+        <BitDropdown Label="Item icons (Icon - FontAwesome)"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Fruits" Value="@string.Empty" />
+            <BitDropdownOption Text="Apple" Value="@("f-app")" Icon="@BitIconInfo.Css("fa-solid fa-apple-whole")" />
+            <BitDropdownOption Text="Banana" Value="@("f-ban")" Icon="@BitIconInfo.Css("fa-solid fa-moon")" />
+            <BitDropdownOption Text="Orange" Value="@("f-ora")" Icon="@BitIconInfo.Fa("solid lemon")" IsEnabled="false" />
+            <BitDropdownOption Text="Grape" Value="@("f-gra")" Icon="@BitIconInfo.Css("fa-solid fa-droplet")" />
+            <BitDropdownOption ItemType="BitDropdownItemType.Divider" Value="@string.Empty" />
+            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Vegetables" Value="@string.Empty" />
+            <BitDropdownOption Text="Broccoli" Value="@("v-bro")" Icon="@BitIconInfo.Css("fa-solid fa-seedling")" />
+            <BitDropdownOption Text="Carrot" Value="@("v-car")" Icon="@BitIconInfo.Css("fa-solid fa-carrot")" />
+            <BitDropdownOption Text="Lettuce" Value="@("v-let")" Icon="@BitIconInfo.Css("fa-solid fa-leaf")" />
+        </BitDropdown>
+
+        <br /><br />
+
+        <BitDropdown Label="Item icons (Icon - Bootstrap Icons)"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Fruits" Value="@string.Empty" />
+            <BitDropdownOption Text="Apple" Value="@("f-app")" Icon="@BitIconInfo.Bi("apple")" />
+            <BitDropdownOption Text="Banana" Value="@("f-ban")" Icon="@BitIconInfo.Bi("flower1")" />
+            <BitDropdownOption Text="Orange" Value="@("f-ora")" Icon="@BitIconInfo.Css("bi bi-sun")" IsEnabled="false" />
+            <BitDropdownOption Text="Grape" Value="@("f-gra")" Icon="@BitIconInfo.Bi("droplet-fill")" />
+            <BitDropdownOption ItemType="BitDropdownItemType.Divider" Value="@string.Empty" />
+            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Vegetables" Value="@string.Empty" />
+            <BitDropdownOption Text="Broccoli" Value="@("v-bro")" Icon="@BitIconInfo.Bi("tree-fill")" />
+            <BitDropdownOption Text="Carrot" Value="@("v-car")" Icon="@BitIconInfo.Bi("egg")" />
+            <BitDropdownOption Text="Lettuce" Value="@("v-let")" Icon="@BitIconInfo.Bi("flower2")" />
+        </BitDropdown>
+    </div>
+</DemoExample>
+
+<DemoExample Title="Style & Class" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23" PreventRenderForMcpClient>
+    <div>Style the dropdown at every level: inline <b>Style</b> and <b>Class</b> on the root element, per-item styles and classes on the items, and the <b>Styles</b> and <b>Classes</b> parameters that target each internal part of the component individually.</div>
     <br /><br />
     <div class="example-content">
         <div>Component's Style & Class:</div><br />
@@ -1002,8 +1251,8 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
-    <div>Use BitDropdown in right-to-left (RTL).</div>
+<DemoExample Title="RTL" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24" PreventRenderForMcpClient>
+    <div>Setting the <b>Dir</b> parameter to <b>Rtl</b> renders the dropdown right-to-left for languages like Arabic, Persian and Hebrew, in both the regular callout and the responsive panel.</div>
     <br />
     <dir dir="rtl" style="padding:0">
         <div class="example-content">
@@ -1040,8 +1289,4 @@
             </BitDropdown>
         </div>
     </dir>
-</DemoExample>
-
-<DemoExample Title="Virtualization" RazorCode="@example20RazorCode" Id="example20">
-    <div>Not applicable to option demo!</div>
 </DemoExample>
\ No newline at end of file
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.cs
index 2baa6b22e7..95acb698be 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.cs
@@ -69,6 +69,12 @@ public partial class _BitDropdownOptionDemo
     ];
 
 
+    private IEnumerable<string?> selectAllValues = [];
+    private IEnumerable<string?> maxSelectedValues = [];
+
+    private bool isDropdownOpen;
+    private int selectItemCounter;
+
     private string controlledValue = "f-app";
     private IEnumerable<string?> controlledValues = ["f-app", "f-ban"];
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
index 0d97b9eed5..05a45474f4 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
@@ -56,6 +56,29 @@ public partial class _BitDropdownOptionDemo
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
+</BitDropdown>
+
+<BitDropdown Label=""ReadOnly""
+             ReadOnly
+             DefaultValue=""@(""f-app"")""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Custom delimiter""
+             MultiSelect
+             MultiSelectDelimiter="" - ""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"" })""
+             Placeholder=""Select items""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
 </BitDropdown>";
     private readonly string example1CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
@@ -107,6 +130,24 @@ public partial class _BitDropdownOptionDemo
     }
 </BitDropdown>
 
+<BitDropdown Label=""Templates""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>""
+             TValue=""string"">
+    <PrefixTemplate>
+        <BitIcon IconName=""@BitIconName.ShoppingCart"" Style=""padding-inline:0.5rem"" />
+    </PrefixTemplate>
+    <SuffixTemplate>
+        <BitIcon IconName=""@BitIconName.Info"" Style=""padding-inline:0.5rem"" />
+    </SuffixTemplate>
+    <Options>
+        @foreach (var item in basicItems)
+        {
+            <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+        }
+    </Options>
+</BitDropdown>
+
 <BitDropdown Label=""Disabled""
              Prefix=""Fruits:""
              Suffix=""kg""
@@ -187,7 +228,18 @@ public partial class _BitDropdownOptionDemo
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
-</BitDropdown>";
+</BitDropdown>
+
+<div style=""padding:0.5rem;border-radius:0.5rem;background:linear-gradient(90deg,#ff00cc7f,#3333997f)"">
+    <BitDropdown Transparent
+                 Placeholder=""Select an item""
+                 TItem=""BitDropdownOption<string>"" TValue=""string"">
+        @foreach (var item in basicItems)
+        {
+            <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+        }
+    </BitDropdown>
+</div>";
     private readonly string example4CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
 [
@@ -626,6 +678,20 @@ private void HandleInvalidSubmit() { }
     }
 </BitDropdown>
 
+<BitDropdown Label=""CaretDownTemplate""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    <CaretDownTemplate>
+        <BitIcon IconName=""@BitIconName.FavoriteStar"" Style=""font-size:0.875rem"" />
+    </CaretDownTemplate>
+    <Options>
+        @foreach (var item in dataItems)
+        {
+            <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" />
+        }
+    </Options>
+</BitDropdown>
+
 <BitDropdown Label=""Callout templates""
              Placeholder=""Select an item""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
@@ -736,8 +802,36 @@ private void HandleInvalidSubmit() { }
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
-<div>Selected Value: @selectedItem2?.Value</div>";
+<div>Selected Value: @selectedItem2?.Value</div>
+
+<BitDropdown Label=""Single select""
+             Reselectable
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string""
+             OnSelectItem=""(BitDropdownOption<string> item) => selectItemCounter++"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+<div>OnSelectItem count: @selectItemCounter</div>
+
+<BitButton OnClick=""() => isDropdownOpen = true"">Open the dropdown</BitButton>
+<BitDropdown @bind-IsOpen=""isDropdownOpen""
+             Label=""Single select""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>";
     private readonly string example12CsharpCode = @"
+private bool isDropdownOpen;
+private int selectItemCounter;
+
 private string controlledValue = ""f-app"";
 private IEnumerable<string?> controlledValues = [""f-app"", ""f-ban""];
 
@@ -922,11 +1016,8 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
 ];";
 
     private readonly string example16RazorCode = @"
-<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
-<link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
-
-<BitDropdown Label=""Caret down icon (external)""
-             CaretDownIcon=""@BitIconInfo.Css(""fa-solid fa-circle-chevron-down"")""
+<BitDropdown Label=""Single select""
+             DefaultValue=""@string.Empty""
              Placeholder=""Select an item""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
     @foreach (var item in basicItems)
@@ -935,86 +1026,139 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     }
 </BitDropdown>
 
-<BitDropdown Label=""Clear button icon (external)""
-             ShowClearButton
-             ClearButtonIcon=""@BitIconInfo.Css(""fa-solid fa-circle-xmark"")""
-             Placeholder=""Select an item""
+<BitDropdown Label=""Multi select""
+             MultiSelect
+             Placeholder=""Select items""
+             DefaultValue=""@string.Empty""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
-</BitDropdown>
+</BitDropdown>";
+    private readonly string example16CsharpCode = @"
+private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];";
 
-<BitDropdown Label=""Chips remove icon (external)""
-             Chips
+    private readonly string example17RazorCode = @"
+<BitDropdown @bind-Values=""selectAllValues""
              MultiSelect
-             ChipsRemoveIcon=""@BitIconInfo.Css(""bi bi-x-circle"")""
+             ShowSelectAll
              Placeholder=""Select items""
+             Label=""Select all""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
+<div>Values: @string.Join(',', selectAllValues)</div>
 
-<BitDropdown Label=""Search box icons (external)""
+<BitDropdown MultiSelect
+             ShowSelectAll
              ShowSearchBox
-             SearchBoxIcon=""@BitIconInfo.Css(""fa-solid fa-magnifying-glass"")""
-             SearchBoxClearIcon=""@BitIconInfo.Css(""fa-solid fa-circle-xmark"")""
-             Placeholder=""Select an item""
+             SelectAllText=""Select all of them""
+             Placeholder=""Select items""
+             DefaultValue=""@string.Empty""
+             SearchBoxPlaceholder=""Search items""
+             Label=""Custom text & search""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
-</BitDropdown>
+</BitDropdown>";
+    private readonly string example17CsharpCode = @"
+private IEnumerable<string?> selectAllValues = [];
 
-<BitDropdown Label=""Item icons (IconName - Fluent UI)""
-             Placeholder=""Select an item""
+private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];";
+
+    private readonly string example18RazorCode = @"
+<BitDropdown @bind-Values=""maxSelectedValues""
+             MultiSelect
+             MaxSelectedItems=""2""
+             Placeholder=""Select up to 2 items""
+             Label=""Max 2 items""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
-    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Fruits"" Value=""@string.Empty"" />
-    <BitDropdownOption Text=""Apple"" Value=""@(""f-app"")"" IconName=""@BitIconName.AllApps"" />
-    <BitDropdownOption Text=""Banana"" Value=""@(""f-ban"")"" IconName=""@BitIconName.Calculator"" />
-    <BitDropdownOption Text=""Orange"" Value=""@(""f-ora"")"" IconName=""@BitIconName.FavoriteStar"" IsEnabled=""false"" />
-    <BitDropdownOption Text=""Grape"" Value=""@(""f-gra"")"" IconName=""@BitIconName.Edit"" />
-    <BitDropdownOption ItemType=""BitDropdownItemType.Divider"" Value=""@string.Empty"" />
-    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Vegetables"" Value=""@string.Empty"" />
-    <BitDropdownOption Text=""Broccoli"" Value=""@(""v-bro"")"" IconName=""@BitIconName.Health"" />
-    <BitDropdownOption Text=""Carrot"" Value=""@(""v-car"")"" IconName=""@BitIconName.Add"" />
-    <BitDropdownOption Text=""Lettuce"" Value=""@(""v-let"")"" IconName=""@BitIconName.ChevronDown"" />
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
 </BitDropdown>
+<div>Values: @string.Join(',', maxSelectedValues)</div>";
+    private readonly string example18CsharpCode = @"
+private IEnumerable<string?> maxSelectedValues = [];
 
-<BitDropdown Label=""Item icons (Icon - FontAwesome)""
+private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];";
+
+    private readonly string example19RazorCode = @"
+<BitDropdown Label=""Default""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"" />
+
+<BitDropdown Label=""EmptyText""
+             Placeholder=""Select an item""
+             EmptyText=""There is nothing here!""
+             TItem=""BitDropdownOption<string>"" TValue=""string"" />
+
+<BitDropdown Label=""EmptyTemplate""
              Placeholder=""Select an item""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
-    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Fruits"" Value=""@string.Empty"" />
-    <BitDropdownOption Text=""Apple"" Value=""@(""f-app"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-apple-whole"")"" />
-    <BitDropdownOption Text=""Banana"" Value=""@(""f-ban"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-moon"")"" />
-    <BitDropdownOption Text=""Orange"" Value=""@(""f-ora"")"" Icon=""@BitIconInfo.Fa(""solid lemon"")"" IsEnabled=""false"" />
-    <BitDropdownOption Text=""Grape"" Value=""@(""f-gra"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-droplet"")"" />
-    <BitDropdownOption ItemType=""BitDropdownItemType.Divider"" Value=""@string.Empty"" />
-    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Vegetables"" Value=""@string.Empty"" />
-    <BitDropdownOption Text=""Broccoli"" Value=""@(""v-bro"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-seedling"")"" />
-    <BitDropdownOption Text=""Carrot"" Value=""@(""v-car"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-carrot"")"" />
-    <BitDropdownOption Text=""Lettuce"" Value=""@(""v-let"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-leaf"")"" />
+    <EmptyTemplate>
+        <div class=""custom-drp custom-drp-empty"">
+            <BitIcon IconName=""@BitIconName.SearchIssue"" />
+            <div>Nothing to show!</div>
+        </div>
+    </EmptyTemplate>
 </BitDropdown>
 
-<BitDropdown Label=""Item icons (Icon - Bootstrap Icons)""
+<BitDropdown Label=""Search without result""
+             ShowSearchBox
+             DefaultValue=""@string.Empty""
              Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search for anything""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
-    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Fruits"" Value=""@string.Empty"" />
-    <BitDropdownOption Text=""Apple"" Value=""@(""f-app"")"" Icon=""@BitIconInfo.Bi(""apple"")"" />
-    <BitDropdownOption Text=""Banana"" Value=""@(""f-ban"")"" Icon=""@BitIconInfo.Bi(""flower1"")"" />
-    <BitDropdownOption Text=""Orange"" Value=""@(""f-ora"")"" Icon=""@BitIconInfo.Css(""bi bi-sun"")"" IsEnabled=""false"" />
-    <BitDropdownOption Text=""Grape"" Value=""@(""f-gra"")"" Icon=""@BitIconInfo.Bi(""droplet-fill"")"" />
-    <BitDropdownOption ItemType=""BitDropdownItemType.Divider"" Value=""@string.Empty"" />
-    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Vegetables"" Value=""@string.Empty"" />
-    <BitDropdownOption Text=""Broccoli"" Value=""@(""v-bro"")"" Icon=""@BitIconInfo.Bi(""tree-fill"")"" />
-    <BitDropdownOption Text=""Carrot"" Value=""@(""v-car"")"" Icon=""@BitIconInfo.Bi(""egg"")"" />
-    <BitDropdownOption Text=""Lettuce"" Value=""@(""v-let"")"" Icon=""@BitIconInfo.Bi(""flower2"")"" />
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
 </BitDropdown>";
-    private readonly string example16CsharpCode = @"
+    private readonly string example19CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1029,7 +1173,10 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example17RazorCode = @"
+    private readonly string? example20RazorCode = @"
+<div>Not applicable to option demo!</div>";
+
+    private readonly string example21RazorCode = @"
 <BitDropdown Label=""Primary""
              MultiSelect
              Color=""BitColor.Primary""
@@ -1117,7 +1264,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>";
-    private readonly string example17CsharpCode = @"
+    private readonly string example21CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1132,7 +1279,127 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example18RazorCode = @"
+    private readonly string example22RazorCode = @"
+<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
+<link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
+
+<BitDropdown Label=""Caret down icon (external)""
+             CaretDownIcon=""@BitIconInfo.Css(""fa-solid fa-circle-chevron-down"")""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Clear button icon (external)""
+             ShowClearButton
+             ClearButtonIcon=""@BitIconInfo.Css(""fa-solid fa-circle-xmark"")""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Chips remove icon (external)""
+             Chips
+             MultiSelect
+             ChipsRemoveIcon=""@BitIconInfo.Css(""bi bi-x-circle"")""
+             Placeholder=""Select items""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Search box icons (external)""
+             ShowSearchBox
+             SearchBoxIcon=""@BitIconInfo.Css(""fa-solid fa-magnifying-glass"")""
+             SearchBoxClearIcon=""@BitIconInfo.Css(""fa-solid fa-circle-xmark"")""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Item check icon (external)""
+             MultiSelect
+             ItemCheckIcon=""@BitIconInfo.Css(""fa-solid fa-heart"")""
+             DefaultValues=""@(Array.Empty<string>())""
+             Placeholder=""Select items""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Item icons (IconName - Fluent UI)""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Fruits"" Value=""@string.Empty"" />
+    <BitDropdownOption Text=""Apple"" Value=""@(""f-app"")"" IconName=""@BitIconName.AllApps"" />
+    <BitDropdownOption Text=""Banana"" Value=""@(""f-ban"")"" IconName=""@BitIconName.Calculator"" />
+    <BitDropdownOption Text=""Orange"" Value=""@(""f-ora"")"" IconName=""@BitIconName.FavoriteStar"" IsEnabled=""false"" />
+    <BitDropdownOption Text=""Grape"" Value=""@(""f-gra"")"" IconName=""@BitIconName.Edit"" />
+    <BitDropdownOption ItemType=""BitDropdownItemType.Divider"" Value=""@string.Empty"" />
+    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Vegetables"" Value=""@string.Empty"" />
+    <BitDropdownOption Text=""Broccoli"" Value=""@(""v-bro"")"" IconName=""@BitIconName.Health"" />
+    <BitDropdownOption Text=""Carrot"" Value=""@(""v-car"")"" IconName=""@BitIconName.Add"" />
+    <BitDropdownOption Text=""Lettuce"" Value=""@(""v-let"")"" IconName=""@BitIconName.ChevronDown"" />
+</BitDropdown>
+
+<BitDropdown Label=""Item icons (Icon - FontAwesome)""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Fruits"" Value=""@string.Empty"" />
+    <BitDropdownOption Text=""Apple"" Value=""@(""f-app"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-apple-whole"")"" />
+    <BitDropdownOption Text=""Banana"" Value=""@(""f-ban"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-moon"")"" />
+    <BitDropdownOption Text=""Orange"" Value=""@(""f-ora"")"" Icon=""@BitIconInfo.Fa(""solid lemon"")"" IsEnabled=""false"" />
+    <BitDropdownOption Text=""Grape"" Value=""@(""f-gra"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-droplet"")"" />
+    <BitDropdownOption ItemType=""BitDropdownItemType.Divider"" Value=""@string.Empty"" />
+    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Vegetables"" Value=""@string.Empty"" />
+    <BitDropdownOption Text=""Broccoli"" Value=""@(""v-bro"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-seedling"")"" />
+    <BitDropdownOption Text=""Carrot"" Value=""@(""v-car"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-carrot"")"" />
+    <BitDropdownOption Text=""Lettuce"" Value=""@(""v-let"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-leaf"")"" />
+</BitDropdown>
+
+<BitDropdown Label=""Item icons (Icon - Bootstrap Icons)""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Fruits"" Value=""@string.Empty"" />
+    <BitDropdownOption Text=""Apple"" Value=""@(""f-app"")"" Icon=""@BitIconInfo.Bi(""apple"")"" />
+    <BitDropdownOption Text=""Banana"" Value=""@(""f-ban"")"" Icon=""@BitIconInfo.Bi(""flower1"")"" />
+    <BitDropdownOption Text=""Orange"" Value=""@(""f-ora"")"" Icon=""@BitIconInfo.Css(""bi bi-sun"")"" IsEnabled=""false"" />
+    <BitDropdownOption Text=""Grape"" Value=""@(""f-gra"")"" Icon=""@BitIconInfo.Bi(""droplet-fill"")"" />
+    <BitDropdownOption ItemType=""BitDropdownItemType.Divider"" Value=""@string.Empty"" />
+    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Vegetables"" Value=""@string.Empty"" />
+    <BitDropdownOption Text=""Broccoli"" Value=""@(""v-bro"")"" Icon=""@BitIconInfo.Bi(""tree-fill"")"" />
+    <BitDropdownOption Text=""Carrot"" Value=""@(""v-car"")"" Icon=""@BitIconInfo.Bi(""egg"")"" />
+    <BitDropdownOption Text=""Lettuce"" Value=""@(""v-let"")"" Icon=""@BitIconInfo.Bi(""flower2"")"" />
+</BitDropdown>";
+    private readonly string example22CsharpCode = @"
+private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];";
+
+    private readonly string example23RazorCode = @"
 <style>
     .custom-class {
         margin-inline: 1rem;
@@ -1230,7 +1497,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>";
-    private readonly string example18CsharpCode = @"
+    private readonly string example23CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1259,7 +1526,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"", Class = ""custom-veg"" }
 ];";
 
-    private readonly string example19RazorCode = @"
+    private readonly string example24RazorCode = @"
 <BitDropdown Label=""تک انتخابی""
              Dir=""BitDir.Rtl""
              Placeholder=""لطفا انتخاب کنید""
@@ -1291,7 +1558,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>";
-    private readonly string example19CsharpCode = @"
+    private readonly string example24CsharpCode = @"
 private readonly List<BitDropdownItem<string>> rtlItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""میوه ها"" },
@@ -1305,7 +1572,4 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""هویج"", Value = ""v-car"" },
     new() { Text = ""کاهو"", Value = ""v-let"" }
 ];";
-
-    private readonly string? example20RazorCode = @"
-<div>Not applicable to option demo!</div>";
 }

From f142ad38709e160a9a31edff1e52caa76af1d573 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Sun, 26 Jul 2026 08:50:30 +0330
Subject: [PATCH 2/7] fix local review findings

---
 .../Inputs/Dropdown/BitDropdown.razor         |  38 ++--
 .../Inputs/Dropdown/BitDropdown.razor.cs      |  79 ++++++--
 .../Inputs/Dropdown/BitDropdown.scss          |   6 +-
 .../Inputs/Dropdown/BitDropdownClassStyles.cs |  60 +++----
 .../Inputs/Dropdown/_BitDropdownItem.razor    |  12 +-
 .../JsInterop/DropdownsJsRuntimeExtensions.cs |   4 +-
 .../Bit.BlazorUI/Scripts/Dropdowns.ts         | 169 +++++++++++++++---
 .../Inputs/Dropdown/BitDropdownDemo.razor.cs  |  64 +++----
 .../Dropdown/_BitDropdownCustomDemo.razor     |   7 +-
 .../Dropdown/_BitDropdownItemDemo.razor       |   7 +-
 .../Dropdown/_BitDropdownOptionDemo.razor     |   7 +-
 11 files changed, 318 insertions(+), 135 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
index 39ec80e8b5..c0d16db3f8 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
@@ -13,6 +13,11 @@
     var comboBoxAddButtonIconCss = BitIconInfo.From(ComboBoxAddButtonIcon, ComboBoxAddButtonIconName ?? "Add")?.GetCssClasses();
     var itemCheckIconCss = GetItemCheckIconCss();
 
+    // The search may run an arbitrary user-provided function over the whole item set, so it is
+    // evaluated once per render here and the result is reused by everything that needs it below
+    // (the empty state, the select all state and the items themselves).
+    var searchedItems = GetSearchedItems();
+
     RenderFragment emptyContent =
         @<div style="@Styles?.EmptyContent" class="bit-drp-emp @Classes?.EmptyContent">
             @if (EmptyTemplate is not null)
@@ -40,7 +45,7 @@
      style="@StyleBuilder.Value"
      class="@ClassBuilder.Value"
      dir="@Dir?.ToString().ToLower()"
-     aria-owns="@(IsOpen? _calloutId : null)">
+     aria-owns="@(IsOpen? _scrollContainerId : null)">
     @if (LabelTemplate is not null)
     {
         <label id="@_labelId">
@@ -68,7 +73,7 @@
          aria-disabled="@(IsEnabled is false)"
          aria-expanded=@(IsOpen ? "true" : "false")
          aria-labelledby="@GetDropdownAriaLabelledby()"
-         aria-controls="@(IsOpen? _calloutId : null)">
+         aria-controls="@(IsOpen? _scrollContainerId : null)">
 
         @if (PrefixTemplate is not null)
         {
@@ -145,7 +150,9 @@
 
         @if (IsEnabled && ShowClearButton && _selectedItems.Count > 0)
         {
-            <button @onclick="HandleOnClearClick" @onclick:stopPropagation
+            @* The keydown is stopped here so activating this button with the keyboard cannot
+               reach the trigger's keydown handler and toggle the callout as well. *@
+            <button @onclick="HandleOnClearClick" @onclick:stopPropagation @onkeydown:stopPropagation
                     type="button"
                     style="@Styles?.ClearButton"
                     class="bit-drp-icn bit-drp-clr @Classes?.ClearButton">
@@ -192,14 +199,14 @@
      id="@_overlayId"
      class="bit-drp-ovl @Classes?.Overlay"></div>
 
+@* The listbox role belongs to the scroll container rather than the callout, because the callout also
+   holds the search box, the select all item and the header/footer templates, none of which are
+   allowed children of a listbox. *@
 <div @onkeydown="HandleOnCalloutKeyDown"
      id="@_calloutId"
      tabindex="0"
-     role="listbox"
      style="@Styles?.Callout"
-     class="@GetCalloutCssClasses()"
-     aria-labelledby="@_labelId"
-     aria-multiselectable="@(MultiSelect ? "true" : null)">
+     class="@GetCalloutCssClasses()">
 
     @if (Responsive)
     {
@@ -303,7 +310,7 @@
 
     @if (MultiSelect && ShowSelectAll && ItemsProvider is null)
     {
-        var (allSelected, anySelected) = GetSelectAllState();
+        var (allSelected, anySelected) = GetSelectAllState(searchedItems);
         var selectAllClasses = "bit-drp-sac bit-drp-iwr" +
                                (allSelected ? " bit-drp-chd" : string.Empty) +
                                (anySelected && allSelected is false ? " bit-drp-sai" : string.Empty) +
@@ -315,7 +322,7 @@
                     type="button"
                     role="checkbox"
                     style="@Styles?.SelectAllButton"
-                    class="bit-drp-mcn @Classes?.SelectAllButton"
+                    class="bit-drp-mcn bit-drp-sab @Classes?.SelectAllButton"
                     aria-checked="@selectAllAriaChecked">
                 <div style="@Styles?.SelectAllCheckBox"
                      class="bit-drp-chb @Classes?.SelectAllCheckBox">
@@ -332,13 +339,16 @@
     }
 
     <div id="@_scrollContainerId"
+         role="listbox"
          style="@Styles?.ScrollContainer"
-         class="bit-drp-scn @Classes?.ScrollContainer">
+         class="bit-drp-scn @Classes?.ScrollContainer"
+         aria-labelledby="@_labelId"
+         aria-multiselectable="@(MultiSelect ? "true" : null)">
         @if (Virtualize)
         {
             if (ItemsProvider is null)
             {
-                <Virtualize Items="GetSearchedItems()"
+                <Virtualize Items="searchedItems"
                             ItemSize="ItemSize"
                             OverscanCount="OverscanCount"
                             Placeholder="VirtualizePlaceholder">
@@ -371,20 +381,20 @@
                 @(Options ?? ChildContent)
             </CascadingValue>
 
-            @if (HasNoVisibleItems())
+            @if (HasNoVisibleItems(searchedItems))
             {
                 @emptyContent
             }
         }
         else
         {
-            @if (HasNoVisibleItems())
+            @if (HasNoVisibleItems(searchedItems))
             {
                 @emptyContent
             }
             else
             {
-                @foreach (var item in GetSearchedItems())
+                @foreach (var item in searchedItems)
                 {
                     <_BitDropdownItem Item="item" Dropdown="this" ItemCheckIconCss="@itemCheckIconCss" />
                 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
index fc669e39cb..11a7af013c 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
@@ -275,7 +275,8 @@ namespace Bit.BlazorUI;
     [Parameter] public RenderFragment? LabelTemplate { get; set; }
 
     /// <summary>
-    /// The maximum number of items that can be selected in multi select mode. Zero or null means no limit.
+    /// The maximum number of items that can be selected in multi select mode.
+    /// A value that is not greater than zero (and null) means no limit.
     /// </summary>
     [Parameter] public int? MaxSelectedItems { get; set; }
 
@@ -440,6 +441,8 @@ namespace Bit.BlazorUI;
 
     /// <summary>
     /// Shows the select all item in the callout in multi select mode.
+    /// It has no effect when the items are provided by an ItemsProvider, since the items that are not
+    /// loaded yet cannot be selected.
     /// </summary>
     [Parameter] public bool ShowSelectAll { get; set; }
 
@@ -710,7 +713,7 @@ internal string GetItemWrapperCssClasses(TItem item)
             stringBuilder.Append(" bit-drp-chd");
         }
 
-        if (GetIsEnabled(item) is false || (isSelected is false && IsMaxSelectedItemsReached))
+        if (GetIsItemDisabled(item))
         {
             stringBuilder.Append(" bit-drp-ids");
         }
@@ -718,7 +721,28 @@ internal string GetItemWrapperCssClasses(TItem item)
         return stringBuilder.ToString();
     }
 
-    internal bool IsMaxSelectedItemsReached => MultiSelect && MaxSelectedItems is > 0 && (Values?.Count() ?? 0) >= MaxSelectedItems.Value;
+    // Reaching the selection limit makes the items that are not selected yet unavailable, so they are
+    // disabled like any other disabled item instead of only being styled as such.
+    internal bool GetIsItemDisabled(TItem item)
+    {
+        if (GetIsEnabled(item) is false) return true;
+
+        return IsMaxSelectedItemsReached && GetIsSelected(item) is false;
+    }
+
+    internal bool IsMaxSelectedItemsReached => MultiSelect && MaxSelectedItems is > 0 && IsValuesCountAtLeast(MaxSelectedItems.Value);
+
+    // This is evaluated once per rendered item, so a full enumeration of Values (which is an
+    // IEnumerable and may be lazy) has to be avoided: collections expose their count directly, and
+    // for anything else it is enough to know whether the limit is already reached.
+    private bool IsValuesCountAtLeast(int count)
+    {
+        if (Values is null) return false;
+
+        if (Values is ICollection<TValue?> collection) return collection.Count >= count;
+
+        return Values.Skip(count - 1).Any();
+    }
 
     internal int? GetTotalItems()
     {
@@ -1322,6 +1346,7 @@ private async Task CloseCallout()
         if (IsOpen is false) return;
 
         _rateLimiter.Reset();
+        _typeAheadBuffer = string.Empty;
 
         if (await AssignIsOpen(false) is false) return;
 
@@ -1341,6 +1366,9 @@ private async Task HandleOnClick(MouseEventArgs e)
         await FocusOnSearchBox();
     }
 
+    // The default behavior of the navigation keys handled here is prevented by the keydown listener of
+    // Dropdowns.ts (Blazor cannot preventDefault per key), so the keys handled here and the ones listed
+    // there have to be kept in sync.
     private async Task HandleOnTriggerKeyDown(KeyboardEventArgs e)
     {
         if (IsEnabled is false) return;
@@ -1386,6 +1414,7 @@ private async Task HandleOnTriggerKeyDown(KeyboardEventArgs e)
         }
     }
 
+    // See the note on HandleOnTriggerKeyDown about keeping these keys in sync with Dropdowns.ts.
     private async Task HandleOnCalloutKeyDown(KeyboardEventArgs e)
     {
         if (IsEnabled is false || IsOpen is false) return;
@@ -1417,7 +1446,10 @@ private async Task HandleOnCalloutKeyDown(KeyboardEventArgs e)
                 await _dropdownWrapperRef.FocusAsync();
                 break;
             case "Tab":
+                // The callout is rendered at the end of the document, so leaving it without moving the
+                // focus back to the dropdown would continue the tab order from an unrelated place.
                 await CloseCallout();
+                await _dropdownWrapperRef.FocusAsync();
                 break;
             default:
                 // In Combo mode the combo input is the type-ahead, and printable keys
@@ -1430,6 +1462,7 @@ private async Task HandleOnCalloutKeyDown(KeyboardEventArgs e)
         }
     }
 
+    // Keep this in sync with the isPrintable helper of Dropdowns.ts.
     private static bool IsPrintableKey(KeyboardEventArgs e)
     {
         return e.Key?.Length is 1 && e.Key != " " && e.CtrlKey is false && e.AltKey is false && e.MetaKey is false;
@@ -1454,7 +1487,7 @@ private string GetTypeAheadBuffer(string key)
 
     private ValueTask FocusItem(string mode, string? character = null)
     {
-        return _js.BitDropdownsFocusItem(_calloutId, mode, character);
+        return _js.BitDropdownsFocusItem(_calloutId, mode, character, Virtualize);
     }
 
     private void HandleOnValueChanged(object? sender, EventArgs args)
@@ -1640,14 +1673,14 @@ private async Task HandleOnClearClick()
         UpdateSelectedItemsFromValues();
     }
 
-    private bool HasNoVisibleItems()
+    private bool HasNoVisibleItems(ICollection<TItem> searchedItems)
     {
-        return GetSearchedItems().Any(i => GetItemType(i) == BitDropdownItemType.Normal && GetIsHidden(i) is false) is false;
+        return searchedItems.Any(i => GetItemType(i) == BitDropdownItemType.Normal && GetIsHidden(i) is false) is false;
     }
 
-    private (bool AllSelected, bool AnySelected) GetSelectAllState()
+    private (bool AllSelected, bool AnySelected) GetSelectAllState(ICollection<TItem> searchedItems)
     {
-        var candidates = GetSelectAllCandidateItems();
+        var candidates = GetSelectAllCandidateItems(searchedItems);
         if (candidates.Count == 0) return (false, false);
 
         var selectedCount = candidates.Count(GetIsSelected);
@@ -1655,11 +1688,11 @@ private bool HasNoVisibleItems()
         return (selectedCount == candidates.Count, selectedCount > 0);
     }
 
-    private List<TItem> GetSelectAllCandidateItems()
+    private List<TItem> GetSelectAllCandidateItems(ICollection<TItem> searchedItems)
     {
-        return [.. GetSearchedItems().Where(i => GetItemType(i) == BitDropdownItemType.Normal &&
-                                                 GetIsHidden(i) is false &&
-                                                 GetIsEnabled(i))];
+        return [.. searchedItems.Where(i => GetItemType(i) == BitDropdownItemType.Normal &&
+                                            GetIsHidden(i) is false &&
+                                            GetIsEnabled(i))];
     }
 
     private async Task HandleOnSelectAllClick()
@@ -1669,15 +1702,16 @@ private async Task HandleOnSelectAllClick()
         if (MultiSelect is false) return;
         if (ValuesHasBeenSet && ValuesChanged.HasDelegate is false) return;
 
-        var candidates = GetSelectAllCandidateItems();
+        var candidates = GetSelectAllCandidateItems(GetSearchedItems());
         if (candidates.Count == 0) return;
 
+        var comparer = EqualityComparer<TValue>.Default;
+
         List<TValue?> newValues;
         if (candidates.TrueForAll(GetIsSelected))
         {
             // All (searched) items are selected, so the select all item clears them, keeping
             // the selected values that are not part of the current search results.
-            var comparer = EqualityComparer<TValue>.Default;
             var candidateValues = candidates.Select(GetValue).ToList();
             newValues = [.. (Values ?? []).Where(v => candidateValues.Exists(cv => comparer.Equals(cv, v)) is false)];
         }
@@ -1693,7 +1727,24 @@ private async Task HandleOnSelectAllClick()
             }
         }
 
+        // The items added dynamically in the ComboBox mode are not part of Items, so assigning the
+        // values (which rebuilds the selected items from Items) would drop them; they are kept here
+        // as long as their values are still selected.
+        var dynamicItems = Combo && Dynamic
+            ? _selectedItems.FindAll(si => Items?.Contains(si) is not true)
+            : [];
+
         await AssignValues(newValues);
+
+        foreach (var item in dynamicItems)
+        {
+            if (newValues.Exists(v => comparer.Equals(v, GetValue(item))) is false) continue;
+            if (_selectedItems.Exists(si => comparer.Equals(GetValue(si), GetValue(item)))) continue;
+
+            _selectedItems.Add(item);
+            ClassBuilder.Reset();
+        }
+
         await OnValuesChange.InvokeAsync([.. (Values ?? [])!]);
     }
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
index 7c95e175a0..bfb0f9c53f 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
@@ -725,14 +725,16 @@
 .bit-drp-emp {
     display: flex;
     cursor: default;
+    text-align: center;
     user-select: none;
     color: $clr-fg-sec;
     align-items: center;
-    height: spacing(4.5);
-    padding: 0 spacing(1);
     box-sizing: border-box;
+    min-height: spacing(4.5);
     justify-content: center;
     font-size: spacing(1.75);
+    overflow-wrap: break-word;
+    padding: spacing(1) spacing(1.5);
 }
 
 .bit-drp-sac {
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs
index 091142d39c..cf1fe529ca 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs
@@ -112,6 +112,31 @@ public class BitDropdownClassStyles
     /// </summary>
     public string? SearchBoxClearIcon { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the select all item container of the multi-select BitDropdown.
+    /// </summary>
+    public string? SelectAllContainer { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the select all item button of the multi-select BitDropdown.
+    /// </summary>
+    public string? SelectAllButton { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the select all item check box of the multi-select BitDropdown.
+    /// </summary>
+    public string? SelectAllCheckBox { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the select all item check icon of the multi-select BitDropdown.
+    /// </summary>
+    public string? SelectAllCheckIcon { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the select all item text of the multi-select BitDropdown.
+    /// </summary>
+    public string? SelectAllText { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the scroll container of the BitDropdown.
     /// </summary>
@@ -157,6 +182,11 @@ public class BitDropdownClassStyles
     /// </summary>
     public string? ItemDivider { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the empty state content of the BitDropdown.
+    /// </summary>
+    public string? EmptyContent { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the dropdown's prefix container.
     /// </summary>
@@ -177,36 +207,6 @@ public class BitDropdownClassStyles
     /// </summary>
     public string? Suffix { get; set; }
 
-    /// <summary>
-    /// Custom CSS classes/styles for the empty state content of the BitDropdown.
-    /// </summary>
-    public string? EmptyContent { get; set; }
-
-    /// <summary>
-    /// Custom CSS classes/styles for the select all item container of the multi-select BitDropdown.
-    /// </summary>
-    public string? SelectAllContainer { get; set; }
-
-    /// <summary>
-    /// Custom CSS classes/styles for the select all item button of the multi-select BitDropdown.
-    /// </summary>
-    public string? SelectAllButton { get; set; }
-
-    /// <summary>
-    /// Custom CSS classes/styles for the select all item check box of the multi-select BitDropdown.
-    /// </summary>
-    public string? SelectAllCheckBox { get; set; }
-
-    /// <summary>
-    /// Custom CSS classes/styles for the select all item check icon of the multi-select BitDropdown.
-    /// </summary>
-    public string? SelectAllCheckIcon { get; set; }
-
-    /// <summary>
-    /// Custom CSS classes/styles for the select all item text of the multi-select BitDropdown.
-    /// </summary>
-    public string? SelectAllText { get; set; }
-
     /// <summary>
     /// Custom CSS classes/styles for the ComboBox input container in responsive mode of the BitDropdown.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/_BitDropdownItem.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/_BitDropdownItem.razor
index 9821fa8fef..57e1ee1016 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/_BitDropdownItem.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/_BitDropdownItem.razor
@@ -7,8 +7,8 @@
     var id = Dropdown.GetId(Item);
     var text = Dropdown.GetText(Item);
     var isHidden = Dropdown.GetIsHidden(Item);
-    var isEnabled = Dropdown.GetIsEnabled(Item);
     var isSelected = itemType == BitDropdownItemType.Normal ? Dropdown.GetIsSelected(Item) : false;
+    var isDisabled = itemType == BitDropdownItemType.Normal && Dropdown.GetIsItemDisabled(Item);
 }
 
 <div style="@Dropdown.GetStyle(Item)" class="@Dropdown.GetClass(Item)">
@@ -38,12 +38,12 @@
                         type="button"
                         role="option"
                         title="@Dropdown.GetTitle(Item)"
-                        disabled=@(isEnabled is false)
+                        disabled=@isDisabled
                         style="@Dropdown.Styles?.ItemButton"
                         class="bit-drp-mcn @Dropdown.Classes?.ItemButton"
                         aria-label="@Dropdown.GetAriaLabel(Item)"
                         aria-setsize="@Dropdown.GetTotalItems()"
-                        aria-disabled="@(isEnabled is false)"
+                        aria-disabled="@isDisabled"
                         aria-selected="@(isSelected ? "true" : "false")"
                         aria-posinset="@Dropdown.GetItemPosInSet(Item)">
                     <div style="@Dropdown.Styles?.ItemCheckBox"
@@ -80,13 +80,13 @@
                     type="button"
                     role="option"
                     title="@Dropdown.GetTitle(Item)"
-                    disabled=@(isEnabled is false)
-                    tabindex="@(isEnabled ? 0 : -1)"
+                    disabled=@isDisabled
+                    tabindex="@(isDisabled ? -1 : 0)"
                     style="@(isHidden ? "display:none" : "") @Dropdown.Styles?.ItemButton"
                     class="bit-drp-itm@(isSelected ? " bit-drp-sel" : "") @Dropdown.Classes?.ItemButton"
                     aria-label="@Dropdown.GetAriaLabel(Item)"
                     aria-setsize="@Dropdown.GetTotalItems()"
-                    aria-disabled="@(isEnabled is false)"
+                    aria-disabled="@isDisabled"
                     aria-selected="@(isSelected ? "true" : "false")"
                     aria-posinset="@Dropdown.GetItemPosInSet(Item)">
                 @if (Dropdown.ItemTemplate is not null)
diff --git a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DropdownsJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DropdownsJsRuntimeExtensions.cs
index cf3e0b14ce..0ba54816aa 100644
--- a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DropdownsJsRuntimeExtensions.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DropdownsJsRuntimeExtensions.cs
@@ -12,8 +12,8 @@ internal static ValueTask BitDropdownsDispose(this IJSRuntime jsRuntime, string
         return jsRuntime.InvokeVoid("BitBlazorUI.Dropdowns.dispose", id);
     }
 
-    internal static ValueTask BitDropdownsFocusItem(this IJSRuntime jsRuntime, string calloutId, string mode, string? character)
+    internal static ValueTask BitDropdownsFocusItem(this IJSRuntime jsRuntime, string calloutId, string mode, string? character, bool virtualize)
     {
-        return jsRuntime.InvokeVoid("BitBlazorUI.Dropdowns.focusItem", calloutId, mode, character);
+        return jsRuntime.InvokeVoid("BitBlazorUI.Dropdowns.focusItem", calloutId, mode, character, virtualize);
     }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts b/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts
index 4ce143fc2e..eccbd18948 100644
--- a/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts
@@ -2,6 +2,21 @@ namespace BitBlazorUI {
     export class Dropdowns {
         private static _handlers = new Map<string, { element: HTMLElement, handler: (e: KeyboardEvent) => void }[]>();
 
+        // The number of animation frames to wait for the items revealed by a programmatic scroll in
+        // virtualize mode to be rendered, before giving up and using whatever is rendered by then.
+        private static readonly VIRTUALIZE_RENDER_FRAMES = 20;
+
+        // The keys whose default behavior (scrolling the page or the callout) has to be prevented
+        // because the dropdown handles them itself. They mirror the keys handled by the
+        // HandleOnTriggerKeyDown and HandleOnCalloutKeyDown methods of BitDropdown, which is where a
+        // key added to or removed from these lists has to be reflected as well.
+        private static readonly TRIGGER_KEYS = ['ArrowDown', 'ArrowUp'];
+        private static readonly CALLOUT_KEYS = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp'];
+
+        // These are only handled when the focus is not in the search/combo input, where they keep
+        // their caret behavior.
+        private static readonly CARET_KEYS = ['Home', 'End'];
+
         // Attaches keydown listeners that only prevent the default behavior (e.g. page scrolling)
         // of the navigation keys. The actual keyboard logic runs in the Blazor keydown handlers,
         // which cannot conditionally preventDefault per key.
@@ -12,10 +27,17 @@ namespace BitBlazorUI {
 
             const isTextInput = (e: KeyboardEvent) => (e.target as HTMLElement)?.tagName === 'INPUT';
 
+            // Keep this in sync with IsPrintableKey of BitDropdown.
+            const isPrintable = (e: KeyboardEvent) => e.key.length === 1 && e.key !== ' ' && !e.ctrlKey && !e.altKey && !e.metaKey;
+
             const root = document.getElementById(id);
             if (root) {
                 const handler = (e: KeyboardEvent) => {
-                    if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || (e.key === ' ' && !isTextInput(e))) {
+                    // Buttons inside the trigger (e.g. the clear button) are activated by Space and
+                    // Enter themselves, so their keys must keep their default behavior.
+                    if ((e.target as HTMLElement)?.closest('button')) return;
+
+                    if (Dropdowns.TRIGGER_KEYS.indexOf(e.key) > -1 || (e.key === ' ' && !isTextInput(e))) {
                         e.preventDefault();
                     }
                 };
@@ -26,10 +48,19 @@ namespace BitBlazorUI {
             const callout = document.getElementById(calloutId);
             if (callout) {
                 const handler = (e: KeyboardEvent) => {
-                    // Home/End must keep their caret behavior while typing in the search/combo inputs.
-                    if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'PageDown' || e.key === 'PageUp' ||
-                        ((e.key === 'Home' || e.key === 'End') && !isTextInput(e))) {
+                    if (Dropdowns.CALLOUT_KEYS.indexOf(e.key) > -1 ||
+                        (Dropdowns.CARET_KEYS.indexOf(e.key) > -1 && !isTextInput(e))) {
                         e.preventDefault();
+                        return;
+                    }
+
+                    // In ComboBox mode the input is the type-ahead, so the arrow keys having moved the
+                    // focus to an option must not stop the filtering: a printable key returns the focus
+                    // to the input, and since its default is not prevented the character lands there.
+                    if (!isTextInput(e) && isPrintable(e)) {
+                        const combo = (callout.querySelector('.bit-drp-icb') ??
+                                       root?.querySelector('.bit-drp-inp')) as HTMLElement | null;
+                        combo?.focus();
                     }
                 };
                 callout.addEventListener('keydown', handler);
@@ -47,39 +78,119 @@ namespace BitBlazorUI {
             Dropdowns._handlers.delete(id);
         }
 
-        public static focusItem(calloutId: string, mode: string, char: string | null) {
+        public static async focusItem(calloutId: string, mode: string, char: string | null, virtualize: boolean) {
             const callout = document.getElementById(calloutId);
             if (!callout) return;
 
-            const items = (Array.from(callout.querySelectorAll('.bit-drp-itm, .bit-drp-mcn')) as HTMLElement[])
+            const scroller = callout.querySelector('.bit-drp-scn') as HTMLElement | null;
+
+            let items = Dropdowns._getItems(callout);
+            if (items.length === 0) return;
+
+            let current = items.indexOf(document.activeElement as HTMLElement);
+
+            // In virtualize mode only the items around the visible window exist in the DOM, so moving
+            // beyond it means scrolling first and continuing with the items rendered afterwards.
+            if (virtualize && Dropdowns._isScrollable(scroller)) {
+                const scrolled = await Dropdowns._scrollFor(callout, scroller!, mode, items);
+                if (scrolled) {
+                    items = scrolled.items;
+                    current = scrolled.items.indexOf(document.activeElement as HTMLElement);
+                    mode = scrolled.mode;
+                }
+            }
+
+            const index = Dropdowns._resolveIndex(items, current, mode, char, virtualize);
+
+            if (index > -1) {
+                items[index].focus();
+            }
+        }
+
+        // The options plus the select all item, which is not an option (it is a checkbox outside of the
+        // listbox) but still has to be reachable with the arrow keys.
+        private static _getItems(callout: HTMLElement) {
+            return (Array.from(callout.querySelectorAll('[role="option"], .bit-drp-sab')) as HTMLElement[])
                 .filter(el => !(el as HTMLButtonElement).disabled &&
                     el.getAttribute('aria-disabled') !== 'true' &&
                     !el.closest('.bit-drp-ids') &&
                     el.offsetParent !== null);
-            if (items.length === 0) return;
+        }
+
+        private static _isScrollable(scroller: HTMLElement | null) {
+            return !!scroller && scroller.scrollHeight > scroller.clientHeight + 1;
+        }
+
+        // Scrolls the item container for the jump modes and resolves once the items revealed by the
+        // scroll have been rendered, mapping the mode to where the focus goes in the new window.
+        private static async _scrollFor(callout: HTMLElement, scroller: HTMLElement, mode: string, items: HTMLElement[]) {
+            const max = scroller.scrollHeight - scroller.clientHeight;
 
-            const current = items.indexOf(document.activeElement as HTMLElement);
-            let index = -1;
+            let top: number;
+            let nextMode = mode;
 
             if (mode === 'first') {
-                index = 0;
+                top = 0;
             } else if (mode === 'last') {
-                index = items.length - 1;
-            } else if (mode === 'next') {
-                index = current < 0 ? 0 : (current + 1) % items.length;
-            } else if (mode === 'prev') {
-                index = current < 0 ? items.length - 1 : (current - 1 + items.length) % items.length;
-            } else if (mode === 'nextPage') {
-                index = current < 0 ? 0 : Math.min(current + 10, items.length - 1);
+                top = max;
             } else if (mode === 'prevPage') {
-                index = current < 0 ? items.length - 1 : Math.max(current - 10, 0);
-            } else if (mode === 'selected') {
-                // Focus the selected option if there is one, otherwise the first one (APG combobox pattern).
-                index = items.findIndex(el => el.classList.contains('bit-drp-sel') || el.getAttribute('aria-selected') === 'true');
-                if (index < 0) {
-                    index = 0;
+                top = scroller.scrollTop - scroller.clientHeight;
+                nextMode = 'first';
+            } else if (mode === 'nextPage') {
+                top = scroller.scrollTop + scroller.clientHeight;
+                nextMode = 'last';
+            } else {
+                // The arrow keys move one item at a time, which scrolls the focused item into view and
+                // makes virtualization render the next ones on its own.
+                return null;
+            }
+
+            top = Math.max(0, Math.min(max, top));
+            if (top === scroller.scrollTop) return null;
+
+            const first = items[0];
+            const last = items[items.length - 1];
+
+            scroller.scrollTop = top;
+
+            for (let i = 0; i < Dropdowns.VIRTUALIZE_RENDER_FRAMES; i++) {
+                await new Promise<void>(resolve => requestAnimationFrame(() => resolve()));
+
+                const rendered = Dropdowns._getItems(callout);
+                if (rendered.length > 0 && (rendered[0] !== first || rendered[rendered.length - 1] !== last)) {
+                    return { items: rendered, mode: nextMode };
                 }
-            } else if (mode === 'char' && char) {
+            }
+
+            return { items: Dropdowns._getItems(callout), mode: nextMode };
+        }
+
+        private static _resolveIndex(items: HTMLElement[], current: number, mode: string, char: string | null, virtualize: boolean) {
+            // Wrapping around is only correct when every item is rendered; in virtualize mode the ends
+            // of the rendered window are not the ends of the list, so the focus stops there instead.
+            const wrap = (index: number) => virtualize
+                ? Math.max(0, Math.min(items.length - 1, index))
+                : (index + items.length) % items.length;
+
+            if (mode === 'first') return 0;
+
+            if (mode === 'last') return items.length - 1;
+
+            if (mode === 'next') return current < 0 ? 0 : wrap(current + 1);
+
+            if (mode === 'prev') return current < 0 ? items.length - 1 : wrap(current - 1);
+
+            if (mode === 'nextPage') return current < 0 ? 0 : Math.min(current + 10, items.length - 1);
+
+            if (mode === 'prevPage') return current < 0 ? items.length - 1 : Math.max(current - 10, 0);
+
+            if (mode === 'selected') {
+                // Focus the selected option if there is one, otherwise the first one (APG combobox pattern).
+                const index = items.findIndex(el => el.classList.contains('bit-drp-sel') || el.getAttribute('aria-selected') === 'true');
+                return index < 0 ? 0 : index;
+            }
+
+            if (mode === 'char' && char) {
                 // Type-ahead per the APG: a repeated single character cycles through the options starting
                 // with it, while a multi-character buffer matches the accumulated string without leaving
                 // the current option (so typing a longer prefix refines the match instead of jumping).
@@ -89,16 +200,16 @@ namespace BitBlazorUI {
                 const start = current < 0 ? 0 : (sameChar ? current + 1 : current);
                 for (let i = 0; i < items.length; i++) {
                     const candidate = (start + i) % items.length;
+                    // The select all item is not an option, so its text must not be matched.
+                    if (items[candidate].getAttribute('role') !== 'option') continue;
+
                     if ((items[candidate].textContent || '').trim().toLowerCase().indexOf(query) === 0) {
-                        index = candidate;
-                        break;
+                        return candidate;
                     }
                 }
             }
 
-            if (index > -1) {
-                items[index].focus();
-            }
+            return -1;
         }
     }
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
index 82b9844704..4db8969bb1 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
@@ -298,7 +298,7 @@ public partial class BitDropdownDemo
             Name = "MaxSelectedItems",
             Type = "int?",
             DefaultValue = "null",
-            Description = "The maximum number of items that can be selected in multi select mode. Zero or null means no limit.",
+            Description = "The maximum number of items that can be selected in multi select mode. A value that is not greater than zero (and null) means no limit.",
         },
         new()
         {
@@ -511,7 +511,7 @@ public partial class BitDropdownDemo
             Name = "ShowSelectAll",
             Type = "bool",
             DefaultValue = "false",
-            Description = "Shows the select all item in the callout in multi select mode.",
+            Description = "Shows the select all item in the callout in multi select mode. It has no effect when the items are provided by an ItemsProvider, since the items that are not loaded yet cannot be selected.",
         },
         new()
         {
@@ -1148,108 +1148,108 @@ public partial class BitDropdownDemo
                },
                new()
                {
-                   Name = "ScrollContainer",
+                   Name = "SelectAllContainer",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the scroll container of the BitDropdown."
+                   Description = "Custom CSS classes/styles for the select all item container of the multi-select BitDropdown."
                },
                new()
                {
-                   Name = "ItemHeader",
+                   Name = "SelectAllButton",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the item header of the BitDropdown."
+                   Description = "Custom CSS classes/styles for the select all item button of the multi-select BitDropdown."
                },
                new()
                {
-                   Name = "ItemWrapper",
+                   Name = "SelectAllCheckBox",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the item wrapper of the multi-select BitDropdown."
+                   Description = "Custom CSS classes/styles for the select all item check box of the multi-select BitDropdown."
                },
                new()
                {
-                   Name = "ItemButton",
+                   Name = "SelectAllCheckIcon",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the item button of the BitDropdown."
+                   Description = "Custom CSS classes/styles for the select all item check icon of the multi-select BitDropdown."
                },
                new()
                {
-                   Name = "ItemCheckBox",
+                   Name = "SelectAllText",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the item check box of the multi-select BitDropdown."
+                   Description = "Custom CSS classes/styles for the select all item text of the multi-select BitDropdown."
                },
                new()
                {
-                   Name = "ItemCheckIcon",
+                   Name = "ScrollContainer",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the item check icon of the multi-select BitDropdown."
+                   Description = "Custom CSS classes/styles for the scroll container of the BitDropdown."
                },
                new()
                {
-                   Name = "ItemIcon",
+                   Name = "ItemHeader",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the item icon of the BitDropdown."
+                   Description = "Custom CSS classes/styles for the item header of the BitDropdown."
                },
                new()
                {
-                   Name = "ItemText",
+                   Name = "ItemWrapper",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the item text of the BitDropdown."
+                   Description = "Custom CSS classes/styles for the item wrapper of the multi-select BitDropdown."
                },
                new()
                {
-                   Name = "ItemDivider",
+                   Name = "ItemButton",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the item divider of the BitDropdown."
+                   Description = "Custom CSS classes/styles for the item button of the BitDropdown."
                },
                new()
                {
-                   Name = "EmptyContent",
+                   Name = "ItemCheckBox",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the empty state content of the BitDropdown."
+                   Description = "Custom CSS classes/styles for the item check box of the multi-select BitDropdown."
                },
                new()
                {
-                   Name = "SelectAllContainer",
+                   Name = "ItemCheckIcon",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the select all item container of the multi-select BitDropdown."
+                   Description = "Custom CSS classes/styles for the item check icon of the multi-select BitDropdown."
                },
                new()
                {
-                   Name = "SelectAllButton",
+                   Name = "ItemIcon",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the select all item button of the multi-select BitDropdown."
+                   Description = "Custom CSS classes/styles for the item icon of the BitDropdown."
                },
                new()
                {
-                   Name = "SelectAllCheckBox",
+                   Name = "ItemText",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the select all item check box of the multi-select BitDropdown."
+                   Description = "Custom CSS classes/styles for the item text of the BitDropdown."
                },
                new()
                {
-                   Name = "SelectAllCheckIcon",
+                   Name = "ItemDivider",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the select all item check icon of the multi-select BitDropdown."
+                   Description = "Custom CSS classes/styles for the item divider of the BitDropdown."
                },
                new()
                {
-                   Name = "SelectAllText",
+                   Name = "EmptyContent",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the select all item text of the multi-select BitDropdown."
+                   Description = "Custom CSS classes/styles for the empty state content of the BitDropdown."
                },
             ],
         }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
index 85a5402436..8ef2836061 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
@@ -590,8 +590,10 @@
     <div>
         The dropdown is fully operable with the keyboard: <b>Enter</b>, <b>Space</b> and the arrow keys open the callout,
         <b>ArrowUp</b> and <b>ArrowDown</b> move the focus between the items, <b>Home</b> and <b>End</b> jump to the first and last item,
-        <b>PageUp</b> and <b>PageDown</b> jump ten items at a time, typing characters moves the focus to the next matching item,
+        <b>PageUp</b> and <b>PageDown</b> jump several items at a time, typing characters moves the focus to the next matching item,
         <b>Enter</b> and <b>Space</b> select the focused item and <b>Escape</b> closes the callout.
+        In virtualize mode only the rendered items take part in the type-ahead, since the ones that have not been
+        rendered yet have no text to match against.
     </div>
     <br />
     <div class="example-content">
@@ -613,7 +615,8 @@
         When the <b>ShowSelectAll</b> parameter is true, a select all item renders at the top of the callout of the
         multi select dropdown that selects or clears all items at once and shows an indeterminate state when only
         some items are selected. Disabled items are skipped, the <b>SelectAllText</b> parameter customizes its text
-        and combined with the search box, it only applies to the search result.
+        and combined with the search box, it only applies to the search result. It is not available when the
+        items come from an <b>ItemsProvider</b>, since the items that are not loaded yet cannot be selected.
     </div>
     <br />
     <div class="example-content">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
index fe51a5e3f7..56e170c3f8 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
@@ -574,8 +574,10 @@
     <div>
         The dropdown is fully operable with the keyboard: <b>Enter</b>, <b>Space</b> and the arrow keys open the callout,
         <b>ArrowUp</b> and <b>ArrowDown</b> move the focus between the items, <b>Home</b> and <b>End</b> jump to the first and last item,
-        <b>PageUp</b> and <b>PageDown</b> jump ten items at a time, typing characters moves the focus to the next matching item,
+        <b>PageUp</b> and <b>PageDown</b> jump several items at a time, typing characters moves the focus to the next matching item,
         <b>Enter</b> and <b>Space</b> select the focused item and <b>Escape</b> closes the callout.
+        In virtualize mode only the rendered items take part in the type-ahead, since the ones that have not been
+        rendered yet have no text to match against.
     </div>
     <br />
     <div class="example-content">
@@ -597,7 +599,8 @@
         When the <b>ShowSelectAll</b> parameter is true, a select all item renders at the top of the callout of the
         multi select dropdown that selects or clears all items at once and shows an indeterminate state when only
         some items are selected. Disabled items are skipped, the <b>SelectAllText</b> parameter customizes its text
-        and combined with the search box, it only applies to the search result.
+        and combined with the search box, it only applies to the search result. It is not available when the
+        items come from an <b>ItemsProvider</b>, since the items that are not loaded yet cannot be selected.
     </div>
     <br />
     <div class="example-content">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
index 3481e852af..a3783929df 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
@@ -826,8 +826,10 @@
     <div>
         The dropdown is fully operable with the keyboard: <b>Enter</b>, <b>Space</b> and the arrow keys open the callout,
         <b>ArrowUp</b> and <b>ArrowDown</b> move the focus between the items, <b>Home</b> and <b>End</b> jump to the first and last item,
-        <b>PageUp</b> and <b>PageDown</b> jump ten items at a time, typing characters moves the focus to the next matching item,
+        <b>PageUp</b> and <b>PageDown</b> jump several items at a time, typing characters moves the focus to the next matching item,
         <b>Enter</b> and <b>Space</b> select the focused item and <b>Escape</b> closes the callout.
+        In virtualize mode only the rendered items take part in the type-ahead, since the ones that have not been
+        rendered yet have no text to match against.
     </div>
     <br />
     <div class="example-content">
@@ -859,7 +861,8 @@
         When the <b>ShowSelectAll</b> parameter is true, a select all item renders at the top of the callout of the
         multi select dropdown that selects or clears all items at once and shows an indeterminate state when only
         some items are selected. Disabled items are skipped, the <b>SelectAllText</b> parameter customizes its text
-        and combined with the search box, it only applies to the search result.
+        and combined with the search box, it only applies to the search result. It is not available when the
+        items come from an <b>ItemsProvider</b>, since the items that are not loaded yet cannot be selected.
     </div>
     <br />
     <div class="example-content">

From 8ac54603d0924690e8fc23c5ba72043c8fea0416 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Sun, 26 Jul 2026 12:10:48 +0330
Subject: [PATCH 3/7] fix another round of local review findings

---
 .../Inputs/Dropdown/BitDropdown.razor         | 131 +++-
 .../Inputs/Dropdown/BitDropdown.razor.cs      | 500 ++++++++++++---
 .../Inputs/Dropdown/BitDropdown.scss          | 201 +++++-
 .../Inputs/Dropdown/BitDropdownClassStyles.cs |  30 +
 .../Inputs/Dropdown/BitDropdownSearchMode.cs  |  24 +
 .../Inputs/Dropdown/_BitDropdownItem.razor    |  44 +-
 .../Inputs/Dropdown/BitDropdownDemo.razor     |   4 +-
 .../Inputs/Dropdown/BitDropdownDemo.razor.cs  | 301 ++++++++-
 .../Dropdown/_BitDropdownCustomDemo.razor     | 494 +++++++++++++--
 .../Dropdown/_BitDropdownCustomDemo.razor.cs  |  21 +
 .../_BitDropdownCustomDemo.razor.samples.cs   | 360 +++++++++--
 .../Dropdown/_BitDropdownItemDemo.razor       | 469 ++++++++++++--
 .../Dropdown/_BitDropdownItemDemo.razor.cs    |  21 +
 .../_BitDropdownItemDemo.razor.samples.cs     | 339 +++++++++--
 .../Dropdown/_BitDropdownOptionDemo.razor     | 572 ++++++++++++++++--
 .../Dropdown/_BitDropdownOptionDemo.razor.cs  |  21 +
 .../_BitDropdownOptionDemo.razor.samples.cs   | 409 ++++++++++++-
 .../Inputs/Dropdown/BitDropdownTests.cs       |   2 +-
 18 files changed, 3522 insertions(+), 421 deletions(-)
 create mode 100644 src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownSearchMode.cs

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
index 39ec80e8b5..7cffe62ba0 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
@@ -15,21 +15,47 @@
 
     RenderFragment emptyContent =
         @<div style="@Styles?.EmptyContent" class="bit-drp-emp @Classes?.EmptyContent">
-            @if (EmptyTemplate is not null)
+            @if (HasSearchText && (NoResultsTemplate is not null || NoResultsText.HasValue()))
+            {
+                @if (NoResultsTemplate is not null)
+                {
+                    @NoResultsTemplate
+                }
+                else
+                {
+                    @NoResultsText
+                }
+            }
+            else if (EmptyTemplate is not null)
             {
                 @EmptyTemplate
             }
             else
             {
-                @(EmptyText ?? "No items found")
+                @(EmptyText ?? (HasSearchText ? "No results found" : "No items found"))
+            }
+        </div>;
+
+    RenderFragment loadingContent =
+        @<div style="@Styles?.LoadingContainer" class="bit-drp-ldc @Classes?.LoadingContainer" role="status" aria-live="polite">
+            @if (LoadingTemplate is not null)
+            {
+                @LoadingTemplate
+            }
+            else
+            {
+                <div style="@Styles?.Spinner" class="bit-drp-spn @Classes?.Spinner"></div>
+                <span style="@Styles?.LoadingText" class="@Classes?.LoadingText">@(LoadingText ?? "Loading...")</span>
             }
         </div>;
 }
 
-@if (Virtualize && (Options ?? ChildContent) is not null)
+@if ((Virtualize || IsLoading) && (Options ?? ChildContent) is not null)
 {
-    @* In virtualize mode the items have to be rendered from the (registered) Items collection, so the
-       options only register themselves here without rendering their items in place. *@
+    @* In virtualize mode the items have to be rendered from the (registered) Items collection, and while
+       loading the callout shows the loading content instead of them, so the options only register
+       themselves here without rendering their items in place. Keeping them mounted (rather than dropping
+       them from the tree) preserves both the registration and the markup order of the items. *@
     <CascadingValue Value="this" IsFixed="true">
         <div style="display:none" hidden>@(Options ?? ChildContent)</div>
     </CascadingValue>
@@ -40,7 +66,7 @@
      style="@StyleBuilder.Value"
      class="@ClassBuilder.Value"
      dir="@Dir?.ToString().ToLower()"
-     aria-owns="@(IsOpen? _calloutId : null)">
+     aria-owns="@(IsOpen? _scrollContainerId : null)">
     @if (LabelTemplate is not null)
     {
         <label id="@_labelId">
@@ -65,10 +91,12 @@
          tabindex=@(IsEnabled ? 0 : -1)
          aria-haspopup="listbox"
          aria-required="@Required"
+         aria-readonly="@(ReadOnly ? "true" : null)"
+         aria-invalid="@(ValueInvalid is true ? "true" : null)"
          aria-disabled="@(IsEnabled is false)"
          aria-expanded=@(IsOpen ? "true" : "false")
          aria-labelledby="@GetDropdownAriaLabelledby()"
-         aria-controls="@(IsOpen? _calloutId : null)">
+         aria-controls="@(IsOpen? _scrollContainerId : null)">
 
         @if (PrefixTemplate is not null)
         {
@@ -83,20 +111,37 @@
             </span>
         }
 
+        @* No live region here: this element names the combobox through aria-labelledby, so a screen
+           reader reads the new selection when the focus returns to the trigger. Announcing it on every
+           render would repeat the whole selection after each keystroke typed into the combo input. *@
         <span id="@_dropdownTextContainerId"
               style="@Styles?.TextContainer"
-              class="bit-drp-tcn @Classes?.TextContainer"
-              aria-live="polite"
-              aria-atomic="true"
-              aria-invalid="false">
+              class="bit-drp-tcn @Classes?.TextContainer">
 
             @if (Chips)
             {
-                @foreach (var item in _selectedItems)
+                @foreach (var item in _selectedItems.Take(GetDisplayedItemsCount()))
                 {
                     <span style="@Styles?.Chips" class="bit-drp-chp @Classes?.Chips">
                         @GetText(item)
-                        <i style="@Styles?.ChipsRemoveIcon" class="@chipsRemoveIconCss @Classes?.ChipsRemoveIcon" @onclick="() => HandleOnClickUnselectItem(item)" @onclick:stopPropagation />
+                        @if (IsEnabled && ReadOnly is false)
+                        {
+                            @* A button so the chip can be removed with the keyboard and is announced as an action. *@
+                            <button @onclick="() => HandleOnClickUnselectItem(item)" @onclick:stopPropagation
+                                    type="button"
+                                    style="@Styles?.ChipsRemoveButton"
+                                    class="bit-drp-crb @Classes?.ChipsRemoveButton"
+                                    aria-label="@($"Remove {GetText(item)}")">
+                                <i aria-hidden="true" style="@Styles?.ChipsRemoveIcon" class="@chipsRemoveIconCss @Classes?.ChipsRemoveIcon" />
+                            </button>
+                        }
+                    </span>
+                }
+
+                @if (GetOverflowItemsCount() > 0)
+                {
+                    <span style="@Styles?.OverflowChip" class="bit-drp-chp bit-drp-ovf @Classes?.OverflowChip">
+                        @GetOverflowText()
                     </span>
                 }
             }
@@ -123,9 +168,11 @@
                        style="@Styles?.ComboBoxInput"
                        class="bit-drp-inp @Classes?.ComboBoxInput"
                        type="text"
-                       role="combobox"
                        value="@_searchText"
+                       readonly="@ReadOnly"
                        aria-label="@AriaLabel"
+                       aria-autocomplete="list"
+                       aria-controls="@(IsOpen ? _scrollContainerId : null)"
                        placeholder="@(_selectedItems.Count > 0 ? "" : Placeholder)"
                        autocomplete="@BitAutoCompleteValue.NewPassword"
                        disabled="@(IsEnabled is false)" />
@@ -143,18 +190,23 @@
             }
         </span>
 
-        @if (IsEnabled && ShowClearButton && _selectedItems.Count > 0)
+        @if (IsEnabled && ReadOnly is false && ShowClearButton && _selectedItems.Count > 0)
         {
             <button @onclick="HandleOnClearClick" @onclick:stopPropagation
                     type="button"
+                    aria-label="Clear selection"
                     style="@Styles?.ClearButton"
                     class="bit-drp-icn bit-drp-clr @Classes?.ClearButton">
-                <i class="@clearButtonIconCss" />
+                <i aria-hidden="true" class="@clearButtonIconCss" />
             </button>
         }
 
         <span class="bit-drp-icn">
-            @if (CaretDownTemplate is not null)
+            @if (IsLoading)
+            {
+                <div aria-hidden="true" style="@Styles?.Spinner" class="bit-drp-spn @Classes?.Spinner"></div>
+            }
+            else if (CaretDownTemplate is not null)
             {
                 @CaretDownTemplate
             }
@@ -179,7 +231,8 @@
             </span>
         }
     </div>
-    <select @attributes="InputHtmlAttributes" class="bit-input-hidden" multiple>
+    @* Mirrors the selection into a native control so the value takes part in a plain HTML form post. *@
+    <select @attributes="InputHtmlAttributes" class="bit-input-hidden" multiple="@MultiSelect">
         @foreach (var item in _selectedItems)
         {
             <option value="@GetValue(item)" selected>@GetText(item)</option>
@@ -192,14 +245,13 @@
      id="@_overlayId"
      class="bit-drp-ovl @Classes?.Overlay"></div>
 
+@* The listbox role lives on the scroll container, not here: the search box, the select all row and the
+   responsive panel header are not options and must not be children of the listbox. *@
 <div @onkeydown="HandleOnCalloutKeyDown"
      id="@_calloutId"
      tabindex="0"
-     role="listbox"
      style="@Styles?.Callout"
-     class="@GetCalloutCssClasses()"
-     aria-labelledby="@_labelId"
-     aria-multiselectable="@(MultiSelect ? "true" : null)">
+     class="@GetCalloutCssClasses()">
 
     @if (Responsive)
     {
@@ -285,29 +337,32 @@
                    style="@Styles?.ComboBoxInput"
                    class="bit-drp-icb @Classes?.ComboBoxInput"
                    type="text"
-                   role="combobox"
                    value="@_searchText"
+                   readonly="@ReadOnly"
                    aria-label="@AriaLabel"
+                   aria-autocomplete="list"
+                   aria-controls="@_scrollContainerId"
                    placeholder="@Placeholder"
                    autocomplete="@BitAutoCompleteValue.NewPassword"
                    disabled="@(IsEnabled is false)" />
 
             <button @onclick="HandleOnAddItemComboClick" @onclick:stopPropagation
                     type="button"
+                    aria-label="Add"
                     style="@Styles?.ResponsiveComboAddButton"
                     class="bit-drp-icn bit-drp-cai @Classes?.ResponsiveComboAddButton">
-                <i class="@comboBoxAddButtonIconCss" />
+                <i aria-hidden="true" class="@comboBoxAddButtonIconCss" />
             </button>
         </div>
     }
 
-    @if (MultiSelect && ShowSelectAll && ItemsProvider is null)
+    @if (MultiSelect && ShowSelectAll && ItemsProvider is null && IsLoading is false)
     {
         var (allSelected, anySelected) = GetSelectAllState();
         var selectAllClasses = "bit-drp-sac bit-drp-iwr" +
                                (allSelected ? " bit-drp-chd" : string.Empty) +
                                (anySelected && allSelected is false ? " bit-drp-sai" : string.Empty) +
-                               (IsEnabled ? string.Empty : " bit-drp-ids");
+                               (IsEnabled && ReadOnly is false ? string.Empty : " bit-drp-ids");
         var selectAllAriaChecked = allSelected ? "true" : anySelected ? "mixed" : "false";
         <div style="@Styles?.SelectAllContainer"
              class="@selectAllClasses @Classes?.SelectAllContainer">
@@ -332,13 +387,20 @@
     }
 
     <div id="@_scrollContainerId"
+         role="listbox"
          style="@Styles?.ScrollContainer"
-         class="bit-drp-scn @Classes?.ScrollContainer">
-        @if (Virtualize)
+         class="bit-drp-scn @Classes?.ScrollContainer"
+         aria-labelledby="@_labelId"
+         aria-multiselectable="@(MultiSelect ? "true" : null)">
+        @if (IsLoading)
+        {
+            @loadingContent
+        }
+        else if (Virtualize)
         {
             if (ItemsProvider is null)
             {
-                <Virtualize Items="GetSearchedItems()"
+                <Virtualize Items="GetDisplayItems()"
                             ItemSize="ItemSize"
                             OverscanCount="OverscanCount"
                             Placeholder="VirtualizePlaceholder">
@@ -384,7 +446,7 @@
             }
             else
             {
-                @foreach (var item in GetSearchedItems())
+                @foreach (var item in GetDisplayItems())
                 {
                     <_BitDropdownItem Item="item" Dropdown="this" ItemCheckIconCss="@itemCheckIconCss" />
                 }
@@ -397,5 +459,14 @@
         <div id="@_footerId">@CalloutFooterTemplate</div>
     }
 
+    @if (HasSearchText && IsLoading is false)
+    {
+        @* A search silently changes the length of a list a screen reader user cannot see, so the new
+           result count is announced. Only rendered while searching, to stay quiet otherwise. *@
+        <div role="status" aria-live="polite" aria-atomic="true" class="bit-drp-lvr">
+            @GetSearchResultsText()
+        </div>
+    }
+
 </div>
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
index fc669e39cb..c9f241c36f 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
@@ -10,12 +10,21 @@ namespace Bit.BlazorUI;
 /// </summary>
 public partial class BitDropdown<TItem, TValue> : BitInputBase<TValue> where TItem : class, new()
 {
-    private int? _totalItems;
+    private int? _providerTotalItems;
     private string? _searchText;
     private int _optionsVersion;
     private int _searchedItemsCacheVersion = -1;
     private string? _searchedItemsCacheKey;
+    private List<TItem>? _searchedItems;
     private HashSet<TItem>? _searchedItemsCache;
+    private string? _positionsCacheKey;
+    private int _positionsCacheVersion = -1;
+    private Dictionary<TItem, int>? _itemPositions;
+    private int _selectionVersion;
+    private string? _displayItemsCacheKey;
+    private int _displayItemsCacheVersion = -1;
+    private int _displayItemsSelectionVersion = -1;
+    private List<TItem>? _displayItems;
     private bool _isResponsiveMode;
     private bool _inputSearchHasFocus;
     private bool _inputComboHasFocus;
@@ -49,11 +58,29 @@ namespace Bit.BlazorUI;
 
 
 
+    /// <summary>
+    /// Clears the typed search text after each selection in the multi select ComboBox mode, so the next
+    /// item is picked from the full list instead of from the previous filter.
+    /// </summary>
+    [Parameter] public bool AutoClearSearch { get; set; }
+
     /// <summary>
     /// Enables auto-focusing of the SearchBox input when the callout is open.
     /// </summary>
     [Parameter] public bool AutoFocusSearchBox { get; set; }
 
+    /// <summary>
+    /// Removes the already selected items from the callout, which suits a multi select dropdown whose
+    /// selection is visible as chips and whose list is therefore only about what is left to pick.
+    /// </summary>
+    [Parameter] public bool HideSelectedItems { get; set; }
+
+    /// <summary>
+    /// Highlights the part of the item text that matched the current search text in the callout.
+    /// Only applies to the default item rendering, not to a custom <see cref="ItemTemplate"/>.
+    /// </summary>
+    [Parameter] public bool HighlightSearch { get; set; }
+
     /// <summary>
     /// Custom template to render as a footer in the callout.
     /// </summary>
@@ -223,6 +250,12 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public bool Immediate { get; set; }
 
+    /// <summary>
+    /// Shows a loading indicator in the callout (and in place of the caret down element) while the items are being fetched.
+    /// The dropdown stays interactive, so the user can still open the callout and see the loading state.
+    /// </summary>
+    [Parameter] public bool IsLoading { get; set; }
+
     /// <summary>
     /// Determines the opening state of the callout. (two-way bound)
     /// </summary>
@@ -259,6 +292,12 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public BitDropdownItemsProvider<TItem>? ItemsProvider { get; set; }
 
+    /// <summary>
+    /// The delay in milliseconds before an <see cref="ItemsProvider"/> request is issued, which collapses
+    /// the bursts of requests produced by fast scrolling and typing into a single one.
+    /// </summary>
+    [Parameter] public int ItemsProviderDebounceTime { get; set; } = 100;
+
     /// <summary>
     /// The custom template for rendering the items of the dropdown.
     /// </summary>
@@ -274,11 +313,34 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public RenderFragment? LabelTemplate { get; set; }
 
+    /// <summary>
+    /// The custom template to render in the callout in place of the items while <see cref="IsLoading"/> is enabled.
+    /// </summary>
+    [Parameter] public RenderFragment? LoadingTemplate { get; set; }
+
+    /// <summary>
+    /// The text to render in the callout in place of the items while <see cref="IsLoading"/> is enabled.
+    /// </summary>
+    [Parameter] public string? LoadingText { get; set; }
+
     /// <summary>
     /// The maximum number of items that can be selected in multi select mode. Zero or null means no limit.
     /// </summary>
     [Parameter] public int? MaxSelectedItems { get; set; }
 
+    /// <summary>
+    /// The maximum number of selected items rendered in the dropdown itself. Beyond it, the chips display
+    /// collapses the extra ones into an overflow indicator and the text display switches to a summary.
+    /// Zero or null renders every selected item.
+    /// </summary>
+    [Parameter] public int? MaxDisplayedItems { get; set; }
+
+    /// <summary>
+    /// The number of characters the search text must reach before the items get filtered.
+    /// While the search text is shorter, the full list is shown and no search is performed.
+    /// </summary>
+    [Parameter] public int MinSearchLength { get; set; }
+
     /// <summary>
     /// Enables the multi select mode.
     /// </summary>
@@ -289,6 +351,12 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public string MultiSelectDelimiter { get; set; } = ", ";
 
+    /// <summary>
+    /// The composite format of the overflow indicator that stands for the selected items beyond
+    /// <see cref="MaxDisplayedItems"/> in the chips display, for example "+{0}".
+    /// </summary>
+    [Parameter] public string? OverflowTextFormat { get; set; }
+
     /// <summary>
     /// Names and selectors of the custom input type properties.
     /// </summary>
@@ -300,16 +368,43 @@ namespace Bit.BlazorUI;
     [Parameter, ResetClassBuilder]
     public bool NoBorder { get; set; }
 
+    /// <summary>
+    /// The custom template to render in the callout when the current search has no result.
+    /// Falls back to the <see cref="EmptyTemplate"/> when not set.
+    /// </summary>
+    [Parameter] public RenderFragment? NoResultsTemplate { get; set; }
+
+    /// <summary>
+    /// The text to render in the callout when the current search has no result.
+    /// Falls back to the <see cref="EmptyText"/> when not set.
+    /// </summary>
+    [Parameter] public string? NoResultsText { get; set; }
+
+    /// <summary>
+    /// The callback that is called when the selection gets cleared by the clear button.
+    /// </summary>
+    [Parameter] public EventCallback OnClear { get; set; }
+
     /// <summary>
     /// The click callback for the dropdown.
     /// </summary>
     [Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
 
+    /// <summary>
+    /// The callback that is called when the callout gets closed.
+    /// </summary>
+    [Parameter] public EventCallback OnClose { get; set; }
+
     /// <summary>
     /// The callback that is called when a new item is on added Dynamic ComboBox mode.
     /// </summary>
     [Parameter] public EventCallback<TItem> OnDynamicAdd { get; set; }
 
+    /// <summary>
+    /// The callback that is called when the callout gets opened.
+    /// </summary>
+    [Parameter] public EventCallback OnOpen { get; set; }
+
     /// <summary>
     /// The callback that called when an item gets selected.
     /// </summary>
@@ -420,14 +515,33 @@ namespace Bit.BlazorUI;
 
     /// <summary>
     /// Custom search function to be used in place of the default search algorithm.
+    /// Takes precedence over <see cref="SearchMode"/>, which only configures the default algorithm.
     /// </summary>
     [Parameter] public Func<ICollection<TItem>, string, ICollection<TItem>>? SearchFunction { get; set; }
 
+    /// <summary>
+    /// Determines how the text of an item is matched against the search text by the default
+    /// (case-insensitive) search algorithm. Ignored when a <see cref="SearchFunction"/> is provided.
+    /// </summary>
+    [Parameter] public BitDropdownSearchMode SearchMode { get; set; } = BitDropdownSearchMode.Contains;
+
+    /// <summary>
+    /// The composite format of the message announced to screen readers with the number of items the
+    /// current search produced, for example "{0} results available". Defaults to the English message.
+    /// </summary>
+    [Parameter] public string? SearchResultsText { get; set; }
+
     /// <summary>
     /// The text of the select all item in multi select mode.
     /// </summary>
     [Parameter] public string? SelectAllText { get; set; }
 
+    /// <summary>
+    /// The composite format that replaces the joined item texts in the dropdown once more than
+    /// <see cref="MaxDisplayedItems"/> items are selected, for example "{0} items selected".
+    /// </summary>
+    [Parameter] public string? SelectedItemsTextFormat { get; set; }
+
     /// <summary>
     /// Shows the clear button when an item is selected.
     /// </summary>
@@ -443,6 +557,12 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public bool ShowSelectAll { get; set; }
 
+    /// <summary>
+    /// The size of the dropdown.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public BitSize? Size { get; set; }
+
     /// <summary>
     /// Custom CSS styles for different parts of the BitDropdown.
     /// </summary>
@@ -551,23 +671,16 @@ public async Task _CloseCalloutBeforeAnotherCalloutIsOpened()
         await InvokeAsync(StateHasChanged);
     }
 
+    // The swipe interop of the responsive panel expects all four callbacks to exist, but only the
+    // close one has a behavior here: the panel is dismissed, it does not follow the finger.
     [JSInvokable("OnStart")]
-    public async Task _OnStart(decimal startX, decimal startY)
-    {
-
-    }
+    public Task _OnStart(decimal startX, decimal startY) => Task.CompletedTask;
 
     [JSInvokable("OnMove")]
-    public async Task _OnMove(decimal diffX, decimal diffY)
-    {
-
-    }
+    public Task _OnMove(decimal diffX, decimal diffY) => Task.CompletedTask;
 
     [JSInvokable("OnEnd")]
-    public async Task _OnEnd(decimal diffX, decimal diffY)
-    {
-
-    }
+    public Task _OnEnd(decimal diffX, decimal diffY) => Task.CompletedTask;
 
     [JSInvokable("OnClose")]
     public async Task _OnClose()
@@ -595,7 +708,9 @@ public async Task UnselectItem(TItem? item)
     internal void RegisterOption(BitDropdownOption<TValue> option)
     {
         Items!.Add((option as TItem)!);
-        _totalItems = null;
+        _searchedItems = null;
+        _itemPositions = null;
+        _displayItems = null;
         _searchedItemsCache = null;
 
         UpdateSelectedItemsFromValues();
@@ -609,23 +724,16 @@ internal void RegisterOption(BitDropdownOption<TValue> option)
     // cache is reset in OnParametersSet so a change to Items cannot reuse results from a previous set.
     internal bool ShouldRenderOptionItem(TItem item)
     {
-        if (_searchText.HasNoValue()) return true;
-
-        // The search runs over the whole item set (and may be a user-provided SearchFunction), so
-        // evaluate it once per search text and reuse the result for every option during the render
-        // cycle instead of re-running it for each item. The cache is also keyed on _optionsVersion,
-        // which the options bump when their own parameters change, so an option whose data changed
-        // (e.g. its Text) without the dropdown itself re-rendering cannot be matched against a stale
-        // result. Because Blazor sets every sibling option's parameters before any of them render,
-        // the version is stable during the option render pass and the set is rebuilt at most once.
-        if (_searchedItemsCache is null ||
-            _searchedItemsCacheKey != _searchText ||
-            _searchedItemsCacheVersion != _optionsVersion)
-        {
-            _searchedItemsCacheKey = _searchText;
-            _searchedItemsCacheVersion = _optionsVersion;
-            _searchedItemsCache = [.. GetSearchedItems()];
-        }
+        if (HideSelectedItems && GetItemType(item) == BitDropdownItemType.Normal && GetIsSelected(item)) return false;
+
+        if (SearchText is null) return true;
+
+        // Every option asks this during the render cycle, so the searched items are looked up as a set
+        // instead of scanning the result list once per option. GetSearchedItems keeps the underlying
+        // results keyed on the search text and _optionsVersion (which the options bump when their own
+        // parameters change) and drops this set whenever it recomputes them, so an option whose data
+        // changed without the dropdown itself re-rendering cannot be matched against a stale result.
+        _searchedItemsCache ??= [.. GetSearchedItems()];
 
         return _searchedItemsCache.Contains(item);
     }
@@ -661,7 +769,9 @@ internal void UnregisterOption(BitDropdownOption<TValue> option)
 
         var item = (option as TItem)!;
         Items!.Remove(item);
-        _totalItems = null;
+        _searchedItems = null;
+        _itemPositions = null;
+        _displayItems = null;
         _searchedItemsCache = null;
 
         if (_selectedItems.Contains(item))
@@ -720,24 +830,50 @@ internal string GetItemWrapperCssClasses(TItem item)
 
     internal bool IsMaxSelectedItemsReached => MultiSelect && MaxSelectedItems is > 0 && (Values?.Count() ?? 0) >= MaxSelectedItems.Value;
 
-    internal int? GetTotalItems()
+    // The position of each selectable item within the list as it is currently rendered, so an option can
+    // report "3 of 10" instead of just being one of an unnamed set. It is a map built once per search
+    // rather than an index lookup per item, which is what made an earlier attempt at this quadratic.
+    private Dictionary<TItem, int> GetItemPositions()
     {
-        if (Items is null) return null;
+        var search = SearchText;
 
-        if (_totalItems.HasValue is false)
+        if (_itemPositions is null ||
+            _positionsCacheKey != search ||
+            _positionsCacheVersion != _optionsVersion)
         {
-            _totalItems = Items.Count(i => GetItemType(i) == BitDropdownItemType.Normal);
+            _positionsCacheKey = search;
+            _positionsCacheVersion = _optionsVersion;
+            _itemPositions = [];
+
+            var position = 0;
+            foreach (var item in GetDisplayItems())
+            {
+                if (GetItemType(item) != BitDropdownItemType.Normal) continue;
+                if (GetIsHidden(item)) continue;
+
+                _itemPositions[item] = ++position;
+            }
         }
 
-        return _totalItems.Value;
+        return _itemPositions;
+    }
+
+    internal int? GetTotalItems()
+    {
+        // With an ItemsProvider only a window of the list is loaded, so the size of the whole set is the
+        // one the provider reported, and the position within it is not knowable from the window alone.
+        if (ItemsProvider is not null) return _providerTotalItems;
+
+        if (Items is null) return null;
+
+        return GetItemPositions().Count;
     }
 
     internal int? GetItemPosInSet(TItem item)
     {
-        return null;
+        if (ItemsProvider is not null) return null;
 
-        // This code was removed because it caused performance issues when the items parameter had a large number of records.
-        //return Items?.Where(i => GetItemType(i) == BitDropdownItemType.Normal).ToList().IndexOf(item) + 1;
+        return GetItemPositions().TryGetValue(item, out var position) ? position : null;
     }
 
     internal bool GetIsSelected(TItem item)
@@ -1051,8 +1187,12 @@ protected override void RegisterCssClasses()
 
         ClassBuilder.Register(() => GetColorClass());
 
+        ClassBuilder.Register(() => GetSizeClass());
+
         ClassBuilder.Register(() => Required ? "bit-drp-req" : string.Empty);
 
+        ClassBuilder.Register(() => ReadOnly ? "bit-drp-rol" : string.Empty);
+
         ClassBuilder.Register(() => _selectedItems?.Count > 0 ? "bit-drp-hvl" : string.Empty);
 
         ClassBuilder.Register(() => Chips ? "bit-drp-sch" : string.Empty);
@@ -1136,7 +1276,9 @@ protected override void OnParametersSet()
 
         // Items (or the search inputs) may have changed with this parameter set, so drop any cached
         // search results (and item count) computed for the previous one; they get rebuilt on demand.
-        _totalItems = null;
+        _searchedItems = null;
+        _itemPositions = null;
+        _displayItems = null;
         _searchedItemsCache = null;
 
         base.OnParametersSet();
@@ -1222,6 +1364,14 @@ private async Task AddOrRemoveSelectedItem(TItem? item, bool addDynamic = false)
                 }
             }
 
+            if (AutoClearSearch)
+            {
+                // The callout stays open after a multi select pick, so without this the next item has to
+                // be found through the filter left over from the previous one.
+                await ClearSearchBox();
+                await ClearComboBoxInput();
+            }
+
             await OnSelectItem.InvokeAsync(item);
         }
         else
@@ -1309,6 +1459,13 @@ private void UpdateSelectedItemsFromValues()
 
                 _selectedItems.Add(item);
             }
+            else if (ItemsProvider is not null && comparer.Equals(CurrentValue, default))
+            {
+                // With an ItemsProvider a value that matches none of the loaded items usually just means
+                // its item has not been fetched yet, so the selected item is kept. An empty value however
+                // is a real deselection and has to drop the item the trigger is still showing.
+                _selectedItems.Clear();
+            }
         }
 
         ClassBuilder.Reset();
@@ -1396,7 +1553,16 @@ private async Task HandleOnCalloutKeyDown(KeyboardEventArgs e)
                 await FocusItem("next");
                 break;
             case "ArrowUp":
-                await FocusItem("prev");
+                // Alt+ArrowUp dismisses the popup and returns to the trigger, per the APG combobox pattern.
+                if (e.AltKey)
+                {
+                    await CloseCallout();
+                    await _dropdownWrapperRef.FocusAsync();
+                }
+                else
+                {
+                    await FocusItem("prev");
+                }
                 break;
             case "PageDown":
                 await FocusItem("nextPage");
@@ -1537,6 +1703,13 @@ private async Task ClearSearchBox()
     private void OnSetIsOpen()
     {
         _ = ClearSearchBox();
+
+        // The combo input doubles as the search input, so a text that was typed but never committed
+        // to a selection must not survive the callout, otherwise the trigger keeps showing a filter
+        // term instead of the current selection the next time the dropdown is opened.
+        _ = ClearComboBoxInput();
+
+        _ = IsOpen ? OnOpen.InvokeAsync() : OnClose.InvokeAsync();
     }
 
     private async ValueTask FocusOnSearchBox()
@@ -1561,6 +1734,10 @@ private async Task ClearComboBoxInput()
         _searchText = null;
 
         RefreshOptions();
+
+        // The items of a virtualized combo box come from the ItemsProvider filtered by the search
+        // text, so dropping the text has to re-request them just like clearing the search box does.
+        await SearchVirtualized();
     }
 
     private async ValueTask FocusOnComboBoxInput()
@@ -1573,17 +1750,98 @@ private async ValueTask FocusOnComboBoxInput()
         await _comboBoxInputRef.FocusAsync();
     }
 
+    // The term the items are actually filtered by. It is null until the typed text is long enough for
+    // MinSearchLength, so a short term shows the full list instead of a nearly unfiltered one (and, with
+    // an ItemsProvider, does not turn every first keystroke into a query).
+    private string? SearchText => _searchText.HasValue() && _searchText!.Length >= MinSearchLength ? _searchText : null;
+
+    internal bool IsItemTextMatch(string? text)
+    {
+        if (text is null) return false;
+
+        var search = SearchText;
+        if (search is null) return true;
+
+        return SearchMode switch
+        {
+            BitDropdownSearchMode.StartsWith => text.StartsWith(search, StringComparison.OrdinalIgnoreCase),
+            BitDropdownSearchMode.EndsWith => text.EndsWith(search, StringComparison.OrdinalIgnoreCase),
+            BitDropdownSearchMode.Equals => text.Equals(search, StringComparison.OrdinalIgnoreCase),
+            _ => text.Contains(search, StringComparison.OrdinalIgnoreCase)
+        };
+    }
+
+    // The index at which the item text matched the search, so the default item rendering can highlight
+    // exactly the matched part. Returns -1 when there is nothing to highlight.
+    internal int GetHighlightIndex(string? text)
+    {
+        if (HighlightSearch is false) return -1;
+        if (text is null) return -1;
+
+        var search = SearchText;
+        if (search is null) return -1;
+
+        return SearchMode switch
+        {
+            BitDropdownSearchMode.StartsWith => text.StartsWith(search, StringComparison.OrdinalIgnoreCase) ? 0 : -1,
+            BitDropdownSearchMode.EndsWith => text.EndsWith(search, StringComparison.OrdinalIgnoreCase) ? text.Length - search.Length : -1,
+            BitDropdownSearchMode.Equals => text.Equals(search, StringComparison.OrdinalIgnoreCase) ? 0 : -1,
+            _ => text.IndexOf(search, StringComparison.OrdinalIgnoreCase)
+        };
+    }
+
+    internal int GetHighlightLength() => SearchText?.Length ?? 0;
+
+    // The searched items are read several times while the callout renders (the empty state check, the
+    // item list itself and the select all state), and the search may be a user-provided SearchFunction
+    // over the whole item set, so the result is computed once per search text and reused. An unfiltered
+    // list needs no work at all, so it keeps returning the live collection and cannot go stale.
     private ICollection<TItem> GetSearchedItems()
     {
         var items = ItemsProvider is null ? Items : _lastShownItems;
         if (items is null) return [];
 
-        return _searchText.HasNoValue()
-                ? items
-                : SearchFunction is not null
-                    ? SearchFunction.Invoke(items, _searchText!)
-                    : [.. items.Where(i => GetItemType(i) == BitDropdownItemType.Normal &&
-                                           GetText(i)?.Contains(_searchText!, StringComparison.OrdinalIgnoreCase) is true)];
+        var search = SearchText;
+        if (search is null) return items;
+
+        if (_searchedItems is null ||
+            _searchedItemsCacheKey != search ||
+            _searchedItemsCacheVersion != _optionsVersion)
+        {
+            _searchedItemsCacheKey = search;
+            _searchedItemsCacheVersion = _optionsVersion;
+            _searchedItemsCache = null;
+            _searchedItems = SearchFunction is not null
+                ? [.. SearchFunction.Invoke(items, search)]
+                : [.. items.Where(i => GetItemType(i) == BitDropdownItemType.Normal && IsItemTextMatch(GetText(i)))];
+        }
+
+        return _searchedItems;
+    }
+
+    // What the callout actually renders: the search result, minus the already selected items when they
+    // are meant to disappear from the list. Kept separate from GetSearchedItems so that the select all
+    // item still works over the full result rather than over the leftovers. The result is cached like
+    // the search itself, so that repeated reads during one render (and Virtualize, which re-renders
+    // everything when handed a new collection instance) see the same list.
+    private ICollection<TItem> GetDisplayItems()
+    {
+        var items = GetSearchedItems();
+
+        if (HideSelectedItems is false) return items;
+
+        if (_displayItems is null ||
+            _displayItemsCacheKey != SearchText ||
+            _displayItemsCacheVersion != _optionsVersion ||
+            _displayItemsSelectionVersion != _selectionVersion)
+        {
+            _displayItemsCacheKey = SearchText;
+            _displayItemsCacheVersion = _optionsVersion;
+            _displayItemsSelectionVersion = _selectionVersion;
+            _displayItems = [.. items.Where(i => GetItemType(i) != BitDropdownItemType.Normal || GetIsSelected(i) is false)];
+        }
+
+        return _displayItems;
     }
 
     private string GetSearchBoxClasses()
@@ -1638,11 +1896,26 @@ private async Task HandleOnClearClick()
         }
 
         UpdateSelectedItemsFromValues();
+
+        await OnClear.InvokeAsync();
+    }
+
+    // Tells the empty state of an unsuccessful search apart from the empty state of an empty list, so
+    // the callout can show "no results for what you typed" instead of "there is nothing here".
+    private bool HasSearchText => SearchText is not null;
+
+    private string GetSearchResultsText()
+    {
+        var count = GetSearchedItems().Count(i => GetItemType(i) == BitDropdownItemType.Normal && GetIsHidden(i) is false);
+
+        return SearchResultsText is not null
+                ? string.Format(SearchResultsText, count)
+                : count == 1 ? "1 result available" : $"{count} results available";
     }
 
     private bool HasNoVisibleItems()
     {
-        return GetSearchedItems().Any(i => GetItemType(i) == BitDropdownItemType.Normal && GetIsHidden(i) is false) is false;
+        return GetDisplayItems().Any(i => GetItemType(i) == BitDropdownItemType.Normal && GetIsHidden(i) is false) is false;
     }
 
     private (bool AllSelected, bool AnySelected) GetSelectAllState()
@@ -1718,6 +1991,27 @@ private async Task HandleOnAddItemComboClick()
         await CloseCallout();
     }
 
+    // The height available to the scrollable item list is the callout's height minus the parts that sit
+    // above it, so every one of those parts has to be reported here or the callout overflows the
+    // viewport. The values mirror the --bit-drp-h (search box) and --bit-drp-itm-h plus its bottom
+    // border (select all row) of each size in the stylesheet.
+    private int GetCalloutScrollOffset()
+    {
+        var offset = 0;
+
+        if (ShowSearchBox && Combo is false)
+        {
+            offset += Size switch { BitSize.Small => 26, BitSize.Large => 40, _ => 32 };
+        }
+
+        if (MultiSelect && ShowSelectAll && ItemsProvider is null)
+        {
+            offset += Size switch { BitSize.Small => 31, BitSize.Large => 45, _ => 37 };
+        }
+
+        return offset;
+    }
+
     private async Task ToggleCallout()
     {
         if (IsEnabled is false || IsDisposed) return;
@@ -1734,7 +2028,7 @@ private async Task ToggleCallout()
             dropDirection: DropDirection,
             isRtl: Dir is BitDir.Rtl,
             scrollContainerId: _scrollContainerId,
-            scrollOffset: ShowSearchBox && Combo is false ? 32 : 0,
+            scrollOffset: GetCalloutScrollOffset(),
             headerId: CalloutHeaderTemplate is not null ? _headerId : "",
             footerId: CalloutFooterTemplate is not null ? _footerId : "",
             setCalloutWidth: PreserveCalloutWidth is false,
@@ -1747,19 +2041,23 @@ private async ValueTask<ItemsProviderResult<TItem>> InternalItemsProvider(ItemsP
         if (ItemsProvider is null) return default;
 
         // Debounce the requests. This eliminates a lot of redundant queries at the cost of slight lag after interactions.
-        // TODO: Consider making this configurable, or smarter (e.g., doesn't delay on first call in a batch, then the amount
-        // of delay increases if you rapidly issue repeated requests, such as when scrolling a long way)
-        await Task.Delay(100);
+        // The token is not passed to the delay on purpose: a cancellation is a normal outcome here (the
+        // user kept scrolling or typing) and is reported by returning an empty result, not by throwing.
+        if (ItemsProviderDebounceTime > 0)
+        {
+            await Task.Delay(ItemsProviderDebounceTime);
+        }
 
         if (request.CancellationToken.IsCancellationRequested) return default;
 
         // Combine the query parameters from Virtualize with the ones from PaginationState
-        var providerRequest = new BitDropdownItemsProviderRequest<TItem>(request.StartIndex, request.Count, _searchText, request.CancellationToken);
+        var providerRequest = new BitDropdownItemsProviderRequest<TItem>(request.StartIndex, request.Count, SearchText, request.CancellationToken);
         var providerResult = await ItemsProvider(providerRequest);
 
         if (request.CancellationToken.IsCancellationRequested) return default;
 
         _lastShownItems = [.. providerResult.Items];
+        _providerTotalItems = providerResult.TotalItemCount;
 
         UpdateSelectedItemsFromValues();
         await InvokeAsync(StateHasChanged);
@@ -1767,43 +2065,6 @@ private async ValueTask<ItemsProviderResult<TItem>> InternalItemsProvider(ItemsP
         return new ItemsProviderResult<TItem>(providerResult.Items, providerResult.TotalItemCount);
     }
 
-    private bool CheckInvalidForSelect(TItem item)
-    {
-        if (item is BitDropdownItem<TValue> dropdownItem)
-        {
-            return dropdownItem.IsHidden is false &&
-                   dropdownItem.IsEnabled &&
-                   dropdownItem.ItemType == BitDropdownItemType.Normal &&
-                   dropdownItem.Id.HasNoValue();
-        }
-
-        if (item is BitDropdownOption<TValue> dropdownOption)
-        {
-            return dropdownOption.IsHidden is false &&
-                   dropdownOption.IsEnabled &&
-                   dropdownOption.ItemType == BitDropdownItemType.Normal &&
-                   dropdownOption.Id.HasNoValue();
-        }
-
-        if (NameSelectors is null) return false;
-
-        if (NameSelectors.IsHidden.Selector is not null &&
-            NameSelectors.IsEnabled.Selector is not null &&
-            NameSelectors.ItemType.Selector is not null &&
-            NameSelectors.Id.Selector is not null)
-        {
-            return NameSelectors.IsHidden.Selector!(item) is false &&
-                   NameSelectors.IsEnabled.Selector!(item) &&
-                   NameSelectors.ItemType.Selector!(item) == BitDropdownItemType.Normal &&
-                   NameSelectors.Id.Selector!(item).HasNoValue();
-        }
-
-        return item.GetValueFromProperty<bool>(NameSelectors.IsHidden.Name) is false &&
-               item.GetValueFromProperty<bool>(NameSelectors.IsEnabled.Name) &&
-               item.GetValueFromProperty<BitDropdownItemType>(NameSelectors.ItemType.Name) == BitDropdownItemType.Normal &&
-               item.GetValueFromProperty<string?>(NameSelectors.Id.Name).HasNoValue();
-    }
-
     private async Task HandleOnKeyDown(KeyboardEventArgs eventArgs)
     {
         if (IsEnabled is false || InvalidValueBinding()) return;
@@ -2001,9 +2262,38 @@ private async Task AddDynamicItem()
         }
     }
 
+    // The number of selected items the dropdown itself renders, the rest being collapsed into the
+    // overflow indicator (chips) or the summary text.
+    private int GetDisplayedItemsCount()
+    {
+        return MaxDisplayedItems is > 0 && _selectedItems.Count > MaxDisplayedItems.Value
+                ? MaxDisplayedItems.Value
+                : _selectedItems.Count;
+    }
+
+    private int GetOverflowItemsCount() => _selectedItems.Count - GetDisplayedItemsCount();
+
+    private string GetOverflowText()
+    {
+        var count = GetOverflowItemsCount();
+
+        return OverflowTextFormat is not null ? string.Format(OverflowTextFormat, count) : $"+{count}";
+    }
+
     private string? GetText()
     {
-        return MultiSelect ? string.Join(MultiSelectDelimiter, _selectedItems.Select(GetText)) : GetText(_selectedItems.FirstOrDefault());
+        if (MultiSelect is false) return GetText(_selectedItems.FirstOrDefault());
+
+        // Past the display limit the individual texts stop being readable in the width of a dropdown,
+        // so a count of the selection says more than a truncated list of names.
+        if (GetOverflowItemsCount() > 0)
+        {
+            return SelectedItemsTextFormat is not null
+                    ? string.Format(SelectedItemsTextFormat, _selectedItems.Count)
+                    : $"{_selectedItems.Count} items selected";
+        }
+
+        return string.Join(MultiSelectDelimiter, _selectedItems.Select(GetText));
     }
 
     private void OnSetValues()
@@ -2032,6 +2322,10 @@ private void SetIsSelected(TItem item, bool value)
 
     private void SetIsSelectedForSelectedItems()
     {
+        // Every selection change passes through here, so this is where the caches that depend on which
+        // items are selected (the hidden-when-selected list) learn that they are out of date.
+        _selectionVersion++;
+
         var items = ItemsProvider is null ? Items : _lastShownItems;
         if (items is null) return;
 
@@ -2060,6 +2354,13 @@ private string GetCalloutCssClasses()
             classes.Add("bit-drp-res");
         }
 
+        if (ReadOnly)
+        {
+            // The callout is rendered outside the root element, so it needs its own read-only marker to
+            // stop the items from advertising an interaction the component silently ignores.
+            classes.Add("bit-drp-rol");
+        }
+
         if (Dir is BitDir.Rtl)
         {
             classes.Add("bit-drp-rtl");
@@ -2067,9 +2368,24 @@ private string GetCalloutCssClasses()
 
         classes.Add(GetColorClass());
 
+        // The callout renders outside the root element, so the size class has to be repeated on it for
+        // the items to follow the size of the dropdown they belong to.
+        classes.Add(GetSizeClass());
+
         return string.Join(' ', classes).Trim();
     }
 
+    private string GetSizeClass()
+    {
+        return Size switch
+        {
+            BitSize.Small => "bit-drp-sm",
+            BitSize.Medium => "bit-drp-md",
+            BitSize.Large => "bit-drp-lg",
+            _ => string.Empty
+        };
+    }
+
     private string GetColorClass()
     {
         return Color switch
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
index 7c95e175a0..b42da100a7 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
@@ -1,6 +1,16 @@
 @import "../../../Styles/functions.scss";
 @import "../../../Styles/media-queries.scss";
 
+// The size of the control and of its callout is driven by these variables so a single size class,
+// applied to the root element and repeated on the callout, resizes every part consistently.
+@mixin drp-size-medium {
+    --bit-drp-fs: #{spacing(1.75)};
+    --bit-drp-h: #{spacing(4)};
+    --bit-drp-lh: #{spacing(3.75)};
+    --bit-drp-itm-h: #{spacing(4.5)};
+    --bit-drp-itm-fs: #{spacing(1.875)};
+}
+
 .bit-drp {
     width: 100%;
     display: flex;
@@ -10,6 +20,7 @@
     --bit-drp-clr: #{$clr-pri};
     --bit-drp-clr-hover: #{$clr-pri-hover};
     --bit-drp-clr-text: #{$clr-pri-text};
+    @include drp-size-medium;
 
     &.bit-drp-req {
         .bit-drp-lbl {
@@ -135,7 +146,7 @@
     user-select: none;
     color: $clr-fg-sec;
     position: relative;
-    min-height: spacing(4);
+    min-height: var(--bit-drp-h);
     box-sizing: border-box;
     background-color: $clr-bg-pri;
     border-radius: $shp-border-radius;
@@ -193,8 +204,8 @@
     white-space: nowrap;
     box-sizing: border-box;
     text-overflow: ellipsis;
-    font-size: spacing(1.75);
-    line-height: spacing(3.75);
+    font-size: var(--bit-drp-fs);
+    line-height: var(--bit-drp-lh);
     border-radius: spacing(0.25);
     padding-inline-start: spacing(1);
 }
@@ -205,7 +216,7 @@
         display: flex;
         flex-wrap: wrap;
         gap: spacing(0.5);
-        min-height: spacing(4);
+        min-height: var(--bit-drp-h);
         padding: spacing(1) spacing(3.5) spacing(1) spacing(1);
     }
 }
@@ -214,13 +225,45 @@
     display: flex;
     cursor: default;
     gap: spacing(0.5);
+    align-items: center;
     padding: 0 spacing(0.5);
     border-radius: spacing(0.25);
     background-color: $clr-bg-sec;
     border: $shp-border-width $shp-border-style $clr-brd-sec;
+}
+
+// Stands for the selected items that did not fit in the chips display.
+.bit-drp-ovf {
+    cursor: default;
+    font-weight: 600;
+    color: var(--bit-drp-clr-text);
+    border-color: var(--bit-drp-clr);
+    background-color: var(--bit-drp-clr);
+}
+
+.bit-drp-crb {
+    padding: 0;
+    border: none;
+    display: flex;
+    cursor: pointer;
+    color: inherit;
+    align-items: center;
+    outline: transparent;
+    border-radius: spacing(0.25);
+    background-color: transparent;
 
     i {
-        cursor: pointer;
+        font-size: spacing(1.5);
+    }
+
+    &:focus-visible {
+        outline: spacing(0.25) $shp-border-style var(--bit-drp-clr);
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            color: $clr-fg-pri-hover;
+        }
     }
 }
 
@@ -249,7 +292,7 @@
     color: $clr-fg-pri;
     position: relative;
     align-items: center;
-    height: spacing(4.5);
+    height: var(--bit-drp-itm-h);
     padding: 0 spacing(1);
     box-sizing: border-box;
     line-height: spacing(2.5);
@@ -361,7 +404,7 @@
     user-select: none;
     position: relative;
     align-items: center;
-    font-size: spacing(1.75);
+    font-size: var(--bit-drp-fs);
     background-color: transparent;
 }
 
@@ -404,11 +447,11 @@
     box-shadow: none;
     font-weight: 400;
     border-radius: 0;
-    height: spacing(4);
+    height: var(--bit-drp-h);
     align-items: stretch;
     flex-flow: row nowrap;
     box-sizing: border-box;
-    font-size: spacing(1.75);
+    font-size: var(--bit-drp-fs);
     color: $clr-fg-pri;
     border-style: $shp-border-style;
     border-color: $clr-brd-pri;
@@ -436,11 +479,11 @@
     box-shadow: none;
     font-weight: 400;
     border-radius: 0;
-    height: spacing(4);
+    height: var(--bit-drp-h);
     align-items: stretch;
     flex-flow: row nowrap;
     box-sizing: border-box;
-    font-size: spacing(1.75);
+    font-size: var(--bit-drp-fs);
     color: $clr-fg-pri;
     border-style: $shp-border-style;
     border-color: $clr-brd-pri;
@@ -635,8 +678,9 @@
     overflow: hidden;
     box-sizing: border-box;
     z-index: $zindex-callout;
-    font-size: spacing(1.75);
+    font-size: var(--bit-drp-fs);
     animation-fill-mode: both;
+    @include drp-size-medium;
     animation-duration: 0.367s;
     box-shadow: $box-shadow-callout;
     border-radius: $shp-border-radius;
@@ -656,11 +700,11 @@
     cursor: default;
     font-weight: 600;
     user-select: none;
-    height: spacing(4.5);
+    height: var(--bit-drp-itm-h);
     padding: 0 spacing(1);
     box-sizing: border-box;
-    font-size: spacing(1.875);
-    line-height: spacing(4.5);
+    font-size: var(--bit-drp-itm-fs);
+    line-height: var(--bit-drp-itm-h);
     background: none transparent;
 }
 
@@ -677,13 +721,13 @@
     color: $clr-fg-pri;
     white-space: nowrap;
     align-items: center;
-    height: spacing(4.5);
+    height: var(--bit-drp-itm-h);
     outline: transparent;
     padding: 0 spacing(1);
     text-decoration: none;
     box-sizing: border-box;
     text-overflow: ellipsis;
-    font-size: spacing(1.875);
+    font-size: var(--bit-drp-itm-fs);
     line-height: spacing(2.5);
     background-color: transparent;
     border: $shp-border-width $shp-border-style transparent;
@@ -699,6 +743,11 @@
         cursor: default;
         color: $clr-fg-dis;
 
+        // The item text carries its own color, so it has to follow the disabled state explicitly.
+        .bit-drp-itx {
+            color: $clr-fg-dis;
+        }
+
         @media (hover: hover) {
             &:hover {
                 background-color: transparent;
@@ -706,6 +755,28 @@
         }
     }
 
+// The matched part of an item text while a search is active.
+.bit-drp-hlt {
+    font-weight: 600;
+    border-radius: spacing(0.25);
+    color: var(--bit-drp-clr-text);
+    background-color: var(--bit-drp-clr);
+}
+
+// Announces the number of items the current search produced, for screen reader users who cannot see
+// the list shrink as they type. Kept out of view but not out of the accessibility tree.
+.bit-drp-lvr {
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border: none;
+    margin: -1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    clip-path: inset(50%);
+}
+
 .bit-drp-sel {
     background-color: $clr-bg-sec;
 
@@ -728,11 +799,82 @@
     user-select: none;
     color: $clr-fg-sec;
     align-items: center;
-    height: spacing(4.5);
+    height: var(--bit-drp-itm-h);
     padding: 0 spacing(1);
     box-sizing: border-box;
     justify-content: center;
-    font-size: spacing(1.75);
+    font-size: var(--bit-drp-fs);
+}
+
+.bit-drp-ldc {
+    display: flex;
+    cursor: default;
+    gap: spacing(1);
+    user-select: none;
+    color: $clr-fg-sec;
+    align-items: center;
+    height: var(--bit-drp-itm-h);
+    padding: 0 spacing(1);
+    box-sizing: border-box;
+    justify-content: center;
+    font-size: var(--bit-drp-fs);
+}
+
+.bit-drp-spn {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    border-radius: 50%;
+    box-sizing: border-box;
+    border-color: $clr-brd-sec;
+    border-width: spacing(0.2125);
+    border-style: $shp-border-style;
+    border-top-color: var(--bit-drp-clr);
+    animation: bit-drp-spinner-animation 1.3s linear infinite;
+    animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67);
+}
+
+@keyframes bit-drp-spinner-animation {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+// Read-only keeps the dropdown focusable and its callout browsable, but nothing inside it can be
+// changed, so none of the parts should advertise an interaction that gets silently ignored.
+.bit-drp-rol {
+    .bit-drp-wrp {
+        cursor: default;
+    }
+
+    .bit-drp-itm,
+    .bit-drp-iwr,
+    .bit-drp-mcn {
+        cursor: default;
+    }
+
+    @media (hover: hover) {
+        .bit-drp-itm:hover,
+        .bit-drp-iwr:hover {
+            background-color: transparent;
+        }
+
+        .bit-drp-iwr:hover .bit-drp-chm {
+            opacity: 0;
+        }
+
+        .bit-drp-iwr.bit-drp-chd:hover {
+            background-color: $clr-bg-sec;
+
+            .bit-drp-chm {
+                opacity: 1;
+            }
+        }
+
+        .bit-drp-sel:hover {
+            background-color: $clr-bg-sec;
+        }
+    }
 }
 
 .bit-drp-sac {
@@ -855,6 +997,27 @@
 }
 
 
+.bit-drp-sm {
+    --bit-drp-fs: #{spacing(1.5)};
+    --bit-drp-h: #{spacing(3.25)};
+    --bit-drp-lh: #{spacing(3)};
+    --bit-drp-itm-h: #{spacing(3.75)};
+    --bit-drp-itm-fs: #{spacing(1.625)};
+}
+
+.bit-drp-md {
+    @include drp-size-medium;
+}
+
+.bit-drp-lg {
+    --bit-drp-fs: #{spacing(2)};
+    --bit-drp-h: #{spacing(5)};
+    --bit-drp-lh: #{spacing(4.75)};
+    --bit-drp-itm-h: #{spacing(5.5)};
+    --bit-drp-itm-fs: #{spacing(2.125)};
+}
+
+
 .bit-drp-pri {
     --bit-drp-clr: #{$clr-pri};
     --bit-drp-clr-hover: #{$clr-pri-hover};
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs
index 091142d39c..9cb608a240 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs
@@ -92,6 +92,16 @@ public class BitDropdownClassStyles
     /// </summary>
     public string? Chips { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the overflow chip of the BitDropdown.
+    /// </summary>
+    public string? OverflowChip { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the chips's remove button of the BitDropdown.
+    /// </summary>
+    public string? ChipsRemoveButton { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the chips's remove icon of the BitDropdown.
     /// </summary>
@@ -152,6 +162,11 @@ public class BitDropdownClassStyles
     /// </summary>
     public string? ItemText { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the highlighted part of the item text of the BitDropdown.
+    /// </summary>
+    public string? ItemHighlight { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the item divider of the BitDropdown.
     /// </summary>
@@ -182,6 +197,21 @@ public class BitDropdownClassStyles
     /// </summary>
     public string? EmptyContent { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the loading state container of the BitDropdown.
+    /// </summary>
+    public string? LoadingContainer { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the loading state text of the BitDropdown.
+    /// </summary>
+    public string? LoadingText { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the loading spinner of the BitDropdown.
+    /// </summary>
+    public string? Spinner { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the select all item container of the multi-select BitDropdown.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownSearchMode.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownSearchMode.cs
new file mode 100644
index 0000000000..a127b0f3bb
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownSearchMode.cs
@@ -0,0 +1,24 @@
+namespace Bit.BlazorUI;
+
+public enum BitDropdownSearchMode
+{
+    /// <summary>
+    /// An item matches when its text contains the search text.
+    /// </summary>
+    Contains,
+
+    /// <summary>
+    /// An item matches when its text starts with the search text.
+    /// </summary>
+    StartsWith,
+
+    /// <summary>
+    /// An item matches when its text ends with the search text.
+    /// </summary>
+    EndsWith,
+
+    /// <summary>
+    /// An item matches when its text is equal to the search text.
+    /// </summary>
+    Equals
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/_BitDropdownItem.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/_BitDropdownItem.razor
index 9821fa8fef..c182ff0867 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/_BitDropdownItem.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/_BitDropdownItem.razor
@@ -9,9 +9,20 @@
     var isHidden = Dropdown.GetIsHidden(Item);
     var isEnabled = Dropdown.GetIsEnabled(Item);
     var isSelected = itemType == BitDropdownItemType.Normal ? Dropdown.GetIsSelected(Item) : false;
+
+    // The part of the item text that matched the search, so it can be emphasized. It is rendered as
+    // three separate pieces of text rather than as markup, so the item text is never treated as HTML.
+    // The markup below is repeated in both branches on purpose: holding it in a local RenderFragment
+    // would hand Blazor a new delegate on every render, which re-creates the item subtree and with it
+    // the click handler of the button that contains it.
+    var highlightIndex = itemType == BitDropdownItemType.Normal ? Dropdown.GetHighlightIndex(text) : -1;
+    var highlightLength = Dropdown.GetHighlightLength();
+    var highlighted = highlightIndex >= 0 && highlightLength > 0 && text is not null;
 }
 
-<div style="@Dropdown.GetStyle(Item)" class="@Dropdown.GetClass(Item)">
+@* The wrappers carry the per-item style and layout only; marking them presentational keeps the option
+   elements as the direct children of the listbox for assistive technologies. *@
+<div role="presentation" style="@Dropdown.GetStyle(Item)" class="@Dropdown.GetClass(Item)">
     @if (itemType == BitDropdownItemType.Header)
     {
         @if (Dropdown.HeaderTemplate is not null)
@@ -31,7 +42,8 @@
     {
         @if (Dropdown.MultiSelect)
         {
-            <div style="@(isHidden ? "display: none" : "") @Dropdown.Styles?.ItemWrapper"
+            <div role="presentation"
+                 style="@(isHidden ? "display: none" : "") @Dropdown.Styles?.ItemWrapper"
                  class="@Dropdown.GetItemWrapperCssClasses(Item) @Dropdown.Classes?.ItemWrapper">
                 <button @onclick="@(() => Dropdown.HandleOnItemClick(Item))"
                         id="@id"
@@ -65,9 +77,17 @@
                             <i style="@Dropdown.Styles?.ItemIcon"
                                class="bit-drp-iic @itemIcon.GetCssClasses() @Dropdown.Classes?.ItemIcon" />
                         }
-                        <span style="@Dropdown.Styles?.ItemText"
-                              class="bit-drp-itx @Dropdown.Classes?.ItemText">
-                            @text
+                        <span style="@Dropdown.Styles?.ItemText" class="bit-drp-itx @Dropdown.Classes?.ItemText">
+                            @if (highlighted)
+                            {
+                                @text!.Substring(0, highlightIndex)
+                                <span style="@Dropdown.Styles?.ItemHighlight" class="bit-drp-hlt @Dropdown.Classes?.ItemHighlight">@text!.Substring(highlightIndex, highlightLength)</span>
+                                @text!.Substring(highlightIndex + highlightLength)
+                            }
+                            else
+                            {
+                                @text
+                            }
                         </span>
                     }
                 </button>
@@ -101,9 +121,17 @@
                         <i style="@Dropdown.Styles?.ItemIcon"
                            class="bit-drp-iic @itemIcon.GetCssClasses() @Dropdown.Classes?.ItemIcon" />
                     }
-                    <span style="@Dropdown.Styles?.ItemText"
-                          class="@Dropdown.Classes?.ItemText">
-                        @text
+                    <span style="@Dropdown.Styles?.ItemText" class="bit-drp-itx @Dropdown.Classes?.ItemText">
+                        @if (highlighted)
+                        {
+                            @text!.Substring(0, highlightIndex)
+                            <span style="@Dropdown.Styles?.ItemHighlight" class="bit-drp-hlt @Dropdown.Classes?.ItemHighlight">@text!.Substring(highlightIndex, highlightLength)</span>
+                            @text!.Substring(highlightIndex + highlightLength)
+                        }
+                        else
+                        {
+                            @text
+                        }
                     </span>
                 }
             </button>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor
index 1b5b84505e..4fefd01042 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor
@@ -3,12 +3,12 @@
 
 <PageOutlet Url="components/dropdown"
             Title="Dropdown"
-            Description="BitDropdown is a full-featured select component for picking one or more options: a searchable callout with full keyboard navigation, select all, selection limit and empty state support, a ComboBox mode with chips and dynamic item addition, virtualization for large datasets, rich templates, validation, responsive rendering and RTL." />
+            Description="BitDropdown is a full-featured select component for picking one or more options: a searchable callout with full keyboard navigation and typeahead, select all, selection limit, loading and empty states, a ComboBox mode with chips and dynamic item addition, virtualization and on-demand loading for large datasets, rich templates for every part, form validation, three sizes, a responsive mobile panel and RTL." />
 
 <div>
     <DemoPage Name="Dropdown"
               SecondaryNames="@(["Select", "MultiSelect", "ComboBox"])"
-              Description="BitDropdown (also known as Select, MultiSelect or ComboBox) lets users pick one or more options from a list that opens on demand. Beyond the basics, it offers a searchable callout with full keyboard navigation, select all, selection limit and empty state support, a ComboBox mode with free typing, chips and dynamic item addition, virtualization and on-demand loading for large datasets, rich templates for every part of the component, form validation, responsive rendering and RTL support."
+              Description="BitDropdown (also known as Select, MultiSelect or ComboBox) lets users pick one or more options from a list that opens on demand, and stays fully operable with the keyboard and with a screen reader. Beyond the basics, it offers a searchable callout with typeahead and a customizable search algorithm, select all with an indeterminate state, a selection limit, distinct loading, empty and no-results states, a ComboBox mode with free typing, chips and dynamic item addition, virtualization and on-demand loading for large datasets, templates for every part of the component, EditForm validation, three sizes, a swipeable panel on small screens and RTL support."
               Parameters="componentParameters"
               SubClasses="componentSubClasses"
               SubEnums="componentSubEnums"
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
index 82b9844704..809d053172 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
@@ -6,6 +6,13 @@ public partial class BitDropdownDemo
 
     private readonly List<ComponentParameter> componentParameters =
     [
+        new()
+        {
+            Name = "AutoClearSearch",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Clears the typed search text after each selection in the multi select ComboBox mode, so the next item is picked from the full list instead of from the previous filter.",
+        },
         new()
         {
             Name = "AutoFocusSearchBox",
@@ -14,6 +21,20 @@ public partial class BitDropdownDemo
             Description = "Enables auto-focusing of the SearchBox input when the callout is open.",
         },
         new()
+        {
+            Name = "HideSelectedItems",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Removes the already selected items from the callout, which suits a multi select dropdown whose selection is visible as chips and whose list is therefore only about what is left to pick.",
+        },
+        new()
+        {
+            Name = "HighlightSearch",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Highlights the part of the item text that matched the current search text in the callout. Only applies to the default item rendering, not to a custom ItemTemplate.",
+        },
+        new()
         {
             Name = "CalloutFooterTemplate",
             Type = "RenderFragment?",
@@ -227,6 +248,13 @@ public partial class BitDropdownDemo
             Description = "Searches the items immediately as the user types in the search box or combo box input (based on the 'oninput' HTML event).",
         },
         new()
+        {
+            Name = "IsLoading",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Shows a loading indicator in the callout (and in place of the caret down element) while the items are being fetched. The dropdown stays interactive, so the user can still open the callout and see the loading state.",
+        },
+        new()
         {
             Name = "IsOpen",
             Type = "bool",
@@ -273,6 +301,13 @@ public partial class BitDropdownDemo
             Description = "The function providing items to the list for virtualization.",
         },
         new()
+        {
+            Name = "ItemsProviderDebounceTime",
+            Type = "int",
+            DefaultValue = "100",
+            Description = "The delay in milliseconds before an ItemsProvider request is issued, which collapses the bursts of requests produced by fast scrolling and typing into a single one.",
+        },
+        new()
         {
             Name = "ItemTemplate",
             Type = "RenderFragment<TItem>?",
@@ -294,6 +329,20 @@ public partial class BitDropdownDemo
             Description = "The custom template for the label of the dropdown.",
         },
         new()
+        {
+            Name = "LoadingTemplate",
+            Type = "RenderFragment?",
+            DefaultValue = "null",
+            Description = "The custom template to render in the callout in place of the items while IsLoading is enabled.",
+        },
+        new()
+        {
+            Name = "LoadingText",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The text to render in the callout in place of the items while IsLoading is enabled. Defaults to \"Loading...\".",
+        },
+        new()
         {
             Name = "MaxSelectedItems",
             Type = "int?",
@@ -301,6 +350,20 @@ public partial class BitDropdownDemo
             Description = "The maximum number of items that can be selected in multi select mode. Zero or null means no limit.",
         },
         new()
+        {
+            Name = "MaxDisplayedItems",
+            Type = "int?",
+            DefaultValue = "null",
+            Description = "The maximum number of selected items rendered in the dropdown itself. Beyond it, the chips display collapses the extra ones into an overflow indicator and the text display switches to a summary. Zero or null renders every selected item.",
+        },
+        new()
+        {
+            Name = "MinSearchLength",
+            Type = "int",
+            DefaultValue = "0",
+            Description = "The number of characters the search text must reach before the items get filtered. While the search text is shorter, the full list is shown and no search is performed.",
+        },
+        new()
         {
             Name = "MultiSelect",
             Type = "bool",
@@ -331,18 +394,50 @@ public partial class BitDropdownDemo
             Description = "Removes the border from the root element.",
         },
         new()
+        {
+            Name = "NoResultsTemplate",
+            Type = "RenderFragment?",
+            DefaultValue = "null",
+            Description = "The custom template to render in the callout when the current search has no result. Falls back to the EmptyTemplate when not set.",
+        },
+        new()
+        {
+            Name = "NoResultsText",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The text to render in the callout when the current search has no result. Falls back to the EmptyText when not set.",
+        },
+        new()
+        {
+            Name = "OnClear",
+            Type = "EventCallback",
+            Description = "The callback that is called when the selection gets cleared by the clear button.",
+        },
+        new()
         {
             Name = "OnClick",
             Type = "EventCallback<MouseEventArgs>",
             Description = "The click callback for the dropdown.",
         },
         new()
+        {
+            Name = "OnClose",
+            Type = "EventCallback",
+            Description = "The callback that is called when the callout gets closed.",
+        },
+        new()
         {
             Name = "OnDynamicAdd",
             Type = "EventCallback<string>",
             Description = "The callback that is called when a new item is on added Dynamic ComboBox mode.",
         },
         new()
+        {
+            Name = "OnOpen",
+            Type = "EventCallback",
+            Description = "The callback that is called when the callout gets opened.",
+        },
+        new()
         {
             Name = "OnSearch",
             Type = "EventCallback<string>",
@@ -361,6 +456,13 @@ public partial class BitDropdownDemo
             Description = "The callback that called when selected items change.",
         },
         new()
+        {
+            Name = "OverflowTextFormat",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The composite format of the overflow indicator that stands for the selected items beyond MaxDisplayedItems in the chips display, for example \"+{0}\".",
+        },
+        new()
         {
             Name = "Options",
             Type = "RenderFragment?",
@@ -483,7 +585,23 @@ public partial class BitDropdownDemo
             Name = "SearchFunction",
             Type = "Func<ICollection<TItem>, string, ICollection<TItem>>?",
             DefaultValue = "null",
-            Description = "Custom search function to be used in place of the default search algorithm.",
+            Description = "Custom search function to be used in place of the default search algorithm. Takes precedence over SearchMode, which only configures the default algorithm.",
+        },
+        new()
+        {
+            Name = "SearchMode",
+            Type = "BitDropdownSearchMode",
+            DefaultValue = "BitDropdownSearchMode.Contains",
+            Description = "Determines how the text of an item is matched against the search text by the default (case-insensitive) search algorithm. Ignored when a SearchFunction is provided.",
+            LinkType = LinkType.Link,
+            Href = "#search-mode-enum",
+        },
+        new()
+        {
+            Name = "SearchResultsText",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The composite format of the message announced to screen readers with the number of items the current search produced, for example \"{0} results available\". Defaults to the English message.",
         },
         new()
         {
@@ -493,6 +611,13 @@ public partial class BitDropdownDemo
             Description = "The text of the select all item in multi select mode.",
         },
         new()
+        {
+            Name = "SelectedItemsTextFormat",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The composite format that replaces the joined item texts in the dropdown once more than MaxDisplayedItems items are selected, for example \"{0} items selected\".",
+        },
+        new()
         {
             Name = "ShowClearButton",
             Type = "bool",
@@ -514,6 +639,15 @@ public partial class BitDropdownDemo
             Description = "Shows the select all item in the callout in multi select mode.",
         },
         new()
+        {
+            Name = "Size",
+            Type = "BitSize?",
+            DefaultValue = "null",
+            Description = "The size of the dropdown.",
+            LinkType = LinkType.Link,
+            Href = "#size-enum",
+        },
+        new()
         {
             Name = "Styles",
             Type = "BitDropdownClassStyles?",
@@ -1126,6 +1260,41 @@ public partial class BitDropdownDemo
                    Description = "Custom CSS classes/styles for the search box input of the BitDropdown."
                },
                new()
+               {
+                   Name = "ComboBoxInput",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the ComboBox input of the BitDropdown."
+               },
+               new()
+               {
+                   Name = "Chips",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the chips container of the BitDropdown."
+               },
+               new()
+               {
+                   Name = "OverflowChip",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the overflow chip of the BitDropdown."
+               },
+               new()
+               {
+                   Name = "ChipsRemoveButton",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the chips's remove button of the BitDropdown."
+               },
+               new()
+               {
+                   Name = "ChipsRemoveIcon",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the chips's remove icon of the BitDropdown."
+               },
+               new()
                {
                    Name = "SearchBoxClearButtonContainer",
                    Type = "string?",
@@ -1203,6 +1372,13 @@ public partial class BitDropdownDemo
                    Description = "Custom CSS classes/styles for the item text of the BitDropdown."
                },
                new()
+               {
+                   Name = "ItemHighlight",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the highlighted part of the item text of the BitDropdown."
+               },
+               new()
                {
                    Name = "ItemDivider",
                    Type = "string?",
@@ -1210,6 +1386,34 @@ public partial class BitDropdownDemo
                    Description = "Custom CSS classes/styles for the item divider of the BitDropdown."
                },
                new()
+               {
+                   Name = "PrefixContainer",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the dropdown's prefix container."
+               },
+               new()
+               {
+                   Name = "Prefix",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the dropdown's prefix."
+               },
+               new()
+               {
+                   Name = "SuffixContainer",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the dropdown's suffix container."
+               },
+               new()
+               {
+                   Name = "Suffix",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the dropdown's suffix."
+               },
+               new()
                {
                    Name = "EmptyContent",
                    Type = "string?",
@@ -1217,6 +1421,27 @@ public partial class BitDropdownDemo
                    Description = "Custom CSS classes/styles for the empty state content of the BitDropdown."
                },
                new()
+               {
+                   Name = "LoadingContainer",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the loading state container of the BitDropdown."
+               },
+               new()
+               {
+                   Name = "LoadingText",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the loading state text of the BitDropdown."
+               },
+               new()
+               {
+                   Name = "Spinner",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the loading spinner of the BitDropdown."
+               },
+               new()
                {
                    Name = "SelectAllContainer",
                    Type = "string?",
@@ -1251,6 +1476,20 @@ public partial class BitDropdownDemo
                    DefaultValue = "null",
                    Description = "Custom CSS classes/styles for the select all item text of the multi-select BitDropdown."
                },
+               new()
+               {
+                   Name = "ResponsiveComboInputContainer",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the ComboBox input container in responsive mode of the BitDropdown."
+               },
+               new()
+               {
+                   Name = "ResponsiveComboAddButton",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the add new item combo box button in responsive mode of the BitDropdown."
+               },
             ],
         }
     ];
@@ -1283,6 +1522,66 @@ public partial class BitDropdownDemo
             ]
         },
         new()
+        {
+            Id = "search-mode-enum",
+            Name = "BitDropdownSearchMode",
+            Description = "Determines how the text of an item is matched against the search text.",
+            Items =
+            [
+                new()
+                {
+                    Name = "Contains",
+                    Description = "An item matches when its text contains the search text.",
+                    Value = "0",
+                },
+                new()
+                {
+                    Name = "StartsWith",
+                    Description = "An item matches when its text starts with the search text.",
+                    Value = "1",
+                },
+                new()
+                {
+                    Name = "EndsWith",
+                    Description = "An item matches when its text ends with the search text.",
+                    Value = "2",
+                },
+                new()
+                {
+                    Name = "Equals",
+                    Description = "An item matches when its text is equal to the search text.",
+                    Value = "3",
+                }
+            ]
+        },
+        new()
+        {
+            Id = "size-enum",
+            Name = "BitSize",
+            Description = "Defines the sizes available in the bit BlazorUI.",
+            Items =
+            [
+                new()
+                {
+                    Name = "Small",
+                    Description = "The small size.",
+                    Value = "0",
+                },
+                new()
+                {
+                    Name = "Medium",
+                    Description = "The medium size.",
+                    Value = "1",
+                },
+                new()
+                {
+                    Name = "Large",
+                    Description = "The large size.",
+                    Value = "2",
+                }
+            ]
+        },
+        new()
         {
             Id = "color-enum",
             Name = "BitColor",
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
index 85a5402436..58856041ec 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
@@ -1,5 +1,13 @@
 <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
-    <div>BitDropdown in its simplest forms: single and multi select dropdowns, a required one, one preserving its original callout width, the disabled and read-only states and a custom delimiter for joining the selected values in multi select mode.</div>
+    <div>
+        BitDropdown in its simplest forms: single and multi select dropdowns, a required one (which marks its label and
+        reports itself as required to assistive technologies), one preserving its original callout width instead of
+        matching the width of the dropdown, and a custom delimiter for joining the selected values in multi select mode.
+        A <b>disabled</b> dropdown cannot be focused or opened at all, while a <b>read-only</b> one stays focusable and
+        its callout can still be browsed &mdash; only changing the selection is blocked, and every control that would
+        change it (the clear button, the chip remove buttons) is hidden accordingly.
+        The <b>Title</b> parameter adds the tooltip shown while the pointer rests on the dropdown.
+    </div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Single select"
@@ -45,11 +53,23 @@
                      DefaultValues="@(new[] { "f-app", "f-ban" })"
                      Placeholder="Select items"
                      NameSelectors="nameSelectors" />
+        <br /><br />
+        <BitDropdown Label="Title"
+                     Title="Pick your favorite fruit or vegetable"
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Hover me" />
     </div>
 </DemoExample>
 
 <DemoExample Title="Prefix & Suffix" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2" PreventRenderForMcpClient>
-    <div>Display custom text before and after the selected value using the <b>Prefix</b> and <b>Suffix</b> parameters, separately or combined, or replace them entirely using the <b>PrefixTemplate</b> and <b>SuffixTemplate</b> parameters. They are visual only and are not part of the value.</div>
+    <div>
+        The <b>Prefix</b> and <b>Suffix</b> parameters put fixed text before and after the selected value &mdash; a
+        unit, a currency, a category &mdash; and <b>PrefixTemplate</b> and <b>SuffixTemplate</b> replace them with any
+        content, an icon for instance. They are decoration only: they are not part of the value and are not read out
+        with it, so keep a descriptive <b>Label</b> for screen reader users.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Prefix"
@@ -94,7 +114,11 @@
 </DemoExample>
 
 <DemoExample Title="FitWidth" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3" PreventRenderForMcpClient>
-    <div>The <b>FitWidth</b> parameter makes the dropdown's width fit its content instead of stretching to the full width of its container.</div>
+    <div>
+        The <b>FitWidth</b> parameter makes the dropdown only as wide as its content instead of stretching to the full
+        width of its container, which suits toolbars and inline filters where a full-width control would look out of
+        place. The callout still matches the width of the dropdown unless <b>PreserveCalloutWidth</b> is set.
+    </div>
     <br /><br />
     <BitDropdown Label="Single select"
                  FitWidth
@@ -111,7 +135,11 @@
 </DemoExample>
 
 <DemoExample Title="NoBorder & Transparent" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4" PreventRenderForMcpClient>
-    <div>The <b>NoBorder</b> parameter removes the border of the dropdown and the <b>Transparent</b> parameter removes its background, for a minimal look on busy or colorful surfaces.</div>
+    <div>
+        The <b>NoBorder</b> parameter removes the border of the dropdown and <b>Transparent</b> removes its background,
+        so the control can sit on a colored or image surface without cutting a box out of it. They are independent and
+        combine freely; the callout keeps its own surface either way, so the items stay readable.
+    </div>
     <br /><br />
     <div style="max-width:10rem">
         <BitDropdown NoBorder
@@ -135,7 +163,12 @@
 </DemoExample>
 
 <DemoExample Title="Responsive" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5" PreventRenderForMcpClient>
-    <div>When the <b>Responsive</b> parameter is true, the callout turns into a swipeable side panel on small screens, making long item lists easier to use on mobile devices.</div>
+    <div>
+        When the <b>Responsive</b> parameter is true, the callout turns into a side panel on small screens instead of a
+        floating list, making long item lists easier to use on mobile devices. The panel carries the label of the
+        dropdown and a close button, and it can also be dismissed by swiping it away. Resize the window below the small
+        breakpoint to see it.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Responsive Dropdown"
@@ -147,7 +180,13 @@
 </DemoExample>
 
 <DemoExample Title="Drop direction" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6" PreventRenderForMcpClient>
-    <div>The <b>DropDirection</b> parameter determines which directions the callout is allowed to open in: <b>All</b> picks the best fitting direction automatically, while <b>TopAndBottom</b> (the default) restricts it to opening above or below the dropdown.</div>
+    <div>
+        The <b>DropDirection</b> parameter determines which directions the callout is allowed to open in. <b>All</b>
+        picks whichever side fits best in the viewport, while <b>TopAndBottom</b> (the default) restricts it to opening
+        above or below the dropdown. In both cases the callout flips to the opposite side when there is not enough room,
+        and its item list is capped to the space that is actually available, so it never runs past the edge of the
+        screen. Scroll the page so that these dropdowns sit near the top or the bottom of the viewport to see it.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="All"
@@ -165,7 +204,12 @@
 </DemoExample>
 
 <DemoExample Title="Clear button" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7" PreventRenderForMcpClient>
-    <div>The <b>ShowClearButton</b> parameter adds a button that clears the current selection whenever the dropdown has a value, in both single and multi select modes.</div>
+    <div>
+        The <b>ShowClearButton</b> parameter adds a button that clears the current selection whenever the dropdown has
+        a value, in both single and multi select modes. Clearing raises the usual value change events, plus the
+        dedicated <b>OnClear</b> callback. The button is hidden while the dropdown is read-only or disabled, so it
+        never offers an action that would be ignored.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="clearValue"
@@ -186,11 +230,29 @@
                      NameSelectors="nameSelectors" />
         <br />
         <div>Values: @string.Join(',', clearValues)</div>
+        <br /><br /><br /><br />
+        <div><b>OnClear</b>:</div><br />
+        <BitDropdown ShowClearButton
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@("f-app")"
+                     NameSelectors="nameSelectors"
+                     Label="Single select dropdown"
+                     Placeholder="Select an option"
+                     OnClear="() => clearCounter++" />
+        <br />
+        <div>OnClear count: @clearCounter</div>
     </div>
 </DemoExample>
 
 <DemoExample Title="SearchBox" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8" PreventRenderForMcpClient>
-    <div>The <b>ShowSearchBox</b> parameter adds a search input to the callout to filter the items, <b>AutoFocusSearchBox</b> focuses it as soon as the callout opens and <b>SearchFunction</b> replaces the default contains algorithm with a custom one.</div>
+    <div>
+        The <b>ShowSearchBox</b> parameter adds a search input at the top of the callout to filter the items, and
+        <b>SearchBoxPlaceholder</b> sets its placeholder. By default an item matches when its text contains the typed
+        term, ignoring case; <b>SearchFunction</b> replaces that algorithm with any predicate of your own (the examples
+        below switch it to a starts-with and an ends-with match). <b>AutoFocusSearchBox</b> puts the caret in the search
+        input as soon as the callout opens, so typing filters right away. The search term is discarded whenever the
+        callout closes, so the next opening always starts from the full list.
+    </div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Single select & auto focus"
@@ -234,11 +296,67 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Immediate search" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9" PreventRenderForMcpClient>
+<DemoExample Title="Search options" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9" PreventRenderForMcpClient>
     <div>
-        By default, the search and combo box inputs raise their search as you commit the input (on the change event).
-        Enabling <b>Immediate</b> makes the search happen as you type (on the input event). You can also rate-limit the
-        immediate search using <b>DebounceTime</b> or <b>ThrottleTime</b> (in milliseconds).
+        Three parameters tune the default search without replacing it. <b>SearchMode</b> picks how the text of an item
+        is matched against the typed term &mdash; <b>Contains</b> (the default), <b>StartsWith</b>, <b>EndsWith</b> or
+        <b>Equals</b>, always ignoring case. <b>MinSearchLength</b> holds the filtering back until the term reaches the
+        given number of characters, which keeps a one-letter term from being treated as a real query (and, with an
+        <b>ItemsProvider</b>, from turning every first keystroke into a request). <b>HighlightSearch</b> emphasizes the
+        matched part of each item text so the reason an item is in the result is visible at a glance. Whenever a search
+        is active the number of results is also announced to screen readers, with a message you can localize through
+        the <b>SearchResultsText</b> parameter.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="SearchMode: StartsWith"
+                     ShowSearchBox
+                     AutoFocusSearchBox
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Type a first letter"
+                     SearchMode="BitDropdownSearchMode.StartsWith" />
+        <br /><br />
+        <BitDropdown Label="MinSearchLength: 3"
+                     ShowSearchBox
+                     AutoFocusSearchBox
+                     MinSearchLength="3"
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Type at least 3 characters" />
+        <br /><br />
+        <BitDropdown Label="HighlightSearch"
+                     ShowSearchBox
+                     AutoFocusSearchBox
+                     HighlightSearch
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search item" />
+        <br /><br />
+        <BitDropdown Label="Highlight in the ComboBox"
+                     Combo
+                     HighlightSearch
+                     Items="comboBoxCustoms"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="comboBoxNameSelectors"
+                     Placeholder="Type to filter" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Immediate search" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10" PreventRenderForMcpClient>
+    <div>
+        By default the search box raises its search when the input is committed (on the change event). Enabling
+        <b>Immediate</b> makes it search as you type (on the input event) instead. Because that can mean a request per
+        keystroke with a remote data source, the immediate search can be rate-limited: <b>DebounceTime</b> waits until
+        the typing pauses for the given number of milliseconds and then searches once, while <b>ThrottleTime</b> lets
+        at most one search through per interval while the typing continues. The <b>OnSearch</b> event reports every
+        search term that gets through.
     </div>
     <br /><br />
     <div class="example-content">
@@ -273,8 +391,13 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Validation" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10" PreventRenderForMcpClient>
-    <div>BitDropdown integrates with <b>EditForm</b> and data annotations validation: this example validates that a single select value is required and that the number of selected items in the multi select dropdown stays within a range.</div>
+<DemoExample Title="Validation" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11" PreventRenderForMcpClient>
+    <div>
+        BitDropdown is a regular form input: inside an <b>EditForm</b> it takes part in data annotations validation,
+        turns red and reports itself as invalid to assistive technologies when its field has an error, and renders a
+        <b>ValidationMessage</b> like any other input. This example requires a value in the single select dropdown and
+        keeps the number of selected items of the multi select one within a range.
+    </div>
     <br />
     <div class="example-content">
         @if (string.IsNullOrEmpty(successMessage))
@@ -313,8 +436,17 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Customization" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
-    <div>Replace nearly every part of the dropdown with your own content using the <b>HeaderTemplate</b>, <b>TextTemplate</b>, <b>ItemTemplate</b>, <b>PlaceholderTemplate</b>, <b>LabelTemplate</b>, <b>CaretDownIconName</b>, <b>CaretDownTemplate</b>, <b>CalloutHeaderTemplate</b> and <b>CalloutFooterTemplate</b> parameters.</div>
+<DemoExample Title="Customization" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+    <div>
+        Nearly every part of the dropdown can be replaced with your own content. <b>ItemTemplate</b> and
+        <b>HeaderTemplate</b> render the normal items and the group headers of the callout, <b>TextTemplate</b> renders
+        the selected value shown on the closed dropdown and <b>PlaceholderTemplate</b> what is shown while nothing is
+        selected, <b>LabelTemplate</b> replaces the label, <b>CaretDownIconName</b> and <b>CaretDownTemplate</b> the
+        chevron, and <b>CalloutHeaderTemplate</b> and <b>CalloutFooterTemplate</b> add fixed content above and below the
+        scrollable item list &mdash; the footer being the usual home of an "add a new item" action. The templates that
+        render an item receive the item itself, so the extra state carried in its <b>Data</b> property is available to
+        them.
+    </div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Header template"
@@ -400,11 +532,20 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Binding" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
-    <div>Different ways of binding to the selection and state: two-way binding over the <b>Value</b> and <b>Values</b> parameters, the <b>OnChange</b>, <b>OnValuesChange</b> and <b>OnSelectItem</b> events, the <b>Reselectable</b> parameter that raises the select events even when the already selected item is selected again and two-way binding of the callout's open state via <b>IsOpen</b>.</div>
+<DemoExample Title="Binding" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
+    <div>
+        Every piece of the dropdown's state can be bound or observed. The selection is two-way bound over <b>Value</b>
+        in single select mode and <b>Values</b> in multi select mode, or left uncontrolled with <b>DefaultValue</b> and
+        <b>DefaultValues</b> and observed through the <b>OnChange</b> and <b>OnValuesChange</b> events;
+        <b>OnSelectItem</b> hands over the clicked item itself rather than its value. <b>Reselectable</b> makes the
+        select events fire even when the already selected item is picked again, which is otherwise treated as a no-op.
+        The open state of the callout is two-way bound via <b>IsOpen</b>, so it can be opened and closed from code, and
+        the <b>OnOpen</b> and <b>OnClose</b> events report every change to it &mdash; a natural place to start fetching
+        the items on first open.
+    </div>
     <br /><br />
     <div class="example-content">
-        <div>Two-way binding:</div><br />
+        <div><b>Two-way binding</b>:</div><br />
         <BitDropdown @bind-Value="controlledValue"
                      Label="Single select"
                      Items="GetBasicCustoms()"
@@ -422,7 +563,7 @@
         <br />
         <div>Selected Values: @string.Join(",", controlledValues)</div>
         <br /><br /><br /><br />
-        <div>OnChange:</div><br />
+        <div><b>OnChange</b>:</div><br />
         <BitDropdown Label="Single select"
                      Items="GetBasicCustoms()"
                      Placeholder="Select an item"
@@ -442,7 +583,7 @@
         <br />
         <div>Changed Values: @string.Join(",", changedValues)</div>
         <br /><br /><br /><br />
-        <div>OnSelectItem:</div><br />
+        <div><b>OnSelectItem</b>:</div><br />
         <BitDropdown Label="Single select"
                      Items="GetBasicCustoms()"
                      DefaultValue="@string.Empty"
@@ -482,11 +623,28 @@
                      DefaultValue="@string.Empty"
                      Placeholder="Select an item"
                      NameSelectors="nameSelectors" />
+        <br /><br /><br /><br />
+        <div><b>OnOpen & OnClose</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     NameSelectors="nameSelectors"
+                     OnOpen="HandleOnCalloutOpen"
+                     OnClose="HandleOnCalloutClose" />
+        <br />
+        <div>The callout is @calloutState.</div>
     </div>
 </DemoExample>
 
-<DemoExample Title="ComboBox" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
-    <div>The <b>Combo</b> parameter turns the dropdown into a ComboBox: an input renders in place of the selected text that filters the items as you type.</div>
+<DemoExample Title="ComboBox" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
+    <div>
+        The <b>Combo</b> parameter turns the dropdown into a ComboBox: an editable input renders in place of the selected
+        text and filters the items as you type, so the trigger doubles as the search box. <b>Enter</b> selects the item
+        whose text matches what was typed, <b>Backspace</b> on an empty input removes the last selected item, the arrow
+        keys open the callout, and a term that was typed but never turned into a selection is discarded when the callout
+        closes, so the input goes back to showing the current selection.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample1"
@@ -512,8 +670,12 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Chips" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
-    <div>When the <b>Chips</b> parameter is true, the selected items render as chips, each with a remove button, in both single and multi select ComboBox modes.</div>
+<DemoExample Title="Chips" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
+    <div>
+        When the <b>Chips</b> parameter is true, the selected items render as chips inside the dropdown instead of one
+        joined text, each with its own remove button that is reachable with the keyboard and announced with the text of
+        the item it removes. It works in both single and multi select modes and pairs naturally with the ComboBox mode.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample2"
@@ -539,8 +701,79 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Dynamic ComboBox" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
-    <div>When the <b>Dynamic</b> parameter is true, a text typed into the ComboBox that matches no existing item can be added as a new item; <b>DynamicValueGenerator</b> generates the value of the new item and <b>OnDynamicAdd</b> notifies about the addition.</div>
+<DemoExample Title="Selection display" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16" PreventRenderForMcpClient>
+    <div>
+        A multi select dropdown that lists every selected item quickly runs out of room. <b>MaxDisplayedItems</b> caps
+        how many of them the closed dropdown shows: with <b>Chips</b> the extra ones collapse into an overflow chip
+        whose text comes from <b>OverflowTextFormat</b> (<b>"+{0}"</b> by default), and without chips the joined list
+        is replaced by the summary of <b>SelectedItemsTextFormat</b> (<b>"{0} items selected"</b> by default) as soon
+        as the limit is passed. Nothing is removed from the selection &mdash; only the way it is displayed changes.
+        <br /><br />
+        <b>AutoClearSearch</b> covers the other half of a multi select session: the callout stays open after a pick, so
+        by default the next item has to be found through the filter left over from the previous one. Enabling it clears
+        the search text after every selection instead.
+        <b>HideSelectedItems</b> goes one step further and drops the picked items out of the callout altogether, which
+        makes sense when the chips already show what is selected and the list is only about what is left to choose.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="MaxDisplayedItems (chips)"
+                     Chips
+                     MultiSelect
+                     MaxDisplayedItems="2"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban", "f-gra", "v-car" })" />
+        <br /><br />
+        <BitDropdown Label="OverflowTextFormat"
+                     Chips
+                     MultiSelect
+                     MaxDisplayedItems="2"
+                     OverflowTextFormat="and {0} more"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban", "f-gra", "v-car" })" />
+        <br /><br />
+        <BitDropdown Label="SelectedItemsTextFormat"
+                     MultiSelect
+                     MaxDisplayedItems="2"
+                     SelectedItemsTextFormat="{0} fruits and vegetables"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban", "f-gra", "v-car" })" />
+        <br /><br />
+        <BitDropdown Label="AutoClearSearch"
+                     Combo Chips
+                     MultiSelect
+                     AutoClearSearch
+                     Items="comboBoxCustoms"
+                     NameSelectors="comboBoxNameSelectors"
+                     DefaultValues="@(Array.Empty<string>())"
+                     Placeholder="Type to filter, then pick" />
+        <br /><br />
+        <BitDropdown Label="HideSelectedItems"
+                     Chips
+                     MultiSelect
+                     HideSelectedItems
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban" })" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Dynamic ComboBox" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17">
+    <div>
+        When the <b>Dynamic</b> parameter is true, a text typed into the ComboBox that matches no existing item can be
+        added as a new one, which is what makes free-form values (tags, e-mail recipients, ad-hoc categories) possible.
+        <b>DynamicValueGenerator</b> produces the value of the new item from its text and <b>OnDynamicAdd</b> notifies
+        about the addition so the item can be persisted into the source collection. Before creating anything the
+        component first looks for an existing match; <b>FindItemFunction</b> and <b>ExistsSelectedItemFunction</b>
+        replace the default case-insensitive text comparison used for those two lookups.
+    </div>
     <div class="example-content">
         <br />
         <BitDropdown @bind-Value="comboBoxValueSample3"
@@ -586,12 +819,16 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Keyboard navigation" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16" PreventRenderForMcpClient>
+<DemoExample Title="Keyboard navigation" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18" PreventRenderForMcpClient>
     <div>
-        The dropdown is fully operable with the keyboard: <b>Enter</b>, <b>Space</b> and the arrow keys open the callout,
-        <b>ArrowUp</b> and <b>ArrowDown</b> move the focus between the items, <b>Home</b> and <b>End</b> jump to the first and last item,
-        <b>PageUp</b> and <b>PageDown</b> jump ten items at a time, typing characters moves the focus to the next matching item,
-        <b>Enter</b> and <b>Space</b> select the focused item and <b>Escape</b> closes the callout.
+        The dropdown is fully operable with the keyboard, following the ARIA authoring practices for a combobox:
+        <b>Enter</b>, <b>Space</b> and the arrow keys open the callout and put the focus on the selected item (or the
+        first one), <b>ArrowUp</b> and <b>ArrowDown</b> move between the items, <b>Home</b> and <b>End</b> jump to the
+        first and the last one, <b>PageUp</b> and <b>PageDown</b> jump ten items at a time, <b>Enter</b> and <b>Space</b>
+        select the focused item, <b>Escape</b> and <b>Alt+ArrowUp</b> close the callout and return the focus to the
+        dropdown, and <b>Tab</b> closes it and moves on. Typing printable characters runs a typeahead: the accumulated characters jump to the
+        item starting with them, repeating one character cycles through the items starting with it, and the buffer
+        resets after a short pause. Disabled and hidden items are skipped throughout.
     </div>
     <br />
     <div class="example-content">
@@ -608,12 +845,14 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Select all" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17" PreventRenderForMcpClient>
+<DemoExample Title="Select all" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
     <div>
-        When the <b>ShowSelectAll</b> parameter is true, a select all item renders at the top of the callout of the
-        multi select dropdown that selects or clears all items at once and shows an indeterminate state when only
-        some items are selected. Disabled items are skipped, the <b>SelectAllText</b> parameter customizes its text
-        and combined with the search box, it only applies to the search result.
+        When the <b>ShowSelectAll</b> parameter is true, a select all item renders above the item list of a multi select
+        dropdown. It selects everything with one click and clears everything with the next, and its check box shows an
+        indeterminate state while only some of the items are selected, so it doubles as a summary of the current
+        selection. It only ever applies to what the user can actually see: disabled items are skipped, and while a
+        search is active it selects the search result rather than the whole list, leaving selections made outside the
+        result untouched. The <b>SelectAllText</b> parameter customizes its text.
     </div>
     <br />
     <div class="example-content">
@@ -640,10 +879,12 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Selection limit" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18" PreventRenderForMcpClient>
+<DemoExample Title="Selection limit" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20" PreventRenderForMcpClient>
     <div>
-        The <b>MaxSelectedItems</b> parameter limits the number of items that can be selected in the multi select
-        dropdown; once the limit is reached, the remaining items become disabled until an item gets unselected.
+        The <b>MaxSelectedItems</b> parameter limits how many items can be selected in the multi select dropdown. Once
+        the limit is reached the unselected items are disabled rather than silently refusing the click, so the boundary
+        is visible before it is hit, and they become available again as soon as an item is unselected. The select all
+        item honors the same limit and stops adding items once it is reached.
     </div>
     <br />
     <div class="example-content">
@@ -659,10 +900,14 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Empty state" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
+<DemoExample Title="Empty state" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21" PreventRenderForMcpClient>
     <div>
-        When there is no item to show in the callout (an empty list or a search without a result), the dropdown
-        renders a message that can be customized using the <b>EmptyText</b> and <b>EmptyTemplate</b> parameters.
+        When there is no item to show, the callout renders a message instead of an empty list. There are two distinct
+        cases and each gets its own text: <b>EmptyText</b> and <b>EmptyTemplate</b> cover a list that has nothing in it
+        ("No items found" by default), while <b>NoResultsText</b> and <b>NoResultsTemplate</b> cover a search that
+        matched nothing ("No results found" by default) &mdash; telling the user that their term found nothing is a
+        different message from telling them the list is empty. When the no-results pair is not set the empty pair is used
+        for both cases.
     </div>
     <br />
     <div class="example-content">
@@ -698,11 +943,93 @@
                      NameSelectors="nameSelectors"
                      Placeholder="Select an item"
                      SearchBoxPlaceholder="Search for anything" />
+        <br /><br />
+        <BitDropdown Label="NoResultsText"
+                     ShowSearchBox
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search for anything"
+                     NoResultsText="Nothing matched your search" />
+        <br /><br />
+        <BitDropdown Label="NoResultsTemplate"
+                     ShowSearchBox
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search for anything">
+            <NoResultsTemplate>
+                <div class="custom-drp custom-drp-empty">
+                    <BitIcon IconName="@BitIconName.SearchAndApps" />
+                    <div>No match. Try another term!</div>
+                </div>
+            </NoResultsTemplate>
+        </BitDropdown>
     </div>
 </DemoExample>
 
-<DemoExample Title="Virtualization" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20">
-    <div>The <b>Virtualize</b> parameter renders only the visible items instead of the whole list, keeping the dropdown fast with thousands of items — either over a local <b>Items</b> collection or by loading pages on demand through an <b>ItemsProvider</b> (with <b>InitialSelectedItems</b> pre-selecting values that have not been loaded yet). The <b>VirtualizePlaceholder</b> template renders in place of the items that are still loading.</div>
+<DemoExample Title="Loading" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22" PreventRenderForMcpClient>
+    <div>
+        The <b>IsLoading</b> parameter reports that the items are still on their way: a spinner replaces the caret
+        down element and the callout shows a loading indicator in place of the item list, while the dropdown itself
+        stays enabled so the user can still open it and see what is happening. The message is customized with the
+        <b>LoadingText</b> parameter and the whole indicator with the <b>LoadingTemplate</b> parameter.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="IsLoading"
+                     IsLoading
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item" />
+        <br /><br />
+        <BitDropdown Label="LoadingText"
+                     IsLoading
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item"
+                     LoadingText="Fetching the products..." />
+        <br /><br />
+        <BitDropdown Label="LoadingTemplate"
+                     IsLoading
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item">
+            <LoadingTemplate>
+                <div class="custom-drp custom-drp-empty">
+                    <BitIcon IconName="@BitIconName.Sync" />
+                    <div>Just a moment...</div>
+                </div>
+            </LoadingTemplate>
+        </BitDropdown>
+        <br /><br /><br /><br />
+        <div><b>A real fetch</b>: the items get loaded when the button is clicked.</div>
+        <br />
+        <BitButton OnClick="LoadDelayedCustoms" IsLoading="isLoadingItems">Load the items</BitButton>
+        <br /><br />
+        <BitDropdown Label="Products"
+                     IsLoading="isLoadingItems"
+                     Items="delayedCustoms"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Virtualization" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23">
+    <div>
+        The <b>Virtualize</b> parameter renders only the items that are currently visible instead of the whole list,
+        which keeps the callout fast with thousands of items; <b>ItemSize</b> tells it how tall an item is and
+        <b>OverscanCount</b> how many extra items to keep rendered around the visible window. It works over a local
+        <b>Items</b> collection, or over an <b>ItemsProvider</b> that fetches one page at a time from a server (and
+        receives the current search term, so filtering happens remotely too). Because a value can be selected before
+        the page holding its item has ever been fetched, <b>InitialSelectedItems</b> supplies those items up front so
+        the dropdown can show their text right away. The <b>VirtualizePlaceholder</b> template fills the rows that are
+        still being fetched.
+    </div>
     <br /><br /><br />
     <div class="example-content">
         <div>With <b>Items</b>:</div><br />
@@ -715,6 +1042,8 @@
         <BitDropdown Label="Multi select"
                      Virtualize
                      MultiSelect
+                     ItemSize="35"
+                     OverscanCount="5"
                      Items="virtualizeCustoms2"
                      Placeholder="Select items"
                      NameSelectors="nameSelectors" />
@@ -762,8 +1091,13 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21" PreventRenderForMcpClient>
-    <div>The <b>Color</b> parameter paints the dropdown's accents (the focus border, the search icon and the check boxes of the multi select items) in one of the theme colors, <b>Primary</b> being the default.</div>
+<DemoExample Title="Color" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24" PreventRenderForMcpClient>
+    <div>
+        The <b>Color</b> parameter paints the accents of the dropdown &mdash; the focus border, the search box
+        underline and icon, the group headers and the check boxes of the multi select items &mdash; in one of the theme
+        colors, <b>Primary</b> being the default. It changes the accents only, not the surface of the control, so the
+        dropdown keeps fitting its surroundings.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Primary"
@@ -824,12 +1158,15 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22">
+<DemoExample Title="External Icons" RazorCode="@example25RazorCode" CsharpCode="@example25CsharpCode" Id="example25">
     <div>
-        Use icons from external libraries like FontAwesome and Bootstrap Icons with the <b>CaretDownIcon</b>,
-        <b>ClearButtonIcon</b>, <b>ChipsRemoveIcon</b>, <b>SearchBoxIcon</b>, <b>SearchBoxClearIcon</b>,
-        <b>ResponsiveCloseIcon</b>, and <b>ItemCheckIcon</b> parameters on the dropdown and the <b>Icon</b> or <b>IconName</b>
-        properties on custom type.
+        Every icon of the dropdown can come from an external library instead of the built-in Fluent UI set. The
+        <b>CaretDownIcon</b>, <b>ClearButtonIcon</b>, <b>ChipsRemoveIcon</b>, <b>SearchBoxIcon</b>,
+        <b>SearchBoxClearIcon</b>, <b>ResponsiveCloseIcon</b> and <b>ItemCheckIcon</b> parameters take a
+        <b>BitIconInfo</b> &mdash; built with <b>BitIconInfo.Fa</b>, <b>BitIconInfo.Bi</b> or the generic
+        <b>BitIconInfo.Css</b> &mdash; and each takes precedence over its <b>...IconName</b> counterpart when both are
+        set. The items themselves follow the same rule through their <b>Icon</b> and <b>IconName</b> members. Remember
+        to reference the stylesheet of the icon library you use.
     </div>
     
     <br />
@@ -907,8 +1244,48 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23">
-    <div>Style the dropdown at every level: inline <b>Style</b> and <b>Class</b> on the root element, per-item styles and classes on the items, and the <b>Styles</b> and <b>Classes</b> parameters that target each internal part of the component individually.</div>
+<DemoExample Title="Size" RazorCode="@example26RazorCode" CsharpCode="@example26CsharpCode" Id="example26" PreventRenderForMcpClient>
+    <div>
+        The <b>Size</b> parameter scales the whole component in one step, <b>Medium</b> being the default: the height
+        and the font size of the dropdown, of its search box and of the items in the callout all follow the chosen size.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="Small"
+                     ShowSearchBox
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="nameSelectors"
+                     Size="BitSize.Small"
+                     Placeholder="Select an item" />
+        <br /><br />
+        <BitDropdown Label="Medium"
+                     ShowSearchBox
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="nameSelectors"
+                     Size="BitSize.Medium"
+                     Placeholder="Select an item" />
+        <br /><br />
+        <BitDropdown Label="Large"
+                     ShowSearchBox
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="nameSelectors"
+                     Size="BitSize.Large"
+                     Placeholder="Select an item" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Style & Class" RazorCode="@example27RazorCode" CsharpCode="@example27CsharpCode" Id="example27">
+    <div>
+        The dropdown can be styled at every level: <b>Style</b> and <b>Class</b> apply to the root element, each item
+        carries its own style and class, and the <b>Styles</b> and <b>Classes</b> parameters reach every internal part
+        of the component individually &mdash; the label, the container, the callout, the search box, the scroll
+        container, the items and everything else listed in the class-styles reference below. Because the callout is
+        rendered outside the root element, styling it through <b>Styles.Callout</b> or <b>Classes.Callout</b> is the way
+        to reach it rather than a descendant selector on the root.
+    </div>
     <br /><br />
     <div class="example-content">
         <div>Component's Style & Class:</div><br />
@@ -949,8 +1326,13 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24" PreventRenderForMcpClient>
-    <div>Setting the <b>Dir</b> parameter to <b>Rtl</b> renders the dropdown right-to-left for languages like Arabic, Persian and Hebrew, in both the regular callout and the responsive panel.</div>
+<DemoExample Title="RTL" RazorCode="@example28RazorCode" CsharpCode="@example28CsharpCode" Id="example28" PreventRenderForMcpClient>
+    <div>
+        Setting the <b>Dir</b> parameter to <b>Rtl</b> renders the dropdown right-to-left for languages like Arabic,
+        Persian and Hebrew: the text, the label, the chevron, the check boxes and the search box all mirror, the
+        callout aligns to the right edge of the dropdown, and the responsive panel slides in from the left and is
+        swiped away in the opposite direction.
+    </div>
     <br />
     <dir dir="rtl" style="padding:0">
         <div class="example-content">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.cs
index fd25183d9c..683e02b731 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.cs
@@ -177,6 +177,12 @@ private List<Product> GetRtlCustoms() =>
 
     private string clearValue = "f-app";
     private IEnumerable<string> clearValues = ["f-app", "f-ban"];
+    private int clearCounter;
+
+    private string calloutState = "closed";
+
+    private bool isLoadingItems;
+    private ICollection<Product> delayedCustoms = [];
 
     private string? immediateSearchValue;
     private string? debouncedSearchValue;
@@ -271,6 +277,21 @@ private void HandleOnDynamicAdd(Product item)
         comboBoxCustoms.Add(item);
     }
 
+    private void HandleOnCalloutOpen() => calloutState = "opened";
+
+    private void HandleOnCalloutClose() => calloutState = "closed";
+
+    private async Task LoadDelayedCustoms()
+    {
+        isLoadingItems = true;
+        delayedCustoms = [];
+
+        await Task.Delay(2000);
+
+        delayedCustoms = GetBasicCustoms();
+        isLoadingItems = false;
+    }
+
     private async ValueTask<BitDropdownItemsProviderResult<Product>> LoadItems(
         BitDropdownItemsProviderRequest<Product> request)
     {
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
index 44515716be..41085adc81 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
@@ -45,7 +45,14 @@ public partial class _BitDropdownCustomDemo
              Items=""GetBasicCustoms()""
              DefaultValues=""@(new[] { ""f-app"", ""f-ban"" })""
              Placeholder=""Select items""
-             NameSelectors=""nameSelectors"" />";
+             NameSelectors=""nameSelectors"" />
+
+<BitDropdown Label=""Title""
+             Title=""Pick your favorite fruit or vegetable""
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Hover me"" />";
     private readonly string example1CsharpCode = @"
 public class Product
 {
@@ -378,8 +385,18 @@ protected override void OnInitialized()
              Placeholder=""Select options""
              Label=""Multi select dropdown""
              NameSelectors=""nameSelectors"" />
-<div>Values: @string.Join(',', clearValues)</div>";
+<div>Values: @string.Join(',', clearValues)</div>
+
+<BitDropdown ShowClearButton
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@(""f-app"")""
+             NameSelectors=""nameSelectors""
+             Label=""Single select dropdown""
+             Placeholder=""Select an option""
+             OnClear=""() => clearCounter++"" />
+<div>OnClear count: @clearCounter</div>";
     private readonly string example7CsharpCode = @"
+private int clearCounter;
 private string? clearValue = ""f-app"";
 private ICollection<string?> clearValues = new[] { ""f-app"", ""f-ban"" };
 
@@ -504,6 +521,67 @@ public class Product
 };";
 
     private readonly string example9RazorCode = @"
+<BitDropdown Label=""SearchMode: StartsWith""
+             ShowSearchBox
+             AutoFocusSearchBox
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Type a first letter""
+             SearchMode=""BitDropdownSearchMode.StartsWith"" />
+
+<BitDropdown Label=""MinSearchLength: 3""
+             ShowSearchBox
+             AutoFocusSearchBox
+             MinSearchLength=""3""
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Type at least 3 characters"" />
+
+<BitDropdown Label=""HighlightSearch""
+             ShowSearchBox
+             AutoFocusSearchBox
+             HighlightSearch
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search item"" />
+
+<BitDropdown Label=""Highlight in the ComboBox""
+             Combo
+             HighlightSearch
+             Items=""comboBoxCustoms""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""comboBoxNameSelectors""
+             Placeholder=""Type to filter"" />";
+    private readonly string example9CsharpCode = @"
+private List<Product> GetBasicCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private BitDropdownNameSelectors<Product, string?> nameSelectors = new()
+{
+    Text = { Selector = c => c.Text },
+    Value = { Selector = c => c.Value },
+    ItemType = { Selector = c => c.Type },
+    IsEnabled = { Selector = c => c.Disabled is false },
+};";
+
+    private readonly string example10RazorCode = @"
 <BitDropdown Label=""Immediate""
              ShowSearchBox
              Immediate
@@ -532,7 +610,7 @@ public class Product
              Items=""comboBoxCustoms""
              Placeholder=""Select an item""
              NameSelectors=""comboBoxNameSelectors"" />";
-    private readonly string example9CsharpCode = @"
+    private readonly string example10CsharpCode = @"
 private string? immediateSearchValue;
 private string? debouncedSearchValue;
 
@@ -577,7 +655,7 @@ public class Product
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example11RazorCode = @"
 @using System.ComponentModel.DataAnnotations;
 
 <style>
@@ -607,7 +685,7 @@ public class Product
 
     <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
 </EditForm>";
-    private readonly string example10CsharpCode = @"
+    private readonly string example11CsharpCode = @"
 public class FormValidationDropdownModel
 {
     [MaxLength(2, ErrorMessage = ""The property {0} have more than {1} elements"")]
@@ -664,7 +742,7 @@ public class Product
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example11RazorCode = @"
+    private readonly string example12RazorCode = @"
 <style>
     .custom-drp {
         gap: 10px;
@@ -779,7 +857,7 @@ public class Product
         <BitActionButton IconName=""@BitIconName.Add"">New Item</BitActionButton>
     </CalloutFooterTemplate>
 </BitDropdown>";
-    private readonly string example11CsharpCode = @"
+    private readonly string example12CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
@@ -824,7 +902,7 @@ public class DropdownItemData
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example13RazorCode = @"
 <BitDropdown @bind-Value=""controlledValue""
              Label=""Single select""
              Items=""GetBasicCustoms()""
@@ -893,10 +971,24 @@ public class DropdownItemData
              Items=""GetBasicCustoms()""
              DefaultValue=""@string.Empty""
              Placeholder=""Select an item""
-             NameSelectors=""nameSelectors"" />";
-    private readonly string example12CsharpCode = @"
+             NameSelectors=""nameSelectors"" />
+
+<BitDropdown Label=""Single select""
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             NameSelectors=""nameSelectors""
+             OnOpen=""HandleOnCalloutOpen""
+             OnClose=""HandleOnCalloutClose"" />
+<div>The callout is @calloutState.</div>";
+    private readonly string example13CsharpCode = @"
 private bool isDropdownOpen;
 private int selectItemCounter;
+private string calloutState = ""closed"";
+
+private void HandleOnCalloutOpen() => calloutState = ""opened"";
+
+private void HandleOnCalloutClose() => calloutState = ""closed"";
 
 private string controlledValue = ""f-app"";
 private IEnumerable<string> controlledValues = [""f-app"", ""f-ban""];
@@ -947,7 +1039,7 @@ public class Product
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example14RazorCode = @"
 <BitDropdown @bind-Value=""comboBoxValueSample1""
              Combo
              Responsive
@@ -966,7 +1058,7 @@ public class Product
              Placeholder=""Select an option""
              NameSelectors=""comboBoxNameSelectors"" />
 <div>Values: @string.Join(',', comboBoxValues1)</div>";
-    private readonly string example13CsharpCode = @"
+    private readonly string example14CsharpCode = @"
 private string comboBoxValueSample1 = default!;
 private ICollection<string> comboBoxValues1 = [];
 
@@ -1014,7 +1106,7 @@ public class Product
     TextSetter = (string? text, Product item) => item.Text = text
 };";
 
-    private readonly string example14RazorCode = @"
+    private readonly string example15RazorCode = @"
 <BitDropdown @bind-Value=""comboBoxValueSample2""
              Responsive
              Combo Chips
@@ -1033,7 +1125,7 @@ Combo Chips
              NameSelectors=""comboBoxNameSelectors""
              Label=""Multi select combo box & chips"" />
 <div>Values: @string.Join(',', comboBoxValues2)</div>";
-    private readonly string example14CsharpCode = @"
+    private readonly string example15CsharpCode = @"
 private string comboBoxValueSample2 = default!;
 private ICollection<string> comboBoxValues2 = [];
 
@@ -1081,7 +1173,68 @@ public class Product
     TextSetter = (string? text, Product item) => item.Text = text
 };";
 
-    private readonly string example15RazorCode = @"
+    private readonly string example16RazorCode = @"
+<BitDropdown Label=""MaxDisplayedItems (chips)""
+             Chips
+             MultiSelect
+             MaxDisplayedItems=""2""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"", ""f-gra"", ""v-car"" })"" />
+
+<BitDropdown Label=""OverflowTextFormat""
+             Chips
+             MultiSelect
+             MaxDisplayedItems=""2""
+             OverflowTextFormat=""and {0} more""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"", ""f-gra"", ""v-car"" })"" />
+
+<BitDropdown Label=""SelectedItemsTextFormat""
+             MultiSelect
+             MaxDisplayedItems=""2""
+             SelectedItemsTextFormat=""{0} fruits and vegetables""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"", ""f-gra"", ""v-car"" })"" />
+
+<BitDropdown Label=""AutoClearSearch""
+             Combo Chips
+             MultiSelect
+             AutoClearSearch
+             Items=""comboBoxCustoms""
+             NameSelectors=""comboBoxNameSelectors""
+             DefaultValues=""@(Array.Empty<string>())""
+             Placeholder=""Type to filter, then pick"" />
+
+<BitDropdown Label=""HideSelectedItems""
+             Chips
+             MultiSelect
+             HideSelectedItems
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"" })"" />";
+    private readonly string example16CsharpCode = @"
+private List<Product> GetBasicCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
+
+    private readonly string example17RazorCode = @"
 <BitDropdown @bind-Value=""comboBoxValueSample3""
              Combo Dynamic Responsive
              Items=""comboBoxCustoms""
@@ -1114,7 +1267,7 @@ Combo Chips Dynamic
              OnDynamicAdd=""(Product item) => HandleOnDynamicAdd(item)""
              DynamicValueGenerator=""@((Product item) => item.Text ?? """")"" />
 <div>Values: @string.Join(',', comboBoxValues3)</div>";
-    private readonly string example15CsharpCode = @"
+    private readonly string example17CsharpCode = @"
 private string comboBoxValueSample3 = default!;
 private string comboBoxValueSample4 = default!;
 private ICollection<string> comboBoxValues3 = [];
@@ -1168,7 +1321,7 @@ public class Product
     TextSetter = (string? text, Product item) => item.Text = text
 };";
 
-    private readonly string example16RazorCode = @"
+    private readonly string example18RazorCode = @"
 <BitDropdown Label=""Single select""
              Items=""GetBasicCustoms()""
              NameSelectors=""nameSelectors""
@@ -1179,7 +1332,7 @@ public class Product
              Items=""GetBasicCustoms()""
              Placeholder=""Select items""
              NameSelectors=""nameSelectors"" />";
-    private readonly string example16CsharpCode = @"
+    private readonly string example18CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
@@ -1220,7 +1373,7 @@ public class Product
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example17RazorCode = @"
+    private readonly string example19RazorCode = @"
 <BitDropdown @bind-Values=""selectAllValues""
              MultiSelect
              ShowSelectAll
@@ -1240,7 +1393,7 @@ public class Product
              DefaultValue=""@string.Empty""
              SearchBoxPlaceholder=""Search items""
              Label=""Custom text & search"" />";
-    private readonly string example17CsharpCode = @"
+    private readonly string example19CsharpCode = @"
 private IEnumerable<string> selectAllValues = [];
 
 public class Product
@@ -1283,7 +1436,7 @@ public class Product
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example18RazorCode = @"
+    private readonly string example20RazorCode = @"
 <BitDropdown @bind-Values=""maxSelectedValues""
              MultiSelect
              MaxSelectedItems=""2""
@@ -1292,7 +1445,7 @@ public class Product
              Placeholder=""Select up to 2 items""
              Label=""Max 2 items"" />
 <div>Values: @string.Join(',', maxSelectedValues)</div>";
-    private readonly string example18CsharpCode = @"
+    private readonly string example20CsharpCode = @"
 private IEnumerable<string> maxSelectedValues = [];
 
 public class Product
@@ -1335,7 +1488,7 @@ public class Product
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example19RazorCode = @"
+    private readonly string example21RazorCode = @"
 <BitDropdown Label=""Default""
              Items=""emptyCustoms""
              NameSelectors=""nameSelectors""
@@ -1367,8 +1520,30 @@ public class Product
              Items=""GetBasicCustoms()""
              NameSelectors=""nameSelectors""
              Placeholder=""Select an item""
-             SearchBoxPlaceholder=""Search for anything"" />";
-    private readonly string example19CsharpCode = @"
+             SearchBoxPlaceholder=""Search for anything"" />
+
+<BitDropdown Label=""NoResultsText""
+             ShowSearchBox
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search for anything""
+             NoResultsText=""Nothing matched your search"" />
+
+<BitDropdown Label=""NoResultsTemplate""
+             ShowSearchBox
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search for anything"">
+    <NoResultsTemplate>
+        <div class=""custom-drp custom-drp-empty"">
+            <BitIcon IconName=""@BitIconName.SearchAndApps"" />
+            <div>No match. Try another term!</div>
+        </div>
+    </NoResultsTemplate>
+</BitDropdown>";
+    private readonly string example21CsharpCode = @"
 private readonly List<Product> emptyCustoms = [];
 
 public class Product
@@ -1411,7 +1586,73 @@ public class Product
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example20RazorCode = @"
+    private readonly string example22RazorCode = @"
+<BitDropdown Label=""IsLoading""
+             IsLoading
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""LoadingText""
+             IsLoading
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             LoadingText=""Fetching the products..."" />
+
+<BitDropdown Label=""LoadingTemplate""
+             IsLoading
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"">
+    <LoadingTemplate>
+        <div class=""custom-drp custom-drp-empty"">
+            <BitIcon IconName=""@BitIconName.Sync"" />
+            <div>Just a moment...</div>
+        </div>
+    </LoadingTemplate>
+</BitDropdown>
+
+<BitButton OnClick=""LoadDelayedCustoms"" IsLoading=""isLoadingItems"">Load the items</BitButton>
+<BitDropdown Label=""Products""
+             IsLoading=""isLoadingItems""
+             Items=""delayedCustoms""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"" />";
+    private readonly string example22CsharpCode = @"
+private bool isLoadingItems;
+private ICollection<Product> delayedCustoms = [];
+
+private async Task LoadDelayedCustoms()
+{
+    isLoadingItems = true;
+    delayedCustoms = [];
+
+    await Task.Delay(2000);
+
+    delayedCustoms = GetBasicCustoms();
+    isLoadingItems = false;
+}
+
+private List<Product> GetBasicCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
+
+    private readonly string example23RazorCode = @"
 <BitDropdown Label=""Single select""
              Virtualize
              Items=""virtualizeCustoms1""
@@ -1421,6 +1662,8 @@ public class Product
 <BitDropdown Label=""Multi select""
              Virtualize
              MultiSelect
+             ItemSize=""35""
+             OverscanCount=""5""
              Items=""virtualizeCustoms2""
              Placeholder=""Select items""
              NameSelectors=""nameSelectors"" />
@@ -1464,7 +1707,7 @@ public class Product
              Placeholder=""Select items""
              InitialSelectedItems=""initialSelectedItems""
              NameSelectors=""nameSelectors"" />";
-    private readonly string example20CsharpCode = @"
+    private readonly string example23CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
@@ -1587,7 +1830,7 @@ private async ValueTask<BitDropdownItemsProviderResult<Product>> LoadItems(
     }
 }";
 
-    private readonly string example21RazorCode = @"
+    private readonly string example24RazorCode = @"
 <BitDropdown Label=""Primary""
              MultiSelect
              Color=""BitColor.Primary""
@@ -1643,7 +1886,7 @@ private async ValueTask<BitDropdownItemsProviderResult<Product>> LoadItems(
              Items=""GetBasicCustoms()""
              NameSelectors=""nameSelectors""
              Placeholder=""Select items"" />";
-    private readonly string example21CsharpCode = @"
+    private readonly string example24CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
@@ -1684,7 +1927,7 @@ public class Product
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example22RazorCode = @"
+    private readonly string example25RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 <link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
 
@@ -1739,7 +1982,7 @@ public class Product
              Items=""GetExternalIconBiCustoms()""
              NameSelectors=""nameSelectors""
              Placeholder=""Select an item"" />";
-    private readonly string example22CsharpCode = @"
+    private readonly string example25CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
@@ -1828,7 +2071,54 @@ public class Product
     IconName = { Selector = c => c.IconName },
 };";
 
-    private readonly string example23RazorCode = @"
+    private readonly string example26RazorCode = @"
+<BitDropdown Label=""Small""
+             ShowSearchBox
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""nameSelectors""
+             Size=""BitSize.Small""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Medium""
+             ShowSearchBox
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""nameSelectors""
+             Size=""BitSize.Medium""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Large""
+             ShowSearchBox
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""nameSelectors""
+             Size=""BitSize.Large""
+             Placeholder=""Select an item"" />";
+    private readonly string example26CsharpCode = @"
+private List<Product> GetBasicCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private BitDropdownNameSelectors<Product, string?> nameSelectors = new()
+{
+    Text = { Selector = c => c.Text },
+    Value = { Selector = c => c.Value },
+    ItemType = { Selector = c => c.Type },
+    IsEnabled = { Selector = c => c.Disabled is false },
+};";
+
+    private readonly string example27RazorCode = @"
 <style>
     .custom-class {
         margin-inline: 1rem;
@@ -1906,7 +2196,7 @@ public class Product
                                 Container = ""custom-container"",
                                 ItemButton = ""custom-item-button"",
                                 ScrollContainer = ""custom-scroll-container"" })"" />";
-    private readonly string example23CsharpCode = @"
+    private readonly string example27CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
@@ -1965,7 +2255,7 @@ public class Product
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example24RazorCode = @"
+    private readonly string example28RazorCode = @"
 <BitDropdown Label=""تک انتخابی""
              Dir=""BitDir.Rtl""
              Items=""GetRtlCustoms()""
@@ -1985,7 +2275,7 @@ public class Product
              Items=""GetRtlCustoms()""
              NameSelectors=""nameSelectors""
              Placeholder=""لطفا انتخاب کنید"" />";
-    private readonly string example24CsharpCode = @"
+    private readonly string example28CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
index fe51a5e3f7..6b532779b3 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
@@ -1,5 +1,13 @@
 <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
-    <div>BitDropdown in its simplest forms: single and multi select dropdowns, a required one, one preserving its original callout width, the disabled and read-only states and a custom delimiter for joining the selected values in multi select mode.</div>
+    <div>
+        BitDropdown in its simplest forms: single and multi select dropdowns, a required one (which marks its label and
+        reports itself as required to assistive technologies), one preserving its original callout width instead of
+        matching the width of the dropdown, and a custom delimiter for joining the selected values in multi select mode.
+        A <b>disabled</b> dropdown cannot be focused or opened at all, while a <b>read-only</b> one stays focusable and
+        its callout can still be browsed &mdash; only changing the selection is blocked, and every control that would
+        change it (the clear button, the chip remove buttons) is hidden accordingly.
+        The <b>Title</b> parameter adds the tooltip shown while the pointer rests on the dropdown.
+    </div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Single select"
@@ -42,11 +50,22 @@
                      Items="GetBasicItems()"
                      DefaultValues="@(new[] { "f-app", "f-ban" })"
                      Placeholder="Select items" />
+        <br /><br />
+        <BitDropdown Label="Title"
+                     Title="Pick your favorite fruit or vegetable"
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Hover me" />
     </div>
 </DemoExample>
 
 <DemoExample Title="Prefix & Suffix" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2" PreventRenderForMcpClient>
-    <div>Display custom text before and after the selected value using the <b>Prefix</b> and <b>Suffix</b> parameters, separately or combined, or replace them entirely using the <b>PrefixTemplate</b> and <b>SuffixTemplate</b> parameters. They are visual only and are not part of the value.</div>
+    <div>
+        The <b>Prefix</b> and <b>Suffix</b> parameters put fixed text before and after the selected value &mdash; a
+        unit, a currency, a category &mdash; and <b>PrefixTemplate</b> and <b>SuffixTemplate</b> replace them with any
+        content, an icon for instance. They are decoration only: they are not part of the value and are not read out
+        with it, so keep a descriptive <b>Label</b> for screen reader users.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Prefix"
@@ -96,7 +115,11 @@
 </DemoExample>
 
 <DemoExample Title="FitWidth" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3" PreventRenderForMcpClient>
-    <div>The <b>FitWidth</b> parameter makes the dropdown's width fit its content instead of stretching to the full width of its container.</div>
+    <div>
+        The <b>FitWidth</b> parameter makes the dropdown only as wide as its content instead of stretching to the full
+        width of its container, which suits toolbars and inline filters where a full-width control would look out of
+        place. The callout still matches the width of the dropdown unless <b>PreserveCalloutWidth</b> is set.
+    </div>
     <br /><br />
     <BitDropdown Label="Single select"
                  FitWidth
@@ -113,7 +136,11 @@
 </DemoExample>
 
 <DemoExample Title="NoBorder & Transparent" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4" PreventRenderForMcpClient>
-    <div>The <b>NoBorder</b> parameter removes the border of the dropdown and the <b>Transparent</b> parameter removes its background, for a minimal look on busy or colorful surfaces.</div>
+    <div>
+        The <b>NoBorder</b> parameter removes the border of the dropdown and <b>Transparent</b> removes its background,
+        so the control can sit on a colored or image surface without cutting a box out of it. They are independent and
+        combine freely; the callout keeps its own surface either way, so the items stay readable.
+    </div>
     <br /><br />
     <div style="max-width:10rem">
         <BitDropdown NoBorder
@@ -137,7 +164,12 @@
 </DemoExample>
 
 <DemoExample Title="Responsive" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5" PreventRenderForMcpClient>
-    <div>When the <b>Responsive</b> parameter is true, the callout turns into a swipeable side panel on small screens, making long item lists easier to use on mobile devices.</div>
+    <div>
+        When the <b>Responsive</b> parameter is true, the callout turns into a side panel on small screens instead of a
+        floating list, making long item lists easier to use on mobile devices. The panel carries the label of the
+        dropdown and a close button, and it can also be dismissed by swiping it away. Resize the window below the small
+        breakpoint to see it.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Responsive Dropdown"
@@ -149,7 +181,13 @@
 </DemoExample>
 
 <DemoExample Title="Drop direction" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6" PreventRenderForMcpClient>
-    <div>The <b>DropDirection</b> parameter determines which directions the callout is allowed to open in: <b>All</b> picks the best fitting direction automatically, while <b>TopAndBottom</b> (the default) restricts it to opening above or below the dropdown.</div>
+    <div>
+        The <b>DropDirection</b> parameter determines which directions the callout is allowed to open in. <b>All</b>
+        picks whichever side fits best in the viewport, while <b>TopAndBottom</b> (the default) restricts it to opening
+        above or below the dropdown. In both cases the callout flips to the opposite side when there is not enough room,
+        and its item list is capped to the space that is actually available, so it never runs past the edge of the
+        screen. Scroll the page so that these dropdowns sit near the top or the bottom of the viewport to see it.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="All"
@@ -167,7 +205,12 @@
 </DemoExample>
 
 <DemoExample Title="Clear button" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7" PreventRenderForMcpClient>
-    <div>The <b>ShowClearButton</b> parameter adds a button that clears the current selection whenever the dropdown has a value, in both single and multi select modes.</div>
+    <div>
+        The <b>ShowClearButton</b> parameter adds a button that clears the current selection whenever the dropdown has
+        a value, in both single and multi select modes. Clearing raises the usual value change events, plus the
+        dedicated <b>OnClear</b> callback. The button is hidden while the dropdown is read-only or disabled, so it
+        never offers an action that would be ignored.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="clearValue"
@@ -186,11 +229,28 @@
                      Label="Multi select dropdown" />
         <br />
         <div>Values: @string.Join(',', clearValues)</div>
+        <br /><br /><br /><br />
+        <div><b>OnClear</b>:</div><br />
+        <BitDropdown ShowClearButton
+                     Items="GetBasicItems()"
+                     Label="Single select dropdown"
+                     DefaultValue="@("f-app")"
+                     Placeholder="Select an option"
+                     OnClear="() => clearCounter++" />
+        <br />
+        <div>OnClear count: @clearCounter</div>
     </div>
 </DemoExample>
 
 <DemoExample Title="SearchBox" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8" PreventRenderForMcpClient>
-    <div>The <b>ShowSearchBox</b> parameter adds a search input to the callout to filter the items, <b>AutoFocusSearchBox</b> focuses it as soon as the callout opens and <b>SearchFunction</b> replaces the default contains algorithm with a custom one.</div>
+    <div>
+        The <b>ShowSearchBox</b> parameter adds a search input at the top of the callout to filter the items, and
+        <b>SearchBoxPlaceholder</b> sets its placeholder. By default an item matches when its text contains the typed
+        term, ignoring case; <b>SearchFunction</b> replaces that algorithm with any predicate of your own (the examples
+        below switch it to a starts-with and an ends-with match). <b>AutoFocusSearchBox</b> puts the caret in the search
+        input as soon as the callout opens, so typing filters right away. The search term is discarded whenever the
+        callout closes, so the next opening always starts from the full list.
+    </div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Single select & auto focus"
@@ -234,11 +294,63 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Immediate search" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9" PreventRenderForMcpClient>
+<DemoExample Title="Search options" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9" PreventRenderForMcpClient>
+    <div>
+        Three parameters tune the default search without replacing it. <b>SearchMode</b> picks how the text of an item
+        is matched against the typed term &mdash; <b>Contains</b> (the default), <b>StartsWith</b>, <b>EndsWith</b> or
+        <b>Equals</b>, always ignoring case. <b>MinSearchLength</b> holds the filtering back until the term reaches the
+        given number of characters, which keeps a one-letter term from being treated as a real query (and, with an
+        <b>ItemsProvider</b>, from turning every first keystroke into a request). <b>HighlightSearch</b> emphasizes the
+        matched part of each item text so the reason an item is in the result is visible at a glance. Whenever a search
+        is active the number of results is also announced to screen readers, with a message you can localize through
+        the <b>SearchResultsText</b> parameter.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="SearchMode: StartsWith"
+                     ShowSearchBox
+                     AutoFocusSearchBox
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Type a first letter"
+                     SearchMode="BitDropdownSearchMode.StartsWith" />
+        <br /><br />
+        <BitDropdown Label="MinSearchLength: 3"
+                     ShowSearchBox
+                     AutoFocusSearchBox
+                     MinSearchLength="3"
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Type at least 3 characters" />
+        <br /><br />
+        <BitDropdown Label="HighlightSearch"
+                     ShowSearchBox
+                     AutoFocusSearchBox
+                     HighlightSearch
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search item" />
+        <br /><br />
+        <BitDropdown Label="Highlight in the ComboBox"
+                     Combo
+                     HighlightSearch
+                     Items="comboBoxItems"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Type to filter" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Immediate search" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10" PreventRenderForMcpClient>
     <div>
-        By default, the search and combo box inputs raise their search as you commit the input (on the change event).
-        Enabling <b>Immediate</b> makes the search happen as you type (on the input event). You can also rate-limit the
-        immediate search using <b>DebounceTime</b> or <b>ThrottleTime</b> (in milliseconds).
+        By default the search box raises its search when the input is committed (on the change event). Enabling
+        <b>Immediate</b> makes it search as you type (on the input event) instead. Because that can mean a request per
+        keystroke with a remote data source, the immediate search can be rate-limited: <b>DebounceTime</b> waits until
+        the typing pauses for the given number of milliseconds and then searches once, while <b>ThrottleTime</b> lets
+        at most one search through per interval while the typing continues. The <b>OnSearch</b> event reports every
+        search term that gets through.
     </div>
     <br /><br />
     <div class="example-content">
@@ -273,8 +385,13 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Validation" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10" PreventRenderForMcpClient>
-    <div>BitDropdown integrates with <b>EditForm</b> and data annotations validation: this example validates that a single select value is required and that the number of selected items in the multi select dropdown stays within a range.</div>
+<DemoExample Title="Validation" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11" PreventRenderForMcpClient>
+    <div>
+        BitDropdown is a regular form input: inside an <b>EditForm</b> it takes part in data annotations validation,
+        turns red and reports itself as invalid to assistive technologies when its field has an error, and renders a
+        <b>ValidationMessage</b> like any other input. This example requires a value in the single select dropdown and
+        keeps the number of selected items of the multi select one within a range.
+    </div>
     <br />
     <div class="example-content">
         @if (string.IsNullOrEmpty(successMessage))
@@ -311,8 +428,17 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Customization" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11" PreventRenderForMcpClient>
-    <div>Replace nearly every part of the dropdown with your own content using the <b>HeaderTemplate</b>, <b>TextTemplate</b>, <b>ItemTemplate</b>, <b>PlaceholderTemplate</b>, <b>LabelTemplate</b>, <b>CaretDownIconName</b>, <b>CaretDownTemplate</b>, <b>CalloutHeaderTemplate</b> and <b>CalloutFooterTemplate</b> parameters.</div>
+<DemoExample Title="Customization" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12" PreventRenderForMcpClient>
+    <div>
+        Nearly every part of the dropdown can be replaced with your own content. <b>ItemTemplate</b> and
+        <b>HeaderTemplate</b> render the normal items and the group headers of the callout, <b>TextTemplate</b> renders
+        the selected value shown on the closed dropdown and <b>PlaceholderTemplate</b> what is shown while nothing is
+        selected, <b>LabelTemplate</b> replaces the label, <b>CaretDownIconName</b> and <b>CaretDownTemplate</b> the
+        chevron, and <b>CalloutHeaderTemplate</b> and <b>CalloutFooterTemplate</b> add fixed content above and below the
+        scrollable item list &mdash; the footer being the usual home of an "add a new item" action. The templates that
+        render an item receive the item itself, so the extra state carried in its <b>Data</b> property is available to
+        them.
+    </div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Header template"
@@ -398,8 +524,17 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Binding" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12" PreventRenderForMcpClient>
-    <div>Different ways of binding to the selection and state: two-way binding over the <b>Value</b> and <b>Values</b> parameters, the <b>OnChange</b>, <b>OnValuesChange</b> and <b>OnSelectItem</b> events, the <b>Reselectable</b> parameter that raises the select events even when the already selected item is selected again and two-way binding of the callout's open state via <b>IsOpen</b>.</div>
+<DemoExample Title="Binding" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13" PreventRenderForMcpClient>
+    <div>
+        Every piece of the dropdown's state can be bound or observed. The selection is two-way bound over <b>Value</b>
+        in single select mode and <b>Values</b> in multi select mode, or left uncontrolled with <b>DefaultValue</b> and
+        <b>DefaultValues</b> and observed through the <b>OnChange</b> and <b>OnValuesChange</b> events;
+        <b>OnSelectItem</b> hands over the clicked item itself rather than its value. <b>Reselectable</b> makes the
+        select events fire even when the already selected item is picked again, which is otherwise treated as a no-op.
+        The open state of the callout is two-way bound via <b>IsOpen</b>, so it can be opened and closed from code, and
+        the <b>OnOpen</b> and <b>OnClose</b> events report every change to it &mdash; a natural place to start fetching
+        the items on first open.
+    </div>
     <br /><br />
     <div class="example-content">
         <div><b>Two-way binding</b>:</div><br />
@@ -472,11 +607,27 @@
                      Items="GetBasicItems()"
                      DefaultValue="@string.Empty"
                      Placeholder="Select an item" />
+        <br /><br /><br /><br />
+        <div><b>OnOpen & OnClose</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     OnOpen="HandleOnCalloutOpen"
+                     OnClose="HandleOnCalloutClose" />
+        <br />
+        <div>The callout is @calloutState.</div>
     </div>
 </DemoExample>
 
-<DemoExample Title="ComboBox" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13" PreventRenderForMcpClient>
-    <div>The <b>Combo</b> parameter turns the dropdown into a ComboBox: an input renders in place of the selected text that filters the items as you type.</div>
+<DemoExample Title="ComboBox" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14" PreventRenderForMcpClient>
+    <div>
+        The <b>Combo</b> parameter turns the dropdown into a ComboBox: an editable input renders in place of the selected
+        text and filters the items as you type, so the trigger doubles as the search box. <b>Enter</b> selects the item
+        whose text matches what was typed, <b>Backspace</b> on an empty input removes the last selected item, the arrow
+        keys open the callout, and a term that was typed but never turned into a selection is discarded when the callout
+        closes, so the input goes back to showing the current selection.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample1"
@@ -500,8 +651,12 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Chips" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14" PreventRenderForMcpClient>
-    <div>When the <b>Chips</b> parameter is true, the selected items render as chips, each with a remove button, in both single and multi select ComboBox modes.</div>
+<DemoExample Title="Chips" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15" PreventRenderForMcpClient>
+    <div>
+        When the <b>Chips</b> parameter is true, the selected items render as chips inside the dropdown instead of one
+        joined text, each with its own remove button that is reachable with the keyboard and announced with the text of
+        the item it removes. It works in both single and multi select modes and pairs naturally with the ComboBox mode.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample2"
@@ -525,8 +680,74 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Dynamic ComboBox" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
-    <div>When the <b>Dynamic</b> parameter is true, a text typed into the ComboBox that matches no existing item can be added as a new item; <b>DynamicValueGenerator</b> generates the value of the new item and <b>OnDynamicAdd</b> notifies about the addition.</div>
+<DemoExample Title="Selection display" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16" PreventRenderForMcpClient>
+    <div>
+        A multi select dropdown that lists every selected item quickly runs out of room. <b>MaxDisplayedItems</b> caps
+        how many of them the closed dropdown shows: with <b>Chips</b> the extra ones collapse into an overflow chip
+        whose text comes from <b>OverflowTextFormat</b> (<b>"+{0}"</b> by default), and without chips the joined list
+        is replaced by the summary of <b>SelectedItemsTextFormat</b> (<b>"{0} items selected"</b> by default) as soon
+        as the limit is passed. Nothing is removed from the selection &mdash; only the way it is displayed changes.
+        <br /><br />
+        <b>AutoClearSearch</b> covers the other half of a multi select session: the callout stays open after a pick, so
+        by default the next item has to be found through the filter left over from the previous one. Enabling it clears
+        the search text after every selection instead.
+        <b>HideSelectedItems</b> goes one step further and drops the picked items out of the callout altogether, which
+        makes sense when the chips already show what is selected and the list is only about what is left to choose.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="MaxDisplayedItems (chips)"
+                     Chips
+                     MultiSelect
+                     MaxDisplayedItems="2"
+                     Items="GetBasicItems()"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban", "f-gra", "v-car" })" />
+        <br /><br />
+        <BitDropdown Label="OverflowTextFormat"
+                     Chips
+                     MultiSelect
+                     MaxDisplayedItems="2"
+                     OverflowTextFormat="and {0} more"
+                     Items="GetBasicItems()"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban", "f-gra", "v-car" })" />
+        <br /><br />
+        <BitDropdown Label="SelectedItemsTextFormat"
+                     MultiSelect
+                     MaxDisplayedItems="2"
+                     SelectedItemsTextFormat="{0} fruits and vegetables"
+                     Items="GetBasicItems()"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban", "f-gra", "v-car" })" />
+        <br /><br />
+        <BitDropdown Label="AutoClearSearch"
+                     Combo Chips
+                     MultiSelect
+                     AutoClearSearch
+                     Items="comboBoxItems"
+                     DefaultValues="@(Array.Empty<string>())"
+                     Placeholder="Type to filter, then pick" />
+        <br /><br />
+        <BitDropdown Label="HideSelectedItems"
+                     Chips
+                     MultiSelect
+                     HideSelectedItems
+                     Items="GetBasicItems()"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban" })" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Dynamic ComboBox" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17">
+    <div>
+        When the <b>Dynamic</b> parameter is true, a text typed into the ComboBox that matches no existing item can be
+        added as a new one, which is what makes free-form values (tags, e-mail recipients, ad-hoc categories) possible.
+        <b>DynamicValueGenerator</b> produces the value of the new item from its text and <b>OnDynamicAdd</b> notifies
+        about the addition so the item can be persisted into the source collection. Before creating anything the
+        component first looks for an existing match; <b>FindItemFunction</b> and <b>ExistsSelectedItemFunction</b>
+        replace the default case-insensitive text comparison used for those two lookups.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample3"
@@ -570,12 +791,16 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Keyboard navigation" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16" PreventRenderForMcpClient>
+<DemoExample Title="Keyboard navigation" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18" PreventRenderForMcpClient>
     <div>
-        The dropdown is fully operable with the keyboard: <b>Enter</b>, <b>Space</b> and the arrow keys open the callout,
-        <b>ArrowUp</b> and <b>ArrowDown</b> move the focus between the items, <b>Home</b> and <b>End</b> jump to the first and last item,
-        <b>PageUp</b> and <b>PageDown</b> jump ten items at a time, typing characters moves the focus to the next matching item,
-        <b>Enter</b> and <b>Space</b> select the focused item and <b>Escape</b> closes the callout.
+        The dropdown is fully operable with the keyboard, following the ARIA authoring practices for a combobox:
+        <b>Enter</b>, <b>Space</b> and the arrow keys open the callout and put the focus on the selected item (or the
+        first one), <b>ArrowUp</b> and <b>ArrowDown</b> move between the items, <b>Home</b> and <b>End</b> jump to the
+        first and the last one, <b>PageUp</b> and <b>PageDown</b> jump ten items at a time, <b>Enter</b> and <b>Space</b>
+        select the focused item, <b>Escape</b> and <b>Alt+ArrowUp</b> close the callout and return the focus to the
+        dropdown, and <b>Tab</b> closes it and moves on. Typing printable characters runs a typeahead: the accumulated characters jump to the
+        item starting with them, repeating one character cycles through the items starting with it, and the buffer
+        resets after a short pause. Disabled and hidden items are skipped throughout.
     </div>
     <br />
     <div class="example-content">
@@ -592,12 +817,14 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Select all" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17" PreventRenderForMcpClient>
+<DemoExample Title="Select all" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
     <div>
-        When the <b>ShowSelectAll</b> parameter is true, a select all item renders at the top of the callout of the
-        multi select dropdown that selects or clears all items at once and shows an indeterminate state when only
-        some items are selected. Disabled items are skipped, the <b>SelectAllText</b> parameter customizes its text
-        and combined with the search box, it only applies to the search result.
+        When the <b>ShowSelectAll</b> parameter is true, a select all item renders above the item list of a multi select
+        dropdown. It selects everything with one click and clears everything with the next, and its check box shows an
+        indeterminate state while only some of the items are selected, so it doubles as a summary of the current
+        selection. It only ever applies to what the user can actually see: disabled items are skipped, and while a
+        search is active it selects the search result rather than the whole list, leaving selections made outside the
+        result untouched. The <b>SelectAllText</b> parameter customizes its text.
     </div>
     <br />
     <div class="example-content">
@@ -622,10 +849,12 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Selection limit" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18" PreventRenderForMcpClient>
+<DemoExample Title="Selection limit" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20" PreventRenderForMcpClient>
     <div>
-        The <b>MaxSelectedItems</b> parameter limits the number of items that can be selected in the multi select
-        dropdown; once the limit is reached, the remaining items become disabled until an item gets unselected.
+        The <b>MaxSelectedItems</b> parameter limits how many items can be selected in the multi select dropdown. Once
+        the limit is reached the unselected items are disabled rather than silently refusing the click, so the boundary
+        is visible before it is hit, and they become available again as soon as an item is unselected. The select all
+        item honors the same limit and stops adding items once it is reached.
     </div>
     <br />
     <div class="example-content">
@@ -640,10 +869,14 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Empty state" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
+<DemoExample Title="Empty state" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21" PreventRenderForMcpClient>
     <div>
-        When there is no item to show in the callout (an empty list or a search without a result), the dropdown
-        renders a message that can be customized using the <b>EmptyText</b> and <b>EmptyTemplate</b> parameters.
+        When there is no item to show, the callout renders a message instead of an empty list. There are two distinct
+        cases and each gets its own text: <b>EmptyText</b> and <b>EmptyTemplate</b> cover a list that has nothing in it
+        ("No items found" by default), while <b>NoResultsText</b> and <b>NoResultsTemplate</b> cover a search that
+        matched nothing ("No results found" by default) &mdash; telling the user that their term found nothing is a
+        different message from telling them the list is empty. When the no-results pair is not set the empty pair is used
+        for both cases.
     </div>
     <br />
     <div class="example-content">
@@ -676,11 +909,89 @@
                      DefaultValue="@string.Empty"
                      Placeholder="Select an item"
                      SearchBoxPlaceholder="Search for anything" />
+        <br /><br />
+        <BitDropdown Label="NoResultsText"
+                     ShowSearchBox
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search for anything"
+                     NoResultsText="Nothing matched your search" />
+        <br /><br />
+        <BitDropdown Label="NoResultsTemplate"
+                     ShowSearchBox
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search for anything">
+            <NoResultsTemplate>
+                <div class="custom-drp custom-drp-empty">
+                    <BitIcon IconName="@BitIconName.SearchAndApps" />
+                    <div>No match. Try another term!</div>
+                </div>
+            </NoResultsTemplate>
+        </BitDropdown>
     </div>
 </DemoExample>
 
-<DemoExample Title="Virtualization" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20" PreventRenderForMcpClient>
-    <div>The <b>Virtualize</b> parameter renders only the visible items instead of the whole list, keeping the dropdown fast with thousands of items — either over a local <b>Items</b> collection or by loading pages on demand through an <b>ItemsProvider</b> (with <b>InitialSelectedItems</b> pre-selecting values that have not been loaded yet). The <b>VirtualizePlaceholder</b> template renders in place of the items that are still loading.</div>
+<DemoExample Title="Loading" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22" PreventRenderForMcpClient>
+    <div>
+        The <b>IsLoading</b> parameter reports that the items are still on their way: a spinner replaces the caret
+        down element and the callout shows a loading indicator in place of the item list, while the dropdown itself
+        stays enabled so the user can still open it and see what is happening. The message is customized with the
+        <b>LoadingText</b> parameter and the whole indicator with the <b>LoadingTemplate</b> parameter.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="IsLoading"
+                     IsLoading
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item" />
+        <br /><br />
+        <BitDropdown Label="LoadingText"
+                     IsLoading
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     LoadingText="Fetching the products..." />
+        <br /><br />
+        <BitDropdown Label="LoadingTemplate"
+                     IsLoading
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item">
+            <LoadingTemplate>
+                <div class="custom-drp custom-drp-empty">
+                    <BitIcon IconName="@BitIconName.Sync" />
+                    <div>Just a moment...</div>
+                </div>
+            </LoadingTemplate>
+        </BitDropdown>
+        <br /><br /><br /><br />
+        <div><b>A real fetch</b>: the items get loaded when the button is clicked.</div>
+        <br />
+        <BitButton OnClick="LoadDelayedItems" IsLoading="isLoadingItems">Load the items</BitButton>
+        <br /><br />
+        <BitDropdown Label="Products"
+                     IsLoading="isLoadingItems"
+                     Items="delayedItems"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Virtualization" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23" PreventRenderForMcpClient>
+    <div>
+        The <b>Virtualize</b> parameter renders only the items that are currently visible instead of the whole list,
+        which keeps the callout fast with thousands of items; <b>ItemSize</b> tells it how tall an item is and
+        <b>OverscanCount</b> how many extra items to keep rendered around the visible window. It works over a local
+        <b>Items</b> collection, or over an <b>ItemsProvider</b> that fetches one page at a time from a server (and
+        receives the current search term, so filtering happens remotely too). Because a value can be selected before
+        the page holding its item has ever been fetched, <b>InitialSelectedItems</b> supplies those items up front so
+        the dropdown can show their text right away. The <b>VirtualizePlaceholder</b> template fills the rows that are
+        still being fetched.
+    </div>
     <br /><br /><br />
     <div class="example-content">
         <div>With <b>Items</b>:</div><br />
@@ -693,6 +1004,8 @@
         <BitDropdown Label="Multi select"
                      Virtualize
                      MultiSelect
+                     ItemSize="35"
+                     OverscanCount="5"
                      Items="virtualizeItems2"
                      Placeholder="Select items"
                      DefaultValue="@string.Empty" />
@@ -739,8 +1052,13 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21" PreventRenderForMcpClient>
-    <div>The <b>Color</b> parameter paints the dropdown's accents (the focus border, the search icon and the check boxes of the multi select items) in one of the theme colors, <b>Primary</b> being the default.</div>
+<DemoExample Title="Color" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24" PreventRenderForMcpClient>
+    <div>
+        The <b>Color</b> parameter paints the accents of the dropdown &mdash; the focus border, the search box
+        underline and icon, the group headers and the check boxes of the multi select items &mdash; in one of the theme
+        colors, <b>Primary</b> being the default. It changes the accents only, not the surface of the control, so the
+        dropdown keeps fitting its surroundings.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Primary"
@@ -809,12 +1127,15 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22" PreventRenderForMcpClient>
+<DemoExample Title="External Icons" RazorCode="@example25RazorCode" CsharpCode="@example25CsharpCode" Id="example25" PreventRenderForMcpClient>
     <div>
-        Use icons from external libraries like FontAwesome and Bootstrap Icons with the <b>CaretDownIcon</b>, 
-        <b>ClearButtonIcon</b>, <b>ChipsRemoveIcon</b>, <b>SearchBoxIcon</b>, <b>SearchBoxClearIcon</b>,
-        <b>ResponsiveCloseIcon</b>, and <b>ItemCheckIcon</b> parameters on the dropdown and the <b>Icon</b> or <b>IconName</b> 
-        properties on <b>BitDropdownItem</b>.
+        Every icon of the dropdown can come from an external library instead of the built-in Fluent UI set. The
+        <b>CaretDownIcon</b>, <b>ClearButtonIcon</b>, <b>ChipsRemoveIcon</b>, <b>SearchBoxIcon</b>,
+        <b>SearchBoxClearIcon</b>, <b>ResponsiveCloseIcon</b> and <b>ItemCheckIcon</b> parameters take a
+        <b>BitIconInfo</b> &mdash; built with <b>BitIconInfo.Fa</b>, <b>BitIconInfo.Bi</b> or the generic
+        <b>BitIconInfo.Css</b> &mdash; and each takes precedence over its <b>...IconName</b> counterpart when both are
+        set. The items themselves follow the same rule through their <b>Icon</b> and <b>IconName</b> members. Remember
+        to reference the stylesheet of the icon library you use.
     </div>
     
     <br />
@@ -892,8 +1213,45 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23" PreventRenderForMcpClient>
-    <div>Style the dropdown at every level: inline <b>Style</b> and <b>Class</b> on the root element, per-item styles and classes on the items, and the <b>Styles</b> and <b>Classes</b> parameters that target each internal part of the component individually.</div>
+<DemoExample Title="Size" RazorCode="@example26RazorCode" CsharpCode="@example26CsharpCode" Id="example26" PreventRenderForMcpClient>
+    <div>
+        The <b>Size</b> parameter scales the whole component in one step, <b>Medium</b> being the default: the height
+        and the font size of the dropdown, of its search box and of the items in the callout all follow the chosen size.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="Small"
+                     ShowSearchBox
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Size="BitSize.Small"
+                     Placeholder="Select an item" />
+        <br /><br />
+        <BitDropdown Label="Medium"
+                     ShowSearchBox
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Size="BitSize.Medium"
+                     Placeholder="Select an item" />
+        <br /><br />
+        <BitDropdown Label="Large"
+                     ShowSearchBox
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Size="BitSize.Large"
+                     Placeholder="Select an item" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Style & Class" RazorCode="@example27RazorCode" CsharpCode="@example27CsharpCode" Id="example27" PreventRenderForMcpClient>
+    <div>
+        The dropdown can be styled at every level: <b>Style</b> and <b>Class</b> apply to the root element, each item
+        carries its own style and class, and the <b>Styles</b> and <b>Classes</b> parameters reach every internal part
+        of the component individually &mdash; the label, the container, the callout, the search box, the scroll
+        container, the items and everything else listed in the class-styles reference below. Because the callout is
+        rendered outside the root element, styling it through <b>Styles.Callout</b> or <b>Classes.Callout</b> is the way
+        to reach it rather than a descendant selector on the root.
+    </div>
     <br /><br />
     <div class="example-content">
         <div>Component's Style & Class:</div><br />
@@ -934,8 +1292,13 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24" PreventRenderForMcpClient>
-    <div>Setting the <b>Dir</b> parameter to <b>Rtl</b> renders the dropdown right-to-left for languages like Arabic, Persian and Hebrew, in both the regular callout and the responsive panel.</div>
+<DemoExample Title="RTL" RazorCode="@example28RazorCode" CsharpCode="@example28CsharpCode" Id="example28" PreventRenderForMcpClient>
+    <div>
+        Setting the <b>Dir</b> parameter to <b>Rtl</b> renders the dropdown right-to-left for languages like Arabic,
+        Persian and Hebrew: the text, the label, the chevron, the check boxes and the search box all mirror, the
+        callout aligns to the right edge of the dropdown, and the responsive panel slides in from the left and is
+        swiped away in the opposite direction.
+    </div>
     <br />
     <dir dir="rtl" style="padding:0">
         <div class="example-content">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs
index 06cc149d2f..be2d1bd9b0 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs
@@ -142,6 +142,12 @@ private List<BitDropdownItem<string>> GetExternalIconBiItems() =>
 
     private string? clearValue = "f-app";
     private IEnumerable<string?> clearValues = ["f-app", "f-ban"];
+    private int clearCounter;
+
+    private string calloutState = "closed";
+
+    private bool isLoadingItems;
+    private ICollection<BitDropdownItem<string>> delayedItems = [];
 
     private string? immediateSearchValue;
     private string? debouncedSearchValue;
@@ -239,6 +245,21 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
         comboBoxItems.Add(item);
     }
 
+    private void HandleOnCalloutOpen() => calloutState = "opened";
+
+    private void HandleOnCalloutClose() => calloutState = "closed";
+
+    private async Task LoadDelayedItems()
+    {
+        isLoadingItems = true;
+        delayedItems = [];
+
+        await Task.Delay(2000);
+
+        delayedItems = GetBasicItems();
+        isLoadingItems = false;
+    }
+
     private async ValueTask<BitDropdownItemsProviderResult<BitDropdownItem<string>>> LoadItems(
         BitDropdownItemsProviderRequest<BitDropdownItem<string>> request)
     {
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
index 763b8b6314..9c4d1fa71e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
@@ -42,7 +42,13 @@ public partial class _BitDropdownItemDemo
              MultiSelectDelimiter="" - ""
              Items=""GetBasicItems()""
              DefaultValues=""@(new[] { ""f-app"", ""f-ban"" })""
-             Placeholder=""Select items"" />";
+             Placeholder=""Select items"" />
+
+<BitDropdown Label=""Title""
+             Title=""Pick your favorite fruit or vegetable""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Hover me"" />";
     private readonly string example1CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
@@ -235,8 +241,17 @@ protected override void OnInitialized()
              Items=""GetBasicItems()""
              Placeholder=""Select options""
              Label=""Multi select dropdown"" />
-<div>Values: @string.Join(',', clearValues)</div>";
+<div>Values: @string.Join(',', clearValues)</div>
+
+<BitDropdown ShowClearButton
+             Items=""GetBasicItems()""
+             Label=""Single select dropdown""
+             DefaultValue=""@(""f-app"")""
+             Placeholder=""Select an option""
+             OnClear=""() => clearCounter++"" />
+<div>OnClear count: @clearCounter</div>";
     private readonly string example7CsharpCode = @"
+private int clearCounter;
 private string? clearValue = ""f-app"";
 private ICollection<string?> clearValues = new[] { ""f-app"", ""f-ban"" };
 
@@ -309,6 +324,69 @@ protected override void OnInitialized()
 };";
 
     private readonly string example9RazorCode = @"
+<BitDropdown Label=""SearchMode: StartsWith""
+             ShowSearchBox
+             AutoFocusSearchBox
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Type a first letter""
+             SearchMode=""BitDropdownSearchMode.StartsWith"" />
+
+<BitDropdown Label=""MinSearchLength: 3""
+             ShowSearchBox
+             AutoFocusSearchBox
+             MinSearchLength=""3""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Type at least 3 characters"" />
+
+<BitDropdown Label=""HighlightSearch""
+             ShowSearchBox
+             AutoFocusSearchBox
+             HighlightSearch
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search item"" />
+
+<BitDropdown Label=""Highlight in the ComboBox""
+             Combo
+             HighlightSearch
+             Items=""comboBoxItems""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Type to filter"" />";
+    private readonly string example9CsharpCode = @"
+private List<BitDropdownItem<string>> comboBoxItems = new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private List<BitDropdownItem<string>> GetBasicItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
+
+    private readonly string example10RazorCode = @"
 <BitDropdown Label=""Immediate""
              ShowSearchBox
              Immediate
@@ -337,7 +415,7 @@ protected override void OnInitialized()
              Items=""comboBoxItems""
              DefaultValue=""@string.Empty""
              Placeholder=""Select an item"" />";
-    private readonly string example9CsharpCode = @"
+    private readonly string example10CsharpCode = @"
 private string? immediateSearchValue;
 private string? debouncedSearchValue;
 
@@ -369,7 +447,7 @@ protected override void OnInitialized()
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example11RazorCode = @"
 @using System.ComponentModel.DataAnnotations;
 
 <style>
@@ -397,7 +475,7 @@ protected override void OnInitialized()
 
     <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
 </EditForm>";
-    private readonly string example10CsharpCode = @"
+    private readonly string example11CsharpCode = @"
 public class FormValidationDropdownModel
 {
     [MaxLength(2, ErrorMessage = ""The property {0} have more than {1} elements"")]
@@ -428,7 +506,7 @@ private void HandleInvalidSubmit() { }
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example11RazorCode = @"
+    private readonly string example12RazorCode = @"
 <style>
     .custom-drp {
         gap: 10px;
@@ -543,7 +621,7 @@ private void HandleInvalidSubmit() { }
         <BitActionButton IconName=""@BitIconName.Add"">New Item</BitActionButton>
     </CalloutFooterTemplate>
 </BitDropdown>";
-    private readonly string example11CsharpCode = @"
+    private readonly string example12CsharpCode = @"
 public class DropdownItemData
 {
     public string? IconName { get; set; }
@@ -562,7 +640,7 @@ public class DropdownItemData
     new() { Text = ""Item f"", Value = ""F"", Data = new DropdownItemData { IconName = ""Running"" } }
 };";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example13RazorCode = @"
 <BitDropdown @bind-Value=""controlledValue""
              Label=""Single select""
              Items=""GetBasicItems()""
@@ -623,10 +701,23 @@ public class DropdownItemData
              Label=""Single select""
              Items=""GetBasicItems()""
              DefaultValue=""@string.Empty""
-             Placeholder=""Select an item"" />";
-    private readonly string example12CsharpCode = @"
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Single select""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             OnOpen=""HandleOnCalloutOpen""
+             OnClose=""HandleOnCalloutClose"" />
+<div>The callout is @calloutState.</div>";
+    private readonly string example13CsharpCode = @"
 private bool isDropdownOpen;
 private int selectItemCounter;
+private string calloutState = ""closed"";
+
+private void HandleOnCalloutOpen() => calloutState = ""opened"";
+
+private void HandleOnCalloutClose() => calloutState = ""closed"";
 
 private string controlledValue = ""f-app"";
 private IEnumerable<string> controlledValues = [""f-app"", ""f-ban""];
@@ -651,7 +742,7 @@ public class DropdownItemData
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example14RazorCode = @"
 <BitDropdown @bind-Value=""comboBoxValueSample1""
              Combo
              Responsive
@@ -668,7 +759,7 @@ public class DropdownItemData
              Label=""Multi select combo box""
              Placeholder=""Select an option"" />
 <div>Values: @string.Join(',', comboBoxValues1)</div>";
-    private readonly string example13CsharpCode = @"
+    private readonly string example14CsharpCode = @"
 private string comboBoxValueSample1 = default!;
 private ICollection<string?> comboBoxValues1 = [];
 
@@ -686,7 +777,7 @@ public class DropdownItemData
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example14RazorCode = @"
+    private readonly string example15RazorCode = @"
 <BitDropdown @bind-Value=""comboBoxValueSample2""
              Combo Chips
              Responsive
@@ -703,7 +794,7 @@ Combo Chips
              Placeholder=""Select an option""
              Label=""Multi select combo box & chips"" />
 <div>Values: @string.Join(',', comboBoxValues2)</div>";
-    private readonly string example14CsharpCode = @"
+    private readonly string example15CsharpCode = @"
 private string comboBoxValueSample2 = default!;
 private ICollection<string?> comboBoxValues2 = [];
 
@@ -721,7 +812,63 @@ Combo Chips
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example15RazorCode = @"
+    private readonly string example16RazorCode = @"
+<BitDropdown Label=""MaxDisplayedItems (chips)""
+             Chips
+             MultiSelect
+             MaxDisplayedItems=""2""
+             Items=""GetBasicItems()""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"", ""f-gra"", ""v-car"" })"" />
+
+<BitDropdown Label=""OverflowTextFormat""
+             Chips
+             MultiSelect
+             MaxDisplayedItems=""2""
+             OverflowTextFormat=""and {0} more""
+             Items=""GetBasicItems()""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"", ""f-gra"", ""v-car"" })"" />
+
+<BitDropdown Label=""SelectedItemsTextFormat""
+             MultiSelect
+             MaxDisplayedItems=""2""
+             SelectedItemsTextFormat=""{0} fruits and vegetables""
+             Items=""GetBasicItems()""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"", ""f-gra"", ""v-car"" })"" />
+
+<BitDropdown Label=""AutoClearSearch""
+             Combo Chips
+             MultiSelect
+             AutoClearSearch
+             Items=""comboBoxItems""
+             DefaultValues=""@(Array.Empty<string>())""
+             Placeholder=""Type to filter, then pick"" />
+
+<BitDropdown Label=""HideSelectedItems""
+             Chips
+             MultiSelect
+             HideSelectedItems
+             Items=""GetBasicItems()""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"" })"" />";
+    private readonly string example16CsharpCode = @"
+private List<BitDropdownItem<string>> GetBasicItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
+
+    private readonly string example17RazorCode = @"
 <BitDropdown @bind-Value=""comboBoxValueSample3""
              Combo Dynamic
              Responsive
@@ -752,7 +899,7 @@ Combo Chips Dynamic
              DynamicValueGenerator=""(BitDropdownItem<string> item) => item.Text""
              OnDynamicAdd=""(BitDropdownItem<string> item) => HandleOnDynamicAdd(item)"" />
 <div>Values: @string.Join(',', comboBoxValues3)</div>";
-    private readonly string example15CsharpCode = @"
+    private readonly string example17CsharpCode = @"
 private string comboBoxValueSample3 = default!;
 private string comboBoxValueSample4 = default!;
 private ICollection<string?> comboBoxValues3 = [];
@@ -776,7 +923,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example16RazorCode = @"
+    private readonly string example18RazorCode = @"
 <BitDropdown Label=""Single select""
              Items=""GetBasicItems()""
              DefaultValue=""@string.Empty""
@@ -787,7 +934,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
              Items=""GetBasicItems()""
              Placeholder=""Select items""
              DefaultValue=""@string.Empty"" />";
-    private readonly string example16CsharpCode = @"
+    private readonly string example18CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -802,7 +949,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example17RazorCode = @"
+    private readonly string example19RazorCode = @"
 <BitDropdown @bind-Values=""selectAllValues""
              MultiSelect
              ShowSelectAll
@@ -820,7 +967,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
              DefaultValue=""@string.Empty""
              SearchBoxPlaceholder=""Search items""
              Label=""Custom text & search"" />";
-    private readonly string example17CsharpCode = @"
+    private readonly string example19CsharpCode = @"
 private IEnumerable<string?> selectAllValues = [];
 
 private List<BitDropdownItem<string>> GetBasicItems() => new()
@@ -837,7 +984,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example18RazorCode = @"
+    private readonly string example20RazorCode = @"
 <BitDropdown @bind-Values=""maxSelectedValues""
              MultiSelect
              MaxSelectedItems=""2""
@@ -845,7 +992,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
              Placeholder=""Select up to 2 items""
              Label=""Max 2 items"" />
 <div>Values: @string.Join(',', maxSelectedValues)</div>";
-    private readonly string example18CsharpCode = @"
+    private readonly string example20CsharpCode = @"
 private IEnumerable<string?> maxSelectedValues = [];
 
 private List<BitDropdownItem<string>> GetBasicItems() => new()
@@ -862,7 +1009,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example19RazorCode = @"
+    private readonly string example21RazorCode = @"
 <BitDropdown Label=""Default""
              Items=""emptyItems""
              Placeholder=""Select an item""
@@ -891,8 +1038,30 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
              Items=""GetBasicItems()""
              DefaultValue=""@string.Empty""
              Placeholder=""Select an item""
-             SearchBoxPlaceholder=""Search for anything"" />";
-    private readonly string example19CsharpCode = @"
+             SearchBoxPlaceholder=""Search for anything"" />
+
+<BitDropdown Label=""NoResultsText""
+             ShowSearchBox
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search for anything""
+             NoResultsText=""Nothing matched your search"" />
+
+<BitDropdown Label=""NoResultsTemplate""
+             ShowSearchBox
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search for anything"">
+    <NoResultsTemplate>
+        <div class=""custom-drp custom-drp-empty"">
+            <BitIcon IconName=""@BitIconName.SearchAndApps"" />
+            <div>No match. Try another term!</div>
+        </div>
+    </NoResultsTemplate>
+</BitDropdown>";
+    private readonly string example21CsharpCode = @"
 private readonly List<BitDropdownItem<string>> emptyItems = [];
 
 private List<BitDropdownItem<string>> GetBasicItems() => new()
@@ -909,7 +1078,69 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example20RazorCode = @"
+    private readonly string example22RazorCode = @"
+<BitDropdown Label=""IsLoading""
+             IsLoading
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""LoadingText""
+             IsLoading
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             LoadingText=""Fetching the products..."" />
+
+<BitDropdown Label=""LoadingTemplate""
+             IsLoading
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"">
+    <LoadingTemplate>
+        <div class=""custom-drp custom-drp-empty"">
+            <BitIcon IconName=""@BitIconName.Sync"" />
+            <div>Just a moment...</div>
+        </div>
+    </LoadingTemplate>
+</BitDropdown>
+
+<BitButton OnClick=""LoadDelayedItems"" IsLoading=""isLoadingItems"">Load the items</BitButton>
+<BitDropdown Label=""Products""
+             IsLoading=""isLoadingItems""
+             Items=""delayedItems""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"" />";
+    private readonly string example22CsharpCode = @"
+private bool isLoadingItems;
+private ICollection<BitDropdownItem<string>> delayedItems = [];
+
+private async Task LoadDelayedItems()
+{
+    isLoadingItems = true;
+    delayedItems = [];
+
+    await Task.Delay(2000);
+
+    delayedItems = GetBasicItems();
+    isLoadingItems = false;
+}
+
+private List<BitDropdownItem<string>> GetBasicItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
+
+    private readonly string example23RazorCode = @"
 <BitDropdown Label=""Single select""
              Virtualize
              Items=""virtualizeItems1""
@@ -919,6 +1150,8 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
 <BitDropdown Label=""Multi select""
              Virtualize
              MultiSelect
+             ItemSize=""35""
+             OverscanCount=""5""
              Items=""virtualizeItems2""
              Placeholder=""Select items""
              DefaultValue=""@string.Empty"" />
@@ -961,7 +1194,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
              Placeholder=""Select items""
              InitialSelectedItems=""initialSelectedItems""
              TItem=""BitDropdownItem<string>"" TValue=""string"" />";
-    private readonly string example20CsharpCode = @"
+    private readonly string example23CsharpCode = @"
 private ICollection<BitDropdownItem<string>>? virtualizeItems1;
 private ICollection<BitDropdownItem<string>>? virtualizeItems2;
 
@@ -1061,7 +1294,7 @@ private async ValueTask<BitDropdownItemsProviderResult<BitDropdownItem<string>>>
     }
 }";
 
-    private readonly string example21RazorCode = @"
+    private readonly string example24RazorCode = @"
 <BitDropdown Label=""Primary""
              MultiSelect
              ShowSearchBox
@@ -1125,7 +1358,7 @@ private async ValueTask<BitDropdownItemsProviderResult<BitDropdownItem<string>>>
              Items=""GetBasicItems()""
              Color=""BitColor.Error""
              Placeholder=""Select items"" />";
-    private readonly string example21CsharpCode = @"
+    private readonly string example24CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1140,7 +1373,7 @@ private async ValueTask<BitDropdownItemsProviderResult<BitDropdownItem<string>>>
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example22RazorCode = @"
+    private readonly string example25RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 <link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
 
@@ -1194,7 +1427,7 @@ private async ValueTask<BitDropdownItemsProviderResult<BitDropdownItem<string>>>
              Items=""GetExternalIconBiItems()""
              DefaultValue=""@string.Empty""
              Placeholder=""Select an item"" />";
-    private readonly string example22CsharpCode = @"
+    private readonly string example25CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1251,7 +1484,43 @@ private async ValueTask<BitDropdownItemsProviderResult<BitDropdownItem<string>>>
     new() { Text = ""Lettuce"", Value = ""v-let"", Icon = BitIconInfo.Bi(""flower2"") }
 };";
 
-    private readonly string example23RazorCode = @"
+    private readonly string example26RazorCode = @"
+<BitDropdown Label=""Small""
+             ShowSearchBox
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Size=""BitSize.Small""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Medium""
+             ShowSearchBox
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Size=""BitSize.Medium""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Large""
+             ShowSearchBox
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Size=""BitSize.Large""
+             Placeholder=""Select an item"" />";
+    private readonly string example26CsharpCode = @"
+private List<BitDropdownItem<string>> GetBasicItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
+
+    private readonly string example27RazorCode = @"
 <style>
     .custom-class {
         margin-inline: 1rem;
@@ -1329,7 +1598,7 @@ private async ValueTask<BitDropdownItemsProviderResult<BitDropdownItem<string>>>
                                 Container = ""custom-container"",
                                 ItemButton = ""custom-item-button"",
                                 ScrollContainer = ""custom-scroll-container"" })"" />";
-    private readonly string example23CsharpCode = @"
+    private readonly string example27CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1358,7 +1627,7 @@ private async ValueTask<BitDropdownItemsProviderResult<BitDropdownItem<string>>>
     new() { Text = ""Lettuce"", Value = ""v-let"", Class = ""custom-veg"" }
 };";
 
-    private readonly string example24RazorCode = @"
+    private readonly string example28RazorCode = @"
 <BitDropdown Label=""تک انتخابی""
              Items=""GetRtlItems()""
              DefaultValue=""@string.Empty""
@@ -1378,7 +1647,7 @@ private async ValueTask<BitDropdownItemsProviderResult<BitDropdownItem<string>>>
              Items=""GetRtlItems()""
              DefaultValue=""@string.Empty""
              Placeholder=""لطفا انتخاب کنید"" />";
-    private readonly string example24CsharpCode = @"
+    private readonly string example28CsharpCode = @"
 private List<BitDropdownItem<string>> GetRtlItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""میوه ها"" },
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
index 3481e852af..42b622c9f0 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
@@ -1,5 +1,13 @@
 <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
-    <div>BitDropdown in its simplest forms: single and multi select dropdowns, a required one, one preserving its original callout width, the disabled and read-only states and a custom delimiter for joining the selected values in multi select mode.</div>
+    <div>
+        BitDropdown in its simplest forms: single and multi select dropdowns, a required one (which marks its label and
+        reports itself as required to assistive technologies), one preserving its original callout width instead of
+        matching the width of the dropdown, and a custom delimiter for joining the selected values in multi select mode.
+        A <b>disabled</b> dropdown cannot be focused or opened at all, while a <b>read-only</b> one stays focusable and
+        its callout can still be browsed &mdash; only changing the selection is blocked, and every control that would
+        change it (the clear button, the chip remove buttons) is hidden accordingly.
+        The <b>Title</b> parameter adds the tooltip shown while the pointer rests on the dropdown.
+    </div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Single select"
@@ -79,11 +87,27 @@
                 <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
             }
         </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="Title"
+                     Title="Pick your favorite fruit or vegetable"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Hover me"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
     </div>
 </DemoExample>
 
 <DemoExample Title="Prefix & Suffix" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2" PreventRenderForMcpClient>
-    <div>Display custom text before and after the selected value using the <b>Prefix</b> and <b>Suffix</b> parameters, separately or combined, or replace them entirely using the <b>PrefixTemplate</b> and <b>SuffixTemplate</b> parameters. They are visual only and are not part of the value.</div>
+    <div>
+        The <b>Prefix</b> and <b>Suffix</b> parameters put fixed text before and after the selected value &mdash; a
+        unit, a currency, a category &mdash; and <b>PrefixTemplate</b> and <b>SuffixTemplate</b> replace them with any
+        content, an icon for instance. They are decoration only: they are not part of the value and are not read out
+        with it, so keep a descriptive <b>Label</b> for screen reader users.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Prefix"
@@ -154,7 +178,11 @@
 </DemoExample>
 
 <DemoExample Title="FitWidth" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3" PreventRenderForMcpClient>
-    <div>The <b>FitWidth</b> parameter makes the dropdown's width fit its content instead of stretching to the full width of its container.</div>
+    <div>
+        The <b>FitWidth</b> parameter makes the dropdown only as wide as its content instead of stretching to the full
+        width of its container, which suits toolbars and inline filters where a full-width control would look out of
+        place. The callout still matches the width of the dropdown unless <b>PreserveCalloutWidth</b> is set.
+    </div>
     <br /><br />
     <BitDropdown Label="Single select" FitWidth
                  Placeholder="Select an item"
@@ -178,7 +206,11 @@
 </DemoExample>
 
 <DemoExample Title="NoBorder & Transparent" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4" PreventRenderForMcpClient>
-    <div>The <b>NoBorder</b> parameter removes the border of the dropdown and the <b>Transparent</b> parameter removes its background, for a minimal look on busy or colorful surfaces.</div>
+    <div>
+        The <b>NoBorder</b> parameter removes the border of the dropdown and <b>Transparent</b> removes its background,
+        so the control can sit on a colored or image surface without cutting a box out of it. They are independent and
+        combine freely; the callout keeps its own surface either way, so the items stay readable.
+    </div>
     <br /><br />
     <div style="max-width:10rem">
         <BitDropdown NoBorder
@@ -214,7 +246,12 @@
 </DemoExample>
 
 <DemoExample Title="Responsive" RazorCode="@example5RazorCode" Id="example5" PreventRenderForMcpClient>
-    <div>When the <b>Responsive</b> parameter is true, the callout turns into a swipeable side panel on small screens, making long item lists easier to use on mobile devices.</div>
+    <div>
+        When the <b>Responsive</b> parameter is true, the callout turns into a side panel on small screens instead of a
+        floating list, making long item lists easier to use on mobile devices. The panel carries the label of the
+        dropdown and a close button, and it can also be dismissed by swiping it away. Resize the window below the small
+        breakpoint to see it.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Responsive Dropdown"
@@ -236,7 +273,13 @@
 </DemoExample>
 
 <DemoExample Title="Drop direction" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6" PreventRenderForMcpClient>
-    <div>The <b>DropDirection</b> parameter determines which directions the callout is allowed to open in: <b>All</b> picks the best fitting direction automatically, while <b>TopAndBottom</b> (the default) restricts it to opening above or below the dropdown.</div>
+    <div>
+        The <b>DropDirection</b> parameter determines which directions the callout is allowed to open in. <b>All</b>
+        picks whichever side fits best in the viewport, while <b>TopAndBottom</b> (the default) restricts it to opening
+        above or below the dropdown. In both cases the callout flips to the opposite side when there is not enough room,
+        and its item list is capped to the space that is actually available, so it never runs past the edge of the
+        screen. Scroll the page so that these dropdowns sit near the top or the bottom of the viewport to see it.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="All"
@@ -262,7 +305,12 @@
 </DemoExample>
 
 <DemoExample Title="Clear button" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7" PreventRenderForMcpClient>
-    <div>The <b>ShowClearButton</b> parameter adds a button that clears the current selection whenever the dropdown has a value, in both single and multi select modes.</div>
+    <div>
+        The <b>ShowClearButton</b> parameter adds a button that clears the current selection whenever the dropdown has
+        a value, in both single and multi select modes. Clearing raises the usual value change events, plus the
+        dedicated <b>OnClear</b> callback. The button is hidden while the dropdown is read-only or disabled, so it
+        never offers an action that would be ignored.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="clearValue"
@@ -292,11 +340,33 @@
         </BitDropdown>
         <br />
         <div>Values: @string.Join(',', clearValues)</div>
+        <br /><br /><br /><br />
+        <div><b>OnClear</b>:</div><br />
+        <BitDropdown ShowClearButton
+                     DefaultValue="@("f-app")"
+                     Label="Single select dropdown"
+                     Placeholder="Select an option"
+                     OnClear="() => clearCounter++"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br />
+        <div>OnClear count: @clearCounter</div>
     </div>
 </DemoExample>
 
 <DemoExample Title="SearchBox" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8" PreventRenderForMcpClient>
-    <div>The <b>ShowSearchBox</b> parameter adds a search input to the callout to filter the items, <b>AutoFocusSearchBox</b> focuses it as soon as the callout opens and <b>SearchFunction</b> replaces the default contains algorithm with a custom one.</div>
+    <div>
+        The <b>ShowSearchBox</b> parameter adds a search input at the top of the callout to filter the items, and
+        <b>SearchBoxPlaceholder</b> sets its placeholder. By default an item matches when its text contains the typed
+        term, ignoring case; <b>SearchFunction</b> replaces that algorithm with any predicate of your own (the examples
+        below switch it to a starts-with and an ends-with match). <b>AutoFocusSearchBox</b> puts the caret in the search
+        input as soon as the callout opens, so typing filters right away. The search term is discarded whenever the
+        callout closes, so the next opening always starts from the full list.
+    </div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Single select & auto focus"
@@ -356,11 +426,83 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Immediate search" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9" PreventRenderForMcpClient>
+<DemoExample Title="Search options" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9" PreventRenderForMcpClient>
     <div>
-        By default, the search and combo box inputs raise their search as you commit the input (on the change event).
-        Enabling <b>Immediate</b> makes the search happen as you type (on the input event). You can also rate-limit the
-        immediate search using <b>DebounceTime</b> or <b>ThrottleTime</b> (in milliseconds).
+        Three parameters tune the default search without replacing it. <b>SearchMode</b> picks how the text of an item
+        is matched against the typed term &mdash; <b>Contains</b> (the default), <b>StartsWith</b>, <b>EndsWith</b> or
+        <b>Equals</b>, always ignoring case. <b>MinSearchLength</b> holds the filtering back until the term reaches the
+        given number of characters, which keeps a one-letter term from being treated as a real query (and, with an
+        <b>ItemsProvider</b>, from turning every first keystroke into a request). <b>HighlightSearch</b> emphasizes the
+        matched part of each item text so the reason an item is in the result is visible at a glance. Whenever a search
+        is active the number of results is also announced to screen readers, with a message you can localize through
+        the <b>SearchResultsText</b> parameter.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="SearchMode: StartsWith"
+                     ShowSearchBox
+                     AutoFocusSearchBox
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Type a first letter"
+                     SearchMode="BitDropdownSearchMode.StartsWith"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="MinSearchLength: 3"
+                     ShowSearchBox
+                     AutoFocusSearchBox
+                     MinSearchLength="3"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Type at least 3 characters"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="HighlightSearch"
+                     ShowSearchBox
+                     AutoFocusSearchBox
+                     HighlightSearch
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="Highlight in the ComboBox"
+                     Combo
+                     HighlightSearch
+                     DefaultValue="@string.Empty"
+                     Placeholder="Type to filter"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in comboBoxItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+    </div>
+</DemoExample>
+
+<DemoExample Title="Immediate search" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10" PreventRenderForMcpClient>
+    <div>
+        By default the search box raises its search when the input is committed (on the change event). Enabling
+        <b>Immediate</b> makes it search as you type (on the input event) instead. Because that can mean a request per
+        keystroke with a remote data source, the immediate search can be rate-limited: <b>DebounceTime</b> waits until
+        the typing pauses for the given number of milliseconds and then searches once, while <b>ThrottleTime</b> lets
+        at most one search through per interval while the typing continues. The <b>OnSearch</b> event reports every
+        search term that gets through.
     </div>
     <br /><br />
     <div class="example-content">
@@ -407,8 +549,13 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Validation" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10" PreventRenderForMcpClient>
-    <div>BitDropdown integrates with <b>EditForm</b> and data annotations validation: this example validates that a single select value is required and that the number of selected items in the multi select dropdown stays within a range.</div>
+<DemoExample Title="Validation" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11" PreventRenderForMcpClient>
+    <div>
+        BitDropdown is a regular form input: inside an <b>EditForm</b> it takes part in data annotations validation,
+        turns red and reports itself as invalid to assistive technologies when its field has an error, and renders a
+        <b>ValidationMessage</b> like any other input. This example requires a value in the single select dropdown and
+        keeps the number of selected items of the multi select one within a range.
+    </div>
     <br />
     <div class="example-content">
         @if (string.IsNullOrEmpty(successMessage))
@@ -455,8 +602,17 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Customization" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11" PreventRenderForMcpClient>
-    <div>Replace nearly every part of the dropdown with your own content using the <b>HeaderTemplate</b>, <b>TextTemplate</b>, <b>ItemTemplate</b>, <b>PlaceholderTemplate</b>, <b>LabelTemplate</b>, <b>CaretDownIconName</b>, <b>CaretDownTemplate</b>, <b>CalloutHeaderTemplate</b> and <b>CalloutFooterTemplate</b> parameters.</div>
+<DemoExample Title="Customization" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12" PreventRenderForMcpClient>
+    <div>
+        Nearly every part of the dropdown can be replaced with your own content. <b>ItemTemplate</b> and
+        <b>HeaderTemplate</b> render the normal items and the group headers of the callout, <b>TextTemplate</b> renders
+        the selected value shown on the closed dropdown and <b>PlaceholderTemplate</b> what is shown while nothing is
+        selected, <b>LabelTemplate</b> replaces the label, <b>CaretDownIconName</b> and <b>CaretDownTemplate</b> the
+        chevron, and <b>CalloutHeaderTemplate</b> and <b>CalloutFooterTemplate</b> add fixed content above and below the
+        scrollable item list &mdash; the footer being the usual home of an "add a new item" action. The templates that
+        render an item receive the item itself, so the extra state carried in its <b>Data</b> property is available to
+        them.
+    </div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Header template"
@@ -576,11 +732,20 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Binding" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12" PreventRenderForMcpClient>
-    <div>Different ways of binding to the selection and state: two-way binding over the <b>Value</b> and <b>Values</b> parameters, the <b>OnChange</b>, <b>OnValuesChange</b> and <b>OnSelectItem</b> events, the <b>Reselectable</b> parameter that raises the select events even when the already selected item is selected again and two-way binding of the callout's open state via <b>IsOpen</b>.</div>
+<DemoExample Title="Binding" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13" PreventRenderForMcpClient>
+    <div>
+        Every piece of the dropdown's state can be bound or observed. The selection is two-way bound over <b>Value</b>
+        in single select mode and <b>Values</b> in multi select mode, or left uncontrolled with <b>DefaultValue</b> and
+        <b>DefaultValues</b> and observed through the <b>OnChange</b> and <b>OnValuesChange</b> events;
+        <b>OnSelectItem</b> hands over the clicked item itself rather than its value. <b>Reselectable</b> makes the
+        select events fire even when the already selected item is picked again, which is otherwise treated as a no-op.
+        The open state of the callout is two-way bound via <b>IsOpen</b>, so it can be opened and closed from code, and
+        the <b>OnOpen</b> and <b>OnClose</b> events report every change to it &mdash; a natural place to start fetching
+        the items on first open.
+    </div>
     <br /><br />
     <div class="example-content">
-        <div>Two-way binding:</div><br />
+        <div><b>Two-way binding</b>:</div><br />
         <BitDropdown @bind-Value="controlledValue"
                      Label="Single select"
                      Placeholder="Select an item"
@@ -612,7 +777,7 @@
         <br />
         <div>Selected Values: @string.Join(",", controlledValues)</div>
         <br /><br /><br /><br />
-        <div>OnChange:</div><br />
+        <div><b>OnChange</b>:</div><br />
         <BitDropdown Label="Single select"
                      Placeholder="Select an item"
                      TItem="BitDropdownOption<string>" TValue="string"
@@ -638,7 +803,7 @@
         <br />
         <div>Changed Values: @string.Join(",", changedValues)</div>
         <br /><br /><br /><br />
-        <div>OnSelectItem:</div><br />
+        <div><b>OnSelectItem</b>:</div><br />
         <BitDropdown Label="Single select"
                      DefaultValue="@string.Empty"
                      Placeholder="Select an item"
@@ -666,7 +831,7 @@
         <br />
         <div>Selected Value: @selectedItem2?.Value</div>
         <br /><br /><br /><br />
-        <div>Reselectable:</div><br />
+        <div><b>Reselectable</b>:</div><br />
         <BitDropdown Label="Single select"
                      Reselectable
                      DefaultValue="@string.Empty"
@@ -681,7 +846,7 @@
         <br />
         <div>OnSelectItem count: @selectItemCounter</div>
         <br /><br /><br /><br />
-        <div>IsOpen:</div><br />
+        <div><b>IsOpen</b>:</div><br />
         <BitButton OnClick="() => isDropdownOpen = true">Open the dropdown</BitButton>
         <br /><br />
         <BitDropdown @bind-IsOpen="isDropdownOpen"
@@ -694,11 +859,32 @@
                 <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
             }
         </BitDropdown>
+        <br /><br /><br /><br />
+        <div><b>OnOpen & OnClose</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     OnOpen="HandleOnCalloutOpen"
+                     OnClose="HandleOnCalloutClose"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br />
+        <div>The callout is @calloutState.</div>
     </div>
 </DemoExample>
 
-<DemoExample Title="ComboBox" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13" PreventRenderForMcpClient>
-    <div>The <b>Combo</b> parameter turns the dropdown into a ComboBox: an input renders in place of the selected text that filters the items as you type.</div>
+<DemoExample Title="ComboBox" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14" PreventRenderForMcpClient>
+    <div>
+        The <b>Combo</b> parameter turns the dropdown into a ComboBox: an editable input renders in place of the selected
+        text and filters the items as you type, so the trigger doubles as the search box. <b>Enter</b> selects the item
+        whose text matches what was typed, <b>Backspace</b> on an empty input removes the last selected item, the arrow
+        keys open the callout, and a term that was typed but never turned into a selection is discarded when the callout
+        closes, so the input goes back to showing the current selection.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample1"
@@ -730,8 +916,12 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Chips" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14" PreventRenderForMcpClient>
-    <div>When the <b>Chips</b> parameter is true, the selected items render as chips, each with a remove button, in both single and multi select ComboBox modes.</div>
+<DemoExample Title="Chips" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15" PreventRenderForMcpClient>
+    <div>
+        When the <b>Chips</b> parameter is true, the selected items render as chips inside the dropdown instead of one
+        joined text, each with its own remove button that is reachable with the keyboard and announced with the text of
+        the item it removes. It works in both single and multi select modes and pairs naturally with the ComboBox mode.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample2"
@@ -763,8 +953,98 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Dynamic ComboBox" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15" PreventRenderForMcpClient>
-    <div>When the <b>Dynamic</b> parameter is true, a text typed into the ComboBox that matches no existing item can be added as a new item; <b>DynamicValueGenerator</b> generates the value of the new item and <b>OnDynamicAdd</b> notifies about the addition.</div>
+<DemoExample Title="Selection display" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16" PreventRenderForMcpClient>
+    <div>
+        A multi select dropdown that lists every selected item quickly runs out of room. <b>MaxDisplayedItems</b> caps
+        how many of them the closed dropdown shows: with <b>Chips</b> the extra ones collapse into an overflow chip
+        whose text comes from <b>OverflowTextFormat</b> (<b>"+{0}"</b> by default), and without chips the joined list
+        is replaced by the summary of <b>SelectedItemsTextFormat</b> (<b>"{0} items selected"</b> by default) as soon
+        as the limit is passed. Nothing is removed from the selection &mdash; only the way it is displayed changes.
+        <br /><br />
+        <b>AutoClearSearch</b> covers the other half of a multi select session: the callout stays open after a pick, so
+        by default the next item has to be found through the filter left over from the previous one. Enabling it clears
+        the search text after every selection instead.
+        <b>HideSelectedItems</b> goes one step further and drops the picked items out of the callout altogether, which
+        makes sense when the chips already show what is selected and the list is only about what is left to choose.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="MaxDisplayedItems (chips)"
+                     Chips
+                     MultiSelect
+                     MaxDisplayedItems="2"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban", "f-gra", "v-car" })"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="OverflowTextFormat"
+                     Chips
+                     MultiSelect
+                     MaxDisplayedItems="2"
+                     OverflowTextFormat="and {0} more"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban", "f-gra", "v-car" })"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="SelectedItemsTextFormat"
+                     MultiSelect
+                     MaxDisplayedItems="2"
+                     SelectedItemsTextFormat="{0} fruits and vegetables"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban", "f-gra", "v-car" })"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="AutoClearSearch"
+                     Combo Chips
+                     MultiSelect
+                     AutoClearSearch
+                     Placeholder="Type to filter, then pick"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in comboBoxItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="HideSelectedItems"
+                     Chips
+                     MultiSelect
+                     HideSelectedItems
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban" })"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+    </div>
+</DemoExample>
+
+<DemoExample Title="Dynamic ComboBox" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17" PreventRenderForMcpClient>
+    <div>
+        When the <b>Dynamic</b> parameter is true, a text typed into the ComboBox that matches no existing item can be
+        added as a new one, which is what makes free-form values (tags, e-mail recipients, ad-hoc categories) possible.
+        <b>DynamicValueGenerator</b> produces the value of the new item from its text and <b>OnDynamicAdd</b> notifies
+        about the addition so the item can be persisted into the source collection. Before creating anything the
+        component first looks for an existing match; <b>FindItemFunction</b> and <b>ExistsSelectedItemFunction</b>
+        replace the default case-insensitive text comparison used for those two lookups.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample3"
@@ -822,12 +1102,16 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Keyboard navigation" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16" PreventRenderForMcpClient>
+<DemoExample Title="Keyboard navigation" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18" PreventRenderForMcpClient>
     <div>
-        The dropdown is fully operable with the keyboard: <b>Enter</b>, <b>Space</b> and the arrow keys open the callout,
-        <b>ArrowUp</b> and <b>ArrowDown</b> move the focus between the items, <b>Home</b> and <b>End</b> jump to the first and last item,
-        <b>PageUp</b> and <b>PageDown</b> jump ten items at a time, typing characters moves the focus to the next matching item,
-        <b>Enter</b> and <b>Space</b> select the focused item and <b>Escape</b> closes the callout.
+        The dropdown is fully operable with the keyboard, following the ARIA authoring practices for a combobox:
+        <b>Enter</b>, <b>Space</b> and the arrow keys open the callout and put the focus on the selected item (or the
+        first one), <b>ArrowUp</b> and <b>ArrowDown</b> move between the items, <b>Home</b> and <b>End</b> jump to the
+        first and the last one, <b>PageUp</b> and <b>PageDown</b> jump ten items at a time, <b>Enter</b> and <b>Space</b>
+        select the focused item, <b>Escape</b> and <b>Alt+ArrowUp</b> close the callout and return the focus to the
+        dropdown, and <b>Tab</b> closes it and moves on. Typing printable characters runs a typeahead: the accumulated characters jump to the
+        item starting with them, repeating one character cycles through the items starting with it, and the buffer
+        resets after a short pause. Disabled and hidden items are skipped throughout.
     </div>
     <br />
     <div class="example-content">
@@ -854,12 +1138,14 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Select all" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17" PreventRenderForMcpClient>
+<DemoExample Title="Select all" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
     <div>
-        When the <b>ShowSelectAll</b> parameter is true, a select all item renders at the top of the callout of the
-        multi select dropdown that selects or clears all items at once and shows an indeterminate state when only
-        some items are selected. Disabled items are skipped, the <b>SelectAllText</b> parameter customizes its text
-        and combined with the search box, it only applies to the search result.
+        When the <b>ShowSelectAll</b> parameter is true, a select all item renders above the item list of a multi select
+        dropdown. It selects everything with one click and clears everything with the next, and its check box shows an
+        indeterminate state while only some of the items are selected, so it doubles as a summary of the current
+        selection. It only ever applies to what the user can actually see: disabled items are skipped, and while a
+        search is active it selects the search result rather than the whole list, leaving selections made outside the
+        result untouched. The <b>SelectAllText</b> parameter customizes its text.
     </div>
     <br />
     <div class="example-content">
@@ -894,10 +1180,12 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Selection limit" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18" PreventRenderForMcpClient>
+<DemoExample Title="Selection limit" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20" PreventRenderForMcpClient>
     <div>
-        The <b>MaxSelectedItems</b> parameter limits the number of items that can be selected in the multi select
-        dropdown; once the limit is reached, the remaining items become disabled until an item gets unselected.
+        The <b>MaxSelectedItems</b> parameter limits how many items can be selected in the multi select dropdown. Once
+        the limit is reached the unselected items are disabled rather than silently refusing the click, so the boundary
+        is visible before it is hit, and they become available again as soon as an item is unselected. The select all
+        item honors the same limit and stops adding items once it is reached.
     </div>
     <br />
     <div class="example-content">
@@ -917,10 +1205,14 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Empty state" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
+<DemoExample Title="Empty state" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21" PreventRenderForMcpClient>
     <div>
-        When there is no item to show in the callout (an empty list or a search without a result), the dropdown
-        renders a message that can be customized using the <b>EmptyText</b> and <b>EmptyTemplate</b> parameters.
+        When there is no item to show, the callout renders a message instead of an empty list. There are two distinct
+        cases and each gets its own text: <b>EmptyText</b> and <b>EmptyTemplate</b> cover a list that has nothing in it
+        ("No items found" by default), while <b>NoResultsText</b> and <b>NoResultsTemplate</b> cover a search that
+        matched nothing ("No results found" by default) &mdash; telling the user that their term found nothing is a
+        different message from telling them the list is empty. When the no-results pair is not set the empty pair is used
+        for both cases.
     </div>
     <br />
     <div class="example-content">
@@ -955,15 +1247,121 @@
                 <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
             }
         </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="NoResultsText"
+                     ShowSearchBox
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search for anything"
+                     NoResultsText="Nothing matched your search"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="NoResultsTemplate"
+                     ShowSearchBox
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search for anything"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            <NoResultsTemplate>
+                <div class="custom-drp custom-drp-empty">
+                    <BitIcon IconName="@BitIconName.SearchAndApps" />
+                    <div>No match. Try another term!</div>
+                </div>
+            </NoResultsTemplate>
+            <Options>
+                @foreach (var item in basicItems)
+                {
+                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+                }
+            </Options>
+        </BitDropdown>
     </div>
 </DemoExample>
 
-<DemoExample Title="Virtualization" RazorCode="@example20RazorCode" Id="example20">
+<DemoExample Title="Loading" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22" PreventRenderForMcpClient>
+    <div>
+        The <b>IsLoading</b> parameter reports that the items are still on their way: a spinner replaces the caret
+        down element and the callout shows a loading indicator in place of the item list, while the dropdown itself
+        stays enabled so the user can still open it and see what is happening. The message is customized with the
+        <b>LoadingText</b> parameter and the whole indicator with the <b>LoadingTemplate</b> parameter.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="IsLoading"
+                     IsLoading
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="LoadingText"
+                     IsLoading
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     LoadingText="Fetching the products..."
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="LoadingTemplate"
+                     IsLoading
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            <LoadingTemplate>
+                <div class="custom-drp custom-drp-empty">
+                    <BitIcon IconName="@BitIconName.Sync" />
+                    <div>Just a moment...</div>
+                </div>
+            </LoadingTemplate>
+            <Options>
+                @foreach (var item in basicItems)
+                {
+                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+                }
+            </Options>
+        </BitDropdown>
+        <br /><br /><br /><br />
+        <div><b>A real fetch</b>: the items get loaded when the button is clicked.</div>
+        <br />
+        <BitButton OnClick="LoadDelayedItems" IsLoading="isLoadingItems">Load the items</BitButton>
+        <br /><br />
+        <BitDropdown Label="Products"
+                     IsLoading="isLoadingItems"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in delayedItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+    </div>
+</DemoExample>
+
+<DemoExample Title="Virtualization" RazorCode="@example23RazorCode" Id="example23">
     <div>Virtualizing large item lists is demonstrated with the <b>Items</b> and <b>ItemsProvider</b> APIs; check the <b>Item</b> and <b>Custom</b> tabs for the examples.</div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21" PreventRenderForMcpClient>
-    <div>The <b>Color</b> parameter paints the dropdown's accents (the focus border, the search icon and the check boxes of the multi select items) in one of the theme colors, <b>Primary</b> being the default.</div>
+<DemoExample Title="Color" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24" PreventRenderForMcpClient>
+    <div>
+        The <b>Color</b> parameter paints the accents of the dropdown &mdash; the focus border, the search box
+        underline and icon, the group headers and the check boxes of the multi select items &mdash; in one of the theme
+        colors, <b>Primary</b> being the default. It changes the accents only, not the surface of the control, so the
+        dropdown keeps fitting its surroundings.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Primary"
@@ -1056,12 +1454,15 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22" PreventRenderForMcpClient>
+<DemoExample Title="External Icons" RazorCode="@example25RazorCode" CsharpCode="@example25CsharpCode" Id="example25" PreventRenderForMcpClient>
     <div>
-        Use icons from external libraries like FontAwesome and Bootstrap Icons with the <b>CaretDownIcon</b>, 
-        <b>ClearButtonIcon</b>, <b>ChipsRemoveIcon</b>, <b>SearchBoxIcon</b>, <b>SearchBoxClearIcon</b>,
-        <b>ResponsiveCloseIcon</b>, and <b>ItemCheckIcon</b> parameters on the dropdown and the <b>Icon</b> or <b>IconName</b>
-        parameters on <b>BitDropdownOption</b>.
+        Every icon of the dropdown can come from an external library instead of the built-in Fluent UI set. The
+        <b>CaretDownIcon</b>, <b>ClearButtonIcon</b>, <b>ChipsRemoveIcon</b>, <b>SearchBoxIcon</b>,
+        <b>SearchBoxClearIcon</b>, <b>ResponsiveCloseIcon</b> and <b>ItemCheckIcon</b> parameters take a
+        <b>BitIconInfo</b> &mdash; built with <b>BitIconInfo.Fa</b>, <b>BitIconInfo.Bi</b> or the generic
+        <b>BitIconInfo.Css</b> &mdash; and each takes precedence over its <b>...IconName</b> counterpart when both are
+        set. The items themselves follow the same rule through their <b>Icon</b> and <b>IconName</b> members. Remember
+        to reference the stylesheet of the icon library you use.
     </div>
     
     <br />
@@ -1189,8 +1590,60 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23" PreventRenderForMcpClient>
-    <div>Style the dropdown at every level: inline <b>Style</b> and <b>Class</b> on the root element, per-item styles and classes on the items, and the <b>Styles</b> and <b>Classes</b> parameters that target each internal part of the component individually.</div>
+<DemoExample Title="Size" RazorCode="@example26RazorCode" CsharpCode="@example26CsharpCode" Id="example26" PreventRenderForMcpClient>
+    <div>
+        The <b>Size</b> parameter scales the whole component in one step, <b>Medium</b> being the default: the height
+        and the font size of the dropdown, of its search box and of the items in the callout all follow the chosen size.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="Small"
+                     ShowSearchBox
+                     Size="BitSize.Small"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="Medium"
+                     ShowSearchBox
+                     Size="BitSize.Medium"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="Large"
+                     ShowSearchBox
+                     Size="BitSize.Large"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+    </div>
+</DemoExample>
+
+<DemoExample Title="Style & Class" RazorCode="@example27RazorCode" CsharpCode="@example27CsharpCode" Id="example27" PreventRenderForMcpClient>
+    <div>
+        The dropdown can be styled at every level: <b>Style</b> and <b>Class</b> apply to the root element, each item
+        carries its own style and class, and the <b>Styles</b> and <b>Classes</b> parameters reach every internal part
+        of the component individually &mdash; the label, the container, the callout, the search box, the scroll
+        container, the items and everything else listed in the class-styles reference below. Because the callout is
+        rendered outside the root element, styling it through <b>Styles.Callout</b> or <b>Classes.Callout</b> is the way
+        to reach it rather than a descendant selector on the root.
+    </div>
     <br /><br />
     <div class="example-content">
         <div>Component's Style & Class:</div><br />
@@ -1251,8 +1704,13 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24" PreventRenderForMcpClient>
-    <div>Setting the <b>Dir</b> parameter to <b>Rtl</b> renders the dropdown right-to-left for languages like Arabic, Persian and Hebrew, in both the regular callout and the responsive panel.</div>
+<DemoExample Title="RTL" RazorCode="@example28RazorCode" CsharpCode="@example28CsharpCode" Id="example28" PreventRenderForMcpClient>
+    <div>
+        Setting the <b>Dir</b> parameter to <b>Rtl</b> renders the dropdown right-to-left for languages like Arabic,
+        Persian and Hebrew: the text, the label, the chevron, the check boxes and the search box all mirror, the
+        callout aligns to the right edge of the dropdown, and the responsive panel slides in from the left and is
+        swiped away in the opposite direction.
+    </div>
     <br />
     <dir dir="rtl" style="padding:0">
         <div class="example-content">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.cs
index 95acb698be..4eb5679f87 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.cs
@@ -86,6 +86,12 @@ public partial class _BitDropdownOptionDemo
 
     private string? clearValue = "f-app";
     private IEnumerable<string?> clearValues = ["f-app", "f-ban"];
+    private int clearCounter;
+
+    private string calloutState = "closed";
+
+    private bool isLoadingItems;
+    private List<BitDropdownItem<string>> delayedItems = [];
 
     private string? immediateSearchValue;
     private string? debouncedSearchValue;
@@ -130,4 +136,19 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     {
         comboBoxItems.Add(new() { Text = item.Text, Value = item.Value });
     }
+
+    private void HandleOnCalloutOpen() => calloutState = "opened";
+
+    private void HandleOnCalloutClose() => calloutState = "closed";
+
+    private async Task LoadDelayedItems()
+    {
+        isLoadingItems = true;
+        delayedItems = [];
+
+        await Task.Delay(2000);
+
+        delayedItems = [.. basicItems];
+        isLoadingItems = false;
+    }
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
index 05a45474f4..3849f2a497 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
@@ -79,6 +79,17 @@ public partial class _BitDropdownOptionDemo
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
+</BitDropdown>
+
+<BitDropdown Label=""Title""
+             Title=""Pick your favorite fruit or vegetable""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Hover me""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
 </BitDropdown>";
     private readonly string example1CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
@@ -327,8 +338,22 @@ protected override void OnInitialized()
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
-<div>Values: @string.Join(',', clearValues)</div>";
+<div>Values: @string.Join(',', clearValues)</div>
+
+<BitDropdown ShowClearButton
+             DefaultValue=""@(""f-app"")""
+             Label=""Single select dropdown""
+             Placeholder=""Select an option""
+             OnClear=""() => clearCounter++""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+<div>OnClear count: @clearCounter</div>";
     private readonly string example7CsharpCode = @"
+private int clearCounter;
 private string? clearValue = ""f-app"";
 private ICollection<string?> clearValues = new[] { ""f-app"", ""f-ban"" };
 
@@ -418,6 +443,75 @@ protected override void OnInitialized()
 ];";
 
     private readonly string example9RazorCode = @"
+<BitDropdown Label=""SearchMode: StartsWith""
+             ShowSearchBox
+             AutoFocusSearchBox
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Type a first letter""
+             SearchMode=""BitDropdownSearchMode.StartsWith""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""MinSearchLength: 3""
+             ShowSearchBox
+             AutoFocusSearchBox
+             MinSearchLength=""3""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Type at least 3 characters""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""HighlightSearch""
+             ShowSearchBox
+             AutoFocusSearchBox
+             HighlightSearch
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Highlight in the ComboBox""
+             Combo
+             HighlightSearch
+             DefaultValue=""@string.Empty""
+             Placeholder=""Type to filter""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in comboBoxItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>";
+    private readonly string example9CsharpCode = @"
+private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];";
+
+    private readonly string example10RazorCode = @"
 <BitDropdown Label=""Immediate""
              ShowSearchBox
              Immediate
@@ -458,7 +552,7 @@ protected override void OnInitialized()
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>";
-    private readonly string example9CsharpCode = @"
+    private readonly string example10CsharpCode = @"
 private string? immediateSearchValue;
 private string? debouncedSearchValue;
 
@@ -490,7 +584,7 @@ protected override void OnInitialized()
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example11RazorCode = @"
 @using System.ComponentModel.DataAnnotations;
 
 <style>
@@ -528,7 +622,7 @@ protected override void OnInitialized()
 
     <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
 </EditForm>";
-    private readonly string example10CsharpCode = @"
+    private readonly string example11CsharpCode = @"
 public class FormValidationDropdownModel
 {
     [MaxLength(2, ErrorMessage = ""The property {0} have more than {1} elements"")]
@@ -559,7 +653,7 @@ private void HandleInvalidSubmit() { }
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example11RazorCode = @"
+    private readonly string example12RazorCode = @"
 <style>
     .custom-drp {
         gap: 10px;
@@ -708,7 +802,7 @@ private void HandleInvalidSubmit() { }
         }
     </Options>
 </BitDropdown>";
-    private readonly string example11CsharpCode = @"
+    private readonly string example12CsharpCode = @"
 private readonly List<BitDropdownItem<string>> dataItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Items"", Data = new DropdownItemData { IconName = ""BulletedList2"" }  },
@@ -722,7 +816,7 @@ private void HandleInvalidSubmit() { }
     new() { Text = ""Item f"", Value = ""F"", Data = new DropdownItemData { IconName = ""Running"" } }
 ];";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example13RazorCode = @"
 <BitDropdown @bind-Value=""controlledValue""
              Label=""Single select""
              Placeholder=""Select an item""
@@ -827,10 +921,28 @@ private void HandleInvalidSubmit() { }
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
-</BitDropdown>";
-    private readonly string example12CsharpCode = @"
+</BitDropdown>
+
+<BitDropdown Label=""Single select""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             OnOpen=""HandleOnCalloutOpen""
+             OnClose=""HandleOnCalloutClose""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+<div>The callout is @calloutState.</div>";
+    private readonly string example13CsharpCode = @"
 private bool isDropdownOpen;
 private int selectItemCounter;
+private string calloutState = ""closed"";
+
+private void HandleOnCalloutOpen() => calloutState = ""opened"";
+
+private void HandleOnCalloutClose() => calloutState = ""closed"";
 
 private string controlledValue = ""f-app"";
 private IEnumerable<string?> controlledValues = [""f-app"", ""f-ban""];
@@ -855,7 +967,7 @@ private void HandleInvalidSubmit() { }
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example14RazorCode = @"
 <BitDropdown @bind-Value=""comboBoxValueSample1""
              Combo
              Responsive
@@ -883,7 +995,7 @@ MultiSelect Responsive
 </BitDropdown>
 <br />
 <div>Values: @string.Join(',', comboBoxValues1)</div>";
-    private readonly string example13CsharpCode = @"
+    private readonly string example14CsharpCode = @"
 private string comboBoxValueSample1 = default!;
 private ICollection<string> comboBoxValues1 = [];
 
@@ -901,7 +1013,7 @@ MultiSelect Responsive
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example14RazorCode = @"
+    private readonly string example15RazorCode = @"
 <BitDropdown @bind-Value=""comboBoxValueSample2""
              Combo Chips Responsive
              Label=""Single select combo box & chips""
@@ -928,7 +1040,7 @@ Responsive MultiSelect
 </BitDropdown>
 <br />
 <div>Values: @string.Join(',', comboBoxValues2)</div>";
-    private readonly string example14CsharpCode = @"
+    private readonly string example15CsharpCode = @"
 private string comboBoxValueSample2 = default!;
 private ICollection<string> comboBoxValues2 = [];
 
@@ -946,7 +1058,87 @@ Responsive MultiSelect
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example15RazorCode = @"
+    private readonly string example16RazorCode = @"
+<BitDropdown Label=""MaxDisplayedItems (chips)""
+             Chips
+             MultiSelect
+             MaxDisplayedItems=""2""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"", ""f-gra"", ""v-car"" })""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""OverflowTextFormat""
+             Chips
+             MultiSelect
+             MaxDisplayedItems=""2""
+             OverflowTextFormat=""and {0} more""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"", ""f-gra"", ""v-car"" })""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""SelectedItemsTextFormat""
+             MultiSelect
+             MaxDisplayedItems=""2""
+             SelectedItemsTextFormat=""{0} fruits and vegetables""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"", ""f-gra"", ""v-car"" })""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""AutoClearSearch""
+             Combo Chips
+             MultiSelect
+             AutoClearSearch
+             Placeholder=""Type to filter, then pick""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in comboBoxItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""HideSelectedItems""
+             Chips
+             MultiSelect
+             HideSelectedItems
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"" })""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>";
+    private readonly string example16CsharpCode = @"
+private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];";
+
+    private readonly string example17RazorCode = @"
 <BitDropdown @bind-Value=""comboBoxValueSample3""
              Combo Dynamic
              Placeholder=""Select an option""
@@ -991,7 +1183,7 @@ Combo Chips Dynamic
     }
 </BitDropdown>
 <div>Values: @string.Join(',', comboBoxValues3)</div>";
-    private readonly string example15CsharpCode = @"
+    private readonly string example17CsharpCode = @"
 private string comboBoxValueSample3 = default!;
 private string comboBoxValueSample4 = default!;
 private ICollection<string> comboBoxValues3 = [];
@@ -1015,7 +1207,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example16RazorCode = @"
+    private readonly string example18RazorCode = @"
 <BitDropdown Label=""Single select""
              DefaultValue=""@string.Empty""
              Placeholder=""Select an item""
@@ -1036,7 +1228,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>";
-    private readonly string example16CsharpCode = @"
+    private readonly string example18CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1051,7 +1243,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example17RazorCode = @"
+    private readonly string example19RazorCode = @"
 <BitDropdown @bind-Values=""selectAllValues""
              MultiSelect
              ShowSelectAll
@@ -1079,7 +1271,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>";
-    private readonly string example17CsharpCode = @"
+    private readonly string example19CsharpCode = @"
 private IEnumerable<string?> selectAllValues = [];
 
 private readonly List<BitDropdownItem<string>> basicItems =
@@ -1096,7 +1288,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example18RazorCode = @"
+    private readonly string example20RazorCode = @"
 <BitDropdown @bind-Values=""maxSelectedValues""
              MultiSelect
              MaxSelectedItems=""2""
@@ -1109,7 +1301,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     }
 </BitDropdown>
 <div>Values: @string.Join(',', maxSelectedValues)</div>";
-    private readonly string example18CsharpCode = @"
+    private readonly string example20CsharpCode = @"
 private IEnumerable<string?> maxSelectedValues = [];
 
 private readonly List<BitDropdownItem<string>> basicItems =
@@ -1126,7 +1318,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example19RazorCode = @"
+    private readonly string example21RazorCode = @"
 <BitDropdown Label=""Default""
              Placeholder=""Select an item""
              TItem=""BitDropdownOption<string>"" TValue=""string"" />
@@ -1157,8 +1349,41 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
+</BitDropdown>
+
+<BitDropdown Label=""NoResultsText""
+             ShowSearchBox
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search for anything""
+             NoResultsText=""Nothing matched your search""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""NoResultsTemplate""
+             ShowSearchBox
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search for anything""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    <NoResultsTemplate>
+        <div class=""custom-drp custom-drp-empty"">
+            <BitIcon IconName=""@BitIconName.SearchAndApps"" />
+            <div>No match. Try another term!</div>
+        </div>
+    </NoResultsTemplate>
+    <Options>
+        @foreach (var item in basicItems)
+        {
+            <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+        }
+    </Options>
 </BitDropdown>";
-    private readonly string example19CsharpCode = @"
+    private readonly string example21CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1173,10 +1398,79 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string? example20RazorCode = @"
+    private readonly string example22RazorCode = @"
+<BitDropdown Label=""IsLoading""
+             IsLoading
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""LoadingText""
+             IsLoading
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             LoadingText=""Fetching the products...""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""LoadingTemplate""
+             IsLoading
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    <LoadingTemplate>
+        <div class=""custom-drp custom-drp-empty"">
+            <BitIcon IconName=""@BitIconName.Sync"" />
+            <div>Just a moment...</div>
+        </div>
+    </LoadingTemplate>
+    <Options>
+        @foreach (var item in basicItems)
+        {
+            <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+        }
+    </Options>
+</BitDropdown>
+
+<BitButton OnClick=""LoadDelayedItems"" IsLoading=""isLoadingItems"">Load the items</BitButton>
+<BitDropdown Label=""Products""
+             IsLoading=""isLoadingItems""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in delayedItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>";
+    private readonly string example22CsharpCode = @"
+private bool isLoadingItems;
+private List<BitDropdownItem<string>> delayedItems = [];
+
+private async Task LoadDelayedItems()
+{
+    isLoadingItems = true;
+    delayedItems = [];
+
+    await Task.Delay(2000);
+
+    delayedItems = [.. basicItems];
+    isLoadingItems = false;
+}";
+
+    private readonly string? example23RazorCode = @"
 <div>Not applicable to option demo!</div>";
 
-    private readonly string example21RazorCode = @"
+    private readonly string example24RazorCode = @"
 <BitDropdown Label=""Primary""
              MultiSelect
              Color=""BitColor.Primary""
@@ -1264,7 +1558,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>";
-    private readonly string example21CsharpCode = @"
+    private readonly string example24CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1279,7 +1573,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example22RazorCode = @"
+    private readonly string example25RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 <link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
 
@@ -1384,7 +1678,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     <BitDropdownOption Text=""Carrot"" Value=""@(""v-car"")"" Icon=""@BitIconInfo.Bi(""egg"")"" />
     <BitDropdownOption Text=""Lettuce"" Value=""@(""v-let"")"" Icon=""@BitIconInfo.Bi(""flower2"")"" />
 </BitDropdown>";
-    private readonly string example22CsharpCode = @"
+    private readonly string example25CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1399,7 +1693,58 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example23RazorCode = @"
+    private readonly string example26RazorCode = @"
+<BitDropdown Label=""Small""
+             ShowSearchBox
+             Size=""BitSize.Small""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Medium""
+             ShowSearchBox
+             Size=""BitSize.Medium""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Large""
+             ShowSearchBox
+             Size=""BitSize.Large""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>";
+    private readonly string example26CsharpCode = @"
+private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];";
+
+    private readonly string example27RazorCode = @"
 <style>
     .custom-class {
         margin-inline: 1rem;
@@ -1497,7 +1842,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>";
-    private readonly string example23CsharpCode = @"
+    private readonly string example27CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1526,7 +1871,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"", Class = ""custom-veg"" }
 ];";
 
-    private readonly string example24RazorCode = @"
+    private readonly string example28RazorCode = @"
 <BitDropdown Label=""تک انتخابی""
              Dir=""BitDir.Rtl""
              Placeholder=""لطفا انتخاب کنید""
@@ -1558,7 +1903,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>";
-    private readonly string example24CsharpCode = @"
+    private readonly string example28CsharpCode = @"
 private readonly List<BitDropdownItem<string>> rtlItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""میوه ها"" },
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownTests.cs
index f01a3a3e33..cbea505f29 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownTests.cs
@@ -1165,7 +1165,7 @@ public void BitDropdownChipsRemoveIconNameTest(string? iconName)
             }
         });
 
-        var chipIcon = component.Find(".bit-drp-chp > i");
+        var chipIcon = component.Find(".bit-drp-chp > .bit-drp-crb > i");
 
         if (iconName is not null)
         {

From fc59be31c455e2b8ee1811008210aede38ddfe86 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Mon, 27 Jul 2026 13:03:58 +0330
Subject: [PATCH 4/7] resolve review comments

---
 .../Components/Inputs/Dropdown/BitDropdown.razor          | 3 ++-
 .../Components/Inputs/Dropdown/BitDropdown.razor.cs       | 5 ++++-
 src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts            | 8 ++++++--
 .../Inputs/Dropdown/_BitDropdownCustomDemo.razor          | 2 +-
 .../Dropdown/_BitDropdownCustomDemo.razor.samples.cs      | 8 ++++++++
 5 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
index f1b68bab24..120955cf0d 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
@@ -374,6 +374,7 @@
                     role="checkbox"
                     style="@Styles?.SelectAllButton"
                     class="bit-drp-mcn bit-drp-sab @Classes?.SelectAllButton"
+                    disabled="@(IsEnabled is false || ReadOnly)"
                     aria-checked="@selectAllAriaChecked">
                 <div style="@Styles?.SelectAllCheckBox"
                      class="bit-drp-chb @Classes?.SelectAllCheckBox">
@@ -393,7 +394,7 @@
          role="listbox"
          style="@Styles?.ScrollContainer"
          class="bit-drp-scn @Classes?.ScrollContainer"
-         aria-labelledby="@_labelId"
+         aria-labelledby="@(HasLabel ? _labelId : null)"
          aria-multiselectable="@(MultiSelect ? "true" : null)">
         @if (IsLoading)
         {
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
index 126a1623b9..9cf8580503 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
@@ -1894,9 +1894,12 @@ private string GetSearchBoxClasses()
         return className.ToString();
     }
 
+    // Whether the label element carrying _labelId is rendered, so nothing references a missing element.
+    private bool HasLabel => LabelTemplate is not null || Label.HasValue();
+
     private string GetDropdownAriaLabelledby()
     {
-        return Label.HasValue() ? $"{_labelId} {_dropdownTextContainerId}" : _dropdownTextContainerId;
+        return HasLabel ? $"{_labelId} {_dropdownTextContainerId}" : _dropdownTextContainerId;
     }
 
     private async Task SearchVirtualized()
diff --git a/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts b/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts
index eccbd18948..3696dc1c30 100644
--- a/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts
@@ -6,6 +6,10 @@ namespace BitBlazorUI {
         // virtualize mode to be rendered, before giving up and using whatever is rendered by then.
         private static readonly VIRTUALIZE_RENDER_FRAMES = 20;
 
+        // The number of items PageDown/PageUp move the focus by when the whole list is rendered (in
+        // virtualize mode the jump is a scroll of one visible window instead, see _scrollFor).
+        private static readonly PAGE_STEP = 10;
+
         // The keys whose default behavior (scrolling the page or the callout) has to be prevented
         // because the dropdown handles them itself. They mirror the keys handled by the
         // HandleOnTriggerKeyDown and HandleOnCalloutKeyDown methods of BitDropdown, which is where a
@@ -180,9 +184,9 @@ namespace BitBlazorUI {
 
             if (mode === 'prev') return current < 0 ? items.length - 1 : wrap(current - 1);
 
-            if (mode === 'nextPage') return current < 0 ? 0 : Math.min(current + 10, items.length - 1);
+            if (mode === 'nextPage') return current < 0 ? 0 : Math.min(current + Dropdowns.PAGE_STEP, items.length - 1);
 
-            if (mode === 'prevPage') return current < 0 ? items.length - 1 : Math.max(current - 10, 0);
+            if (mode === 'prevPage') return current < 0 ? items.length - 1 : Math.max(current - Dropdowns.PAGE_STEP, 0);
 
             if (mode === 'selected') {
                 // Focus the selected option if there is one, otherwise the first one (APG combobox pattern).
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
index 0687547dfa..7bc0384533 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
@@ -1022,7 +1022,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Virtualization" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23">
+<DemoExample Title="Virtualization" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23" PreventRenderForMcpClient>
     <div>
         The <b>Virtualize</b> parameter renders only the items that are currently visible instead of the whole list,
         which keeps the callout fast with thousands of items; <b>ItemSize</b> tells it how tall an item is and
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
index 41085adc81..278c16fd81 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
@@ -1065,11 +1065,13 @@ public class Product
 public class Product
 {
     public string? Label { get; set; }
+    public string? CssClass { get; set; }
     public string? Key { get; set; }
     public object? Payload { get; set; }
     public bool Disabled { get; set; }
     public bool Visible { get; set; } = true;
     public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? CssStyle { get; set; }
     public string? Text { get; set; }
     public string? Title { get; set; }
     public string? Value { get; set; }
@@ -1132,11 +1134,13 @@ Combo Chips
 public class Product
 {
     public string? Label { get; set; }
+    public string? CssClass { get; set; }
     public string? Key { get; set; }
     public object? Payload { get; set; }
     public bool Disabled { get; set; }
     public bool Visible { get; set; } = true;
     public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? CssStyle { get; set; }
     public string? Text { get; set; }
     public string? Title { get; set; }
     public string? Value { get; set; }
@@ -1280,11 +1284,13 @@ private void HandleOnDynamicAdd(Product item)
 public class Product
 {
     public string? Label { get; set; }
+    public string? CssClass { get; set; }
     public string? Key { get; set; }
     public object? Payload { get; set; }
     public bool Disabled { get; set; }
     public bool Visible { get; set; } = true;
     public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? CssStyle { get; set; }
     public string? Text { get; set; }
     public string? Title { get; set; }
     public string? Value { get; set; }
@@ -1986,11 +1992,13 @@ public class Product
 public class Product
 {
     public string? Label { get; set; }
+    public string? CssClass { get; set; }
     public string? Key { get; set; }
     public object? Payload { get; set; }
     public bool Disabled { get; set; }
     public bool Visible { get; set; } = true;
     public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? CssStyle { get; set; }
     public string? Text { get; set; }
     public string? Title { get; set; }
     public string? Value { get; set; }

From 8e3de5cc74d8501acfc249c5ce7e87f25549ef0f Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Mon, 27 Jul 2026 15:29:10 +0330
Subject: [PATCH 5/7] resolve review comments 2

---
 .../Inputs/Dropdown/BitDropdown.razor.cs      |   7 +-
 .../Inputs/Dropdown/BitDropdown.scss          |   2 +-
 .../_BitDropdownCustomDemo.razor.samples.cs   | 144 ++++++++++++++++++
 .../_BitDropdownItemDemo.razor.samples.cs     |  14 ++
 .../_BitDropdownOptionDemo.razor.samples.cs   |  28 ++++
 5 files changed, 193 insertions(+), 2 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
index 9cf8580503..77246316aa 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
@@ -19,6 +19,7 @@ namespace Bit.BlazorUI;
     private HashSet<TItem>? _searchedItemsCache;
     private string? _positionsCacheKey;
     private int _positionsCacheVersion = -1;
+    private int _positionsSelectionVersion = -1;
     private Dictionary<TItem, int>? _itemPositions;
     private int _selectionVersion;
     private string? _displayItemsCacheKey;
@@ -861,12 +862,16 @@ private Dictionary<TItem, int> GetItemPositions()
     {
         var search = SearchText;
 
+        // The selection version is part of the key because GetDisplayItems drops the selected items when
+        // HideSelectedItems is on, which shifts the position of every item that comes after them.
         if (_itemPositions is null ||
             _positionsCacheKey != search ||
-            _positionsCacheVersion != _optionsVersion)
+            _positionsCacheVersion != _optionsVersion ||
+            _positionsSelectionVersion != _selectionVersion)
         {
             _positionsCacheKey = search;
             _positionsCacheVersion = _optionsVersion;
+            _positionsSelectionVersion = _selectionVersion;
             _itemPositions = [];
 
             var position = 0;
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
index be00765315..a026d58cb6 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
@@ -384,7 +384,7 @@
     align-items: center;
     white-space: nowrap;
     padding: 0 spacing(1.25);
-    min-height: spacing(3.75);
+    min-height: var(--bit-drp-h);
     color: $clr-fg-pri;
     background: $clr-bg-sec;
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
index 278c16fd81..91a833959c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
@@ -559,6 +559,21 @@ public class Product
              NameSelectors=""comboBoxNameSelectors""
              Placeholder=""Type to filter"" />";
     private readonly string example9CsharpCode = @"
+public class Product
+{
+    public string? Label { get; set; }
+    public string? CssClass { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? CssStyle { get; set; }
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
+
 private List<Product> GetBasicCustoms() => new()
 {
     new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
@@ -579,6 +594,37 @@ public class Product
     Value = { Selector = c => c.Value },
     ItemType = { Selector = c => c.Type },
     IsEnabled = { Selector = c => c.Disabled is false },
+};
+
+private List<Product> comboBoxCustoms = new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private BitDropdownNameSelectors<Product, string> comboBoxNameSelectors = new()
+{
+    AriaLabel = { Selector = c => c.Label },
+    Class = { Selector = c => c.CssClass },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Style = { Selector = c => c.CssStyle },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+    ValueSetter = (Product item, string value) => item.Value = value,
+    TextSetter = (string? text, Product item) => item.Text = text
 };";
 
     private readonly string example10RazorCode = @"
@@ -1224,6 +1270,21 @@ Combo Chips
              Placeholder=""Select items""
              DefaultValues=""@(new[] { ""f-app"", ""f-ban"" })"" />";
     private readonly string example16CsharpCode = @"
+public class Product
+{
+    public string? Label { get; set; }
+    public string? CssClass { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? CssStyle { get; set; }
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
+
 private List<Product> GetBasicCustoms() => new()
 {
     new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
@@ -1236,6 +1297,50 @@ Combo Chips
     new() { Text = ""Broccoli"", Value = ""v-bro"" },
     new() { Text = ""Carrot"", Value = ""v-car"" },
     new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private BitDropdownNameSelectors<Product, string?> nameSelectors = new()
+{
+    AriaLabel = { Selector = c => c.Label },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+};
+
+private List<Product> comboBoxCustoms = new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private BitDropdownNameSelectors<Product, string> comboBoxNameSelectors = new()
+{
+    AriaLabel = { Selector = c => c.Label },
+    Class = { Selector = c => c.CssClass },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Style = { Selector = c => c.CssStyle },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+    ValueSetter = (Product item, string value) => item.Value = value,
+    TextSetter = (string? text, Product item) => item.Text = text
 };";
 
     private readonly string example17RazorCode = @"
@@ -1630,6 +1735,19 @@ public class Product
              NameSelectors=""nameSelectors""
              Placeholder=""Select an item"" />";
     private readonly string example22CsharpCode = @"
+public class Product
+{
+    public string? Label { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
+
 private bool isLoadingItems;
 private ICollection<Product> delayedCustoms = [];
 
@@ -1656,6 +1774,19 @@ private async Task LoadDelayedCustoms()
     new() { Text = ""Broccoli"", Value = ""v-bro"" },
     new() { Text = ""Carrot"", Value = ""v-car"" },
     new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private BitDropdownNameSelectors<Product, string?> nameSelectors = new()
+{
+    AriaLabel = { Selector = c => c.Label },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
 };";
 
     private readonly string example23RazorCode = @"
@@ -2104,6 +2235,19 @@ public class Product
              Size=""BitSize.Large""
              Placeholder=""Select an item"" />";
     private readonly string example26CsharpCode = @"
+public class Product
+{
+    public string? Label { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
+
 private List<Product> GetBasicCustoms() => new()
 {
     new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
index 9c4d1fa71e..9f07dd9fa6 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
@@ -855,6 +855,20 @@ Combo Chips
              DefaultValues=""@(new[] { ""f-app"", ""f-ban"" })"" />";
     private readonly string example16CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private List<BitDropdownItem<string>> comboBoxItems = new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
     new() { Text = ""Apple"", Value = ""f-app"" },
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
index 3849f2a497..bda882bbb3 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
@@ -1125,6 +1125,20 @@ Combo Chips
 </BitDropdown>";
     private readonly string example16CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];
+
+private readonly List<BitDropdownItem<string>> comboBoxItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
     new() { Text = ""Apple"", Value = ""f-app"" },
@@ -1453,6 +1467,20 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     }
 </BitDropdown>";
     private readonly string example22CsharpCode = @"
+private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];
+
 private bool isLoadingItems;
 private List<BitDropdownItem<string>> delayedItems = [];
 

From 5a98b0bb7005c06c950032a1d2917592662f92e6 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 28 Jul 2026 07:28:51 +0330
Subject: [PATCH 6/7] resolve review comments 2

---
 .../Inputs/Dropdown/BitDropdown.razor         | 16 +++++++------
 .../Inputs/Dropdown/BitDropdown.razor.cs      | 23 ++++++++++++-------
 .../Inputs/Dropdown/BitDropdownSearchMode.cs  |  2 +-
 .../Bit.BlazorUI/Scripts/Dropdowns.ts         | 14 +++++++++++
 .../Inputs/Dropdown/BitDropdownDemo.razor.cs  |  2 +-
 .../_BitDropdownCustomDemo.razor.samples.cs   | 10 ++++----
 .../_BitDropdownOptionDemo.razor.samples.cs   | 14 +++++++++++
 7 files changed, 59 insertions(+), 22 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
index 120955cf0d..abde090255 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
@@ -463,14 +463,16 @@
         <div id="@_footerId">@CalloutFooterTemplate</div>
     }
 
-    @if (HasSearchText && IsLoading is false)
-    {
-        @* A search silently changes the length of a list a screen reader user cannot see, so the new
-           result count is announced. Only rendered while searching, to stay quiet otherwise. *@
-        <div role="status" aria-live="polite" aria-atomic="true" class="bit-drp-lvr">
+    @* A search silently changes the length of a list a screen reader user cannot see, so the new
+       result count is announced. The container is always rendered because a live region has to be in
+       the accessibility tree before its text changes for the change to be announced; only the text
+       comes and goes, so the region stays quiet while there is nothing to announce. *@
+    <div role="status" aria-live="polite" aria-atomic="true" class="bit-drp-lvr">
+        @if (HasSearchText && IsLoading is false)
+        {
             @GetSearchResultsText()
-        </div>
-    }
+        }
+    </div>
 
 </div>
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
index 77246316aa..04057f5ec6 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
@@ -1740,14 +1740,21 @@ private async Task ClearSearchBox()
 
     private void OnSetIsOpen()
     {
-        _ = ClearSearchBox();
+        // The hook of a [CallOnSet] parameter is synchronous, so the work is fired and forgotten.
+        // Wrapped in a local async method (instead of separate discarded tasks) so the steps run in
+        // order rather than racing over _searchText, and so a throwing one surfaces through Blazor's
+        // normal async error handling via the renderer dispatcher instead of on an unobserved task.
+        _ = InvokeAsync(async () =>
+        {
+            await ClearSearchBox();
 
-        // The combo input doubles as the search input, so a text that was typed but never committed
-        // to a selection must not survive the callout, otherwise the trigger keeps showing a filter
-        // term instead of the current selection the next time the dropdown is opened.
-        _ = ClearComboBoxInput();
+            // The combo input doubles as the search input, so a text that was typed but never committed
+            // to a selection must not survive the callout, otherwise the trigger keeps showing a filter
+            // term instead of the current selection the next time the dropdown is opened.
+            await ClearComboBoxInput();
 
-        _ = IsOpen ? OnOpen.InvokeAsync() : OnClose.InvokeAsync();
+            await (IsOpen ? OnOpen.InvokeAsync() : OnClose.InvokeAsync());
+        });
     }
 
     private async ValueTask FocusOnSearchBox()
@@ -1804,7 +1811,7 @@ internal bool IsItemTextMatch(string? text)
         {
             BitDropdownSearchMode.StartsWith => text.StartsWith(search, StringComparison.OrdinalIgnoreCase),
             BitDropdownSearchMode.EndsWith => text.EndsWith(search, StringComparison.OrdinalIgnoreCase),
-            BitDropdownSearchMode.Equals => text.Equals(search, StringComparison.OrdinalIgnoreCase),
+            BitDropdownSearchMode.ExactMatch => text.Equals(search, StringComparison.OrdinalIgnoreCase),
             _ => text.Contains(search, StringComparison.OrdinalIgnoreCase)
         };
     }
@@ -1823,7 +1830,7 @@ internal int GetHighlightIndex(string? text)
         {
             BitDropdownSearchMode.StartsWith => text.StartsWith(search, StringComparison.OrdinalIgnoreCase) ? 0 : -1,
             BitDropdownSearchMode.EndsWith => text.EndsWith(search, StringComparison.OrdinalIgnoreCase) ? text.Length - search.Length : -1,
-            BitDropdownSearchMode.Equals => text.Equals(search, StringComparison.OrdinalIgnoreCase) ? 0 : -1,
+            BitDropdownSearchMode.ExactMatch => text.Equals(search, StringComparison.OrdinalIgnoreCase) ? 0 : -1,
             _ => text.IndexOf(search, StringComparison.OrdinalIgnoreCase)
         };
     }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownSearchMode.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownSearchMode.cs
index a127b0f3bb..5fa2ade630 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownSearchMode.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownSearchMode.cs
@@ -20,5 +20,5 @@ public enum BitDropdownSearchMode
     /// <summary>
     /// An item matches when its text is equal to the search text.
     /// </summary>
-    Equals
+    ExactMatch
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts b/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts
index 3696dc1c30..b2ae574e37 100644
--- a/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts
@@ -2,6 +2,12 @@ namespace BitBlazorUI {
     export class Dropdowns {
         private static _handlers = new Map<string, { element: HTMLElement, handler: (e: KeyboardEvent) => void }[]>();
 
+        // The focus of a jump mode in virtualize mode is applied after an await, so a second key press
+        // arriving in the meantime would have two invocations scrolling and focusing over each other.
+        // Each call stamps its callout with a token and gives up if a newer call has replaced it.
+        // Keyed by the element so the entry disappears with the callout instead of having to be cleaned up.
+        private static _focusGenerations = new WeakMap<HTMLElement, number>();
+
         // The number of animation frames to wait for the items revealed by a programmatic scroll in
         // virtualize mode to be rendered, before giving up and using whatever is rendered by then.
         private static readonly VIRTUALIZE_RENDER_FRAMES = 20;
@@ -88,6 +94,9 @@ namespace BitBlazorUI {
 
             const scroller = callout.querySelector('.bit-drp-scn') as HTMLElement | null;
 
+            const generation = (Dropdowns._focusGenerations.get(callout) ?? 0) + 1;
+            Dropdowns._focusGenerations.set(callout, generation);
+
             let items = Dropdowns._getItems(callout);
             if (items.length === 0) return;
 
@@ -97,6 +106,11 @@ namespace BitBlazorUI {
             // beyond it means scrolling first and continuing with the items rendered afterwards.
             if (virtualize && Dropdowns._isScrollable(scroller)) {
                 const scrolled = await Dropdowns._scrollFor(callout, scroller!, mode, items);
+
+                // A newer key press took over while the scroll was being rendered, so this one is
+                // working from an outdated window and must not move the focus back to it.
+                if (Dropdowns._focusGenerations.get(callout) !== generation) return;
+
                 if (scrolled) {
                     items = scrolled.items;
                     current = scrolled.items.indexOf(document.activeElement as HTMLElement);
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
index bb3607f665..2224c5943d 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
@@ -1548,7 +1548,7 @@ public partial class BitDropdownDemo
                 },
                 new()
                 {
-                    Name = "Equals",
+                    Name = "ExactMatch",
                     Description = "An item matches when its text is equal to the search text.",
                     Value = "3",
                 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
index 91a833959c..4a32be9c68 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
@@ -624,7 +624,7 @@ public class Product
     Title = { Selector = c => c.Title },
     Value = { Selector = c => c.Value },
     ValueSetter = (Product item, string value) => item.Value = value,
-    TextSetter = (string? text, Product item) => item.Text = text
+    TextSetter = (string text, Product item) => item.Text = text
 };";
 
     private readonly string example10RazorCode = @"
@@ -1151,7 +1151,7 @@ public class Product
     Title = { Selector = c => c.Title },
     Value = { Selector = c => c.Value },
     ValueSetter = (Product item, string value) => item.Value = value,
-    TextSetter = (string? text, Product item) => item.Text = text
+    TextSetter = (string text, Product item) => item.Text = text
 };";
 
     private readonly string example15RazorCode = @"
@@ -1220,7 +1220,7 @@ public class Product
     Title = { Selector = c => c.Title },
     Value = { Selector = c => c.Value },
     ValueSetter = (Product item, string value) => item.Value = value,
-    TextSetter = (string? text, Product item) => item.Text = text
+    TextSetter = (string text, Product item) => item.Text = text
 };";
 
     private readonly string example16RazorCode = @"
@@ -1340,7 +1340,7 @@ public class Product
     Title = { Selector = c => c.Title },
     Value = { Selector = c => c.Value },
     ValueSetter = (Product item, string value) => item.Value = value,
-    TextSetter = (string? text, Product item) => item.Text = text
+    TextSetter = (string text, Product item) => item.Text = text
 };";
 
     private readonly string example17RazorCode = @"
@@ -1429,7 +1429,7 @@ public class Product
     Title = { Selector = c => c.Title },
     Value = { Selector = c => c.Value },
     ValueSetter = (Product item, string value) => item.Value = value,
-    TextSetter = (string? text, Product item) => item.Text = text
+    TextSetter = (string text, Product item) => item.Text = text
 };";
 
     private readonly string example18RazorCode = @"
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
index bda882bbb3..22315b8f79 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
@@ -498,6 +498,20 @@ protected override void OnInitialized()
 </BitDropdown>";
     private readonly string example9CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];
+
+private readonly List<BitDropdownItem<string>> comboBoxItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
     new() { Text = ""Apple"", Value = ""f-app"" },

From c1d40981571acf1ee868c40404db67fe100db4a8 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 28 Jul 2026 09:33:20 +0330
Subject: [PATCH 7/7] resolve review comments 3

---
 .../Inputs/Dropdown/BitDropdown.razor.cs      |  8 +++
 .../Inputs/Dropdown/BitDropdownDemo.razor.cs  |  2 +-
 .../Dropdown/_BitDropdownCustomDemo.razor     |  3 +-
 .../_BitDropdownCustomDemo.razor.samples.cs   | 65 +++++++++++++++++++
 .../Dropdown/_BitDropdownItemDemo.razor       |  2 +-
 .../_BitDropdownItemDemo.razor.samples.cs     | 32 +++++++++
 .../Dropdown/_BitDropdownOptionDemo.razor     |  4 +-
 .../_BitDropdownOptionDemo.razor.samples.cs   | 34 ++++++++++
 8 files changed, 146 insertions(+), 4 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
index 04057f5ec6..253f671949 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
@@ -2125,6 +2125,14 @@ private async ValueTask<ItemsProviderResult<TItem>> InternalItemsProvider(ItemsP
         _lastShownItems = [.. providerResult.Items];
         _providerTotalItems = providerResult.TotalItemCount;
 
+        // The caches below are keyed on the search text and the options version, neither of which changes
+        // when the provider hands over a different window of items for the same search, so they have to be
+        // dropped here or the new window would be filtered and positioned against the previous one.
+        _searchedItems = null;
+        _itemPositions = null;
+        _displayItems = null;
+        _searchedItemsCache = null;
+
         UpdateSelectedItemsFromValues();
         await InvokeAsync(StateHasChanged);
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
index 2224c5943d..0fa976a5ea 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
@@ -428,7 +428,7 @@ public partial class BitDropdownDemo
         new()
         {
             Name = "OnDynamicAdd",
-            Type = "EventCallback<string>",
+            Type = "EventCallback<TItem>",
             Description = "The callback that is called when a new item is on added Dynamic ComboBox mode.",
         },
         new()
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
index 7bc0384533..492f6d8406 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
@@ -300,7 +300,7 @@
     <div>
         Three parameters tune the default search without replacing it. <b>SearchMode</b> picks how the text of an item
         is matched against the typed term &mdash; <b>Contains</b> (the default), <b>StartsWith</b>, <b>EndsWith</b> or
-        <b>Equals</b>, always ignoring case. <b>MinSearchLength</b> holds the filtering back until the term reaches the
+        <b>ExactMatch</b>, always ignoring case. <b>MinSearchLength</b> holds the filtering back until the term reaches the
         given number of characters, which keeps a one-letter term from being treated as a real query (and, with an
         <b>ItemsProvider</b>, from turning every first keystroke into a request). <b>HighlightSearch</b> emphasizes the
         matched part of each item text so the reason an item is in the result is visible at a glance. Whenever a search
@@ -1202,6 +1202,7 @@
                      ChipsRemoveIcon="@BitIconInfo.Css("bi bi-x-circle")"
                      Items="GetBasicCustoms()"
                      NameSelectors="nameSelectors"
+                     DefaultValues="@(Array.Empty<string>())"
                      Placeholder="Select items" />
 
         <br /><br />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
index 4a32be9c68..6231194ce4 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
@@ -657,6 +657,21 @@ public class Product
              Placeholder=""Select an item""
              NameSelectors=""comboBoxNameSelectors"" />";
     private readonly string example10CsharpCode = @"
+public class Product
+{
+    public string? Label { get; set; }
+    public string? CssClass { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? CssStyle { get; set; }
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
+
 private string? immediateSearchValue;
 private string? debouncedSearchValue;
 
@@ -699,6 +714,23 @@ public class Product
     Text = { Selector = c => c.Text },
     Title = { Selector = c => c.Title },
     Value = { Selector = c => c.Value },
+};
+
+private BitDropdownNameSelectors<Product, string> comboBoxNameSelectors = new()
+{
+    AriaLabel = { Selector = c => c.Label },
+    Class = { Selector = c => c.CssClass },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Style = { Selector = c => c.CssStyle },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+    ValueSetter = (Product item, string value) => item.Value = value,
+    TextSetter = (string text, Product item) => item.Text = text
 };";
 
     private readonly string example11RazorCode = @"
@@ -1600,6 +1632,22 @@ public class Product
 };";
 
     private readonly string example21RazorCode = @"
+<style>
+    .custom-drp {
+        gap: 10px;
+        display: flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+    }
+
+    .custom-drp.custom-drp-empty {
+        color: orangered;
+        padding: 5px 12px;
+        justify-content: center;
+    }
+</style>
+
 <BitDropdown Label=""Default""
              Items=""emptyCustoms""
              NameSelectors=""nameSelectors""
@@ -1698,6 +1746,22 @@ public class Product
 };";
 
     private readonly string example22RazorCode = @"
+<style>
+    .custom-drp {
+        gap: 10px;
+        display: flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+    }
+
+    .custom-drp.custom-drp-empty {
+        color: orangered;
+        padding: 5px 12px;
+        justify-content: center;
+    }
+</style>
+
 <BitDropdown Label=""IsLoading""
              IsLoading
              Items=""GetBasicCustoms()""
@@ -2087,6 +2151,7 @@ public class Product
              ChipsRemoveIcon=""@BitIconInfo.Css(""bi bi-x-circle"")""
              Items=""GetBasicCustoms()""
              NameSelectors=""nameSelectors""
+             DefaultValues=""@(Array.Empty<string>())""
              Placeholder=""Select items"" />
         
 <BitDropdown Label=""Search box icons (external)""
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
index 63abb33de7..866136bc61 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
@@ -298,7 +298,7 @@
     <div>
         Three parameters tune the default search without replacing it. <b>SearchMode</b> picks how the text of an item
         is matched against the typed term &mdash; <b>Contains</b> (the default), <b>StartsWith</b>, <b>EndsWith</b> or
-        <b>Equals</b>, always ignoring case. <b>MinSearchLength</b> holds the filtering back until the term reaches the
+        <b>ExactMatch</b>, always ignoring case. <b>MinSearchLength</b> holds the filtering back until the term reaches the
         given number of characters, which keeps a one-letter term from being treated as a real query (and, with an
         <b>ItemsProvider</b>, from turning every first keystroke into a request). <b>HighlightSearch</b> emphasizes the
         matched part of each item text so the reason an item is in the result is visible at a glance. Whenever a search
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
index 9f07dd9fa6..9ac8b59f64 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
@@ -1024,6 +1024,22 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
 };";
 
     private readonly string example21RazorCode = @"
+<style>
+    .custom-drp {
+        gap: 10px;
+        display: flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+    }
+
+    .custom-drp.custom-drp-empty {
+        color: orangered;
+        padding: 5px 12px;
+        justify-content: center;
+    }
+</style>
+
 <BitDropdown Label=""Default""
              Items=""emptyItems""
              Placeholder=""Select an item""
@@ -1093,6 +1109,22 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
 };";
 
     private readonly string example22RazorCode = @"
+<style>
+    .custom-drp {
+        gap: 10px;
+        display: flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+    }
+
+    .custom-drp.custom-drp-empty {
+        color: orangered;
+        padding: 5px 12px;
+        justify-content: center;
+    }
+</style>
+
 <BitDropdown Label=""IsLoading""
              IsLoading
              Items=""GetBasicItems()""
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
index 6ad6e63419..939b906d6c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
@@ -430,7 +430,7 @@
     <div>
         Three parameters tune the default search without replacing it. <b>SearchMode</b> picks how the text of an item
         is matched against the typed term &mdash; <b>Contains</b> (the default), <b>StartsWith</b>, <b>EndsWith</b> or
-        <b>Equals</b>, always ignoring case. <b>MinSearchLength</b> holds the filtering back until the term reaches the
+        <b>ExactMatch</b>, always ignoring case. <b>MinSearchLength</b> holds the filtering back until the term reaches the
         given number of characters, which keeps a one-letter term from being treated as a real query (and, with an
         <b>ItemsProvider</b>, from turning every first keystroke into a request). <b>HighlightSearch</b> emphasizes the
         matched part of each item text so the reason an item is in the result is visible at a glance. Whenever a search
@@ -1013,6 +1013,7 @@
                      Combo Chips
                      MultiSelect
                      AutoClearSearch
+                     DefaultValues="@(Array.Empty<string>())"
                      Placeholder="Type to filter, then pick"
                      TItem="BitDropdownOption<string>" TValue="string">
             @foreach (var item in comboBoxItems)
@@ -1504,6 +1505,7 @@
                      Chips
                      MultiSelect
                      ChipsRemoveIcon="@BitIconInfo.Css("bi bi-x-circle")"
+                     DefaultValues="@(Array.Empty<string>())"
                      Placeholder="Select items"
                      TItem="BitDropdownOption<string>" TValue="string">
             @foreach (var item in basicItems)
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
index 22315b8f79..c3664b711b 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
@@ -1117,6 +1117,7 @@ Responsive MultiSelect
              Combo Chips
              MultiSelect
              AutoClearSearch
+             DefaultValues=""@(Array.Empty<string>())""
              Placeholder=""Type to filter, then pick""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
     @foreach (var item in comboBoxItems)
@@ -1347,6 +1348,22 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
 ];";
 
     private readonly string example21RazorCode = @"
+<style>
+    .custom-drp {
+        gap: 10px;
+        display: flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+    }
+
+    .custom-drp.custom-drp-empty {
+        color: orangered;
+        padding: 5px 12px;
+        justify-content: center;
+    }
+</style>
+
 <BitDropdown Label=""Default""
              Placeholder=""Select an item""
              TItem=""BitDropdownOption<string>"" TValue=""string"" />
@@ -1427,6 +1444,22 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
 ];";
 
     private readonly string example22RazorCode = @"
+<style>
+    .custom-drp {
+        gap: 10px;
+        display: flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+    }
+
+    .custom-drp.custom-drp-empty {
+        color: orangered;
+        padding: 5px 12px;
+        justify-content: center;
+    }
+</style>
+
 <BitDropdown Label=""IsLoading""
              IsLoading
              DefaultValue=""@string.Empty""
@@ -1644,6 +1677,7 @@ private async Task LoadDelayedItems()
              Chips
              MultiSelect
              ChipsRemoveIcon=""@BitIconInfo.Css(""bi bi-x-circle"")""
+             DefaultValues=""@(Array.Empty<string>())""
              Placeholder=""Select items""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
     @foreach (var item in basicItems)