From 57c9f6f6fa388755bc74476c850de5c0116a93b6 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Mon, 4 May 2026 18:45:48 +0330
Subject: [PATCH 1/2] fix positioning issues of callouts #11183

---
 .../Buttons/MenuButton/BitMenuButton.razor    |  275 +--
 .../Buttons/MenuButton/BitMenuButton.razor.cs |    3 +
 .../BitCircularTimePicker.razor               |  218 +--
 .../BitCircularTimePicker.razor.cs            |    3 +
 .../Inputs/DatePicker/BitDatePicker.razor     | 1371 +++++++-------
 .../Inputs/DatePicker/BitDatePicker.razor.cs  |    3 +
 .../DateRangePicker/BitDateRangePicker.razor  | 1595 +++++++++--------
 .../BitDateRangePicker.razor.cs               |    3 +
 .../Inputs/Dropdown/BitDropdown.razor         |  651 +++----
 .../Inputs/Dropdown/BitDropdown.razor.cs      |    3 +
 .../Inputs/SearchBox/BitSearchBox.razor       |   97 +-
 .../Inputs/SearchBox/BitSearchBox.razor.cs    |    3 +
 .../Inputs/TimePicker/BitTimePicker.razor     |  218 +--
 .../Inputs/TimePicker/BitTimePicker.razor.cs  |    3 +
 .../Navs/Breadcrumb/BitBreadcrumb.razor       |  459 ++---
 .../Navs/Breadcrumb/BitBreadcrumb.razor.cs    |    3 +
 .../Navs/DropMenu/BitDropMenu.razor           |  101 +-
 .../Navs/DropMenu/BitDropMenu.razor.cs        |    3 +
 .../Surfaces/Callout/BitCallout.razor         |   19 +-
 .../Surfaces/Callout/BitCallout.razor.cs      |    3 +
 .../JsInterop/CalloutsJsRuntimeExtensions.cs  |    2 +
 src/BlazorUI/Bit.BlazorUI/Scripts/Callouts.ts |   56 +-
 22 files changed, 2603 insertions(+), 2489 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor
index 2501a04127..3e58665974 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor
@@ -1,139 +1,140 @@
-@namespace Bit.BlazorUI
-@inherits BitComponentBase
-@typeparam TItem
+@namespace Bit.BlazorUI
+@inherits BitComponentBase
+@typeparam TItem
+
+<CascadingValue Value="this" IsFixed="true">
+    <div style="display:none" hidden>@(Options ?? ChildContent)</div>
+</CascadingValue>
+
+@{
+    var _selectedItem = Sticky ? SelectedItem : null;
+}
+<div @ref="RootElement" @attributes="HtmlAttributes"
+     id="@_Id"
+     style="@StyleBuilder.Value"
+     class="@ClassBuilder.Value"
+     dir="@Dir?.ToString().ToLower()">
+    <button @onclick="() => HandleOnHeaderClick(_selectedItem)"
+            type="button"
+            tabindex="@(IsEnabled ? 0 : -1)"
+            aria-label="@AriaLabel"
+            aria-hidden="@AriaHidden"
+            aria-describedby="@AriaDescription"
+            style="@GetStyle(_selectedItem);@Styles?.OperatorButton"
+            class="bit-mnb-opb @GetClass(_selectedItem) @Classes?.OperatorButton">
+        @if (Sticky)
+        {
+            var template = GetTemplate(_selectedItem);
+            if (template is not null)
+            {
+                @template(_selectedItem!)
+            }
+            else if (ItemTemplate is not null)
+            {
+                @ItemTemplate(_selectedItem)
+            }
+            else
+            {
+                var icon = GetIcon(_selectedItem);
+                @if (icon is not null)
+                {
+                    <i style="@Styles?.OperatorButtonIcon" class="@icon.GetCssClasses() @Classes?.OperatorButtonIcon" />
+                }
+                <span style="@Styles?.OperatorButtonText" class="bit-mnb-btx @Classes?.OperatorButtonText">
+                    @GetText(_selectedItem)
+                </span>
+            }
+        }
+        else
+        {
+            var headerIcon = BitIconInfo.From(Icon, IconName);
+            @if (HeaderTemplate is not null)
+            {
+                @HeaderTemplate
+            }
+            else
+            {
+                @if (headerIcon is not null)
+                {
+                    <i style="@Styles?.Icon" class="@headerIcon.GetCssClasses() @Classes?.Icon" />
+                }
+
+                @if (Text.HasValue())
+                {
+                    <span style="@Styles?.Text" class="bit-mnb-btx @Classes?.Text">@Text</span>   
+                }
+            }
+        }
+
+        @if (Split is false)
+        {
+            var chevronIcon = BitIconInfo.From(ChevronDownIcon, ChevronDownIconName ?? "ChevronRight bit-ico-r90");
+            <i style="@Styles?.ChevronDown" class="@chevronIcon?.GetCssClasses() @Classes?.ChevronDown" />
+        }
+    </button>
+
+    @if (Split)
+    {
+        <span style="@Styles?.Separator" class="bit-mnb-spb @Classes?.Separator"></span>
+
+        <button @onclick="OpenCallout"
+                type="button"
+                tabindex="@(IsEnabled ? 0 : -1)"
+                style="@Styles?.ChevronDownButton"
+                class="bit-mnb-chb @Classes?.ChevronDownButton">
+            @{
+                var chevronIcon = BitIconInfo.From(ChevronDownIcon, ChevronDownIconName ?? "ChevronRight bit-ico-r90");
+            }
+            <i style="@Styles?.ChevronDown" class="@chevronIcon?.GetCssClasses() @Classes?.ChevronDown" />
+        </button>
+    }
+</div>
 
-<CascadingValue Value="this" IsFixed="true">
-    <div style="display:none" hidden>@(Options ?? ChildContent)</div>
-</CascadingValue>
+<div @onclick="CloseCallout" @onclick:stopPropagation
+     style="display:@(IsOpen ? "block" : "none");@Styles?.Overlay"
+     id="@_overlayId"
+     class="bit-mnb-ovl @Classes?.Overlay"></div>
 
-@{
-    var _selectedItem = Sticky ? SelectedItem : null;
-}
-<div @ref="RootElement" @attributes="HtmlAttributes"
-     id="@_Id"
-     style="@StyleBuilder.Value"
-     class="@ClassBuilder.Value"
-     dir="@Dir?.ToString().ToLower()">
-    <button @onclick="() => HandleOnHeaderClick(_selectedItem)"
-            type="button"
-            tabindex="@(IsEnabled ? 0 : -1)"
-            aria-label="@AriaLabel"
-            aria-hidden="@AriaHidden"
-            aria-describedby="@AriaDescription"
-            style="@GetStyle(_selectedItem);@Styles?.OperatorButton"
-            class="bit-mnb-opb @GetClass(_selectedItem) @Classes?.OperatorButton">
-        @if (Sticky)
-        {
-            var template = GetTemplate(_selectedItem);
-            if (template is not null)
-            {
-                @template(_selectedItem!)
-            }
-            else if (ItemTemplate is not null)
-            {
-                @ItemTemplate(_selectedItem)
-            }
-            else
-            {
-                var icon = GetIcon(_selectedItem);
-                @if (icon is not null)
-                {
-                    <i style="@Styles?.OperatorButtonIcon" class="@icon.GetCssClasses() @Classes?.OperatorButtonIcon" />
-                }
-                <span style="@Styles?.OperatorButtonText" class="bit-mnb-btx @Classes?.OperatorButtonText">
-                    @GetText(_selectedItem)
-                </span>
-            }
-        }
-        else
-        {
-            var headerIcon = BitIconInfo.From(Icon, IconName);
-            @if (HeaderTemplate is not null)
-            {
-                @HeaderTemplate
-            }
-            else
-            {
-                @if (headerIcon is not null)
-                {
-                    <i style="@Styles?.Icon" class="@headerIcon.GetCssClasses() @Classes?.Icon" />
-                }
-
-                @if (Text.HasValue())
-                {
-                    <span style="@Styles?.Text" class="bit-mnb-btx @Classes?.Text">@Text</span>   
-                }
-            }
-        }
-
-        @if (Split is false)
-        {
-            var chevronIcon = BitIconInfo.From(ChevronDownIcon, ChevronDownIconName ?? "ChevronRight bit-ico-r90");
-            <i style="@Styles?.ChevronDown" class="@chevronIcon?.GetCssClasses() @Classes?.ChevronDown" />
-        }
-    </button>
-
-    @if (Split)
-    {
-        <span style="@Styles?.Separator" class="bit-mnb-spb @Classes?.Separator"></span>
-
-        <button @onclick="OpenCallout"
-                type="button"
-                tabindex="@(IsEnabled ? 0 : -1)"
-                style="@Styles?.ChevronDownButton"
-                class="bit-mnb-chb @Classes?.ChevronDownButton">
-            @{
-                var chevronIcon = BitIconInfo.From(ChevronDownIcon, ChevronDownIconName ?? "ChevronRight bit-ico-r90");
-            }
-            <i style="@Styles?.ChevronDown" class="@chevronIcon?.GetCssClasses() @Classes?.ChevronDown" />
-        </button>
-    }
-
-    <div @onclick="CloseCallout" @onclick:stopPropagation
-         style="display:@(IsOpen ? "block" : "none");@Styles?.Overlay"
-         class="bit-mnb-ovl @Classes?.Overlay"></div>
-
-    <div id="@_calloutId"
-         style="@Styles?.Callout"
-         class="bit-mnb-cal @Classes?.Callout">
-        <ul role="presentation" style="@Styles?.CalloutContainer" class="bit-mnb-cul @Classes?.CalloutContainer">
-            @foreach (var (item, idx) in _items.Select((item, idx) => (item, idx)))
-            {
-                if (Sticky && item == SelectedItem) continue;
-
-                var template = GetTemplate(item);
-                var isEnabled = GetIsEnabled(item);
-                <li role="presentation" @key="@GetItemKey(item, idx.ToString())" style="@Styles?.ItemWrapper" class="@Classes?.ItemWrapper">
-                    <button @onclick="() => HandleOnItemClick(item)" @onclick:stopPropagation
-                            role="menuitem"
-                            type="@_buttonType.GetValue()"
-                            tabindex="@(isEnabled ? 0 : -1)"
-                            disabled="@(isEnabled is false)"
-                            aria-disabled="@(isEnabled is false)"
-                            style="@GetStyle(item);@Styles?.ItemButton"
-                            class="bit-mnb-itm @GetClass(item) @Classes?.ItemButton">
-                        @if (template is not null)
-                        {
-                            @template(item)
-                        }
-                        else if (ItemTemplate is not null)
-                        {
-                            @ItemTemplate(item)
-                        }
-                        else
-                        {
-                            var itemIcon = GetIcon(item);
-                            @if (itemIcon is not null)
-                            {
-                                <i style="@Styles?.ItemIcon" class="bit-mnb-iic @itemIcon.GetCssClasses() @Classes?.ItemIcon" />
-                            }
-                            <span style="@Styles?.ItemText" class="bit-mnb-btx @Classes?.ItemText">
-                                @GetText(item)
-                            </span>
-                        }
-                    </button>
-                </li>
-            }
-        </ul>
-    </div>
-</div>
\ No newline at end of file
+<div id="@_calloutId"
+     style="@Styles?.Callout"
+     class="bit-mnb-cal @Classes?.Callout">
+    <ul role="presentation" style="@Styles?.CalloutContainer" class="bit-mnb-cul @Classes?.CalloutContainer">
+        @foreach (var (item, idx) in _items.Select((item, idx) => (item, idx)))
+        {
+            if (Sticky && item == SelectedItem) continue;
+
+            var template = GetTemplate(item);
+            var isEnabled = GetIsEnabled(item);
+            <li role="presentation" @key="@GetItemKey(item, idx.ToString())" style="@Styles?.ItemWrapper" class="@Classes?.ItemWrapper">
+                <button @onclick="() => HandleOnItemClick(item)" @onclick:stopPropagation
+                        role="menuitem"
+                        type="@_buttonType.GetValue()"
+                        tabindex="@(isEnabled ? 0 : -1)"
+                        disabled="@(isEnabled is false)"
+                        aria-disabled="@(isEnabled is false)"
+                        style="@GetStyle(item);@Styles?.ItemButton"
+                        class="bit-mnb-itm @GetClass(item) @Classes?.ItemButton">
+                    @if (template is not null)
+                    {
+                        @template(item)
+                    }
+                    else if (ItemTemplate is not null)
+                    {
+                        @ItemTemplate(item)
+                    }
+                    else
+                    {
+                        var itemIcon = GetIcon(item);
+                        @if (itemIcon is not null)
+                        {
+                            <i style="@Styles?.ItemIcon" class="bit-mnb-iic @itemIcon.GetCssClasses() @Classes?.ItemIcon" />
+                        }
+                        <span style="@Styles?.ItemText" class="bit-mnb-btx @Classes?.ItemText">
+                            @GetText(item)
+                        </span>
+                    }
+                </button>
+            </li>
+        }
+    </ul>
+</div>
\ No newline at end of file
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs
index 2fa2ffbaa2..603afd16ee 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs
@@ -10,6 +10,7 @@ public partial class BitMenuButton<TItem> : BitComponentBase where TItem : class
     private List<TItem> _items = [];
     private BitButtonType _buttonType;
     private string _calloutId = default!;
+    private string _overlayId = default!;
     private IEnumerable<TItem> _oldItems = default!;
     private DotNetObjectReference<BitMenuButton<TItem>> _dotnetObj = default!;
 
@@ -271,6 +272,7 @@ protected override void RegisterCssStyles()
     protected override async Task OnInitializedAsync()
     {
         _calloutId = $"BitMenuButton-{UniqueId}-callout";
+        _overlayId = $"BitMenuButton-{UniqueId}-overlay";
 
         if (Sticky && SelectedItemHasBeenSet is false && DefaultSelectedItem is not null)
         {
@@ -617,6 +619,7 @@ await _js.BitCalloutToggleCallout(
             component: null,
             calloutId: _calloutId,
             callout: null,
+            overlayId: _overlayId,
             isCalloutOpen: IsOpen,
             responsiveMode: BitResponsiveMode.None,
             dropDirection: BitDropDirection.TopAndBottom,
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.razor
index f8496d2132..40c2f732e3 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.razor
@@ -58,10 +58,6 @@
                 }
             </div>
         </div>
-
-        <div @onclick="CloseCallout"
-             style="display:@(IsOpen ? "block" : "none"); @Styles?.Overlay"
-             class="bit-ctp-ovl @Classes?.Overlay"></div>
     }
     else
     {
@@ -76,125 +72,133 @@
                readonly="@(AllowTextInput is false || ReadOnly)" />
     }
 
-    <div id="@_calloutId"
-         style="@Styles?.Callout"
-         class="@GetCalloutCssClasses()">
-        <div @attributes=@CalloutHtmlAttributes 
-             role="dialog" 
-             aria-label="@CalloutAriaLabel"
-             style="@Styles?.CalloutContainer" 
-             class="bit-ctp-cac @Classes?.CalloutContainer" >
-            <div style="@Styles?.Toolbar" 
-                 class="bit-ctp-tbr @Classes?.Toolbar">
-                <div style="@Styles?.HourMinuteContainer" 
-                     class="bit-ctp-hmc @Classes?.HourMinuteContainer">
-                    @if (EditMode == BitCircularTimePickerEditMode.Normal)
-                    {
-                        <button @onclick="HandleOnHourClick"
-                                type="button"
-                                style="@GetHourButtonStyle()"
-                                disabled="@(IsEnabled is false)"
-                                class="bit-ctp-txt @(_showHourView ? Classes?.SelectedButtons : "bit-ctp-ina") @Classes?.HourButton">
-                            @GetHourString()
-                        </button>
-                        <span style="@Styles?.HourMinuteSeparator" 
-                              class="bit-ctp-txt @Classes?.HourMinuteSeparator">:</span>
-                        <button @onclick="HandleOnMinuteClick"
-                                type="button"
-                                style="@GetMinuteButtonStyle()"
-                                disabled="@(IsEnabled is false)"
-                                class="bit-ctp-txt @(_showHourView ? "bit-ctp-ina" : Classes?.SelectedButtons) @Classes?.MinuteButton">
-                            @GetMinuteString()
-                        </button>
-                    }
-                    else
-                    {
-                        <span style="@Styles?.HourMinuteText" class="bit-ctp-txt @Classes?.HourMinuteText">@GetHourString():@GetMinuteString()</span>
-                    }
-                </div>
-                @if (TimeFormat == BitTimeFormat.TwelveHours)
+</div>
+
+@if (Standalone is false)
+{
+    <div @onclick="CloseCallout"
+         style="display:@(IsOpen ? "block" : "none"); @Styles?.Overlay"
+         id="@_overlayId"
+     class="bit-ctp-ovl @Classes?.Overlay"></div>
+}
+
+<div id="@_calloutId"
+     style="@Styles?.Callout"
+     class="@GetCalloutCssClasses()">
+    <div @attributes=@CalloutHtmlAttributes 
+         role="dialog" 
+         aria-label="@CalloutAriaLabel"
+         style="@Styles?.CalloutContainer" 
+         class="bit-ctp-cac @Classes?.CalloutContainer" >
+        <div style="@Styles?.Toolbar" 
+             class="bit-ctp-tbr @Classes?.Toolbar">
+            <div style="@Styles?.HourMinuteContainer" 
+                 class="bit-ctp-hmc @Classes?.HourMinuteContainer">
+                @if (EditMode == BitCircularTimePickerEditMode.Normal)
                 {
-                    var isAm = IsAm();
-                    <div style="@Styles?.AmPmContainer" class="bit-ctp-apc @Classes?.AmPmContainer">
-                        <button @onclick="HandleOnAmClick"
-                                type="button"
-                                style="@GetAmButtonStyle(isAm)"
-                                disabled="@(IsEnabled is false)"
-                                class="bit-ctp-apb @(isAm ? Classes?.SelectedButtons : "bit-ctp-ina") @Classes?.AmButton">
-                            @_culture.DateTimeFormat.AMDesignator
-                        </button>
-                        <button @onclick="HandleOnPmClick"
-                                type="button"
-                                style="@GetPmButtonStyle(isAm)"
-                                disabled="@(IsEnabled is false)"
-                                class="bit-ctp-apb @(isAm ? "bit-ctp-ina" : Classes?.SelectedButtons) @Classes?.PmButton">
-                            @_culture.DateTimeFormat.PMDesignator
-                        </button>
-                    </div>
+                    <button @onclick="HandleOnHourClick"
+                            type="button"
+                            style="@GetHourButtonStyle()"
+                            disabled="@(IsEnabled is false)"
+                            class="bit-ctp-txt @(_showHourView ? Classes?.SelectedButtons : "bit-ctp-ina") @Classes?.HourButton">
+                        @GetHourString()
+                    </button>
+                    <span style="@Styles?.HourMinuteSeparator" 
+                          class="bit-ctp-txt @Classes?.HourMinuteSeparator">:</span>
+                    <button @onclick="HandleOnMinuteClick"
+                            type="button"
+                            style="@GetMinuteButtonStyle()"
+                            disabled="@(IsEnabled is false)"
+                            class="bit-ctp-txt @(_showHourView ? "bit-ctp-ina" : Classes?.SelectedButtons) @Classes?.MinuteButton">
+                        @GetMinuteString()
+                    </button>
+                }
+                else
+                {
+                    <span style="@Styles?.HourMinuteText" class="bit-ctp-txt @Classes?.HourMinuteText">@GetHourString():@GetMinuteString()</span>
                 }
             </div>
-            <div style="@Styles?.ClockContainer" class="bit-ctp-clk @Classes?.ClockContainer">
-                <div @ref="_clockRef" style="@Styles?.ClockFace" class="bit-ctp-clf @Classes?.ClockFace" @onpointerdown="HandleOnPointerDown">
-                    <div style="@Styles?.ClockPin" class="bit-ctp-pin @Classes?.ClockPin"></div>
+            @if (TimeFormat == BitTimeFormat.TwelveHours)
+            {
+                var isAm = IsAm();
+                <div style="@Styles?.AmPmContainer" class="bit-ctp-apc @Classes?.AmPmContainer">
+                    <button @onclick="HandleOnAmClick"
+                            type="button"
+                            style="@GetAmButtonStyle(isAm)"
+                            disabled="@(IsEnabled is false)"
+                            class="bit-ctp-apb @(isAm ? Classes?.SelectedButtons : "bit-ctp-ina") @Classes?.AmButton">
+                        @_culture.DateTimeFormat.AMDesignator
+                    </button>
+                    <button @onclick="HandleOnPmClick"
+                            type="button"
+                            style="@GetPmButtonStyle(isAm)"
+                            disabled="@(IsEnabled is false)"
+                            class="bit-ctp-apb @(isAm ? "bit-ctp-ina" : Classes?.SelectedButtons) @Classes?.PmButton">
+                        @_culture.DateTimeFormat.PMDesignator
+                    </button>
+                </div>
+            }
+        </div>
+        <div style="@Styles?.ClockContainer" class="bit-ctp-clk @Classes?.ClockContainer">
+            <div @ref="_clockRef" style="@Styles?.ClockFace" class="bit-ctp-clf @Classes?.ClockFace" @onpointerdown="HandleOnPointerDown">
+                <div style="@Styles?.ClockPin" class="bit-ctp-pin @Classes?.ClockPin"></div>
 
-                    @if (_showHourView)
+                @if (_showHourView)
+                {
+                    if (TimeFormat == BitTimeFormat.TwelveHours)
                     {
-                        if (TimeFormat == BitTimeFormat.TwelveHours)
+                        for (int i = 1; i <= 12; i++)
                         {
-                            for (int i = 1; i <= 12; i++)
-                            {
-                                <p style="@GetHoursMinutesStyle(i, i, 109, 0, 5)" class="bit-ctp-num @GetHoursMinutesClass(i)">@i</p>
-                            }
-                        }
-                        else
-                        {
-                            @*Hours from 13 to 24 (00)*@
-                            for (int i = 1; i <= 12; i++)
-                            {
-                                var hour = (i + 12) % 24;
-                                <p style="@GetHoursMinutesStyle(hour, i, 109, 0, 5)" class="bit-ctp-num @GetHoursMinutesClass(hour)">@(hour.ToString("D2"))</p>
-                            }
-                            @*Hours from 1 to 12*@
-                            for (int i = 1; i <= 12; i++)
-                            {
-                                <p style="@GetHoursMinutesStyle(i, i, 74, 0, 40)" class="bit-ctp-num @GetHoursMinutesClass(i)">@(i.ToString("D2"))</p>
-                            }
+                            <p style="@GetHoursMinutesStyle(i, i, 109, 0, 5)" class="bit-ctp-num @GetHoursMinutesClass(i)">@i</p>
                         }
                     }
                     else
                     {
-                        @for (int i = 0; i < 12; i++)
+                        @*Hours from 13 to 24 (00)*@
+                        for (int i = 1; i <= 12; i++)
                         {
-                            var minute = i * 5;
-                            <p style="@GetHoursMinutesStyle(minute, i, 109, 0, 5)" class="bit-ctp-num @GetHoursMinutesClass(minute)">@(minute.ToString("D2"))</p>
+                            var hour = (i + 12) % 24;
+                            <p style="@GetHoursMinutesStyle(hour, i, 109, 0, 5)" class="bit-ctp-num @GetHoursMinutesClass(hour)">@(hour.ToString("D2"))</p>
+                        }
+                        @*Hours from 1 to 12*@
+                        for (int i = 1; i <= 12; i++)
+                        {
+                            <p style="@GetHoursMinutesStyle(i, i, 74, 0, 40)" class="bit-ctp-num @GetHoursMinutesClass(i)">@(i.ToString("D2"))</p>
                         }
                     }
-
-                    @{
-                        var deg = GetPointerDegree();
-                        var isMinute = deg % 30 == 0;
+                }
+                else
+                {
+                    @for (int i = 0; i < 12; i++)
+                    {
+                        var minute = i * 5;
+                        <p style="@GetHoursMinutesStyle(minute, i, 109, 0, 5)" class="bit-ctp-num @GetHoursMinutesClass(minute)">@(minute.ToString("D2"))</p>
                     }
-                    <div style="height: @(GetClockHandHeightPercent())%; transform: rotateZ(@(deg)deg); @Classes?.ClockPointer"
-                         class="bit-ctp-ptr@(_isPointerDown ? "" : " bit-ctp-ani") @Classes?.ClockPointer">
-                        <div style="@GetClockPointerThumbStyle(isMinute)"
-                             class="bit-ctp-pth@(isMinute ? "" : $" bit-ctp-ptm {Classes?.ClockPointerThumbMinute}") @Classes?.ClockPointerThumb"></div>
-                    </div>
+                }
+
+                @{
+                    var deg = GetPointerDegree();
+                    var isMinute = deg % 30 == 0;
+                }
+                <div style="height: @(GetClockHandHeightPercent())%; transform: rotateZ(@(deg)deg); @Classes?.ClockPointer"
+                     class="bit-ctp-ptr@(_isPointerDown ? "" : " bit-ctp-ani") @Classes?.ClockPointer">
+                    <div style="@GetClockPointerThumbStyle(isMinute)"
+                         class="bit-ctp-pth@(isMinute ? "" : $" bit-ctp-ptm {Classes?.ClockPointerThumbMinute}") @Classes?.ClockPointerThumb"></div>
                 </div>
             </div>
-
-            @if (ShowCloseButton && Standalone is false)
-            {
-                var closeButtonIcon = BitIconInfo.From(CloseButtonIcon, CloseButtonIconName ?? "Cancel");
-                <button @onclick="CloseCallout"
-                        type="button"
-                        style="@Styles?.CloseButton"
-                        class="bit-ctp-cbn @Classes?.CloseButton"
-                        title="@CloseButtonTitle"
-                        aria-label="@CloseButtonTitle">
-                    <i style="@Styles?.CloseButtonIcon" class="bit-ctp-cbi @closeButtonIcon?.GetCssClasses() @Classes?.CloseButtonIcon" aria-hidden="true" />
-                </button>
-            }
         </div>
-    </div>
 
+        @if (ShowCloseButton && Standalone is false)
+        {
+            var closeButtonIcon = BitIconInfo.From(CloseButtonIcon, CloseButtonIconName ?? "Cancel");
+            <button @onclick="CloseCallout"
+                    type="button"
+                    style="@Styles?.CloseButton"
+                    class="bit-ctp-cbn @Classes?.CloseButton"
+                    title="@CloseButtonTitle"
+                    aria-label="@CloseButtonTitle">
+                <i style="@Styles?.CloseButtonIcon" class="bit-ctp-cbi @closeButtonIcon?.GetCssClasses() @Classes?.CloseButtonIcon" aria-hidden="true" />
+            </button>
+        }
+    </div>
 </div>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.razor.cs
index 34fd5b04ff..38422c4e6a 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.razor.cs
@@ -19,6 +19,7 @@ public partial class BitCircularTimePicker : BitInputBase<TimeSpan?>
     private ElementReference _clockRef;
     private string? _abortControllerId;
     private string _calloutId = string.Empty;
+    private string _overlayId = string.Empty;
     private string _circularTimePickerId = string.Empty;
     private CultureInfo _culture = CultureInfo.CurrentUICulture;
     private DotNetObjectReference<BitCircularTimePicker> _dotnetObj = default!;
@@ -332,6 +333,7 @@ protected override void OnInitialized()
         _labelId = $"{_circularTimePickerId}-label";
         _inputId = $"{_circularTimePickerId}-input";
         _calloutId = $"{_circularTimePickerId}-callout";
+        _overlayId = $"{_circularTimePickerId}-overlay";
 
         _hour = CurrentValue?.Hours;
         _minute = CurrentValue?.Minutes;
@@ -590,6 +592,7 @@ await _js.BitCalloutToggleCallout(
             component: null,
             calloutId: _calloutId,
             callout: null,
+            overlayId: _overlayId,
             isCalloutOpen: IsOpen,
             responsiveMode: Responsive ? BitResponsiveMode.Top : BitResponsiveMode.None,
             dropDirection: BitDropDirection.TopAndBottom,
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor
index d40520f0a8..2353f4a3ce 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor
@@ -1,686 +1,691 @@
-@namespace Bit.BlazorUI
-@inherits BitInputBase<DateTimeOffset?>
+@namespace Bit.BlazorUI
+@inherits BitInputBase<DateTimeOffset?>
+
+@{
+    var iconCss = BitIconInfo.From(Icon, IconName ?? "CalendarMirrored")?.GetCssClasses();
+    var clearBtnIconCss = BitIconInfo.From(ClearButtonIcon, ClearButtonIconName ?? "Cancel")?.GetCssClasses();
+    var closeButtonIconCss = BitIconInfo.From(CloseButtonIcon, CloseButtonIconName ?? "Cancel")?.GetCssClasses();
+    var prevMonthNavIconCss = BitIconInfo.From(PrevMonthNavIcon, PrevMonthNavIconName ?? "Up")?.GetCssClasses();
+    var nextMonthNavIconCss = BitIconInfo.From(NextMonthNavIcon, NextMonthNavIconName ?? "Up bit-ico-r180")?.GetCssClasses();
+    var goToTodayIconCss = BitIconInfo.From(GoToTodayIcon, GoToTodayIconName ?? "GotoToday")?.GetCssClasses();
+    var showTimePickerIconCss = BitIconInfo.From(ShowTimePickerIcon, ShowTimePickerIconName ?? "Clock")?.GetCssClasses();
+    var prevYearNavIconCss = BitIconInfo.From(PrevYearNavIcon, PrevYearNavIconName ?? "Up")?.GetCssClasses();
+    var nextYearNavIconCss = BitIconInfo.From(NextYearNavIcon, NextYearNavIconName ?? "Up bit-ico-r180")?.GetCssClasses();
+    var prevYearRangeNavIconCss = BitIconInfo.From(PrevYearRangeNavIcon, PrevYearRangeNavIconName ?? "Up")?.GetCssClasses();
+    var nextYearRangeNavIconCss = BitIconInfo.From(NextYearRangeNavIcon, NextYearRangeNavIconName ?? "Up bit-ico-r180")?.GetCssClasses();
+    var goToNowIconCss = BitIconInfo.From(GoToNowIcon, GoToNowIconName ?? "Clock")?.GetCssClasses();
+    var hideTimePickerIconCss = BitIconInfo.From(HideTimePickerIcon, HideTimePickerIconName ?? "CalendarMirrored")?.GetCssClasses();
+    var increaseHourIconCss = BitIconInfo.From(TimePickerIncreaseHourIcon, TimePickerIncreaseHourIconName ?? "ChevronDownSmall bit-ico-r180")?.GetCssClasses();
+    var decreaseHourIconCss = BitIconInfo.From(TimePickerDecreaseHourIcon, TimePickerDecreaseHourIconName ?? "ChevronDownSmall")?.GetCssClasses();
+    var increaseMinuteIconCss = BitIconInfo.From(TimePickerIncreaseMinuteIcon, TimePickerIncreaseMinuteIconName ?? "ChevronDownSmall bit-ico-r180")?.GetCssClasses();
+    var decreaseMinuteIconCss = BitIconInfo.From(TimePickerDecreaseMinuteIcon, TimePickerDecreaseMinuteIconName ?? "ChevronDownSmall")?.GetCssClasses();
+}
+
+<div @ref="RootElement" @attributes="HtmlAttributes"
+     id="@_Id"
+     style="@StyleBuilder.Value"
+     class="@ClassBuilder.Value"
+     dir="@Dir?.ToString().ToLower()">
+
+    @if (LabelTemplate is not null)
+    {
+        <label id="@_labelId" for="@_inputId">
+            @LabelTemplate
+        </label>
+    }
+    else if (Label.HasValue())
+    {
+        <label style="@Styles?.Label" class="bit-dtp-lbl @Classes?.Label" id="@_labelId" for="@_inputId">
+            @Label
+        </label>
+    }
+
+    @if (Standalone is false)
+    {
+        <div style="@Styles?.InputWrapper" class="bit-dtp-wrp @Classes?.InputWrapper" id="@_datePickerId" aria-owns="@(IsOpen ? _calloutId : null)" @onclick="HandleOnClick">
+            <div style="@Styles?.InputContainer" class="bit-dtp-icn @Classes?.InputContainer">
+                <input @ref="InputElement" @attributes="InputHtmlAttributes"
+                       @onfocus="@HandleOnFocus"
+                       @oninput="@HandleOnChange"
+                       @onfocusin="@HandleOnFocusIn"
+                       @onfocusout="@HandleOnFocusOut"
+                       type="text"
+                       name="@Name"
+                       id="@_inputId"
+                       role="combobox"
+                       tabindex="@TabIndex"
+                       required="@Required"
+                       aria-haspopup="dialog"
+                       aria-label="@AriaLabel"
+                       placeholder="@Placeholder"
+                       value="@CurrentValueAsString"
+                       disabled=@(IsEnabled is false)
+                       readonly=@(AllowTextInput is false || ReadOnly)
+                       aria-expanded="@(IsOpen ? "true" : "false")"
+                       aria-controls="@(IsOpen ? _calloutId : null)"
+                       aria-labelledby="@((LabelTemplate is not null || Label.HasValue()) ? _labelId : null)"
+                       style="@Styles?.Input"
+                       class="bit-dtp-inp@(AllowTextInput ? " bit-dtp-ein" : null) @Classes?.Input" />
+
+                @if (IsEnabled && ShowClearButton && CurrentValue.HasValue)
+                {
+                    <button @onclick="HandleOnClearButtonClick" @onclick:stopPropagation
+                            style="@Styles?.ClearButton"
+                            class="bit-dtp-clr @Classes?.ClearButton"
+                            type="button"
+                            aria-hidden="true"
+                            aria-label="Clear date"
+                            disabled="@(CurrentValue.HasValue is false)">
+                        <i aria-hidden="true"
+                           style="@Styles?.ClearButtonIcon"
+                           class="bit-dtp-cic @clearBtnIconCss @Classes?.ClearButtonIcon" />
+                    </button>
+                }
+
+                @if (IconTemplate is not null)
+                {
+                    @IconTemplate
+                }
+                else
+                {
+                    <i aria-hidden="true"
+                       style="@Styles?.Icon"
+                       class="bit-dtp-ico @iconCss @Classes?.Icon" />
+                }
+            </div>
+        </div>
+    }
+    else
+    {
+        <input @ref="InputElement" @attributes="InputHtmlAttributes"
+               type="text"
+               name="@Name"
+               id="@_inputId"
+               aria-label="@AriaLabel"
+               class="bit-input-hidden"
+               value="@CurrentValueAsString"
+               disabled="@(IsEnabled is false)"
+               readonly="@(AllowTextInput is false || ReadOnly)" />
+    }
+
+</div>
 
-@{
-    var iconCss = BitIconInfo.From(Icon, IconName ?? "CalendarMirrored")?.GetCssClasses();
-    var clearBtnIconCss = BitIconInfo.From(ClearButtonIcon, ClearButtonIconName ?? "Cancel")?.GetCssClasses();
-    var closeButtonIconCss = BitIconInfo.From(CloseButtonIcon, CloseButtonIconName ?? "Cancel")?.GetCssClasses();
-    var prevMonthNavIconCss = BitIconInfo.From(PrevMonthNavIcon, PrevMonthNavIconName ?? "Up")?.GetCssClasses();
-    var nextMonthNavIconCss = BitIconInfo.From(NextMonthNavIcon, NextMonthNavIconName ?? "Up bit-ico-r180")?.GetCssClasses();
-    var goToTodayIconCss = BitIconInfo.From(GoToTodayIcon, GoToTodayIconName ?? "GotoToday")?.GetCssClasses();
-    var showTimePickerIconCss = BitIconInfo.From(ShowTimePickerIcon, ShowTimePickerIconName ?? "Clock")?.GetCssClasses();
-    var prevYearNavIconCss = BitIconInfo.From(PrevYearNavIcon, PrevYearNavIconName ?? "Up")?.GetCssClasses();
-    var nextYearNavIconCss = BitIconInfo.From(NextYearNavIcon, NextYearNavIconName ?? "Up bit-ico-r180")?.GetCssClasses();
-    var prevYearRangeNavIconCss = BitIconInfo.From(PrevYearRangeNavIcon, PrevYearRangeNavIconName ?? "Up")?.GetCssClasses();
-    var nextYearRangeNavIconCss = BitIconInfo.From(NextYearRangeNavIcon, NextYearRangeNavIconName ?? "Up bit-ico-r180")?.GetCssClasses();
-    var goToNowIconCss = BitIconInfo.From(GoToNowIcon, GoToNowIconName ?? "Clock")?.GetCssClasses();
-    var hideTimePickerIconCss = BitIconInfo.From(HideTimePickerIcon, HideTimePickerIconName ?? "CalendarMirrored")?.GetCssClasses();
-    var increaseHourIconCss = BitIconInfo.From(TimePickerIncreaseHourIcon, TimePickerIncreaseHourIconName ?? "ChevronDownSmall bit-ico-r180")?.GetCssClasses();
-    var decreaseHourIconCss = BitIconInfo.From(TimePickerDecreaseHourIcon, TimePickerDecreaseHourIconName ?? "ChevronDownSmall")?.GetCssClasses();
-    var increaseMinuteIconCss = BitIconInfo.From(TimePickerIncreaseMinuteIcon, TimePickerIncreaseMinuteIconName ?? "ChevronDownSmall bit-ico-r180")?.GetCssClasses();
-    var decreaseMinuteIconCss = BitIconInfo.From(TimePickerDecreaseMinuteIcon, TimePickerDecreaseMinuteIconName ?? "ChevronDownSmall")?.GetCssClasses();
+@if (Standalone is false)
+{
+    <div @onclick="CloseCallout"
+         style="display:@(IsOpen ? "block;" : "none;") @Styles?.Overlay"
+         id="@_overlayId"
+     class="bit-dtp-ovl @Classes?.Overlay"></div>
 }
 
-<div @ref="RootElement" @attributes="HtmlAttributes"
-     id="@_Id"
-     style="@StyleBuilder.Value"
-     class="@ClassBuilder.Value"
-     dir="@Dir?.ToString().ToLower()">
-
-    @if (LabelTemplate is not null)
-    {
-        <label id="@_labelId" for="@_inputId">
-            @LabelTemplate
-        </label>
-    }
-    else if (Label.HasValue())
-    {
-        <label style="@Styles?.Label" class="bit-dtp-lbl @Classes?.Label" id="@_labelId" for="@_inputId">
-            @Label
-        </label>
-    }
-
-    @if (Standalone is false)
-    {
-        <div style="@Styles?.InputWrapper" class="bit-dtp-wrp @Classes?.InputWrapper" id="@_datePickerId" aria-owns="@(IsOpen ? _calloutId : null)" @onclick="HandleOnClick">
-            <div style="@Styles?.InputContainer" class="bit-dtp-icn @Classes?.InputContainer">
-                <input @ref="InputElement" @attributes="InputHtmlAttributes"
-                       @onfocus="@HandleOnFocus"
-                       @oninput="@HandleOnChange"
-                       @onfocusin="@HandleOnFocusIn"
-                       @onfocusout="@HandleOnFocusOut"
-                       type="text"
-                       name="@Name"
-                       id="@_inputId"
-                       role="combobox"
-                       tabindex="@TabIndex"
-                       required="@Required"
-                       aria-haspopup="dialog"
-                       aria-label="@AriaLabel"
-                       placeholder="@Placeholder"
-                       value="@CurrentValueAsString"
-                       disabled=@(IsEnabled is false)
-                       readonly=@(AllowTextInput is false || ReadOnly)
-                       aria-expanded="@(IsOpen ? "true" : "false")"
-                       aria-controls="@(IsOpen ? _calloutId : null)"
-                       aria-labelledby="@((LabelTemplate is not null || Label.HasValue()) ? _labelId : null)"
-                       style="@Styles?.Input"
-                       class="bit-dtp-inp@(AllowTextInput ? " bit-dtp-ein" : null) @Classes?.Input" />
-
-                @if (IsEnabled && ShowClearButton && CurrentValue.HasValue)
-                {
-                    <button @onclick="HandleOnClearButtonClick" @onclick:stopPropagation
-                            style="@Styles?.ClearButton"
-                            class="bit-dtp-clr @Classes?.ClearButton"
-                            type="button"
-                            aria-hidden="true"
-                            aria-label="Clear date"
-                            disabled="@(CurrentValue.HasValue is false)">
-                        <i aria-hidden="true"
-                           style="@Styles?.ClearButtonIcon"
-                           class="bit-dtp-cic @clearBtnIconCss @Classes?.ClearButtonIcon" />
-                    </button>
-                }
-
-                @if (IconTemplate is not null)
-                {
-                    @IconTemplate
-                }
-                else
-                {
-                    <i aria-hidden="true"
-                       style="@Styles?.Icon"
-                       class="bit-dtp-ico @iconCss @Classes?.Icon" />
-                }
-            </div>
-        </div>
-
-        <div @onclick="CloseCallout"
-             style="display:@(IsOpen ? "block;" : "none;") @Styles?.Overlay"
-             class="bit-dtp-ovl @Classes?.Overlay"></div>
-    }
-    else
-    {
-        <input @ref="InputElement" @attributes="InputHtmlAttributes"
-               type="text"
-               name="@Name"
-               id="@_inputId"
-               aria-label="@AriaLabel"
-               class="bit-input-hidden"
-               value="@CurrentValueAsString"
-               disabled="@(IsEnabled is false)"
-               readonly="@(AllowTextInput is false || ReadOnly)" />
-    }
-
-    <div id="@_calloutId"
-         style="@Styles?.Callout"
-         class="@GetCalloutCssClasses()">
-        <div style="@Styles?.CalloutContainer" class="bit-dtp-cac @Classes?.CalloutContainer" role="dialog" @attributes=@CalloutHtmlAttributes aria-label="@CalloutAriaLabel">
-            <div style="@Styles?.Group" class="bit-dtp-grp @Classes?.Group" role="group" aria-label="">
-                <div class="bit-dtp-sdt" aria-live="polite" aria-atomic="true">
-                    @(string.Format(SelectedDateAriaAtomic, CurrentValueAsString))
-                </div>
-
-                @{
-                    var todayYear = _culture.Calendar.GetYear(DateTime.Now);
-                    var todayMonth = _culture.Calendar.GetMonth(DateTime.Now);
-                    var todayDay = _culture.Calendar.GetDayOfMonth(DateTime.Now);
-                    var showTimePicker = ShowTimePicker && ((_showTimePickerAsOverlayInternal && _isTimePickerOverlayOnTop) || _showTimePickerAsOverlayInternal is false);
-                }
-
-                @if (ShowDayPicker())
-                {
-                    <div style="@Styles?.DayPickerWrapper" class="bit-dtp-dwp @Classes?.DayPickerWrapper">
-                        <div style="@Styles?.DayPickerHeader" class="bit-dtp-pkh @Classes?.DayPickerHeader">
-                            @if (_showMonthPickerAsOverlayInternal || (ShowTimePicker && ShowTimePickerAsOverlay is false))
-                            {
-                                var title = string.Format(MonthPickerToggleTitle, _monthTitle);
-                                <button @onclick="@ToggleMonthPickerOverlay"
-                                        tabindex="0"
-                                        type="button"
-                                        title="@title"
-                                        aria-live="polite"
-                                        aria-atomic="true"
-                                        aria-label="@title"
-                                        style="@Styles?.DayPickerMonth"
-                                        disabled="@(IsEnabled is false)"
-                                        aria-disabled="@(IsEnabled is false)"
-                                        class="bit-dtp-ptb @Classes?.DayPickerMonth">
-                                    @_monthTitle
-                                </button>
-                            }
-                            else
-                            {
-                                <div style="@Styles?.DayPickerMonth"
-                                     class="bit-dtp-pkt @Classes?.DayPickerMonth"
-                                     aria-live="polite"
-                                     aria-atomic="true"
-                                     tabindex="-1">
-                                    @_monthTitle
-                                </div>
-                            }
-                            @{
-                                var prevDisabled = IsEnabled is false || CanChangeMonth(false) is false;
-                                var nextDisabled = IsEnabled is false || CanChangeMonth(true) is false;
-                            }
-                            <div style="@Styles?.DayPickerNavWrapper" class="bit-dtp-nbc @Classes?.DayPickerNavWrapper">
-                                <button @onclick="() => HandleMonthChange(false)"
-                                        type="button"
-                                        style="@Styles?.PrevMonthNavButton"
-                                        class="bit-dtp-nbt @Classes?.PrevMonthNavButton"
-                                        title="@GoToPrevMonthTitle"
-                                        disabled="@prevDisabled"
-                                        aria-disabled="@prevDisabled">
-                                    <i aria-hidden="true"
-                                       style="@Styles?.PrevMonthNavIcon"
-                                       class="bit-dtp-cic @prevMonthNavIconCss @Classes?.PrevMonthNavIcon" />
-                                </button>
-                                @if (ShowGoToToday && (_showMonthPickerAsOverlayInternal || (ShowTimePicker && _showTimePickerAsOverlayInternal is false)))
-                                {
-                                    var goToTodayDisabled = IsGoToTodayButtonDisabled(todayYear, todayMonth);
-
-                                    <button @onclick="HandleGoToToday"
-                                            type="button"
-                                            style="@Styles?.GoToTodayButton"
-                                            class="bit-dtp-gtb @Classes?.GoToTodayButton"
-                                            title="@GoToTodayTitle"
-                                            disabled="@goToTodayDisabled"
-                                            aria-disabled="@goToTodayDisabled">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.GoToTodayIcon"
-                                           class="bit-dtp-cic @goToTodayIconCss @Classes?.GoToTodayIcon" />
-                                    </button>
-                                }
-                                <button @onclick="() => HandleMonthChange(true)"
-                                        type="button"
-                                        style="@Styles?.NextMonthNavButton"
-                                        class="bit-dtp-nbt @Classes?.NextMonthNavButton"
-                                        title="@GoToNextMonthTitle"
-                                        disabled="@nextDisabled"
-                                        aria-disabled="@nextDisabled">
-                                    <i aria-hidden="true"
-                                       style="@Styles?.NextMonthNavIcon"
-                                       class="bit-dtp-cic @nextMonthNavIconCss @Classes?.NextMonthNavIcon" />
-                                </button>
-                                @if (ShowCloseButton && Standalone is false)
-                                {
-                                    <button @onclick="CloseCallout"
-                                            type="button"
-                                            style="@Styles?.CloseButton"
-                                            class="bit-dtp-nbt @Classes?.CloseButton"
-                                            title="@CloseDatePickerTitle"
-                                            aria-label="@CloseDatePickerTitle">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.CloseButtonIcon"
-                                           class="bit-dtp-cic @closeButtonIconCss @Classes?.CloseButtonIcon" />
-                                    </button>
-                                }
-                                @if (_showMonthPickerAsOverlayInternal && _showTimePickerAsOverlayInternal && ShowTimePicker)
-                                {
-                                    <button @onclick="@ToggleTimePickerOverlay"
-                                            tabindex="0"
-                                            type="button"
-                                            aria-live="polite"
-                                            aria-atomic="true"
-                                            title="@ShowTimePickerTitle"
-                                            disabled="@(IsEnabled is false)"
-                                            aria-label="@ShowTimePickerTitle"
-                                            aria-disabled="@(IsEnabled is false)"
-                                            style="@Styles?.ShowTimePickerButton"
-                                            class="bit-dtp-nbt @Classes?.ShowTimePickerButton">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.ShowTimePickerIcon"
-                                           class="bit-dtp-cic @showTimePickerIconCss @Classes?.ShowTimePickerIcon" />
-                                    </button>
-                                }
-                            </div>
-                        </div>
-
-                        <div style="@Styles?.DaysHeaderRow" class="bit-dtp-dgh @Classes?.DaysHeaderRow">
-                            @if (ShowWeekNumbers)
-                            {
-                                <div style="@Styles?.WeekNumbersHeader" class="bit-dtp-wlb @Classes?.WeekNumbersHeader"></div>
-                            }
-
-                            @for (var index = 0; index < 7; index++)
-                            {
-                                var dayOfWeekName = _culture.DateTimeFormat.GetShortestDayName(GetDayOfWeek(index));
-                                <div scope="col"
-                                     title="@dayOfWeekName"
-                                     style="@Styles?.WeekNumbersHeader"
-                                     class="bit-dtp-wlb @Classes?.WeekNumbersHeader">
-                                    @dayOfWeekName[0]
-                                </div>
-                            }
-                        </div>
-
-                        @for (var week = 0; week < 6; week++)
-                        {
-                            //to ignore the last empty week out of month || to ignore the first whole week out of month
-                            if (_daysOfCurrentMonth[week, 0].HasValue is false) continue;
-
-                            <div style="@Styles?.DaysRow" class="bit-dtp-dgr @Classes?.DaysRow">
-                                @if (ShowWeekNumbers)
-                                {
-                                    var weekNumber = GetWeekNumber(week);
-                                    var title = string.Format(WeekNumberTitle, weekNumber);
-                                    <div style="@Styles?.WeekNumber"
-                                         scope="row"
-                                         title="@title"
-                                         aria-label="@title"
-                                         class="bit-dtp-wnm @Classes?.WeekNumber">
-                                        @weekNumber
-                                    </div>
-                                }
-
-                                @for (var day = 0; day < 7; day++)
-                                {
-                                    var date = _daysOfCurrentMonth[week, day]!.Value;
-                                    var disabled = IsEnabled is false || IsWeekDayOutOfMinAndMaxDate(date);
-                                    var isSelected = IsSelectedDate(date);
-                                    var (style, klass) = GetDayButtonCss(date);
-                                    <button @onclick="() => SelectDate(date)"
-                                            type="button"
-                                            role="gridcell"
-                                            aria-readonly="true"
-                                            disabled="@disabled"
-                                            aria-disabled="@disabled"
-                                            style="@style @Styles?.DayButton"
-                                            class="bit-dtp-dbt@(klass) @Classes?.DayButton"
-                                            tabindex="@(isSelected ? 0 : -1)"
-                                            aria-selected="@(isSelected ? "true" : "false")">
-                                        @if (DayCellTemplate is not null)
-                                        {
-                                            @DayCellTemplate(GetDateTimeOfDayCell(date))
-                                        }
-                                        else
-                                        {
-                                            @GetDayOfCurrentMonth(date)
-                                        }
-                                    </button>
-                                }
-                            </div>
-                        }
-                    </div>
-                }
-
-                @if (ShowMonthPicker())
-                {
-                    @if (_showMonthPickerAsOverlayInternal is false)
-                    {
-                        <div style="@Styles?.Divider" class="bit-dtp-dvd @Classes?.Divider"></div>
-                    }
-
-                    <div style="@Styles?.YearMonthPickerWrapper" class="bit-dtp-mwp @Classes?.YearMonthPickerWrapper">
-                        @if (_showMonthPicker)
-                        {
-                            var prevDisabled = IsEnabled is false || CanChangeYear(false) is false;
-                            var nextDisabled = IsEnabled is false || CanChangeYear(true) is false;
-                            var toggleTitle = string.Format(YearPickerToggleTitle, _currentYear);
-                            var prevTitle = string.Format(GoToPrevYearTitle, _currentYear - 1);
-                            var nextTitle = string.Format(GoToNextYearTitle, _currentYear + 1);
-                            <div style="@Styles?.MonthPickerHeader" class="bit-dtp-pkh @Classes?.MonthPickerHeader">
-                                <button @onclick="ToggleBetweenMonthAndYearPicker"
-                                        tabindex="0"
-                                        type="button"
-                                        aria-atomic="true"
-                                        aria-live="polite"
-                                        title="@toggleTitle"
-                                        aria-label="@toggleTitle"
-                                        disabled="@(IsEnabled is false)"
-                                        aria-disabled="@(IsEnabled is false)"
-                                        style="@Styles?.YearPickerToggleButton"
-                                        class="bit-dtp-ptb @Classes?.YearPickerToggleButton">
-                                    @_currentYear
-                                </button>
-                                <div style="@Styles?.MonthPickerNavWrapper" class="bit-dtp-nbc @Classes?.MonthPickerNavWrapper">
-                                    <button @onclick="() => HandleYearChange(false)"
-                                            type="button"
-                                            title="@prevTitle"
-                                            aria-label="@prevTitle"
-                                            disabled="@prevDisabled"
-                                            aria-disabled="@prevDisabled"
-                                            style="@Styles?.PrevYearNavButton"
-                                            class="bit-dtp-nbt @Classes?.PrevYearNavButton">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.PrevYearNavIcon"
-                                           class="bit-dtp-cic @prevYearNavIconCss @Classes?.PrevYearNavIcon" />
-                                    </button>
-                                    @if (ShowGoToToday)
-                                    {
-                                        var goToTodayDisabled = IsGoToTodayButtonDisabled(todayYear, todayMonth);
-
-                                        <button @onclick="HandleGoToToday"
-                                                type="button"
-                                                title="@GoToTodayTitle"
-                                                aria-label="@GoToTodayTitle"
-                                                disabled="@goToTodayDisabled"
-                                                style="@Styles?.GoToTodayButton"
-                                                aria-disabled="@goToTodayDisabled"
-                                                class="bit-dtp-gtb @Classes?.GoToTodayButton">
-                                            <i aria-hidden="true"
-                                               style="@Styles?.GoToTodayIcon"
-                                               class="bit-dtp-cic @goToTodayIconCss @Classes?.GoToTodayIcon" />
-                                        </button>
-                                    }
-                                    <button @onclick="() => HandleYearChange(true)"
-                                            type="button"
-                                            title="@nextTitle"
-                                            aria-label="@nextTitle"
-                                            disabled="@nextDisabled"
-                                            aria-disabled="@nextDisabled"
-                                            style="@Styles?.NextYearNavButton"
-                                            class="bit-dtp-nbt @Classes?.NextYearNavButton">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.NextYearNavIcon"
-                                           class="bit-dtp-cic @nextYearNavIconCss @Classes?.NextYearNavIcon" />
-                                    </button>
-                                    @if (_showTimePickerAsOverlayInternal && ShowTimePicker)
-                                    {
-                                        <button @onclick="@ToggleTimePickerOverlay"
-                                                tabindex="0"
-                                                type="button"
-                                                aria-live="polite"
-                                                aria-atomic="true"
-                                                title="@ShowTimePickerTitle"
-                                                disabled="@(IsEnabled is false)"
-                                                aria-label="@ShowTimePickerTitle"
-                                                aria-disabled="@(IsEnabled is false)"
-                                                style="@Styles?.ShowTimePickerButton"
-                                                class="bit-dtp-nbt @Classes?.ShowTimePickerButton">
-                                            <i aria-hidden="true"
-                                               style="@Styles?.ShowTimePickerIcon"
-                                               class="bit-dtp-cic @showTimePickerIconCss @Classes?.ShowTimePickerIcon" />
-                                        </button>
-                                    }
-                                </div>
-                            </div>
-                            <div style="@Styles?.MonthsContainer" class="bit-dtp-pkc @Classes?.MonthsContainer" role="grid" aria-label="@_currentYear">
-                                @for (var rowIndex = 0; rowIndex <= 2; rowIndex++)
-                                {
-                                    <div style="@Styles?.MonthsRow" class="bit-dtp-pkr @Classes?.MonthsRow" role="row">
-                                        @for (var cellIndex = 1; cellIndex <= 4; cellIndex++)
-                                        {
-                                            var month = (rowIndex * 4) + cellIndex;
-                                            var monthName = _culture.DateTimeFormat.GetMonthName(month);
-                                            var disabled = IsEnabled is false || IsMonthOutOfMinAndMaxDate(month);
-                                            var selected = month == _currentMonth;
-                                            <button @onclick="async () => await SelectMonth(month)"
-                                                    type="button"
-                                                    role="gridcell"
-                                                    title="@monthName"
-                                                    aria-readonly="true"
-                                                    aria-label="@monthName"
-                                                    disabled="@disabled"
-                                                    aria-disabled="@disabled"
-                                                    tabindex="@(selected ? 0 : -1)"
-                                                    aria-selected="@(selected ? "true" : "false")"
-                                                    style="@Styles?.MonthButton"
-                                                    class="bit-dtp-pkb@(GetMonthCellCssClass(month, todayYear, todayMonth)) @Classes?.MonthButton">
-                                                @if (MonthCellTemplate is not null)
-                                                {
-                                                    @MonthCellTemplate(GetDateTimeOfMonthCell(month))
-                                                }
-                                                else
-                                                {
-                                                    @_culture.DateTimeFormat.GetAbbreviatedMonthName(month)
-                                                }
-                                            </button>
-                                        }
-                                    </div>
-                                }
-                            </div>
-                        }
-                        else
-                        {
-                            var prevDisabled = CanChangeYearRange(false) is false;
-                            var nextDisabled = CanChangeYearRange(true) is false;
-                            var toggleTitle = string.Format(YearRangePickerToggleTitle, _yearPickerStartYear, _yearPickerEndYear);
-                            var prevTitle = string.Format(GoToPrevYearRangeTitle, _yearPickerStartYear - 12, _yearPickerStartYear - 1);
-                            var nextTitle = string.Format(GoToNextYearRangeTitle, _yearPickerStartYear + 12, _yearPickerEndYear + 12);
-                            <div style="@Styles?.YearPickerHeader" class="bit-dtp-pkh @Classes?.YearPickerHeader">
-                                <button @onclick="ToggleBetweenMonthAndYearPicker"
-                                        type="button"
-                                        aria-atomic="true"
-                                        aria-live="polite"
-                                        title="@toggleTitle"
-                                        aria-label="@toggleTitle"
-                                        disabled="@(IsEnabled is false)"
-                                        aria-disabled="@(IsEnabled is false)"
-                                        style="@Styles?.MonthPickerToggleButton"
-                                        class="bit-dtp-ptb @Classes?.MonthPickerToggleButton">
-                                    @_yearPickerStartYear - @_yearPickerEndYear
-                                </button>
-                                <div style="@Styles?.YearPickerNavWrapper" class="bit-dtp-nbc @Classes?.YearPickerNavWrapper">
-                                    <button @onclick="() => HandleYearRangeChange(false)"
-                                            type="button"
-                                            title="@prevTitle"
-                                            aria-label="@prevTitle"
-                                            disabled="@prevDisabled"
-                                            aria-disabled="@prevDisabled"
-                                            style="@Styles?.PrevYearRangeNavButton"
-                                            class="bit-dtp-nbt @Classes?.PrevYearRangeNavButton">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.PrevYearRangeNavIcon"
-                                           class="bit-dtp-cic @prevYearRangeNavIconCss @Classes?.PrevYearRangeNavIcon" />
-                                    </button>
-                                    @if (ShowGoToToday)
-                                    {
-                                        var goToTodayDisabled = IsGoToTodayButtonDisabled(todayYear, todayMonth, true);
-
-                                        <button @onclick="HandleGoToToday"
-                                                type="button"
-                                                title="@GoToTodayTitle"
-                                                aria-label="@GoToTodayTitle"
-                                                disabled="@goToTodayDisabled"
-                                                aria-disabled="@goToTodayDisabled"
-                                                style="@Styles?.GoToTodayButton"
-                                                class="bit-dtp-gtb @Classes?.GoToTodayButton">
-                                            <i aria-hidden="true"
-                                               style="@Styles?.GoToTodayIcon"
-                                               class="bit-dtp-cic @goToTodayIconCss @Classes?.GoToTodayIcon" />
-                                        </button>
-                                    }
-                                    <button @onclick="() => HandleYearRangeChange(true)"
-                                            type="button"
-                                            title="@nextTitle"
-                                            aria-label="@nextTitle"
-                                            disabled="@nextDisabled"
-                                            aria-disabled="@nextDisabled"
-                                            style="@Styles?.NextYearRangeNavButton"
-                                            class="bit-dtp-nbt @Classes?.NextYearRangeNavButton">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.NextYearRangeNavIcon"
-                                           class="bit-dtp-cic @nextYearRangeNavIconCss @Classes?.NextYearRangeNavIcon" />
-                                    </button>
-                                </div>
-                            </div>
-                            <div style="@Styles?.YearsContainer" class="bit-dtp-pkc @Classes?.YearsContainer" role="grid" aria-label="@_yearPickerStartYear - @_yearPickerEndYear">
-                                @for (var rowIndex = 0; rowIndex <= 2; rowIndex++)
-                                {
-                                    <div style="@Styles?.YearsRow" class="bit-dtp-pkr @Classes?.YearsRow" role="row">
-                                        @for (var cellIndex = 0; cellIndex <= 3; cellIndex++)
-                                        {
-                                            var year = _yearPickerStartYear + (rowIndex * 4) + cellIndex;
-                                            var disabled = IsEnabled is false || IsYearOutOfMinAndMaxDate(year);
-                                            var selected = year == _currentYear;
-                                            <button @onclick="() => SelectYear(year)"
-                                                    type="button"
-                                                    role="gridcell"
-                                                    disabled="@disabled"
-                                                    tabindex="@(selected ? 0 : -1)"
-                                                    aria-readonly="true"
-                                                    aria-disabled="@disabled"
-                                                    aria-selected="@(selected ? "true" : "false")"
-                                                    style="@Styles?.YearButton"
-                                                    class="bit-dtp-pkb @Classes?.YearButton">
-                                                @if (YearCellTemplate is not null)
-                                                {
-                                                    @YearCellTemplate(year)
-                                                }
-                                                else
-                                                {
-                                                    @year
-                                                }
-                                            </button>
-                                        }
-                                    </div>
-                                }
-                            </div>
-                        }
-                    </div>
-                }
-
-                @if (showTimePicker)
-                {
-                    @if (_showTimePickerAsOverlayInternal is false || _showMonthPickerAsOverlayInternal is false)
-                    {
-                        <div style="@Styles?.Divider" class="bit-dtp-dvd @Classes?.Divider"></div>
-                    }
-
-                    <div style="@Styles?.TimePickerWrapper" class="bit-dtp-twp @Classes?.TimePickerWrapper">
-                        <div style="@Styles?.TimePickerHeader" class="bit-dtp-pkh bit-dtp-tph @Classes?.TimePickerHeader">
-                            <div style="@Styles?.TimePickerNavWrapper" class="bit-dtp-nbc @Classes?.TimePickerNavWrapper">
-                                @if (ShowGoToNow)
-                                {
-                                    <button @onclick="HandleGoToNow"
-                                            type="button"
-                                            title="@GoToNowTitle"
-                                            aria-label="@GoToNowTitle"
-                                            style="@Styles?.GoToNowButton"
-                                            disabled="@(IsEnabled is false)"
-                                            aria-disabled="@(IsEnabled is false)"
-                                            class="bit-dtp-gtn @Classes?.GoToNowButton">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.GoToNowIcon"
-                                           class="bit-dtp-cic @goToNowIconCss @Classes?.GoToNowIcon" />
-                                    </button>
-                                }
-                                @if (_isTimePickerOverlayOnTop)
-                                {
-                                    <button @onclick="ToggleTimePickerOverlay"
-                                            type="button"
-                                            title="@HideTimePickerTitle"
-                                            disabled="@(IsEnabled is false)"
-                                            aria-disabled="@(IsEnabled is false)"
-                                            style="@Styles?.HideTimePickerButton"
-                                            class="bit-dtp-nbt @Classes?.HideTimePickerButton">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.HideTimePickerIcon"
-                                           class="bit-dtp-cic @hideTimePickerIconCss @Classes?.HideTimePickerIcon" />
-                                    </button>
-                                }
-                            </div>
-                        </div>
-                        <div style="@Styles?.TimeInputContainer" class="bit-dtp-tic @Classes?.TimeInputContainer">
-                            <div style="@Styles?.HourInputContainer" class="bit-dtp-tpr @Classes?.HourInputContainer">
-                                <button @onpointerup="HandleOnPointerUpOrOut"
-                                        @onpointerout="HandleOnPointerUpOrOut"
-                                        @onpointerdown="() => HandleOnPointerDown(true, true)"
-                                        type="button"
-                                        disabled="@(IsEnabled is false)"
-                                        aria-disabled="@(IsEnabled is false)"
-                                        style="@Styles?.TimePickerIncreaseHourButton"
-                                        class="bit-dtp-tbt @Classes?.TimePickerIncreaseHourButton">
-                                    <i aria-hidden="true"
-                                       style="@Styles?.TimePickerIncreaseHourIcon"
-                                       class="bit-dtp-cic @increaseHourIconCss @Classes?.TimePickerIncreaseHourIcon" />
-                                </button>
-                                <input @ref="_inputTimeHourRef"
-                                       @bind="@_hourView"
-                                       @bind:event="oninput"
-                                       @onfocus="HandleOnTimeHourFocus"
-                                       min="0"
-                                       max="@(TimeFormat == BitTimeFormat.TwelveHours ? "12" : "23")"
-                                       type="number"
-                                       inputmode="numeric"
-                                       readonly="@ReadOnly"
-                                       disabled="@(IsEnabled is false)"
-                                       aria-disabled="@(IsEnabled is false)"
-                                       style="@Styles?.TimePickerHourInput"
-                                       class="bit-dtp-tin @Classes?.TimePickerHourInput"
-                                       autocomplete="@BitAutoCompleteValue.NewPassword" />
-                                <button @onpointerup="HandleOnPointerUpOrOut"
-                                        @onpointerout="HandleOnPointerUpOrOut"
-                                        @onpointerdown="() => HandleOnPointerDown(false, true)"
-                                        type="button"
-                                        disabled="@(IsEnabled is false)"
-                                        aria-disabled="@(IsEnabled is false)"
-                                        style="@Styles?.TimePickerDecreaseHourButton"
-                                        class="bit-dtp-tbt @Classes?.TimePickerDecreaseHourButton">
-                                    <i aria-hidden="true"
-                                       style="@Styles?.TimePickerDecreaseHourIcon"
-                                       class="bit-dtp-cic @decreaseHourIconCss @Classes?.TimePickerDecreaseHourIcon" />
-                                </button>
-                            </div>
-                            <div style="@Styles?.TimePickerHourMinuteSeparator" class="bit-dtp-tpr bit-dtp-tdv @Classes?.TimePickerHourMinuteSeparator">:</div>
-                            <div style="@Styles?.MinuteInputContainer" class="bit-dtp-tpr @Classes?.MinuteInputContainer">
-                                <button @onpointerup="HandleOnPointerUpOrOut"
-                                        @onpointerout="HandleOnPointerUpOrOut"
-                                        @onpointerdown="() => HandleOnPointerDown(true, false)"
-                                        type="button"
-                                        disabled="@(IsEnabled is false)"
-                                        aria-disabled="@(IsEnabled is false)"
-                                        style="@Styles?.TimePickerIncreaseMinuteButton"
-                                        class="bit-dtp-tbt @Classes?.TimePickerIncreaseMinuteButton">
-                                    <i aria-hidden="true"
-                                       style="@Styles?.TimePickerIncreaseMinuteIcon"
-                                       class="bit-dtp-cic @increaseMinuteIconCss @Classes?.TimePickerIncreaseMinuteIcon" />
-                                </button>
-                                <input @ref="_inputTimeMinuteRef"
-                                       @bind="@_minuteView"
-                                       @bind:event="oninput"
-                                       @onfocus="HandleOnTimeMinuteFocus"
-                                       min="0"
-                                       max="59"
-                                       type="number"
-                                       inputmode="numeric"
-                                       readonly="@ReadOnly"
-                                       disabled="@(IsEnabled is false)"
-                                       aria-disabled="@(IsEnabled is false)"
-                                       style="@Styles?.TimePickerMinuteInput"
-                                       class="bit-dtp-tin @Classes?.TimePickerMinuteInput"
-                                       autocomplete="@BitAutoCompleteValue.NewPassword" />
-                                <button @onpointerup="HandleOnPointerUpOrOut"
-                                        @onpointerout="HandleOnPointerUpOrOut"
-                                        @onpointerdown="() => HandleOnPointerDown(false, false)"
-                                        type="button"
-                                        disabled="@(IsEnabled is false)"
-                                        aria-disabled="@(IsEnabled is false)"
-                                        style="@Styles?.TimePickerDecreaseMinuteButton"
-                                        class="bit-dtp-tbt @Classes?.TimePickerDecreaseMinuteButton">
-                                    <i aria-hidden="true"
-                                       style="@Styles?.TimePickerDecreaseMinuteIcon"
-                                       class="bit-dtp-cic @decreaseMinuteIconCss @Classes?.TimePickerDecreaseMinuteIcon" />
-                                </button>
-                            </div>
-
-                            @if (TimeFormat == BitTimeFormat.TwelveHours)
-                            {
-                                <div style="@Styles?.TimePickerAmPmContainer" class="bit-dtp-tpr bit-dtp-am-pm @Classes?.TimePickerAmPmContainer">
-                                    <button @onclick="HandleOnAmClick"
-                                            type="button"
-                                            disabled="@(IsEnabled is false)"
-                                            aria-disabled="@(IsEnabled is false)"
-                                            style="@Styles?.TimePickerAmButton"
-                                            class="bit-dtp-tbt bit-dtp-bam @(IsAm() is true ? "bit-dtp-bns" : string.Empty) @Classes?.TimePickerAmButton">
-                                        @_culture.DateTimeFormat.AMDesignator
-                                    </button>
-
-                                    <button @onclick="HandleOnPmClick"
-                                            type="button"
-                                            disabled="@(IsEnabled is false)"
-                                            aria-disabled="@(IsEnabled is false)"
-                                            style="@Styles?.TimePickerPmButton"
-                                            class="bit-dtp-tbt bit-dtp-bpm @(IsAm() is false ? "bit-dtp-bns" : string.Empty) @Classes?.TimePickerPmButton">
-                                        @_culture.DateTimeFormat.PMDesignator
-                                    </button>
-                                </div>
-                            }
-                        </div>
-                    </div>
-                }
-            </div>
-        </div>
-    </div>
-</div>
\ No newline at end of file
+<div id="@_calloutId"
+     style="@Styles?.Callout"
+     class="@GetCalloutCssClasses()">
+    <div style="@Styles?.CalloutContainer" class="bit-dtp-cac @Classes?.CalloutContainer" role="dialog" @attributes=@CalloutHtmlAttributes aria-label="@CalloutAriaLabel">
+        <div style="@Styles?.Group" class="bit-dtp-grp @Classes?.Group" role="group" aria-label="">
+            <div class="bit-dtp-sdt" aria-live="polite" aria-atomic="true">
+                @(string.Format(SelectedDateAriaAtomic, CurrentValueAsString))
+            </div>
+
+            @{
+                var todayYear = _culture.Calendar.GetYear(DateTime.Now);
+                var todayMonth = _culture.Calendar.GetMonth(DateTime.Now);
+                var todayDay = _culture.Calendar.GetDayOfMonth(DateTime.Now);
+                var showTimePicker = ShowTimePicker && ((_showTimePickerAsOverlayInternal && _isTimePickerOverlayOnTop) || _showTimePickerAsOverlayInternal is false);
+            }
+
+            @if (ShowDayPicker())
+            {
+                <div style="@Styles?.DayPickerWrapper" class="bit-dtp-dwp @Classes?.DayPickerWrapper">
+                    <div style="@Styles?.DayPickerHeader" class="bit-dtp-pkh @Classes?.DayPickerHeader">
+                        @if (_showMonthPickerAsOverlayInternal || (ShowTimePicker && ShowTimePickerAsOverlay is false))
+                        {
+                            var title = string.Format(MonthPickerToggleTitle, _monthTitle);
+                            <button @onclick="@ToggleMonthPickerOverlay"
+                                    tabindex="0"
+                                    type="button"
+                                    title="@title"
+                                    aria-live="polite"
+                                    aria-atomic="true"
+                                    aria-label="@title"
+                                    style="@Styles?.DayPickerMonth"
+                                    disabled="@(IsEnabled is false)"
+                                    aria-disabled="@(IsEnabled is false)"
+                                    class="bit-dtp-ptb @Classes?.DayPickerMonth">
+                                @_monthTitle
+                            </button>
+                        }
+                        else
+                        {
+                            <div style="@Styles?.DayPickerMonth"
+                                 class="bit-dtp-pkt @Classes?.DayPickerMonth"
+                                 aria-live="polite"
+                                 aria-atomic="true"
+                                 tabindex="-1">
+                                @_monthTitle
+                            </div>
+                        }
+                        @{
+                            var prevDisabled = IsEnabled is false || CanChangeMonth(false) is false;
+                            var nextDisabled = IsEnabled is false || CanChangeMonth(true) is false;
+                        }
+                        <div style="@Styles?.DayPickerNavWrapper" class="bit-dtp-nbc @Classes?.DayPickerNavWrapper">
+                            <button @onclick="() => HandleMonthChange(false)"
+                                    type="button"
+                                    style="@Styles?.PrevMonthNavButton"
+                                    class="bit-dtp-nbt @Classes?.PrevMonthNavButton"
+                                    title="@GoToPrevMonthTitle"
+                                    disabled="@prevDisabled"
+                                    aria-disabled="@prevDisabled">
+                                <i aria-hidden="true"
+                                   style="@Styles?.PrevMonthNavIcon"
+                                   class="bit-dtp-cic @prevMonthNavIconCss @Classes?.PrevMonthNavIcon" />
+                            </button>
+                            @if (ShowGoToToday && (_showMonthPickerAsOverlayInternal || (ShowTimePicker && _showTimePickerAsOverlayInternal is false)))
+                            {
+                                var goToTodayDisabled = IsGoToTodayButtonDisabled(todayYear, todayMonth);
+
+                                <button @onclick="HandleGoToToday"
+                                        type="button"
+                                        style="@Styles?.GoToTodayButton"
+                                        class="bit-dtp-gtb @Classes?.GoToTodayButton"
+                                        title="@GoToTodayTitle"
+                                        disabled="@goToTodayDisabled"
+                                        aria-disabled="@goToTodayDisabled">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.GoToTodayIcon"
+                                       class="bit-dtp-cic @goToTodayIconCss @Classes?.GoToTodayIcon" />
+                                </button>
+                            }
+                            <button @onclick="() => HandleMonthChange(true)"
+                                    type="button"
+                                    style="@Styles?.NextMonthNavButton"
+                                    class="bit-dtp-nbt @Classes?.NextMonthNavButton"
+                                    title="@GoToNextMonthTitle"
+                                    disabled="@nextDisabled"
+                                    aria-disabled="@nextDisabled">
+                                <i aria-hidden="true"
+                                   style="@Styles?.NextMonthNavIcon"
+                                   class="bit-dtp-cic @nextMonthNavIconCss @Classes?.NextMonthNavIcon" />
+                            </button>
+                            @if (ShowCloseButton && Standalone is false)
+                            {
+                                <button @onclick="CloseCallout"
+                                        type="button"
+                                        style="@Styles?.CloseButton"
+                                        class="bit-dtp-nbt @Classes?.CloseButton"
+                                        title="@CloseDatePickerTitle"
+                                        aria-label="@CloseDatePickerTitle">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.CloseButtonIcon"
+                                       class="bit-dtp-cic @closeButtonIconCss @Classes?.CloseButtonIcon" />
+                                </button>
+                            }
+                            @if (_showMonthPickerAsOverlayInternal && _showTimePickerAsOverlayInternal && ShowTimePicker)
+                            {
+                                <button @onclick="@ToggleTimePickerOverlay"
+                                        tabindex="0"
+                                        type="button"
+                                        aria-live="polite"
+                                        aria-atomic="true"
+                                        title="@ShowTimePickerTitle"
+                                        disabled="@(IsEnabled is false)"
+                                        aria-label="@ShowTimePickerTitle"
+                                        aria-disabled="@(IsEnabled is false)"
+                                        style="@Styles?.ShowTimePickerButton"
+                                        class="bit-dtp-nbt @Classes?.ShowTimePickerButton">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.ShowTimePickerIcon"
+                                       class="bit-dtp-cic @showTimePickerIconCss @Classes?.ShowTimePickerIcon" />
+                                </button>
+                            }
+                        </div>
+                    </div>
+
+                    <div style="@Styles?.DaysHeaderRow" class="bit-dtp-dgh @Classes?.DaysHeaderRow">
+                        @if (ShowWeekNumbers)
+                        {
+                            <div style="@Styles?.WeekNumbersHeader" class="bit-dtp-wlb @Classes?.WeekNumbersHeader"></div>
+                        }
+
+                        @for (var index = 0; index < 7; index++)
+                        {
+                            var dayOfWeekName = _culture.DateTimeFormat.GetShortestDayName(GetDayOfWeek(index));
+                            <div scope="col"
+                                 title="@dayOfWeekName"
+                                 style="@Styles?.WeekNumbersHeader"
+                                 class="bit-dtp-wlb @Classes?.WeekNumbersHeader">
+                                @dayOfWeekName[0]
+                            </div>
+                        }
+                    </div>
+
+                    @for (var week = 0; week < 6; week++)
+                    {
+                        //to ignore the last empty week out of month || to ignore the first whole week out of month
+                        if (_daysOfCurrentMonth[week, 0].HasValue is false) continue;
+
+                        <div style="@Styles?.DaysRow" class="bit-dtp-dgr @Classes?.DaysRow">
+                            @if (ShowWeekNumbers)
+                            {
+                                var weekNumber = GetWeekNumber(week);
+                                var title = string.Format(WeekNumberTitle, weekNumber);
+                                <div style="@Styles?.WeekNumber"
+                                     scope="row"
+                                     title="@title"
+                                     aria-label="@title"
+                                     class="bit-dtp-wnm @Classes?.WeekNumber">
+                                    @weekNumber
+                                </div>
+                            }
+
+                            @for (var day = 0; day < 7; day++)
+                            {
+                                var date = _daysOfCurrentMonth[week, day]!.Value;
+                                var disabled = IsEnabled is false || IsWeekDayOutOfMinAndMaxDate(date);
+                                var isSelected = IsSelectedDate(date);
+                                var (style, klass) = GetDayButtonCss(date);
+                                <button @onclick="() => SelectDate(date)"
+                                        type="button"
+                                        role="gridcell"
+                                        aria-readonly="true"
+                                        disabled="@disabled"
+                                        aria-disabled="@disabled"
+                                        style="@style @Styles?.DayButton"
+                                        class="bit-dtp-dbt@(klass) @Classes?.DayButton"
+                                        tabindex="@(isSelected ? 0 : -1)"
+                                        aria-selected="@(isSelected ? "true" : "false")">
+                                    @if (DayCellTemplate is not null)
+                                    {
+                                        @DayCellTemplate(GetDateTimeOfDayCell(date))
+                                    }
+                                    else
+                                    {
+                                        @GetDayOfCurrentMonth(date)
+                                    }
+                                </button>
+                            }
+                        </div>
+                    }
+                </div>
+            }
+
+            @if (ShowMonthPicker())
+            {
+                @if (_showMonthPickerAsOverlayInternal is false)
+                {
+                    <div style="@Styles?.Divider" class="bit-dtp-dvd @Classes?.Divider"></div>
+                }
+
+                <div style="@Styles?.YearMonthPickerWrapper" class="bit-dtp-mwp @Classes?.YearMonthPickerWrapper">
+                    @if (_showMonthPicker)
+                    {
+                        var prevDisabled = IsEnabled is false || CanChangeYear(false) is false;
+                        var nextDisabled = IsEnabled is false || CanChangeYear(true) is false;
+                        var toggleTitle = string.Format(YearPickerToggleTitle, _currentYear);
+                        var prevTitle = string.Format(GoToPrevYearTitle, _currentYear - 1);
+                        var nextTitle = string.Format(GoToNextYearTitle, _currentYear + 1);
+                        <div style="@Styles?.MonthPickerHeader" class="bit-dtp-pkh @Classes?.MonthPickerHeader">
+                            <button @onclick="ToggleBetweenMonthAndYearPicker"
+                                    tabindex="0"
+                                    type="button"
+                                    aria-atomic="true"
+                                    aria-live="polite"
+                                    title="@toggleTitle"
+                                    aria-label="@toggleTitle"
+                                    disabled="@(IsEnabled is false)"
+                                    aria-disabled="@(IsEnabled is false)"
+                                    style="@Styles?.YearPickerToggleButton"
+                                    class="bit-dtp-ptb @Classes?.YearPickerToggleButton">
+                                @_currentYear
+                            </button>
+                            <div style="@Styles?.MonthPickerNavWrapper" class="bit-dtp-nbc @Classes?.MonthPickerNavWrapper">
+                                <button @onclick="() => HandleYearChange(false)"
+                                        type="button"
+                                        title="@prevTitle"
+                                        aria-label="@prevTitle"
+                                        disabled="@prevDisabled"
+                                        aria-disabled="@prevDisabled"
+                                        style="@Styles?.PrevYearNavButton"
+                                        class="bit-dtp-nbt @Classes?.PrevYearNavButton">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.PrevYearNavIcon"
+                                       class="bit-dtp-cic @prevYearNavIconCss @Classes?.PrevYearNavIcon" />
+                                </button>
+                                @if (ShowGoToToday)
+                                {
+                                    var goToTodayDisabled = IsGoToTodayButtonDisabled(todayYear, todayMonth);
+
+                                    <button @onclick="HandleGoToToday"
+                                            type="button"
+                                            title="@GoToTodayTitle"
+                                            aria-label="@GoToTodayTitle"
+                                            disabled="@goToTodayDisabled"
+                                            style="@Styles?.GoToTodayButton"
+                                            aria-disabled="@goToTodayDisabled"
+                                            class="bit-dtp-gtb @Classes?.GoToTodayButton">
+                                        <i aria-hidden="true"
+                                           style="@Styles?.GoToTodayIcon"
+                                           class="bit-dtp-cic @goToTodayIconCss @Classes?.GoToTodayIcon" />
+                                    </button>
+                                }
+                                <button @onclick="() => HandleYearChange(true)"
+                                        type="button"
+                                        title="@nextTitle"
+                                        aria-label="@nextTitle"
+                                        disabled="@nextDisabled"
+                                        aria-disabled="@nextDisabled"
+                                        style="@Styles?.NextYearNavButton"
+                                        class="bit-dtp-nbt @Classes?.NextYearNavButton">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.NextYearNavIcon"
+                                       class="bit-dtp-cic @nextYearNavIconCss @Classes?.NextYearNavIcon" />
+                                </button>
+                                @if (_showTimePickerAsOverlayInternal && ShowTimePicker)
+                                {
+                                    <button @onclick="@ToggleTimePickerOverlay"
+                                            tabindex="0"
+                                            type="button"
+                                            aria-live="polite"
+                                            aria-atomic="true"
+                                            title="@ShowTimePickerTitle"
+                                            disabled="@(IsEnabled is false)"
+                                            aria-label="@ShowTimePickerTitle"
+                                            aria-disabled="@(IsEnabled is false)"
+                                            style="@Styles?.ShowTimePickerButton"
+                                            class="bit-dtp-nbt @Classes?.ShowTimePickerButton">
+                                        <i aria-hidden="true"
+                                           style="@Styles?.ShowTimePickerIcon"
+                                           class="bit-dtp-cic @showTimePickerIconCss @Classes?.ShowTimePickerIcon" />
+                                    </button>
+                                }
+                            </div>
+                        </div>
+                        <div style="@Styles?.MonthsContainer" class="bit-dtp-pkc @Classes?.MonthsContainer" role="grid" aria-label="@_currentYear">
+                            @for (var rowIndex = 0; rowIndex <= 2; rowIndex++)
+                            {
+                                <div style="@Styles?.MonthsRow" class="bit-dtp-pkr @Classes?.MonthsRow" role="row">
+                                    @for (var cellIndex = 1; cellIndex <= 4; cellIndex++)
+                                    {
+                                        var month = (rowIndex * 4) + cellIndex;
+                                        var monthName = _culture.DateTimeFormat.GetMonthName(month);
+                                        var disabled = IsEnabled is false || IsMonthOutOfMinAndMaxDate(month);
+                                        var selected = month == _currentMonth;
+                                        <button @onclick="async () => await SelectMonth(month)"
+                                                type="button"
+                                                role="gridcell"
+                                                title="@monthName"
+                                                aria-readonly="true"
+                                                aria-label="@monthName"
+                                                disabled="@disabled"
+                                                aria-disabled="@disabled"
+                                                tabindex="@(selected ? 0 : -1)"
+                                                aria-selected="@(selected ? "true" : "false")"
+                                                style="@Styles?.MonthButton"
+                                                class="bit-dtp-pkb@(GetMonthCellCssClass(month, todayYear, todayMonth)) @Classes?.MonthButton">
+                                            @if (MonthCellTemplate is not null)
+                                            {
+                                                @MonthCellTemplate(GetDateTimeOfMonthCell(month))
+                                            }
+                                            else
+                                            {
+                                                @_culture.DateTimeFormat.GetAbbreviatedMonthName(month)
+                                            }
+                                        </button>
+                                    }
+                                </div>
+                            }
+                        </div>
+                    }
+                    else
+                    {
+                        var prevDisabled = CanChangeYearRange(false) is false;
+                        var nextDisabled = CanChangeYearRange(true) is false;
+                        var toggleTitle = string.Format(YearRangePickerToggleTitle, _yearPickerStartYear, _yearPickerEndYear);
+                        var prevTitle = string.Format(GoToPrevYearRangeTitle, _yearPickerStartYear - 12, _yearPickerStartYear - 1);
+                        var nextTitle = string.Format(GoToNextYearRangeTitle, _yearPickerStartYear + 12, _yearPickerEndYear + 12);
+                        <div style="@Styles?.YearPickerHeader" class="bit-dtp-pkh @Classes?.YearPickerHeader">
+                            <button @onclick="ToggleBetweenMonthAndYearPicker"
+                                    type="button"
+                                    aria-atomic="true"
+                                    aria-live="polite"
+                                    title="@toggleTitle"
+                                    aria-label="@toggleTitle"
+                                    disabled="@(IsEnabled is false)"
+                                    aria-disabled="@(IsEnabled is false)"
+                                    style="@Styles?.MonthPickerToggleButton"
+                                    class="bit-dtp-ptb @Classes?.MonthPickerToggleButton">
+                                @_yearPickerStartYear - @_yearPickerEndYear
+                            </button>
+                            <div style="@Styles?.YearPickerNavWrapper" class="bit-dtp-nbc @Classes?.YearPickerNavWrapper">
+                                <button @onclick="() => HandleYearRangeChange(false)"
+                                        type="button"
+                                        title="@prevTitle"
+                                        aria-label="@prevTitle"
+                                        disabled="@prevDisabled"
+                                        aria-disabled="@prevDisabled"
+                                        style="@Styles?.PrevYearRangeNavButton"
+                                        class="bit-dtp-nbt @Classes?.PrevYearRangeNavButton">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.PrevYearRangeNavIcon"
+                                       class="bit-dtp-cic @prevYearRangeNavIconCss @Classes?.PrevYearRangeNavIcon" />
+                                </button>
+                                @if (ShowGoToToday)
+                                {
+                                    var goToTodayDisabled = IsGoToTodayButtonDisabled(todayYear, todayMonth, true);
+
+                                    <button @onclick="HandleGoToToday"
+                                            type="button"
+                                            title="@GoToTodayTitle"
+                                            aria-label="@GoToTodayTitle"
+                                            disabled="@goToTodayDisabled"
+                                            aria-disabled="@goToTodayDisabled"
+                                            style="@Styles?.GoToTodayButton"
+                                            class="bit-dtp-gtb @Classes?.GoToTodayButton">
+                                        <i aria-hidden="true"
+                                           style="@Styles?.GoToTodayIcon"
+                                           class="bit-dtp-cic @goToTodayIconCss @Classes?.GoToTodayIcon" />
+                                    </button>
+                                }
+                                <button @onclick="() => HandleYearRangeChange(true)"
+                                        type="button"
+                                        title="@nextTitle"
+                                        aria-label="@nextTitle"
+                                        disabled="@nextDisabled"
+                                        aria-disabled="@nextDisabled"
+                                        style="@Styles?.NextYearRangeNavButton"
+                                        class="bit-dtp-nbt @Classes?.NextYearRangeNavButton">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.NextYearRangeNavIcon"
+                                       class="bit-dtp-cic @nextYearRangeNavIconCss @Classes?.NextYearRangeNavIcon" />
+                                </button>
+                            </div>
+                        </div>
+                        <div style="@Styles?.YearsContainer" class="bit-dtp-pkc @Classes?.YearsContainer" role="grid" aria-label="@_yearPickerStartYear - @_yearPickerEndYear">
+                            @for (var rowIndex = 0; rowIndex <= 2; rowIndex++)
+                            {
+                                <div style="@Styles?.YearsRow" class="bit-dtp-pkr @Classes?.YearsRow" role="row">
+                                    @for (var cellIndex = 0; cellIndex <= 3; cellIndex++)
+                                    {
+                                        var year = _yearPickerStartYear + (rowIndex * 4) + cellIndex;
+                                        var disabled = IsEnabled is false || IsYearOutOfMinAndMaxDate(year);
+                                        var selected = year == _currentYear;
+                                        <button @onclick="() => SelectYear(year)"
+                                                type="button"
+                                                role="gridcell"
+                                                disabled="@disabled"
+                                                tabindex="@(selected ? 0 : -1)"
+                                                aria-readonly="true"
+                                                aria-disabled="@disabled"
+                                                aria-selected="@(selected ? "true" : "false")"
+                                                style="@Styles?.YearButton"
+                                                class="bit-dtp-pkb @Classes?.YearButton">
+                                            @if (YearCellTemplate is not null)
+                                            {
+                                                @YearCellTemplate(year)
+                                            }
+                                            else
+                                            {
+                                                @year
+                                            }
+                                        </button>
+                                    }
+                                </div>
+                            }
+                        </div>
+                    }
+                </div>
+            }
+
+            @if (showTimePicker)
+            {
+                @if (_showTimePickerAsOverlayInternal is false || _showMonthPickerAsOverlayInternal is false)
+                {
+                    <div style="@Styles?.Divider" class="bit-dtp-dvd @Classes?.Divider"></div>
+                }
+
+                <div style="@Styles?.TimePickerWrapper" class="bit-dtp-twp @Classes?.TimePickerWrapper">
+                    <div style="@Styles?.TimePickerHeader" class="bit-dtp-pkh bit-dtp-tph @Classes?.TimePickerHeader">
+                        <div style="@Styles?.TimePickerNavWrapper" class="bit-dtp-nbc @Classes?.TimePickerNavWrapper">
+                            @if (ShowGoToNow)
+                            {
+                                <button @onclick="HandleGoToNow"
+                                        type="button"
+                                        title="@GoToNowTitle"
+                                        aria-label="@GoToNowTitle"
+                                        style="@Styles?.GoToNowButton"
+                                        disabled="@(IsEnabled is false)"
+                                        aria-disabled="@(IsEnabled is false)"
+                                        class="bit-dtp-gtn @Classes?.GoToNowButton">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.GoToNowIcon"
+                                       class="bit-dtp-cic @goToNowIconCss @Classes?.GoToNowIcon" />
+                                </button>
+                            }
+                            @if (_isTimePickerOverlayOnTop)
+                            {
+                                <button @onclick="ToggleTimePickerOverlay"
+                                        type="button"
+                                        title="@HideTimePickerTitle"
+                                        disabled="@(IsEnabled is false)"
+                                        aria-disabled="@(IsEnabled is false)"
+                                        style="@Styles?.HideTimePickerButton"
+                                        class="bit-dtp-nbt @Classes?.HideTimePickerButton">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.HideTimePickerIcon"
+                                       class="bit-dtp-cic @hideTimePickerIconCss @Classes?.HideTimePickerIcon" />
+                                </button>
+                            }
+                        </div>
+                    </div>
+                    <div style="@Styles?.TimeInputContainer" class="bit-dtp-tic @Classes?.TimeInputContainer">
+                        <div style="@Styles?.HourInputContainer" class="bit-dtp-tpr @Classes?.HourInputContainer">
+                            <button @onpointerup="HandleOnPointerUpOrOut"
+                                    @onpointerout="HandleOnPointerUpOrOut"
+                                    @onpointerdown="() => HandleOnPointerDown(true, true)"
+                                    type="button"
+                                    disabled="@(IsEnabled is false)"
+                                    aria-disabled="@(IsEnabled is false)"
+                                    style="@Styles?.TimePickerIncreaseHourButton"
+                                    class="bit-dtp-tbt @Classes?.TimePickerIncreaseHourButton">
+                                <i aria-hidden="true"
+                                   style="@Styles?.TimePickerIncreaseHourIcon"
+                                   class="bit-dtp-cic @increaseHourIconCss @Classes?.TimePickerIncreaseHourIcon" />
+                            </button>
+                            <input @ref="_inputTimeHourRef"
+                                   @bind="@_hourView"
+                                   @bind:event="oninput"
+                                   @onfocus="HandleOnTimeHourFocus"
+                                   min="0"
+                                   max="@(TimeFormat == BitTimeFormat.TwelveHours ? "12" : "23")"
+                                   type="number"
+                                   inputmode="numeric"
+                                   readonly="@ReadOnly"
+                                   disabled="@(IsEnabled is false)"
+                                   aria-disabled="@(IsEnabled is false)"
+                                   style="@Styles?.TimePickerHourInput"
+                                   class="bit-dtp-tin @Classes?.TimePickerHourInput"
+                                   autocomplete="@BitAutoCompleteValue.NewPassword" />
+                            <button @onpointerup="HandleOnPointerUpOrOut"
+                                    @onpointerout="HandleOnPointerUpOrOut"
+                                    @onpointerdown="() => HandleOnPointerDown(false, true)"
+                                    type="button"
+                                    disabled="@(IsEnabled is false)"
+                                    aria-disabled="@(IsEnabled is false)"
+                                    style="@Styles?.TimePickerDecreaseHourButton"
+                                    class="bit-dtp-tbt @Classes?.TimePickerDecreaseHourButton">
+                                <i aria-hidden="true"
+                                   style="@Styles?.TimePickerDecreaseHourIcon"
+                                   class="bit-dtp-cic @decreaseHourIconCss @Classes?.TimePickerDecreaseHourIcon" />
+                            </button>
+                        </div>
+                        <div style="@Styles?.TimePickerHourMinuteSeparator" class="bit-dtp-tpr bit-dtp-tdv @Classes?.TimePickerHourMinuteSeparator">:</div>
+                        <div style="@Styles?.MinuteInputContainer" class="bit-dtp-tpr @Classes?.MinuteInputContainer">
+                            <button @onpointerup="HandleOnPointerUpOrOut"
+                                    @onpointerout="HandleOnPointerUpOrOut"
+                                    @onpointerdown="() => HandleOnPointerDown(true, false)"
+                                    type="button"
+                                    disabled="@(IsEnabled is false)"
+                                    aria-disabled="@(IsEnabled is false)"
+                                    style="@Styles?.TimePickerIncreaseMinuteButton"
+                                    class="bit-dtp-tbt @Classes?.TimePickerIncreaseMinuteButton">
+                                <i aria-hidden="true"
+                                   style="@Styles?.TimePickerIncreaseMinuteIcon"
+                                   class="bit-dtp-cic @increaseMinuteIconCss @Classes?.TimePickerIncreaseMinuteIcon" />
+                            </button>
+                            <input @ref="_inputTimeMinuteRef"
+                                   @bind="@_minuteView"
+                                   @bind:event="oninput"
+                                   @onfocus="HandleOnTimeMinuteFocus"
+                                   min="0"
+                                   max="59"
+                                   type="number"
+                                   inputmode="numeric"
+                                   readonly="@ReadOnly"
+                                   disabled="@(IsEnabled is false)"
+                                   aria-disabled="@(IsEnabled is false)"
+                                   style="@Styles?.TimePickerMinuteInput"
+                                   class="bit-dtp-tin @Classes?.TimePickerMinuteInput"
+                                   autocomplete="@BitAutoCompleteValue.NewPassword" />
+                            <button @onpointerup="HandleOnPointerUpOrOut"
+                                    @onpointerout="HandleOnPointerUpOrOut"
+                                    @onpointerdown="() => HandleOnPointerDown(false, false)"
+                                    type="button"
+                                    disabled="@(IsEnabled is false)"
+                                    aria-disabled="@(IsEnabled is false)"
+                                    style="@Styles?.TimePickerDecreaseMinuteButton"
+                                    class="bit-dtp-tbt @Classes?.TimePickerDecreaseMinuteButton">
+                                <i aria-hidden="true"
+                                   style="@Styles?.TimePickerDecreaseMinuteIcon"
+                                   class="bit-dtp-cic @decreaseMinuteIconCss @Classes?.TimePickerDecreaseMinuteIcon" />
+                            </button>
+                        </div>
+
+                        @if (TimeFormat == BitTimeFormat.TwelveHours)
+                        {
+                            <div style="@Styles?.TimePickerAmPmContainer" class="bit-dtp-tpr bit-dtp-am-pm @Classes?.TimePickerAmPmContainer">
+                                <button @onclick="HandleOnAmClick"
+                                        type="button"
+                                        disabled="@(IsEnabled is false)"
+                                        aria-disabled="@(IsEnabled is false)"
+                                        style="@Styles?.TimePickerAmButton"
+                                        class="bit-dtp-tbt bit-dtp-bam @(IsAm() is true ? "bit-dtp-bns" : string.Empty) @Classes?.TimePickerAmButton">
+                                    @_culture.DateTimeFormat.AMDesignator
+                                </button>
+
+                                <button @onclick="HandleOnPmClick"
+                                        type="button"
+                                        disabled="@(IsEnabled is false)"
+                                        aria-disabled="@(IsEnabled is false)"
+                                        style="@Styles?.TimePickerPmButton"
+                                        class="bit-dtp-tbt bit-dtp-bpm @(IsAm() is false ? "bit-dtp-bns" : string.Empty) @Classes?.TimePickerPmButton">
+                                    @_culture.DateTimeFormat.PMDesignator
+                                </button>
+                            </div>
+                        }
+                    </div>
+                </div>
+            }
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor.cs
index 35a0ef4aa4..5c0c6e9c59 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor.cs
@@ -35,6 +35,7 @@ public partial class BitDatePicker : BitInputBase<DateTimeOffset?>
     private string? _labelId;
     private string? _inputId;
     private string _calloutId = string.Empty;
+    private string _overlayId = string.Empty;
     private string _datePickerId = string.Empty;
     private ElementReference _inputTimeHourRef = default!;
     private ElementReference _inputTimeMinuteRef = default!;
@@ -718,6 +719,7 @@ protected override void OnInitialized()
         _datePickerId = $"DatePicker-{UniqueId}";
         _labelId = $"{_datePickerId}-label";
         _calloutId = $"{_datePickerId}-callout";
+        _overlayId = $"{_datePickerId}-overlay";
         _inputId = $"{_datePickerId}-input";
 
         OnValueChanged += HandleOnValueChanged;
@@ -1606,6 +1608,7 @@ private async Task<bool> ToggleCallout()
             component: null,
             calloutId: _calloutId,
             callout: null,
+            overlayId: _overlayId,
             isCalloutOpen: IsOpen,
             responsiveMode: Responsive ? BitResponsiveMode.Top : BitResponsiveMode.None,
             dropDirection: BitDropDirection.TopAndBottom,
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
index 876077bd6c..3fed74e82a 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
@@ -1,797 +1,802 @@
-@namespace Bit.BlazorUI
-@inherits BitInputBase<BitDateRangePickerValue?>
-
-@{
-    var clearBtnIconCss = BitIconInfo.From(ClearButtonIcon, ClearButtonIconName ?? "Cancel")?.GetCssClasses();
-    var closeButtonIconCss = BitIconInfo.From(CloseButtonIcon, CloseButtonIconName ?? "Cancel")?.GetCssClasses();
-    var prevMonthNavIconCss = BitIconInfo.From(PrevMonthNavIcon, PrevMonthNavIconName ?? "Up")?.GetCssClasses();
-    var nextMonthNavIconCss = BitIconInfo.From(NextMonthNavIcon, NextMonthNavIconName ?? "Up bit-ico-r180")?.GetCssClasses();
-    var goToTodayIconCss = BitIconInfo.From(GoToTodayIcon, GoToTodayIconName ?? "GotoToday")?.GetCssClasses();
-    var showTimePickerIconCss = BitIconInfo.From(ShowTimePickerIcon, ShowTimePickerIconName ?? "Clock")?.GetCssClasses();
-    var prevYearNavIconCss = BitIconInfo.From(PrevYearNavIcon, PrevYearNavIconName ?? "Up")?.GetCssClasses();
-    var nextYearNavIconCss = BitIconInfo.From(NextYearNavIcon, NextYearNavIconName ?? "Up bit-ico-r180")?.GetCssClasses();
-    var prevYearRangeNavIconCss = BitIconInfo.From(PrevYearRangeNavIcon, PrevYearRangeNavIconName ?? "Up")?.GetCssClasses();
-    var nextYearRangeNavIconCss = BitIconInfo.From(NextYearRangeNavIcon, NextYearRangeNavIconName ?? "Up bit-ico-r180")?.GetCssClasses();
-    var hideTimePickerIconCss = BitIconInfo.From(HideTimePickerIcon, HideTimePickerIconName ?? "CalendarMirrored")?.GetCssClasses();
-    var startIncreaseHourIconCss = BitIconInfo.From(StartTimeIncreaseHourIcon, StartTimeIncreaseHourIconName ?? "ChevronDownSmall bit-ico-r180")?.GetCssClasses();
-    var startDecreaseHourIconCss = BitIconInfo.From(StartTimeDecreaseHourIcon, StartTimeDecreaseHourIconName ?? "ChevronDownSmall")?.GetCssClasses();
-    var startIncreaseMinuteIconCss = BitIconInfo.From(StartTimeIncreaseMinuteIcon, StartTimeIncreaseMinuteIconName ?? "ChevronDownSmall bit-ico-r180")?.GetCssClasses();
-    var startDecreaseMinuteIconCss = BitIconInfo.From(StartTimeDecreaseMinuteIcon, StartTimeDecreaseMinuteIconName ?? "ChevronDownSmall")?.GetCssClasses();
-    var endIncreaseHourIconCss = BitIconInfo.From(EndTimeIncreaseHourIcon, EndTimeIncreaseHourIconName ?? "ChevronDownSmall bit-ico-r180")?.GetCssClasses();
-    var endDecreaseHourIconCss = BitIconInfo.From(EndTimeDecreaseHourIcon, EndTimeDecreaseHourIconName ?? "ChevronDownSmall")?.GetCssClasses();
-    var endIncreaseMinuteIconCss = BitIconInfo.From(EndTimeIncreaseMinuteIcon, EndTimeIncreaseMinuteIconName ?? "ChevronDownSmall bit-ico-r180")?.GetCssClasses();
-    var endDecreaseMinuteIconCss = BitIconInfo.From(EndTimeDecreaseMinuteIcon, EndTimeDecreaseMinuteIconName ?? "ChevronDownSmall")?.GetCssClasses();
+@namespace Bit.BlazorUI
+@inherits BitInputBase<BitDateRangePickerValue?>
+
+@{
+    var clearBtnIconCss = BitIconInfo.From(ClearButtonIcon, ClearButtonIconName ?? "Cancel")?.GetCssClasses();
+    var closeButtonIconCss = BitIconInfo.From(CloseButtonIcon, CloseButtonIconName ?? "Cancel")?.GetCssClasses();
+    var prevMonthNavIconCss = BitIconInfo.From(PrevMonthNavIcon, PrevMonthNavIconName ?? "Up")?.GetCssClasses();
+    var nextMonthNavIconCss = BitIconInfo.From(NextMonthNavIcon, NextMonthNavIconName ?? "Up bit-ico-r180")?.GetCssClasses();
+    var goToTodayIconCss = BitIconInfo.From(GoToTodayIcon, GoToTodayIconName ?? "GotoToday")?.GetCssClasses();
+    var showTimePickerIconCss = BitIconInfo.From(ShowTimePickerIcon, ShowTimePickerIconName ?? "Clock")?.GetCssClasses();
+    var prevYearNavIconCss = BitIconInfo.From(PrevYearNavIcon, PrevYearNavIconName ?? "Up")?.GetCssClasses();
+    var nextYearNavIconCss = BitIconInfo.From(NextYearNavIcon, NextYearNavIconName ?? "Up bit-ico-r180")?.GetCssClasses();
+    var prevYearRangeNavIconCss = BitIconInfo.From(PrevYearRangeNavIcon, PrevYearRangeNavIconName ?? "Up")?.GetCssClasses();
+    var nextYearRangeNavIconCss = BitIconInfo.From(NextYearRangeNavIcon, NextYearRangeNavIconName ?? "Up bit-ico-r180")?.GetCssClasses();
+    var hideTimePickerIconCss = BitIconInfo.From(HideTimePickerIcon, HideTimePickerIconName ?? "CalendarMirrored")?.GetCssClasses();
+    var startIncreaseHourIconCss = BitIconInfo.From(StartTimeIncreaseHourIcon, StartTimeIncreaseHourIconName ?? "ChevronDownSmall bit-ico-r180")?.GetCssClasses();
+    var startDecreaseHourIconCss = BitIconInfo.From(StartTimeDecreaseHourIcon, StartTimeDecreaseHourIconName ?? "ChevronDownSmall")?.GetCssClasses();
+    var startIncreaseMinuteIconCss = BitIconInfo.From(StartTimeIncreaseMinuteIcon, StartTimeIncreaseMinuteIconName ?? "ChevronDownSmall bit-ico-r180")?.GetCssClasses();
+    var startDecreaseMinuteIconCss = BitIconInfo.From(StartTimeDecreaseMinuteIcon, StartTimeDecreaseMinuteIconName ?? "ChevronDownSmall")?.GetCssClasses();
+    var endIncreaseHourIconCss = BitIconInfo.From(EndTimeIncreaseHourIcon, EndTimeIncreaseHourIconName ?? "ChevronDownSmall bit-ico-r180")?.GetCssClasses();
+    var endDecreaseHourIconCss = BitIconInfo.From(EndTimeDecreaseHourIcon, EndTimeDecreaseHourIconName ?? "ChevronDownSmall")?.GetCssClasses();
+    var endIncreaseMinuteIconCss = BitIconInfo.From(EndTimeIncreaseMinuteIcon, EndTimeIncreaseMinuteIconName ?? "ChevronDownSmall bit-ico-r180")?.GetCssClasses();
+    var endDecreaseMinuteIconCss = BitIconInfo.From(EndTimeDecreaseMinuteIcon, EndTimeDecreaseMinuteIconName ?? "ChevronDownSmall")?.GetCssClasses();
+}
+
+<div @ref="RootElement" @attributes="HtmlAttributes"
+     id="@_Id"
+     style="@StyleBuilder.Value"
+     class="@ClassBuilder.Value"
+     dir="@Dir?.ToString().ToLower()">
+
+    @if (LabelTemplate is not null)
+    {
+        <label id="@_labelId" for="@_inputId">
+            @LabelTemplate
+        </label>
+    }
+    else if (Label.HasValue())
+    {
+        <label style="@Styles?.Label" class="bit-dtrp-lbl @Classes?.Label" id="@_labelId" for="@_inputId">
+            @Label
+        </label>
+    }
+
+    @if (Standalone is false)
+    {
+        <div style="@Styles?.InputWrapper" class="bit-dtrp-wrp @Classes?.InputWrapper" id="@_dateRangePickerId" aria-owns="@(IsOpen ? _calloutId : null)" @onclick="HandleOnClick">
+            <div style="@Styles?.InputContainer" class="bit-dtrp-icn @Classes?.InputContainer">
+                <input @ref="InputElement" @attributes="InputHtmlAttributes"
+                       @onfocus="@HandleOnFocus"
+                       @onchange="@HandleOnChange"
+                       @onfocusin="@HandleOnFocusIn"
+                       @onfocusout="@HandleOnFocusOut"
+                       type="text"
+                       name="@Name"
+                       id="@_inputId"
+                       role="combobox"
+                       required="@Required"
+                       tabindex="@TabIndex"
+                       aria-haspopup="dialog"
+                       aria-label="@AriaLabel"
+                       placeholder="@Placeholder"
+                       value="@CurrentValueAsString"
+                       disabled="@(IsEnabled is false)"
+                       readonly="@(AllowTextInput is false || ReadOnly)"
+                       aria-expanded="@(IsOpen ? "true" : "false")"
+                       aria-controls="@(IsOpen ? _calloutId : null)"
+                       aria-labelledby="@(Label.HasValue() ? _labelId : null)"
+                       style="@Styles?.Input"
+                       class="bit-dtrp-inp@(AllowTextInput ? " bit-dtrp-ein" : null) @Classes?.Input" />
+
+                @if (IsEnabled && ShowClearButton && CurrentValue?.StartDate is not null)
+                {
+                    <button @onclick="HandleOnClearButtonClick" @onclick:stopPropagation
+                            style="@Styles?.ClearButton"
+                            class="bit-dtrp-clr @Classes?.ClearButton"
+                            type="button"
+                            aria-hidden="true"
+                            aria-label="Clear date">
+                        <i aria-hidden="true"
+                           style="@Styles?.ClearButtonIcon"
+                           class="bit-dtrp-cic @clearBtnIconCss @Classes?.ClearButtonIcon" />
+                    </button>
+                }
+
+                @if (IconTemplate is not null)
+                {
+                    @IconTemplate
+                }
+                else
+                {
+                    var icon = BitIconInfo.From(Icon, IconName ?? "CalendarMirrored");
+                    <i aria-hidden="true"
+                       style="@Styles?.Icon"
+                       class="bit-dtrp-ico @icon?.GetCssClasses() @Classes?.Icon" />
+                }
+            </div>
+        </div>
+    }
+    else
+    {
+        <input @ref="InputElement" @attributes="InputHtmlAttributes"
+               type="text"
+               name="@Name"
+               id="@_inputId"
+               aria-label="@AriaLabel"
+               class="bit-input-hidden"
+               value="@CurrentValueAsString"
+               disabled="@(IsEnabled is false)"
+               readonly="@(AllowTextInput is false || ReadOnly)" />
+    }
+
+</div>
+
+@if (Standalone is false)
+{
+    <div @onclick="CloseCallout"
+         style="display:@(IsOpen ? "block;" : "none;") @Styles?.Overlay"
+         id="@_overlayId"
+     class="bit-dtrp-ovl @Classes?.Overlay"></div>
 }
 
-<div @ref="RootElement" @attributes="HtmlAttributes"
-     id="@_Id"
-     style="@StyleBuilder.Value"
-     class="@ClassBuilder.Value"
-     dir="@Dir?.ToString().ToLower()">
-
-    @if (LabelTemplate is not null)
-    {
-        <label id="@_labelId" for="@_inputId">
-            @LabelTemplate
-        </label>
-    }
-    else if (Label.HasValue())
-    {
-        <label style="@Styles?.Label" class="bit-dtrp-lbl @Classes?.Label" id="@_labelId" for="@_inputId">
-            @Label
-        </label>
-    }
-
-    @if (Standalone is false)
-    {
-        <div style="@Styles?.InputWrapper" class="bit-dtrp-wrp @Classes?.InputWrapper" id="@_dateRangePickerId" aria-owns="@(IsOpen ? _calloutId : null)" @onclick="HandleOnClick">
-            <div style="@Styles?.InputContainer" class="bit-dtrp-icn @Classes?.InputContainer">
-                <input @ref="InputElement" @attributes="InputHtmlAttributes"
-                       @onfocus="@HandleOnFocus"
-                       @onchange="@HandleOnChange"
-                       @onfocusin="@HandleOnFocusIn"
-                       @onfocusout="@HandleOnFocusOut"
-                       type="text"
-                       name="@Name"
-                       id="@_inputId"
-                       role="combobox"
-                       required="@Required"
-                       tabindex="@TabIndex"
-                       aria-haspopup="dialog"
-                       aria-label="@AriaLabel"
-                       placeholder="@Placeholder"
-                       value="@CurrentValueAsString"
-                       disabled="@(IsEnabled is false)"
-                       readonly="@(AllowTextInput is false || ReadOnly)"
-                       aria-expanded="@(IsOpen ? "true" : "false")"
-                       aria-controls="@(IsOpen ? _calloutId : null)"
-                       aria-labelledby="@(Label.HasValue() ? _labelId : null)"
-                       style="@Styles?.Input"
-                       class="bit-dtrp-inp@(AllowTextInput ? " bit-dtrp-ein" : null) @Classes?.Input" />
-
-                @if (IsEnabled && ShowClearButton && CurrentValue?.StartDate is not null)
-                {
-                    <button @onclick="HandleOnClearButtonClick" @onclick:stopPropagation
-                            style="@Styles?.ClearButton"
-                            class="bit-dtrp-clr @Classes?.ClearButton"
-                            type="button"
-                            aria-hidden="true"
-                            aria-label="Clear date">
-                        <i aria-hidden="true"
-                           style="@Styles?.ClearButtonIcon"
-                           class="bit-dtrp-cic @clearBtnIconCss @Classes?.ClearButtonIcon" />
-                    </button>
-                }
-
-                @if (IconTemplate is not null)
-                {
-                    @IconTemplate
-                }
-                else
-                {
-                    var icon = BitIconInfo.From(Icon, IconName ?? "CalendarMirrored");
-                    <i aria-hidden="true"
-                       style="@Styles?.Icon"
-                       class="bit-dtrp-ico @icon?.GetCssClasses() @Classes?.Icon" />
-                }
-            </div>
-        </div>
-
-        <div @onclick="CloseCallout"
-             style="display:@(IsOpen ? "block;" : "none;") @Styles?.Overlay"
-             class="bit-dtrp-ovl @Classes?.Overlay"></div>
-    }
-    else
-    {
-        <input @ref="InputElement" @attributes="InputHtmlAttributes"
-               type="text"
-               name="@Name"
-               id="@_inputId"
-               aria-label="@AriaLabel"
-               class="bit-input-hidden"
-               value="@CurrentValueAsString"
-               disabled="@(IsEnabled is false)"
-               readonly="@(AllowTextInput is false || ReadOnly)" />
-    }
-
-    <div id="@_calloutId"
-         style="@Styles?.Callout"
-         class="@GetCalloutCssClasses()">
-        <div style="@Styles?.CalloutContainer" class="bit-dtrp-cac @Classes?.CalloutContainer" role="dialog" @attributes=@CalloutHtmlAttributes aria-label="@CalloutAriaLabel">
-            <div style="@Styles?.Group" class="bit-dtrp-grp @Classes?.Group" role="group" aria-label="">
-                <div class="bit-dtrp-sdt" aria-live="polite" aria-atomic="true">Selected date @CurrentValueAsString</div>
-
-                @{
-                    var todayYear = _culture.Calendar.GetYear(DateTime.Now);
-                    var todayMonth = _culture.Calendar.GetMonth(DateTime.Now);
-                    var todayDay = _culture.Calendar.GetDayOfMonth(DateTime.Now);
-                    var showTimePicker = ShowTimePicker && ((_showTimePickerAsOverlayInternal && _isTimePickerOverlayOnTop) || _showTimePickerAsOverlayInternal is false);
-                }
-
-                @if (ShowDayPicker())
-                {
-                    <div style="@Styles?.DayPickerWrapper" class="bit-dtrp-dwp @Classes?.DayPickerWrapper">
-                        <div style="@Styles?.DayPickerHeader" class="bit-dtrp-pkh @Classes?.DayPickerHeader">
-                            @if (_showMonthPickerAsOverlayInternal || (ShowTimePicker && ShowTimePickerAsOverlay is false))
-                            {
-                                var title = string.Format(MonthPickerToggleTitle, _monthTitle);
-                                <button @onclick="@ToggleMonthPickerOverlay"
-                                        tabindex="0"
-                                        type="button"
-                                        title="@title"
-                                        aria-live="polite"
-                                        aria-atomic="true"
-                                        aria-label="@title"
-                                        style="@Styles?.DayPickerMonth"
-                                        disabled="@(IsEnabled is false)"
-                                        aria-disabled="@(IsEnabled is false)"
-                                        class="bit-dtrp-ptb @Classes?.DayPickerMonth">
-                                    @_monthTitle
-                                </button>
-                            }
-                            else
-                            {
-                                <div style="@Styles?.DayPickerMonth"
-                                     class="bit-dtrp-pkt @Classes?.DayPickerMonth"
-                                     aria-live="polite"
-                                     aria-atomic="true"
-                                     tabindex="-1">
-                                    @_monthTitle
-                                </div>
-                            }
-                            @{
-                                var prevDisabled = CanChangeMonth(false) is false;
-                                var nextDisabled = CanChangeMonth(true) is false;
-                            }
-                            <div class="bit-dtrp-nbc">
-                                <button @onclick="() => HandleMonthChange(false)"
-                                        type="button"
-                                        disabled="@prevDisabled"
-                                        title="@GoToPrevMonthTitle"
-                                        aria-disabled="@prevDisabled"
-                                        style="@Styles?.PrevMonthNavButton"
-                                        class="bit-dtrp-nbt @Classes?.PrevMonthNavButton">
-                                    <i aria-hidden="true"
-                                       style="@Styles?.PrevMonthNavIcon"
-                                       class="bit-dtrp-cic @prevMonthNavIconCss @Classes?.PrevMonthNavIcon" />
-                                </button>
-                                @if (ShowGoToToday && (_showMonthPickerAsOverlayInternal || (ShowTimePicker && _showTimePickerAsOverlayInternal is false)))
-                                {
-                                    var goToTodayDisabled = IsGoToTodayButtonDisabled(todayYear, todayMonth);
-
-                                    <button @onclick="HandleGoToToday"
-                                            type="button"
-                                            title="@GoToTodayTitle"
-                                            disabled="@goToTodayDisabled"
-                                            style="@Styles?.GoToTodayButton"
-                                            aria-disabled="@goToTodayDisabled"
-                                            class="bit-dtrp-gtb @Classes?.GoToTodayButton">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.GoToTodayIcon"
-                                           class="bit-dtrp-cic @goToTodayIconCss @Classes?.GoToTodayIcon" />
-                                    </button>
-                                }
-                                <button @onclick="() => HandleMonthChange(true)"
-                                        type="button"
-                                        disabled="@nextDisabled"
-                                        title="@GoToNextMonthTitle"
-                                        aria-disabled="@nextDisabled"
-                                        style="@Styles?.NextMonthNavButton"
-                                        class="bit-dtrp-nbt @Classes?.NextMonthNavButton">
-                                    <i aria-hidden="true"
-                                       style="@Styles?.NextMonthNavIcon"
-                                       class="bit-dtrp-cic @nextMonthNavIconCss @Classes?.NextMonthNavIcon" />
-                                </button>
-                                @if (ShowCloseButton && Standalone is false)
-                                {
-                                    <button @onclick="CloseCallout"
-                                            type="button"
-                                            style="@Styles?.CloseButton"
-                                            class="bit-dtrp-nbt @Classes?.CloseButton"
-                                            title="@CloseButtonTitle"
-                                            aria-label="@CloseButtonTitle">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.CloseButtonIcon"
-                                           class="bit-dtrp-cic @closeButtonIconCss @Classes?.CloseButtonIcon" />
-                                    </button>
-                                }
-                                @if (_showMonthPickerAsOverlayInternal && _showTimePickerAsOverlayInternal && ShowTimePicker)
-                                {
-                                    <button @onclick="@ToggleTimePickerOverlay"
-                                            tabindex="0"
-                                            type="button"
-                                            aria-live="polite"
-                                            aria-atomic="true"
-                                            title="@ShowTimePickerTitle"
-                                            disabled="@(IsEnabled is false)"
-                                            aria-label="@ShowTimePickerTitle"
-                                            aria-disabled="@(IsEnabled is false)"
-                                            style="@Styles?.ShowTimePickerButton"
-                                            class="bit-dtrp-nbt @Classes?.ShowTimePickerButton">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.ShowTimePickerIcon"
-                                           class="bit-dtrp-cic @showTimePickerIconCss @Classes?.ShowTimePickerIcon" />
-                                    </button>
-                                }
-                            </div>
-                        </div>
-
-                        <div style="@Styles?.DaysHeaderRow" class="bit-dtrp-dgh @Classes?.DaysHeaderRow">
-                            @if (ShowWeekNumbers)
-                            {
-                                <div style="@Styles?.WeekNumbersHeader" class="bit-dtrp-wlb @Classes?.WeekNumbersHeader"></div>
-                            }
-
-                            @for (var index = 0; index < 7; index++)
-                            {
-                                var dayOfWeekName = _culture.DateTimeFormat.GetShortestDayName(GetDayOfWeek(index));
-                                <div scope="col"
-                                     title="@dayOfWeekName"
-                                     style="@Styles?.WeekNumbersHeader"
-                                     class="bit-dtrp-wlb @Classes?.WeekNumbersHeader">
-                                    @dayOfWeekName[0]
-                                </div>
-                            }
-                        </div>
-
-                        @for (var week = 0; week < 6; week++)
-                        {
-                            //to ignore the last empty week out of month || to ignore the first whole week out of month
-                            if (_daysOfCurrentMonth[week, 0].HasValue is false) continue;
-
-                            <div style="@Styles?.DaysRow" class="bit-dtrp-dgr @Classes?.DaysRow">
-                                @if (ShowWeekNumbers)
-                                {
-                                    var weekNumber = GetWeekNumber(week);
-                                    var title = string.Format(WeekNumberTitle, weekNumber);
-                                    <div style="@Styles?.WeekNumber"
-                                         scope="row"
-                                         title="title"
-                                         aria-label="title"
-                                         class="bit-dtrp-wnm @Classes?.WeekNumber">
-                                        @weekNumber
-                                    </div>
-                                }
-
-                                @for (var day = 0; day < 7; day++)
-                                {
-                                    var date = _daysOfCurrentMonth[week, day]!.Value;
-                                    var disabled = IsEnabled is false || IsWeekDayOutOfMinAndMaxDate(date);
-                                    var isSelected = IsBetweenTwoSelectedDate(date);
-                                    var (style, klass) = GetDayButtonCss(date);
-                                    <button @onclick="() => SelectDate(date)"
-                                            type="button"
-                                            role="gridcell"
-                                            aria-readonly="true"
-                                            style="@style @Styles?.DayButton"
-                                            class="bit-dtrp-dbt@(klass) @Classes?.DayButton"
-                                            disabled="@disabled"
-                                            aria-disabled="@disabled"
-                                            tabindex="@(isSelected ? 0 : -1)"
-                                            aria-selected="@(isSelected ? "true" : "false")">
-                                        @if (DayCellTemplate is not null)
-                                        {
-                                            @DayCellTemplate(GetDateTimeOfDayCell(date))
-                                        }
-                                        else
-                                        {
-                                            @GetDayOfCurrentMonth(date)
-                                        }
-                                    </button>
-                                }
-                            </div>
-                        }
-                    </div>
-                }
-
-                @if (ShowMonthPicker())
-                {
-                    @if (_showMonthPickerAsOverlayInternal is false)
-                    {
-                        <div style="@Styles?.Divider" class="bit-dtrp-dvd @Classes?.Divider"></div>
-                    }
-
-                    <div style="@Styles?.YearMonthPickerWrapper" class="bit-dtrp-mwp @Classes?.YearMonthPickerWrapper">
-                        @if (_showMonthPicker)
-                        {
-                            var prevDisabled = CanChangeYear(false) is false;
-                            var nextDisabled = CanChangeYear(true) is false;
-                            var toggleTitle = string.Format(YearPickerToggleTitle, _currentYear);
-                            var prevTitle = string.Format(GoToPrevYearTitle, _currentYear - 1);
-                            var nextTitle = string.Format(GoToNextYearTitle, _currentYear + 1);
-                            <div style="@Styles?.MonthPickerHeader" class="bit-dtrp-pkh @Classes?.MonthPickerHeader">
-                                <button @onclick="ToggleBetweenMonthAndYearPicker"
-                                        tabindex="0"
-                                        type="button"
-                                        aria-atomic="true"
-                                        aria-live="polite"
-                                        title="@toggleTitle"
-                                        aria-label="@toggleTitle"
-                                        disabled="@(IsEnabled is false)"
-                                        aria-disabled="@(IsEnabled is false)"
-                                        style="@Styles?.YearPickerToggleButton"
-                                        class="bit-dtrp-ptb @Classes?.YearPickerToggleButton">
-                                    @_currentYear
-                                </button>
-                                <div style="@Styles?.MonthPickerNavWrapper" class="bit-dtrp-nbc @Classes?.MonthPickerNavWrapper">
-                                    <button @onclick="() => HandleYearChange(false)"
-                                            type="button"
-                                            title="@prevTitle"
-                                            aria-label="@prevTitle"
-                                            disabled="@prevDisabled"
-                                            aria-disabled="@prevDisabled"
-                                            style="@Styles?.PrevYearNavButton"
-                                            class="bit-dtrp-nbt @Classes?.PrevYearNavButton">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.PrevYearNavIcon"
-                                           class="bit-dtrp-cic @prevYearNavIconCss @Classes?.PrevYearNavIcon" />
-                                    </button>
-                                    @if (ShowGoToToday)
-                                    {
-                                        var goToTodayDisabled = IsGoToTodayButtonDisabled(todayYear, todayMonth);
-
-                                        <button @onclick="HandleGoToToday"
-                                                type="button"
-                                                title="@GoToTodayTitle"
-                                                aria-label="@GoToTodayTitle"
-                                                disabled="@goToTodayDisabled"
-                                                style="@Styles?.GoToTodayButton"
-                                                aria-disabled="@goToTodayDisabled"
-                                                class="bit-dtrp-gtb @Classes?.GoToTodayButton">
-                                            <i aria-hidden="true"
-                                               style="@Styles?.GoToTodayIcon"
-                                               class="bit-dtrp-cic @goToTodayIconCss @Classes?.GoToTodayIcon" />
-                                        </button>
-                                    }
-                                    <button @onclick="() => HandleYearChange(true)"
-                                            type="button"
-                                            title="@nextTitle"
-                                            aria-label="@nextTitle"
-                                            disabled="@nextDisabled"
-                                            aria-disabled="@nextDisabled"
-                                            style="@Styles?.NextYearNavButton"
-                                            class="bit-dtrp-nbt @Classes?.NextYearNavButton">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.NextYearNavIcon"
-                                           class="bit-dtrp-cic @nextYearNavIconCss @Classes?.NextYearNavIcon" />
-                                    </button>
-                                    @if (_showTimePickerAsOverlayInternal && ShowTimePicker)
-                                    {
-                                        <button @onclick="@ToggleTimePickerOverlay"
-                                                tabindex="0"
-                                                type="button"
-                                                aria-live="polite"
-                                                aria-atomic="true"
-                                                title="@ShowTimePickerTitle"
-                                                disabled="@(IsEnabled is false)"
-                                                aria-label="@ShowTimePickerTitle"
-                                                aria-disabled="@(IsEnabled is false)"
-                                                style="@Styles?.ShowTimePickerButton"
-                                                class="bit-dtrp-nbt @Classes?.ShowTimePickerButton">
-                                            <i aria-hidden="true"
-                                               style="@Styles?.ShowTimePickerIcon"
-                                               class="bit-dtrp-cic @showTimePickerIconCss @Classes?.ShowTimePickerIcon" />
-                                        </button>
-                                    }
-                                </div>
-                            </div>
-                            <div style="@Styles?.MonthsContainer" class="bit-dtrp-pkc @Classes?.MonthsContainer" role="grid" aria-label="@_currentYear">
-                                @for (var rowIndex = 0; rowIndex <= 2; rowIndex++)
-                                {
-                                    <div style="@Styles?.MonthsRow" class="bit-dtrp-pkr @Classes?.MonthsRow" role="row">
-                                        @for (var cellIndex = 1; cellIndex <= 4; cellIndex++)
-                                        {
-                                            var month = (rowIndex * 4) + cellIndex;
-                                            var monthName = _culture.DateTimeFormat.GetMonthName(month);
-                                            var disabled = IsEnabled is false || IsMonthOutOfMinAndMaxDate(month);
-                                            var selected = month == _currentMonth;
-                                            <button @onclick="() => SelectMonth(month)"
-                                                    type="button"
-                                                    role="gridcell"
-                                                    title="@monthName"
-                                                    aria-readonly="true"
-                                                    aria-label="@monthName"
-                                                    disabled="@disabled"
-                                                    aria-disabled="@disabled"
-                                                    tabindex="@(selected ? 0 : -1)"
-                                                    aria-selected="@(selected ? "true" : "false")"
-                                                    style="@Styles?.MonthButton"
-                                                    class="bit-dtrp-pkb@(GetMonthCellCssClass(month, todayYear, todayMonth)) @Classes?.MonthButton">
-                                                @if (MonthCellTemplate is not null)
-                                                {
-                                                    @MonthCellTemplate(GetDateTimeOfMonthCell(month))
-                                                }
-                                                else
-                                                {
-                                                    @_culture.DateTimeFormat.GetAbbreviatedMonthName(month)
-                                                }
-                                            </button>
-                                        }
-                                    </div>
-                                }
-                            </div>
-                        }
-                        else
-                        {
-                            var prevDisabled = CanChangeYearRange(false) is false;
-                            var nextDisabled = CanChangeYearRange(true) is false;
-                            var toggleTitle = string.Format(YearRangePickerToggleTitle, _yearPickerStartYear, _yearPickerEndYear);
-                            var prevTitle = string.Format(GoToPrevYearRangeTitle, _yearPickerStartYear - 12, _yearPickerStartYear - 1);
-                            var nextTitle = string.Format(GoToNextYearRangeTitle, _yearPickerStartYear + 12, _yearPickerEndYear + 12);
-                            <div style="@Styles?.YearPickerHeader" class="bit-dtrp-pkh @Classes?.YearPickerHeader">
-                                <button @onclick="ToggleBetweenMonthAndYearPicker"
-                                        type="button"
-                                        aria-live="polite"
-                                        aria-atomic="true"
-                                        title="@toggleTitle"
-                                        aria-label="@toggleTitle"
-                                        disabled="@(IsEnabled is false)"
-                                        aria-disabled="@(IsEnabled is false)"
-                                        style="@Styles?.MonthPickerToggleButton"
-                                        class="bit-dtrp-ptb @Classes?.MonthPickerToggleButton">
-                                    @_yearPickerStartYear - @_yearPickerEndYear
-                                </button>
-                                <div style="@Styles?.YearPickerNavWrapper" class="bit-dtrp-nbc @Classes?.YearPickerNavWrapper">
-                                    <button @onclick="() => HandleYearRangeChange(false)"
-                                            type="button"
-                                            title="@prevTitle"
-                                            aria-label="@prevTitle"
-                                            disabled="@prevDisabled"
-                                            aria-disabled="@prevDisabled"
-                                            style="@Styles?.PrevYearRangeNavButton"
-                                            class="bit-dtrp-nbt @Classes?.PrevYearRangeNavButton">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.PrevYearRangeNavIcon"
-                                           class="bit-dtrp-cic @prevYearRangeNavIconCss @Classes?.PrevYearRangeNavIcon" />
-                                    </button>
-                                    @if (ShowGoToToday)
-                                    {
-                                        var goToTodayDisabled = IsGoToTodayButtonDisabled(todayYear, todayMonth, true);
-
-                                        <button @onclick="HandleGoToToday"
-                                                type="button"
-                                                title="@GoToTodayTitle"
-                                                aria-label="@GoToTodayTitle"
-                                                disabled="@goToTodayDisabled"
-                                                style="@Styles?.GoToTodayButton"
-                                                aria-disabled="@goToTodayDisabled"
-                                                class="bit-dtrp-gtb @Classes?.GoToTodayButton">
-                                            <i aria-hidden="true"
-                                               style="@Styles?.GoToTodayIcon"
-                                               class="bit-dtrp-cic @goToTodayIconCss @Classes?.GoToTodayIcon" />
-                                        </button>
-                                    }
-                                    <button @onclick="() => HandleYearRangeChange(true)"
-                                            type="button"
-                                            title="@nextTitle"
-                                            aria-label="@nextTitle"
-                                            disabled="@nextDisabled"
-                                            aria-disabled="@nextDisabled"
-                                            style="@Styles?.NextYearRangeNavButton"
-                                            class="bit-dtrp-nbt @Classes?.NextYearRangeNavButton">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.NextYearRangeNavIcon"
-                                           class="bit-dtrp-cic @nextYearRangeNavIconCss @Classes?.NextYearRangeNavIcon" />
-                                    </button>
-                                </div>
-                            </div>
-                            <div style="@Styles?.YearsContainer" class="bit-dtrp-pkc @Classes?.YearsContainer" role="grid" aria-label="@_yearPickerStartYear - @_yearPickerEndYear">
-                                @for (var rowIndex = 0; rowIndex <= 2; rowIndex++)
-                                {
-                                    <div style="@Styles?.YearsRow" class="bit-dtrp-pkr @Classes?.YearsRow" role="row">
-                                        @for (var cellIndex = 0; cellIndex <= 3; cellIndex++)
-                                        {
-                                            var year = _yearPickerStartYear + (rowIndex * 4) + cellIndex;
-                                            var disabled = IsYearOutOfMinAndMaxDate(year);
-                                            var selected = year == _currentYear;
-                                            <button @onclick="() => SelectYear(year)"
-                                                    type="button"
-                                                    role="gridcell"
-                                                    disabled="@disabled"
-                                                    tabindex="@(selected ? 0 : -1)"
-                                                    aria-readonly="true"
-                                                    aria-disabled="@disabled"
-                                                    aria-selected="@(selected ? "true" : "false")"
-                                                    style="@Styles?.YearButton"
-                                                    class="bit-dtrp-pkb @Classes?.YearButton">
-                                                @if (YearCellTemplate is not null)
-                                                {
-                                                    @YearCellTemplate(year)
-                                                }
-                                                else
-                                                {
-                                                    @year
-                                                }
-                                            </button>
-                                        }
-                                    </div>
-                                }
-                            </div>
-                        }
-                    </div>
-                }
-
-                @if (showTimePicker)
-                {
-                    @if (_showTimePickerAsOverlayInternal is false || _showMonthPickerAsOverlayInternal is false)
-                    {
-                        <div style="@Styles?.Divider" class="bit-dtrp-dvd @Classes?.Divider"></div>
-                    }
-
-                    var startTimeIncreaseHourDisabled = IsIncreaseOrDecreaseButtonDisabled(true, true, true);
-                    var startTimeDecreaseHourDisabled = IsIncreaseOrDecreaseButtonDisabled(false, true, true);
-                    var startTimeIncreaseMinuteDisabled = IsIncreaseOrDecreaseButtonDisabled(true, false, true);
-                    var startTimeDecreaseMinuteDisabled = IsIncreaseOrDecreaseButtonDisabled(false, false, true);
-
-                    var endTimeIncreaseHourDisabled = IsIncreaseOrDecreaseButtonDisabled(true, true, false);
-                    var endTimeDecreaseHourDisabled = IsIncreaseOrDecreaseButtonDisabled(false, true, false);
-                    var endTimeIncreaseMinuteDisabled = IsIncreaseOrDecreaseButtonDisabled(true, false, false);
-                    var endTimeDecreaseMinuteDisabled = IsIncreaseOrDecreaseButtonDisabled(false, false, false);
-
-                    <div style="@Styles?.TimePickerWrapper" class="bit-dtrp-twp @Classes?.TimePickerWrapper">
-                        <div style="@Styles?.TimePickerHeader" class="bit-dtrp-pkh bit-dtrp-tph @Classes?.TimePickerHeader">
-                            <div style="@Styles?.TimePickerNavWrapper" class="bit-dtrp-nbc @Classes?.TimePickerNavWrapper">
-                                @if (_isTimePickerOverlayOnTop)
-                                {
-                                    <button @onclick="ToggleTimePickerOverlay"
-                                            type="button"
-                                            title="@HideTimePickerTitle"
-                                            disabled="@(IsEnabled is false)"
-                                            aria-disabled="@(IsEnabled is false)"
-                                            style="@Styles?.HideTimePickerButton"
-                                            class="bit-dtrp-nbt @Classes?.HideTimePickerButton">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.HideTimePickerIcon"
-                                           class="bit-dtrp-cic @hideTimePickerIconCss @Classes?.HideTimePickerIcon" />
-                                    </button>
-                                }
-                            </div>
-                        </div>
-                        <div style="@Styles?.TimeInputContainer" class="bit-dtrp-tic @Classes?.TimeInputContainer">
-                            <div style="@Styles?.StartTimeInputContainer" class="bit-dtrp-sic @Classes?.StartTimeInputContainer">
-                                <div style="@Styles?.StartTimeHourInputContainer" class="bit-dtrp-tpr @Classes?.StartTimeHourInputContainer">
-                                    <button @onpointerup="HandleOnPointerUpOrOut"
-                                            @onpointerout="HandleOnPointerUpOrOut"
-                                            @onpointerdown="() => HandleOnPointerDown(true, true, true)"
-                                            type="button"
-                                            style="@Styles?.StartTimeIncreaseHourButton"
-                                            class="bit-dtrp-tbt @Classes?.StartTimeIncreaseHourButton"
-                                            disabled="@startTimeIncreaseHourDisabled"
-                                            aria-disabled="@startTimeIncreaseHourDisabled">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.StartTimeIncreaseHourIcon"
-                                           class="bit-dtrp-cic @startIncreaseHourIconCss @Classes?.StartTimeIncreaseHourIcon" />
-                                    </button>
-                                    <input @ref="_startTimeHourInputRef"
-                                           @bind="@_startTimeHourView"
-                                           @bind:event="oninput"
-                                           @onfocus="() => HandleOnHourInputFocus(true)"
-                                           min="0"
-                                           max="@(TimeFormat == BitTimeFormat.TwelveHours ? "12" : "23")"
-                                           type="number"
-                                           inputmode="numeric"
-                                           readonly="@ReadOnly"
-                                           disabled="@(IsEnabled is false)"
-                                           style="@Styles?.StartTimeHourInput"
-                                           aria-disabled="@(IsEnabled is false)"
-                                           class="bit-dtrp-tin @Classes?.StartTimeHourInput"
-                                           autocomplete="@BitAutoCompleteValue.NewPassword" />
-                                    <button @onpointerup="HandleOnPointerUpOrOut"
-                                            @onpointerout="HandleOnPointerUpOrOut"
-                                            @onpointerdown="() => HandleOnPointerDown(false, true, true)"
-                                            type="button"
-                                            style="@Styles?.StartTimeDecreaseHourButton"
-                                            class="bit-dtrp-tbt @Classes?.StartTimeDecreaseHourButton"
-                                            disabled="@startTimeDecreaseHourDisabled"
-                                            aria-disabled="@startTimeDecreaseHourDisabled">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.StartTimeDecreaseHourIcon"
-                                           class="bit-dtrp-cic @startDecreaseHourIconCss @Classes?.StartTimeDecreaseHourIcon" />
-                                    </button>
-                                </div>
-                                <div style="@Styles?.StartTimeHourMinuteSeparator" class="bit-dtrp-tpr bit-dtrp-tdv @Classes?.StartTimeHourMinuteSeparator">:</div>
-                                <div style="@Styles?.StartTimeMinuteInputContainer" class="bit-dtrp-tpr @Classes?.StartTimeMinuteInputContainer">
-                                    <button @onpointerup="HandleOnPointerUpOrOut"
-                                            @onpointerout="HandleOnPointerUpOrOut"
-                                            @onpointerdown="() => HandleOnPointerDown(true, false, true)"
-                                            type="button"
-                                            style="@Styles?.StartTimeIncreaseMinuteButton"
-                                            class="bit-dtrp-tbt @Classes?.StartTimeIncreaseMinuteButton"
-                                            disabled="@startTimeIncreaseMinuteDisabled"
-                                            aria-disabled="@startTimeIncreaseMinuteDisabled">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.StartTimeIncreaseMinuteIcon"
-                                           class="bit-dtrp-cic @startIncreaseMinuteIconCss @Classes?.StartTimeIncreaseMinuteIcon" />
-                                    </button>
-                                    <input @ref="_startTimeMinuteInputRef"
-                                           @bind="@_startTimeMinuteView"
-                                           @bind:event="oninput"
-                                           @onfocus="() => HandleOnMinuteInputFocus(true)"
-                                           min="0"
-                                           max="59"
-                                           type="number"
-                                           inputmode="numeric"
-                                           readonly="@ReadOnly"
-                                           disabled="@(IsEnabled is false)"
-                                           aria-disabled="@(IsEnabled is false)"
-                                           style="@Styles?.StartTimeMinuteInput"
-                                           class="bit-dtrp-tin @Classes?.StartTimeMinuteInput"
-                                           autocomplete="@BitAutoCompleteValue.NewPassword" />
-                                    <button @onpointerup="HandleOnPointerUpOrOut"
-                                            @onpointerout="HandleOnPointerUpOrOut"
-                                            @onpointerdown="() => HandleOnPointerDown(false, false, true)"
-                                            type="button"
-                                            style="@Styles?.StartTimeDecreaseMinuteButton"
-                                            class="bit-dtrp-tbt @Classes?.StartTimeDecreaseMinuteButton"
-                                            disabled="@startTimeDecreaseMinuteDisabled"
-                                            aria-disabled="@startTimeDecreaseMinuteDisabled">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.StartTimeDecreaseMinuteIcon"
-                                           class="bit-dtrp-cic @startDecreaseMinuteIconCss @Classes?.StartTimeDecreaseMinuteIcon" />
-                                    </button>
-                                </div>
-
-                                @if (TimeFormat == BitTimeFormat.TwelveHours)
-                                {
-                                    var amDisabled = (IsEnabled is false || IsAm(_startTimeHour) is true || IsAmPmButtonDisabled(true, true));
-                                    var pmDisabled = (IsEnabled is false || IsAm(_startTimeHour) is false || IsAmPmButtonDisabled(false, true));
-
-                                    <div style="@Styles?.StartTimeAmPmContainer" class="bit-dtrp-tpr bit-dtrp-am-pm @Classes?.StartTimeAmPmContainer">
-
-                                        <button @onclick="() => HandleOnAmClick(true)"
-                                                type="button"
-                                                disabled="@amDisabled"
-                                                aria-disabled="@amDisabled"
-                                                style="@Styles?.StartTimeAmButton"
-                                                class="bit-dtrp-tbt bit-dtrp-bam @(IsAm(_startTimeHour) is true ? "bit-dtrp-bns" : string.Empty) @Classes?.StartTimeAmButton">
-                                            @_culture.DateTimeFormat.AMDesignator
-                                        </button>
-
-                                        <button @onclick="() => HandleOnPmClick(true)"
-                                                type="button"
-                                                disabled="@pmDisabled"
-                                                aria-disabled="@pmDisabled"
-                                                style="@Styles?.StartTimePmButton"
-                                                class="bit-dtrp-tbt bit-dtrp-bpm @(IsAm(_startTimeHour) is false ? "bit-dtrp-bns" : string.Empty) @Classes?.StartTimePmButton">
-                                            @_culture.DateTimeFormat.PMDesignator
-                                        </button>
-                                    </div>
-                                }
-                            </div>
-
-                            <div style="@Styles?.EndTimeInputContainer" class="bit-dtrp-eic @Classes?.EndTimeInputContainer">
-                                <div style="@Styles?.EndTimeHourInputContainer" class="bit-dtrp-tpr @Classes?.EndTimeHourInputContainer">
-                                    <button @onpointerup="HandleOnPointerUpOrOut"
-                                            @onpointerout="HandleOnPointerUpOrOut"
-                                            @onpointerdown="() => HandleOnPointerDown(true, true, false)"
-                                            type="button"
-                                            style="@Styles?.EndTimeIncreaseHourButton"
-                                            class="bit-dtrp-tbt @Classes?.EndTimeIncreaseHourButton"
-                                            disabled="@endTimeIncreaseHourDisabled"
-                                            aria-disabled="@endTimeIncreaseHourDisabled">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.EndTimeIncreaseHourIcon"
-                                           class="bit-dtrp-cic @endIncreaseHourIconCss @Classes?.EndTimeIncreaseHourIcon" />
-                                    </button>
-                                    <input @ref="_endTimeHourInputRef"
-                                           @bind="@_endTimeHourView"
-                                           @bind:event="oninput"
-                                           @onfocus="() => HandleOnHourInputFocus(false)"
-                                           min="0"
-                                           max="@(TimeFormat == BitTimeFormat.TwelveHours ? "12" : "23")"
-                                           type="number"
-                                           inputmode="numeric"
-                                           readonly="@ReadOnly"
-                                           disabled="@(IsEnabled is false)"
-                                           style="@Styles?.EndTimeHourInput"
-                                           aria-disabled="@(IsEnabled is false)"
-                                           class="bit-dtrp-tin @Classes?.EndTimeHourInput"
-                                           autocomplete="@BitAutoCompleteValue.NewPassword" />
-                                    <button @onpointerup="HandleOnPointerUpOrOut"
-                                            @onpointerout="HandleOnPointerUpOrOut"
-                                            @onpointerdown="() => HandleOnPointerDown(false, true, false)"
-                                            type="button"
-                                            style="@Styles?.EndTimeDecreaseHourButton"
-                                            class="bit-dtrp-tbt @Classes?.EndTimeDecreaseHourButton"
-                                            disabled="@endTimeDecreaseHourDisabled"
-                                            aria-disabled="@endTimeDecreaseHourDisabled">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.EndTimeDecreaseHourIcon"
-                                           class="bit-dtrp-cic @endDecreaseHourIconCss @Classes?.EndTimeDecreaseHourIcon" />
-                                    </button>
-                                </div>
-                                <div style="@Styles?.EndTimeHourMinuteSeparator" class="bit-dtrp-tpr bit-dtrp-tdv @Classes?.EndTimeHourMinuteSeparator">:</div>
-                                <div style="@Styles?.EndTimeMinuteInputContainer" class="bit-dtrp-tpr @Classes?.EndTimeMinuteInputContainer">
-                                    <button @onpointerup="HandleOnPointerUpOrOut"
-                                            @onpointerout="HandleOnPointerUpOrOut"
-                                            @onpointerdown="() => HandleOnPointerDown(true, false, false)"
-                                            type="button"
-                                            style="@Styles?.EndTimeIncreaseMinuteButton"
-                                            class="bit-dtrp-tbt @Classes?.EndTimeIncreaseMinuteButton"
-                                            disabled="@endTimeIncreaseMinuteDisabled"
-                                            aria-disabled="@endTimeIncreaseMinuteDisabled">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.EndTimeIncreaseMinuteIcon"
-                                           class="bit-dtrp-cic @endIncreaseMinuteIconCss @Classes?.EndTimeIncreaseMinuteIcon" />
-                                    </button>
-                                    <input @ref="_endTimeMinuteInputRef"
-                                           @bind="@_endTimeMinuteView"
-                                           @bind:event="oninput"
-                                           @onfocus="() => HandleOnMinuteInputFocus(false)"
-                                           min="0"
-                                           max="59"
-                                           type="number"
-                                           inputmode="numeric"
-                                           readonly="@ReadOnly"
-                                           disabled="@(IsEnabled is false)"
-                                           style="@Styles?.EndTimeMinuteInput"
-                                           aria-disabled="@(IsEnabled is false)"
-                                           class="bit-dtrp-tin @Classes?.EndTimeMinuteInput"
-                                           autocomplete="@BitAutoCompleteValue.NewPassword" />
-                                    <button @onpointerup="HandleOnPointerUpOrOut"
-                                            @onpointerout="HandleOnPointerUpOrOut"
-                                            @onpointerdown="() => HandleOnPointerDown(false, false, false)"
-                                            type="button"
-                                            style="@Styles?.EndTimeDecreaseMinuteButton"
-                                            class="bit-dtrp-tbt @Classes?.EndTimeDecreaseMinuteButton"
-                                            disabled="@endTimeDecreaseMinuteDisabled"
-                                            aria-disabled="@endTimeDecreaseMinuteDisabled">
-                                        <i aria-hidden="true"
-                                           style="@Styles?.EndTimeDecreaseMinuteIcon"
-                                           class="bit-dtrp-cic @endDecreaseMinuteIconCss @Classes?.EndTimeDecreaseMinuteIcon" />
-                                    </button>
-                                </div>
-
-                                @if (TimeFormat == BitTimeFormat.TwelveHours)
-                                {
-                                    var amDisabled = (IsEnabled is false || IsAm(_endTimeHour) is false || IsAmPmButtonDisabled(true, false));
-                                    var pmDisabled = (IsEnabled is false || IsAm(_endTimeHour) is false || IsAmPmButtonDisabled(false, false));
-
-                                    <div style="@Styles?.EndTimeAmPmContainer" class="bit-dtrp-tpr bit-dtrp-am-pm @Classes?.EndTimeAmPmContainer">
-                                        <button @onclick="() => HandleOnAmClick(false)"
-                                                type="button"
-                                                disabled="@amDisabled"
-                                                aria-disabled="@amDisabled"
-                                                style="@Styles?.EndTimeAmButton"
-                                                class="bit-dtrp-tbt bit-dtrp-bam @(IsAm(_endTimeHour) is true ? "bit-dtrp-bns" : string.Empty) @Classes?.EndTimeAmButton">
-                                            @_culture.DateTimeFormat.AMDesignator
-                                        </button>
-
-                                        <button @onclick="() => HandleOnPmClick(false)"
-                                                type="button"
-                                                disabled="@pmDisabled"
-                                                aria-disabled="@pmDisabled"
-                                                style="@Styles?.EndTimePmButton"
-                                                class="bit-dtrp-tbt bit-dtrp-bpm @(IsAm(_endTimeHour) is false ? "bit-dtrp-bns" : string.Empty) @Classes?.EndTimePmButton">
-                                            @_culture.DateTimeFormat.PMDesignator
-                                        </button>
-                                    </div>
-                                }
-                            </div>
-                        </div>
-                    </div>
-                }
-            </div>
-        </div>
-    </div>
-</div>
\ No newline at end of file
+<div id="@_calloutId"
+     style="@Styles?.Callout"
+     class="@GetCalloutCssClasses()">
+    <div style="@Styles?.CalloutContainer" class="bit-dtrp-cac @Classes?.CalloutContainer" role="dialog" @attributes=@CalloutHtmlAttributes aria-label="@CalloutAriaLabel">
+        <div style="@Styles?.Group" class="bit-dtrp-grp @Classes?.Group" role="group" aria-label="">
+            <div class="bit-dtrp-sdt" aria-live="polite" aria-atomic="true">Selected date @CurrentValueAsString</div>
+
+            @{
+                var todayYear = _culture.Calendar.GetYear(DateTime.Now);
+                var todayMonth = _culture.Calendar.GetMonth(DateTime.Now);
+                var todayDay = _culture.Calendar.GetDayOfMonth(DateTime.Now);
+                var showTimePicker = ShowTimePicker && ((_showTimePickerAsOverlayInternal && _isTimePickerOverlayOnTop) || _showTimePickerAsOverlayInternal is false);
+            }
+
+            @if (ShowDayPicker())
+            {
+                <div style="@Styles?.DayPickerWrapper" class="bit-dtrp-dwp @Classes?.DayPickerWrapper">
+                    <div style="@Styles?.DayPickerHeader" class="bit-dtrp-pkh @Classes?.DayPickerHeader">
+                        @if (_showMonthPickerAsOverlayInternal || (ShowTimePicker && ShowTimePickerAsOverlay is false))
+                        {
+                            var title = string.Format(MonthPickerToggleTitle, _monthTitle);
+                            <button @onclick="@ToggleMonthPickerOverlay"
+                                    tabindex="0"
+                                    type="button"
+                                    title="@title"
+                                    aria-live="polite"
+                                    aria-atomic="true"
+                                    aria-label="@title"
+                                    style="@Styles?.DayPickerMonth"
+                                    disabled="@(IsEnabled is false)"
+                                    aria-disabled="@(IsEnabled is false)"
+                                    class="bit-dtrp-ptb @Classes?.DayPickerMonth">
+                                @_monthTitle
+                            </button>
+                        }
+                        else
+                        {
+                            <div style="@Styles?.DayPickerMonth"
+                                 class="bit-dtrp-pkt @Classes?.DayPickerMonth"
+                                 aria-live="polite"
+                                 aria-atomic="true"
+                                 tabindex="-1">
+                                @_monthTitle
+                            </div>
+                        }
+                        @{
+                            var prevDisabled = CanChangeMonth(false) is false;
+                            var nextDisabled = CanChangeMonth(true) is false;
+                        }
+                        <div class="bit-dtrp-nbc">
+                            <button @onclick="() => HandleMonthChange(false)"
+                                    type="button"
+                                    disabled="@prevDisabled"
+                                    title="@GoToPrevMonthTitle"
+                                    aria-disabled="@prevDisabled"
+                                    style="@Styles?.PrevMonthNavButton"
+                                    class="bit-dtrp-nbt @Classes?.PrevMonthNavButton">
+                                <i aria-hidden="true"
+                                   style="@Styles?.PrevMonthNavIcon"
+                                   class="bit-dtrp-cic @prevMonthNavIconCss @Classes?.PrevMonthNavIcon" />
+                            </button>
+                            @if (ShowGoToToday && (_showMonthPickerAsOverlayInternal || (ShowTimePicker && _showTimePickerAsOverlayInternal is false)))
+                            {
+                                var goToTodayDisabled = IsGoToTodayButtonDisabled(todayYear, todayMonth);
+
+                                <button @onclick="HandleGoToToday"
+                                        type="button"
+                                        title="@GoToTodayTitle"
+                                        disabled="@goToTodayDisabled"
+                                        style="@Styles?.GoToTodayButton"
+                                        aria-disabled="@goToTodayDisabled"
+                                        class="bit-dtrp-gtb @Classes?.GoToTodayButton">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.GoToTodayIcon"
+                                       class="bit-dtrp-cic @goToTodayIconCss @Classes?.GoToTodayIcon" />
+                                </button>
+                            }
+                            <button @onclick="() => HandleMonthChange(true)"
+                                    type="button"
+                                    disabled="@nextDisabled"
+                                    title="@GoToNextMonthTitle"
+                                    aria-disabled="@nextDisabled"
+                                    style="@Styles?.NextMonthNavButton"
+                                    class="bit-dtrp-nbt @Classes?.NextMonthNavButton">
+                                <i aria-hidden="true"
+                                   style="@Styles?.NextMonthNavIcon"
+                                   class="bit-dtrp-cic @nextMonthNavIconCss @Classes?.NextMonthNavIcon" />
+                            </button>
+                            @if (ShowCloseButton && Standalone is false)
+                            {
+                                <button @onclick="CloseCallout"
+                                        type="button"
+                                        style="@Styles?.CloseButton"
+                                        class="bit-dtrp-nbt @Classes?.CloseButton"
+                                        title="@CloseButtonTitle"
+                                        aria-label="@CloseButtonTitle">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.CloseButtonIcon"
+                                       class="bit-dtrp-cic @closeButtonIconCss @Classes?.CloseButtonIcon" />
+                                </button>
+                            }
+                            @if (_showMonthPickerAsOverlayInternal && _showTimePickerAsOverlayInternal && ShowTimePicker)
+                            {
+                                <button @onclick="@ToggleTimePickerOverlay"
+                                        tabindex="0"
+                                        type="button"
+                                        aria-live="polite"
+                                        aria-atomic="true"
+                                        title="@ShowTimePickerTitle"
+                                        disabled="@(IsEnabled is false)"
+                                        aria-label="@ShowTimePickerTitle"
+                                        aria-disabled="@(IsEnabled is false)"
+                                        style="@Styles?.ShowTimePickerButton"
+                                        class="bit-dtrp-nbt @Classes?.ShowTimePickerButton">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.ShowTimePickerIcon"
+                                       class="bit-dtrp-cic @showTimePickerIconCss @Classes?.ShowTimePickerIcon" />
+                                </button>
+                            }
+                        </div>
+                    </div>
+
+                    <div style="@Styles?.DaysHeaderRow" class="bit-dtrp-dgh @Classes?.DaysHeaderRow">
+                        @if (ShowWeekNumbers)
+                        {
+                            <div style="@Styles?.WeekNumbersHeader" class="bit-dtrp-wlb @Classes?.WeekNumbersHeader"></div>
+                        }
+
+                        @for (var index = 0; index < 7; index++)
+                        {
+                            var dayOfWeekName = _culture.DateTimeFormat.GetShortestDayName(GetDayOfWeek(index));
+                            <div scope="col"
+                                 title="@dayOfWeekName"
+                                 style="@Styles?.WeekNumbersHeader"
+                                 class="bit-dtrp-wlb @Classes?.WeekNumbersHeader">
+                                @dayOfWeekName[0]
+                            </div>
+                        }
+                    </div>
+
+                    @for (var week = 0; week < 6; week++)
+                    {
+                        //to ignore the last empty week out of month || to ignore the first whole week out of month
+                        if (_daysOfCurrentMonth[week, 0].HasValue is false) continue;
+
+                        <div style="@Styles?.DaysRow" class="bit-dtrp-dgr @Classes?.DaysRow">
+                            @if (ShowWeekNumbers)
+                            {
+                                var weekNumber = GetWeekNumber(week);
+                                var title = string.Format(WeekNumberTitle, weekNumber);
+                                <div style="@Styles?.WeekNumber"
+                                     scope="row"
+                                     title="title"
+                                     aria-label="title"
+                                     class="bit-dtrp-wnm @Classes?.WeekNumber">
+                                    @weekNumber
+                                </div>
+                            }
+
+                            @for (var day = 0; day < 7; day++)
+                            {
+                                var date = _daysOfCurrentMonth[week, day]!.Value;
+                                var disabled = IsEnabled is false || IsWeekDayOutOfMinAndMaxDate(date);
+                                var isSelected = IsBetweenTwoSelectedDate(date);
+                                var (style, klass) = GetDayButtonCss(date);
+                                <button @onclick="() => SelectDate(date)"
+                                        type="button"
+                                        role="gridcell"
+                                        aria-readonly="true"
+                                        style="@style @Styles?.DayButton"
+                                        class="bit-dtrp-dbt@(klass) @Classes?.DayButton"
+                                        disabled="@disabled"
+                                        aria-disabled="@disabled"
+                                        tabindex="@(isSelected ? 0 : -1)"
+                                        aria-selected="@(isSelected ? "true" : "false")">
+                                    @if (DayCellTemplate is not null)
+                                    {
+                                        @DayCellTemplate(GetDateTimeOfDayCell(date))
+                                    }
+                                    else
+                                    {
+                                        @GetDayOfCurrentMonth(date)
+                                    }
+                                </button>
+                            }
+                        </div>
+                    }
+                </div>
+            }
+
+            @if (ShowMonthPicker())
+            {
+                @if (_showMonthPickerAsOverlayInternal is false)
+                {
+                    <div style="@Styles?.Divider" class="bit-dtrp-dvd @Classes?.Divider"></div>
+                }
+
+                <div style="@Styles?.YearMonthPickerWrapper" class="bit-dtrp-mwp @Classes?.YearMonthPickerWrapper">
+                    @if (_showMonthPicker)
+                    {
+                        var prevDisabled = CanChangeYear(false) is false;
+                        var nextDisabled = CanChangeYear(true) is false;
+                        var toggleTitle = string.Format(YearPickerToggleTitle, _currentYear);
+                        var prevTitle = string.Format(GoToPrevYearTitle, _currentYear - 1);
+                        var nextTitle = string.Format(GoToNextYearTitle, _currentYear + 1);
+                        <div style="@Styles?.MonthPickerHeader" class="bit-dtrp-pkh @Classes?.MonthPickerHeader">
+                            <button @onclick="ToggleBetweenMonthAndYearPicker"
+                                    tabindex="0"
+                                    type="button"
+                                    aria-atomic="true"
+                                    aria-live="polite"
+                                    title="@toggleTitle"
+                                    aria-label="@toggleTitle"
+                                    disabled="@(IsEnabled is false)"
+                                    aria-disabled="@(IsEnabled is false)"
+                                    style="@Styles?.YearPickerToggleButton"
+                                    class="bit-dtrp-ptb @Classes?.YearPickerToggleButton">
+                                @_currentYear
+                            </button>
+                            <div style="@Styles?.MonthPickerNavWrapper" class="bit-dtrp-nbc @Classes?.MonthPickerNavWrapper">
+                                <button @onclick="() => HandleYearChange(false)"
+                                        type="button"
+                                        title="@prevTitle"
+                                        aria-label="@prevTitle"
+                                        disabled="@prevDisabled"
+                                        aria-disabled="@prevDisabled"
+                                        style="@Styles?.PrevYearNavButton"
+                                        class="bit-dtrp-nbt @Classes?.PrevYearNavButton">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.PrevYearNavIcon"
+                                       class="bit-dtrp-cic @prevYearNavIconCss @Classes?.PrevYearNavIcon" />
+                                </button>
+                                @if (ShowGoToToday)
+                                {
+                                    var goToTodayDisabled = IsGoToTodayButtonDisabled(todayYear, todayMonth);
+
+                                    <button @onclick="HandleGoToToday"
+                                            type="button"
+                                            title="@GoToTodayTitle"
+                                            aria-label="@GoToTodayTitle"
+                                            disabled="@goToTodayDisabled"
+                                            style="@Styles?.GoToTodayButton"
+                                            aria-disabled="@goToTodayDisabled"
+                                            class="bit-dtrp-gtb @Classes?.GoToTodayButton">
+                                        <i aria-hidden="true"
+                                           style="@Styles?.GoToTodayIcon"
+                                           class="bit-dtrp-cic @goToTodayIconCss @Classes?.GoToTodayIcon" />
+                                    </button>
+                                }
+                                <button @onclick="() => HandleYearChange(true)"
+                                        type="button"
+                                        title="@nextTitle"
+                                        aria-label="@nextTitle"
+                                        disabled="@nextDisabled"
+                                        aria-disabled="@nextDisabled"
+                                        style="@Styles?.NextYearNavButton"
+                                        class="bit-dtrp-nbt @Classes?.NextYearNavButton">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.NextYearNavIcon"
+                                       class="bit-dtrp-cic @nextYearNavIconCss @Classes?.NextYearNavIcon" />
+                                </button>
+                                @if (_showTimePickerAsOverlayInternal && ShowTimePicker)
+                                {
+                                    <button @onclick="@ToggleTimePickerOverlay"
+                                            tabindex="0"
+                                            type="button"
+                                            aria-live="polite"
+                                            aria-atomic="true"
+                                            title="@ShowTimePickerTitle"
+                                            disabled="@(IsEnabled is false)"
+                                            aria-label="@ShowTimePickerTitle"
+                                            aria-disabled="@(IsEnabled is false)"
+                                            style="@Styles?.ShowTimePickerButton"
+                                            class="bit-dtrp-nbt @Classes?.ShowTimePickerButton">
+                                        <i aria-hidden="true"
+                                           style="@Styles?.ShowTimePickerIcon"
+                                           class="bit-dtrp-cic @showTimePickerIconCss @Classes?.ShowTimePickerIcon" />
+                                    </button>
+                                }
+                            </div>
+                        </div>
+                        <div style="@Styles?.MonthsContainer" class="bit-dtrp-pkc @Classes?.MonthsContainer" role="grid" aria-label="@_currentYear">
+                            @for (var rowIndex = 0; rowIndex <= 2; rowIndex++)
+                            {
+                                <div style="@Styles?.MonthsRow" class="bit-dtrp-pkr @Classes?.MonthsRow" role="row">
+                                    @for (var cellIndex = 1; cellIndex <= 4; cellIndex++)
+                                    {
+                                        var month = (rowIndex * 4) + cellIndex;
+                                        var monthName = _culture.DateTimeFormat.GetMonthName(month);
+                                        var disabled = IsEnabled is false || IsMonthOutOfMinAndMaxDate(month);
+                                        var selected = month == _currentMonth;
+                                        <button @onclick="() => SelectMonth(month)"
+                                                type="button"
+                                                role="gridcell"
+                                                title="@monthName"
+                                                aria-readonly="true"
+                                                aria-label="@monthName"
+                                                disabled="@disabled"
+                                                aria-disabled="@disabled"
+                                                tabindex="@(selected ? 0 : -1)"
+                                                aria-selected="@(selected ? "true" : "false")"
+                                                style="@Styles?.MonthButton"
+                                                class="bit-dtrp-pkb@(GetMonthCellCssClass(month, todayYear, todayMonth)) @Classes?.MonthButton">
+                                            @if (MonthCellTemplate is not null)
+                                            {
+                                                @MonthCellTemplate(GetDateTimeOfMonthCell(month))
+                                            }
+                                            else
+                                            {
+                                                @_culture.DateTimeFormat.GetAbbreviatedMonthName(month)
+                                            }
+                                        </button>
+                                    }
+                                </div>
+                            }
+                        </div>
+                    }
+                    else
+                    {
+                        var prevDisabled = CanChangeYearRange(false) is false;
+                        var nextDisabled = CanChangeYearRange(true) is false;
+                        var toggleTitle = string.Format(YearRangePickerToggleTitle, _yearPickerStartYear, _yearPickerEndYear);
+                        var prevTitle = string.Format(GoToPrevYearRangeTitle, _yearPickerStartYear - 12, _yearPickerStartYear - 1);
+                        var nextTitle = string.Format(GoToNextYearRangeTitle, _yearPickerStartYear + 12, _yearPickerEndYear + 12);
+                        <div style="@Styles?.YearPickerHeader" class="bit-dtrp-pkh @Classes?.YearPickerHeader">
+                            <button @onclick="ToggleBetweenMonthAndYearPicker"
+                                    type="button"
+                                    aria-live="polite"
+                                    aria-atomic="true"
+                                    title="@toggleTitle"
+                                    aria-label="@toggleTitle"
+                                    disabled="@(IsEnabled is false)"
+                                    aria-disabled="@(IsEnabled is false)"
+                                    style="@Styles?.MonthPickerToggleButton"
+                                    class="bit-dtrp-ptb @Classes?.MonthPickerToggleButton">
+                                @_yearPickerStartYear - @_yearPickerEndYear
+                            </button>
+                            <div style="@Styles?.YearPickerNavWrapper" class="bit-dtrp-nbc @Classes?.YearPickerNavWrapper">
+                                <button @onclick="() => HandleYearRangeChange(false)"
+                                        type="button"
+                                        title="@prevTitle"
+                                        aria-label="@prevTitle"
+                                        disabled="@prevDisabled"
+                                        aria-disabled="@prevDisabled"
+                                        style="@Styles?.PrevYearRangeNavButton"
+                                        class="bit-dtrp-nbt @Classes?.PrevYearRangeNavButton">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.PrevYearRangeNavIcon"
+                                       class="bit-dtrp-cic @prevYearRangeNavIconCss @Classes?.PrevYearRangeNavIcon" />
+                                </button>
+                                @if (ShowGoToToday)
+                                {
+                                    var goToTodayDisabled = IsGoToTodayButtonDisabled(todayYear, todayMonth, true);
+
+                                    <button @onclick="HandleGoToToday"
+                                            type="button"
+                                            title="@GoToTodayTitle"
+                                            aria-label="@GoToTodayTitle"
+                                            disabled="@goToTodayDisabled"
+                                            style="@Styles?.GoToTodayButton"
+                                            aria-disabled="@goToTodayDisabled"
+                                            class="bit-dtrp-gtb @Classes?.GoToTodayButton">
+                                        <i aria-hidden="true"
+                                           style="@Styles?.GoToTodayIcon"
+                                           class="bit-dtrp-cic @goToTodayIconCss @Classes?.GoToTodayIcon" />
+                                    </button>
+                                }
+                                <button @onclick="() => HandleYearRangeChange(true)"
+                                        type="button"
+                                        title="@nextTitle"
+                                        aria-label="@nextTitle"
+                                        disabled="@nextDisabled"
+                                        aria-disabled="@nextDisabled"
+                                        style="@Styles?.NextYearRangeNavButton"
+                                        class="bit-dtrp-nbt @Classes?.NextYearRangeNavButton">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.NextYearRangeNavIcon"
+                                       class="bit-dtrp-cic @nextYearRangeNavIconCss @Classes?.NextYearRangeNavIcon" />
+                                </button>
+                            </div>
+                        </div>
+                        <div style="@Styles?.YearsContainer" class="bit-dtrp-pkc @Classes?.YearsContainer" role="grid" aria-label="@_yearPickerStartYear - @_yearPickerEndYear">
+                            @for (var rowIndex = 0; rowIndex <= 2; rowIndex++)
+                            {
+                                <div style="@Styles?.YearsRow" class="bit-dtrp-pkr @Classes?.YearsRow" role="row">
+                                    @for (var cellIndex = 0; cellIndex <= 3; cellIndex++)
+                                    {
+                                        var year = _yearPickerStartYear + (rowIndex * 4) + cellIndex;
+                                        var disabled = IsYearOutOfMinAndMaxDate(year);
+                                        var selected = year == _currentYear;
+                                        <button @onclick="() => SelectYear(year)"
+                                                type="button"
+                                                role="gridcell"
+                                                disabled="@disabled"
+                                                tabindex="@(selected ? 0 : -1)"
+                                                aria-readonly="true"
+                                                aria-disabled="@disabled"
+                                                aria-selected="@(selected ? "true" : "false")"
+                                                style="@Styles?.YearButton"
+                                                class="bit-dtrp-pkb @Classes?.YearButton">
+                                            @if (YearCellTemplate is not null)
+                                            {
+                                                @YearCellTemplate(year)
+                                            }
+                                            else
+                                            {
+                                                @year
+                                            }
+                                        </button>
+                                    }
+                                </div>
+                            }
+                        </div>
+                    }
+                </div>
+            }
+
+            @if (showTimePicker)
+            {
+                @if (_showTimePickerAsOverlayInternal is false || _showMonthPickerAsOverlayInternal is false)
+                {
+                    <div style="@Styles?.Divider" class="bit-dtrp-dvd @Classes?.Divider"></div>
+                }
+
+                var startTimeIncreaseHourDisabled = IsIncreaseOrDecreaseButtonDisabled(true, true, true);
+                var startTimeDecreaseHourDisabled = IsIncreaseOrDecreaseButtonDisabled(false, true, true);
+                var startTimeIncreaseMinuteDisabled = IsIncreaseOrDecreaseButtonDisabled(true, false, true);
+                var startTimeDecreaseMinuteDisabled = IsIncreaseOrDecreaseButtonDisabled(false, false, true);
+
+                var endTimeIncreaseHourDisabled = IsIncreaseOrDecreaseButtonDisabled(true, true, false);
+                var endTimeDecreaseHourDisabled = IsIncreaseOrDecreaseButtonDisabled(false, true, false);
+                var endTimeIncreaseMinuteDisabled = IsIncreaseOrDecreaseButtonDisabled(true, false, false);
+                var endTimeDecreaseMinuteDisabled = IsIncreaseOrDecreaseButtonDisabled(false, false, false);
+
+                <div style="@Styles?.TimePickerWrapper" class="bit-dtrp-twp @Classes?.TimePickerWrapper">
+                    <div style="@Styles?.TimePickerHeader" class="bit-dtrp-pkh bit-dtrp-tph @Classes?.TimePickerHeader">
+                        <div style="@Styles?.TimePickerNavWrapper" class="bit-dtrp-nbc @Classes?.TimePickerNavWrapper">
+                            @if (_isTimePickerOverlayOnTop)
+                            {
+                                <button @onclick="ToggleTimePickerOverlay"
+                                        type="button"
+                                        title="@HideTimePickerTitle"
+                                        disabled="@(IsEnabled is false)"
+                                        aria-disabled="@(IsEnabled is false)"
+                                        style="@Styles?.HideTimePickerButton"
+                                        class="bit-dtrp-nbt @Classes?.HideTimePickerButton">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.HideTimePickerIcon"
+                                       class="bit-dtrp-cic @hideTimePickerIconCss @Classes?.HideTimePickerIcon" />
+                                </button>
+                            }
+                        </div>
+                    </div>
+                    <div style="@Styles?.TimeInputContainer" class="bit-dtrp-tic @Classes?.TimeInputContainer">
+                        <div style="@Styles?.StartTimeInputContainer" class="bit-dtrp-sic @Classes?.StartTimeInputContainer">
+                            <div style="@Styles?.StartTimeHourInputContainer" class="bit-dtrp-tpr @Classes?.StartTimeHourInputContainer">
+                                <button @onpointerup="HandleOnPointerUpOrOut"
+                                        @onpointerout="HandleOnPointerUpOrOut"
+                                        @onpointerdown="() => HandleOnPointerDown(true, true, true)"
+                                        type="button"
+                                        style="@Styles?.StartTimeIncreaseHourButton"
+                                        class="bit-dtrp-tbt @Classes?.StartTimeIncreaseHourButton"
+                                        disabled="@startTimeIncreaseHourDisabled"
+                                        aria-disabled="@startTimeIncreaseHourDisabled">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.StartTimeIncreaseHourIcon"
+                                       class="bit-dtrp-cic @startIncreaseHourIconCss @Classes?.StartTimeIncreaseHourIcon" />
+                                </button>
+                                <input @ref="_startTimeHourInputRef"
+                                       @bind="@_startTimeHourView"
+                                       @bind:event="oninput"
+                                       @onfocus="() => HandleOnHourInputFocus(true)"
+                                       min="0"
+                                       max="@(TimeFormat == BitTimeFormat.TwelveHours ? "12" : "23")"
+                                       type="number"
+                                       inputmode="numeric"
+                                       readonly="@ReadOnly"
+                                       disabled="@(IsEnabled is false)"
+                                       style="@Styles?.StartTimeHourInput"
+                                       aria-disabled="@(IsEnabled is false)"
+                                       class="bit-dtrp-tin @Classes?.StartTimeHourInput"
+                                       autocomplete="@BitAutoCompleteValue.NewPassword" />
+                                <button @onpointerup="HandleOnPointerUpOrOut"
+                                        @onpointerout="HandleOnPointerUpOrOut"
+                                        @onpointerdown="() => HandleOnPointerDown(false, true, true)"
+                                        type="button"
+                                        style="@Styles?.StartTimeDecreaseHourButton"
+                                        class="bit-dtrp-tbt @Classes?.StartTimeDecreaseHourButton"
+                                        disabled="@startTimeDecreaseHourDisabled"
+                                        aria-disabled="@startTimeDecreaseHourDisabled">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.StartTimeDecreaseHourIcon"
+                                       class="bit-dtrp-cic @startDecreaseHourIconCss @Classes?.StartTimeDecreaseHourIcon" />
+                                </button>
+                            </div>
+                            <div style="@Styles?.StartTimeHourMinuteSeparator" class="bit-dtrp-tpr bit-dtrp-tdv @Classes?.StartTimeHourMinuteSeparator">:</div>
+                            <div style="@Styles?.StartTimeMinuteInputContainer" class="bit-dtrp-tpr @Classes?.StartTimeMinuteInputContainer">
+                                <button @onpointerup="HandleOnPointerUpOrOut"
+                                        @onpointerout="HandleOnPointerUpOrOut"
+                                        @onpointerdown="() => HandleOnPointerDown(true, false, true)"
+                                        type="button"
+                                        style="@Styles?.StartTimeIncreaseMinuteButton"
+                                        class="bit-dtrp-tbt @Classes?.StartTimeIncreaseMinuteButton"
+                                        disabled="@startTimeIncreaseMinuteDisabled"
+                                        aria-disabled="@startTimeIncreaseMinuteDisabled">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.StartTimeIncreaseMinuteIcon"
+                                       class="bit-dtrp-cic @startIncreaseMinuteIconCss @Classes?.StartTimeIncreaseMinuteIcon" />
+                                </button>
+                                <input @ref="_startTimeMinuteInputRef"
+                                       @bind="@_startTimeMinuteView"
+                                       @bind:event="oninput"
+                                       @onfocus="() => HandleOnMinuteInputFocus(true)"
+                                       min="0"
+                                       max="59"
+                                       type="number"
+                                       inputmode="numeric"
+                                       readonly="@ReadOnly"
+                                       disabled="@(IsEnabled is false)"
+                                       aria-disabled="@(IsEnabled is false)"
+                                       style="@Styles?.StartTimeMinuteInput"
+                                       class="bit-dtrp-tin @Classes?.StartTimeMinuteInput"
+                                       autocomplete="@BitAutoCompleteValue.NewPassword" />
+                                <button @onpointerup="HandleOnPointerUpOrOut"
+                                        @onpointerout="HandleOnPointerUpOrOut"
+                                        @onpointerdown="() => HandleOnPointerDown(false, false, true)"
+                                        type="button"
+                                        style="@Styles?.StartTimeDecreaseMinuteButton"
+                                        class="bit-dtrp-tbt @Classes?.StartTimeDecreaseMinuteButton"
+                                        disabled="@startTimeDecreaseMinuteDisabled"
+                                        aria-disabled="@startTimeDecreaseMinuteDisabled">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.StartTimeDecreaseMinuteIcon"
+                                       class="bit-dtrp-cic @startDecreaseMinuteIconCss @Classes?.StartTimeDecreaseMinuteIcon" />
+                                </button>
+                            </div>
+
+                            @if (TimeFormat == BitTimeFormat.TwelveHours)
+                            {
+                                var amDisabled = (IsEnabled is false || IsAm(_startTimeHour) is true || IsAmPmButtonDisabled(true, true));
+                                var pmDisabled = (IsEnabled is false || IsAm(_startTimeHour) is false || IsAmPmButtonDisabled(false, true));
+
+                                <div style="@Styles?.StartTimeAmPmContainer" class="bit-dtrp-tpr bit-dtrp-am-pm @Classes?.StartTimeAmPmContainer">
+
+                                    <button @onclick="() => HandleOnAmClick(true)"
+                                            type="button"
+                                            disabled="@amDisabled"
+                                            aria-disabled="@amDisabled"
+                                            style="@Styles?.StartTimeAmButton"
+                                            class="bit-dtrp-tbt bit-dtrp-bam @(IsAm(_startTimeHour) is true ? "bit-dtrp-bns" : string.Empty) @Classes?.StartTimeAmButton">
+                                        @_culture.DateTimeFormat.AMDesignator
+                                    </button>
+
+                                    <button @onclick="() => HandleOnPmClick(true)"
+                                            type="button"
+                                            disabled="@pmDisabled"
+                                            aria-disabled="@pmDisabled"
+                                            style="@Styles?.StartTimePmButton"
+                                            class="bit-dtrp-tbt bit-dtrp-bpm @(IsAm(_startTimeHour) is false ? "bit-dtrp-bns" : string.Empty) @Classes?.StartTimePmButton">
+                                        @_culture.DateTimeFormat.PMDesignator
+                                    </button>
+                                </div>
+                            }
+                        </div>
+
+                        <div style="@Styles?.EndTimeInputContainer" class="bit-dtrp-eic @Classes?.EndTimeInputContainer">
+                            <div style="@Styles?.EndTimeHourInputContainer" class="bit-dtrp-tpr @Classes?.EndTimeHourInputContainer">
+                                <button @onpointerup="HandleOnPointerUpOrOut"
+                                        @onpointerout="HandleOnPointerUpOrOut"
+                                        @onpointerdown="() => HandleOnPointerDown(true, true, false)"
+                                        type="button"
+                                        style="@Styles?.EndTimeIncreaseHourButton"
+                                        class="bit-dtrp-tbt @Classes?.EndTimeIncreaseHourButton"
+                                        disabled="@endTimeIncreaseHourDisabled"
+                                        aria-disabled="@endTimeIncreaseHourDisabled">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.EndTimeIncreaseHourIcon"
+                                       class="bit-dtrp-cic @endIncreaseHourIconCss @Classes?.EndTimeIncreaseHourIcon" />
+                                </button>
+                                <input @ref="_endTimeHourInputRef"
+                                       @bind="@_endTimeHourView"
+                                       @bind:event="oninput"
+                                       @onfocus="() => HandleOnHourInputFocus(false)"
+                                       min="0"
+                                       max="@(TimeFormat == BitTimeFormat.TwelveHours ? "12" : "23")"
+                                       type="number"
+                                       inputmode="numeric"
+                                       readonly="@ReadOnly"
+                                       disabled="@(IsEnabled is false)"
+                                       style="@Styles?.EndTimeHourInput"
+                                       aria-disabled="@(IsEnabled is false)"
+                                       class="bit-dtrp-tin @Classes?.EndTimeHourInput"
+                                       autocomplete="@BitAutoCompleteValue.NewPassword" />
+                                <button @onpointerup="HandleOnPointerUpOrOut"
+                                        @onpointerout="HandleOnPointerUpOrOut"
+                                        @onpointerdown="() => HandleOnPointerDown(false, true, false)"
+                                        type="button"
+                                        style="@Styles?.EndTimeDecreaseHourButton"
+                                        class="bit-dtrp-tbt @Classes?.EndTimeDecreaseHourButton"
+                                        disabled="@endTimeDecreaseHourDisabled"
+                                        aria-disabled="@endTimeDecreaseHourDisabled">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.EndTimeDecreaseHourIcon"
+                                       class="bit-dtrp-cic @endDecreaseHourIconCss @Classes?.EndTimeDecreaseHourIcon" />
+                                </button>
+                            </div>
+                            <div style="@Styles?.EndTimeHourMinuteSeparator" class="bit-dtrp-tpr bit-dtrp-tdv @Classes?.EndTimeHourMinuteSeparator">:</div>
+                            <div style="@Styles?.EndTimeMinuteInputContainer" class="bit-dtrp-tpr @Classes?.EndTimeMinuteInputContainer">
+                                <button @onpointerup="HandleOnPointerUpOrOut"
+                                        @onpointerout="HandleOnPointerUpOrOut"
+                                        @onpointerdown="() => HandleOnPointerDown(true, false, false)"
+                                        type="button"
+                                        style="@Styles?.EndTimeIncreaseMinuteButton"
+                                        class="bit-dtrp-tbt @Classes?.EndTimeIncreaseMinuteButton"
+                                        disabled="@endTimeIncreaseMinuteDisabled"
+                                        aria-disabled="@endTimeIncreaseMinuteDisabled">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.EndTimeIncreaseMinuteIcon"
+                                       class="bit-dtrp-cic @endIncreaseMinuteIconCss @Classes?.EndTimeIncreaseMinuteIcon" />
+                                </button>
+                                <input @ref="_endTimeMinuteInputRef"
+                                       @bind="@_endTimeMinuteView"
+                                       @bind:event="oninput"
+                                       @onfocus="() => HandleOnMinuteInputFocus(false)"
+                                       min="0"
+                                       max="59"
+                                       type="number"
+                                       inputmode="numeric"
+                                       readonly="@ReadOnly"
+                                       disabled="@(IsEnabled is false)"
+                                       style="@Styles?.EndTimeMinuteInput"
+                                       aria-disabled="@(IsEnabled is false)"
+                                       class="bit-dtrp-tin @Classes?.EndTimeMinuteInput"
+                                       autocomplete="@BitAutoCompleteValue.NewPassword" />
+                                <button @onpointerup="HandleOnPointerUpOrOut"
+                                        @onpointerout="HandleOnPointerUpOrOut"
+                                        @onpointerdown="() => HandleOnPointerDown(false, false, false)"
+                                        type="button"
+                                        style="@Styles?.EndTimeDecreaseMinuteButton"
+                                        class="bit-dtrp-tbt @Classes?.EndTimeDecreaseMinuteButton"
+                                        disabled="@endTimeDecreaseMinuteDisabled"
+                                        aria-disabled="@endTimeDecreaseMinuteDisabled">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.EndTimeDecreaseMinuteIcon"
+                                       class="bit-dtrp-cic @endDecreaseMinuteIconCss @Classes?.EndTimeDecreaseMinuteIcon" />
+                                </button>
+                            </div>
+
+                            @if (TimeFormat == BitTimeFormat.TwelveHours)
+                            {
+                                var amDisabled = (IsEnabled is false || IsAm(_endTimeHour) is false || IsAmPmButtonDisabled(true, false));
+                                var pmDisabled = (IsEnabled is false || IsAm(_endTimeHour) is false || IsAmPmButtonDisabled(false, false));
+
+                                <div style="@Styles?.EndTimeAmPmContainer" class="bit-dtrp-tpr bit-dtrp-am-pm @Classes?.EndTimeAmPmContainer">
+                                    <button @onclick="() => HandleOnAmClick(false)"
+                                            type="button"
+                                            disabled="@amDisabled"
+                                            aria-disabled="@amDisabled"
+                                            style="@Styles?.EndTimeAmButton"
+                                            class="bit-dtrp-tbt bit-dtrp-bam @(IsAm(_endTimeHour) is true ? "bit-dtrp-bns" : string.Empty) @Classes?.EndTimeAmButton">
+                                        @_culture.DateTimeFormat.AMDesignator
+                                    </button>
+
+                                    <button @onclick="() => HandleOnPmClick(false)"
+                                            type="button"
+                                            disabled="@pmDisabled"
+                                            aria-disabled="@pmDisabled"
+                                            style="@Styles?.EndTimePmButton"
+                                            class="bit-dtrp-tbt bit-dtrp-bpm @(IsAm(_endTimeHour) is false ? "bit-dtrp-bns" : string.Empty) @Classes?.EndTimePmButton">
+                                        @_culture.DateTimeFormat.PMDesignator
+                                    </button>
+                                </div>
+                            }
+                        </div>
+                    </div>
+                </div>
+            }
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
index c91c6f3d4b..cbce6ce930 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
@@ -35,6 +35,7 @@ public partial class BitDateRangePicker : BitInputBase<BitDateRangePickerValue?>
     private string? _labelId;
     private string? _inputId;
     private string _calloutId = string.Empty;
+    private string _overlayId = string.Empty;
     private string _dateRangePickerId = string.Empty;
     private ElementReference _startTimeHourInputRef = default!;
     private ElementReference _startTimeMinuteInputRef = default!;
@@ -810,6 +811,7 @@ protected override void OnInitialized()
         _dateRangePickerId = $"DateRangePicker-{UniqueId}";
         _labelId = $"{_dateRangePickerId}-label";
         _calloutId = $"{_dateRangePickerId}-callout";
+        _overlayId = $"{_dateRangePickerId}-overlay";
         _inputId = $"{_dateRangePickerId}-input";
 
         OnValueChanged += HandleOnValueChanged;
@@ -2280,6 +2282,7 @@ private async Task<bool> ToggleCallout()
             component: null,
             calloutId: _calloutId,
             callout: null,
+            overlayId: _overlayId,
             isCalloutOpen: IsOpen,
             responsiveMode: Responsive ? BitResponsiveMode.Top : BitResponsiveMode.None,
             dropDirection: BitDropDirection.TopAndBottom,
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
index 575e30b424..7cd51512be 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
@@ -1,326 +1,327 @@
-@namespace Bit.BlazorUI
-@inherits BitInputBase<TValue>
-@typeparam TItem
-@typeparam TValue
+@namespace Bit.BlazorUI
+@inherits BitInputBase<TValue>
+@typeparam TItem
+@typeparam TValue
+
+@{
+    var chipsRemoveIconCss = BitIconInfo.From(ChipsRemoveIcon, ChipsRemoveIconName ?? "Cancel")?.GetCssClasses();
+    var clearButtonIconCss = BitIconInfo.From(ClearButtonIcon, ClearButtonIconName ?? "Cancel")?.GetCssClasses();
+    var caretDownIconCss = BitIconInfo.From(CaretDownIcon, CaretDownIconName ?? "ChevronRight bit-ico-r90")?.GetCssClasses();
+    var responsiveCloseIconCss = BitIconInfo.From(ResponsiveCloseIcon, ResponsiveCloseIconName ?? "Cancel")?.GetCssClasses();
+    var searchBoxIconCss = BitIconInfo.From(SearchBoxIcon, SearchBoxIconName ?? "Search")?.GetCssClasses();
+    var searchBoxClearIconCss = BitIconInfo.From(SearchBoxClearIcon, SearchBoxClearIconName ?? "Cancel")?.GetCssClasses();
+    var comboBoxAddButtonIconCss = BitIconInfo.From(ComboBoxAddButtonIcon, ComboBoxAddButtonIconName ?? "Add")?.GetCssClasses();
+    var itemCheckIconCss = BitIconInfo.From(ItemCheckIcon, ItemCheckIconName ?? "Accept")?.GetCssClasses();
+}
+
+@if ((Options ?? ChildContent) is not null)
+{
+    <CascadingValue Value="this" IsFixed="true">
+        <div style="display:none" hidden>@(Options ?? ChildContent)</div>
+    </CascadingValue>
+}
+
+<div @ref="RootElement" @attributes="HtmlAttributes"
+     id="@_Id"
+     style="@StyleBuilder.Value"
+     class="@ClassBuilder.Value"
+     dir="@Dir?.ToString().ToLower()"
+     aria-owns="@(IsOpen? _calloutId : null)">
+    @if (LabelTemplate is not null)
+    {
+        <label id="@_labelId">
+            @LabelTemplate
+        </label>
+    }
+    else if (Label.HasValue())
+    {
+        <label style="@Styles?.Label" class="bit-drp-lbl @Classes?.Label" id="@_labelId">
+            @Label
+        </label>
+    }
+
+    <div @onclick="HandleOnClick"
+         title="@Title"
+         role="combobox"
+         id="@_dropdownId"
+         style="@Styles?.Container"
+         class="bit-drp-wrp @Classes?.Container"
+         tabindex=@(IsEnabled ? 0 : -1)
+         aria-haspopup="listbox"
+         aria-required="@Required"
+         aria-disabled="@(IsEnabled is false)"
+         aria-expanded=@(IsOpen ? "true" : "false")
+         aria-labelledby="@GetDropdownAriaLabelledby"
+         aria-controls="@(IsOpen? _calloutId : null)">
+
+        @if (PrefixTemplate is not null)
+        {
+            @PrefixTemplate
+        }
+        else if (Prefix.HasValue())
+        {
+            <span style="@Styles?.PrefixContainer" class="bit-drp-pre @Classes?.PrefixContainer">
+                <span style="@Styles?.Prefix" class="@Classes?.Prefix">
+                    @Prefix
+                </span>
+            </span>
+        }
+
+        <span id="@_dropdownTextContainerId"
+              style="@Styles?.TextContainer"
+              class="bit-drp-tcn @Classes?.TextContainer"
+              aria-live="polite"
+              aria-atomic="true"
+              aria-invalid="false">
+
+            @if (Chips)
+            {
+                @foreach (var item in _selectedItems)
+                {
+                    <span style="@Styles?.Chips" class="bit-drp-chp @Classes?.Chips">
+                        @GetText(item)
+                        <i style="@Styles?.ChipsRemoveIcon" class="@chipsRemoveIconCss @Classes?.ChipsRemoveIcon" @onclick="() => HandleOnClickUnselectItem(item)" @onclick:stopPropagation />
+                    </span>
+                }
+            }
+            else if (_selectedItems.Count > 0)
+            {
+                @if (TextTemplate is not null)
+                {
+                    @TextTemplate(this)
+                }
+                else
+                {
+                    @GetText()
+                }
+            }
+
+            @if (Combo)
+            {
+                <input @ref="_comboBoxInputRef"
+                       @onkeydown="@HandleOnKeyDown"
+                       @oninput="@HandleOnComboInput"
+                       style="@Styles?.ComboBoxInput"
+                       class="bit-drp-inp @Classes?.ComboBoxInput"
+                       type="text"
+                       role="combobox"
+                       value="@_searchText"
+                       aria-label="@AriaLabel"
+                       placeholder="@(_selectedItems.Count > 0 ? "" : Placeholder)"
+                       autocomplete="@BitAutoCompleteValue.NewPassword"
+                       disabled="@(IsEnabled is false)" />
+            }
+            else if (_selectedItems.Count == 0)
+            {
+                @if (PlaceholderTemplate is not null)
+                {
+                    @PlaceholderTemplate(this)
+                }
+                else
+                {
+                    @Placeholder
+                }
+            }
+        </span>
+
+        @if (IsEnabled && ShowClearButton && _selectedItems.Count > 0)
+        {
+            <button @onclick="HandleOnClearClick" @onclick:stopPropagation
+                    type="button"
+                    style="@Styles?.ClearButton"
+                    class="bit-drp-icn bit-drp-clr @Classes?.ClearButton">
+                <i class="@clearButtonIconCss" />
+            </button>
+        }
+
+        <span class="bit-drp-icn">
+            @if (CaretDownTemplate is not null)
+            {
+                @CaretDownTemplate
+            }
+            else
+            {
+                <i aria-hidden="true"
+                   style="@Styles?.CaretDownIcon"
+                   class="@caretDownIconCss @Classes?.CaretDownIcon" />
+            }
+        </span>
+
+        @if (SuffixTemplate is not null)
+        {
+            @SuffixTemplate
+        }
+        else if (Suffix.HasValue())
+        {
+            <span style="@Styles?.SuffixContainer" class="bit-drp-suf @Classes?.SuffixContainer">
+                <span style="@Styles?.Suffix" class="@Classes?.Suffix">
+                    @Suffix
+                </span>
+            </span>
+        }
+    </div>
+    <select @attributes="InputHtmlAttributes" class="bit-input-hidden" multiple>
+        @foreach (var item in _selectedItems)
+        {
+            <option value="@GetValue(item)" selected>@GetText(item)</option>
+        }
+    </select>
+</div>
 
-@{
-    var chipsRemoveIconCss = BitIconInfo.From(ChipsRemoveIcon, ChipsRemoveIconName ?? "Cancel")?.GetCssClasses();
-    var clearButtonIconCss = BitIconInfo.From(ClearButtonIcon, ClearButtonIconName ?? "Cancel")?.GetCssClasses();
-    var caretDownIconCss = BitIconInfo.From(CaretDownIcon, CaretDownIconName ?? "ChevronRight bit-ico-r90")?.GetCssClasses();
-    var responsiveCloseIconCss = BitIconInfo.From(ResponsiveCloseIcon, ResponsiveCloseIconName ?? "Cancel")?.GetCssClasses();
-    var searchBoxIconCss = BitIconInfo.From(SearchBoxIcon, SearchBoxIconName ?? "Search")?.GetCssClasses();
-    var searchBoxClearIconCss = BitIconInfo.From(SearchBoxClearIcon, SearchBoxClearIconName ?? "Cancel")?.GetCssClasses();
-    var comboBoxAddButtonIconCss = BitIconInfo.From(ComboBoxAddButtonIcon, ComboBoxAddButtonIconName ?? "Add")?.GetCssClasses();
-    var itemCheckIconCss = BitIconInfo.From(ItemCheckIcon, ItemCheckIconName ?? "Accept")?.GetCssClasses();
-}
-
-@if ((Options ?? ChildContent) is not null)
-{
-    <CascadingValue Value="this" IsFixed="true">
-        <div style="display:none" hidden>@(Options ?? ChildContent)</div>
-    </CascadingValue>
-}
-
-<div @ref="RootElement" @attributes="HtmlAttributes"
-     id="@_Id"
-     style="@StyleBuilder.Value"
-     class="@ClassBuilder.Value"
-     dir="@Dir?.ToString().ToLower()"
-     aria-owns="@(IsOpen? _calloutId : null)">
-    @if (LabelTemplate is not null)
-    {
-        <label id="@_labelId">
-            @LabelTemplate
-        </label>
-    }
-    else if (Label.HasValue())
-    {
-        <label style="@Styles?.Label" class="bit-drp-lbl @Classes?.Label" id="@_labelId">
-            @Label
-        </label>
-    }
-
-    <div @onclick="HandleOnClick"
-         title="@Title"
-         role="combobox"
-         id="@_dropdownId"
-         style="@Styles?.Container"
-         class="bit-drp-wrp @Classes?.Container"
-         tabindex=@(IsEnabled ? 0 : -1)
-         aria-haspopup="listbox"
-         aria-required="@Required"
-         aria-disabled="@(IsEnabled is false)"
-         aria-expanded=@(IsOpen ? "true" : "false")
-         aria-labelledby="@GetDropdownAriaLabelledby"
-         aria-controls="@(IsOpen? _calloutId : null)">
-
-        @if (PrefixTemplate is not null)
-        {
-            @PrefixTemplate
-        }
-        else if (Prefix.HasValue())
-        {
-            <span style="@Styles?.PrefixContainer" class="bit-drp-pre @Classes?.PrefixContainer">
-                <span style="@Styles?.Prefix" class="@Classes?.Prefix">
-                    @Prefix
-                </span>
-            </span>
-        }
-
-        <span id="@_dropdownTextContainerId"
-              style="@Styles?.TextContainer"
-              class="bit-drp-tcn @Classes?.TextContainer"
-              aria-live="polite"
-              aria-atomic="true"
-              aria-invalid="false">
-
-            @if (Chips)
-            {
-                @foreach (var item in _selectedItems)
-                {
-                    <span style="@Styles?.Chips" class="bit-drp-chp @Classes?.Chips">
-                        @GetText(item)
-                        <i style="@Styles?.ChipsRemoveIcon" class="@chipsRemoveIconCss @Classes?.ChipsRemoveIcon" @onclick="() => HandleOnClickUnselectItem(item)" @onclick:stopPropagation />
-                    </span>
-                }
-            }
-            else if (_selectedItems.Count > 0)
-            {
-                @if (TextTemplate is not null)
-                {
-                    @TextTemplate(this)
-                }
-                else
-                {
-                    @GetText()
-                }
-            }
-
-            @if (Combo)
-            {
-                <input @ref="_comboBoxInputRef"
-                       @onkeydown="@HandleOnKeyDown"
-                       @oninput="@HandleOnComboInput"
-                       style="@Styles?.ComboBoxInput"
-                       class="bit-drp-inp @Classes?.ComboBoxInput"
-                       type="text"
-                       role="combobox"
-                       value="@_searchText"
-                       aria-label="@AriaLabel"
-                       placeholder="@(_selectedItems.Count > 0 ? "" : Placeholder)"
-                       autocomplete="@BitAutoCompleteValue.NewPassword"
-                       disabled="@(IsEnabled is false)" />
-            }
-            else if (_selectedItems.Count == 0)
-            {
-                @if (PlaceholderTemplate is not null)
-                {
-                    @PlaceholderTemplate(this)
-                }
-                else
-                {
-                    @Placeholder
-                }
-            }
-        </span>
-
-        @if (IsEnabled && ShowClearButton && _selectedItems.Count > 0)
-        {
-            <button @onclick="HandleOnClearClick" @onclick:stopPropagation
-                    type="button"
-                    style="@Styles?.ClearButton"
-                    class="bit-drp-icn bit-drp-clr @Classes?.ClearButton">
-                <i class="@clearButtonIconCss" />
-            </button>
-        }
-
-        <span class="bit-drp-icn">
-            @if (CaretDownTemplate is not null)
-            {
-                @CaretDownTemplate
-            }
-            else
-            {
-                <i aria-hidden="true"
-                   style="@Styles?.CaretDownIcon"
-                   class="@caretDownIconCss @Classes?.CaretDownIcon" />
-            }
-        </span>
-
-        @if (SuffixTemplate is not null)
-        {
-            @SuffixTemplate
-        }
-        else if (Suffix.HasValue())
-        {
-            <span style="@Styles?.SuffixContainer" class="bit-drp-suf @Classes?.SuffixContainer">
-                <span style="@Styles?.Suffix" class="@Classes?.Suffix">
-                    @Suffix
-                </span>
-            </span>
-        }
-    </div>
-
-    <div @onclick="CloseCallout"
-         style="display:@(IsOpen ? "block" : "none");@Styles?.Overlay"
-         class="bit-drp-ovl @Classes?.Overlay"></div>
-
-    <div id="@_calloutId"
-         tabindex="0"
-         role="listbox"
-         style="@Styles?.Callout"
-         class="@GetCalloutCssClasses()"
-         aria-labelledby="@_labelId">
-
-        @if (Responsive)
-        {
-            <div style="@Styles?.ResponsiveLabelContainer"
-                 class="bit-drp-rlc @Classes?.ResponsiveLabelContainer">
-                @if (LabelTemplate is not null)
-                {
-                    @LabelTemplate
-                }
-                else if (Label.HasValue())
-                {
-                    <label style="@Styles?.ResponsiveLabel"
-                           class="bit-drp-lbl @Classes?.ResponsiveLabel">
-                        @Label
-                    </label>
-                }
-
-                <button @onclick="CloseCallout"
-                        type="button"
-                        title="Close"
-                        aria-label="Close"
-                        aria-hidden="Close"
-                        aria-describedby="Close"
-                        style="@Styles?.ResponsiveCloseButton"
-                        class="bit-drp-cls @Classes?.ResponsiveCloseButton">
-                    <span>
-                        <i style="@Styles?.ResponsiveCloseIcon"
-                           class="@responsiveCloseIconCss @Classes?.ResponsiveCloseIcon" />
-                    </span>
-                </button>
-            </div>
-        }
-
-        @if (CalloutHeaderTemplate is not null)
-        {
-            <div id="@_headerId">@CalloutHeaderTemplate</div>
-        }
-
-        @if (ShowSearchBox && Combo is false)
-        {
-            <div style="@Styles?.SearchBoxContainer"
-                 class="@GetSearchBoxClasses() @Classes?.SearchBoxContainer">
-                <div aria-hidden="true"
-                     style="@Styles?.SearchBoxIconContainer"
-                     class="bit-drp-sic @Classes?.SearchBoxIconContainer">
-                    <i aria-hidden="true"
-                       style="@Styles?.SearchBoxIcon"
-                       class="@searchBoxIconCss @Classes?.SearchBoxIcon" />
-                </div>
-                <input @ref="_searchInputRef" @onfocusin="HandleSearchBoxFocusIn" @onfocusout="HandleSearchBoxFocusOut" @oninput="@HandleFilterChange"
-                       type="text"
-                       role="searchbox"
-                       value="@_searchText"
-                       aria-label="Search text"
-                       placeholder="@SearchBoxPlaceholder"
-                       style="@Styles?.SearchBoxInput"
-                       class="bit-drp-sin @Classes?.SearchBoxInput" />
-
-                @if (_searchText.HasValue())
-                {
-                    <div style="@Styles?.SearchBoxClearButtonContainer"
-                         class="bit-drp-sbcc @Classes?.SearchBoxClearButtonContainer">
-                        <button @onclick="HandleSearchBoxOnClear"
-                                type="button"
-                                style="@Styles?.SearchBoxClearButton"
-                                class="bit-drp-sbc @Classes?.SearchBoxClearButton"
-                                aria-hidden="true"
-                                aria-label="Clear text"
-                                disabled="@(_searchText.HasNoValue())">
-                            <span>
-                                <i aria-hidden="true"
-                                   style="@Styles?.SearchBoxClearIcon"
-                                   class="@searchBoxClearIconCss @Classes?.SearchBoxClearIcon" />
-                            </span>
-                        </button>
-                    </div>
-                }
-            </div>
-        }
-
-        @if (Combo && _isResponsiveMode)
-        {
-            <div style="@Styles?.ResponsiveComboInputContainer"
-                 class="bit-drp-cbi @Classes?.ResponsiveComboInputContainer">
-                <input @ref="_comboBoxInputResponsiveRef" @onkeydown="@((k) => HandleOnKeyDown(k))" @oninput="@HandleOnComboInput"
-                       style="@Styles?.ComboBoxInput"
-                       class="bit-drp-icb @Classes?.ComboBoxInput"
-                       type="text"
-                       role="combobox"
-                       value="@_searchText"
-                       aria-label="@AriaLabel"
-                       placeholder="@Placeholder"
-                       autocomplete="@BitAutoCompleteValue.NewPassword"
-                       disabled="@(IsEnabled is false)" />
-
-                <button @onclick="HandleOnAddItemComboClick" @onclick:stopPropagation
-                        type="button"
-                        style="@Styles?.ResponsiveComboAddButton"
-                        class="bit-drp-icn bit-drp-cai @Classes?.ResponsiveComboAddButton">
-                    <i class="@comboBoxAddButtonIconCss" />
-                </button>
-            </div>
-        }
-
-        <div id="@_scrollContainerId"
-             style="@Styles?.ScrollContainer"
-             class="bit-drp-scn @Classes?.ScrollContainer">
-            @if (Virtualize)
-            {
-                if (ItemsProvider is null)
-                {
-                    <Virtualize Items="GetSearchedItems()"
-                                Context="item"
-                                ItemSize="ItemSize"
-                                OverscanCount="OverscanCount"
-                                Placeholder="VirtualizePlaceholder">
-                        <_BitDropdownItem Item="item" Dropdown="this" ItemCheckIconCss="@itemCheckIconCss" />
-                    </Virtualize>
-                }
-                else
-                {
-                    <Virtualize @ref="_virtualizeElement"
-                                Context="item"
-                                OverscanCount="OverscanCount"
-                                Placeholder="VirtualizePlaceholder"
-                                ItemsProvider="InternalItemsProvider">
-                        <_BitDropdownItem Item="item" Dropdown="this" ItemCheckIconCss="@itemCheckIconCss" />
-                    </Virtualize>
-                }
-            }
-            else
-            {
-                @foreach (var item in GetSearchedItems())
-                {
-                    <_BitDropdownItem Item="item" Dropdown="this" ItemCheckIconCss="@itemCheckIconCss" />
-                }
-            }
-        </div>
-
-        @if (CalloutFooterTemplate is not null)
-        {
-            <div id="@_footerId">@CalloutFooterTemplate</div>
-        }
-
-    </div>
-
-    <select @attributes="InputHtmlAttributes" class="bit-input-hidden" multiple>
-        @foreach (var item in _selectedItems)
-        {
-            <option value="@GetValue(item)" selected>@GetText(item)</option>
-        }
-    </select>
-</div>
\ No newline at end of file
+<div @onclick="CloseCallout"
+     style="display:@(IsOpen ? "block" : "none");@Styles?.Overlay"
+     id="@_overlayId"
+     class="bit-drp-ovl @Classes?.Overlay"></div>
+
+<div id="@_calloutId"
+     tabindex="0"
+     role="listbox"
+     style="@Styles?.Callout"
+     class="@GetCalloutCssClasses()"
+     aria-labelledby="@_labelId">
+
+    @if (Responsive)
+    {
+        <div style="@Styles?.ResponsiveLabelContainer"
+             class="bit-drp-rlc @Classes?.ResponsiveLabelContainer">
+            @if (LabelTemplate is not null)
+            {
+                @LabelTemplate
+            }
+            else if (Label.HasValue())
+            {
+                <label style="@Styles?.ResponsiveLabel"
+                       class="bit-drp-lbl @Classes?.ResponsiveLabel">
+                    @Label
+                </label>
+            }
+
+            <button @onclick="CloseCallout"
+                    type="button"
+                    title="Close"
+                    aria-label="Close"
+                    aria-hidden="Close"
+                    aria-describedby="Close"
+                    style="@Styles?.ResponsiveCloseButton"
+                    class="bit-drp-cls @Classes?.ResponsiveCloseButton">
+                <span>
+                    <i style="@Styles?.ResponsiveCloseIcon"
+                       class="@responsiveCloseIconCss @Classes?.ResponsiveCloseIcon" />
+                </span>
+            </button>
+        </div>
+    }
+
+    @if (CalloutHeaderTemplate is not null)
+    {
+        <div id="@_headerId">@CalloutHeaderTemplate</div>
+    }
+
+    @if (ShowSearchBox && Combo is false)
+    {
+        <div style="@Styles?.SearchBoxContainer"
+             class="@GetSearchBoxClasses() @Classes?.SearchBoxContainer">
+            <div aria-hidden="true"
+                 style="@Styles?.SearchBoxIconContainer"
+                 class="bit-drp-sic @Classes?.SearchBoxIconContainer">
+                <i aria-hidden="true"
+                   style="@Styles?.SearchBoxIcon"
+                   class="@searchBoxIconCss @Classes?.SearchBoxIcon" />
+            </div>
+            <input @ref="_searchInputRef" @onfocusin="HandleSearchBoxFocusIn" @onfocusout="HandleSearchBoxFocusOut" @oninput="@HandleFilterChange"
+                   type="text"
+                   role="searchbox"
+                   value="@_searchText"
+                   aria-label="Search text"
+                   placeholder="@SearchBoxPlaceholder"
+                   style="@Styles?.SearchBoxInput"
+                   class="bit-drp-sin @Classes?.SearchBoxInput" />
+
+            @if (_searchText.HasValue())
+            {
+                <div style="@Styles?.SearchBoxClearButtonContainer"
+                     class="bit-drp-sbcc @Classes?.SearchBoxClearButtonContainer">
+                    <button @onclick="HandleSearchBoxOnClear"
+                            type="button"
+                            style="@Styles?.SearchBoxClearButton"
+                            class="bit-drp-sbc @Classes?.SearchBoxClearButton"
+                            aria-hidden="true"
+                            aria-label="Clear text"
+                            disabled="@(_searchText.HasNoValue())">
+                        <span>
+                            <i aria-hidden="true"
+                               style="@Styles?.SearchBoxClearIcon"
+                               class="@searchBoxClearIconCss @Classes?.SearchBoxClearIcon" />
+                        </span>
+                    </button>
+                </div>
+            }
+        </div>
+    }
+
+    @if (Combo && _isResponsiveMode)
+    {
+        <div style="@Styles?.ResponsiveComboInputContainer"
+             class="bit-drp-cbi @Classes?.ResponsiveComboInputContainer">
+            <input @ref="_comboBoxInputResponsiveRef" @onkeydown="@((k) => HandleOnKeyDown(k))" @oninput="@HandleOnComboInput"
+                   style="@Styles?.ComboBoxInput"
+                   class="bit-drp-icb @Classes?.ComboBoxInput"
+                   type="text"
+                   role="combobox"
+                   value="@_searchText"
+                   aria-label="@AriaLabel"
+                   placeholder="@Placeholder"
+                   autocomplete="@BitAutoCompleteValue.NewPassword"
+                   disabled="@(IsEnabled is false)" />
+
+            <button @onclick="HandleOnAddItemComboClick" @onclick:stopPropagation
+                    type="button"
+                    style="@Styles?.ResponsiveComboAddButton"
+                    class="bit-drp-icn bit-drp-cai @Classes?.ResponsiveComboAddButton">
+                <i class="@comboBoxAddButtonIconCss" />
+            </button>
+        </div>
+    }
+
+    <div id="@_scrollContainerId"
+         style="@Styles?.ScrollContainer"
+         class="bit-drp-scn @Classes?.ScrollContainer">
+        @if (Virtualize)
+        {
+            if (ItemsProvider is null)
+            {
+                <Virtualize Items="GetSearchedItems()"
+                            Context="item"
+                            ItemSize="ItemSize"
+                            OverscanCount="OverscanCount"
+                            Placeholder="VirtualizePlaceholder">
+                    <_BitDropdownItem Item="item" Dropdown="this" ItemCheckIconCss="@itemCheckIconCss" />
+                </Virtualize>
+            }
+            else
+            {
+                <Virtualize @ref="_virtualizeElement"
+                            Context="item"
+                            OverscanCount="OverscanCount"
+                            Placeholder="VirtualizePlaceholder"
+                            ItemsProvider="InternalItemsProvider">
+                    <_BitDropdownItem Item="item" Dropdown="this" ItemCheckIconCss="@itemCheckIconCss" />
+                </Virtualize>
+            }
+        }
+        else
+        {
+            @foreach (var item in GetSearchedItems())
+            {
+                <_BitDropdownItem Item="item" Dropdown="this" ItemCheckIconCss="@itemCheckIconCss" />
+            }
+        }
+    </div>
+
+    @if (CalloutFooterTemplate is not null)
+    {
+        <div id="@_footerId">@CalloutFooterTemplate</div>
+    }
+
+</div>
+
\ No newline at end of file
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 41d23ea83f..d144ade00c 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
@@ -24,6 +24,7 @@ namespace Bit.BlazorUI;
     private string _headerId = string.Empty;
     private string _footerId = string.Empty;
     private string _calloutId = string.Empty;
+    private string _overlayId = string.Empty;
     private string _dropdownId = string.Empty;
 
     private ElementReference _searchInputRef;
@@ -941,6 +942,7 @@ protected override async Task OnInitializedAsync()
     {
         _dropdownId = $"Dropdown-{UniqueId}";
         _calloutId = $"{_dropdownId}-callout";
+        _overlayId = $"{_dropdownId}-overlay";
         _scrollContainerId = $"{_dropdownId}-scroll-container";
         _headerId = $"{_dropdownId}-header";
         _footerId = $"{_dropdownId}-footer";
@@ -1339,6 +1341,7 @@ private async Task ToggleCallout()
             component: null,
             calloutId: _calloutId,
             callout: null,
+            overlayId: _overlayId,
             isCalloutOpen: IsOpen,
             responsiveMode: Responsive ? BitResponsiveMode.Panel : BitResponsiveMode.None,
             dropDirection: DropDirection,
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor
index f1300295bd..172edf1fd4 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor
@@ -112,53 +112,58 @@
 
     @if ((SuggestItems?.Any() ?? false) || SuggestItemsProvider is not null)
     {
-        if (Modeless is false)
-        {
-            <div @onclick="CloseCallout"
-                 class="bit-srb-ovl @Classes?.Overlay"
-                 style="display:@(_isOpen ? "block" : "none");@Styles?.Overlay" />
-        }
+    }
+</div>
 
-        <div id="@_calloutId"
-             tabindex="0"
-             role="listbox"
-             style="@Styles?.Callout"
-             class="bit-srb-cal @Classes?.Callout">
+@if ((SuggestItems?.Any() ?? false) || SuggestItemsProvider is not null)
+{
+    if (Modeless is false)
+    {
+        <div @onclick="CloseCallout"
+             id="@_overlayId"
+             class="bit-srb-ovl @Classes?.Overlay"
+             style="display:@(_isOpen ? "block" : "none");@Styles?.Overlay" />
+    }
 
-            <div id="@_scrollContainerId"
-                 style="@Styles?.ScrollContainer"
-                 class="bit-srb-scn @Classes?.ScrollContainer">
-                @foreach (var text in _viewSuggestedItems)
-                {
-                    var isSelected = GetIsSelected(text);
-                    <div style="@Styles?.SuggestItemWrapper" class="@Classes?.SuggestItemWrapper">
-                        <button @onclick="() => HandleOnSuggestedItemClick(text)"
-                                tabindex="0"
-                                type="button"
-                                role="option"
-                                title="@text"
-                                aria-label="@text"
-                                aria-setsize="@GetTotalItems()"
-                                style="@Styles?.SuggestItemButton"
-                                aria-posinset="@GetItemPosInSet(text)"
-                                aria-selected="@(isSelected ? "true" : "false")"
-                                class="bit-srb-itm@(isSelected ? " bit-srb-sel" : "") @Classes?.SuggestItemButton">
-                            @if (SuggestItemTemplate is not null)
-                            {
-                                @SuggestItemTemplate(text)
-                            }
-                            else
-                            {
-                                <span style="@Styles?.SuggestItemText"
-                                      class="@Classes?.SuggestItemText">
-                                    @text
-                                </span>
-                            }
-                        </button>
-                    </div>
-                }
-            </div>
+    <div id="@_calloutId"
+         tabindex="0"
+         role="listbox"
+         style="@Styles?.Callout"
+         class="bit-srb-cal @Classes?.Callout">
 
+        <div id="@_scrollContainerId"
+             style="@Styles?.ScrollContainer"
+             class="bit-srb-scn @Classes?.ScrollContainer">
+            @foreach (var text in _viewSuggestedItems)
+            {
+                var isSelected = GetIsSelected(text);
+                <div style="@Styles?.SuggestItemWrapper" class="@Classes?.SuggestItemWrapper">
+                    <button @onclick="() => HandleOnSuggestedItemClick(text)"
+                            tabindex="0"
+                            type="button"
+                            role="option"
+                            title="@text"
+                            aria-label="@text"
+                            aria-setsize="@GetTotalItems()"
+                            style="@Styles?.SuggestItemButton"
+                            aria-posinset="@GetItemPosInSet(text)"
+                            aria-selected="@(isSelected ? "true" : "false")"
+                            class="bit-srb-itm@(isSelected ? " bit-srb-sel" : "") @Classes?.SuggestItemButton">
+                        @if (SuggestItemTemplate is not null)
+                        {
+                            @SuggestItemTemplate(text)
+                        }
+                        else
+                        {
+                            <span style="@Styles?.SuggestItemText"
+                                  class="@Classes?.SuggestItemText">
+                                @text
+                            </span>
+                        }
+                    </button>
+                </div>
+            }
         </div>
-    }
-</div>
\ No newline at end of file
+
+    </div>
+}
\ No newline at end of file
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs
index 7f91c79d31..9ad6184bf3 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs
@@ -13,6 +13,7 @@ public partial class BitSearchBox : BitTextInputBase<string?>
     private int _selectedIndex = -1;
     private string _inputId = string.Empty;
     private string _calloutId = string.Empty;
+    private string _overlayId = string.Empty;
     private List<string> _viewSuggestedItems = [];
     private string _scrollContainerId = string.Empty;
     private CancellationTokenSource? _cancellationTokenSource;
@@ -351,6 +352,7 @@ protected override void RegisterCssStyles()
     protected override async Task OnInitializedAsync()
     {
         _calloutId = $"BitSearchBox-{UniqueId}-callout";
+        _overlayId = $"BitSearchBox-{UniqueId}-overlay";
         _scrollContainerId = $"BitSearchBox-{UniqueId}-scroll-container";
         _inputId = $"BitSearchBox-{UniqueId}-input";
 
@@ -599,6 +601,7 @@ await _js.BitCalloutToggleCallout(
             component: null,
             calloutId: _calloutId,
             callout: null,
+            overlayId: _overlayId,
             isCalloutOpen: _isOpen,
             responsiveMode: BitResponsiveMode.None,
             dropDirection: BitDropDirection.TopAndBottom,
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.razor
index 785636e557..0595be5eef 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.razor
@@ -66,10 +66,6 @@
                 }
             </div>
         </div>
-
-        <div @onclick="CloseCallout"
-             style="display:@(IsOpen ? "block" : "none"); @Styles?.Overlay"
-             class="bit-tpc-ovl @Classes?.Overlay"></div>
     }
     else
     {
@@ -84,113 +80,121 @@
                readonly="@(AllowTextInput is false)" />
     }
 
-    <div id="@_calloutId"
-         style="@Styles?.Callout"
-         class="@GetCalloutCssClasses()">
-        <div style="@Styles?.CalloutContainer" class="bit-tpc-cac @Classes?.CalloutContainer" role="dialog" @attributes=@CalloutHtmlAttributes aria-label="@CalloutAriaLabel">
-            <div style="@Styles?.TimeInputContainer" class="bit-tpc-tic @Classes?.TimeInputContainer">
-                <div style="@Styles?.HourInputContainer" class="bit-tpc-tpr @Classes?.HourInputContainer">
-                    <button @onpointerup="HandleOnPointerUpOrOut"
-                            @onpointerout="HandleOnPointerUpOrOut"
-                            @onpointerdown="() => HandleOnPointerDown(true, true)"
-                            type="button"
-                            style="@Styles?.IncreaseHourButton"
-                            class="bit-tpc-tbt @Classes?.IncreaseHourButton"
-                            disabled="@(IsEnabled is false)">
-                        <i style="@Styles?.IncreaseHourIcon" class="@increaseHourIcon?.GetCssClasses() @Classes?.IncreaseHourIcon" aria-hidden="true" />
-                    </button>
-                    <input @ref="_inputHourRef"
-                           @bind="@_hourView"
-                           @bind:event="oninput"
-                           @onfocus="HandleOnHourFocus"
-                           min="0"
-                           max="@(TimeFormat == BitTimeFormat.TwelveHours ? "12" : "23")"
-                           type="number"
-                           inputmode="numeric"
-                           readonly="@ReadOnly"
-                           style="@Styles?.HourInput"
-                           class="bit-tpc-tin @Classes?.HourInput"
-                           autocomplete="@BitAutoCompleteValue.NewPassword"
-                           disabled="@(IsEnabled is false)" />
-                    <button @onpointerup="HandleOnPointerUpOrOut"
-                            @onpointerout="HandleOnPointerUpOrOut"
-                            @onpointerdown="() => HandleOnPointerDown(false, true)"
-                            type="button"
-                            style="@Styles?.DecreaseHourButton"
-                            class="bit-tpc-tbt @Classes?.DecreaseHourButton"
-                            disabled="@(IsEnabled is false)">
-                        <i style="@Styles?.DecreaseHourIcon" class="@decreaseHourIcon?.GetCssClasses() @Classes?.DecreaseHourIcon" aria-hidden="true" />
-                    </button>
-                </div>
-                <div style="@Styles?.HourMinuteSeparator" class="bit-tpc-tpr bit-tpc-tdv @Classes?.HourMinuteSeparator">:</div>
-                <div style="@Styles?.MinuteInputContainer" class="bit-tpc-tpr @Classes?.MinuteInputContainer">
-                    <button @onpointerup="HandleOnPointerUpOrOut"
-                            @onpointerout="HandleOnPointerUpOrOut"
-                            @onpointerdown="() => HandleOnPointerDown(true, false)"
-                            type="button"
-                            style="@Styles?.IncreaseMinuteButton"
-                            class="bit-tpc-tbt @Classes?.IncreaseMinuteButton"
-                            disabled="@(IsEnabled is false)">
-                        <i style="@Styles?.IncreaseMinuteIcon" class="@increaseMinuteIcon?.GetCssClasses() @Classes?.IncreaseMinuteIcon" aria-hidden="true" />
-                    </button>
-                    <input @ref="_inputMinuteRef"
-                           @bind="@_minuteView"
-                           @bind:event="oninput"
-                           @onfocus="HandleOnMinuteFocus"
-                           min="0"
-                           max="59"
-                           type="number"
-                           inputmode="numeric"
-                           readonly="@ReadOnly"
-                           style="@Styles?.MinuteInput"
-                           class="bit-tpc-tin @Classes?.MinuteInput"
-                           autocomplete="@BitAutoCompleteValue.NewPassword"
-                           disabled="@(IsEnabled is false)" />
-                    <button @onpointerup="HandleOnPointerUpOrOut"
-                            @onpointerout="HandleOnPointerUpOrOut"
-                            @onpointerdown="() => HandleOnPointerDown(false, false)"
-                            type="button"
-                            style="@Styles?.DecreaseMinuteButton"
-                            class="bit-tpc-tbt @Classes?.DecreaseMinuteButton"
-                            disabled="@(IsEnabled is false)">
-                        <i style="@Styles?.DecreaseMinuteIcon" class="@decreaseMinuteIcon?.GetCssClasses() @Classes?.DecreaseMinuteIcon" aria-hidden="true" />
-                    </button>
-                </div>
-            </div>
-
-            @if (TimeFormat == BitTimeFormat.TwelveHours)
-            {
-                <div style="@Styles?.AmPmContainer" class="bit-tpc-tpr bit-tpc-am-pm @Classes?.AmPmContainer">
-                    <button @onclick="HandleOnAmClick"
-                            type="button"
-                            style="@Styles?.AmButton"
-                            class="bit-tpc-tbt bit-tpc-bam @(IsAm() is true ? "bit-tpc-bns" : string.Empty) @Classes?.AmButton"
-                            disabled="@(IsEnabled is false)">
-                        @_culture.DateTimeFormat.AMDesignator
-                    </button>
+</div>
 
-                    <button @onclick="HandleOnPmClick"
-                            type="button"
-                            style="@Styles?.PmButton"
-                            class="bit-tpc-tbt bit-tpc-bpm @(IsAm() is false ? "bit-tpc-bns" : string.Empty) @Classes?.PmButton"
-                            disabled="@(IsEnabled is false)">
-                        @_culture.DateTimeFormat.PMDesignator
-                    </button>
-                </div>
-            }
+@if (Standalone is false)
+{
+    <div @onclick="CloseCallout"
+         style="display:@(IsOpen ? "block" : "none"); @Styles?.Overlay"
+         id="@_overlayId"
+     class="bit-tpc-ovl @Classes?.Overlay"></div>
+}
 
-            @if (ShowCloseButton && Standalone is false)
-            {
-                <button @onclick="CloseCallout"
+<div id="@_calloutId"
+     style="@Styles?.Callout"
+     class="@GetCalloutCssClasses()">
+    <div style="@Styles?.CalloutContainer" class="bit-tpc-cac @Classes?.CalloutContainer" role="dialog" @attributes=@CalloutHtmlAttributes aria-label="@CalloutAriaLabel">
+        <div style="@Styles?.TimeInputContainer" class="bit-tpc-tic @Classes?.TimeInputContainer">
+            <div style="@Styles?.HourInputContainer" class="bit-tpc-tpr @Classes?.HourInputContainer">
+                <button @onpointerup="HandleOnPointerUpOrOut"
+                        @onpointerout="HandleOnPointerUpOrOut"
+                        @onpointerdown="() => HandleOnPointerDown(true, true)"
+                        type="button"
+                        style="@Styles?.IncreaseHourButton"
+                        class="bit-tpc-tbt @Classes?.IncreaseHourButton"
+                        disabled="@(IsEnabled is false)">
+                    <i style="@Styles?.IncreaseHourIcon" class="@increaseHourIcon?.GetCssClasses() @Classes?.IncreaseHourIcon" aria-hidden="true" />
+                </button>
+                <input @ref="_inputHourRef"
+                       @bind="@_hourView"
+                       @bind:event="oninput"
+                       @onfocus="HandleOnHourFocus"
+                       min="0"
+                       max="@(TimeFormat == BitTimeFormat.TwelveHours ? "12" : "23")"
+                       type="number"
+                       inputmode="numeric"
+                       readonly="@ReadOnly"
+                       style="@Styles?.HourInput"
+                       class="bit-tpc-tin @Classes?.HourInput"
+                       autocomplete="@BitAutoCompleteValue.NewPassword"
+                       disabled="@(IsEnabled is false)" />
+                <button @onpointerup="HandleOnPointerUpOrOut"
+                        @onpointerout="HandleOnPointerUpOrOut"
+                        @onpointerdown="() => HandleOnPointerDown(false, true)"
+                        type="button"
+                        style="@Styles?.DecreaseHourButton"
+                        class="bit-tpc-tbt @Classes?.DecreaseHourButton"
+                        disabled="@(IsEnabled is false)">
+                    <i style="@Styles?.DecreaseHourIcon" class="@decreaseHourIcon?.GetCssClasses() @Classes?.DecreaseHourIcon" aria-hidden="true" />
+                </button>
+            </div>
+            <div style="@Styles?.HourMinuteSeparator" class="bit-tpc-tpr bit-tpc-tdv @Classes?.HourMinuteSeparator">:</div>
+            <div style="@Styles?.MinuteInputContainer" class="bit-tpc-tpr @Classes?.MinuteInputContainer">
+                <button @onpointerup="HandleOnPointerUpOrOut"
+                        @onpointerout="HandleOnPointerUpOrOut"
+                        @onpointerdown="() => HandleOnPointerDown(true, false)"
+                        type="button"
+                        style="@Styles?.IncreaseMinuteButton"
+                        class="bit-tpc-tbt @Classes?.IncreaseMinuteButton"
+                        disabled="@(IsEnabled is false)">
+                    <i style="@Styles?.IncreaseMinuteIcon" class="@increaseMinuteIcon?.GetCssClasses() @Classes?.IncreaseMinuteIcon" aria-hidden="true" />
+                </button>
+                <input @ref="_inputMinuteRef"
+                       @bind="@_minuteView"
+                       @bind:event="oninput"
+                       @onfocus="HandleOnMinuteFocus"
+                       min="0"
+                       max="59"
+                       type="number"
+                       inputmode="numeric"
+                       readonly="@ReadOnly"
+                       style="@Styles?.MinuteInput"
+                       class="bit-tpc-tin @Classes?.MinuteInput"
+                       autocomplete="@BitAutoCompleteValue.NewPassword"
+                       disabled="@(IsEnabled is false)" />
+                <button @onpointerup="HandleOnPointerUpOrOut"
+                        @onpointerout="HandleOnPointerUpOrOut"
+                        @onpointerdown="() => HandleOnPointerDown(false, false)"
                         type="button"
-                        style="@Styles?.CloseButton"
-                        class="bit-tpc-tbt bit-tpc-cbn @Classes?.CloseButton"
-                        title="@CloseButtonTitle"
-                        aria-label="@CloseButtonTitle">
-                    <i style="@Styles?.CloseButtonIcon" class="@closeIcon?.GetCssClasses() @Classes?.CloseButtonIcon" aria-hidden="true" />
+                        style="@Styles?.DecreaseMinuteButton"
+                        class="bit-tpc-tbt @Classes?.DecreaseMinuteButton"
+                        disabled="@(IsEnabled is false)">
+                    <i style="@Styles?.DecreaseMinuteIcon" class="@decreaseMinuteIcon?.GetCssClasses() @Classes?.DecreaseMinuteIcon" aria-hidden="true" />
                 </button>
-            }
+            </div>
         </div>
-    </div>
 
+        @if (TimeFormat == BitTimeFormat.TwelveHours)
+        {
+            <div style="@Styles?.AmPmContainer" class="bit-tpc-tpr bit-tpc-am-pm @Classes?.AmPmContainer">
+                <button @onclick="HandleOnAmClick"
+                        type="button"
+                        style="@Styles?.AmButton"
+                        class="bit-tpc-tbt bit-tpc-bam @(IsAm() is true ? "bit-tpc-bns" : string.Empty) @Classes?.AmButton"
+                        disabled="@(IsEnabled is false)">
+                    @_culture.DateTimeFormat.AMDesignator
+                </button>
+
+                <button @onclick="HandleOnPmClick"
+                        type="button"
+                        style="@Styles?.PmButton"
+                        class="bit-tpc-tbt bit-tpc-bpm @(IsAm() is false ? "bit-tpc-bns" : string.Empty) @Classes?.PmButton"
+                        disabled="@(IsEnabled is false)">
+                    @_culture.DateTimeFormat.PMDesignator
+                </button>
+            </div>
+        }
+
+        @if (ShowCloseButton && Standalone is false)
+        {
+            <button @onclick="CloseCallout"
+                    type="button"
+                    style="@Styles?.CloseButton"
+                    class="bit-tpc-tbt bit-tpc-cbn @Classes?.CloseButton"
+                    title="@CloseButtonTitle"
+                    aria-label="@CloseButtonTitle">
+                <i style="@Styles?.CloseButtonIcon" class="@closeIcon?.GetCssClasses() @Classes?.CloseButtonIcon" aria-hidden="true" />
+            </button>
+        }
+    </div>
 </div>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.razor.cs
index a9c491b174..bf0210a48c 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.razor.cs
@@ -12,6 +12,7 @@ public partial class BitTimePicker : BitInputBase<TimeSpan?>
     private string? _labelId;
     private string? _inputId;
     private string _calloutId = string.Empty;
+    private string _overlayId = string.Empty;
     private string _timePickerId = string.Empty;
     private ElementReference _inputHourRef = default!;
     private ElementReference _inputMinuteRef = default!;
@@ -409,6 +410,7 @@ protected override void OnInitialized()
         _labelId = $"BitTimePicker-{UniqueId}-label";
         _inputId = $"BitTimePicker-{UniqueId}-input";
         _calloutId = $"BitTimePicker-{UniqueId}-callout";
+        _overlayId = $"BitTimePicker-{UniqueId}-overlay";
 
         _hour = CurrentValue?.Hours;
         _minute = CurrentValue?.Minutes;
@@ -514,6 +516,7 @@ await _js.BitCalloutToggleCallout(
             component: null,
             calloutId: _calloutId,
             callout: null,
+            overlayId: _overlayId,
             isCalloutOpen: IsOpen,
             responsiveMode: Responsive ? BitResponsiveMode.Top : BitResponsiveMode.None,
             dropDirection: DropDirection,
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor
index a9b437ed90..462049356e 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor
@@ -1,231 +1,232 @@
-@namespace Bit.BlazorUI
-@inherits BitComponentBase
-@typeparam TItem
+@namespace Bit.BlazorUI
+@inherits BitComponentBase
+@typeparam TItem
+
+<CascadingValue Value="this" IsFixed="true">
+    <div style="display:none" hidden>@(Options ?? ChildContent)</div>
+</CascadingValue>
+
+<div @ref="RootElement" @attributes="HtmlAttributes"
+     id="@_Id"
+     style="@StyleBuilder.Value"
+     class="@ClassBuilder.Value"
+     dir="@Dir?.ToString().ToLower()"
+     aria-label="@AriaLabel">
+    <ul style="@Styles?.ItemContainer" class="bit-brc-icn @Classes?.ItemContainer">
+        @foreach (var (item, idx) in _displayItems.Select((item, index) => (item, index)))
+        {
+            <li @key="@GetItemKey(item, idx.ToString())" style="@Styles?.ItemWrapper" class="@Classes?.ItemWrapper">
+                @if (idx == _internalOverflowIndex && _overflowItems.Any())
+                {
+                    <button id="@_overflowAnchorId"
+                            type="button"
+                            style="@Styles?.OverflowButton"
+                            class="bit-brc-obt @Classes?.OverflowButton"
+                            aria-label="@OverflowAriaLabel" @onclick="OpenCallout"
+                            disabled="@(IsEnabled is false)">
+                        @if (OverflowIconTemplate is not null)
+                        {
+                            @OverflowIconTemplate
+                        }
+                        else
+                        {
+                            var overflowIcon = BitIconInfo.From(OverflowIcon, OverflowIconName ?? "More");
+                            <i style="@Styles?.OverflowButtonIcon" class="@overflowIcon?.GetCssClasses() @Classes?.OverflowButtonIcon" />
+                        }
+                    </button>
+                }
+                else
+                {
+                    var template = GetTemplate(item);
+                    if (GetItemHref(item).HasValue())
+                    {
+                        <a href="@GetItemHref(item)"
+                           aria-current="@(GetIsSelected(item) ? "page" : null)"
+                           style="@GetStyles(item, false)"
+                           class="bit-brc-itm @GetClasses(item, false)">
+                            @if (template is not null)
+                            {
+                                @template(item)
+                            }
+                            else if (ItemTemplate is not null)
+                            {
+                                @ItemTemplate(item)
+                            }
+                            else
+                            {
+                                var icon = GetIcon(item);
+                                @if (icon is not null)
+                                {
+                                    <i style="@Styles?.ItemIcon" class="@icon.GetCssClasses() @Classes?.ItemIcon" />
+                                }
+                                <span style="@Styles?.ItemText" class="@Classes?.ItemText">@GetItemText(item)</span>
+                            }
+                        </a>
+                    }
+                    else if (OnItemClick.HasDelegate)
+                    {
+                        <button type="button"
+                                aria-current="@(GetIsSelected(item) ? "page" : null)"
+                                disabled="@(GetIsEnabled(item) is false)"
+                                style="@GetStyles(item, false)"
+                                class="bit-brc-itm @GetClasses(item, true)" @onclick="() => HandleOnItemClick(item)">
+                            @if (template is not null)
+                            {
+                                @template(item)
+                            }
+                            else if (ItemTemplate is not null)
+                            {
+                                @ItemTemplate(item)
+                            }
+                            else
+                            {
+                                var icon = GetIcon(item);
+                                @if (icon is not null)
+                                {
+                                    <i style="@Styles?.ItemIcon" class="@icon.GetCssClasses() @Classes?.ItemIcon" />
+                                }
+                                <span style="@Styles?.ItemText" class="@Classes?.ItemText">@GetItemText(item)</span>
+                            }
+                        </button>
+                    }
+                    else 
+                    {
+                        <span aria-current="@(GetIsSelected(item) ? "page" : null)"
+                              style="@GetStyles(item, false)"
+                              class="bit-brc-nii @GetClasses(item, false)">
+                            @if (template is not null)
+                            {
+                                @template(item)
+                            }
+                            else if (ItemTemplate is not null)
+                            {
+                                @ItemTemplate(item)
+                            }
+                            else
+                            {
+                                var icon = GetIcon(item);
+                                @if (icon is not null)
+                                {
+                                    <i style="@Styles?.ItemIcon" class="@icon.GetCssClasses() @Classes?.ItemIcon" />
+                                }
+                                <span style="@Styles?.ItemText" class="@Classes?.ItemText">@GetItemText(item)</span>
+                            }
+                        </span>
+                    }
+                }
+            </li>
+
+            @if (idx != _displayItems.Count - 1)
+            {
+                <li style="@Styles?.Divider" class="@Classes?.Divider">
+                    @if (DividerIconTemplate is not null)
+                    {
+                        @DividerIconTemplate
+                    }
+                    else
+                    {
+                        var dividerIcon = BitIconInfo.From(DividerIcon, DividerIconName ?? "ChevronRight bit-brc-trd");
+                        <i style="@Styles?.DividerIcon"
+                           class="bit-brc-div @dividerIcon?.GetCssClasses() @Classes?.DividerIcon" />
+                    }
+                </li>
+            }
+        }
+    </ul>
+
+</div>
 
-<CascadingValue Value="this" IsFixed="true">
-    <div style="display:none" hidden>@(Options ?? ChildContent)</div>
-</CascadingValue>
+<div @onclick="CloseCallout" @onclick:stopPropagation
+     style="display:@(_isCalloutOpen ? "block" : "none");@Styles?.Overlay"
+     id="@_overlayId"
+     class="bit-brc-ovl @Classes?.Overlay"></div>
 
-<div @ref="RootElement" @attributes="HtmlAttributes"
-     id="@_Id"
-     style="@StyleBuilder.Value"
-     class="@ClassBuilder.Value"
-     dir="@Dir?.ToString().ToLower()"
-     aria-label="@AriaLabel">
-
-    <div @onclick="CloseCallout" @onclick:stopPropagation
-         style="display:@(_isCalloutOpen ? "block" : "none");@Styles?.Overlay"
-         class="bit-brc-ovl @Classes?.Overlay"></div>
-
-    <ul style="@Styles?.ItemContainer" class="bit-brc-icn @Classes?.ItemContainer">
-        @foreach (var (item, idx) in _displayItems.Select((item, index) => (item, index)))
-        {
-            <li @key="@GetItemKey(item, idx.ToString())" style="@Styles?.ItemWrapper" class="@Classes?.ItemWrapper">
-                @if (idx == _internalOverflowIndex && _overflowItems.Any())
-                {
-                    <button id="@_overflowAnchorId"
-                            type="button"
-                            style="@Styles?.OverflowButton"
-                            class="bit-brc-obt @Classes?.OverflowButton"
-                            aria-label="@OverflowAriaLabel" @onclick="OpenCallout"
-                            disabled="@(IsEnabled is false)">
-                        @if (OverflowIconTemplate is not null)
-                        {
-                            @OverflowIconTemplate
-                        }
-                        else
-                        {
-                            var overflowIcon = BitIconInfo.From(OverflowIcon, OverflowIconName ?? "More");
-                            <i style="@Styles?.OverflowButtonIcon" class="@overflowIcon?.GetCssClasses() @Classes?.OverflowButtonIcon" />
-                        }
-                    </button>
-                }
-                else
-                {
-                    var template = GetTemplate(item);
-                    if (GetItemHref(item).HasValue())
-                    {
-                        <a href="@GetItemHref(item)"
-                           aria-current="@(GetIsSelected(item) ? "page" : null)"
-                           style="@GetStyles(item, false)"
-                           class="bit-brc-itm @GetClasses(item, false)">
-                            @if (template is not null)
-                            {
-                                @template(item)
-                            }
-                            else if (ItemTemplate is not null)
-                            {
-                                @ItemTemplate(item)
-                            }
-                            else
-                            {
-                                var icon = GetIcon(item);
-                                @if (icon is not null)
-                                {
-                                    <i style="@Styles?.ItemIcon" class="@icon.GetCssClasses() @Classes?.ItemIcon" />
-                                }
-                                <span style="@Styles?.ItemText" class="@Classes?.ItemText">@GetItemText(item)</span>
-                            }
-                        </a>
-                    }
-                    else if (OnItemClick.HasDelegate)
-                    {
-                        <button type="button"
-                                aria-current="@(GetIsSelected(item) ? "page" : null)"
-                                disabled="@(GetIsEnabled(item) is false)"
-                                style="@GetStyles(item, false)"
-                                class="bit-brc-itm @GetClasses(item, true)" @onclick="() => HandleOnItemClick(item)">
-                            @if (template is not null)
-                            {
-                                @template(item)
-                            }
-                            else if (ItemTemplate is not null)
-                            {
-                                @ItemTemplate(item)
-                            }
-                            else
-                            {
-                                var icon = GetIcon(item);
-                                @if (icon is not null)
-                                {
-                                    <i style="@Styles?.ItemIcon" class="@icon.GetCssClasses() @Classes?.ItemIcon" />
-                                }
-                                <span style="@Styles?.ItemText" class="@Classes?.ItemText">@GetItemText(item)</span>
-                            }
-                        </button>
-                    }
-                    else 
-                    {
-                        <span aria-current="@(GetIsSelected(item) ? "page" : null)"
-                              style="@GetStyles(item, false)"
-                              class="bit-brc-nii @GetClasses(item, false)">
-                            @if (template is not null)
-                            {
-                                @template(item)
-                            }
-                            else if (ItemTemplate is not null)
-                            {
-                                @ItemTemplate(item)
-                            }
-                            else
-                            {
-                                var icon = GetIcon(item);
-                                @if (icon is not null)
-                                {
-                                    <i style="@Styles?.ItemIcon" class="@icon.GetCssClasses() @Classes?.ItemIcon" />
-                                }
-                                <span style="@Styles?.ItemText" class="@Classes?.ItemText">@GetItemText(item)</span>
-                            }
-                        </span>
-                    }
-                }
-            </li>
-
-            @if (idx != _displayItems.Count - 1)
-            {
-                <li style="@Styles?.Divider" class="@Classes?.Divider">
-                    @if (DividerIconTemplate is not null)
-                    {
-                        @DividerIconTemplate
-                    }
-                    else
-                    {
-                        var dividerIcon = BitIconInfo.From(DividerIcon, DividerIconName ?? "ChevronRight bit-brc-trd");
-                        <i style="@Styles?.DividerIcon"
-                           class="bit-brc-div @dividerIcon?.GetCssClasses() @Classes?.DividerIcon" />
-                    }
-                </li>
-            }
-        }
-    </ul>
-
-    <div id="@_calloutId"
-         tabindex="0"
-         role="listbox"
-         style="@Styles?.Callout"
-         class="bit-brc-cal @Classes?.Callout">
-        <ul style="@Styles?.CalloutContainer" id="@_scrollContainerId" class="bit-brc-scn @Classes?.CalloutContainer">
-            @foreach (var (item, idx) in _overflowItems.Select((item, idx) => (item, idx)))
-            {
-                var overflowTemplate = GetOverflowTemplate(item);
-                <li @key="@GetItemKey(item, $"overflow-{idx}")" style="@Styles?.OverflowItemWrapper" class="@Classes?.OverflowItemWrapper">
-                    @if (GetItemHref(item).HasValue())
-                    {
-                        <a href="@GetItemHref(item)"
-                           aria-current="@(GetIsSelected(item) ? "page" : null)"
-                           style="@GetStyles(item, true)"
-                           class="bit-brc-ofi @GetClasses(item, true)">
-                            @if (overflowTemplate is not null)
-                            {
-                                @overflowTemplate(item)
-                            }
-                            else if (OverflowTemplate is not null)
-                            {
-                                @OverflowTemplate(item)
-                            }
-                            else
-                            {
-                                var icon = GetIcon(item);
-                                @if (icon is not null)
-                                {
-                                    <i style="@Styles?.OverflowItemIcon" class="@icon.GetCssClasses() @Classes?.OverflowItemIcon" />
-                                }
-                                <span style="@Styles?.OverflowItemText" class="@Classes?.OverflowItemText">@GetItemText(item)</span>
-                            }
-                        </a>
-                    }
-                    else if (OnItemClick.HasDelegate)
-                    {
-                        <button type="button"
-                                aria-current="@(GetIsSelected(item) ? "page" : null)"
-                                disabled="@(GetIsEnabled(item) is false)"
-                                style="@GetStyles(item, true)"
-                                class="bit-brc-ofi @GetClasses(item, true)" @onclick="() => HandleOnItemClick(item)">
-                            @if (overflowTemplate is not null)
-                            {
-                                @overflowTemplate(item)
-                            }
-                            else if (OverflowTemplate is not null)
-                            {
-                                @OverflowTemplate(item)
-                            }
-                            else
-                            {
-                                var icon = GetIcon(item);
-                                @if (icon is not null)
-                                {
-                                    <i style="@Styles?.OverflowItemIcon" class="@icon.GetCssClasses() @Classes?.OverflowItemIcon" />
-                                }
-                                <span style="@Styles?.OverflowItemText" class="@Classes?.OverflowItemText">@GetItemText(item)</span>
-                            }
-                        </button>
-                    }
-                    else
-                    {
-                        <span aria-current="@(GetIsSelected(item) ? "page" : null)"
-                              style="@GetStyles(item, true)"
-                              class="bit-brc-ofn @GetClasses(item, true)">
-                              @if (overflowTemplate is not null)
-                              {
-                                  @overflowTemplate(item)
-                              }
-                              else if (OverflowTemplate is not null)
-                              {
-                                  @OverflowTemplate(item)
-                              }
-                              else
-                              {
-                                  var icon = GetIcon(item);
-                                  @if (icon is not null)
-                                  {
-                                      <i style="@Styles?.OverflowItemIcon" class="@icon.GetCssClasses() @Classes?.OverflowItemIcon" />
-                                  }
-                                  <span style="@Styles?.OverflowItemText" class="@Classes?.OverflowItemText">@GetItemText(item)</span>
-                              }
-                        </span>
-                    }
-                </li>
-            }
-        </ul>
-    </div>
-</div>
\ No newline at end of file
+<div id="@_calloutId"
+     tabindex="0"
+     role="listbox"
+     style="@Styles?.Callout"
+     class="bit-brc-cal @Classes?.Callout">
+    <ul style="@Styles?.CalloutContainer" id="@_scrollContainerId" class="bit-brc-scn @Classes?.CalloutContainer">
+        @foreach (var (item, idx) in _overflowItems.Select((item, idx) => (item, idx)))
+        {
+            var overflowTemplate = GetOverflowTemplate(item);
+            <li @key="@GetItemKey(item, $"overflow-{idx}")" style="@Styles?.OverflowItemWrapper" class="@Classes?.OverflowItemWrapper">
+                @if (GetItemHref(item).HasValue())
+                {
+                    <a href="@GetItemHref(item)"
+                       aria-current="@(GetIsSelected(item) ? "page" : null)"
+                       style="@GetStyles(item, true)"
+                       class="bit-brc-ofi @GetClasses(item, true)">
+                        @if (overflowTemplate is not null)
+                        {
+                            @overflowTemplate(item)
+                        }
+                        else if (OverflowTemplate is not null)
+                        {
+                            @OverflowTemplate(item)
+                        }
+                        else
+                        {
+                            var icon = GetIcon(item);
+                            @if (icon is not null)
+                            {
+                                <i style="@Styles?.OverflowItemIcon" class="@icon.GetCssClasses() @Classes?.OverflowItemIcon" />
+                            }
+                            <span style="@Styles?.OverflowItemText" class="@Classes?.OverflowItemText">@GetItemText(item)</span>
+                        }
+                    </a>
+                }
+                else if (OnItemClick.HasDelegate)
+                {
+                    <button type="button"
+                            aria-current="@(GetIsSelected(item) ? "page" : null)"
+                            disabled="@(GetIsEnabled(item) is false)"
+                            style="@GetStyles(item, true)"
+                            class="bit-brc-ofi @GetClasses(item, true)" @onclick="() => HandleOnItemClick(item)">
+                        @if (overflowTemplate is not null)
+                        {
+                            @overflowTemplate(item)
+                        }
+                        else if (OverflowTemplate is not null)
+                        {
+                            @OverflowTemplate(item)
+                        }
+                        else
+                        {
+                            var icon = GetIcon(item);
+                            @if (icon is not null)
+                            {
+                                <i style="@Styles?.OverflowItemIcon" class="@icon.GetCssClasses() @Classes?.OverflowItemIcon" />
+                            }
+                            <span style="@Styles?.OverflowItemText" class="@Classes?.OverflowItemText">@GetItemText(item)</span>
+                        }
+                    </button>
+                }
+                else
+                {
+                    <span aria-current="@(GetIsSelected(item) ? "page" : null)"
+                          style="@GetStyles(item, true)"
+                          class="bit-brc-ofn @GetClasses(item, true)">
+                          @if (overflowTemplate is not null)
+                          {
+                              @overflowTemplate(item)
+                          }
+                          else if (OverflowTemplate is not null)
+                          {
+                              @OverflowTemplate(item)
+                          }
+                          else
+                          {
+                              var icon = GetIcon(item);
+                              @if (icon is not null)
+                              {
+                                  <i style="@Styles?.OverflowItemIcon" class="@icon.GetCssClasses() @Classes?.OverflowItemIcon" />
+                              }
+                              <span style="@Styles?.OverflowItemText" class="@Classes?.OverflowItemText">@GetItemText(item)</span>
+                          }
+                    </span>
+                }
+            </li>
+        }
+    </ul>
+</div>
\ No newline at end of file
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor.cs
index 813ebfa115..a238d94e94 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor.cs
@@ -15,6 +15,7 @@ public partial class BitBreadcrumb<TItem> : BitComponentBase where TItem : class
     private DotNetObjectReference<BitBreadcrumb<TItem>> _dotnetObj = default!;
 
     private string _calloutId = default!;
+    private string _overlayId = default!;
     private string _overflowAnchorId = default!;
     private string _scrollContainerId = default!;
 
@@ -166,6 +167,7 @@ protected override void RegisterCssStyles()
     protected override Task OnInitializedAsync()
     {
         _calloutId = $"BitBreadcrumb-{UniqueId}-callout";
+        _overlayId = $"BitBreadcrumb-{UniqueId}-overlay";
         _overflowAnchorId = $"BitBreadcrumb-{UniqueId}-overflow-anchor";
         _scrollContainerId = $"BitBreadcrumb-{UniqueId}-scroll-container";
 
@@ -638,6 +640,7 @@ await _js.BitCalloutToggleCallout(
             component: null,
             calloutId: _calloutId,
             callout: null,
+            overlayId: _overlayId,
             isCalloutOpen: _isCalloutOpen,
             responsiveMode: BitResponsiveMode.None,
             dropDirection: BitDropDirection.TopAndBottom,
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor b/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor
index 8bda87aba3..be77313fa5 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor
@@ -1,52 +1,53 @@
-@namespace Bit.BlazorUI
-@inherits BitComponentBase
+@namespace Bit.BlazorUI
+@inherits BitComponentBase
+
+<div @ref="RootElement" @attributes="HtmlAttributes"
+     id="@_Id"
+     type="button"
+     aria-label="@AriaLabel"
+     style="@StyleBuilder.Value"
+     class="@ClassBuilder.Value"
+     dir="@Dir?.ToString().ToLower()"
+     tabindex="@(IsEnabled ? 0 : -1)">
+    <button @onclick="HandleOnClick"
+            type="button"
+            style="@Styles?.Button"
+            class="bit-drm-btn @Classes?.Button">
+        @if (Template is not null)
+        {
+            @Template
+        }
+        else
+        {
+            var icon = BitIconInfo.From(Icon, IconName);
+
+            if (icon is not null)
+            {
+                <i style="@Styles?.Icon" class="bit-drm-icn @icon.GetCssClasses() @Classes?.Icon" />
+            }
+
+            @if (Text.HasValue())
+            {
+                <div style="@Styles?.Text" class="bit-drm-txt @Classes?.Text">
+                    @Text
+                </div>
+            }
+
+            var chevronIcon = BitIconInfo.From(ChevronDownIcon, ChevronDownIconName ?? "ChevronRight bit-ico-r90");
+
+            <i style="@Styles?.ChevronDown"
+               class="@chevronIcon?.GetCssClasses() @Classes?.ChevronDown" />
+        }
+    </button>
+</div>
 
-<div @ref="RootElement" @attributes="HtmlAttributes"
-     id="@_Id"
-     type="button"
-     aria-label="@AriaLabel"
-     style="@StyleBuilder.Value"
-     class="@ClassBuilder.Value"
-     dir="@Dir?.ToString().ToLower()"
-     tabindex="@(IsEnabled ? 0 : -1)">
-    <button @onclick="HandleOnClick"
-            type="button"
-            style="@Styles?.Button"
-            class="bit-drm-btn @Classes?.Button">
-        @if (Template is not null)
-        {
-            @Template
-        }
-        else
-        {
-            var icon = BitIconInfo.From(Icon, IconName);
+<div @onclick="CloseCallout" @onclick:stopPropagation
+     style="display:@(IsOpen ? "block" : "none");@Styles?.Overlay"
+     id="@_overlayId"
+     class="bit-drm-ovl @Classes?.Overlay"></div>
 
-            if (icon is not null)
-            {
-                <i style="@Styles?.Icon" class="bit-drm-icn @icon.GetCssClasses() @Classes?.Icon" />
-            }
-
-            @if (Text.HasValue())
-            {
-                <div style="@Styles?.Text" class="bit-drm-txt @Classes?.Text">
-                    @Text
-                </div>
-            }
-
-            var chevronIcon = BitIconInfo.From(ChevronDownIcon, ChevronDownIconName ?? "ChevronRight bit-ico-r90");
-
-            <i style="@Styles?.ChevronDown"
-               class="@chevronIcon?.GetCssClasses() @Classes?.ChevronDown" />
-        }
-    </button>
-
-    <div @onclick="CloseCallout" @onclick:stopPropagation
-         style="display:@(IsOpen ? "block" : "none");@Styles?.Overlay"
-         class="bit-drm-ovl @Classes?.Overlay"></div>
-
-    <div id="@_calloutId"
-         style="@Styles?.Callout"
-         class="@GetCalloutCssClasses()">
-        @(Body ?? ChildContent)
-    </div>
-</div>
\ No newline at end of file
+<div id="@_calloutId"
+     style="@Styles?.Callout"
+     class="@GetCalloutCssClasses()">
+    @(Body ?? ChildContent)
+</div>
\ No newline at end of file
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs
index e3c765e94c..860a556412 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs
@@ -6,6 +6,7 @@ namespace Bit.BlazorUI;
 public partial class BitDropMenu : BitComponentBase
 {
     private string _calloutId = default!;
+    private string _overlayId = default!;
     private DotNetObjectReference<BitDropMenu> _dotnetObj = default!;
 
 
@@ -191,6 +192,7 @@ protected override void RegisterCssStyles()
     protected override void OnInitialized()
     {
         _calloutId = $"BitDropMenu-{UniqueId}-callout";
+        _overlayId = $"BitDropMenu-{UniqueId}-overlay";
 
         base.OnInitialized();
     }
@@ -251,6 +253,7 @@ await _js.BitCalloutToggleCallout(
             component: null,
             calloutId: _calloutId,
             callout: null,
+            overlayId: _overlayId,
             isCalloutOpen: IsOpen,
             responsiveMode: Responsive ? BitResponsiveMode.Panel : BitResponsiveMode.None,
             dropDirection: BitDropDirection.TopAndBottom,
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Callout/BitCallout.razor b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Callout/BitCallout.razor
index 0c3212de27..3978a4aaa2 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Callout/BitCallout.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Callout/BitCallout.razor
@@ -16,15 +16,16 @@
             @Anchor
         </div>
     }
+</div>
 
-    <div @onclick="CloseCallout" @onclick:stopPropagation
-         style="display:@(IsOpen ? "block" : "none");@Styles?.Overlay"
-         class="bit-clo-ovl @Classes?.Overlay">
-    </div>
+<div @onclick="CloseCallout" @onclick:stopPropagation
+     id="@_overlayId"
+     style="display:@(IsOpen ? "block" : "none");@Styles?.Overlay"
+     class="bit-clo-ovl @Classes?.Overlay">
+</div>
 
-    <div id="@_contentId"
-         style="@Styles?.Content"
-         class="bit-clo-cal @Classes?.Content">
-        @(Content ?? ChildContent)
-    </div>
+<div id="@_contentId"
+     style="@Styles?.Content"
+     class="bit-clo-cal @Classes?.Content">
+    @(Content ?? ChildContent)
 </div>
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 0322223613..a0fc142d17 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Callout/BitCallout.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Callout/BitCallout.razor.cs
@@ -7,6 +7,7 @@ public partial class BitCallout : BitComponentBase
 {
     private string _anchorId = default!;
     private string _contentId = default!;
+    private string _overlayId = default!;
     private DotNetObjectReference<BitCallout> _dotnetObj = default!;
 
 
@@ -152,6 +153,7 @@ protected override async Task OnInitializedAsync()
     {
         _anchorId = $"BitCallout-{UniqueId}-anchor";
         _contentId = $"BitCallout-{UniqueId}-content";
+        _overlayId = $"BitCallout-{UniqueId}-overlay";
 
         await base.OnInitializedAsync();
     }
@@ -196,6 +198,7 @@ await _js.BitCalloutToggleCallout(
             component: AnchorEl is null ? null : AnchorEl(),
             calloutId: _contentId,
             callout: null,
+            overlayId: _overlayId,
             isCalloutOpen: IsOpen,
             responsiveMode: ResponsiveMode ?? BitResponsiveMode.None,
             dropDirection: Direction ?? BitDropDirection.TopAndBottom,
diff --git a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/CalloutsJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/CalloutsJsRuntimeExtensions.cs
index a094be804a..94fa958f01 100644
--- a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/CalloutsJsRuntimeExtensions.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/CalloutsJsRuntimeExtensions.cs
@@ -11,6 +11,7 @@ internal static class CalloutsJsRuntimeExtensions
         ElementReference? component,
         string calloutId,
         ElementReference? callout,
+        string overlayId,
         bool isCalloutOpen,
         BitResponsiveMode responsiveMode,
         BitDropDirection dropDirection,
@@ -30,6 +31,7 @@ internal static class CalloutsJsRuntimeExtensions
             component,
             calloutId,
             callout,
+            overlayId,
             isCalloutOpen,
             responsiveMode,
             dropDirection,
diff --git a/src/BlazorUI/Bit.BlazorUI/Scripts/Callouts.ts b/src/BlazorUI/Bit.BlazorUI/Scripts/Callouts.ts
index a6644f20c9..836531dac9 100644
--- a/src/BlazorUI/Bit.BlazorUI/Scripts/Callouts.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Scripts/Callouts.ts
@@ -3,6 +3,13 @@ namespace BitBlazorUI {
         private static readonly DEFAULT_CALLOUT: BitCallout = { calloutId: '' };
 
         public static current = Callouts.DEFAULT_CALLOUT;
+        private static _calloutOriginalParents: Map<string, {
+            parent: Element,
+            nextSibling: Node | null,
+            overlay: HTMLElement | null,
+            overlayParent: Element | null,
+            overlayNextSibling: Node | null
+        }> = new Map();
 
         public static toggle(
             dotnetObj: DotNetObject,
@@ -10,6 +17,7 @@ namespace BitBlazorUI {
             component: HTMLElement | null,
             calloutId: string,
             callout: HTMLElement | null,
+            overlayId: string,
             isCalloutOpen: boolean,
             responsiveMode: BitResponsiveMode,
             dropDirection: BitDropDirection,
@@ -38,10 +46,13 @@ namespace BitBlazorUI {
                 } else {
                     callout.style.display = 'none';
                 }
+                Callouts.restoreCalloutToOriginalParent(calloutId, callout);
                 Callouts.reset();
                 return false;
             }
 
+            Callouts.moveCalloutToBody(calloutId, callout, overlayId);
+
             const scrollContainer = (scrollContainerId
                 ? document.getElementById(scrollContainerId)
                 : { style: {} as any, getBoundingClientRect: () => ({ y: 0 }) })!;
@@ -157,6 +168,46 @@ namespace BitBlazorUI {
             Callouts.current = Callouts.DEFAULT_CALLOUT;
         }
 
+        private static moveCalloutToBody(calloutId: string, callout: HTMLElement, overlayId: string) {
+            if (callout.parentElement === document.body) return;
+
+            const overlay = overlayId ? document.getElementById(overlayId) : null;
+
+            Callouts._calloutOriginalParents.set(calloutId, {
+                parent: callout.parentElement!,
+                nextSibling: callout.nextSibling,
+                overlay: overlay,
+                overlayParent: overlay?.parentElement ?? null,
+                overlayNextSibling: overlay?.nextSibling ?? null
+            });
+
+            document.body.appendChild(callout);
+            if (overlay) {
+                document.body.appendChild(overlay);
+            }
+        }
+
+        private static restoreCalloutToOriginalParent(calloutId: string, callout: HTMLElement) {
+            const original = Callouts._calloutOriginalParents.get(calloutId);
+            if (!original) return;
+
+            Callouts._calloutOriginalParents.delete(calloutId);
+
+            if (original.nextSibling) {
+                original.parent.insertBefore(callout, original.nextSibling);
+            } else {
+                original.parent.appendChild(callout);
+            }
+
+            if (original.overlay && original.overlayParent) {
+                if (original.overlayNextSibling) {
+                    original.overlayParent.insertBefore(original.overlay, original.overlayNextSibling);
+                } else {
+                    original.overlayParent.appendChild(original.overlay);
+                }
+            }
+        }
+
         public static replaceCurrent(callout?: BitCallout) {
             callout = callout || Callouts.DEFAULT_CALLOUT;
             const current = Callouts.current;
@@ -169,7 +220,10 @@ namespace BitBlazorUI {
             //close the previous one
             if (callout.calloutId !== current.calloutId) {
                 const previousCallout = document.getElementById(current.calloutId);
-                previousCallout && (previousCallout.style.display = 'none');
+                if (previousCallout) {
+                    previousCallout.style.display = 'none';
+                    Callouts.restoreCalloutToOriginalParent(current.calloutId, previousCallout);
+                }
 
                 const overlay = current.overlayId && document.getElementById(current.overlayId);
                 overlay && (overlay.style.display = 'none');

From 1f2a760c27ad7dede89e012883ef0fd74cb45d57 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Wed, 6 May 2026 00:01:10 +0330
Subject: [PATCH 2/2] fix tests

---
 .../Components/Navs/DropMenu/BitDropMenuTests.cs     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/DropMenu/BitDropMenuTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/DropMenu/BitDropMenuTests.cs
index 6f01a7762f..dc28d85d06 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/DropMenu/BitDropMenuTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/DropMenu/BitDropMenuTests.cs
@@ -72,14 +72,14 @@ public void BitDropMenuShouldRespectHtmlAttributes()
 
         component.MarkupMatches(@"
 <div data-val-test=""bit"" type=""button"" class=""bit-drm"" tabindex=""0"" id:ignore>
-    <button type=""button"" class=""bit-drm-btn"">
+    <button type=""button"" class=""bit-drm-btn "">
         <div class=""bit-drm-txt "">Menu</div>
-        <i class=""bit-icon bit-icon--ChevronRight bit-ico-r90""></i>
+        <i class=""bit-icon bit-icon--ChevronRight bit-ico-r90 ""></i>
     </button>
-    <div style=""display:none;"" class=""bit-drm-ovl ""></div>
-    <div class=""bit-drm-cal bit-drm-end"" id:ignore>
-        <div>Body</div>
-    </div>
+</div>
+<div style=""display:none;"" class=""bit-drm-ovl "" id:ignore></div>
+<div class=""bit-drm-cal bit-drm-end"" id:ignore>
+    <div>Body</div>
 </div>");
 
         var markup = component.Markup;