diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
index b4fadcdb8c7..d1eb298d9f5 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
@@ -23,6 +23,19 @@
     var hasChipRemoveButtons = Chips && IsEnabled && ReadOnly is false &&
                                _selectedItems.Take(GetDisplayedItemsCount()).Any(GetIsEnabled);
 
+    // The combobox role, and the state that goes with it, belong on the element the keyboard actually
+    // lands on - which is the field itself only while it has nothing focusable inside it. The ComboBox
+    // mode has an input, so the role moves onto it: a field that keeps a tab stop of its own around an
+    // input is two tab stops for one control, and the element a screen reader then describes is a plain
+    // text box that reports neither that it has a list nor whether that list is showing.
+    var comboboxOnField = Combo is false;
+
+    // The ComboBox input of the responsive panel takes the focus while that panel is on the screen, and
+    // the combobox role goes with it: the field's own input is behind the panel and its overlay, so
+    // leaving it a combobox would point a second one at the same listbox and leave a tab stop on an
+    // element the user cannot see.
+    var comboboxOnFieldInput = Combo && _isResponsiveMode is false;
+
     RenderFragment emptyContent =
         @* The empty state is not an option, so it is marked presentational to keep it out of the
            options of the listbox it is rendered in; its text stays exposed either way. *@
@@ -100,34 +113,30 @@
         </label>
     }
 
-    @* The combobox is the interactive element of this input, so it is the one InputElement points at:
-       the inherited FocusAsync of BitInputBase then focuses what a user would focus by hand. *@
-       
-    @* The combobox role is on this element, so the autocomplete behavior of the ComboBox mode has
-       to be reported here and not only on the input it wraps. *@
+    @* The field is the interactive element of a dropdown that is not typed into, so it is the one
+       InputElement points at and the one FocusAsync (overridden for the ComboBox mode) focuses. *@
     <div @ref="InputElement"
          @onclick="HandleOnClick"
          @onkeydown="HandleOnTriggerKeyDown"
          @onfocusin="HandleOnFocusIn"
          @onfocusout="HandleOnFocusOut"
          title="@Title"
-         role="combobox"
          id="@_dropdownId"
          style="@Styles?.Container"
          class="bit-drp-wrp @Classes?.Container"
-         autofocus="@AutoFocus"
-         tabindex="@(IsEnabled ? (TabIndex ?? "0") : "-1")"
-         aria-haspopup="listbox"
-         aria-autocomplete="@(Combo ? "list" : null)"
-         aria-required="@(Required ? "true" : null)"
-         aria-readonly="@(ReadOnly ? "true" : null)"
-         aria-invalid="@(ValueInvalid is true ? "true" : null)"
-         aria-disabled="@(IsEnabled is false ? "true" : null)"
-         aria-expanded=@(IsOpen ? "true" : "false")
-         aria-label="@AriaLabel"
-         aria-labelledby="@(AriaLabel.HasValue() ? null : GetDropdownAriaLabelledby())"
-         aria-describedby="@(HasDescription ? _descriptionId : null)"
-         aria-controls="@(IsOpen? _scrollContainerId : null)">
+         role="@(comboboxOnField ? "combobox" : null)"
+         autofocus="@(comboboxOnField && AutoFocus)"
+         tabindex="@(IsEnabled && comboboxOnField ? (TabIndex ?? "0") : "-1")"
+         aria-haspopup="@(comboboxOnField ? "listbox" : null)"
+         aria-required="@(comboboxOnField && Required ? "true" : null)"
+         aria-readonly="@(comboboxOnField && ReadOnly ? "true" : null)"
+         aria-invalid="@(comboboxOnField && IsInvalid ? "true" : null)"
+         aria-disabled="@(comboboxOnField && IsEnabled is false ? "true" : null)"
+         aria-expanded="@(comboboxOnField ? (IsOpen ? "true" : "false") : null)"
+         aria-label="@(comboboxOnField ? AriaLabel : null)"
+         aria-labelledby="@(comboboxOnField && AriaLabel.HasNoValue() ? GetDropdownAriaLabelledby() : null)"
+         aria-describedby="@(comboboxOnField ? DescribedBy : null)"
+         aria-controls="@(comboboxOnField && IsOpen ? _scrollContainerId : null)">
 
         @if (PrefixTemplate is not null)
         {
@@ -190,11 +199,16 @@
                         @* The chip only shows how many selections it stands for. The ones it hides are named
                            in its title for the pointer, and take its place in the accessible name so that
                            the combobox (which is named after this container) still reports them all. *@
+                        @* aria-label is not exposed on an element with no role of its own, so the items the
+                           chip stands for are RENDERED for a screen reader rather than asserted in an
+                           attribute: the counter is hidden from it and the names take its place, both in
+                           the accessible name of the combobox (computed from this subtree) and in the
+                           content a reader walks through. The pointer gets them from the title. *@
                         <span style="@Styles?.OverflowChip"
                               class="bit-drp-chp bit-drp-ovf @Classes?.OverflowChip"
-                              title="@GetOverflowItemsText()"
-                              aria-label="@GetOverflowItemsText()">
-                            @GetOverflowText()
+                              title="@GetOverflowItemsText()">
+                            <span aria-hidden="true">@GetOverflowText()</span>
+                            <span class="bit-drp-vhd">@GetOverflowItemsText()</span>
                         </span>
                     }
                 }
@@ -204,6 +218,16 @@
                     {
                         @TextTemplate(this)
                     }
+                    else if (GetOverflowItemsCount() > 0)
+                    {
+                        @* Past the display limit the text is a count of the selection, which is all a
+                           screen reader would otherwise be told the field holds - and the names of what
+                           is selected are exactly what it is for. They are rendered in its place the
+                           same way the overflow chip renders the ones it stands for, and the pointer
+                           gets them from the title. *@
+                        <span aria-hidden="true" title="@GetSelectedItemsText()">@GetText()</span>
+                        <span class="bit-drp-vhd">@GetSelectedItemsText()</span>
+                    }
                     else
                     {
                         @GetText()
@@ -231,13 +255,16 @@
                    aria-labelledby is read whatever its hidden state, so it names the combobox while
                    staying out of the content a screen reader walks through - where the chips already
                    carry the same text. *@
-                <span id="@_dropdownTextContainerId" style="display:none" hidden>@GetChipsAriaText()</span>
+                <span id="@_dropdownTextContainerId" style="display:none" hidden>@GetSelectedItemsText()</span>
             }
 
             @if (Combo)
             {
-                @* An input does not inherit the accessible name of the combobox element around
-                   it, so without an AriaLabel it is named after the label by hand. *@
+                @* The combobox of this mode: the element the focus lands on, so it is the one that
+                   reports the list and whether it is showing. An input does not inherit the accessible
+                   name of anything around it, so without an AriaLabel it is named after the label by
+                   hand. Its readonly and disabled states are the native attributes, which is what the
+                   aria- pair would only be restating. *@
                 <input @ref="_comboBoxInputRef"
                        @onkeydown="@HandleOnKeyDown"
                        @oninput="@HandleOnComboInput"
@@ -247,14 +274,21 @@
                        style="@Styles?.ComboBoxInput"
                        class="bit-drp-inp @Classes?.ComboBoxInput"
                        type="text"
+                       role="@(comboboxOnFieldInput ? "combobox" : null)"
                        value="@_comboInputText"
                        readonly="@ReadOnly"
+                       autofocus="@AutoFocus"
+                       tabindex="@(comboboxOnFieldInput ? TabIndex : "-1")"
                        aria-label="@AriaLabel"
                        aria-labelledby="@(AriaLabel.HasNoValue() && HasLabel ? _labelId : null)"
-                       aria-describedby="@(HasDescription ? _descriptionId : null)"
-                       aria-autocomplete="list"
-                       aria-activedescendant="@(IsOpen ? GetCommitTargetId() : null)"
-                       aria-controls="@(IsOpen ? _scrollContainerId : null)"
+                       aria-describedby="@DescribedBy"
+                       aria-haspopup="@(comboboxOnFieldInput ? "listbox" : null)"
+                       aria-autocomplete="@(comboboxOnFieldInput ? "list" : null)"
+                       aria-required="@(Required ? "true" : null)"
+                       aria-invalid="@(IsInvalid ? "true" : null)"
+                       aria-expanded="@(comboboxOnFieldInput ? (IsOpen ? "true" : "false") : null)"
+                       aria-activedescendant="@(comboboxOnFieldInput && IsOpen ? GetCommitTargetId() : null)"
+                       aria-controls="@(comboboxOnFieldInput && IsOpen ? _scrollContainerId : null)"
                        placeholder="@(_selectedItems.Count > 0 ? "" : Placeholder)"
                        autocomplete="@BitAutoCompleteValue.NewPassword"
                        disabled="@(IsEnabled is false)" />
@@ -322,6 +356,27 @@
         }
     </select>
 
+    @if (HasErrorMessage)
+    {
+        @* What is wrong with the selection is the first thing to read under the field, so it comes
+           before the description. It carries no live role of its own - the region at the end of the
+           component is what announces it, so it is never read out twice. *@
+        <div id="@_errorId"
+             style="@Styles?.ErrorMessageContainer"
+             class="bit-drp-erm @Classes?.ErrorMessageContainer">
+            @if (ErrorMessageTemplate is not null)
+            {
+                @ErrorMessageTemplate
+            }
+            else
+            {
+                <span style="@Styles?.ErrorMessage" class="@Classes?.ErrorMessage">
+                    @ErrorMessage
+                </span>
+            }
+        </div>
+    }
+
     @if (HasDescription)
     {
         @* Named by the combobox through aria-describedby, so it is read as part of the dropdown
@@ -342,6 +397,13 @@
         </span>
     }
 
+    @if (AriaDescription.HasValue())
+    {
+        @* aria-describedby takes an id reference, so the text written for a screen reader alone has to
+           live in an element of its own. It is only ever read as part of the dropdown. *@
+        <span id="@_ariaDescriptionId" class="bit-drp-vhd">@AriaDescription</span>
+    }
+
     @* 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
@@ -350,7 +412,14 @@
        live region inside a hidden element announces nothing - which the loading state, the one state
        that changes while the callout may well be closed, depends on. *@
     <div role="status" aria-live="polite" aria-atomic="true" class="bit-drp-lvr">
-        @if (IsLoading)
+        @* The rejection wins over everything else here: the rest say what the dropdown is doing, this
+           says what is wrong with what it holds. Text only, never ErrorMessageTemplate, for the same
+           reason LoadingTemplate is left out below. *@
+        @if (ErrorMessage.HasValue())
+        {
+            @ErrorMessage
+        }
+        else if (IsLoading)
         {
             @* Text only, never LoadingTemplate: the template is arbitrary markup meant to be seen -
                a spinner, an image, something interactive - and rendering it a second time here would
@@ -375,8 +444,10 @@
     </div>
 </div>
 
+@* Like the callout, the overlay is a sibling of the root element and is reparented to the body while it
+   is open, so the public variables it reads are copied onto it by hand - see GetOverlayStyles. *@
 <div @onclick="CloseCalloutAndRestoreFocus"
-     style="display:@(IsOpen ? "block" : "none");@Styles?.Overlay"
+     style="@GetOverlayStyles()"
      id="@_overlayId"
      class="bit-drp-ovl @Classes?.Overlay"></div>
 
@@ -391,7 +462,7 @@
      id="@_calloutId"
      tabindex="0"
      dir="@Dir?.ToString().ToLower()"
-     style="@Styles?.Callout"
+     style="@GetCalloutStyles()"
      class="@GetCalloutCssClasses()">
 
     @if (Responsive)
@@ -440,11 +511,14 @@
                    style="@Styles?.SearchBoxIcon"
                    class="@searchBoxIconCss @Classes?.SearchBoxIcon" />
             </div>
+            @* aria-controls names the list this box filters: the box sits outside the listbox and would
+               otherwise be a field that narrows nothing a screen reader can tie it to. *@
             <input @ref="_searchInputRef" @onfocusin="HandleSearchBoxFocusIn" @onfocusout="HandleSearchBoxFocusOut" @oninput="@HandleOnSearchBoxInput" @onchange="@HandleOnSearchBoxChange"
                    type="text"
                    role="searchbox"
                    value="@_searchInputText"
                    aria-label="@(SearchBoxAriaLabel ?? "Search text")"
+                   aria-controls="@_scrollContainerId"
                    placeholder="@SearchBoxPlaceholder"
                    style="@Styles?.SearchBoxInput"
                    class="bit-drp-sin @Classes?.SearchBoxInput" />
@@ -476,18 +550,23 @@
     {
         <div style="@Styles?.ResponsiveComboInputContainer"
              class="bit-drp-cbi @Classes?.ResponsiveComboInputContainer">
-            @* An input does not inherit the accessible name of the combobox element around
-               it, so without an AriaLabel it is named after the label by hand. *@
+            @* The input of the responsive panel, which takes the focus - and with it the combobox role
+               and its state - from the one in the field for as long as the panel is on the screen. *@
             <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"
+                   role="combobox"
                    value="@_comboInputText"
                    readonly="@ReadOnly"
                    aria-label="@AriaLabel"
                    aria-labelledby="@(AriaLabel.HasNoValue() && HasLabel ? _labelId : null)"
-                   aria-describedby="@(HasDescription ? _descriptionId : null)"
+                   aria-describedby="@DescribedBy"
+                   aria-haspopup="listbox"
                    aria-autocomplete="list"
+                   aria-required="@(Required ? "true" : null)"
+                   aria-invalid="@(IsInvalid ? "true" : null)"
+                   aria-expanded="@(IsOpen ? "true" : "false")"
                    aria-activedescendant="@(IsOpen ? GetCommitTargetId() : null)"
                    aria-controls="@(IsOpen ? _scrollContainerId : null)"
                    placeholder="@Placeholder"
@@ -521,7 +600,9 @@
             var selectAllAriaChecked = allSelected ? "true" : anySelected ? "mixed" : "false";
             <div style="@Styles?.SelectAllContainer"
                  class="@selectAllClasses @Classes?.SelectAllContainer">
-                @* Reached with the arrow keys like the options below it, so it stays out of the tab order too. *@
+                @* Reached with the arrow keys like the options below it, so it stays out of the tab order too.
+                   It sits outside the listbox it commands, so nothing but its aria-controls says which
+                   list it is the select all of. *@
                 <button @onclick="HandleOnSelectAllClick"
                         type="button"
                         role="checkbox"
@@ -529,7 +610,8 @@
                         style="@Styles?.SelectAllButton"
                         class="bit-drp-mcn bit-drp-sab @Classes?.SelectAllButton"
                         disabled="@(IsEnabled is false || ReadOnly)"
-                        aria-checked="@selectAllAriaChecked">
+                        aria-checked="@selectAllAriaChecked"
+                        aria-controls="@_scrollContainerId">
                     <div style="@Styles?.SelectAllCheckBox"
                          class="bit-drp-chb @Classes?.SelectAllCheckBox">
                         <i aria-hidden="true"
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 612b2f29b0a..8c4d4554db6 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
@@ -48,13 +48,14 @@ namespace Bit.BlazorUI;
     private int _selectAllStateSelectionVersion = -1;
     private (bool HasCandidates, bool AllSelected, bool AnySelected)? _selectAllState;
     private bool _isResponsiveMode;
-    private int _calloutScrollOffset = -1;
+    private (bool SearchBox, bool SelectAll)? _calloutChrome;
     private bool _internalIsOpenChange;
     private bool _suppressOpenOnFocus;
     private bool _openedOnFocus;
     private bool _inputSearchHasFocus;
     private bool _inputComboHasFocus;
     private bool _pendingSearchBoxFocus;
+    private int? _pendingSearchBoxCaret;
     private List<TItem> _selectedItems = [];
     private List<TItem> _lastShownItems = [];
     private ICollection<TItem>? _lastItemsReference;
@@ -68,6 +69,8 @@ namespace Bit.BlazorUI;
     private readonly BitInputRateLimiter<ChangeEventArgs> _rateLimiter = new();
 
     private string _labelId = string.Empty;
+    private string _errorId = string.Empty;
+    private string _ariaDescriptionId = string.Empty;
     private string _descriptionId = string.Empty;
     private string _headerId = string.Empty;
     private string _footerId = string.Empty;
@@ -88,6 +91,30 @@ namespace Bit.BlazorUI;
 
 
 
+    /// <summary>
+    /// Gets or sets the cascading parameters for the dropdown component.
+    /// </summary>
+    /// <remarks>
+    /// This property receives its value from an ancestor component via Blazor's cascading parameter mechanism.
+    /// <br />
+    /// The intended use is to allow shared configuration or settings to be applied to multiple dropdown components through the <see cref="BitParams"/> component.
+    /// <br />
+    /// Only a <see cref="BitDropdownParams{TItem, TValue}"/> closed over this dropdown's own type arguments
+    /// is matched, so one <see cref="BitParams"/> can carry one object per pair of type arguments.
+    /// </remarks>
+    [CascadingParameter(Name = BitDropdownParams<TItem, TValue>.ParamName)]
+    public BitDropdownParams<TItem, TValue>? CascadingParameters { get; set; }
+
+
+
+    /// <summary>
+    /// Detailed description of the dropdown for the benefit of screen readers. It is rendered into a
+    /// visually hidden element that the dropdown references through its aria-describedby attribute,
+    /// which is what lets a field carry an instruction too long to show next to it. It is read after
+    /// <see cref="Description"/>, so the two can be used together.
+    /// </summary>
+    [Parameter] public string? AriaDescription { get; set; }
+
     /// <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.
@@ -341,6 +368,29 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public string? EmptyText { get; set; }
 
+    /// <summary>
+    /// The message shown under the dropdown when the selection was rejected, which is what turns a red
+    /// frame into something the user can act on. Setting it marks the dropdown invalid on its own - the
+    /// same look and the same aria-invalid attribute <see cref="Invalid"/> gives it - and the message is
+    /// referenced by the dropdown through its aria-describedby attribute and announced by its live
+    /// region, so it reaches a screen reader the moment it shows up rather than only on the next focus.
+    /// </summary>
+    /// <remarks>
+    /// It is meant for a rejection the app itself knows about (a server response, a rule spanning two
+    /// fields). A dropdown inside an <c>EditForm</c> already gets its messages from the cascading
+    /// EditContext through the <c>ValidationMessage</c> component.
+    /// </remarks>
+    [Parameter, ResetClassBuilder]
+    public string? ErrorMessage { get; set; }
+
+    /// <summary>
+    /// The custom content of the error message, which replaces the plain <see cref="ErrorMessage"/> text
+    /// and marks the dropdown invalid in the same way. Only the plain text is announced by the live
+    /// region, since a template is free to render anything at all.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public RenderFragment? ErrorMessageTemplate { get; set; }
+
     /// <summary>
     /// Decides whether the text committed in the ComboBox mode already stands for one of the selected
     /// items, in place of the default comparison of that text with the item texts, ignoring case. It
@@ -381,6 +431,15 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public bool Immediate { get; set; }
 
+    /// <summary>
+    /// Marks the dropdown as invalid without an <c>EditContext</c> having said so, which is what a
+    /// rejection the app decided on its own (a server response, a rule spanning two fields) needs. It
+    /// gives the dropdown the same look and the same aria-invalid attribute an invalid bound value does.
+    /// Setting <see cref="ErrorMessage"/> implies it.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public bool Invalid { 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.
@@ -830,7 +889,9 @@ namespace Bit.BlazorUI;
     [Parameter] public RenderFragment? SuffixTemplate { get; set; }
 
     /// <summary>
-    /// The custom template for the text of the dropdown.
+    /// The custom template for the text of the dropdown, which replaces the selection it shows once
+    /// something is selected. It has no effect with <see cref="Chips"/> enabled, where the selection is
+    /// drawn as one chip per item and <see cref="ChipTemplate"/> is what renders each of them.
     /// </summary>
     [Parameter] public RenderFragment<BitDropdown<TItem, TValue>>? TextTemplate { get; set; }
 
@@ -930,6 +991,23 @@ namespace Bit.BlazorUI;
     /// </summary>
     public ValueTask FocusComboInputAsync() => Combo ? FocusTrigger() : ValueTask.CompletedTask;
 
+    /// <inheritdoc/>
+    /// <remarks>
+    /// In the ComboBox mode the element that takes the focus is the editable input inside the field,
+    /// which is where the keyboard lands and what carries the combobox role; the field around it is
+    /// out of the tab order there, so focusing it would leave the caret nowhere.
+    /// </remarks>
+    public override ValueTask FocusAsync() => Combo ? FocusTrigger() : base.FocusAsync();
+
+    /// <inheritdoc cref="FocusAsync()"/>
+    /// <inheritdoc cref="FocusAsync()" path="/remarks"/>
+    public override ValueTask FocusAsync(bool preventScroll)
+    {
+        if (Combo is false) return base.FocusAsync(preventScroll);
+
+        return (IsOpen && _isResponsiveMode ? _comboBoxInputResponsiveRef : _comboBoxInputRef).FocusAsync(preventScroll);
+    }
+
     /// <summary>
     /// The ElementReference to the search input element, which is null while the search box is not
     /// rendered - it needs <see cref="ShowSearchBox"/> and an open callout to live in, and it is
@@ -997,6 +1075,14 @@ public async Task SelectItem(TItem? item)
         await HandleOnItemClick(item);
     }
 
+    /// <summary>
+    /// Clears the whole selection exactly as the clear button does, so the same events fire: it reports
+    /// itself through <see cref="OnClear"/> and empties the typed text of the ComboBox mode along with
+    /// the selection. It is refused in the same places that button is - a read-only dropdown, a one-way
+    /// binding - which is what unselecting the items one by one cannot express.
+    /// </summary>
+    public Task ClearAsync() => HandleOnClearClick();
+
     /// <summary>
     /// Unselects the given item exactly as picking an already selected one in the callout would (or, in
     /// single select mode, as the clear button would), so the same events fire. An item that is not
@@ -1673,6 +1759,11 @@ protected override void RegisterCssClasses()
 
         ClassBuilder.Register(() => GetSizeClass());
 
+        // The base class marks the root invalid from the EditContext alone, which knows nothing about a
+        // rejection the app itself decided on; it is registered separately rather than folded into that
+        // one so the two cannot both add the class to the same element.
+        ClassBuilder.Register(() => HasError && ValueInvalid is not true ? "bit-inv" : string.Empty);
+
         ClassBuilder.Register(() => Required ? "bit-drp-req" : string.Empty);
 
         ClassBuilder.Register(() => ReadOnly ? "bit-drp-rol" : string.Empty);
@@ -1695,8 +1786,15 @@ protected override void RegisterCssStyles()
         StyleBuilder.Register(() => FitWidth ? "width:fit-content" : string.Empty);
     }
 
+    [DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(BitDropdownParams<,>))]
     protected override async Task OnInitializedAsync()
     {
+        // The cascade is applied here as well as in OnParametersSet, because this method already reads the
+        // parameters it would otherwise only get after the first render: MultiSelect decides which of the
+        // two initialization branches runs, and ItemsProvider and Items decide whether an empty item
+        // collection is created for the dropdown.
+        CascadingParameters?.UpdateParameters(this);
+
         _dropdownId = $"Dropdown-{UniqueId}";
         _calloutId = $"{_dropdownId}-callout";
         _overlayId = $"{_dropdownId}-overlay";
@@ -1705,6 +1803,8 @@ protected override async Task OnInitializedAsync()
         _footerId = $"{_dropdownId}-footer";
 
         _labelId = $"{_dropdownId}-label";
+        _errorId = $"{_dropdownId}-error";
+        _ariaDescriptionId = $"{_dropdownId}-aria-description";
         _descriptionId = $"{_dropdownId}-description";
         _dropdownTextContainerId = $"{_dropdownId}-text-container";
 
@@ -1757,6 +1857,8 @@ protected override async Task OnInitializedAsync()
 
     protected override void OnParametersSet()
     {
+        CascadingParameters?.UpdateParameters(this);
+
         // Options render their items themselves and Blazor skips re-rendering them when only the
         // dropdown's own parameters (Styles, ItemTemplate, ...) change, so push a re-render to each one.
         RefreshOptions();
@@ -1811,6 +1913,15 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
                 await FocusOnSearchBox();
             }
 
+            // A character typed on the closed trigger went into the search box, which only holds it as
+            // of this render (see TypeIntoSearchBox).
+            if (_pendingSearchBoxCaret is int caret)
+            {
+                _pendingSearchBoxCaret = null;
+
+                await FocusSearchBoxCaret(caret);
+            }
+
             return;
         }
 
@@ -2345,10 +2456,53 @@ private async Task HandleOnTriggerKeyDown(KeyboardEventArgs e)
         else if (IsPrintableKey(e))
         {
             await OpenCallout();
-            await FocusItem(BitDropdownFocusMode.Char, GetTypeAheadBuffer(e.Key!));
+
+            // A dropdown that filters through a search box has no type-ahead: HandleOnCalloutKeyDown leaves
+            // every printable key to that box, and Dropdowns.ts hands one typed on an option back to it. The
+            // character that opened the list is therefore typed INTO it rather than spent on a focus move,
+            // which would have dropped it and left the next character to start the term on its own.
+            if (HasSearchBox)
+            {
+                await TypeIntoSearchBox(e.Key!);
+            }
+            else
+            {
+                await FocusItem(BitDropdownFocusMode.Char, GetTypeAheadBuffer(e.Key!));
+            }
         }
     }
 
+    // The first character of a search typed on a closed dropdown, which the search box never saw: the key
+    // was handled by the trigger the focus was still on. It is put into the box, and the box takes the
+    // focus, so the characters that follow simply continue the term natively.
+    private async Task TypeIntoSearchBox(string key)
+    {
+        var text = (_searchInputText ?? string.Empty) + key;
+
+        // Through the input handler, so the term follows the same Immediate / debounce / throttle path a
+        // typed character takes instead of applying itself on rules of its own.
+        await HandleOnSearchBoxInput(new ChangeEventArgs { Value = text });
+
+        // The input only holds the new text as of the render this handler is followed by, so the focus -
+        // and the caret that has to end up behind the character - is left to OnAfterRenderAsync rather
+        // than moved onto a value that is still the one the box had.
+        _pendingSearchBoxCaret = text.Length;
+    }
+
+    // Focuses the search box and puts the caret at the given offset, whatever AutoFocusSearchBox says: this
+    // is not the focus an opening hands to the box, it is the box being typed into.
+    private async Task FocusSearchBoxCaret(int caret)
+    {
+        if (IsEnabled is false || HasSearchBox is false) return;
+        if (IsOpen is false || IsRendered is false || IsDisposed) return;
+
+        try
+        {
+            await _js.BitDropdownsFocusSearchBox(_calloutId, caret);
+        }
+        catch (JSDisconnectedException) { } // we can ignore this exception here
+    }
+
     // See the note on HandleOnTriggerKeyDown about keeping these keys in sync with Dropdowns.ts.
     private async Task HandleOnCalloutKeyDown(KeyboardEventArgs e)
     {
@@ -2403,9 +2557,11 @@ private async Task HandleOnCalloutKeyDown(KeyboardEventArgs e)
                 {
                     await HandleOnSelectAllClick();
                 }
-                // 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.
-                else if (Combo is false && _inputSearchHasFocus is false && IsPrintableKey(e))
+                // In Combo mode the combo input is the type-ahead, and so is the search box of a dropdown
+                // that has one: the keydown listener of Dropdowns.ts hands a printable key typed on an
+                // option back to whichever of the two is there, and a type-ahead on top of it would move
+                // the focus away from the field the character is about to be typed into.
+                else if (Combo is false && HasSearchBox is false && IsPrintableKey(e))
                 {
                     await FocusItem(BitDropdownFocusMode.Char, GetTypeAheadBuffer(e.Key!));
                 }
@@ -3063,6 +3219,34 @@ private string GetSearchBoxClasses()
     // The same, for the description element carrying _descriptionId.
     private bool HasDescription => DescriptionTemplate is not null || Description.HasValue();
 
+    // The same, for the error element carrying _errorId.
+    private bool HasErrorMessage => ErrorMessage.HasValue() || ErrorMessageTemplate is not null;
+
+    // A rejection the app decided on its own, which the EditContext knows nothing about. A message is
+    // one: a field that says what is wrong with its value is a field saying the value is wrong.
+    private bool HasError => Invalid || HasErrorMessage;
+
+    // What the dropdown reports to assistive technologies as the state of its value: either the
+    // rejection the EditContext produced or the one the app asserted here.
+    private bool IsInvalid => ValueInvalid is true || HasError;
+
+    // Every piece of text that describes the field rather than names it, in reading order: what is wrong
+    // with the value first, then the visible helper text, then the one written for a screen reader alone.
+    private string? DescribedBy
+    {
+        get
+        {
+            var ids = string.Join(' ', new[]
+            {
+                HasErrorMessage ? _errorId : null,
+                HasDescription ? _descriptionId : null,
+                AriaDescription.HasValue() ? _ariaDescriptionId : null
+            }.Where(id => id.HasValue()));
+
+            return ids.HasValue() ? ids : null;
+        }
+    }
+
     private string GetDropdownAriaLabelledby()
     {
         return HasLabel ? $"{_labelId} {_dropdownTextContainerId}" : _dropdownTextContainerId;
@@ -3304,42 +3488,32 @@ private async Task HandleOnAddItemComboClick()
     }
 
     // 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 (HasSearchBox)
-        {
-            offset += Size switch { BitSize.Small => 26, BitSize.Large => 40, _ => 32 };
-        }
-
-        if (HasSelectAllItem)
-        {
-            offset += Size switch { BitSize.Small => 31, BitSize.Large => 45, _ => 37 };
-        }
+    // above it - the search box and the select all row - and those are sized with --bit-Dropdown-min-height
+    // and --bit-Dropdown-item-height, which an author is free to override. So the heights are not repeated
+    // here at all: the callout is asked to measure its own chrome (see Callouts.position), which a number
+    // hard-coded against the defaults of those variables could only ever guess at.
+    private const int MEASURED_CALLOUT_SCROLL_OFFSET = -1;
 
-        return offset;
-    }
+    // Only WHETHER those parts are there, which is what can change while the callout stays open and is
+    // therefore what decides when it has to be measured again.
+    private (bool SearchBox, bool SelectAll) GetCalloutChrome() => (HasSearchBox, HasSelectAllItem);
 
     // The height available to the item list is only computed when the callout is laid out, which happens
     // when it is toggled. The parts above that list can come and go while it stays open - a search that
-    // matches nothing takes the select all row with it - so a change to the offset is pushed to the
-    // already positioned callout instead of waiting for the next open.
+    // matches nothing takes the select all row with it - so a re-measure is pushed to the already
+    // positioned callout instead of waiting for the next open.
     private async Task RefreshCalloutScrollOffset()
     {
         if (IsOpen is false || IsDisposed || IsEnabled is false) return;
 
-        var scrollOffset = GetCalloutScrollOffset();
-        if (scrollOffset == _calloutScrollOffset) return;
+        var chrome = GetCalloutChrome();
+        if (chrome == _calloutChrome) return;
 
-        _calloutScrollOffset = scrollOffset;
+        _calloutChrome = chrome;
 
         try
         {
-            await _js.BitCalloutUpdateScrollOffset(_calloutId, scrollOffset);
+            await _js.BitCalloutUpdateScrollOffset(_calloutId, MEASURED_CALLOUT_SCROLL_OFFSET);
         }
         catch (JSDisconnectedException) { } // we can ignore this exception here
     }
@@ -3352,7 +3526,7 @@ private async Task ToggleCallout()
         // handler left for the click it may be paired with stops being about the current state.
         _openedOnFocus = false;
 
-        _calloutScrollOffset = GetCalloutScrollOffset();
+        _calloutChrome = GetCalloutChrome();
 
         _isResponsiveMode = await _js.BitCalloutToggleCallout(
             dotnetObj: _dotnetObj,
@@ -3366,7 +3540,7 @@ private async Task ToggleCallout()
             dropDirection: DropDirection,
             isRtl: Dir is BitDir.Rtl,
             scrollContainerId: _scrollContainerId,
-            scrollOffset: _calloutScrollOffset,
+            scrollOffset: MEASURED_CALLOUT_SCROLL_OFFSET,
             headerId: CalloutHeaderTemplate is not null ? _headerId : "",
             footerId: CalloutFooterTemplate is not null ? _footerId : "",
             setCalloutWidth: PreserveCalloutWidth is false,
@@ -3901,10 +4075,11 @@ private string GetOverflowItemsText()
         return string.Join(MultiSelectDelimiter, _selectedItems.Skip(GetDisplayedItemsCount()).Select(GetText));
     }
 
-    // The whole selection as one piece of text, which is what the chips and the overflow indicator show
-    // between them, so the combobox can be named after it instead of after the display that also holds
-    // the remove button of every chip.
-    private string GetChipsAriaText()
+    // The whole selection as one piece of text: what the chips and the overflow indicator show between
+    // them, so the combobox can be named after it instead of after the display that also holds the
+    // remove button of every chip - and what the text display stands for once it has collapsed into a
+    // count of the selection.
+    private string GetSelectedItemsText()
     {
         return string.Join(MultiSelectDelimiter, _selectedItems.Select(GetText));
     }
@@ -3978,6 +4153,78 @@ private void SetIsSelectedForSelectedItems()
         }
     }
 
+    // The public custom properties of the component, which are what its stylesheet reads off the root with a
+    // fallback (see BitDropdown.scss). Nothing else in a style string is copied to the callout.
+    private const string PUBLIC_CSS_VARIABLE_PREFIX = "--bit-Dropdown-";
+
+    private string? _publicCssVariables;
+    private string? _lastRootStyle;
+    private string? _lastStylesRoot;
+
+    // The callout and the overlay are rendered outside the root element - and reparented to the body while the
+    // callout is open - so they inherit nothing an author sets on the dropdown: neither the Style of the
+    // instance nor a custom property declared on an ancestor of it (only :root and body stay ancestors of them
+    // once they have moved). The public --bit-Dropdown-* declarations are therefore carried across by hand, so
+    // ONE Style on the component restyles the field, the list it opens and the layer behind it together, the
+    // way it reads as if it would.
+    private string? GetPublicCssVariables()
+    {
+        var style = Style;
+        var stylesRoot = Styles?.Root;
+
+        // Rebuilt only when one of the two strings it is made of has actually changed: the callout is
+        // re-rendered on every keystroke typed into the search box, and parsing two style strings per
+        // render for a result that almost never changes is work no one asked for.
+        if (string.Equals(style, _lastRootStyle, StringComparison.Ordinal) &&
+            string.Equals(stylesRoot, _lastStylesRoot, StringComparison.Ordinal))
+        {
+            return _publicCssVariables;
+        }
+
+        _lastRootStyle = style;
+        _lastStylesRoot = stylesRoot;
+
+        StringBuilder? builder = null;
+
+        AppendPublicCssVariables(ref builder, style);
+        AppendPublicCssVariables(ref builder, stylesRoot);
+
+        _publicCssVariables = builder?.ToString();
+
+        return _publicCssVariables;
+    }
+
+    // Styles.Callout is appended last, so a value written for the callout still wins over the copy.
+    private string? GetCalloutStyles()
+    {
+        var variables = GetPublicCssVariables();
+        var stylesCallout = Styles?.Callout;
+
+        if (variables.HasNoValue()) return stylesCallout;
+        if (stylesCallout.HasNoValue()) return variables;
+
+        return variables + stylesCallout;
+    }
+
+    // Styles.Overlay is appended last for the same reason Styles.Callout is. The display is written here
+    // rather than in the stylesheet because it is what the component toggles the layer with.
+    private string GetOverlayStyles()
+    {
+        return $"display:{(IsOpen ? "block" : "none")};{GetPublicCssVariables()}{Styles?.Overlay}";
+    }
+
+    private static void AppendPublicCssVariables(ref StringBuilder? builder, string? style)
+    {
+        if (style.HasNoValue()) return;
+
+        foreach (var declaration in style!.Split(';', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries))
+        {
+            if (declaration.StartsWith(PUBLIC_CSS_VARIABLE_PREFIX, StringComparison.Ordinal) is false) continue;
+
+            (builder ??= new StringBuilder()).Append(declaration).Append(';');
+        }
+    }
+
     private string GetCalloutCssClasses()
     {
         List<string> classes = ["bit-drp-cal"];
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
index 2a029e40d07..56af8200260 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
@@ -1,16 +1,147 @@
 @import "../../../Styles/functions.scss";
 @import "../../../Styles/media-queries.scss";
 
+// Public CSS variables, read with a fallback and never declared here, so a value set on :root re-skins
+// every dropdown and one set on the Style of an instance re-skins that one alone.
+// The callout and the overlay are rendered outside the root element (and reparented to the body while the
+// callout is open), so the component copies the --bit-Dropdown-* declarations of Style and Styles.Root onto
+// both of them by hand - see GetPublicCssVariables.
+//
+//   FIELD
+//   --bit-Dropdown-background              background of the field                  (default: $clr-bg-pri, transparent with Transparent)
+//   --bit-Dropdown-color                   text of the field once something
+//                                          is selected                              (default: $clr-fg-pri)
+//   --bit-Dropdown-placeholder-color       text of the field while it is empty      (default: $clr-fg-sec)
+//   --bit-Dropdown-border-color            border at rest                           (default: $clr-brd-pri)
+//   --bit-Dropdown-hover-border-color      border on hover                          (default: $clr-brd-pri-hover)
+//   --bit-Dropdown-focus-color             focus indicator color                    (default: the role's focus color)
+//   --bit-Dropdown-invalid-color           border, focus indicator and ErrorMessage
+//                                          text while the value is rejected         (default: $clr-err / $clr-err-focus)
+//   --bit-Dropdown-disabled-color          text and glyphs when disabled            (default: $clr-fg-dis)
+//   --bit-Dropdown-disabled-background     background when disabled                 (default: $clr-bg-dis)
+//   --bit-Dropdown-disabled-border-color   border when disabled                     (default: $clr-brd-dis)
+//   --bit-Dropdown-radius                  corner radius of the field               (default: $shp-radius-control)
+//   --bit-Dropdown-min-height              smallest height of the field             (default: per size, $siz-ctrl-*)
+//   --bit-Dropdown-font-size               text size of the field                   (default: per size, from the type ramp)
+//   --bit-Dropdown-icon-color              the caret, the clear button glyph and
+//                                          the responsive add button glyph          (default: $clr-fg-sec)
+//   --bit-Dropdown-icon-size               size of every glyph of the component,
+//                                          including the search box's and the
+//                                          responsive panel's                       (default: per size, $siz-icon-*)
+//
+//   PREFIX AND SUFFIX (the two addons flush with the ends of the field)
+//   --bit-Dropdown-prefix-color            text of the prefix addon                 (default: $clr-fg-pri)
+//   --bit-Dropdown-prefix-background       background of the prefix addon           (default: $clr-bg-sec)
+//   --bit-Dropdown-suffix-color            text of the suffix addon                 (default: $clr-fg-pri)
+//   --bit-Dropdown-suffix-background       background of the suffix addon           (default: $clr-bg-sec)
+//
+//   ACCENT - the role color, which reaches the group headers, the search glyph, the checkbox fill, the
+//   search-match highlight, the overflow chip, the spinner arc and the bar marking the commit target.
+//   --bit-Dropdown-accent-color            the accent itself                        (default: the Color role's main color)
+//   --bit-Dropdown-accent-hover-color      the accent while the part is hovered     (default: the role's hover color)
+//   --bit-Dropdown-accent-text-color       text and glyphs drawn ON the accent -
+//                                          set it along with the accent to keep the
+//                                          check mark and the highlight legible     (default: the role's on-color)
+//
+//   LABEL AND DESCRIPTION
+//   --bit-Dropdown-label-color             label text                               (default: $clr-fg-pri)
+//   --bit-Dropdown-label-font-size         label text size                          (default: --bit-Dropdown-font-size)
+//   --bit-Dropdown-label-font-weight       label weight                             (default: $tg-fw-semibold)
+//   --bit-Dropdown-required-color          the asterisk a Required field carries    (default: $clr-req)
+//   --bit-Dropdown-description-color       description text                         (default: $clr-fg-pri)
+//   --bit-Dropdown-description-font-size   description and error message text size  (default: $tg-fs-2xs)
+//
+//   CHIPS (the multi select Chips display)
+//   --bit-Dropdown-chip-background         background of a chip                     (default: $clr-bg-sec)
+//   --bit-Dropdown-chip-color              text of a chip                           (default: inherited from the field)
+//   --bit-Dropdown-chip-border-color       border of a chip                         (default: $clr-brd-sec)
+//   --bit-Dropdown-chip-radius             corner radius of a chip                  (default: $shp-radius-chip)
+//
+//   CALLOUT
+//   --bit-Dropdown-callout-background      background of the list surface           (default: $clr-bg-pri)
+//   --bit-Dropdown-callout-radius          corner radius of that surface            (default: $shp-radius-popup)
+//   --bit-Dropdown-callout-shadow          its elevation                            (default: $box-shadow-popup)
+//   --bit-Dropdown-responsive-width        width of the side panel a Responsive
+//                                          dropdown opens on a small screen         (default: spacing(34))
+//   --bit-Dropdown-overlay-background      the layer between the page and an open
+//                                          callout, transparent by default - give it
+//                                          a color for a modal-style scrim          (default: transparent)
+//
+//   ITEMS
+//   --bit-Dropdown-item-height             height of one row                        (default: per size, $siz-item-*)
+//   --bit-Dropdown-item-font-size          text size of one row                     (default: per size, from the type ramp)
+//   --bit-Dropdown-item-color              text of one row                          (default: $clr-fg-pri)
+//   --bit-Dropdown-item-hover-background   background of the hovered row            (default: $clr-bg-pri-hover)
+//   --bit-Dropdown-item-selected-background  background of a selected row           (default: $clr-bg-sec)
+//   --bit-Dropdown-item-selected-color     text of a selected row - set it along
+//                                          with the background above when that one
+//                                          is repainted                             (default: --bit-Dropdown-item-color)
+//   --bit-Dropdown-item-disabled-color     text of a row that cannot be picked      (default: $clr-fg-dis)
+//   --bit-Dropdown-header-color            text of a group header                   (default: the accent)
+//   --bit-Dropdown-divider-color           the rule a Divider item draws, and the
+//                                          one under the select all row             (default: $clr-bg-sec / $clr-brd-sec)
+
+
 // 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.
 // A preset that raises the control height (Material 40px, Cupertino 36px) then resizes the trigger,
 // the callout and the rows inside it together.
+@mixin drp-size($fs, $h, $lbl-lh, $itm-h, $itm-fs, $ico, $sel) {
+    --bit-drp-sz-fs: #{$fs};
+    --bit-drp-sz-h: #{$h};
+    --bit-drp-sz-lbl-lh: #{$lbl-lh};
+    --bit-drp-sz-itm-h: #{$itm-h};
+    --bit-drp-sz-itm-fs: #{$itm-fs};
+    --bit-drp-sz-ico: #{$ico};
+    --bit-drp-sz-sel: #{$sel};
+}
+
 @mixin drp-size-medium {
-    --bit-drp-fs: #{$tg-fs-sm};
-    --bit-drp-h: #{$siz-ctrl-md};
-    --bit-drp-lbl-lh: #{spacing(2.75)};
-    --bit-drp-itm-h: #{$siz-item-md};
-    --bit-drp-itm-fs: #{$tg-fs-sm};
+    @include drp-size($tg-fs-sm, $siz-ctrl-md, spacing(2.75), $siz-item-md, $tg-fs-sm, $siz-icon-md, $siz-sel-md);
+}
+
+// The one place the public variables meet the per-size and per-role defaults. Every rule below reads the
+// private variables this leaves behind, so no use site repeats the fallback chain - and the block is
+// included on the callout as well, which is a sibling of the root and inherits nothing from it.
+@mixin drp-vars {
+    --bit-drp-fs: var(--bit-Dropdown-font-size, var(--bit-drp-sz-fs));
+    --bit-drp-h: var(--bit-Dropdown-min-height, var(--bit-drp-sz-h));
+    --bit-drp-lbl-lh: var(--bit-drp-sz-lbl-lh);
+    --bit-drp-itm-h: var(--bit-Dropdown-item-height, var(--bit-drp-sz-itm-h));
+    --bit-drp-itm-fs: var(--bit-Dropdown-item-font-size, var(--bit-drp-sz-itm-fs));
+    --bit-drp-ico: var(--bit-Dropdown-icon-size, var(--bit-drp-sz-ico));
+    --bit-drp-sel: var(--bit-drp-sz-sel);
+    --bit-drp-radius: var(--bit-Dropdown-radius, #{$shp-radius-control});
+
+    // The accent, and the two colors that go with it. A theme that repaints the accent has to be able to
+    // repaint what is drawn on top of it too, or the check mark and the highlighted text lose their contrast.
+    --bit-drp-clr: var(--bit-Dropdown-accent-color, var(--bit-drp-role-main, #{$clr-pri}));
+    --bit-drp-clr-hover: var(--bit-Dropdown-accent-hover-color, var(--bit-Dropdown-accent-color, var(--bit-drp-role-hover, #{$clr-pri-hover})));
+    --bit-drp-clr-text: var(--bit-Dropdown-accent-text-color, var(--bit-drp-role-on, #{$clr-pri-text}));
+    --bit-drp-clr-focus: var(--bit-Dropdown-focus-color, var(--bit-drp-role-focus, #{$clr-pri-focus}));
+
+    --bit-drp-bg: #{$clr-bg-pri};
+    --bit-drp-itm-clr: var(--bit-Dropdown-item-color, #{$clr-fg-pri});
+    --bit-drp-itm-hover-bg: var(--bit-Dropdown-item-hover-background, #{$clr-bg-pri-hover});
+    --bit-drp-itm-sel-bg: var(--bit-Dropdown-item-selected-background, #{$clr-bg-sec});
+    --bit-drp-itm-sel-clr: var(--bit-Dropdown-item-selected-color, var(--bit-drp-itm-clr));
+    --bit-drp-itm-dis-clr: var(--bit-Dropdown-item-disabled-color, #{$clr-fg-dis});
+    --bit-drp-cal-bg: var(--bit-Dropdown-callout-background, #{$clr-bg-pri});
+}
+
+// The focus indicator of everything that sits INSIDE a box the browser may clip - the rows of the scrolling
+// list, the buttons flush with the edge of the field or of the search box. An outline drawn inwards is never
+// cut off by an ancestor's overflow the way the outward ring of focus-ring would be, and it survives a
+// forced-colors palette, which strips the box-shadow that ring is drawn with.
+// Every one of these is a <button>, and the library resets `button { outline: none }` globally, so without
+// this the keyboard has nothing to follow through the list at all.
+@mixin drp-focus-inset($color: var(--bit-drp-clr-focus)) {
+    outline: $shp-focus-ring-width $shp-border-style #{$color};
+    outline-offset: calc(-1 * #{$shp-focus-ring-width});
+
+    @media (forced-colors: active) {
+        outline-color: Highlight;
+    }
 }
 
 .bit-drp {
@@ -19,16 +150,14 @@
     position: relative;
     flex-direction: column;
     font-family: $tg-font-family;
-    --bit-drp-clr: #{$clr-pri};
-    --bit-drp-clr-hover: #{$clr-pri-hover};
-    --bit-drp-clr-text: #{$clr-pri-text};
     @include drp-size-medium;
+    @include drp-vars;
 
     &.bit-drp-req {
         .bit-drp-lbl {
             &::after {
                 content: " *";
-                color: $clr-req;
+                color: var(--bit-Dropdown-required-color, #{$clr-req});
                 padding-inline-end: spacing(1.5);
             }
         }
@@ -36,15 +165,20 @@
 
     &.bit-inv {
         .bit-drp-wrp {
-            border-color: $clr-err;
+            border-color: var(--bit-Dropdown-invalid-color, #{$clr-err});
 
             &:hover,
             &:active {
-                border-color: $clr-err;
+                border-color: var(--bit-Dropdown-invalid-color, #{$clr-err});
             }
 
-            &:focus {
-                @include focus-ring($clr-err-focus);
+            // :has() beside :focus - in the ComboBox mode the element the keyboard lands on is the input
+            // inside the field, so the field itself never matched :focus and an invalid ComboBox was left
+            // without an indicator of its own. It names that input rather than using :focus-within, which
+            // matches the buttons inside the field as well.
+            &:focus,
+            &:has(.bit-drp-inp:focus) {
+                @include focus-ring(var(--bit-Dropdown-invalid-color, #{$clr-err-focus}));
             }
         }
 
@@ -53,13 +187,15 @@
         &.bit-drp-nbd,
         &.bit-drp-und {
             .bit-drp-wrp {
-                &:focus {
+                &:focus,
+                &:has(.bit-drp-inp:focus) {
                     outline: none;
                     box-shadow: none;
                 }
 
-                &:focus-visible {
-                    @include focus-underline-ring($clr-err-focus);
+                &:focus-visible,
+                &:has(.bit-drp-inp:focus-visible) {
+                    @include focus-underline-ring(var(--bit-Dropdown-invalid-color, #{$clr-err-focus}));
                 }
             }
         }
@@ -68,19 +204,20 @@
     &.bit-dis {
         .bit-drp-wrp {
             cursor: default;
-            color: $clr-fg-dis;
-            border-color: $clr-brd-dis;
-            background-color: $clr-bg-dis;
+            color: var(--bit-Dropdown-disabled-color, #{$clr-fg-dis});
+            border-color: var(--bit-Dropdown-disabled-border-color, #{$clr-brd-dis});
+            background-color: var(--bit-Dropdown-disabled-background, #{$clr-bg-dis});
 
             &:hover,
             &:active {
-                color: $clr-fg-dis;
-                border-color: $clr-brd-dis;
+                color: var(--bit-Dropdown-disabled-color, #{$clr-fg-dis});
+                border-color: var(--bit-Dropdown-disabled-border-color, #{$clr-brd-dis});
             }
 
-            &:focus {
-                color: $clr-fg-dis;
-                border-color: $clr-brd-dis;
+            &:focus,
+            &:has(.bit-drp-inp:focus) {
+                color: var(--bit-Dropdown-disabled-color, #{$clr-fg-dis});
+                border-color: var(--bit-Dropdown-disabled-border-color, #{$clr-brd-dis});
                 // Suppress the focus ring while disabled, including the forced-colors outline.
                 outline: none;
                 box-shadow: none;
@@ -89,24 +226,24 @@
 
         .bit-drp-pre,
         .bit-drp-suf {
-            color: $clr-fg-dis;
+            color: var(--bit-Dropdown-disabled-color, #{$clr-fg-dis});
         }
 
         .bit-drp-icn {
             cursor: default;
 
             i:first-child {
-                color: $clr-fg-dis;
+                color: var(--bit-Dropdown-disabled-color, #{$clr-fg-dis});
             }
         }
 
         .bit-drp-lbl {
-            color: $clr-fg-dis;
+            color: var(--bit-Dropdown-disabled-color, #{$clr-fg-dis});
         }
 
         &.bit-drp-hvl {
             .bit-drp-wrp {
-                color: $clr-fg-dis;
+                color: var(--bit-Dropdown-disabled-color, #{$clr-fg-dis});
             }
         }
     }
@@ -114,7 +251,7 @@
 
 .bit-drp-hvl {
     .bit-drp-wrp {
-        color: $clr-fg-pri;
+        color: var(--bit-Dropdown-color, #{$clr-fg-pri});
     }
 }
 
@@ -128,14 +265,18 @@
             }
         }
 
-        &:focus {
+        &:focus,
+        &:has(.bit-drp-inp:focus) {
             // Suppress the global focus ring on the no-border variant; the underline-ring
             // below still applies for keyboard focus via :focus-visible.
             outline: none;
             box-shadow: none;
         }
 
-        &:focus-visible {
+        // :has() beside :focus-visible for the same reason the boxed variant needs it: in the ComboBox
+        // mode the keyboard lands on the input inside the field, not on the field.
+        &:focus-visible,
+        &:has(.bit-drp-inp:focus-visible) {
             // No-border variant: keep the no-border look but use an inset underline-style
             // ring as a keyboard-only, high-contrast focus cue (WCAG 2.4.7 / 2.4.13).
             @include focus-underline-ring(var(--bit-drp-clr-focus));
@@ -156,20 +297,37 @@
             }
         }
 
-        &:focus {
+        &:focus,
+        &:has(.bit-drp-inp:focus) {
             outline: none;
             box-shadow: none;
         }
 
-        &:focus-visible {
+        &:focus-visible,
+        &:has(.bit-drp-inp:focus-visible) {
             @include focus-underline-ring(var(--bit-drp-clr-focus));
         }
     }
 }
 
+// Retunes the field's own background variable rather than overriding the declaration that reads it, so a
+// public --bit-Dropdown-background set on a transparent dropdown still wins the way it does everywhere else.
 .bit-drp.bit-drp-trn {
-    .bit-drp-wrp {
-        background-color: transparent;
+    --bit-drp-bg: transparent;
+}
+
+// The rejection is colored like every other rejected value of the library - and like the border it sits
+// under, so the two follow one variable - and it keeps that color while the dropdown is disabled: a
+// message that goes grey with the rest of the field stops reading as the reason the value was refused.
+.bit-drp-erm {
+    display: block;
+    overflow-wrap: break-word;
+    padding-top: spacing(0.5);
+    font-size: var(--bit-Dropdown-description-font-size, #{$tg-fs-2xs});
+    color: var(--bit-Dropdown-invalid-color, #{$clr-err});
+
+    span {
+        color: inherit;
     }
 }
 
@@ -181,18 +339,18 @@
 // The default description text only. A DescriptionTemplate renders whatever it likes, so styling
 // every span under the container would reach into markup the component knows nothing about.
 .bit-drp-dtx {
-    color: $clr-fg-pri;
-    font-size: $tg-fs-2xs;
+    color: var(--bit-Dropdown-description-color, #{$clr-fg-pri});
+    font-size: var(--bit-Dropdown-description-font-size, #{$tg-fs-2xs});
 }
 
 .bit-drp-lbl {
     margin: 0;
-    font-weight: $tg-fw-semibold;
-    color: $clr-fg-pri;
     box-sizing: border-box;
-    font-size: var(--bit-drp-fs);
     padding: spacing(0.625) 0;
     line-height: var(--bit-drp-lbl-lh);
+    color: var(--bit-Dropdown-label-color, #{$clr-fg-pri});
+    font-size: var(--bit-Dropdown-label-font-size, var(--bit-drp-fs));
+    font-weight: var(--bit-Dropdown-label-font-weight, #{$tg-fw-semibold});
 }
 
 // Carries the id the combobox is named by, around the selection display alone. It takes no part in
@@ -201,50 +359,77 @@
     display: contents;
 }
 
+// The two pieces of text the dropdown carries for a screen reader and for nobody else: the live region that
+// announces the result count, the loading state and the selection limit, and the full list of selections the
+// overflow chip stands for. Taken out of the flow rather than hidden, since display:none is also hidden from
+// the readers they are written for.
+.bit-drp-vhd,
+.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-wrp {
     display: flex;
     outline: none;
     cursor: pointer;
     user-select: none;
-    color: $clr-fg-sec;
     position: relative;
+    color: var(--bit-Dropdown-placeholder-color, #{$clr-fg-sec});
 
     // Centers the content of Prefix/SuffixTemplate; the component's own children opt back
     // into the full height with align-self: stretch.
     align-items: center;
     min-height: var(--bit-drp-h);
     box-sizing: border-box;
-    background-color: $clr-bg-pri;
-    border-radius: $shp-radius-control;
-    border: $shp-border-width $shp-border-style $clr-brd-pri;
-
+    border-radius: var(--bit-drp-radius);
+    background-color: var(--bit-Dropdown-background, var(--bit-drp-bg));
+    border: $shp-border-width $shp-border-style var(--bit-Dropdown-border-color, #{$clr-brd-pri});
+    transition: color $mot-duration-short $mot-easing, border-color $mot-duration-short $mot-easing;
+
+    // Each state reads the public variable of the property it changes before its own default, so an author
+    // who repaints the text or the glyphs once keeps that color through hover, press and focus instead of
+    // watching the component take it back on the first interaction.
     @media (hover: hover) {
         &:hover {
-            border: $shp-border-width $shp-border-style $clr-brd-pri-hover;
-            color: $clr-fg-pri-hover;
+            color: var(--bit-Dropdown-color, #{$clr-fg-pri-hover});
+            border-color: var(--bit-Dropdown-hover-border-color, #{$clr-brd-pri-hover});
 
             .bit-drp-icn i {
-                color: $clr-fg-pri-hover;
+                color: var(--bit-Dropdown-icon-color, #{$clr-fg-pri-hover});
             }
         }
     }
 
     &:active {
-        border-color: $clr-brd-pri-active;
-        color: $clr-fg-pri-active;
+        color: var(--bit-Dropdown-color, #{$clr-fg-pri-active});
+        border-color: var(--bit-Dropdown-hover-border-color, #{$clr-brd-pri-active});
 
         .bit-drp-icn {
             i {
-                color: $clr-fg-pri-active;
+                color: var(--bit-Dropdown-icon-color, #{$clr-fg-pri-active});
             }
         }
     }
 
-    &:focus {
-        color: $clr-fg-pri;
+    // :has() beside :focus: in the ComboBox mode the keyboard lands on the input inside the field, so
+    // without it a focused ComboBox carried no focus indicator at all (WCAG 2.4.7 / 2.4.13). It names that
+    // input rather than using :focus-within, which matches the buttons inside the field as well and would
+    // draw the ring of the whole field - on a mouse click at that - on top of the inset ring the clear
+    // button and the chip remove buttons draw for themselves.
+    &:focus,
+    &:has(.bit-drp-inp:focus) {
+        color: var(--bit-Dropdown-color, #{$clr-fg-pri});
 
         .bit-drp-icn i {
-            color: $clr-fg-pri;
+            color: var(--bit-Dropdown-icon-color, #{$clr-fg-pri});
         }
 
         @include focus-ring(var(--bit-drp-clr-focus));
@@ -266,7 +451,7 @@
     text-overflow: ellipsis;
     font-size: var(--bit-drp-fs);
     line-height: normal;
-    border-radius: $shp-radius-control;
+    border-radius: var(--bit-drp-radius);
     padding-inline-start: spacing(1);
 
     // Centered as a line box of its own rather than as a line box stretched over the control: where
@@ -291,9 +476,11 @@
         gap: spacing(0.5);
         min-height: var(--bit-drp-h);
 
+        // The chips carry their own height floor, so the row around them gives back what they gained
+        // and the field ends up the size it was rather than a chip taller.
+        padding-block: spacing(0.75);
         // Logical, not physical: the room left at the end is for the icons of the trigger, which sit
         // where the text ends - on the left of an RTL dropdown.
-        padding-block: spacing(1);
         padding-inline: spacing(1) spacing(3.5);
     }
 }
@@ -304,9 +491,15 @@
     gap: spacing(0.5);
     align-items: center;
     padding: 0 spacing(0.5);
-    border-radius: $shp-radius-chip;
-    background-color: $clr-bg-sec;
-    border: $shp-border-width $shp-border-style $clr-brd-sec;
+    // What makes the remove button below a pointer target of the size WCAG 2.2 asks for (SC 2.5.8): the
+    // button stretches to the chip, and a chip left to the line box of its own text is about 19px tall -
+    // wide enough for the 24 the button floors itself at, and short of it in the other direction. A floor
+    // rather than a height, so a ChipTemplate taller than this still decides how tall its chip is.
+    min-height: spacing(3);
+    color: var(--bit-Dropdown-chip-color, inherit);
+    border-radius: var(--bit-Dropdown-chip-radius, #{$shp-radius-chip});
+    background-color: var(--bit-Dropdown-chip-background, #{$clr-bg-sec});
+    border: $shp-border-width $shp-border-style var(--bit-Dropdown-chip-border-color, #{$clr-brd-sec});
 }
 
 // Stands for the selected items that did not fit in the chips display.
@@ -319,9 +512,9 @@
 }
 
 // The glyph a chip can be removed by is far smaller than the 24 CSS pixels WCAG 2.2 asks of a pointer
-// target. The chip is tall enough to carry that on its own, so the button stretches to the chip height
-// and is floored at the target width - the drawn glyph keeps its size, only what answers the pointer
-// around it grows, and it grows inside the chip rather than over the one standing next to it.
+// target (SC 2.5.8). The chip carries that height for it, so the button stretches to the chip and is
+// floored at the target width - the drawn glyph keeps its size, only what answers the pointer around it
+// grows, and it grows inside the chip rather than over the one standing next to it.
 .bit-drp-crb {
     padding: 0;
     border: none;
@@ -333,15 +526,15 @@
     justify-content: center;
     min-width: spacing(3);
     outline: transparent;
-    border-radius: $shp-radius-control;
+    border-radius: var(--bit-Dropdown-chip-radius, #{$shp-radius-chip});
     background-color: transparent;
 
     i {
-        font-size: $tg-fs-xs;
+        font-size: $siz-icon-sm;
     }
 
     &:focus-visible {
-        outline: $shp-border-width-thick $shp-border-style var(--bit-drp-clr);
+        @include drp-focus-inset;
     }
 
     @media (hover: hover) {
@@ -363,8 +556,8 @@
         width: unset;
         pointer-events: none;
         display: inline-block;
-        font-size: $tg-fs-xs;
-        color: $clr-fg-sec;
+        font-size: var(--bit-drp-ico);
+        color: var(--bit-Dropdown-icon-color, #{$clr-fg-sec});
     }
 }
 
@@ -374,9 +567,9 @@
     display: flex;
     cursor: pointer;
     text-align: start;
-    color: $clr-fg-pri;
     position: relative;
     align-items: center;
+    color: var(--bit-drp-itm-clr);
     height: var(--bit-drp-itm-h);
     padding: 0 spacing(1);
     box-sizing: border-box;
@@ -385,7 +578,12 @@
     border: $shp-border-width $shp-border-style transparent;
 
     &.bit-drp-chd {
-        background-color: $clr-bg-sec;
+        color: var(--bit-drp-itm-sel-clr);
+        background-color: var(--bit-drp-itm-sel-bg);
+
+        .bit-drp-itx {
+            color: var(--bit-drp-itm-sel-clr);
+        }
 
         .bit-drp-chb {
             border-color: var(--bit-drp-clr);
@@ -399,7 +597,9 @@
 
         @media (hover: hover) {
             &:hover {
-                background-color: $clr-bg-pri-hover;
+                // Blended with the selected fill for the same reason a single select row is - see
+                // .bit-drp-sel - even though the check mark says as much here too.
+                background-color: color-mix(in srgb, var(--bit-drp-itm-sel-bg), var(--bit-drp-itm-hover-bg));
 
                 .bit-drp-chb {
                     border-color: var(--bit-drp-clr-hover);
@@ -413,17 +613,17 @@
         cursor: default;
 
         .bit-drp-chb {
-            border-color: $clr-fg-dis;
+            border-color: var(--bit-drp-itm-dis-clr);
         }
 
         .bit-drp-itx {
-            color: $clr-fg-dis;
+            color: var(--bit-drp-itm-dis-clr);
         }
     }
 
     @media (hover: hover) {
         &:hover {
-            background-color: $clr-bg-pri-hover;
+            background-color: var(--bit-drp-itm-hover-bg);
 
             .bit-drp-chm {
                 opacity: 1;
@@ -435,7 +635,7 @@
 
                 .bit-drp-chm {
                     opacity: 0;
-                    color: $clr-fg-dis;
+                    color: var(--bit-drp-itm-dis-clr);
                 }
             }
         }
@@ -458,7 +658,13 @@
     text-overflow: ellipsis;
     padding: 0 0 spacing(0.0625);
     background-color: transparent;
-    color: $clr-fg-pri;
+    color: var(--bit-Dropdown-color, #{$clr-fg-pri});
+
+    // The typed text and the placeholder of the ComboBox input are the same two colors the selection
+    // display beside it uses, so the field reads as one control whichever of the two is showing.
+    &::placeholder {
+        color: var(--bit-Dropdown-placeholder-color, #{$clr-fg-sec});
+    }
 }
 
 .bit-drp-pre,
@@ -471,15 +677,25 @@
     white-space: nowrap;
     padding: 0 spacing(1.25);
     min-height: var(--bit-drp-h);
-    color: $clr-fg-pri;
-    background: $clr-bg-sec;
 
     span {
-        font-size: $tg-fs-sm;
+        font-size: var(--bit-drp-fs);
         padding-bottom: spacing(0.125);
     }
 }
 
+// The two addons are themed apart rather than as one pair: a unit suffix and a category prefix are
+// rarely the same kind of thing, and an author who paints one of them has no reason to get the other.
+.bit-drp-pre {
+    color: var(--bit-Dropdown-prefix-color, #{$clr-fg-pri});
+    background: var(--bit-Dropdown-prefix-background, #{$clr-bg-sec});
+}
+
+.bit-drp-suf {
+    color: var(--bit-Dropdown-suffix-color, #{$clr-fg-pri});
+    background: var(--bit-Dropdown-suffix-background, #{$clr-bg-sec});
+}
+
 .bit-drp-mcn {
     width: 100%;
     height: 100%;
@@ -490,22 +706,28 @@
     user-select: none;
     position: relative;
     align-items: center;
-    font-size: var(--bit-drp-fs);
+    font-size: var(--bit-drp-itm-fs);
     background-color: transparent;
+
+    // The rows are walked with the arrow keys, which moves the real focus from row to row; without this
+    // the multi select row was left with whatever the browser draws under `button { outline: none }`.
+    &:focus-visible {
+        @include drp-focus-inset;
+    }
 }
 
 .bit-drp-chb {
     display: flex;
     overflow: hidden;
     position: relative;
-    width: $siz-sel-md;
-    min-width: $siz-sel-md;
     align-items: center;
-    height: $siz-sel-md;
     box-sizing: border-box;
     justify-content: center;
+    width: var(--bit-drp-sel);
+    height: var(--bit-drp-sel);
+    min-width: var(--bit-drp-sel);
     transition-duration: $mot-duration;
-    border-radius: $shp-radius-control;
+    border-radius: $shp-radius-selection;
     transition-property: background, border, border-color;
     transition-timing-function: $mot-easing;
     border: $shp-border-width $shp-border-style $clr-brd-pri;
@@ -518,13 +740,15 @@
         transition: $mot-duration-short;
         align-items: center;
         justify-content: center;
-        font-size: $tg-fs-xs;
+        // Derived from the box rather than fixed, so the check mark keeps its proportion at every size
+        // class instead of shrinking inside the large one.
+        font-size: calc(var(--bit-drp-sel) * 0.6);
     }
 }
 
 .bit-drp-itx {
     line-height: spacing(2.5);
-    color: $clr-fg-pri;
+    color: var(--bit-drp-itm-clr);
 }
 
 .bit-drp-cbi {
@@ -538,12 +762,12 @@
     flex-flow: row nowrap;
     box-sizing: border-box;
     font-size: var(--bit-drp-fs);
-    color: $clr-fg-pri;
+    color: var(--bit-Dropdown-color, #{$clr-fg-pri});
     border-style: $shp-border-style;
-    border-color: $clr-brd-pri;
+    border-color: var(--bit-Dropdown-border-color, #{$clr-brd-pri});
     font-family: $tg-font-family;
     border-width: 0 0 $shp-border-width;
-    background-color: $clr-bg-pri;
+    background-color: var(--bit-drp-cal-bg);
 
     // The same logical padding the search box beside it uses, so the text of an RTL panel starts
     // where its input does rather than against the opposite edge.
@@ -552,7 +776,7 @@
 
     @media (hover: hover) {
         &:hover {
-            border-color: $clr-brd-pri-hover;
+            border-color: var(--bit-Dropdown-hover-border-color, #{$clr-brd-pri-hover});
 
             .bit-drp-sic {
                 i {
@@ -574,18 +798,18 @@
     flex-flow: row nowrap;
     box-sizing: border-box;
     font-size: var(--bit-drp-fs);
-    color: $clr-fg-pri;
+    color: var(--bit-Dropdown-color, #{$clr-fg-pri});
     border-style: $shp-border-style;
-    border-color: $clr-brd-pri;
+    border-color: var(--bit-Dropdown-border-color, #{$clr-brd-pri});
     font-family: $tg-font-family;
     border-width: 0 0 $shp-border-width;
-    background-color: $clr-bg-pri;
+    background-color: var(--bit-drp-cal-bg);
     padding-block: spacing(0.125);
     padding-inline-start: spacing(1);
 
     @media (hover: hover) {
         &:hover {
-            border-color: $clr-brd-pri-hover;
+            border-color: var(--bit-Dropdown-hover-border-color, #{$clr-brd-pri-hover});
 
             .bit-drp-sic {
                 i {
@@ -636,9 +860,9 @@
     flex-shrink: 0;
     width: spacing(4);
     text-align: center;
-    font-size: $tg-fs-md;
     flex-direction: column;
     justify-content: center;
+    font-size: var(--bit-drp-ico);
     color: var(--bit-drp-clr);
     transition: width $mot-duration $mot-easing 0s;
 
@@ -668,7 +892,11 @@
     text-overflow: ellipsis;
     padding: 0 0 spacing(0.0625);
     background-color: transparent;
-    color: $clr-fg-pri;
+    color: var(--bit-Dropdown-color, #{$clr-fg-pri});
+
+    &::placeholder {
+        color: var(--bit-Dropdown-placeholder-color, #{$clr-fg-sec});
+    }
 }
 
 .bit-drp-sbcc {
@@ -678,16 +906,18 @@
     cursor: pointer;
     flex-direction: row;
     align-items: stretch;
-    flex-basis: $siz-ctrl-md;
+    flex-basis: var(--bit-drp-h);
     margin: spacing(-0.125) 0;
 
+    // The same hover the clear button of the field and the rows of the list take, rather than the
+    // background a selected row carries - which read as a selection on a button that has none.
     @media (hover: hover) {
         &:hover {
             .bit-drp-sbc {
-                background-color: $clr-bg-sec;
+                background-color: var(--bit-drp-itm-hover-bg);
 
                 i {
-                    color: $clr-fg-pri;
+                    color: $clr-fg-pri-hover;
                 }
             }
         }
@@ -699,7 +929,7 @@
     border: none;
     cursor: pointer;
     font-weight: $tg-fw-regular;
-    width: $siz-ctrl-md;
+    width: var(--bit-drp-h);
     user-select: none;
     position: relative;
     text-align: center;
@@ -708,15 +938,15 @@
     text-decoration: none;
     box-sizing: border-box;
     padding: 0 spacing(0.5);
-    font-size: $tg-fs-sm;
+    font-size: var(--bit-drp-fs);
     color: var(--bit-drp-clr);
     background-color: transparent;
     font-family: $tg-font-family;
 
     // Only the corners at the end of the search box are rounded, so they are named logically: in an
     // RTL callout the button sits at the other end and it is the other two corners that are its own.
-    border-start-end-radius: $shp-radius-control;
-    border-end-end-radius: $shp-radius-control;
+    border-start-end-radius: var(--bit-drp-radius);
+    border-end-end-radius: var(--bit-drp-radius);
 
     span {
         height: 100%;
@@ -732,10 +962,14 @@
         height: spacing(2);
         text-align: center;
         margin: 0 spacing(0.5);
-        font-size: $tg-fs-xs;
+        font-size: var(--bit-drp-ico);
         line-height: spacing(2);
         color: $clr-fg-pri;
     }
+
+    &:focus-visible {
+        @include drp-focus-inset;
+    }
 }
 
 .bit-drp-ovl {
@@ -746,25 +980,30 @@
     display: none;
     position: fixed;
     z-index: $zindex-overlay;
-    background-color: transparent;
+    background-color: var(--bit-Dropdown-overlay-background, transparent);
 }
 
 .bit-drp-clr,
 .bit-drp-cai {
     display: flex;
-    width: spacing(3.75);
 
-    // Follows the height of the dropdown like Prefix/Suffix do, so the button fills the trigger
-    // in every size instead of only in the medium one.
+    // Follows the height of the dropdown like Prefix/Suffix do, so the button fills the trigger in every
+    // size instead of only in the medium one. The width follows it too - derived rather than fixed, so the
+    // button stays the same shape at every size; the offset is what keeps the medium one where it was.
     height: var(--bit-drp-h);
+    width: calc(var(--bit-drp-h) - #{spacing(0.25)});
     justify-content: center;
     background-color: $clr-bg-sec;
 
     @media (hover: hover) {
         &:hover {
-            background-color: $clr-bg-pri-hover;
+            background-color: var(--bit-drp-itm-hover-bg);
         }
     }
+
+    &:focus-visible {
+        @include drp-focus-inset;
+    }
 }
 
 .bit-drp-cal {
@@ -775,17 +1014,24 @@
     box-sizing: border-box;
     z-index: $zindex-callout;
     font-size: var(--bit-drp-fs);
+    font-family: $tg-font-family;
     animation-fill-mode: both;
     @include drp-size-medium;
+    @include drp-vars;
 
     animation-duration: $mot-duration-long;
-    box-shadow: $box-shadow-popup;
-    border-radius: $shp-radius-popup;
-    background-color: $clr-bg-pri;
+    background-color: var(--bit-drp-cal-bg);
+    box-shadow: var(--bit-Dropdown-callout-shadow, #{$box-shadow-popup});
+    border-radius: var(--bit-Dropdown-callout-radius, #{$shp-radius-popup});
     animation-name: bit-fade-show, bit-slide-down;
     animation-timing-function: $mot-easing-decelerate;
 }
 
+// The cap the callout is laid out against is the room the viewport leaves, which only the placement knows,
+// so it is written onto this element as an inline style (see Callouts.position) - and the MaxHeight
+// parameter is what shortens the list below it. The declaration here is the floor that holds until that
+// placement has run, which is why it is a fixed token and not a public variable an author could set and
+// then watch the first open overwrite.
 .bit-drp-scn {
     overflow: hidden auto;
     max-height: $siz-popup-max-height;
@@ -798,15 +1044,15 @@
     top: 0;
     z-index: 1;
     position: sticky;
-    background-color: $clr-bg-pri;
+    background-color: var(--bit-drp-cal-bg);
 }
 
 .bit-drp-ihd {
     width: 100%;
-    color: var(--bit-drp-clr);
     cursor: default;
     font-weight: $tg-fw-semibold;
     user-select: none;
+    color: var(--bit-Dropdown-header-color, var(--bit-drp-clr));
     height: var(--bit-drp-itm-h);
     padding: 0 spacing(1);
     box-sizing: border-box;
@@ -828,7 +1074,7 @@
     text-align: start;
     user-select: none;
     position: relative;
-    color: $clr-fg-pri;
+    color: var(--bit-drp-itm-clr);
     white-space: nowrap;
     align-items: center;
     height: var(--bit-drp-itm-h);
@@ -844,18 +1090,24 @@
 
     @media (hover: hover) {
         &:hover {
-            background-color: $clr-bg-pri-hover;
+            background-color: var(--bit-drp-itm-hover-bg);
         }
     }
+
+    // Walking the list with the arrow keys moves the real focus onto these rows, and the transparent
+    // outline above removed the only indicator the browser would otherwise have drawn on them.
+    &:focus-visible {
+        @include drp-focus-inset;
+    }
 }
 
 .bit-drp-itm[disabled] {
     cursor: default;
-    color: $clr-fg-dis;
+    color: var(--bit-drp-itm-dis-clr);
 
     // The item text carries its own color, so it has to follow the disabled state explicitly.
     .bit-drp-itx {
-        color: $clr-fg-dis;
+        color: var(--bit-drp-itm-dis-clr);
     }
 
     @media (hover: hover) {
@@ -871,7 +1123,7 @@
 .bit-drp-itm.bit-drp-ctg,
 .bit-drp-dyn.bit-drp-ctg,
 .bit-drp-iwr.bit-drp-ctg {
-    background-color: $clr-bg-pri-hover;
+    background-color: var(--bit-drp-itm-hover-bg);
     box-shadow: inset $shp-border-width-thick 0 0 0 var(--bit-drp-clr);
 }
 
@@ -885,34 +1137,31 @@
     }
 }
 
-// The matched part of an item text while a search is active.
+// The matched part of an item text while a search is active. A sub-element of a row, so it takes its
+// corner from the radius ramp rather than from the popup family the callout around it belongs to.
 .bit-drp-hlt {
     font-weight: $tg-fw-semibold;
-    border-radius: $shp-radius-popup;
+    border-radius: $shp-radius-xs;
     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;
+    color: var(--bit-drp-itm-sel-clr);
+    background-color: var(--bit-drp-itm-sel-bg);
+
+    .bit-drp-itx {
+        color: var(--bit-drp-itm-sel-clr);
+    }
 
     @media (hover: hover) {
         &:hover {
-            background-color: $clr-bg-pri-hover;
+            // The two backgrounds blended rather than the hover one on its own: a single select row
+            // carries no check mark, so its fill is the only thing saying it is the selected one, and
+            // taking it away for as long as the pointer rests on it hides exactly the row being looked
+            // for. Where color-mix is not understood the declaration is dropped and the row simply
+            // keeps its selected fill, which is the same trade-off made the safe way round.
+            background-color: color-mix(in srgb, var(--bit-drp-itm-sel-bg), var(--bit-drp-itm-hover-bg));
         }
     }
 }
@@ -920,7 +1169,7 @@
 .bit-drp-sep {
     width: 100%;
     height: $siz-divider;
-    background-color: $clr-bg-sec;
+    background-color: var(--bit-Dropdown-divider-color, #{$clr-bg-sec});
 }
 
 // The hint that the typed text is still too short to filter by, which sits above the (unfiltered)
@@ -934,7 +1183,11 @@
     box-sizing: border-box;
     overflow-wrap: break-word;
     padding: spacing(1) spacing(1.5);
-    font-size: calc(var(--bit-drp-fs) * 0.85);
+    // The text size of the rows it sits above rather than a fraction of it: it is set apart by the
+    // italic and the quieter color it already carries, and a fraction of the smallest size class had
+    // it down at ten pixels - off the type ramp and under what the rest of the library asks anyone
+    // to read. It follows a public item-font-size along with the rows for the same reason.
+    font-size: var(--bit-drp-itm-fs);
 }
 
 .bit-drp-emp {
@@ -947,7 +1200,7 @@
     box-sizing: border-box;
     justify-content: center;
     overflow-wrap: break-word;
-    font-size: var(--bit-drp-fs);
+    font-size: var(--bit-drp-itm-fs);
     min-height: var(--bit-drp-itm-h);
     padding: spacing(1) spacing(1.5);
 }
@@ -963,7 +1216,7 @@
     padding: 0 spacing(1);
     box-sizing: border-box;
     justify-content: center;
-    font-size: var(--bit-drp-fs);
+    font-size: var(--bit-drp-itm-fs);
 }
 
 .bit-drp-spn {
@@ -1009,7 +1262,7 @@
         }
 
         .bit-drp-iwr.bit-drp-chd:hover {
-            background-color: $clr-bg-sec;
+            background-color: var(--bit-drp-itm-sel-bg);
 
             .bit-drp-chm {
                 opacity: 1;
@@ -1017,13 +1270,15 @@
         }
 
         .bit-drp-sel:hover {
-            background-color: $clr-bg-sec;
+            background-color: var(--bit-drp-itm-sel-bg);
         }
     }
 }
 
+// The rule under the select all row separates it from the items it commands, which is the same job a Divider
+// item does between two groups, so it follows the same variable.
 .bit-drp-sac {
-    border-bottom: $shp-border-width $shp-border-style $clr-brd-sec;
+    border-bottom: $shp-border-width $shp-border-style var(--bit-Dropdown-divider-color, #{$clr-brd-sec});
 }
 
 .bit-drp-sai {
@@ -1039,9 +1294,9 @@
             content: "";
             margin: auto;
             position: absolute;
-            width: spacing(1.25);
-            height: spacing(1.25);
-            border-radius: $shp-radius-control;
+            width: calc(var(--bit-drp-sel) * 0.5);
+            height: calc(var(--bit-drp-sel) * 0.5);
+            border-radius: $shp-radius-xs;
             background-color: var(--bit-drp-clr);
         }
     }
@@ -1067,16 +1322,18 @@
     border: none;
     cursor: pointer;
     font-weight: $tg-fw-regular;
-    width: $siz-ctrl-md;
-    height: $siz-ctrl-md;
+    // The square follows the control height like every other button of the component, so the panel of a
+    // small or a large dropdown closes with a target the size of the dropdown rather than a medium one.
+    width: var(--bit-drp-h);
+    height: var(--bit-drp-h);
     text-align: center;
     display: inline-block;
     text-decoration: none;
     box-sizing: border-box;
     padding: 0 spacing(0.5);
-    font-size: $tg-fs-sm;
+    font-size: var(--bit-drp-fs);
     margin-inline-start: auto;
-    border-radius: $shp-radius-control;
+    border-radius: var(--bit-drp-radius);
     background-color: transparent;
     color: $clr-fg-pri;
 
@@ -1089,13 +1346,14 @@
 
         i {
             margin: 0 spacing(0.5);
+            font-size: var(--bit-drp-ico);
         }
     }
 
     @media (hover: hover) {
         &:hover {
             color: $clr-fg-pri-hover;
-            background-color: $clr-bg-pri-hover;
+            background-color: var(--bit-drp-itm-hover-bg);
         }
     }
 
@@ -1103,6 +1361,10 @@
         color: $clr-fg-pri-active;
         background-color: $clr-bg-pri-active;
     }
+
+    &:focus-visible {
+        @include drp-focus-inset;
+    }
 }
 
 .bit-drp-rlc {
@@ -1119,7 +1381,9 @@
         display: block;
         overflow: hidden;
         max-height: unset;
-        width: spacing(34);
+        // Capped at the viewport so a wider panel than the screen it opens on cannot push its close
+        // button off the edge, which is the one control that gets out of it again.
+        width: min(var(--bit-Dropdown-responsive-width, #{spacing(34)}), 100vw);
         animation-name: unset;
         transform: translateX(100%);
         box-shadow: $box-shadow-sheet;
@@ -1143,11 +1407,7 @@
 
 
 .bit-drp-sm {
-    --bit-drp-fs: #{$tg-fs-xs};
-    --bit-drp-h: #{$siz-ctrl-sm};
-    --bit-drp-lbl-lh: #{spacing(2.5)};
-    --bit-drp-itm-h: #{$siz-item-sm};
-    --bit-drp-itm-fs: #{$tg-fs-xs};
+    @include drp-size($tg-fs-xs, $siz-ctrl-sm, spacing(2.5), $siz-item-sm, $tg-fs-xs, $siz-icon-sm, $siz-sel-sm);
 }
 
 .bit-drp-md {
@@ -1155,129 +1415,104 @@
 }
 
 .bit-drp-lg {
-    --bit-drp-fs: #{$tg-fs-md};
-    --bit-drp-h: #{$siz-ctrl-lg};
-    --bit-drp-lbl-lh: #{spacing(3)};
-    --bit-drp-itm-h: #{$siz-item-lg};
-    --bit-drp-itm-fs: #{$tg-fs-md};
+    @include drp-size($tg-fs-md, $siz-ctrl-lg, spacing(3), $siz-item-lg, $tg-fs-md, $siz-icon-lg, $siz-sel-lg);
 }
 
 
-.bit-drp-pri {
-    --bit-drp-clr: #{$clr-pri};
-    --bit-drp-clr-hover: #{$clr-pri-hover};
-    --bit-drp-clr-text: #{$clr-pri-text};
-    --bit-drp-clr-focus: #{$clr-pri-focus};
+// Role classes are generated from the shared $bit-color-roles map (see color-role-maps.scss). They leave
+// the four slots the dropdown uses behind as defaults; drp-vars is what reads them back through the public
+// accent variables, so a role and an override never have to be kept in sync here.
+@each $role, $tokens in $bit-color-roles {
+    .bit-drp-#{$role} {
+        --bit-drp-role-main: #{role($tokens, main)};
+        --bit-drp-role-on: #{role($tokens, on)};
+        --bit-drp-role-hover: #{role($tokens, hover)};
+        --bit-drp-role-focus: #{role($tokens, focus)};
+    }
 }
 
-.bit-drp-sec {
-    --bit-drp-clr: #{$clr-sec};
-    --bit-drp-clr-hover: #{$clr-sec-hover};
-    --bit-drp-clr-text: #{$clr-sec-text};
-    --bit-drp-clr-focus: #{$clr-sec-focus};
-}
 
-.bit-drp-ter {
-    --bit-drp-clr: #{$clr-ter};
-    --bit-drp-clr-hover: #{$clr-ter-hover};
-    --bit-drp-clr-text: #{$clr-ter-text};
-    --bit-drp-clr-focus: #{$clr-ter-focus};
-}
-
-.bit-drp-inf {
-    --bit-drp-clr: #{$clr-inf};
-    --bit-drp-clr-hover: #{$clr-inf-hover};
-    --bit-drp-clr-text: #{$clr-inf-text};
-    --bit-drp-clr-focus: #{$clr-inf-focus};
-}
+// Windows High Contrast / forced-colors: every background an author paints is replaced by the system pair,
+// so the states the dropdown conveys through a background alone - the selected row, the filled checkbox,
+// the highlighted match, the overflow chip - would all come out looking the same. They are re-established
+// in the system colors, which are the only palette that exists in this mode.
+@media (forced-colors: active) {
+    .bit-drp-chp {
+        border-color: CanvasText;
+    }
 
-.bit-drp-suc {
-    --bit-drp-clr: #{$clr-suc};
-    --bit-drp-clr-hover: #{$clr-suc-hover};
-    --bit-drp-clr-text: #{$clr-suc-text};
-    --bit-drp-clr-focus: #{$clr-suc-focus};
-}
+    .bit-drp-ovf {
+        color: HighlightText;
+        border-color: Highlight;
+        background-color: Highlight;
+    }
 
-.bit-drp-wrn {
-    --bit-drp-clr: #{$clr-wrn};
-    --bit-drp-clr-hover: #{$clr-wrn-hover};
-    --bit-drp-clr-text: #{$clr-wrn-text};
-    --bit-drp-clr-focus: #{$clr-wrn-focus};
-}
+    // An outline rather than a background: the fill is stripped, so a selected row is marked with the one
+    // decoration that survives. Inset, so the scroll container cannot clip it.
+    .bit-drp-sel,
+    .bit-drp-iwr.bit-drp-chd {
+        outline: $shp-border-width-thick $shp-border-style Highlight;
+        outline-offset: calc(-1 * #{$shp-border-width-thick});
+    }
 
-.bit-drp-swr {
-    --bit-drp-clr: #{$clr-swr};
-    --bit-drp-clr-hover: #{$clr-swr-hover};
-    --bit-drp-clr-text: #{$clr-swr-text};
-    --bit-drp-clr-focus: #{$clr-swr-focus};
-}
+    // The bar marking the item Enter would take is a box-shadow, which this mode strips. The row is filled
+    // instead - the way a native select fills its current option - which also tells it apart from the
+    // outline a selected row carries. A system color keyword is honoured here where a palette color is not.
+    .bit-drp-itm.bit-drp-ctg,
+    .bit-drp-dyn.bit-drp-ctg,
+    .bit-drp-iwr.bit-drp-ctg {
+        color: HighlightText;
+        background-color: Highlight;
 
-.bit-drp-err {
-    --bit-drp-clr: #{$clr-err};
-    --bit-drp-clr-hover: #{$clr-err-hover};
-    --bit-drp-clr-text: #{$clr-err-text};
-    --bit-drp-clr-focus: #{$clr-err-focus};
-}
+        .bit-drp-itx {
+            color: HighlightText;
+        }
+    }
 
-.bit-drp-pbg {
-    --bit-drp-clr: #{$clr-bg-pri};
-    --bit-drp-clr-hover: #{$clr-bg-pri-hover};
-    --bit-drp-clr-text: #{$clr-fg-pri};
-    --bit-drp-clr-focus: #{$clr-bg-pri-focus};
-}
+    // A rule drawn as a background, which is stripped, leaving the groups of a long list running together.
+    .bit-drp-sep {
+        background-color: CanvasText;
+    }
 
-.bit-drp-sbg {
-    --bit-drp-clr: #{$clr-bg-sec};
-    --bit-drp-clr-hover: #{$clr-bg-sec-hover};
-    --bit-drp-clr-text: #{$clr-fg-sec};
-    --bit-drp-clr-focus: #{$clr-bg-sec-focus};
-}
+    .bit-drp-chb {
+        border-color: CanvasText;
+    }
 
-.bit-drp-tbg {
-    --bit-drp-clr: #{$clr-bg-ter};
-    --bit-drp-clr-hover: #{$clr-bg-ter-hover};
-    --bit-drp-clr-text: #{$clr-fg-ter};
-    --bit-drp-clr-focus: #{$clr-bg-ter-focus};
-}
+    .bit-drp-iwr.bit-drp-chd .bit-drp-chb {
+        border-color: Highlight;
+        background-color: Highlight;
 
-.bit-drp-pfg {
-    --bit-drp-clr: #{$clr-fg-pri};
-    --bit-drp-clr-hover: #{$clr-fg-pri-hover};
-    --bit-drp-clr-text: #{$clr-bg-pri};
-    --bit-drp-clr-focus: #{$clr-fg-pri-focus};
-}
+        .bit-drp-chm {
+            color: HighlightText;
+        }
+    }
 
-.bit-drp-sfg {
-    --bit-drp-clr: #{$clr-fg-sec};
-    --bit-drp-clr-hover: #{$clr-fg-sec-hover};
-    --bit-drp-clr-text: #{$clr-bg-sec};
-    --bit-drp-clr-focus: #{$clr-fg-sec-focus};
-}
+    .bit-drp-sai .bit-drp-chb::after {
+        background-color: Highlight;
+    }
 
-.bit-drp-tfg {
-    --bit-drp-clr: #{$clr-fg-ter};
-    --bit-drp-clr-hover: #{$clr-fg-ter-hover};
-    --bit-drp-clr-text: #{$clr-bg-ter};
-    --bit-drp-clr-focus: #{$clr-fg-ter-focus};
-}
+    .bit-drp-hlt {
+        color: HighlightText;
+        background-color: Highlight;
+    }
 
-.bit-drp-pbr {
-    --bit-drp-clr: #{$clr-brd-pri};
-    --bit-drp-clr-hover: #{$clr-brd-pri-hover};
-    --bit-drp-clr-text: #{$clr-fg-pri};
-    --bit-drp-clr-focus: #{$clr-brd-pri-focus};
-}
+    // The spinner's track and its arc are painted the same color here, which stops the ring reading as
+    // motion at all; the arc is put back on the text color so the turning stays visible.
+    .bit-drp-spn {
+        border-color: GrayText;
+        border-top-color: CanvasText;
+    }
 
-.bit-drp-sbr {
-    --bit-drp-clr: #{$clr-brd-sec};
-    --bit-drp-clr-hover: #{$clr-brd-sec-hover};
-    --bit-drp-clr-text: #{$clr-fg-sec};
-    --bit-drp-clr-focus: #{$clr-brd-sec-focus};
-}
+    // Disabled is conveyed through a drained palette, which this mode discards, so it is restated with the
+    // one system color that means exactly that.
+    .bit-drp.bit-dis .bit-drp-wrp,
+    .bit-drp.bit-dis .bit-drp-lbl,
+    .bit-drp-itm[disabled],
+    .bit-drp-iwr.bit-drp-ids .bit-drp-itx {
+        color: GrayText;
+    }
 
-.bit-drp-tbr {
-    --bit-drp-clr: #{$clr-brd-ter};
-    --bit-drp-clr-hover: #{$clr-brd-ter-hover};
-    --bit-drp-clr-text: #{$clr-fg-ter};
-    --bit-drp-clr-focus: #{$clr-brd-ter-focus};
+    .bit-drp-iwr.bit-drp-ids .bit-drp-chb {
+        border-color: GrayText;
+    }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs
index 9be7cb18f3e..738d1224fae 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs
@@ -12,6 +12,16 @@ public class BitDropdownClassStyles
     /// </summary>
     public string? Label { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the error message container of the BitDropdown.
+    /// </summary>
+    public string? ErrorMessageContainer { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the error message of the BitDropdown.
+    /// </summary>
+    public string? ErrorMessage { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the description container of the BitDropdown.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownParams.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownParams.cs
new file mode 100644
index 00000000000..e2b02c1ad6d
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownParams.cs
@@ -0,0 +1,1163 @@
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// The parameters for <see cref="BitDropdown{TItem, TValue}"/> component.
+/// </summary>
+/// <remarks>
+/// The value/selection parameters (Value, Values, DefaultValue, DefaultValues, InitialSelectedItems and
+/// IsOpen), the validation state parameters (Invalid and ErrorMessage) and everything a page writes as
+/// markup or as a handler (the templates, the Options content and the event callbacks) are left out on
+/// purpose: they belong to a single dropdown rather than to a group of them.
+/// <br />
+/// The type arguments are the ones of the dropdowns this object is cascaded to, so one
+/// <see cref="BitParams"/> can carry a separate object per pair of type arguments: each of them cascades
+/// under the same <see cref="ParamName"/> and a dropdown picks the one its own type arguments match.
+/// </remarks>
+/// <typeparam name="TItem">The type of the items of the dropdowns these parameters are provided for.</typeparam>
+/// <typeparam name="TValue">The type of the value of the dropdowns these parameters are provided for.</typeparam>
+public class BitDropdownParams<TItem, TValue> : BitComponentBaseParams, IBitComponentParams where TItem : class, new()
+{
+    /// <summary>
+    /// Represents the parameter name used to identify the <see cref="BitDropdown{TItem, TValue}"/> cascading parameters within <see cref="BitParams"/>.
+    /// </summary>
+    /// <remarks>
+    /// This constant is typically used when referencing or accessing the BitDropdown value in
+    /// parameterized APIs or configuration settings. Using this constant helps ensure consistency and reduces the risk
+    /// of typographical errors.
+    /// <br />
+    /// Every closed generic version of this class cascades under this same name, and a dropdown matches the
+    /// one whose type arguments are its own, so the name does not have to name them.
+    /// </remarks>
+    public const string ParamName = $"{nameof(BitParams)}.{nameof(BitDropdown<object, object>)}";
+
+
+
+    public string Name => ParamName;
+
+
+
+    /// <summary>
+    /// Detailed description of the dropdown for the benefit of screen readers. It is rendered into a
+    /// visually hidden element that the dropdown references through its aria-describedby attribute,
+    /// which is what lets a field carry an instruction too long to show next to it. It is read after
+    /// <see cref="Description"/>, so the two can be used together.
+    /// </summary>
+    public string? AriaDescription { get; set; }
+
+    /// <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>
+    public bool? AutoClearSearch { get; set; }
+
+    /// <summary>
+    /// Gives the focus to the dropdown as soon as it is rendered.
+    /// </summary>
+    public bool? AutoFocus { get; set; }
+
+    /// <summary>
+    /// Enables auto-focusing of the SearchBox input when the callout is open.
+    /// </summary>
+    public bool? AutoFocusSearchBox { get; set; }
+
+    /// <summary>
+    /// Makes Enter in the ComboBox mode pick the first item the typed text matches when no item matches
+    /// it exactly, which is what an autocomplete does: typing "app" and pressing Enter then selects
+    /// "Apple" instead of doing nothing. It takes precedence over <see cref="Dynamic"/>, so a term that
+    /// matches an existing item selects that item rather than creating a new one out of it.
+    /// </summary>
+    public bool? AutoSelectFirstMatch { get; set; }
+
+    /// <summary>
+    /// The icon of the chevron down element of the dropdown.
+    /// Takes precedence over <see cref="CaretDownIconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="CaretDownIconName"/> instead.
+    /// </summary>
+    /// <example>
+    /// Bootstrap: CaretDownIcon="BitIconInfo.Bi("chevron-down")"
+    /// FontAwesome: CaretDownIcon="BitIconInfo.Fa("solid chevron-down")"
+    /// Custom CSS: CaretDownIcon="BitIconInfo.Css("my-chevron-class")"
+    /// </example>
+    public BitIconInfo? CaretDownIcon { get; set; }
+
+    /// <summary>
+    /// The icon name of the chevron down element of the dropdown from the Fluent UI icon set.
+    /// For external icon libraries, use <see cref="CaretDownIcon"/> instead.
+    /// </summary>
+    public string? CaretDownIconName { get; set; }
+
+    /// <summary>
+    /// Shows the selected items like chips in the BitDropdown.
+    /// </summary>
+    public bool? Chips { get; set; }
+
+    /// <summary>
+    /// The composite format of the accessible name of the remove button of a chip, which receives the
+    /// text of the item the chip stands for, for example "Remove {0}". Defaults to the English message.
+    /// </summary>
+    public string? ChipsRemoveButtonAriaLabel { get; set; }
+
+    /// <summary>
+    /// The icon of the remove button in the chips display.
+    /// Takes precedence over <see cref="ChipsRemoveIconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="ChipsRemoveIconName"/> instead.
+    /// </summary>
+    public BitIconInfo? ChipsRemoveIcon { get; set; }
+
+    /// <summary>
+    /// The icon name of the remove button in the chips display from the Fluent UI icon set.
+    /// For external icon libraries, use <see cref="ChipsRemoveIcon"/> instead.
+    /// </summary>
+    public string? ChipsRemoveIconName { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes for different parts of the BitDropdown.
+    /// </summary>
+    public BitDropdownClassStyles? Classes { get; set; }
+
+    /// <summary>
+    /// The accessible name (and the tooltip) of the clear button of the dropdown.
+    /// Defaults to the English message.
+    /// </summary>
+    public string? ClearButtonAriaLabel { get; set; }
+
+    /// <summary>
+    /// The icon of the clear button of the dropdown.
+    /// Takes precedence over <see cref="ClearButtonIconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="ClearButtonIconName"/> instead.
+    /// </summary>
+    public BitIconInfo? ClearButtonIcon { get; set; }
+
+    /// <summary>
+    /// The icon name of the clear button of the dropdown from the Fluent UI icon set.
+    /// For external icon libraries, use <see cref="ClearButtonIcon"/> instead.
+    /// </summary>
+    public string? ClearButtonIconName { get; set; }
+
+    /// <summary>
+    /// Makes the Escape key take back the whole selection once there is nothing left for it to dismiss:
+    /// the first press closes the callout (and, in the ComboBox mode, drops the text that was typed into
+    /// it), and only a press with the callout already closed and nothing typed clears what is selected.
+    /// It reports itself through <c>OnClear</c> exactly as the clear button does, and it is
+    /// refused in the same places that button is - a read-only dropdown, a one-way binding.
+    /// </summary>
+    public bool? ClearOnEscape { get; set; }
+
+    /// <summary>
+    /// Determines whether picking an item in the callout closes it. It defaults to the behavior each
+    /// mode expects: a single select dropdown closes, because the pick is the whole interaction, while
+    /// a multi select one stays open so the next item can be picked right away. Set it explicitly to
+    /// keep a single select callout open (a long list the user keeps trying options from) or to close a
+    /// multi select one after every pick.
+    /// </summary>
+    public bool? CloseOnSelect { get; set; }
+
+    /// <summary>
+    /// The general color of the dropdown.
+    /// </summary>
+    public BitColor? Color { get; set; }
+
+    /// <summary>
+    /// Activates the ComboBox feature in BitDropDown component.
+    /// </summary>
+    public bool? Combo { get; set; }
+
+    /// <summary>
+    /// The accessible name (and the tooltip) of the add button in the responsive ComboBox mode.
+    /// Defaults to the English message.
+    /// </summary>
+    public string? ComboBoxAddButtonAriaLabel { get; set; }
+
+    /// <summary>
+    /// The icon of the add button in the responsive ComboBox mode.
+    /// Takes precedence over <see cref="ComboBoxAddButtonIconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="ComboBoxAddButtonIconName"/> instead.
+    /// </summary>
+    public BitIconInfo? ComboBoxAddButtonIcon { get; set; }
+
+    /// <summary>
+    /// The icon name of the add button in the responsive ComboBox mode from the Fluent UI icon set.
+    /// For external icon libraries, use <see cref="ComboBoxAddButtonIcon"/> instead.
+    /// </summary>
+    public string? ComboBoxAddButtonIconName { get; set; }
+
+    /// <summary>
+    /// The debounce time in milliseconds for the search and combo box inputs (applied when Immediate is enabled).
+    /// </summary>
+    public int? DebounceTime { get; set; }
+
+    /// <summary>
+    /// The description rendered below the dropdown, which is also tied to it as its accessible
+    /// description, so a screen reader reads it along with the dropdown instead of leaving it as text
+    /// that only happens to sit nearby.
+    /// </summary>
+    public string? Description { get; set; }
+
+    /// <summary>
+    /// Determines the allowed drop directions of the callout.
+    /// </summary>
+    public BitDropDirection? DropDirection { get; set; }
+
+    /// <summary>
+    /// It is allowed to add a new item in the ComboBox mode. While the typed text names no item the list
+    /// offers to create one out of it, so that adding an item is something the user can see and click
+    /// rather than a shortcut they have to know about (see <see cref="DynamicItemTextFormat"/>).
+    /// </summary>
+    public bool? Dynamic { get; set; }
+
+    /// <summary>
+    /// The composite format of the row the callout offers to create a new item with in the
+    /// <see cref="Dynamic"/> ComboBox mode, which receives the text the item would be created from,
+    /// for example "Add \"{0}\"". Defaults to the English message.
+    /// </summary>
+    public string? DynamicItemTextFormat { get; set; }
+
+    /// <summary>
+    /// The function for generating value in a custom item when a new item is on added Dynamic ComboBox mode.
+    /// </summary>
+    public Func<TItem?, TValue>? DynamicValueGenerator { get; set; }
+
+    /// <summary>
+    /// The text to render in the callout when there is no item to show.
+    /// </summary>
+    public string? EmptyText { get; set; }
+
+    /// <summary>
+    /// Decides whether the text committed in the ComboBox mode already stands for one of the selected
+    /// items, in place of the default comparison of that text with the item texts, ignoring case. It
+    /// receives the selected items and the committed text, and returning true stops the commit, so the
+    /// same item cannot be selected (or created) twice under a name your data considers equivalent.
+    /// </summary>
+    public Func<ICollection<TItem>, string, bool>? ExistsSelectedItemFunction { get; set; }
+
+    /// <summary>
+    /// Finds the item the text committed in the ComboBox mode stands for, in place of the default
+    /// comparison of that text with the item texts, ignoring case. It receives the items and the
+    /// committed text; the item it returns gets selected, and only when it returns none does
+    /// <see cref="AutoSelectFirstMatch"/> and then <see cref="Dynamic"/> get their turn.
+    /// </summary>
+    public Func<ICollection<TItem>, string, TItem?>? FindItemFunction { get; set; }
+
+    /// <summary>
+    /// Enables fit-content value for the width of the root element.
+    /// </summary>
+    public bool? FitWidth { 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.
+    /// A group header left naming nothing, and a divider left without items on one of its sides, are
+    /// removed along with them.
+    /// It has no effect when the items come from an <see cref="ItemsProvider"/>, which hands over the
+    /// window it was asked for and is the only place that can leave the selected items out of it.
+    /// </summary>
+    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 <c>ItemTemplate</c>.
+    /// The highlighted part is found by the built-in algorithm (<see cref="SearchMode"/> and
+    /// <see cref="SearchIgnoreDiacritics"/>), so a custom <see cref="SearchFunction"/> that matches by
+    /// some other rule can produce items with nothing to highlight.
+    /// </summary>
+    public bool? HighlightSearch { get; set; }
+
+    /// <summary>
+    /// Searches the items as the user types in the search box (based on the 'oninput' HTML event)
+    /// instead of waiting for the search box to be committed.
+    /// The ComboBox input always searches as it is typed - that is what a combo box is - so there it
+    /// only decides whether <see cref="DebounceTime"/> and <see cref="ThrottleTime"/> apply.
+    /// </summary>
+    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>
+    public bool? IsLoading { get; set; }
+
+    /// <summary>
+    /// The icon of the check mark in the multi-select items.
+    /// Takes precedence over <see cref="ItemCheckIconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="ItemCheckIconName"/> instead.
+    /// </summary>
+    public BitIconInfo? ItemCheckIcon { get; set; }
+
+    /// <summary>
+    /// The icon name of the check mark in the multi-select items from the Fluent UI icon set.
+    /// For external icon libraries, use <see cref="ItemCheckIcon"/> instead.
+    /// </summary>
+    public string? ItemCheckIconName { get; set; }
+
+    /// <summary>
+    /// The list of items to display in the callout.
+    /// </summary>
+    public ICollection<TItem>? Items { get; set; }
+
+    /// <summary>
+    /// The height of each item in pixels for virtualization.
+    /// </summary>
+    public int? ItemSize { get; set; }
+
+    /// <summary>
+    /// The function providing items to the list for virtualization. It loads the items on demand, in
+    /// the windows the user actually scrolls to, and receives the current search text so the filtering
+    /// happens at the source instead of over an already loaded list.
+    /// It requires <see cref="Virtualize"/> to be enabled, which is what requests the windows.
+    /// </summary>
+    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>
+    public int? ItemsProviderDebounceTime { get; set; }
+
+    /// <summary>
+    /// The text of the label element of the dropdown.
+    /// </summary>
+    public string? Label { get; set; }
+
+    /// <summary>
+    /// The text to render in the callout in place of the items while <see cref="IsLoading"/> is enabled.
+    /// </summary>
+    public string? LoadingText { 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>
+    public int? MaxDisplayedItems { get; set; }
+
+    /// <summary>
+    /// The maximum height of the scrollable item list of the callout in pixels, which is what keeps a
+    /// long list from taking over the screen. It is applied on top of the space the viewport leaves, so
+    /// it can only ever make the list shorter: a callout near the bottom of the window is still capped
+    /// by the room it has. A value that is not greater than zero (and null) leaves the viewport alone
+    /// to decide.
+    /// </summary>
+    public int? MaxHeight { get; set; }
+
+    /// <summary>
+    /// 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>
+    public int? MaxSelectedItems { get; set; }
+
+    /// <summary>
+    /// The composite format of the message announced to screen readers once <see cref="MaxSelectedItems"/>
+    /// is reached, which receives that limit, for example "Maximum of {0} items selected". Reaching the
+    /// limit disables the items that are not selected yet, which is a change only a sighted user can
+    /// notice on their own. Defaults to the English message.
+    /// </summary>
+    public string? MaxSelectedItemsText { 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>
+    public int? MinSearchLength { get; set; }
+
+    /// <summary>
+    /// The composite format of the hint the callout shows while the typed text is still shorter than
+    /// <see cref="MinSearchLength"/>, which receives the number of characters that are still missing,
+    /// for example "Type {0} more characters to search". It is what tells the user that the list they
+    /// are looking at is the full one rather than the result of what they typed, and it is announced
+    /// to screen readers as well. Defaults to the English message; the hint is not shown at all while
+    /// nothing has been typed, where the full list needs no explaining.
+    /// </summary>
+    public string? MinSearchLengthText { get; set; }
+
+    /// <summary>
+    /// Enables the multi select mode.
+    /// </summary>
+    public bool? MultiSelect { get; set; }
+
+    /// <summary>
+    /// The delimiter for joining the values to create the text of the dropdown in multi select mode.
+    /// </summary>
+    public string? MultiSelectDelimiter { get; set; }
+
+    /// <summary>
+    /// Names and selectors of the custom input type properties.
+    /// </summary>
+    public BitDropdownNameSelectors<TItem, TValue>? NameSelectors { get; set; }
+
+    /// <summary>
+    /// Removes the border from the root element.
+    /// </summary>
+    public bool? NoBorder { 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>
+    public string? NoResultsText { get; set; }
+
+    /// <summary>
+    /// Stops the arrow keys at the ends of the item list instead of letting them wrap around from the
+    /// last item to the first one and back, which suits a long list where the wrap is more likely to
+    /// read as the focus having been lost than as a deliberate jump. The type-ahead still wraps, since
+    /// it looks for the item that matches rather than for the one that comes next.
+    /// It has no effect in virtualize mode, where the ends of the rendered window are not the ends of
+    /// the list and the focus stops at them either way.
+    /// </summary>
+    public bool? NoWrapNavigation { get; set; }
+
+    /// <summary>
+    /// Opens the callout as soon as the dropdown receives the focus, so tabbing into it (or clicking
+    /// any part of it) already shows the items without a further click or key press.
+    /// </summary>
+    public bool? OpenOnFocus { 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>
+    public string? OverflowTextFormat { get; set; }
+
+    /// <summary>
+    /// Determines how many additional items are rendered before and after the visible region.
+    /// </summary>
+    public int? OverscanCount { get; set; }
+
+    /// <summary>
+    /// The placeholder text of the dropdown.
+    /// </summary>
+    public string? Placeholder { get; set; }
+
+    /// <summary>
+    /// Prefix displayed before the BitDropdown contents. This is not included in the value.
+    /// Ensure a descriptive label is present to assist screen readers, as the value does not include the prefix.
+    /// </summary>
+    public string? Prefix { get; set; }
+
+    /// <summary>
+    /// Disables automatic setting of the callout width and preserves its original width.
+    /// </summary>
+    public bool? PreserveCalloutWidth { get; set; }
+
+    /// <summary>
+    /// Enables calling the select events when the same item is selected in single select mode.
+    /// </summary>
+    public bool? Reselectable { get; set; }
+
+    /// <summary>
+    /// Enables the responsive mode of the component for small screens.
+    /// </summary>
+    public bool? Responsive { get; set; }
+
+    /// <summary>
+    /// The accessible name (and the tooltip) of the close button in the responsive mode callout.
+    /// Defaults to the English message.
+    /// </summary>
+    public string? ResponsiveCloseButtonAriaLabel { get; set; }
+
+    /// <summary>
+    /// The icon of the close button in the responsive mode callout.
+    /// Takes precedence over <see cref="ResponsiveCloseIconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="ResponsiveCloseIconName"/> instead.
+    /// </summary>
+    public BitIconInfo? ResponsiveCloseIcon { get; set; }
+
+    /// <summary>
+    /// The icon name of the close button in the responsive mode callout from the Fluent UI icon set.
+    /// For external icon libraries, use <see cref="ResponsiveCloseIcon"/> instead.
+    /// </summary>
+    public string? ResponsiveCloseIconName { get; set; }
+
+    /// <summary>
+    /// The accessible name of the SearchBox input. Defaults to the English message.
+    /// </summary>
+    public string? SearchBoxAriaLabel { get; set; }
+
+    /// <summary>
+    /// The accessible name (and the tooltip) of the clear button of the SearchBox.
+    /// Defaults to the English message.
+    /// </summary>
+    public string? SearchBoxClearButtonAriaLabel { get; set; }
+
+    /// <summary>
+    /// The icon of the clear icon in the SearchBox.
+    /// Takes precedence over <see cref="SearchBoxClearIconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="SearchBoxClearIconName"/> instead.
+    /// </summary>
+    public BitIconInfo? SearchBoxClearIcon { get; set; }
+
+    /// <summary>
+    /// The icon name of the clear icon in the SearchBox from the Fluent UI icon set.
+    /// For external icon libraries, use <see cref="SearchBoxClearIcon"/> instead.
+    /// </summary>
+    public string? SearchBoxClearIconName { get; set; }
+
+    /// <summary>
+    /// The icon of the search icon in the SearchBox.
+    /// Takes precedence over <see cref="SearchBoxIconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="SearchBoxIconName"/> instead.
+    /// </summary>
+    public BitIconInfo? SearchBoxIcon { get; set; }
+
+    /// <summary>
+    /// The icon name of the search icon in the SearchBox from the Fluent UI icon set.
+    /// For external icon libraries, use <see cref="SearchBoxIcon"/> instead.
+    /// </summary>
+    public string? SearchBoxIconName { get; set; }
+
+    /// <summary>
+    /// The placeholder text of the SearchBox input.
+    /// </summary>
+    public string? SearchBoxPlaceholder { get; set; }
+
+    /// <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>
+    public Func<ICollection<TItem>, string, ICollection<TItem>>? SearchFunction { get; set; }
+
+    /// <summary>
+    /// Matches the search text against the item texts with the diacritics of both removed, so that
+    /// "Jose" finds "José" and "Muller" finds "Müller". The item text itself is left untouched, and so
+    /// is the part of it that <see cref="HighlightSearch"/> emphasizes. Ignored when a
+    /// <see cref="SearchFunction"/> is provided, which does its own matching.
+    /// </summary>
+    public bool? SearchIgnoreDiacritics { 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>
+    public BitDropdownSearchMode? SearchMode { get; set; }
+
+    /// <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>
+    public string? SearchResultsText { get; set; }
+
+    /// <summary>
+    /// The text of the select all item in multi select mode.
+    /// </summary>
+    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>
+    public string? SelectedItemsTextFormat { get; set; }
+
+    /// <summary>
+    /// Selects the text already in the ComboBox input whenever it takes the focus, so that typing
+    /// replaces the term that is there instead of appending to it - which is what a field the user
+    /// comes back to in order to search for something else needs. It has no effect outside of the
+    /// ComboBox mode, and none while the input is empty, where there is nothing to select.
+    /// </summary>
+    public bool? SelectTextOnFocus { get; set; }
+
+    /// <summary>
+    /// Shows the clear button when an item is selected.
+    /// </summary>
+    public bool? ShowClearButton { get; set; }
+
+    /// <summary>
+    /// Shows the SearchBox element in the callout.
+    /// It has no effect in the ComboBox mode, where the input of the dropdown itself is what the items
+    /// are filtered by, and a second search field would only split the typing between two places.
+    /// </summary>
+    public bool? ShowSearchBox { get; set; }
+
+    /// <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>
+    public bool? ShowSelectAll { get; set; }
+
+    /// <summary>
+    /// The size of the dropdown.
+    /// </summary>
+    public BitSize? Size { get; set; }
+
+    /// <summary>
+    /// Keeps the header of a group pinned to the top of the item list while its items are scrolled
+    /// past, so a long grouped list never leaves the user looking at items whose group has scrolled
+    /// out of view.
+    /// </summary>
+    public bool? StickyHeaders { get; set; }
+
+    /// <summary>
+    /// Custom CSS styles for different parts of the BitDropdown.
+    /// </summary>
+    public BitDropdownClassStyles? Styles { get; set; }
+
+    /// <summary>
+    /// Suffix displayed after the BitDropdown contents. This is not included in the value. 
+    /// Ensure a descriptive label is present to assist screen readers, as the value does not include the suffix.
+    /// </summary>
+    public string? Suffix { get; set; }
+
+    /// <summary>
+    /// The throttle time in milliseconds for the search and combo box inputs (applied when Immediate is enabled).
+    /// </summary>
+    public int? ThrottleTime { get; set; }
+
+    /// <summary>
+    /// The title to show when the mouse hovers over the dropdown.
+    /// </summary>
+    public string? Title { get; set; }
+
+    /// <summary>
+    /// The characters that split the text typed (or pasted) into the multi select ComboBox input into
+    /// separate terms, each committed as its own selection exactly as typing it and pressing Enter
+    /// would: a term naming an existing item selects it, and with <see cref="Dynamic"/> enabled a term
+    /// naming none adds a new item. This is what turns a pasted "a, b, c" into three selections
+    /// instead of one literal term.
+    /// </summary>
+    public char[]? TokenSeparators { get; set; }
+
+    /// <summary>
+    /// Removes the default background color from the root element.
+    /// </summary>
+    public bool? Transparent { get; set; }
+
+    /// <summary>
+    /// Renders the dropdown with only a bottom border in place of the box around it, which is the
+    /// variant that suits a dense form where a full box per field would be too much furniture.
+    /// </summary>
+    public bool? Underlined { get; set; }
+
+    /// <summary>
+    /// Decides whether two values stand for the same selection, in place of the default equality of
+    /// <typeparamref name="TValue"/>. This is what a value type that is not its own identity needs: a
+    /// record or a class used as the value compares by reference by default, so a value that arrives
+    /// from a form, a query string or a fresh fetch would never match the item it names, however equal
+    /// the two look. It also decides which item a clicked value belongs to, so a comparer that treats
+    /// two different values as equal makes them one and the same selection.
+    /// </summary>
+    public IEqualityComparer<TValue>? ValueComparer { get; set; }
+
+    /// <summary>
+    /// Enables virtualization to render only the visible items.
+    /// </summary>
+    public bool? Virtualize { get; set; }
+
+
+    /// <summary>
+    /// Updates the properties of the specified <see cref="BitDropdown{TItem, TValue}"/> instance with any values that have been set on
+    /// this object, if those properties have not already been set on the <see cref="BitDropdown{TItem, TValue}"/>.
+    /// </summary>
+    /// <remarks>
+    /// Only properties that have a value set and have not already been set on the <paramref name="bitDropdown"/> will be updated.
+    /// This method does not overwrite existing values on <paramref name="bitDropdown"/>.
+    /// </remarks>
+    /// <param name="bitDropdown">
+    /// The <see cref="BitDropdown{TItem, TValue}"/> instance whose properties will be updated. Cannot be null.
+    /// </param>
+    public void UpdateParameters(BitDropdown<TItem, TValue> bitDropdown)
+    {
+        if (bitDropdown is null) return;
+
+        UpdateBaseParameters(bitDropdown);
+
+        if (AriaDescription.HasValue() && bitDropdown.HasNotBeenSet(nameof(AriaDescription)))
+        {
+            bitDropdown.AriaDescription = AriaDescription;
+        }
+
+        if (AutoClearSearch.HasValue && bitDropdown.HasNotBeenSet(nameof(AutoClearSearch)))
+        {
+            bitDropdown.AutoClearSearch = AutoClearSearch.Value;
+        }
+
+        if (AutoFocus.HasValue && bitDropdown.HasNotBeenSet(nameof(AutoFocus)))
+        {
+            bitDropdown.AutoFocus = AutoFocus.Value;
+        }
+
+        if (AutoFocusSearchBox.HasValue && bitDropdown.HasNotBeenSet(nameof(AutoFocusSearchBox)))
+        {
+            bitDropdown.AutoFocusSearchBox = AutoFocusSearchBox.Value;
+        }
+
+        if (AutoSelectFirstMatch.HasValue && bitDropdown.HasNotBeenSet(nameof(AutoSelectFirstMatch)))
+        {
+            bitDropdown.AutoSelectFirstMatch = AutoSelectFirstMatch.Value;
+        }
+
+        if (CaretDownIcon is not null && bitDropdown.HasNotBeenSet(nameof(CaretDownIcon)))
+        {
+            bitDropdown.CaretDownIcon = CaretDownIcon;
+        }
+
+        if (CaretDownIconName.HasValue() && bitDropdown.HasNotBeenSet(nameof(CaretDownIconName)))
+        {
+            bitDropdown.CaretDownIconName = CaretDownIconName;
+        }
+
+        if (Chips.HasValue && bitDropdown.HasNotBeenSet(nameof(Chips)))
+        {
+            bitDropdown.Chips = Chips.Value;
+
+            bitDropdown.ClassBuilder.Reset();
+        }
+
+        if (ChipsRemoveButtonAriaLabel.HasValue() && bitDropdown.HasNotBeenSet(nameof(ChipsRemoveButtonAriaLabel)))
+        {
+            bitDropdown.ChipsRemoveButtonAriaLabel = ChipsRemoveButtonAriaLabel;
+        }
+
+        if (ChipsRemoveIcon is not null && bitDropdown.HasNotBeenSet(nameof(ChipsRemoveIcon)))
+        {
+            bitDropdown.ChipsRemoveIcon = ChipsRemoveIcon;
+        }
+
+        if (ChipsRemoveIconName.HasValue() && bitDropdown.HasNotBeenSet(nameof(ChipsRemoveIconName)))
+        {
+            bitDropdown.ChipsRemoveIconName = ChipsRemoveIconName;
+        }
+
+        if (Classes is not null && bitDropdown.HasNotBeenSet(nameof(Classes)))
+        {
+            bitDropdown.Classes = Classes;
+
+            bitDropdown.ClassBuilder.Reset();
+        }
+
+        if (ClearButtonAriaLabel.HasValue() && bitDropdown.HasNotBeenSet(nameof(ClearButtonAriaLabel)))
+        {
+            bitDropdown.ClearButtonAriaLabel = ClearButtonAriaLabel;
+        }
+
+        if (ClearButtonIcon is not null && bitDropdown.HasNotBeenSet(nameof(ClearButtonIcon)))
+        {
+            bitDropdown.ClearButtonIcon = ClearButtonIcon;
+        }
+
+        if (ClearButtonIconName.HasValue() && bitDropdown.HasNotBeenSet(nameof(ClearButtonIconName)))
+        {
+            bitDropdown.ClearButtonIconName = ClearButtonIconName;
+        }
+
+        if (ClearOnEscape.HasValue && bitDropdown.HasNotBeenSet(nameof(ClearOnEscape)))
+        {
+            bitDropdown.ClearOnEscape = ClearOnEscape.Value;
+        }
+
+        if (CloseOnSelect.HasValue && bitDropdown.HasNotBeenSet(nameof(CloseOnSelect)))
+        {
+            bitDropdown.CloseOnSelect = CloseOnSelect.Value;
+        }
+
+        if (Color.HasValue && bitDropdown.HasNotBeenSet(nameof(Color)))
+        {
+            bitDropdown.Color = Color.Value;
+
+            bitDropdown.ClassBuilder.Reset();
+        }
+
+        if (Combo.HasValue && bitDropdown.HasNotBeenSet(nameof(Combo)))
+        {
+            bitDropdown.Combo = Combo.Value;
+        }
+
+        if (ComboBoxAddButtonAriaLabel.HasValue() && bitDropdown.HasNotBeenSet(nameof(ComboBoxAddButtonAriaLabel)))
+        {
+            bitDropdown.ComboBoxAddButtonAriaLabel = ComboBoxAddButtonAriaLabel;
+        }
+
+        if (ComboBoxAddButtonIcon is not null && bitDropdown.HasNotBeenSet(nameof(ComboBoxAddButtonIcon)))
+        {
+            bitDropdown.ComboBoxAddButtonIcon = ComboBoxAddButtonIcon;
+        }
+
+        if (ComboBoxAddButtonIconName.HasValue() && bitDropdown.HasNotBeenSet(nameof(ComboBoxAddButtonIconName)))
+        {
+            bitDropdown.ComboBoxAddButtonIconName = ComboBoxAddButtonIconName;
+        }
+
+        if (DebounceTime.HasValue && bitDropdown.HasNotBeenSet(nameof(DebounceTime)))
+        {
+            bitDropdown.DebounceTime = DebounceTime.Value;
+        }
+
+        if (Description.HasValue() && bitDropdown.HasNotBeenSet(nameof(Description)))
+        {
+            bitDropdown.Description = Description;
+        }
+
+        if (DropDirection.HasValue && bitDropdown.HasNotBeenSet(nameof(DropDirection)))
+        {
+            bitDropdown.DropDirection = DropDirection.Value;
+        }
+
+        if (Dynamic.HasValue && bitDropdown.HasNotBeenSet(nameof(Dynamic)))
+        {
+            bitDropdown.Dynamic = Dynamic.Value;
+        }
+
+        if (DynamicItemTextFormat.HasValue() && bitDropdown.HasNotBeenSet(nameof(DynamicItemTextFormat)))
+        {
+            bitDropdown.DynamicItemTextFormat = DynamicItemTextFormat;
+        }
+
+        if (DynamicValueGenerator is not null && bitDropdown.HasNotBeenSet(nameof(DynamicValueGenerator)))
+        {
+            bitDropdown.DynamicValueGenerator = DynamicValueGenerator;
+        }
+
+        if (EmptyText.HasValue() && bitDropdown.HasNotBeenSet(nameof(EmptyText)))
+        {
+            bitDropdown.EmptyText = EmptyText;
+        }
+
+        if (ExistsSelectedItemFunction is not null && bitDropdown.HasNotBeenSet(nameof(ExistsSelectedItemFunction)))
+        {
+            bitDropdown.ExistsSelectedItemFunction = ExistsSelectedItemFunction;
+        }
+
+        if (FindItemFunction is not null && bitDropdown.HasNotBeenSet(nameof(FindItemFunction)))
+        {
+            bitDropdown.FindItemFunction = FindItemFunction;
+        }
+
+        if (FitWidth.HasValue && bitDropdown.HasNotBeenSet(nameof(FitWidth)))
+        {
+            bitDropdown.FitWidth = FitWidth.Value;
+
+            bitDropdown.StyleBuilder.Reset();
+        }
+
+        if (HideSelectedItems.HasValue && bitDropdown.HasNotBeenSet(nameof(HideSelectedItems)))
+        {
+            bitDropdown.HideSelectedItems = HideSelectedItems.Value;
+        }
+
+        if (HighlightSearch.HasValue && bitDropdown.HasNotBeenSet(nameof(HighlightSearch)))
+        {
+            bitDropdown.HighlightSearch = HighlightSearch.Value;
+        }
+
+        if (Immediate.HasValue && bitDropdown.HasNotBeenSet(nameof(Immediate)))
+        {
+            bitDropdown.Immediate = Immediate.Value;
+        }
+
+        if (IsLoading.HasValue && bitDropdown.HasNotBeenSet(nameof(IsLoading)))
+        {
+            bitDropdown.IsLoading = IsLoading.Value;
+        }
+
+        if (ItemCheckIcon is not null && bitDropdown.HasNotBeenSet(nameof(ItemCheckIcon)))
+        {
+            bitDropdown.ItemCheckIcon = ItemCheckIcon;
+        }
+
+        if (ItemCheckIconName.HasValue() && bitDropdown.HasNotBeenSet(nameof(ItemCheckIconName)))
+        {
+            bitDropdown.ItemCheckIconName = ItemCheckIconName;
+        }
+
+        if (Items is not null && bitDropdown.HasNotBeenSet(nameof(Items)))
+        {
+            bitDropdown.Items = Items;
+        }
+
+        if (ItemSize.HasValue && bitDropdown.HasNotBeenSet(nameof(ItemSize)))
+        {
+            bitDropdown.ItemSize = ItemSize.Value;
+        }
+
+        if (ItemsProvider is not null && bitDropdown.HasNotBeenSet(nameof(ItemsProvider)))
+        {
+            bitDropdown.ItemsProvider = ItemsProvider;
+        }
+
+        if (ItemsProviderDebounceTime.HasValue && bitDropdown.HasNotBeenSet(nameof(ItemsProviderDebounceTime)))
+        {
+            bitDropdown.ItemsProviderDebounceTime = ItemsProviderDebounceTime.Value;
+        }
+
+        if (Label.HasValue() && bitDropdown.HasNotBeenSet(nameof(Label)))
+        {
+            bitDropdown.Label = Label;
+        }
+
+        if (LoadingText.HasValue() && bitDropdown.HasNotBeenSet(nameof(LoadingText)))
+        {
+            bitDropdown.LoadingText = LoadingText;
+        }
+
+        if (MaxDisplayedItems.HasValue && bitDropdown.HasNotBeenSet(nameof(MaxDisplayedItems)))
+        {
+            bitDropdown.MaxDisplayedItems = MaxDisplayedItems.Value;
+        }
+
+        if (MaxHeight.HasValue && bitDropdown.HasNotBeenSet(nameof(MaxHeight)))
+        {
+            bitDropdown.MaxHeight = MaxHeight.Value;
+        }
+
+        if (MaxSelectedItems.HasValue && bitDropdown.HasNotBeenSet(nameof(MaxSelectedItems)))
+        {
+            bitDropdown.MaxSelectedItems = MaxSelectedItems.Value;
+        }
+
+        if (MaxSelectedItemsText.HasValue() && bitDropdown.HasNotBeenSet(nameof(MaxSelectedItemsText)))
+        {
+            bitDropdown.MaxSelectedItemsText = MaxSelectedItemsText;
+        }
+
+        if (MinSearchLength.HasValue && bitDropdown.HasNotBeenSet(nameof(MinSearchLength)))
+        {
+            bitDropdown.MinSearchLength = MinSearchLength.Value;
+        }
+
+        if (MinSearchLengthText.HasValue() && bitDropdown.HasNotBeenSet(nameof(MinSearchLengthText)))
+        {
+            bitDropdown.MinSearchLengthText = MinSearchLengthText;
+        }
+
+        if (MultiSelect.HasValue && bitDropdown.HasNotBeenSet(nameof(MultiSelect)))
+        {
+            bitDropdown.MultiSelect = MultiSelect.Value;
+        }
+
+        if (MultiSelectDelimiter.HasValue() && bitDropdown.HasNotBeenSet(nameof(MultiSelectDelimiter)))
+        {
+            bitDropdown.MultiSelectDelimiter = MultiSelectDelimiter;
+        }
+
+        if (NameSelectors is not null && bitDropdown.HasNotBeenSet(nameof(NameSelectors)))
+        {
+            bitDropdown.NameSelectors = NameSelectors;
+        }
+
+        if (NoBorder.HasValue && bitDropdown.HasNotBeenSet(nameof(NoBorder)))
+        {
+            bitDropdown.NoBorder = NoBorder.Value;
+
+            bitDropdown.ClassBuilder.Reset();
+        }
+
+        if (NoResultsText.HasValue() && bitDropdown.HasNotBeenSet(nameof(NoResultsText)))
+        {
+            bitDropdown.NoResultsText = NoResultsText;
+        }
+
+        if (NoWrapNavigation.HasValue && bitDropdown.HasNotBeenSet(nameof(NoWrapNavigation)))
+        {
+            bitDropdown.NoWrapNavigation = NoWrapNavigation.Value;
+        }
+
+        if (OpenOnFocus.HasValue && bitDropdown.HasNotBeenSet(nameof(OpenOnFocus)))
+        {
+            bitDropdown.OpenOnFocus = OpenOnFocus.Value;
+        }
+
+        if (OverflowTextFormat.HasValue() && bitDropdown.HasNotBeenSet(nameof(OverflowTextFormat)))
+        {
+            bitDropdown.OverflowTextFormat = OverflowTextFormat;
+        }
+
+        if (OverscanCount.HasValue && bitDropdown.HasNotBeenSet(nameof(OverscanCount)))
+        {
+            bitDropdown.OverscanCount = OverscanCount.Value;
+        }
+
+        if (Placeholder.HasValue() && bitDropdown.HasNotBeenSet(nameof(Placeholder)))
+        {
+            bitDropdown.Placeholder = Placeholder;
+        }
+
+        if (Prefix.HasValue() && bitDropdown.HasNotBeenSet(nameof(Prefix)))
+        {
+            bitDropdown.Prefix = Prefix;
+        }
+
+        if (PreserveCalloutWidth.HasValue && bitDropdown.HasNotBeenSet(nameof(PreserveCalloutWidth)))
+        {
+            bitDropdown.PreserveCalloutWidth = PreserveCalloutWidth.Value;
+        }
+
+        if (Reselectable.HasValue && bitDropdown.HasNotBeenSet(nameof(Reselectable)))
+        {
+            bitDropdown.Reselectable = Reselectable.Value;
+        }
+
+        if (Responsive.HasValue && bitDropdown.HasNotBeenSet(nameof(Responsive)))
+        {
+            bitDropdown.Responsive = Responsive.Value;
+        }
+
+        if (ResponsiveCloseButtonAriaLabel.HasValue() && bitDropdown.HasNotBeenSet(nameof(ResponsiveCloseButtonAriaLabel)))
+        {
+            bitDropdown.ResponsiveCloseButtonAriaLabel = ResponsiveCloseButtonAriaLabel;
+        }
+
+        if (ResponsiveCloseIcon is not null && bitDropdown.HasNotBeenSet(nameof(ResponsiveCloseIcon)))
+        {
+            bitDropdown.ResponsiveCloseIcon = ResponsiveCloseIcon;
+        }
+
+        if (ResponsiveCloseIconName.HasValue() && bitDropdown.HasNotBeenSet(nameof(ResponsiveCloseIconName)))
+        {
+            bitDropdown.ResponsiveCloseIconName = ResponsiveCloseIconName;
+        }
+
+        if (SearchBoxAriaLabel.HasValue() && bitDropdown.HasNotBeenSet(nameof(SearchBoxAriaLabel)))
+        {
+            bitDropdown.SearchBoxAriaLabel = SearchBoxAriaLabel;
+        }
+
+        if (SearchBoxClearButtonAriaLabel.HasValue() && bitDropdown.HasNotBeenSet(nameof(SearchBoxClearButtonAriaLabel)))
+        {
+            bitDropdown.SearchBoxClearButtonAriaLabel = SearchBoxClearButtonAriaLabel;
+        }
+
+        if (SearchBoxClearIcon is not null && bitDropdown.HasNotBeenSet(nameof(SearchBoxClearIcon)))
+        {
+            bitDropdown.SearchBoxClearIcon = SearchBoxClearIcon;
+        }
+
+        if (SearchBoxClearIconName.HasValue() && bitDropdown.HasNotBeenSet(nameof(SearchBoxClearIconName)))
+        {
+            bitDropdown.SearchBoxClearIconName = SearchBoxClearIconName;
+        }
+
+        if (SearchBoxIcon is not null && bitDropdown.HasNotBeenSet(nameof(SearchBoxIcon)))
+        {
+            bitDropdown.SearchBoxIcon = SearchBoxIcon;
+        }
+
+        if (SearchBoxIconName.HasValue() && bitDropdown.HasNotBeenSet(nameof(SearchBoxIconName)))
+        {
+            bitDropdown.SearchBoxIconName = SearchBoxIconName;
+        }
+
+        if (SearchBoxPlaceholder.HasValue() && bitDropdown.HasNotBeenSet(nameof(SearchBoxPlaceholder)))
+        {
+            bitDropdown.SearchBoxPlaceholder = SearchBoxPlaceholder;
+        }
+
+        if (SearchFunction is not null && bitDropdown.HasNotBeenSet(nameof(SearchFunction)))
+        {
+            bitDropdown.SearchFunction = SearchFunction;
+        }
+
+        if (SearchIgnoreDiacritics.HasValue && bitDropdown.HasNotBeenSet(nameof(SearchIgnoreDiacritics)))
+        {
+            bitDropdown.SearchIgnoreDiacritics = SearchIgnoreDiacritics.Value;
+        }
+
+        if (SearchMode.HasValue && bitDropdown.HasNotBeenSet(nameof(SearchMode)))
+        {
+            bitDropdown.SearchMode = SearchMode.Value;
+        }
+
+        if (SearchResultsText.HasValue() && bitDropdown.HasNotBeenSet(nameof(SearchResultsText)))
+        {
+            bitDropdown.SearchResultsText = SearchResultsText;
+        }
+
+        if (SelectAllText.HasValue() && bitDropdown.HasNotBeenSet(nameof(SelectAllText)))
+        {
+            bitDropdown.SelectAllText = SelectAllText;
+        }
+
+        if (SelectedItemsTextFormat.HasValue() && bitDropdown.HasNotBeenSet(nameof(SelectedItemsTextFormat)))
+        {
+            bitDropdown.SelectedItemsTextFormat = SelectedItemsTextFormat;
+        }
+
+        if (SelectTextOnFocus.HasValue && bitDropdown.HasNotBeenSet(nameof(SelectTextOnFocus)))
+        {
+            bitDropdown.SelectTextOnFocus = SelectTextOnFocus.Value;
+        }
+
+        if (ShowClearButton.HasValue && bitDropdown.HasNotBeenSet(nameof(ShowClearButton)))
+        {
+            bitDropdown.ShowClearButton = ShowClearButton.Value;
+        }
+
+        if (ShowSearchBox.HasValue && bitDropdown.HasNotBeenSet(nameof(ShowSearchBox)))
+        {
+            bitDropdown.ShowSearchBox = ShowSearchBox.Value;
+        }
+
+        if (ShowSelectAll.HasValue && bitDropdown.HasNotBeenSet(nameof(ShowSelectAll)))
+        {
+            bitDropdown.ShowSelectAll = ShowSelectAll.Value;
+        }
+
+        if (Size.HasValue && bitDropdown.HasNotBeenSet(nameof(Size)))
+        {
+            bitDropdown.Size = Size.Value;
+
+            bitDropdown.ClassBuilder.Reset();
+        }
+
+        if (StickyHeaders.HasValue && bitDropdown.HasNotBeenSet(nameof(StickyHeaders)))
+        {
+            bitDropdown.StickyHeaders = StickyHeaders.Value;
+        }
+
+        if (Styles is not null && bitDropdown.HasNotBeenSet(nameof(Styles)))
+        {
+            bitDropdown.Styles = Styles;
+
+            bitDropdown.StyleBuilder.Reset();
+        }
+
+        if (Suffix.HasValue() && bitDropdown.HasNotBeenSet(nameof(Suffix)))
+        {
+            bitDropdown.Suffix = Suffix;
+        }
+
+        if (ThrottleTime.HasValue && bitDropdown.HasNotBeenSet(nameof(ThrottleTime)))
+        {
+            bitDropdown.ThrottleTime = ThrottleTime.Value;
+        }
+
+        if (Title.HasValue() && bitDropdown.HasNotBeenSet(nameof(Title)))
+        {
+            bitDropdown.Title = Title;
+        }
+
+        if (TokenSeparators is not null && bitDropdown.HasNotBeenSet(nameof(TokenSeparators)))
+        {
+            bitDropdown.TokenSeparators = TokenSeparators;
+        }
+
+        if (Transparent.HasValue && bitDropdown.HasNotBeenSet(nameof(Transparent)))
+        {
+            bitDropdown.Transparent = Transparent.Value;
+
+            bitDropdown.ClassBuilder.Reset();
+        }
+
+        if (Underlined.HasValue && bitDropdown.HasNotBeenSet(nameof(Underlined)))
+        {
+            bitDropdown.Underlined = Underlined.Value;
+
+            bitDropdown.ClassBuilder.Reset();
+        }
+
+        if (ValueComparer is not null && bitDropdown.HasNotBeenSet(nameof(ValueComparer)))
+        {
+            bitDropdown.ValueComparer = ValueComparer;
+        }
+
+        if (Virtualize.HasValue && bitDropdown.HasNotBeenSet(nameof(Virtualize)))
+        {
+            bitDropdown.Virtualize = Virtualize.Value;
+        }
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Callout/BitCallout.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Callout/BitCallout.razor.cs
index 7763077de42..fa1e3c27ccc 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Callout/BitCallout.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Callout/BitCallout.razor.cs
@@ -376,6 +376,7 @@ public partial class BitCallout : BitComponentBase
 
     /// <summary>
     /// The vertical offset of the scroll container to consider in the positioning and height calculation of the callout.
+    /// A negative value has the callout measure that offset itself, as the height of everything it renders around the scroll container.
     /// </summary>
     [Parameter] public int? ScrollOffset { get; set; }
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DropdownsJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DropdownsJsRuntimeExtensions.cs
index c0fb421e584..de8d6a4281a 100644
--- a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DropdownsJsRuntimeExtensions.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DropdownsJsRuntimeExtensions.cs
@@ -12,6 +12,14 @@ internal static ValueTask BitDropdownsDispose(this IJSRuntime jsRuntime, string
         return jsRuntime.InvokeVoid("BitBlazorUI.Dropdowns.dispose", id);
     }
 
+    // The search box is reached from C# by the id of the callout it lives in rather than by an
+    // ElementReference: the reference is only assigned while the box is rendered, and the caller is the
+    // trigger, which is handling a key pressed before the box existed on the page at all.
+    internal static ValueTask BitDropdownsFocusSearchBox(this IJSRuntime jsRuntime, string calloutId, int caret)
+    {
+        return jsRuntime.InvokeVoid("BitBlazorUI.Dropdowns.focusSearchBox", calloutId, caret);
+    }
+
     internal static ValueTask BitDropdownsFocusItem(this IJSRuntime jsRuntime, string calloutId, BitDropdownFocusMode mode, string? character, bool virtualize, int selectedIndex, int itemSize, bool noWrap)
     {
         // Mapped by hand rather than by name: these are the exact strings Dropdowns.ts branches on, so
diff --git a/src/BlazorUI/Bit.BlazorUI/Scripts/Callouts.ts b/src/BlazorUI/Bit.BlazorUI/Scripts/Callouts.ts
index e52ae115c9a..5eb4425d66b 100644
--- a/src/BlazorUI/Bit.BlazorUI/Scripts/Callouts.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Scripts/Callouts.ts
@@ -49,6 +49,9 @@ namespace BitBlazorUI {
             dropDirection: BitDropDirection,
             isRtl: boolean,
             scrollContainerId: string,
+            // The height in pixels of everything the callout renders around its scroll container, which comes
+            // off the room that container is given. A NEGATIVE value has the callout measure it itself, which
+            // is what a consumer whose chrome is sized with overridable custom properties passes.
             scrollOffset: number,
             headerId: string,
             footerId: string,
@@ -296,6 +299,18 @@ namespace BitBlazorUI {
                 calloutWidth = width;
             }
 
+            // A negative offset asks the callout to MEASURE the space its scrollable content cannot use
+            // instead of being told it in pixels: everything it renders around that content, less the header
+            // and the footer that are measured separately just above. A consumer whose chrome is sized with
+            // publicly overridable custom properties - BitDropdown's search box and select all row - has no
+            // number it could pass, since the one it hard-coded would only be the default of a height the
+            // author of a theme or of an instance is free to change.
+            if (scrollOffset < 0) {
+                scrollOffset = scrollContainerId
+                    ? Math.max(0, callout.offsetHeight - (scrollContainer as HTMLElement).offsetHeight - headerHeight - footerHeight)
+                    : 0;
+            }
+
             if (windowWidth < Utils.MAX_MOBILE_WIDTH && responsiveMode) {
                 callout.style.opacity = '1';
                 callout.style.transform = 'translate(0,0)';
@@ -418,7 +433,13 @@ namespace BitBlazorUI {
                 callout.style.bottom = (fixedRect.bottom - (visibleBottom - 2)) + 'px';
                 scrollContainer.style.maxHeight = cap(Math.max(0, available - scrollOffset - headerHeight - footerHeight - 10)) + 'px';
             } else if (dropDirection == BitDropDirection.TopAndBottom) {
-                if (calloutHeight <= distanceToBottom || distanceToBottom >= distanceToTop) {
+                // A callout measuring nothing is one whose content has not arrived yet - a list still
+                // being fetched - and "nothing fits below" is true however little room there is down
+                // there, which would pin it to a side that cannot show it once it fills. With no height
+                // to go on, the side with more room is the one to take.
+                const fitsBelow = calloutHeight > 0 && calloutHeight <= distanceToBottom;
+
+                if (fitsBelow || distanceToBottom >= distanceToTop) {
                     callout.style.top = (componentY + componentHeight + offset - fixedRect.top) + 'px';
                     scrollContainer.style.maxHeight = cap(Math.max(0, distanceToBottom - scrollOffset - headerHeight - footerHeight - 10)) + 'px';
                 } else {
@@ -741,7 +762,9 @@ namespace BitBlazorUI {
         public static updateScrollOffset(calloutId: string, scrollOffset: number) {
             const params = Callouts._params.get(calloutId);
             if (params == null) return;
-            if (params.scrollOffset === scrollOffset) return;
+            // A negative offset is not a value to compare but a request to measure again (see position), and
+            // the caller only asks when what it renders around the scrollable content has actually changed.
+            if (scrollOffset >= 0 && params.scrollOffset === scrollOffset) return;
 
             params.scrollOffset = scrollOffset;
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts b/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts
index 8c886b80b2a..d2da896c0d2 100644
--- a/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts
@@ -12,6 +12,14 @@ 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 budget for the jump that opens a virtualized list on its selection to hold its position
+        // against the list re-measuring itself under it. The list renders for the first time there, and
+        // that render is a server round trip under Blazor Server, so the wait is against the clock
+        // rather than a frame count; the frames are how long the position then has to stay put to
+        // count as settled. Neither is spent once it does.
+        private static readonly VIRTUALIZE_SETTLE_TIME = 1000;
+        private static readonly VIRTUALIZE_SETTLE_FRAMES = 10;
+
         // 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;
@@ -30,10 +38,13 @@ namespace BitBlazorUI {
         // search/combo input, where they keep their caret behavior.
         private static readonly CARET_KEYS = ['Home', 'End'];
 
-        // The keys that edit the text of the ComboBox input rather than navigate the list, so they
+        // The keys that CHANGE the text of the ComboBox input rather than navigate the list, so they
         // belong to the input even while the focus sits on an option. They are not in CALLOUT_KEYS,
         // so their default is not prevented and they still act on the input once it has the focus.
-        private static readonly TEXT_KEYS = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight'];
+        private static readonly EDIT_KEYS = ['Backspace', 'Delete'];
+        // Those plus the ones that only move the caret, which belong to the ComboBox input for the same
+        // reason - the term is edited where it is, not by leaving the list and coming back to it.
+        private static readonly TEXT_KEYS = [...Dropdowns.EDIT_KEYS, 'ArrowLeft', 'ArrowRight'];
 
         // 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,
@@ -99,7 +110,22 @@ namespace BitBlazorUI {
                     if (!isTextInput(e) && (isPrintable(e) || e.key === ' ' || Dropdowns.TEXT_KEYS.indexOf(e.key) > -1)) {
                         const combo = (callout.querySelector('.bit-drp-icb') ??
                                        root?.querySelector('.bit-drp-inp')) as HTMLElement | null;
-                        combo?.focus();
+                        if (combo) {
+                            combo.focus();
+                            return;
+                        }
+
+                        // A search box filters the same list, so the keys that edit text belong to it for
+                        // the same reason - typing after the arrow keys refines the search instead of
+                        // starting a type-ahead the search box has already made redundant (see
+                        // HandleOnCalloutKeyDown). Two keys are left out where the ComboBox input takes
+                        // them: the space bar, which on a dropdown that is not typed into is the toggle of
+                        // the focused option and has nothing to replace it, and the caret keys, which have
+                        // no caret to move on an option and would only pull the focus off the row the
+                        // arrow keys had reached.
+                        if (isPrintable(e) || Dropdowns.EDIT_KEYS.indexOf(e.key) > -1) {
+                            (callout.querySelector('.bit-drp-sin') as HTMLElement | null)?.focus();
+                        }
                     }
                 };
                 callout.addEventListener('keydown', handler);
@@ -117,6 +143,23 @@ namespace BitBlazorUI {
             Dropdowns._handlers.delete(id);
         }
 
+        // Focuses the search box of a callout and puts the caret at the given offset. It is what the
+        // character typed on a CLOSED dropdown lands in (see TypeIntoSearchBox): the caret is placed by
+        // hand because a browser that focuses an input by script may leave it in front of the value, which
+        // would have the next character typed ahead of the one that opened the list.
+        public static focusSearchBox(calloutId: string, caret: number) {
+            const input = document.getElementById(calloutId)?.querySelector('.bit-drp-sin') as HTMLInputElement | null;
+            if (!input) return;
+
+            input.focus();
+
+            try {
+                input.setSelectionRange(caret, caret);
+            } catch (e) {
+                // An input that does not support a text selection cannot be given a caret; it has the focus either way.
+            }
+        }
+
         public static async focusItem(calloutId: string, mode: string, char: string | null, virtualize: boolean,
                                       selectedIndex: number = -1, itemSize: number = 0, noWrap: boolean = false) {
             const callout = document.getElementById(calloutId);
@@ -127,7 +170,17 @@ namespace BitBlazorUI {
             const generation = (Dropdowns._focusGenerations.get(callout) ?? 0) + 1;
             Dropdowns._focusGenerations.set(callout, generation);
 
-            let items = Dropdowns._getItems(callout);
+            // Only the jump that opens a virtualized list on its selection waits for that list: it is the
+            // one whose rows are rendered by the very reveal it follows, and the one that has a row to
+            // reach. Everywhere else an empty list is an empty list, and a wait would only hold the focus
+            // back - or, on a list still being fetched, put it on a row the next window replaces.
+            let items = (virtualize && mode === 'selected' && selectedIndex > -1)
+                            ? await Dropdowns._waitForItems(callout)
+                            : Dropdowns._getItems(callout);
+
+            // A newer key press took over while the list was being waited for.
+            if (Dropdowns._focusGenerations.get(callout) !== generation) return;
+
             if (items.length === 0) return;
 
             let current = items.indexOf(document.activeElement as HTMLElement);
@@ -159,6 +212,42 @@ namespace BitBlazorUI {
             }
         }
 
+        // The callout is revealed by the call right before this one, and the rows of a virtualized list
+        // are rendered only once that reveal has been laid out - so an empty list on the first opening
+        // means "not yet" rather than "nothing to focus", and giving up on it is what would leave that
+        // first opening on the top of the list with the focus still on the trigger. A list that really
+        // is empty costs the frames below once and focuses nothing either way.
+        private static async _waitForItems(callout: HTMLElement) {
+            let items = Dropdowns._getItems(callout);
+
+            for (let i = 0; items.length === 0 && i < Dropdowns.VIRTUALIZE_RENDER_FRAMES; i++) {
+                await new Promise<void>(resolve => requestAnimationFrame(() => resolve()));
+
+                items = Dropdowns._getItems(callout);
+            }
+
+            return items;
+        }
+
+        // The height one row actually takes, measured over two of them so that whatever sits between
+        // them is counted as well. ItemSize is what Virtualize is TOLD to expect and what it renders
+        // its first window at; the scroll below has to be measured in what the list ends up rendering
+        // at instead, or a theme whose rows are a different height lands it hundreds of rows away.
+        // Measured off the layout box and never off getBoundingClientRect: the callout scales in as it
+        // opens, so the painted rect of a row is short for the length of that animation - which is
+        // exactly when the first opening measures it - and the scroll would land short with it.
+        private static _measureItemSize(scroller: HTMLElement) {
+            const rows = scroller.querySelectorAll('[role="option"]') as NodeListOf<HTMLElement>;
+            if (rows.length === 0) return 0;
+
+            if (rows.length > 1 && rows[0].offsetParent === rows[1].offsetParent) {
+                const pitch = rows[1].offsetTop - rows[0].offsetTop;
+                if (pitch > 0) return pitch;
+            }
+
+            return rows[0].offsetHeight;
+        }
+
         // 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) {
@@ -177,7 +266,7 @@ namespace BitBlazorUI {
         // 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[],
                                        selectedIndex: number = -1, itemSize: number = 0) {
-            const max = scroller.scrollHeight - scroller.clientHeight;
+            let max = scroller.scrollHeight - scroller.clientHeight;
 
             let top: number;
             let nextMode = mode;
@@ -191,9 +280,22 @@ namespace BitBlazorUI {
                 // the DOM to be found, so the list is scrolled to where its index says it is first. It is
                 // centred in the window rather than pinned to the top, which is what a native select does
                 // and what shows the items around the selection instead of only the ones after it.
-                if (selectedIndex < 0 || itemSize <= 0) return null;
+                if (selectedIndex < 0) return null;
+
+                const size = Dropdowns._measureItemSize(scroller) || itemSize;
+                if (size <= 0) return null;
+
+                top = (selectedIndex * size) - ((scroller.clientHeight - size) / 2);
 
-                top = (selectedIndex * itemSize) - ((scroller.clientHeight - itemSize) / 2);
+                // A list that is being opened for the first time is still growing to the height of the
+                // whole set, so the clamp below would cut the scroll off hundreds of rows short of the
+                // selection - which is what the very first opening would otherwise land on. Wait for it
+                // to be tall enough to hold the target before scrolling to it.
+                for (let i = 0; top > max && i < Dropdowns.VIRTUALIZE_RENDER_FRAMES; i++) {
+                    await new Promise<void>(resolve => requestAnimationFrame(() => resolve()));
+
+                    max = scroller.scrollHeight - scroller.clientHeight;
+                }
             } else if (mode === 'prevPage') {
                 top = scroller.scrollTop - scroller.clientHeight;
                 nextMode = 'first';
@@ -221,6 +323,33 @@ namespace BitBlazorUI {
 
             scroller.scrollTop = top;
 
+            // The jump that opens a list on its selection is the one that has to hold: the list is
+            // rendered for the first time under it, re-measures itself as the window it was scrolled
+            // to arrives, and the height it holds open for the rest of the set moves the scroll
+            // position with it - which is what would otherwise leave that first opening hundreds of
+            // rows above the selection. The position is asked for again until it stays, because the
+            // re-render it is racing is a round trip of its own under Blazor Server.
+            if (mode === 'selected') {
+                const deadline = performance.now() + Dropdowns.VIRTUALIZE_SETTLE_TIME;
+
+                for (let held = 0; held < Dropdowns.VIRTUALIZE_SETTLE_FRAMES && performance.now() < deadline;) {
+                    await new Promise<void>(resolve => requestAnimationFrame(() => resolve()));
+
+                    if (scroller.scrollTop === top) {
+                        held++;
+                        continue;
+                    }
+
+                    held = 0;
+
+                    // Anything shorter is a list still growing to the height of the whole set, which
+                    // there is nothing to ask for yet - the next frames are what it is waited for in.
+                    if (top <= scroller.scrollHeight - scroller.clientHeight) {
+                        scroller.scrollTop = top;
+                    }
+                }
+            }
+
             for (let i = 0; i < Dropdowns.VIRTUALIZE_RENDER_FRAMES; i++) {
                 await new Promise<void>(resolve => requestAnimationFrame(() => resolve()));
 
diff --git a/src/BlazorUI/CLAUDE.md b/src/BlazorUI/CLAUDE.md
index a998b73da20..f5bb647f422 100644
--- a/src/BlazorUI/CLAUDE.md
+++ b/src/BlazorUI/CLAUDE.md
@@ -244,6 +244,17 @@ restyle `.bit-<cmp>-*` from a preset is the signal that a design-system decision
 global token tier: add the token, let the component read it, and keep the preset a pure
 `:root[bit-theme="..."]` block.
 
+A component's own `--bit-<Component>-*` properties (the public surface its demo page documents as
+`componentCssVariables`) are read off its root **with a fallback and never declared**, so they
+inherit. A component whose popup is rendered outside that root - a callout, a menu, a panel, which the
+callout JS then reparents to the body - therefore hands it nothing: inside its own markup the popup is
+a SIBLING of the root, and once it has moved only `:root` and `body` are still its ancestors. Such a
+component resolves its variables in one mixin that both the root and the popup include, and carries
+the public declarations across by hand (BitDropdown's `GetCalloutStyles` copies the
+`--bit-Dropdown-*` entries of `Style` and `Styles.Root` onto the callout, appending `Styles.Callout`
+last so a value written for the popup still wins). One `Style` on the component then restyles the
+field and the list it opens together, which is what an author setting a variable expects.
+
 Adding a preset means touching all of: its `Styles/<Name>/` folder and bundle entry point,
 `Bit.BlazorUI.Extras/compilerconfig.json` and the csproj `BuildCss` target, `BitExtraThemePresets`,
 `BitExtraThemeName` and the two extension containers (`BitThemePresetsExtensions` /
diff --git a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Services/Mcp/BlazorUIMarkdown.cs b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Services/Mcp/BlazorUIMarkdown.cs
index 07dc4b446bb..edb4e61c0dc 100644
--- a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Services/Mcp/BlazorUIMarkdown.cs
+++ b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Services/Mcp/BlazorUIMarkdown.cs
@@ -222,13 +222,17 @@ public static string Examples(BlazorUIComponent component, string? filter)
             AppendFence(section, owned.Code, example.CsharpField, "csharp");
             AppendCodeFiles(section, owned.Files, example.CodeFilesField);
 
+            var remaining = matches.Skip(written).Select(e => e.Tab is null ? e.Title : $"{e.Tab} · {e.Title}").Distinct();
+
+            var notice = $"Stopped here to stay within one answer. Also available, one at a time via `GetBitBlazorUIComponentExamples(name: \"{component.Name}\", example: \"...\")`: {string.Join(", ", remaining)}.";
+
             // Stopped at the cap rather than cut mid-sample: half a code block is not a smaller
-            // answer, it is a wrong one. What is left is named with the call that returns it.
-            if (builder.Length + section.Length > MaxLength && written > 0)
+            // answer, it is a wrong one. The notice is counted in the cap it keeps the answer under
+            // - a page with enough sections to need it has enough of them to make it long, and a
+            // notice cut in half names neither what was left out nor the call that returns it.
+            if (builder.Length + section.Length + notice.Length > MaxLength && written > 0)
             {
-                var remaining = matches.Skip(written).Select(e => e.Tab is null ? e.Title : $"{e.Tab} · {e.Title}").Distinct();
-
-                builder.AppendLine($"Stopped here to stay within one answer. Also available, one at a time via `GetBitBlazorUIComponentExamples(name: \"{component.Name}\", example: \"...\")`: {string.Join(", ", remaining)}.");
+                builder.AppendLine(notice);
 
                 return Truncate(builder.ToString());
             }
@@ -442,7 +446,10 @@ private static void AppendCascadingParams(StringBuilder builder, BlazorUICompone
     {
         if (component.CascadingParams is null) return;
 
-        var name = component.CascadingParams.Name;
+        // Written the way it is written in Razor rather than as reflection names it: a params
+        // class of a generic component is generic too, and `BitDropdownParams`2` neither compiles
+        // in the snippet below nor resolves as the typeName the same line tells the caller to pass.
+        var name = BlazorUITypeNames.Of(component.CascadingParams);
 
         var carried = component.CascadingParams
             .GetProperties(BindingFlags.Public | BindingFlags.Instance)
@@ -451,7 +458,7 @@ private static void AppendCascadingParams(StringBuilder builder, BlazorUICompone
             .ToHashSet(StringComparer.Ordinal);
 
         var baseName = component.CascadingParams.BaseType is { } baseType && baseType != typeof(object)
-            ? baseType.Name
+            ? BlazorUITypeNames.Of(baseType)
             : null;
 
         // Read off the compiled component rather than off its table: the parameters a params object
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 dbbeaa48e45..bf2efb6c6be 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
@@ -13,6 +13,7 @@
               SubClasses="componentSubClasses"
               SubEnums="componentSubEnums"
               PublicMembers="componentPublicMembers"
+              CssVariables="componentCssVariables"
               GitHubUrl="Inputs/Dropdown/BitDropdown.razor"
               GitHubDemoUrl="Inputs/Dropdown/BitDropdownDemo.razor"
               IntroductionVideoUrl="https://videos.bitplatform.dev/bit%20Dropdown.mp4">
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 68c5f67e5dd..1690fef646a 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 = "AriaDescription",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "Detailed description of the dropdown for the benefit of screen readers. It is rendered into a visually hidden element that the dropdown references through its aria-describedby attribute, which is what lets a field carry an instruction too long to show next to it. It is read after Description, so the two can be used together.",
+        },
         new()
         {
             Name = "AutoClearSearch",
@@ -278,6 +285,20 @@ public partial class BitDropdownDemo
             Description = "The text to render in the callout when there is no item to show.",
         },
         new()
+        {
+            Name = "ErrorMessage",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The message shown under the dropdown when the selection was rejected, which is what turns a red frame into something the user can act on. Setting it marks the dropdown invalid on its own - the same look and the same aria-invalid attribute Invalid gives it - and the message is referenced by the dropdown through its aria-describedby attribute and announced by its live region, so it reaches a screen reader the moment it shows up rather than only on the next focus. A dropdown inside an EditForm already gets its messages from the cascading EditContext through the ValidationMessage component.",
+        },
+        new()
+        {
+            Name = "ErrorMessageTemplate",
+            Type = "RenderFragment?",
+            DefaultValue = "null",
+            Description = "The custom content of the error message, which replaces the plain ErrorMessage text and marks the dropdown invalid in the same way. Only the plain text is announced by the live region, since a template is free to render anything at all.",
+        },
+        new()
         {
             Name = "ExistsSelectedItemFunction",
             Type = "Func<ICollection<TItem>, string, bool>?",
@@ -334,6 +355,13 @@ public partial class BitDropdownDemo
             Description = "Searches the items as the user types in the search box (based on the 'oninput' HTML event) instead of waiting for the search box to be committed. The ComboBox input always searches as it is typed, so there it only decides whether DebounceTime and ThrottleTime apply.",
         },
         new()
+        {
+            Name = "Invalid",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Marks the dropdown as invalid without an EditContext having said so, which is what a rejection the app decided on its own (a server response, a rule spanning two fields) needs. It gives the dropdown the same look and the same aria-invalid attribute an invalid bound value does. Setting ErrorMessage implies it.",
+        },
+        new()
         {
             Name = "IsLoading",
             Type = "bool",
@@ -863,7 +891,7 @@ public partial class BitDropdownDemo
             Name = "TextTemplate",
             Type = "RenderFragment<BitDropdown<TItem, TValue>>?",
             DefaultValue = "null",
-            Description = "The custom template for the text of the dropdown.",
+            Description = "The custom template for the text of the dropdown, which replaces the selection it shows once something is selected. It has no effect with Chips enabled, where the selection is drawn as one chip per item and ChipTemplate is what renders each of them.",
         },
         new()
         {
@@ -1364,6 +1392,20 @@ public partial class BitDropdownDemo
                    Description = "Custom CSS classes/styles for the label of the BitDropdown."
                },
                new()
+               {
+                   Name = "ErrorMessageContainer",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the error message container of the BitDropdown."
+               },
+               new()
+               {
+                   Name = "ErrorMessage",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the error message of the BitDropdown."
+               },
+               new()
                {
                    Name = "DescriptionContainer",
                    Type = "string?",
@@ -1964,6 +2006,12 @@ public partial class BitDropdownDemo
             Description = "Unselects the given item exactly as picking an already selected one in the callout would (or, in single select mode, as the clear button would), so the same events fire. An item that is not selected is left alone.",
         },
         new()
+        {
+            Name = "ClearAsync",
+            Type = "Task ClearAsync()",
+            Description = "Clears the whole selection exactly as the clear button does, so the same events fire: it reports itself through OnClear and empties the typed text of the ComboBox mode along with the selection. It is refused in the same places that button is - a read-only dropdown, a one-way binding.",
+        },
+        new()
         {
             Name = "RefreshItemsAsync",
             Type = "Task RefreshItemsAsync()",
@@ -2012,4 +2060,289 @@ public partial class BitDropdownDemo
             Description = "Gives focus to the search input element.",
         }
     ];
+
+    // The public custom properties BitDropdown.scss reads off its root, in the order the stylesheet groups
+    // them: the field, its accent, the label and description, the chips, the callout, the rows.
+    // The callout is a sibling of the root and is moved to the body while it is open, so the component copies
+    // the --bit-Dropdown-* declarations of Style (and of Styles.Root) onto it: one Style restyles the field
+    // and the list it opens together.
+    private readonly List<ComponentCssVariable> componentCssVariables =
+    [
+        new()
+        {
+            Name = "--bit-Dropdown-background",
+            DefaultValue = "--bit-clr-bg-pri",
+            Description = "Background of the field. Transparent turns the default into transparent; a value set here still wins over it.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-color",
+            DefaultValue = "--bit-clr-fg-pri",
+            Description = "Text of the field once something is selected, and of the text typed into the ComboBox input or the search box.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-placeholder-color",
+            DefaultValue = "--bit-clr-fg-sec",
+            Description = "Text of the field while nothing is selected, which is what the Placeholder is drawn in.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-border-color",
+            DefaultValue = "--bit-clr-brd-pri",
+            Description = "Border of the field at rest. Underlined draws it as the bottom rule alone, NoBorder drops it.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-hover-border-color",
+            DefaultValue = "--bit-clr-brd-pri-hover",
+            Description = "Border of the field while hovered (pointer devices only).",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-focus-color",
+            DefaultValue = "The Color role's focus color",
+            Description = "Color of the focus indicator: the ring around the field, the underline of the Underlined and NoBorder variants, and the outline drawn inside the row the arrow keys have reached.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-invalid-color",
+            DefaultValue = "--bit-clr-err, and --bit-clr-err-focus for the ring",
+            Description = "Border and focus indicator while the value is rejected - by the EditContext, by Invalid or by an ErrorMessage - and the text of that message.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-disabled-color",
+            DefaultValue = "--bit-clr-fg-dis",
+            Description = "Text, label and glyphs when IsEnabled is false.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-disabled-background",
+            DefaultValue = "--bit-clr-bg-dis",
+            Description = "Background of the field when IsEnabled is false.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-disabled-border-color",
+            DefaultValue = "--bit-clr-brd-dis",
+            Description = "Border of the field when IsEnabled is false.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-radius",
+            DefaultValue = "--bit-shp-radius-control",
+            Description = "Corner radius of the field, which its background and its focus ring follow.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-min-height",
+            DefaultValue = "Per Size: --bit-siz-ctrl-sm / -md / -lg",
+            Description = "Smallest height of the field, which the search box, the clear button and the ComboBox add button follow. It is a floor, not a height: a Chips field still grows with the rows of chips in it.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-font-size",
+            DefaultValue = "Per Size: --bit-tpg-fs-xs / -sm / -md",
+            Description = "Text size of the field and of the search box.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-icon-color",
+            DefaultValue = "--bit-clr-fg-sec",
+            Description = "The caret, the clear button glyph and the add button glyph of the responsive ComboBox panel. The search glyph and the check mark take the accent instead, and the Prefix and Suffix addons their own colors.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-icon-size",
+            DefaultValue = "Per Size: --bit-siz-icon-sm / -md / -lg",
+            Description = "Size of every glyph of the component, including the ones in the search box and in the responsive panel.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-prefix-color",
+            DefaultValue = "--bit-clr-fg-pri",
+            Description = "Text of the Prefix addon.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-prefix-background",
+            DefaultValue = "--bit-clr-bg-sec",
+            Description = "Background of the Prefix addon.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-suffix-color",
+            DefaultValue = "--bit-clr-fg-pri",
+            Description = "Text of the Suffix addon.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-suffix-background",
+            DefaultValue = "--bit-clr-bg-sec",
+            Description = "Background of the Suffix addon.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-accent-color",
+            DefaultValue = "The Color role's main color",
+            Description = "The accent: group headers, the search glyph, the filled checkbox, the highlighted part of a matched item, the overflow chip, the spinner arc and the bar marking the item Enter would commit.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-accent-hover-color",
+            DefaultValue = "--bit-Dropdown-accent-color, then the Color role's hover color",
+            Description = "The accent while the part carrying it is hovered.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-accent-text-color",
+            DefaultValue = "The Color role's on-color",
+            Description = "Text and glyphs drawn ON the accent - the check mark, the highlighted text, the overflow chip. Set it along with the accent, or a custom accent keeps the contrast of the role it replaced.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-label-color",
+            DefaultValue = "--bit-clr-fg-pri",
+            Description = "Label text.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-label-font-size",
+            DefaultValue = "--bit-Dropdown-font-size",
+            Description = "Label text size.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-label-font-weight",
+            DefaultValue = "--bit-tpg-fw-semibold",
+            Description = "Label weight.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-required-color",
+            DefaultValue = "--bit-clr-req",
+            Description = "The asterisk a Required dropdown adds after its label.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-description-color",
+            DefaultValue = "--bit-clr-fg-pri",
+            Description = "Description text. It reaches the default rendering only, not a DescriptionTemplate. The ErrorMessage above it takes the invalid color instead.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-description-font-size",
+            DefaultValue = "--bit-tpg-fs-2xs",
+            Description = "Text size of the description and of the ErrorMessage.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-chip-background",
+            DefaultValue = "--bit-clr-bg-sec",
+            Description = "Background of a chip in the Chips display. The overflow chip takes the accent instead.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-chip-color",
+            DefaultValue = "inherit",
+            Description = "Text of a chip, which follows the field's own text color unless it is set.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-chip-border-color",
+            DefaultValue = "--bit-clr-brd-sec",
+            Description = "Border of a chip.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-chip-radius",
+            DefaultValue = "--bit-shp-radius-chip",
+            Description = "Corner radius of a chip and of its remove button.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-callout-background",
+            DefaultValue = "--bit-clr-bg-pri",
+            Description = "Background of the list surface, which the sticky group headers and the search box follow.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-callout-radius",
+            DefaultValue = "--bit-shp-radius-popup",
+            Description = "Corner radius of the list surface.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-callout-shadow",
+            DefaultValue = "--bit-shd-popup",
+            Description = "Elevation of the list surface.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-responsive-width",
+            DefaultValue = "272px",
+            Description = "Width of the side panel a Responsive dropdown opens on a small screen. Capped at the width of the viewport.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-overlay-background",
+            DefaultValue = "transparent",
+            Description = "The layer between the page and an open callout. Give it a color for a modal-style scrim.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-item-height",
+            DefaultValue = "Per Size: --bit-siz-item-sm / -md / -lg",
+            Description = "Height of one row, which the group headers, the empty state and the loading row follow. Set ItemSize to the same number when Virtualize is on, since virtualization measures in pixels.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-item-font-size",
+            DefaultValue = "Per Size: --bit-tpg-fs-xs / -sm / -md",
+            Description = "Text size of one row, of a group header, and of the empty and loading states.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-item-color",
+            DefaultValue = "--bit-clr-fg-pri",
+            Description = "Text of one row.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-item-hover-background",
+            DefaultValue = "--bit-clr-bg-pri-hover",
+            Description = "Background of the hovered row, which is also what marks the item Enter would commit in the ComboBox mode.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-item-selected-background",
+            DefaultValue = "--bit-clr-bg-sec",
+            Description = "Background of a selected row.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-item-selected-color",
+            DefaultValue = "--bit-Dropdown-item-color",
+            Description = "Text of a selected row. Set it along with the background above whenever that one is repainted with something the row text was not chosen against.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-item-disabled-color",
+            DefaultValue = "--bit-clr-fg-dis",
+            Description = "Text of a row that cannot be picked - a disabled item, and every unselected item once MaxSelectedItems is reached.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-header-color",
+            DefaultValue = "--bit-Dropdown-accent-color",
+            Description = "Text of a group header, for a list whose headers should read quieter than the accent.",
+        },
+        new()
+        {
+            Name = "--bit-Dropdown-divider-color",
+            DefaultValue = "--bit-clr-bg-sec",
+            Description = "The rule a Divider item draws between two groups, and the one under the select all row. The two differ in their defaults only (--bit-clr-bg-sec for the filled rule, --bit-clr-brd-sec for the border).",
+        },
+    ];
 }
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 816c19fb175..a71e061d701 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
@@ -7,6 +7,39 @@
         max-width: 18rem;
     }
 
+    // The Option API has no virtualization example of its own (see the section's own prose for why), but
+    // the three tabs are read by switching between them, so a short section here would shift every section
+    // below it as the reader switches. The note therefore stands as tall as the example stack the other two
+    // tabs render in its place - three labelled groups of dropdowns, ~54rem - and holds the explanation.
+    .virtualize-note {
+        display: flex;
+        min-height: 54rem;
+        align-items: center;
+        justify-content: center;
+        padding: rem2(24px);
+        border-radius: $bit-shape-radius-surface;
+        border: rem2(1px) dashed $bit-color-border-secondary;
+        background-color: $bit-color-background-secondary;
+
+        .virtualize-note-body {
+            max-width: 34rem;
+
+            > p {
+                margin: 0;
+                color: $bit-color-foreground-secondary;
+
+                + p {
+                    margin-top: rem2(12px);
+                }
+            }
+        }
+
+        .virtualize-note-title {
+            margin-bottom: rem2(12px);
+            font-weight: $bit-typography-fw-semibold;
+        }
+    }
+
     .custom-class {
         margin-inline: 1rem;
         box-shadow: dodgerblue 0 0 0.5rem;
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 c4f3bf43eab..b8ba6c0ae79 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
@@ -353,8 +353,10 @@
         input as soon as the callout opens - with the pointer and with Enter or Space on the keyboard alike - so
         typing filters right away. A clear button appears in the search input as soon as there is something to clear,
         which follows the text being typed rather than the term that has been applied: a search waiting to be committed
-        (or held back by a debounce) can be taken back the moment it is typed. The search term is discarded whenever the
-        callout closes, so the next opening always starts from the full list.
+        (or held back by a debounce) can be taken back the moment it is typed. Arrowing into the list never leaves the
+        term behind: the next character typed, and <b>Backspace</b> with it, goes back to the search box and keeps
+        filtering, so a search box replaces the typeahead rather than competing with it. 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">
@@ -526,6 +528,11 @@
         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.
+        <br /><br />
+        For a rejection the app decided on its own - a server response, a rule spanning two fields -
+        <b>ErrorMessage</b> shows the reason under the field, marks the dropdown invalid, ties the message to it with
+        <b>aria-describedby</b> and announces it right away instead of on the next focus. <b>Invalid</b> gives the
+        same look and the same <b>aria-invalid</b> attribute with no message to show.
     </div>
     <br />
     <div class="example-content">
@@ -562,6 +569,24 @@
         {
             <BitMessage Color="BitColor.Success">@successMessage</BitMessage>
         }
+
+        <br />
+
+        <BitDropdown @bind-Value="stockValue"
+                     Label="Category"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item"
+                     ErrorMessage="@StockError" />
+
+        <br />
+
+        <BitDropdown Invalid
+                     Label="Invalid with no message"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item" />
     </div>
 </DemoExample>
 
@@ -939,7 +964,9 @@
         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 - only the way it is displayed changes.
+        as the limit is passed. Nothing is removed from the selection - only the way it is displayed changes: the
+        items the counter stands for keep naming the dropdown for a screen reader, and the pointer reads them in its
+        tooltip.
         <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
@@ -1087,40 +1114,65 @@
 
 <DemoExample Title="Keyboard navigation" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
     <div>
-        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 - from the closed dropdown too, so reaching the end of a long list never takes an
-        opening key followed by a second one - <b>PageUp</b> and <b>PageDown</b> jump several 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 - from the trigger just as much as from inside the callout, so a
-        popup revealed without the focus is never left behind when the focus leaves the dropdown.
-        <b>Alt+ArrowDown</b> is the exception among the openers: it
-        reveals the list without moving the focus into it, so the trigger keeps it and the plain arrows can walk the
-        list afterwards. Opening the callout with a mouse click focuses the selected
-        item as well, so the keyboard can take over at any point. In multi select mode <b>Ctrl+A</b> (or <b>Cmd+A</b>)
-        selects every item the current search shows - or clears them when they are all selected already -
-        while inside the search and ComboBox inputs the shortcut keeps its native select-the-text behavior.
-        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. The arrow keys wrap around by default, so <b>ArrowDown</b> on the last item comes
-        back to the first one; <b>NoWrapNavigation</b> stops them at the ends instead, which suits a long list where
-        the jump from one end to the other is more likely to read as the focus having been lost than as a move that
-        was asked for - the typeahead keeps wrapping either way, since it looks for the item that matches rather
-        than for the one that comes next. Disabled and hidden items are skipped throughout. In virtualize mode only the
-        rendered items take part in the typeahead, since the ones that have not been rendered yet have no text to
-        match against. The options themselves stay out of the tab order, as the options of a listbox should: they are
-        reached with the arrow keys, and <b>Tab</b> leaves the whole dropdown rather than walking through the list.
-        In ComboBox mode the keys that belong to the typed text - the printable characters, <b>Backspace</b>,
-        <b>Delete</b>, <b>ArrowLeft</b> and <b>ArrowRight</b> - return the focus to the input and act on it
-        there, so arrowing into the list never strands the user away from the term they are typing.
-        However the callout is dismissed - a key, a click outside it, the close button of the responsive panel or
-        a swipe - the focus comes back to the dropdown (to the ComboBox input when there is one) instead of
-        being dropped at the top of the page along with the element that was holding it.
-        <b>ClearOnEscape</b> gives <b>Escape</b> one more job once it has nothing left to dismiss: a press with the
-        callout already closed (and, in the ComboBox mode, with nothing typed) clears the selection, which is what a
-        keyboard user otherwise has to reach the clear button for. See the <BitLink Href="#example8">Clear button</BitLink>
-        section.
+        The dropdown follows the ARIA authoring practices for a combobox and is fully operable with the keyboard.
+        Disabled and hidden items are skipped throughout.
+        <ul>
+            <li>
+                <b>Enter</b>, <b>Space</b>, <b>ArrowUp</b>, <b>ArrowDown</b> - open the callout and put the focus on
+                the selected item, or the first one.
+            </li>
+            <li>
+                <b>Alt+ArrowDown</b> - reveals the list <i>without</i> moving the focus into it, so the trigger keeps
+                it and the plain arrows can walk the list afterwards.
+            </li>
+            <li>
+                <b>ArrowUp</b> / <b>ArrowDown</b> - move between the items, wrapping around the ends unless
+                <b>NoWrapNavigation</b> stops them there, which suits a long list where the jump from one end to the
+                other reads more like the focus having been lost than like a move that was asked for.
+            </li>
+            <li><b>Home</b> / <b>End</b> - jump to the first and the last item, from the closed dropdown as well.</li>
+            <li><b>PageUp</b> / <b>PageDown</b> - jump several items at a time.</li>
+            <li><b>Enter</b>, <b>Space</b> - select the focused item.</li>
+            <li>
+                <b>Escape</b>, <b>Alt+ArrowUp</b> - close the callout and return the focus to the dropdown. With
+                <b>ClearOnEscape</b>, a further <b>Escape</b> on an already closed callout (and, in the ComboBox mode,
+                with nothing typed) clears the selection - see the
+                <BitLink Href="#example8">Clear button</BitLink> section.
+            </li>
+            <li>
+                <b>Tab</b> - closes the callout and moves on, from the trigger just as much as from inside it, so a
+                popup revealed without the focus is never left behind when the focus leaves the dropdown.
+            </li>
+            <li>
+                <b>Ctrl+A</b> / <b>Cmd+A</b> - in multi select mode selects every item the current search shows, or
+                clears them when they are all selected already. Inside the search and ComboBox inputs it keeps its
+                native select-the-text behavior.
+            </li>
+            <li>
+                <b>Printable characters</b> - run a typeahead on a dropdown with no text field of its own: the
+                accumulated characters jump to the item starting with them, repeating one character cycles through
+                those items, and the buffer resets after a short pause. A <b>ShowSearchBox</b> or ComboBox dropdown
+                filters instead. The typeahead wraps even with <b>NoWrapNavigation</b>, since it looks for the item
+                that matches rather than for the one that comes next, and in virtualize mode it only sees the items
+                that are actually rendered.
+            </li>
+            <li>
+                <b>Backspace</b>, <b>Delete</b>, <b>ArrowLeft</b>, <b>ArrowRight</b> - belong to the typed text, so
+                they return the focus to the ComboBox input (or to the search box) and act on it there: arrowing into
+                the list never strands the user away from the term they are typing. <b>Space</b> is the one key that
+                stays behind, since on a list that is only searched it is the toggle of the focused item.
+            </li>
+        </ul>
+        The whole dropdown is one tab stop in every mode: the combobox role, and the expanded state that goes with it,
+        sit on whichever element the keyboard actually lands on - the field itself, or the editable input of the
+        ComboBox mode, which takes the field's place in the tab order instead of adding a second stop to it. The
+        options stay out of the tab order as the options of a listbox should, and the row the arrow keys have reached
+        carries a focus outline in the focus color, drawn inside the row so the scrolling list cannot clip it, while
+        the field keeps its own ring in the ComboBox mode, where the element actually holding the focus is the input
+        inside it. However the callout is dismissed - a key, a click outside it, the close button of the responsive
+        panel or a swipe - the focus comes back to the dropdown instead of being dropped at the top of the page along
+        with the element that was holding it. Opening the callout with a mouse click focuses the selected item too, so
+        the keyboard can take over at any point.
     </div>
     <br />
     <div class="example-content">
@@ -1637,7 +1689,8 @@
         with the control instead of leaving it as text that merely happens to sit underneath. In the ComboBox mode the
         editable input is described by it as well, since that is the element the user is actually typing into.
         <b>DescriptionTemplate</b> replaces it with any content - a link, an icon, a warning that changes with the
-        selection - and is tied to the dropdown in exactly the same way.
+        selection - and is tied to the dropdown in exactly the same way. <b>AriaDescription</b> adds a second,
+        visually hidden line for the instruction that would be too long to show, read after the visible one.
     </div>
     <br />
     <div class="example-content">
@@ -1646,7 +1699,8 @@
                      NameSelectors="nameSelectors"
                      DefaultValue="@string.Empty"
                      Placeholder="Select an item"
-                     Description="Only the categories you have access to are listed." />
+                     Description="Only the categories you have access to are listed."
+                     AriaDescription="The list is refreshed every morning; ask an administrator for access to the rest." />
         <br /><br />
         <BitDropdown Combo
                      Label="ComboBox"
@@ -1671,7 +1725,48 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example31RazorCode" CsharpCode="@example31CsharpCode" Id="example31" PreventRenderForMcpClient>
+<DemoExample Title="Cascading parameters" RazorCode="@example31RazorCode" CsharpCode="@example31CsharpCode" Id="example31" PreventRenderForMcpClient>
+    <div>
+        The <b>BitParams</b> component carries a <b>BitDropdownParams</b> down to every dropdown under it, so a form
+        sets the search box, the clear button and the placeholder once instead of at every field in it. What it carries
+        is a default and not an override: a dropdown that sets a parameter for itself keeps its own value, and only
+        what it left unset is filled in from the cascade - which is what lets one field step out of the section it is
+        in without the section having to know about it. The params object is closed over the same type arguments as the
+        dropdowns it feeds (<code>BitDropdownParams&lt;Product, string&gt;</code> here), so one <b>BitParams</b>
+        can carry one object per pair of type arguments and each dropdown picks the one that matches its own. In
+        this API the object also carries the <b>NameSelectors</b>, which every dropdown over the same item type
+        shares anyway. The selection itself (<b>Value</b>,
+        <b>Values</b> and <b>IsOpen</b>), the validation state and everything that is written as markup or as a handler
+        - the templates, the <b>Options</b> content and the event callbacks - are left out of the params object on
+        purpose: they belong to a single dropdown rather than to a group of them.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitParams Parameters="dropdownParams">
+            <BitDropdown Label="Category"
+                         Items="GetBasicCustoms()"
+                         DefaultValue="@string.Empty" />
+            <br /><br />
+            <BitDropdown Label="Tags"
+                         MultiSelect
+                         Items="GetBasicCustoms()"
+                         DefaultValues="@(Array.Empty<string>())" />
+            <br /><br />
+            <BitDropdown Label="Its own placeholder"
+                         Items="GetBasicCustoms()"
+                         DefaultValue="@string.Empty"
+                         Placeholder="Pick one of these" />
+        </BitParams>
+        <br /><br />
+        <BitDropdown Label="Outside the cascade"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Color" RazorCode="@example32RazorCode" CsharpCode="@example32CsharpCode" Id="example32" PreventRenderForMcpClient>
     <div>
         The <b>Color</b> parameter paints the accents of the dropdown - the focus border, the search box
         underline and icon, the group headers and the check boxes of the multi select items - in one of the theme
@@ -1746,7 +1841,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example32RazorCode" CsharpCode="@example32CsharpCode" Id="example32">
+<DemoExample Title="External Icons" RazorCode="@example33RazorCode" CsharpCode="@example33CsharpCode" Id="example33">
     <div>
         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>,
@@ -1833,7 +1928,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Size" RazorCode="@example33RazorCode" CsharpCode="@example33CsharpCode" Id="example33" PreventRenderForMcpClient>
+<DemoExample Title="Size" RazorCode="@example34RazorCode" CsharpCode="@example34CsharpCode" Id="example34" 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.
@@ -1866,7 +1961,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example34RazorCode" CsharpCode="@example34CsharpCode" Id="example34">
+<DemoExample Title="Style & Class" RazorCode="@example35RazorCode" CsharpCode="@example35CsharpCode" Id="example35">
     <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
@@ -1874,6 +1969,10 @@
         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.
+        <br /><br />
+        Above all of them sit the public <b>--bit-Dropdown-*</b> CSS variables listed further down this page: one
+        declaration retunes a decision everywhere it is used - the field, its chips and the list at once - and the
+        ones written into <b>Style</b> are carried over to the callout, which no selector on the root could reach.
     </div>
     <br /><br />
     <div class="example-content">
@@ -1912,10 +2011,37 @@
                                         Container = "custom-container",
                                         ItemButton = "custom-item-button",
                                         ScrollContainer = "custom-scroll-container" })" />
+        <br /><br /><br /><br />
+        <div>CSS variables:</div><br />
+        <BitDropdown Chips MultiSelect
+                     Label="Accent"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban" })"
+                     Style="--bit-Dropdown-accent-color: #d1495b;
+                            --bit-Dropdown-accent-text-color: white;
+                            --bit-Dropdown-focus-color: #d1495b;
+                            --bit-Dropdown-radius: 1rem;
+                            --bit-Dropdown-callout-radius: 1rem;
+                            --bit-Dropdown-chip-border-color: #d1495b;
+                            --bit-Dropdown-chip-background: color-mix(in srgb, #d1495b 18%, transparent);
+                            --bit-Dropdown-item-hover-background: color-mix(in srgb, #d1495b 12%, transparent);
+                            --bit-Dropdown-item-selected-background: #d1495b;
+                            --bit-Dropdown-item-selected-color: white;" />
+        <br />
+        <BitDropdown Label="Density"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item"
+                     Style="--bit-Dropdown-min-height: 1.5rem;
+                            --bit-Dropdown-font-size: 0.75rem;
+                            --bit-Dropdown-item-height: 1.75rem;
+                            --bit-Dropdown-item-font-size: 0.75rem;" />
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example35RazorCode" CsharpCode="@example35CsharpCode" Id="example35" PreventRenderForMcpClient>
+<DemoExample Title="RTL" RazorCode="@example36RazorCode" CsharpCode="@example36CsharpCode" Id="example36" 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
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 f009c493543..41a610e0ffb 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
@@ -6,6 +6,24 @@ public partial class _BitDropdownCustomDemo
     [Inject] private NavigationManager NavManager { get; set; } = default!;
 
 
+    private readonly BitDropdownParams<Product, string>[] dropdownParams =
+    [
+        new()
+        {
+            NameSelectors = new()
+            {
+                Id = { Selector = c => c.Key },
+                ItemType = { Selector = c => c.Type },
+                Text = { Selector = c => c.Text },
+                Value = { Selector = c => c.Value },
+            },
+            Placeholder = "Select an item",
+            ShowClearButton = true,
+            ShowSearchBox = true,
+            SearchBoxPlaceholder = "Search the list",
+        }
+    ];
+
     private BitDropdownNameSelectors<Product, string> nameSelectors = new()
     {
         AriaLabel = { Selector = c => c.Label },
@@ -251,6 +269,10 @@ private List<Product> GetLocalizedCustoms() =>
     private string successMessage = string.Empty;
     private FormValidationDropdownModel validationModel = new();
 
+    private string? stockValue;
+    // A rule no EditContext knows about: what is in stock is only known once the item has been picked.
+    private string? StockError => stockValue?.StartsWith("v-") is true ? "Vegetables are out of stock right now." : null;
+
     private string? closeOnSelectValue;
     private IEnumerable<string?> closeOnSelectValues = [];
 
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 61e409994af..23fa1fc72b8 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
@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.Dropdown;
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.Dropdown;
 
 public partial class _BitDropdownCustomDemo
 {
@@ -896,7 +896,21 @@ public class Product
     <ValidationMessage For=""@(() => validationModel.Products)"" />
 
     <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
-</EditForm>";
+</EditForm>
+
+<BitDropdown @bind-Value=""stockValue""
+             Label=""Category""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             ErrorMessage=""@StockError"" />
+
+<BitDropdown Invalid
+             Label=""Invalid with no message""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"" />";
     private readonly string example12CsharpCode = @"
 public class FormValidationDropdownModel
 {
@@ -914,6 +928,11 @@ private async Task HandleValidSubmit() { }
 
 private void HandleInvalidSubmit() { }
 
+private string? stockValue;
+
+// A rule no EditContext knows about: what is in stock is only known once the item has been picked.
+private string? StockError => stockValue?.StartsWith(""v-"") is true ? ""Vegetables are out of stock right now."" : null;
+
 public class Product
 {
     public string? Label { get; set; }
@@ -2695,7 +2714,8 @@ public class Product
              NameSelectors=""nameSelectors""
              DefaultValue=""@string.Empty""
              Placeholder=""Select an item""
-             Description=""Only the categories you have access to are listed."" />
+             Description=""Only the categories you have access to are listed.""
+             AriaDescription=""The list is refreshed every morning; ask an administrator for access to the rest."" />
 
 <BitDropdown Combo
              Label=""ComboBox""
@@ -2771,6 +2791,69 @@ private List<Product> GetBasicCustoms() =>
 };";
 
     private readonly string example31RazorCode = @"
+<BitParams Parameters=""dropdownParams"">
+    <BitDropdown Label=""Category""
+                 Items=""GetBasicCustoms()""
+                 DefaultValue=""@string.Empty"" />
+
+    <BitDropdown Label=""Tags""
+                 MultiSelect
+                 Items=""GetBasicCustoms()""
+                 DefaultValues=""@(Array.Empty<string>())"" />
+
+    <BitDropdown Label=""Its own placeholder""
+                 Items=""GetBasicCustoms()""
+                 DefaultValue=""@string.Empty""
+                 Placeholder=""Pick one of these"" />
+</BitParams>
+
+<BitDropdown Label=""Outside the cascade""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"" />";
+    private readonly string example31CsharpCode = @"
+public class Product
+{
+    public string Key { get; set; } = Guid.NewGuid().ToString();
+    public string? Text { get; set; }
+    public string? Value { get; set; }
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+}
+
+private readonly BitDropdownParams<Product, string>[] dropdownParams =
+[
+    new()
+    {
+        NameSelectors = new()
+        {
+            Id = { Selector = c => c.Key },
+            ItemType = { Selector = c => c.Type },
+            Text = { Selector = c => c.Text },
+            Value = { Selector = c => c.Value },
+        },
+        Placeholder = ""Select an item"",
+        ShowClearButton = true,
+        ShowSearchBox = true,
+        SearchBoxPlaceholder = ""Search the list"",
+    }
+];
+
+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"" },
+    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 example32RazorCode = @"
 <BitDropdown Label=""Primary""
              MultiSelect
              ShowSearchBox
@@ -2834,7 +2917,7 @@ private List<Product> GetBasicCustoms() =>
              Items=""GetBasicCustoms()""
              NameSelectors=""nameSelectors""
              Placeholder=""Select items"" />";
-    private readonly string example31CsharpCode = @"
+    private readonly string example32CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
@@ -2875,7 +2958,7 @@ public class Product
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example32RazorCode = @"
+    private readonly string example33RazorCode = @"
 <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"" />
 
@@ -2931,7 +3014,7 @@ public class Product
              Items=""GetExternalIconBiCustoms()""
              NameSelectors=""nameSelectors""
              Placeholder=""Select an item"" />";
-    private readonly string example32CsharpCode = @"
+    private readonly string example33CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
@@ -3022,7 +3105,7 @@ public class Product
     IconName = { Selector = c => c.IconName },
 };";
 
-    private readonly string example33RazorCode = @"
+    private readonly string example34RazorCode = @"
 <BitDropdown Label=""Small""
              ShowSearchBox
              Items=""GetBasicCustoms()""
@@ -3046,7 +3129,7 @@ public class Product
              NameSelectors=""nameSelectors""
              Size=""BitSize.Large""
              Placeholder=""Select an item"" />";
-    private readonly string example33CsharpCode = @"
+    private readonly string example34CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
@@ -3082,7 +3165,7 @@ public class Product
     IsEnabled = { Selector = c => c.Disabled is false },
 };";
 
-    private readonly string example34RazorCode = @"
+    private readonly string example35RazorCode = @"
 <style>
     .custom-class {
         margin-inline: 1rem;
@@ -3159,8 +3242,35 @@ public class Product
              Classes=""@(new() { Callout = ""custom-callout"",
                                 Container = ""custom-container"",
                                 ItemButton = ""custom-item-button"",
-                                ScrollContainer = ""custom-scroll-container"" })"" />";
-    private readonly string example34CsharpCode = @"
+                                ScrollContainer = ""custom-scroll-container"" })"" />
+
+
+<BitDropdown Chips MultiSelect
+             Label=""Accent""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"" })""
+             Style=""--bit-Dropdown-accent-color: #d1495b;
+                    --bit-Dropdown-accent-text-color: white;
+                    --bit-Dropdown-focus-color: #d1495b;
+                    --bit-Dropdown-radius: 1rem;
+                    --bit-Dropdown-callout-radius: 1rem;
+                    --bit-Dropdown-chip-border-color: #d1495b;
+                    --bit-Dropdown-chip-background: color-mix(in srgb, #d1495b 18%, transparent);
+                    --bit-Dropdown-item-hover-background: color-mix(in srgb, #d1495b 12%, transparent);
+                    --bit-Dropdown-item-selected-background: #d1495b;
+                    --bit-Dropdown-item-selected-color: white;"" />
+
+<BitDropdown Label=""Density""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             Style=""--bit-Dropdown-min-height: 1.5rem;
+                    --bit-Dropdown-font-size: 0.75rem;
+                    --bit-Dropdown-item-height: 1.75rem;
+                    --bit-Dropdown-item-font-size: 0.75rem;"" />";
+    private readonly string example35CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
@@ -3219,7 +3329,7 @@ public class Product
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example35RazorCode = @"
+    private readonly string example36RazorCode = @"
 <BitDropdown Label=""تک انتخابی""
              Dir=""BitDir.Rtl""
              Items=""GetRtlCustoms()""
@@ -3239,7 +3349,7 @@ public class Product
              Items=""GetRtlCustoms()""
              NameSelectors=""nameSelectors""
              Placeholder=""لطفا انتخاب کنید"" />";
-    private readonly string example35CsharpCode = @"
+    private readonly string example36CsharpCode = @"
 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 767c31d5783..ec33186b24b 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
@@ -346,8 +346,10 @@
         input as soon as the callout opens - with the pointer and with Enter or Space on the keyboard alike - so
         typing filters right away. A clear button appears in the search input as soon as there is something to clear,
         which follows the text being typed rather than the term that has been applied: a search waiting to be committed
-        (or held back by a debounce) can be taken back the moment it is typed. The search term is discarded whenever the
-        callout closes, so the next opening always starts from the full list.
+        (or held back by a debounce) can be taken back the moment it is typed. Arrowing into the list never leaves the
+        term behind: the next character typed, and <b>Backspace</b> with it, goes back to the search box and keeps
+        filtering, so a search box replaces the typeahead rather than competing with it. 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">
@@ -514,6 +516,11 @@
         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.
+        <br /><br />
+        For a rejection the app decided on its own - a server response, a rule spanning two fields -
+        <b>ErrorMessage</b> shows the reason under the field, marks the dropdown invalid, ties the message to it with
+        <b>aria-describedby</b> and announces it right away instead of on the next focus. <b>Invalid</b> gives the
+        same look and the same <b>aria-invalid</b> attribute with no message to show.
     </div>
     <br />
     <div class="example-content">
@@ -548,6 +555,22 @@
         {
             <BitMessage Color="BitColor.Success">@successMessage</BitMessage>
         }
+
+        <br />
+
+        <BitDropdown @bind-Value="stockValue"
+                     Label="Category"
+                     Items="GetBasicItems()"
+                     Placeholder="Select an item"
+                     ErrorMessage="@StockError" />
+
+        <br />
+
+        <BitDropdown Invalid
+                     Label="Invalid with no message"
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item" />
     </div>
 </DemoExample>
 
@@ -906,7 +929,9 @@
         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 - only the way it is displayed changes.
+        as the limit is passed. Nothing is removed from the selection - only the way it is displayed changes: the
+        items the counter stands for keep naming the dropdown for a screen reader, and the pointer reads them in its
+        tooltip.
         <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
@@ -1046,40 +1071,65 @@
 
 <DemoExample Title="Keyboard navigation" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
     <div>
-        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 - from the closed dropdown too, so reaching the end of a long list never takes an
-        opening key followed by a second one - <b>PageUp</b> and <b>PageDown</b> jump several 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 - from the trigger just as much as from inside the callout, so a
-        popup revealed without the focus is never left behind when the focus leaves the dropdown.
-        <b>Alt+ArrowDown</b> is the exception among the openers: it
-        reveals the list without moving the focus into it, so the trigger keeps it and the plain arrows can walk the
-        list afterwards. Opening the callout with a mouse click focuses the selected
-        item as well, so the keyboard can take over at any point. In multi select mode <b>Ctrl+A</b> (or <b>Cmd+A</b>)
-        selects every item the current search shows - or clears them when they are all selected already -
-        while inside the search and ComboBox inputs the shortcut keeps its native select-the-text behavior.
-        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. The arrow keys wrap around by default, so <b>ArrowDown</b> on the last item comes
-        back to the first one; <b>NoWrapNavigation</b> stops them at the ends instead, which suits a long list where
-        the jump from one end to the other is more likely to read as the focus having been lost than as a move that
-        was asked for - the typeahead keeps wrapping either way, since it looks for the item that matches rather
-        than for the one that comes next. Disabled and hidden items are skipped throughout. In virtualize mode only the
-        rendered items take part in the typeahead, since the ones that have not been rendered yet have no text to
-        match against. The options themselves stay out of the tab order, as the options of a listbox should: they are
-        reached with the arrow keys, and <b>Tab</b> leaves the whole dropdown rather than walking through the list.
-        In ComboBox mode the keys that belong to the typed text - the printable characters, <b>Backspace</b>,
-        <b>Delete</b>, <b>ArrowLeft</b> and <b>ArrowRight</b> - return the focus to the input and act on it
-        there, so arrowing into the list never strands the user away from the term they are typing.
-        However the callout is dismissed - a key, a click outside it, the close button of the responsive panel or
-        a swipe - the focus comes back to the dropdown (to the ComboBox input when there is one) instead of
-        being dropped at the top of the page along with the element that was holding it.
-        <b>ClearOnEscape</b> gives <b>Escape</b> one more job once it has nothing left to dismiss: a press with the
-        callout already closed (and, in the ComboBox mode, with nothing typed) clears the selection, which is what a
-        keyboard user otherwise has to reach the clear button for. See the <BitLink Href="#example8">Clear button</BitLink>
-        section.
+        The dropdown follows the ARIA authoring practices for a combobox and is fully operable with the keyboard.
+        Disabled and hidden items are skipped throughout.
+        <ul>
+            <li>
+                <b>Enter</b>, <b>Space</b>, <b>ArrowUp</b>, <b>ArrowDown</b> - open the callout and put the focus on
+                the selected item, or the first one.
+            </li>
+            <li>
+                <b>Alt+ArrowDown</b> - reveals the list <i>without</i> moving the focus into it, so the trigger keeps
+                it and the plain arrows can walk the list afterwards.
+            </li>
+            <li>
+                <b>ArrowUp</b> / <b>ArrowDown</b> - move between the items, wrapping around the ends unless
+                <b>NoWrapNavigation</b> stops them there, which suits a long list where the jump from one end to the
+                other reads more like the focus having been lost than like a move that was asked for.
+            </li>
+            <li><b>Home</b> / <b>End</b> - jump to the first and the last item, from the closed dropdown as well.</li>
+            <li><b>PageUp</b> / <b>PageDown</b> - jump several items at a time.</li>
+            <li><b>Enter</b>, <b>Space</b> - select the focused item.</li>
+            <li>
+                <b>Escape</b>, <b>Alt+ArrowUp</b> - close the callout and return the focus to the dropdown. With
+                <b>ClearOnEscape</b>, a further <b>Escape</b> on an already closed callout (and, in the ComboBox mode,
+                with nothing typed) clears the selection - see the
+                <BitLink Href="#example8">Clear button</BitLink> section.
+            </li>
+            <li>
+                <b>Tab</b> - closes the callout and moves on, from the trigger just as much as from inside it, so a
+                popup revealed without the focus is never left behind when the focus leaves the dropdown.
+            </li>
+            <li>
+                <b>Ctrl+A</b> / <b>Cmd+A</b> - in multi select mode selects every item the current search shows, or
+                clears them when they are all selected already. Inside the search and ComboBox inputs it keeps its
+                native select-the-text behavior.
+            </li>
+            <li>
+                <b>Printable characters</b> - run a typeahead on a dropdown with no text field of its own: the
+                accumulated characters jump to the item starting with them, repeating one character cycles through
+                those items, and the buffer resets after a short pause. A <b>ShowSearchBox</b> or ComboBox dropdown
+                filters instead. The typeahead wraps even with <b>NoWrapNavigation</b>, since it looks for the item
+                that matches rather than for the one that comes next, and in virtualize mode it only sees the items
+                that are actually rendered.
+            </li>
+            <li>
+                <b>Backspace</b>, <b>Delete</b>, <b>ArrowLeft</b>, <b>ArrowRight</b> - belong to the typed text, so
+                they return the focus to the ComboBox input (or to the search box) and act on it there: arrowing into
+                the list never strands the user away from the term they are typing. <b>Space</b> is the one key that
+                stays behind, since on a list that is only searched it is the toggle of the focused item.
+            </li>
+        </ul>
+        The whole dropdown is one tab stop in every mode: the combobox role, and the expanded state that goes with it,
+        sit on whichever element the keyboard actually lands on - the field itself, or the editable input of the
+        ComboBox mode, which takes the field's place in the tab order instead of adding a second stop to it. The
+        options stay out of the tab order as the options of a listbox should, and the row the arrow keys have reached
+        carries a focus outline in the focus color, drawn inside the row so the scrolling list cannot clip it, while
+        the field keeps its own ring in the ComboBox mode, where the element actually holding the focus is the input
+        inside it. However the callout is dismissed - a key, a click outside it, the close button of the responsive
+        panel or a swipe - the focus comes back to the dropdown instead of being dropped at the top of the page along
+        with the element that was holding it. Opening the callout with a mouse click focuses the selected item too, so
+        the keyboard can take over at any point.
     </div>
     <br />
     <div class="example-content">
@@ -1571,7 +1621,8 @@
         with the control instead of leaving it as text that merely happens to sit underneath. In the ComboBox mode the
         editable input is described by it as well, since that is the element the user is actually typing into.
         <b>DescriptionTemplate</b> replaces it with any content - a link, an icon, a warning that changes with the
-        selection - and is tied to the dropdown in exactly the same way.
+        selection - and is tied to the dropdown in exactly the same way. <b>AriaDescription</b> adds a second,
+        visually hidden line for the instruction that would be too long to show, read after the visible one.
     </div>
     <br />
     <div class="example-content">
@@ -1579,7 +1630,8 @@
                      Items="GetBasicItems()"
                      DefaultValue="@string.Empty"
                      Placeholder="Select an item"
-                     Description="Only the categories you have access to are listed." />
+                     Description="Only the categories you have access to are listed."
+                     AriaDescription="The list is refreshed every morning; ask an administrator for access to the rest." />
         <br /><br />
         <BitDropdown Combo
                      Label="ComboBox"
@@ -1602,7 +1654,46 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example31RazorCode" CsharpCode="@example31CsharpCode" Id="example31" PreventRenderForMcpClient>
+<DemoExample Title="Cascading parameters" RazorCode="@example31RazorCode" CsharpCode="@example31CsharpCode" Id="example31" PreventRenderForMcpClient>
+    <div>
+        The <b>BitParams</b> component carries a <b>BitDropdownParams</b> down to every dropdown under it, so a form
+        sets the search box, the clear button and the placeholder once instead of at every field in it. What it carries
+        is a default and not an override: a dropdown that sets a parameter for itself keeps its own value, and only
+        what it left unset is filled in from the cascade - which is what lets one field step out of the section it is
+        in without the section having to know about it. The params object is closed over the same type arguments as the
+        dropdowns it feeds (<code>BitDropdownParams&lt;BitDropdownItem&lt;string&gt;, string&gt;</code> here), so
+        one <b>BitParams</b> can carry one object per pair of type arguments and each dropdown picks the one
+        that matches its own. The selection itself (<b>Value</b>,
+        <b>Values</b> and <b>IsOpen</b>), the validation state and everything that is written as markup or as a handler
+        - the templates, the <b>Options</b> content and the event callbacks - are left out of the params object on
+        purpose: they belong to a single dropdown rather than to a group of them.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitParams Parameters="dropdownParams">
+            <BitDropdown Label="Category"
+                         Items="GetBasicItems()"
+                         DefaultValue="@string.Empty" />
+            <br /><br />
+            <BitDropdown Label="Tags"
+                         MultiSelect
+                         Items="GetBasicItems()"
+                         DefaultValues="@(Array.Empty<string>())" />
+            <br /><br />
+            <BitDropdown Label="Its own placeholder"
+                         Items="GetBasicItems()"
+                         DefaultValue="@string.Empty"
+                         Placeholder="Pick one of these" />
+        </BitParams>
+        <br /><br />
+        <BitDropdown Label="Outside the cascade"
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Color" RazorCode="@example32RazorCode" CsharpCode="@example32CsharpCode" Id="example32" PreventRenderForMcpClient>
     <div>
         The <b>Color</b> parameter paints the accents of the dropdown - the focus border, the search box
         underline and icon, the group headers and the check boxes of the multi select items - in one of the theme
@@ -1677,7 +1768,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example32RazorCode" CsharpCode="@example32CsharpCode" Id="example32" PreventRenderForMcpClient>
+<DemoExample Title="External Icons" RazorCode="@example33RazorCode" CsharpCode="@example33CsharpCode" Id="example33" PreventRenderForMcpClient>
     <div>
         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>,
@@ -1762,7 +1853,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Size" RazorCode="@example33RazorCode" CsharpCode="@example33CsharpCode" Id="example33" PreventRenderForMcpClient>
+<DemoExample Title="Size" RazorCode="@example34RazorCode" CsharpCode="@example34CsharpCode" Id="example34" 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.
@@ -1792,7 +1883,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example34RazorCode" CsharpCode="@example34CsharpCode" Id="example34" PreventRenderForMcpClient>
+<DemoExample Title="Style & Class" RazorCode="@example35RazorCode" CsharpCode="@example35CsharpCode" Id="example35" 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
@@ -1800,6 +1891,10 @@
         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.
+        <br /><br />
+        Above all of them sit the public <b>--bit-Dropdown-*</b> CSS variables listed further down this page: one
+        declaration retunes a decision everywhere it is used - the field, its chips and the list at once - and the
+        ones written into <b>Style</b> are carried over to the callout, which no selector on the root could reach.
     </div>
     <br /><br />
     <div class="example-content">
@@ -1838,10 +1933,36 @@
                                         Container = "custom-container",
                                         ItemButton = "custom-item-button",
                                         ScrollContainer = "custom-scroll-container" })" />
+        <br /><br /><br /><br />
+        <div>CSS variables:</div><br />
+        <BitDropdown Chips MultiSelect
+                     Label="Accent"
+                     Items="GetBasicItems()"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban" })"
+                     Style="--bit-Dropdown-accent-color: #d1495b;
+                            --bit-Dropdown-accent-text-color: white;
+                            --bit-Dropdown-focus-color: #d1495b;
+                            --bit-Dropdown-radius: 1rem;
+                            --bit-Dropdown-callout-radius: 1rem;
+                            --bit-Dropdown-chip-border-color: #d1495b;
+                            --bit-Dropdown-chip-background: color-mix(in srgb, #d1495b 18%, transparent);
+                            --bit-Dropdown-item-hover-background: color-mix(in srgb, #d1495b 12%, transparent);
+                            --bit-Dropdown-item-selected-background: #d1495b;
+                            --bit-Dropdown-item-selected-color: white;" />
+        <br />
+        <BitDropdown Label="Density"
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     Style="--bit-Dropdown-min-height: 1.5rem;
+                            --bit-Dropdown-font-size: 0.75rem;
+                            --bit-Dropdown-item-height: 1.75rem;
+                            --bit-Dropdown-item-font-size: 0.75rem;" />
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example35RazorCode" CsharpCode="@example35CsharpCode" Id="example35" PreventRenderForMcpClient>
+<DemoExample Title="RTL" RazorCode="@example36RazorCode" CsharpCode="@example36CsharpCode" Id="example36" 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
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 7ce07473025..78b41b8364d 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
@@ -6,6 +6,17 @@ public partial class _BitDropdownItemDemo
     [Inject] private NavigationManager NavManager { get; set; } = default!;
 
 
+    private readonly BitDropdownParams<BitDropdownItem<string>, string>[] dropdownParams =
+    [
+        new()
+        {
+            Placeholder = "Select an item",
+            ShowClearButton = true,
+            ShowSearchBox = true,
+            SearchBoxPlaceholder = "Search the list",
+        }
+    ];
+
     private List<BitDropdownItem<string>> GetBasicItems() =>
     [
         new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
@@ -216,6 +227,10 @@ private List<BitDropdownItem<string>> GetExternalIconBiItems() =>
     private string successMessage = string.Empty;
     private FormValidationDropdownModel validationModel = new();
 
+    private string? stockValue;
+    // A rule no EditContext knows about: what is in stock is only known once the item has been picked.
+    private string? StockError => stockValue?.StartsWith("v-") is true ? "Vegetables are out of stock right now." : null;
+
     private string? closeOnSelectValue;
     private IEnumerable<string?> closeOnSelectValues = [];
 
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 3b2b33f43fb..bc80714092d 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
@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.Dropdown;
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.Dropdown;
 
 public partial class _BitDropdownItemDemo
 {
@@ -576,7 +576,19 @@ protected override void OnInitialized()
     <ValidationMessage For=""@(() => validationModel.Products)"" />
 
     <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
-</EditForm>";
+</EditForm>
+
+<BitDropdown @bind-Value=""stockValue""
+             Label=""Category""
+             Items=""GetBasicItems()""
+             Placeholder=""Select an item""
+             ErrorMessage=""@StockError"" />
+
+<BitDropdown Invalid
+             Label=""Invalid with no message""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"" />";
     private readonly string example12CsharpCode = @"
 public class FormValidationDropdownModel
 {
@@ -594,6 +606,11 @@ private async Task HandleValidSubmit() { }
 
 private void HandleInvalidSubmit() { }
 
+private string? stockValue;
+
+// A rule no EditContext knows about: what is in stock is only known once the item has been picked.
+private string? StockError => stockValue?.StartsWith(""v-"") is true ? ""Vegetables are out of stock right now."" : null;
+
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1817,7 +1834,8 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
              Items=""GetBasicItems()""
              DefaultValue=""@string.Empty""
              Placeholder=""Select an item""
-             Description=""Only the categories you have access to are listed."" />
+             Description=""Only the categories you have access to are listed.""
+             AriaDescription=""The list is refreshed every morning; ask an administrator for access to the rest."" />
 
 <BitDropdown Combo
              Label=""ComboBox""
@@ -1867,6 +1885,53 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
 };";
 
     private readonly string example31RazorCode = @"
+<BitParams Parameters=""dropdownParams"">
+    <BitDropdown Label=""Category""
+                 Items=""GetBasicItems()""
+                 DefaultValue=""@string.Empty"" />
+
+    <BitDropdown Label=""Tags""
+                 MultiSelect
+                 Items=""GetBasicItems()""
+                 DefaultValues=""@(Array.Empty<string>())"" />
+
+    <BitDropdown Label=""Its own placeholder""
+                 Items=""GetBasicItems()""
+                 DefaultValue=""@string.Empty""
+                 Placeholder=""Pick one of these"" />
+</BitParams>
+
+<BitDropdown Label=""Outside the cascade""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"" />";
+    private readonly string example31CsharpCode = @"
+private readonly BitDropdownParams<BitDropdownItem<string>, string>[] dropdownParams =
+[
+    new()
+    {
+        Placeholder = ""Select an item"",
+        ShowClearButton = true,
+        ShowSearchBox = true,
+        SearchBoxPlaceholder = ""Search the list"",
+    }
+];
+
+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 example32RazorCode = @"
 <BitDropdown Label=""Primary""
              MultiSelect
              ShowSearchBox
@@ -1930,7 +1995,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
              Items=""GetBasicItems()""
              Color=""BitColor.Error""
              Placeholder=""Select items"" />";
-    private readonly string example31CsharpCode = @"
+    private readonly string example32CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1945,7 +2010,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example32RazorCode = @"
+    private readonly string example33RazorCode = @"
 <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"" />
 
@@ -1999,7 +2064,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
              Items=""GetExternalIconBiItems()""
              DefaultValue=""@string.Empty""
              Placeholder=""Select an item"" />";
-    private readonly string example32CsharpCode = @"
+    private readonly string example33CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -2056,7 +2121,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"", Icon = BitIconInfo.Bi(""flower2"") }
 };";
 
-    private readonly string example33RazorCode = @"
+    private readonly string example34RazorCode = @"
 <BitDropdown Label=""Small""
              ShowSearchBox
              Items=""GetBasicItems()""
@@ -2077,7 +2142,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
              DefaultValue=""@string.Empty""
              Size=""BitSize.Large""
              Placeholder=""Select an item"" />";
-    private readonly string example33CsharpCode = @"
+    private readonly string example34CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -2092,7 +2157,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example34RazorCode = @"
+    private readonly string example35RazorCode = @"
 <style>
     .custom-class {
         margin-inline: 1rem;
@@ -2169,8 +2234,34 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
              Classes=""@(new() { Callout = ""custom-callout"",
                                 Container = ""custom-container"",
                                 ItemButton = ""custom-item-button"",
-                                ScrollContainer = ""custom-scroll-container"" })"" />";
-    private readonly string example34CsharpCode = @"
+                                ScrollContainer = ""custom-scroll-container"" })"" />
+
+
+<BitDropdown Chips MultiSelect
+             Label=""Accent""
+             Items=""GetBasicItems()""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"" })""
+             Style=""--bit-Dropdown-accent-color: #d1495b;
+                    --bit-Dropdown-accent-text-color: white;
+                    --bit-Dropdown-focus-color: #d1495b;
+                    --bit-Dropdown-radius: 1rem;
+                    --bit-Dropdown-callout-radius: 1rem;
+                    --bit-Dropdown-chip-border-color: #d1495b;
+                    --bit-Dropdown-chip-background: color-mix(in srgb, #d1495b 18%, transparent);
+                    --bit-Dropdown-item-hover-background: color-mix(in srgb, #d1495b 12%, transparent);
+                    --bit-Dropdown-item-selected-background: #d1495b;
+                    --bit-Dropdown-item-selected-color: white;"" />
+
+<BitDropdown Label=""Density""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             Style=""--bit-Dropdown-min-height: 1.5rem;
+                    --bit-Dropdown-font-size: 0.75rem;
+                    --bit-Dropdown-item-height: 1.75rem;
+                    --bit-Dropdown-item-font-size: 0.75rem;"" />";
+    private readonly string example35CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -2199,7 +2290,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"", Class = ""custom-veg"" }
 };";
 
-    private readonly string example35RazorCode = @"
+    private readonly string example36RazorCode = @"
 <BitDropdown Label=""تک انتخابی""
              Items=""GetRtlItems()""
              DefaultValue=""@string.Empty""
@@ -2219,7 +2310,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
              Items=""GetRtlItems()""
              DefaultValue=""@string.Empty""
              Placeholder=""لطفا انتخاب کنید"" />";
-    private readonly string example35CsharpCode = @"
+    private readonly string example36CsharpCode = @"
 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 b839a648573..abba031b9cc 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
@@ -499,8 +499,10 @@
         input as soon as the callout opens - with the pointer and with Enter or Space on the keyboard alike - so
         typing filters right away. A clear button appears in the search input as soon as there is something to clear,
         which follows the text being typed rather than the term that has been applied: a search waiting to be committed
-        (or held back by a debounce) can be taken back the moment it is typed. The search term is discarded whenever the
-        callout closes, so the next opening always starts from the full list.
+        (or held back by a debounce) can be taken back the moment it is typed. Arrowing into the list never leaves the
+        term behind: the next character typed, and <b>Backspace</b> with it, goes back to the search box and keeps
+        filtering, so a search box replaces the typeahead rather than competing with it. 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">
@@ -720,6 +722,11 @@
         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.
+        <br /><br />
+        For a rejection the app decided on its own - a server response, a rule spanning two fields -
+        <b>ErrorMessage</b> shows the reason under the field, marks the dropdown invalid, ties the message to it with
+        <b>aria-describedby</b> and announces it right away instead of on the next focus. <b>Invalid</b> gives the
+        same look and the same <b>aria-invalid</b> attribute with no message to show.
     </div>
     <br />
     <div class="example-content">
@@ -764,6 +771,32 @@
         {
             <BitMessage Color="BitColor.Success">@successMessage</BitMessage>
         }
+
+        <br />
+
+        <BitDropdown @bind-Value="stockValue"
+                     Label="Category"
+                     Placeholder="Select an item"
+                     ErrorMessage="@StockError"
+                     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 />
+
+        <BitDropdown Invalid
+                     Label="Invalid with no message"
+                     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>
 
@@ -1252,7 +1285,9 @@
         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 - only the way it is displayed changes.
+        as the limit is passed. Nothing is removed from the selection - only the way it is displayed changes: the
+        items the counter stands for keep naming the dropdown for a screen reader, and the pointer reads them in its
+        tooltip.
         <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
@@ -1437,39 +1472,65 @@
 
 <DemoExample Title="Keyboard navigation" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
     <div>
-        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 several 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 - from the trigger just as much as from inside the callout, so a
-        popup revealed without the focus is never left behind when the focus leaves the dropdown.
-        <b>Alt+ArrowDown</b> is the exception among the openers: it
-        reveals the list without moving the focus into it, so the trigger keeps it and the plain arrows can walk the
-        list afterwards. Opening the callout with a mouse click focuses the selected
-        item as well, so the keyboard can take over at any point. In multi select mode <b>Ctrl+A</b> (or <b>Cmd+A</b>)
-        selects every item the current search shows - or clears them when they are all selected already -
-        while inside the search and ComboBox inputs the shortcut keeps its native select-the-text behavior.
-        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. The arrow keys wrap around by default, so <b>ArrowDown</b> on the last item comes
-        back to the first one; <b>NoWrapNavigation</b> stops them at the ends instead, which suits a long list where
-        the jump from one end to the other is more likely to read as the focus having been lost than as a move that
-        was asked for - the typeahead keeps wrapping either way, since it looks for the item that matches rather
-        than for the one that comes next. Disabled and hidden items are skipped throughout. In virtualize mode only the
-        rendered items take part in the typeahead, since the ones that have not been rendered yet have no text to
-        match against. The options themselves stay out of the tab order, as the options of a listbox should: they are
-        reached with the arrow keys, and <b>Tab</b> leaves the whole dropdown rather than walking through the list.
-        In ComboBox mode the keys that belong to the typed text - the printable characters, <b>Backspace</b>,
-        <b>Delete</b>, <b>ArrowLeft</b> and <b>ArrowRight</b> - return the focus to the input and act on it
-        there, so arrowing into the list never strands the user away from the term they are typing.
-        However the callout is dismissed - a key, a click outside it, the close button of the responsive panel or
-        a swipe - the focus comes back to the dropdown (to the ComboBox input when there is one) instead of
-        being dropped at the top of the page along with the element that was holding it.
-        <b>ClearOnEscape</b> gives <b>Escape</b> one more job once it has nothing left to dismiss: a press with the
-        callout already closed (and, in the ComboBox mode, with nothing typed) clears the selection, which is what a
-        keyboard user otherwise has to reach the clear button for. See the <BitLink Href="#example8">Clear button</BitLink>
-        section.
+        The dropdown follows the ARIA authoring practices for a combobox and is fully operable with the keyboard.
+        Disabled and hidden items are skipped throughout.
+        <ul>
+            <li>
+                <b>Enter</b>, <b>Space</b>, <b>ArrowUp</b>, <b>ArrowDown</b> - open the callout and put the focus on
+                the selected item, or the first one.
+            </li>
+            <li>
+                <b>Alt+ArrowDown</b> - reveals the list <i>without</i> moving the focus into it, so the trigger keeps
+                it and the plain arrows can walk the list afterwards.
+            </li>
+            <li>
+                <b>ArrowUp</b> / <b>ArrowDown</b> - move between the items, wrapping around the ends unless
+                <b>NoWrapNavigation</b> stops them there, which suits a long list where the jump from one end to the
+                other reads more like the focus having been lost than like a move that was asked for.
+            </li>
+            <li><b>Home</b> / <b>End</b> - jump to the first and the last item, from the closed dropdown as well.</li>
+            <li><b>PageUp</b> / <b>PageDown</b> - jump several items at a time.</li>
+            <li><b>Enter</b>, <b>Space</b> - select the focused item.</li>
+            <li>
+                <b>Escape</b>, <b>Alt+ArrowUp</b> - close the callout and return the focus to the dropdown. With
+                <b>ClearOnEscape</b>, a further <b>Escape</b> on an already closed callout (and, in the ComboBox mode,
+                with nothing typed) clears the selection - see the
+                <BitLink Href="#example8">Clear button</BitLink> section.
+            </li>
+            <li>
+                <b>Tab</b> - closes the callout and moves on, from the trigger just as much as from inside it, so a
+                popup revealed without the focus is never left behind when the focus leaves the dropdown.
+            </li>
+            <li>
+                <b>Ctrl+A</b> / <b>Cmd+A</b> - in multi select mode selects every item the current search shows, or
+                clears them when they are all selected already. Inside the search and ComboBox inputs it keeps its
+                native select-the-text behavior.
+            </li>
+            <li>
+                <b>Printable characters</b> - run a typeahead on a dropdown with no text field of its own: the
+                accumulated characters jump to the item starting with them, repeating one character cycles through
+                those items, and the buffer resets after a short pause. A <b>ShowSearchBox</b> or ComboBox dropdown
+                filters instead. The typeahead wraps even with <b>NoWrapNavigation</b>, since it looks for the item
+                that matches rather than for the one that comes next, and in virtualize mode it only sees the items
+                that are actually rendered.
+            </li>
+            <li>
+                <b>Backspace</b>, <b>Delete</b>, <b>ArrowLeft</b>, <b>ArrowRight</b> - belong to the typed text, so
+                they return the focus to the ComboBox input (or to the search box) and act on it there: arrowing into
+                the list never strands the user away from the term they are typing. <b>Space</b> is the one key that
+                stays behind, since on a list that is only searched it is the toggle of the focused item.
+            </li>
+        </ul>
+        The whole dropdown is one tab stop in every mode: the combobox role, and the expanded state that goes with it,
+        sit on whichever element the keyboard actually lands on - the field itself, or the editable input of the
+        ComboBox mode, which takes the field's place in the tab order instead of adding a second stop to it. The
+        options stay out of the tab order as the options of a listbox should, and the row the arrow keys have reached
+        carries a focus outline in the focus color, drawn inside the row so the scrolling list cannot clip it, while
+        the field keeps its own ring in the ComboBox mode, where the element actually holding the focus is the input
+        inside it. However the callout is dismissed - a key, a click outside it, the close button of the responsive
+        panel or a swipe - the focus comes back to the dropdown instead of being dropped at the top of the page along
+        with the element that was holding it. Opening the callout with a mouse click focuses the selected item too, so
+        the keyboard can take over at any point.
     </div>
     <br />
     <div class="example-content">
@@ -1731,7 +1792,53 @@
 </DemoExample>
 
 <DemoExample Title="Virtualization" RazorCode="@example24RazorCode" Id="example24" PreventRenderForMcpClient>
-    <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>
+    <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). <b>ItemsProviderDebounceTime</b> (100ms by default)
+        collapses the burst of requests that fast scrolling and typing produce into a single one, so the provider is
+        not asked once per rendered frame. 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.
+        Opening a virtualized dropdown still lands on what is currently selected, even when that item sits thousands of
+        rows down and has never been rendered: the list is scrolled to where its index says it is and the selection is
+        centred in the window, the way a native select behaves. That needs an index to scroll to, so it applies to a
+        local <b>Items</b> collection; with an <b>ItemsProvider</b> the loaded window is all the component has.
+        Each option still reports where it sits in the whole set - the provider says how many items there are
+        and which window it is handing over - so a screen reader announces "Item 4210 of 10,000" in a list that
+        has never been loaded in full.
+    </div>
+    <br /><br /><br />
+    <div class="virtualize-note">
+        <div class="virtualize-note-body">
+            <div class="virtualize-note-title">No live example on this tab</div>
+            <p>
+                The worked examples for this section are on the <b>Item</b> and <b>Custom</b> tabs. Virtualization is a
+                property of a list too large to draw at once, and this is the API for a list written out by hand.
+            </p>
+            <p>
+                <b>Virtualize</b> itself is not refused here: each <b>BitDropdownOption</b> registers its item with the
+                dropdown as it renders, and the callout then draws only the rows inside the visible window, exactly as
+                it does for the other two APIs. What it cannot do is skip the options themselves. An option is a
+                component in the markup, and a component has to be instantiated and rendered for its registration to
+                happen at all, so all ten thousand of them are built whether or not a single row is on screen - and
+                building them is the cost the technique exists to avoid.
+            </p>
+            <p>
+                <b>ItemsProvider</b> has no counterpart here at all. It answers with one window of a dataset that lives
+                on a server, and there is no markup to write for items nobody has fetched yet; the same goes for
+                <b>InitialSelectedItems</b>, which exists to name the items a provider has not handed over.
+            </p>
+            <p>
+                So a list big enough to need virtualizing is a list that belongs to the <b>Items</b> or
+                <b>ItemsProvider</b> API. Bind the data there, and keep this API for the handful of options you would
+                write out by hand anyway.
+            </p>
+        </div>
+    </div>
 </DemoExample>
 
 <DemoExample Title="Localization" RazorCode="@example25RazorCode" CsharpCode="@example25CsharpCode" Id="example25" PreventRenderForMcpClient>
@@ -1997,7 +2104,8 @@
         with the control instead of leaving it as text that merely happens to sit underneath. In the ComboBox mode the
         editable input is described by it as well, since that is the element the user is actually typing into.
         <b>DescriptionTemplate</b> replaces it with any content - a link, an icon, a warning that changes with the
-        selection - and is tied to the dropdown in exactly the same way.
+        selection - and is tied to the dropdown in exactly the same way. <b>AriaDescription</b> adds a second,
+        visually hidden line for the instruction that would be too long to show, read after the visible one.
     </div>
     <br />
     <div class="example-content">
@@ -2005,6 +2113,7 @@
                      DefaultValue="@string.Empty"
                      Placeholder="Select an item"
                      Description="Only the categories you have access to are listed."
+                     AriaDescription="The list is refreshed every morning; ask an administrator for access to the rest."
                      TItem="BitDropdownOption<string>" TValue="string">
             @foreach (var item in basicItems)
             {
@@ -2044,7 +2153,66 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example31RazorCode" CsharpCode="@example31CsharpCode" Id="example31" PreventRenderForMcpClient>
+<DemoExample Title="Cascading parameters" RazorCode="@example31RazorCode" CsharpCode="@example31CsharpCode" Id="example31" PreventRenderForMcpClient>
+    <div>
+        The <b>BitParams</b> component carries a <b>BitDropdownParams</b> down to every dropdown under it, so a form
+        sets the search box, the clear button and the placeholder once instead of at every field in it. What it carries
+        is a default and not an override: a dropdown that sets a parameter for itself keeps its own value, and only
+        what it left unset is filled in from the cascade - which is what lets one field step out of the section it is
+        in without the section having to know about it. The params object is closed over the same type arguments as the
+        dropdowns it feeds (<code>BitDropdownParams&lt;BitDropdownOption&lt;string&gt;, string&gt;</code> here),
+        so one <b>BitParams</b> can carry one object per pair of type arguments and each dropdown picks the one
+        that matches its own. The selection itself (<b>Value</b>,
+        <b>Values</b> and <b>IsOpen</b>), the validation state and everything that is written as markup or as a handler
+        - the templates, the <b>Options</b> content and the event callbacks - are left out of the params object on
+        purpose: they belong to a single dropdown rather than to a group of them.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitParams Parameters="dropdownParams">
+            <BitDropdown Label="Category"
+                         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>
+            <br /><br />
+            <BitDropdown Label="Tags"
+                         MultiSelect
+                         DefaultValues="@(Array.Empty<string>())"
+                         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="Its own placeholder"
+                         DefaultValue="@string.Empty"
+                         Placeholder="Pick one of these"
+                         TItem="BitDropdownOption<string>" TValue="string">
+                @foreach (var item in basicItems)
+                {
+                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+                }
+            </BitDropdown>
+        </BitParams>
+        <br /><br />
+        <BitDropdown Label="Outside the cascade"
+                     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="Color" RazorCode="@example32RazorCode" CsharpCode="@example32CsharpCode" Id="example32" PreventRenderForMcpClient>
     <div>
         The <b>Color</b> parameter paints the accents of the dropdown - the focus border, the search box
         underline and icon, the group headers and the check boxes of the multi select items - in one of the theme
@@ -2151,7 +2319,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example32RazorCode" CsharpCode="@example32CsharpCode" Id="example32" PreventRenderForMcpClient>
+<DemoExample Title="External Icons" RazorCode="@example33RazorCode" CsharpCode="@example33CsharpCode" Id="example33" PreventRenderForMcpClient>
     <div>
         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>,
@@ -2288,7 +2456,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Size" RazorCode="@example33RazorCode" CsharpCode="@example33CsharpCode" Id="example33" PreventRenderForMcpClient>
+<DemoExample Title="Size" RazorCode="@example34RazorCode" CsharpCode="@example34CsharpCode" Id="example34" 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.
@@ -2333,7 +2501,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example34RazorCode" CsharpCode="@example34CsharpCode" Id="example34" PreventRenderForMcpClient>
+<DemoExample Title="Style & Class" RazorCode="@example35RazorCode" CsharpCode="@example35CsharpCode" Id="example35" 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
@@ -2341,6 +2509,10 @@
         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.
+        <br /><br />
+        Above all of them sit the public <b>--bit-Dropdown-*</b> CSS variables listed further down this page: one
+        declaration retunes a decision everywhere it is used - the field, its chips and the list at once - and the
+        ones written into <b>Style</b> are carried over to the callout, which no selector on the root could reach.
     </div>
     <br /><br />
     <div class="example-content">
@@ -2399,10 +2571,45 @@
                 <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
             }
         </BitDropdown>
+        <br /><br /><br /><br />
+        <div>CSS variables:</div><br />
+        <BitDropdown Chips MultiSelect
+                     Label="Accent"
+                     Placeholder="Select items"
+                     TItem="BitDropdownOption<string>" TValue="string"
+                     DefaultValues="@(new[] { "f-app", "f-ban" })"
+                     Style="--bit-Dropdown-accent-color: #d1495b;
+                            --bit-Dropdown-accent-text-color: white;
+                            --bit-Dropdown-focus-color: #d1495b;
+                            --bit-Dropdown-radius: 1rem;
+                            --bit-Dropdown-callout-radius: 1rem;
+                            --bit-Dropdown-chip-border-color: #d1495b;
+                            --bit-Dropdown-chip-background: color-mix(in srgb, #d1495b 18%, transparent);
+                            --bit-Dropdown-item-hover-background: color-mix(in srgb, #d1495b 12%, transparent);
+                            --bit-Dropdown-item-selected-background: #d1495b;
+                            --bit-Dropdown-item-selected-color: white;">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br />
+        <BitDropdown Label="Density"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string"
+                     Style="--bit-Dropdown-min-height: 1.5rem;
+                            --bit-Dropdown-font-size: 0.75rem;
+                            --bit-Dropdown-item-height: 1.75rem;
+                            --bit-Dropdown-item-font-size: 0.75rem;">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example35RazorCode" CsharpCode="@example35CsharpCode" Id="example35" PreventRenderForMcpClient>
+<DemoExample Title="RTL" RazorCode="@example36RazorCode" CsharpCode="@example36CsharpCode" Id="example36" 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
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 68f3ccb65c7..4c072aa8914 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
@@ -2,6 +2,17 @@
 
 public partial class _BitDropdownOptionDemo
 {
+    private readonly BitDropdownParams<BitDropdownOption<string>, string>[] dropdownParams =
+    [
+        new()
+        {
+            Placeholder = "Select an item",
+            ShowClearButton = true,
+            ShowSearchBox = true,
+            SearchBoxPlaceholder = "Search the list",
+        }
+    ];
+
     private readonly List<BitDropdownItem<string>> basicItems =
     [
         new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
@@ -158,6 +169,10 @@ public partial class _BitDropdownOptionDemo
     private string successMessage = string.Empty;
     private FormValidationDropdownModel validationModel = new();
 
+    private string? stockValue;
+    // A rule no EditContext knows about: what is in stock is only known once the item has been picked.
+    private string? StockError => stockValue?.StartsWith("v-") is true ? "Vegetables are out of stock right now." : null;
+
     private string? closeOnSelectValue;
     private IEnumerable<string?> closeOnSelectValues = [];
 
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 02a6a407c2d..870df48e7c7 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
@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.Dropdown;
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.Dropdown;
 
 public partial class _BitDropdownOptionDemo
 {
@@ -780,7 +780,29 @@ protected override void OnInitialized()
     <ValidationMessage For=""@(() => validationModel.Products)"" />
 
     <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
-</EditForm>";
+</EditForm>
+
+<BitDropdown @bind-Value=""stockValue""
+             Label=""Category""
+             Placeholder=""Select an item""
+             ErrorMessage=""@StockError""
+             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 Invalid
+             Label=""Invalid with no message""
+             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 = @"
 public class FormValidationDropdownModel
 {
@@ -798,6 +820,11 @@ private async Task HandleValidSubmit() { }
 
 private void HandleInvalidSubmit() { }
 
+private string? stockValue;
+
+// A rule no EditContext knows about: what is in stock is only known once the item has been picked.
+private string? StockError => stockValue?.StartsWith(""v-"") is true ? ""Vegetables are out of stock right now."" : null;
+
 private readonly List<BitDropdownItem<string>> basicItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1849,7 +1876,33 @@ private async Task LoadDelayedItems()
 }";
 
     private readonly string example24RazorCode = @"
-<div>Virtualizing large item lists is demonstrated with the Items and ItemsProvider APIs; check the Item and Custom tabs for the examples.</div>";
+<div class=""virtualize-note"">
+    <div class=""virtualize-note-body"">
+        <div class=""virtualize-note-title"">No live example on this tab</div>
+        <p>
+            The worked examples for this section are on the Item and Custom tabs. Virtualization is a
+            property of a list too large to draw at once, and this is the API for a list written out by hand.
+        </p>
+        <p>
+            Virtualize itself is not refused here: each BitDropdownOption registers its item with the
+            dropdown as it renders, and the callout then draws only the rows inside the visible window, exactly as
+            it does for the other two APIs. What it cannot do is skip the options themselves. An option is a
+            component in the markup, and a component has to be instantiated and rendered for its registration to
+            happen at all, so all ten thousand of them are built whether or not a single row is on screen - and
+            building them is the cost the technique exists to avoid.
+        </p>
+        <p>
+            ItemsProvider has no counterpart here at all. It answers with one window of a dataset that lives
+            on a server, and there is no markup to write for items nobody has fetched yet; the same goes for
+            InitialSelectedItems, which exists to name the items a provider has not handed over.
+        </p>
+        <p>
+            So a list big enough to need virtualizing is a list that belongs to the Items or
+            ItemsProvider API. Bind the data there, and keep this API for the handful of options you would
+            write out by hand anyway.
+        </p>
+    </div>
+</div>";
 
     private readonly string example25RazorCode = @"
 <BitDropdown @bind-Values=""localizationValues""
@@ -2140,6 +2193,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
              DefaultValue=""@string.Empty""
              Placeholder=""Select an item""
              Description=""Only the categories you have access to are listed.""
+             AriaDescription=""The list is refreshed every morning; ask an administrator for access to the rest.""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
     @foreach (var item in basicItems)
     {
@@ -2206,6 +2260,73 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
 ];";
 
     private readonly string example31RazorCode = @"
+<BitParams Parameters=""dropdownParams"">
+    <BitDropdown Label=""Category""
+                 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 Label=""Tags""
+                 MultiSelect
+                 DefaultValues=""@(Array.Empty<string>())""
+                 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=""Its own placeholder""
+                 DefaultValue=""@string.Empty""
+                 Placeholder=""Pick one of these""
+                 TItem=""BitDropdownOption<string>"" TValue=""string"">
+        @foreach (var item in basicItems)
+        {
+            <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+        }
+    </BitDropdown>
+</BitParams>
+
+<BitDropdown Label=""Outside the cascade""
+             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 example31CsharpCode = @"
+private readonly BitDropdownParams<BitDropdownOption<string>, string>[] dropdownParams =
+[
+    new()
+    {
+        Placeholder = ""Select an item"",
+        ShowClearButton = true,
+        ShowSearchBox = true,
+        SearchBoxPlaceholder = ""Search the list"",
+    }
+];
+
+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 example32RazorCode = @"
 <BitDropdown Label=""Primary""
              MultiSelect
              ShowSearchBox
@@ -2301,7 +2422,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>";
-    private readonly string example31CsharpCode = @"
+    private readonly string example32CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -2316,7 +2437,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example32RazorCode = @"
+    private readonly string example33RazorCode = @"
 <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"" />
 
@@ -2422,7 +2543,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 example32CsharpCode = @"
+    private readonly string example33CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -2437,7 +2558,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example33RazorCode = @"
+    private readonly string example34RazorCode = @"
 <BitDropdown Label=""Small""
              ShowSearchBox
              Size=""BitSize.Small""
@@ -2473,7 +2594,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>";
-    private readonly string example33CsharpCode = @"
+    private readonly string example34CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -2488,7 +2609,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example34RazorCode = @"
+    private readonly string example35RazorCode = @"
 <style>
     .custom-class {
         margin-inline: 1rem;
@@ -2585,8 +2706,43 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
+</BitDropdown>
+
+
+<BitDropdown Chips MultiSelect
+             Label=""Accent""
+             Placeholder=""Select items""
+             TItem=""BitDropdownOption<string>"" TValue=""string""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"" })""
+             Style=""--bit-Dropdown-accent-color: #d1495b;
+                    --bit-Dropdown-accent-text-color: white;
+                    --bit-Dropdown-focus-color: #d1495b;
+                    --bit-Dropdown-radius: 1rem;
+                    --bit-Dropdown-callout-radius: 1rem;
+                    --bit-Dropdown-chip-border-color: #d1495b;
+                    --bit-Dropdown-chip-background: color-mix(in srgb, #d1495b 18%, transparent);
+                    --bit-Dropdown-item-hover-background: color-mix(in srgb, #d1495b 12%, transparent);
+                    --bit-Dropdown-item-selected-background: #d1495b;
+                    --bit-Dropdown-item-selected-color: white;"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Density""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string""
+             Style=""--bit-Dropdown-min-height: 1.5rem;
+                    --bit-Dropdown-font-size: 0.75rem;
+                    --bit-Dropdown-item-height: 1.75rem;
+                    --bit-Dropdown-item-font-size: 0.75rem;"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
 </BitDropdown>";
-    private readonly string example34CsharpCode = @"
+    private readonly string example35CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -2615,7 +2771,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"", Class = ""custom-veg"" }
 ];";
 
-    private readonly string example35RazorCode = @"
+    private readonly string example36RazorCode = @"
 <BitDropdown Label=""تک انتخابی""
              Dir=""BitDir.Rtl""
              Placeholder=""لطفا انتخاب کنید""
@@ -2647,7 +2803,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>";
-    private readonly string example35CsharpCode = @"
+    private readonly string example36CsharpCode = @"
 private readonly List<BitDropdownItem<string>> rtlItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""میوه ها"" },
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests.Mcp/ComponentCatalogTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests.Mcp/ComponentCatalogTests.cs
index e074ad5fc0d..177bc25f0d1 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests.Mcp/ComponentCatalogTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests.Mcp/ComponentCatalogTests.cs
@@ -326,12 +326,19 @@ public async Task A_type_a_signature_names_is_named_back_with_its_members(string
     /// read the whole answer still has no way to learn that one object can set the defaults of
     /// every instance under it.
     /// </para>
+    /// <para>
+    /// A generic component's params class is generic too, and the name has to be the one that both
+    /// compiles in the snippet and resolves as the <c>typeName</c> the same line says to pass -
+    /// <c>BitDropdownParams&lt;TItem, TValue&gt;</c> rather than the <c>BitDropdownParams`2</c>
+    /// reflection calls it.
+    /// </para>
     /// </summary>
     [TestMethod]
     [DataRow("BitActionButton", "BitActionButtonParams")]
     [DataRow("BitText", "BitTextParams")]
     [DataRow("BitStack", "BitStackParams")]
     [DataRow("BitChoiceGroup", "BitChoiceGroupParams")]
+    [DataRow("BitDropdown", "BitDropdownParams<TItem, TValue>")]
     public async Task A_component_that_takes_a_params_object_names_it(string component, string paramsType)
     {
         var answer = await CallAsync("GetBitBlazorUIComponent", new { name = component });
@@ -349,7 +356,7 @@ public async Task A_component_that_takes_a_params_object_names_it(string compone
 
         // The line is only worth its cost where it is true: a component with no params class of its
         // own must not carry it.
-        var without = await CallAsync("GetBitBlazorUIComponent", new { name = "BitDropdown" });
+        var without = await CallAsync("GetBitBlazorUIComponent", new { name = "BitTextField" });
 
         Assert.DoesNotContain("## Cascading parameters", without, "A component that takes no params object claims one.");
     }
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 1e7f1264bcb..0c6db24b394 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
@@ -1415,6 +1415,76 @@ public void BitDropdownColorCalloutTest(BitColor? color, string expectedClass)
         Assert.IsTrue(callout.ClassList.Contains(expectedClass));
     }
 
+    [TestMethod]
+    public void BitDropdownCalloutShouldInheritThePublicCssVariablesOfTheStyle()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, BitDropdownTests.GetShortDropdownItems());
+            parameters.Add(p => p.Style, "margin:1rem;--bit-Dropdown-accent-color:red; --bit-Dropdown-item-height:3rem");
+            parameters.Add(p => p.Styles, new BitDropdownClassStyles { Root = "--bit-Dropdown-callout-radius:1rem", Callout = "z-index:9" });
+        });
+
+        // The callout is a sibling of the root (and is moved to the body while it is open), so it inherits
+        // nothing the author sets on the dropdown. The public variables are carried across by hand, from the
+        // Style of the instance and from Styles.Root; Styles.Callout is appended last so it still wins.
+        var callout = component.Find(".bit-drp-cal").GetAttribute("style");
+
+        Assert.IsNotNull(callout);
+        StringAssert.Contains(callout, "--bit-Dropdown-accent-color:red;");
+        StringAssert.Contains(callout, "--bit-Dropdown-item-height:3rem;");
+        StringAssert.Contains(callout, "--bit-Dropdown-callout-radius:1rem;");
+        StringAssert.Contains(callout, "z-index:9");
+        Assert.IsTrue(callout.IndexOf("--bit-Dropdown-callout-radius", StringComparison.Ordinal) < callout.IndexOf("z-index:9", StringComparison.Ordinal));
+
+        // Only the public variables travel: a layout declaration written for the field would move the callout
+        // away from the trigger it is positioned against.
+        Assert.IsFalse(callout.Contains("margin:1rem", StringComparison.Ordinal));
+
+        // ... and the root keeps everything it was given.
+        var root = component.Find(".bit-drp").GetAttribute("style");
+        Assert.IsNotNull(root);
+        StringAssert.Contains(root, "margin:1rem");
+    }
+
+    [TestMethod]
+    public void BitDropdownCalloutShouldCarryOnlyItsOwnStyleWithoutPublicCssVariables()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, BitDropdownTests.GetShortDropdownItems());
+            parameters.Add(p => p.Style, "margin:1rem");
+            parameters.Add(p => p.Styles, new BitDropdownClassStyles { Callout = "z-index:9" });
+        });
+
+        Assert.AreEqual("z-index:9", component.Find(".bit-drp-cal").GetAttribute("style"));
+    }
+
+    [TestMethod]
+    public void BitDropdownSearchBoxShouldNameTheListItFilters()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.ShowSearchBox, true);
+            parameters.Add(p => p.Items, BitDropdownTests.GetShortDropdownItems());
+        });
+
+        component.Find(".bit-drp-wrp").Click();
+
+        // The search box sits outside the listbox, so without aria-controls it is a field that narrows
+        // nothing a screen reader can tie it to.
+        var listId = component.Find(".bit-drp-scn").GetAttribute("id");
+
+        Assert.IsFalse(string.IsNullOrEmpty(listId));
+        Assert.AreEqual(listId, component.Find(".bit-drp-sin").GetAttribute("aria-controls"));
+    }
+
     [TestMethod]
     public void BitDropdownComboTypingWhileClosedShouldOpenAndKeepFilter()
     {
@@ -1808,11 +1878,21 @@ public void BitDropdownOverflowChipShouldNameTheItemsItHides()
             parameters.Add(p => p.DefaultValues, items.Select(i => i.Value).ToArray());
         });
 
-        // The count alone says nothing about what got collapsed, so the hidden items are named.
+        // The count alone says nothing about what got collapsed, so the hidden items are named. The names are
+        // RENDERED rather than asserted through aria-label, which is not exposed on an element with no role of
+        // its own: the counter is hidden from a screen reader and the visually hidden list takes its place,
+        // both in the accessible name of the combobox (computed from this subtree) and in what a reader walks.
         var overflow = component.Find(".bit-drp-ovf");
-        Assert.AreEqual("+3", overflow.TextContent.Trim());
         Assert.AreEqual("Orange, Banana, Broccoli", overflow.GetAttribute("title"));
-        Assert.AreEqual("Orange, Banana, Broccoli", overflow.GetAttribute("aria-label"));
+        Assert.IsFalse(overflow.HasAttribute("aria-label"));
+
+        var counter = overflow.QuerySelector("[aria-hidden='true']");
+        Assert.IsNotNull(counter);
+        Assert.AreEqual("+3", counter.TextContent.Trim());
+
+        var names = overflow.QuerySelector(".bit-drp-vhd");
+        Assert.IsNotNull(names);
+        Assert.AreEqual("Orange, Banana, Broccoli", names.TextContent.Trim());
     }
 
     [TestMethod]
@@ -2155,8 +2235,11 @@ public void BitDropdownAltArrowDownShouldOpenWithoutMovingTheFocus()
         Assert.AreEqual(1, Context.JSInterop.Invocations["BitBlazorUI.Dropdowns.focusItem"].Count);
     }
 
+    // The combobox role belongs on the element the keyboard lands on, which is the field itself only
+    // while it has nothing focusable inside it. The ComboBox mode has an input, so the role - and the
+    // state that goes with it - moves onto that, leaving the dropdown one tab stop rather than two.
     [TestMethod]
-    public void BitDropdownComboAriaAutocompleteShouldBeOnTheComboboxElement()
+    public void BitDropdownComboboxRoleShouldFollowTheFocusedElement()
     {
         Context.JSInterop.Mode = JSRuntimeMode.Loose;
 
@@ -2165,7 +2248,11 @@ public void BitDropdownComboAriaAutocompleteShouldBeOnTheComboboxElement()
             parameters.Add(p => p.Items, GetShortDropdownItems());
         });
 
-        Assert.IsFalse(component.Find(".bit-drp-wrp").HasAttribute("aria-autocomplete"));
+        var field = component.Find(".bit-drp-wrp");
+        Assert.AreEqual("combobox", field.GetAttribute("role"));
+        Assert.AreEqual("false", field.GetAttribute("aria-expanded"));
+        Assert.AreEqual("0", field.GetAttribute("tabindex"));
+        Assert.IsFalse(field.HasAttribute("aria-autocomplete"));
 
         component.Render(parameters =>
         {
@@ -2173,7 +2260,21 @@ public void BitDropdownComboAriaAutocompleteShouldBeOnTheComboboxElement()
             parameters.Add(p => p.Combo, true);
         });
 
-        Assert.AreEqual("list", component.Find(".bit-drp-wrp").GetAttribute("aria-autocomplete"));
+        field = component.Find(".bit-drp-wrp");
+        Assert.IsFalse(field.HasAttribute("role"));
+        Assert.IsFalse(field.HasAttribute("aria-expanded"));
+        Assert.IsFalse(field.HasAttribute("aria-haspopup"));
+        Assert.AreEqual("-1", field.GetAttribute("tabindex"));
+
+        var comboInput = component.Find(".bit-drp-inp");
+        Assert.AreEqual("combobox", comboInput.GetAttribute("role"));
+        Assert.AreEqual("listbox", comboInput.GetAttribute("aria-haspopup"));
+        Assert.AreEqual("list", comboInput.GetAttribute("aria-autocomplete"));
+        Assert.AreEqual("false", comboInput.GetAttribute("aria-expanded"));
+
+        component.Find(".bit-drp-wrp").Click();
+
+        Assert.AreEqual("true", component.Find(".bit-drp-inp").GetAttribute("aria-expanded"));
     }
 
     [TestMethod]
@@ -3411,8 +3512,10 @@ public void BitDropdownShowSearchBoxShouldStayInertInTheComboMode()
         component.Find(".bit-drp-wrp").KeyDown(new KeyboardEventArgs { Key = "Enter" });
     }
 
-    // The trigger is named after the element that shows the selection. An input inside that element
-    // would contribute its value to the name, making the trigger report back whatever is being typed.
+    // A dropdown that is not typed into is named after the element that shows the selection, and an
+    // input inside that element would contribute its value to the name, making the field report back
+    // whatever is being typed. In the ComboBox mode the input is the combobox and names itself after
+    // the label, so its value never reaches the name in the first place.
     [TestMethod]
     public void BitDropdownComboInputShouldStayOutOfTheTriggerAccessibleName()
     {
@@ -3420,17 +3523,30 @@ public void BitDropdownComboInputShouldStayOutOfTheTriggerAccessibleName()
 
         var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
         {
-            parameters.Add(p => p.Combo, true);
+            parameters.Add(p => p.Label, "Fruit");
             parameters.Add(p => p.Items, GetShortDropdownItems());
             parameters.Add(p => p.Value, "f-app");
         });
 
         var labelledBy = component.Find(".bit-drp-wrp").GetAttribute("aria-labelledby");
-        var namedBy = component.Find($"#{labelledBy}");
+        var namedBy = component.Find($"#{labelledBy!.Split(' ')[^1]}");
 
         Assert.AreEqual("Apple", namedBy.TextContent.Trim());
         Assert.AreEqual(0, namedBy.QuerySelectorAll("input").Length);
+
+        component.Render(parameters =>
+        {
+            parameters.Add(p => p.Combo, true);
+            parameters.Add(p => p.Label, "Fruit");
+            parameters.Add(p => p.Items, GetShortDropdownItems());
+            parameters.Add(p => p.Value, "f-app");
+        });
+
+        var comboInput = component.Find(".bit-drp-inp");
+
         Assert.AreEqual(1, component.FindAll(".bit-drp-inp").Count);
+        Assert.AreEqual(component.Find(".bit-drp-lbl").GetAttribute("id"), comboInput.GetAttribute("aria-labelledby"));
+        Assert.IsFalse(component.Find(".bit-drp-wrp").HasAttribute("aria-labelledby"));
     }
 
     // A live region only announces while it is in the accessibility tree, and the callout is hidden
@@ -3741,6 +3857,100 @@ public void BitDropdownNoWrapNavigationShouldReachTheFocusHelper()
         Assert.AreEqual(true, invocations[^1].Arguments[6]);
     }
 
+    [TestMethod]
+    public void BitDropdownSearchBoxShouldReplaceTheTypeAhead()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, GetShortDropdownItems());
+        });
+
+        component.Find(".bit-drp-wrp").Click();
+
+        var callout = component.Find(".bit-drp-cal");
+        callout.KeyDown(new KeyboardEventArgs { Key = "b" });
+
+        // Without a search box a printable key is a type-ahead, which is a move of the focus.
+        var invocations = Context.JSInterop.Invocations["BitBlazorUI.Dropdowns.focusItem"];
+        Assert.AreEqual("char", invocations[^1].Arguments[1]);
+        Assert.AreEqual("b", invocations[^1].Arguments[2]);
+
+        var countBefore = invocations.Count;
+
+        component.Render(parameters =>
+        {
+            parameters.Add(p => p.ShowSearchBox, true);
+            parameters.Add(p => p.Items, GetShortDropdownItems());
+        });
+
+        callout.KeyDown(new KeyboardEventArgs { Key = "b" });
+
+        // With one, the key belongs to the search box - the keydown listener of Dropdowns.ts hands it
+        // back to it - so the component must not move the focus away from the field being typed into.
+        Assert.AreEqual(countBefore, Context.JSInterop.Invocations["BitBlazorUI.Dropdowns.focusItem"].Count);
+    }
+
+    [TestMethod]
+    public void BitDropdownTypingOnTheClosedTriggerShouldGoIntoTheSearchBox()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.ShowSearchBox, true);
+            parameters.Add(p => p.Items, BitDropdownTests.GetShortDropdownItems());
+        });
+
+        var trigger = component.Find(".bit-drp-wrp");
+        trigger.KeyDown(new KeyboardEventArgs { Key = "b" });
+
+        // The key opens the list, and it is the search box that it lands in: the callout leaves every
+        // printable key to that box, so a type-ahead here would spend the character on a focus move and
+        // drop it from the term the next characters go on building.
+        Assert.IsTrue(component.Instance.IsOpen);
+        Assert.AreEqual("b", component.Find(".bit-drp-sin").GetAttribute("value"));
+        Assert.AreEqual(0, Context.JSInterop.Invocations["BitBlazorUI.Dropdowns.focusItem"].Count);
+
+        // The box takes the focus with the caret behind that character, so the browser types the rest of
+        // the term into it natively rather than in front of what is already there.
+        var focus = Context.JSInterop.Invocations["BitBlazorUI.Dropdowns.focusSearchBox"];
+        Assert.AreEqual(1, focus[^1].Arguments[1]);
+
+        trigger.KeyDown(new KeyboardEventArgs { Key = "a" });
+
+        Assert.AreEqual("ba", component.Find(".bit-drp-sin").GetAttribute("value"));
+    }
+
+    [TestMethod]
+    public void BitDropdownOverlayShouldInheritThePublicCssVariablesOfTheStyle()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, BitDropdownTests.GetShortDropdownItems());
+            parameters.Add(p => p.Style, "margin:1rem;--bit-Dropdown-overlay-background:rgba(0,0,0,.4)");
+            parameters.Add(p => p.Styles, new BitDropdownClassStyles { Root = "--bit-Dropdown-accent-color:red", Overlay = "z-index:9" });
+        });
+
+        // The overlay is a sibling of the root and is moved to the body along with the callout, so the
+        // public variables reach it the same way they reach the callout - by hand. Styles.Overlay is
+        // appended last, so a value written for the layer itself still wins.
+        var overlay = component.Find(".bit-drp-ovl").GetAttribute("style");
+
+        Assert.IsNotNull(overlay);
+        StringAssert.Contains(overlay, "--bit-Dropdown-overlay-background:rgba(0,0,0,.4);");
+        StringAssert.Contains(overlay, "--bit-Dropdown-accent-color:red;");
+        StringAssert.Contains(overlay, "z-index:9");
+        Assert.IsTrue(overlay.IndexOf("--bit-Dropdown-accent-color", StringComparison.Ordinal) < overlay.IndexOf("z-index:9", StringComparison.Ordinal));
+
+        // Only the public variables travel, and the layer keeps the display the component toggles it with.
+        Assert.IsFalse(overlay.Contains("margin:1rem", StringComparison.Ordinal));
+        StringAssert.Contains(overlay, "display:none");
+    }
+
     [TestMethod]
     public void BitDropdownMinSearchLengthShouldSayHowManyCharactersAreMissing()
     {
@@ -4253,6 +4463,484 @@ static ValueTask<BitDropdownItemsProviderResult<BitDropdownItem<string>>> provid
         Assert.AreEqual(0, component.FindAll("[role=option]").Count);
     }
 
+    [TestMethod]
+    public void BitDropdownShouldRenderErrorMessageAndMarkItselfInvalid()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, BitDropdownTests.GetShortDropdownItems());
+            parameters.Add(p => p.ErrorMessage, "Pick a fruit.");
+        });
+
+        var error = component.Find(".bit-drp-erm");
+        Assert.AreEqual("Pick a fruit.", error.TextContent.Trim());
+
+        // A message is a rejection, so it gives the dropdown the same look and the same attribute the
+        // EditContext would.
+        Assert.IsTrue(component.Find(".bit-drp").ClassList.Contains("bit-inv"));
+
+        var trigger = component.Find(".bit-drp-wrp");
+        Assert.AreEqual("true", trigger.GetAttribute("aria-invalid"));
+        Assert.AreEqual(error.GetAttribute("id"), trigger.GetAttribute("aria-describedby"));
+
+        // Announced the moment it shows up rather than only on the next focus.
+        Assert.AreEqual("Pick a fruit.", component.Find(".bit-drp-lvr").TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitDropdownInvalidShouldMarkItselfInvalidWithoutAMessage()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, BitDropdownTests.GetShortDropdownItems());
+            parameters.Add(p => p.Invalid, true);
+        });
+
+        Assert.IsTrue(component.Find(".bit-drp").ClassList.Contains("bit-inv"));
+        Assert.AreEqual("true", component.Find(".bit-drp-wrp").GetAttribute("aria-invalid"));
+        Assert.AreEqual(0, component.FindAll(".bit-drp-erm").Count);
+        Assert.IsFalse(component.Find(".bit-drp-wrp").HasAttribute("aria-describedby"));
+    }
+
+    [TestMethod]
+    public void BitDropdownShouldDescribeItselfByEveryDescriptionItCarries()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, BitDropdownTests.GetShortDropdownItems());
+            parameters.Add(p => p.ErrorMessage, "Pick a fruit.");
+            parameters.Add(p => p.Description, "Only what is in season.");
+            parameters.Add(p => p.AriaDescription, "The list is refreshed every morning.");
+        });
+
+        // In reading order: what is wrong with the value, the visible helper text, then the text
+        // written for a screen reader alone.
+        var expected = string.Join(' ',
+            component.Find(".bit-drp-erm").GetAttribute("id"),
+            component.Find(".bit-drp-des").GetAttribute("id"),
+            component.Find(".bit-drp-vhd").GetAttribute("id"));
+
+        Assert.AreEqual(expected, component.Find(".bit-drp-wrp").GetAttribute("aria-describedby"));
+        Assert.AreEqual("The list is refreshed every morning.", component.Find(".bit-drp-vhd").TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitDropdownComboInputShouldCarryTheDescriptionsAndTheInvalidState()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Combo, true);
+            parameters.Add(p => p.Items, BitDropdownTests.GetShortDropdownItems());
+            parameters.Add(p => p.ErrorMessage, "Pick a fruit.");
+            parameters.Add(p => p.AriaDescription, "The list is refreshed every morning.");
+        });
+
+        // The combobox role sits on the input in this mode, so it is the element that has to report
+        // both of them - the field around it is out of the tab order and out of the accessibility tree.
+        var input = component.Find(".bit-drp-inp");
+        var expected = string.Join(' ',
+            component.Find(".bit-drp-erm").GetAttribute("id"),
+            component.Find(".bit-drp-vhd").GetAttribute("id"));
+
+        Assert.AreEqual("true", input.GetAttribute("aria-invalid"));
+        Assert.AreEqual(expected, input.GetAttribute("aria-describedby"));
+    }
+
+    [TestMethod]
+    public void BitDropdownCollapsedTextDisplayShouldStillNameEverySelectedItem()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.MultiSelect, true);
+            parameters.Add(p => p.MaxDisplayedItems, 1);
+            parameters.Add(p => p.Items, BitDropdownTests.GetShortDropdownItems());
+            parameters.Add(p => p.Values, new[] { "f-app", "f-ora" });
+        });
+
+        // What is on the screen is a count of the selection, which is all a screen reader would be told
+        // the field holds; the names are rendered in its place instead.
+        var summary = component.Find(".bit-drp-tdp > [aria-hidden=true]");
+        Assert.AreEqual("2 items selected", summary.TextContent.Trim());
+        Assert.AreEqual("Apple, Orange", summary.GetAttribute("title"));
+        Assert.AreEqual("Apple, Orange", component.Find(".bit-drp-tdp .bit-drp-vhd").TextContent.Trim());
+    }
+
+    [TestMethod]
+    public async Task BitDropdownClearAsyncShouldClearTheWholeSelection()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var cleared = 0;
+        var values = new List<string?> { "f-app", "f-ora" };
+        var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.MultiSelect, true);
+            parameters.Add(p => p.Items, BitDropdownTests.GetShortDropdownItems());
+            parameters.Add(p => p.Values, values);
+            parameters.Add(p => p.ValuesChanged, v => values = v?.ToList() ?? []);
+            parameters.Add(p => p.OnClear, () => cleared++);
+        });
+
+        await component.InvokeAsync(() => component.Instance.ClearAsync());
+
+        Assert.AreEqual(0, values.Count);
+        Assert.AreEqual(1, cleared);
+    }
+
+    [TestMethod]
+    public async Task BitDropdownClearAsyncShouldBeRefusedByAReadOnlyDropdown()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var values = new List<string?> { "f-app" };
+        var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.MultiSelect, true);
+            parameters.Add(p => p.ReadOnly, true);
+            parameters.Add(p => p.Items, BitDropdownTests.GetShortDropdownItems());
+            parameters.Add(p => p.Values, values);
+            parameters.Add(p => p.ValuesChanged, v => values = v?.ToList() ?? []);
+        });
+
+        await component.InvokeAsync(() => component.Instance.ClearAsync());
+
+        Assert.AreEqual(1, values.Count);
+    }
+
+    [TestMethod]
+    public void BitDropdownParamsShouldHaveCorrectParamName()
+    {
+        var paramName = BitDropdownParams<BitDropdownItem<string>, string>.ParamName;
+        var expectedName = $"{nameof(BitParams)}.{nameof(BitDropdown<BitDropdownItem<string>, string>)}";
+
+        Assert.AreEqual(expectedName, paramName);
+    }
+
+    [TestMethod]
+    public void BitDropdownParamsShouldImplementIBitComponentParams()
+    {
+        var @params = new BitDropdownParams<BitDropdownItem<string>, string>();
+
+        Assert.IsInstanceOfType<IBitComponentParams>(@params);
+        Assert.AreEqual(BitDropdownParams<BitDropdownItem<string>, string>.ParamName, @params.Name);
+    }
+
+    [TestMethod]
+    public void BitDropdownShouldApplyCascadingParametersFromBitParams()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var paramsList = new List<IBitComponentParams>
+        {
+            new BitDropdownParams<BitDropdownItem<string>, string>
+            {
+                Color = BitColor.Success,
+                Size = BitSize.Large,
+                NoBorder = true,
+                Underlined = true,
+                Placeholder = "Cascaded placeholder",
+                Title = "Cascaded title"
+            }
+        };
+
+        var component = RenderComponent<BitParams>(parameters =>
+        {
+            parameters.Add(p => p.Parameters, paramsList);
+            parameters.AddChildContent(builder =>
+            {
+                builder.OpenComponent<BitDropdown<BitDropdownItem<string>, string>>(0);
+                builder.AddAttribute(1, nameof(BitDropdown<BitDropdownItem<string>, string>.Items), BitDropdownTests.GetShortDropdownItems());
+                builder.CloseComponent();
+            });
+        });
+
+        var dropdown = component.Find(".bit-drp");
+        var instance = component.FindComponent<BitDropdown<BitDropdownItem<string>, string>>().Instance;
+
+        Assert.IsTrue(dropdown.ClassList.Contains("bit-drp-suc"));
+        Assert.IsTrue(dropdown.ClassList.Contains("bit-drp-lg"));
+        Assert.IsTrue(dropdown.ClassList.Contains("bit-drp-nbd"));
+        Assert.IsTrue(dropdown.ClassList.Contains("bit-drp-und"));
+        Assert.AreEqual("Cascaded placeholder", instance.Placeholder);
+        Assert.AreEqual("Cascaded title", instance.Title);
+    }
+
+    [TestMethod]
+    public void BitDropdownDirectParametersShouldOverrideCascadingParameters()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var paramsList = new List<IBitComponentParams>
+        {
+            new BitDropdownParams<BitDropdownItem<string>, string>
+            {
+                Color = BitColor.Success,
+                Size = BitSize.Large,
+                Placeholder = "Cascaded placeholder",
+                Underlined = true
+            }
+        };
+
+        var component = RenderComponent<BitParams>(parameters =>
+        {
+            parameters.Add(p => p.Parameters, paramsList);
+            parameters.AddChildContent(builder =>
+            {
+                builder.OpenComponent<BitDropdown<BitDropdownItem<string>, string>>(0);
+                builder.AddAttribute(1, nameof(BitDropdown<BitDropdownItem<string>, string>.Items), BitDropdownTests.GetShortDropdownItems());
+                builder.AddAttribute(2, nameof(BitDropdown<BitDropdownItem<string>, string>.Color), BitColor.Error);
+                builder.AddAttribute(3, nameof(BitDropdown<BitDropdownItem<string>, string>.Size), BitSize.Small);
+                builder.AddAttribute(4, nameof(BitDropdown<BitDropdownItem<string>, string>.Placeholder), "Direct placeholder");
+                builder.CloseComponent();
+            });
+        });
+
+        var dropdown = component.Find(".bit-drp");
+        var instance = component.FindComponent<BitDropdown<BitDropdownItem<string>, string>>().Instance;
+
+        // Direct parameters should override cascading ones
+        Assert.IsTrue(dropdown.ClassList.Contains("bit-drp-err"));
+        Assert.IsTrue(dropdown.ClassList.Contains("bit-drp-sm"));
+        Assert.AreEqual("Direct placeholder", instance.Placeholder);
+
+        // Underlined from cascading params should still apply (not overridden)
+        Assert.IsTrue(dropdown.ClassList.Contains("bit-drp-und"));
+    }
+
+    [TestMethod]
+    public void BitDropdownShouldIgnoreCascadingParametersOfOtherTypeArguments()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var paramsList = new List<IBitComponentParams>
+        {
+            new BitDropdownParams<BitDropdownItem<int>, int>
+            {
+                Color = BitColor.Success,
+                Size = BitSize.Large
+            }
+        };
+
+        var component = RenderComponent<BitParams>(parameters =>
+        {
+            parameters.Add(p => p.Parameters, paramsList);
+            parameters.AddChildContent(builder =>
+            {
+                builder.OpenComponent<BitDropdown<BitDropdownItem<string>, string>>(0);
+                builder.AddAttribute(1, nameof(BitDropdown<BitDropdownItem<string>, string>.Items), BitDropdownTests.GetShortDropdownItems());
+                builder.CloseComponent();
+            });
+        });
+
+        var dropdown = component.Find(".bit-drp");
+        var instance = component.FindComponent<BitDropdown<BitDropdownItem<string>, string>>().Instance;
+
+        Assert.IsNull(instance.CascadingParameters);
+        Assert.IsFalse(dropdown.ClassList.Contains("bit-drp-suc"));
+        Assert.IsFalse(dropdown.ClassList.Contains("bit-drp-lg"));
+    }
+
+    [TestMethod]
+    public void BitDropdownShouldMatchTheCascadingParametersOfItsOwnTypeArguments()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var paramsList = new List<IBitComponentParams>
+        {
+            new BitDropdownParams<BitDropdownItem<int>, int> { Color = BitColor.Error },
+            new BitDropdownParams<BitDropdownItem<string>, string> { Color = BitColor.Success }
+        };
+
+        var component = RenderComponent<BitParams>(parameters =>
+        {
+            parameters.Add(p => p.Parameters, paramsList);
+            parameters.AddChildContent(builder =>
+            {
+                builder.OpenComponent<BitDropdown<BitDropdownItem<string>, string>>(0);
+                builder.AddAttribute(1, nameof(BitDropdown<BitDropdownItem<string>, string>.Items), BitDropdownTests.GetShortDropdownItems());
+                builder.CloseComponent();
+            });
+        });
+
+        var dropdown = component.Find(".bit-drp");
+
+        Assert.IsTrue(dropdown.ClassList.Contains("bit-drp-suc"));
+        Assert.IsFalse(dropdown.ClassList.Contains("bit-drp-err"));
+    }
+
+    [TestMethod]
+    public void BitDropdownParamsUpdateParametersShouldSetAllProperties()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var items = BitDropdownTests.GetShortDropdownItems();
+        var @params = new BitDropdownParams<BitDropdownItem<string>, string>
+        {
+            AriaDescription = "Test description",
+            AutoFocus = true,
+            CaretDownIconName = "ChevronDown",
+            Chips = true,
+            CloseOnSelect = false,
+            Color = BitColor.Warning,
+            Combo = true,
+            DebounceTime = 300,
+            Description = "Test description text",
+            DropDirection = BitDropDirection.All,
+            FitWidth = true,
+            IsLoading = true,
+            Items = items,
+            ItemSize = 40,
+            Label = "Test label",
+            MaxHeight = 200,
+            MultiSelect = true,
+            MultiSelectDelimiter = " | ",
+            NoBorder = true,
+            Placeholder = "Test placeholder",
+            Prefix = "Pre",
+            SearchBoxPlaceholder = "Test search",
+            SearchMode = BitDropdownSearchMode.StartsWith,
+            ShowClearButton = true,
+            ShowSearchBox = true,
+            Size = BitSize.Small,
+            Suffix = "Suf",
+            Title = "Test title",
+            Transparent = true,
+            Underlined = true,
+            Virtualize = true,
+            AriaLabel = "Test aria label",
+            IsEnabled = false,
+            TabIndex = "5"
+        };
+
+        var component = RenderComponent<BitParams>(parameters =>
+        {
+            parameters.Add(p => p.Parameters, new List<IBitComponentParams> { @params });
+            parameters.AddChildContent(builder =>
+            {
+                builder.OpenComponent<BitDropdown<BitDropdownItem<string>, string>>(0);
+                builder.CloseComponent();
+            });
+        });
+
+        var instance = component.FindComponent<BitDropdown<BitDropdownItem<string>, string>>().Instance;
+
+        Assert.AreEqual("Test description", instance.AriaDescription);
+        Assert.IsTrue(instance.AutoFocus);
+        Assert.AreEqual("ChevronDown", instance.CaretDownIconName);
+        Assert.IsTrue(instance.Chips);
+        Assert.IsFalse(instance.CloseOnSelect);
+        Assert.AreEqual(BitColor.Warning, instance.Color);
+        Assert.IsTrue(instance.Combo);
+        Assert.AreEqual(300, instance.DebounceTime);
+        Assert.AreEqual("Test description text", instance.Description);
+        Assert.AreEqual(BitDropDirection.All, instance.DropDirection);
+        Assert.IsTrue(instance.FitWidth);
+        Assert.IsTrue(instance.IsLoading);
+        Assert.AreSame(items, instance.Items);
+        Assert.AreEqual(40, instance.ItemSize);
+        Assert.AreEqual("Test label", instance.Label);
+        Assert.AreEqual(200, instance.MaxHeight);
+        Assert.IsTrue(instance.MultiSelect);
+        Assert.AreEqual(" | ", instance.MultiSelectDelimiter);
+        Assert.IsTrue(instance.NoBorder);
+        Assert.AreEqual("Test placeholder", instance.Placeholder);
+        Assert.AreEqual("Pre", instance.Prefix);
+        Assert.AreEqual("Test search", instance.SearchBoxPlaceholder);
+        Assert.AreEqual(BitDropdownSearchMode.StartsWith, instance.SearchMode);
+        Assert.IsTrue(instance.ShowClearButton);
+        Assert.IsTrue(instance.ShowSearchBox);
+        Assert.AreEqual(BitSize.Small, instance.Size);
+        Assert.AreEqual("Suf", instance.Suffix);
+        Assert.AreEqual("Test title", instance.Title);
+        Assert.IsTrue(instance.Transparent);
+        Assert.IsTrue(instance.Underlined);
+        Assert.IsTrue(instance.Virtualize);
+        Assert.AreEqual("Test aria label", instance.AriaLabel);
+        Assert.IsFalse(instance.IsEnabled);
+        Assert.AreEqual("5", instance.TabIndex);
+    }
+
+    [TestMethod]
+    public void BitDropdownParamsUpdateParametersShouldNotOverwriteExistingValues()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var @params = new BitDropdownParams<BitDropdownItem<string>, string>
+        {
+            Color = BitColor.Success,
+            Size = BitSize.Large,
+            Placeholder = "Params placeholder"
+        };
+
+        // First render with direct parameters
+        var component = RenderComponent<BitDropdown<BitDropdownItem<string>, string>>(parameters =>
+        {
+            parameters.Add(p => p.Items, BitDropdownTests.GetShortDropdownItems());
+            parameters.Add(p => p.Color, BitColor.Error);
+            parameters.Add(p => p.Size, BitSize.Small);
+            parameters.Add(p => p.Placeholder, "Existing placeholder");
+        });
+
+        var instance = component.Instance;
+
+        // Verify initial values
+        Assert.AreEqual(BitColor.Error, instance.Color);
+        Assert.AreEqual(BitSize.Small, instance.Size);
+        Assert.AreEqual("Existing placeholder", instance.Placeholder);
+
+        // Now try to update with param, should not overwrite since properties were already set
+        @params.UpdateParameters(instance);
+
+        // Values should remain unchanged because HasNotBeenSet returns false
+        Assert.AreEqual(BitColor.Error, instance.Color);
+        Assert.AreEqual(BitSize.Small, instance.Size);
+        Assert.AreEqual("Existing placeholder", instance.Placeholder);
+    }
+
+    [TestMethod]
+    public void BitDropdownParamsShouldApplyClassesAndStyles()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var classes = new BitDropdownClassStyles { Root = "custom-root" };
+        var styles = new BitDropdownClassStyles { Root = "color: red;" };
+
+        var paramsList = new List<IBitComponentParams>
+        {
+            new BitDropdownParams<BitDropdownItem<string>, string>
+            {
+                Classes = classes,
+                Styles = styles
+            }
+        };
+
+        var component = RenderComponent<BitParams>(parameters =>
+        {
+            parameters.Add(p => p.Parameters, paramsList);
+            parameters.AddChildContent(builder =>
+            {
+                builder.OpenComponent<BitDropdown<BitDropdownItem<string>, string>>(0);
+                builder.AddAttribute(1, nameof(BitDropdown<BitDropdownItem<string>, string>.Items), BitDropdownTests.GetShortDropdownItems());
+                builder.CloseComponent();
+            });
+        });
+
+        var dropdown = component.Find(".bit-drp");
+
+        Assert.IsTrue(dropdown.ClassList.Contains("custom-root"));
+        Assert.IsTrue(dropdown.GetAttribute("style")?.Contains("color: red;"));
+    }
+
     private static List<BitDropdownItem<string>> GetDropdownItemsWithDisabled() => new()
     {
         new() { Text = "Apple", Value = "f-app" },