@typeparam TValue
@*
    Compact multi-select control: a Bootstrap dropdown whose toggle button
    summarises the current selection over a checkbox menu. Replaces a wrapped
    block of chip buttons with a single control of one row's height.
*@
<div class="dropdown msd" data-test="@DataTest">
    <button type="button"
            class="btn btn-sm btn-outline-secondary dropdown-toggle msd-toggle text-start"
            data-bs-toggle="dropdown"
            data-bs-auto-close="outside"
            aria-expanded="false"
            disabled="@(Items.Count == 0)"
            data-test="@($"{DataTest}-toggle")">
        <span class="msd-summary">@Summary()</span>
    </button>
    <ul class="dropdown-menu msd-menu">
        @if (Items.Count == 0)
        {
            <li><span class="dropdown-item-text text-muted small">@EmptyText</span></li>
        }
        else
        {
            @foreach (var item in Items)
            {
                var isSelected = Selected.Contains(item);
                <li>
                    <label class="dropdown-item msd-item">
                        <input type="checkbox"
                               class="form-check-input msd-check"
                               checked="@isSelected"
                               @onchange="() => Toggle(item)"
                               data-test="@($"{DataTest}-opt-{item}")" />
                        <span>@Display(item)</span>
                    </label>
                </li>
            }
        }
    </ul>
</div>